danog/sass-site
1
0
Fork 0
mirror of https://github.com/danog/sass-site.git synced 2024-11-26 20:14:53 +01:00
Code Issues Packages Projects Releases Wiki Activity

tab button styles

Browse Source
This commit is contained in:
Stacy Kvernmo 2023-06-14 15:30:19 -05:00
parent a35f0ecbd5
commit eae7ba867c
3 changed files with 11 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
source/assets/sass/components/_buttons.scss
View File

@ -10,6 +10,7 @@
color: var(--color-button-text, var(--sl-color--highlight));
cursor: pointer;
display: var(--display-button, inline-flex);
font-weight: var(--font-weight-button);
justify-content: center;
margin: 0;
padding: var(--sl-gutter--minus) var(--sl-gutter);
@ -45,18 +46,16 @@
}
&--tab {
--color-button-background: var(
--color-tab-background,
--sl-color--code-background
);
--color-button-text: var(--text, var(--sl-color--pale-sky));
--color-button-background: var(--color-tab-background, var(--sl-color--code-background-darker));
--color-button-text: var(--color-button-tab-active, var(--sl-color--highlight));
--font-weight-button: #{typography.$sl-font-weight--bold};
--radius-button: 0;
box-shadow: none;
font-weight: typography.$sl-font-weight--bold;
&:hover {
--color-button-background: var(--sl-color--tab-action);
background: var(--color-tab-background-hover, transparent);
--color-button-text: var(--color-tab-hover, var(--sl-color--midnight-blue));
}
&:focus {

6
source/assets/sass/components/_playground.scss
View File

@ -191,8 +191,9 @@
@each $option in $sassoptions {
&[data-active='#{$option}'] [data-value='#{$option}'] {
--color-button-tab-active: var(--text, var(--sl-color--pale-sky));
--color-tab-background: var(--sl-color--white);
--color-button-text: var(--text, var(--sl-color--pale-sky));
--color-tab-background-hover: var(--sl-color--white);
}
}
@ -200,8 +201,9 @@
@each $option in $cssoptions {
&[data-active='#{$option}'] [data-value='#{$option}'] {
--color-button-tab-active: var(--text, var(--sl-color--pale-sky));
--color-tab-background: var(--sl-color--code-background);
--color-button-text: var(--text, var(--sl-color--pale-sky));
--color-tab-background-hover: var(--sl-color--code-background);
}
}
}

1
source/assets/sass/config/color/_content.scss
View File

@ -7,7 +7,6 @@ $sl-color--shadow: rgba(brand.$sl-color--midnight-blue, 0.125);
$sl-color--active: color.adjust(brand.$sl-color--venus, $lightness: -10%);
$sl-color--code-background: #f8f8f8;
$sl-color--code-background-darker: #ebebeb;
$sl-color--tab-action: #dbdbdb;
$sl-color--code-text: color.adjust(brand.$sl-color--pale-sky, $lightness: -25%);
$sl-color--link-action: rgba(218, 219, 223, 25%);
$sl-color--code-warm: #cf1666;