spaCy/website/assets/css/_mixins.sass

75 lines
2.5 KiB
Sass
Raw Normal View History

2016-10-03 21:19:13 +03:00
//- ----------------------------------
//- 💫 MIXINS
//- ----------------------------------
2016-03-31 17:24:48 +03: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 21:19:13 +03:00
height: $height
2016-03-31 17:24:48 +03:00
2016-10-03 21:19:13 +03:00
//- Responsive Breakpoint utility
2016-03-31 17:24:48 +03:00
2016-10-03 21:19:13 +03: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 17:24:48 +03:00
2016-10-03 21:19:13 +03:00
@if $limit == "min"
@media(min-width: #{map-get($breakpoints, $size)})
@content
2016-03-31 17:24:48 +03:00
2016-10-03 21:19:13 +03:00
@else if $limit == "max"
@media(max-width: #{map-get($breakpoints-max, $size)})
@content
2016-03-31 17:24:48 +03:00
// Triangle pointing down
// $triangle-size - width of the triangle
@mixin triangle-down($triangle-size)
@include size(0)
border-color: transparent
border-style: solid
border-top-color: inherit
border-width: $triangle-size $triangle-size 0 $triangle-size
2016-10-03 21:19:13 +03:00
content: ""
2016-03-31 17:24:48 +03: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
@mixin scroll-shadow-base($scroll-shadow-color)
background: radial-gradient(left, ellipse, rgba(0,0,0, .2) 0%, rgba(0,0,0, 0) 75%) 0 center, radial-gradient(right, ellipse, rgba(0,0,0, .2) 0%, rgba(0,0,0, 0) 75%) 100% center
background-attachment: scroll, scroll
background-repeat: no-repeat
2016-10-03 21:19:13 +03:00
background-size: 10px 100%, 10px 100%
2016-03-31 17:24:48 +03: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%