125 lines
2.7 KiB
SCSS
125 lines
2.7 KiB
SCSS
|
|
|
|
// bg color
|
|
@mixin bg-color($color, $opacity) {
|
|
background-color: rgba($color, $opacity);
|
|
}
|
|
|
|
// placeholder input
|
|
@mixin tg-placeholder {
|
|
&::-webkit-input-placeholder {
|
|
@content;
|
|
}
|
|
&:-moz-placeholder {
|
|
@content;
|
|
}
|
|
&::-moz-placeholder {
|
|
@content;
|
|
}
|
|
&:-ms-input-placeholder {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
// 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;
|
|
}
|
|
}
|
|
|
|
//Background
|
|
@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;
|
|
}
|
|
|
|
// Radius Box
|
|
@mixin square-box($size, $circle: false) {
|
|
width: $size;
|
|
height: $size;
|
|
line-height: $size;
|
|
text-align: center;
|
|
|
|
@if $circle {
|
|
border-radius: 50%;
|
|
}
|
|
} |