Stylus returns 'Failed to #extend ".selector2" ', but it's OK in SASS.
.selector1
color #000
.selector2
color #FFF
.selector3
#extend .selector2
It's OK when I write selectors from root in Stylus.
.selector1
color #000
.selector2
color #FFF
.selector3
#extend .selector1 .selector2
But it's quite troublesome.
Is there any way to write Stylus same as SASS?
In my experience, You can't write Stylus #extend same as SASS. But I can suggest alternatives:
1. we can simply use the # character to get the value of the nearest color
.selector1
color #000
.selector2
color #FFF
.selector3
color #color
2 Extending placeholder selectors
$foo
color: #FFF
.selector1
color #000
.selector2
#extends $foo
.selector3
#extends $foo
Related
I want to use the primary color from the ant design theme. I believe the less tag is: #primary-color . How do I use this value for a custom div that I want the border color to match? Also this is with an app made by create-react-app.
I want to be able to do something like:
border: '2px solid #fff' // Instead of white, it uses the theme's primary color
In the very top of your .less file import Ant Design styles: #import '~antd/dist/antd.less';
And then you can use any antd color variable:
#import '~antd/dist/antd.less';
.box {
border: 2px solid #primary-color;
}
in my app.css file, I have got a class for header and components color value.
I am using css not sass or scss.
.header-class {
color: #1100aa !important;
}
and I want to change the color in theme setting in my frontend dialog.
How can I do this?
Define a ui for the panel, see https://docs.sencha.com/extjs/7.0.0-CE/modern/ext.Panel.html .css_mixin-panel-ui
#include panel-ui(
$ui: 'dialog',
$header-font-weight: normal,
$header-padding: 5px 7px,
$header-min-height: 46px,
$header-min-height-big: 46px,
$header-background-color: #3a3a3a,
$header-padding-big: 0 10px 0 0,
)
I've tried changing the Background-color of tristatecheckbox as shown below. The said codes will work if I directly update the CSS in the web console. But when I applied it in my codes. it won't work.
.fa-check:before {
Background-color: green !important;
}
.fa-close:before {
Background-color: red !important;
}
Can anyone, help me with this?
You need to prepend your CSS with :host >>>:
:host >>> .fa-check::before {
background-color: cyan !important;
}
:host >>> .fa-close::before {
background-color: magenta !important;
}
Note that I've changed the colors since green & red are the defaults.
Plunker example
I am working on md-slider, Here my question is how can we have the color of the slider as own, as default the having two classes md-warn(for red), and md-primary(for white). I want white color slider.
How can I achieve this?
Visores' answer was very useful, however this didn't quite match the functionality of the default slider insofar as the right hand side of the md-thumb ends up the same colour as the rest of the slider. By changing the
.md-track to .md-track-fill, you will match the default functionality. The code will therefore look as follows:
#red-slider .md-thumb:after, #red-slider .md-track-fill{
background-color: greenyellow !important;
border-color: greenyellow !important;
}
#red-slider .md-focus-thumb, #red-slider .md-focus-ring{
background-color: greenyellow;
}
CodePen example
you can achieve a custom color by overwriting the css-class of the slider.
codepen example
#red-slider .md-thumb:after, #red-slider .md-track{
background-color: greenyellow !important;
border-color: greenyellow !important;
}
#red-slider .md-focus-thumb, #red-slider .md-focus-ring{
background-color: greenyellow;
}
css classes to overwrite:
.md-thumb:after
.md-track
.md-focus-thumb
.md-focus-ring
I didn´t tested all the functionality of the slider. But basically you have to overwrite all the styles from the slider. You can find them at the git repo
Additional, you can custom the color of balloon on the md slider by this code:
#red-slider .md-sign, #red-slider .md-sign {
background-color: blue;
border-top-color: blue;
}
#red-slider .md-sign:after, #red-slider .md-sign {
border-top-color: blue;
}
This can change the color of balloon as you neeeded
Is there any way to change onsen-ui lists (ons-list) to look like a CardView as the below picture.
The borders are set in background and I tried to change them and setting padding and margin with no chance.
By changing these styles I have achieved the below picture
.list__item{
border-style:solid !important;
border-width:1px !important;
border-color:#ddd !important;
box-shadow:2px 2px 1px #eee !important;
margin:10px !important;
}