haxeui/haxeui-core

/************************************************************************
** BASE ITEM PICKER
*************************************************************************/
.item-picker {
    padding: 6px 5px;
    height: auto;
    width: auto;

    border: 1px solid $normal-border-color;
    border-radius: 2px;

    background: $normal-background-color-start $normal-background-color-end vertical;
}

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

.item-picker.selected {
    background-color: $down-background-color-start;
    color: $hover-text-color;
    border-color: $hover-border-color;
    filter: drop-shadow(1, 45, #888888, 0.1, 1, 1, 1, 3, true);

    border-color: $accent-color;
}

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

.item-picker-panel-filler {
    background-color: $accent-color;
}

.item-picker-trigger {
    pointer-events: true;
}

.item-picker-trigger-icon {
    resource: $arrow-up-down;
    vertical-align: center;
}

.item-picker.no-icon .image {
    hidden: true;
}

.item-picker.no-text .label {
    hidden: true;
}

.item-picker.no-trigger-icon .item-picker-trigger-icon, .item-picker.no-trigger-icon .item-picker-trigger-icon-container {
    hidden: true;
}

.item-picker-container.position-down {
    padding: 1px;
    border: 1px solid $accent-color;
    border-top-color: $down-border-color;
    margin-top: -1px;
    filter: box-shadow(2, 2, #000000, 0.15, 6);
}

.item-picker-container.rounded.position-down {
    border-top-right-radius: 4px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    padding: 4px;
    background-color: $secondary-background-color;
}

.item-picker-container.position-up {
    padding: 1px;
    border: 1px solid $accent-color;
    border-bottom-color: $down-border-color;
    margin-top: -1px;
    filter: box-shadow(2, -2, #000000, 0.15, 6);
}

.item-picker-container.rounded.position-up {
    border-bottom-right-radius: 4px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    padding: 4px;
    background-color: $secondary-background-color;
}

/************************************************************************
** MONTH PICKER
*************************************************************************/
.month-picker {
    padding: 1px;
    border: 1px solid $normal-border-color;
    border-radius: 2px;

    background: $normal-background-color-start $normal-background-color-end vertical;

    filter: $normal-inner-shadow;
}

.month-picker .option-stepper {
    border: none;
    filter: none;
    background: none;
}

.month-picker .option-stepper .label {
    background: none;
    padding: 5px 8px;
}

.month-picker .option-stepper .button {
    background: none;
    padding: 0px 6px;
}

.month-picker .option-stepper .button:hover {
    background: $hover-background-color-start $hover-background-color-end vertical;
}

.month-picker .option-stepper .stepper-deinc:hover {
    border-right: 1px solid $normal-border-color;
}

.month-picker .option-stepper .stepper-inc:hover {
    border-left: 1px solid $normal-border-color;
}

.month-picker .option-stepper .button:down {
    background-color: $down-background-color-start;
    filter: $normal-inner-shadow;
}

.month-picker #itemPickerTrigger {
    padding: 5px 5px;
    background: $normal-background-color-start $normal-background-color-end vertical;
    border-left: 1px solid $normal-border-color;
}

.month-picker #itemPickerTrigger:hover {
    background: $hover-background-color-start $hover-background-color-end vertical;
}

.month-picker #itemPickerTrigger.selected {
    background-color: $down-background-color-start;
    filter: $normal-inner-shadow;
    border-left: 1px solid $down-border-color;
}

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

.month-picker.selected {
    border: 1px solid $accent-color;
}

.month-picker-panel {
    background-color: $default-background-color;
}

.month-deinc {
    resource: $arrow-left;
}

.month-inc {
    resource: $arrow-right;
}

.month-button {
    height: 48px;
    border: none;
    background-color: $normal-background-color-end;
}

.month-button:hover {
    border: 1px solid $normal-border-color;
}

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

.month-button:disabled {
    background-color: $default-background-color;
}

.month-picker-panel #yearLabel {
    background-color: $normal-background-color-start;
    border-top: 1px solid $normal-border-color;
}

/************************************************************************
** MENU ITEM PICKER
*************************************************************************/
.menuitempicker-panel #primaryPickerMenu {
    border: none;
    padding: none;
    border-radius: none;
    filter: none;
}

.menu.menuitempicker.secondary-menu {
    border-color: $accent-color;
}

.menuitempicker-panel #primaryPickerMenu .menuitem {
    __border-top-left-radius: 0px;
    __border-top-right-radius: 0px;
    __border-bottom-left-radius: 0px;
    __border-bottom-right-radius: 0px;
}