@nextcloud/vue
Version:
Nextcloud vue components
88 lines • 2.91 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_v5un7_12 {
display: flex;
align-self: center;
justify-self: center;
align-items: center;
justify-content: center;
}
._formBoxItem_v5un7_20 {
--nc-form-box-item-border-width: 1px;
--nc-form-box-item-min-height: 40px;
--form-element-label-offset: calc(var(--border-radius-element) + var(--default-grid-baseline));
--form-element-label-padding: calc(var(--form-element-label-offset) - var(--nc-form-box-item-border-width));
--color-primary-element-extra-light: hsl(from var(--color-primary-element-light) h s calc(l * 1.045));
--color-primary-element-extra-light-hover: hsl(from var(--color-primary-element-light-hover) h s calc(l * 1.045));
position: relative;
display: flex;
align-items: center;
gap: calc(2 * var(--default-grid-baseline));
min-height: var(--nc-form-box-item-min-height);
padding-inline: var(--form-element-label-padding);
border: 1px solid var(--color-primary-element-extra-light-hover);
border-bottom-width: 2px;
border-radius: var(--border-radius-element);
background-color: var(--color-primary-element-extra-light);
color: var(--color-main-text);
transition-property: color, border-color, background-color;
transition-duration: var(--animation-quick);
transition-timing-function: linear;
-webkit-user-select: none;
user-select: none;
cursor: pointer;
}
._formBoxItem_v5un7_20 * {
cursor: inherit;
}
._formBoxItem_v5un7_20:has(:disabled) {
cursor: default;
opacity: 0.5;
}
._formBoxItem_v5un7_20:hover:not(:has(:disabled)) {
color: var(--color-primary-element-light-text);
background-color: var(--color-primary-element-extra-light-hover);
}
._formBoxItem_v5un7_20:has(:focus-visible) {
outline: 2px solid var(--color-main-text);
box-shadow: 0 0 0 4px var(--color-main-background);
}
._formBoxItem_v5un7_20._formBoxItem_legacy_v5un7_60 {
--nc-form-box-item-border-width: 0px;
border: none;
}
._formBoxItem_v5un7_20._formBoxItem_inverted_v5un7_64 ._formBoxItem__element_v5un7_64 {
color: var(--color-text-maxcontrast);
}
._formBoxItem_v5un7_20._formBoxItem_inverted_v5un7_64 ._formBoxItem__description_v5un7_67 {
color: inherit;
}
._formBoxItem__content_v5un7_71 {
flex: 1;
display: flex;
flex-direction: column;
padding-block: calc(2 * var(--default-grid-baseline));
overflow-wrap: anywhere;
}
._formBoxItem__element_v5un7_64::after {
content: "";
position: absolute;
inset: 0;
}
._formBoxItem__description_v5un7_67 {
color: var(--color-text-maxcontrast);
}
._formBoxItem__icon_v5un7_89 {
display: flex;
align-items: center;
justify-content: flex-end;
}