summaryrefslogtreecommitdiffstats
path: root/src/.old/objects
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-06-26 16:53:07 +0200
committerVolpeon <git@volpeon.ink>2024-06-26 16:53:07 +0200
commitdd1ade8acc17d74a45240d255cb862009129b0ec (patch)
tree47fdc87cdcda8e8597c9d192d07ca5a97d375072 /src/.old/objects
parentAdd static themes to action button (diff)
downloadiro-design-dd1ade8acc17d74a45240d255cb862009129b0ec.tar.gz
iro-design-dd1ade8acc17d74a45240d255cb862009129b0ec.tar.bz2
iro-design-dd1ade8acc17d74a45240d255cb862009129b0ec.zip
Update
Diffstat (limited to 'src/.old/objects')
-rw-r--r--src/.old/objects/_action-menu.scss122
-rw-r--r--src/.old/objects/_avatar.scss146
-rw-r--r--src/.old/objects/_status-indicator.scss35
3 files changed, 0 insertions, 303 deletions
diff --git a/src/.old/objects/_action-menu.scss b/src/.old/objects/_action-menu.scss
deleted file mode 100644
index 12e3b5f..0000000
--- a/src/.old/objects/_action-menu.scss
+++ /dev/null
@@ -1,122 +0,0 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('action-menu') {
5 @include iro.props-store((
6 --dims: (
7 --pad-x: 0,
8 --pad-y: fn.global-dim(--size --85),
9 --separator: fn.global-dim(--size --85),
10 --rounding: 3px,
11 --border: 1px,
12 --item: (
13 --pad-x: fn.global-dim(--size --150),
14 --pad-y: fn.global-dim(--size --85),
15 ),
16 ),
17 ), 'dims');
18
19 @include iro.props-store((
20 --colors: (
21 --shadow: 0 .2em .5em rgba(#000, .1),
22 --border: fn.global-color(--border --stable-lo),
23 --separator: fn.global-color(--obj),
24 --icon: fn.global-color(--fg-hi),
25 --item: (
26 --hover: (
27 --bg: fn.global-color(--obj-hi),
28 --label: fn.global-color(--fg-lo),
29 ),
30 --disabled: (
31 --label: fn.global-color(--fg-hi3),
32 ),
33 --key-focus: (
34 --bg: fn.global-color(--obj-hi),
35 --label: fn.global-color(--fg-lo),
36 --border: fn.global-color(--focus --fill),
37 --shadow: fn.global-color(--focus --shadow),
38 ),
39 ),
40 ),
41 ), 'colors');
42
43 @include iro.props-store((
44 --colors: (
45 --shadow: 0 .2em .5em rgba(#000, .5),
46 ),
47 ), 'colors-dark');
48
49 @include iro.bem-object(iro.props-namespace()) {
50 position: absolute;
51 z-index: 10000;
52 top: 0;
53 left: 0;
54 padding: fn.dim(--pad-y) fn.dim(--pad-x);
55 transform: translate(var(--x), var(--y));
56 border: fn.dim(--border) solid fn.color(--border);
57 border-radius: fn.dim(--rounding);
58 background-clip: padding-box;
59 background-color: fn.global-color(--bg);
60 box-shadow: fn.color(--shadow);
61 color: fn.global-color(--fg);
62
63 @include iro.bem-modifier('up-left') {
64 transform: translate(var(--x), calc(var(--y) - 100%));
65 }
66
67 @include iro.bem-modifier('up-right') {
68 transform: translate(calc(var(--x) - 100%), calc(var(--y) - 100%));
69 }
70
71 @include iro.bem-modifier('down-right') {
72 transform: translate(calc(var(--x) - 100%), var(--y));
73 }
74
75 @include iro.bem-elem('item') {
76 display: block;
77 box-sizing: border-box;
78 width: 100%;
79 padding: calc(fn.dim(--item --pad-y) - 2px) calc(fn.dim(--item --pad-x) - 2px);
80 border: 2px solid transparent;
81 color: fn.color(--item --disabled --label);
82
83 &:link,
84 &:visited,
85 &:enabled {
86 color: currentColor;
87
88 &:hover,
89 &:active {
90 background-color: fn.color(--item --hover --bg);
91 color: fn.color(--item --hover --label);
92 }
93
94 @include iro.bem-at-theme('keyboard') {
95 &:focus {
96 border-radius: calc(fn.dim(--rounding) - 1px);
97 border-color: fn.color(--item --key-focus --border);
98 background-color: fn.color(--item --key-focus --bg);
99 box-shadow: fn.color(--item --key-focus --shadow);
100 color: fn.color(--item --key-focus --label);
101 }
102 }
103 }
104 }
105
106 @include iro.bem-elem('separator') {
107 height: 1px;
108 margin: fn.dim(--separator) 0;
109 background-color: fn.color(--separator);
110 }
111
112 @include iro.bem-elem('slot') {
113 padding: fn.dim(--item --pad-y) fn.dim(--item --pad-x);
114 }
115
116 @include iro.bem-elem('icon-slot') {
117 display: flex;
118 justify-content: center;
119 width: fn.foreign-dim(--icon, --size);
120 }
121 }
122}
diff --git a/src/.old/objects/_avatar.scss b/src/.old/objects/_avatar.scss
deleted file mode 100644
index 4be780e..0000000
--- a/src/.old/objects/_avatar.scss
+++ /dev/null
@@ -1,146 +0,0 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@mixin status($size) {
5 @include iro.bem-elem('status') {
6 width: fn.dim(--#{$size} --indicator-size);
7 height: fn.dim(--#{$size} --indicator-size);
8
9 @include iro.bem-next-elem('content') {
10 mask-image: radial-gradient(
11 circle calc(.5 * fn.dim(--#{$size} --indicator-size) + fn.dim(--indicator-spacing)) at
12 calc(100% - .5 * fn.dim(--#{$size} --indicator-size))
13 calc(100% - .5 * fn.dim(--#{$size} --indicator-size)),
14 transparent 95%,
15 #fff
16 );
17 }
18 }
19}
20
21@include iro.props-namespace('avatar') {
22 @include iro.props-store((
23 --dims: (
24 --400: (
25 --size: fn.global-dim(--size --1600),
26 --font-size: fn.global-dim(--font-size --800),
27 --indicator-size: fn.global-dim(--size --400),
28 ),
29 --300: (
30 --size: fn.global-dim(--size --1200),
31 --font-size: fn.global-dim(--font-size --600),
32 --indicator-size: fn.global-dim(--size --300),
33 ),
34 --200: (
35 --size: fn.global-dim(--size --800),
36 --font-size: fn.global-dim(--font-size --300),
37 --indicator-size: fn.global-dim(--size --225),
38 ),
39 --150: (
40 --size: fn.global-dim(--size --650),
41 --font-size: fn.global-dim(--font-size --200),
42 --indicator-size: fn.global-dim(--size --175),
43 ),
44 --100: (
45 --size: fn.global-dim(--size --500),
46 --font-size: fn.global-dim(--font-size --100),
47 --indicator-size: fn.global-dim(--size --150),
48 ),
49 --75: (
50 --size: fn.global-dim(--size --375),
51 --font-size: fn.global-dim(--font-size --75),
52 --indicator-size: fn.global-dim(--size --125),
53 ),
54 --50: (
55 --size: fn.global-dim(--size --250),
56 --font-size: fn.global-dim(--font-size --50),
57 --indicator-size: fn.global-dim(--size --100),
58 ),
59 --indicator-spacing: fn.global-dim(--size --40),
60 --rounding: 25%,
61 ),
62 ), 'dims');
63
64 @include iro.props-store((
65 --colors: (
66 --h: 354,
67 --s: 44%,
68 --l: 45%,
69
70 --key-focus: (
71 --border: fn.global-color(--focus --fill),
72 --shadow: 0 0 0 calc(2px + fn.global-dim(--focus --outline-width)) fn.global-color(--accent --primary --quiet --obj-lo),
73 ),
74 ),
75 ), 'colors');
76
77 @include iro.bem-object(iro.props-namespace()) {
78 display: inline-block;
79 position: relative;
80 border-radius: fn.dim(--rounding);
81 font-size: fn.dim(--100 --font-size);
82 font-style: normal;
83 vertical-align: .05em;
84
85 @include iro.bem-elem('status') {
86 position: absolute;
87 right: 0;
88 bottom: 0;
89 }
90
91 @include status(100);
92
93 @include iro.bem-elem('content') {
94 display: block;
95 width: fn.dim(--100 --size);
96 height: fn.dim(--100 --size);
97 border-radius: fn.dim(--rounding);
98 line-height: fn.dim(--100 --size);
99 text-align: center;
100 object-fit: cover;
101 object-position: center center;
102 }
103
104 @include iro.bem-modifier('circle') {
105 border-radius: 100%;
106
107 @include iro.bem-elem('content') {
108 border-radius: 100%;
109 }
110 }
111
112 @include iro.bem-modifier('placeholder') {
113 @include iro.bem-elem('content') {
114 background-color: hsl(0, 0%, fn.color(--l));
115 }
116 }
117
118 @include iro.bem-modifier('colored') {
119 @include iro.bem-elem('content') {
120 background-color: hsl(fn.color(--h), fn.color(--s), fn.color(--l));
121 color: #fff;
122 }
123 }
124
125 @each $size in 50 75 150 200 300 400 {
126 @include iro.bem-modifier($size) {
127 font-size: fn.dim(--#{$size} --font-size);
128
129 @include status($size);
130
131 @include iro.bem-elem('content') {
132 width: fn.dim(--#{$size} --size);
133 height: fn.dim(--#{$size} --size);
134 line-height: fn.dim(--#{$size} --size);
135 }
136 }
137 }
138
139 @include iro.bem-at-theme('keyboard') {
140 &:focus {
141 outline: 2px solid fn.color(--key-focus --border);
142 box-shadow: fn.color(--key-focus --shadow);
143 }
144 }
145 }
146}
diff --git a/src/.old/objects/_status-indicator.scss b/src/.old/objects/_status-indicator.scss
deleted file mode 100644
index d8ea9ef..0000000
--- a/src/.old/objects/_status-indicator.scss
+++ /dev/null
@@ -1,35 +0,0 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('status-indicator') {
5 @include iro.props-store((
6 --dims: (
7 --size: fn.global-dim(--size --125),
8 ),
9 ), 'dims');
10
11 @include iro.props-store((
12 --colors: (
13 --default: fn.global-color(--obj-lo),
14 --primary: fn.global-color(--fg),
15 --green: fn.global-color(--green --solid --bg-hi),
16 --yellow: fn.global-color(--yellow --solid --bg-hi),
17 --red: fn.global-color(--red --solid --bg-hi),
18 ),
19 ), 'colors');
20
21 @include iro.bem-object(iro.props-namespace()) {
22 display: inline-block;
23 width: fn.dim(--size);
24 height: fn.dim(--size);
25 border-radius: 10em;
26 background-color: fn.color(--default);
27 vertical-align: middle;
28
29 @each $color in 'primary' 'green' 'yellow' 'red' {
30 @include iro.bem-is($color) {
31 background-color: fn.color(--#{$color});
32 }
33 }
34 }
35}
generated by cgit v1.2.3-54-g00ecf (git 2.45.2) at 2024-09-21 12:49:54 +0000