comindware.core.ui/src/layout/resources/button.css

Comindware Core UI provides the basic components like editors, lists, dropdowns, popups that we so desperately need while creating Marionette-based single-page applications.

:root {
    --light: 80;
    --threshold: 30;
}

.toolbar-btn,
.split-button-wrp {
    background-color: transparent;
    border: 1px solid transparent;
    color: var(--theme-colors__btn);
}

.toolbar-btn:not(:last-child),
.split-button-wrp:not(:last-child) {
    margin-right: 2px;
}

.toolbar-btn.btn-solid,
.split-button-wrp.btn-solid {
    background-color: var(--theme-colors__btn);
    border: 1px solid var(--theme-colors__btn);
    color: var(--theme-colors__btn-txt);
}

.toolbar-btn_selected,
.toolbar .toolbar-btn_selected {
    box-shadow: none;
    background-color: transparent;
    border: 1px solid transparent;
    color: var(--theme-colors__btn_fade);
}

.toolbar-btn_selected.btn-solid,
.toolbar .toolbar-btn_selected.btn-solid {
    box-shadow: none;
    background-color: var(--theme-colors__btn_fade);
    border: 1px solid var(--theme-colors__btn_fade);
    color: var(--theme-colors__btn-txt);
}

.toolbar-btn:hover,
.toolbar-btn.open,
.split-btn:hover,
.split-btn.open {
    box-shadow: none;
    background-color: var(--theme-colors__highlight);
    color: var(--theme-colors__btn_strong);
}

.toolbar-btn.btn-solid:hover,
.split-btn.btn-solid:hover {
    box-shadow: none;
    background-color: var(--theme-colors__btn_strong);
    border: 1px solid var(--theme-colors__btn_strong);
    color: var(--theme-colors__btn-txt);
}

.toolbar-btn:active,
.split-btn:active {
    background-color: var(--theme-colors__highlight);
    color: var(--theme-colors__btn_fade);
}

.toolbar-btn.btn-solid:active,
.split-btn.btn-solid:active {
    background-color: var(--theme-colors__btn_fade);
    border: 1px solid var(--theme-colors__btn_fade);
    color: var(--theme-colors__btn-txt);
}

.toolbar-btn.toolbar-btn_checkbox {
    color: var(--theme-colors__btn);
    border: none;
}

.toolbar-btn.toolbar-btn_checkbox:hover {
    background: var(--theme-colors__highlight);
    color: var(--theme-colors__text_strong);
}

.toolbar-btn.toolbar-btn_checkbox .checkbox {
    border: solid 1px var(--checkbox-border-color);
    background: transparent;
}

.toolbar-btn .checkbox i,
.split-btn .checkbox i {
    color: inherit;
}

.btn-pale {
    background-color: transparent;
    border: 1px solid transparent;
    color: var(--theme-colors__cancel-btn);
}

.btn-pale:hover {
    background-color: var(--theme-colors__highlight);
    color: var(--theme-colors__cancel-btn_strong);
}

.btn-pale:active {
    background-color: var(--theme-colors__highlight);
    color: var(--theme-colors__cancel-btn_fade);
}

.btn-pale.btn-solid {
    background-color: var(--theme-colors__cancel-btn);
    border: 1px solid var(--theme-colors__cancel-btn);
    color: var(--theme-colors__cancel-btn-txt);
}

.btn-pale.btn-solid:hover {
    background-color: var(--theme-colors__cancel-btn_strong);
    border: 1px solid var(--theme-colors__cancel-btn_strong);
    color: var(--theme-colors__cancel-btn-txt);
}

.btn-pale.btn-solid:active {
    background-color: var(--theme-colors__cancel-btn_fade);
    border: 1px solid var(--theme-colors__cancel-btn_fade);
    color: var(--theme-colors__cancel-btn-txt);
}

.btn-disabled {
    pointer-events: none;
    opacity: .5;
}

/* Themes color button */

/* None */

.toolbar-btn_none,
.split-btn_default {
    background-color: transparent;
    border: 1px solid transparent;
    color: var(--theme-colors__severity-none);
}

.toolbar-btn_none:hover,
.split-btn_default:hover {
    background-color: var(--theme-colors__highlight);
    color: var(--theme-colors__severity-none_strong);
}

.toolbar-btn_none:active,
.split-btn_default:active {
    background-color: var(--theme-colors__highlight);
    color: var(--theme-colors__severity-none_fade);
}

.toolbar-btn_none.btn-solid,
.split-btn_default.btn-solid {
    background-color: var(--theme-colors__severity-none);
    border: 1px solid var(--theme-colors__severity-none);
    color: var(--theme-colors__severity-none-txt);
}

.toolbar-btn_none.btn-solid:hover,
.split-btn_default.btn-solid:hover {
    background-color: var(--theme-colors__severity-none_strong);
    border: 1px solid var(--theme-colors__severity-none_strong);
    color: var(--theme-colors__severity-none-txt);
}

.toolbar-btn_none.btn-solid:active,
.split-btn_default.btn-solid:active {
    background-color: var(--theme-colors__severity-none_fade);
    border: 1px solid var(--theme-colors__severity-none_fade);
    color: var(--theme-colors__severity-none-txt);
}

/* Low */

.toolbar-btn_low,
.split-btn_low {
    background-color: transparent;
    border: 1px solid transparent;
    color: var(--theme-colors__severity-low);
}

.toolbar-btn_low:hover,
.split-btn_low:hover {
    background-color: var(--theme-colors__highlight);
    color: var(--theme-colors__severity-low_strong);
}

.toolbar-btn_low:active,
.split-btn_low:active {
    background-color: var(--theme-colors__highlight);
    color: var(--theme-colors__severity-low_fade);
}

.toolbar-btn_low.btn-solid,
.split-btn_low.btn-solid {
    background-color: var(--theme-colors__severity-low);
    border: 1px solid var(--theme-colors__severity-low);
    color: var(--theme-colors__severity-low-txt);
}

.toolbar-btn_low.btn-solid:hover,
.split-btn_low.btn-solid:hover {
    background-color: var(--theme-colors__severity-low_strong);
    border: 1px solid var(--theme-colors__severity-low_strong);
    color: var(--theme-colors__severity-low-txt);
}

.toolbar-btn_low.btn-solid:active,
.split-btn_low.btn-solid:active {
    background-color: var(--theme-colors__severity-low_fade);
    border: 1px solid var(--theme-colors__severity-low_fade);
    color: var(--theme-colors__severity-low-txt);
}

/* Normal */

.toolbar-btn_normal,
.split-btn_normal {
    background-color: transparent;
    border: 1px solid transparent;
    color: var(--theme-colors__severity-normal);
}

.toolbar-btn_normal:hover,
.split-btn_normal:hover {
    background-color: var(--theme-colors__highlight);
    color: var(--theme-colors__severity-normal_strong);
}

.toolbar-btn_normal:active,
.split-btn_normal:active {
    background-color: var(--theme-colors__highlight);
    color: var(--theme-colors__severity-normal_fade);
}

.toolbar-btn_normal.btn-solid,
.split-btn_normal.btn-solid {
    background-color: var(--theme-colors__severity-normal);
    border: 1px solid var(--theme-colors__severity-normal);
    color: var(--theme-colors__severity-normal-txt);
}

.toolbar-btn_normal.btn-solid:hover,
.split-btn_normal.btn-solid:hover {
    background-color: var(--theme-colors__severity-normal_strong);
    border: 1px solid var(--theme-colors__severity-normal_strong);
    color: var(--theme-colors__severity-normal-txt);
}

.toolbar-btn_normal.btn-solid:active,
.split-btn_normal.btn-solid:active {
    background-color: var(--theme-colors__severity-normal_fade);
    border: 1px solid var(--theme-colors__severity-normal_fade);
    color: var(--theme-colors__severity-normal-txt);
}

/* Major */

.toolbar-btn_major,
.split-btn_major {
    background-color: transparent;
    border: 1px solid transparent;
    color: var(--theme-colors__severity-major);
}

.toolbar-btn_major:hover,
.split-btn_major:hover {
    background-color: var(--theme-colors__highlight);
    color: var(--theme-colors__severity-major_strong);
}

.toolbar-btn_major:active,
.split-btn_major:active {
    background-color: var(--theme-colors__highlight);
    color: var(--theme-colors__severity-major_fade);
}

.toolbar-btn_major.btn-solid,
.split-btn_major.btn-solid {
    background-color: var(--theme-colors__severity-major);
    border: 1px solid var(--theme-colors__severity-major);
    color: var(--theme-colors__severity-major-txt);
}

.toolbar-btn_major.btn-solid:hover,
.split-btn_major.btn-solid:hover{
    background-color: var(--theme-colors__severity-major_strong);
    border-color: var(--theme-colors__severity-major_strong);
    color: var(--theme-colors__severity-major-txt);
}

.toolbar-btn_major.btn-solid:active,
.split-btn_major.btn-solid:active{
    background-color: var(--theme-colors__severity-major_fade);
    border-color: var(--theme-colors__severity-major_fade);
    color: var(--theme-colors__severity-major-txt);
}

/* Critical */

.toolbar-btn_critical,
.split-btn_critical {
    background-color: transparent;
    border-color: transparent;
    color: var(--theme-colors__severity-critical);
}

.toolbar-btn_critical:hover,
.split-btn_critical:hover {
    background-color: var(--theme-colors__highlight);
    color: var(--theme-colors__severity-critical_strong);
}

.toolbar-btn_critical:active,
.split-btn_critical:active {
    background-color: var(--theme-colors__highlight);
    color: var(--theme-colors__severity-critical_fade);
}

.toolbar-btn_critical.btn-solid,
.split-btn_critical.btn-solid {
    background-color: var(--theme-colors__severity-critical);
    border-color: var(--theme-colors__severity-critical);
    color: var(--theme-colors__severity-critical-txt);
}

.toolbar-btn_critical.btn-solid:hover,
.split-btn_critical.btn-solid:hover {
    background-color: var(--theme-colors__severity-critical_strong);
    border-color: var(--theme-colors__severity-critical_strong);
    color: var(--theme-colors__severity-critical-txt);
}

.toolbar-btn_critical.btn-solid:active,
.split-btn_critical.btn-solid:active {
    background-color: var(--theme-colors__severity-critical_fade);
    border-color: var(--theme-colors__severity-critical_fade);
    color: var(--theme-colors__severity-critical-txt);
}

/* Fatal */

.toolbar-btn_fatal,
.split-btn_fatal {
    background-color: transparent;
    border-color: transparent;
    color: var(--theme-colors__severity-fatal);
}

.toolbar-btn_fatal:hover,
.split-btn_fatal:hover {
    background-color: var(--theme-colors__highlight);
    color: var(--theme-colors__severity-fatal_strong);
}

.toolbar-btn_fatal:active,
.split-btn_fatal:active {
    background-color: var(--theme-colors__highlight);
    color: var(--theme-colors__severity-fatal_fade);
}

.toolbar-btn_fatal.btn-solid,
.split-btn_fatal.btn-solid {
    background-color: var(--theme-colors__severity-fatal);
    border-color: var(--theme-colors__severity-fatal);
    color: var(--theme-colors__severity-fatal-txt);
}

.toolbar-btn_fatal.btn-solid:hover,
.split-btn_fatal.btn-solid:hover {
    background-color: var(--theme-colors__severity-fatal_strong);
    border-color: var(--theme-colors__severity-fatal_strong);
    color: var(--theme-colors__severity-fatal-txt);
}

.toolbar-btn_fatal.btn-solid:active,
.split-btn_fatal.btn-solid:active {
    background-color: var(--theme-colors__severity-fatal_fade);
    border-color: var(--theme-colors__severity-fatal_fade);
    color: var(--theme-colors__severity-fatal-txt);
}

.split-button-wrp .toolbar-btn.toolbar-btn_splitButton,
.split-button-wrp .toolbar-btn.toolbar-btn_splitButton:hover,
.split-button-wrp .toolbar-btn.toolbar-btn_splitButton:active {
    border-color: transparent;
    background-color: transparent;
    box-shadow: none;
    color: inherit;
    max-height: 25px;
}

/* Dropdown menu buttons */
.toolbar-panel_container {
    padding: 0;
}

.toolbar-panel_container .toolbar-btn {
    text-align: left;
}

.toolbar-panel_container .toolbar-btn .toolbar__icons:not(.toolbar__icons_arrow) {
    margin: 0 5px 0 -5px;
}

.popout__action.open .toolbar__icons_arrow i {
    transform: rotate(180deg);
}

.toolbar-panel_container .toolbar__icons_arrow  i,
.toolbar-panel_container .popout__action.open .toolbar__icons_arrow i {
    transform: rotate(-90deg);
}

.toolbar-panel_container .toolbar-btn .toolbar__icons + .toolbar-btn__text {
    margin: 0;
}

.toolbar-panel_container .btn-separator {
    margin: 5px 0;
    width: 100%;
    border-bottom: 1px solid var(--menu-items-clor-border);
}

/* Toolabar ajustable buttons */

.toolbar-buttons_container__adjust .toolbar-btn {
    color: var(--theme-colors__btn);
}

.toolbar-buttons_container__adjust .btn-separator {
    color: var(--theme-colors__text);
    border-right-width: 1px;
    opacity: .7;
}

.toolbar-buttons_container__adjust .toolbar-btn.toolbar-btn_none {
    color: var(--theme-colors__severity-none);
}

.toolbar-buttons_container__adjust .toolbar-btn.toolbar-btn_low {
    color: var(--theme-colors__severity-low);
}

.toolbar-buttons_container__adjust .toolbar-btn.toolbar-btn_normal {
    color: var(--theme-colors__severity-normal);
}

.toolbar-buttons_container__adjust .toolbar-btn.toolbar-btn_major {
    color: var(--theme-colors__severity-major);
}

.toolbar-buttons_container__adjust .toolbar-btn.toolbar-btn_critical {
    color: var(--theme-colors__severity-critical);
}

.toolbar-buttons_container__adjust .toolbar-btn.toolbar-btn_fatal {
    color: var(--theme-colors__severity-fatal);
}

.toolbar-buttons_container__adjust .toolbar-btn:not(:hover):not(.open) .toolbar-btn__text,
.toolbar-buttons_container__adjust .toolbar-btn:not(:hover):not(.open) .toolbar__icons_arrow {
    color: var(--theme-colors__text);
}

.toolbar-buttons_container__adjust .toolbar-btn:hover,
.toolbar-buttons_container__adjust .toolbar-btn.open {
    background-color: var(--theme-colors__highlight);
}

.toolbar-buttons_container__adjust .toolbar-btn:hover .toolbar-btn__text,
.toolbar-buttons_container__adjust .toolbar-btn.open .toolbar-btn__text,
.toolbar-buttons_container__adjust .toolbar-btn:hover .toolbar__icons_arrow,
.toolbar-buttons_container__adjust .toolbar-btn.open .toolbar__icons_arrow {
    color: var(--theme-colors__btn);
}

/* Toolbar actions buttons */

.toolbar-menu-actions .toolbar-btn,
.toolbar-buttons_container__const .toolbar-btn,
.tr-search .toolbar-btn,
.page-header-bottom-container .toolbar__i_left + .toolbar-items-wrp .toolbar-btn {
    color: var(--theme-colors__secondary-txt);
}

.toolbar-menu-actions .toolbar-btn:hover,
.toolbar-buttons_container__const .toolbar-btn:hover,
.tr-search .toolbar-btn:hover,
.toolbar-buttons_container__const .toolbar-btn.open,
.page-header-bottom-container .toolbar__i_left + .toolbar-items-wrp .toolbar-btn:hover {
    background-color: var(--theme-colors__highlight);
    color: var(--theme-colors__btn);
    border-color: transparent;
    box-shadow: none;
}