167 lines
3.5 KiB
SCSS
167 lines
3.5 KiB
SCSS
|
// Font Size
|
||
|
@mixin font-size($sizeValue: 1) {
|
||
|
font-size: ($sizeValue * 16) * 1px;
|
||
|
font-size: $sizeValue * 1rem;
|
||
|
}
|
||
|
|
||
|
// Box Sizing
|
||
|
@mixin box-sizing($args) {
|
||
|
-webkit-box-sizing: $args;
|
||
|
-moz-box-sizing: $args;
|
||
|
box-sizing: $args;
|
||
|
}
|
||
|
|
||
|
// Display Flex
|
||
|
@mixin display() {
|
||
|
display: -webkit-box;
|
||
|
display: -webkit-flex;
|
||
|
display: -ms-flexbox;
|
||
|
display: flex;
|
||
|
}
|
||
|
|
||
|
// Flex Wrap
|
||
|
@mixin flex-wrap($args) {
|
||
|
-ms-flex-wrap: $args;
|
||
|
-webkit-flex-wrap: $args;
|
||
|
flex-wrap: $args;
|
||
|
}
|
||
|
|
||
|
// Flex Direction
|
||
|
@mixin flex-direction($args) {
|
||
|
-webkit-flex-direction: $args;
|
||
|
flex-direction: $args;
|
||
|
}
|
||
|
|
||
|
// Align Items
|
||
|
@mixin align-items($args) {
|
||
|
-webkit-align-items: $args;
|
||
|
align-items: $args;
|
||
|
}
|
||
|
|
||
|
// Justify Content
|
||
|
@mixin justify-content($args) {
|
||
|
-webkit-justify-content: $args;
|
||
|
justify-content: $args;
|
||
|
}
|
||
|
|
||
|
// Animation
|
||
|
@mixin animation($args) {
|
||
|
-ms-animation: $args;
|
||
|
-webkit-animation: $args;
|
||
|
-o-animation: $args;
|
||
|
-moz-animation: $args;
|
||
|
animation: $args;
|
||
|
}
|
||
|
|
||
|
// Animation Delay
|
||
|
@mixin animation-delay($args) {
|
||
|
-ms-animation-delay: $args;
|
||
|
-webkit-animation-delay: $args;
|
||
|
-o-animation-delay: $args;
|
||
|
-moz-animation-delay: $args;
|
||
|
animation-delay: $args;
|
||
|
}
|
||
|
|
||
|
// Transform
|
||
|
@mixin transform($args) {
|
||
|
-webkit-transform: $args;
|
||
|
-moz-transform: $args;
|
||
|
-ms-transform: $args;
|
||
|
-o-transform: $args;
|
||
|
transform: $args;
|
||
|
}
|
||
|
|
||
|
// Transition
|
||
|
@mixin transition($args) {
|
||
|
-webkit-transition: $args;
|
||
|
-moz-transition: $args;
|
||
|
-ms-transition: $args;
|
||
|
-o-transition: $args;
|
||
|
transition: $args;
|
||
|
}
|
||
|
|
||
|
// Transition Duration
|
||
|
@mixin transition-duration($args) {
|
||
|
-webkit-transition-duration: $args;
|
||
|
-moz-transition-duration: $args;
|
||
|
-ms-transition-duration: $args;
|
||
|
-o-transition-duration: $args;
|
||
|
transition-duration: $args;
|
||
|
}
|
||
|
|
||
|
// Transition Delay
|
||
|
@mixin transition-delay($args) {
|
||
|
-webkit-transition-delay: $args;
|
||
|
-moz-transition-delay: $args;
|
||
|
-ms-transition-delay: $args;
|
||
|
-o-transition-delay: $args;
|
||
|
transition-delay: $args;
|
||
|
}
|
||
|
|
||
|
// Opacity
|
||
|
@mixin opacity($args) {
|
||
|
-moz-opacity: $args;
|
||
|
-webkit-opacity: $args;
|
||
|
opacity: $args;
|
||
|
}
|
||
|
|
||
|
// Border radius
|
||
|
@mixin border-radius($args) {
|
||
|
-webkit-border-radius: $args;
|
||
|
-moz-border-radius: $args;
|
||
|
-ms-border-radius: $args;
|
||
|
border-radius: $args;
|
||
|
}
|
||
|
|
||
|
// Box Shadow
|
||
|
@mixin box-shadow($args) {
|
||
|
-webkit-box-shadow: $args;
|
||
|
-moz-box-shadow: $args;
|
||
|
box-shadow: $args;
|
||
|
}
|
||
|
|
||
|
// Font Awesome CSS
|
||
|
@mixin font-awesome() {
|
||
|
font-family: "Font Awesome 5 Free";
|
||
|
font-weight: 600;
|
||
|
font-style: normal;
|
||
|
letter-spacing: normal;
|
||
|
text-rendering: auto;
|
||
|
}
|
||
|
|
||
|
// Simple Line Icons CSS
|
||
|
@mixin simple-line-icons() {
|
||
|
font-family: "simple-line-icons";
|
||
|
font-weight: normal;
|
||
|
font-style: normal;
|
||
|
letter-spacing: normal;
|
||
|
text-rendering: auto;
|
||
|
}
|
||
|
|
||
|
// Animation and Keyframe
|
||
|
@mixin keyframes($animation-name) {
|
||
|
@-webkit-keyframes #{$animation-name} {
|
||
|
@content;
|
||
|
}
|
||
|
@-moz-keyframes #{$animation-name} {
|
||
|
@content;
|
||
|
}
|
||
|
@-ms-keyframes #{$animation-name} {
|
||
|
@content;
|
||
|
}
|
||
|
@-o-keyframes #{$animation-name} {
|
||
|
@content;
|
||
|
}
|
||
|
@keyframes #{$animation-name} {
|
||
|
@content;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@mixin animation($str) {
|
||
|
-webkit-animation: #{$str};
|
||
|
-moz-animation: #{$str};
|
||
|
-ms-animation: #{$str};
|
||
|
-o-animation: #{$str};
|
||
|
animation: #{$str};
|
||
|
}
|