abdullahtarawneh.com/assets/scss/base/mixins.scss
a 2247ee2776 June 2024 redesign (#1)
still missing some things but they were missing before anyway. so it's probably better to just push and deploy already.

Reviewed-on: #1
2024-06-03 23:22:36 +00:00

50 lines
1.1 KiB
SCSS

@mixin box-shadow {
box-shadow: 0 1px 1px rgba(0,35,54,0.11),
0 2px 2px rgba(0,35,54,0.11),
0 4px 4px rgba(0,35,54,0.11),
0 6px 8px rgba(0,35,54,0.11),
0 8px 16px rgba(0,35,54,0.11);
}
@mixin box-shadow-top {
box-shadow: 0 -1px 1px rgba(0,35,54,0.11),
0 -2px 2px rgba(0,35,54,0.11),
0 -4px 4px rgba(0,35,54,0.11),
0 -6px 8px rgba(0,35,54,0.11),
0 -8px 16px rgba(0,35,54,0.11);
}
@mixin box-shadow-heavy {
box-shadow: 0 2px 1px rgba(0,35,54,0.09),
0 4px 2px rgba(0,35,54,0.09),
0 8px 4px rgba(0,35,54,0.09),
0 16px 8px rgba(0,35,54,0.09),
0 32px 16px rgba(0,35,54,0.09);
}
@mixin focus-outline {
outline: solid;
outline-color: var(--primary-accent);
outline-offset: 4px;
}
@function css-function( $function, $values... ) {
@return
$function
+ unquote( '(' )
+ $values
+ unquote( ')' )
;
}
@function css-min( $values... ) {
@return css-function( min, $values );
}
@function css-max( $values... ) {
@return css-function( max, $values );
}
@function css-clamp( $values... ) {
@return css-function( clamp, $values );
}