cedro/src/ui/styles/stackbutton.css

Javascript library to build user interfece based on widgets.

/****************************************************************************/
/***********************************STACK-START******************************/
/****************************************************************************/

.WUIButton-stack-start {
    cursor: pointer;
    font-weight: 500;
    text-align: center;
    background-color: transparent;
    border-left: solid 0.13rem;
    border-top: solid 0.13rem;
    border-bottom: solid 0.13rem;
    border-right: none;
    font-size: 1rem;
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
        border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    text-transform: uppercase;
}

.WUIButton-stack-start-color-primary {
    color: var(--palette-text-primary);
    background-color: var(--palette-background-default);
    border-color: var(--palette-divider);
}

.WUIButton-stack-start-color-primary:hover {
    color: var(--palette-primary-text-light);
    background-color: var(--palette-primary-light);
    border-color: var(--palette-divider);
}

.WUIButton-stack-start-color-primary:hover span {
    color: var(--palette-primary-text-light);
}

/****************************************************************************/
/***********************************STACK-MIDDLE******************************/
/****************************************************************************/

.WUIButton-stack-middle {
    cursor: pointer;
    font-weight: 500;
    text-align: center;
    background-color: transparent;
    border-left: solid 0.13rem;
    border-top: solid 0.13rem;
    border-bottom: solid 0.13rem;
    border-right: none;
    font-size: 1rem;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
        border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    text-transform: uppercase;
}

.WUIButton-stack-middle-color-primary {
    color: var(--palette-text-primary);
    background-color: var(--palette-background-default);
    border-color: var(--palette-divider);
}

.WUIButton-stack-middle-color-primary:hover {
    color: var(--palette-primary-text-light);
    background-color: var(--palette-primary-light);
    border-color: var(--palette-divider);
}

.WUIButton-stack-middle-color-primary:hover span {
    color: var(--palette-primary-text-light);
}

/**************************************************************************/
/***********************************STACK-END******************************/
/**************************************************************************/

.WUIButton-stack-end {
    cursor: pointer;
    font-weight: 500;
    text-align: center;
    background-color: transparent;
    border-left: solid 0.13rem;
    border-right: solid 0.13rem;
    border-top: solid 0.13rem;
    border-bottom: solid 0.13rem;
    font-size: 1rem;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
        border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    text-transform: uppercase;
}

.WUIButton-stack-end-color-primary {
    color: var(--palette-text-primary);
    background-color: var(--palette-background-default);
    border-color: var(--palette-divider);
}

.WUIButton-stack-end-color-primary:hover {
    color: var(--palette-primary-text-light);
    background-color: var(--palette-primary-light);
    border-color: var(--palette-divider);
}

.WUIButton-stack-end-color-primary:hover span {
    color: var(--palette-primary-text-light);
}

/************************************************************************/
/******************************STACK-START-ACTIVE************************/
/************************************************************************/

.WUIButton-stack-start-active {
    cursor: pointer;
    font-weight: 500;
    text-align: center;
    color: var(--palette-primary-text-light);
    background-color: var(--palette-primary-light);
    border-left: solid 0.13rem;
    border-top: solid 0.13rem;
    border-bottom: solid 0.13rem;
    border-right: none;
    font-size: 1rem;
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
        border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    text-transform: uppercase;
}

.WUIButton-stack-start-active-color-primary {
    color: var(--palette-primary-text-light);
    background-color: var(--palette-primary-dark);
    border-color: var(--palette-divider);
}

.WUIButton-stack-start-active-color-primary span {
    color: var(--palette-primary-text-light);
}

.WUIButton-stack-start-active-color-primary:hover {
    color: var(--palette-primary-text-light);
    background-color: var(--palette-primary-light);
    border-color: var(--palette-divider);
}

.WUIButton-stack-start-active-color-primary:hover span {
    color: var(--palette-primary-text-light);
}

/*************************************************************************/
/**************************STACK-MIDDLE-ACTIVE****************************/
/*************************************************************************/

.WUIButton-stack-middle-active {
    cursor: pointer;
    font-weight: 500;
    text-align: center;
    color: var(--palette-primary-text-light);
    background-color: var(--palette-primary-light);
    border-left: solid 0.13rem;
    border-top: solid 0.13rem;
    border-bottom: solid 0.13rem;
    border-right: none;
    font-size: 1rem;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
        border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    text-transform: uppercase;
}

.WUIButton-stack-middle-active-color-primary {
    color: var(--palette-primary-text-light);
    background-color: var(--palette-primary-dark);
    border-color: var(--palette-divider);
}

.WUIButton-stack-middle-active-color-primary span {
    color: var(--palette-primary-text-light);
}

.WUIButton-stack-middle-active-color-primary:hover {
    color: var(--palette-primary-text-light);
    background-color: var(--palette-primary-light);
    border-color: var(--palette-divider);
}

.WUIButton-stack-middle-active-color-primary:hover span {
    color: var(--palette-primary-text-light);
}

/**************************************************************************/
/********************************STACK-END-ACTIVE**************************/
/**************************************************************************/

.WUIButton-stack-end-active {
    cursor: pointer;
    font-weight: 500;
    text-align: center;
    color: var(--palette-primary-text-light);
    background-color: var(--palette-primary-light);
    border-left: solid 0.13rem;
    border-right: solid 0.13rem;
    border-top: solid 0.13rem;
    border-bottom: solid 0.13rem;
    border-right: solid 0.13rem;
    font-size: 1rem;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
        border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    text-transform: uppercase;
}

.WUIButton-stack-end-active-color-primary {
    color: var(--palette-primary-text-light);
    background-color: var(--palette-primary-dark);
    border-color: var(--palette-divider);
}

.WUIButton-stack-end-active-color-primary span {
    color: var(--palette-primary-text-light);
}

.WUIButton-stack-end-active-color-primary:hover {
    color: var(--palette-primary-text-light);
    background-color: var(--palette-primary-light);
    border-color: var(--palette-divider);
}

.WUIButton-stack-end-active-color-primary:hover span {
    color: var(--palette-primary-text-light);
}