summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2022-02-12 12:13:52 +0100
committerVolpeon <git@volpeon.ink>2022-02-12 12:13:52 +0100
commitb45574b83da655d9b5e48d5ef5ce7f2e147e3bbf (patch)
treef27cb293a2591da5a8045a6a062232f44334fe65
parentAdded dark color palette (diff)
downloadiro-design-b45574b83da655d9b5e48d5ef5ce7f2e147e3bbf.tar.gz
iro-design-b45574b83da655d9b5e48d5ef5ce7f2e147e3bbf.tar.bz2
iro-design-b45574b83da655d9b5e48d5ef5ce7f2e147e3bbf.zip
Text field update
-rw-r--r--package.json2
-rw-r--r--src/layouts/_card.scss4
-rw-r--r--src/objects/_text-field.scss18
-rw-r--r--tpl/index.pug39
-rw-r--r--tpl/objects/text-field.pug29
5 files changed, 52 insertions, 40 deletions
diff --git a/package.json b/package.json
index b1233f2..de64393 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
11 "build": "npm run build:app && npm run build:style && npm run build:icons && npm run build:assets", 11 "build": "npm run build:app && npm run build:style && npm run build:icons && npm run build:assets",
12 "build:assets": "cp -r static/* public/", 12 "build:assets": "cp -r static/* public/",
13 "build:app": "pug tpl/index.pug -p tpl --out public/", 13 "build:app": "pug tpl/index.pug -p tpl --out public/",
14 "build:icons": "node node_modules/iro-icons/scripts/create_sprite.js check trash bookmark tags user chevron-right hash x public/icons.svg", 14 "build:icons": "node node_modules/iro-icons/scripts/create_sprite.js check trash bookmark tags user chevron-right hash x send smile public/icons.svg",
15 "build:style": "sass --load-path=node_modules src/index.scss public/style.css", 15 "build:style": "sass --load-path=node_modules src/index.scss public/style.css",
16 "lint:style": "stylelint \"src/**/*.scss\"", 16 "lint:style": "stylelint \"src/**/*.scss\"",
17 "fix:style": "stylelint \"src/**/*.scss\" --fix", 17 "fix:style": "stylelint \"src/**/*.scss\" --fix",
diff --git a/src/layouts/_card.scss b/src/layouts/_card.scss
index 75c16ff..19e097c 100644
--- a/src/layouts/_card.scss
+++ b/src/layouts/_card.scss
@@ -30,6 +30,10 @@
30 padding: 0; 30 padding: 0;
31 } 31 }
32 32
33 @include iro.bem-modifier('gapless') {
34 gap: 0;
35 }
36
33 @include iro.bem-elem('block') { 37 @include iro.bem-elem('block') {
34 flex: 0 0 auto; 38 flex: 0 0 auto;
35 39
diff --git a/src/objects/_text-field.scss b/src/objects/_text-field.scss
index 1bd7ea1..b18b404 100644
--- a/src/objects/_text-field.scss
+++ b/src/objects/_text-field.scss
@@ -89,7 +89,6 @@
89 @include iro.bem-object(iro.props-namespace()) { 89 @include iro.bem-object(iro.props-namespace()) {
90 position: relative; 90 position: relative;
91 min-width: 0; 91 min-width: 0;
92 padding: fn.dim(--pad-y) fn.dim(--pad-x);
93 background-color: fn.color(--bg); 92 background-color: fn.color(--bg);
94 93
95 @include iro.bem-elem('bg') { 94 @include iro.bem-elem('bg') {
@@ -106,9 +105,11 @@
106 } 105 }
107 106
108 @include iro.bem-elem('native') { 107 @include iro.bem-elem('native') {
109 width: 100%; 108 box-sizing: border-box;
110 color: fn.color(--text); 109 width: 100%;
111 resize: none; 110 padding: fn.dim(--pad-y) fn.dim(--pad-x);
111 color: fn.color(--text);
112 resize: none;
112 113
113 &::placeholder { 114 &::placeholder {
114 opacity: 1; 115 opacity: 1;
@@ -167,15 +168,6 @@
167 } 168 }
168 } 169 }
169 170
170 @include iro.bem-modifier('fill') {
171 padding: 0;
172
173 @include iro.bem-elem('native') {
174 box-sizing: border-box;
175 padding: fn.dim(--pad-y) fn.dim(--pad-x);
176 }
177 }
178
179 @include iro.bem-is('disabled') { 171 @include iro.bem-is('disabled') {
180 background-color: fn.color(--disabled --bg); 172 background-color: fn.color(--disabled --bg);
181 box-shadow: fn.color(--disabled --shadow); 173 box-shadow: fn.color(--disabled --shadow);
diff --git a/tpl/index.pug b/tpl/index.pug
index a6a8f87..365ca52 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -112,28 +112,25 @@ html
112 +rule('medium') 112 +rule('medium')
113 113
114 +box 114 +box
115 +text-field(placeholder='Placeholder') 115 div(style={ display: 'flex', gap: '1rem' })
116 br 116 +text-field(placeholder='Placeholder')
117 br 117 +text-field(value='Just landed in L.A.')
118 +text-field(value='Just landed in L.A.') 118 +text-field(value='Readonly' readonly=true)
119 br 119 +text-field(value='Incorrect input' pattern='a+' required=true)
120 br
121 +text-field(value='Readonly' readonly=true)
122 br
123 br
124 +text-field(value='Incorrect input' pattern='a+' required=true)
125 br
126 br
127 +text-field(placeholder='Placeholder' disabled=true)
128 br
129 br
130 +text-field(value='Just landed in L.A.' disabled=true)
131 br
132 br
133 +text-field(value='Readonly' readonly=true disabled=true)
134 br
135 br 120 br
136 +text-field(value='Incorrect input' pattern='a+' required=true disabled=true) 121 div(style={ display: 'flex', gap: '1rem' })
122 +text-field(placeholder='Placeholder' disabled=true)
123 +text-field(value='Just landed in L.A.' disabled=true)
124 +text-field(value='Readonly' readonly=true disabled=true)
125 +text-field(value='Incorrect input' pattern='a+' required=true disabled=true)
126 br
127 div
128 +text-field(placeholder='Just landed in L.A.')
129 +slot('pre')
130 +action-button(quiet=true selected=true class='l-card__block')= 'Volpeon'
131 +slot('post')
132 +action-button(quiet=true icon='smile' class='l-card__block')
133 +action-button(quiet=true icon='send' class='l-card__block')
137 134
138 //----------------------------------------- 135 //-----------------------------------------
139 136
diff --git a/tpl/objects/text-field.pug b/tpl/objects/text-field.pug
index c933b69..24f8e21 100644
--- a/tpl/objects/text-field.pug
+++ b/tpl/objects/text-field.pug
@@ -1,13 +1,32 @@
1include icon.pug 1include icon.pug
2 2
3mixin text-field 3mixin text-field
4 - const slots = {}
5
6 mixin slot(key)
7 - slots[key] = block
8
4 - 9 -
10 block ? block() : undefined
11
5 let classes = { 12 let classes = {
6 'o-text-field': true, 13 'o-text-field': true,
7 'is-invalid': attributes.invalid, 14 'o-text-field--ext': attributes.ext,
8 'is-disabled': attributes.disabled, 15 'is-invalid': attributes.invalid,
16 'is-disabled': attributes.disabled,
17 'l-card': !!block,
18 'l-card--flush': !!block,
19 'l-card--gapless': !!block
9 } 20 }
10 21
11 div(class=classes aria-disabled=attributes.disabled && String(attributes.disabled)) 22 div(class=classes aria-disabled=attributes.disabled && String(attributes.disabled))
12 input(class='o-text-field__native')&attributes(attributes) 23 if !!block
13 .o-text-field__bg 24 if slots.pre
25 - slots.pre()
26 input.o-text-field__native.l-card__block.l-card__block--main&attributes(attributes)
27 if slots.post
28 - slots.post()
29 .o-text-field__bg
30 else
31 input.o-text-field__native&attributes(attributes)
32 .o-text-field__bg