Skip to content

Commit

Permalink
🐛 fix(tabs.scss): Fix broken tab styles, remove remaining hardcoded c…
Browse files Browse the repository at this point in the history 
…olors #330
  • Loading branch information
@Spiderpig86
Spiderpig86 committed Jan 12, 2025
1 parent 391ba0f commit bfa64c6
Show file tree
Hide file tree
Showing 4 changed files with 123 additions and 69 deletions.
81 changes: 51 additions & 30 deletions next/dist/cirrus-core.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,6 +108,57 @@
* }
* }
*/
/*
Main utility for generating utility classes with different viewports, delimiters, base class names, etc.
Example: .sm\:hover\:u-text-blue:hover { ... }

@class-prefix {string} [config.$utility-prefix] - prefix used for generated classes. This is the first section of the class name. Can be empty.
@delimiter {string} [config.$delimiter] - delimiter used in class name body but not for separating psuedos. Can be empty.
@base-class-name {string} - the root of the class name. For the utility class above, 'blue' is the base class name
@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
@variants {string[]} [()] - list of strings specifying which variants to generate styles for. Possible values:
- 'responsive',
- 'dark', 'light',
- 'reduce-motion',
- 'first-of-type',
- 'last-of-type',
- 'portrait', 'landscape',
- 'hover', 'group-hover',
- 'focus', 'group-focus', 'focus-visible', 'focus-within',
- 'active',
- 'visited',
- 'checked',
- 'disabled'

@variant-delimiter {string} [config.$variant-delimiter] - delimiter used to separate the variant portion of the class. Can be empty but not advisable.
@override {string} [config.$override] - override for CSS properties, like '!important'
*/
/**
* Convert a string to a proper class selector.
* @param: {String} $selector
* @return: {Selector} Returns the class selector.
*/
/*
Utility to use when generating classes with your own series of SCSS rules. This is typically used with the inline-class-generator mixin.

@delimiter {string} [config.$delimiter] - delimiter used in class name body but not for separating psuedos. Can be empty.
@variants {string[]} [()] - list of strings specifying which variants to generate styles for. Possible values:
- 'responsive',
- 'dark', 'light',
- 'reduce-motion',
- 'first-of-type',
- 'last-of-type',
- 'portrait', 'landscape',
- 'hover', 'group-hover',
- 'focus', 'group-focus', 'focus-visible', 'focus-within',
- 'active',
- 'visited',
- 'checked',
- 'disabled'

@variant-delimiter {string} [config.$variant-delimiter] - delimiter used to separate the variant portion of the class. Can be empty but not advisable.
@override {string} [config.$override] - override for CSS properties, like '!important'
*/
/* BASE STYLING + RESET FOR CIRRUS */
:root {
/* v1 Colors */
Expand Down Expand Up @@ -465,36 +516,6 @@ fieldset legend {
animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/*
Main utility for generating utility classes with different viewports, delimiters, base class names, etc.
Example: .sm\:hover\:u-text-blue:hover { ... }

@class-prefix {string} [cofig.$utility-prefix] - prefix used for generated classes. This is the first section of the class name
@delimiter {string} [config.$delimiter] - delimiter used in class name body but not for separating psuedos
@base-class-name {string} - the root of the class name. For the utility class above, 'blue' is the base class name
@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
@variants {string[]} [()] - list of strings specifying which variants to generate styles for. Possible values:
- 'responsive',
- 'dark', 'light',
- 'reduce-motion',
- 'first-of-type',
- 'last-of-type',
- 'portrait', 'landscape',
- 'hover', 'group-hover',
- 'focus', 'group-focus', 'focus-visible', 'focus-within',
- 'active',
- 'visited',
- 'checked',
- 'disabled'

@variant-delimiter {string} [config.$variant-delimiter] - delimiter used to separate the variant portion of the class
@override {string} [config.$override] - override for CSS properties, like '!important'
*/
/**
* Convert a string to a proper class selector.
* @param: {String} $selector
* @return: {Selector} Returns the class selector.
*/
/* FONT */
/* Constants */
/* Headers */
Expand Down
37 changes: 32 additions & 5 deletions next/dist/cirrus.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,8 +113,8 @@
Main utility for generating utility classes with different viewports, delimiters, base class names, etc.
Example: .sm\:hover\:u-text-blue:hover { ... }

@class-prefix {string} [cofig.$utility-prefix] - prefix used for generated classes. This is the first section of the class name
@delimiter {string} [config.$delimiter] - delimiter used in class name body but not for separating psuedos
@class-prefix {string} [config.$utility-prefix] - prefix used for generated classes. This is the first section of the class name. Can be empty.
@delimiter {string} [config.$delimiter] - delimiter used in class name body but not for separating psuedos. Can be empty.
@base-class-name {string} - the root of the class name. For the utility class above, 'blue' is the base class name
@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
@variants {string[]} [()] - list of strings specifying which variants to generate styles for. Possible values:
Expand All @@ -131,14 +131,35 @@
- 'checked',
- 'disabled'

@variant-delimiter {string} [config.$variant-delimiter] - delimiter used to separate the variant portion of the class
@variant-delimiter {string} [config.$variant-delimiter] - delimiter used to separate the variant portion of the class. Can be empty but not advisable.
@override {string} [config.$override] - override for CSS properties, like '!important'
*/
/**
* Convert a string to a proper class selector.
* @param: {String} $selector
* @return: {Selector} Returns the class selector.
*/
/*
Utility to use when generating classes with your own series of SCSS rules. This is typically used with the inline-class-generator mixin.

@delimiter {string} [config.$delimiter] - delimiter used in class name body but not for separating psuedos. Can be empty.
@variants {string[]} [()] - list of strings specifying which variants to generate styles for. Possible values:
- 'responsive',
- 'dark', 'light',
- 'reduce-motion',
- 'first-of-type',
- 'last-of-type',
- 'portrait', 'landscape',
- 'hover', 'group-hover',
- 'focus', 'group-focus', 'focus-visible', 'focus-within',
- 'active',
- 'visited',
- 'checked',
- 'disabled'

@variant-delimiter {string} [config.$variant-delimiter] - delimiter used to separate the variant portion of the class. Can be empty but not advisable.
@override {string} [config.$override] - override for CSS properties, like '!important'
*/
/* BASE STYLING + RESET FOR CIRRUS */
:root {
/* v1 Colors */
Expand Down Expand Up @@ -32971,10 +32992,15 @@ details.accordion:last-of-type {
}

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

.tab-container.tabs-depth ul li a,
.tab-container.tabs-depth ul li .tab-item-content {
margin-bottom: -1px;
}

.tab-container.tabs-classic ul {
border-bottom-color: #dee2e6;
border-bottom-style: solid;
Expand All @@ -33001,6 +33027,7 @@ details.accordion:last-of-type {
border-radius: 3px 3px 0 0;
cursor: pointer;
transition: all 0.3s;
margin-bottom: -1px;
}

.tab-container.tabs-fill {
Expand Down Expand Up @@ -33037,7 +33064,7 @@ details.accordion:last-of-type {
display: flex;
justify-content: flex-start; /* Move tab items to left side */
margin: 0.5rem; /* Override the behavior for standard ul and add equal padding */
border-bottom: 1px solid #e9ecef; /* Bottom border of tabs */
border-bottom: 2px solid #e9ecef; /* Bottom border of tabs */
flex-grow: 1;
list-style: none;
padding-inline-start: 0;
Expand Down
2 changes: 1 addition & 1 deletion next/dist/cirrus.min.css
View file

Large diffs are not rendered by default.

72 changes: 39 additions & 33 deletions next/src/components/tabs.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
white-space: nowrap;
align-items: stretch;
font-size: $font-size-m;

/* Shift tabs to the left */
&.tabs--left ul {
justify-content: flex-start;
Expand All @@ -30,41 +30,47 @@

/* Depth tab styles */
&.tabs-depth ul {
box-shadow: 0 2px 3px transparentize($color: fill('gray', '600'), $amount: 0.85);
box-shadow: 0 2px 3px transparentize($color: fill('gray', '600'), $amount: 0.15);
border-bottom: 0;

li {
a,
.tab-item-content {
margin-bottom: -1px; // Margin was too high for these styles
}
}
}

/* Classic tab styles */
&.tabs-classic {
ul {
border-bottom-color: fill('gray', '300');
border-bottom-style: solid;
border-bottom-width: 1px;
border-radius: 3px 3px 0 0; /* Only round the top left and right corners */
transition: all 0.3s;
&.tabs-classic ul {
border-bottom-color: fill('gray', '300');
border-bottom-style: solid;
border-bottom-width: 1px;
border-radius: 3px 3px 0 0; /* Only round the top left and right corners */
transition: all 0.3s;

li {
&:not(.selected) a:hover,
&:not(.selected) .tab-item-content:hover {
background-color: fill('gray', '100');
transition: all 0.3s;
}

&.selected a,
&.selected .tab-item-content {
color: fill('primary');
border-color: fill('gray', '300');
border-bottom-color: transparent !important;
}

li {
&:not(.selected) a:hover,
&:not(.selected) .tab-item-content:hover {
background-color: fill('gray', '100');
transition: all 0.3s;
}

&.selected a,
&.selected .tab-item-content {
color: fill('primary');
border-color: fill('gray', '300');
border-bottom-color: transparent !important;
}

a,
.tab-item-content {
border: 1px solid transparent;
border-bottom-color: fill('gray', '300');
border-radius: 3px 3px 0 0;
cursor: pointer;
transition: all 0.3s;
}
a,
.tab-item-content {
border: 1px solid transparent;
border-bottom-color: fill('gray', '300');
border-radius: 3px 3px 0 0;
cursor: pointer;
transition: all 0.3s;
margin-bottom: -1px; // Margin was too high for these styles
}
}
}
Expand Down Expand Up @@ -95,7 +101,7 @@
display: flex;
justify-content: flex-start; /* Move tab items to left side */
margin: 0.5rem; /* Override the behavior for standard ul and add equal padding */
border-bottom: 1px solid fill('gray', '200'); /* Bottom border of tabs */
border-bottom: 2px solid fill('gray', '200'); /* Bottom border of tabs */
flex-grow: 1;
list-style: none;
padding-inline-start: 0;
Expand All @@ -109,7 +115,7 @@

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

Expand Down

0 comments on commit bfa64c6

Please sign in to comment.