Roman-website-applicant/tutorgo/assets/scssold/utils/_mixins.scss

184 lines
4.7 KiB
SCSS

@use "sass:selector";
@mixin tp-root($child) {
@at-root #{selector.unify(&, $child)} {
@content;
}
}
// bg color
@mixin bg-color($color, $opacity) {
background-color: rgba($color, $opacity);
}
@mixin tp-afbf-default($content: '', $top: 50%, $left: 0, $right: auto, $x: 0%, $y: -50%, $height: 12px, $width: 1px, $bg-color: var(--tp-common-black)) {
position: absolute;
content: $content;
top: $top;
left: $left;
right: $right;
width: $width;
height: $height;
@include transform(translate($x, $y));
background-color: $bg-color;
}
@mixin tp-afbf-full($content: '', $top: 0, $left: 0, $right: auto, $x: 0%, $y: 0%, $height: 100%, $width: 100%, $bg-color: var(--tp-common-black)) {
position: absolute;
content: $content;
top: $top;
left: $left;
right: $right;
width: $width;
height: $height;
@include transform(translate($x, $y));
background-color: $bg-color;
}
@mixin tp-afbf-center($content: '', $top: 50%, $left: 50%, $right: auto, $x: -50%, $y: -50%, $height: 50px, $width: 50px, $bg-color: var(--tp-common-black)) {
position: absolute;
content: $content;
top: $top;
left: $left;
right: $right;
width: $width;
height: $height;
@include transform(translate($x, $y));
background-color: $bg-color;
}
// placeholder input
@mixin tp-placeholder {
&::-webkit-input-placeholder {
@content;
}
&:-moz-placeholder {
@content;
}
&::-moz-placeholder {
@content;
}
&:-ms-input-placeholder {
@content;
}
}
// animate
@mixin animate($animation, $duration, $repeat, $easing) {
-webkit-animation: $animation $duration $repeat $easing;
-moz-animation: $animation $duration $repeat $easing;
-ms-animation: $animation $duration $repeat $easing;
-o-animation: $animation $duration $repeat $easing;
animation: $animation $duration $repeat $easing;
}
// filter
@mixin filter($value) {
-webkit-filter: $value;
filter: $value;
}
// appearance for select
@mixin appearance($value) {
-webkit-appearance: $value;
-moz-appearance: $value;
-ms-appearance: $value;
-o-appearance: $value;
appearance: $value;
}
// keyframes
@mixin keyframes($name) {
@-webkit-keyframes #{$name} {
@content;
}
@-moz-keyframes #{$name} {
@content;
}
@-ms-keyframes #{$name} {
@content;
}
@keyframes #{$name} {
@content;
}
}
//backgroud
@mixin background {
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
//transition
@mixin transition($time) {
-webkit-transition: all $time ease-out 0s;
-moz-transition: all $time ease-out 0s;
-ms-transition: all $time ease-out 0s;
-o-transition: all $time ease-out 0s;
transition: all $time ease-out 0s;
}
// transform
@mixin transform($transforms) {
-webkit-transform: $transforms;
-moz-transform: $transforms;
-ms-transform: $transforms;
-o-transform: $transforms;
transform: $transforms;
}
//border
@mixin border-radius($man) {
-webkit-border-radius: $man;
-moz-border-radius: $man;
-o-border-radius: $man;
-ms-border-radius: $man;
border-radius: $man;
}
// sentence case
@mixin sentence-case() {
text-transform: lowercase;
&:first-letter {
text-transform: uppercase;
}
}
// Flexbox display
@mixin flexbox() {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
// Box shadows
@mixin box-shadow($shadow) {
-webkit-box-shadow: $shadow;
-moz-box-shadow: $shadow;
-ms-box-shadow: $shadow;
-o-box-shadow: $shadow;
box-shadow: $shadow;
}
@mixin square-btn($size, $circle: false) {
width: $size;
height: $size;
line-height: $size;
text-align: center;
@if $circle {
border-radius: 50%;
}
}