FloatedNav.css

/*************/
/* variables */
/*************/
.quiqqer-floatedNavControl__size-medium {
    --quiqqer-floatedNav-fontSize: 1.75rem;
    --quiqqer-floatedNav-size: 3rem;
    --quiqqer-floatedNav-spacing: 0.75rem;
}

.quiqqer-floatedNavControl__size-small {
    --quiqqer-floatedNav-fontSize: 1.25rem;
    --quiqqer-floatedNav-size: 2rem;
    --quiqqer-floatedNav-spacing: 0.5rem;
}

.quiqqer-floatedNavControl__size-large {
    --quiqqer-floatedNav-fontSize: 2rem;
    --quiqqer-floatedNav-size: 3.5rem;
    --quiqqer-floatedNav-spacing: 1rem;
}

/***********/
/* control */
/***********/
.quiqqer-floatedNavControl {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

.quiqqer-floatedNavControl__posX-right {
    right: 0;
}

.quiqqer-floatedNavControl__posX-left {
    left: 0;
}

@media screen and (max-width: 767px) {
    .quiqqer-floatedNavControl__toggleButton-mobile.quiqqer-floatedNavControl__posX-right .quiqqer-floatedNav {
        transform: translateX(100px);
    }
}

.quiqqer-floatedNav-entry {
    /*transition: 0.2s all ease;*/
}

.quiqqer-floatedNav-entry-inner,
.quiqqer-floatedNav-toggleBtn {
    background: var(--qui-color-main, #333);
    border: var(--qui-border-width, 2px) solid var(--qui-color-main, #333);
    color: var(--qui-color-main-contrast, #fff);
    cursor: pointer;
    display: block;
    font-size: var(--quiqqer-floatedNav-fontSize);
    line-height: calc(var(--quiqqer-floatedNav-size) - (2 * var(--qui-border-width, 2px)));
    overflow: hidden;
    text-align: center;
    width: var(--quiqqer-floatedNav-size);
}

/* lang switch */
.quiqqer-floatedNav .quiqqer-bricks-languageswitch-flag {
    display: flex;
    flex-direction: column;
    float: none;
    font-size: calc(0.75 * var(--quiqqer-floatedNav-fontSize));
    overflow: hidden;
    width: var(--quiqqer-floatedNav-size);
}

.quiqqer-floatedNav .quiqqer-bricks-languageswitch-flag-entry {
    background: var(--qui-color-main, #333);
    color: var(--qui-color-main-contrast, #fff);
    font-weight: bold;
    line-height: calc(0.5 * var(--quiqqer-floatedNav-size));
    padding: 0;
    text-align: center;
    text-transform: uppercase;
}

.quiqqer-floatedNav .quiqqer-bricks-languageswitch-flag-entry:not(.active) {
    background-color: var(--qui-color-dark, #333);
}

.quiqqer-floatedNav .quiqqer-bricks-languageswitch-flag-entry:not(:first-child) {
    border-top: 2px solid #fff;
}

.quiqqer-floatedNav .quiqqer-bricks-languageswitch-flag-entry-text {
    display: block;
    line-height: inherit;
}


/* hover */
.quiqqer-floatedNav-entry:hover,
.quiqqer-bricks-languageswitch-flag-entry:hover,
.quiqqer-floatedNav-toggleBtn:hover {
    filter: brightness(90%);
}

/* Toggle btn */
.quiqqer-floatedNav-toggleBtn {
    display: none;
    text-align: center;
}

.quiqqer-floatedNav-toggleBtn .fa {
    cursor: pointer;
    line-height: inherit;
}

@media screen and (max-width: 767px) {
    .quiqqer-floatedNav-toggleBtn {
        display: block;
    }
}

/***********/
/* Designs */
/***********/

/* Design: Bar with icons */
.quiqqer-floatedNavControl__design-iconsBar .quiqqer-floatedNav {
    background: #fff;
    border-bottom-left-radius: 0.75rem;
    border-top-left-radius: 0.75rem;
    box-shadow: -3px 3px 8px rgb(0 0 0 / 30%);
    padding: var(--quiqqer-floatedNav-spacing);
}

.quiqqer-floatedNavControl__design-iconsBar .quiqqer-floatedNav-toggleBtn {
    font-size: calc(var(--quiqqer-floatedNav-fontSize) / 1.5);
    line-height: calc((var(--quiqqer-floatedNav-size) - (2 * var(--qui-border-width, 2px))) / 1.5);
    margin-bottom: var(--quiqqer-floatedNav-spacing);
    width: calc(var(--quiqqer-floatedNav-size) / 1.5);
}

/* nav on the right */
.quiqqer-floatedNavControl__posX-right.quiqqer-floatedNavControl__design-iconsBar .quiqqer-floatedNav-toggleBtn {
    margin-left: auto;
}

.quiqqer-floatedNavControl__design-iconsBar .quiqqer-floatedNav-toggleBtn,
.quiqqer-floatedNavControl__design-iconsBar .quiqqer-floatedNav-entry-inner,
.quiqqer-floatedNavControl__design-iconsBar .quiqqer-bricks-languageswitch-flag {
    border-radius: var(--qui-btn-border-radius, 5px);
}

.quiqqer-floatedNavControl__design-iconsBar .quiqqer-floatedNav-entry:not(:last-child) .quiqqer-floatedNav-entry-inner {
    margin-bottom: var(--quiqqer-floatedNav-spacing);
}

/* Design: flat */
.quiqqer-floatedNavControl__design-flat .quiqqer-floatedNav-entry:not(:last-child),
.quiqqer-floatedNavControl__design-flat .quiqqer-floatedNav-toggleBtn {
    margin-bottom: 2px;
}

/*************/
/* Animation */
/*************/
.quiqqer-floatedNavControl__initAnimation .quiqqer-floatedNav__animation-showAll,
.quiqqer-floatedNavControl__initAnimation .quiqqer-floatedNav-toggleBtn,
.quiqqer-floatedNavControl__initAnimation .quiqqer-floatedNav__animation-showOneByOne .quiqqer-floatedNav-entry {
    visibility: hidden;
}

/* no animation */
@media screen and (max-width: 767px) {
    .quiqqer-floatedNavControl__noInitAnimation .quiqqer-floatedNav__animation-showOneByOne .quiqqer-floatedNav-entry {
        transform: translateX(60px);
    }
}

@media screen and (min-width: 798px) {
    .quiqqer-floatedNavControl__noInitAnimation .quiqqer-floatedNav-toggleBtn .fa {
        transform: rotate(180deg);
    }
}

/************************/
/* nav init open status */
/************************/