tk-ligat.ru/skin/assets/sass/base/_mixin.scss

99 lines
1.6 KiB
SCSS
Raw Normal View History

2022-05-30 23:06:37 +05:00
// 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 ;
}
}
}