@lucsoft/webgen/bin/css/iconbutton.webgen.static.css

Collection of lucsofts Components

.wiconbutton {
    height: 37px;
    width: 39px;
    display: inline-flex;
    align-items: center;
    border-radius: 5px;
    cursor: pointer;
    user-select: none;
    transition: transform 100ms ease;
    z-index: 1;
    color: var(--font-color);
    background: hsl(var(--background-color-h), var(--background-color-s), var(--background-color-l));
    justify-content: center;
    overflow: hidden;
}

.wiconbutton .bi {
    font-size: 25px;
}

.wiconbutton:not(.disabled) {
    box-shadow: 0px 0px 0px 0px hsla(var(--background-color-h), var(--background-color-s), var(--background-color-l), 25%);
    transition: box-shadow 250ms ease;
}

.wiconbutton:focus {
    outline: none;
}

.wiconbutton:not(.disabled):is(:hover, :focus) {
    box-shadow: 0px 0px 0px 4px hsla(var(--background-color-h), var(--background-color-s), var(--background-color-l), 25%);
}

.wiconbutton.grayscaled {
    --background-color-h: var(--color-grayscaled-hue);
    --background-color-s: var(--color-grayscaled-saturation);
    --background-color-l: var(--color-grayscaled-lightness);
    --font-color: var(--color-grayscaled-font);
}

.wiconbutton.colored {
    --background-color-h: var(--color-colored-hue);
    --background-color-s: var(--color-colored-saturation);
    --background-color-l: var(--color-colored-lightness);
    --font-color: var(--color-colored-font);
}

.wiconbutton.critical {
    --background-color-h: var(--color-critical-hue);
    --background-color-s: var(--color-critical-saturation);
    --background-color-l: var(--color-critical-lightness);
    --font-color: var(--color-critical-font);
}

.wiconbutton.disabled {
    cursor: default;
    --background-color-h: var(--color-disabled-hue);
    --background-color-s: var(--color-disabled-saturation);
    --background-color-l: var(--color-disabled-lightness);
    --font-color: var(--color-disabled-font);
}