@carbon/styles 1.23.0-rc.0 → 1.23.1

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 (5) hide show
  1. package/css/styles.css +58 -76
  2. package/css/styles.min.css +1 -1
  3. package/package.json +2 -2
  4. package/scss/components/menu/_menu.scss +61 -70
  5. package/scss/utilities/_hide-at-breakpoint.scss +0 -10
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@carbon/styles",
3
3
  "description": "Styles for the Carbon Design System",
4
- "version": "1.23.0-rc.0",
4
+ "version": "1.23.1",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
7
7
  "type": "git",
@@ -59,5 +59,5 @@
59
59
  "scss/**/*.css",
60
60
  "css/**/*.css"
61
61
  ],
62
- "gitHead": "feebe20f22ecfef4356695ae127e22ebe4225e8e"
62
+ "gitHead": "2f5261e26d75787ab906d678fde430dfbd394d14"
63
63
  }
package/scss/components/menu/_menu.scss CHANGED
@@ -10,15 +10,18 @@
10
10
  @use '../../spacing' as *;
11
11
  @use '../../theme' as *;
12
12
  @use '../../type' as *;
13
- @use '../button/tokens' as button;
13
+ @use '../button/tokens' as button-tokens;
14
14
  @use '../../utilities/box-shadow' as *;
15
15
  @use '../../utilities/focus-outline' as *;
16
16
  @use '../../utilities/z-index' as *;
17
+ @use '../../utilities/convert' as *;
17
18
 
18
19
  /// Menu styles
19
20
  /// @access public
20
21
  /// @group menu
21
22
  @mixin menu {
23
+ // Menu
24
+
22
25
  .#{$prefix}--menu {
23
26
  @include box-shadow;
24
27
 
@@ -28,6 +31,7 @@
28
31
  max-width: 18rem;
29
32
  padding: $spacing-02 0;
30
33
  background-color: $layer;
34
+ opacity: 0;
31
35
  visibility: hidden;
32
36
  }
33
37
 
@@ -39,19 +43,27 @@
39
43
  }
40
44
  }
41
45
 
42
- .#{$prefix}--menu--invisible {
43
- opacity: 0;
44
- pointer-events: none;
46
+ .#{$prefix}--menu:not(.#{$prefix}--menu--open) .#{$prefix}--menu--open {
47
+ visibility: hidden;
48
+ }
49
+
50
+ .#{$prefix}--menu--shown {
51
+ opacity: 1;
45
52
  }
46
53
 
47
- .#{$prefix}--menu-option {
48
- position: relative;
49
- display: list-item;
50
- // $size-sm
54
+ // MenuItem
55
+
56
+ .#{$prefix}--menu-item {
57
+ @include type-style('body-short-01');
58
+
59
+ display: grid;
51
60
  height: 2rem;
52
- background-color: $layer;
61
+ align-items: center;
53
62
  color: $text-primary;
63
+ column-gap: $spacing-03;
54
64
  cursor: pointer;
65
+ grid-template-columns: 0 1fr max-content;
66
+ padding-inline: $spacing-05;
55
67
  transition: background-color $duration-fast-01 motion(standard, productive);
56
68
 
57
69
  &:focus {
@@ -59,88 +71,67 @@
59
71
  }
60
72
  }
61
73
 
62
- .#{$prefix}--menu-option--active,
63
- .#{$prefix}--menu-option:hover {
74
+ .#{$prefix}--menu-item:hover {
64
75
  background-color: $layer-hover;
65
76
  }
66
77
 
67
- .#{$prefix}--menu-option--danger:hover,
68
- .#{$prefix}--menu-option--danger:focus {
69
- background-color: button.$button-danger-primary;
70
- color: $text-on-color;
71
- }
78
+ $supported-sizes: (
79
+ 'xs': 1.5rem,
80
+ 'sm': 2rem,
81
+ 'md': 2.5rem,
82
+ 'lg': 3rem,
83
+ );
72
84
 
73
- .#{$prefix}--menu-option > .#{$prefix}--menu {
74
- margin-top: calc(#{$spacing-02} * -1);
85
+ @each $size, $value in $supported-sizes {
86
+ .#{$prefix}--menu--#{$size} .#{$prefix}--menu-item {
87
+ height: $value;
88
+ }
75
89
  }
76
90
 
77
- .#{$prefix}--menu-option__content {
91
+ .#{$prefix}--menu-item__icon {
78
92
  display: flex;
79
- height: 100%;
80
- align-items: center;
81
- justify-content: space-between;
82
- padding: 0 $spacing-05;
83
93
  }
84
94
 
85
- .#{$prefix}--menu-option__content--disabled {
86
- background-color: $layer;
87
- color: $text-disabled;
88
- cursor: not-allowed;
95
+ .#{$prefix}--menu-item__label {
96
+ overflow: hidden;
97
+ text-overflow: ellipsis;
98
+ white-space: nowrap;
89
99
  }
90
100
 
91
- .#{$prefix}--menu-option__content--disabled .#{$prefix}--menu-option__label,
92
- .#{$prefix}--menu-option__content--disabled .#{$prefix}--menu-option__info,
93
- .#{$prefix}--menu-option__content--disabled .#{$prefix}--menu-option__icon {
94
- color: $text-disabled;
101
+ .#{$prefix}--menu--with-icons > .#{$prefix}--menu-item,
102
+ .#{$prefix}--menu--with-icons
103
+ > .#{$prefix}--menu-item-group
104
+ > ul
105
+ > .#{$prefix}--menu-item,
106
+ .#{$prefix}--menu--with-icons
107
+ > .#{$prefix}--menu-item-radio-group
108
+ > ul
109
+ > .#{$prefix}--menu-item {
110
+ grid-template-columns: 1rem 1fr max-content;
95
111
  }
96
112
 
97
- .#{$prefix}--menu-option__content--indented .#{$prefix}--menu-option__label {
98
- margin-left: $spacing-05;
113
+ .#{$prefix}--menu-item--disabled {
114
+ color: $text-disabled;
115
+ cursor: not-allowed;
99
116
  }
100
117
 
101
- .#{$prefix}--menu-option__label {
102
- @include type-style('body-compact-01');
103
-
104
- overflow: hidden;
105
- flex-grow: 1;
106
- // add top/bottom padding to make sure letters are not cut off by hidden overflow
107
- padding: $spacing-02 0;
108
- text-align: start;
109
- text-overflow: ellipsis;
110
- white-space: nowrap;
118
+ .#{$prefix}--menu-item--disabled:hover {
119
+ background-color: $layer;
111
120
  }
112
121
 
113
- .#{$prefix}--menu-option__info {
114
- display: inline-flex;
115
- margin-left: $spacing-05;
122
+ .#{$prefix}--menu-item--danger:focus,
123
+ .#{$prefix}--menu-item--danger:hover {
124
+ background-color: button-tokens.$button-danger-primary;
125
+ color: $text-on-color;
116
126
  }
117
127
 
118
- .#{$prefix}--menu-option__icon {
119
- display: flex;
120
- width: 1rem;
121
- height: 1rem;
122
- align-items: center;
123
- margin-right: $spacing-03;
124
- }
128
+ // MenuItemDivider
125
129
 
126
- .#{$prefix}--menu-divider {
127
- display: list-item;
130
+ .#{$prefix}--menu-item-divider {
131
+ display: block;
128
132
  width: 100%;
129
- height: 1px;
130
- margin: $spacing-02 0;
133
+ height: rem(1px);
131
134
  background-color: $border-subtle;
132
- }
133
-
134
- $supported-sizes: (
135
- // $size-md
136
- 'md': 2.5rem,
137
- // $size-lg
138
- 'lg': 3rem
139
- );
140
-
141
- @each $size, $value in $supported-sizes {
142
- .#{$prefix}--menu--#{$size} .#{$prefix}--menu-option {
143
- height: $value;
144
- }
135
+ margin-block: $spacing-02;
145
136
  }
146
137
  }
package/scss/utilities/_hide-at-breakpoint.scss CHANGED
@@ -4,40 +4,30 @@
4
4
  // Mixins that can be used to hide elements only at specific breakpoints.
5
5
  // Helpful for when you would like to hide elements outside of a Grid context
6
6
  @mixin hide-at-sm {
7
- padding: 2rem 1rem;
8
- background: #8a3ffc;
9
7
  @include breakpoint-between('sm', 'md') {
10
8
  display: none;
11
9
  }
12
10
  }
13
11
 
14
12
  @mixin hide-at-md {
15
- padding: 2rem 1rem;
16
- background: #4589ff;
17
13
  @include breakpoint-between('md', 'lg') {
18
14
  display: none;
19
15
  }
20
16
  }
21
17
 
22
18
  @mixin hide-at-lg {
23
- padding: 2rem 1rem;
24
- background: #42be65;
25
19
  @include breakpoint-between('lg', 'xlg') {
26
20
  display: none;
27
21
  }
28
22
  }
29
23
 
30
24
  @mixin hide-at-xlg {
31
- padding: 2rem 1rem;
32
- background: #f1c21b;
33
25
  @include breakpoint-between('xlg', 'max') {
34
26
  display: none;
35
27
  }
36
28
  }
37
29
 
38
30
  @mixin hide-at-max {
39
- padding: 2rem 1rem;
40
- background: #da1e28;
41
31
  @include breakpoint-up('max') {
42
32
  display: none;
43
33
  }