@nextcloud/vue
Version:
Nextcloud vue components
60 lines • 2.5 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[data-v-b97e1f7a] {
display: flex;
align-self: center;
justify-self: center;
align-items: center;
justify-content: center;
}
.native-datetime-picker[data-v-b97e1f7a] {
display: flex;
flex-direction: column;
}
.native-datetime-picker .native-datetime-picker__label[data-v-b97e1f7a] {
margin-block-end: 2px;
}
.native-datetime-picker .native-datetime-picker__input[data-v-b97e1f7a] {
--input-border-width-offset: calc(var(--border-width-input-focused, 2px) - var(--border-width-input, 2px));
width: 100%;
flex: 0 0 auto;
margin: 0;
padding-inline-start: calc(var(--border-radius-element) + var(--input-border-width-offset));
padding-inline-end: calc(var(--default-grid-baseline) + var(--input-border-width-offset));
border: var(--border-width-input, 2px) solid var(--color-border-maxcontrast);
}
.native-datetime-picker .native-datetime-picker__input[data-v-b97e1f7a]:active:not([disabled]), .native-datetime-picker .native-datetime-picker__input[data-v-b97e1f7a]:hover:not([disabled]), .native-datetime-picker .native-datetime-picker__input[data-v-b97e1f7a]:focus:not([disabled]), .native-datetime-picker .native-datetime-picker__input[data-v-b97e1f7a]:focus-within:not([disabled]) {
border-color: var(--color-main-text);
border-width: var(--border-width-input-focused, 2px);
box-shadow: 0 0 0 2px var(--color-main-background) ;
--input-border-width-offset: 0px;
}
[data-theme-light] .native-datetime-picker__input[data-v-b97e1f7a],
[data-themes*=light] .native-datetime-picker__input[data-v-b97e1f7a] {
color-scheme: light;
}
[data-theme-dark] .native-datetime-picker__input[data-v-b97e1f7a],
[data-themes*=dark] .native-datetime-picker__input[data-v-b97e1f7a] {
color-scheme: dark;
}
@media (prefers-color-scheme: light) {
[data-theme-default] .native-datetime-picker__input[data-v-b97e1f7a],
[data-themes*=default] .native-datetime-picker__input[data-v-b97e1f7a] {
color-scheme: light;
}
}
@media (prefers-color-scheme: dark) {
[data-theme-default] .native-datetime-picker__input[data-v-b97e1f7a],
[data-themes*=default] .native-datetime-picker__input[data-v-b97e1f7a] {
color-scheme: dark;
}
}