summaryrefslogtreecommitdiffstats
path: root/src/.old/objects
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
parentWIP: Refactoring (diff)
downloadiro-design-6b0fcac695aa7a5517f6f53cec50da493acc4582.tar.gz
iro-design-6b0fcac695aa7a5517f6f53cec50da493acc4582.tar.bz2
iro-design-6b0fcac695aa7a5517f6f53cec50da493acc4582.zip
Update
Diffstat (limited to 'src/.old/objects')
-rw-r--r--src/.old/objects/_badge.scss173
-rw-r--r--src/.old/objects/_button.scss179
-rw-r--r--src/.old/objects/_emoji.scss74
-rw-r--r--src/.old/objects/_icon.scss26
4 files changed, 0 insertions, 452 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}
diff --git a/src/.old/objects/_button.scss b/src/.old/objects/_button.scss
deleted file mode 100644
index 7cc24fa..0000000
--- a/src/.old/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}
diff --git a/src/.old/objects/_emoji.scss b/src/.old/objects/_emoji.scss
deleted file mode 100644
index 8d17212..0000000
--- a/src/.old/objects/_emoji.scss
+++ /dev/null
@@ -1,74 +0,0 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3@use 'sass:math';
4
5@include iro.props-namespace('emoji') {
6 @include iro.props-store((
7 --dims: (
8 --size: calc(1 / 14 * 18em),
9 --pad: .3em,
10 --rounding: 3px,
11 --zoom: 3,
12 --valign: -.25em,
13
14 --125: (
15 --size: calc(1 / 14 * 23em),
16 --valign: -.45em,
17 ),
18
19 --150: (
20 --size: calc(1 / 14 * 28em),
21 --valign: -.65em,
22 ),
23
24 --200: (
25 --size: calc(1 / 14 * 38em),
26 --valign: -1em,
27 )
28 )
29 ), 'dims');
30
31 @include iro.props-store((
32 --colors: (
33 --bg: fn.global-color(--obj-hi),
34 )
35 ), 'colors');
36
37 @include iro.bem-object(iro.props-namespace()) {
38 display: inline-block;
39 position: relative;
40 width: calc(fn.dim(--size));
41 height: calc(fn.dim(--size));
42 margin: calc(-1 * fn.dim(--pad));
43 padding: calc(fn.dim(--pad));
44 vertical-align: fn.dim(--valign);
45 object-fit: contain;
46
47 @include iro.bem-modifier('icon') {
48 margin: calc(-1 * fn.dim(--pad) - .5 * (fn.dim(--size) - fn.foreign-dim(--icon, --size)));
49 vertical-align: fn.foreign-dim(--icon, --valign);
50 }
51
52 @each $size in '125' '150' '200' {
53 @include iro.bem-modifier($size) {
54 width: fn.dim(--#{$size} --size);
55 height: fn.dim(--#{$size} --size);
56 vertical-align: fn.dim(--#{$size} --valign);
57
58 @include iro.bem-modifier('icon') {
59 margin: calc(-1 * fn.dim(--pad) - .5 * (fn.dim(--#{$size} --size) - fn.foreign-dim(--icon, --size)));
60 }
61 }
62 }
63
64 @include iro.bem-modifier('zoomable') {
65 transition: transform .2s ease, background-color .2s ease;
66 border-radius: calc(fn.dim(--rounding) / fn.dim(--zoom));
67
68 &:hover {
69 transform: scale(fn.dim(--zoom));
70 background-color: fn.color(--bg);
71 }
72 }
73 }
74}
diff --git a/src/.old/objects/_icon.scss b/src/.old/objects/_icon.scss
deleted file mode 100644
index 5c4bfab..0000000
--- a/src/.old/objects/_icon.scss
+++ /dev/null
@@ -1,26 +0,0 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('icon') {
5 @include iro.props-store((
6 --dims: (
7 --stroke: 1.5px,
8 --size: calc(1 / 14 * 16em),
9 --valign: -.2em,
10 )
11 ), 'dims');
12
13 @include iro.bem-object(iro.props-namespace()) {
14 display: inline;
15 width: fn.dim(--size);
16 height: fn.dim(--size);
17 stroke-width: fn.dim(--stroke);
18 stroke-linecap: round;
19 stroke-linejoin: round;
20 vertical-align: fn.dim(--valign);
21
22 @include iro.bem-modifier('block') {
23 display: block;
24 }
25 }
26}
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-22 18:20:36 +0000