steve/just-the-docs
1
0
Fork 0
mirror of https://github.com/snachodog/just-the-docs.git synced 2025-09-13 05:13:33 -06:00
Code Issues Packages Projects Releases Wiki Activity

Replace sass lighten() and darken() with color.adjust()

Browse Source
This commit is contained in:
Matt Wang
2024-10-09 01:02:50 -07:00
parent a0724c4370
commit ef215b6586
4 changed files with 21 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
_sass/support/mixins/_buttons.scss
View File

@@ -1,9 +1,11 @@
// Colored button
@use "sass:color";
@mixin btn-color($fg, $bg) {
color: $fg;
background-color: darken($bg, 2%);
background-image: linear-gradient(lighten($bg, 5%), darken($bg, 2%));
background-color: color.adjust($bg, $lightness: -2%);
background-image: linear-gradient(color.adjust($bg, $lightness: 5%), color.adjust($bg, $lightness: -2%));
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.25),
0 4px 10px rgba(0, 0, 0, 0.12);
@@ -11,19 +13,19 @@
&:hover,
&.zeroclipboard-is-hover {
color: $fg;
background-color: darken($bg, 4%);
background-image: linear-gradient((lighten($bg, 2%), darken($bg, 4%)));
background-color: color.adjust($bg, $lightness: -4%);
background-image: linear-gradient((color.adjust($bg, $lightness: 2%), color.adjust($bg, $lightness: -4%)));
}
&:active,
&.selected,
&.zeroclipboard-is-active {
background-color: darken($bg, 5%);
background-color: color.adjust($bg, $lightness: -5%);
background-image: none;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}
&.selected:hover {
background-color: darken($bg, 10%);
background-color: color.adjust($bg, $lightness: -10%);
}
}