@nextcloud/vue
Version:
Nextcloud vue components
110 lines • 3.23 kB
CSS
/**
* SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
* SPDX-License-Identifier: AGPL-3.0-or-later
*/
/**
* SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors
* SPDX-License-Identifier: AGPL-3.0-or-later
*/
/*
* Ensure proper alignment of the vue material icons
*/
.material-design-icon {
display: flex;
align-self: center;
justify-self: center;
align-items: center;
justify-content: center;
}
.app-navigation,
.app-content {
/** Distance of the app navigation toggle and the first navigation item to the top edge of the app content container */
--app-navigation-padding: calc(var(--default-grid-baseline, 4px) * 2);
}/**
* SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
* SPDX-License-Identifier: AGPL-3.0-or-later
*/
/**
* SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors
* SPDX-License-Identifier: AGPL-3.0-or-later
*/
/*
* Ensure proper alignment of the vue material icons
*/
.material-design-icon[data-v-e7d078cc] {
display: flex;
align-self: center;
justify-self: center;
align-items: center;
justify-content: center;
}
.app-navigation[data-v-e7d078cc] {
--color-text-maxcontrast: var(--color-text-maxcontrast-background-blur, var(--color-text-maxcontrast-default));
transition: transform var(--animation-quick), margin var(--animation-quick);
width: 300px;
--app-navigation-max-width: calc(100vw - (var(--app-navigation-padding) + var(--default-clickable-area) + var(--default-grid-baseline)));
max-width: var(--app-navigation-max-width);
position: relative;
top: 0;
left: 0;
padding: 0px;
z-index: 1800;
height: 100%;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
flex-grow: 0;
flex-shrink: 0;
background-color: var(--color-main-background-blur, var(--color-main-background));
-webkit-backdrop-filter: var(--filter-background-blur, none);
backdrop-filter: var(--filter-background-blur, none);
}
.app-navigation--close[data-v-e7d078cc] {
margin-left: calc(-1 * min(300px, var(--app-navigation-max-width)));
}
.app-navigation__search[data-v-e7d078cc] {
width: 100%;
}
.app-navigation__body[data-v-e7d078cc] {
overflow-y: scroll;
}
.app-navigation__content > ul[data-v-e7d078cc] {
position: relative;
width: 100%;
overflow-x: hidden;
overflow-y: auto;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: var(--default-grid-baseline, 4px);
padding: var(--app-navigation-padding);
}
.app-navigation .app-navigation__list[data-v-e7d078cc] {
height: 100%;
}
.app-navigation__body--no-list[data-v-e7d078cc] {
flex: 1 1 auto;
overflow: auto;
height: 100%;
}
.app-navigation__content[data-v-e7d078cc] {
height: 100%;
display: flex;
flex-direction: column;
}
[data-themes*=highcontrast] .app-navigation[data-v-e7d078cc] {
border-inline-end: 1px solid var(--color-border);
}
@media only screen and (max-width: 1024px) {
.app-navigation[data-v-e7d078cc] {
position: absolute;
border-inline-end: 1px solid var(--color-border);
}
}
@media only screen and (max-width: 512px) {
.app-navigation[data-v-e7d078cc] {
z-index: 1400;
}
}