@unifiedsoftware/styles 1.1.2 → 1.1.4

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 (23) hide show
  1. package/css/fci.css +9 -3
  2. package/css/fci.min.css +1 -1
  3. package/css/styles.css +109 -331
  4. package/css/styles.min.css +1 -1
  5. package/package.json +1 -1
  6. package/scss/_utilities.scss +117 -0
  7. package/scss/components/_badge.scss +0 -4
  8. package/scss/components/_button.scss +0 -5
  9. package/scss/components/_card.scss +0 -3
  10. package/scss/components/_checkbox.scss +14 -6
  11. package/scss/components/_chip.scss +4 -4
  12. package/scss/components/_input.scss +0 -5
  13. package/scss/components/_list.scss +0 -3
  14. package/scss/components/_menu.scss +0 -5
  15. package/scss/components/_radio.scss +14 -6
  16. package/scss/components/_swipe.scss +0 -1
  17. package/scss/components/_switch.scss +10 -3
  18. package/scss/components/_tabs.scss +0 -3
  19. package/scss/components/_toolbar.scss +0 -5
  20. package/scss/mixins/_outline.scss +53 -53
  21. package/scss/mixins/_overlay.scss +58 -41
  22. package/scss/themes/fci/components/_button.scss +9 -1
  23. package/scss/themes/fci/components/_input.scss +0 -2
package/scss/components/_switch.scss CHANGED
@@ -1,5 +1,4 @@
1
1
  @use '../variables' as *;
2
- @use '../mixins/overlay' as *;
3
2
 
4
3
  .#{$prefix}switch {
5
4
  --#{$prefix}switch-control-padding: calc(var(--#{$prefix}switch-thumb-width) * 0.25);
@@ -36,11 +35,19 @@
36
35
  background-color: var(--#{$prefix}switch-control-color);
37
36
  display: inline-flex;
38
37
  align-items: center;
39
- transition: all 0.2s ease-in-out;
38
+ transition: all 0.15s ease-in-out;
40
39
  user-select: none;
41
40
  -webkit-tap-highlight-color: transparent;
42
41
  }
43
42
 
43
+ &--before &__control {
44
+ order: 2;
45
+ }
46
+
47
+ &--befire &__label {
48
+ order: 1;
49
+ }
50
+
44
51
  &--checked &__control {
45
52
  background-color: var(--#{$prefix}_checked-switch-control-color, var(--#{$prefix}switch-control-color));
46
53
  }
@@ -55,7 +62,7 @@
55
62
  transform: translateX(var(--#{$prefix}switch-control-padding));
56
63
  border-radius: var(--#{$prefix}switch-thumb-border-radius);
57
64
  background-color: var(--#{$prefix}switch-thumb-color);
58
- transition: all 0.2s ease-in-out;
65
+ transition: all 0.15s ease-in-out;
59
66
  }
60
67
 
61
68
  &--checked &__thumb {
package/scss/components/_tabs.scss CHANGED
@@ -1,5 +1,4 @@
1
1
  @use '../variables' as *;
2
- @use '../mixins/overlay' as *;
3
2
 
4
3
  .#{$prefix}tabs {
5
4
  width: 100%;
@@ -50,8 +49,6 @@
50
49
  text-decoration: none;
51
50
  }
52
51
 
53
- @include overlay();
54
-
55
52
  &--disabled {
56
53
  opacity: 0.6;
57
54
  pointer-events: none;
package/scss/components/_toolbar.scss CHANGED
@@ -1,6 +1,4 @@
1
1
  @use '../variables' as *;
2
- @use '../mixins/overlay' as *;
3
- @use '../mixins/outline' as *;
4
2
 
5
3
  .#{$prefix}toolbar {
6
4
  position: relative;
@@ -13,9 +11,6 @@
13
11
  display: flex;
14
12
  align-items: center;
15
13
 
16
- @include overlay();
17
- @include outline-b();
18
-
19
14
  &__container {
20
15
  width: 100%;
21
16
  margin: 0 auto;
package/scss/mixins/_outline.scss CHANGED
@@ -1,63 +1,63 @@
1
1
  @use '../variables' as *;
2
2
 
3
3
  @mixin outline {
4
- & > .#{$prefix}outline {
5
- position: absolute;
6
- inset: 0px;
7
- border-radius: inherit;
8
- overflow: hidden;
9
- border-width: var(--#{$prefix}outline-border-width);
10
- border-style: solid;
11
- border-color: var(--#{$prefix}outline-border-color);
12
- opacity: var(--#{$prefix}outline-opacity);
13
- pointer-events: none;
14
- }
4
+ // & > .#{$prefix}outline {
5
+ // position: absolute;
6
+ // inset: 0px;
7
+ // border-radius: inherit;
8
+ // overflow: hidden;
9
+ // border-width: var(--#{$prefix}outline-border-width);
10
+ // border-style: solid;
11
+ // border-color: var(--#{$prefix}outline-border-color);
12
+ // opacity: var(--#{$prefix}outline-opacity);
13
+ // pointer-events: none;
14
+ // }
15
15
 
16
- &:hover > .#{$prefix}outline {
17
- border-width: var(--#{$prefix}outline-hover-border-width, var(--#{$prefix}outline-border-width));
18
- border-color: var(--#{$prefix}outline-hover-border-color, var(--#{$prefix}outline-border-color));
19
- opacity: var(--#{$prefix}outline-hover-opacity, var(--#{$prefix}outline-opacity));
20
- }
16
+ // &:hover > .#{$prefix}outline {
17
+ // border-width: var(--#{$prefix}outline-hover-border-width, var(--#{$prefix}outline-border-width));
18
+ // border-color: var(--#{$prefix}outline-hover-border-color, var(--#{$prefix}outline-border-color));
19
+ // opacity: var(--#{$prefix}outline-hover-opacity, var(--#{$prefix}outline-opacity));
20
+ // }
21
21
 
22
- &:active > .#{$prefix}outline {
23
- border-width: var(
24
- --#{$prefix}outline-active-border-width,
25
- var(--#{$prefix}outline-hover-border-width, var(--#{$prefix}outline-border-width))
26
- );
27
- border-color: var(
28
- --#{$prefix}outline-active-border-color,
29
- var(--#{$prefix}outline-hover-border-color, var(--#{$prefix}outline-border-color))
30
- );
31
- opacity: var(
32
- --#{$prefix}outline-active-opacity,
33
- var(--#{$prefix}outline-hover-opacity, var(--#{$prefix}outline-opacity))
34
- );
35
- }
22
+ // &:active > .#{$prefix}outline {
23
+ // border-width: var(
24
+ // --#{$prefix}outline-active-border-width,
25
+ // var(--#{$prefix}outline-hover-border-width, var(--#{$prefix}outline-border-width))
26
+ // );
27
+ // border-color: var(
28
+ // --#{$prefix}outline-active-border-color,
29
+ // var(--#{$prefix}outline-hover-border-color, var(--#{$prefix}outline-border-color))
30
+ // );
31
+ // opacity: var(
32
+ // --#{$prefix}outline-active-opacity,
33
+ // var(--#{$prefix}outline-hover-opacity, var(--#{$prefix}outline-opacity))
34
+ // );
35
+ // }
36
36
 
37
- &--focus > .#{$prefix}outline,
38
- &--focus:hover > .#{$prefix}outline,
39
- &:focus > .#{$prefix}outline {
40
- border-width: var(
41
- --#{$prefix}outline-focus-border-width,
42
- var(--#{$prefix}outline-hover-border-width, var(--#{$prefix}outline-border-width))
43
- );
44
- border-color: var(
45
- --#{$prefix}outline-focus-border-color,
46
- var(--#{$prefix}outline-hover-border-color, var(--#{$prefix}outline-border-color))
47
- );
48
- opacity: var(
49
- --#{$prefix}outline-focus-opacity,
50
- var(--#{$prefix}outline-hover-opacity, var(--#{$prefix}outline-opacity))
51
- );
52
- }
37
+ // &--focus > .#{$prefix}outline,
38
+ // &--focus:hover > .#{$prefix}outline,
39
+ // &:focus > .#{$prefix}outline {
40
+ // border-width: var(
41
+ // --#{$prefix}outline-focus-border-width,
42
+ // var(--#{$prefix}outline-hover-border-width, var(--#{$prefix}outline-border-width))
43
+ // );
44
+ // border-color: var(
45
+ // --#{$prefix}outline-focus-border-color,
46
+ // var(--#{$prefix}outline-hover-border-color, var(--#{$prefix}outline-border-color))
47
+ // );
48
+ // opacity: var(
49
+ // --#{$prefix}outline-focus-opacity,
50
+ // var(--#{$prefix}outline-hover-opacity, var(--#{$prefix}outline-opacity))
51
+ // );
52
+ // }
53
53
  }
54
54
 
55
55
  @mixin outline-b {
56
- & > .#{$prefix}outline-b {
57
- position: absolute;
58
- inset: 0px;
59
- border-radius: inherit;
60
- overflow: hidden;
61
- border-bottom: var(--#{$prefix}outline-border-width) solid var(--#{$prefix}outline-border-color);
62
- }
56
+ // & > .#{$prefix}outline-b {
57
+ // position: absolute;
58
+ // inset: 0px;
59
+ // border-radius: inherit;
60
+ // overflow: hidden;
61
+ // border-bottom: var(--#{$prefix}outline-border-width) solid var(--#{$prefix}outline-border-color);
62
+ // }
63
63
  }
package/scss/mixins/_overlay.scss CHANGED
@@ -1,50 +1,67 @@
1
1
  @use '../variables' as *;
2
2
 
3
3
  @mixin overlay() {
4
- & > .#{$prefix}overlay {
5
- position: absolute;
6
- inset: 0px;
7
- border-radius: inherit;
8
- overflow: hidden;
9
- color: var(--#{$prefix}overlay-color);
10
- opacity: var(--#{$prefix}overlay-opacity);
11
- z-index: -1;
12
- pointer-events: none;
13
- background-color: currentColor;
14
- transition:
15
- background-color,
16
- opacity,
17
- 0.1s cubic-bezier(0.215, 0.61, 0.355, 1);
18
- }
4
+ // & > .#{$prefix}overlay {
5
+ // position: absolute;
6
+ // inset: 0px;
7
+ // border-radius: inherit;
8
+ // overflow: hidden;
9
+ // color: var(--#{$prefix}overlay-color);
10
+ // opacity: var(--#{$prefix}overlay-opacity);
11
+ // z-index: -1;
12
+ // pointer-events: none;
13
+ // background-color: currentColor;
14
+ // transition:
15
+ // background-color,
16
+ // opacity,
17
+ // 0.1s cubic-bezier(0.215, 0.61, 0.355, 1);
18
+ // }
19
19
 
20
- &:hover > .#{$prefix}overlay {
21
- color: var(--#{$prefix}_hover-overlay-color, var(--#{$prefix}overlay-color));
22
- opacity: var(--#{$prefix}_hover-overlay-opacity, var(--#{$prefix}overlay-opacity));
23
- }
20
+ // &:hover > .#{$prefix}overlay {
21
+ // color: var(--#{$prefix}_hover-overlay-color, var(--#{$prefix}overlay-color));
22
+ // opacity: var(--#{$prefix}_hover-overlay-opacity, var(--#{$prefix}overlay-opacity));
23
+ // }
24
24
 
25
- &:active > .#{$prefix}overlay {
26
- color: var(
27
- --#{$prefix}_active-overlay-color,
28
- var(--#{$prefix}_hover-overlay-color, var(--#{$prefix}overlay-color)),
29
- );
30
- opacity: var(
31
- --#{$prefix}_active-overlay-opacity,
32
- var(--#{$prefix}_hover-overlay-opacity, var(--#{$prefix}overlay-opacity)),
33
- );
34
- }
25
+ // &:active > .#{$prefix}overlay {
26
+ // color: var(
27
+ // --#{$prefix}_active-overlay-color,
28
+ // var(--#{$prefix}_hover-overlay-color, var(--#{$prefix}overlay-color)),
29
+ // );
30
+ // opacity: var(
31
+ // --#{$prefix}_active-overlay-opacity,
32
+ // var(--#{$prefix}_hover-overlay-opacity, var(--#{$prefix}overlay-opacity)),
33
+ // );
34
+ // }
35
35
 
36
- &--focus > .#{$prefix}overlay,
37
- &--focus:hover > .#{$prefix}overlay,
38
- &:focus > .#{$prefix}overlay {
39
- color: var(
40
- --#{$prefix}_focus-overlay-color,
41
- var(--#{$prefix}_hover-overlay-color, var(--#{$prefix}overlay-color)),
42
- );
43
- opacity: var(
44
- --#{$prefix}_focus-overlay-opacity,
45
- var(--#{$prefix}_hover-overlay-opacity, var(--#{$prefix}overlay-opacity)),
46
- );
47
- }
36
+ // &--focus > .#{$prefix}overlay,
37
+ // &:focus > .#{$prefix}overlay {
38
+ // color: var(--#{$prefix}_focus-overlay-color, var(--#{$prefix}overlay-color));
39
+ // opacity: var(--#{$prefix}_focus-overlay-opacity, var(--#{$prefix}overlay-opacity));
40
+ // }
41
+
42
+ // &--focus:hover > .#{$prefix}overlay,
43
+ // &:focus:hover > .#{$prefix}overlay {
44
+ // color: var(
45
+ // --#{$prefix}_focus-hover-overlay-color,
46
+ // var(--#{$prefix}_focus-overlay-color, var(--#{$prefix}overlay-color))
47
+ // );
48
+ // opacity: var(
49
+ // --#{$prefix}_focus-hover-overlay-opacity,
50
+ // var(--#{$prefix}_focus-overlay-opacity, var(--#{$prefix}overlay-opacity))
51
+ // );
52
+ // }
53
+
54
+ // &--focus:active > .#{$prefix}overlay,
55
+ // &:focus:active > .#{$prefix}overlay {
56
+ // color: var(
57
+ // --#{$prefix}_focus-active-overlay-color,
58
+ // var(--#{$prefix}_focus-overlay-color, var(--#{$prefix}overlay-color))
59
+ // );
60
+ // opacity: var(
61
+ // --#{$prefix}_focus-active-overlay-opacity,
62
+ // var(--#{$prefix}_focus-overlay-opacity, var(--#{$prefix}overlay-opacity))
63
+ // );
64
+ // }
48
65
  }
49
66
 
50
67
  @mixin outline-styles(
package/scss/themes/fci/components/_button.scss CHANGED
@@ -27,7 +27,7 @@ $colors-map: (
27
27
  --#{$prefix}button-gap: 0.25rem;
28
28
 
29
29
  .#{$prefix}icon {
30
- --#{$prefix}icon-font-size: 0.75rem;
30
+ --#{$prefix}icon-font-size: 0.875rem;
31
31
  }
32
32
  }
33
33
 
@@ -93,6 +93,8 @@ $colors-map: (
93
93
  --#{$prefix}overlay-opacity: 0;
94
94
  --#{$prefix}_hover-overlay-opacity: 0.12;
95
95
  --#{$prefix}_active-overlay-opacity: 0.24;
96
+ --#{$prefix}_focus-hover-overlay-opacity: 0.12;
97
+ --#{$prefix}_focus-active-overlay-opacity: 0.24;
96
98
  }
97
99
 
98
100
  & > .#{$prefix}outline {
@@ -111,6 +113,8 @@ $colors-map: (
111
113
  --#{$prefix}overlay-opacity: 0;
112
114
  --#{$prefix}_hover-overlay-opacity: 0.12;
113
115
  --#{$prefix}_active-overlay-opacity: 0.24;
116
+ --#{$prefix}_focus-hover-overlay-opacity: 0.12;
117
+ --#{$prefix}_focus-active-overlay-opacity: 0.24;
114
118
  }
115
119
 
116
120
  & > .#{$prefix}outline {
@@ -125,6 +129,8 @@ $colors-map: (
125
129
  --#{$prefix}overlay-opacity: 0.08;
126
130
  --#{$prefix}_hover-overlay-opacity: 0.12;
127
131
  --#{$prefix}_active-overlay-opacity: 0.24;
132
+ --#{$prefix}_focus-hover-overlay-opacity: 0.12;
133
+ --#{$prefix}_focus-active-overlay-opacity: 0.24;
128
134
  }
129
135
 
130
136
  & > .#{$prefix}outline {
@@ -139,6 +145,8 @@ $colors-map: (
139
145
  --#{$prefix}overlay-opacity: 0;
140
146
  --#{$prefix}_hover-overlay-opacity: 0.12;
141
147
  --#{$prefix}_active-overlay-opacity: 0.24;
148
+ --#{$prefix}_focus-hover-overlay-opacity: 0.12;
149
+ --#{$prefix}_focus-active-overlay-opacity: 0.24;
142
150
  }
143
151
 
144
152
  & > .#{$prefix}outline {
package/scss/themes/fci/components/_input.scss CHANGED
@@ -149,7 +149,6 @@
149
149
  --#{$prefix}overlay-color: inherit;
150
150
  --#{$prefix}overlay-opacity: 0.08;
151
151
  --#{$prefix}_hover-overlay-opacity: 0.12;
152
- --#{$prefix}_active-overlay-opacity: 0.24;
153
152
  }
154
153
 
155
154
  & > .#{$prefix}outline {
@@ -167,7 +166,6 @@
167
166
  --#{$prefix}overlay-color: #fff;
168
167
  --#{$prefix}overlay-opacity: 0.12;
169
168
  --#{$prefix}_hover-overlay-opacity: 0.16;
170
- --#{$prefix}_active-overlay-opacity: 0.24;
171
169
  }
172
170
 
173
171
  & > .#{$prefix}outline {