@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/_accordion.scss CHANGED
@@ -42,64 +42,70 @@ $colors-map: (primary, secondary, success, info, warning, danger);
42
42
  .#{$prefix}accordion--xs {
43
43
  --#{$prefix}accordion-splitted-gap: 0.25rem;
44
44
 
45
- --#{$prefix}accordion-header-min-height: 36px;
46
- --#{$prefix}accordion-header-padding-y: 0.685rem;
47
- --#{$prefix}accordion-header-padding-x: 1rem;
45
+ --#{$prefix}accordion-header-min-height: 2.75rem;
46
+ --#{$prefix}accordion-header-padding-y: 0.375rem;
47
+ --#{$prefix}accordion-header-padding-x: 0.75rem;
48
48
  --#{$prefix}accordion-header-padding-level: 1.25rem;
49
- --#{$prefix}accordion-header-font-size: 12px;
50
- --#{$prefix}accordion-header-gap: 1rem;
49
+ --#{$prefix}accordion-header-gap: 0.5rem;
51
50
 
52
51
  --#{$prefix}accordion-header-title-font-size: 12px;
53
- --#{$prefix}accordion-header-title-line-height: 18px;
52
+ --#{$prefix}accordion-header-title-line-height: 14px;
54
53
 
55
- --#{$prefix}accordion-header-subtitle-font-size: 11px;
54
+ --#{$prefix}accordion-header-subtitle-font-size: 10px;
56
55
  --#{$prefix}accordion-header-title-line-height: 14px;
57
56
 
58
- --#{$prefix}accordion-body-padding-y: 1rem;
59
- --#{$prefix}accordion-body-padding-x: 1rem;
57
+ --#{$prefix}accordion-body-padding-y: 0.75rem;
58
+ --#{$prefix}accordion-body-padding-x: 0.75rem;
60
59
  --#{$prefix}accordion-body-font-size: 0.75rem;
61
60
  --#{$prefix}accordion-body-line-height: 18px;
62
61
  }
63
62
 
63
+ .#{$prefix}accordion--xs .#{$prefix}accordion-header .#{$prefix}icon:not(.#{$prefix}button .#{$prefix}icon) {
64
+ --#{$prefix}icon-font-size-default: 16px;
65
+ }
66
+
64
67
  .#{$prefix}accordion--sm {
65
68
  --#{$prefix}accordion-splitted-gap: 0.5rem;
66
69
 
67
- --#{$prefix}accordion-header-min-height: 48px;
68
- --#{$prefix}accordion-header-padding-y: 0.625rem;
70
+ --#{$prefix}accordion-header-min-height: 3rem;
71
+ --#{$prefix}accordion-header-padding-y: 0.5rem;
69
72
  --#{$prefix}accordion-header-padding-x: 1rem;
70
73
  --#{$prefix}accordion-header-padding-level: 1.25rem;
71
- --#{$prefix}accordion-header-gap: 1rem;
74
+ --#{$prefix}accordion-header-gap: 0.75rem;
72
75
 
73
- --#{$prefix}accordion-header-title-font-size: 0.875rem;
74
- --#{$prefix}accordion-header-title-line-height: 20px;
76
+ --#{$prefix}accordion-header-title-font-size: 13px;
77
+ --#{$prefix}accordion-header-title-line-height: 16px;
75
78
 
76
- --#{$prefix}accordion-header-subtitle-font-size: 0.75rem;
79
+ --#{$prefix}accordion-header-subtitle-font-size: 11px;
77
80
  --#{$prefix}accordion-header-subtitle-line-height: 16px;
78
81
 
79
- --#{$prefix}accordion-body-padding-y: 1.25rem;
82
+ --#{$prefix}accordion-body-padding-y: 1rem;
80
83
  --#{$prefix}accordion-body-padding-x: 1rem;
81
84
  --#{$prefix}accordion-body-font-size: 0.875rem;
82
85
  --#{$prefix}accordion-body-line-height: 20px;
83
86
  }
84
87
 
88
+ .#{$prefix}accordion--sm .#{$prefix}accordion-header .#{$prefix}icon:not(.#{$prefix}button .#{$prefix}icon) {
89
+ --#{$prefix}icon-font-size-default: 20px;
90
+ }
91
+
85
92
  .#{$prefix}accordion--md {
86
93
  --#{$prefix}accordion-splitted-gap: 0.75rem;
87
94
 
88
- --#{$prefix}accordion-header-min-height: 56px;
95
+ --#{$prefix}accordion-header-min-height: 3.5rem;
89
96
  --#{$prefix}accordion-header-padding-y: 0.625rem;
90
97
  --#{$prefix}accordion-header-padding-x: 1rem;
91
98
  --#{$prefix}accordion-header-padding-level: 1.25rem;
92
- --#{$prefix}accordion-header-font-size: 0.75rem;
93
- --#{$prefix}accordion-header-gap: 1rem;
99
+ --#{$prefix}accordion-header-gap: 0.75rem;
94
100
  --#{$prefix}accordion-header-content-gap: 0.5rem;
95
101
 
96
- --#{$prefix}accordion-header-title-font-size: 0.875rem;
97
- --#{$prefix}accordion-header-title-line-height: 24px;
102
+ --#{$prefix}accordion-header-title-font-size: 14px;
103
+ --#{$prefix}accordion-header-title-line-height: 18px;
98
104
 
99
- --#{$prefix}accordion-header-subtitle-font-size: 0.8125rem;
100
- --#{$prefix}accordion-header-subtitle-line-height: 18px;
105
+ --#{$prefix}accordion-header-subtitle-font-size: 12px;
106
+ --#{$prefix}accordion-header-subtitle-line-height: 16px;
101
107
 
102
- --#{$prefix}accordion-body-padding-y: 1.5rem;
108
+ --#{$prefix}accordion-body-padding-y: 1rem;
103
109
  --#{$prefix}accordion-body-padding-x: 1rem;
104
110
  --#{$prefix}accordion-body-font-size: 1rem;
105
111
  --#{$prefix}accordion-body-line-height: 24px;
@@ -112,25 +118,28 @@ $colors-map: (primary, secondary, success, info, warning, danger);
112
118
  .#{$prefix}accordion--lg {
113
119
  --#{$prefix}accordion-splitted-gap: 1rem;
114
120
 
115
- --#{$prefix}accordion-header-min-height: 64px;
116
- --#{$prefix}accordion-header-padding-y: 0.625rem;
117
- --#{$prefix}accordion-header-padding-x: 1rem;
121
+ --#{$prefix}accordion-header-min-height: 4rem;
122
+ --#{$prefix}accordion-header-padding-y: 0.75rem;
123
+ --#{$prefix}accordion-header-padding-x: 1.25rem;
118
124
  --#{$prefix}accordion-header-padding-level: 1.25rem;
119
- --#{$prefix}accordion-header-font-size: 0.75rem;
120
125
  --#{$prefix}accordion-header-gap: 1rem;
121
126
 
122
- --#{$prefix}accordion-header-title-font-size: 1rem;
127
+ --#{$prefix}accordion-header-title-font-size: 16px;
123
128
  --#{$prefix}accordion-header-title-line-height: 24px;
124
129
 
125
130
  --#{$prefix}accordion-header-subtitle-font-size: 0.8125rem;
126
131
  --#{$prefix}accordion-header-subtitle-line-height: 18px;
127
132
 
128
- --#{$prefix}accordion-body-padding-y: 1.5rem;
129
- --#{$prefix}accordion-body-padding-x: 1rem;
133
+ --#{$prefix}accordion-body-padding-y: 1.25rem;
134
+ --#{$prefix}accordion-body-padding-x: 1.25rem;
130
135
  --#{$prefix}accordion-body-font-size: 1rem;
131
136
  --#{$prefix}accordion-body-line-height: 24px;
132
137
  }
133
138
 
139
+ .#{$prefix}accordion--lg .#{$prefix}accordion-header .#{$prefix}icon:not(.#{$prefix}button .#{$prefix}icon) {
140
+ --#{$prefix}icon-font-size-default: 28px;
141
+ }
142
+
134
143
  .#{$prefix}accordion--xl {
135
144
  --#{$prefix}accordion-splitted-gap: 1.25rem;
136
145
 
@@ -138,10 +147,9 @@ $colors-map: (primary, secondary, success, info, warning, danger);
138
147
  --#{$prefix}accordion-header-padding-y: 0.625rem;
139
148
  --#{$prefix}accordion-header-padding-x: 1rem;
140
149
  --#{$prefix}accordion-header-padding-level: 1.25rem;
141
- --#{$prefix}accordion-header-font-size: 0.75rem;
142
150
  --#{$prefix}accordion-header-gap: 1rem;
143
151
 
144
- --#{$prefix}accordion-header-title-font-size: 1rem;
152
+ --#{$prefix}accordion-header-title-font-size: 18px;
145
153
  --#{$prefix}accordion-header-title-line-height: 24px;
146
154
 
147
155
  --#{$prefix}accordion-header-subtitle-font-size: 0.8125rem;
@@ -153,6 +161,10 @@ $colors-map: (primary, secondary, success, info, warning, danger);
153
161
  --#{$prefix}accordion-body-line-height: 24px;
154
162
  }
155
163
 
164
+ .#{$prefix}accordion--xl .#{$prefix}accordion-header .#{$prefix}icon:not(.#{$prefix}button .#{$prefix}icon) {
165
+ --#{$prefix}icon-font-size-default: 36px;
166
+ }
167
+
156
168
  .#{$prefix}accordion-item {
157
169
  & > .#{$prefix}outline {
158
170
  --#{$prefix}outline-border-width: 0px;
@@ -162,7 +174,7 @@ $colors-map: (primary, secondary, success, info, warning, danger);
162
174
  }
163
175
 
164
176
  .#{$prefix}accordion-item--selected {
165
- --#{$prefix}accordion-header-title-font-weight: 700;
177
+ // --#{$prefix}accordion-header-title-font-weight: 600;
166
178
  }
167
179
 
168
180
  .#{$prefix}accordion-body {
package/scss/themes/fci/components/_button.scss CHANGED
@@ -17,7 +17,7 @@ html {
17
17
  --#{$prefix}button-divider-color: #fff;
18
18
 
19
19
  &--xs {
20
- --#{$prefix}button-height: 22px;
20
+ --#{$prefix}button-height: 24px;
21
21
  --#{$prefix}button-padding-y: 0;
22
22
  --#{$prefix}button-padding-x: 0.625rem;
23
23
  --#{$prefix}button-font-size: 0.75rem;
@@ -30,7 +30,7 @@ html {
30
30
  }
31
31
 
32
32
  &--sm {
33
- --#{$prefix}button-height: 26px;
33
+ --#{$prefix}button-height: 28px;
34
34
  --#{$prefix}button-padding-y: 0;
35
35
  --#{$prefix}button-padding-x: 0.75rem;
36
36
  --#{$prefix}button-font-size: 0.75rem;
@@ -43,7 +43,7 @@ html {
43
43
  }
44
44
 
45
45
  &--md {
46
- --#{$prefix}button-height: 30px;
46
+ --#{$prefix}button-height: 32px;
47
47
  --#{$prefix}button-padding-y: 0;
48
48
  --#{$prefix}button-padding-x: 0.875rem;
49
49
  --#{$prefix}button-font-size: 0.875rem;
@@ -56,7 +56,7 @@ html {
56
56
  }
57
57
 
58
58
  &--lg {
59
- --#{$prefix}button-height: 34px;
59
+ --#{$prefix}button-height: 36px;
60
60
  --#{$prefix}button-padding-y: 0;
61
61
  --#{$prefix}button-padding-x: 1rem;
62
62
  --#{$prefix}button-font-size: 0.875rem;
@@ -94,6 +94,13 @@ html {
94
94
  }
95
95
  }
96
96
 
97
+ & > .#{$prefix}glow {
98
+ --#{$prefix}_focus-glow-spread: 1px;
99
+ --#{$prefix}_focus-glow-blur: 6px;
100
+ --#{$prefix}_focus-hover-glow-blur: 8px;
101
+ --#{$prefix}_focus-active-glow-blur: 10px;
102
+ }
103
+
97
104
  &--filled {
98
105
  --#{$prefix}button-border-width: 1px;
99
106
  --#{$prefix}button-border-color: transparent;
@@ -104,6 +111,7 @@ html {
104
111
  --#{$prefix}overlay-opacity: 0;
105
112
  --#{$prefix}_hover-overlay-opacity: 0.24;
106
113
  --#{$prefix}_active-overlay-opacity: 0.32;
114
+ --#{$prefix}_focus-overlay-opacity: 0.24;
107
115
  --#{$prefix}_focus-hover-overlay-opacity: 0.24;
108
116
  --#{$prefix}_focus-active-overlay-opacity: 0.32;
109
117
  }
@@ -124,6 +132,7 @@ html {
124
132
  --#{$prefix}overlay-opacity: 0;
125
133
  --#{$prefix}_hover-overlay-opacity: 0.08;
126
134
  --#{$prefix}_active-overlay-opacity: 0.1;
135
+ --#{$prefix}_focus-overlay-opacity: 0.08;
127
136
  --#{$prefix}_focus-hover-overlay-opacity: 0.08;
128
137
  --#{$prefix}_focus-active-overlay-opacity: 0.1;
129
138
  }
@@ -141,13 +150,15 @@ html {
141
150
  --#{$prefix}overlay-opacity: 0.16;
142
151
  --#{$prefix}_hover-overlay-opacity: 0.24;
143
152
  --#{$prefix}_active-overlay-opacity: 0.32;
153
+ --#{$prefix}_focus-overlay-opacity: 0.24;
144
154
  --#{$prefix}_focus-hover-overlay-opacity: 0.24;
145
155
  --#{$prefix}_focus-active-overlay-opacity: 0.32;
146
156
  }
147
157
 
148
158
  & > .#{$prefix}outline {
149
159
  --#{$prefix}outline-border-width: 1px;
150
- --#{$prefix}outline-border-color: transparent;
160
+ --#{$prefix}outline-border-color: currentColor;
161
+ --#{$prefix}outline-opacity: 0;
151
162
  }
152
163
  }
153
164
 
@@ -157,6 +168,7 @@ html {
157
168
  --#{$prefix}overlay-opacity: 0;
158
169
  --#{$prefix}_hover-overlay-opacity: 0.16;
159
170
  --#{$prefix}_active-overlay-opacity: 0.24;
171
+ --#{$prefix}_focus-overlay-opacity: 0.12;
160
172
  --#{$prefix}_focus-hover-overlay-opacity: 0.12;
161
173
  --#{$prefix}_focus-active-overlay-opacity: 0.24;
162
174
  }
@@ -173,6 +185,7 @@ html {
173
185
  --#{$prefix}overlay-opacity: 0;
174
186
  --#{$prefix}_hover-overlay-opacity: 0.16;
175
187
  --#{$prefix}_active-overlay-opacity: 0.24;
188
+ --#{$prefix}_focus-overlay-opacity: 0.12;
176
189
  --#{$prefix}_focus-hover-overlay-opacity: 0.12;
177
190
  --#{$prefix}_focus-active-overlay-opacity: 0.24;
178
191
  }
@@ -221,6 +234,12 @@ html {
221
234
  }
222
235
 
223
236
  @each $color in $colors-map {
237
+ .#{$prefix}button--#{$color} > .#{$prefix}glow {
238
+ --#{$prefix}_focus-glow-color: var(--#{$prefix}#{$color}-rgb);
239
+ --#{$prefix}_focus-glow-alpha: 1;
240
+ --#{$prefix}_focus-glow-shadow-alpha: 0.75;
241
+ }
242
+
224
243
  .#{$prefix}button--filled.#{$prefix}button--#{$color} {
225
244
  --#{$prefix}button-background: var(--#{$prefix}#{$color}-color);
226
245
  }
@@ -304,4 +323,45 @@ html {
304
323
  }
305
324
  }
306
325
  }
326
+
327
+ .#{$prefix}button--secondary > .#{$prefix}glow {
328
+ --#{$prefix}_focus-glow-color: var(--#{$prefix}secondary-rgb);
329
+ --#{$prefix}_focus-glow-alpha: 0.5;
330
+ --#{$prefix}_focus-glow-shadow-alpha: 0.25;
331
+ }
332
+
333
+ .#{$prefix}button--filled.#{$prefix}button--secondary > .#{$prefix}glow {
334
+ --#{$prefix}_focus-glow-color: var(--#{$prefix}secondary-rgb);
335
+ --#{$prefix}_focus-glow-alpha: 0.5;
336
+ --#{$prefix}_focus-glow-shadow-alpha: 0.25;
337
+ }
338
+
339
+ .#{$prefix}button--outlined > .#{$prefix}glow {
340
+ --#{$prefix}_focus-glow-color: var(--#{$prefix}secondary-rgb);
341
+ --#{$prefix}_focus-glow-alpha: 0.5;
342
+ --#{$prefix}_focus-glow-shadow-alpha: 0.25;
343
+ }
344
+
345
+ // .#{$prefix}button--filled > .#{$prefix}outline {
346
+ // box-shadow:
347
+ // rgba(0, 0, 0, 0) 0px 0px 0px 0px,
348
+ // rgba(0, 0, 0, 0) 0px 0px 0px 0px,
349
+ // rgba(255, 255, 255, 0.2) 0px 0.75px 0px 0px inset,
350
+ // var(--#{$prefix}button-background) 0px 0px 0px 1px;
351
+ // }
352
+
353
+ // .#{$prefix}button--flat > .#{$prefix}outline {
354
+ // box-shadow:
355
+ // rgba(0, 0, 0, 0) 0px 0px 0px 0px,
356
+ // rgba(0, 0, 0, 0) 0px 0px 0px 0px,
357
+ // rgba(255, 255, 255, 0.2) 0px 0.75px 0px 0px inset,
358
+ // var(--#{$prefix}outline-border-color) 0px 0px 0px 1px;
359
+ // }
360
+
361
+ // .#{$prefix}button--outlined > .#{$prefix}outline {
362
+ // box-shadow:
363
+ // rgba(0, 0, 0, 0) 0px 0px 0px 0px,
364
+ // rgba(0, 0, 0, 0) 0px 0px 0px 0px,
365
+ // rgba(0, 0, 0, 0.2) 0px 0px 0px 1px;
366
+ // }
307
367
  }
package/scss/themes/fci/components/_card.scss CHANGED
@@ -48,26 +48,24 @@
48
48
  .#{$prefix}card--xs {
49
49
  --#{$prefix}card-header-padding-y: 0.375rem;
50
50
  --#{$prefix}card-header-padding-x: 0.75rem;
51
- --#{$prefix}card-header-min-height: 2.5rem;
51
+ --#{$prefix}card-header-min-height: 2.75rem;
52
52
  --#{$prefix}card-header-gap: 0.5rem;
53
53
  --#{$prefix}card-header-content-gap: 0.25rem;
54
54
 
55
- --#{$prefix}card-header-title-font-size: 11px;
56
- --#{$prefix}card-header-title-font-weight: 500;
55
+ --#{$prefix}card-header-title-font-size: 12px;
57
56
  --#{$prefix}card-header-title-line-height: 14px;
58
57
 
59
58
  --#{$prefix}card-header-subtitle-font-size: 10px;
60
- --#{$prefix}card-header-subtitle-font-weight: 500;
61
59
  --#{$prefix}card-header-subtitle-line-height: 14px;
62
60
 
63
- --#{$prefix}card-body-padding-y: 0.375rem;
61
+ --#{$prefix}card-body-padding-y: 0.75rem;
64
62
  --#{$prefix}card-body-padding-x: 0.75rem;
65
63
  --#{$prefix}card-body-font-size: 0.75rem;
66
64
  --#{$prefix}card-body-line-height: 18px;
67
65
 
68
66
  --#{$prefix}card-footer-padding-y: 0.375rem;
69
67
  --#{$prefix}card-footer-padding-x: 0.75rem;
70
- --#{$prefix}card-footer-min-height: 2.5rem;
68
+ --#{$prefix}card-footer-min-height: 2.75rem;
71
69
  --#{$prefix}card-footer-gap: 0.5rem;
72
70
  }
73
71
 
@@ -79,28 +77,26 @@
79
77
  --#{$prefix}card-title-padding-y: 0.875rem 0.375rem;
80
78
  --#{$prefix}card-title-font-size: 1.25rem;
81
79
 
82
- --#{$prefix}card-header-padding-y: 0.375rem;
80
+ --#{$prefix}card-header-padding-y: 0.5rem;
83
81
  --#{$prefix}card-header-padding-x: 1rem;
84
- --#{$prefix}card-header-min-height: 2.75rem;
82
+ --#{$prefix}card-header-min-height: 3rem;
85
83
  --#{$prefix}card-header-gap: 0.75rem;
86
84
  --#{$prefix}card-header-content-gap: 0.5rem;
87
85
 
88
- --#{$prefix}card-header-title-font-size: 12px;
89
- --#{$prefix}card-header-title-font-weight: 500;
86
+ --#{$prefix}card-header-title-font-size: 13px;
90
87
  --#{$prefix}card-header-title-line-height: 16px;
91
88
 
92
89
  --#{$prefix}card-header-subtitle-font-size: 11px;
93
- --#{$prefix}card-header-subtitle-font-weight: 500;
94
90
  --#{$prefix}card-header-subtitle-line-height: 16px;
95
91
 
96
- --#{$prefix}card-body-padding-y: 0.375rem;
92
+ --#{$prefix}card-body-padding-y: 1rem;
97
93
  --#{$prefix}card-body-padding-x: 1rem;
98
94
  --#{$prefix}card-body-font-size: 0.875rem;
99
95
  --#{$prefix}card-body-line-height: 20px;
100
96
 
101
- --#{$prefix}card-footer-padding-y: 0.375rem;
97
+ --#{$prefix}card-footer-padding-y: 0.5rem;
102
98
  --#{$prefix}card-footer-padding-x: 1rem;
103
- --#{$prefix}card-footer-min-height: 2.75rem;
99
+ --#{$prefix}card-footer-min-height: 3rem;
104
100
  --#{$prefix}card-footer-gap: 0.75rem;
105
101
  }
106
102
 
@@ -112,26 +108,26 @@
112
108
  --#{$prefix}card-title-padding-y: 1rem 0.5rem;
113
109
  --#{$prefix}card-title-font-size: 1.25rem;
114
110
 
115
- --#{$prefix}card-header-min-height: 3rem;
116
- --#{$prefix}card-header-padding-y: 0.5rem;
111
+ --#{$prefix}card-header-padding-y: 0.625rem;
117
112
  --#{$prefix}card-header-padding-x: 1rem;
113
+ --#{$prefix}card-header-min-height: 3.5rem;
118
114
  --#{$prefix}card-header-gap: 0.75rem;
119
115
  --#{$prefix}card-header-content-gap: 0.5rem;
120
116
 
121
- --#{$prefix}card-header-title-font-size: 13px;
122
- --#{$prefix}card-header-title-line-height: 16px;
117
+ --#{$prefix}card-header-title-font-size: 14px;
118
+ --#{$prefix}card-header-title-line-height: 18px;
123
119
 
124
120
  --#{$prefix}card-header-subtitle-font-size: 12px;
125
121
  --#{$prefix}card-header-subtitle-line-height: 16px;
126
122
 
127
- --#{$prefix}card-body-padding-y: 0.5rem;
123
+ --#{$prefix}card-body-padding-y: 1rem;
128
124
  --#{$prefix}card-body-padding-x: 1rem;
129
125
  --#{$prefix}card-body-font-size: 0.875rem;
130
126
  --#{$prefix}card-body-line-height: 24px;
131
127
 
132
- --#{$prefix}card-footer-padding-y: 0.5rem;
128
+ --#{$prefix}card-footer-padding-y: 0.625rem;
133
129
  --#{$prefix}card-footer-padding-x: 1rem;
134
- --#{$prefix}card-footer-min-height: 3rem;
130
+ --#{$prefix}card-footer-min-height: 3.5rem;
135
131
  --#{$prefix}card-footer-gap: 1rem;
136
132
  }
137
133
 
@@ -143,26 +139,26 @@
143
139
  --#{$prefix}card-title-padding-y: 1.25rem 0.75rem;
144
140
  --#{$prefix}card-title-font-size: 1.5rem;
145
141
 
146
- --#{$prefix}card-header-padding-y: 0.625rem;
142
+ --#{$prefix}card-header-padding-y: 0.75rem;
147
143
  --#{$prefix}card-header-padding-x: 1.25rem;
148
- --#{$prefix}card-header-min-height: 3.5rem;
144
+ --#{$prefix}card-header-min-height: 4rem;
149
145
  --#{$prefix}card-header-gap: 1rem;
150
146
  --#{$prefix}card-header-content-gap: 0.75rem;
151
147
 
152
- --#{$prefix}card-header-title-font-size: 14px;
148
+ --#{$prefix}card-header-title-font-size: 16px;
153
149
  --#{$prefix}card-header-title-line-height: 18px;
154
150
 
155
151
  --#{$prefix}card-header-subtitle-font-size: 13px;
156
152
  --#{$prefix}card-header-subtitle-line-height: 18px;
157
153
 
158
- --#{$prefix}card-body-padding-y: 0.875rem;
154
+ --#{$prefix}card-body-padding-y: 1.25rem;
159
155
  --#{$prefix}card-body-padding-x: 1.25rem;
160
156
  --#{$prefix}card-body-font-size: 1rem;
161
157
  --#{$prefix}card-body-line-height: 24px;
162
158
 
163
- --#{$prefix}card-footer-padding-y: 0.625rem;
159
+ --#{$prefix}card-footer-padding-y: 0.75rem;
164
160
  --#{$prefix}card-footer-padding-x: 1.25rem;
165
- --#{$prefix}card-footer-min-height: 3.5rem;
161
+ --#{$prefix}card-footer-min-height: 4rem;
166
162
  --#{$prefix}card-footer-gap: 1rem;
167
163
  }
168
164
 
@@ -173,56 +169,28 @@
173
169
  .#{$prefix}card--xl {
174
170
  --#{$prefix}card-header-padding-y: 0.75rem;
175
171
  --#{$prefix}card-header-padding-x: 1.5rem;
176
- --#{$prefix}card-header-min-height: 4rem;
172
+ --#{$prefix}card-header-min-height: 4.5rem;
177
173
  --#{$prefix}card-header-gap: 1rem;
178
174
  --#{$prefix}card-header-content-gap: 0.875rem;
179
175
 
180
- --#{$prefix}card-header-title-font-size: 16px;
176
+ --#{$prefix}card-header-title-font-size: 18px;
181
177
  --#{$prefix}card-header-title-line-height: 20px;
182
178
 
183
179
  --#{$prefix}card-header-subtitle-font-size: 15px;
184
180
  --#{$prefix}card-header-subtitle-line-height: 20px;
185
181
 
186
- --#{$prefix}card-body-padding-y: 0.75rem;
182
+ --#{$prefix}card-body-padding-y: 1.5rem;
187
183
  --#{$prefix}card-body-padding-x: 1.5rem;
188
184
  --#{$prefix}card-body-font-size: 1.125rem;
189
185
  --#{$prefix}card-body-line-height: 28px;
190
186
 
191
187
  --#{$prefix}card-footer-padding-y: 0.75rem;
192
188
  --#{$prefix}card-footer-padding-x: 1.5rem;
193
- --#{$prefix}card-footer-min-height: 4rem;
189
+ --#{$prefix}card-footer-min-height: 4.5rem;
194
190
  --#{$prefix}card-footer-gap: 1rem;
195
191
  }
196
192
 
197
193
  .#{$prefix}card--xl .#{$prefix}card-header .#{$prefix}icon:not(.#{$prefix}button .#{$prefix}icon) {
198
194
  --#{$prefix}icon-font-size-default: 36px;
199
195
  }
200
-
201
- .#{$prefix}card--2xl {
202
- --#{$prefix}card-header-padding-y: 0.75rem;
203
- --#{$prefix}card-header-padding-x: 1.5rem;
204
- --#{$prefix}card-header-min-height: 4.5rem;
205
- --#{$prefix}card-header-gap: 1rem;
206
- --#{$prefix}card-header-content-gap: 1rem;
207
-
208
- --#{$prefix}card-header-title-font-size: 18px;
209
- --#{$prefix}card-header-title-line-height: 24px;
210
-
211
- --#{$prefix}card-header-subtitle-font-size: 16px;
212
- --#{$prefix}card-header-subtitle-line-height: 24px;
213
-
214
- --#{$prefix}card-body-padding-y: 0.75rem;
215
- --#{$prefix}card-body-padding-x: 1.5rem;
216
- --#{$prefix}card-body-font-size: 1.25rem;
217
- --#{$prefix}card-body-line-height: 36px;
218
-
219
- --#{$prefix}card-footer-padding-y: 0.75rem;
220
- --#{$prefix}card-footer-padding-x: 1.5rem;
221
- --#{$prefix}card-footer-min-height: 4.5rem;
222
- --#{$prefix}card-footer-gap: 1rem;
223
- }
224
-
225
- .#{$prefix}card--2xl .#{$prefix}card-header .#{$prefix}icon:not(.#{$prefix}button .#{$prefix}icon) {
226
- --#{$prefix}icon-font-size-default: 40px;
227
- }
228
196
  }
package/scss/themes/fci/components/_checkbox.scss CHANGED
@@ -26,7 +26,7 @@
26
26
  .#{$prefix}checkbox {
27
27
  --#{$prefix}checkbox-control-border-width: 1px;
28
28
  --#{$prefix}checkbox-control-border-style: solid;
29
- --#{$prefix}checkbox-control-border-color: rgba(0, 0, 0, 0.2);
29
+ --#{$prefix}checkbox-control-border-color: rgba(0, 0, 0, 0.4);
30
30
  --#{$prefix}checkbox-control-color: var(--#{$prefix}white-color);
31
31
 
32
32
  --#{$prefix}_checked-checkbox-control-border-color: var(--#{$prefix}primary-color);
package/scss/themes/fci/components/_icon.scss CHANGED
@@ -2,7 +2,8 @@
2
2
 
3
3
  $colors-map: (
4
4
  primary: var(--#{$prefix}primary-color),
5
- secondary: var(--#{$prefix}secondary-color),
5
+ //secondary: var(--#{$prefix}secondary-color),
6
+ secondary: rgba(0, 0, 0, 0.54),
6
7
  success: var(--#{$prefix}success-color),
7
8
  info: var(--#{$prefix}info-color),
8
9
  warning: var(--#{$prefix}warning-color),