summaryrefslogtreecommitdiffstats
path: root/src/objects
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2022-06-11 18:05:34 +0200
committerVolpeon <git@volpeon.ink>2022-06-11 18:05:34 +0200
commit2e5311284e338baeb6bb3dfedb7b3d77a36df682 (patch)
tree42e224d7e594fdcb29c41269b4db75b910e3f024 /src/objects
parentFix hr border color (diff)
downloadiro-design-2e5311284e338baeb6bb3dfedb7b3d77a36df682.tar.gz
iro-design-2e5311284e338baeb6bb3dfedb7b3d77a36df682.tar.bz2
iro-design-2e5311284e338baeb6bb3dfedb7b3d77a36df682.zip
Added focus style for badge
Diffstat (limited to 'src/objects')
-rw-r--r--src/objects/_badge.scss24
1 files changed, 20 insertions, 4 deletions
diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss
index f12ec1c..8ef2699 100644
--- a/src/objects/_badge.scss
+++ b/src/objects/_badge.scss
@@ -4,16 +4,16 @@
4@include iro.props-namespace('badge') { 4@include iro.props-namespace('badge') {
5 @include iro.props-store(( 5 @include iro.props-store((
6 --dims: ( 6 --dims: (
7 --pad-x: fn.global-dim(--size --75), 7 --pad-x: fn.global-dim(--size --50),
8 --pad-y: fn.global-dim(--size --10), 8 --pad-y: 0,
9 --rounding: 3px, 9 --rounding: 3px,
10 --font-size: fn.global-dim(--font-size --75), 10 --font-size: fn.global-dim(--font-size --75),
11 --fixed-100: 1em, 11 --fixed-100: 1em,
12 --fixed-200: 1.5em, 12 --fixed-200: 1.5em,
13 13
14 --200: ( 14 --200: (
15 --pad-x: fn.global-dim(--size --100), 15 --pad-x: fn.global-dim(--size --75),
16 --pad-y: fn.global-dim(--size --50), 16 --pad-y: fn.global-dim(--size --25),
17 ) 17 )
18 ), 18 ),
19 ), 'dims'); 19 ), 'dims');
@@ -28,6 +28,10 @@
28 --active: ( 28 --active: (
29 --bg: fn.global-color(--obj-lo), 29 --bg: fn.global-color(--obj-lo),
30 ), 30 ),
31 --key-focus: (
32 --border: fn.global-color(--focus --fill),
33 --shadow: fn.global-color(--focus --shadow),
34 ),
31 35
32 --accent: ( 36 --accent: (
33 --bg: fn.global-color(--accent --primary --bg), 37 --bg: fn.global-color(--accent --primary --bg),
@@ -45,6 +49,7 @@
45 @include iro.bem-object(iro.props-namespace()) { 49 @include iro.bem-object(iro.props-namespace()) {
46 display: inline-block; 50 display: inline-block;
47 padding: fn.dim(--pad-y) fn.dim(--pad-x); 51 padding: fn.dim(--pad-y) fn.dim(--pad-x);
52 border: 2px solid transparent;
48 border-radius: fn.dim(--rounding); 53 border-radius: fn.dim(--rounding);
49 background-color: fn.color(--bg); 54 background-color: fn.color(--bg);
50 color: fn.color(--label); 55 color: fn.color(--label);
@@ -79,6 +84,17 @@
79 } 84 }
80 } 85 }
81 } 86 }
87
88 &:link,
89 &:visited,
90 &:enabled {
91 @include iro.bem-at-theme('keyboard') {
92 &:focus {
93 border-color: fn.color(--key-focus --border);
94 box-shadow: fn.color(--key-focus --shadow);
95 }
96 }
97 }
82 98
83 @include iro.bem-modifier('fixed-100') { 99 @include iro.bem-modifier('fixed-100') {
84 width: fn.dim(--fixed-100); 100 width: fn.dim(--fixed-100);