summaryrefslogtreecommitdiffstats
path: root/src/objects/_text-field.scss
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2022-02-05 18:32:31 +0100
committerVolpeon <git@volpeon.ink>2022-02-05 18:32:31 +0100
commit1cb77f7c4cb27e40e368656b6536bb208d96aef9 (patch)
treef2e21f92a50c78895473d998811488fdb96cfec3 /src/objects/_text-field.scss
parentAdded button (diff)
downloadiro-design-1cb77f7c4cb27e40e368656b6536bb208d96aef9.tar.gz
iro-design-1cb77f7c4cb27e40e368656b6536bb208d96aef9.tar.bz2
iro-design-1cb77f7c4cb27e40e368656b6536bb208d96aef9.zip
Added text field
Diffstat (limited to 'src/objects/_text-field.scss')
-rw-r--r--src/objects/_text-field.scss169
1 files changed, 169 insertions, 0 deletions
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 11:27:40 +0000