mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-25 02:36:15 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Build CSS

Browse source
This commit is contained in:
github-actions[bot] 2024-12-31 05:18:39 +00:00
parent ddf41a191a
commit 951aae3801
77 changed files with 7702 additions and 7702 deletions
Download patch file Download diff file Expand all files Collapse all files

8
scss/helpers/_copyright.scss
View file

@ -1,4 +1,4 @@
/*!
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
* Copyright 2019-2024 - Licensed under MIT
*/
/*!
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
* Copyright 2019-2024 - Licensed under MIT
*/

148
scss/helpers/_functions.scss
View file

@ -1,74 +1,74 @@
@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));
}
@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));
}