- From: Ádám Liszkai via GitHub <sysbot+gh@w3.org>
- Date: Fri, 11 Nov 2016 19:24:17 +0000
- To: public-houdini-archive@w3.org
I'am using Polymer for my project and to customize a look to an
element I need to use CSS mixins to override the defaults in Shadow
DOM. But sadly I wanted a bit different look like the Material Design
after recoloring the project I need to add a few more rules to group
of mixins.
Right now I have something like this code:
```
:root {
--paper-input-container-input: {
border-bottom: 1px solid #222;
font-family: 'Open Sans', Arial, Verdana, sans-serif;
color: #666; letter-spacing: 1px;
text-shadow: 0 0 3px #fff;
};
--paper-button: {
border-bottom: 1px solid #222;
font-family: 'Open Sans', Arial, Verdana, sans-serif;
color: #666; letter-spacing: 1px;
text-shadow: 0 0 3px #fff;
};
--paper-toolbar: {
border-bottom: 1px solid #222;
font-family: 'Open Sans', Arial, Verdana, sans-serif;
color: #666; letter-spacing: 1px;
text-shadow: 0 0 3px #fff;
};
}
```
Wich is not so usefull if I want to change a few rules in the mixins.
Alternative solution would be use a common mixin, but then I also need
to ```@apply``` that:
```
:root {
--common-code: {
border-bottom: 1px solid #222;
font-family: 'Open Sans', Arial, Verdana, sans-serif;
color: #666; letter-spacing: 1px;
text-shadow: 0 0 3px #fff;
};
--paper-input-container-input: {
@apply --common-code;
};
--paper-button: {
@apply --common-code;
};
--paper-toolbar: {
@apply --common-code;
};
}
```
It would be way nicer to use the css mixins like a normal class or id:
```
:root --paper-input-container-input,
:root --paper-button,
:root --paper-toolbar {
border-bottom: 1px solid #222;
font-family: 'Open Sans', Arial, Verdana, sans-serif;
color: #666; letter-spacing: 1px;
text-shadow: 0 0 3px #fff;
}
```
--
GitHub Notification of comment by adamos42
Please view or discuss this issue at
https://github.com/w3c/css-houdini-drafts/issues/332#issuecomment-260035128
using your GitHub account
Received on Friday, 11 November 2016 19:24:23 UTC