// Mixins
|
//
|
|
// *******************************************************************************
|
// * RTL/LTR
|
|
@mixin ltr-only() {
|
@if $rtl-support {
|
html:not([dir=rtl]) {
|
@content;
|
}
|
} @else {
|
@content;
|
}
|
}
|
|
@mixin rtl-only() {
|
@if $rtl-support {
|
[dir=rtl] {
|
@content;
|
}
|
}
|
}
|
|
@mixin ltr-style() {
|
@if $rtl-support {
|
html:not([dir=rtl]) & {
|
@content;
|
}
|
} @else {
|
@content;
|
}
|
}
|
|
@mixin rtl-style() {
|
@if $rtl-support {
|
[dir=rtl] & {
|
@content;
|
}
|
}
|
}
|
|
// *******************************************************************************
|
// * Keyframes
|
|
@mixin keyframes($name) {
|
@-webkit-keyframes #{$name} {
|
@content;
|
}
|
@-moz-keyframes #{$name} {
|
@content;
|
}
|
@keyframes #{$name} {
|
@content;
|
}
|
}
|
|
// *******************************************************************************
|
// * Carets
|
|
@mixin caret-down {
|
margin-top: -1 * ($caret-width / 1.5);
|
width: $caret-width;
|
height: $caret-width;
|
border: 1px solid;
|
border-top: 0;
|
border-left: 0;
|
transform: rotate(45deg);
|
}
|
|
@mixin caret-up {
|
margin-top: -0;
|
width: $caret-width;
|
height: $caret-width;
|
border: 1px solid;
|
border-bottom: 0;
|
border-left: 0;
|
transform: rotate(-45deg);
|
}
|
|
@mixin caret-right {
|
margin-top: -1 * ($caret-width / 2);
|
width: $caret-width;
|
height: $caret-width;
|
border: 1px solid;
|
border-top: 0;
|
border-left: 0;
|
transform: rotate(-45deg);
|
}
|
|
@mixin caret-left {
|
margin-top: -1 * ($caret-width / 2);
|
width: $caret-width;
|
height: $caret-width;
|
border: 1px solid;
|
border-top: 0;
|
border-right: 0;
|
transform: rotate(45deg);
|
}
|
|
// *******************************************************************************
|
// * Responsize loops
|
|
@mixin responsive-loop-before($parent, $start-breakpoint: sm) {
|
$cur-breakpoint: $start-breakpoint;
|
|
@while $cur-breakpoint {
|
$infix: breakpoint-infix($cur-breakpoint);
|
|
@media (max-width: (breakpoint-min($cur-breakpoint) - 1)) {
|
#{$parent}#{$infix} {
|
@content;
|
}
|
}
|
|
$cur-breakpoint: breakpoint-next($cur-breakpoint);
|
}
|
}
|
|
@mixin responsive-loop-after($parent, $start-breakpoint: sm) {
|
$cur-breakpoint: $start-breakpoint;
|
|
@while $cur-breakpoint {
|
$infix: breakpoint-infix($cur-breakpoint);
|
|
@media (min-width: breakpoint-min($cur-breakpoint)) {
|
#{$parent}#{$infix} {
|
@content;
|
}
|
}
|
|
$cur-breakpoint: breakpoint-next($cur-breakpoint);
|
}
|
}
|
|
// *******************************************************************************
|
// * Colors
|
|
// Contrast
|
@mixin color-yiq($color) {
|
color: yiq($color);
|
}
|
|
@mixin bg-color-variant($parent, $color, $rth-color: #000) {
|
#{$parent} { background-color: $color !important; }
|
a#{$parent} {
|
@include hover-focus { background-color: rgba-to-hex(rgba($color, .95), $background: $rth-color) !important; }
|
}
|
}
|
|
@mixin bg-variant($parent, $color, $rth-color: #000) {
|
@include bg-color-variant($parent, $color);
|
@include bg-color-variant("#{$parent}-dark", rgba-to-hex(rgba($color, .9), $background: $rth-color));
|
@include bg-color-variant("#{$parent}-darker", rgba-to-hex(rgba($color, .85), $background: $rth-color));
|
}
|
|
// *******************************************************************************
|
// * Buttons
|
|
@mixin button-variant($background: null, $border: null, $active-background: null, $active-border: null) {}
|
|
@mixin appwork-button-variant($parent, $background, $color: null, $border: null) {
|
$btn-colors: get-btn-colors($background, if($border, $border, $background));
|
$color: if($color, $color, yiq($background));
|
|
#{$parent} {
|
border-color: map-get($btn-colors, border);
|
background: $background;
|
color: $color;
|
|
@include box-shadow($btn-box-shadow);
|
@include hover {
|
border-color: map-get($btn-colors, border);
|
background: map-get($btn-colors, bg-hover);
|
color: $color;
|
}
|
|
&:focus,
|
&.focus {
|
box-shadow: map-get($btn-colors, shadow);
|
}
|
|
&.disabled,
|
&:disabled {
|
border-color: map-get($btn-colors, border) !important;
|
background: $background !important;
|
box-shadow: none !important;
|
color: $color !important;
|
}
|
}
|
|
#{$parent} .badge {
|
background: $color;
|
color: rgba-to-hex($background);
|
}
|
|
#{$parent}:active,
|
#{$parent}.active,
|
.show > #{$parent}.dropdown-toggle {
|
border-color: map-get($btn-colors, border);
|
background: map-get($btn-colors, bg-active);
|
|
@if $enable-shadows {
|
@include box-shadow($btn-active-box-shadow);
|
} @else {
|
box-shadow: none;
|
}
|
}
|
|
// Button groups
|
.btn-group #{$parent},
|
.input-group-prepend #{$parent},
|
.input-group-append #{$parent} {
|
border-right: $input-btn-border-width solid map-get($btn-colors, bg-active);
|
border-left: $input-btn-border-width solid map-get($btn-colors, bg-active);
|
}
|
}
|
|
@mixin appwork-material-button-variant($parent, $background, $color: null, $md-color: $background) {
|
$btn-colors: get-material-btn-colors($background);
|
$color: if($color, $color, yiq($background));
|
|
#{$parent} {
|
background: $background;
|
box-shadow: $btn-box-shadow;
|
color: $color;
|
|
@include hover {
|
background: map-get($btn-colors, bg-hover);
|
color: $color;
|
}
|
|
@include hover-focus {
|
box-shadow: $btn-focus-box-shadow;
|
}
|
}
|
|
#{$parent} .badge {
|
background: $color;
|
color: rgba-to-hex($background);
|
}
|
|
#{$parent} .waves-ripple {
|
background: if($color == #fff, rgba($color, .3), rgba($color, .2)) !important;
|
}
|
|
#{$parent}:active,
|
#{$parent}.active,
|
.show > #{$parent}.dropdown-toggle {
|
background: map-get($btn-colors, bg-active);
|
box-shadow: $btn-active-box-shadow;
|
}
|
|
// Flat buttons
|
#{$parent}.md-btn-flat {
|
background: none !important;
|
box-shadow: none !important;
|
color: $md-color !important;
|
|
&:focus,
|
&.focus {
|
background: rgba($md-color, .1) !important;
|
}
|
|
.waves-ripple {
|
background: rgba($md-color, .3) !important;
|
}
|
}
|
|
#{$parent}.md-btn-flat:active,
|
#{$parent}.md-btn-flat.active,
|
.show > #{$parent}.md-btn-flat.dropdown-toggle {
|
background: rgba($md-color, .15) !important;
|
}
|
|
// Disabled
|
|
#{$parent}.disabled,
|
#{$parent}:disabled {
|
background: $background !important;
|
box-shadow: $material-component-shadow !important;
|
color: $color !important;
|
}
|
|
#{$parent}.md-btn-flat.disabled,
|
#{$parent}.md-btn-flat:disabled {
|
background: none !important;
|
box-shadow: none !important;
|
color: $background !important;
|
}
|
}
|
|
// *******************************************************************************
|
// * Outline buttons
|
|
@mixin button-outline-variant($color: null, $color-hover: null, $hover-color: null) {}
|
|
@mixin appwork-button-outline-variant($parent, $color, $hover-color: null) {
|
$btn-colors: get-btn-colors($color, $color);
|
$color-hover: if($hover-color, $hover-color, yiq($color));
|
|
#{$parent} {
|
border-color: $color;
|
background: transparent;
|
color: $color;
|
|
@include hover {
|
border-color: map-get($btn-colors, border);
|
background: $color;
|
color: $color-hover;
|
|
.badge {
|
background: $color-hover;
|
color: if(alpha($color) == 1, $color, yiq($color-hover));
|
}
|
}
|
|
&:focus,
|
&.focus {
|
box-shadow: map-get($btn-colors, shadow);
|
}
|
|
&.disabled,
|
&:disabled {
|
border-color: $color !important;
|
background: transparent !important;
|
color: $color !important;
|
}
|
}
|
|
#{$parent} .badge {
|
background: $color;
|
color: #fff;
|
}
|
|
#{$parent}:active,
|
#{$parent}.active,
|
.show > #{$parent}.dropdown-toggle {
|
border-color: map-get($btn-colors, border);
|
background: map-get($btn-colors, bg-hover);
|
color: $color-hover;
|
|
@if $enable-shadows {
|
@include box-shadow($btn-active-box-shadow);
|
} @else {
|
box-shadow: none;
|
}
|
|
.badge {
|
background: $color-hover;
|
color: if(alpha($color) == 1, $color, yiq($color-hover));
|
}
|
}
|
}
|
|
@mixin appwork-material-button-outline-variant($parent, $color, $hover-color: null) {
|
$btn-colors: get-material-btn-colors($color);
|
$color-hover: if($hover-color, $hover-color, yiq($color));
|
|
#{$parent} {
|
background: transparent;
|
box-shadow: 0 0 0 1px $color inset;
|
color: $color;
|
|
@include hover-focus {
|
background: $color;
|
box-shadow: $btn-focus-box-shadow;
|
color: $color-hover;
|
|
.badge {
|
background: $color-hover;
|
color: if(alpha($color) == 1, $color, yiq($color-hover));
|
}
|
}
|
|
&.disabled,
|
&:disabled {
|
background: transparent !important;
|
box-shadow: 0 0 0 1px $color inset !important;
|
color: $color !important;
|
}
|
}
|
|
#{$parent} .badge {
|
background: $color;
|
color: #fff;
|
}
|
|
#{$parent} .waves-ripple {
|
background: if($color-hover == #fff, rgba($color-hover, .3), rgba($color-hover, .2)) !important;
|
}
|
|
#{$parent}:active,
|
#{$parent}.active,
|
.show > #{$parent}.dropdown-toggle {
|
background: map-get($btn-colors, bg-hover);
|
box-shadow: $btn-active-box-shadow;
|
color: $color-hover;
|
|
.badge {
|
background: $color-hover;
|
color: if(alpha($color) == 1, $color, yiq($color-hover));
|
}
|
}
|
}
|
|
// *******************************************************************************
|
// * Badges
|
|
@mixin badge-variant($bg) {}
|
|
@mixin appwork-badge-variant($parent, $bg, $color: null) {
|
#{$parent} {
|
background-color: $bg;
|
color: if($color, $color, yiq($bg));
|
}
|
|
#{$parent}[href] {
|
@include hover-focus {
|
background-color: if(alpha($bg) == 1, rgba-to-hex(rgba($bg, .95), #000), rgba($bg, alpha($bg) + .03));
|
color: if($color, $color, yiq($bg));
|
text-decoration: none;
|
}
|
}
|
|
.btn #{$parent} {
|
background-color: $bg !important;
|
color: if($color, $color, yiq($bg)) !important;
|
}
|
}
|
|
@mixin appwork-badge-outline-variant($parent, $bg, $color: $bg) {
|
#{$parent} {
|
background-color: transparent;
|
box-shadow: 0 0 0 1px $bg inset;
|
color: $color;
|
}
|
|
#{$parent}[href] {
|
@include hover-focus {
|
color: $color;
|
text-decoration: none;
|
}
|
}
|
|
.btn #{$parent} {
|
background-color: transparent !important;
|
box-shadow: 0 0 0 1px $bg inset !important;
|
color: $color !important;
|
}
|
}
|
|
// *******************************************************************************
|
// * Dropdowns
|
|
@mixin appwork-dropdown-variant($parent, $background, $color: null) {
|
#{$parent} .dropdown-item:not(.disabled).active,
|
#{$parent} .dropdown-item:not(.disabled):active {
|
background-color: $background;
|
color: if($color, $color, yiq($background));
|
}
|
|
#{$parent}.dropdown-menu > li:not(.disabled) > a:not(.dropdown-item):active,
|
#{$parent}.dropdown-menu > li.active:not(.disabled) > a:not(.dropdown-item) {
|
background-color: $background;
|
color: if($color, $color, yiq($background));
|
}
|
}
|
|
@mixin appwork-dropdown-theme($background, $color: null) {
|
@include appwork-dropdown-variant('', $background, $color);
|
}
|
|
@mixin appwork-material-dropdown-variant($parent, $background, $color: null) {
|
#{$parent} .dropdown-item:not(.disabled).active {
|
background-color: $background;
|
color: if($color, $color, yiq($background));
|
}
|
|
#{$parent}.dropdown-menu > li.active:not(.disabled) > a:not(.dropdown-item) {
|
background-color: $background;
|
color: if($color, $color, yiq($background));
|
}
|
}
|
|
@mixin appwork-material-dropdown-theme($background, $color: null) {
|
@include appwork-material-dropdown-variant('', $background, $color);
|
}
|
|
// *******************************************************************************
|
// * Navs
|
|
@mixin appwork-nav-size($padding-y, $padding-x, $font-size, $line-height) {
|
> .nav .nav-link,
|
&.nav .nav-link {
|
padding: $padding-y $padding-x;
|
font-size: $font-size;
|
line-height: $line-height;
|
}
|
}
|
|
@mixin appwork-nav-variant($parent, $background, $color: null) {
|
$pills-selector: if($parent == '', '.nav-pills', '#{$parent}.nav-pills, #{$parent} > .nav-pills');
|
|
#{$pills-selector} .nav-link.active {
|
@include plain-hover-focus {
|
background-color: $background;
|
color: if($color, $color, yiq($background));
|
}
|
}
|
|
#{$parent}.tabs-alt.nav-tabs .nav-link.active,
|
#{$parent}.tabs-alt > .nav-tabs .nav-link.active {
|
@include plain-hover-focus {
|
box-shadow: 0 -2px 0 $background inset;
|
}
|
}
|
}
|
|
@mixin appwork-nav-theme($background, $color: null) {
|
@include appwork-nav-variant('', $background, $color);
|
}
|
|
@mixin appwork-material-nav-variant($parent, $color, $link-color: null) {
|
$tabs-selector: if($parent == '', '.nav-tabs', '#{$parent}.nav-tabs');
|
$pills-selector: if($parent == '', '.nav-pills', '#{$parent}.nav-pills, #{$parent} > .nav-pills');
|
|
#{$tabs-selector} .nav-link {
|
background-image: linear-gradient($color, $color);
|
}
|
|
#{$pills-selector} .nav-link.active {
|
@include plain-hover-focus {
|
background-color: $color;
|
color: if($link-color, $link-color, yiq($color));
|
}
|
}
|
}
|
|
@mixin appwork-material-nav-theme($color, $link-color: null) {
|
@include appwork-material-nav-variant('', $color, $link-color);
|
}
|
|
// *******************************************************************************
|
// * Pagination
|
|
@mixin appwork-pagination-variant($parent, $background, $color: null) {
|
#{$parent} .page-item.active .page-link,
|
#{$parent}.pagination li.active > a:not(.page-link) {
|
@include plain-hover-focus {
|
border-color: $background !important;
|
background-color: $background !important;
|
color: if($color, $color, yiq($background)) !important;
|
}
|
}
|
}
|
|
@mixin appwork-pagination-theme($background, $color: null) {
|
@include appwork-pagination-variant('', $background, $color);
|
}
|
|
// *******************************************************************************
|
// * Progress bars
|
|
@mixin appwork-progress-bar-theme($background, $color: null) {
|
.progress-bar {
|
background-color: $background;
|
color: if($color, $color, yiq($background));
|
}
|
}
|
|
// *******************************************************************************
|
// * List groups
|
|
@mixin list-group-item-variant($state: null, $background: null, $color: null) {}
|
|
@mixin appwork-list-group-item-variant($parent, $background, $color: null) {
|
$bg: rgba-to-hex(rgba($background, .1), #fff);
|
$color: yiq($bg);
|
$hover-bg: rgba-to-hex(rgba($bg, .99), #000);
|
|
#{$parent} {
|
border-color: rgba(0,0,0,.07);
|
background-color: $bg;
|
color: $color;
|
}
|
|
a#{$parent},
|
button#{$parent} {
|
color: $color;
|
|
@include hover-focus {
|
background-color: $hover-bg;
|
color: $color;
|
}
|
|
&.active {
|
border-color: $background;
|
background-color: $background;
|
color: if($color, $color, yiq($background));
|
}
|
}
|
}
|
|
@mixin appwork-list-group-theme($background, $color: null) {
|
@include appwork-list-group-item-variant('.list-group-item-primary', $background);
|
|
.list-group-item.active {
|
@include plain-hover-focus {
|
border-color: $background;
|
background-color: $background;
|
color: if($color, $color, yiq($background));
|
}
|
}
|
}
|
|
// *******************************************************************************
|
// * Alerts
|
|
@mixin alert-variant($background: null, $border: null, $color: null) {}
|
|
@mixin appwork-alert-variant($parent, $background) {
|
$background: rgba-to-hex(rgba($background, .15), #fff);
|
$border: rgba-to-hex(rgba($background, .94), #000);
|
$color: yiq($background);
|
|
#{$parent} {
|
border-color: $border;
|
background-color: $background;
|
color: $color;
|
|
hr {
|
border-top-color: $border;
|
}
|
|
.close,
|
.alert-link {
|
color: $color;
|
}
|
}
|
}
|
|
@mixin appwork-alert-dark-variant($parent, $background, $color: null) {
|
$color: if($color, $color, yiq($background));
|
|
#{$parent} {
|
background-color: $background;
|
color: $color;
|
|
hr {
|
border-top-color: rgba(yiq($background),.2);
|
}
|
|
.close,
|
.alert-link {
|
color: $color;
|
}
|
}
|
}
|
|
// *******************************************************************************
|
// * Tooltips
|
|
@mixin appwork-tooltip-variant($parent, $background, $color: null) {
|
#{$parent} {
|
.tooltip-inner {
|
background: $background;
|
color: if($color, $color, yiq($background));
|
}
|
|
&.bs-tooltip-top .arrow::before, &.bs-tooltip-auto[x-placement^="top"] .arrow::before { border-top-color: $background; }
|
&.bs-tooltip-right .arrow::before, &.bs-tooltip-auto[x-placement^="right"] .arrow::before { border-right-color: $background; }
|
&.bs-tooltip-bottom .arrow::before, &.bs-tooltip-auto[x-placement^="bottom"] .arrow::before { border-bottom-color: $background; }
|
&.bs-tooltip-left .arrow::before, &.bs-tooltip-auto[x-placement^="left"] .arrow::before { border-left-color: $background; }
|
}
|
}
|
|
// *******************************************************************************
|
// * Popovers
|
|
@mixin appwork-popover-variant($parent, $background, $color: null) {
|
$color: if($color, $color, yiq($background));
|
|
#{$parent} {
|
border-color: transparent;
|
background: $background;
|
|
.popover-header {
|
border-color: rgba(yiq($background),.2);
|
background: transparent;
|
color: $color;
|
}
|
|
.popover-body {
|
background: transparent;
|
color: $color;
|
}
|
|
.arrow::before { border-color: transparent !important; }
|
|
&.bs-popover-top .arrow::after, &.bs-popover-auto[x-placement^="top"] .arrow::after { border-top-color: $background; }
|
&.bs-popover-right .arrow::after, &.bs-popover-auto[x-placement^="right"] .arrow::after { border-right-color: $background; }
|
&.bs-popover-bottom .arrow::after, &.bs-popover-auto[x-placement^="bottom"] .arrow::after { border-bottom-color: $background; }
|
&.bs-popover-left .arrow::after, &.bs-popover-auto[x-placement^="left"] .arrow::after { border-left-color: $background; }
|
}
|
}
|
|
// *******************************************************************************
|
// * Form controls
|
|
@mixin appwork-custom-select-size($size, $padding-y, $padding-x, $height, $font-size, $line-height) {
|
.custom-select-#{$size},
|
.input-group-#{$size} .custom-select {
|
padding: $padding-y ($padding-x + $custom-select-indicator-padding) $padding-y $padding-x;
|
height: $height;
|
background-position: right $padding-x center;
|
font-size: $font-size;
|
line-height: $line-height;
|
|
@include rtl-style {
|
&,
|
&[size="0"]:not([multiple]) {
|
padding-right: $padding-x;
|
padding-left: $padding-x + $custom-select-indicator-padding;
|
background-position: left $padding-x center;
|
}
|
}
|
|
&[size="0"]:not([multiple]) {
|
padding-right: $padding-x + $custom-select-indicator-padding;
|
}
|
}
|
}
|
|
@mixin appwork-custom-control-variant($parent, $background, $color: null, $default-background: null) {
|
$color: if($color, $color, yiq($background));
|
|
#{$parent} {
|
@if $default-background {
|
.custom-control-label::before,
|
.custom-control-input:active ~ .custom-control-label::before {
|
background-color: $default-background;
|
}
|
}
|
|
.custom-control-input {
|
&:focus ~ .custom-control-label::before,
|
&:active ~ .custom-control-label::before {
|
border-color: $background;
|
}
|
|
&:focus ~ .custom-control-label::before {
|
box-shadow: 0 0 0 $component-focus-shadow-width rgba($background, .4);
|
}
|
}
|
|
&.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before,
|
&.custom-radio .custom-control-input:checked ~ .custom-control-label::before {
|
border-color: $background;
|
background-color: $background;
|
}
|
|
&.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
|
background-image: url(str-replace(str-replace($custom-checkbox-indicator-bg, '_COLOR_', $color), "#", "%23"));
|
}
|
|
&.custom-radio .custom-control-input:checked ~ .custom-control-label::before {
|
background-image: url(str-replace(str-replace($custom-radio-indicator-bg, '_COLOR_', $color), "#", "%23"));
|
}
|
}
|
}
|
|
@mixin appwork-custom-control-theme($background, $color: null) {
|
@include appwork-custom-control-variant('.custom-control', $background, $color);
|
}
|
|
@mixin appwork-material-custom-control-variant($parent, $background, $color: null, $default-background: null) {
|
$color: if($color, $color, yiq($background));
|
|
#{$parent} {
|
@if $default-background {
|
.custom-control-label::before,
|
.custom-control-input:active ~ .custom-control-label::before {
|
background-color: $default-background;
|
}
|
}
|
|
&.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before,
|
&.custom-radio .custom-control-input:checked ~ .custom-control-label::before {
|
border-color: $background;
|
}
|
|
&.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
|
background-color: $background;
|
background-image: url(str-replace(str-replace($custom-checkbox-indicator-bg, '_COLOR_', $color), "#", "%23"));
|
}
|
|
&.custom-radio .custom-control-label::before {
|
background-image: url(str-replace(str-replace($custom-radio-indicator-bg, '_COLOR_', $background), "#", "%23"));
|
}
|
|
.custom-control-input:checked ~ .custom-control-label::after {
|
background: rgba($background, .15);
|
}
|
}
|
}
|
|
@mixin appwork-material-custom-control-theme($background, $color: null) {
|
@include appwork-material-custom-control-variant('.custom-control', $background, $color);
|
}
|
|
@mixin form-validation-state($state: null, $color: null) {}
|
|
@mixin appwork-form-validation-state($state, $color) {
|
.#{$state}-feedback {
|
display: none;
|
margin-top: $form-text-margin-top;
|
color: $color;
|
}
|
|
.#{$state}-tooltip {
|
position: absolute;
|
top: 100%;
|
z-index: 5;
|
display: none;
|
margin-top: .1rem;
|
padding: .5rem;
|
width: 250px;
|
border-radius: .2rem;
|
background-color: rgba($color,.8);
|
color: #fff;
|
line-height: 1;
|
}
|
|
.form-control,
|
.custom-select {
|
.was-validated &:#{$state},
|
&.is-#{$state} {
|
border-color: $color !important;
|
|
&:focus {
|
border-color: $color !important;
|
box-shadow: 0 0 0 $component-focus-shadow-width rgba($color,.25) !important;
|
}
|
|
~ .#{$state}-feedback,
|
~ .#{$state}-tooltip {
|
display: block;
|
}
|
}
|
}
|
|
.custom-control.custom-checkbox .custom-control-input,
|
.custom-control.custom-radio .custom-control-input {
|
.was-validated &:#{$state},
|
&.is-#{$state} {
|
~ .custom-control-label {
|
color: $color;
|
}
|
|
& ~ .custom-control-label::before,
|
&:focus ~ .custom-control-label::before,
|
&:active ~ .custom-control-label::before {
|
border-color: $color;
|
}
|
|
&:focus ~ .custom-control-label::before {
|
box-shadow: 0 0 0 $component-focus-shadow-width rgba($color, .4);
|
}
|
|
&:checked ~ .custom-control-label::before {
|
border-color: $color;
|
background-color: $color;
|
}
|
|
~ .#{$state}-feedback,
|
~ .#{$state}-tooltip {
|
display: block;
|
}
|
}
|
}
|
|
.custom-control.custom-checkbox .custom-control-input {
|
.was-validated &:#{$state},
|
&.is-#{$state} {
|
&:checked ~ .custom-control-label::before {
|
background-image: url(str-replace(str-replace($custom-checkbox-indicator-bg, '_COLOR_', yiq($color)), "#", "%23"));
|
}
|
}
|
}
|
.custom-control.custom-radio .custom-control-input {
|
.was-validated &:#{$state},
|
&.is-#{$state} {
|
&:checked ~ .custom-control-label::before {
|
background-image: url(str-replace(str-replace($custom-radio-indicator-bg, '_COLOR_', yiq($color)), "#", "%23"));
|
}
|
}
|
}
|
|
.custom-file-input {
|
.was-validated &:#{$state},
|
&.is-#{$state} {
|
~ .custom-file-label {
|
border-color: $color !important;
|
|
&::after {
|
border-color: inherit !important;
|
}
|
}
|
|
&:focus {
|
box-shadow: 0 0 0 $component-focus-shadow-width rgba($color,.3) !important;
|
}
|
}
|
}
|
}
|
|
@mixin appwork-material-form-validation-state($state, $color) {
|
.#{$state}-feedback {
|
display: none;
|
margin-top: $form-text-margin-top;
|
color: $color;
|
}
|
|
.#{$state}-tooltip {
|
position: absolute;
|
top: 100%;
|
z-index: 5;
|
display: none;
|
margin-top: .1rem;
|
padding: .5rem;
|
width: 250px;
|
border-radius: .2rem;
|
background-color: rgba($color,.8);
|
color: #fff;
|
line-height: 1;
|
}
|
|
.form-control,
|
.custom-select {
|
.was-validated &:#{$state},
|
&.is-#{$state} {
|
border-color: $color !important;
|
|
&:focus {
|
box-shadow: 0 -1px 0 0 $color inset !important;
|
}
|
|
~ .#{$state}-feedback,
|
~ .#{$state}-tooltip {
|
display: block;
|
}
|
}
|
}
|
|
|
.custom-control.custom-checkbox .custom-control-input,
|
.custom-control.custom-radio .custom-control-input {
|
.was-validated &:#{$state},
|
&.is-#{$state} {
|
~ .custom-control-label {
|
color: $color;
|
}
|
|
& ~ .custom-control-label::before,
|
&:focus ~ .custom-control-label::before,
|
&:active ~ .custom-control-label::before,
|
&:checked ~ .custom-control-label::before {
|
border-color: $color;
|
}
|
|
& ~ .custom-control-label::after {
|
background: rgba($color, .15) !important;
|
}
|
|
~ .#{$state}-feedback,
|
~ .#{$state}-tooltip {
|
display: block;
|
}
|
}
|
}
|
|
.custom-control.custom-checkbox .custom-control-input {
|
.was-validated &:#{$state}:checked ~ .custom-control-label::before,
|
&.is-#{$state}:checked ~ .custom-control-label::before {
|
background-color: $color;
|
background-image: url(str-replace(str-replace($custom-checkbox-indicator-bg, '_COLOR_', yiq($color)), "#", "%23"));
|
}
|
}
|
|
.custom-control.custom-radio .custom-control-input {
|
.was-validated &:#{$state}:checked ~ .custom-control-label::before,
|
&.is-#{$state}:checked ~ .custom-control-label::before {
|
background-image: url(str-replace(str-replace($custom-radio-indicator-bg, '_COLOR_', $color), "#", "%23"));
|
}
|
}
|
|
.was-validated .custom-file-input:#{$state},
|
.custom-file-input.is-#{$state} {
|
~ .custom-file-label {
|
border-color: $color !important;
|
}
|
|
&:focus ~ .custom-file-label {
|
box-shadow: 0 -1px 0 0 $color inset !important;
|
}
|
}
|
}
|
|
@mixin appwork-custom-file-input-theme($color) {
|
.custom-file-input:focus ~ .custom-file-label {
|
border-color: $color;
|
box-shadow: none !important;
|
|
&::after {
|
border-color: inherit;
|
}
|
}
|
}
|
|
@mixin appwork-material-custom-file-input-theme($color) {
|
.custom-file-input:focus ~ .custom-file-label {
|
border-bottom-color: $color;
|
box-shadow: 0 -1px 0 0 $color inset;
|
}
|
}
|
|
@mixin appwork-material-form-control-size($size, $line-height, $padding-y, $group-btn-font-size: null) {
|
@if $size == '' {
|
.form-control,
|
.custom-select,
|
.custom-file-label,
|
.input-group-text {
|
padding-bottom: calc(#{$padding-y} - 1px) !important;
|
line-height: $line-height;
|
}
|
} @else {
|
.form-control-#{$size},
|
.custom-select-#{$size},
|
.input-group-#{$size} > .form-control,
|
.input-group-#{$size} > .custom-select,
|
.input-group-#{$size} .input-group-text {
|
padding-bottom: calc(#{$padding-y} - 1px) !important;
|
line-height: $line-height;
|
}
|
|
.input-group-#{$size} > .input-group-prepend > .btn,
|
.input-group-#{$size} > .input-group-append > .btn {
|
padding-bottom: calc(#{$padding-y} - 1px) !important;
|
font-size: $group-btn-font-size;
|
}
|
}
|
}
|
|
@mixin appwork-form-control-theme($color) {
|
.form-control:focus,
|
.custom-select:focus {
|
border-color: $color;
|
}
|
}
|
|
@mixin appwork-material-form-control-theme($color) {
|
.form-control:focus,
|
.custom-select:focus {
|
border-bottom-color: $color;
|
box-shadow: 0 -1px 0 0 $color inset;
|
}
|
}
|
|
// *******************************************************************************
|
// * Switchers
|
|
@mixin appwork-switcher-size-base($width, $height, $font-size, $description-font-size, $description-line-height, $inner-spacer: $switcher-inner-spacer) {
|
padding-left: $width;
|
min-height: $height;
|
font-size: $description-font-size;
|
line-height: $description-line-height;
|
|
$line-height-computed: $description-font-size * $description-line-height;
|
$delta: if($material-style, px-to-rem(ceil(rem-to-px($height * .125))), 0);
|
|
.switcher-blank .switcher-indicator {
|
top: $delta !important;
|
}
|
|
.switcher-indicator {
|
width: $width;
|
height: $height - ($delta * 2);
|
font-size: $font-size;
|
line-height: $height;
|
|
@if $line-height-computed > $height {
|
top: (($line-height-computed - $height) / 2) + $delta;
|
} @else {
|
top: 0 + $delta;
|
}
|
}
|
|
.switcher-label {
|
@if $line-height-computed < $height {
|
top: ($height - $line-height-computed) / 2;
|
} @else {
|
top: 0;
|
}
|
}
|
|
.switcher-input:checked ~ .switcher-indicator::after {
|
left: $width - $height;
|
}
|
|
.switcher-indicator::after {
|
top: $delta * -1;
|
margin: $inner-spacer 0 0 $inner-spacer;
|
width: $height - $inner-spacer * 2;
|
height: $height - $inner-spacer * 2;
|
}
|
|
.switcher-no {
|
padding-right: $inner-spacer;
|
padding-left: $height - $inner-spacer;
|
}
|
|
.switcher-yes {
|
padding-right: $height - $inner-spacer;
|
padding-left: $inner-spacer;
|
}
|
|
@if $material-style {
|
.switcher-indicator::before {
|
top: $delta * -1;
|
width: $height;
|
height: $height;
|
}
|
|
.switcher-input:checked ~ .switcher-indicator::before {
|
left: $width - $height;
|
}
|
}
|
|
@if $rtl-support {
|
[dir=rtl] & {
|
padding-right: $width;
|
padding-left: 0;
|
}
|
|
[dir=rtl] & .switcher-input:checked ~ .switcher-indicator::after {
|
right: $width - $height;
|
left: auto;
|
}
|
|
[dir=rtl] & .switcher-indicator::after {
|
margin-right: $inner-spacer;
|
margin-left: 0;
|
}
|
|
[dir=rtl] & .switcher-no {
|
padding-right: $height - $inner-spacer;
|
padding-left: $inner-spacer;
|
}
|
|
[dir=rtl] & .switcher-yes {
|
padding-right: $inner-spacer;
|
padding-left: $height - $inner-spacer;
|
}
|
|
@if $material-style {
|
[dir=rtl] & .switcher-input:checked ~ .switcher-indicator::before {
|
right: $width - $height;
|
left: auto;
|
}
|
}
|
}
|
}
|
|
@mixin appwork-switcher-size($size, $width, $height, $font-size, $description-font-size, $description-line-height, $inner-spacer: $switcher-inner-spacer) {
|
.switcher-#{$size},
|
.form-group-#{$size} .switcher {
|
@include appwork-switcher-size-base($width, $height, $font-size, $description-font-size, $description-line-height, $inner-spacer);
|
}
|
}
|
|
@mixin appwork-switcher-variant($parent, $background, $color: null) {
|
$selector: if($parent == '', '', '#{$parent}.switcher');
|
$color: if($color, $color, yiq($background));
|
|
#{$selector} .switcher-input:checked ~ .switcher-indicator {
|
background: $background;
|
color: $color;
|
}
|
|
#{$selector} .switcher-input:focus ~ .switcher-indicator {
|
box-shadow: 0 0 0 $component-focus-shadow-width rgba($background, .4);
|
}
|
|
#{$selector} .switcher-input:active ~ .switcher-indicator {
|
box-shadow: none !important;
|
}
|
}
|
|
@mixin appwork-switcher-theme($background, $color: null) {
|
@include appwork-switcher-variant('', $background, $color);
|
}
|
|
@mixin appwork-material-switcher-variant($parent, $background) {
|
$selector: if($parent == '', '', '#{$parent}.switcher');
|
|
#{$selector} .switcher-input:checked ~ .switcher-indicator {
|
background: rgba($background, .5);
|
|
&::after {
|
background: $background;
|
}
|
|
&::before {
|
background: rgba($background, .15);
|
}
|
}
|
}
|
|
@mixin appwork-material-switcher-theme($background) {
|
@include appwork-material-switcher-variant('', $background);
|
}
|
|
@mixin appwork-switcher-validation-state($state, $color) {
|
.switcher-input {
|
.was-validated &:#{$state},
|
&.is-#{$state} {
|
&:checked ~ .switcher-indicator {
|
background: $color !important;
|
color: yiq($color) !important;
|
}
|
|
&:focus ~ .switcher-indicator {
|
box-shadow: 0 0 0 $component-focus-shadow-width rgba($color, .4) !important;
|
}
|
|
&:active ~ .switcher-indicator {
|
box-shadow: none !important;
|
}
|
|
~ .switcher-label {
|
color: $color !important;
|
}
|
}
|
}
|
}
|
|
@mixin appwork-material-switcher-validation-state($state, $color) {
|
.switcher-input {
|
.was-validated &:#{$state},
|
&.is-#{$state} {
|
~ .switcher-indicator {
|
background: rgba($color, .5) !important;
|
}
|
|
&:checked ~ .switcher-indicator {
|
&::after {
|
background: $color !important;
|
}
|
|
&::before {
|
background: rgba($color, .15) !important;
|
}
|
}
|
|
~ .switcher-label {
|
color: $color !important;
|
}
|
}
|
}
|
}
|
|
// *******************************************************************************
|
// * Tables
|
|
@mixin table-row-variant($state, $background) {}
|
|
@mixin appwork-table-row-variant($parent, $background) {
|
$bg: rgba-to-hex(rgba($background, .1), #fff);
|
$color: yiq($bg);
|
$hover-bg: rgba-to-hex(rgba($bg, .99), #000);
|
|
.table #{$parent},
|
.table #{$parent} > th,
|
.table #{$parent} > td {
|
border-color: rgba(0,0,0,.035);
|
background-color: $bg;
|
color: $color;
|
}
|
|
.table-hover #{$parent}:hover,
|
.table-hover #{$parent}:hover > td,
|
.table-hover #{$parent}:hover > th {
|
background-color: $hover-bg;
|
}
|
}
|
|
// *******************************************************************************
|
// * Navbar
|
|
@mixin appwork-navbar-variant($parent, $bg, $color: null, $active-color: null, $border: null) {
|
$colors: get-nav-colors($bg, $active-color, $color, $border);
|
|
#{$parent} {
|
background-color: map-get($colors, bg) !important;
|
color: map-get($colors, color);
|
|
.navbar-brand {
|
color: map-get($colors, active-color);
|
|
@include hover-focus {
|
color: map-get($colors, active-color);
|
}
|
}
|
|
.navbar-nav {
|
.nav-link {
|
color: map-get($colors, color);
|
|
@include hover-focus {
|
color: map-get($colors, active-color);
|
}
|
|
&.disabled {
|
color: map-get($colors, disabled-color) !important;
|
}
|
}
|
|
.show > .nav-link,
|
.active > .nav-link,
|
.nav-link.show,
|
.nav-link.active {
|
color: map-get($colors, active-color);
|
}
|
}
|
|
.navbar-toggler {
|
color: map-get($colors, color);
|
border-color: map-get($colors, border);
|
}
|
|
.navbar-toggler-icon {
|
background-image: if(map-get($colors, active-color) == #fff, $navbar-dark-toggler-icon-bg, $navbar-light-toggler-icon-bg);
|
}
|
|
.navbar-text {
|
color: map-get($colors, color);
|
|
a {
|
color: map-get($colors, active-color);
|
|
@include hover-focus {
|
color: map-get($colors, active-color);
|
}
|
}
|
}
|
|
hr {
|
border-color: map-get($colors, border);
|
}
|
}
|
}
|
|
// *******************************************************************************
|
// * Sidenav
|
|
@mixin appwork-sidenav-variant($parent, $bg, $color: null, $active-color: null, $border: null, $menu-bg: null) {
|
$colors: get-nav-colors($bg, $active-color, $color, $border);
|
$yiq-percent: map-get($colors, yiq-percent);
|
|
@if not $menu-bg {
|
$menu-bg: rgba-to-hex(rgba(map-get($colors, bg), 1 - if($yiq-percent > .75, .025, .05)), if($yiq-percent < .25, #fff, #000));
|
}
|
|
$menu-active-bg: rgba-to-hex(rgba($menu-bg, 1 - if($yiq-percent > .75, .025, .05)), if($yiq-percent < .25, #fff, #000));
|
|
#{$parent} {
|
background-color: map-get($colors, bg) !important;
|
color: map-get($colors, color);
|
|
.sidenav-link,
|
.sidenav-horizontal-prev,
|
.sidenav-horizontal-next {
|
color: map-get($colors, color);
|
|
@include hover-focus {
|
color: map-get($colors, active-color);
|
}
|
|
&.active {
|
color: map-get($colors, active-color);
|
}
|
}
|
|
.sidenav-item.disabled .sidenav-link,
|
.sidenav-horizontal-prev.disabled,
|
.sidenav-horizontal-next.disabled {
|
color: map-get($colors, disabled-color) !important;
|
}
|
|
.sidenav-item.open:not(.sidenav-item-closing) > .sidenav-toggle,
|
.sidenav-item.active > .sidenav-link {
|
color: map-get($colors, active-color);
|
}
|
|
.sidenav-item.active > .sidenav-link:not(.sidenav-toggle) {
|
background-color: $menu-bg;
|
}
|
|
&.sidenav-horizontal .sidenav-menu > .sidenav-item.active > .sidenav-link:not(.sidenav-toggle) {
|
background-color: $menu-active-bg;
|
}
|
|
&.sidenav-horizontal .sidenav-inner > .sidenav-item:not(.sidenav-item-closing) > .sidenav-menu,
|
&.sidenav-horizontal .sidenav-inner > .sidenav-item.open > .sidenav-toggle {
|
background: $menu-bg;
|
}
|
|
.sidenav-inner > .sidenav-item.sidenav-item-closing .sidenav-item.open .sidenav-menu,
|
.sidenav-inner > .sidenav-item.sidenav-item-closing .sidenav-item.open .sidenav-toggle {
|
background: transparent;
|
color: map-get($colors, color);
|
}
|
|
.sidenav-text {
|
color: map-get($colors, active-color);
|
}
|
|
.sidenav-header {
|
color: map-get($colors, muted-color);
|
}
|
|
hr,
|
.sidenav-divider,
|
.sidenav-inner > .sidenav-item.open > .sidenav-menu::before {
|
border-color: map-get($colors, border) !important;
|
}
|
|
.sidenav-inner > .sidenav-header::before,
|
.sidenav-block::before {
|
background-color: map-get($colors, border);
|
}
|
|
.sidenav-inner > .sidenav-item.open .sidenav-item.open > .sidenav-toggle::before {
|
background-color: rgba-to-hex(map-get($colors, border), $menu-bg);
|
}
|
|
.sidenav-inner > .sidenav-item.open .sidenav-item.active > .sidenav-link::before {
|
background-color: map-get($colors, active-color);
|
}
|
|
.sidenav-inner > .sidenav-item.open .sidenav-item.open > .sidenav-toggle::before,
|
.sidenav-inner > .sidenav-item.open .sidenav-item.active > .sidenav-link::before {
|
box-shadow: 0 0 0 2px $menu-bg;
|
}
|
|
.ps__thumb-y,
|
.ps__rail-y.ps--clicking > .ps__thumb-y {
|
background: rgba(map-get($colors, active-color), if($yiq-percent > .75, map-get($colors, opacity) - .4, map-get($colors, opacity) - .2)) !important;
|
}
|
}
|
}
|
|
// *******************************************************************************
|
// * Footer
|
|
@mixin appwork-footer-variant($parent, $bg, $color: null, $active-color: null, $border: null) {
|
$colors: get-nav-colors($bg, $active-color, $color, $border);
|
|
#{$parent} {
|
background-color: map-get($colors, bg) !important;
|
color: map-get($colors, color);
|
|
.footer-link {
|
color: map-get($colors, color);
|
|
@include hover-focus {
|
color: map-get($colors, active-color);
|
}
|
|
&.disabled {
|
color: map-get($colors, disabled-color) !important;
|
}
|
}
|
|
.footer-text {
|
color: map-get($colors, active-color);
|
}
|
|
.show > .footer-link,
|
.active > .footer-link,
|
.footer-link.show,
|
.footer-link.active {
|
color: map-get($colors, active-color);
|
}
|
|
hr {
|
border-color: map-get($colors, border);
|
}
|
}
|
}
|
