@unifiedsoftware/styles 2.0.0-beta.9 → 2.0.1-beta.2

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 (24) hide show
  1. package/css/fci.css +273 -116
  2. package/css/fci.min.css +1 -1
  3. package/css/styles.css +1429 -1095
  4. package/css/styles.min.css +1 -1
  5. package/package.json +1 -1
  6. package/scss/_utilities.scss +340 -1
  7. package/scss/components/_accordion.scss +5 -0
  8. package/scss/components/_button.scss +3 -3
  9. package/scss/components/_descriptions.scss +1 -0
  10. package/scss/components/_icon.scss +28 -0
  11. package/scss/components/_index.scss +5 -5
  12. package/scss/components/_input.scss +19 -7
  13. package/scss/components/_list.scss +1 -1
  14. package/scss/components/_swipe.scss +2 -2
  15. package/scss/components/_tabs.scss +1 -1
  16. package/scss/themes/fci/_tokens.scss +9 -2
  17. package/scss/themes/fci/components/_accordion.scss +46 -34
  18. package/scss/themes/fci/components/_button.scss +65 -5
  19. package/scss/themes/fci/components/_card.scss +27 -59
  20. package/scss/themes/fci/components/_checkbox.scss +1 -1
  21. package/scss/themes/fci/components/_icon.scss +2 -1
  22. package/scss/themes/fci/components/_input.scss +69 -16
  23. package/scss/themes/fci/components/_list.scss +22 -10
  24. package/scss/themes/fci/components/_tabs.scss +32 -2
package/scss/themes/fci/components/_input.scss CHANGED
@@ -5,52 +5,81 @@ $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
+ --#{$prefix}outline-focus-border-width: 2px;
79
+ }
80
+
81
+ & > .#{$prefix}glow {
82
+ --#{$prefix}glow-opacity: 0;
54
83
  }
55
84
  }
56
85
 
@@ -62,14 +91,22 @@ $colors-map: (primary, secondary, success, info, warning, danger);
62
91
 
63
92
  & > .#{$prefix}outline {
64
93
  --#{$prefix}outline-border-width: 1px;
65
- --#{$prefix}outline-focus-border-width: 1px;
94
+ --#{$prefix}outline-focus-border-width: 2px;
95
+ }
96
+
97
+ & > .#{$prefix}glow {
98
+ --#{$prefix}glow-opacity: 0;
66
99
  }
67
100
  }
68
101
 
69
102
  &--flat {
70
103
  & > .#{$prefix}outline {
71
104
  --#{$prefix}outline-border-width: 1px;
72
- --#{$prefix}outline-focus-border-width: 1px;
105
+ --#{$prefix}outline-focus-border-width: 2px;
106
+ }
107
+
108
+ & > .#{$prefix}glow {
109
+ --#{$prefix}glow-opacity: 0;
73
110
  }
74
111
  }
75
112
 
@@ -78,11 +115,17 @@ $colors-map: (primary, secondary, success, info, warning, danger);
78
115
 
79
116
  & > .#{$prefix}outline {
80
117
  --#{$prefix}outline-border-width: 1px;
118
+ --#{$prefix}outline-focus-border-width: 2px;
119
+ }
120
+
121
+ & > .#{$prefix}glow {
122
+ --#{$prefix}glow-opacity: 0;
81
123
  }
82
124
  }
83
125
  }
84
126
 
85
127
  .#{$prefix}input--filled {
128
+ --#{$prefix}input-color: rgba(0, 0, 0, 0.87);
86
129
  --#{$prefix}input-placeholder-color: rgba(0, 0, 0, 0.6);
87
130
 
88
131
  & > .#{$prefix}overlay {
@@ -120,6 +163,7 @@ $colors-map: (primary, secondary, success, info, warning, danger);
120
163
  }
121
164
 
122
165
  .#{$prefix}input--outlined {
166
+ --#{$prefix}input-color: rgba(0, 0, 0, 0.87);
123
167
  --#{$prefix}input-placeholder-color: rgba(0, 0, 0, 0.6);
124
168
 
125
169
  & > .#{$prefix}overlay {
@@ -129,8 +173,8 @@ $colors-map: (primary, secondary, success, info, warning, danger);
129
173
 
130
174
  & > .#{$prefix}outline {
131
175
  --#{$prefix}outline-border-color: currentColor;
132
- --#{$prefix}outline-opacity: 0.12;
133
- --#{$prefix}outline-hover-opacity: 0.24;
176
+ --#{$prefix}outline-opacity: 0.4;
177
+ --#{$prefix}outline-hover-opacity: 0.6;
134
178
  --#{$prefix}outline-focus-opacity: 1;
135
179
  }
136
180
  }
@@ -140,6 +184,10 @@ $colors-map: (primary, secondary, success, info, warning, danger);
140
184
  & > .#{$prefix}outline {
141
185
  --#{$prefix}outline-focus-border-color: var(--#{$prefix}#{$color}-color);
142
186
  }
187
+
188
+ & > .#{$prefix}glow {
189
+ --#{$prefix}glow-focus-border-color: var(--#{$prefix}#{$color}-color);
190
+ }
143
191
  }
144
192
  }
145
193
 
@@ -162,6 +210,7 @@ $colors-map: (primary, secondary, success, info, warning, danger);
162
210
  }
163
211
 
164
212
  .#{$prefix}input--flat {
213
+ --#{$prefix}input-color: rgba(0, 0, 0, 0.87);
165
214
  --#{$prefix}input-placeholder-color: rgba(0, 0, 0, 0.6);
166
215
 
167
216
  & > .#{$prefix}overlay {
@@ -181,6 +230,10 @@ $colors-map: (primary, secondary, success, info, warning, danger);
181
230
  & > .#{$prefix}outline {
182
231
  --#{$prefix}outline-focus-border-color: var(--#{$prefix}#{$color}-color);
183
232
  }
233
+
234
+ & > .#{$prefix}glow {
235
+ --#{$prefix}glow-focus-border-color: var(--#{$prefix}#{$color}-color);
236
+ }
184
237
  }
185
238
  }
186
239
 
package/scss/themes/fci/components/_list.scss CHANGED
@@ -8,6 +8,14 @@
8
8
  --#{$prefix}list-background: #fff;
9
9
  }
10
10
 
11
+ .#{$prefix}list--divider .#{$prefix}list-item {
12
+ border-bottom: 1px solid #e0e0e0;
13
+ }
14
+
15
+ .#{$prefix}list--divider .#{$prefix}list-item:last-child {
16
+ border-bottom: 0px;
17
+ }
18
+
11
19
  .#{$prefix}list-item {
12
20
  --#{$prefix}list-item-border-radius: 0px;
13
21
 
@@ -65,16 +73,16 @@
65
73
  --#{$prefix}list-item-title-line-height: 14px;
66
74
  }
67
75
 
68
- // .#{$prefix}list--sm .#{$prefix}list-item .#{$prefix}icon {
69
- // --#{$prefix}icon-font-size: 18px;
70
- // }
76
+ .#{$prefix}list--sm .#{$prefix}list-item .#{$prefix}icon {
77
+ --#{$prefix}icon-font-size: 18px;
78
+ }
71
79
 
72
80
  .#{$prefix}list--md .#{$prefix}list-item {
73
81
  --#{$prefix}list-item-min-height: 2.25rem;
74
82
  --#{$prefix}list-item-padding-y: 0.375rem;
75
83
  --#{$prefix}list-item-padding-x: 0.875rem;
76
84
  --#{$prefix}list-item-padding-level: 1.25rem;
77
- --#{$prefix}list-item-gap: 1rem;
85
+ --#{$prefix}list-item-gap: 0.5rem;
78
86
 
79
87
  --#{$prefix}list-item-title-font-size: 0.8125rem;
80
88
  --#{$prefix}list-item-title-line-height: 20px;
@@ -83,9 +91,13 @@
83
91
  --#{$prefix}list-item-subtitle-line-height: 16px;
84
92
  }
85
93
 
86
- // .#{$prefix}list--md .#{$prefix}list-item .#{$prefix}icon {
87
- // --#{$prefix}icon-font-size: 20px;
88
- // }
94
+ .#{$prefix}list--md .#{$prefix}list-item .#{$prefix}icon {
95
+ --#{$prefix}icon-font-size: 20px;
96
+ }
97
+
98
+ .#{$prefix}list--md .#{$prefix}list-item .#{$prefix}checkbox .#{$prefix}icon {
99
+ --#{$prefix}icon-font-size: 0.625rem;
100
+ }
89
101
 
90
102
  .#{$prefix}list--lg .#{$prefix}list-item {
91
103
  --#{$prefix}list-item-min-height: 2.75rem;
@@ -102,7 +114,7 @@
102
114
  --#{$prefix}list-item-subtitle-line-height: 18px;
103
115
  }
104
116
 
105
- // .#{$prefix}list--lg .#{$prefix}list-item .#{$prefix}icon {
106
- // --#{$prefix}icon-font-size: 22px;
107
- // }
117
+ .#{$prefix}list--lg .#{$prefix}list-item .#{$prefix}icon {
118
+ --#{$prefix}icon-font-size: 22px;
119
+ }
108
120
  }
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: 32px;
7
+ --#{$prefix}tab-padding-x: 12px;
8
+ --#{$prefix}tab-font-size: 12px;
9
+ }
10
+
11
+ &--sm {
12
+ --#{$prefix}tab-height: 36px;
13
+ --#{$prefix}tab-font-size: 13px;
14
+ --#{$prefix}tab-padding-x: 13px;
15
+ }
16
+
17
+ &--md {
18
+ --#{$prefix}tab-height: 40px;
19
+ --#{$prefix}tab-padding-x: 16px;
20
+ --#{$prefix}tab-font-size: 14px;
21
+ }
22
+
23
+ &--lg {
24
+ --#{$prefix}tab-height: 44px;
25
+ --#{$prefix}tab-padding-x: 18px;
26
+ --#{$prefix}tab-font-size: 16px;
27
+ }
28
+
29
+ &--xl {
30
+ --#{$prefix}tab-height: 48px;
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);