ꦫꦣꦺꦤ꧀ꦄꦤ꧀ꦠꦱꦺꦤ

PATH: home / lab2454c / vaultchip.com / platform / core / base / resources / assets / sass / base / global / components

//##  Flat UI Color Variations

/***
Custom color buttons 
***/

@each $name, $colors in $component-colors {
    .bg-#{$name} {
        background: map-get($colors, base) !important;
    }

.bg-#{$name}-opacity {
        background: rgba(map-get($colors, base), 0.8) !important;
    }

.bg-hover-#{$name}:hover {
        background: map-get($colors, base) !important;
    }

.font-#{$name} {
        color: map-get($colors, base) !important;
    }

.bg-font-#{$name} {
        color: map-get($colors, font) !important;
    }

.border-#{$name} {
        border-color: map-get($colors, base) !important;
    }

.border-top-#{$name} {
        border-top-color: map-get($colors, base) !important;
    }

.border-bottom-#{$name} {
        border-bottom-color: map-get($colors, base) !important;
    }

.border-left-#{$name} {
        border-left-color: map-get($colors, base) !important;
    }

.border-right-#{$name} {
        border-right-color: map-get($colors, base) !important;
    }

// pseudo classes
    .bg-before-#{$name}:before,
    .bg-after-#{$name}:after {
        background: map-get($colors, base) !important;
    }

.border-before-#{$name}:before,
    .border-after-#{$name}:after {
        border-color: map-get($colors, base) !important;
    }

.border-top-before-#{$name}:before,
    .border-top-after-#{$name}:after {
        border-top-color: map-get($colors, base) !important;
    }

.border-bottom-before-#{$name}:before,
    .border-bottom-after-#{$name}:after {
        border-bottom-color: map-get($colors, base) !important;
    }

.border-left-before-#{$name}:before,
    .border-left-after-#{$name}:after {
        border-left-color: map-get($colors, base) !important;
    }

.border-right-before-#{$name}:before,
    .border-right-after-#{$name}:after {
        border-right-color: map-get($colors, base) !important;
    }
}

/***
Color library demo
***/

.color-demo {
    border: 1px solid #eeeeee;
    margin: 0 0 20px 0;
    cursor: pointer;

.color-view {
        padding: 35px 10px;
        text-align: center;
        font-size: 18px;
    }

.color-info {
        border-top: 1px solid #eeeeee;
        padding: 10px 10px;
        text-align: center;
    }
}

[-] _overlay.scss [edit]
[-] _popovers.scss [edit]
[-] _tabs.scss [edit]
[-] _labels.scss [edit]
[-] _utils.scss [edit]
[-] _mixins.scss [edit]
[-] _modal.scss [edit]
[-] _other.scss [edit]
[-] _headings.scss [edit]
[-] _md-base.scss [edit]
[-] _inputs.scss [edit]
[+] ..
[-] _md-radios.scss [edit]
[-] _buttons.scss [edit]
[-] _list-groups.scss [edit]
[-] _table.scss [edit]
[-] _md-checkboxes.scss [edit]
[-] _social-icons.scss [edit]
[-] _icon-buttons.scss [edit]
[-] _md.scss [edit]
[-] _portlets.scss [edit]
[-] _progress-bars.scss [edit]
[-] _close.scss [edit]
[-] _input-icons.scss [edit]
[-] _md-inputs.scss [edit]
[-] _typography.scss [edit]
[-] _dropdowns.scss [edit]
[-] _badges.scss [edit]
[-] _panels.scss [edit]
[-] _notes.scss [edit]
[-] _form-layouts.scss [edit]
[-] _colors.scss [edit]
[-] _font-icons.scss [edit]
[-] _loaders.scss [edit]
[-] _grid.scss [edit]
[-] _card.scss [edit]
[-] _widget.scss [edit]
[-] _sidebar.scss [edit]
[-] _reset-general.scss [edit]