first commit
This commit is contained in:
511
themes/at_movic/_dev/css/partials/_mixins.scss
Normal file
511
themes/at_movic/_dev/css/partials/_mixins.scss
Normal file
@@ -0,0 +1,511 @@
|
||||
@mixin search-box {
|
||||
form {
|
||||
input[type=text] {
|
||||
border: 0;
|
||||
border-bottom: 2px solid #333;
|
||||
padding: 10px;
|
||||
max-width: 600px;
|
||||
width: 100%;
|
||||
background: white;
|
||||
color: $gray-darker;
|
||||
font-weight: 400;
|
||||
@include rounded-corners(0);
|
||||
@include placeholder {
|
||||
color: rgba($gray-darker, 0.5);
|
||||
}
|
||||
}
|
||||
button[type=submit] {
|
||||
position: absolute;
|
||||
background: #333b48;
|
||||
border: none;
|
||||
bottom: 3px;
|
||||
color: white;
|
||||
padding: 0px;
|
||||
font-size: 19px;
|
||||
@include size(39px,39px);
|
||||
@include rtl-right(3px);
|
||||
@include rounded-corners(2px);
|
||||
&:hover {
|
||||
background: $brand-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/***************************************************
|
||||
Mixins Themes
|
||||
/***************************************************/
|
||||
/* Mixin Normal*/
|
||||
@mixin rounded-corners($radius) {
|
||||
-webkit-border-radius: $radius;
|
||||
-moz-border-radius: $radius;
|
||||
-ms-border-radius: $radius;
|
||||
-o-border-radius: $radius;
|
||||
border-radius: $radius;
|
||||
}
|
||||
|
||||
@mixin box-shadow($shadow) {
|
||||
-moz-box-shadow: $shadow;
|
||||
-webkit-box-shadow: $shadow;// iOS <4.3 & Android <4.1
|
||||
-o-box-shadow: $shadow;
|
||||
-ms-box-shadow: $shadow;
|
||||
box-shadow: $shadow;
|
||||
}
|
||||
|
||||
@mixin opacity($opacity) {
|
||||
opacity: $opacity;
|
||||
// IE8 filter
|
||||
$opacity-ie: ($opacity * 100);
|
||||
filter: #{alpha(opacity=$opacity-ie)};
|
||||
}
|
||||
|
||||
@mixin ellipsis-text($value){
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: $value;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
@mixin box-sizing($boxmodel) {
|
||||
-webkit-box-sizing: $boxmodel;
|
||||
-moz-box-sizing: $boxmodel;
|
||||
box-sizing: $boxmodel;
|
||||
}
|
||||
/* Mixin Clear */
|
||||
@mixin clearboxstyle(){
|
||||
background: none;
|
||||
border:none;
|
||||
}
|
||||
|
||||
@mixin clearfloat(){
|
||||
float: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Mixin Border */
|
||||
@mixin border-exclude-top($border-deep, $border-type, $border-color ){
|
||||
border-bottom: $border-deep $border-type $border-color;
|
||||
border-left: $border-deep $border-type $border-color;
|
||||
border-right: $border-deep $border-type $border-color;
|
||||
}
|
||||
|
||||
@mixin border-exclude-bottom($border-deep, $border-type, $border-color ){
|
||||
border-top: $border-deep $border-type $border-color;
|
||||
border-left: $border-deep $border-type $border-color;
|
||||
border-right: $border-deep $border-type $border-color;
|
||||
}
|
||||
|
||||
@mixin border-exclude-left($border-deep, $border-type, $border-color ){
|
||||
border-top: $border-deep $border-type $border-color;
|
||||
border-bottom: $border-deep $border-type $border-color;
|
||||
border-right: $border-deep $border-type $border-color;
|
||||
}
|
||||
|
||||
@mixin border-exclude-right($border-deep, $border-type, $border-color ){
|
||||
border-top: $border-deep $border-type $border-color;
|
||||
border-bottom: $border-deep $border-type $border-color;
|
||||
border-left: $border-deep $border-type $border-color;
|
||||
}
|
||||
|
||||
// Transitions
|
||||
|
||||
@mixin transition($transition...) {
|
||||
-webkit-transition: $transition;
|
||||
-o-transition: $transition;
|
||||
transition: $transition;
|
||||
}
|
||||
|
||||
// Transformations
|
||||
@mixin rotate($degrees) {
|
||||
-webkit-transform: rotate($degrees);
|
||||
-ms-transform: rotate($degrees); // IE9 only
|
||||
transform: rotate($degrees);
|
||||
}
|
||||
@mixin scale($scale-args...) {
|
||||
-webkit-transform: scale($scale-args);
|
||||
-ms-transform: scale($scale-args); // IE9 only
|
||||
transform: scale($scale-args);
|
||||
}
|
||||
@mixin translate($x, $y) {
|
||||
-webkit-transform: translate($x, $y);
|
||||
-ms-transform: translate($x, $y); // IE9 only
|
||||
transform: translate($x, $y);
|
||||
}
|
||||
@mixin skew($x, $y) {
|
||||
-webkit-transform: skew($x, $y);
|
||||
-ms-transform: skewX($x) skewY($y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
|
||||
transform: skew($x, $y);
|
||||
}
|
||||
@mixin translate3d($x, $y, $z) {
|
||||
-webkit-transform: translate3d($x, $y, $z);
|
||||
transform: translate3d($x, $y, $z);
|
||||
}
|
||||
|
||||
@mixin rotateX($degrees) {
|
||||
-webkit-transform: rotateX($degrees);
|
||||
-ms-transform: rotateX($degrees); // IE9 only
|
||||
transform: rotateX($degrees);
|
||||
}
|
||||
@mixin rotateY($degrees) {
|
||||
-webkit-transform: rotateY($degrees);
|
||||
-ms-transform: rotateY($degrees); // IE9 only
|
||||
transform: rotateY($degrees);
|
||||
}
|
||||
|
||||
/*background RGBA
|
||||
============================================*/
|
||||
@mixin rgba($colour, $alpha)
|
||||
{
|
||||
$alphaColour: hsla(hue($colour), saturation($colour), lightness($colour), $alpha);
|
||||
$ieAlphaColour: argb($alphaColour);
|
||||
background-color: $colour;
|
||||
background-color: $alphaColour;
|
||||
zoom: 1;
|
||||
background-color: transparent\9;
|
||||
}
|
||||
@mixin border-rgba($colour, $alpha)
|
||||
{
|
||||
$alphaColour: hsla(hue($colour), saturation($colour), lightness($colour), $alpha);
|
||||
$ieAlphaColour: argb($alphaColour);
|
||||
border-color: $colour;
|
||||
border-color: $alphaColour;
|
||||
zoom: 1;
|
||||
border-color: transparent\9;
|
||||
}
|
||||
@mixin background-hover {
|
||||
color: $text-color;
|
||||
background: rgba(228, 50, 40, 0.3);
|
||||
}
|
||||
|
||||
// Background Gradient: Left to Right
|
||||
@mixin bg-gradient-l2r($start-colour, $end-colour) {
|
||||
background-color: $start-colour;
|
||||
background-image: -webkit-gradient(linear, left top, right top, from($start-colour), to($end-colour));
|
||||
background-image: -webkit-linear-gradient(left, $start-colour, $end-colour);
|
||||
background-image: -moz-linear-gradient(left, $start-colour, $end-colour);
|
||||
background-image: -ms-linear-gradient(left, $start-colour, $end-colour);
|
||||
background-image: -o-linear-gradient(left, $start-colour, $end-colour);
|
||||
background-image: linear-gradient(left, $start-colour, $end-colour);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(start-colourStr='#{$start-colour}', end-colourStr='#{$end-colour}', gradientType='1');
|
||||
}
|
||||
/// button variant outline
|
||||
@mixin button-variant-outline($color, $background, $border, $colorhover, $bghover, $borderhover ) {
|
||||
color: $color;
|
||||
background-color: $background;
|
||||
border-color: $border;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&.active {
|
||||
color: $colorhover;
|
||||
background-color: $bghover;
|
||||
border-color: $borderhover ;
|
||||
}
|
||||
.open & { &.dropdown-toggle {
|
||||
color: $colorhover;
|
||||
background-color: $bghover;
|
||||
border-color: $borderhover ;
|
||||
} }
|
||||
&:active,
|
||||
&.active {
|
||||
background-image: none;
|
||||
}
|
||||
.open & { &.dropdown-toggle {
|
||||
background-image: none;
|
||||
} }
|
||||
&.disabled,
|
||||
&[disabled],
|
||||
fieldset[disabled] & {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&.active {
|
||||
background-color: $background;
|
||||
border-color: $border;
|
||||
}
|
||||
}
|
||||
.badge {
|
||||
color: $background;
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Block
|
||||
// -------------------------
|
||||
@mixin block-variant($border, $heading-text-color, $heading-bg-color, $heading-border) {
|
||||
border-color: $border;
|
||||
|
||||
& .#{$block-heading-selector} {
|
||||
color: $heading-text-color;
|
||||
a{
|
||||
color: $heading-text-color;
|
||||
}
|
||||
background-color: $heading-bg-color;
|
||||
border-color: $heading-border;
|
||||
+ .#{$block-prefix}-collapse .#{$block-content-selector} {
|
||||
border-top-color: $border;
|
||||
}
|
||||
}
|
||||
& > .#{$block-prefix}-footer {
|
||||
+ .#{$block-prefix}-collapse .#{$block-prefix}-body {
|
||||
border-bottom-color: $border;
|
||||
}
|
||||
}
|
||||
}
|
||||
@mixin container-layout-variant($color, $background){
|
||||
background: $background;
|
||||
color: $color;
|
||||
}
|
||||
|
||||
/***************************************************
|
||||
Mixins RTL Themes
|
||||
/***************************************************/
|
||||
|
||||
// BASIC CONVERTER (ignore these)
|
||||
|
||||
@mixin rtl-base-simple ($property, $direction) {
|
||||
#{$property}:$direction;
|
||||
.rtl & {
|
||||
@if $direction == $rtl-right {
|
||||
#{$property}:$rtl-left;
|
||||
}
|
||||
@else {
|
||||
#{$property}:$rtl-right;
|
||||
}
|
||||
}
|
||||
}
|
||||
@mixin rtl-base-inherit ($property, $direction, $value, $inherit : inherit) {
|
||||
#{$property}-#{$direction}: $value;
|
||||
.rtl & {
|
||||
@if $direction == $rtl-right {
|
||||
#{$property}-#{$rtl-left}: $value;
|
||||
}
|
||||
@else {
|
||||
#{$property}-#{$rtl-right}: $value;
|
||||
}
|
||||
#{$property}-#{$direction}: $inherit;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin rtl-base-toprightbottomleft ($property, $t, $r, $b, $l) {
|
||||
#{$property}: $t $r $b $l;
|
||||
.rtl & {
|
||||
#{$property}: $t $l $b $r;
|
||||
}
|
||||
}
|
||||
|
||||
// BODY STYLES
|
||||
|
||||
@mixin rtl-direction ($forBody : true) {
|
||||
direction: ltr;
|
||||
@if $forBody {
|
||||
&.rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
}
|
||||
@else {
|
||||
.rtl & {
|
||||
direction: rtl;
|
||||
}
|
||||
}
|
||||
}
|
||||
@mixin rtl-font-family ($ltr, $rtl, $forBody : false) {
|
||||
font-family: $ltr;
|
||||
@if $forBody {
|
||||
&.rtl, &.non-latin {
|
||||
font-family:$rtl;
|
||||
}
|
||||
}
|
||||
@else {
|
||||
.rtl &, .non-latin & {
|
||||
font-family:$rtl;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// MARGIN
|
||||
|
||||
@mixin rtl-margin ($t, $r, $b, $l) {
|
||||
@include rtl-base-toprightbottomleft(margin,$t, $r, $b, $l);
|
||||
}
|
||||
@mixin rtl-margin-left ($value) {
|
||||
@include rtl-base-inherit(margin,$rtl-left,$value);
|
||||
}
|
||||
@mixin rtl-margin-right ($value) {
|
||||
@include rtl-base-inherit(margin,$rtl-right,$value);
|
||||
}
|
||||
|
||||
// PADDING
|
||||
|
||||
@mixin rtl-padding ($t, $r, $b, $l) {
|
||||
@include rtl-base-toprightbottomleft(padding,$t, $r, $b, $l);
|
||||
}
|
||||
@mixin rtl-padding-left ($value) {
|
||||
@include rtl-base-inherit(padding,$rtl-left,$value);
|
||||
}
|
||||
@mixin rtl-padding-right ($value) {
|
||||
@include rtl-base-inherit(padding,$rtl-right,$value);
|
||||
}
|
||||
|
||||
// BORDER
|
||||
|
||||
@mixin rtl-border-width ($t,$r,$b,$l) {
|
||||
@include rtl-base-toprightbottomleft(border-width,$t,$r,$b,$l);
|
||||
}
|
||||
@mixin rtl-border-style ($t,$r,$b,$l) {
|
||||
@include rtl-base-toprightbottomleft(border-style,$t,$r,$b,$l);
|
||||
}
|
||||
@mixin rtl-border-left ($value) {
|
||||
@include rtl-base-inherit(border,$rtl-left,$value);
|
||||
}
|
||||
@mixin rtl-border-right ($value) {
|
||||
@include rtl-base-inherit(border,$rtl-right,$value);
|
||||
}
|
||||
|
||||
// POSITION
|
||||
|
||||
@mixin rtl-left ($value) {
|
||||
#{$rtl-left}: $value;
|
||||
.rtl & {
|
||||
#{$rtl-right}: $value;
|
||||
#{$rtl-left}: auto;
|
||||
}
|
||||
}
|
||||
@mixin rtl-right ($value) {
|
||||
#{$rtl-right}: $value;
|
||||
.rtl & {
|
||||
#{$rtl-left}: $value;
|
||||
#{$rtl-right}: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// TEXT-ALIGN
|
||||
|
||||
@mixin rtl-text-align-left () {
|
||||
@include rtl-base-simple(text-align, $rtl-left);
|
||||
}
|
||||
@mixin rtl-text-align-right () {
|
||||
@include rtl-base-simple(text-align, $rtl-right);
|
||||
}
|
||||
|
||||
// FLOAT
|
||||
|
||||
@mixin rtl-float-left () {
|
||||
@include rtl-base-simple(float, $rtl-left);
|
||||
}
|
||||
@mixin rtl-float-right () {
|
||||
@include rtl-base-simple(float, $rtl-right);
|
||||
}
|
||||
|
||||
// BACKGROUND-POSITION
|
||||
|
||||
@mixin rtl-background-position-left ($vertical) {
|
||||
background-position:$rtl-left $vertical !important;
|
||||
.rtl & {
|
||||
background-position:$rtl-right $vertical !important;
|
||||
}
|
||||
}
|
||||
@mixin rtl-background-position-right ($vertical) {
|
||||
background-position:$rtl-right $vertical;
|
||||
.rtl & {
|
||||
background-position:$rtl-left $vertical;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin rtl-background-position-percent ($vertical, $horPercent) {
|
||||
background-position:$horPercent $vertical;
|
||||
.rtl & {
|
||||
background-position:100% - $horPercent $vertical;
|
||||
}
|
||||
}
|
||||
|
||||
// TEXT-SHADOW & BOX-SHADOW
|
||||
|
||||
@mixin rtl-text-shadow ($x, $rest) {
|
||||
text-shadow: $x $rest;
|
||||
.rtl & {
|
||||
text-shadow: -1 * $x $rest;
|
||||
}
|
||||
}
|
||||
@mixin rtl-box-shadow ($x, $rest) {
|
||||
-moz-box-shadow: $x $rest;
|
||||
-webkit-box-shadow: $x $rest;
|
||||
box-shadow: $x $rest;
|
||||
.rtl & {
|
||||
-moz-box-shadow: -1 * $x $rest;
|
||||
-webkit-box-shadow: -1 * $x $rest;
|
||||
box-shadow: -1 * $x $rest;
|
||||
}
|
||||
}
|
||||
|
||||
// BORDER-RADIUS
|
||||
|
||||
@mixin rtl-border-radius($tl, $tr, $br, $bl) {
|
||||
-moz-border-radius: $tl $tr $br $bl;
|
||||
-webkit-border-radius: $tl $tr $br $bl;
|
||||
border-radius: $tl $tr $br $bl;
|
||||
.rtl & {
|
||||
-moz-border-radius: $tr $tl $bl $br;
|
||||
-webkit-border-radius: $tr $tl $bl $br;
|
||||
border-radius: $tr $tl $bl $br;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin rtl-border-radius-topright ($value) {
|
||||
-moz-border-top-#{$rtl-right}-radius: $value;
|
||||
-webkit-border-top-#{$rtl-right}-radius: $value;
|
||||
border-top-#{$rtl-right}-radius: $value;
|
||||
.rtl & {
|
||||
-moz-border-top-#{$rtl-left}-radius: $value;
|
||||
-webkit-border-top-#{$rtl-left}-radius: $value;
|
||||
border-top-#{$rtl-left}-radius: $value;
|
||||
-moz-border-top-#{$rtl-right}-radius: inherit;
|
||||
-webkit-border-top-#{$rtl-right}-radius: inherit;
|
||||
border-top-#{$rtl-right}-radius: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin rtl-border-radius-bottomright ($value) {
|
||||
-moz-border-bottom-#{$rtl-right}-radius: $value;
|
||||
-webkit-border-bottom-#{$rtl-right}-radius: $value;
|
||||
border-bottom-#{$rtl-right}-radius: $value;
|
||||
.rtl & {
|
||||
-moz-border-bottom-#{$rtl-left}-radius: $value;
|
||||
-webkit-border-bottom-#{$rtl-left}-radius: $value;
|
||||
border-bottom-#{$rtl-left}-radius: $value;
|
||||
-moz-border-bottom-#{$rtl-right}-radius: inherit;
|
||||
-webkit-border-bottom-#{$rtl-right}-radius: inherit;
|
||||
border-bottom-#{$rtl-right}-radius: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin rtl-border-radius-topleft ($value) {
|
||||
-moz-border-top-#{$rtl-left}-radius: $value;
|
||||
-webkit-border-top-#{$rtl-left}-radius: $value;
|
||||
border-top-#{$rtl-left}-radius: $value;
|
||||
.rtl & {
|
||||
-moz-border-top-#{$rtl-right}-radius: $value;
|
||||
-webkit-border-top-#{$rtl-right}-radius: $value;
|
||||
border-top-#{$rtl-right}-radius: $value;
|
||||
-moz-border-top-#{$rtl-left}-radius: inherit;
|
||||
-webkit-border-top-#{$rtl-left}-radius: inherit;
|
||||
border-top-#{$rtl-left}-radius: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin rtl-border-radius-bottomleft ($value) {
|
||||
-moz-border-bottom-#{$rtl-left}-radius: $value;
|
||||
-webkit-border-bottom-#{$rtl-left}-radius: $value;
|
||||
border-bottom-#{$rtl-left}-radius: $value;
|
||||
.rtl & {
|
||||
-moz-border-bottom-#{$rtl-right}-radius: $value;
|
||||
-webkit-border-bottom-#{$rtl-right}-radius: $value;
|
||||
border-bottom-#{$rtl-right}-radius: $value;
|
||||
-moz-border-bottom-#{$rtl-left}-radius: inherit;
|
||||
-webkit-border-bottom-#{$rtl-left}-radius: inherit;
|
||||
border-bottom-#{$rtl-left}-radius: inherit;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user