150 lines
2.7 KiB
SCSS
150 lines
2.7 KiB
SCSS
@mixin transform($property) {
|
|
-webkit-transform: $property;
|
|
-ms-transform: $property;
|
|
transform: $property;
|
|
}
|
|
|
|
@mixin border-radius($property) {
|
|
border-radius: $property;
|
|
-webkit-border-radius: $property;
|
|
-moz-border-radius: $property;
|
|
-ms-border-radius: $property;
|
|
-o-border-radius: $property;
|
|
}
|
|
|
|
@mixin transition($property) {
|
|
-webkit-transition: $property;
|
|
-o-transition: $property;
|
|
transition: $property;
|
|
}
|
|
|
|
// @mixin flexWidth($property) {
|
|
// flex: 0 0 $property;
|
|
// -ms-flex: 0 0 $property;
|
|
// max-width: $property;
|
|
// }
|
|
|
|
// @mixin d-flex {
|
|
// display: -ms-flexbox;
|
|
// display: flex;
|
|
// -ms-flex-wrap: wrap;
|
|
// flex-wrap: wrap;
|
|
// }
|
|
|
|
// @mixin position {
|
|
// position: absolute;
|
|
// top: 0;
|
|
// left: 0;
|
|
// width: 100%;
|
|
// height: 100%;
|
|
// }
|
|
|
|
// @mixin positionTwo {
|
|
// position: absolute;
|
|
// content: '';
|
|
// top: 0;
|
|
// left: 0;
|
|
// width: 100%;
|
|
// height: 100%;
|
|
// }
|
|
|
|
// @mixin animation($property) {
|
|
// animation: $property;
|
|
// -webkit-animation: $property;
|
|
// -moz-animation: $property;
|
|
// }
|
|
|
|
// @mixin font($size, $weight, $transform) {
|
|
// font-size: $size;
|
|
// font-weight: $weight;
|
|
// text-transform: $transform;
|
|
// }
|
|
|
|
@mixin text-line-1 {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 1;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
@mixin text-line-2 {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
@mixin text-line-3 {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 3;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
// media query mixin
|
|
@mixin media($size) {
|
|
@if $size == xs {
|
|
@media (max-width: 575px) {
|
|
@content;
|
|
}
|
|
} @else if $size == sm {
|
|
@media (min-width: 576px) {
|
|
@content;
|
|
}
|
|
} @else if $size == md {
|
|
@media (min-width: 768px) {
|
|
@content;
|
|
}
|
|
} @else if $size == lg {
|
|
@media (min-width: 992px) {
|
|
@content;
|
|
}
|
|
} @else if $size == xl {
|
|
@media (min-width: 1200px) {
|
|
@content;
|
|
}
|
|
}@else if $size == xxl {
|
|
@media (min-width: 1400px) {
|
|
@content;
|
|
}
|
|
}@else if $size == 3xl {
|
|
@media (min-width: 1650px) {
|
|
@content;
|
|
}
|
|
}
|
|
}
|
|
|
|
// keyframes mixin
|
|
@mixin keyframes($name) {
|
|
@-webkit-keyframes #{$name} {
|
|
@content;
|
|
}
|
|
@-moz-keyframes #{$name} {
|
|
@content;
|
|
}
|
|
@-ms-keyframes #{$name} {
|
|
@content;
|
|
}
|
|
@keyframes #{$name} {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
// Placeholder mixin
|
|
@mixin placeholder($value) {
|
|
&::-webkit-input-placeholder {
|
|
color: $value;
|
|
}
|
|
&::-moz-placeholder {
|
|
color: $value;
|
|
}
|
|
&:-ms-input-placeholder {
|
|
color: $value;
|
|
}
|
|
&:-moz-placeholder {
|
|
color: $value;
|
|
}
|
|
} |