@unifiedsoftware/styles 1.0.4 → 1.0.6

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 (20) hide show
  1. package/css/styles.css +1061 -8
  2. package/css/styles.min.css +1 -1
  3. package/css/theme-default.css +58 -24
  4. package/css/theme-default.min.css +1 -1
  5. package/index.scss +2 -0
  6. package/package.json +1 -1
  7. package/scss/_utilities.scss +155 -0
  8. package/scss/components/_backdrop.scss +40 -0
  9. package/scss/components/_button.scss +9 -0
  10. package/scss/components/_drawer.scss +152 -0
  11. package/scss/components/_index.scss +5 -0
  12. package/scss/components/_menu.scss +3 -10
  13. package/scss/components/_tabs.scss +5 -0
  14. package/scss/components/_toolbar.scss +47 -0
  15. package/scss/mixins/_outline.scss +10 -0
  16. package/scss/themes/default/components/_button.scss +16 -16
  17. package/scss/themes/default/components/_drawer.scss +6 -0
  18. package/scss/themes/default/components/_index.scss +5 -0
  19. package/scss/themes/default/components/_menu.scss +17 -13
  20. package/scss/themes/default/components/_toolbar.scss +31 -0
package/scss/components/_index.scss CHANGED
@@ -1,3 +1,5 @@
1
+ @use 'toolbar';
2
+
1
3
  @use 'badge';
2
4
 
3
5
  @use 'collapse';
@@ -6,6 +8,9 @@
6
8
  @use 'chip';
7
9
  @use 'button';
8
10
 
11
+ @use 'backdrop';
12
+ @use 'drawer';
13
+
9
14
  @use 'menu';
10
15
  @use 'divider';
11
16
  @use 'tabs';
package/scss/components/_menu.scss CHANGED
@@ -3,7 +3,7 @@
3
3
 
4
4
  .#{$prefix}menu {
5
5
  margin: 0;
6
- padding: 0;
6
+ padding: var(--#{$prefix}menu-padding-y) var(--#{$prefix}menu-padding-x);
7
7
  color: var(--#{$prefix}menu-color);
8
8
  background-color: var(--#{$prefix}menu-background);
9
9
 
@@ -13,6 +13,7 @@
13
13
  padding: var(--#{$prefix}menu-item-padding-y) var(--#{$prefix}menu-item-padding-x);
14
14
  font-size: var(--#{$prefix}menu-item-font-size);
15
15
  font-weight: var(--#{$prefix}menu-item-font-weight);
16
+ border-radius: var(--#{$prefix}menu-item-border-radius);
16
17
  text-decoration: none;
17
18
  cursor: pointer;
18
19
  display: flex;
@@ -74,6 +75,7 @@
74
75
  font-weight: var(--#{$prefix}menu-group-font-weight);
75
76
  text-decoration: none;
76
77
  border-bottom: var(--#{$prefix}menu-group-border-width) solid var(--#{$prefix}menu-group-border-color);
78
+ border-radius: var(--#{$prefix}menu-group-border-radius);
77
79
  display: flex;
78
80
  align-items: center;
79
81
  color: var(--#{$prefix}menu-group-color);
@@ -94,15 +96,6 @@
94
96
  align-items: center;
95
97
  }
96
98
 
97
- &--selected &__icon {
98
- --#{$prefix}menu-group-icon-color: var(--#{$prefix}_active-menu-item-icon-color);
99
- }
100
-
101
- &__icon .#{$prefix}icon {
102
- --#{$prefix}icon-font-size: var(--#{$prefix}menu-group-icon-font-size);
103
- --#{$prefix}icon-color: var(--#{$prefix}menu-group-icon-color);
104
- }
105
-
106
99
  &__content {
107
100
  flex-grow: 1;
108
101
  z-index: 1;
package/scss/components/_tabs.scss CHANGED
@@ -34,6 +34,7 @@
34
34
  padding: 0px 16px;
35
35
  font-size: var(--#{$prefix}tab-font-size);
36
36
  font-weight: var(--#{$prefix}tab-font-weight);
37
+ text-decoration: none;
37
38
  vertical-align: middle;
38
39
  z-index: 1;
39
40
  color: var(--#{$prefix}tab-color);
@@ -43,6 +44,10 @@
43
44
  user-select: none;
44
45
  -webkit-tap-highlight-color: transparent;
45
46
 
47
+ &:hover {
48
+ text-decoration: none;
49
+ }
50
+
46
51
  @include overlay();
47
52
 
48
53
  &--disabled {
package/scss/components/_toolbar.scss ADDED
@@ -0,0 +1,47 @@
1
+ @use '../variables' as *;
2
+ @use '../mixins/overlay' as *;
3
+ @use '../mixins/outline' as *;
4
+
5
+ .#{$prefix}toolbar {
6
+ position: relative;
7
+ width: 100%;
8
+ padding: var(--#{$prefix}toolbar-padding-y) var(--#{$prefix}toolbar-padding-x);
9
+ border-bottom: var(--#{$prefix}toolbar-border);
10
+ background: var(--#{$prefix}toolbar-background);
11
+ display: flex;
12
+ align-items: center;
13
+
14
+ @include overlay();
15
+ @include outline-b();
16
+
17
+ &__container {
18
+ width: 100%;
19
+ min-height: var(--#{$prefix}toolbar-min-height);
20
+ margin: 0 auto;
21
+ display: flex;
22
+ align-items: center;
23
+ gap: 0.5rem;
24
+ z-index: 1;
25
+ }
26
+
27
+ &__start-action,
28
+ &__end-action {
29
+ flex-shrink: 0;
30
+ }
31
+
32
+ &__content {
33
+ flex-grow: 1;
34
+ overflow: hidden;
35
+ display: flex;
36
+ }
37
+
38
+ &__title {
39
+ font-size: var(--#{$prefix}toolbar-title-font-size);
40
+ font-weight: var(--#{$prefix}toolbar-title-font-weight);
41
+ text-decoration: none;
42
+ color: inherit;
43
+ overflow: hidden;
44
+ white-space: nowrap;
45
+ text-overflow: ellipsis;
46
+ }
47
+ }
package/scss/mixins/_outline.scss CHANGED
@@ -9,3 +9,13 @@
9
9
  border: var(--#{$prefix}outline-border-width) solid var(--#{$prefix}outline-border-color);
10
10
  }
11
11
  }
12
+
13
+ @mixin outline-b {
14
+ & > .#{$prefix}outline-b {
15
+ position: absolute;
16
+ inset: 0px;
17
+ border-radius: inherit;
18
+ overflow: hidden;
19
+ border-bottom: var(--#{$prefix}outline-border-width) solid var(--#{$prefix}outline-border-color);
20
+ }
21
+ }
package/scss/themes/default/components/_button.scss CHANGED
@@ -18,57 +18,57 @@
18
18
 
19
19
  @include button-size(
20
20
  $name: 'xs',
21
- $height: 28px,
21
+ $height: 20px,
22
22
  $padding-y: 0,
23
23
  $padding-x: 0.5rem,
24
- $font-size: 0.75rem,
24
+ $font-size: 0.625rem,
25
25
  $border-radius: 4px,
26
- $gap: 0.375rem,
26
+ $gap: 0.25rem,
27
27
  $icon-font-size: 0.75rem
28
28
  );
29
29
 
30
30
  @include button-size(
31
31
  $name: 'sm',
32
- $height: 32px,
32
+ $height: 28px,
33
33
  $padding-y: 0,
34
34
  $padding-x: 0.75rem,
35
- $font-size: 14px,
35
+ $font-size: 0.75rem,
36
36
  $border-radius: 4px,
37
37
  $gap: 0.375rem,
38
- $icon-font-size: 0.875rem
38
+ $icon-font-size: 1rem
39
39
  );
40
40
 
41
41
  @include button-size(
42
42
  $name: 'md',
43
- $height: 40px,
43
+ $height: 36px,
44
44
  $padding-y: 0,
45
45
  $padding-x: 1rem,
46
- $font-size: 14px,
46
+ $font-size: 0.875rem,
47
47
  $border-radius: 4px,
48
48
  $gap: 0.5rem,
49
- $icon-font-size: 1rem
49
+ $icon-font-size: 1.125rem
50
50
  );
51
51
 
52
52
  @include button-size(
53
53
  $name: 'lg',
54
- $height: 48px,
54
+ $height: 44px,
55
55
  $padding-y: 0,
56
- $padding-x: 1.5rem,
56
+ $padding-x: 1.25rem,
57
57
  $font-size: 1rem,
58
58
  $border-radius: 4px,
59
- $gap: 0.5rem,
60
- $icon-font-size: 1.125rem
59
+ $gap: 0.625rem,
60
+ $icon-font-size: 1.25rem
61
61
  );
62
62
 
63
63
  @include button-size(
64
64
  $name: 'xl',
65
- $height: 48px,
65
+ $height: 52px,
66
66
  $padding-y: 0,
67
67
  $padding-x: 1.5rem,
68
68
  $font-size: 1rem,
69
69
  $border-radius: 4px,
70
- $gap: 0.5rem,
71
- $icon-font-size: 1.25rem
70
+ $gap: 0.75rem,
71
+ $icon-font-size: 1.5rem
72
72
  );
73
73
 
74
74
  &--filled {
package/scss/themes/default/components/_drawer.scss ADDED
@@ -0,0 +1,6 @@
1
+ @use '../../../variables' as *;
2
+
3
+ .#{$prefix}drawer {
4
+ --#{$prefix}drawer-width: 256px;
5
+ --#{$prefix}drawer-background: #fff;
6
+ }
package/scss/themes/default/components/_index.scss CHANGED
@@ -1,7 +1,12 @@
1
+ @use 'toolbar';
2
+
1
3
  @use 'icon';
2
4
  @use 'badge';
3
5
 
4
6
  @use 'chip';
5
7
  @use 'button';
8
+
9
+ @use 'drawer';
10
+
6
11
  @use 'menu';
7
12
  @use 'tabs';
package/scss/themes/default/components/_menu.scss CHANGED
@@ -1,6 +1,8 @@
1
1
  @use '../../../variables' as *;
2
2
 
3
3
  .#{$prefix}menu {
4
+ --#{$prefix}menu-padding-y: 0;
5
+ --#{$prefix}menu-padding-x: 0;
4
6
  --#{$prefix}menu-color: #343a40;
5
7
  --#{$prefix}menu-background: #fff;
6
8
 
@@ -11,20 +13,26 @@
11
13
  --#{$prefix}menu-item-padding-level: 2rem;
12
14
  --#{$prefix}menu-item-font-size: 12px;
13
15
  --#{$prefix}menu-item-font-weight: 500;
16
+ --#{$prefix}menu-item-border-radius: 0;
14
17
  --#{$prefix}menu-item-gap: 1rem;
15
18
 
16
- --#{$prefix}menu-item-icon-font-size: 16px;
17
- --#{$prefix}menu-item-icon-color: var(--#{$prefix}primary-color);
19
+ & > .#{$prefix}overlay {
20
+ --#{$prefix}overlay-color: inherit;
21
+ --#{$prefix}overlay-opacity: 0;
22
+ --#{$prefix}_hover-overlay-color: inherit;
23
+ --#{$prefix}_hover-overlay-opacity: 0.08;
24
+ }
18
25
 
19
- /* Overlay */
20
- --#{$prefix}overlay-color: inherit;
21
- --#{$prefix}overlay-opacity: 0;
22
- --#{$prefix}_hover-overlay-color: inherit;
23
- --#{$prefix}_hover-overlay-opacity: 0.08;
26
+ &__icon .#{$prefix}icon {
27
+ --#{$prefix}icon-font-size: 16px;
28
+ --#{$prefix}icon-color: var(--#{$prefix}primary-color);
29
+ }
24
30
 
25
31
  &--selected {
26
32
  --#{$prefix}menu-item-color: var(--#{$prefix}primary-color);
33
+ }
27
34
 
35
+ &--selected > .#{$prefix}overlay {
28
36
  --#{$prefix}overlay-color: var(--#{$prefix}primary-color);
29
37
  --#{$prefix}overlay-opacity: 0.08;
30
38
  --#{$prefix}_hover-overlay-opacity: 0.08;
@@ -39,17 +47,13 @@
39
47
  --#{$prefix}menu-group-padding-level: 2rem;
40
48
  --#{$prefix}menu-group-font-size: 12px;
41
49
  --#{$prefix}menu-group-font-weight: 700;
50
+ --#{$prefix}menu-group-border-radius: 0;
42
51
  --#{$prefix}menu-group-gap: 1rem;
43
52
  --#{$prefix}menu-group-border-width: 1px;
44
53
  --#{$prefix}menu-group-border-color: #dee2e6;
45
54
  }
46
55
 
47
- &-submenu {
48
- --#{$prefix}_active-submenu-item-color: var(--#{$prefix}primary-color);
49
- --#{$prefix}_active-submenu-item-background: transparent;
50
- }
51
-
52
- &-submenu > &-item--selected {
56
+ &-submenu > &-item--selected > .#{$prefix}overlay {
53
57
  --#{$prefix}overlay-opacity: 0;
54
58
  --#{$prefix}_hover-overlay-opacity: 0;
55
59
  --#{$prefix}_active-overlay-opacity: 0;
package/scss/themes/default/components/_toolbar.scss ADDED
@@ -0,0 +1,31 @@
1
+ @use '../../../variables' as *;
2
+
3
+ .#{$prefix}toolbar {
4
+ --#{$prefix}toolbar-background: var(--#{$prefix}surface-background);
5
+ --#{$prefix}toolbar-border: var(--#{$prefix}surface-border);
6
+
7
+ --#{$prefix}toolbar-overlay-background: var(--#{$prefix}surface-overlay-background);
8
+ --#{$prefix}toolbar-overlay-opacity: var(--#{$prefix}surface-overlay-opacity-0);
9
+
10
+ --#{$prefix}toolbar-title-font-size: 1.125rem;
11
+ --#{$prefix}toolbar-title-font-weight: 600;
12
+
13
+ /* Outline */
14
+ --#{$prefix}outline-border-width: 1px;
15
+ --#{$prefix}outline-border-color: #ddd;
16
+
17
+ & &--sm {
18
+ --#{$prefix}toolbar-padding-y: 0.25rem;
19
+ --#{$prefix}toolbar-padding-x: 1rem;
20
+ }
21
+
22
+ &--md {
23
+ --#{$prefix}toolbar-padding-y: 0.5rem;
24
+ --#{$prefix}toolbar-padding-x: 1rem;
25
+ }
26
+
27
+ &--lg {
28
+ --#{$prefix}toolbar-padding-y: 0.75rem;
29
+ --#{$prefix}toolbar-padding-x: 1rem;
30
+ }
31
+ }