META-INF.resources.frontend.styles.components.navi-item.css Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of fluent-vaadin-flow Show documentation

Broderick Labs for fluent vaadin flow. Inherits common Vaadin components.

There is a newer version: 22.0.1

/*
 * Copyright (c) 2008 - 2020. - Broderick Labs.
 * Author: Broderick Johansson
 * E-mail: [email protected]
 * Modify date：2020-07-02 09:33:44
 * _____________________________
 * Project name: fluent-vaadin-flow
 * Class name：D:/broderick/develop/vaadin/16/fluent-vaadin-flow/frontend/styles/components/navi-item.css
 * Copyright (c) 2008 - 2020. - Broderick Labs.
 */

.navi-item {
    align-items: center;
    display: flex;
    font-size: var(--lumo-font-size-s);
    font-weight: 500;
    height: var(--lumo-size-l);
    transition: background-color var(--transition-duration-s);
}

/* Sub items */
.navi-item[level] {
    font-size: var(--lumo-font-size-xs);
    font-weight: normal;
    height: var(--lumo-size-m);
}

.navi-item[level="1"] span {
    font-weight: 500;
    margin-left: var(--navi-item-indentation);
}

.navi-item[level="2"] span {
    font-weight: 400;
    margin-left: calc(var(--navi-item-indentation) + var(--lumo-space-m));
}

.navi-item[level="3"] span {
    font-weight: 300;
    margin-left: calc(var(--navi-item-indentation) + calc(var(--lumo-space-m) * 2));
}

/* Hover */
.navi-item:hover {
    background-color: var(--lumo-contrast-10pct);
    text-decoration: none;
}

/* Active */
.navi-item:active {
    background-color: var(--lumo-contrast-20pct);
}

/* Link */
. {
    align-items: center;
    display: flex;
    flex-grow: 1;
    height: 100%;
    overflow: hidden;
    padding-left: var(--lumo-space-m);
    padding-right: var(--lumo-space-m);
}

/* Highlight */
.navi-item__link[highlight] {
    background-color: var(--lumo-primary-color-10pct);
    width: 100%;
    padding: 10px 0;
}

.navi-item__link:not([highlight]) {
    color: var(--lumo-body-text-color);
}

.navi-item__link:not([highlight]) iron-icon {
    color: var(--lumo-tertiary-text-color);
}

/* Icon */
.navi-item__link iron-icon {
    height: var(--lumo-icon-size-s);
    flex-shrink: 0;
    margin: 0 var(--lumo-space-l) 0 0;
    transition: margin var(--transition-duration-s);
    width: var(--lumo-icon-size-s);
    padding-left: var(--lumo-space-l);
}

/* Text */
.navi-item__link span {
    cursor: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    user-select: none;
    -webkit-user-select: none;
    white-space: nowrap;
}

/* Expand & collapse */
.navi-item vaadin-button {
    flex-shrink: 0;
    margin-left: auto;
    margin-right: var(--lumo-space-s);
}