@carbon/styles 0.15.0 → 0.15.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 (2) hide show
  1. package/package.json +2 -2
  2. package/scss/components/tabs/_tabs.scss +105 -52
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": "0.15.0",
4
+ "version": "0.15.1",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
7
7
  "type": "git",
@@ -33,5 +33,5 @@
33
33
  "@carbon/test-utils": "^10.21.0",
34
34
  "css": "^3.0.0"
35
35
  },
36
- "gitHead": "aadefba8b1097fad433fe63c9c896b1a3e1b589a"
36
+ "gitHead": "1069a16ffb50905034b9ef3640fd4d098a37437f"
37
37
  }
package/scss/components/tabs/_tabs.scss CHANGED
@@ -40,29 +40,25 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px));
40
40
  @include reset;
41
41
  @include type-style('body-compact-01');
42
42
 
43
+ position: relative;
43
44
  display: flex;
44
45
  width: 100%;
45
46
  height: auto;
46
47
  min-height: rem(40px);
48
+ max-height: 4rem;
47
49
  color: $text-primary;
48
50
 
49
51
  &.#{$prefix}--tabs--contained {
50
52
  min-height: rem(48px);
51
53
  }
52
54
 
53
- .#{$prefix}--tabs__nav {
55
+ .#{$prefix}--tab--list {
54
56
  display: flex;
55
- overflow: auto hidden;
56
- width: auto;
57
- max-width: 100%;
58
- flex-direction: row;
59
- padding: 0;
60
- margin: 0;
61
- list-style: none;
62
- outline: 0;
63
- // hide scroll bars
57
+ width: 100%;
58
+ overflow-x: auto;
59
+ scroll-behavior: smooth;
64
60
  scrollbar-width: none;
65
- transition: max-height $duration-fast-01 motion(standard, productive);
61
+ will-change: scroll-position;
66
62
 
67
63
  &::-webkit-scrollbar {
68
64
  display: none;
@@ -72,37 +68,121 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px));
72
68
  //-----------------------------
73
69
  // Overflow Nav Buttons
74
70
  //-----------------------------
75
- .#{$prefix}--tabs__overflow-indicator--left,
76
- .#{$prefix}--tabs__overflow-indicator--right {
71
+ .#{$prefix}--tab--overflow-nav-button {
72
+ @include button-reset.reset;
73
+
74
+ display: flex;
75
+ width: $spacing-08;
76
+ flex-shrink: 0;
77
+ align-items: center;
78
+ justify-content: center;
79
+ background-color: $background;
80
+
81
+ &:focus {
82
+ @include focus-outline('outline');
83
+ }
84
+ }
85
+
86
+ .#{$prefix}--tab--overflow-nav-button--hidden {
87
+ display: none;
88
+ }
89
+
90
+ &.#{$prefix}--tabs--contained .#{$prefix}--tab--overflow-nav-button {
91
+ width: $spacing-09;
92
+ margin: 0;
93
+ background-color: $layer-accent;
94
+ }
95
+
96
+ .#{$prefix}--tab--overflow-nav-button svg {
97
+ fill: $icon-primary;
98
+ }
99
+
100
+ .#{$prefix}--tab--overflow-nav-button--next {
101
+ position: absolute;
102
+ top: 0;
103
+ right: 0;
104
+ bottom: 0;
105
+ }
106
+
107
+ .#{$prefix}--tab--overflow-nav-button--next::before {
108
+ position: absolute;
77
109
  z-index: 1;
110
+ left: -$spacing-03;
78
111
  width: $spacing-03;
79
- flex: 1 0 auto;
112
+ height: 100%;
113
+ background: linear-gradient(
114
+ to right,
115
+ rgba(255, 255, 255, 0),
116
+ $background
117
+ );
118
+ content: '';
80
119
  }
81
120
 
82
- .#{$prefix}--tabs__overflow-indicator--left {
83
- margin-right: -$spacing-03;
84
- background-image: linear-gradient(to left, transparent, $background);
121
+ &.#{$prefix}--tabs--contained
122
+ .#{$prefix}--tab--overflow-nav-button--next::before {
123
+ background-image: linear-gradient(
124
+ to right,
125
+ rgba(255, 255, 255, 0),
126
+ $layer-accent
127
+ );
85
128
  }
86
129
 
87
- .#{$prefix}--tabs__overflow-indicator--right {
88
- margin-left: -$spacing-03;
89
- background-image: linear-gradient(to right, transparent, $background);
130
+ .#{$prefix}--tab--overflow-nav-button--previous {
131
+ position: absolute;
132
+ top: 0;
133
+ bottom: 0;
134
+ left: 0;
135
+ }
136
+
137
+ .#{$prefix}--tab--overflow-nav-button--previous::before {
138
+ position: absolute;
139
+ z-index: 1;
140
+ right: -$spacing-03;
141
+ width: $spacing-03;
142
+ height: 100%;
143
+ background: linear-gradient(to left, rgba(255, 255, 255, 0), $background);
144
+ content: '';
145
+ }
146
+
147
+ &.#{$prefix}--tabs--contained
148
+ .#{$prefix}--tab--overflow-nav-button--previous::before {
149
+ background-image: linear-gradient(
150
+ to left,
151
+ rgba(255, 255, 255, 0),
152
+ $layer-accent
153
+ );
90
154
  }
91
155
 
92
156
  .#{$prefix}--tabs--light .#{$prefix}--tabs__overflow-indicator--left {
93
- background-image: linear-gradient(to left, transparent, $layer);
157
+ background-image: linear-gradient(
158
+ to left,
159
+ rgba(255, 255, 255, 0),
160
+ $layer
161
+ );
94
162
  }
95
163
 
96
164
  .#{$prefix}--tabs--light .#{$prefix}--tabs__overflow-indicator--right {
97
- background-image: linear-gradient(to right, transparent, $layer);
165
+ background-image: linear-gradient(
166
+ to right,
167
+ rgba(255, 255, 255, 0),
168
+ $layer
169
+ );
98
170
  }
99
171
 
100
172
  &.#{$prefix}--tabs--contained .#{$prefix}--tabs__overflow-indicator--left {
101
- background-image: linear-gradient(to left, transparent, $layer-accent);
173
+ background-image: linear-gradient(
174
+ to left,
175
+ rgba(255, 255, 255, 0),
176
+ $layer-accent
177
+ );
102
178
  }
103
179
 
104
180
  &.#{$prefix}--tabs--contained .#{$prefix}--tabs__overflow-indicator--right {
105
- background-image: linear-gradient(to right, transparent, $layer-accent);
181
+ background-image: linear-gradient(
182
+ to right,
183
+ rgba(255, 255, 255, 0),
184
+ $layer-accent
185
+ );
106
186
  }
107
187
 
108
188
  // Safari-only media query
@@ -146,34 +226,6 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px));
146
226
  }
147
227
  }
148
228
 
149
- .#{$prefix}--tab--overflow-nav-button {
150
- @include button-reset.reset;
151
-
152
- display: flex;
153
- width: $spacing-08;
154
- flex-shrink: 0;
155
- align-items: center;
156
- justify-content: center;
157
-
158
- &:focus {
159
- @include focus-outline('outline');
160
- }
161
- }
162
-
163
- .#{$prefix}--tab--overflow-nav-button--hidden {
164
- display: none;
165
- }
166
-
167
- &.#{$prefix}--tabs--contained .#{$prefix}--tab--overflow-nav-button {
168
- width: $spacing-09;
169
- margin: 0;
170
- background-color: $layer-accent;
171
- }
172
-
173
- .#{$prefix}--tab--overflow-nav-button svg {
174
- fill: $icon-primary;
175
- }
176
-
177
229
  //-----------------------------
178
230
  // Item
179
231
  //-----------------------------
@@ -181,6 +233,7 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px));
181
233
  @include reset;
182
234
 
183
235
  display: flex;
236
+ flex: 1 0 auto;
184
237
  padding: 0;
185
238
  cursor: pointer;
186
239
  transition: background-color $duration-fast-01