BoxShadow global variables #70
Conversation
|
|
||
| $pf-global--sm--BoxShadow: 0 pf-prem(1) pf-prem(2) 0 rgba($pf-color-black-1000, .2) !default; |
There was a problem hiding this comment.
We don't have a pf-prem function anymore. now it's 2 functions:
- pf-size-prem
- pf-font-prem
Depending if you want to set up a size for font or space. In this case I'd use the one for size.
|
Remember that we need CSS variables. Please create css variables with the same name as the sass variables. |
| $pf-global--sm-right--BoxShadow: pf-prem(4) 0 pf-prem(10) pf-prem(-4) rgba($pf-color-black-1000, .12) !default; | ||
| $pf-global--sm-left--BoxShadow: pf-prem(-4) 0 pf-prem(10) pf-prem(-4) rgba($pf-color-black-1000, .12) !default; | ||
| $pf-global--sm-bottom--BoxShadow: 0 pf-prem(4) 0 pf-prem(10) pf-prem(-4) rgba($pf-color-black-1000, .12) !default; | ||
| $pf-global--sm-top--BoxShadow: 0 pf-prem(-4) 0 pf-prem(10) pf-prem(-4) rgba($pf-color-black-1000, .12) !default; |
There was a problem hiding this comment.
these variable names are not consitent, sometimes they have a - others a --.
I was thinking that maybe to make them more redable we can do:
pf-global--concept--modifier--state--PropiertyCamelCase
concept: shadow
modifier: sm, lg, md, sm-left, sm-right, etc
So we end up with:
pf-global--shadow--md-left--BoxShadow
I don't know if it makes much sense. But for the meetup it's ok and we can review naming after we test them.
There was a problem hiding this comment.
I was thinking they should have --shadow-- in them also but what was there didn't so I didn't :P <3 I added it and fixed the --
Adds global variables for BoxShadow and removes the active state shadow on buttons.