summaryrefslogtreecommitdiffstats
path: root/src/objects
diff options
context:
space:
mode:
Diffstat (limited to 'src/objects')
-rw-r--r--src/objects/_icon.scss40
-rw-r--r--src/objects/_rule.scss2
-rw-r--r--src/objects/_text-field.scss169
3 files changed, 209 insertions, 2 deletions
diff --git a/src/objects/_icon.scss b/src/objects/_icon.scss
new file mode 100644
index 0000000..b9e3c0d
--- /dev/null
+++ b/src/objects/_icon.scss
@@ -0,0 +1,40 @@
1@use 'iro-sass/src/index' as iro;
2
3@include iro.props-namespace('icon') {
4 @include iro.bem-object(iro.props-namespace()) {
5 display: inline-block;
6 width: 1em;
7 height: 1em;
8 stroke-width: var(--icon-stroke-width, 1.5px);
9 stroke-linecap: round;
10 stroke-linejoin: round;
11 vertical-align: -.1em;
12
13 @include iro.bem-modifier('block') {
14 display: block;
15 }
16 }
17
18 @keyframes rotate {
19 100% {
20 transform: rotate(360deg);
21 }
22 }
23
24 @keyframes dash {
25 0% {
26 stroke-dasharray: 1, 200;
27 stroke-dashoffset: 0;
28 }
29
30 50% {
31 stroke-dasharray: 89, 200;
32 stroke-dashoffset: -35px;
33 }
34
35 100% {
36 stroke-dasharray: 89, 200;
37 stroke-dashoffset: -124px;
38 }
39 }
40}
diff --git a/src/objects/_rule.scss b/src/objects/_rule.scss
index 74987da..bfd1240 100644
--- a/src/objects/_rule.scss
+++ b/src/objects/_rule.scss
@@ -1,6 +1,4 @@
1@use 'iro-sass/src/index' as iro; 1@use 'iro-sass/src/index' as iro;
2@use '../vars';
3@use '../mixins/typography';
4 2
5@include iro.props-namespace('rule') { 3@include iro.props-namespace('rule') {
6 @include iro.props-store(( 4 @include iro.props-store((
diff --git a/src/objects/_text-field.scss b/src/objects/_text-field.scss
new file mode 100644
index 0000000..f2c3678
--- /dev/null
+++ b/src/objects/_text-field.scss
@@ -0,0 +1,169 @@
1@use 'iro-sass/src/index' as iro;
2@use '../vars';
3@use '../mixins/typography';
4
5@include iro.props-namespace('text-field') {
6 @include iro.props-store((
7 --dims: (
8 --padding-x: .6rem,
9 --padding-y: .5rem,
10 --border-width: iro.props-get(--dims --border-width --thin, $global: true),
11 --border-radius: 2px,
12
13 --focus: (
14 --border-width: iro.props-get(--dims --border-width --medium, $global: true),
15 )
16 ),
17 --colors: (
18 --bg: iro.props-get(--colors --bg-hi2, $global: true),
19 --placeholder: iro.props-get(--colors --fg-hi2, $global: true),
20 --text: iro.props-get(--colors --fg, $global: true),
21 --border: iro.props-get(--colors --obj-lo, $global: true),
22 --shadow: 0 0 0 0 transparent,
23
24 --hover: (
25 --border: iro.props-get(--colors --fg-hi2, $global: true),
26 --shadow: 0 0 0 0 transparent,
27 ),
28 --focus: (
29 --border: iro.props-get(--colors --accent --primary, $global: true),
30 --shadow: 0 0 0 0 transparent,
31 ),
32 --key-focus: (
33 --border: iro.props-get(--colors --focus --fill, $global: true),
34 --shadow: iro.props-get(--colors --focus --shadow, $global: true),
35 ),
36 --error: (
37 --border: iro.props-get(--colors --accent --error-hi, $global: true),
38 --shadow: 0 0 0 0 transparent,
39
40 --hover: (
41 --border: iro.props-get(--colors --accent --error, $global: true),
42 --shadow: iro.props-get(--colors --text-input --error --shadow, null),
43 ),
44 --focus: (
45 --border: iro.props-get(--colors --accent --error, $global: true),
46 --shadow: iro.props-get(--colors --text-input --error --shadow, null),
47 ),
48 ),
49 --disabled: (
50 --bg: iro.props-get(--colors --obj-hi, $global: true),
51 --placeholder: iro.props-get(--colors --fg-hi3, $global: true),
52 --text: iro.props-get(--colors --fg-hi3, $global: true),
53 --border: iro.props-get(--colors --obj-hi, $global: true),
54 --shadow: 0 0 0 0 transparent,
55 ),
56 ),
57 ));
58
59 @include iro.bem-object(iro.props-namespace()) {
60 position: relative;
61 min-width: 0;
62 padding: iro.props-get(--dims --padding-y) iro.props-get(--dims --padding-x);
63 background-color: iro.props-get(--colors --bg);
64
65 @include iro.bem-elem('bg') {
66 display: block;
67 position: absolute;
68 top: 0;
69 right: 0;
70 bottom: 0;
71 left: 0;
72 border: iro.props-get(--dims --border-width) solid iro.props-get(--colors --border);
73 border-radius: iro.props-get(--dims --border-radius);
74 box-shadow: iro.props-get(--colors --shadow);
75 pointer-events: none;
76 }
77
78 @include iro.bem-elem('input') {
79 @include typography.set-font(vars.$font--main, (size: 1em, line-height: vars.$line-height));
80
81 display: block;
82 color: iro.props-get(--colors --text);
83 resize: none;
84
85 &::placeholder {
86 opacity: 1;
87 color: iro.props-get(--colors --placeholder);
88 font-style: italic;
89 }
90
91 &:hover {
92 @include iro.bem-sibling-elem('bg') {
93 border-color: iro.props-get(--colors --hover --border);
94 box-shadow: iro.props-get(--colors --hover --shadow);
95 }
96 }
97
98 &:focus {
99 outline: 0;
100
101 @include iro.bem-sibling-elem('bg') {
102 $offset: calc(iro.props-get(--dims --border-width) - iro.props-get(--dims --focus --border-width));
103
104 top: $offset;
105 right: $offset;
106 bottom: $offset;
107 left: $offset;
108 border: iro.props-get(--dims --focus --border-width) solid iro.props-get(--colors --focus --border);
109 border-radius: calc(iro.props-get(--dims --border-radius) - $offset);
110 box-shadow: iro.props-get(--colors --focus --shadow);
111 }
112 }
113
114 &:invalid {
115 @include iro.bem-sibling-elem('bg') {
116 border-color: iro.props-get(--colors --error --border);
117 box-shadow: iro.props-get(--colors --error --shadow);
118 }
119
120 &:hover {
121 @include iro.bem-sibling-elem('bg') {
122 border-color: iro.props-get(--colors --error --hover --border);
123 box-shadow: iro.props-get(--colors --error --hover --shadow);
124 }
125 }
126
127 &:focus {
128 @include iro.bem-sibling-elem('bg') {
129 border-color: iro.props-get(--colors --error --focus --border);
130 box-shadow: iro.props-get(--colors --error --focus --shadow);
131 }
132 }
133 }
134
135 @include iro.bem-at-theme('keyboard') {
136 &:focus {
137 @include iro.bem-sibling-elem('bg') {
138 border-color: iro.props-get(--colors --key-focus --border);
139 box-shadow: iro.props-get(--colors --key-focus --shadow);
140 }
141 }
142 }
143 }
144
145 @include iro.bem-modifier('fill') {
146 padding: 0;
147
148 @include iro.bem-elem('input') {
149 padding: iro.props-get(--dims --padding-y) iro.props-get(--dims --padding-x);
150 }
151 }
152
153 @include iro.bem-is('disabled') {
154 background-color: iro.props-get(--colors --disabled --bg);
155
156 @include iro.bem-elem('input') {
157 color: iro.props-get(--colors --disabled --text);
158
159 &::placeholder {
160 color: iro.props-get(--colors --disabled --placeholder);
161 }
162 }
163
164 @include iro.bem-elem('bg') {
165 border-color: iro.props-get(--colors --disabled --border);
166 }
167 }
168 }
169}
generated by cgit v1.2.3-54-g00ecf (git 2.45.2) at 2024-09-21 14:01:56 +0000