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

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 (9) hide show
  1. package/css/fci.css +71 -124
  2. package/css/fci.min.css +1 -1
  3. package/package.json +1 -1
  4. package/scss/themes/fci/components/_accordion.scss +27 -28
  5. package/scss/themes/fci/components/_button.scss +35 -39
  6. package/scss/themes/fci/components/_card.scss +24 -52
  7. package/scss/themes/fci/components/_input.scss +4 -10
  8. package/scss/themes/fci/components/_list.scss +8 -0
  9. package/scss/themes/fci/components/_tabs.scss +6 -6
package/scss/themes/fci/components/_card.scss CHANGED
@@ -15,7 +15,7 @@
15
15
  --#{$prefix}card-header-title-font-weight: 500;
16
16
  --#{$prefix}card-header-title-color: var(--#{$prefix}title-color);
17
17
 
18
- --#{$prefix}card-header-subtitle-font-weight: 500;
18
+ --#{$prefix}card-header-subtitle-font-weight: 400;
19
19
  --#{$prefix}card-header-subtitle-color: var(--#{$prefix}subtitle-color);
20
20
 
21
21
  --#{$prefix}card-body-color: var(--#{$prefix}body-color);
@@ -48,7 +48,7 @@
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
 
@@ -58,14 +58,14 @@
58
58
  --#{$prefix}card-header-subtitle-font-size: 10px;
59
59
  --#{$prefix}card-header-subtitle-line-height: 14px;
60
60
 
61
- --#{$prefix}card-body-padding-y: 0.375rem;
61
+ --#{$prefix}card-body-padding-y: 0.75rem;
62
62
  --#{$prefix}card-body-padding-x: 0.75rem;
63
63
  --#{$prefix}card-body-font-size: 0.75rem;
64
64
  --#{$prefix}card-body-line-height: 18px;
65
65
 
66
66
  --#{$prefix}card-footer-padding-y: 0.375rem;
67
67
  --#{$prefix}card-footer-padding-x: 0.75rem;
68
- --#{$prefix}card-footer-min-height: 2.5rem;
68
+ --#{$prefix}card-footer-min-height: 2.75rem;
69
69
  --#{$prefix}card-footer-gap: 0.5rem;
70
70
  }
71
71
 
@@ -77,9 +77,9 @@
77
77
  --#{$prefix}card-title-padding-y: 0.875rem 0.375rem;
78
78
  --#{$prefix}card-title-font-size: 1.25rem;
79
79
 
80
- --#{$prefix}card-header-padding-y: 0.375rem;
80
+ --#{$prefix}card-header-padding-y: 0.5rem;
81
81
  --#{$prefix}card-header-padding-x: 1rem;
82
- --#{$prefix}card-header-min-height: 2.75rem;
82
+ --#{$prefix}card-header-min-height: 3rem;
83
83
  --#{$prefix}card-header-gap: 0.75rem;
84
84
  --#{$prefix}card-header-content-gap: 0.5rem;
85
85
 
@@ -89,14 +89,14 @@
89
89
  --#{$prefix}card-header-subtitle-font-size: 11px;
90
90
  --#{$prefix}card-header-subtitle-line-height: 16px;
91
91
 
92
- --#{$prefix}card-body-padding-y: 0.375rem;
92
+ --#{$prefix}card-body-padding-y: 1rem;
93
93
  --#{$prefix}card-body-padding-x: 1rem;
94
94
  --#{$prefix}card-body-font-size: 0.875rem;
95
95
  --#{$prefix}card-body-line-height: 20px;
96
96
 
97
- --#{$prefix}card-footer-padding-y: 0.375rem;
97
+ --#{$prefix}card-footer-padding-y: 0.5rem;
98
98
  --#{$prefix}card-footer-padding-x: 1rem;
99
- --#{$prefix}card-footer-min-height: 2.75rem;
99
+ --#{$prefix}card-footer-min-height: 3rem;
100
100
  --#{$prefix}card-footer-gap: 0.75rem;
101
101
  }
102
102
 
@@ -108,26 +108,26 @@
108
108
  --#{$prefix}card-title-padding-y: 1rem 0.5rem;
109
109
  --#{$prefix}card-title-font-size: 1.25rem;
110
110
 
111
- --#{$prefix}card-header-min-height: 3rem;
112
- --#{$prefix}card-header-padding-y: 0.5rem;
111
+ --#{$prefix}card-header-padding-y: 0.625rem;
113
112
  --#{$prefix}card-header-padding-x: 1rem;
113
+ --#{$prefix}card-header-min-height: 3.5rem;
114
114
  --#{$prefix}card-header-gap: 0.75rem;
115
115
  --#{$prefix}card-header-content-gap: 0.5rem;
116
116
 
117
- --#{$prefix}card-header-title-font-size: 15px;
118
- --#{$prefix}card-header-title-line-height: 16px;
117
+ --#{$prefix}card-header-title-font-size: 14px;
118
+ --#{$prefix}card-header-title-line-height: 18px;
119
119
 
120
120
  --#{$prefix}card-header-subtitle-font-size: 12px;
121
121
  --#{$prefix}card-header-subtitle-line-height: 16px;
122
122
 
123
- --#{$prefix}card-body-padding-y: 0.5rem;
123
+ --#{$prefix}card-body-padding-y: 1rem;
124
124
  --#{$prefix}card-body-padding-x: 1rem;
125
125
  --#{$prefix}card-body-font-size: 0.875rem;
126
126
  --#{$prefix}card-body-line-height: 24px;
127
127
 
128
- --#{$prefix}card-footer-padding-y: 0.5rem;
128
+ --#{$prefix}card-footer-padding-y: 0.625rem;
129
129
  --#{$prefix}card-footer-padding-x: 1rem;
130
- --#{$prefix}card-footer-min-height: 3rem;
130
+ --#{$prefix}card-footer-min-height: 3.5rem;
131
131
  --#{$prefix}card-footer-gap: 1rem;
132
132
  }
133
133
 
@@ -139,9 +139,9 @@
139
139
  --#{$prefix}card-title-padding-y: 1.25rem 0.75rem;
140
140
  --#{$prefix}card-title-font-size: 1.5rem;
141
141
 
142
- --#{$prefix}card-header-padding-y: 0.625rem;
142
+ --#{$prefix}card-header-padding-y: 0.75rem;
143
143
  --#{$prefix}card-header-padding-x: 1.25rem;
144
- --#{$prefix}card-header-min-height: 3.5rem;
144
+ --#{$prefix}card-header-min-height: 4rem;
145
145
  --#{$prefix}card-header-gap: 1rem;
146
146
  --#{$prefix}card-header-content-gap: 0.75rem;
147
147
 
@@ -151,14 +151,14 @@
151
151
  --#{$prefix}card-header-subtitle-font-size: 13px;
152
152
  --#{$prefix}card-header-subtitle-line-height: 18px;
153
153
 
154
- --#{$prefix}card-body-padding-y: 0.875rem;
154
+ --#{$prefix}card-body-padding-y: 1.25rem;
155
155
  --#{$prefix}card-body-padding-x: 1.25rem;
156
156
  --#{$prefix}card-body-font-size: 1rem;
157
157
  --#{$prefix}card-body-line-height: 24px;
158
158
 
159
- --#{$prefix}card-footer-padding-y: 0.625rem;
159
+ --#{$prefix}card-footer-padding-y: 0.75rem;
160
160
  --#{$prefix}card-footer-padding-x: 1.25rem;
161
- --#{$prefix}card-footer-min-height: 3.5rem;
161
+ --#{$prefix}card-footer-min-height: 4rem;
162
162
  --#{$prefix}card-footer-gap: 1rem;
163
163
  }
164
164
 
@@ -169,7 +169,7 @@
169
169
  .#{$prefix}card--xl {
170
170
  --#{$prefix}card-header-padding-y: 0.75rem;
171
171
  --#{$prefix}card-header-padding-x: 1.5rem;
172
- --#{$prefix}card-header-min-height: 4rem;
172
+ --#{$prefix}card-header-min-height: 4.5rem;
173
173
  --#{$prefix}card-header-gap: 1rem;
174
174
  --#{$prefix}card-header-content-gap: 0.875rem;
175
175
 
@@ -179,46 +179,18 @@
179
179
  --#{$prefix}card-header-subtitle-font-size: 15px;
180
180
  --#{$prefix}card-header-subtitle-line-height: 20px;
181
181
 
182
- --#{$prefix}card-body-padding-y: 0.75rem;
182
+ --#{$prefix}card-body-padding-y: 1.5rem;
183
183
  --#{$prefix}card-body-padding-x: 1.5rem;
184
184
  --#{$prefix}card-body-font-size: 1.125rem;
185
185
  --#{$prefix}card-body-line-height: 28px;
186
186
 
187
187
  --#{$prefix}card-footer-padding-y: 0.75rem;
188
188
  --#{$prefix}card-footer-padding-x: 1.5rem;
189
- --#{$prefix}card-footer-min-height: 4rem;
189
+ --#{$prefix}card-footer-min-height: 4.5rem;
190
190
  --#{$prefix}card-footer-gap: 1rem;
191
191
  }
192
192
 
193
193
  .#{$prefix}card--xl .#{$prefix}card-header .#{$prefix}icon:not(.#{$prefix}button .#{$prefix}icon) {
194
194
  --#{$prefix}icon-font-size-default: 36px;
195
195
  }
196
-
197
- .#{$prefix}card--2xl {
198
- --#{$prefix}card-header-padding-y: 0.75rem;
199
- --#{$prefix}card-header-padding-x: 1.5rem;
200
- --#{$prefix}card-header-min-height: 4.5rem;
201
- --#{$prefix}card-header-gap: 1rem;
202
- --#{$prefix}card-header-content-gap: 1rem;
203
-
204
- --#{$prefix}card-header-title-font-size: 20px;
205
- --#{$prefix}card-header-title-line-height: 24px;
206
-
207
- --#{$prefix}card-header-subtitle-font-size: 16px;
208
- --#{$prefix}card-header-subtitle-line-height: 24px;
209
-
210
- --#{$prefix}card-body-padding-y: 0.75rem;
211
- --#{$prefix}card-body-padding-x: 1.5rem;
212
- --#{$prefix}card-body-font-size: 1.25rem;
213
- --#{$prefix}card-body-line-height: 36px;
214
-
215
- --#{$prefix}card-footer-padding-y: 0.75rem;
216
- --#{$prefix}card-footer-padding-x: 1.5rem;
217
- --#{$prefix}card-footer-min-height: 4.5rem;
218
- --#{$prefix}card-footer-gap: 1rem;
219
- }
220
-
221
- .#{$prefix}card--2xl .#{$prefix}card-header .#{$prefix}icon:not(.#{$prefix}button .#{$prefix}icon) {
222
- --#{$prefix}icon-font-size-default: 40px;
223
- }
224
196
  }
package/scss/themes/fci/components/_input.scss CHANGED
@@ -75,12 +75,11 @@ $colors-map: (primary, secondary, success, info, warning, danger);
75
75
  &--filled {
76
76
  & > .#{$prefix}outline {
77
77
  --#{$prefix}outline-border-width: 1px;
78
+ --#{$prefix}outline-focus-border-width: 2px;
78
79
  }
79
80
 
80
81
  & > .#{$prefix}glow {
81
82
  --#{$prefix}glow-opacity: 0;
82
- --#{$prefix}glow-focus-border-width: 4px;
83
- --#{$prefix}glow-focus-opacity: 0.2;
84
83
  }
85
84
  }
86
85
 
@@ -92,24 +91,22 @@ $colors-map: (primary, secondary, success, info, warning, danger);
92
91
 
93
92
  & > .#{$prefix}outline {
94
93
  --#{$prefix}outline-border-width: 1px;
94
+ --#{$prefix}outline-focus-border-width: 2px;
95
95
  }
96
96
 
97
97
  & > .#{$prefix}glow {
98
98
  --#{$prefix}glow-opacity: 0;
99
- --#{$prefix}glow-focus-border-width: 4px;
100
- --#{$prefix}glow-focus-opacity: 0.2;
101
99
  }
102
100
  }
103
101
 
104
102
  &--flat {
105
103
  & > .#{$prefix}outline {
106
104
  --#{$prefix}outline-border-width: 1px;
105
+ --#{$prefix}outline-focus-border-width: 2px;
107
106
  }
108
107
 
109
108
  & > .#{$prefix}glow {
110
109
  --#{$prefix}glow-opacity: 0;
111
- --#{$prefix}glow-focus-border-width: 4px;
112
- --#{$prefix}glow-focus-opacity: 0.2;
113
110
  }
114
111
  }
115
112
 
@@ -118,6 +115,7 @@ $colors-map: (primary, secondary, success, info, warning, danger);
118
115
 
119
116
  & > .#{$prefix}outline {
120
117
  --#{$prefix}outline-border-width: 1px;
118
+ --#{$prefix}outline-focus-border-width: 2px;
121
119
  }
122
120
 
123
121
  & > .#{$prefix}glow {
@@ -146,10 +144,6 @@ $colors-map: (primary, secondary, success, info, warning, danger);
146
144
  & > .#{$prefix}outline {
147
145
  --#{$prefix}outline-focus-border-color: var(--#{$prefix}#{$color}-color);
148
146
  }
149
-
150
- & > .#{$prefix}glow {
151
- --#{$prefix}glow-focus-border-color: var(--#{$prefix}#{$color}-color);
152
- }
153
147
  }
154
148
  }
155
149
 
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
 
package/scss/themes/fci/components/_tabs.scss CHANGED
@@ -3,31 +3,31 @@
3
3
  .#{$prefix}theme-fci {
4
4
  .#{$prefix}tabs {
5
5
  &--xs {
6
- --#{$prefix}tab-height: 28px;
6
+ --#{$prefix}tab-height: 32px;
7
7
  --#{$prefix}tab-padding-x: 12px;
8
8
  --#{$prefix}tab-font-size: 12px;
9
9
  }
10
10
 
11
11
  &--sm {
12
- --#{$prefix}tab-height: 32px;
13
- --#{$prefix}tab-font-size: 14px;
12
+ --#{$prefix}tab-height: 36px;
13
+ --#{$prefix}tab-font-size: 13px;
14
14
  --#{$prefix}tab-padding-x: 13px;
15
15
  }
16
16
 
17
17
  &--md {
18
- --#{$prefix}tab-height: 36px;
18
+ --#{$prefix}tab-height: 40px;
19
19
  --#{$prefix}tab-padding-x: 16px;
20
20
  --#{$prefix}tab-font-size: 14px;
21
21
  }
22
22
 
23
23
  &--lg {
24
- --#{$prefix}tab-height: 40px;
24
+ --#{$prefix}tab-height: 44px;
25
25
  --#{$prefix}tab-padding-x: 18px;
26
26
  --#{$prefix}tab-font-size: 16px;
27
27
  }
28
28
 
29
29
  &--xl {
30
- --#{$prefix}tab-height: 44px;
30
+ --#{$prefix}tab-height: 48px;
31
31
  --#{$prefix}tab-padding-x: 22px;
32
32
  --#{$prefix}tab-font-size: 18px;
33
33
  }