I want to style paper-dropdown-menu, specifically for example the paper-input components of the element. I guess I need to learn/understand how mixins work.
I probably need to combine the mixins of paper-dropdown-menu with the mixins/custom properties of paper-input-container, am I right about this?
https://elements.polymer-project.org/elements/paper-dropdown-menu
https://elements.polymer-project.org/elements/paper-input?active=paper-input-container
I don't even know where to start. The doc suggets something in curly braces as a default in a mixin, so the first step is probably something like:
paper-dropdown-menu {
--paper-dropdown-menu: {
something here?
}
}
I barely understand this stuff myself, but I think after much struggle I might be able to shed enough insight to get you started.
You can define variables at the ":root" level that you want to use over and over again. (Yes you actually type ":root".) Consider:
<style is="custom-style">
:root{
--main-color: rgb(244,67,54);
--dark-color: rgba(0, 0, 0, 0.258824);
--light-color: rgb(153, 153, 153);
--app-header-background-front-layer-background-image: url(../../img/ConcertChoirSATour.jpg);
--app-header-background-front-layer-height: 400px;
}
</style>
Maybe you're using the Polymer appheader element, and you see in the docs that you can set the backgrounds with:
app-header {
--app-header-background-front-layer: {
/*something or other*/
};
--app-header-background-rear-layer: {
/*something or other*/
};
}
Here's where you use the variables you assigned in your :root level using the var() keyword:
app-header {
--app-header-background-front-layer: {
background-image: var(--app-header-background-front-layer-background-image);
};
--app-header-background-rear-layer: {
/* The header is blue when condensed */
background-color: var(--main-color);
};
}
Here's some sample code:
<style is="custom-style">
:root{
--main-color: rgb(244,67,54);
--dark-color: rgba(0, 0, 0, 0.258824);
--light-color: rgb(153, 153, 153);
--app-header-background-front-layer-background-image: url(../../img/ConcertChoirSATour.jpg);
--app-header-background-front-layer-height: 400px;
}
app-header {
--app-header-background-front-layer: {
background-image: var(--app-header-background-front-layer-background-image);
};
--app-header-background-rear-layer: {
/* The header is blue when condensed */
background-color: var(--main-color);
};
}
paper-icon-button {
--paper-icon-button-ink-color: white;
}
paper-dropdown-menu {
--paper-input-container-focus:{
color: var(--main-color);
};
--paper-input-container: {
color: var(--dark-color);
};
--paper-input-container-input: {
color: var(--light-color);
};
--paper-input-container-label: {
color: var(--main-color);
};
}
</style>
You can find some examples here:
https://www.polymer-project.org/1.0/docs/devguide/styling.html
Related
I am using Material-UI v5 for my project. I need to style my scrollbars using the following css
body::-webkit-scrollbar {
width: 12px;
}
body::-webkit-scrollbar-track {
background: blue;
}
body::-webkit-scrollbar-thumb {
background-color: red;
border: 3px solid black;
border-radius: 10px;
}
I tried using makeStyles as following:
const useStyles = makeStyles((theme: Theme) => ({
root: {
background: theme.palette.primary.main,
'html': {
scrollbarWidth: 'thin',
scrollbarColor: theme.palette.accent.main
},
'body::-webkit-scrollbar': {
width: '12px'
},
'body::-webkit-scrollbar-track' : {
background: theme.palette.primary.main,
}
},
}));
But when I inspect the actual source css was coming as 'body::-webkit-scrollbar' : Object[object].
I am stuck on how to add global css like this in material-ui and what is the best way to do this.
Also please let me know incase I am doing anything wrong here. Thanks in advance.
I am trying to define global colors, and I wrote a scss compiler to compile all color to its respective class names, But when I try to use them in my html div, the color is not applying to it.
scss snippet:
$blue-1: #001233;
$blue-2: #002132;
$blue-3: #004237;
$blue-4: #003027;
$blue-5: #CCCCCC;
$blue-6: #FFFFFF;
$allcolors:$blue-1 $blue-2 $blue-3 $blue-4 $blue-5 $blue-6;
#each $color in $allcolors {
.color-#{nth($color, 1)} {
color: nth($color, 1);
}
}
I am calling this in my html div as
<div class="color-#CCCCCC">TEST</div>
I don't see my style applied & when I tried compiling it, I can see my css style compiled as shown below
.color-#001233 {
color: #001233;
}
.color-#002132 {
color: #002132;
}
.color-#004237 {
color: #004237;
}
.color-#003027 {
color: #003027;
}
.color-#CCCCCC {
color: #CCCCCC;
}
.color-#FFFFFF {
color: #FFFFFF;
}
any help would be appreciated.
You need to escape the # in your CSS file since it's a special character used for ID selector.
.color-\#CCCCCC {
color: #CCCCCC;
}
<div class="color-#CCCCCC">TEST</div>
you can adjust your SCSS accordingly to add \
$blue-1: #001233;
$blue-2: #002132;
$blue-3: #004237;
$blue-4: #003027;
$blue-5: #CCCCCC;
$blue-6: #FFFFFF;
$allcolors:$blue-1 $blue-2 $blue-3 $blue-4 $blue-5 $blue-6;
#each $color in $allcolors {
.color-#{unquote("\\" + $color)} {
color: $color;
}
}
I have several SASS color maps for the template:
$map-black: (
$primary-color: black,
$secondary-color: grey
)
$map-white: (
$primary-color: white,
$secondary-color: grey
)
Can I bind specific map on body attribute value or class?
<body data-color="white">
<h1>Title</h1>
</body>
body[data-color="white"] {
#use $map-white;
}
body[data-color="black"] {
#use $map-black;
}
Your syntax is a bit off. You can define two maps this way:
$red: (
primary-color: red,
secondary-color: orange
);
$blue: (
primary-color: blue,
secondary-color: green
);
Then you can access the values in the maps using map-get($map, key):
div[data-color="red"] h1 {
color: map-get($red, primary-color);
}
div[data-color="red"] .desc {
color: map-get($red, secondary-color);
}
div[data-color="blue"] h1 {
color: map-get($blue, primary-color);
}
div[data-color="blue"] .desc {
color: map-get($blue, secondary-color);
}
This will apply to an HTML structure like this:
<div data-color="red">
<h1>Title</h1>
<p class="desc">Description</p>
</div>
<div data-color="blue">
<h1>Title</h1>
<p class="desc">Description</p>
</div>
You can test it in this fiddle
Plain HTML5: not that I know of. But you can write yourself a mixin, which produces this kind of output as simple css-classnames with a for-loop over your maps.
you can test the following on sass-meister (https://www.sassmeister.com/)
$map-black: (
primary-color: '#fff',
secondary-color: '#ccc'
);
$map-white: (
primary-color: '#fff',
secondary-color: '#ccc'
);
$themes: (
white: $map-white,
black: $map-black
);
#each $theme, $colors in $themes {
.#{$theme} {
background: map-get($colors, primary-color);
color: map-get($colors, secondary-color);
}
h1.#{$theme} {
color: map-get($colors, secondary-color);
}
.#{$theme} > p {
color: map-get($colors, secondary-color);
}
}
I have a set of LESS variables with colors:
#blue: #0e9bd0;
#green: #009646;
#red: #f81010;
I use class names like this:
.color-blue {
color: #blue;
}
.border-blue {
border-color: #blue;
}
.bg-blue {
background: #blue;
}
Is it possible to generate rules automatically for each color?
Something like below?
.color-#{name} {
color: ##name;
}
.border-#{name} {
border-color: ##name;
}
.bg-#{name} {
background: ##name;
}
// define colours
#blue: #0e9bd0;
#green: #009646;
#red: #f81010;
// import loop helper
#import "https://raw.githubusercontent.com/seven-phases-max/less.curious/master/src/for.less";
// define colour array
#colors: 'green', 'red', 'blue';
.for(#colors); .-each(#color) {
#name: e(#color);
.color-#{name} {
color: ##name;
}
.border-#{name} {
border-color: ##name;
}
.bg-#{name} {
background: ##name;
}
}
I have the following code to target buttons that are in a disable state:
.btn-default[disabled] {
background-color: lighten(#btn-default-bg, 30%)
}
Is it possible to use nested rules to target the disabled attribute? something similar to &:Hover
You can indeed, like this:
.btn-default {
&[disabled] {
background-color: lighten(#btn-default-bg, 30%)
}
}
http://jsbin.com/aKuLire/1/edit
You can even do further nesting:
input {
&[type="submit"] {
&[disabled] {
background: #blue;
}
}
}