99 lines
1.6 KiB
SCSS
99 lines
1.6 KiB
SCSS
|
// Absolute Position Center
|
||
|
@mixin absolute-center{
|
||
|
top: 50%;
|
||
|
left: 50%;
|
||
|
transform: translate(-50%, -50%);
|
||
|
width: 100%;
|
||
|
}
|
||
|
|
||
|
@mixin absolute-center-vertical{
|
||
|
top: 50%;
|
||
|
transform: translateY(-50%);
|
||
|
}
|
||
|
@mixin absolute-center-horizontal{
|
||
|
left: 50%;
|
||
|
transform: translateX(-50%);
|
||
|
}
|
||
|
|
||
|
// Background-cover Image
|
||
|
@mixin bg-cover{
|
||
|
background : {
|
||
|
color: $color-light-green;
|
||
|
size: cover;
|
||
|
position: center;
|
||
|
repeat: no-repeat;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
@mixin object-fit-img{
|
||
|
object-fit: cover;
|
||
|
width: 100%;
|
||
|
}
|
||
|
|
||
|
// Slider Navigation Vertical Center
|
||
|
@mixin arrow__nav{
|
||
|
position: absolute;
|
||
|
top: 50%;
|
||
|
transform: translateY(-50%);
|
||
|
}
|
||
|
|
||
|
// Slider Navigation Vertical Center
|
||
|
@mixin border-around{
|
||
|
border: 1px solid $color-white-3;
|
||
|
border-radius:3px;
|
||
|
}
|
||
|
|
||
|
@mixin box-shadow {
|
||
|
box-shadow: 0 2px 2px 0 rgba($color-black, .15);
|
||
|
}
|
||
|
|
||
|
@mixin breakpoint($point) {
|
||
|
|
||
|
// 576 to Upper
|
||
|
@if $point == xsmall {
|
||
|
@media (min-width: 360px) {
|
||
|
@content ;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// 576 to Upper
|
||
|
@if $point == small {
|
||
|
@media (min-width: 576px) {
|
||
|
@content ;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// 768 to Upper
|
||
|
@if $point == medium {
|
||
|
@media (min-width: 768px) {
|
||
|
@content ;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// 998 to Upper
|
||
|
@if $point == large {
|
||
|
@media (min-width: 992px) {
|
||
|
@content ;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// 1200 to Upper
|
||
|
@if $point == xlarge {
|
||
|
@media (min-width: 1200px) {
|
||
|
@content ;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// 1367 to Upper
|
||
|
@if $point == xxlarge {
|
||
|
@media (min-width: 1566px) {
|
||
|
@content ;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
}
|
||
|
|