@unifiedsoftware/styles 2.0.0-beta.2 → 2.0.0-beta.21

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 (27) hide show
  1. package/css/fci.css +286 -139
  2. package/css/fci.min.css +1 -1
  3. package/css/styles.css +122 -18
  4. package/css/styles.min.css +1 -1
  5. package/package.json +1 -1
  6. package/scss/_utilities.scss +45 -0
  7. package/scss/components/_accordion.scss +5 -0
  8. package/scss/components/_button.scss +2 -0
  9. package/scss/components/_checkbox.scss +6 -6
  10. package/scss/components/_descriptions.scss +1 -0
  11. package/scss/components/_icon.scss +28 -0
  12. package/scss/components/_input.scss +20 -7
  13. package/scss/components/_list.scss +1 -1
  14. package/scss/components/_nav-rail.scss +2 -1
  15. package/scss/components/_radio.scss +6 -6
  16. package/scss/components/_steps.scss +41 -2
  17. package/scss/components/_switch.scss +2 -2
  18. package/scss/components/_tabs.scss +1 -1
  19. package/scss/themes/fci/components/_accordion.scss +21 -8
  20. package/scss/themes/fci/components/_button.scss +46 -9
  21. package/scss/themes/fci/components/_card.scss +7 -11
  22. package/scss/themes/fci/components/_checkbox.scss +4 -0
  23. package/scss/themes/fci/components/_icon.scss +2 -1
  24. package/scss/themes/fci/components/_index.scss +2 -1
  25. package/scss/themes/fci/components/_input.scss +75 -16
  26. package/scss/themes/fci/components/_list.scss +10 -10
  27. package/scss/themes/fci/components/_tabs.scss +32 -2
package/scss/themes/fci/components/_index.scss CHANGED
@@ -12,7 +12,6 @@
12
12
  @use 'modal';
13
13
 
14
14
  @use 'input';
15
- @use 'checkbox';
16
15
  @use 'radio';
17
16
  @use 'switch';
18
17
 
@@ -28,3 +27,5 @@
28
27
  @use 'nav-rail';
29
28
 
30
29
  @use 'steps';
30
+
31
+ @use 'checkbox';
package/scss/themes/fci/components/_input.scss CHANGED
@@ -5,52 +5,82 @@ $colors-map: (primary, secondary, success, info, warning, danger);
5
5
  .#{$prefix}theme-fci {
6
6
  .#{$prefix}input {
7
7
  --#{$prefix}input-font-family: var(--#{$prefix}font-sans);
8
- --#{$prefix}input-border-radius: 6px;
9
8
 
10
9
  &--xs {
11
- --#{$prefix}input-height: 22px;
10
+ --#{$prefix}input-height: 24px;
12
11
  --#{$prefix}input-padding-y: 0.282rem;
13
12
  --#{$prefix}input-padding-x: 0.625rem;
14
13
  --#{$prefix}input-font-size: 0.75rem;
14
+ --#{$prefix}input-border-radius: 6px;
15
+ --#{$prefix}input-line-height: 1;
16
+ }
17
+
18
+ &--xs .#{$prefix}icon:not(.#{$prefix}button .#{$prefix}icon) {
19
+ --#{$prefix}icon-font-size-default: 0.75rem;
15
20
  }
16
21
 
17
22
  &--sm {
18
- --#{$prefix}input-height: 24px;
23
+ --#{$prefix}input-height: 28px;
19
24
  --#{$prefix}input-padding-y: 0.407rem;
20
25
  --#{$prefix}input-padding-x: 0.75rem;
21
26
  --#{$prefix}input-font-size: 0.75rem;
27
+ --#{$prefix}input-border-radius: 6px;
28
+ --#{$prefix}input-line-height: 1;
29
+ }
30
+
31
+ &--sm .#{$prefix}icon:not(.#{$prefix}button .#{$prefix}icon) {
32
+ --#{$prefix}icon-font-size-default: 0.875rem;
22
33
  }
23
34
 
24
35
  &--md {
25
- --#{$prefix}input-height: 30px;
36
+ --#{$prefix}input-height: 32px;
26
37
  --#{$prefix}input-padding-y: 0.532rem;
27
38
  --#{$prefix}input-padding-x: 0.875rem;
28
- --#{$prefix}input-font-size: 0.75rem;
39
+ --#{$prefix}input-font-size: 0.8125rem;
40
+ --#{$prefix}input-border-radius: 6px;
41
+ --#{$prefix}input-line-height: 1;
29
42
  --#{$prefix}input-content-gap: 0.25rem;
30
43
  }
31
44
 
32
45
  &--md .#{$prefix}icon:not(.#{$prefix}button .#{$prefix}icon) {
33
- --#{$prefix}icon-font-size-default: 16px;
46
+ --#{$prefix}icon-font-size-default: 1rem;
34
47
  }
35
48
 
36
49
  &--lg {
37
- --#{$prefix}input-height: 34px;
50
+ --#{$prefix}input-height: 36px;
38
51
  --#{$prefix}input-padding-y: 0.625rem;
39
52
  --#{$prefix}input-padding-x: 1rem;
40
- --#{$prefix}input-font-size: 0.85rem;
53
+ --#{$prefix}input-font-size: 0.875rem;
54
+ --#{$prefix}input-border-radius: 8px;
55
+ --#{$prefix}input-line-height: 1;
56
+ }
57
+
58
+ &--lg .#{$prefix}icon:not(.#{$prefix}button .#{$prefix}icon) {
59
+ --#{$prefix}icon-font-size-default: 1.125rem;
41
60
  }
42
61
 
43
62
  &--xl {
44
- --#{$prefix}input-height: 44px;
63
+ --#{$prefix}input-height: 40px;
45
64
  --#{$prefix}input-padding-y: 0.75rem;
46
- --#{$prefix}input-padding-x: 1.125rem;
47
- --#{$prefix}input-font-size: 0.85rem;
65
+ --#{$prefix}input-padding-x: 1.25rem;
66
+ --#{$prefix}input-font-size: 1rem;
67
+ --#{$prefix}input-border-radius: 8px;
68
+ --#{$prefix}input-line-height: 1;
69
+ }
70
+
71
+ &--xl .#{$prefix}icon:not(.#{$prefix}button .#{$prefix}icon) {
72
+ --#{$prefix}icon-font-size-default: 1.25rem;
48
73
  }
49
74
 
50
75
  &--filled {
51
76
  & > .#{$prefix}outline {
52
77
  --#{$prefix}outline-border-width: 1px;
53
- --#{$prefix}outline-focus-border-width: 1px;
78
+ }
79
+
80
+ & > .#{$prefix}glow {
81
+ --#{$prefix}glow-opacity: 0;
82
+ --#{$prefix}glow-focus-border-width: 4px;
83
+ --#{$prefix}glow-focus-opacity: 0.2;
54
84
  }
55
85
  }
56
86
 
@@ -62,14 +92,24 @@ $colors-map: (primary, secondary, success, info, warning, danger);
62
92
 
63
93
  & > .#{$prefix}outline {
64
94
  --#{$prefix}outline-border-width: 1px;
65
- --#{$prefix}outline-focus-border-width: 1px;
95
+ }
96
+
97
+ & > .#{$prefix}glow {
98
+ --#{$prefix}glow-opacity: 0;
99
+ --#{$prefix}glow-focus-border-width: 4px;
100
+ --#{$prefix}glow-focus-opacity: 0.2;
66
101
  }
67
102
  }
68
103
 
69
104
  &--flat {
70
105
  & > .#{$prefix}outline {
71
106
  --#{$prefix}outline-border-width: 1px;
72
- --#{$prefix}outline-focus-border-width: 1px;
107
+ }
108
+
109
+ & > .#{$prefix}glow {
110
+ --#{$prefix}glow-opacity: 0;
111
+ --#{$prefix}glow-focus-border-width: 4px;
112
+ --#{$prefix}glow-focus-opacity: 0.2;
73
113
  }
74
114
  }
75
115
 
@@ -79,10 +119,15 @@ $colors-map: (primary, secondary, success, info, warning, danger);
79
119
  & > .#{$prefix}outline {
80
120
  --#{$prefix}outline-border-width: 1px;
81
121
  }
122
+
123
+ & > .#{$prefix}glow {
124
+ --#{$prefix}glow-opacity: 0;
125
+ }
82
126
  }
83
127
  }
84
128
 
85
129
  .#{$prefix}input--filled {
130
+ --#{$prefix}input-color: rgba(0, 0, 0, 0.87);
86
131
  --#{$prefix}input-placeholder-color: rgba(0, 0, 0, 0.6);
87
132
 
88
133
  & > .#{$prefix}overlay {
@@ -101,6 +146,10 @@ $colors-map: (primary, secondary, success, info, warning, danger);
101
146
  & > .#{$prefix}outline {
102
147
  --#{$prefix}outline-focus-border-color: var(--#{$prefix}#{$color}-color);
103
148
  }
149
+
150
+ & > .#{$prefix}glow {
151
+ --#{$prefix}glow-focus-border-color: var(--#{$prefix}#{$color}-color);
152
+ }
104
153
  }
105
154
  }
106
155
 
@@ -120,6 +169,7 @@ $colors-map: (primary, secondary, success, info, warning, danger);
120
169
  }
121
170
 
122
171
  .#{$prefix}input--outlined {
172
+ --#{$prefix}input-color: rgba(0, 0, 0, 0.87);
123
173
  --#{$prefix}input-placeholder-color: rgba(0, 0, 0, 0.6);
124
174
 
125
175
  & > .#{$prefix}overlay {
@@ -129,8 +179,8 @@ $colors-map: (primary, secondary, success, info, warning, danger);
129
179
 
130
180
  & > .#{$prefix}outline {
131
181
  --#{$prefix}outline-border-color: currentColor;
132
- --#{$prefix}outline-opacity: 0.12;
133
- --#{$prefix}outline-hover-opacity: 0.24;
182
+ --#{$prefix}outline-opacity: 0.23;
183
+ --#{$prefix}outline-hover-opacity: 0.5;
134
184
  --#{$prefix}outline-focus-opacity: 1;
135
185
  }
136
186
  }
@@ -140,6 +190,10 @@ $colors-map: (primary, secondary, success, info, warning, danger);
140
190
  & > .#{$prefix}outline {
141
191
  --#{$prefix}outline-focus-border-color: var(--#{$prefix}#{$color}-color);
142
192
  }
193
+
194
+ & > .#{$prefix}glow {
195
+ --#{$prefix}glow-focus-border-color: var(--#{$prefix}#{$color}-color);
196
+ }
143
197
  }
144
198
  }
145
199
 
@@ -162,6 +216,7 @@ $colors-map: (primary, secondary, success, info, warning, danger);
162
216
  }
163
217
 
164
218
  .#{$prefix}input--flat {
219
+ --#{$prefix}input-color: rgba(0, 0, 0, 0.87);
165
220
  --#{$prefix}input-placeholder-color: rgba(0, 0, 0, 0.6);
166
221
 
167
222
  & > .#{$prefix}overlay {
@@ -181,6 +236,10 @@ $colors-map: (primary, secondary, success, info, warning, danger);
181
236
  & > .#{$prefix}outline {
182
237
  --#{$prefix}outline-focus-border-color: var(--#{$prefix}#{$color}-color);
183
238
  }
239
+
240
+ & > .#{$prefix}glow {
241
+ --#{$prefix}glow-focus-border-color: var(--#{$prefix}#{$color}-color);
242
+ }
184
243
  }
185
244
  }
186
245
 
package/scss/themes/fci/components/_list.scss CHANGED
@@ -65,16 +65,16 @@
65
65
  --#{$prefix}list-item-title-line-height: 14px;
66
66
  }
67
67
 
68
- // .#{$prefix}list--sm .#{$prefix}list-item .#{$prefix}icon {
69
- // --#{$prefix}icon-font-size: 18px;
70
- // }
68
+ .#{$prefix}list--sm .#{$prefix}list-item .#{$prefix}icon {
69
+ --#{$prefix}icon-font-size: 18px;
70
+ }
71
71
 
72
72
  .#{$prefix}list--md .#{$prefix}list-item {
73
73
  --#{$prefix}list-item-min-height: 2.25rem;
74
74
  --#{$prefix}list-item-padding-y: 0.375rem;
75
75
  --#{$prefix}list-item-padding-x: 0.875rem;
76
76
  --#{$prefix}list-item-padding-level: 1.25rem;
77
- --#{$prefix}list-item-gap: 1rem;
77
+ --#{$prefix}list-item-gap: 0.5rem;
78
78
 
79
79
  --#{$prefix}list-item-title-font-size: 0.8125rem;
80
80
  --#{$prefix}list-item-title-line-height: 20px;
@@ -83,9 +83,9 @@
83
83
  --#{$prefix}list-item-subtitle-line-height: 16px;
84
84
  }
85
85
 
86
- // .#{$prefix}list--md .#{$prefix}list-item .#{$prefix}icon {
87
- // --#{$prefix}icon-font-size: 20px;
88
- // }
86
+ .#{$prefix}list--md .#{$prefix}list-item .#{$prefix}icon {
87
+ --#{$prefix}icon-font-size: 20px;
88
+ }
89
89
 
90
90
  .#{$prefix}list--lg .#{$prefix}list-item {
91
91
  --#{$prefix}list-item-min-height: 2.75rem;
@@ -102,7 +102,7 @@
102
102
  --#{$prefix}list-item-subtitle-line-height: 18px;
103
103
  }
104
104
 
105
- // .#{$prefix}list--lg .#{$prefix}list-item .#{$prefix}icon {
106
- // --#{$prefix}icon-font-size: 22px;
107
- // }
105
+ .#{$prefix}list--lg .#{$prefix}list-item .#{$prefix}icon {
106
+ --#{$prefix}icon-font-size: 22px;
107
+ }
108
108
  }
package/scss/themes/fci/components/_tabs.scss CHANGED
@@ -1,6 +1,38 @@
1
1
  @use '../../../variables' as *;
2
2
 
3
3
  .#{$prefix}theme-fci {
4
+ .#{$prefix}tabs {
5
+ &--xs {
6
+ --#{$prefix}tab-height: 28px;
7
+ --#{$prefix}tab-padding-x: 12px;
8
+ --#{$prefix}tab-font-size: 12px;
9
+ }
10
+
11
+ &--sm {
12
+ --#{$prefix}tab-height: 32px;
13
+ --#{$prefix}tab-font-size: 14px;
14
+ --#{$prefix}tab-padding-x: 13px;
15
+ }
16
+
17
+ &--md {
18
+ --#{$prefix}tab-height: 36px;
19
+ --#{$prefix}tab-padding-x: 16px;
20
+ --#{$prefix}tab-font-size: 14px;
21
+ }
22
+
23
+ &--lg {
24
+ --#{$prefix}tab-height: 40px;
25
+ --#{$prefix}tab-padding-x: 18px;
26
+ --#{$prefix}tab-font-size: 16px;
27
+ }
28
+
29
+ &--xl {
30
+ --#{$prefix}tab-height: 44px;
31
+ --#{$prefix}tab-padding-x: 22px;
32
+ --#{$prefix}tab-font-size: 18px;
33
+ }
34
+ }
35
+
4
36
  .#{$prefix}tabs--underlined {
5
37
  --#{$prefix}tab-indicator-color: var(--#{$prefix}primary-action-color);
6
38
  --#{$prefix}tab-indicator-height: 3px;
@@ -126,8 +158,6 @@
126
158
  .#{$prefix}tab {
127
159
  --#{$prefix}tab-color: var(--#{$prefix}secondary-action-color);
128
160
  --#{$prefix}tab-padding-y: 0px;
129
- --#{$prefix}tab-padding-x: 16px;
130
- --#{$prefix}tab-font-size: 0.8125rem;
131
161
  --#{$prefix}tab-font-weight: 500;
132
162
 
133
163
  --#{$prefix}tab-closable-color: var(--#{$prefix}secondary-action-color);