diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/objects/_card.scss | 18 | ||||
| -rw-r--r-- | src/objects/_card.vars.scss | 8 |
2 files changed, 22 insertions, 4 deletions
diff --git a/src/objects/_card.scss b/src/objects/_card.scss index 932007e..b1386e4 100644 --- a/src/objects/_card.scss +++ b/src/objects/_card.scss | |||
| @@ -43,6 +43,16 @@ | |||
| 43 | 43 | ||
| 44 | @include bem.modifier('borderless') { | 44 | @include bem.modifier('borderless') { |
| 45 | border-color: props.get(vars.$bg-color); | 45 | border-color: props.get(vars.$bg-color); |
| 46 | box-shadow: | ||
| 47 | props.get(vars.$shadow-x) | ||
| 48 | props.get(vars.$shadow-y) | ||
| 49 | props.get(vars.$shadow-blur) | ||
| 50 | props.get(vars.$shadow-grow) | ||
| 51 | props.get(vars.$shadow-color); | ||
| 52 | } | ||
| 53 | |||
| 54 | @include bem.modifier('merge') { | ||
| 55 | border-color: props.get(vars.$bg-color); | ||
| 46 | } | 56 | } |
| 47 | 57 | ||
| 48 | @include bem.elem('avatar') { | 58 | @include bem.elem('avatar') { |
| @@ -125,6 +135,7 @@ | |||
| 125 | margin-inline: 0; | 135 | margin-inline: 0; |
| 126 | background-color: transparent; | 136 | background-color: transparent; |
| 127 | border: 0; | 137 | border: 0; |
| 138 | box-shadow: none; | ||
| 128 | 139 | ||
| 129 | @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { | 140 | @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { |
| 130 | &:hover, | 141 | &:hover, |
| @@ -144,6 +155,7 @@ | |||
| 144 | margin: 0; | 155 | margin: 0; |
| 145 | outline: none; | 156 | outline: none; |
| 146 | border: 0; | 157 | border: 0; |
| 158 | box-shadow: none; | ||
| 147 | 159 | ||
| 148 | @include bem.elem('image') { | 160 | @include bem.elem('image') { |
| 149 | margin: calc(-1 * props.get(vars.$key-focus--border-width)); | 161 | margin: calc(-1 * props.get(vars.$key-focus--border-width)); |
| @@ -167,6 +179,12 @@ | |||
| 167 | background-color: props.get(vars.$quiet--image-color); | 179 | background-color: props.get(vars.$quiet--image-color); |
| 168 | background-clip: padding-box; | 180 | background-clip: padding-box; |
| 169 | border-radius: props.get(vars.$rounding); | 181 | border-radius: props.get(vars.$rounding); |
| 182 | box-shadow: | ||
| 183 | props.get(vars.$shadow-x) | ||
| 184 | props.get(vars.$shadow-y) | ||
| 185 | props.get(vars.$shadow-blur) | ||
| 186 | props.get(vars.$shadow-grow) | ||
| 187 | props.get(vars.$shadow-color); | ||
| 170 | } | 188 | } |
| 171 | 189 | ||
| 172 | @include bem.elem('body') { | 190 | @include bem.elem('body') { |
diff --git a/src/objects/_card.vars.scss b/src/objects/_card.vars.scss index 592182e..ebfba10 100644 --- a/src/objects/_card.vars.scss +++ b/src/objects/_card.vars.scss | |||
| @@ -14,10 +14,10 @@ $image-overlay--pad-b: props.def(--o-card--image-overlay--pad-b, props.get($pad- | |||
| 14 | 14 | ||
| 15 | $hover--offset-b: props.def(--o-card--hover--offset-b, calc(-1 * props.get(core.$size--65))) !default; | 15 | $hover--offset-b: props.def(--o-card--hover--offset-b, calc(-1 * props.get(core.$size--65))) !default; |
| 16 | 16 | ||
| 17 | $shadow-x: props.def(--o-card--shadow-x, props.get(core.$shadow--l2--x)) !default; | 17 | $shadow-x: props.def(--o-card--shadow-x, props.get(core.$shadow--l1--x)) !default; |
| 18 | $shadow-y: props.def(--o-card--shadow-y, props.get(core.$shadow--l2--y)) !default; | 18 | $shadow-y: props.def(--o-card--shadow-y, props.get(core.$shadow--l1--y)) !default; |
| 19 | $shadow-blur: props.def(--o-card--shadow-blur, props.get(core.$shadow--l2--blur)) !default; | 19 | $shadow-blur: props.def(--o-card--shadow-blur, props.get(core.$shadow--l1--blur)) !default; |
| 20 | $shadow-grow: props.def(--o-card--shadow-grow, props.get(core.$shadow--l2--grow)) !default; | 20 | $shadow-grow: props.def(--o-card--shadow-grow, props.get(core.$shadow--l1--grow)) !default; |
| 21 | 21 | ||
| 22 | $key-focus--border-width: props.def(--o-card--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; | 22 | $key-focus--border-width: props.def(--o-card--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; |
| 23 | $key-focus--border-offset: props.def(--o-card--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; | 23 | $key-focus--border-offset: props.def(--o-card--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; |
