I am using Infragistics igxGridComponent. I am trying to style the look of selected rows.
I have tried setting my own css classes:
.selected-row {
background-clor:red;
color:white;
font:bold;
}
However, I am not really sure how to apply them conditionally. Should I be using ngClass or there is another syntax to this?
You can use the igx-grid-theme SASS function to create a custom theme:
$custom-theme: igx-grid-theme(
$row-selected-background: green,
$row-selected-text-color: #000,
$row-selected-hover-background: red
);
And then pass it to the igx-grid SASS mixin:
::ng-deep {
#include igx-grid($custom-theme);
}
Here you can find an example.
Related
I was able to successfully implement the Mapael map into my HTML page, and was able to configure the hover fill color to my liking via the JavaScript code.
I'm trying to change the fill color of specific individual countries.
I've worked briefly with SVGs before, and I used to open up a file with a text editor and update certain elements that way. Is there a different way to do this?
I was wondering if this is possible with Mapael?
and Where does one grab the SVG file from?
I downloaded and deploy the repository version (jQuery-Mapael-2.2.0).
See screenshot of the files and folders.
svg code file
You have to use Mapael special function/params:
$(function () {
$("yourMapElementSelector").mapael({
// Customize some areas of the map
areas: {
"US": {
attrs: {
fill: "#488402"
}
, attrsHover: {
fill: "#a4e100"
}
}
},
});
});
I am not sure how Mapael works, but normally what I would do with the SVG is add IDs to each country, something like:
<g id="france">
or
<path id="france">
Or whatever shapes you use and then just define a CSS class similar to this:
/* if the paths are inside a group */
.svgactive path {
fill: red;
}
/* if the paths are standalone */
path.svgactive {
fill: red;
}
And just toggle the class .svgactive on your specific id inside the SVG file.
Is there a way to manage the font size of the function definition hover on ST3?
Here's what I see:
I've tried adding font.size to the theme for this element which is popup_control html_popup according to docs but it doesn't appear to accept this.
Update: I found that pasting this CSS in my color theme plist addresses the list/links but not the title. I have tried to use a plugin like ScopeHunter to find the context of the 'definitions' title but it doesn't work for popups.
<key>popupCss</key>
<string><![CDATA[
html {
background-color: #404238;
color: #F8F8F2;
}
a {
color: #66D9EF;
}
.error, .deleted {
color: #F92672;
}
.success, .inserted {
color: #A6E22E;
}
.warning, .modified {
color: #FD971F;
}
]]></string>
The best thing to do is look at the HTML that is used in the popup, to help decide what CSS selectors to use in the color scheme's popupCss to change the appearance of the popup.
In this case, the code is in Packages/Default/symbol.py, which you can view using https://packagecontrol.io/packages/PackageResourceViewer:
<body id=show-definitions>
<h1>Definition%s:</h1>
<p>
...
</p>
</body>
So you can use the following CSS in your popupCSS to target it and change the color of the "Definitions" text, for example - to prove the selector is working (the official recommendation is to use the id from the body tag):
#show-definitions h1 {
color: #b3bc20;
}
however, specifying the font-size seems to have no effect, at least in build 3154, so I think there is a bug in ST.
Is there a way to exclude color propertys from sass compilation in webpack sass compiler, to prevent the opacity problem in child elements.
At the moment it compile this:
div {
background: rgba(255, 255, 255, 1);
}
to:
div {
background: white;
}
Sorry for my bad english :)
You can't prevent it. Because it's a sass function that converts the color to hex.
But there are few ways to avoid it
you can create your own rgba function that will do the trick for you
#function rgba($r, $g, $b, $a) {
#return unquote('rgba(#{$r}, #{$g}, #{$b}, #{$a})');
}
But doing this means there are changes that, if some one is using rgba(hex, a) then it will fail, if there are some one using syntax like rgba(rgb(255,255,255), 1) then also it will fail. So you have to look in your project structure and see how the syntax is there in all the files. And you have to mention to the team to use rgba alone.
Or else you can create a simple mixin
#mixin mysuper-rgba($hexcolor, $opacity) {
background-color: $hexcolor;
background-color: rgba($hexcolor, $opacity);
}
body {
#include mysuper-rgba(#11111, 0.5);
}
What I suggest is create a mixin that will do the trick for you and ask all your developers to use the same.
I need define some style for different QML controls. Now i have following options:
Define style for each control like:
TextField {
text: "Text input"
style: TextFieldStyle {
textColor: "white"
...
}
}
Define style in each qml file using it like:
Component {
id: myStyle
TextFieldStyle {
textColor: "white"
...
}
}
TextField {
text: "Text input"
style: myStyle
}
Question: how to implement single qml file containing all styles for all used controls which can be reused in every qml file of project?
Which top level element should be in such qml?
As i understand each qml file in project is Component. But if i specify top element as Component, then it will create component in Component, right?
What is best way to implement that?
There are three things to do:
Create a single qml file MyStyles.qml containing all colours, text sizes
Create simple, re-usable components(e.g. MyLabelText.qml, MyTextInput.qml). Use the style values defined previously.
Build your higher level components based in this components (e.g. MyLabeledInputField.qml)
The Susy grid has a $from-direction variable, but I can't use it like so:
[dir="rtl"] {$from-direction: right;}
The generated CSS changes all direction related Susy CSS to right-to-left and is not prepended with [dir="rtl"].
What am I doing wrong?
Unfortunately there is no way for Sass (or Susy) to know anything about your HTML. Because things are pre-compiled, you have to nest the actual styles inside your switch, not just the variable setting. That probably means two different compiled stylesheets, which you can do easily in Sass, using that setting.
You'll need two scss files, e.g. rtl.scss and ltr.scss. Each one starts with that variable, and then imports all the necessary partials for your site:
// rtl.scss
$from-direction: right;
#import "my-site-partials.scss";
and
// ltr.scss
$from-direction: left;
#import "my-site-partials.scss";
Then you just need to load the correct css output file in your HTML depending on the direction. You can also do it in a single file, but you'll be loading twice the code you use in either case, and nesting all your styles an extra level. I recommend the two-file approach.
UPDATE: A Single-file approach.
You can use the same technique in a single file, but it will require an extra wrapper around all your styles. Something like this:
#each $dir in ltr, rtl {
$from-direction: if(ltr, left, right);
[dir="#{$dir}"] {
// your styles
}
}
You could make that into a mixin:
#mixin bi {
#each $dir in ltr, rtl {
$from-direction: if(ltr, left, right);
[dir="#{$dir}"] {
#content;
}
}
}
#include bi {
// your styles
}
Or you could override only specific styles that change with direction:
#mixin rtl {
$from-direction: right;
[dir="rtl"] {
#content;
}
$from-direction: left;
}
// your ltr styles
#include rtl {
// your rtl overrides
}
There are many other variations on that, and features you could add for flexibility. But this should get you started.