WebDev/Opal-Estate-Pro
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Origin commit

Browse Source
This commit is contained in:
Hoang Huu
2019-09-10 11:27:33 +07:00
commit 499e068e4f
844 changed files with 188705 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

699
assets/scss/components/mixins/_functions.scss Executable file
View File

@@ -0,0 +1,699 @@
// Functions
// --------------------------------------------------
// Position mixin
//==========================================
// @param [string] $position: position type
// @param [list] $args: list of offsets and values
//==========================================
@mixin position($position, $args) {
@each $o in top right bottom left {
$i: index($args, $o);
@if $i
and $i + 1 <= length($args)
and type-of( nth($args, $i + 1) ) == number {
#{$o}: nth($args, $i + 1);
}
}
position: $position;
}
// Absolute positioning mixin
//==========================================
// @param [list] $args: list of offsets and values
//==========================================
@mixin absolute($args) {
@include position(absolute, $args);
}
// Arrow mixin
//==========================================
// @param [string] $direction: arrow direction
// @param [list] $position: list of offsets and values
// @param [color] $color (inherit): arrow color
// @param [number] $size (1em): arrow size
//==========================================
@mixin triangle($direction, $position, $color: currentColor, $size: 1em) {
// Make sure the direction is valid
@if not index(top right bottom left, $direction) {
@warn "Direction must be one of top, right, bottom or left.";
}
@else {
@include absolute($position); // Position
@include square(0); // Size
content: '';
z-index: 2;
border-#{opposite-position($direction)}: $size * 1.25 solid $color;
$perpendicular-borders: $size solid transparent;
@if $direction == top or $direction == bottom {
border-left: $perpendicular-borders;
border-right: $perpendicular-borders;
}
@else if $direction == right or $direction == left {
border-bottom: $perpendicular-borders;
border-top: $perpendicular-borders;
}
}
}
// Font size - rem
//==========================================
@function parseInt($n) { /* 2 */
@return $n / ($n * 0 + 1);
}
@mixin font-size($property, $values) {
$px : (); /* 3 */
$rem: (); /* 3 */
@each $value in $values { /* 4 */
@if $value == 0 or $value == auto { /* 5 */
$px : append($px , $value);
$rem: append($rem, $value);
}
@else {
$unit: unit($value); /* 6 */
$val: parseInt($value); /* 6 */
@if $unit == "px" { /* 7 */
$px : append($px, $value);
$rem: append($rem, ($val / 10 + rem));
}
@if $unit == "rem" { /* 7 */
$px : append($px, ($val * 10 + px));
$rem: append($rem, $value);
}
}
}
@if $px == $rem { /* 8 */
#{$property}: $px; /* 9 */
} @else {
#{$property}: $px; /* 9 */
#{$property}: $rem; /* 9 */
}
}
//== Border
//==========================================
@mixin border( $coordinates: 0 0 0 0, $colour: $border-color, $style: solid ) {
$top: nth($coordinates, 1);
$right: nth($coordinates, 2);
$bottom: nth($coordinates, 3);
$left: nth($coordinates, 4);
@if not(unitless($top)) {
border-top: $top $style $colour;
}
@if not(unitless($right)) {
border-right: $right $style $colour;
}
@if not(unitless($bottom)) {
border-bottom: $bottom $style $colour;
}
@if not(unitless($left)) {
border-left: $left $style $colour;
}
}
// State and hover
//==========================================
@mixin state-hover-default($time, $background, $border-color){
@include transition(all $time);
&:hover{
background: $background;
border-color: $border-color;
}
}
@mixin state-hover($time,$height,$color){
@include box-shadow(inset 0 0 0 0 $color);
@include transition(all $time cubic-bezier(0.8,0,0,1));
&:hover{
@include transition(all $time cubic-bezier(0.8,0,0,1));
@include box-shadow(inset 0 (-$height) 0 0 $color);
}
}
@mixin state-hover-2($background){
position: relative;
z-index: 10;
&:after{
content: "";
display: block;
z-index: -50;
background-color: $background;
visibility: hidden;
@include scale(0);
@include vertical-center(100%,100%);
@include opacity(0);
@include transition-delay(0.3s,0s);
@include transition(transform 0s cubic-bezier(0.19,1,0.22,1) 0.3s,opacity 0.3s cubic-bezier(0.19,1,0.22,1));
}
&:hover{
&:after{
visibility: visible;
@include scale(1);
@include opacity(1);
@include transition(transform 0.6s cubic-bezier(0.19,1,0.22,1),opacity 0.5s cubic-bezier(0.19,1,0.22,1));
}
}
}
//== Flexible Layout
//==========================================
@mixin flexbox {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
}
%flexbox {
@include flexbox;
}
@mixin inline-flex {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -moz-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
}
%inline-flex {
@include inline-flex;
}
// Retina Sprite Mixins
@mixin retina-sprite-background($url,$position,$width,$height){
background-repeat: no-repeat;
background-image: url($url);
background-position: $position;
width:$width;
height:$height;
}
/** elements mixins **/
@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 ;
}
@mixin rounded-corners ($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
-o-border-radius: $radius;
border-radius: $radius;
}
@mixin clearboxstyle(){
background: none;
border:none;
}
@mixin clearfloat(){
float: none;
width: 100%;
}
@mixin transform-style($transform-style){
-webkit-transform-style: $transform-style;
-moz-transform-style: $transform-style;
-ms-transform-style: $transform-style;
-o-transform-style: $transform-style;
transform-style: $transform-style;
}
@mixin backface-visibility($backface-visibility){
backface-visibility: $backface-visibility; /* W3C */
-webkit-backface-visibility: $backface-visibility; /* Safari & Chrome */
-moz-backface-visibility: $backface-visibility; /* Firefox */
-ms-backface-visibility: $backface-visibility; /* Internet Explorer */
-o-backface-visibility: $backface-visibility; /* Opera */
}
@mixin animation-theme($animation-duration, $animation-fill-mode, $animation-name){
-webkit-animation-duration: $animation-duration;
-moz-animation-duration: $animation-duration;
-ms-animation-duration: $animation-duration;
-o-animation-duration: $animation-duration;
animation-duration: $animation-duration;
-webkit-animation-fill-mode: $animation-fill-mode;
-moz-animation-fill-mode: $animation-fill-mode;
-ms-animation-fill-mode: $animation-fill-mode;
-o-animation-fill-mode: $animation-fill-mode;
animation-fill-mode: $animation-fill-mode;
-webkit-animation-name: $animation-name;
-moz-animation-name: $animation-name;
-ms-animation-name: $animation-name;
-o-animation-name: $animation-name;
animation-name: $animation-name;
}
@mixin perspective($perspective){
-webkit-perspective: $perspective;
-ms-perspective: $perspective;
-moz-perspective: $perspective;
-o-perspective: $perspective;
perspective: $perspective;
}
/**
* Transition-timing-function property@mixin
*/
@mixin transition-timing-function($timing-function) {
-moz-transition-timing-function: $timing-function;
-o-transition-timing-function: $timing-function;
-webkit-transition-timing-function: $timing-function;
transition-timing-function: $timing-function;
}
@mixin appearance($appearance){
appearance: $arguments;
-moz-appearance: $arguments;
-ms-appearance: $arguments;
-o-appearance: $arguments;
-webkit-appearance: $arguments;
}
/*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;
}
//copyright
//sub heading (h2,h3) define
@mixin sub-heading {
@include rtl-float-left();
color: $block-heading-color;
text-transform: uppercase;
font: 600 14px/20px $font-custom;
padding: 8px 15px;
margin: 0 0 20px;
min-width: 120px;
position: relative;
background: $theme-bg-default;
}
@mixin sub-heading-before {
height: 0;
width: 0;
@include rtl-right(45%);
top: 100%;
content: "";
position: absolute;
border: 4px solid transparent;
border-top-color: $theme-bg-default;
}
//background
@mixin background-hover {
color: $base-text-color;
background: rgba(228, 50, 40, 0.3);
}
/*inline-block
============================================*/
@mixin inline-block() {
display: inline-block;
*display: inline;
zoom: 1;
}
// Sizing shortcuts
@mixin size($width, $height) {
width: $width;
height: $height;
}
// Panels
// -------------------------
@mixin box-variant($border, $heading-text-color, $heading-bg-color, $heading-border) {
border-color: $border;
& > .box-heading {
color: $heading-text-color;
background-color: $heading-bg-color;
border-color: $heading-border;
+ .box-content {
border-top-color: $border;
}
}
& > .box-content{
border-color:$border;
}
& > .box-footer {
+ .box-collapse .box-body {
border-bottom-color: $border;
}
}
}
@mixin button-3d($suffixclass, $height3d ,$color3d){
border: 0;
@if ($suffixclass == "empty") {
box-shadow: 0 $height3d $color3d inset;
-o-box-shadow: 0 $height3d $color3d inset;
-moz-box-shadow: 0 $height3d $color3d inset;
-webkit-box-shadow: 0 $height3d $color3d inset;
-ms-box-shadow: 0 $height3d $color3d inset;
}
@else {
&.btn-#{$suffixclass}{
box-shadow: 0 $height3d $color3d inset;
-o-box-shadow: 0 $height3d $color3d inset;
-moz-box-shadow: 0 $height3d $color3d inset;
-webkit-box-shadow: 0 $height3d $color3d inset;
-ms-box-shadow: 0 $height3d $color3d inset;
}
}
}
@mixin button-inverse( $suffixclass, $color ,$background ){
&.btn-#{$suffixclass}{
&:hover{
color:$color;
background:transparent;
}
}
}
@mixin button-outline( $suffixclass, $color, $hovercolor ){
background:transparent;
&.btn-#{$suffixclass}{
color:$color;
&:hover{
color:$hovercolor;
}
}
}
/// 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;
}
}
// icon variant inverse
@mixin icons-inverse( $suffixclass, $color ,$background ){
&.icons-#{$suffixclass}{
&:hover{
color:$color;
background:transparent;
}
}
}
// icon variant outline
@mixin icons-outline( $suffixclass, $color, $hovercolor ){
&.icons-#{$suffixclass}{
background:transparent;
color:$color;
&:hover{
color:$hovercolor;
}
}
}
// Block
// -------------------------
@mixin block-variant($border, $heading-text-color, $heading-bg-color, $heading-border) {
border: solid 1px $border;
& .#{$block-heading-selector} {
+ .#{$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, $linkcolor ){
background: $background;
color: $color;
a{
color:$linkcolor;
&:hover{
color: $theme-color;
}
}
}
@mixin widget-heading-style(){
font-size: 36px;
position: relative;
text-align: center;
padding-bottom: 35px;
text-transform: uppercase;
margin-top: 0;
margin-bottom: 40px;
&.style-2 {
font-size: 20px;
margin-bottom: 20px;
@include rtl-text-align-left();
padding-bottom: 0;
.widget-heading {
font-size: 20px;
> span:first-child {
position: relative;
margin-bottom: 20px;
padding-bottom: 15px;
display: block;
&:before {
content: "";
background-color: $theme-color;
@include size(40px,1px);
position: absolute;
bottom: 0;
@include rtl-left(0px);
}
}
.description {
font-size: 18px;
font-family: $font-family-base;
color: $black;
line-height: 30px;
}
}
&:before,
&:after {
content: none;
}
@media screen and (max-width: $screen-xs-max) {
margin-top: 20px;
}
}
&.style-3 {
text-transform: none;
padding-bottom: 0;
.description {
margin: 15px 23% 0;
}
&:before,
&:after {
content: none;
}
}
&.style-4 {
background: url('#{$image-theme-path}heading-title-bg.png') no-repeat center bottom;
.widget-heading {
color: $white;
.description {
&:after {
content: none;
}
}
}
&:before {
content: none;
}
&:after {
background-color: transparent;
}
}
&:before {
content: "";
width: 156px;
height: 1px;
background-color: #d3d3d3;
position: absolute;
bottom: 0;
@include rtl-left(50%);
@include rtl-margin-left(-78px);
}
&:after {
content: "";
border: 2px solid $theme-color;
@include border-radius(2px);
@include rotate(45deg);
position: absolute;
bottom:-5px;
@include rtl-left(50%);
@include square(12px);
z-index: 1;
@include rtl-margin-left(-6px);
background-color: $white;
}
.widget-heading {
margin: 0;
font-size: 36px;
@media screen and (max-width: 979px) {
font-size: 30px;
}
@media screen and (max-width: $screen-xs-min) {
font-size: 24px;
}
}
.description, .widget-desc{
display: block;
font-size: 18px;
font-style: italic;
color: $light-gray;
font-weight: 400;
text-transform: none;
font-family: $font-family-base;
margin: 10px 0 0;
line-height: 1.4;
&:after {
content: "";
@include size(50px,1px);
background-color: $body-bg;
position: absolute;
bottom: 0;
@include rtl-left(50%);
@include rtl-margin-left(-25px);
}
}
@media screen and (max-width: 979px) {
font-size: 30px;
padding-bottom: 25px;
margin-bottom: 30px;
}
}
@mixin widget-specical-style(){
margin-bottom: 40px;
@include widget-heading-style();
&.text-white {
.widget-heading {
color: $white;
&:after {
background-color: $white;
}
}
}
}

259
assets/scss/components/mixins/_rtl.scss Executable file
View File

@@ -0,0 +1,259 @@
// Support for RTL (Right to Left) & non-latin fonts
$rtl-left : left;
$rtl-right : right;
$rtl-center: center;
// 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-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;
}
}
// CLEAR
@mixin rtl-clear-left () {
@include rtl-base-simple(clear, $rtl-left);
}
@mixin rtl-clear-right () {
@include rtl-base-simple(clear, $rtl-right);
}
// 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);
}
@mixin rtl-text-align-center () {
@include rtl-base-simple(text-align, $rtl-center);
}
// 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;
.rtl & {
background-position:$rtl-right $vertical;
}
}
@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-topright ($tl, $tr, $br, $bl) {
-moz-border-radius: $tl, $tr, $br, $bl;
-webkit-border-radius: $tl, $tr, $br, $bl;
border-top-radius: $tl, $tr, $br, $bl;
.rtl & {
-moz-border-radius: $tr, $tl, $bl, $br;
-webkit-border-radius: $tr, $tl, $bl, $br;
border-top-radius: $tr, $tl, $bl, $br;
}
}
@mixin rtl-border-radius-topright ($value) {
-moz-border-radius-top#{$rtl-right}: $value;
-webkit-border-top-#{$rtl-right}-radius: $value;
border-top-#{$rtl-right}-radius: $value;
.rtl & {
-moz-border-radius-top#{$rtl-left}: $value;
-webkit-border-top-#{$rtl-left}-radius: $value;
border-top-#{$rtl-left}-radius: $value;
-moz-border-radius-top#{$rtl-right}: inherit;
-webkit-border-top-#{$rtl-right}-radius: inherit;
border-top-#{$rtl-right}-radius: inherit;
}
}
@mixin rtl-border-radius-bottomright ($value) {
-moz-border-radius-bottom#{$rtl-right}: $value;
-webkit-border-bottom-#{$rtl-right}-radius: $value;
border-bottom-#{$rtl-right}-radius: $value;
.rtl & {
-moz-border-radius-bottom#{$rtl-left}: $value;
-webkit-border-bottom-#{$rtl-left}-radius: $value;
border-bottom-#{$rtl-left}-radius: $value;
-moz-border-radius-bottom#{$rtl-right}: inherit;
-webkit-border-bottom-#{$rtl-right}-radius: inherit;
border-bottom-#{$rtl-right}-radius: inherit;
}
}
@mixin rtl-border-radius-topleft ($value) {
-moz-border-radius-top#{$rtl-left}: $value;
-webkit-border-top-#{$rtl-left}-radius: $value;
border-top-#{$rtl-left}-radius: $value;
.rtl & {
-moz-border-radius-top#{$rtl-right}: $value;
-webkit-border-top-#{$rtl-right}-radius: $value;
border-top-#{$rtl-right}-radius: $value;
-moz-border-radius-top#{$rtl-left}: inherit;
-webkit-border-top-#{$rtl-left}-radius: inherit;
border-top-#{$rtl-left}-radius: inherit;
}
}
@mixin rtl-border-radius-bottomleft ($value) {
-moz-border-radius-bottom#{$rtl-left}: $value;
-webkit-border-bottom-#{$rtl-left}-radius: $value;
border-bottom-#{$rtl-left}-radius: $value;
.rtl & {
-moz-border-radius-bottom#{$rtl-right}: $value;
-webkit-border-bottom-#{$rtl-right}-radius: $value;
border-bottom-#{$rtl-right}-radius: $value;
-moz-border-radius-bottom#{$rtl-left}: inherit;
-webkit-border-bottom-#{$rtl-left}-radius: inherit;
border-bottom-#{$rtl-left}-radius: inherit;
}
}

278
assets/scss/components/mixins/_template-mixins.scss Executable file
View File

@@ -0,0 +1,278 @@
// Box Size
// -------------------------
@mixin box-size($background, $padding-top,$padding-bottom){
background: $background;
padding-top: $padding-top;
padding-bottom: $padding-bottom;
}
// Button
// -------------------------
@mixin button-outline($color, $background, $border, $background-hover, $color-hover, $border-hover, $border-radius) {
color: $color;
background-color: $background;
border: $border;
@include border-radius($border-radius);
&:hover,
&:focus,
&:active,
&.active {
color: $color-hover;
background-color: $background-hover;
border: $border-hover;
}
.fa,.icon{
font-size: $icon-font-size-base;
margin: 0;
}
}
// Block
// -------------------------
@mixin block-variant($border, $heading-text-color, $heading-bg-color, $heading-border) {
border-color: $border;
background: $heading-bg-color;
& .#{$block-heading-selector} {
& span:before, & span:after{ background:$white; }
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 block-elements-styles($border, $heading-text-color, $heading-bg-color, $heading-border, $text-color, $text-color-primary){
border-color: $border;
background: $heading-bg-color;
& .#{$block-heading-selector} {
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, $linkcolor, $topbar-link-color-hover ){
background: $background;
color: $color;
a{
color:$linkcolor;
}
a:hover{
color: $topbar-link-color-hover;
}
}
//== Inline block
//==========================================
@mixin inline-block ($haslayout : true){
display: inline-block;
vertical-align: middle;
@if $haslayout == true {
.lt-ie8 & {
display: inline;
zoom: 1;
}
}
}
//== vertical block
//==========================================
@mixin vertical-center( $width: 100px, $height: 100px) {
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
width: $width;
height: $height;
position: absolute;
}
//== Translate X - Y - Z
//==========================================
@mixin translateX($x) {
-webkit-transform: translateX($x);
-ms-transform: translateX($x); // IE9 only
-o-transform: translateX($x);
transform: translateX($x);
}
@mixin translateY($y) {
-webkit-transform: translateY($y);
-ms-transform: translateY($y); // IE9 only
-o-transform: translateY($y);
transform: translateY($y);
}
@mixin translateZ($z) {
-webkit-transform: translateZ($z);
-ms-transform: translateZ($z); // IE9 only
-o-transform: translateZ($z);
transform: translateZ($z);
}
//== Transform
//==========================================
@mixin transform($argument){
-webkit-transform: ($argument);
-moz-transform: ($argument);
-ms-transform: ($argument);
-o-transform: ($argument);
transform: ($argument);
}
//== Transform
//==========================================
@mixin transition-delay($time1,$time2){
-webkit-transition-delay: ($time1,$time2);
-moz-transition-delay: ($time1,$time2);
-ms-transition-delay: ($time1,$time2);
-o-transition-delay: ($time1,$time2);
transition-delay: ($time1,$time2);
}
//== Background Size
//==========================================
@mixin background-size($size1,$size2) {
-webkit-background-size: ($size1,$size2);
-moz-background-size: ($size1,$size2);
-ms-background-size: ($size1,$size2);
-o-background-size: ($size1,$size2);
background-size: ($size1,$size2);
}
//== Background origin
//==========================================
@mixin background-origin($value1,$value2){
-webkit-background-origin: ($value1,$value2);
-moz-background-origin: ($value1,$value2);
-ms-background-origin: ($value1,$value2);
-o-background-origin: ($value1,$value2);
background-origin: ($value1,$value2);
}
//== Border radius
//==========================================
@mixin border-radius($radius) {
border-radius : $radius;
-webkit-border-radius : $radius;
-moz-border-radius : $radius;
-ms-border-radius : $radius;
-o-border-radius : $radius;
}
//== Text Shadow
//==========================================
@mixin text-shadow($shadow) {
text-shadow : $shadow;
-webkit-text-shadow : $shadow;
-moz-text-shadow : $shadow;
-ms-text-shadow : $shadow;
-o-text-shadow : $shadow;
}
//== Transform Origin
//==========================================
@mixin transform-origin($originX,$originY) {
-webkit-transform-origin : $originX $originY;
-moz-transform-origin : $originX $originY;
-ms-transform-origin : $originX $originY; // IE9 only
transform-origin : $originX $originY;
}
//== appearance
//==========================================
@mixin appearance() {
-webkit-appearance : none;
-moz-appearance : none;
-o-appearance : none;
-ms-appearance : none;
appearance : none;
}
//== selection
//==========================================
$prefixes: ("-moz-", "");
@mixin selection($color, $background) {
@each $prefix in $prefixes {
::#{$prefix}selection {
color: $color;
background: $background;
}
}
}
//== animation fill mode
//==========================================
@mixin animation-fill-mode($fill) {
-webkit-animation-fill-mode: $fill;
-moz-animation-fill-mode: $fill;
-o-animation-fill-mode: $fill;
animation-fill-mode: $fill;
}
//== filter
//==========================================
@mixin filter($argument){
filter : $argument;
-webkit-filter : $argument;
-moz-filter : $argument;
-o-filter : $argument;
-ms-filter : $argument;
}
// Clear Lists
// -------------------------
@mixin clear-list(){
padding : 0;
margin : 0;
list-style : none;
}
// Formart lists widget
// -------------------------
@mixin lists-style() {
ul,ol{
@include clear-list();
li{
&:first-child{
}
&:last-child{
border-bottom: 0;
padding-bottom: 0;
}
.children{
> li{
&:before{
top: 24px;
}
}
}
}
ul{
li:first-child{
padding-top: 14px;
background-position: 0 24px;
}
}
}
}
@import "functions";