@iroco/ui 1.4.1 → 1.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/dist/Alert.svelte +5 -4
  2. package/dist/Button.svelte +4 -0
  3. package/dist/ImageArticle.svelte +4 -0
  4. package/dist/NavBar.svelte +4 -0
  5. package/dist/NumberInput.svelte +50 -10
  6. package/dist/RadioButton.svelte +58 -1
  7. package/dist/TextInput.svelte +60 -28
  8. package/dist/scss/button.scss +5 -1
  9. package/dist/scss/forms.scss +58 -13
  10. package/dist/scss/style.scss +7 -1
  11. package/package.json +1 -1
  12. package/dist/scss/fields/_checkbox.scss +0 -39
  13. package/dist/scss/fields/_input.scss +0 -158
  14. package/dist/scss/fields/_style.scss +0 -2
package/dist/Alert.svelte CHANGED
@@ -27,10 +27,11 @@
27
27
  display: inline-flex;
28
28
  align-items: center;
29
29
  border-radius: 0.3em;
30
- padding: 0 2rem 0 1em;
30
+ padding: 0.25rem 2rem 0.25rem 1em;
31
31
  font-size: 1.2em;
32
32
  justify-content: center;
33
- margin-bottom: 1em;
33
+ margin-top: 0.75rem;
34
+ margin-bottom: 1rem;
34
35
  }
35
36
  .alert--danger {
36
37
  background-color: var(--color-danger-bg);
@@ -47,8 +48,8 @@
47
48
  .alert__close {
48
49
  display: block;
49
50
  position: absolute;
50
- right: 0;
51
- top: 0;
51
+ right: 0.1rem;
52
+ top: 0.2rem;
52
53
  background-color: transparent;
53
54
  border: none;
54
55
  cursor: pointer;
package/dist/Button.svelte CHANGED
@@ -243,6 +243,10 @@
243
243
  .iroco-ui-button:active {
244
244
  box-shadow: none;
245
245
  }
246
+ .iroco-ui-button:focus {
247
+ outline-color: var(--color-primary);
248
+ outline-style: auto;
249
+ }
246
250
  .iroco-ui-button.disabled, .iroco-ui-button:disabled {
247
251
  background-color: var(--btn-disabled-bg);
248
252
  color: var(--btn-disabled-label);
package/dist/ImageArticle.svelte CHANGED
@@ -252,6 +252,10 @@
252
252
  .iroco-ui-button:active {
253
253
  box-shadow: none;
254
254
  }
255
+ .iroco-ui-button:focus {
256
+ outline-color: var(--color-primary);
257
+ outline-style: auto;
258
+ }
255
259
  .iroco-ui-button.disabled, .iroco-ui-button:disabled {
256
260
  background-color: var(--btn-disabled-bg);
257
261
  color: var(--btn-disabled-label);
package/dist/NavBar.svelte CHANGED
@@ -264,6 +264,10 @@
264
264
  .iroco-ui-button:active {
265
265
  box-shadow: none;
266
266
  }
267
+ .iroco-ui-button:focus {
268
+ outline-color: var(--color-primary);
269
+ outline-style: auto;
270
+ }
267
271
  .iroco-ui-button.disabled, .iroco-ui-button:disabled {
268
272
  background-color: var(--btn-disabled-bg);
269
273
  color: var(--btn-disabled-label);
package/dist/NumberInput.svelte CHANGED
@@ -37,10 +37,16 @@
37
37
 
38
38
  <style>.iroco-ui-form input,
39
39
  .iroco-ui-form textarea {
40
- outline: none;
40
+ outline-color: var(--color-secondary);
41
+ outline-style: ridge;
41
42
  text-decoration: none;
42
43
  font-size: 14px;
43
44
  }
45
+ .iroco-ui-form input:focus,
46
+ .iroco-ui-form textarea:focus {
47
+ outline-color: var(--color-primary);
48
+ outline-style: auto;
49
+ }
44
50
  .iroco-ui-form .iroco-ui-input {
45
51
  display: flex;
46
52
  flex-direction: column;
@@ -61,25 +67,59 @@
61
67
  .iroco-ui-form .iroco-ui-input > input.error {
62
68
  border-color: var(--color-danger);
63
69
  }
70
+ .iroco-ui-form .iroco-ui-input > input.error:focus {
71
+ outline-color: var(--color-danger);
72
+ }
64
73
  .iroco-ui-form .iroco-ui-input > input.readonlyInput {
65
74
  cursor: not-allowed;
66
75
  }
76
+ .iroco-ui-form .iroco-ui-input > input.border {
77
+ border: 1px solid var(--form-element-border);
78
+ }
67
79
  .iroco-ui-form .iroco-ui-label {
68
80
  color: var(--color-text-op-60);
69
81
  font-weight: bold;
70
82
  padding-bottom: 10px;
71
83
  display: inline-block;
72
84
  }
73
- .iroco-ui-form .field {
74
- margin-top: 20px;
75
- }
76
- .iroco-ui-form .field:first-child {
77
- margin: 0;
78
- }
79
- .iroco-ui-form > .submit {
80
- margin-top: 40px;
81
- }
82
85
  .iroco-ui-form p.error {
83
86
  margin: 0;
84
87
  color: var(--color-danger);
88
+ }
89
+
90
+ /* radio button */
91
+ .iroco-ui-radio {
92
+ color: var(--color-text);
93
+ position: relative;
94
+ margin-top: 0.5em;
95
+ padding-left: 1.5em;
96
+ cursor: pointer;
97
+ -webkit-user-select: none;
98
+ -moz-user-select: none;
99
+ -ms-user-select: none;
100
+ user-select: none;
101
+ }
102
+
103
+ .iroco-ui-radio input {
104
+ position: absolute;
105
+ opacity: 0;
106
+ cursor: pointer;
107
+ }
108
+ .iroco-ui-radio input:focus + .radio-button-color {
109
+ outline-color: var(--color-primary);
110
+ outline-style: auto;
111
+ }
112
+
113
+ .radio-button-color {
114
+ position: absolute;
115
+ top: 0;
116
+ left: 0;
117
+ height: 1em;
118
+ width: 1em;
119
+ background-color: var(--form-element-bg);
120
+ border-radius: 50%;
121
+ }
122
+
123
+ .iroco-ui-radio input:checked ~ .radio-button-color {
124
+ background-color: var(--color-primary);
85
125
  }</style>
package/dist/RadioButton.svelte CHANGED
@@ -22,7 +22,60 @@
22
22
  {@render children?.()}
23
23
  </label>
24
24
 
25
- <style>.iroco-ui-radio {
25
+ <style>.iroco-ui-form input,
26
+ .iroco-ui-form textarea {
27
+ outline-color: var(--color-secondary);
28
+ outline-style: ridge;
29
+ text-decoration: none;
30
+ font-size: 14px;
31
+ }
32
+ .iroco-ui-form input:focus,
33
+ .iroco-ui-form textarea:focus {
34
+ outline-color: var(--color-primary);
35
+ outline-style: auto;
36
+ }
37
+ .iroco-ui-form .iroco-ui-input {
38
+ display: flex;
39
+ flex-direction: column;
40
+ }
41
+ .iroco-ui-form .iroco-ui-input > input {
42
+ color: var(--color-text);
43
+ background: var(--color-body);
44
+ border: 1px solid var(--color-border);
45
+ padding: 1em 1.5em;
46
+ text-overflow: ellipsis;
47
+ white-space: nowrap;
48
+ overflow: hidden;
49
+ border-radius: 0.5em;
50
+ }
51
+ .iroco-ui-form .iroco-ui-input > input::placeholder {
52
+ color: var(--color-text-op-50);
53
+ }
54
+ .iroco-ui-form .iroco-ui-input > input.error {
55
+ border-color: var(--color-danger);
56
+ }
57
+ .iroco-ui-form .iroco-ui-input > input.error:focus {
58
+ outline-color: var(--color-danger);
59
+ }
60
+ .iroco-ui-form .iroco-ui-input > input.readonlyInput {
61
+ cursor: not-allowed;
62
+ }
63
+ .iroco-ui-form .iroco-ui-input > input.border {
64
+ border: 1px solid var(--form-element-border);
65
+ }
66
+ .iroco-ui-form .iroco-ui-label {
67
+ color: var(--color-text-op-60);
68
+ font-weight: bold;
69
+ padding-bottom: 10px;
70
+ display: inline-block;
71
+ }
72
+ .iroco-ui-form p.error {
73
+ margin: 0;
74
+ color: var(--color-danger);
75
+ }
76
+
77
+ /* radio button */
78
+ .iroco-ui-radio {
26
79
  color: var(--color-text);
27
80
  position: relative;
28
81
  margin-top: 0.5em;
@@ -39,6 +92,10 @@
39
92
  opacity: 0;
40
93
  cursor: pointer;
41
94
  }
95
+ .iroco-ui-radio input:focus + .radio-button-color {
96
+ outline-color: var(--color-primary);
97
+ outline-style: auto;
98
+ }
42
99
 
43
100
  .radio-button-color {
44
101
  position: absolute;
package/dist/TextInput.svelte CHANGED
@@ -74,59 +74,91 @@
74
74
  {/if}
75
75
  </div>
76
76
 
77
- <style>input,
78
- textarea {
79
- outline: none;
77
+ <style>.iroco-ui-form input,
78
+ .iroco-ui-form textarea {
79
+ outline-color: var(--color-secondary);
80
+ outline-style: ridge;
80
81
  text-decoration: none;
81
82
  font-size: 14px;
82
83
  }
83
- input:focus,
84
- textarea:focus {
85
- outline: none;
86
- text-decoration: none;
87
- font-size: 14px;
84
+ .iroco-ui-form input:focus,
85
+ .iroco-ui-form textarea:focus {
86
+ outline-color: var(--color-primary);
87
+ outline-style: auto;
88
88
  }
89
-
90
- .iroco-ui-input {
89
+ .iroco-ui-form .iroco-ui-input {
91
90
  display: flex;
92
91
  flex-direction: column;
93
92
  }
94
- .iroco-ui-input > input {
93
+ .iroco-ui-form .iroco-ui-input > input {
95
94
  color: var(--color-text);
96
- background: var(--color-dark-blue);
97
- border: 1px solid var(--color-dark-blue);
95
+ background: var(--color-body);
96
+ border: 1px solid var(--color-border);
98
97
  padding: 1em 1.5em;
99
98
  text-overflow: ellipsis;
100
99
  white-space: nowrap;
101
100
  overflow: hidden;
102
- border-radius: 0.3em;
103
- }
104
- .iroco-ui-input > input.border {
105
- border: 1px solid var(--form-element-border);
101
+ border-radius: 0.5em;
106
102
  }
107
- .iroco-ui-input > input::placeholder {
103
+ .iroco-ui-form .iroco-ui-input > input::placeholder {
108
104
  color: var(--color-text-op-50);
109
105
  }
110
- .iroco-ui-input > input.error {
106
+ .iroco-ui-form .iroco-ui-input > input.error {
111
107
  border-color: var(--color-danger);
112
108
  }
113
- .iroco-ui-input > input.readonlyInput {
109
+ .iroco-ui-form .iroco-ui-input > input.error:focus {
110
+ outline-color: var(--color-danger);
111
+ }
112
+ .iroco-ui-form .iroco-ui-input > input.readonlyInput {
114
113
  cursor: not-allowed;
115
114
  }
116
- .iroco-ui-input .error {
117
- color: var(--color-danger);
115
+ .iroco-ui-form .iroco-ui-input > input.border {
116
+ border: 1px solid var(--form-element-border);
118
117
  }
119
-
120
- .iroco-ui-label {
118
+ .iroco-ui-form .iroco-ui-label {
121
119
  color: var(--color-text-op-60);
122
120
  font-weight: bold;
123
121
  padding-bottom: 10px;
124
122
  display: inline-block;
125
123
  }
124
+ .iroco-ui-form p.error {
125
+ margin: 0;
126
+ color: var(--color-danger);
127
+ }
126
128
 
127
- .field {
128
- margin-top: 20px;
129
+ /* radio button */
130
+ .iroco-ui-radio {
131
+ color: var(--color-text);
132
+ position: relative;
133
+ margin-top: 0.5em;
134
+ padding-left: 1.5em;
135
+ cursor: pointer;
136
+ -webkit-user-select: none;
137
+ -moz-user-select: none;
138
+ -ms-user-select: none;
139
+ user-select: none;
129
140
  }
130
- .field:first-child {
131
- margin: 0;
141
+
142
+ .iroco-ui-radio input {
143
+ position: absolute;
144
+ opacity: 0;
145
+ cursor: pointer;
146
+ }
147
+ .iroco-ui-radio input:focus + .radio-button-color {
148
+ outline-color: var(--color-primary);
149
+ outline-style: auto;
150
+ }
151
+
152
+ .radio-button-color {
153
+ position: absolute;
154
+ top: 0;
155
+ left: 0;
156
+ height: 1em;
157
+ width: 1em;
158
+ background-color: var(--form-element-bg);
159
+ border-radius: 50%;
160
+ }
161
+
162
+ .iroco-ui-radio input:checked ~ .radio-button-color {
163
+ background-color: var(--color-primary);
132
164
  }</style>
package/dist/scss/button.scss CHANGED
@@ -1,4 +1,3 @@
1
- //@use './colors';
2
1
  @use './fonts';
3
2
  @use './containers';
4
3
  @use './constants';
@@ -59,6 +58,11 @@
59
58
  box-shadow: none;
60
59
  }
61
60
 
61
+ &:focus {
62
+ outline-color: var(--color-primary);
63
+ outline-style: auto;
64
+ }
65
+
62
66
  &.disabled,
63
67
  &:disabled {
64
68
  background-color: var(--btn-disabled-bg);
package/dist/scss/forms.scss CHANGED
@@ -1,18 +1,26 @@
1
1
  .iroco-ui-form {
2
2
  input,
3
3
  textarea {
4
- outline: none;
4
+ outline-color: var(--color-secondary);
5
+ outline-style: ridge;
5
6
  text-decoration: none;
6
7
  font-size: 14px;
8
+
9
+ &:focus {
10
+ outline-color: var(--color-primary);
11
+ outline-style: auto;
12
+ }
7
13
  }
8
14
 
9
15
  .iroco-ui-input {
10
16
  display: flex;
11
17
  flex-direction: column;
18
+
12
19
  > input {
13
20
  color: var(--color-text);
14
21
  background: var(--color-body);
15
22
  border: 1px solid var(--color-border);
23
+ //border: 1px solid var(--color-dark-blue);
16
24
  padding: 1em 1.5em;
17
25
  text-overflow: ellipsis;
18
26
  white-space: nowrap;
@@ -22,12 +30,22 @@
22
30
  &::placeholder {
23
31
  color: var(--color-text-op-50);
24
32
  }
33
+
25
34
  &.error {
26
35
  border-color: var(--color-danger);
36
+
37
+ &:focus {
38
+ outline-color: var(--color-danger);
39
+ }
27
40
  }
41
+
28
42
  &.readonlyInput {
29
43
  cursor: not-allowed;
30
44
  }
45
+
46
+ &.border {
47
+ border: 1px solid var(--form-element-border);
48
+ }
31
49
  }
32
50
  }
33
51
 
@@ -38,20 +56,47 @@
38
56
  display: inline-block;
39
57
  }
40
58
 
41
- .field {
42
- margin-top: 20px;
43
-
44
- &:first-child {
45
- margin: 0;
46
- }
47
- }
48
-
49
- > .submit {
50
- margin-top: 40px;
51
- }
52
-
53
59
  p.error {
54
60
  margin: 0;
55
61
  color: var(--color-danger);
56
62
  }
57
63
  }
64
+
65
+ /* radio button */
66
+
67
+ .iroco-ui-radio {
68
+ color: var(--color-text);
69
+ position: relative;
70
+ margin-top: 0.5em;
71
+ padding-left: 1.5em;
72
+ cursor: pointer;
73
+ -webkit-user-select: none;
74
+ -moz-user-select: none;
75
+ -ms-user-select: none;
76
+ user-select: none;
77
+ }
78
+
79
+ .iroco-ui-radio input {
80
+ position: absolute;
81
+ opacity: 0;
82
+ cursor: pointer;
83
+
84
+ &:focus + .radio-button-color {
85
+ outline-color: var(--color-primary);
86
+ outline-style: auto;
87
+ }
88
+ }
89
+
90
+ .radio-button-color {
91
+ position: absolute;
92
+ top: 0;
93
+ left: 0;
94
+ height: 1em;
95
+ width: 1em;
96
+ background-color: var(--form-element-bg);
97
+ border-radius: 50%;
98
+ }
99
+
100
+ .iroco-ui-radio input:checked ~ .radio-button-color {
101
+ background-color: var(--color-primary);
102
+ }
package/dist/scss/style.scss CHANGED
@@ -1,5 +1,11 @@
1
- //@use 'colors';
2
1
  @use 'containers';
3
2
  @use 'fonts';
4
3
  @use 'forms';
5
4
  @use 'layouts';
5
+
6
+ button:focus,
7
+ a:focus,
8
+ input:focus {
9
+ outline-color: var(--color-primary);
10
+ outline-style: auto;
11
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@iroco/ui",
3
- "version": "1.4.1",
3
+ "version": "1.5.0",
4
4
  "description": "Iroco design system based on Svelte",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {
package/dist/scss/fields/_checkbox.scss DELETED
@@ -1,39 +0,0 @@
1
- .ui-fields-checkbox {
2
- > .container {
3
- display: flex;
4
- align-items: center;
5
- justify-content: flex-start;
6
-
7
- > label {
8
- @include Arial(0.9em, #00b9ff /*$blue*/, bold);
9
- letter-spacing: 0.05em;
10
- text-transform: uppercase;
11
- display: inline-block;
12
- margin-left: 20px;
13
-
14
- @include small-screen() {
15
- font-size: 0.8em;
16
- margin-left: 15px;
17
- }
18
- }
19
- }
20
-
21
- > .error,
22
- > .warning {
23
- display: flex;
24
- align-items: center;
25
- justify-content: flex-start;
26
- margin-top: 15px;
27
-
28
- > span {
29
- @include Arial(0.9em, var(--color-danger) /* red */);
30
- margin-left: 10px;
31
- }
32
- }
33
-
34
- > .warning {
35
- > span {
36
- color: #00b9ff /*$blue*/;
37
- }
38
- }
39
- }
package/dist/scss/fields/_input.scss DELETED
@@ -1,158 +0,0 @@
1
- //@use './../colors';
2
- .ui-fields-input {
3
- width: 100%;
4
- transition: width linear 100ms;
5
-
6
- > label {
7
- @include Arial(1em, white, bold);
8
- letter-spacing: 0.05em;
9
- text-transform: uppercase;
10
- padding-bottom: 10px;
11
- display: inline-block;
12
- }
13
-
14
- input,
15
- input:active,
16
- input:focus {
17
- border: none;
18
- outline: none;
19
- text-decoration: none;
20
- background: transparent;
21
- }
22
-
23
- > .container {
24
- transition: background linear 100ms;
25
- background: white;
26
- width: 100%;
27
- display: flex;
28
- align-items: center;
29
- justify-content: space-between;
30
- position: relative;
31
-
32
- &:after {
33
- content: '';
34
- display: block;
35
- position: absolute;
36
- bottom: 0;
37
- left: 0;
38
- width: 0;
39
- height: 3px;
40
- background: var(--color-primary);
41
- transition: all 400ms cubic-bezier(0.215, 0.61, 0.355, 1);
42
- }
43
-
44
- > .left-icon {
45
- padding-left: 15px;
46
- }
47
-
48
- > input {
49
- @include Arial(1em, #211d28); /* $darkBlue */
50
- flex: 1;
51
- padding: 10px 15px;
52
- text-overflow: ellipsis;
53
- white-space: nowrap;
54
- overflow: hidden;
55
-
56
- &::placeholder {
57
- color: var(--color-dark-blue-op-30);
58
- font-style: italic;
59
- }
60
- }
61
-
62
- > .suggestions {
63
- overflow: hidden;
64
- visibility: hidden;
65
- opacity: 0;
66
- position: absolute;
67
- background: white;
68
- width: 100%;
69
- top: 100%;
70
- transition: opacity linear 100ms;
71
- @include modal-layout();
72
-
73
- > .suggestion {
74
- display: block;
75
- text-align: left;
76
- width: 100%;
77
- border: none;
78
- cursor: pointer;
79
- -webkit-touch-callout: none;
80
- -webkit-user-select: none;
81
- -moz-user-select: none;
82
- -ms-user-select: none;
83
- user-select: none;
84
- flex-shrink: 0;
85
- border-top: solid var(--color-beige) 1px;
86
- background: white;
87
- transition: background linear 100ms;
88
-
89
- &:first-child {
90
- border: none;
91
- }
92
-
93
- &:hover,
94
- &.selected {
95
- background: #f5f5f5 /*lighGrey*/;
96
- }
97
- }
98
- }
99
- }
100
-
101
- > .instructions {
102
- @include Arial(1em, var(--color-secondary-dark) /*$darkBeige*/);
103
- margin-top: 10px;
104
- }
105
-
106
- > .error,
107
- > .warning {
108
- display: flex;
109
- align-items: center;
110
- justify-content: flex-start;
111
- margin-top: 15px;
112
-
113
- > span {
114
- @include Arial(0.9em, var(--color-danger) /*$red*/);
115
- margin-left: 10px;
116
- }
117
- }
118
-
119
- > .warning {
120
- > span {
121
- color: #00b9ff /*$blue*/;
122
- }
123
- }
124
-
125
- &.active {
126
- > .container {
127
- &:after {
128
- width: 100%;
129
- }
130
-
131
- > .suggestions.active {
132
- visibility: visible;
133
- opacity: 1;
134
- }
135
- }
136
- }
137
-
138
- &.dark {
139
- > .container {
140
- background: var(--color-body);
141
-
142
- > input {
143
- padding: 15px 20px;
144
-
145
- &::placeholder {
146
- color: var(--color-white-op-30);
147
- }
148
- }
149
- }
150
-
151
- &.active,
152
- &.touched {
153
- > .container {
154
- background: white;
155
- }
156
- }
157
- }
158
- }
package/dist/scss/fields/_style.scss DELETED
@@ -1,2 +0,0 @@
1
- @use 'input';
2
- @use 'checkbox';