How to style Polymer dropdown menu arrow - css

New to Polymer, and the docs seem a little 'light' on examples. I'm trying to style a dropdown menu so everything is white on a blueish background. Most things (tabs, toast, etc.) are working, but the dropdown-menu stubbornly refuses to show the little 'arrow' button in anything other than murky grey.
Example JSBin
The styling code is:
<style>
:host {
display: block;
/* Main vars */
--ki-teal: #4790A8;
--paper-tabs-selection-bar-color: #fff;
--paper-tab-ink: #fff;
/* Toolbar colours */
paper-toolbar.ki {
--paper-toolbar-background: var(--ki-teal);
}
/* Project select dropmenu colours */
paper-dropdown-menu-light.ki {
--paper-dropdown-menu-color: #fff;
--paper-dropdown-menu-focus-color: #fff;
--paper-dropdown-menu-button: {
color: #fff;
}
--paper-input-container-color: var(--ki-teal);
--paper-input-container-focus-color: #fff;
--paper-dropdown-menu-input: {
border-bottom: none;
};
}
/* Notifications */
#toastSave {
--paper-toast-background-color: var(--ki-teal);
--paper-toast-color: white;
}
}
</style>
But the --paper-dropdown-menu-button doesn't seem to have any effect, or I'm not using it right. Any guidance appreciated.
In addition, you'll see (at least on Chrome/Windows) that the underline bar when the dropdown has focus is not aligned properly with the active tab bar. I guess that's just a Polymer CSS glitch which will get worked out eventually, unless it's something I need to take care of in the <style> section as well?

Use --iron-icon-fill-color in your paper-dropdown-menu class if you want have other iron-icons also which you don't want to style, else you can style use it in host if you want.
Another way of doing it will be giving color to mixin --paper-dropdown-menu-icon. As per paper-dropdown-menu documentation it is
A mixin that is applied to the internal icon
Lastly, if you look at the code of paper-dropdown-menu-light you'll notice that icons have default value as --disabled-text-color. So, if you change this value that should do the trick for you. I'll recommend not to use this method as this is a default variable for material design theme and Polymer has used this as default value at lot of places. So, unless to know what you are doing avoid this method.
In Polymer if an element is using some other element internally you can always refer the style guide of internal element and use it directly. Like here we are using iron-icons styles to style the icon which is inside paper-dropdown-menu
I don't think Polymer has directly mentioned this in their styling guide but you can find this detail written at the end of styling details of paper-dropdown-menu and generalise it
You can also use any of the paper-input-container and paper-menu-button style mixins and custom properties to style the internal input and menu button respectively.

Related

Is it possible to combine [ngStyle] and ::ng-deep?

I try to build an application that can be themed completely at runtime. Therefore i want to set global settings like font-size, color, background-color etc. on my root app.component. For now i do it with predefined CSS classes:
// CSS
.font-size-16::ng-deep { font-size: 16px; }
// TS
fontSizeClass = 'font-size-16'
// HTML
<div [ngClass]="fontSizeClass"></div>
Changing the fontSizeClass string to another class works for deep styling my application. But this solution is not dynamic at all. What i actually want is to set the font-size via [ngStyle] but keep the ng::deep functionality, too.
Is that possible?
And are there reasons to not implement theming completely with JavaScript and Redux?
Thanks in advance!
Try this
using angular material radio button
if you want to make the border of the radio buttons => transparent
in HTML:
[ngClass]="{'**transparentBorder**': "--Here yours condition---"}"
in css:
a. you add the transparentBorder (that we used in HTML) to:
b. add ::ng-deep at the beginning of the CSS
c. in the Chrome Dev Tools finds all the classes that the Angular material used
in this case, there are 2 option: 1. if the radio button is checked, 2. is unchecked
result:
this is the classes when the radio button is checked
we need to add our class transparent-border to angular material classes.
::ng-deep .mat-radio-button.**transparentBorder**.mat-primary.mat-radio-checked .mat-radio-outer-circle {
border-color: transparent;
}
this is the classes when the radio button is unchecked
::ng-deep .mat-radio-button.**transparentBorder**.mat-primary .mat-radio-outer-circle { border-color: transparent; }
good luck

Finding the Bootstrap variable that controls a specific CSS rule

I'm developing an application using Bootstrap 3. I use Sass/SCSS to customize the Bootstrap variables neatly.
I'm currently styling the "tabs" component and I can't seem to figure out if there is a specific variable that controls its text color, or if it's been inherited from somewhere else.
What's a good way to determine the "source" of a CSS rule that comes from Bootstrap? I use Chrome on OSX.
I just inspected the tab on the bootstrap site and searched for the .nav-tabs class in the bootstrap scss files. So in the _navs.scss file, search for "tabs" and you'll see the variables.
It looks like $nav-tabs-active-link-hover-color might be what you're looking for - it's the active tab's text color. The anchors in the non-active tabs appear to be default anchor tag color.
You can find that variable in the _variables.scss file. The variables are usually named according to the component that uses them (i.e. $nav-tabs-active-<whatever>).
// Active state, and its :hover to override normal :hover
&.active > a {
&,
&:hover,
&:focus {
color: $nav-tabs-active-link-hover-color; // ****** here
background-color: $nav-tabs-active-link-hover-bg;
border: 1px solid $nav-tabs-active-link-hover-border-color;
border-bottom-color: transparent;
cursor: default;
}
}

Codename one: Why does the android button have a different appearance than the IOS button

I am currently styling my App with the css plugin for codename one and I cannot figure out why the default look of the Button is different for android and IOS.
In IOS it looks like this:
In Android it looks like this:
It should look like it does in IOS for all devices.
In the Css file, I have this entry for Button:
Button {
cn1-derive: Button;
background-color: #005EA8;
color: white;
}
Button.unselected {
cn1-derive: Button.unselected;
background-color: #005EA8;
color: white;
}
Button.pressed {
cn1-derive: Button.pressed;
background-color: white;
color: #005EA8;
}
Its not just the Login Button that should look like this, but All buttons. None of the Buttons looks like they should on Android, but all look like it in IOS.
In Addition, as you might notice, the look changes on click. In IOS this works as expected, In Android the text color changes on click to #0005ea8, but the background is still this grey.
What am I missing here?
This is one of the ugly parts of CSS meets CN1 themes. The problem is that your CSS theme is being applied over top of the CN1 native theme. Any properties that you set on Button will override whatever those properties were in the native theme, but there are other properties of Button from the native theme that you are not overriding.
Further, CN1 styles offer three ways to set the "background" of the component. In ascending order of priority, they are:
Background color
Background (image)
Border (9-piece borders effectively set the entire background).
If you apply two of these in the same style, then the one lower on the list (higher in number) will take priority. E.g. if you set both the background color and a 9-piece border, then you won't see the background color at all - you'll just see the 9-piece border.
So what is happening here is that you've set the background color for your button in CSS, but the native theme likely set a background image, or a 9-piece border on the Button style which is still overriding your settings.
There are a couple of solutions to your problem:
Solution 1: Override the other "background" properties
Set border: none (to ensure that you override any 9-piece border) (or set border to something). And specify the cn1-background-type: none to ensure that there isn't an image background being applied to it:
Button {
background-color: #005EA8;
color: white;
border: none;
cn1-background-type: none;
}
NOTE: You also don't need to specify cn1-derive: Button because your style name actually is Button.
Solution 2: Create your Own Button classes from the ground up
If you don't want the baggage of the native theme, just create your own style, and set it exactly how you want.
e.g.
MyButton {
...
}
And in your Java code:
btn.setUIID("MyButton");

Dojo FilteringSelect CSS Styles

What are all the css style classes that has to be changed to restyle dojo filtering select ?
Note: I am using claro theme.
I want to
1.Set the style for one particular filteringselect with id QuickSearchPane_SelectBox
2.Set the style for all other filteringselect
I found a few like:
.claro .dijitTextBox .dijitInputInner
.claro .dijitInputField .dijitPlaceHolder
.claro .dijitSelect
But these are not giving the desired effect. I am not even able to change the background colors.
For Menu
[dijitpopupparent="QuickSearchPane_SelectBox"] > .dijitComboBoxMenu .dijitMenuItem
This seems to work.
You can use the following CSS class to start styling your dijit/form/FilteringSelect;
This example will style all instance of dijit/form/FilteringSelect:
https://jsfiddle.net/ofgcd24n/
.dijitInputInner {
background-color: green !important;
}
.dijitMenuItem {
background-color: orange;
}
This other example below will style only ONE instance of dijit/form/FilteringSelect, please note the use of Descendant combinator as selector (where you use the ID for your widget DOM):
#widget_stateSelect .dijitInputInner {
/* your style*/
}
Generally you can use (in Chrome Dev Tool) Event Listen Breakpoints for click/mouse down, so when you open you FilteringSelect, you can block execution, and check with the inspector its HTML structure and see additional CSS classes you want to override with your styles.
More about CSS selector:
https://www.w3.org/TR/css3-selectors/
If you need more details, please post your HTML and CSS and desired layout so we can work out a specific solution.

How to cancel/disable hover and active effects coming from another CSS library?

I am using Social Buttons for Bootstrap to add social buttons on my web site. The file is basically a CSS, which is using Font Awesome and has around 20+ classes defined for various social networks.
Buttons, defined with Bootstrap Social have hover and active effects.
What I want to do is disable hover/active effect, so the buttons would become static, i.e. without any hover/click functionality.
Ideally, I'd like to have some CSS class, say "btn-static", which would cancel style changes coming from hover/active effects.
Is this even possible?
I would like to avoid creating separate CSS class for every social network, or modifying original CSS file. Hoping to add custom class which could cancel hover/active events.
For example, here is the button defined:
<span class="btn btn-social btn-facebook">
<span class="fa fa-facebook"></span>Facebook
</span>
I have tried using:
.btn-static:active, .btn-static:hover { background-color: none; }
and
.btn-static:active, .btn-static:hover { background-color: inherit; }
But that just makes the button have transparent background. I want it to keep original color. Is it somehow possible to reference the original color in CSS?
UPDATE #1: JSFiddler is available
This is a hack:
.btn-static {
pointer-events: none;
}
According to Can I Use, it is well supported. Take a look at the known issues tab on that page, as this won't scale to many other uses.
Ideally, use a more specific selector. For example:
#IDofYourFooter .btn:active, #IDofYourFooter .btn:hover, #IDofYourFooter .btn:focus {
background-color: [whatever] !important;
}
If you genuinely cannot come up with a more specific selector, then use !important to override CSS that is inline or coming from a third-party source that appears after your styles:
.btn:active, .btn:hover, .btn:focus {
background-color: [whatever] !important;
}
See that I added a :focus selector in there. Also, using !important almost always creates maintenance issues down the road.
Please note that changing styles does not disable links, it just obfuscates them. Make sure these do not live in an <a href…>, though if you do that you have no reason to write these styles. If the hover styles are applied outside of an <a href…>, then the original source did a poor job or there is script clickability added.

Resources