diff options
Diffstat (limited to 'src/objects/_button.scss')
| -rw-r--r-- | src/objects/_button.scss | 80 |
1 files changed, 33 insertions, 47 deletions
diff --git a/src/objects/_button.scss b/src/objects/_button.scss index f93f342..15804f1 100644 --- a/src/objects/_button.scss +++ b/src/objects/_button.scss | |||
| @@ -2,10 +2,24 @@ | |||
| 2 | @use '../functions' as fn; | 2 | @use '../functions' as fn; |
| 3 | 3 | ||
| 4 | @mixin button-variant($variant) { | 4 | @mixin button-variant($variant) { |
| 5 | border-color: fn.color(--#{$variant} --bg); | 5 | &:link, |
| 6 | background-color: fn.color(--#{$variant} --bg); | 6 | &:visited, |
| 7 | box-shadow: fn.color(--#{$variant} --shadow); | 7 | &:enabled { |
| 8 | color: fn.color(--#{$variant} --label); | 8 | border-color: fn.color(--#{$variant} --bg); |
| 9 | background-color: fn.color(--#{$variant} --bg); | ||
| 10 | box-shadow: fn.color(--#{$variant} --shadow); | ||
| 11 | color: fn.color(--#{$variant} --label); | ||
| 12 | } | ||
| 13 | |||
| 14 | @include iro.bem-modifier('outline') { | ||
| 15 | &:link, | ||
| 16 | &:visited, | ||
| 17 | &:enabled { | ||
| 18 | background-color: transparent; | ||
| 19 | box-shadow: none; | ||
| 20 | color: fn.color(--#{$variant} --outline-label); | ||
| 21 | } | ||
| 22 | } | ||
| 9 | 23 | ||
| 10 | &:link, | 24 | &:link, |
| 11 | &:visited, | 25 | &:visited, |
| @@ -24,12 +38,6 @@ | |||
| 24 | color: fn.color(--#{$variant} --active --label); | 38 | color: fn.color(--#{$variant} --active --label); |
| 25 | } | 39 | } |
| 26 | } | 40 | } |
| 27 | |||
| 28 | @include iro.bem-modifier('outline') { | ||
| 29 | background-color: transparent; | ||
| 30 | box-shadow: none; | ||
| 31 | color: fn.color(--#{$variant} --outline-label); | ||
| 32 | } | ||
| 33 | } | 41 | } |
| 34 | 42 | ||
| 35 | @include iro.props-namespace('button') { | 43 | @include iro.props-namespace('button') { |
| @@ -111,24 +119,26 @@ | |||
| 111 | ), 'colors'); | 119 | ), 'colors'); |
| 112 | 120 | ||
| 113 | @include iro.bem-object(iro.props-namespace()) { | 121 | @include iro.bem-object(iro.props-namespace()) { |
| 114 | display: inline-block; | 122 | display: inline-block; |
| 115 | padding: fn.dim(--pad-y) fn.dim(--pad-x); | 123 | padding: fn.dim(--pad-y) fn.dim(--pad-x); |
| 116 | border: 2px solid transparent; | 124 | border: 2px solid transparent; |
| 117 | border-radius: fn.dim(--rounding); | 125 | border-radius: fn.dim(--rounding); |
| 118 | font-weight: 500; | 126 | border-color: fn.color(--any --disabled --bg); |
| 119 | line-height: 1; | 127 | background-color: fn.color(--any --disabled --bg); |
| 120 | text-align: center; | 128 | box-shadow: fn.color(--any --disabled --shadow); |
| 121 | text-decoration: none; | 129 | color: fn.color(--any --disabled --label); |
| 130 | font-weight: 500; | ||
| 131 | line-height: 1; | ||
| 132 | text-align: center; | ||
| 133 | text-decoration: none; | ||
| 122 | 134 | ||
| 123 | @include iro.bem-modifier('block') { | 135 | @include iro.bem-modifier('block') { |
| 124 | display: block; | 136 | display: block; |
| 125 | } | 137 | } |
| 126 | 138 | ||
| 127 | @include iro.bem-modifier('native') { | 139 | @include iro.bem-modifier('outline') { |
| 128 | @include iro.bem-modifier('block') { | 140 | background-color: transparent; |
| 129 | box-sizing: border-box; | 141 | box-shadow: none; |
| 130 | width: 100%; | ||
| 131 | } | ||
| 132 | } | 142 | } |
| 133 | 143 | ||
| 134 | @include button-variant('secondary'); | 144 | @include button-variant('secondary'); |
| @@ -147,29 +157,5 @@ | |||
| 147 | color: fn.color(--any --key-focus --label); | 157 | color: fn.color(--any --key-focus --label); |
| 148 | } | 158 | } |
| 149 | } | 159 | } |
| 150 | |||
| 151 | @include iro.bem-is('disabled') { | ||
| 152 | border-color: fn.color(--any --disabled --bg); | ||
| 153 | background-color: fn.color(--any --disabled --bg); | ||
| 154 | box-shadow: fn.color(--any --disabled --shadow); | ||
| 155 | color: fn.color(--any --disabled --label); | ||
| 156 | |||
| 157 | &:link, | ||
| 158 | &:visited, | ||
| 159 | &:enabled { | ||
| 160 | &:hover, | ||
| 161 | &:active { | ||
| 162 | border-color: fn.color(--any --disabled --bg); | ||
| 163 | background-color: fn.color(--any --disabled --bg); | ||
| 164 | box-shadow: fn.color(--any --disabled --shadow); | ||
| 165 | color: fn.color(--any --disabled --label); | ||
| 166 | } | ||
| 167 | } | ||
| 168 | |||
| 169 | @include iro.bem-modifier('outline') { | ||
| 170 | background-color: transparent; | ||
| 171 | box-shadow: none; | ||
| 172 | } | ||
| 173 | } | ||
| 174 | } | 160 | } |
| 175 | } | 161 | } |
