summaryrefslogtreecommitdiffstats
path: root/src/objects/_button.scss
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-06-21 23:07:50 +0200
committerVolpeon <git@volpeon.ink>2024-06-21 23:07:50 +0200
commit48cb00040763459fc46d4aa108bf72c12f48f422 (patch)
tree9609470d56bb31d55697ef0c42f1c908804dd3f1 /src/objects/_button.scss
parentUpdate (diff)
downloadiro-design-48cb00040763459fc46d4aa108bf72c12f48f422.tar.gz
iro-design-48cb00040763459fc46d4aa108bf72c12f48f422.tar.bz2
iro-design-48cb00040763459fc46d4aa108bf72c12f48f422.zip
WIP: Refactoring
Diffstat (limited to 'src/objects/_button.scss')
-rw-r--r--src/objects/_button.scss179
1 files changed, 0 insertions, 179 deletions
diff --git a/src/objects/_button.scss b/src/objects/_button.scss
deleted file mode 100644
index 7cc24fa..0000000
--- a/src/objects/_button.scss
+++ /dev/null
@@ -1,179 +0,0 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@mixin button-variant($variant) {
5 &:link,
6 &:visited,
7 &:enabled {
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 }
23
24 &:link,
25 &:visited,
26 &:enabled {
27 &:hover {
28 border-color: fn.color(--#{$variant} --hover --bg);
29 background-color: fn.color(--#{$variant} --hover --bg);
30 box-shadow: fn.color(--#{$variant} --hover --shadow);
31 color: fn.color(--#{$variant} --hover --label);
32 }
33
34 &:active {
35 border-color: fn.color(--#{$variant} --active --bg);
36 background-color: fn.color(--#{$variant} --active --bg);
37 box-shadow: fn.color(--#{$variant} --active --shadow);
38 color: fn.color(--#{$variant} --active --label);
39 }
40 }
41}
42
43@include iro.props-namespace('button') {
44 @include iro.props-store((
45 --dims: (
46 --line-height: 1.4,
47 --pad-x: fn.global-dim(--size --225),
48 --pad-y: fn.global-dim(--size --65),
49 --rounding: 10em,
50
51 --lg: (
52 --pad-x: fn.global-dim(--size --300),
53 --pad-y: fn.global-dim(--size --100),
54 ),
55 ),
56 ), 'dims');
57
58 @include iro.props-store((
59 --colors: (
60 --any: (
61 --disabled: (
62 --bg: fn.global-color(--obj-hi),
63 --label: fn.global-color(--fg-hi3),
64 --shadow: 0 0 0 0 transparent,
65 ),
66 --key-focus: (
67 --bg: transparent,
68 --label: fn.global-color(--focus --text),
69 --border: fn.global-color(--focus --fill),
70 --shadow: fn.global-color(--focus --shadow),
71 ),
72 ),
73 --accent: (
74 --bg: fn.global-color(--accent --primary --solid --bg),
75 --label: fn.global-color(--accent --primary --solid --fg),
76 --outline-label: fn.global-color(--accent --primary --solid --obj),
77 --shadow: 0 0 0 0 transparent,
78
79 --hover: (
80 --bg: fn.global-color(--accent --primary --solid --obj),
81 --label: fn.global-color(--accent --primary --solid --fg),
82 --shadow: 0 0 0 0 transparent,
83 ),
84 --active: (
85 --bg: fn.global-color(--accent --primary --solid --obj-lo),
86 --label: fn.global-color(--accent --primary --solid --fg),
87 --shadow: 0 0 0 0 transparent,
88 ),
89 ),
90 --primary: (
91 --bg: fn.global-color(--fg),
92 --label: fn.global-color(--bg-hi2),
93 --outline-label: fn.global-color(--fg),
94 --shadow: 0 0 0 0 transparent,
95
96 --hover: (
97 --bg: fn.global-color(--fg-lo),
98 --label: fn.global-color(--bg-hi2),
99 --shadow: 0 0 0 0 transparent,
100 ),
101 --active: (
102 --bg: fn.global-color(--fg-lo),
103 --label: fn.global-color(--bg-hi2),
104 --shadow: 0 0 0 0 transparent,
105 ),
106 ),
107 --secondary: (
108 --bg: fn.global-color(--obj-hi),
109 --label: fn.global-color(--fg),
110 --outline-label: fn.global-color(--fg),
111 --shadow: 0 0 0 0 transparent,
112
113 --hover: (
114 --bg: fn.global-color(--obj),
115 --label: fn.global-color(--fg-lo),
116 --shadow: 0 0 0 0 transparent,
117 ),
118 --active: (
119 --bg: fn.global-color(--obj-lo),
120 --label: fn.global-color(--fg-lo),
121 --shadow: 0 0 0 0 transparent,
122 ),
123 ),
124 ),
125 ), 'colors');
126
127 @include iro.bem-object(iro.props-namespace()) {
128 display: inline-block;
129 padding: fn.dim(--pad-y) fn.dim(--pad-x);
130 border: 2px solid transparent;
131 border-radius: fn.dim(--rounding);
132 border-color: fn.color(--any --disabled --bg);
133 background-color: fn.color(--any --disabled --bg);
134 box-shadow: fn.color(--any --disabled --shadow);
135 color: fn.color(--any --disabled --label);
136 font-weight: 500;
137 line-height: fn.dim(--line-height);
138 text-align: center;
139 text-decoration: none;
140 vertical-align: top;
141
142 @include iro.bem-modifier('block') {
143 display: block;
144 }
145
146 @include iro.bem-modifier('outline') {
147 background-color: transparent;
148 box-shadow: none;
149 }
150
151 @include iro.bem-modifier('lg') {
152 padding: fn.dim(--lg --pad-y) fn.dim(--lg --pad-x);
153 }
154
155 @include button-variant('secondary');
156
157 @each $mod in 'accent' 'primary' {
158 @include iro.bem-modifier($mod) {
159 @include button-variant($mod);
160 }
161 }
162
163 @include iro.bem-at-theme('keyboard') {
164 &:focus {
165 border-color: fn.color(--any --key-focus --border);
166 background-color: fn.color(--any --key-focus --bg);
167 box-shadow: fn.color(--any --key-focus --shadow);
168 color: fn.color(--any --key-focus --label);
169 }
170 }
171
172 @include iro.bem-modifier('round') {
173 width: calc(1em * fn.dim(--line-height) + 2 * fn.dim(--pad-y));
174 padding-right: 0;
175 padding-left: 0;
176 border-radius: 100em;
177 }
178 }
179}
generated by cgit v1.2.3-70-g09d2 (git 2.50.0) at 2025-11-03 21:15:13 +0000