diff options
| author | Volpeon <git@volpeon.ink> | 2025-07-27 08:57:58 +0200 |
|---|---|---|
| committer | Volpeon <git@volpeon.ink> | 2025-07-27 08:57:58 +0200 |
| commit | 8e0d336780d5f78d20533a1031010519a7bb0ae4 (patch) | |
| tree | e0c19a705a4b2b92eefc5c1a37be7dc242f2b15e /src | |
| parent | Add pill style to text field (diff) | |
| download | iro-design-8e0d336780d5f78d20533a1031010519a7bb0ae4.tar.gz iro-design-8e0d336780d5f78d20533a1031010519a7bb0ae4.tar.bz2 iro-design-8e0d336780d5f78d20533a1031010519a7bb0ae4.zip | |
Update
Diffstat (limited to 'src')
| -rw-r--r-- | src/objects/_text-field.scss | 28 |
1 files changed, 16 insertions, 12 deletions
diff --git a/src/objects/_text-field.scss b/src/objects/_text-field.scss index 2beff5f..a52050c 100644 --- a/src/objects/_text-field.scss +++ b/src/objects/_text-field.scss | |||
| @@ -104,38 +104,42 @@ | |||
| 104 | } | 104 | } |
| 105 | } | 105 | } |
| 106 | 106 | ||
| 107 | @include bem.modifier('pill') { | 107 | @include bem.modifier('extended') { |
| 108 | border-radius: 100em; | 108 | padding: props.get(vars.$extended--pad); |
| 109 | 109 | ||
| 110 | @include bem.elem('bg') { | 110 | @include bem.multi('&', 'elem' 'bg') { |
| 111 | border-radius: 100em; | 111 | border-radius: calc(props.get(vars.$rounding) + props.get(vars.$extended--pad)); |
| 112 | } | 112 | } |
| 113 | 113 | ||
| 114 | @include bem.elem('native') { | 114 | @include bem.elem('native') { |
| 115 | padding-inline: props.get(vars.$pad-i-pill); | ||
| 116 | |||
| 117 | &:focus { | 115 | &:focus { |
| 118 | @include bem.sibling-elem('bg') { | 116 | @include bem.sibling-elem('bg') { |
| 119 | border-radius: 100em; | 117 | border-radius: calc(props.get(vars.$rounding) + props.get(vars.$extended--pad) - $focus-border-offset); |
| 120 | } | 118 | } |
| 121 | } | 119 | } |
| 122 | } | 120 | } |
| 123 | } | 121 | } |
| 124 | 122 | ||
| 125 | @include bem.modifier('extended') { | 123 | @include bem.modifier('pill') { |
| 126 | padding: props.get(vars.$extended--pad); | ||
| 127 | |||
| 128 | @include bem.multi('&', 'elem' 'bg') { | 124 | @include bem.multi('&', 'elem' 'bg') { |
| 129 | border-radius: calc(props.get(vars.$rounding) + props.get(vars.$extended--pad)); | 125 | border-radius: 100em; |
| 130 | } | 126 | } |
| 131 | 127 | ||
| 132 | @include bem.elem('native') { | 128 | @include bem.elem('native') { |
| 129 | padding-inline: props.get(vars.$pad-i-pill); | ||
| 130 | |||
| 133 | &:focus { | 131 | &:focus { |
| 134 | @include bem.sibling-elem('bg') { | 132 | @include bem.sibling-elem('bg') { |
| 135 | border-radius: calc(props.get(vars.$rounding) + props.get(vars.$extended--pad) - $focus-border-offset); | 133 | border-radius: 100em; |
| 136 | } | 134 | } |
| 137 | } | 135 | } |
| 138 | } | 136 | } |
| 137 | |||
| 138 | @include bem.modifier('extended') { | ||
| 139 | @include bem.elem('native') { | ||
| 140 | padding-inline: props.get(vars.$pad-i); | ||
| 141 | } | ||
| 142 | } | ||
| 139 | } | 143 | } |
| 140 | 144 | ||
| 141 | @include bem.is('invalid') { | 145 | @include bem.is('invalid') { |