mirror of
https://github.com/picocss/pico.git
synced 2025-04-22 17:36:15 -04:00
74 lines
2.1 KiB
SCSS
74 lines
2.1 KiB
SCSS
@use "sass:color";
|
|
@use "sass:string";
|
|
|
|
// Display color as RGB
|
|
@function display-rgb($color) {
|
|
@return string.unquote(
|
|
"rgb(" + color.channel($color, "red", $space: rgb) + ", " +
|
|
color.channel($color, "green", $space: rgb) + ", " +
|
|
color.channel($color, "blue", $space: rgb) + ")"
|
|
);
|
|
}
|
|
|
|
// Generate a shadow layer
|
|
@function shadow-layer($elevation, $blur, $opacity, $color) {
|
|
@return #{($elevation * 0.5)} #{$elevation} #{$blur} #{rgba($color, $opacity)};
|
|
}
|
|
|
|
// Generate a shadow with 7 layers
|
|
@function shadow($color) {
|
|
$box-shadow-elevation: 1rem;
|
|
$box-shadow-blur-strength: 6rem;
|
|
$box-shadow-opacity: 0.06;
|
|
|
|
@return shadow-layer(
|
|
$box-shadow-elevation * 0.029,
|
|
$box-shadow-blur-strength * 0.029,
|
|
$box-shadow-opacity * 0.283,
|
|
$color
|
|
),
|
|
shadow-layer(
|
|
$box-shadow-elevation * 0.067,
|
|
$box-shadow-blur-strength * 0.067,
|
|
$box-shadow-opacity * 0.4,
|
|
$color
|
|
),
|
|
shadow-layer(
|
|
$box-shadow-elevation * 0.125,
|
|
$box-shadow-blur-strength * 0.125,
|
|
$box-shadow-opacity * 0.5,
|
|
$color
|
|
),
|
|
shadow-layer(
|
|
$box-shadow-elevation * 0.225,
|
|
$box-shadow-blur-strength * 0.225,
|
|
$box-shadow-opacity * 0.6,
|
|
$color
|
|
),
|
|
shadow-layer(
|
|
$box-shadow-elevation * 0.417,
|
|
$box-shadow-blur-strength * 0.417,
|
|
$box-shadow-opacity * 0.717,
|
|
$color
|
|
),
|
|
shadow-layer($box-shadow-elevation, $box-shadow-blur-strength, $box-shadow-opacity, $color),
|
|
0 0 0 0.0625rem #{rgba($color, ($box-shadow-opacity * 0.25))};
|
|
}
|
|
|
|
// tint-color, shade-color, and shift-color
|
|
// borrowed from Bootstrap 5.3.3
|
|
// MIT License github.com/twbs/bootstrap
|
|
// Tint a color: mix a color with white
|
|
@function tint-color($color, $weight) {
|
|
@return mix(white, $color, $weight);
|
|
}
|
|
|
|
// Shade a color: mix a color with black
|
|
@function shade-color($color, $weight) {
|
|
@return mix(black, $color, $weight);
|
|
}
|
|
|
|
// Shade the color if the weight is positive, else tint it
|
|
@function shift-color($color, $weight) {
|
|
@return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
|
|
}
|