haxeui/haxeui-core

/************************************************************************
** GENERAL
*************************************************************************/
.component {
}

.absolute {
    clip: true;
}

.custom-component, .animation {
    width: auto;
    height: auto;
}

.modal-background {
    background-color: $modal-background-color;
    opacity: 0.75;
}

.modal-component {
    filter: blur(1);
}

.popup {
    filter: drop-shadow(2, 45, #000000, 0.15, 6, 1, 30, 35, false);
}

@keyframes animationFadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.fade-in {
    animation: animationFadeIn 0.1s linear 0s 1;
}

.fade-out {
    animation: animationFadeIn 0.1s linear 0s 1 reverse;
}

.default-background {
    background-color: $default-background-color;
}

.default-background-solid {
    background-color: $solid-background-color;
}

/************************************************************************
** GENERAL
*************************************************************************/
.text-tiny {
    font-size: 10px;
}

.text-small {
    font-size: 11px;
}

.text-normal {
    font-size: 13px;
}

/************************************************************************
** CONTAINERS
*************************************************************************/
.box, .vbox, .hbox, .continuoushbox, .hgrid, .vgrid, .grid {
    spacing: 5px 5px;
    width: auto;
    height: auto;
}

/************************************************************************
** LABEL
*************************************************************************/
.label {
    width: auto;
    height: auto;
    content-type: auto;
    color: $normal-text-color;
}
    
.label:disabled {
    color: $disabled-text-color;
}

/************************************************************************
** LINK
*************************************************************************/
.link {
    color: $accent-color-darker;
    font-underline: true;
    cursor: pointer;
    pointer-events: true;
}

.link:hover {
    color: $accent-color;
}

.link:down {
    color: $accent-color-darker;
}
    
.link:disabled {
    color: $disabled-text-color;
}

/************************************************************************
** IMAGE
*************************************************************************/
.image {
    width: auto;
    height: auto;
    opacity: 1;
}

.image:disabled {
    filter: grayscale;
    opacity: .3;
}

/************************************************************************
** DRAG & DROP
*************************************************************************/
.draggable {
    cursor: move;
}

.dragging {
}

/************************************************************************
** ITEM RENDERERS
*************************************************************************/
.basicitemrenderer {
    width: 100%;
}

.basic-renderer-container {
    width: 100%;
}

.basic-renderer-label {
    width: 100%;
}

.basicitemrenderer.auto-size {
    width: auto;
}

.basicitemrenderer.auto-size .basic-renderer-container {
    width: auto;
}

.basicitemrenderer.auto-size .basic-renderer-label {
    width: auto;
}

/************************************************************************
** SECTION HEADERS
*************************************************************************/
.section-header {
    width: 100%;
    padding-bottom: 5px;
    padding-top: 15px;
}

.section-header .label {
    font-weight: bold;
    color: $normal-text-color;
}

.section-header .line {
    height: 1px;
    width: 100%;
    background-color: $normal-border-color;
}

.section-header.first {
    padding-top: 0px;
   
}