META-INF.resources.frontend.styles.components.app-bar.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/app-bar.css
 * Copyright (c) 2008 - 2020. - Broderick Labs.
 */
.app-bar {
    background-color: var(--lumo-base-color);
    box-shadow: var(--lumo-box-shadow-xs);
    flex-direction: column;
    position: relative;
    z-index: 1;
}

/* Container */
.app-bar__container {
    padding-left: var(--lumo-space-r-l);
    padding-right: var(--lumo-space-r-s);
    transition: padding var(--transition-duration-m);
}

.app-bar__container:not(:first-child) {
    margin-left: var(--lumo-space-m);
}

/* Navi icon */
.app-bar__navi-icon,
.app-bar__context-icon {
    margin-bottom: calc((var(--app-bar-height) - var(--lumo-icon-size-m)) / 2);
    margin-right: var(--lumo-space-s);
    margin-top: calc((var(--app-bar-height) - var(--lumo-icon-size-m)) / 2);
}

/* Title */
.app-bar__title {
    font-size: var(--lumo-font-size-l);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: var(--lumo-space-l);
    white-space: nowrap;
    font-weight: 500;
}

.app-bar__title:not(:empty) {
    margin-bottom: calc((var(--app-bar-height) - (var(--lumo-font-size-l) * var(--lumo-line-height-xs))) / 2);
    margin-top: calc((var(--app-bar-height) - (var(--lumo-font-size-l) * var(--lumo-line-height-xs))) / 2);
}

/* Action items */
.app-bar__action-items > *:not(:last-child) {
    margin-right: var(--lumo-space-s);
}

.app-bar__middle-action-items {
    margin: 0 auto;
}

/* Action items */
.app-bar__left-action-items > *:not(:first-child) {
    margin-left: var(--lumo-space-s);
}
.app-bar__left-action-items {
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: var(--lumo-space-l);
    white-space: nowrap;
}

/* Search */
.app-bar vaadin-text-field {
    padding-bottom: 0;
    padding-top: 0;
}

/* Avatar */
.app-bar__avatar {
    border-radius: 100%;
    flex-shrink: 0;
    height: var(--lumo-size-s);
    margin-left: var(--lumo-space-m);
    width: var(--lumo-size-s);
}

/* Tabs */
.app-bar__tab-container {
    padding-left: var(--lumo-space-r-l);
    padding-right: var(--lumo-space-r-l);
}

.app-bar__tabs {
    box-shadow: none;
}

.app-bar__tab vaadin-button {
    margin-bottom: 0;
    margin-left: var(--lumo-space-s);
    margin-top: 0;
}

.app-bar__add-tab {
    flex-shrink: 0;
}

/* Hide the menu button on 'wide' viewports */
@media (min-width: 1024px) {
    .app-bar__navi-icon {
        display: none;
    }
}

/* === IE 11 workarounds === */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* IE 11 can't handle different themes for sub-parts of the application, without the parts having own
       shadow roots. Instead of polluting the code for all browsers, the relevant colors of dark theme
       is hard coded here. */
    .app-bar {
        color: hsl(214, 100%, 98%);
        background-color: hsl(214, 35%, 21%);
        box-shadow: 0 2px 4px -1px hsla(214, 8%, 4%, 0.23), 0 3px 12px -1px hsla(214, 12%, 6%, 0.32);
    }

    .app-bar__title {
        color: hsl(214, 100%, 98%);
    }
}