summaryrefslogtreecommitdiffstats
path: root/src/objects
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2022-02-05 16:52:52 +0100
committerVolpeon <git@volpeon.ink>2022-02-05 16:52:52 +0100
commite18669958b229235798e31e5ad8608d9fd30c8e8 (patch)
treef6cc743ba608cb2d5f714a8e277444364c8a4ecd /src/objects
parentUpdate (diff)
downloadiro-design-e18669958b229235798e31e5ad8608d9fd30c8e8.tar.gz
iro-design-e18669958b229235798e31e5ad8608d9fd30c8e8.tar.bz2
iro-design-e18669958b229235798e31e5ad8608d9fd30c8e8.zip
Added button
Diffstat (limited to 'src/objects')
-rw-r--r--src/objects/_button.scss173
1 files changed, 173 insertions, 0 deletions
diff --git a/src/objects/_button.scss b/src/objects/_button.scss
new file mode 100644
index 0000000..5da1fbd
--- /dev/null
+++ b/src/objects/_button.scss
@@ -0,0 +1,173 @@
1@use 'iro-sass/src/index' as iro;
2@use '../vars';
3@use '../mixins/typography';
4
5@mixin button-variant($variant) {
6 border-color: iro.props-get((--colors, --#{$variant}, --bg));
7 background-color: iro.props-get((--colors, --#{$variant}, --bg));
8 box-shadow: iro.props-get((--colors, --#{$variant}, --shadow));
9 color: iro.props-get((--colors, --#{$variant}, --label));
10
11 @include iro.bem-multi('&:link, &:visited', 'modifier' 'native') {
12 &:hover {
13 border-color: iro.props-get((--colors, --#{$variant}, --hover, --bg));
14 background-color: iro.props-get((--colors, --#{$variant}, --hover, --bg));
15 box-shadow: iro.props-get((--colors, --#{$variant}, --hover, --shadow));
16 color: iro.props-get((--colors, --#{$variant}, --hover, --label));
17 }
18
19 &:active {
20 border-color: iro.props-get((--colors, --#{$variant}, --active, --bg));
21 background-color: iro.props-get((--colors, --#{$variant}, --active, --bg));
22 box-shadow: iro.props-get((--colors, --#{$variant}, --active, --shadow));
23 color: iro.props-get((--colors, --#{$variant}, --active, --label));
24 }
25 }
26
27 @include iro.bem-modifier('outline') {
28 background-color: transparent;
29 box-shadow: none;
30 color: iro.props-get((--colors, --#{$variant}, --outline-label));
31 }
32}
33
34@include iro.props-namespace('button') {
35 @include iro.props-store((
36 --dims: (
37 --padding-x: 1.2rem,
38 --padding-y: .5rem,
39 --rounding: 10em,
40 ),
41 --colors: (
42 --any: (
43 --disabled: (
44 --bg: iro.props-get(--colors --obj-hi, $global: true),
45 --label: iro.props-get(--colors --fg-hi3, $global: true),
46 --shadow: 0 0 0 0 transparent,
47 ),
48 --key-focus: (
49 --bg: transparent,
50 --label: iro.props-get(--colors --accent --primary-lo2, $global: true),
51 --border: iro.props-get(--colors --focus --fill, $global: true),
52 --shadow: iro.props-get(--colors --focus --shadow, $global: true),
53 ),
54 ),
55 --accent: (
56 --bg: iro.props-get(--colors --accent --primary, $global: true),
57 --label: iro.props-get(--colors --accent --primary-fg, $global: true),
58 --outline-label: iro.props-get(--colors --accent --primary-lo2, $global: true),
59 --shadow: 0 0 0 0 transparent,
60
61 --hover: (
62 --bg: iro.props-get(--colors --accent --primary-lo, $global: true),
63 --label: iro.props-get(--colors --accent --primary-fg, $global: true),
64 --shadow: 0 0 0 0 transparent,
65 ),
66 --active: (
67 --bg: iro.props-get(--colors --accent --primary-lo2, $global: true),
68 --label: iro.props-get(--colors --accent --primary-fg, $global: true),
69 --shadow: 0 0 0 0 transparent,
70 ),
71 ),
72 --primary: (
73 --bg: iro.props-get(--colors --fg, $global: true),
74 --label: iro.props-get(--colors --bg-hi2, $global: true),
75 --outline-label: iro.props-get(--colors --fg, $global: true),
76 --shadow: 0 0 0 0 transparent,
77
78 --hover: (
79 --bg: iro.props-get(--colors --fg-lo, $global: true),
80 --label: iro.props-get(--colors --bg-hi2, $global: true),
81 --shadow: 0 0 0 0 transparent,
82 ),
83 --active: (
84 --bg: iro.props-get(--colors --fg-lo, $global: true),
85 --label: iro.props-get(--colors --bg-hi2, $global: true),
86 --shadow: 0 0 0 0 transparent,
87 ),
88 ),
89 --secondary: (
90 --bg: iro.props-get(--colors --obj-hi, $global: true),
91 --label: iro.props-get(--colors --fg, $global: true),
92 --outline-label: iro.props-get(--colors --fg, $global: true),
93 --shadow: 0 0 0 0 transparent,
94
95 --hover: (
96 --bg: iro.props-get(--colors --obj, $global: true),
97 --label: iro.props-get(--colors --fg-lo, $global: true),
98 --shadow: 0 0 0 0 transparent,
99 ),
100 --active: (
101 --bg: iro.props-get(--colors --obj-lo, $global: true),
102 --label: iro.props-get(--colors --fg-lo, $global: true),
103 --shadow: 0 0 0 0 transparent,
104 ),
105 ),
106 ),
107 ));
108
109 @include iro.bem-object(iro.props-namespace()) {
110 @include typography.set-font(vars.$font--main, (weight: 500));
111
112 display: inline-block;
113 padding: iro.props-get(--dims --padding-y) iro.props-get(--dims --padding-x);
114 border: 2px solid transparent;
115 border-radius: iro.props-get(--dims --rounding);
116 line-height: 1;
117 text-align: center;
118 text-decoration: none;
119
120 @include iro.bem-modifier('block') {
121 display: block;
122 }
123
124 @include iro.bem-modifier('native') {
125 @include iro.bem-modifier('block') {
126 box-sizing: border-box;
127 width: 100%;
128 }
129 }
130
131 @include button-variant('secondary');
132
133 @each $mod in ('accent' 'primary' 'secondary') {
134 @if $mod != 'secondary' {
135 @include iro.bem-modifier($mod) {
136 // sass-lint:disable-block function-name-format
137 @include button-variant($mod);
138 }
139 }
140 }
141
142 @include iro.bem-at-theme('keyboard') {
143 &:focus {
144 border-color: iro.props-get(--colors --any --key-focus --border);
145 background-color: iro.props-get(--colors --any --key-focus --bg);
146 box-shadow: iro.props-get(--colors --any --key-focus --shadow);
147 color: iro.props-get(--colors --any --key-focus --label);
148 }
149 }
150
151 @include iro.bem-is('disabled') {
152 border-color: iro.props-get(--colors --any --disabled --bg);
153 background-color: iro.props-get(--colors --any --disabled --bg);
154 box-shadow: iro.props-get(--colors --any --disabled --shadow);
155 color: iro.props-get(--colors --any --disabled --label);
156
157 @include iro.bem-multi('&:link, &:visited', 'modifier' 'native') {
158 &:hover,
159 &:active {
160 border-color: iro.props-get(--colors --any --disabled --bg);
161 background-color: iro.props-get(--colors --any --disabled --bg);
162 box-shadow: iro.props-get(--colors --any --disabled --shadow);
163 color: iro.props-get(--colors --any --disabled --label);
164 }
165 }
166
167 @include iro.bem-modifier('outline') {
168 background-color: transparent;
169 box-shadow: none;
170 }
171 }
172 }
173}
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-22 14:04:41 +0000