Skip to content

Commit bfa64c6

Browse files
Spiderpig86Spiderpig86
committed
🐛 fix(tabs.scss): Fix broken tab styles, remove remaining hardcoded colors #330 
1 parent 391ba0f commit bfa64c6

File tree

4 files changed

+123
-69
lines changed

4 files changed

+123
-69
lines changed

‎next/dist/cirrus-core.css

+51-30
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,57 @@
108108
* }
109109
* }
110110
*/
111+
/*
112+
Main utility for generating utility classes with different viewports, delimiters, base class names, etc.
113+
Example: .sm\:hover\:u-text-blue:hover { ... }
114+
115+
@class-prefix {string} [config.$utility-prefix] - prefix used for generated classes. This is the first section of the class name. Can be empty.
116+
@delimiter {string} [config.$delimiter] - delimiter used in class name body but not for separating psuedos. Can be empty.
117+
@base-class-name {string} - the root of the class name. For the utility class above, 'blue' is the base class name
118+
@class-value-pairs {map<string, any>[]} - list of mappings that maps the variant name (e.g. 'blue') to a map of CSS properties to values
119+
@variants {string[]} [()] - list of strings specifying which variants to generate styles for. Possible values:
120+
- 'responsive',
121+
- 'dark', 'light',
122+
- 'reduce-motion',
123+
- 'first-of-type',
124+
- 'last-of-type',
125+
- 'portrait', 'landscape',
126+
- 'hover', 'group-hover',
127+
- 'focus', 'group-focus', 'focus-visible', 'focus-within',
128+
- 'active',
129+
- 'visited',
130+
- 'checked',
131+
- 'disabled'
132+
133+
@variant-delimiter {string} [config.$variant-delimiter] - delimiter used to separate the variant portion of the class. Can be empty but not advisable.
134+
@override {string} [config.$override] - override for CSS properties, like '!important'
135+
*/
136+
/**
137+
* Convert a string to a proper class selector.
138+
* @param: {String} $selector
139+
* @return: {Selector} Returns the class selector.
140+
*/
141+
/*
142+
Utility to use when generating classes with your own series of SCSS rules. This is typically used with the inline-class-generator mixin.
143+
144+
@delimiter {string} [config.$delimiter] - delimiter used in class name body but not for separating psuedos. Can be empty.
145+
@variants {string[]} [()] - list of strings specifying which variants to generate styles for. Possible values:
146+
- 'responsive',
147+
- 'dark', 'light',
148+
- 'reduce-motion',
149+
- 'first-of-type',
150+
- 'last-of-type',
151+
- 'portrait', 'landscape',
152+
- 'hover', 'group-hover',
153+
- 'focus', 'group-focus', 'focus-visible', 'focus-within',
154+
- 'active',
155+
- 'visited',
156+
- 'checked',
157+
- 'disabled'
158+
159+
@variant-delimiter {string} [config.$variant-delimiter] - delimiter used to separate the variant portion of the class. Can be empty but not advisable.
160+
@override {string} [config.$override] - override for CSS properties, like '!important'
161+
*/
111162
/* BASE STYLING + RESET FOR CIRRUS */
112163
:root {
113164
/* v1 Colors */
@@ -465,36 +516,6 @@ fieldset legend {
465516
animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
466517
}
467518

468-
/*
469-
Main utility for generating utility classes with different viewports, delimiters, base class names, etc.
470-
Example: .sm\:hover\:u-text-blue:hover { ... }
471-
472-
@class-prefix {string} [cofig.$utility-prefix] - prefix used for generated classes. This is the first section of the class name
473-
@delimiter {string} [config.$delimiter] - delimiter used in class name body but not for separating psuedos
474-
@base-class-name {string} - the root of the class name. For the utility class above, 'blue' is the base class name
475-
@class-value-pairs {map<string, any>[]} - list of mappings that maps the variant name (e.g. 'blue') to a map of CSS properties to values
476-
@variants {string[]} [()] - list of strings specifying which variants to generate styles for. Possible values:
477-
- 'responsive',
478-
- 'dark', 'light',
479-
- 'reduce-motion',
480-
- 'first-of-type',
481-
- 'last-of-type',
482-
- 'portrait', 'landscape',
483-
- 'hover', 'group-hover',
484-
- 'focus', 'group-focus', 'focus-visible', 'focus-within',
485-
- 'active',
486-
- 'visited',
487-
- 'checked',
488-
- 'disabled'
489-
490-
@variant-delimiter {string} [config.$variant-delimiter] - delimiter used to separate the variant portion of the class
491-
@override {string} [config.$override] - override for CSS properties, like '!important'
492-
*/
493-
/**
494-
* Convert a string to a proper class selector.
495-
* @param: {String} $selector
496-
* @return: {Selector} Returns the class selector.
497-
*/
498519
/* FONT */
499520
/* Constants */
500521
/* Headers */

‎next/dist/cirrus.css

+32-5
Original file line numberDiff line numberDiff line change
@@ -113,8 +113,8 @@
113113
Main utility for generating utility classes with different viewports, delimiters, base class names, etc.
114114
Example: .sm\:hover\:u-text-blue:hover { ... }
115115

116-
@class-prefix {string} [cofig.$utility-prefix] - prefix used for generated classes. This is the first section of the class name
117-
@delimiter {string} [config.$delimiter] - delimiter used in class name body but not for separating psuedos
116+
@class-prefix {string} [config.$utility-prefix] - prefix used for generated classes. This is the first section of the class name. Can be empty.
117+
@delimiter {string} [config.$delimiter] - delimiter used in class name body but not for separating psuedos. Can be empty.
118118
@base-class-name {string} - the root of the class name. For the utility class above, 'blue' is the base class name
119119
@class-value-pairs {map<string, any>[]} - list of mappings that maps the variant name (e.g. 'blue') to a map of CSS properties to values
120120
@variants {string[]} [()] - list of strings specifying which variants to generate styles for. Possible values:
@@ -131,14 +131,35 @@
131131
- 'checked',
132132
- 'disabled'
133133

134-
@variant-delimiter {string} [config.$variant-delimiter] - delimiter used to separate the variant portion of the class
134+
@variant-delimiter {string} [config.$variant-delimiter] - delimiter used to separate the variant portion of the class. Can be empty but not advisable.
135135
@override {string} [config.$override] - override for CSS properties, like '!important'
136136
*/
137137
/**
138138
* Convert a string to a proper class selector.
139139
* @param: {String} $selector
140140
* @return: {Selector} Returns the class selector.
141141
*/
142+
/*
143+
Utility to use when generating classes with your own series of SCSS rules. This is typically used with the inline-class-generator mixin.
144+
145+
@delimiter {string} [config.$delimiter] - delimiter used in class name body but not for separating psuedos. Can be empty.
146+
@variants {string[]} [()] - list of strings specifying which variants to generate styles for. Possible values:
147+
- 'responsive',
148+
- 'dark', 'light',
149+
- 'reduce-motion',
150+
- 'first-of-type',
151+
- 'last-of-type',
152+
- 'portrait', 'landscape',
153+
- 'hover', 'group-hover',
154+
- 'focus', 'group-focus', 'focus-visible', 'focus-within',
155+
- 'active',
156+
- 'visited',
157+
- 'checked',
158+
- 'disabled'
159+
160+
@variant-delimiter {string} [config.$variant-delimiter] - delimiter used to separate the variant portion of the class. Can be empty but not advisable.
161+
@override {string} [config.$override] - override for CSS properties, like '!important'
162+
*/
142163
/* BASE STYLING + RESET FOR CIRRUS */
143164
:root {
144165
/* v1 Colors */
@@ -32971,10 +32992,15 @@ details.accordion:last-of-type {
3297132992
}
3297232993

3297332994
.tab-container.tabs-depth ul {
32974-
box-shadow: 0 2px 3px rgba(134, 142, 150, 0.85);
32995+
box-shadow: 0 2px 3px rgba(134, 142, 150, 0.15);
3297532996
border-bottom: 0;
3297632997
}
3297732998

32999+
.tab-container.tabs-depth ul li a,
33000+
.tab-container.tabs-depth ul li .tab-item-content {
33001+
margin-bottom: -1px;
33002+
}
33003+
3297833004
.tab-container.tabs-classic ul {
3297933005
border-bottom-color: #dee2e6;
3298033006
border-bottom-style: solid;
@@ -33001,6 +33027,7 @@ details.accordion:last-of-type {
3300133027
border-radius: 3px 3px 0 0;
3300233028
cursor: pointer;
3300333029
transition: all 0.3s;
33030+
margin-bottom: -1px;
3300433031
}
3300533032

3300633033
.tab-container.tabs-fill {
@@ -33037,7 +33064,7 @@ details.accordion:last-of-type {
3303733064
display: flex;
3303833065
justify-content: flex-start; /* Move tab items to left side */
3303933066
margin: 0.5rem; /* Override the behavior for standard ul and add equal padding */
33040-
border-bottom: 1px solid #e9ecef; /* Bottom border of tabs */
33067+
border-bottom: 2px solid #e9ecef; /* Bottom border of tabs */
3304133068
flex-grow: 1;
3304233069
list-style: none;
3304333070
padding-inline-start: 0;

‎next/dist/cirrus.min.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎next/src/components/tabs.scss

+39-33
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
white-space: nowrap;
1313
align-items: stretch;
1414
font-size: $font-size-m;
15-
15+
1616
/* Shift tabs to the left */
1717
&.tabs--left ul {
1818
justify-content: flex-start;
@@ -30,41 +30,47 @@
3030

3131
/* Depth tab styles */
3232
&.tabs-depth ul {
33-
box-shadow: 0 2px 3px transparentize($color: fill('gray', '600'), $amount: 0.85);
33+
box-shadow: 0 2px 3px transparentize($color: fill('gray', '600'), $amount: 0.15);
3434
border-bottom: 0;
35+
36+
li {
37+
a,
38+
.tab-item-content {
39+
margin-bottom: -1px; // Margin was too high for these styles
40+
}
41+
}
3542
}
3643

3744
/* Classic tab styles */
38-
&.tabs-classic {
39-
ul {
40-
border-bottom-color: fill('gray', '300');
41-
border-bottom-style: solid;
42-
border-bottom-width: 1px;
43-
border-radius: 3px 3px 0 0; /* Only round the top left and right corners */
44-
transition: all 0.3s;
45+
&.tabs-classic ul {
46+
border-bottom-color: fill('gray', '300');
47+
border-bottom-style: solid;
48+
border-bottom-width: 1px;
49+
border-radius: 3px 3px 0 0; /* Only round the top left and right corners */
50+
transition: all 0.3s;
51+
52+
li {
53+
&:not(.selected) a:hover,
54+
&:not(.selected) .tab-item-content:hover {
55+
background-color: fill('gray', '100');
56+
transition: all 0.3s;
57+
}
58+
59+
&.selected a,
60+
&.selected .tab-item-content {
61+
color: fill('primary');
62+
border-color: fill('gray', '300');
63+
border-bottom-color: transparent !important;
64+
}
4565

46-
li {
47-
&:not(.selected) a:hover,
48-
&:not(.selected) .tab-item-content:hover {
49-
background-color: fill('gray', '100');
50-
transition: all 0.3s;
51-
}
52-
53-
&.selected a,
54-
&.selected .tab-item-content {
55-
color: fill('primary');
56-
border-color: fill('gray', '300');
57-
border-bottom-color: transparent !important;
58-
}
59-
60-
a,
61-
.tab-item-content {
62-
border: 1px solid transparent;
63-
border-bottom-color: fill('gray', '300');
64-
border-radius: 3px 3px 0 0;
65-
cursor: pointer;
66-
transition: all 0.3s;
67-
}
66+
a,
67+
.tab-item-content {
68+
border: 1px solid transparent;
69+
border-bottom-color: fill('gray', '300');
70+
border-radius: 3px 3px 0 0;
71+
cursor: pointer;
72+
transition: all 0.3s;
73+
margin-bottom: -1px; // Margin was too high for these styles
6874
}
6975
}
7076
}
@@ -95,7 +101,7 @@
95101
display: flex;
96102
justify-content: flex-start; /* Move tab items to left side */
97103
margin: 0.5rem; /* Override the behavior for standard ul and add equal padding */
98-
border-bottom: 1px solid fill('gray', '200'); /* Bottom border of tabs */
104+
border-bottom: 2px solid fill('gray', '200'); /* Bottom border of tabs */
99105
flex-grow: 1;
100106
list-style: none;
101107
padding-inline-start: 0;
@@ -109,7 +115,7 @@
109115

110116
&:hover a,
111117
&:hover .tab-item-content {
112-
border-bottom-color: rgba(240, 61, 77, 0.6);
118+
border-bottom-color: transparentize($color: fill('primary'), $amount: 0.6);
113119
transition: all 0.3s;
114120
}
115121

0 commit comments

Comments
 (0)