Sign upLogin

haxeui/haxeui-core

View on GitHub
Star
haxe/ui/_module/styles/default/buttons.css

Summary

Maintainability
Test Coverage
/************************************************************************
** BUTTONS
*************************************************************************/
.button {
    background: $normal-background-color-start $normal-background-color-end vertical;
    color: $normal-text-color;
    border: $normal-border-size solid $normal-border-color;
    border-radius: $normal-border-radius;
    padding: 6px 14px;
    cursor: pointer;
    width: auto;
    height: auto;
    spacing: 5px 5px;
    text-align: center;
}

.button:hover {
    background: $hover-background-color-start $hover-background-color-end vertical;
    color: $hover-text-color;
    border: $normal-border-size solid $hover-border-color;
}

.button:down {
    background-color: $down-background-color-start;
    color: $hover-text-color;
    border-color: $hover-border-color;
    filter: $normal-inner-shadow;
}

/*
WIP - dunno what looks "right"
*/
.button.emphasized {
    background: #ecf2f9 #d9e5f2;
    border-color: #b4cbe4;
    color: #407dbf;

    __border: 2px solid $accent-color;
    __border-radius: 3px;
}

.button.emphasized:hover {
    background: #d9e5f2 #b4cbe4;
    border-color: #83aad4;
    color: #407dbf;
}

.button.emphasized:down {
    background: #b4cbe4 #b4cbe4;
    border-color: #83aad4;
    color: #407dbf;
}

.button:active {
    border: 1px solid $accent-color;
}

.button:disabled {
    background: $disabled-background-color-start $disabled-background-color-end vertical;
    color: $disabled-text-color;
    border-color: $disabled-border-color;
}

.button .label {
    pointer-events: none;
}

/************************************************************************
** BUTTON BARS
*************************************************************************/
.button-bar {
    spacing: 0;
}

.button-bar .button {
    border-radius: 0;
    border: $normal-border-size solid $normal-border-color;
}

.button-bar .button:down {
    __background-color: $selection-background-color;
    __color: $selection-text-color;
    filter: $normal-inner-shadow;
}

.horizontal-button-bar .button {
    border-left-size: 0;
}

.horizontal-button-bar .button.first {
    border-left-size: $normal-border-size;
    border-top-left-radius: $normal-border-radius;
    border-bottom-left-radius: $normal-border-radius;
}

.horizontal-button-bar .button.last {
    border-top-right-radius: $normal-border-radius;
    border-bottom-right-radius: $normal-border-radius;
}

.vertical-button-bar .button {
    border-top-size: 0;
}

.vertical-button-bar .button.first {
    border-top-size: $normal-border-size;
    border-top-left-radius: $normal-border-radius;
    border-top-right-radius: $normal-border-radius;
}

.vertical-button-bar .button.last {
    border-bottom-left-radius: $normal-border-radius;
    border-bottom-right-radius: $normal-border-radius;
}

/************************************************************************
** BUTTON BAR - LEFT MENU ALTERNATE
*************************************************************************/
.button-bar.left-menu {
    background-color: $solid-background-color;
    border-right: $normal-border-size solid $normal-border-color;
}

.button-bar.left-menu .button {
    background-color: $solid-background-color;
    border-left: $normal-border-size solid $solid-background-color;
    width: 100px;
    height: 100px;
    icon-position: "top";
    border-radius: 0px;
}

.button-bar.left-menu.with-bottom-button .button.last {
    border-top: $normal-border-size solid $normal-border-color;
    border-bottom: $normal-border-size solid $solid-background-color;
}

.button-bar.left-menu .button:hover {
    background-color: $solid-background-color-hover;
    border-left: $normal-border-size solid $solid-background-color-hover;
}

.button-bar.left-menu .button:down {
    background-color: $default-background-color;
    color: $normal-text-color;
    border-right: $normal-border-size solid $default-background-color;
    
    border-top: $normal-border-size solid $default-background-color;
    border-left: $normal-border-size solid $default-background-color;
    
    filter: none;
}

.button-bar.left-menu .button.first:down {
    border-top: $normal-border-size solid $normal-border-color;
}

.button-bar.left-menu.with-bottom-button .button.last:down {
    border-top:  $normal-border-size solid $normal-border-color;
    border-bottom: $normal-border-size solid $default-background-color;
}

/************************************************************************
** BUTTON BAR - RIGHT MENU ALTERNATE
*************************************************************************/
.button-bar.right-menu {
    background-color: $solid-background-color;
    border-left: $normal-border-size solid $normal-border-color;
}

.button-bar.right-menu .button {
    background-color: $solid-background-color;
    border-right: $normal-border-size solid $solid-background-color;
    width: 100px;
    height: 100px;
    icon-position: "top";
    border-radius: 0px;
}

.button-bar.right-menu.with-bottom-button .button.last {
    border-top:  $normal-border-size solid $normal-border-color;
    border-bottom: $normal-border-size solid $solid-background-color;
}

.button-bar.right-menu .button:hover {
    background-color: $solid-background-color-hover;
    border-right: $normal-border-size solid $solid-background-color-hover;
}

.button-bar.right-menu .button:down {
    background-color: $default-background-color;
    color: $normal-text-color;
    border-left: $normal-border-size solid $default-background-color;
    
    border-top: $normal-border-size solid $default-background-color;
    border-right: $normal-border-size solid $default-background-color;
    
    filter: none;
}

.button-bar.right-menu .button.first:down {
    border-top: $normal-border-size solid $normal-border-color;
}

.button-bar.right-menu.with-bottom-button .button.last:down {
    border-top:  $normal-border-size solid $normal-border-color;
    border-bottom: $normal-border-size solid $default-background-color;
}

/************************************************************************
** BUTTON BAR - TOP MENU ALTERNATE
*************************************************************************/
.button-bar.top-menu {
    background-color: $solid-background-color;
    border-bottom: $normal-border-size solid $normal-border-color;
}

.button-bar.top-menu .button {
    background-color: $solid-background-color;
    border-top: $normal-border-size solid $solid-background-color;
    width: 100px;
    height: 100px;
    icon-position: "top";
    border-radius: 0px;
}

.button-bar.top-menu .button:hover {
    background-color: $solid-background-color-hover;
    border-top: $normal-border-size solid $solid-background-color-hover;
}

.button-bar.top-menu .button:down {
    background-color: $default-background-color;
    color: $normal-text-color;
    
    border-left: $normal-border-size solid $default-background-color;
    border-bottom: $normal-border-size solid $default-background-color;
    
    border-top: $normal-border-size solid $default-background-color;
    
    filter: none;
}

.button-bar.top-menu .button.first:down {
    border-left: $normal-border-size solid $normal-border-color;
}

/************************************************************************
** BUTTON BAR - BOTTOM MENU ALTERNATE
*************************************************************************/
.button-bar.bottom-menu {
    background-color: $solid-background-color;
    border-top: $normal-border-size solid $normal-border-color;
}

.button-bar.bottom-menu .button {
    background-color: $solid-background-color;
    border-bottom: $normal-border-size solid $solid-background-color;
    width: 100px;
    height: 100px;
    icon-position: "top";
    border-radius: 0px;
}

.button-bar.bottom-menu .button:hover {
    background-color: $solid-background-color-hover;
    border-bottom: $normal-border-size solid $solid-background-color-hover;
}

.button-bar.bottom-menu .button:down {
    background-color: $default-background-color;
    color: $normal-text-color;
    
    border-left: $normal-border-size solid $default-background-color;
    border-bottom: $normal-border-size solid $default-background-color;
    
    border-top: $normal-border-size solid $default-background-color;
    
    filter: none;
}

.button-bar.bottom-menu .button.first:down {
    border-left: $normal-border-size solid $normal-border-color;
}