2016-10-31 18:04:15 +00:00
|
|
|
//- 💫 CSS > MIXINS
|
2016-03-31 14:24:48 +00:00
|
|
|
|
|
|
|
|
// Helper for position
|
|
|
|
|
// $position - valid position value (static, absolute, fixed, relative)
|
|
|
|
|
// $pos-y - position direction Y (top, bottom)
|
|
|
|
|
// $pos-x - position direction X (left, right)
|
|
|
|
|
// $pos-y-value - value of position Y direction
|
|
|
|
|
// $pos-x-value - value of position X direction
|
|
|
|
|
|
|
|
|
|
@mixin position($position, $pos-y, $pos-x, $pos-y-value, $pos-x-value)
|
|
|
|
|
position: $position
|
|
|
|
|
#{$pos-y}: $pos-y-value
|
|
|
|
|
#{$pos-x}: $pos-x-value
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Helper for width and height
|
|
|
|
|
// $width - width of element
|
|
|
|
|
// $height - height of element (default: $width)
|
|
|
|
|
|
|
|
|
|
@mixin size($width, $height: $width)
|
|
|
|
|
width: $width
|
2016-10-03 18:19:13 +00:00
|
|
|
height: $height
|
2016-03-31 14:24:48 +00:00
|
|
|
|
|
|
|
|
|
2016-10-03 18:19:13 +00:00
|
|
|
//- Responsive Breakpoint utility
|
2016-03-31 14:24:48 +00:00
|
|
|
|
2016-10-03 18:19:13 +00:00
|
|
|
@mixin breakpoint($limit, $size)
|
|
|
|
|
$breakpoints-max: ( xs: map-get($breakpoints, sm) - 1, sm: map-get($breakpoints, md) - 1, md: map-get($breakpoints, lg) - 1 )
|
2016-03-31 14:24:48 +00:00
|
|
|
|
2016-10-03 18:19:13 +00:00
|
|
|
@if $limit == "min"
|
|
|
|
|
@media(min-width: #{map-get($breakpoints, $size)})
|
|
|
|
|
@content
|
2016-03-31 14:24:48 +00:00
|
|
|
|
2016-10-03 18:19:13 +00:00
|
|
|
@else if $limit == "max"
|
|
|
|
|
@media(max-width: #{map-get($breakpoints-max, $size)})
|
|
|
|
|
@content
|
2016-03-31 14:24:48 +00:00
|
|
|
|
|
|
|
|
|
|
|
|
|
// Scroll shadows for reponsive tables
|
|
|
|
|
// adapted from David Bushell, http://codepen.io/dbushell/pen/wGaamR
|
|
|
|
|
// $scroll-shadow-color - color of shadow
|
|
|
|
|
// $scroll-shadow-side - side to cover shadow (left or right)
|
|
|
|
|
// $scroll-shadow-background - original background color to match
|
|
|
|
|
|
2017-10-03 12:14:52 +00:00
|
|
|
@mixin scroll-shadow-base($scroll-shadow-color, $scroll-shadow-intensity: 0.2)
|
|
|
|
|
background: radial-gradient(ellipse at 0 50%, rgba($scroll-shadow-color, $scroll-shadow-intensity) 0%, rgba(0,0,0,0) 75%) 0 center, radial-gradient(ellipse at 100% 50%, rgba($scroll-shadow-color, $scroll-shadow-intensity) 0%, transparent 75%) 100% center
|
2016-03-31 14:24:48 +00:00
|
|
|
background-attachment: scroll, scroll
|
|
|
|
|
background-repeat: no-repeat
|
2016-10-03 18:19:13 +00:00
|
|
|
background-size: 10px 100%, 10px 100%
|
2016-03-31 14:24:48 +00:00
|
|
|
|
|
|
|
|
@mixin scroll-shadow-cover($scroll-shadow-side, $scroll-shadow-background)
|
|
|
|
|
$scroll-gradient-direction: right !default
|
|
|
|
|
|
|
|
|
|
@if $scroll-shadow-side == right
|
|
|
|
|
$scroll-gradient-direction: left
|
|
|
|
|
background-position: 100% 0
|
|
|
|
|
|
|
|
|
|
background-image: linear-gradient(to #{$scroll-gradient-direction}, rgba($scroll-shadow-background, 1) 50%, rgba($scroll-shadow-background, 0) 100%)
|
|
|
|
|
background-repeat: no-repeat
|
|
|
|
|
background-size: 20px 100%
|
2017-10-03 12:14:52 +00:00
|
|
|
|
|
|
|
|
|
|
|
|
|
// Full vertical scroll shadows
|
|
|
|
|
// adapted from: https://codepen.io/laustdeleuran/pen/DBaAu
|
|
|
|
|
|
|
|
|
|
@mixin scroll-shadow($background-color, $shadow-color, $shadow-offset: 0, $shadow-intensity: 0.4, $cover-size: 40px, $shadow-size: 15px)
|
|
|
|
|
background: linear-gradient($background-color 30%, rgba($background-color,0)) 0 $shadow-offset, linear-gradient(rgba($background-color,0), $background-color 70%) 0 100%, radial-gradient(50% 0, farthest-side, rgba($shadow-color,$shadow-intensity), rgba($shadow-color,0)) 0 $shadow-offset, radial-gradient(50% 100%,farthest-side, rgba($shadow-color,$shadow-intensity), rgba($shadow-color,0)) 0 100%
|
|
|
|
|
|
|
|
|
|
background: linear-gradient($background-color 30%, rgba($background-color,0)) 0 $shadow-offset, linear-gradient(rgba($background-color,0), $background-color 70%) 0 100%, radial-gradient(farthest-side at 50% 0, rgba($shadow-color,$shadow-intensity), rgba($shadow-color,0)) -20px $shadow-offset, radial-gradient(farthest-side at 50% 100%, rgba($shadow-color, $shadow-intensity), rgba($shadow-color,0)) 0 100%
|
|
|
|
|
background-repeat: no-repeat
|
|
|
|
|
background-color: $background-color
|
|
|
|
|
background-size: 100% $cover-size, 100% $cover-size, 100% $shadow-size, 100% $shadow-size
|
|
|
|
|
background-attachment: local, local, scroll, scroll
|
