Is there a way to style the icon of a completed step in Angular Materials stepper module? When I complete a step it adjusts the icon to a check mark. I'm trying to adjust the background color of the icon as well. My code is similar to the example here with linear mode enabled: https://material.angular.io/components/stepper/overview
When I look in the DOM the only attribute that changes when it is completed is the 'ng-reflect-ng-switch' attribute. I'm not sure how I can target this element in order to style it upon completion. Hopefully someone can point me in the right direction. Thanks!
I got this working by targeting the elements attribute like this:
[ng-reflect-ng-switch~="done"] {
background-color: green;
}
Related
I'm using the mat-slide-toggle element from Angular Material 2, and I made it a bit bigger, but the thumb doesn't move to the end of the container when clicked, and I can't seem to figure out which transform-translate property controls the distance.
The following is a pic of how it looks currently when clicked:
Is someone aware of what property needs to be changed for this to slide to the end? Thanks in advance.
In case someone Googles this - the correct selector is the following:
.mat-slide-toggle.mat-checked .mat-slide-toggle-thumb-container {
transform: translate3d(64px,0,0) !important;
}
I got the correct answer from the following link, which contains other useful selectors for mat-slide-toggle.
I built a GUI with a treeview based on GTK+3. The tree view does currently not show the expander of the treeview. However, I can see that there is some space reserved for the expander as the indentation of the rows is larger if there is one element with a 'subcategory'.
In addition, I figured out, that the expander is shown if I use another GTK style.
Therefore, I tried to change to color of the expander, but it has no effect:
*.view { background-color: ... } changes the background color of the 'buttons' in the tree view. However, the expander is still not visible.
treeview.view.expander { color: ...} does not have any effect at all.
Now, my assumption is that the expander is hidden or has some transparency, but I could not find any option to change it.
Do you have any documentation links that explains exactly which CSS option does have an influence on the treeview or its expander or a hint what could be wrong in the CSS file?
Thanks!
I figured out what the problem is: I am missing the icon used by the treeview expander in /usr/share/icons.
The problem is solved by adding the icons specified in .expander { -gtk-icon-source: -gtk-icontheme("icon"); } to the icon sources in /usr/share/icons or /~.icons.
I'm trying to fix something another developer did on this site: http://alamodecreamery.com/products-page/accessories/girls-atom/
If you hover over the sizes a waffle icon appears, however when the item is checked (radio button) the background disappears. I need a label:checked background to show the waffle. I found the CSS selector on line 1150 of wpsc-default.css and added a label:active for testing which works fine (aqua on active).
Can anyone figure out why the :checked background isnt working? Ive tried a few different things which all failed to work:
label + input[type="radio"]:checked {
background:pink !important;
}
input[type="radio"]:checked {
background:pink !important;
}
.wpsc_variation_forms label:checked {background-color: green !important;}
Thanks in advance!
What you are attempting cannot work. You have a structure in which the radio input is contained inside the label. The label is sized to match the waffle, and on hover changes its background. When the radio button is checked, the input gets the :checked state, not the label! And in CSS, right now, it is regrettably not possible to select an element based on a descendant's state. As such, it is not possible with pure CSS to change the appearance of the label based on a pseudoclass of one of its contained elements.
I would recommend adding a bit of Javascript which toggles a class on the label when the radio button is toggled, would be the easiest fix.
Techy sidenote: there have been multiple proposals in the past for 'parent selectors', and all have been shot down by the browser developers because it was unfeasible from a performance perspective due to the way the DOM and CSS are matched up. Nowadays the engines are so efficient the discussion has been restarted, but still in very preliminary stage. Don't expect anything before CSS4 surfaces.
label:checked is invalid. checked is for inputs only.
Something like
wpsc_variation_forms label + input:checked
might work better
I am drawing an image inside panel and slider field using ExtJS 4. I want to change opacity of image whenever of value of slider field changes.
I am aware that opacity and filter:alpha(opacity=); rule of CSS can be applied to image which will change its opacity.
However I do not know how to apply this css rule to the image. Can anyone please guide me on this?
You can use Ext.dom.Element.setOpacity method:
Ext.fly('image-id').setOpacity(0.5); // this will make img with id 'image-id' become half-transparent
Here is live demo
Update
If you are using Ext.Img component you will have to do something like the following:
imgCmp.getEl().setOpacity(0.5);
I was able to set the text color of a selected LinkBar button by "disabledColor" style of LinkBar. Accordingly, I expect to set the background color of the selected button by "backgroundDisabledColor" style, however, it didn't work; and except "backgroundDisabledColor", I didn't see any other style that could possibly achieve this. Please help. Thanks.
The problem is probably that you're setting the style on the LinkBar itself - try setting the LinkBar's linkButtonStyleName style to a different style selector that contains all of the styles you need for your button. You should be able to set the fillColors style of the buttons themselves there - this will change the default look of the button.
If you need to adjust the "selected" color or if you need something more advanced than just skinning the button background you'll need to write a custom skin class. This isn't too difficult - the Button class has a whole set of "Selected" styles - selectedDownSkin, selectedUpSkin, selectedDisabledSkin, etc. IMO the best practice is to set your button skin to a custom skin class that sets the different individual styles based on state.
David Flately illustrates this method here. Check out his source - that should get you what you need. A good book on this topic that has this sort of thing along with lots of other examples is Juan Sanchez and Andy McIntosh's Creating Visual Experiences with Flex 3.0. I can't post a link to it because my reputation isn't high enough here yet, but you can find it on amazon or barnes and noble or any other online bookstore.
FYI - answer here....
http://dezeloper.wordpress.com/2010/02/24/flex-css-linkbar-togglebuttonbar-selected-text-color/
Haha, was looking for same thing, you can see on the source code of LinkBar:
// Hilite the new selection.
child = Button(getChildAt(selectedIndex));
child.enabled = false;
Which is clever!!! Rather than set selected to true, they disable the selected button ... why not ;-( Took me half an hour to understand the Flex team logical ...
eBuildy, Flex Specialists