Origin commit
This commit is contained in:
Hoang Huu
0
assets/scss/components/_grid.scss
Executable file
0
assets/scss/components/_grid.scss
Executable file
6
assets/scss/components/_mixins.scss
Executable file
6
assets/scss/components/_mixins.scss
Executable file
@@ -0,0 +1,6 @@
|
||||
/**
|
||||
* Import component variables
|
||||
*/
|
||||
@import 'mixins/rtl';
|
||||
@import 'mixins/functions';
|
||||
@import 'mixins/template-mixins';
|
||||
32
assets/scss/components/_variables.scss
Executable file
32
assets/scss/components/_variables.scss
Executable file
@@ -0,0 +1,32 @@
|
||||
/*
|
||||
* Global variables
|
||||
*/
|
||||
$image-theme-path : '../images/' !default;
|
||||
$image-theme-skin : '../images/' !default;
|
||||
// standard colors
|
||||
$white : #FFF !default;
|
||||
$black : #000 !default;
|
||||
$nocolor : transparent !default;
|
||||
|
||||
|
||||
// color for default theme
|
||||
$theme-color : #ef114c !default; /* main color which will be used for all main block styles... */
|
||||
$border-color : #ebebeb !default;
|
||||
|
||||
|
||||
$theme-color-second : #233354 !default;
|
||||
$theme-color-default : $theme-color !default;
|
||||
$theme-color-hover : #ff8106 !default;
|
||||
$theme-color-secondary : #da8664 !default;
|
||||
$link-color : #000 !default;
|
||||
|
||||
$header-bg-color : $brand-info;
|
||||
$footer-color : #000000;
|
||||
|
||||
|
||||
// Theme Margin, Padding
|
||||
// -------------------------
|
||||
$theme-margin : 30px !default;
|
||||
$theme-padding : 30px !default;
|
||||
// fonts
|
||||
$font-family-second : $font-family-base !default;
|
||||
699
assets/scss/components/mixins/_functions.scss
Executable file
699
assets/scss/components/mixins/_functions.scss
Executable 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
259
assets/scss/components/mixins/_rtl.scss
Executable 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
278
assets/scss/components/mixins/_template-mixins.scss
Executable 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";
|
||||
244
assets/scss/components/vars/_elements.scss
Executable file
244
assets/scss/components/vars/_elements.scss
Executable file
@@ -0,0 +1,244 @@
|
||||
$opalestate-parallax-before-background : url("http://venusdemo.com/wpopal/mix/mobile/wp-content/uploads/2014/11/bg-footer-cd.jpg")!default;
|
||||
|
||||
$element-color-primary : $theme-color !default;
|
||||
|
||||
/* --- SCSS For Accordion --- */
|
||||
$opalestate-accordion-background: $brand-success !default;
|
||||
$opalestate-accordion-color: $brand-success !default;
|
||||
|
||||
$opalestate-accordion-border-color: #eee !default;
|
||||
|
||||
/* --- SCSS For Breadcrumb --- */
|
||||
|
||||
/* --- SCSS For Buttons --- */
|
||||
|
||||
/* --- SCSS For Call-to-action --- */$white : #FFFFFF !default;
|
||||
|
||||
/* --- SCSS For Content-slider --- *//* */
|
||||
|
||||
$opalestate-carousel-md-width: 44px !default;
|
||||
$opalestate-carousel-md-height: 44px !default;
|
||||
|
||||
$opalestate-carousel-sm-width: 34px !default;
|
||||
$opalestate-carousel-sm-height: 34px !default;
|
||||
|
||||
$opalestate-carousel-xs-width: 30px !default;
|
||||
$opalestate-carousel-xs-height: 30px !default;
|
||||
|
||||
/* carousel-controls-v1 */
|
||||
$opalestate-carousel-controls-v1-color: #999 !default;
|
||||
$opalestate-carousel-controls-v1-hover-color: darken($opalestate-carousel-controls-v1-color, 15%) !default;
|
||||
$opalestate-carousel-controls-v1-bg: rgba(0, 0, 0, 0.5) !default;
|
||||
|
||||
/* carousel-controls-v2 */
|
||||
$opalestate-carousel-controls-v2-color: #999 !default;
|
||||
$opalestate-carousel-controls-v2-hover-color: darken($opalestate-carousel-controls-v2-color, 25%) !default;
|
||||
|
||||
/* carousel-controls-v3 */
|
||||
$opalestate-carousel-controls-v3-color: #fff !default;
|
||||
$opalestate-carousel-controls-v3-hover-color: #fff !default;
|
||||
$opalestate-carousel-controls-v3-bg: $element-color-primary !default;
|
||||
$opalestate-carousel-controls-v3-hover-bg: darken($opalestate-carousel-controls-v3-bg, 15%) !default;
|
||||
|
||||
|
||||
|
||||
/* Navigation Styles */
|
||||
|
||||
/* carousel-indicators-v1 */
|
||||
$opalestate-carousel-indicators-v1-bg: #ddd !default;
|
||||
$opalestate-carousel-indicators-v1-hover-bg: $brand-success !default;
|
||||
|
||||
/* carousel-indicators-v2 */
|
||||
$opalestate-carousel-indicators-v2-bg: #ddd !default;
|
||||
$opalestate-carousel-indicators-v2-hover-bg: $brand-success !default;
|
||||
|
||||
/* carousel-indicators-v3 */
|
||||
$opalestate-carousel-indicators-v3-bg: $brand-success !default;
|
||||
$opalestate-carousel-indicators-v3-hover-bg: $brand-success !default;
|
||||
|
||||
/* carousel-indicators-v4 */
|
||||
$opalestate-carousel-indicators-v4-bg: $brand-success !default;
|
||||
$opalestate-carousel-indicators-v4-hover-bg: $brand-success !default;
|
||||
|
||||
|
||||
/* carousel-indicators-v5 */
|
||||
$opalestate-carousel-indicators-v5-bg: $brand-success !default;
|
||||
$opalestate-carousel-indicators-v5-hover-bg: $brand-success !default;
|
||||
|
||||
/* carousel-indicators-v6 */
|
||||
$opalestate-carousel-indicators-v6-bg: $brand-success !default;
|
||||
$opalestate-carousel-indicators-v6-hover-bg: $brand-success !default;
|
||||
|
||||
/* --- SCSS For Counters --- */
|
||||
$opalestate-counter-color: $brand-primary;
|
||||
$opalestate-counter-font-weight: 700;
|
||||
$opalestate-counter-font-size: 48px;
|
||||
|
||||
$opalestate-counter-icon-font-size: 46px;
|
||||
$opalestate-counter-heading-font-weight: 400;
|
||||
|
||||
/* --- SCSS For Heading --- */$opalestate-heading-color: $brand-success;
|
||||
|
||||
/* --- SCSS For Icon-box --- */
|
||||
|
||||
/* --- SCSS For Interactive-banner --- */
|
||||
|
||||
/* --- SCSS For Latest-posts --- *//* latest posts */
|
||||
$opalestate-latest-posts-color: #696969;
|
||||
$opalestate-latest-posts-a-color: #000;
|
||||
$opalestate-latest-posts-a-hover-color: red;
|
||||
$opalestate-latest-posts-font-size: 14px;
|
||||
$opalestate-latest-posts-title-font-size: 18px;
|
||||
|
||||
$opalestate-latest-posts-profile-font-size: 13px;
|
||||
$opalestate-latest-posts-profile-color: #696969;
|
||||
|
||||
/* --- SCSS For List --- *//* variables for list */
|
||||
$opalestate-list-color: #666 !default;
|
||||
$opalestate-list-a-color: $opalestate-list-color !default;
|
||||
$opalestate-list-a-color-hover: $brand-success !default;
|
||||
|
||||
/* variables for list light */
|
||||
|
||||
$opalestate-list-light-color: #FFFFFF !default;
|
||||
$opalestate-list-light-a-color: $opalestate-list-light-color !default;
|
||||
$opalestate-list-light-a-color-hover: $brand-success !default;
|
||||
|
||||
|
||||
/* --- SCSS For Message --- */
|
||||
|
||||
/* --- SCSS For Newsletter --- */$newsletter-v2-bg : lighten($gray-light, 50%) !default;
|
||||
$newsletter-v3-bg : $gray-dark !default;
|
||||
|
||||
|
||||
/* --- SCSS For Piechart --- */
|
||||
|
||||
/* --- SCSS For Pricing --- */
|
||||
|
||||
/* --- SCSS For Process-steps --- *//* process-steps */
|
||||
$opalestate-process-steps-color: #000;
|
||||
$opalestate-process-steps-bg: #000;
|
||||
|
||||
$opalestate-process-steps-active-color: $brand-success;
|
||||
$opalestate-process-steps-active-bg: $brand-success;
|
||||
|
||||
/* --- SCSS For Service --- *//* variables for tab style1 using as base of tab */
|
||||
|
||||
|
||||
/* --- SCSS For Style-icon --- *//* Variables icons default */
|
||||
$opalestate-style-icon-color: #fff!default;
|
||||
$opalestate-style-icon-hover-color: #fff!default;
|
||||
$opalestate-style-icon-bg: $brand-success!default;
|
||||
$opalestate-style-icon-hover-bg: darken($opalestate-style-icon-bg, 5%)!default;
|
||||
|
||||
/* Variables icons bodered */
|
||||
$opalestate-style-icon-bodered-color: $brand-success!default;
|
||||
$opalestate-style-icon-bodered-hover-color: darken($opalestate-style-icon-bodered-color, 10%)!default;
|
||||
|
||||
/* Variables icons darker */
|
||||
$opalestate-style-icon-darker-color: #fff!default;
|
||||
$opalestate-style-icon-darker-hover-color: #fff!default;
|
||||
$opalestate-style-icon-darker-bg: #000!default;
|
||||
$opalestate-style-icon-darker-hover-bg: lighten($opalestate-style-icon-darker-bg, 35%)!default;
|
||||
|
||||
/* Variables icons light */
|
||||
$opalestate-style-icon-light-color: #000!default;
|
||||
$opalestate-style-icon-light-hover-color: #fff!default;
|
||||
$opalestate-style-icon-light-bg: #f0f0f0!default;
|
||||
$opalestate-style-icon-light-hover-bg: darken($opalestate-style-icon-light-bg, 10%)!default;
|
||||
|
||||
/* Variables icons plain */
|
||||
$opalestate-style-icon-plain-color: $brand-success!default;
|
||||
$opalestate-style-icon-plain-hover-color: #000!default;
|
||||
$opalestate-style-icon-plain-bg: transparent!default;
|
||||
$opalestate-style-icon-plain-hover-bg: transparent!default;
|
||||
|
||||
/* Variables icons for light style */
|
||||
$opalestate-light-style-icon-color: $brand-success!default;
|
||||
$opalestate-light-style-icon-hover-color: $brand-success!default;
|
||||
$opalestate-light-style-icon-bg: transparent!default;
|
||||
$opalestate-light-style-icon-hover-bg: darken(#fff, 5%)!default;
|
||||
|
||||
$opalestate-light-style-icon-bodered-color: #fff!default;
|
||||
$opalestate-light-style-icon-bodered-hover-color: darken(#fff, 5%)!default;
|
||||
$opalestate-light-style-icon-bodered-bg: #fff!default;
|
||||
$opalestate-light-style-icon-bodered-hover-bg: darken(#fff, 5%)!default;
|
||||
|
||||
/* Variables icons outline */
|
||||
|
||||
$icons-outline-color: #d1d646!default;
|
||||
$icons-outline-bg: transparent!default;
|
||||
$icons-outline-border: $icons-outline-color!default;
|
||||
$icons-outline-hover-color: #fff!default;
|
||||
$icons-outline-hover-bg: $icons-outline-color!default;
|
||||
$icons-outline-hover-border: darken($icons-outline-hover-bg, 5%)!default;
|
||||
|
||||
/* Variables icons inverse */
|
||||
|
||||
$icons-inverse-color: #fff!default;
|
||||
$icons-inverse-bg: #d1d646!default;
|
||||
$icons-inverse-border: darken($icons-inverse-bg, 5%)!default;
|
||||
$icons-inverse-hover-color: #d1d646!default;
|
||||
$icons-inverse-hover-bg: transparent!default;
|
||||
$icons-inverse-hover-border: $icons-inverse-bg!default;
|
||||
|
||||
|
||||
/* --- SCSS For Table --- */
|
||||
|
||||
/* --- SCSS For Tabs --- */
|
||||
/* variables for tab style1 using as base of tab */
|
||||
$opalestate-tabs-a-color:#FFFFFF !default;
|
||||
$opalestate-tabs-a-color-active:#000000 !default;
|
||||
|
||||
$opalestate-tabs-padding: 10px 20px !default;
|
||||
$opalestate-tabs-background: $brand-primary !default;
|
||||
$opalestate-tabs-background-hover: #f6f6f6 !default;
|
||||
$opalestate-tabs-content-background:#f6f6f6 !default;
|
||||
|
||||
$opalestate-tabs-border-color : #eee !default;
|
||||
$opalestate-tabs-content-border: 1px solid $opalestate-tabs-border-color !default;
|
||||
$opalestate-tabs-content-padding: 15px 20px!default;
|
||||
|
||||
|
||||
/* tab style version 5 */
|
||||
$opalestate-tabs-primary-background-hover:#000000!default;
|
||||
$opalestate-tabs-primary-background:#FFFFFF !default;
|
||||
|
||||
/* tab style version 6 */
|
||||
$opalestate-tabs-v6-heading-background: #FFFFFF !default;
|
||||
|
||||
$opalestate-tabs-v6-a-color : #000000 !default;
|
||||
$opalestate-tabs-v6-a-color-active:red !default;
|
||||
$opalestate-tabs-v6-heading-padding: 10px 20px;
|
||||
$opalestate-tabs-v6-heading-border-top-color:#000000 !default;
|
||||
|
||||
$opalestate-tabs-v6-heading-border-color:#eee !default;
|
||||
$opalestate-tabs-v6-content-border-color:1px solid $opalestate-tabs-border-color !default;
|
||||
|
||||
/* --- SCSS For Testimonials --- *//* testimonials default */
|
||||
$opalestate-testimonials-color: #696969;
|
||||
$opalestate-testimonials-a-color: #696969;
|
||||
$opalestate-testimonials-heading-color: #696969;
|
||||
|
||||
|
||||
/* testimonials-v1 */
|
||||
$opalestate-testimonials-v1-color: #696969;
|
||||
$opalestate-testimonials-v1-a-color: #696969;
|
||||
$opalestate-testimonials-v1-background: #f3f3f3;
|
||||
$opalestate-testimonials-v1-light-background: #fff;
|
||||
$opalestate-testimonials-v1-light-color: $gray-dark;
|
||||
|
||||
/* testimonials light */
|
||||
$opalestate-testimonials-light-color: #fff;
|
||||
$opalestate-testimonials-light-a-color: #fff;
|
||||
$opalestate-testimonials-light-heading-color: #fff;
|
||||
|
||||
|
||||
|
||||
/* --- SCSS For Typography --- */
|
||||
$opalestate-blockquote-icon-background : $brand-primary !default;
|
||||
$opalestate-blockquote-icon-color : #FFFFFF !default;
|
||||
$opalestate-blockquote-icon-font-size : 17px !default;
|
||||
$opalestate-blockquote-icon-line-height : 22px !default;
|
||||
|
||||
$opalestate-blockquote-color : #000000 !default;
|
||||
114
assets/scss/components/vars/_form.scss
Executable file
114
assets/scss/components/vars/_form.scss
Executable file
@@ -0,0 +1,114 @@
|
||||
// Select
|
||||
// -------------------------
|
||||
$select-size : 32px !default;
|
||||
$select-border-color : $border-color !default;
|
||||
$select-padding : 4px 6px !default;
|
||||
|
||||
// Input
|
||||
// -------------------------
|
||||
$input-padding : 5px 6px !default;
|
||||
$input-font-size : $font-size-base - 1;
|
||||
|
||||
$input-group-form-bg : transparent !default;
|
||||
$input-group-form-margin : 0 0 5px 0!default;
|
||||
$input-group-padding : 6px 11px !default;
|
||||
$input-group-font-size : 12px !default;
|
||||
$input-group-addon-color : #fff !default;
|
||||
$input-group-height : 42px !default;
|
||||
|
||||
$input-form-bg : $gray-darker !default;
|
||||
|
||||
// Button
|
||||
// -------------------------
|
||||
$btn-transform : uppercase !default;
|
||||
$btn-padding-vertical : 5px !default;
|
||||
$btn-padding-horizontal : 20px !default;
|
||||
$btn-font-size : 12px !default;
|
||||
$btn-line-height : 30px !default;
|
||||
$btn-border-radius : 4px !default;
|
||||
|
||||
$btn-lg-padding-vertical : 15px !default;
|
||||
$btn-lg-padding-horizontal : 30px !default;
|
||||
$btn-lg-font-size : 18px !default;
|
||||
$btn-lg-line-height : $line-height-large !default;
|
||||
$btn-lg-border-radius : 5px !default;
|
||||
|
||||
$btn-sm-padding-vertical : 7px !default;
|
||||
$btn-sm-padding-horizontal : 12px !default;
|
||||
$btn-sm-font-size : 10px !default;
|
||||
$btn-sm-line-height : $line-height-small !default;
|
||||
$btn-sm-border-radius : $border-radius-small !default;
|
||||
|
||||
$btn-xs-padding-vertical : 4px !default;
|
||||
$btn-xs-padding-horizontal : 10px !default;
|
||||
$btn-xs-font-size : 10px !default;
|
||||
$btn-xs-line-height : $line-height-small !default;
|
||||
$btn-xs-border-radius : $border-radius-small !default;
|
||||
|
||||
$btn-outline-color : $white !default;
|
||||
$btn-outline-hover-color : $white !default;
|
||||
$btn-outline-height : 36px !default;
|
||||
$btn-outline-padding : 3px 15px !default;
|
||||
$btn-outline-bg : $theme-color !default;
|
||||
$btn-outline-hover-bg :$theme-color-second !default;
|
||||
$btn-outline-border : 0 !default;
|
||||
$btn-outline-border-hover : 0 !default;
|
||||
$btn-outline-font-size : 12px !default;
|
||||
$btn-outline-line-height : 28px !default;
|
||||
$btn-outline-border-radius : 0 !default;
|
||||
|
||||
$btn-outline-sm-padding-vertical : 8px !default;
|
||||
$btn-outline-sm-padding-horizontal : 18px !default;
|
||||
$btn-outline-sm-font-size : 11px !default;
|
||||
$btn-outline-sm-line-height : 1.3 !default;
|
||||
$btn-outline-sm-border-radius : 3px !default;
|
||||
|
||||
$btn-outline-xs-padding-vertical : 5px !default;
|
||||
$btn-outline-xs-padding-horizontal : 15px !default;
|
||||
$btn-outline-xs-font-size : 11px !default;
|
||||
$btn-outline-xs-line-height : 1.2 !default;
|
||||
$btn-outline-xs-border-radius : 3px !default;
|
||||
|
||||
$btn-outline-lg-padding-vertical : 21px !default;
|
||||
$btn-outline-lg-padding-horizontal : 48px !default;
|
||||
$btn-outline-lg-font-size : 14px !default;
|
||||
$btn-outline-lg-line-height : 3 !default;
|
||||
$btn-outline-lg-border-radius : 4px !default;
|
||||
|
||||
$btn-inverse-color : $black !default;
|
||||
$btn-inverse-hover-color : $white !default;
|
||||
$btn-inverse-bg : $white !default;
|
||||
$btn-inverse-hover-bg : $black !default;
|
||||
$btn-inverse-border-color : $border-color !default;
|
||||
$btn-inverse-border-hover-color : $border-color !default;
|
||||
$btn-inverse-font-size : 12px !default;
|
||||
$btn-inverse-padding : 10px 15px !default;
|
||||
|
||||
$btn-outline-inverse-color : $theme-color-second !default;
|
||||
$btn-outline-inverse-bg : $black !default;
|
||||
$btn-outline-inverse-border-color : 1px solid $btn-outline-inverse-bg !default;
|
||||
$btn-outline-inverse-hover-bg : $theme-color !default;
|
||||
$btn-outline-inverse-hover-color : $white !default;
|
||||
$btn-outline-inverse-border-hover-color : 1px solid $theme-color-second !default;
|
||||
|
||||
// Search
|
||||
// -------------------------
|
||||
$search-bg : $white !default;
|
||||
$search-font-size : 12px !default;
|
||||
$search-padding : 15px !default;
|
||||
$search-width : auto !default;
|
||||
$search-button-bg : transparent !default;
|
||||
$search-main-button-bg : $white !default;
|
||||
$search-main-button-border : $border-color !default;
|
||||
$search-main-button-color : $gray-darker !default;
|
||||
$search-button-border : 0px !default;
|
||||
$search-button-hover-bg : $white !default;
|
||||
$search-button-color : $white !default;
|
||||
$search-button-size : 36px !default;
|
||||
$search-button-hover-color : $gray-darker !default;
|
||||
$search-radius : 3px !default;
|
||||
$search-height : 50px !default;
|
||||
$search-border : transparent !default;
|
||||
$search-hover-border : $border-color !default;
|
||||
$search-border-radius : 4px !default;
|
||||
$search-categories-border-radius : 4px !important;
|
||||
91
assets/scss/components/vars/_layout.scss
Executable file
91
assets/scss/components/vars/_layout.scss
Executable file
@@ -0,0 +1,91 @@
|
||||
|
||||
// Topbar
|
||||
// -------------------------
|
||||
$topbar-bg : #1c2b49 !default;
|
||||
$topbar-link-color : $light-gray !default;
|
||||
$topbar-link-hover-color : $theme-color !default;
|
||||
$topbar-color : $light-gray !default;
|
||||
$topbar-border : 0 !default;
|
||||
$topbar-font-size : 14px !default;
|
||||
$topbar-icon-color : $theme-color !default;
|
||||
$topbar-icon-font-size : 14px !default;
|
||||
$topbar-text-transform : none !default;
|
||||
$topbar-padding : 0 !default;
|
||||
|
||||
//// Header
|
||||
|
||||
$header-main-padding : 30px 0 !default;
|
||||
$header-main-margin : 0 !default;
|
||||
$header-bg-color: #233354 !default;
|
||||
|
||||
|
||||
$massbottom-head-bg : $theme-color !default;
|
||||
$massbottom-head-padding : 6px 9px !default;
|
||||
$massbottom-head-color : $theme-color !default;
|
||||
$massbottom-head-border-color: darken($massbottom-head-bg,4%)!default;
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
|
||||
$mainmenu-bg: #222222 !default;
|
||||
|
||||
|
||||
|
||||
|
||||
// Footer
|
||||
// -------------------------
|
||||
$footer-bg : none !default;
|
||||
$footer-color : #ccc !default;
|
||||
$footer-transform : none !default;
|
||||
$footer-font-size : 14px !default;
|
||||
$footer-border : none !default;
|
||||
$footer-padding-top : 60px !default;
|
||||
$footer-padding-bottom : 0 !default;
|
||||
$footer-text-hightlight : $white !default;
|
||||
$footer-link-font-size : 14px !default;
|
||||
$footer-column-margin : 0 0 25px 0 !default;
|
||||
$footer-link-color : #FFF !default;
|
||||
$footer-link-hover-color : $theme-color !default;
|
||||
$footer-icon-color : darken($white, 20%) !default;
|
||||
$footer-icon-font-size : 13px !default;
|
||||
$footer-heading-font-size : 16px !default;
|
||||
$footer-heading-color : $white !default;
|
||||
$footer-heading-margin : 0 0 25px !default;
|
||||
$footer-heading-padding : 0 0 15px !default;
|
||||
$footer-heading-display : none !default;
|
||||
$footer-heading-transform : uppercase !default;
|
||||
$footer-list-transform : none !default;
|
||||
$footer-list-font-size : 14px !default;
|
||||
$footer-list-margin : 0 0 10px !default;
|
||||
$footer-list-light-height : 2.5 !default;
|
||||
$footer-heading-fweight : 400 !default;
|
||||
$footer-heading-ffamily : $font-family-second !default;
|
||||
|
||||
$footer-newsletter-padding : 25px !default;
|
||||
$footer-newsletter-bg : $theme-color !default;
|
||||
$footer-newsletter-color : #484848 !default;
|
||||
$footer-newsletter-heading-font-size : 18px !default;
|
||||
|
||||
$footer-top-bg : $white !default;
|
||||
$footer-top-color : $black !default;
|
||||
$footer-top-padding-top : 12px !default;
|
||||
$footer-top-padding-bottom : 12px !default;
|
||||
$footer-top-font-size : 12px !default;
|
||||
$footer-top-letter-spacing : 2px !default;
|
||||
$footer-top-border-color : rgba(0, 0, 0, 0.1);
|
||||
// Copyright
|
||||
// -------------------------
|
||||
|
||||
// Copyright
|
||||
// -------------------------
|
||||
$copyright-bg : none !default;
|
||||
$copyright-color : $light-gray !default;
|
||||
$copyright-link-color : $light-gray !default;
|
||||
$copyright-padding-top : 30px !default;
|
||||
$copyright-padding-bottom : 30px !default;
|
||||
$copyright-font-size : 14px !default;
|
||||
$copyright-font-weight : 400 !default;
|
||||
|
||||
$del-font-size : 12px !default;
|
||||
$del-color : #999999;
|
||||
95
assets/scss/components/vars/_nav.scss
Executable file
95
assets/scss/components/vars/_nav.scss
Executable file
@@ -0,0 +1,95 @@
|
||||
// Main Menu
|
||||
// -------------------------
|
||||
$megamenu-bg : $white !default;
|
||||
$navbar-mega-border : transparent !default;
|
||||
$navbar-mega-line-height : 75px !default;
|
||||
|
||||
$navbar-mega-skin2-bg : transparent !default;
|
||||
$navbar-mega-skin2-border : $border-color !default;
|
||||
$navbar-mega-skin2-line-height : 30px !default;
|
||||
|
||||
$navbar-text-transform : none !default;
|
||||
|
||||
$navbar-font-size : 14px !default;
|
||||
$navbar-font-weight : 400 !default;
|
||||
|
||||
$navbar-link-margin : 0 !default;
|
||||
$navbar-link-padding : 6px 20px !default;
|
||||
$navbar-link-color : $white !default;
|
||||
$navbar-link-hover-color : $theme-color !default;
|
||||
$navbar-link-hover-bg : $nocolor !default;
|
||||
$navbar-link-active-color : $theme-color !default;
|
||||
$navbar-link-active-bg : $nocolor !default;
|
||||
$navbar-link-font-family : $headings-font-family !default;
|
||||
|
||||
$navbar-widget-title-color : $black !default;
|
||||
$navbar-widget-title-margin : 0 0 10px 0 !default;
|
||||
$navbar-widget-title-font-size : 14px !default;
|
||||
$navbar-widget-title-font-weight : 900 !default;
|
||||
|
||||
$navbar-dropdown-padding : 8px 18px !default;
|
||||
$navbar-dropdown-bg : #fff !default;
|
||||
$navbar-dropdown-size : 200px !default;
|
||||
$navbar-dropdown-link-color : #000 !default;
|
||||
$navbar-dropdown-link-hover-color : $theme-color !default;
|
||||
$navbar-dropdown-link-hover-bg : $nocolor !default;
|
||||
$navbar-dropdown-link-transform : none !default;
|
||||
$navbar-dropdown-link-font-size : 14px !default;
|
||||
$navbar-dropdown-link-font-weight : 400 !default;
|
||||
$navbar-dropdown-link-border-color : $nocolor !default;
|
||||
|
||||
$navbar-link-small-padding : 18px 0 !default;
|
||||
$navbar-link-large-padding : 46px 0 46px !default;
|
||||
|
||||
// Vertical Menu
|
||||
// -------------------------
|
||||
|
||||
// Top Menu
|
||||
// -------------------------
|
||||
$navbar-menutop-font-weight : 800 !default;
|
||||
$navbar-menutop-font-size : 12px !default;
|
||||
$navbar-menutop-padding-top : 22px !default;
|
||||
$navbar-menutop-padding-bottom : 18px !default;
|
||||
$navbar-menutop-color : #828282 !default;
|
||||
$navbar-menutop-margin : 0 10px !default;
|
||||
|
||||
// Off-Canvas Menu
|
||||
// -------------------------
|
||||
$navbar-offcanvas-width : 69% !default;
|
||||
$navbar-offcanvas-bg-close : $nocolor !default;
|
||||
$navbar-offcanvas-color : $black !default;
|
||||
$navbar-offcanvas-bg : #f5f5f5 !default;
|
||||
$navbar-offcanvas-border : rgba(0, 0, 0, 0.1) !default;
|
||||
|
||||
// Inverted navbar links
|
||||
// -------------------------
|
||||
$navbar-offcanvas-link-color : $text-color !default;
|
||||
$navbar-offcanvas-link-hover-color : #0281AB !default;
|
||||
$navbar-offcanvas-link-hover-bg : transparent !default;
|
||||
$navbar-offcanvas-link-active-color : $navbar-offcanvas-link-hover-color !default;
|
||||
$navbar-offcanvas-link-active-bg : darken($navbar-offcanvas-bg, 10%) !default;
|
||||
$navbar-offcanvas-link-disabled-color : #444 !default;
|
||||
$navbar-offcanvas-link-disabled-bg : transparent !default;
|
||||
$navbar-offcanvas-link-font-size : 14px !default;
|
||||
|
||||
// Inverted navbar brand label
|
||||
// -------------------------
|
||||
$navbar-offcanvas-brand-color : $navbar-offcanvas-link-color !default;
|
||||
$navbar-offcanvas-brand-hover-color : $white !default;
|
||||
$navbar-offcanvas-brand-hover-bg : transparent !default;
|
||||
|
||||
// Inverted navbar search
|
||||
// -------------------------
|
||||
$navbar-offcanvas-search-bg : lighten($navbar-offcanvas-bg, 25%) !default;
|
||||
$navbar-offcanvas-search-bg-focus : $white !default;
|
||||
$navbar-offcanvas-search-border : $navbar-offcanvas-bg !default;
|
||||
$navbar-offcanvas-search-placeholder-color : $light-gray !default;
|
||||
$navbar-offcanvas-search-input-bg : transparentize($black, .10) !default;
|
||||
|
||||
// Inverted navbar toggle
|
||||
// -------------------------
|
||||
$navbar-offcanvas-toggle-hover-bg : $gray-dark !default;
|
||||
$navbar-offcanvas-toggle-icon-bar-bg : $white !default;
|
||||
$navbar-offcanvas-toggle-border-color : $gray-dark !default;
|
||||
|
||||
$navbar-offcanvas-button-position : -172px !default;
|
||||
88
assets/scss/components/vars/_widget.scss
Executable file
88
assets/scss/components/vars/_widget.scss
Executable file
@@ -0,0 +1,88 @@
|
||||
/**
|
||||
* Blocks Layout Selectors
|
||||
*/
|
||||
$block-prefix : 'widget' !default;
|
||||
$block-selector : 'widget ' !default;
|
||||
$block-heading-selector : 'widget-title, .widgettitle' !default;
|
||||
$block-content-selector : 'widget-content' !default;
|
||||
$block-heading-reversed-selector : 'widget-title-reversed' !default;
|
||||
$container-prefix : 'wpb-container' !default;
|
||||
|
||||
|
||||
|
||||
// Box Modules
|
||||
// -------------------------
|
||||
$block-module-margin-bottom : 30px !default;
|
||||
$block-module-padding : 0px !default;
|
||||
$block-module-border-color : none !default;
|
||||
|
||||
$block-module-heading-color : #000000 !default;
|
||||
$block-module-heading-border : 0px !default;
|
||||
$block-module-heading-transform : uppercase !default;
|
||||
$block-module-heading-line-height : normal !default;
|
||||
$block-module-heading-bg : transparent !default;
|
||||
$block-module-heading-padding : 0 0 15px !default;
|
||||
$block-module-heading-margin : 0 0 25px !default;
|
||||
$block-module-heading-font-size : 16px !default;
|
||||
$block-module-heading-font-weight : 700 !default;
|
||||
$block-module-heading-show-separator : none !default;
|
||||
$block-module-heading-image-position : 0 0 !default;
|
||||
|
||||
$block-module-content-bg : transparent !default;
|
||||
$block-module-content-color : #bbb !default;
|
||||
$block-module-content-border : 1px solid $border-color !default;
|
||||
$block-module-content-padding : 20px !default;
|
||||
$block-module-content-margin : 1px !default;
|
||||
$block-module-content-radius : 0px !default;
|
||||
|
||||
$block-module-highlighted-bg : $theme-color !default;
|
||||
$block-module-highlighted-border : solid 2px $theme-color !default;
|
||||
|
||||
$block-module-footer-heading-color : $white !default;
|
||||
|
||||
$block-product-padding : 0 !default;
|
||||
$block-heading-letter-spacing : 0 !default;
|
||||
|
||||
// Sidebar
|
||||
// -------------------------
|
||||
$block-sidebar-module-border : none !default;
|
||||
$block-sidebar-box-padding : 0 !default;
|
||||
$block-sidebar-box-margin : 0 0 30px !default;
|
||||
|
||||
$block-sidebar-list-padding-vertical : 13px 0px 13px 13px !default;
|
||||
$block-sidebar-list-border-color : $border-color !default;
|
||||
|
||||
$block-sidebar-hightlight-margin : 0 0 20px !default;
|
||||
$block-sidebar-heading-margin : 0 !default;
|
||||
$block-sidebar-heading-hightlight-bg : $nocolor !default;
|
||||
$block-sidebar-heading-hightlight-padding : 0 !default;
|
||||
$block-sidebar-heading-hightlight-margin : 0 !default;
|
||||
$block-sidebar-heading-hightlight-color : $black !default;
|
||||
$block-sidebar-heading-hightlight-margin-bottom : 0px !default;
|
||||
$block-sidebar-heading-hightlight-font-size : 14px !default;
|
||||
$block-sidebar-heading-hightlight-font-weight : 900 !default;
|
||||
$block-sidebar-hightlight-content-bg : $nocolor !default;
|
||||
$block-sidebar-hightlight-content-color : #666666 !default;
|
||||
$block-sidebar-hightlight-content-padding : 0 !default;
|
||||
$block-sidebar-hightlight-border : 1px solid rgba(0, 0, 0, 0.1) !default;
|
||||
$block-sidebar-hightlight-font-size : 12px !default;
|
||||
$block-sidebar-hightlight-transform : uppercase !default;
|
||||
$block-sidebar-hightlight-font-weight : 300 !default;
|
||||
$block-sidebar-link-hightlight-color : $white !default;
|
||||
$block-sidebar-link-hightlight-hover-color : $theme-color !default;
|
||||
$block-sidebar-list-hightlight-border-color : #393939 !default;
|
||||
$block-sidebar-list-hightlight-font-size : 10px !default;
|
||||
$block-sidebar-list-hightlight-padding : 17px 15px !default;
|
||||
$block-sidebar-list-hightlight-image : url('#{$image-theme-path}dot.jpg') 0 22px no-repeat !default;
|
||||
$block-sidebar-list-image : url('#{$image-theme-path}dot.jpg') 0 22px no-repeat !default;
|
||||
|
||||
$block-sidebar-heading-padding : 0 0 30px !default;
|
||||
$block-sidebar-heading-margin : 0 !default;
|
||||
$block-sidebar-heading-font-size : 14px !default;
|
||||
$block-sidebar-heading-color : $black !default;
|
||||
$block-sidebar-heading-line-height : 20px !default;
|
||||
$block-sidebar-heading-font-weight : 900 !default;
|
||||
|
||||
$block-sidebar-widget-border : 1px solid lighten($border-color, 3%) !default;
|
||||
|
||||
/********* LAYOUT **************/
|
||||
Reference in New Issue
Block a user