summaryrefslogtreecommitdiffstats
path: root/src/.old/objects/_badge.scss
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-06-22 19:30:00 +0200
committerVolpeon <git@volpeon.ink>2024-06-22 19:30:00 +0200
commit6b0fcac695aa7a5517f6f53cec50da493acc4582 (patch)
tree05b1ec4bfd484c75f1ee82f06f674aba69ad1408 /src/.old/objects/_badge.scss
parentWIP: Refactoring (diff)
downloadiro-design-6b0fcac695aa7a5517f6f53cec50da493acc4582.tar.gz
iro-design-6b0fcac695aa7a5517f6f53cec50da493acc4582.tar.bz2
iro-design-6b0fcac695aa7a5517f6f53cec50da493acc4582.zip
Update
Diffstat (limited to 'src/.old/objects/_badge.scss')
-rw-r--r--src/.old/objects/_badge.scss173
1 files changed, 0 insertions, 173 deletions
diff --git a/src/.old/objects/_badge.scss b/src/.old/objects/_badge.scss
deleted file mode 100644
index 0f73382..0000000
--- a/src/.old/objects/_badge.scss
+++ /dev/null
@@ -1,173 +0,0 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('badge') {
5 @include iro.props-store((
6 --dims: (
7 --pad-x: fn.px-to-em(4px),
8 --pad-y: 0,
9 --rounding: 3px,
10 --fixed-100: 1em,
11 --fixed-200: 1.5em,
12
13 --200: (
14 --pad-x: fn.px-to-em(6px),
15 --pad-y: fn.px-to-em(2px),
16 ),
17 --300: (
18 --pad-x: fn.px-to-em(10px),
19 --pad-y: fn.px-to-em(6px),
20 ),
21
22 --pill: (
23 --pad-x: fn.px-to-em(9px),
24
25 --200: (
26 --pad-x: fn.px-to-em(10px),
27 ),
28 --300: (
29 --pad-x: fn.px-to-em(16px),
30 ),
31 ),
32 ),
33 ), 'dims');
34
35 @include iro.props-store((
36 --colors: (
37 --bg: fn.global-color(--obj-hi),
38 --label: fn.global-color(--fg-lo),
39 --hover: (
40 --bg: fn.global-color(--obj),
41 ),
42 --active: (
43 --bg: fn.global-color(--obj-lo),
44 ),
45 --key-focus: (
46 --border: fn.global-color(--focus --fill),
47 --shadow: fn.global-color(--focus --shadow),
48 ),
49
50 --primary: (
51 --bg: fn.global-color(--fg-lo),
52 --label: fn.global-color(--bg),
53 --hover: (
54 --bg: fn.global-color(--fg),
55 ),
56 --active: (
57 --bg: fn.global-color(--fg),
58 ),
59 ),
60
61 --accent: (
62 --bg: fn.global-color(--accent --primary --solid --bg),
63 --label: fn.global-color(--accent --primary --solid --fg),
64 --hover: (
65 --bg: fn.global-color(--accent --primary --solid --obj),
66 ),
67 --active: (
68 --bg: fn.global-color(--accent --primary --solid --obj-lo),
69 ),
70 ),
71
72 --accent-quiet: (
73 --bg: fn.global-color(--accent --primary --quiet --bg),
74 --label: fn.global-color(--accent --primary --quiet --fg),
75 --hover: (
76 --bg: fn.global-color(--accent --primary --quiet --obj),
77 ),
78 --active: (
79 --bg: fn.global-color(--accent --primary --quiet --obj-lo),
80 ),
81 )
82 ),
83 ), 'colors');
84
85 @include iro.bem-object(iro.props-namespace()) {
86 display: inline-block;
87 margin-top: -.5em;
88 margin-bottom: -.5em;
89 padding: fn.dim(--pad-y) fn.dim(--pad-x);
90 border-radius: fn.dim(--rounding);
91 background-color: fn.color(--bg);
92 color: fn.color(--label);
93 line-height: fn.global-dim(--font --standard --line-height);
94 text-align: center;
95 text-decoration: none;
96
97 &:link,
98 &:visited,
99 &:enabled {
100 &:hover {
101 background-color: fn.color(--hover --bg);
102 }
103
104 &:active {
105 background-color: fn.color(--active --bg);
106 }
107 }
108
109 @each $variant in 'primary' 'accent' 'accent-quiet' {
110 @include iro.bem-modifier($variant) {
111 background-color: fn.color(--#{$variant} --bg);
112 color: fn.color(--#{$variant} --label);
113
114 &:link,
115 &:visited,
116 &:enabled {
117 &:hover {
118 background-color: fn.color(--#{$variant} --hover --bg);
119 }
120
121 &:active {
122 background-color: fn.color(--#{$variant} --active --bg);
123 }
124 }
125 }
126 }
127
128 &:link,
129 &:visited,
130 &:enabled {
131 @include iro.bem-at-theme('keyboard') {
132 &:focus {
133 background-color: transparent;
134 box-shadow: inset 0 0 0 2px fn.color(--key-focus --border), fn.color(--key-focus --shadow);
135 color: currentColor;
136 }
137 }
138 }
139
140 @include iro.bem-modifier('pill') {
141 padding-right: fn.dim(--pill --pad-x);
142 padding-left: fn.dim(--pill --pad-x);
143 border-radius: 10em;
144 }
145
146 @each $size in '200' '300' {
147 @include iro.bem-modifier($size) {
148 padding: fn.dim(--#{$size} --pad-y) fn.dim(--#{$size} --pad-x);
149
150 @include iro.bem-modifier('pill') {
151 padding-right: fn.dim(--pill --#{$size} --pad-x);
152 padding-left: fn.dim(--pill --#{$size} --pad-x);
153 }
154 }
155 }
156
157 @include iro.bem-modifier('fixed-100') {
158 width: fn.dim(--fixed-100);
159 }
160
161 @include iro.bem-modifier('fixed-200') {
162 width: fn.dim(--fixed-200);
163 }
164
165 @include iro.bem-modifier('sm') {
166 font-size: fn.global-dim(--font-size --75);
167 }
168
169 @include iro.bem-modifier('xs') {
170 font-size: fn.global-dim(--font-size --50);
171 }
172 }
173}