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

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 (18) hide show
  1. package/css/fci.css +104 -92
  2. package/css/fci.min.css +1 -1
  3. package/css/styles.css +75 -12
  4. package/css/styles.min.css +1 -1
  5. package/package.json +1 -1
  6. package/scss/components/_accordion.scss +5 -0
  7. package/scss/components/_checkbox.scss +6 -6
  8. package/scss/components/_descriptions.scss +1 -0
  9. package/scss/components/_icon.scss +28 -0
  10. package/scss/components/_input.scss +1 -0
  11. package/scss/components/_list.scss +1 -1
  12. package/scss/components/_nav-rail.scss +2 -1
  13. package/scss/components/_radio.scss +6 -6
  14. package/scss/components/_steps.scss +41 -2
  15. package/scss/components/_switch.scss +2 -2
  16. package/scss/themes/fci/components/_checkbox.scss +4 -0
  17. package/scss/themes/fci/components/_index.scss +2 -1
  18. package/scss/themes/fci/components/_list.scss +10 -10
package/scss/components/_icon.scss CHANGED
@@ -9,3 +9,31 @@
9
9
  justify-content: center;
10
10
  align-items: center;
11
11
  }
12
+
13
+ .#{$prefix}opacity-0 {
14
+ opacity: 0;
15
+ }
16
+
17
+ .#{$prefix}opacity-60 {
18
+ opacity: 0.6;
19
+ }
20
+
21
+ .#{$prefix}opacity-100 {
22
+ opacity: 1;
23
+ }
24
+
25
+ .#{$prefix}pointer {
26
+ cursor: pointer;
27
+ }
28
+
29
+ .#{$prefix}hover-opacity-60 {
30
+ &:hover {
31
+ opacity: 0.6;
32
+ }
33
+ }
34
+
35
+ .#{$prefix}hover-opacity-100 {
36
+ &:hover {
37
+ opacity: 1;
38
+ }
39
+ }
package/scss/components/_input.scss CHANGED
@@ -91,6 +91,7 @@
91
91
  display: flex;
92
92
  align-items: center;
93
93
  z-index: 1;
94
+ overflow: hidden;
94
95
 
95
96
  &--chips {
96
97
  padding-block: var(--#{$prefix}input-padding-y);
package/scss/components/_list.scss CHANGED
@@ -46,7 +46,7 @@
46
46
  display: flex;
47
47
  justify-content: center;
48
48
  align-items: center;
49
- gap: calc(var(--#{$prefix}list-item-gap) * 0.5);
49
+ gap: var(--#{$prefix}list-item-gap);
50
50
  }
51
51
 
52
52
  &__content {
package/scss/components/_nav-rail.scss CHANGED
@@ -127,7 +127,8 @@
127
127
  font-size: var(--#{$prefix}nav-rail-item-label-font-size);
128
128
  font-weight: var(--#{$prefix}nav-rail-item-label-font-weight);
129
129
  line-height: var(--#{$prefix}nav-rail-item-label-line-height);
130
- text-wrap: nowrap;
130
+ width: 100%;
131
+ text-align: center;
131
132
  overflow: hidden;
132
133
  display: -webkit-box;
133
134
  -webkit-box-orient: vertical;
package/scss/components/_radio.scss CHANGED
@@ -29,8 +29,8 @@
29
29
  justify-content: center;
30
30
  align-items: center;
31
31
  transition:
32
- color 0.1s ease-in-out 0.05s,
33
- border-color 0.1s ease-in-out 0.05s;
32
+ color 0.05s ease-in-out 0.025s,
33
+ border-color 0.05s ease-in-out 0.025s;
34
34
  overflow: hidden;
35
35
  }
36
36
 
@@ -59,8 +59,8 @@
59
59
  background-color: var(--#{$prefix}radio-tap-background);
60
60
  transform: scale(0);
61
61
  transition:
62
- opacity 0.1s ease-in-out 0.05s,
63
- transform 0.1s ease-in-out 0.05s;
62
+ opacity 0.05s ease-in-out 0.025s,
63
+ transform 0.05s ease-in-out 0.025s;
64
64
  }
65
65
 
66
66
  &--checked &__tap {
@@ -72,8 +72,8 @@
72
72
  opacity: 1;
73
73
  transform: scale(0);
74
74
  transition:
75
- opacity 0.1s ease-in-out 0.05s,
76
- transform 0.1s ease-in-out 0.05s;
75
+ opacity 0.05s ease-in-out 0.025s,
76
+ transform 0.05s ease-in-out 0.025s;
77
77
  }
78
78
 
79
79
  &--checked .#{$prefix}icon {
package/scss/components/_steps.scss CHANGED
@@ -3,8 +3,40 @@
3
3
  .#{$prefix}steps {
4
4
  flex-shrink: 0;
5
5
  display: grid;
6
- grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
7
6
  overflow: hidden;
7
+
8
+ &--horizontal {
9
+ grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
10
+ }
11
+
12
+ &--vertical {
13
+ grid-template-columns: 1;
14
+ gap: 2rem;
15
+ }
16
+
17
+ &--vertical .#{$prefix}step {
18
+ flex-direction: row;
19
+ gap: 1.5rem;
20
+ }
21
+
22
+ &--vertical .#{$prefix}step__content {
23
+ padding: 4px 0px;
24
+ }
25
+
26
+ &--vertical .#{$prefix}step__title,
27
+ &--vertical .#{$prefix}step__subtitle {
28
+ margin: 0;
29
+ text-align: start;
30
+ }
31
+
32
+ &--vertical &__indicator {
33
+ width: 1px;
34
+ height: 100%;
35
+ top: -50%;
36
+ bottom: 50%;
37
+ left: auto;
38
+ right: auto;
39
+ }
8
40
  }
9
41
 
10
42
  .#{$prefix}step {
@@ -60,6 +92,12 @@
60
92
  border-color: var(--#{$prefix}_current-step-border-color);
61
93
  }
62
94
 
95
+ &__content {
96
+ display: flex;
97
+ flex-direction: column;
98
+ gap: 0.5rem;
99
+ }
100
+
63
101
  &__title {
64
102
  flex-shrink: 0;
65
103
  max-width: 150px;
@@ -97,7 +135,8 @@
97
135
  right: 50%;
98
136
  top: 50%;
99
137
  left: -50%;
100
- border-bottom: 1px solid var(--#{$prefix}step-divider-color);
138
+ width: 100%;
139
+ height: 1px;
101
140
  background-color: var(--#{$prefix}step-divider-color);
102
141
  z-index: -1;
103
142
 
package/scss/components/_switch.scss CHANGED
@@ -35,7 +35,7 @@
35
35
  background-color: var(--#{$prefix}switch-control-color);
36
36
  display: inline-flex;
37
37
  align-items: center;
38
- transition: all 0.15s ease-in-out;
38
+ transition: all 0.05s ease-in-out;
39
39
  user-select: none;
40
40
  -webkit-tap-highlight-color: transparent;
41
41
  }
@@ -62,7 +62,7 @@
62
62
  transform: translateX(var(--#{$prefix}switch-control-padding));
63
63
  border-radius: var(--#{$prefix}switch-thumb-border-radius);
64
64
  background-color: var(--#{$prefix}switch-thumb-color);
65
- transition: all 0.15s ease-in-out;
65
+ transition: all 0.05s ease-in-out;
66
66
  }
67
67
 
68
68
  &--checked &__thumb {
package/scss/themes/fci/components/_checkbox.scss CHANGED
@@ -34,6 +34,10 @@
34
34
 
35
35
  --#{$prefix}checkbox-tap-background: var(--#{$prefix}primary-color);
36
36
 
37
+ & .#{$prefix}icon {
38
+ --#{$prefix}icon-color: inherit !important;
39
+ }
40
+
37
41
  &--xs {
38
42
  --#{$prefix}checkbox-gap: 0.375rem;
39
43
 
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/_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
  }