mirror of
https://github.com/explosion/spaCy.git
synced 2025-01-10 17:26:42 +03:00
58 lines
2.7 KiB
Sass
58 lines
2.7 KiB
Sass
|
/* Mixins */
|
||
|
|
||
|
//- Responsive Breakpoint utility
|
||
|
|
||
|
$breakpoints: ( sm: 768px, md: 992px, lg: 1200px )
|
||
|
|
||
|
@mixin breakpoint($limit, $size)
|
||
|
$breakpoints-max: ( xs: map-get($breakpoints, sm) - 1, sm: map-get($breakpoints, md) - 1, md: map-get($breakpoints, lg) - 1 )
|
||
|
|
||
|
@if $limit == "min"
|
||
|
@media(min-width: #{map-get($breakpoints, $size)})
|
||
|
@content
|
||
|
|
||
|
@else if $limit == "max"
|
||
|
@media(max-width: #{map-get($breakpoints-max, $size)})
|
||
|
@content
|
||
|
|
||
|
// 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
|
||
|
|
||
|
@function scroll-shadow-gradient($scroll-gradient-direction, $scroll-shadow-background)
|
||
|
@return linear-gradient(to #{$scroll-gradient-direction}, $scroll-shadow-background 50%, rgba(255, 255, 255, 0) 100%)
|
||
|
|
||
|
@mixin scroll-shadow-base($scroll-shadow-color)
|
||
|
background: radial-gradient(ellipse at 0 50%, $scroll-shadow-color 0%, rgba(0,0,0,0) 75%) 0 center, radial-gradient(ellipse at 100% 50%, $scroll-shadow-color 0%, transparent 75%) 100% center
|
||
|
background-attachment: scroll, scroll
|
||
|
background-repeat: no-repeat
|
||
|
background-size: 10px 100%, 10px 100%
|
||
|
|
||
|
@mixin scroll-shadow-cover($scroll-shadow-side, $scroll-shadow-background)
|
||
|
$scroll-gradient-direction: right !default
|
||
|
background-repeat: no-repeat
|
||
|
|
||
|
@if $scroll-shadow-side == right
|
||
|
$scroll-gradient-direction: left
|
||
|
background-position: 100% 0
|
||
|
|
||
|
@if $scroll-shadow-side == both
|
||
|
background-image: scroll-shadow-gradient(left, $scroll-shadow-background), scroll-shadow-gradient(right, $scroll-shadow-background)
|
||
|
background-position: 100% 0, 0 0
|
||
|
background-size: 20px 100%, 20px 100%
|
||
|
@else
|
||
|
background-image: scroll-shadow-gradient($scroll-gradient-direction, $scroll-shadow-background)
|
||
|
background-size: 20px 100%
|
||
|
|
||
|
// Full vertical scroll shadows
|
||
|
// adapted from: https://codepen.io/laustdeleuran/pen/DBaAu
|
||
|
|
||
|
@mixin scroll-shadow($background-color, $shadow-color, $shadow-offset: 0, $cover-size: 40px, $shadow-size: 15px)
|
||
|
background: linear-gradient($background-color 30%, rgba(255, 255, 255,0)) 0 $shadow-offset, linear-gradient(rgba(255,255,255,0), $background-color 70%) 0 100%, radial-gradient(farthest-side at 50% 0, $shadow-color, rgba(255,255,255,0)) -20px $shadow-offset, radial-gradient(farthest-side at 50% 100%, $shadow-color, rgba(255,255,255,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
|