166 lines
4.0 KiB
Sass
166 lines
4.0 KiB
Sass
// GLOBAL MIXINS
|
|
=overlay($bg-colour, $opacity)
|
|
z-index: 1
|
|
position: relative
|
|
&::before
|
|
position: absolute
|
|
content: ""
|
|
width: 100%
|
|
height: 100%
|
|
z-index: -1
|
|
top: 0
|
|
left: 0
|
|
opacity: $opacity
|
|
background-color: $bg-colour
|
|
|
|
|
|
// Column Gap
|
|
=colgap($gap)
|
|
margin-left: -$gap / 2
|
|
margin-right: -$gap / 2
|
|
& > div
|
|
padding-left: $gap / 2
|
|
padding-right: $gap / 2
|
|
|
|
|
|
// Make Own Container
|
|
=container($width)
|
|
max-width: $width
|
|
margin-left: auto
|
|
margin-right: auto
|
|
|
|
|
|
// Flex Center
|
|
=flexcenter($justify)
|
|
display: flex
|
|
align-items: center
|
|
justify-content: $justify
|
|
|
|
// Absolute Middle
|
|
=absmiddle()
|
|
position: absolute
|
|
left: 50%
|
|
top: 50%
|
|
transform: translate(-50%, -50%)
|
|
|
|
// Positioning
|
|
=poLT($left, $top: $left)
|
|
position: absolute
|
|
left: $left
|
|
top: $top
|
|
=poLB($left, $bottom: $left)
|
|
position: absolute
|
|
left: $left
|
|
bottom: $bottom
|
|
=poRT($right, $top: $right)
|
|
position: absolute
|
|
right: $right
|
|
top: $top
|
|
=poRB($right, $bottom: $right)
|
|
position: absolute
|
|
right: $right
|
|
bottom: $bottom
|
|
|
|
// Mixing for Size
|
|
=size($width, $height: $width)
|
|
width: $width
|
|
height: $height
|
|
|
|
|
|
// Mixing for Box
|
|
=box($bg, $width, $height: $width)
|
|
width: $width
|
|
height: $height
|
|
background: $bg
|
|
|
|
// Mixing for Circle
|
|
=circle($bg, $size)
|
|
width: $size
|
|
height: $size
|
|
background: $bg
|
|
line-height: $size
|
|
border-radius: 50%
|
|
text-align: center
|
|
|
|
// Mixing for color & background color % border color
|
|
=color($color, $bg, $bdr-color: $color)
|
|
color: $color
|
|
background: $bg
|
|
border-color: $bdr-color
|
|
|
|
// Mixing for clearfix
|
|
=clearfix()
|
|
&:after
|
|
display: block
|
|
clear: both
|
|
content: ""
|
|
|
|
// Gap Left and Right
|
|
=gapLR($property, $value)
|
|
#{$property}-left: $value
|
|
#{$property}-right: $value
|
|
|
|
// Gap Top and Bottom
|
|
=gapTB($property, $value)
|
|
#{$property}-top: $value
|
|
#{$property}-bottom: $value
|
|
|
|
|
|
// Respond above.
|
|
@mixin res-ab($breakpoint)
|
|
// If the breakpoint exists in the map.
|
|
@if map-has-key($breakpoints, $breakpoint)
|
|
// Get the breakpoint value.
|
|
$breakpoint-value: map-get($breakpoints, $breakpoint)
|
|
|
|
// Write the media query.
|
|
@media only screen and (min-width: $breakpoint-value)
|
|
@content
|
|
|
|
// If the breakpoint doesn't exist in the map.
|
|
@else
|
|
// Log a warning.
|
|
@warn 'Invalid breakpoint: #{$breakpoint}.'
|
|
|
|
|
|
// Respond Below
|
|
@mixin res-bl($breakpoint)
|
|
// If the breakpoint exists in the map.
|
|
@if map-has-key($breakpoints, $breakpoint)
|
|
// Get the breakpoint value.
|
|
$breakpoint-value: map-get($breakpoints, $breakpoint)
|
|
|
|
// Write the media query.
|
|
@media only screen and (max-width: ($breakpoint-value - 1))
|
|
@content
|
|
|
|
// If the breakpoint doesn't exist in the map.
|
|
@else
|
|
// Log a warning.
|
|
@warn 'Invalid breakpoint: #{$breakpoint}.'
|
|
|
|
// Respond Between
|
|
@mixin res-bt($lower, $upper)
|
|
// If both the lower and upper breakpoints exist in the map.
|
|
@if map-has-key($breakpoints, $lower) and map-has-key($breakpoints, $upper)
|
|
// Get the lower and upper breakpoints.
|
|
$lower-breakpoint: map-get($breakpoints, $lower)
|
|
$upper-breakpoint: map-get($breakpoints, $upper)
|
|
|
|
// Write the media query.
|
|
@media only screen and (min-width: $lower-breakpoint) and (max-width: ($upper-breakpoint - 1))
|
|
@content
|
|
|
|
// If one or both of the breakpoints don't exist.
|
|
@else
|
|
// If lower breakpoint is invalid.
|
|
@if (map-has-key($breakpoints, $lower) ==false)
|
|
// Log a warning.
|
|
@warn 'Your lower breakpoint was invalid: #{$lower}.'
|
|
|
|
// If upper breakpoint is invalid.
|
|
@if (map-has-key($breakpoints, $upper) ==false)
|
|
// Log a warning.
|
|
@warn 'Your upper breakpoint was invalid: #{$upper}.'
|
|
|