I'm trying to change the default purple colour of the dropdown arrow in an mdc-select:
None of the sass mixins seem to do it.
How is it done?
Here is what I have tried so far:
HTML
<div class="mdc-select mdc-select--outlined">
<input type="hidden" name="enhanced-select">
<i class="mdc-select__dropdown-icon"></i>
<div class="mdc-select__selected-text" class="mdc-select__selected-text" role="button" aria-haspopup="listbox" aria-labelledby="demo-label"></div>
<div class="mdc-select__menu mdc-menu mdc-menu-surface">
<ul class="mdc-list">
<li class="mdc-list-item" data-value="41" role="option">41</li>
<li class="mdc-list-item" data-value="42" role="option">42</li>
<li class="mdc-list-item" data-value="43" role="option">43</li>
</ul>
</div>
<div class="mdc-notched-outline">
<div class="mdc-notched-outline__leading"></div>
<div class="mdc-notched-outline__notch">
<label class="mdc-floating-label">Answer to Life</label>
</div>
<div class="mdc-notched-outline__trailing"></div>
</div>
</div>
SCSS
#import "#material/list/mdc-list";
#import "#material/menu-surface/mdc-menu-surface";
#import "#material/menu/mdc-menu";
#import "#material/select/mdc-select";
.mdc-select {
#include mdc-select-ink-color(red);
// #include mdc-select-container-fill-color(red);
#include mdc-select-label-color(red);
#include mdc-select-focused-label-color(red);
#include mdc-select-bottom-line-color(red);
#include mdc-select-focused-bottom-line-color(red);
#include mdc-select-hover-bottom-line-color(red);
#include mdc-select-outline-color(red);
#include mdc-select-focused-outline-color(red);
#include mdc-select-hover-outline-color(red);
#include mdc-select-icon-color(red);
}
TS
import { MDCSelect } from '#material/select';
const select = new MDCSelect(document.querySelector('.mdc-select'));
this is not a icon or font this arrow is a background image of class .mdc-select--focused .mdc-select__dropdown-icon. you can change the image color by using filter css property.
filter: hue-rotate(60deg);
apply this css to your custom css for the class .mdc-select--focused .mdc-select__dropdown-icon it will work.
Thank You.
I managed to theme it by using an MDC internal Sass mixin: mdc-select-dd-arrow-svg-bg_. An example is:
.mdc-select .mdc-select__dropdown-icon {
#include mdc-select-dd-arrow-svg-bg_(COLOR, 1);
}
where COLOR is an MDC theme property (e.g. 'secondary') or an HTML color (e.g. #ff0000). It cannot be a var because, as pointed by #KuldipKoradia, an SVG is generated at compilation time.
The easiest and simplest way is to hide the SVG and just create your own dropdown arrow through CSS (no HTML changes needed). Then you can easily change the color as often as you need to:
.mdc-select__dropdown-icon{
background: none;
width: 0;
height: 0;
bottom: 24px;
right: 10px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #333333;
}
.mdc-select--activated .mdc-select__dropdown-icon,
.mdc-select--focused .mdc-select__dropdown-icon {
border-top: 5px solid #FF0000;
}
Related
How can I resolve and reuse variables coming from _variables.scss within my own class (.post-body in this case) so I don't have to add a long list of styles to my html?
This is what the relevant html line looks like:
<div class="col px-5 py-4 post-body">{{{ contents }}}</div>
And this is my stylesheet.scss:
#import "../../../node_modules/bootstrap/scss/functions";
#import "../../../node_modules/bootstrap/scss/variables";
// ...
#import "../../../node_modules/bootstrap/scss/bootstrap";
.post-body {
background-color: #252526;
color: #dddddd;
line-height: 26px;
// Following are my attempts to reuse $box-shadow-lg from _variables.scss
box-shadow-lg; // Invalid syntax
#include box-shadow-lg; // Complains with undefined mixin.
}
Sure I could add them directly, like below: But as the number of modifications grows, the list of classes applied to html will grow as well and result in complexity.
<div class="col px-5 py-4 post-body box-shadow-lg">{{{ contents }}}</div>
You just have to use #extend from scss like this :
.post-body {
background-color: #252526;
color: #dddddd;
line-height: 26px;
#extend .box-shadow-lg;
}
So the styles of .box-shadow-lg would be paste to your .post-body class.
I just figured it out by myself. It seems that I need to #import the mixins. And then use that function.
// ...
#import "../../../node_modules/bootstrap/scss/mixins";
// ...
#import "../../../node_modules/bootstrap/scss/bootstrap";
.post-body {
background-color: #252526;
color: #dddddd;
line-height: 26px;
#include box-shadow($box-shadow-lg);
}
I like the style of the default buttons from pre-Bootstrap 4. In order to try to make my own I came up with the following SASS:
.btn-default {
#extend .btn;
border-color: #A5A5A5;
}
.btn.btn-default:hover,
.btn.btn-default:focus,
.btn.btn-default:active,
.btn.btn-default.active {
color: #808080;
}
This works as expected if I used a <button> tag but not if I use a <a> tag. Why wouldn't this work on both?
<a href="#" class="btn btn-default">
Test Anchor
</a>
<button type="submit" class="btn btn-default">
Test Button
</button>
Why would this not work on the anchor tag when you can normally assign a .btn class to an anchor tag and it will style it like a button?
I don't think you need to #extend .btn since you're already using .btn.
All the other btn-* variations have a color, background-color and border-color, so in CSS you could create a btn-default with:
.btn-default{
color:#333;
background-color:#bbb;
border-color:#a5a5a5
}
.btn.btn-default:hover,
.btn.btn-default:focus,
.btn.btn-default:active,
.btn.btn-default.active {
color: #808080;
}
The Bootstrap SASS way would be to use the button-variant #mixin...
.btn-default {
#include button-variant(#bbb, #a5a5a5, #bbb, darken(#bbb, 10%), darken(#bbb, 10%), darken(#bbb, 12.5%))
}
Demo: https://www.codeply.com/go/CWJidmeI1D
Here are the params for the button-variant mixin:
button-variant($background, $border, $hover-background, $hover-border, $active-background, $active-border)
<a> tag doesn't have the behavior of a button. Inorder make it try the following code
a.btn{
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
text-decoration: none;
color: initial;
}
I'm a CSS/bootstrap learner so forgive me if this is a nonsense question....
I have a button on screen with classes "btn btn-outline-primary" applied.
Upon some event occurring in my component(Angular2) I apply my "button-invisible" class, which sets display to "none" but this doesn't happen. The button remains visible. When I check in dev tools I see that the class is applied(and I can change other style properties such as font-style etc...) but the "display: none;" is not enabled, it is struck through.
Can someone advise on why my class would be applied but certain aspects/properties overridden? The only way I can make this class function as I expect is by adding the !important rule.
Cheers
.btn from bootstrap _buttons.scss
.btn {
display: inline-block;
font-weight: $btn-font-weight;
line-height: $btn-line-height;
text-align: center;
white-space: nowrap;
vertical-align: middle;
user-select: none;
border: $input-btn-border-width solid transparent;
#include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-border-radius);
#include transition($btn-transition);
// Share hover and focus styles
#include hover-focus {
text-decoration: none;
}
&:focus,
&.focus {
outline: 0;
box-shadow: $btn-focus-box-shadow;
}
// Disabled comes first so active can properly restyle
&.disabled,
&:disabled {
cursor: $cursor-disabled;
opacity: .65;
#include box-shadow(none);
}
&:active,
&.active {
background-image: none;
#include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
}
}
my class that I am applying conditionally using ngClass...
.add-button-invisible {
display: none !important;
}
Markup where applying class:
<div class="row">
<button [ngClass]="addingNew === true ? 'add-button-invisible' : 'add-button-visible'" class="btn btn-outline-primary" (click)="addNew()">+Add {{entityType}}</button>
</div>
Bootstrap has a bigger priority, so your styles not working. You can add !important to your rule to override bootstrap rule. For example:display: block!important;
can you try to add : !important behind it, maybe the calss is not specific enough, by adding important to it css makes it more important. :)
btn class has display:inline-block, it overrides your custom class's display:none. If your custom class is going to apply only display: none;, then you can use bootstrap class hidden instead of going for custom one. check below snippet for reference.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn">Button Show</button>
<button type="button" class="btn hidden">Button Hidden</button>
I am using Jquery Mobile´s grid and I want to remove the default border and change the default background-color. Here is my code:
<div class="ui-grid-b">
<div class="ui-block-a"><div class="ui-bar ui-bar-a" style="height:60px">Block A</div></div>
<div class="ui-block-b"><div class="ui-bar ui-bar-a" style="height:60px">Block B</div></div>
</div><!-- /grid-b -->
Thank you
The answer is
.ui-bar-a {
background-color: #FFFFFF;
border-style: none;
}
Try this:
.ui-bar-a {
background-color: #fff !important;
border-style: none !important;
}
!important helps to override the jquery mobile css.
I am making a set of buttons for my site, and I am in need of some professional insight.
In order to reduce CSS bloat, I want to subclass my buttons for different colors, ex .button.blue .
Will the following incur issues in the future? (assuming I don't make a class of just .blue)
Do I have to use something like .button.button-blue instead?
.button {
display:inline-block;
padding: 9px 18px;
margin: 20px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
text-align: center;
background: #FFE150;
}
.button.blue {
background: #49b8e7;
border:1px solid #54abcf;
border-bottom:1px solid #398fb4;
color:#FFF
text-shadow: 0 1px 0 rgba(255,255,255, 0.5);
}
.header{
height: 50px;
}
.header.blue {
background: blue;
color: #fff;
}
What you have there with the multi-classes will work fine assuming you want them to work like so:
<div class="button blue">
Will use .button and .button.blue
</div>
<div class="button">
Will only use .button
</div>
<div class="header blue">
Will use .header and .header.blue
</div>
<div class="header">
Will only use .header
</div>
<div class="blue">
Will use neither of the .blue declarations because it doesn't contain header or button.
</div>
A selector like .button.blue actually selects for an element with that has both "blue" and "button" as classes, not a class called .button.blue. See http://www.w3.org/TR/CSS21/selector.html#class-html.
You can use the .button.blue style rule you have listed, but you'll need to rearrange your HTML so that you have something like <button type="button" class="button blue"/>. However, you don't really need to have a button class since it being a button (or <input type="submit">, etc.) is enough to use in your selector. You could write a CSS rule that is simply button.blue, input[type=submit].blue{}
Seems like button.blue is enough.
The only difference between the two is if you use <button class="button blue">, or <button class="button button-blue">.
You even don't need to duplicate the painting in blue... You can just do something like this:
.button
{
// button style
}
.header
{
// header style
}
.blue
{
background: blue;
color: #fff;
}
Of course if you add the blue class to each of them. (<div class="header blue">and<button class="button blue">)
Combine the classes applying the color you want to theme.
HTML:
<input type="text" class="text-field-required default" .../>
<select class="autocomplete-drop-down blue">...</select>
<a href="#" class="button-link green" .../>
CSS:
.text-field-required {
//component css theme without colors
}
.default {
//default color css theme for any component
}
.blue {
//blue css theme for any component
}
.green {
//green css theme for any component
}