tps-site/assets/css/components/1-main/mixin.scss

119 lines
2.1 KiB
SCSS

@mixin transition {
transition: all 0.2s ease-in-out 0s;
-moz-transition: all 0.2s ease-in-out 0s;
}
@mixin transformY {
transform: translateY(-50%);
-moz-ransform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
@mixin transformX {
transform: translateX(-50%);
-moz-ransform: translateX(-50%);
-o-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
}
@mixin transform {
transform: translate(-50%, -50%);
-moz-ransform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}
@mixin transformReset {
transform: translate(0, 0);
-moz-ransform: translate(0, 0);
-o-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-webkit-transform: translate(0, 0);
}
@mixin rotate {
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-moz-transform: rotate(90deg);
}
@mixin ImgCon {
width: 100%;
height: 100%;
object-fit: contain;
-o-object-fit: contain;
}
@mixin ImgCov {
width: 100%;
height: 100%;
object-fit: cover;
-o-object-fit: cover;
}
// @mixin height {
// @media (max-height: 390px) {
// @content;
// }
// }
@mixin sm-lg {
@media (max-width: 380px) {
@content;
}
}
@mixin md-xsm {
@media (max-width: 400px) {
@content;
}
}
@mixin md-sm {
@media (max-width: 650px) {
@content;
}
}
@mixin lg-lg {
@media (max-width: 750px) {
@content;
}
}
@mixin lg-xlg {
@media (max-width: 1000px) {
@content;
}
}
@mixin lg-xxlg {
@media (max-width: 1100px) {
@content;
}
}
@mixin xlg-xxlg {
@media (max-width: 1200px) {
@content;
}
}
@mixin xlg-xxlg {
@media (max-width: 1400px) {
@content;
}
}
@mixin forSlider-1 {
@media (max-width: 1530px) {
@content;
}
}