// ================================================================================================ // File Name: pallette.scss // Description: Custom color system styles, includes background, border and text colors // ================================================================================================ // ================================================================================================ // WARNING: PLEASE DO NOT CHANGE THIS VARIABLE FILE. // THIS FILE WILL GET OVERWRITTEN WITH EACH APEX TEMPLATE RELEASE. // TIP: // We suggest you to use this (assets/scss/colors/palette.scss) file for overriding color variables. // ================================================================================================ @import "../mixins/colors"; // usage: color("name_of_color", "type_of_color") // to avoid to repeating map-get($colors, ...) @function color-function($color, $type) { @if map-has-key($colors, $color) { $curr_color: map-get($colors, $color); @if map-has-key($curr_color, $type) { @return map-get($curr_color, $type); } } @return null; } // Color palettes @import "app-colors"; @each $gcolor_name, $gcolor in $gradient-colors { $start-color : map-get($gcolor, start-color); $end-color : map-get($gcolor, end-color); .#{$gcolor_name}{ @include gradient-directional($start-color, $end-color); } .btn.#{$gcolor_name}{ &:active, &.active{ @include gradient-directional($start-color, $end-color); } } } @each $color_name, $color in $colors { @each $color_type, $color_value in $color { @if $color_type == "base" { .#{$color_name} { color: $color_value !important; } .bg-#{$color_name} { background-color: $color_value !important; .card-header, .card-footer{ background-color: transparent; } } .toast-#{$color_name}{ background-color: $color_value; } .alert-#{$color_name} { border-color: $color_value !important; background-color: lighten($color_value, 7%) !important; color: darken($color_value, 35%) !important; .alert-link{ color: darken($color_value, 43%) !important; } } .border-#{$color_name}{ border-color: $color_value; } .border-top-#{$color_name} { border-top-color: $color_value; } .border-bottom-#{$color_name} { border-bottom-color: $color_value; } .border-left-#{$color_name} { border-left-color: $color_value; } .border-right-#{$color_name} { border-right-color: $color_value; } .badge-#{$color_name}{ background-color: $color_value; } .panel-#{$color_name}{ border-color: $color_value; .panel-heading{ color: #FFF; border-color: $color_value; background-color: lighten($color_value,5%); } } .bg-#{$color_name}, .border-#{$color_name}{ &.tag-glow{ box-shadow: 0px 0px 10px $color_value; } } .overlay-#{$color_name}{ @include bg-opacity($color_value, 0.8); } .card.card-outline-#{$color_name}{ border-width: 1px; border-style: solid; border-color: $color_value; background-color: transparent; .card-header, .card-footer{ background-color: transparent; } } .btn-#{$color_name}{ &.btn-flat{ background-color: transparent !important; color: $color_value; border: none; } &.btn-raised, &.btn-fab{ background-color: $color_value !important; color: #fff !important; border-color: $color_value; &.active{ background-color: darken($color_value,7%) !important; border-color: darken($color_value,7%) !important; } } color: $color_value !important; } .btn-group-raised{ .btn-#{$color_name}{ background-color: $color_value !important; color: #fff !important; } } .btn-outline-#{$color_name}{ border: 1px solid; border-color: $color_value; background-color: transparent; color: $color_value; box-shadow: none !important; &:focus{ background-color: transparent !important; color: $color_value !important; box-shadow: transparent !important; } &.active{ background-color: $color_value !important; color: #FFF !important; } &:hover{ background-color: darken($color_value, 3%) !important; color: #FFF !important; } } .btn-outline-#{$color_name}{ &.btn-raised, &.btn-fab{ border: 1px solid; border-color: $color_value; background-color: transparent; color: $color_value; box-shadow: none !important; &:focus{ background-color: transparent; } &.active{ background-color: $color_value !important; color: #FFF !important; } &:hover{ background-color: darken($color_value, 3%) !important; color: #FFF !important; } } } .progress{ .progress-bar{ &.progress-bar-#{$color_name}{ @include progress-variant($color_value); } } } input:focus ~ .bg-#{$color_name}{ box-shadow: 0 0 0 .075rem #fff, 0 0 0 .21rem $color_value !important; } } @else { .#{$color_name}.#{$color_type} { color: $color_value !important; } .bg-#{$color_name}.bg-#{$color_type} { background-color: $color_value !important; } .btn-#{$color_name}.btn-#{$color_type}{ border-color: color-function($color_name, "darken-2") !important; background-color: $color_value !important; &:hover{ border-color: color-function($color_name, "darken-2") !important; background-color: color-function($color_name, "darken-3") !important; } &:focus,&:active{ border-color: color-function($color_name, "darken-3") !important; background-color: color-function($color_name, "darken-4") !important; } } .btn-outline-#{$color_name}.btn-outline-#{$color_type}{ border-color: $color_value !important; color: $color_value !important; &:hover{ background-color: $color_value !important; } } .progress-#{$color_name}.progress-#{$color_type}{ @include progress-variant($color_value); } input:focus ~ .bg-#{$color_name}{ box-shadow: 0 0 0 .075rem #fff, 0 0 0 .21rem $color_value !important; } .border-#{$color_name}.border-#{$color_type} { border: 1px solid $color_value !important; } .border-top-#{$color_name}.border-top-#{$color_type} { border-top: 1px solid $color_value !important; } .border-bottom-#{$color_name}.border-bottom-#{$color_type} { border-bottom: 1px solid $color_value !important; } .border-left-#{$color_name}.border-left-#{$color_type} { border-left: 1px solid $color_value !important; } .border-right-#{$color_name}.border-right-#{$color_type} { border-right: 1px solid $color_value !important; } .overlay-#{$color_name}.overlay-#{$color_type}{ @include bg-opacity($color_value, 0.8); } } } } // Shade classes @each $color, $color_value in $shades { .#{$color} { color: $color_value; } .bg-#{$color} { background-color: $color_value; } input:focus ~ .bg-#{$color}{ // TODO: Need to check input-type sibling border color issue(form>input-groups) box-shadow: 0 0 0 .075rem #fff, 0 0 0 .21rem $color_value; } .border-#{$color} { border: 1px solid $color_value; } .border-top-#{$color} { border-top: 1px solid $color_value; } .border-bottom-#{$color} { border-bottom: 1px solid $color_value; } .border-left-#{$color} { border-left: 1px solid $color_value; } .border-right-#{$color} { border-right: 1px solid $color_value; } }