haxeui/haxeui-core

/************************************************************************
** UNATTACHED STEPPER
*************************************************************************/
.stepper {
    spacing: 0;
}

.stepper-button {
    padding: 3px;
    padding-top: 4px;
    padding-bottom: 4px;
    border-radius: 0;
    border: none;
    background-color: $solid-background-color;
    opacity: 1;
}

.stepper-button:hover {
    background-color: $solid-background-color-hover;
}

.stepper-button:down {
    background-color: $solid-background-color-down;
}

.stepper-button:disabled {
    background-color: $solid-background-color-disabled;
}

.stepper-inc {
    icon: $arrow-up;
}

.stepper-deinc {
    icon: $arrow-down;
}

.stepper-inc:down {
    icon: $arrow-up;
}

.stepper-deinc:down {
    icon: $arrow-down;
}

.stepper-step .stepper-inc, .stepper-step .stepper-deinc {
    height: 50%;
}

/************************************************************************
** NUMBER STEPPER - STANDARD LAYOUT
*************************************************************************/
.number-stepper {
    padding: 0px;
    height: auto;
    initial-width: 80px;
    border: $normal-border-size solid $normal-border-color;
    border-radius: $normal-border-radius;
    filter: $normal-inner-shadow;
    background-color: $tertiary-background-color;
}

.number-stepper .stepper-value {
    text-align: center;
    border: none;
    background-color: none;
    filter: none;
    margin-top: 0px;
}

.number-stepper .stepper-deinc {
    icon: $arrow-left;
    padding-left: 4px;
    padding-right: 4px;
    border: none;
    background-color: $scrollbar-background-color;
    border-radius: 0;
    opacity: 1;
}

.number-stepper .stepper-deinc:hover {
    background-color: $scrollbar-background-color;
}

.number-stepper .stepper-deinc:down {
    background-color: $scrollbar-button-color;
    icon: $arrow-left;
}

.number-stepper .stepper-deinc:disabled {
    opacity: 0.5;
    background-color: $scrollbar-background-color;
}

.number-stepper .stepper-inc {
    icon: $arrow-right;
    padding-left: 4px;
    padding-right: 4px;
    border: none;
    background-color: $scrollbar-background-color;
    border-radius: 0;
    opacity: 1;
}

.number-stepper .stepper-inc:hover {
    background-color: $scrollbar-background-color;
}

.number-stepper .stepper-inc:down {
    background-color: $scrollbar-button-color;
    icon: $arrow-right;
}

.number-stepper .stepper-inc:disabled {
    opacity: 0.5;
    background-color: $scrollbar-background-color;
}

.number-stepper.required-value {
    background-color: $warning-background-color-start;
    border-color: $warning-border-color;
}

.number-stepper.invalid-value {
    background-color: $error-background-color-start;
    border-color: $error-border-color;
}

.number-stepper.valid-value {
    background-color: $success-background-color-start;
    border-color: $success-border-color;
}

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

/************************************************************************
** NUMBER STEPPER - CLASSIC LAYOUT
*************************************************************************/
.number-stepper.classic-stepper {
    layout: classic;
}

.number-stepper.classic-stepper .stepper-deinc {
    icon: $arrow-down;
}

.number-stepper.classic-stepper .stepper-inc {
    icon: $arrow-up;
}

.number-stepper.classic-stepper .stepper-deinc:down {
    icon: $arrow-down;
}

.number-stepper.classic-stepper .stepper-inc:down {
    icon: $arrow-up;
}

.number-stepper.classic-stepper .stepper-value {
    text-align: left;
    margin-top: 0px;
}

/************************************************************************
** OPTION STEPPER
*************************************************************************/
.option-stepper {
    padding: 0px;
    height: auto;
    initial-width: 100px;
    border: $normal-border-size solid $normal-border-color;
    border-radius: $normal-border-radius;
    filter: $normal-inner-shadow;
    background-color: $tertiary-background-color;
}

.option-stepper .stepper-value {
    text-align: center;
    border: none;
    background-color: none;
    filter: none;
    margin-top: 0px;
    padding: 6px;
}

.option-stepper .stepper-deinc {
    icon: $arrow-left;
    padding-left: 4px;
    padding-right: 4px;
    border: none;
    background-color: $scrollbar-background-color;
    border-radius: 0;
    opacity: 1;
}

.option-stepper .stepper-deinc:hover {
    background-color: $scrollbar-background-color;
}

.option-stepper .stepper-deinc:down {
    background-color: $scrollbar-button-color;
    icon: $arrow-left;
}

.option-stepper .stepper-deinc:disabled {
    opacity: 0.5;
    background-color: $scrollbar-background-color;
}

.option-stepper .stepper-inc {
    icon: $arrow-right;
    padding-left: 4px;
    padding-right: 4px;
    border: none;
    background-color: $scrollbar-background-color;
    border-radius: 0;
    opacity: 1;
}

.option-stepper .stepper-inc:hover {
    background-color: $scrollbar-background-color;
}

.option-stepper .stepper-inc:down {
    background-color: $scrollbar-button-color;
    icon: $arrow-right;
}

.option-stepper .stepper-inc:disabled {
    opacity: 0.5;
    background-color: $scrollbar-background-color;
}

.option-stepper.required-value {
    background-color: $warning-background-color-start;
    border-color: $warning-border-color;
}

.option-stepper.invalid-value {
    background-color: $error-background-color-start;
    border-color: $error-border-color;
}

.option-stepper.valid-value {
    background-color: $success-background-color-start;
    border-color: $success-border-color;
}

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