site_oueb_2/wp-content/themes/oceanwp/sass/_mixins.scss

167 lines
3.5 KiB
SCSS
Raw Permalink Normal View History

2022-11-22 20:23:31 +01:00
// 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};
}