diff --git a/packages/docs/src/main.ts b/packages/docs/src/main.ts index f2ef73fbf3d..f328c802bfe 100644 --- a/packages/docs/src/main.ts +++ b/packages/docs/src/main.ts @@ -1,17 +1,11 @@ // Styles import 'prism-theme-vars/base.css' -// App -import App from './App.vue' - -// Virtual -// import 'virtual:api' -import { setupLayouts } from 'virtual:generated-layouts' - // Plugins import { createApp } from 'vue' import { createRouter, createWebHistory } from 'vue-router' import { createHead } from '@unhead/vue' +import { installVuetify } from '@/plugins/vuetify' import { installPinia, pinia } from '@/plugins/pinia' import { installGlobalComponents } from '@/plugins/global-components' import { installGtag } from '@/plugins/gtag' @@ -21,7 +15,13 @@ import { useAppStore } from '@/stores/app' import { useLocaleStore } from '@/stores/locale' import { installPwa } from '@/plugins/pwa' import { useUserStore } from '@vuetify/one' -import { installVuetify } from '@/plugins/vuetify' + +// App +import App from './App.vue' + +// Virtual +// import 'virtual:api' +import { setupLayouts } from 'virtual:generated-layouts' // Utilities import { diff --git a/packages/docs/src/pages/en/features/sass-variables.md b/packages/docs/src/pages/en/features/sass-variables.md index dbed260679e..0a6e7617536 100644 --- a/packages/docs/src/pages/en/features/sass-variables.md +++ b/packages/docs/src/pages/en/features/sass-variables.md @@ -233,6 +233,30 @@ Color packs are handy for quickly applying a color to a component but mostly unu ); ``` +## Enabling CSS cascade layers + +::: success +This feature was introduced in [v3.6.0 (Nebula)](/getting-started/release-notes/?version=v3.6.0) +::: + +[Cascade layers](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) are a modern CSS feature that makes it easier to write custom styles without having to deal with specificity issues and `!important`. This will be included by default in Vuetify 4 but can optionally be used now: + +```scss { resource="src/styles/settings.scss" } +@forward 'vuetify/settings' with ( + $layers: true, +); +``` + +Import order of stylesheets becomes much more important with layers enabled, `import 'vuetify/styles'` or a file containing `@use 'vuetify'` **must** be loaded *before* any components or the CSS reset will take precedence over component styles and break everything. If you have separate plugin files make sure to import vuetify's before `App.vue`. + +Your own styles will always* override vuetify's if you don't use `@layer` yourself, or you can specify an order for custom layers in a stylesheet loaded before vuetify. + +```css { resource="src/styles/layers.css" } +@layer base, vuetify, overrides; +``` + +\* Layers invert `!important`, so anything trying to override an important vuetify style must also be in a layer. { class="text-caption" } + ## Caveats When using sass variables, there are a few considerations to be aware of. diff --git a/packages/docs/src/pages/en/getting-started/installation.md b/packages/docs/src/pages/en/getting-started/installation.md index 10bdb524b5f..fe3fe4e3f53 100644 --- a/packages/docs/src/pages/en/getting-started/installation.md +++ b/packages/docs/src/pages/en/getting-started/installation.md @@ -218,7 +218,6 @@ You should now have access to all Vuetify components and tools in Nuxt app. ```js import { createApp } from 'vue' -import App from './App.vue' // Vuetify import '@mdi/font/css/materialdesignicons.css' @@ -227,6 +226,9 @@ import { createVuetify } from 'vuetify' import * as components from 'vuetify/components' import * as directives from 'vuetify/directives' +// Components +import App from './App.vue' + const vuetify = createVuetify({ components, directives @@ -293,7 +295,6 @@ In the file where you create the Vue application, add the following code ```js import { createApp } from 'vue' -import App from './App.vue' // Vuetify import 'vuetify/styles' @@ -301,6 +302,9 @@ import { createVuetify } from 'vuetify' import * as components from 'vuetify/components' import * as directives from 'vuetify/directives' +// Components +import App from './App.vue' + const vuetify = createVuetify({ components, directives, diff --git a/packages/vuetify/src/components/VAlert/VAlert.sass b/packages/vuetify/src/components/VAlert/VAlert.sass index c65a3dd0fe4..4111eec72d0 100644 --- a/packages/vuetify/src/components/VAlert/VAlert.sass +++ b/packages/vuetify/src/components/VAlert/VAlert.sass @@ -1,132 +1,133 @@ @use '../../styles/tools' @use './variables' as * -.v-alert - display: grid - flex: 1 1 - grid-template-areas: "prepend content append close" ". content . ." - grid-template-columns: max-content auto max-content max-content - position: relative - padding: $alert-padding - overflow: hidden - --v-border-color: #{$alert-border-color} - - @include tools.position($alert-positions) - @include tools.rounded($alert-border-radius) - @include tools.variant($alert-variants...) - - &--prominent - grid-template-areas: "prepend content append close" "prepend content . ." - - &.v-alert--border - --v-border-opacity: #{$alert-border-opacity} - - &.v-alert--border-start - padding-inline-start: $alert-padding + $alert-border-thin-width - - &.v-alert--border-end - padding-inline-end: $alert-padding + $alert-border-thin-width - - &--variant-plain - transition: $alert-plain-transition - - @at-root - @include tools.density('v-alert', $alert-density) using ($modifier) - padding-bottom: $alert-padding + $modifier - padding-top: $alert-padding + $modifier - - &.v-alert--border-top - padding-top: $alert-padding + $alert-border-thin-width + $modifier - - &.v-alert--border-bottom - padding-bottom: $alert-padding + $alert-border-thin-width + $modifier - -.v-alert__border - border-radius: inherit - bottom: 0 - left: 0 - opacity: var(--v-border-opacity) - position: absolute - pointer-events: none - right: 0 - top: 0 - width: 100% - - @include tools.border($alert-border...) - - .v-alert--border-start & - border-inline-start-width: $alert-border-thin-width - - .v-alert--border-end & - border-inline-end-width: $alert-border-thin-width - - .v-alert--border-top & - border-top-width: $alert-border-thin-width - - .v-alert--border-bottom & - border-bottom-width: $alert-border-thin-width - -.v-alert__close - flex: 0 1 auto - grid-area: close - -.v-alert__content - align-self: center - grid-area: content - overflow: hidden - -.v-alert__append, -.v-alert__close - align-self: flex-start - margin-inline-start: $alert-append-margin-inline-start - -.v-alert__append - align-self: flex-start - grid-area: append - - + .v-alert__close - margin-inline-start: $alert-append-close-margin-inline-start - -.v-alert__prepend - align-self: flex-start - display: flex - align-items: center - grid-area: prepend - margin-inline-end: $alert-prepend-margin-inline-end - - .v-alert--prominent & +@include tools.layer('components') + .v-alert + display: grid + flex: 1 1 + grid-template-areas: "prepend content append close" ". content . ." + grid-template-columns: max-content auto max-content max-content + position: relative + padding: $alert-padding + overflow: hidden + --v-border-color: #{$alert-border-color} + + @include tools.position($alert-positions) + @include tools.rounded($alert-border-radius) + @include tools.variant($alert-variants...) + + &--prominent + grid-template-areas: "prepend content append close" "prepend content . ." + + &.v-alert--border + --v-border-opacity: #{$alert-border-opacity} + + &.v-alert--border-start + padding-inline-start: $alert-padding + $alert-border-thin-width + + &.v-alert--border-end + padding-inline-end: $alert-padding + $alert-border-thin-width + + &--variant-plain + transition: $alert-plain-transition + + @at-root + @include tools.density('v-alert', $alert-density) using ($modifier) + padding-bottom: $alert-padding + $modifier + padding-top: $alert-padding + $modifier + + &.v-alert--border-top + padding-top: $alert-padding + $alert-border-thin-width + $modifier + + &.v-alert--border-bottom + padding-bottom: $alert-padding + $alert-border-thin-width + $modifier + + .v-alert__border + border-radius: inherit + bottom: 0 + left: 0 + opacity: var(--v-border-opacity) + position: absolute + pointer-events: none + right: 0 + top: 0 + width: 100% + + @include tools.border($alert-border...) + + .v-alert--border-start & + border-inline-start-width: $alert-border-thin-width + + .v-alert--border-end & + border-inline-end-width: $alert-border-thin-width + + .v-alert--border-top & + border-top-width: $alert-border-thin-width + + .v-alert--border-bottom & + border-bottom-width: $alert-border-thin-width + + .v-alert__close + flex: 0 1 auto + grid-area: close + + .v-alert__content align-self: center + grid-area: content + overflow: hidden + + .v-alert__append, + .v-alert__close + align-self: flex-start + margin-inline-start: $alert-append-margin-inline-start + + .v-alert__append + align-self: flex-start + grid-area: append + + + .v-alert__close + margin-inline-start: $alert-append-close-margin-inline-start + + .v-alert__prepend + align-self: flex-start + display: flex + align-items: center + grid-area: prepend + margin-inline-end: $alert-prepend-margin-inline-end -.v-alert__underlay - grid-area: none - position: absolute - - .v-alert--border-start & - border-top-left-radius: 0 - border-bottom-left-radius: 0 - - .v-alert--border-end & - border-top-right-radius: 0 - border-bottom-right-radius: 0 - - .v-alert--border-top & - border-top-left-radius: 0 - border-top-right-radius: 0 - - .v-alert--border-bottom & - border-bottom-left-radius: 0 - border-bottom-right-radius: 0 - -.v-alert-title - align-items: center - align-self: center - display: flex - font-size: $alert-title-font-size - font-weight: $alert-title-font-weight - hyphens: $alert-title-hyphens - letter-spacing: $alert-title-letter-spacing - line-height: $alert-title-line-height - overflow-wrap: $alert-title-overflow-wrap - text-transform: $alert-title-text-transform - word-break: $alert-title-word-break - word-wrap: $alert-title-word-wrap + .v-alert--prominent & + align-self: center + + .v-alert__underlay + grid-area: none + position: absolute + + .v-alert--border-start & + border-top-left-radius: 0 + border-bottom-left-radius: 0 + + .v-alert--border-end & + border-top-right-radius: 0 + border-bottom-right-radius: 0 + + .v-alert--border-top & + border-top-left-radius: 0 + border-top-right-radius: 0 + + .v-alert--border-bottom & + border-bottom-left-radius: 0 + border-bottom-right-radius: 0 + + .v-alert-title + align-items: center + align-self: center + display: flex + font-size: $alert-title-font-size + font-weight: $alert-title-font-weight + hyphens: $alert-title-hyphens + letter-spacing: $alert-title-letter-spacing + line-height: $alert-title-line-height + overflow-wrap: $alert-title-overflow-wrap + text-transform: $alert-title-text-transform + word-break: $alert-title-word-break + word-wrap: $alert-title-word-wrap diff --git a/packages/vuetify/src/components/VApp/VApp.sass b/packages/vuetify/src/components/VApp/VApp.sass index 68f2ccf0bc4..5a57a27850c 100644 --- a/packages/vuetify/src/components/VApp/VApp.sass +++ b/packages/vuetify/src/components/VApp/VApp.sass @@ -1,16 +1,18 @@ +@use '../../styles/tools' @use './variables' as * -.v-application - display: flex - background: $application-background - color: $application-color +@include tools.layer('components') + .v-application + display: flex + background: $application-background + color: $application-color -.v-application__wrap - backface-visibility: hidden - display: flex - flex-direction: column - flex: 1 1 auto - max-width: 100% - min-height: 100vh - min-height: 100dvh - position: relative + .v-application__wrap + backface-visibility: hidden + display: flex + flex-direction: column + flex: 1 1 auto + max-width: 100% + min-height: 100vh + min-height: 100dvh + position: relative diff --git a/packages/vuetify/src/components/VAppBar/VAppBar.sass b/packages/vuetify/src/components/VAppBar/VAppBar.sass index 79714ed2f50..44d695d6d36 100644 --- a/packages/vuetify/src/components/VAppBar/VAppBar.sass +++ b/packages/vuetify/src/components/VAppBar/VAppBar.sass @@ -1,14 +1,15 @@ @use '../../styles/tools' @use './variables' as * -.v-app-bar - display: flex +@include tools.layer('components') + .v-app-bar + display: flex - &.v-toolbar - @include tools.theme($app-bar-theme...) + &.v-toolbar + @include tools.theme($app-bar-theme...) - &:not(.v-toolbar--flat) - @include tools.elevation($app-bar-elevation) + &:not(.v-toolbar--flat) + @include tools.elevation($app-bar-elevation) - &:not(.v-toolbar--absolute) - padding-inline-end: var(--v-scrollbar-offset) + &:not(.v-toolbar--absolute) + padding-inline-end: var(--v-scrollbar-offset) diff --git a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.sass b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.sass index 535b782dd17..b34cf13c8b9 100644 --- a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.sass +++ b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.sass @@ -4,102 +4,103 @@ @use '../../styles/tools' @use './variables' as * -.v-autocomplete - .v-field - .v-text-field__prefix, - .v-text-field__suffix, - .v-field__input, - &.v-field - cursor: text - - .v-field - .v-field__input - > input - flex: 1 1 - - .v-field - input - min-width: $autocomplete-focused-input - - &:not(.v-field--focused) - input - min-width: 0 - - .v-field--dirty - .v-autocomplete__selection - margin-inline-end: $autocomplete-selection-gap - - .v-autocomplete__selection-text - overflow: hidden - text-overflow: ellipsis - white-space: nowrap - -.v-autocomplete - &__content - overflow: hidden - - @include tools.elevation($autocomplete-content-elevation) - @include tools.rounded($autocomplete-content-border-radius) - - &__mask - background: rgb(var(--v-theme-surface-light)) - - &__selection - display: inline-flex - align-items: center - height: calc($input-font-size * $input-line-height) - letter-spacing: inherit - line-height: inherit - max-width: calc(100% - $autocomplete-selection-gap - $autocomplete-input-buffer) - - &__selection - &:first-child - margin-inline-start: 0 - - &--chips.v-input--density-compact - .v-field--variant-solo, - .v-field--variant-solo-inverted, - .v-field--variant-filled, - .v-field--variant-solo-filled - .v-label.v-field-label - &--floating - top: 0px - - &--selecting-index - .v-autocomplete__selection - opacity: var(--v-medium-emphasis-opacity) - - &--selected - opacity: 1 - - .v-field__input > input - caret-color: transparent - - &--single:not(.v-autocomplete--selection-slot) - &.v-text-field input - flex: 1 1 - position: absolute - left: 0 - right: 0 - width: 100% - padding-inline: inherit - - .v-field--active +@include tools.layer('components') + .v-autocomplete + .v-field + .v-text-field__prefix, + .v-text-field__suffix, + .v-field__input, + &.v-field + cursor: text + + .v-field + .v-field__input + > input + flex: 1 1 + + .v-field input - transition: none + min-width: $autocomplete-focused-input - .v-field--dirty:not(.v-field--focused) - input - opacity: 0 + &:not(.v-field--focused) + input + min-width: 0 - .v-field--focused + .v-field--dirty + .v-autocomplete__selection + margin-inline-end: $autocomplete-selection-gap + + .v-autocomplete__selection-text + overflow: hidden + text-overflow: ellipsis + white-space: nowrap + + .v-autocomplete + &__content + overflow: hidden + + @include tools.elevation($autocomplete-content-elevation) + @include tools.rounded($autocomplete-content-border-radius) + + &__mask + background: rgb(var(--v-theme-surface-light)) + + &__selection + display: inline-flex + align-items: center + height: calc($input-font-size * $input-line-height) + letter-spacing: inherit + line-height: inherit + max-width: calc(100% - $autocomplete-selection-gap - $autocomplete-input-buffer) + + &__selection + &:first-child + margin-inline-start: 0 + + &--chips.v-input--density-compact + .v-field--variant-solo, + .v-field--variant-solo-inverted, + .v-field--variant-filled, + .v-field--variant-solo-filled + .v-label.v-field-label + &--floating + top: 0px + + &--selecting-index .v-autocomplete__selection - opacity: 0 + opacity: var(--v-medium-emphasis-opacity) - &__menu-icon - margin-inline-start: 4px - transition: $autocomplete-transition + &--selected + opacity: 1 - .v-autocomplete--active-menu & - opacity: var(--v-high-emphasis-opacity) - transform: rotate(180deg) + .v-field__input > input + caret-color: transparent + + &--single:not(.v-autocomplete--selection-slot) + &.v-text-field input + flex: 1 1 + position: absolute + left: 0 + right: 0 + width: 100% + padding-inline: inherit + + .v-field--active + input + transition: none + + .v-field--dirty:not(.v-field--focused) + input + opacity: 0 + + .v-field--focused + .v-autocomplete__selection + opacity: 0 + + &__menu-icon + margin-inline-start: 4px + transition: $autocomplete-transition + + .v-autocomplete--active-menu & + opacity: var(--v-high-emphasis-opacity) + transform: rotate(180deg) diff --git a/packages/vuetify/src/components/VAvatar/VAvatar.sass b/packages/vuetify/src/components/VAvatar/VAvatar.sass index 88a7352ce45..2ed652aab23 100644 --- a/packages/vuetify/src/components/VAvatar/VAvatar.sass +++ b/packages/vuetify/src/components/VAvatar/VAvatar.sass @@ -3,33 +3,34 @@ @use './mixins' as * @use './variables' as * -.v-avatar - flex: none - align-items: center - display: inline-flex - justify-content: center - line-height: $avatar-line-height - overflow: hidden - position: relative - text-align: center - transition: 0.2s settings.$standard-easing - transition-property: width, height - vertical-align: $avatar-vertical-align +@include tools.layer('components') + .v-avatar + flex: none + align-items: center + display: inline-flex + justify-content: center + line-height: $avatar-line-height + overflow: hidden + position: relative + text-align: center + transition: 0.2s settings.$standard-easing + transition-property: width, height + vertical-align: $avatar-vertical-align - @include avatar-sizes($avatar-sizes) - @include avatar-density(('height', 'width'), $avatar-density) - @include tools.rounded($avatar-border-radius) - @include tools.variant($avatar-variants...) + @include avatar-sizes($avatar-sizes) + @include avatar-density(('height', 'width'), $avatar-density) + @include tools.rounded($avatar-border-radius) + @include tools.variant($avatar-variants...) - &--rounded - @include tools.rounded($avatar-rounded-border-radius) + &--rounded + @include tools.rounded($avatar-rounded-border-radius) - &--start - margin-inline-end: $avatar-margin-start + &--start + margin-inline-end: $avatar-margin-start - &--end - margin-inline-start: $avatar-margin-end + &--end + margin-inline-start: $avatar-margin-end - .v-img - height: 100% - width: 100% + .v-img + height: 100% + width: 100% diff --git a/packages/vuetify/src/components/VBadge/VBadge.sass b/packages/vuetify/src/components/VBadge/VBadge.sass index b51c43795c7..0c815887d28 100644 --- a/packages/vuetify/src/components/VBadge/VBadge.sass +++ b/packages/vuetify/src/components/VBadge/VBadge.sass @@ -1,73 +1,74 @@ @use '../../styles/tools' @use './variables' as * -.v-badge - display: inline-block - line-height: $badge-line-height +@include tools.layer('components') + .v-badge + display: inline-block + line-height: $badge-line-height -.v-badge__badge - align-items: center - display: inline-flex - border-radius: $badge-border-radius - font-size: $badge-font-size - font-weight: $badge-font-weight - height: $badge-height - justify-content: center - min-width: $badge-min-width - padding: $badge-padding - pointer-events: auto - position: absolute - text-align: center - text-indent: 0 - transition: $badge-transition - white-space: nowrap + .v-badge__badge + align-items: center + display: inline-flex + border-radius: $badge-border-radius + font-size: $badge-font-size + font-weight: $badge-font-weight + height: $badge-height + justify-content: center + min-width: $badge-min-width + padding: $badge-padding + pointer-events: auto + position: absolute + text-align: center + text-indent: 0 + transition: $badge-transition + white-space: nowrap - @include tools.theme($badge-theme...) + @include tools.theme($badge-theme...) - .v-badge--bordered & - &::after - border-radius: inherit - border-style: $badge-border-style - border-width: $badge-border-width - bottom: 0 - color: $badge-border-color - content: '' - left: 0 - position: absolute - right: 0 - top: 0 - transform: $badge-border-transform + .v-badge--bordered & + &::after + border-radius: inherit + border-style: $badge-border-style + border-width: $badge-border-width + bottom: 0 + color: $badge-border-color + content: '' + left: 0 + position: absolute + right: 0 + top: 0 + transform: $badge-border-transform - .v-badge--dot & - border-radius: $badge-dot-border-radius - height: $badge-dot-height - min-width: 0 - padding: 0 - width: $badge-dot-width + .v-badge--dot & + border-radius: $badge-dot-border-radius + height: $badge-dot-height + min-width: 0 + padding: 0 + width: $badge-dot-width - &::after - border-width: $badge-dot-border-width + &::after + border-width: $badge-dot-border-width - .v-badge--inline & - position: relative - vertical-align: $badge-inline-vertical-align + .v-badge--inline & + position: relative + vertical-align: $badge-inline-vertical-align - .v-icon - color: inherit - font-size: $badge-font-size - margin: $badge-icon-margin + .v-icon + color: inherit + font-size: $badge-font-size + margin: $badge-icon-margin - img, - .v-img - height: 100% - width: 100% + img, + .v-img + height: 100% + width: 100% -.v-badge__wrapper - display: flex - position: relative + .v-badge__wrapper + display: flex + position: relative - .v-badge--inline & - align-items: center - display: inline-flex - justify-content: center - margin: $badge-wrapper-margin + .v-badge--inline & + align-items: center + display: inline-flex + justify-content: center + margin: $badge-wrapper-margin diff --git a/packages/vuetify/src/components/VBanner/VBanner.sass b/packages/vuetify/src/components/VBanner/VBanner.sass index 73a6433e011..75c10eb83fa 100644 --- a/packages/vuetify/src/components/VBanner/VBanner.sass +++ b/packages/vuetify/src/components/VBanner/VBanner.sass @@ -2,106 +2,107 @@ @use '../../styles/tools' @use './variables' as * -.v-banner - display: grid - flex: 1 1 - font-size: $banner-font-size - grid-template-areas: "prepend content actions" - grid-template-columns: max-content auto max-content - grid-template-rows: max-content max-content - line-height: $banner-line-height - overflow: hidden - padding-inline: $banner-padding-inline-start $banner-padding-inline-end - padding-top: $banner-padding * 2 - padding-bottom: $banner-padding * 2 - position: relative - width: $banner-width - - @include tools.border($banner-border...) - @include tools.elevation($banner-elevation) - @include tools.position($banner-positions) - @include tools.rounded($banner-border-radius) - @include tools.theme($banner-theme...) - - &--rounded - @include tools.rounded($banner-rounded-border-radius) - - &--stacked - &:not(.v-banner--one-line) - grid-template-areas: "prepend content" ". actions" - - .v-banner-text - padding-inline-end: $banner-stacked-padding-inline-end - - @at-root - @include tools.density('v-banner', $banner-density) using ($modifier) - .v-banner-actions - margin-bottom: -($banner-padding + $modifier) - - &.v-banner--one-line - padding-top: $banner-padding + $modifier - padding-bottom: $banner-padding + $modifier - +@include tools.layer('components') + .v-banner + display: grid + flex: 1 1 + font-size: $banner-font-size + grid-template-areas: "prepend content actions" + grid-template-columns: max-content auto max-content + grid-template-rows: max-content max-content + line-height: $banner-line-height + overflow: hidden + padding-inline: $banner-padding-inline-start $banner-padding-inline-end + padding-top: $banner-padding * 2 + padding-bottom: $banner-padding * 2 + position: relative + width: $banner-width + + @include tools.border($banner-border...) + @include tools.elevation($banner-elevation) + @include tools.position($banner-positions) + @include tools.rounded($banner-border-radius) + @include tools.theme($banner-theme...) + + &--rounded + @include tools.rounded($banner-rounded-border-radius) + + &--stacked + &:not(.v-banner--one-line) + grid-template-areas: "prepend content" ". actions" + + .v-banner-text + padding-inline-end: $banner-stacked-padding-inline-end + + @at-root + @include tools.density('v-banner', $banner-density) using ($modifier) .v-banner-actions - margin-bottom: 0 + margin-bottom: -($banner-padding + $modifier) - @if ($modifier == 0px) &.v-banner--one-line - padding-top: $banner-padding + $modifier + 2 - - &.v-banner--two-line - padding-top: $banner-padding * 2 + $modifier - padding-bottom: $banner-padding * 2 + $modifier - - &.v-banner--three-line - padding-top: $banner-padding * 3 + $modifier - padding-bottom: $banner-padding * 2 + $modifier - - &:not(.v-banner--one-line), - &.v-banner--two-line, - &.v-banner--three-line - .v-banner-actions - margin-top: $banner-action-margin + $modifier - - &--sticky - top: $banner-sticky-top - -.v-banner__content - align-items: center - display: flex - grid-area: content + padding-top: $banner-padding + $modifier + padding-bottom: $banner-padding + $modifier -.v-banner__prepend - align-self: flex-start - grid-area: prepend - margin-inline-end: $banner-prepend-margin-end + .v-banner-actions + margin-bottom: 0 -.v-banner-actions - align-self: flex-end - display: flex - flex: 0 1 - grid-area: actions - justify-content: flex-end + @if ($modifier == 0px) + &.v-banner--one-line + padding-top: $banner-padding + $modifier + 2 - .v-banner--two-line &, - .v-banner--three-line & - margin-top: $banner-actions-line-margin-top + &.v-banner--two-line + padding-top: $banner-padding * 2 + $modifier + padding-bottom: $banner-padding * 2 + $modifier -.v-banner-text - -webkit-box-orient: vertical - display: -webkit-box - padding-inline-end: $banner-text-padding-end - overflow: hidden + &.v-banner--three-line + padding-top: $banner-padding * 3 + $modifier + padding-bottom: $banner-padding * 2 + $modifier - .v-banner--one-line & - -webkit-line-clamp: 1 + &:not(.v-banner--one-line), + &.v-banner--two-line, + &.v-banner--three-line + .v-banner-actions + margin-top: $banner-action-margin + $modifier - .v-banner--two-line & - -webkit-line-clamp: 2 + &--sticky + top: $banner-sticky-top - .v-banner--three-line & - -webkit-line-clamp: 3 + .v-banner__content + align-items: center + display: flex + grid-area: content - .v-banner--two-line &, - .v-banner--three-line & + .v-banner__prepend align-self: flex-start + grid-area: prepend + margin-inline-end: $banner-prepend-margin-end + + .v-banner-actions + align-self: flex-end + display: flex + flex: 0 1 + grid-area: actions + justify-content: flex-end + + .v-banner--two-line &, + .v-banner--three-line & + margin-top: $banner-actions-line-margin-top + + .v-banner-text + -webkit-box-orient: vertical + display: -webkit-box + padding-inline-end: $banner-text-padding-end + overflow: hidden + + .v-banner--one-line & + -webkit-line-clamp: 1 + + .v-banner--two-line & + -webkit-line-clamp: 2 + + .v-banner--three-line & + -webkit-line-clamp: 3 + + .v-banner--two-line &, + .v-banner--three-line & + align-self: flex-start diff --git a/packages/vuetify/src/components/VBottomNavigation/VBottomNavigation.sass b/packages/vuetify/src/components/VBottomNavigation/VBottomNavigation.sass index 144affeac1e..5a3db5f7e00 100644 --- a/packages/vuetify/src/components/VBottomNavigation/VBottomNavigation.sass +++ b/packages/vuetify/src/components/VBottomNavigation/VBottomNavigation.sass @@ -1,57 +1,58 @@ @use '../../styles/tools' @use './variables' as * -.v-bottom-navigation - display: flex - max-width: 100% - overflow: hidden - position: absolute - transition: $bottom-navigation-transition - - @include tools.border($bottom-navigation-border...) - @include tools.rounded($bottom-navigation-border-radius) - @include tools.theme($bottom-navigation-theme...) - - &--active - @include tools.elevation($bottom-navigation-elevation) - -.v-bottom-navigation__content - display: flex - flex: none - font-size: $bottom-navigation-content-font-size - justify-content: center - transition: inherit - width: 100% - - .v-bottom-navigation & - > .v-btn - font-size: inherit - height: $bottom-navigation-height - max-width: $bottom-navigation-max-width - min-width: $bottom-navigation-min-width - text-transform: $bottom-navigation-text-transform - transition: inherit - width: auto - - @include tools.rounded(0) - - .v-btn__content, - .v-btn__icon +@include tools.layer('components') + .v-bottom-navigation + display: flex + max-width: 100% + overflow: hidden + position: absolute + transition: $bottom-navigation-transition + + @include tools.border($bottom-navigation-border...) + @include tools.rounded($bottom-navigation-border-radius) + @include tools.theme($bottom-navigation-theme...) + + &--active + @include tools.elevation($bottom-navigation-elevation) + + .v-bottom-navigation__content + display: flex + flex: none + font-size: $bottom-navigation-content-font-size + justify-content: center + transition: inherit + width: 100% + + .v-bottom-navigation & + > .v-btn + font-size: inherit + height: $bottom-navigation-height + max-width: $bottom-navigation-max-width + min-width: $bottom-navigation-min-width + text-transform: $bottom-navigation-text-transform transition: inherit + width: auto - .v-btn__icon - font-size: $bottom-navigation-icon-font-size + @include tools.rounded(0) - .v-bottom-navigation--grow & - > .v-btn - flex-grow: 1 - - .v-bottom-navigation--shift & - .v-btn - &:not(.v-btn--selected) - .v-btn__content > span + .v-btn__content, + .v-btn__icon transition: inherit - opacity: 0 - .v-btn__content - transform: $bottom-navigation-shift-icon-transform + .v-btn__icon + font-size: $bottom-navigation-icon-font-size + + .v-bottom-navigation--grow & + > .v-btn + flex-grow: 1 + + .v-bottom-navigation--shift & + .v-btn + &:not(.v-btn--selected) + .v-btn__content > span + transition: inherit + opacity: 0 + + .v-btn__content + transform: $bottom-navigation-shift-icon-transform diff --git a/packages/vuetify/src/components/VBottomSheet/VBottomSheet.sass b/packages/vuetify/src/components/VBottomSheet/VBottomSheet.sass index 64445ccf75b..f1de396eea3 100644 --- a/packages/vuetify/src/components/VBottomSheet/VBottomSheet.sass +++ b/packages/vuetify/src/components/VBottomSheet/VBottomSheet.sass @@ -3,36 +3,38 @@ @use './variables' as * // Transition -.bottom-sheet-transition - &-enter-from - transform: translateY(100%) +@include tools.layer('transitions') + .bottom-sheet-transition + &-enter-from + transform: translateY(100%) - &-leave-to - transform: translateY(100%) + &-leave-to + transform: translateY(100%) // Block -.v-bottom-sheet - > .v-bottom-sheet__content.v-overlay__content - align-self: flex-end - border-radius: 0 - flex: 0 1 auto - left: 0 - right: 0 - margin-inline: 0 - margin-bottom: 0 - transition-duration: $bottom-sheet-transition-duration - width: 100% - max-width: 100% - overflow: visible +@include tools.layer('components') + .v-bottom-sheet + > .v-bottom-sheet__content.v-overlay__content + align-self: flex-end + border-radius: 0 + flex: 0 1 auto + left: 0 + right: 0 + margin-inline: 0 + margin-bottom: 0 + transition-duration: $bottom-sheet-transition-duration + width: 100% + max-width: 100% + overflow: visible - @include tools.elevation($bottom-sheet-elevation) + @include tools.elevation($bottom-sheet-elevation) - > .v-card, - > .v-sheet - border-radius: $bottom-sheet-border-radius + > .v-card, + > .v-sheet + border-radius: $bottom-sheet-border-radius - &.v-bottom-sheet--inset - max-width: none + &.v-bottom-sheet--inset + max-width: none - @media #{map-get(settings.$display-breakpoints, 'sm-and-up')} - max-width: $bottom-sheet-inset-width + @media #{map-get(settings.$display-breakpoints, 'sm-and-up')} + max-width: $bottom-sheet-inset-width diff --git a/packages/vuetify/src/components/VBreadcrumbs/VBreadcrumbs.sass b/packages/vuetify/src/components/VBreadcrumbs/VBreadcrumbs.sass index cb6129f86e6..edae8df1829 100644 --- a/packages/vuetify/src/components/VBreadcrumbs/VBreadcrumbs.sass +++ b/packages/vuetify/src/components/VBreadcrumbs/VBreadcrumbs.sass @@ -1,48 +1,49 @@ @use '../../styles/tools' @use './variables' as * -.v-breadcrumbs - display: flex - align-items: center - line-height: $breadcrumbs-line-height - padding: $breadcrumbs-padding-y $breadcrumbs-padding-x - - &--rounded - @include tools.rounded($breadcrumbs-rounded-border-radius) - - @at-root - @include tools.density('v-breadcrumbs', $breadcrumbs-density) using ($modifier) - padding-top: #{$breadcrumbs-padding-y + $modifier} - padding-bottom: #{$breadcrumbs-padding-y + $modifier} - -.v-breadcrumbs__prepend - align-items: center - display: inline-flex - -.v-breadcrumbs-item - align-items: center - color: inherit - display: inline-flex - padding: $breadcrumbs-item-padding - text-decoration: none - vertical-align: $breadcrumbs-vertical-align - - &--disabled - opacity: $breadcrumbs-item-disabled-opacity - pointer-events: none - - &--link +@include tools.layer('components') + .v-breadcrumbs + display: flex + align-items: center + line-height: $breadcrumbs-line-height + padding: $breadcrumbs-padding-y $breadcrumbs-padding-x + + &--rounded + @include tools.rounded($breadcrumbs-rounded-border-radius) + + @at-root + @include tools.density('v-breadcrumbs', $breadcrumbs-density) using ($modifier) + padding-top: #{$breadcrumbs-padding-y + $modifier} + padding-bottom: #{$breadcrumbs-padding-y + $modifier} + + .v-breadcrumbs__prepend + align-items: center + display: inline-flex + + .v-breadcrumbs-item + align-items: center color: inherit + display: inline-flex + padding: $breadcrumbs-item-padding text-decoration: none + vertical-align: $breadcrumbs-vertical-align - &--link:hover - text-decoration: $breadcrumbs-item-link-text-decoration + &--disabled + opacity: $breadcrumbs-item-disabled-opacity + pointer-events: none - .v-icon - font-size: $breadcrumbs-item-icon-font-size - margin-inline: $breadcrumbs-item-icon-margin-inline-start $breadcrumbs-item-icon-margin-inline-end + &--link + color: inherit + text-decoration: none -.v-breadcrumbs-divider - display: inline-block - padding: $breadcrumbs-divider-padding - vertical-align: $breadcrumbs-vertical-align + &--link:hover + text-decoration: $breadcrumbs-item-link-text-decoration + + .v-icon + font-size: $breadcrumbs-item-icon-font-size + margin-inline: $breadcrumbs-item-icon-margin-inline-start $breadcrumbs-item-icon-margin-inline-end + + .v-breadcrumbs-divider + display: inline-block + padding: $breadcrumbs-divider-padding + vertical-align: $breadcrumbs-vertical-align diff --git a/packages/vuetify/src/components/VBtn/VBtn.sass b/packages/vuetify/src/components/VBtn/VBtn.sass index f5dfaa0a8d8..8138d122639 100644 --- a/packages/vuetify/src/components/VBtn/VBtn.sass +++ b/packages/vuetify/src/components/VBtn/VBtn.sass @@ -5,236 +5,237 @@ @use './mixins' as * @use './variables' as * -.v-btn - align-items: center - border-radius: $button-border-radius - display: inline-grid - grid-template-areas: "prepend content append" - grid-template-columns: max-content auto max-content - font-weight: $button-font-weight - justify-content: center - letter-spacing: $button-text-letter-spacing - line-height: $button-line-height - max-width: $button-max-width - outline: none - position: relative - text-decoration: none - text-indent: $button-text-letter-spacing - text-transform: $button-text-transform - transition-property: $button-transition-property - transition-duration: 0.28s - transition-timing-function: settings.$standard-easing - user-select: none - vertical-align: $button-vertical-align - flex-shrink: 0 - - @at-root - @include button-sizes() - @include button-density('height', $button-density) - - @include tools.border($button-border...) - @include tools.position($button-positions) - @include tools.states('.v-btn__overlay') - @include tools.variant($button-variants...) - - @supports selector(:focus-visible) - &::after - @include tools.absolute(true) - pointer-events: none - border: 2px solid currentColor - border-radius: inherit - opacity: 0 - transition: opacity .2s ease-in-out - - &:focus-visible::after - opacity: calc(.25 * var(--v-theme-overlay-multiplier)) - - &--icon - border-radius: $button-icon-border-radius - min-width: 0 - padding: 0 - - // ensure that default - // v-icon size is 24px - &.v-btn--size-default - --v-btn-size: #{$button-icon-font-size} - - @at-root & - @include button-density(('width', 'height'), $button-icon-density) - - &--elevated - &:hover, - &:focus - +tools.elevation(map.get($button-elevation, 'hover')) - - &:active - +tools.elevation(map.get($button-elevation, 'active')) - - &--flat - box-shadow: none +@include tools.layer('components') + .v-btn + align-items: center + border-radius: $button-border-radius + display: inline-grid + grid-template-areas: "prepend content append" + grid-template-columns: max-content auto max-content + font-weight: $button-font-weight + justify-content: center + letter-spacing: $button-text-letter-spacing + line-height: $button-line-height + max-width: $button-max-width + outline: none + position: relative + text-decoration: none + text-indent: $button-text-letter-spacing + text-transform: $button-text-transform + transition-property: $button-transition-property + transition-duration: 0.28s + transition-timing-function: settings.$standard-easing + user-select: none + vertical-align: $button-vertical-align + flex-shrink: 0 - &--block - display: flex - flex: 1 0 auto - min-width: 100% + @at-root + @include button-sizes() + @include button-density('height', $button-density) + + @include tools.border($button-border...) + @include tools.position($button-positions) + @include tools.states('.v-btn__overlay') + @include tools.variant($button-variants...) + + @supports selector(:focus-visible) + &::after + @include tools.absolute(true) + pointer-events: none + border: 2px solid currentColor + border-radius: inherit + opacity: 0 + transition: opacity .2s ease-in-out + + &:focus-visible::after + opacity: calc(.25 * var(--v-theme-overlay-multiplier)) + + &--icon + border-radius: $button-icon-border-radius + min-width: 0 + padding: 0 + + // ensure that default + // v-icon size is 24px + &.v-btn--size-default + --v-btn-size: #{$button-icon-font-size} + + @at-root & + @include button-density(('width', 'height'), $button-icon-density) + + &--elevated + &:hover, + &:focus + +tools.elevation(map.get($button-elevation, 'hover')) + + &:active + +tools.elevation(map.get($button-elevation, 'active')) + + &--flat + box-shadow: none - &--disabled - pointer-events: none + &--block + display: flex + flex: 1 0 auto + min-width: 100% - @if ($button-colored-disabled) - opacity: $button-disabled-opacity - &:hover - opacity: $button-disabled-opacity - @else - opacity: 1 - &.v-btn - // specificity has to be higher to override theme !important - color: rgba(var(--v-theme-on-surface), $button-disabled-opacity) !important - - &.v-btn--variant-elevated, - &.v-btn--variant-flat - box-shadow: none + &--disabled + pointer-events: none @if ($button-colored-disabled) - opacity: 1 - color: rgba(var(--v-theme-on-surface), $button-disabled-opacity) - background: rgb(var(--v-theme-surface)) + opacity: $button-disabled-opacity + &:hover + opacity: $button-disabled-opacity @else - background: rgb(var(--v-theme-surface)) !important + opacity: 1 + &.v-btn + // specificity has to be higher to override theme !important + color: rgba(var(--v-theme-on-surface), $button-disabled-opacity) !important + + &.v-btn--variant-elevated, + &.v-btn--variant-flat + box-shadow: none + + @if ($button-colored-disabled) + opacity: 1 + color: rgba(var(--v-theme-on-surface), $button-disabled-opacity) + background: rgb(var(--v-theme-surface)) + @else + background: rgb(var(--v-theme-surface)) !important + + .v-btn__overlay + // __overlay uses currentColor, so we need to divide + // by the text opacity to get the correct value + opacity: math.div($button-disabled-overlay, $button-disabled-opacity) + + &--loading + pointer-events: none - .v-btn__overlay - // __overlay uses currentColor, so we need to divide - // by the text opacity to get the correct value - opacity: math.div($button-disabled-overlay, $button-disabled-opacity) + .v-btn__content, + .v-btn__prepend, + .v-btn__append + opacity: 0 - &--loading - pointer-events: none + &--stacked + grid-template-areas: "prepend" "content" "append" + grid-template-columns: auto + grid-template-rows: max-content max-content max-content + justify-items: center + align-content: center - .v-btn__content, - .v-btn__prepend, - .v-btn__append - opacity: 0 + .v-btn__content + flex-direction: column + line-height: $button-stacked-line-height - &--stacked - grid-template-areas: "prepend" "content" "append" - grid-template-columns: auto - grid-template-rows: max-content max-content max-content - justify-items: center - align-content: center + .v-btn__prepend, + .v-btn__append, + .v-btn__content > .v-icon--start, + .v-btn__content > .v-icon--end + margin-inline: 0 - .v-btn__content - flex-direction: column - line-height: $button-stacked-line-height + .v-btn__prepend, + .v-btn__content > .v-icon--start + margin-bottom: $button-stacked-icon-margin - .v-btn__prepend, - .v-btn__append, - .v-btn__content > .v-icon--start, - .v-btn__content > .v-icon--end - margin-inline: 0 + .v-btn__append, + .v-btn__content > .v-icon--end + margin-top: $button-stacked-icon-margin - .v-btn__prepend, - .v-btn__content > .v-icon--start - margin-bottom: $button-stacked-icon-margin + @at-root + @include button-sizes($button-stacked-sizes, true) + @include button-density('height', $button-stacked-density) - .v-btn__append, - .v-btn__content > .v-icon--end - margin-top: $button-stacked-icon-margin + &--slim + padding: $button-slim-padding - @at-root - @include button-sizes($button-stacked-sizes, true) - @include button-density('height', $button-stacked-density) + &--rounded + @include tools.rounded($button-rounded-border-radius) - &--slim - padding: $button-slim-padding + &.v-btn--icon + @include tools.rounded($button-border-radius) - &--rounded - @include tools.rounded($button-rounded-border-radius) + .v-icon + --v-icon-size-multiplier: #{calc(18/21)} - &.v-btn--icon - @include tools.rounded($button-border-radius) + &--icon + .v-icon + --v-icon-size-multiplier: 1 - .v-icon - --v-icon-size-multiplier: #{calc(18/21)} + &--stacked + .v-icon + --v-icon-size-multiplier: #{calc(24/21)} - &--icon - .v-icon - --v-icon-size-multiplier: 1 + .v-btn__loader + align-items: center + display: flex + height: 100% + justify-content: center + left: 0 + position: absolute + top: 0 + width: 100% + + > .v-progress-circular + width: $button-loader-size + height: $button-loader-size + + .v-btn__content, + .v-btn__prepend, + .v-btn__append + align-items: center + display: flex + transition: $button-content-transition - &--stacked - .v-icon - --v-icon-size-multiplier: #{calc(24/21)} - -.v-btn__loader - align-items: center - display: flex - height: 100% - justify-content: center - left: 0 - position: absolute - top: 0 - width: 100% - - > .v-progress-circular - width: $button-loader-size - height: $button-loader-size - -.v-btn__content, -.v-btn__prepend, -.v-btn__append - align-items: center - display: flex - transition: $button-content-transition - -.v-btn__prepend - grid-area: prepend - margin-inline: $button-margin-start $button-margin-end - -.v-btn__append - grid-area: append - margin-inline: $button-margin-end $button-margin-start - -.v-btn__content - grid-area: content - justify-content: center - white-space: $button-white-space - - > .v-icon--start + .v-btn__prepend + grid-area: prepend margin-inline: $button-margin-start $button-margin-end - > .v-icon--end + .v-btn__append + grid-area: append margin-inline: $button-margin-end $button-margin-start - .v-btn--stacked & - white-space: normal + .v-btn__content + grid-area: content + justify-content: center + white-space: $button-white-space -.v-btn__overlay - background-color: currentColor - border-radius: inherit - opacity: 0 - transition: opacity .2s ease-in-out + > .v-icon--start + margin-inline: $button-margin-start $button-margin-end -.v-btn__overlay, -.v-btn__underlay - @include tools.absolute() - pointer-events: none + > .v-icon--end + margin-inline: $button-margin-end $button-margin-start -// VCard -.v-btn - ~ .v-btn:not(.v-btn-toggle .v-btn) - .v-card-actions & - margin-inline-start: $button-card-actions-margin + .v-btn--stacked & + white-space: normal -// VPagination -.v-btn - .v-pagination & - @include tools.rounded($button-pagination-border-radius) + .v-btn__overlay + background-color: currentColor + border-radius: inherit + opacity: 0 + transition: opacity .2s ease-in-out - &--rounded + .v-btn__overlay, + .v-btn__underlay + @include tools.absolute() + pointer-events: none + + // VCard + .v-btn + ~ .v-btn:not(.v-btn-toggle .v-btn) + .v-card-actions & + margin-inline-start: $button-card-actions-margin + + // VPagination + .v-btn .v-pagination & - @include tools.rounded($button-pagination-rounded-border-radius) + @include tools.rounded($button-pagination-border-radius) + + &--rounded + .v-pagination & + @include tools.rounded($button-pagination-rounded-border-radius) - &__overlay - transition: none + &__overlay + transition: none - .v-pagination__item--is-active & - opacity: $button-pagination-active-overlay-opacity + .v-pagination__item--is-active & + opacity: $button-pagination-active-overlay-opacity diff --git a/packages/vuetify/src/components/VBtnGroup/VBtnGroup.sass b/packages/vuetify/src/components/VBtnGroup/VBtnGroup.sass index 164a12bd074..7eb5698d9d4 100644 --- a/packages/vuetify/src/components/VBtnGroup/VBtnGroup.sass +++ b/packages/vuetify/src/components/VBtnGroup/VBtnGroup.sass @@ -3,49 +3,50 @@ @use '../VBtn/variables' as * @use './variables' as * -.v-btn-group - $root: & - - display: inline-flex - flex-wrap: nowrap - max-width: 100% - min-width: 0 - overflow: hidden - vertical-align: middle - - @include tools.border($btn-group-border...) - @include tools.elevation($btn-group-elevation) - @include tools.rounded($btn-group-border-radius) - @include tools.theme($btn-group-theme...) - - @at-root - @include tools.density('v-btn-group', $button-density) using ($modifier) - @at-root #{selector.append(&, $root)} - height: $btn-group-height + $modifier - - .v-btn - border-radius: 0 - border-color: inherit - - &:not(:last-child) - border-inline-end: none - - &:not(:first-child) - border-inline-start: none - - &:first-child - border-start-start-radius: inherit - border-end-start-radius: inherit - - &:last-child - border-start-end-radius: inherit - border-end-end-radius: inherit - - &--divided - .v-btn:not(:last-child) - border-inline-end-width: $btn-group-border-thin-width - border-inline-end-style: $btn-group-border-style - border-inline-end-color: $btn-group-border-color - - &--tile - @include tools.rounded($btn-group-tile-border-radius) +@include tools.layer('components') + .v-btn-group + $root: & + + display: inline-flex + flex-wrap: nowrap + max-width: 100% + min-width: 0 + overflow: hidden + vertical-align: middle + + @include tools.border($btn-group-border...) + @include tools.elevation($btn-group-elevation) + @include tools.rounded($btn-group-border-radius) + @include tools.theme($btn-group-theme...) + + @at-root + @include tools.density('v-btn-group', $button-density) using ($modifier) + @at-root #{selector.append(&, $root)} + height: $btn-group-height + $modifier + + .v-btn + border-radius: 0 + border-color: inherit + + &:not(:last-child) + border-inline-end: none + + &:not(:first-child) + border-inline-start: none + + &:first-child + border-start-start-radius: inherit + border-end-start-radius: inherit + + &:last-child + border-start-end-radius: inherit + border-end-end-radius: inherit + + &--divided + .v-btn:not(:last-child) + border-inline-end-width: $btn-group-border-thin-width + border-inline-end-style: $btn-group-border-style + border-inline-end-color: $btn-group-border-color + + &--tile + @include tools.rounded($btn-group-tile-border-radius) diff --git a/packages/vuetify/src/components/VBtnToggle/VBtnToggle.sass b/packages/vuetify/src/components/VBtnToggle/VBtnToggle.sass index 4a4723fa91f..953e86af93b 100644 --- a/packages/vuetify/src/components/VBtnToggle/VBtnToggle.sass +++ b/packages/vuetify/src/components/VBtnToggle/VBtnToggle.sass @@ -1,6 +1,7 @@ @use './variables' as * @use '../../styles/tools' -.v-btn-toggle - > .v-btn.v-btn--active:not(.v-btn--disabled) - @include tools.active-states('> .v-btn__overlay', $btn-toggle-selected-opacity) +@include tools.layer('components') + .v-btn-toggle + > .v-btn.v-btn--active:not(.v-btn--disabled) + @include tools.active-states('> .v-btn__overlay', $btn-toggle-selected-opacity) diff --git a/packages/vuetify/src/components/VCard/VCard.sass b/packages/vuetify/src/components/VCard/VCard.sass index 629deb34226..8da53349da2 100644 --- a/packages/vuetify/src/components/VCard/VCard.sass +++ b/packages/vuetify/src/components/VCard/VCard.sass @@ -2,198 +2,199 @@ @use './variables' as * @use './mixins' as * -.v-card - display: block - overflow: hidden - overflow-wrap: $card-overflow-wrap - position: relative - padding: $card-padding - text-decoration: none - transition-duration: $card-transition-duration - transition-property: $card-transition-property - transition-timing-function: $card-transition-timing-function - z-index: 0 - - @include tools.border($card-border...) - @include tools.position($card-positions) - @include tools.rounded($card-border-radius) - @include tools.states('.v-card__overlay') - @include tools.variant($card-variants...) - - &--disabled - pointer-events: none - user-select: none - - >:not(.v-card__loader) - opacity: $card-disabled-opacity - - &--flat - box-shadow: none - - &--hover - cursor: pointer - - &::before, - &::after - border-radius: inherit - bottom: 0 - content: '' - display: block - left: 0 +@include tools.layer('components') + .v-card + display: block + overflow: hidden + overflow-wrap: $card-overflow-wrap + position: relative + padding: $card-padding + text-decoration: none + transition-duration: $card-transition-duration + transition-property: $card-transition-property + transition-timing-function: $card-transition-timing-function + z-index: 0 + + @include tools.border($card-border...) + @include tools.position($card-positions) + @include tools.rounded($card-border-radius) + @include tools.states('.v-card__overlay') + @include tools.variant($card-variants...) + + &--disabled pointer-events: none - position: absolute - right: 0 - top: 0 - transition: inherit + user-select: none - &::before - opacity: 1 - z-index: -1 + >:not(.v-card__loader) + opacity: $card-disabled-opacity - @include tools.elevation($card-elevation) + &--flat + box-shadow: none - &::after - z-index: 1 - opacity: 0 + &--hover + cursor: pointer - @include tools.elevation($card-hover-elevation) + &::before, + &::after + border-radius: inherit + bottom: 0 + content: '' + display: block + left: 0 + pointer-events: none + position: absolute + right: 0 + top: 0 + transition: inherit - &:hover::after - opacity: 1 + &::before + opacity: 1 + z-index: -1 - &:hover::before - opacity: 0 + @include tools.elevation($card-elevation) - &:hover - @include tools.elevation($card-hover-elevation) + &::after + z-index: 1 + opacity: 0 - &--link - cursor: pointer + @include tools.elevation($card-hover-elevation) -.v-card-actions - align-items: center - display: flex - flex: $card-actions-flex - min-height: $card-actions-min-height - padding: $card-actions-padding + &:hover::after + opacity: 1 -.v-card-item - align-items: $card-item-align-items - display: grid - flex: $card-header-flex - grid-template-areas: "prepend content append" - grid-template-columns: max-content auto max-content - padding: $card-item-padding + &:hover::before + opacity: 0 - + .v-card-text - padding-top: 0 + &:hover + @include tools.elevation($card-hover-elevation) - &__prepend, - &__append + &--link + cursor: pointer + + .v-card-actions align-items: center display: flex - - &__prepend - grid-area: prepend - padding-inline-end: $card-prepend-padding-inline-end - - &__append - grid-area: append - padding-inline-start: $card-append-padding-inline-start - -.v-card-item__content - align-self: center - grid-area: content - overflow: hidden - -.v-card-title - display: block - flex: $card-title-flex - font-size: $card-title-font-size - font-weight: $card-title-font-weight - hyphens: $card-title-hyphens - letter-spacing: $card-title-letter-spacing - min-width: 0 - overflow-wrap: $card-title-overflow-wrap - overflow: $card-title-overflow - padding: $card-title-padding - text-overflow: $card-title-text-overflow - text-transform: $card-title-text-transform - white-space: $card-title-white-space - word-break: $card-title-word-break - word-wrap: $card-title-word-wrap - - @include card-line-height-densities($card-title-densities) - - .v-card-item & - padding: $card-title-header-padding - - + .v-card-text, - + .v-card-actions - padding-top: 0 - -.v-card-subtitle - display: block - flex: $card-subtitle-flex - font-size: $card-subtitle-font-size - font-weight: $card-subtitle-font-weight - letter-spacing: $card-subtitle-letter-spacing - opacity: $card-subtitle-opacity - overflow: $card-subtitle-overflow - padding: $card-subtitle-padding - text-overflow: $card-subtitle-text-overflow - text-transform: $card-subtitle-text-transform - white-space: $card-subtitle-white-space - - @include card-line-height-densities($card-subtitle-density-line-height) - - .v-card-item & - padding: $card-subtitle-header-padding - -.v-card-text - flex: $card-text-flex - font-size: $card-text-font-size - font-weight: $card-text-font-weight - letter-spacing: $card-text-letter-spacing - opacity: $card-text-opacity - padding: $card-text-padding - text-transform: $card-text-text-transform - - @include card-line-height-densities($card-text-density-line-height) - -.v-card__image - display: flex - height: 100% - flex: $card-img-flex - left: 0 - overflow: hidden - position: absolute - top: 0 - width: 100% - z-index: -1 - -.v-card__content - border-radius: inherit - overflow: hidden - position: relative - -.v-card__loader - bottom: $card-loader-bottom - top: $card-loader-top - left: 0 - position: absolute - right: 0 - width: 100% - z-index: 1 - -.v-card__overlay - background-color: currentColor - border-radius: inherit - position: absolute - top: 0 - right: 0 - bottom: 0 - left: 0 - pointer-events: none - opacity: 0 - transition: opacity 0.2s ease-in-out + flex: $card-actions-flex + min-height: $card-actions-min-height + padding: $card-actions-padding + + .v-card-item + align-items: $card-item-align-items + display: grid + flex: $card-header-flex + grid-template-areas: "prepend content append" + grid-template-columns: max-content auto max-content + padding: $card-item-padding + + + .v-card-text + padding-top: 0 + + &__prepend, + &__append + align-items: center + display: flex + + &__prepend + grid-area: prepend + padding-inline-end: $card-prepend-padding-inline-end + + &__append + grid-area: append + padding-inline-start: $card-append-padding-inline-start + + .v-card-item__content + align-self: center + grid-area: content + overflow: hidden + + .v-card-title + display: block + flex: $card-title-flex + font-size: $card-title-font-size + font-weight: $card-title-font-weight + hyphens: $card-title-hyphens + letter-spacing: $card-title-letter-spacing + min-width: 0 + overflow-wrap: $card-title-overflow-wrap + overflow: $card-title-overflow + padding: $card-title-padding + text-overflow: $card-title-text-overflow + text-transform: $card-title-text-transform + white-space: $card-title-white-space + word-break: $card-title-word-break + word-wrap: $card-title-word-wrap + + @include card-line-height-densities($card-title-densities) + + .v-card-item & + padding: $card-title-header-padding + + + .v-card-text, + + .v-card-actions + padding-top: 0 + + .v-card-subtitle + display: block + flex: $card-subtitle-flex + font-size: $card-subtitle-font-size + font-weight: $card-subtitle-font-weight + letter-spacing: $card-subtitle-letter-spacing + opacity: $card-subtitle-opacity + overflow: $card-subtitle-overflow + padding: $card-subtitle-padding + text-overflow: $card-subtitle-text-overflow + text-transform: $card-subtitle-text-transform + white-space: $card-subtitle-white-space + + @include card-line-height-densities($card-subtitle-density-line-height) + + .v-card-item & + padding: $card-subtitle-header-padding + + .v-card-text + flex: $card-text-flex + font-size: $card-text-font-size + font-weight: $card-text-font-weight + letter-spacing: $card-text-letter-spacing + opacity: $card-text-opacity + padding: $card-text-padding + text-transform: $card-text-text-transform + + @include card-line-height-densities($card-text-density-line-height) + + .v-card__image + display: flex + height: 100% + flex: $card-img-flex + left: 0 + overflow: hidden + position: absolute + top: 0 + width: 100% + z-index: -1 + + .v-card__content + border-radius: inherit + overflow: hidden + position: relative + + .v-card__loader + bottom: $card-loader-bottom + top: $card-loader-top + left: 0 + position: absolute + right: 0 + width: 100% + z-index: 1 + + .v-card__overlay + background-color: currentColor + border-radius: inherit + position: absolute + top: 0 + right: 0 + bottom: 0 + left: 0 + pointer-events: none + opacity: 0 + transition: opacity 0.2s ease-in-out diff --git a/packages/vuetify/src/components/VCarousel/VCarousel.sass b/packages/vuetify/src/components/VCarousel/VCarousel.sass index bc5a8661e1f..66f89cbd13f 100644 --- a/packages/vuetify/src/components/VCarousel/VCarousel.sass +++ b/packages/vuetify/src/components/VCarousel/VCarousel.sass @@ -1,67 +1,68 @@ @use '../../styles/tools' @use './variables' as * -.v-carousel - overflow: hidden - position: relative - width: 100% - - &__controls - align-items: center - bottom: 0 - display: flex - height: $carousel-controls-size - justify-content: center - list-style-type: none - position: absolute +@include tools.layer('components') + .v-carousel + overflow: hidden + position: relative width: 100% - z-index: 1 - @include tools.theme($carousel-controls-theme...) + &__controls + align-items: center + bottom: 0 + display: flex + height: $carousel-controls-size + justify-content: center + list-style-type: none + position: absolute + width: 100% + z-index: 1 - > .v-item-group - flex: 0 1 auto + @include tools.theme($carousel-controls-theme...) - &__item - margin: $carousel-dot-margin + > .v-item-group + flex: 0 1 auto - .v-icon - opacity: $carousel-dot-inactive-opacity + &__item + margin: $carousel-dot-margin - &--active .v-icon - opacity: $carousel-dot-active-opacity - vertical-align: middle + opacity: $carousel-dot-inactive-opacity - &:hover - background: none + &--active + .v-icon + opacity: $carousel-dot-active-opacity + vertical-align: middle - .v-icon - opacity: $carousel-dot-hover-opacity + &:hover + background: none -// Element -.v-carousel__progress - margin: 0 - position: absolute - bottom: 0 - left: 0 - right: 0 + .v-icon + opacity: $carousel-dot-hover-opacity -.v-carousel-item - display: block - height: inherit - text-decoration: none + // Element + .v-carousel__progress + margin: 0 + position: absolute + bottom: 0 + left: 0 + right: 0 - & > .v-img + .v-carousel-item + display: block height: inherit + text-decoration: none + + & > .v-img + height: inherit -// Modifier -.v-carousel--hide-delimiter-background - .v-carousel__controls - background: transparent + // Modifier + .v-carousel--hide-delimiter-background + .v-carousel__controls + background: transparent -.v-carousel--vertical-delimiters - .v-carousel__controls - flex-direction: column - height: 100% !important - width: $carousel-controls-size + .v-carousel--vertical-delimiters + .v-carousel__controls + flex-direction: column + height: 100% !important + width: $carousel-controls-size diff --git a/packages/vuetify/src/components/VCheckbox/VCheckbox.sass b/packages/vuetify/src/components/VCheckbox/VCheckbox.sass index 45691122968..eda0b70b838 100644 --- a/packages/vuetify/src/components/VCheckbox/VCheckbox.sass +++ b/packages/vuetify/src/components/VCheckbox/VCheckbox.sass @@ -3,9 +3,10 @@ @use '../../styles/tools' @use './variables' as * -.v-checkbox - &.v-input - flex: $checkbox-flex +@include tools.layer('components') + .v-checkbox + &.v-input + flex: $checkbox-flex - .v-selection-control - min-height: var(--v-input-control-height) + .v-selection-control + min-height: var(--v-input-control-height) diff --git a/packages/vuetify/src/components/VChip/VChip.sass b/packages/vuetify/src/components/VChip/VChip.sass index 2c663a4d9d5..4b50cb9b5bd 100644 --- a/packages/vuetify/src/components/VChip/VChip.sass +++ b/packages/vuetify/src/components/VChip/VChip.sass @@ -2,85 +2,86 @@ @use './variables' as * @use './mixins' as * -.v-chip - align-items: center - display: inline-flex - font-weight: $chip-font-weight - max-width: $chip-max-width - min-width: 0 - overflow: hidden - position: relative - text-decoration: none - white-space: $chip-white-space - vertical-align: middle - - .v-icon - --v-icon-size-multiplier: #{$chip-icon-size-multiplier} - - @at-root - @include chip-sizes() - @include chip-density('height', $chip-density) - - @include tools.border($chip-border...) - @include tools.states('.v-chip__overlay') - @include tools.rounded($chip-border-radius) - @include tools.variant($chip-variants...) - - &--border - border-width: $chip-border-thin-width - - &--link - cursor: pointer +@include tools.layer('components') + .v-chip + align-items: center + display: inline-flex + font-weight: $chip-font-weight + max-width: $chip-max-width + min-width: 0 + overflow: hidden + position: relative + text-decoration: none + white-space: $chip-white-space + vertical-align: middle + + .v-icon + --v-icon-size-multiplier: #{$chip-icon-size-multiplier} + + @at-root + @include chip-sizes() + @include chip-density('height', $chip-density) + + @include tools.border($chip-border...) + @include tools.states('.v-chip__overlay') + @include tools.rounded($chip-border-radius) + @include tools.variant($chip-variants...) + + &--border + border-width: $chip-border-thin-width + + &--link + cursor: pointer + + &--filter + user-select: none - &--filter + &--label + @include tools.rounded($chip-label-border-radius) + + // Elements + .v-chip__content + align-items: center + display: inline-flex + + .v-autocomplete__selection &, + .v-combobox__selection &, + .v-select__selection & + overflow: hidden + + .v-chip__filter, + .v-chip__prepend, + .v-chip__append, + .v-chip__close + align-items: center + display: inline-flex + + .v-chip__close + cursor: pointer + flex: 0 1 auto + font-size: $chip-close-size + max-height: $chip-close-size + max-width: $chip-close-size user-select: none - &--label - @include tools.rounded($chip-label-border-radius) + .v-icon + font-size: inherit -// Elements -.v-chip__content - align-items: center - display: inline-flex + .v-chip__filter + transition: $chip-filter-transition - .v-autocomplete__selection &, - .v-combobox__selection &, - .v-select__selection & - overflow: hidden + .v-chip__overlay + @include tools.absolute() + background-color: currentColor + border-radius: inherit + pointer-events: none + opacity: 0 + transition: opacity .2s ease-in-out + + .v-chip--disabled + opacity: $chip-disabled-opacity + pointer-events: none + user-select: none -.v-chip__filter, -.v-chip__prepend, -.v-chip__append, -.v-chip__close - align-items: center - display: inline-flex - -.v-chip__close - cursor: pointer - flex: 0 1 auto - font-size: $chip-close-size - max-height: $chip-close-size - max-width: $chip-close-size - user-select: none - - .v-icon - font-size: inherit - -.v-chip__filter - transition: $chip-filter-transition - -.v-chip__overlay - @include tools.absolute() - background-color: currentColor - border-radius: inherit - pointer-events: none - opacity: 0 - transition: opacity .2s ease-in-out - -.v-chip--disabled - opacity: $chip-disabled-opacity - pointer-events: none - user-select: none - -.v-chip--label - border-radius: $chip-label-border-radius + .v-chip--label + border-radius: $chip-label-border-radius diff --git a/packages/vuetify/src/components/VChipGroup/VChipGroup.sass b/packages/vuetify/src/components/VChipGroup/VChipGroup.sass index 3676063c263..4a8ec525836 100644 --- a/packages/vuetify/src/components/VChipGroup/VChipGroup.sass +++ b/packages/vuetify/src/components/VChipGroup/VChipGroup.sass @@ -1,23 +1,25 @@ +@use '../../styles/tools' @use './variables' as * -// Block -.v-chip-group - display: flex - max-width: 100% - min-width: 0 - overflow-x: auto - padding: $chip-group-padding +@include tools.layer('components') + // Block + .v-chip-group + display: flex + max-width: 100% + min-width: 0 + overflow-x: auto + padding: $chip-group-padding - .v-chip - margin: $chip-group-margin + .v-chip + margin: $chip-group-margin - &.v-chip--selected:not(.v-chip--disabled) - .v-chip__overlay - opacity: $chip-group-selected-opacity + &.v-chip--selected:not(.v-chip--disabled) + .v-chip__overlay + opacity: $chip-group-selected-opacity -// Modifiers -.v-chip-group--column - .v-slide-group__content - white-space: normal - flex-wrap: wrap - max-width: 100% + // Modifiers + .v-chip-group--column + .v-slide-group__content + white-space: normal + flex-wrap: wrap + max-width: 100% diff --git a/packages/vuetify/src/components/VCode/VCode.sass b/packages/vuetify/src/components/VCode/VCode.sass index f8e8b145f85..5ba1d8096a5 100644 --- a/packages/vuetify/src/components/VCode/VCode.sass +++ b/packages/vuetify/src/components/VCode/VCode.sass @@ -1,10 +1,12 @@ +@use '../../styles/tools' @use './variables' as * -.v-code - background-color: $code-background-color - color: $code-color - border-radius: $code-border-radius - line-height: $code-line-height - font-size: $code-font-size - font-weight: $code-font-weight - padding: $code-padding +@include tools.layer('components') + .v-code + background-color: $code-background-color + color: $code-color + border-radius: $code-border-radius + line-height: $code-line-height + font-size: $code-font-size + font-weight: $code-font-weight + padding: $code-padding diff --git a/packages/vuetify/src/components/VColorPicker/VColorPicker.sass b/packages/vuetify/src/components/VColorPicker/VColorPicker.sass index 5d28b15f45a..f38da1bda6f 100644 --- a/packages/vuetify/src/components/VColorPicker/VColorPicker.sass +++ b/packages/vuetify/src/components/VColorPicker/VColorPicker.sass @@ -1,24 +1,25 @@ @use '../../styles/tools' @use './variables' as * -// Block -.v-color-picker - align-self: flex-start - contain: content +@include tools.layer('components') + // Block + .v-color-picker + align-self: flex-start + contain: content - &.v-sheet - +tools.elevation($color-picker-elevation) - +tools.rounded($color-picker-border-radius) + &.v-sheet + +tools.elevation($color-picker-elevation) + +tools.rounded($color-picker-border-radius) -// Element -.v-color-picker__controls - display: flex - flex-direction: column - padding: $color-picker-controls-padding + // Element + .v-color-picker__controls + display: flex + flex-direction: column + padding: $color-picker-controls-padding -// Modifier -.v-color-picker--flat - +tools.elevation(0) - - .v-color-picker__track:not(.v-input--is-disabled) .v-slider__thumb // High specificity + // Modifier + .v-color-picker--flat +tools.elevation(0) + + .v-color-picker__track:not(.v-input--is-disabled) .v-slider__thumb // High specificity + +tools.elevation(0) diff --git a/packages/vuetify/src/components/VColorPicker/VColorPickerCanvas.sass b/packages/vuetify/src/components/VColorPicker/VColorPickerCanvas.sass index 82936261404..de1659237af 100644 --- a/packages/vuetify/src/components/VColorPicker/VColorPickerCanvas.sass +++ b/packages/vuetify/src/components/VColorPicker/VColorPickerCanvas.sass @@ -1,26 +1,27 @@ @use '../../styles/tools' @use './variables' as * -.v-color-picker-canvas - $root: & - display: flex - position: relative - overflow: hidden - contain: content - touch-action: none +@include tools.layer('components') + .v-color-picker-canvas + $root: & + display: flex + position: relative + overflow: hidden + contain: content + touch-action: none - &__dot - position: absolute - top: 0 - left: 0 - width: $color-picker-canvas-dot-size - height: $color-picker-canvas-dot-size - background: transparent - border-radius: 50% - box-shadow: $color-picker-canvas-dot-box-shadow + &__dot + position: absolute + top: 0 + left: 0 + width: $color-picker-canvas-dot-size + height: $color-picker-canvas-dot-size + background: transparent + border-radius: 50% + box-shadow: $color-picker-canvas-dot-box-shadow - &--disabled - box-shadow: $color-picker-canvas-dot-disabled-box-shadow + &--disabled + box-shadow: $color-picker-canvas-dot-disabled-box-shadow - #{$root}:hover & - will-change: transform + #{$root}:hover & + will-change: transform diff --git a/packages/vuetify/src/components/VColorPicker/VColorPickerEdit.sass b/packages/vuetify/src/components/VColorPicker/VColorPickerEdit.sass index 012b655e172..94e83350886 100644 --- a/packages/vuetify/src/components/VColorPicker/VColorPickerEdit.sass +++ b/packages/vuetify/src/components/VColorPicker/VColorPickerEdit.sass @@ -1,30 +1,31 @@ @use '../../styles/tools' @use './variables' as * -.v-color-picker-edit - display: flex - margin-top: $color-picker-input-margin-top +@include tools.layer('components') + .v-color-picker-edit + display: flex + margin-top: $color-picker-input-margin-top -.v-color-picker-edit__input - width: 100% - display: flex - flex-wrap: wrap - justify-content: center - text-align: center + .v-color-picker-edit__input + width: 100% + display: flex + flex-wrap: wrap + justify-content: center + text-align: center - &:not(:last-child) - margin-inline-end: $color-picker-input-margin + &:not(:last-child) + margin-inline-end: $color-picker-input-margin - input - border-radius: $color-picker-border-radius - margin-bottom: $color-picker-input-margin-bottom - min-width: 0 - outline: none - text-align: center - width: 100% - height: $color-picker-input-height - background: rgba(var(--v-theme-surface-variant), .2) - color: rgba(var(--v-theme-on-surface)) + input + border-radius: $color-picker-border-radius + margin-bottom: $color-picker-input-margin-bottom + min-width: 0 + outline: none + text-align: center + width: 100% + height: $color-picker-input-height + background: rgba(var(--v-theme-surface-variant), .2) + color: rgba(var(--v-theme-on-surface)) - span - font-size: $color-picker-input-font-size + span + font-size: $color-picker-input-font-size diff --git a/packages/vuetify/src/components/VColorPicker/VColorPickerPreview.sass b/packages/vuetify/src/components/VColorPicker/VColorPickerPreview.sass index 5a4559c1c3c..fdcfea0dea2 100644 --- a/packages/vuetify/src/components/VColorPicker/VColorPickerPreview.sass +++ b/packages/vuetify/src/components/VColorPicker/VColorPickerPreview.sass @@ -1,68 +1,69 @@ @use '../../styles/tools' @use './variables' as * -.v-color-picker-preview__alpha - .v-slider-track__background - background-color: transparent !important +@include tools.layer('components') + .v-color-picker-preview__alpha + .v-slider-track__background + background-color: transparent !important - +tools.ltr() - background-image: linear-gradient(to right, transparent, var(--v-color-picker-color-hsv)) - +tools.rtl() - background-image: linear-gradient(to left, transparent, var(--v-color-picker-color-hsv)) + +tools.ltr() + background-image: linear-gradient(to right, transparent, var(--v-color-picker-color-hsv)) + +tools.rtl() + background-image: linear-gradient(to left, transparent, var(--v-color-picker-color-hsv)) - &::after - content: '' - z-index: -1 - left: 0 - top: 0 - width: 100% - height: 100% - position: absolute - background: $color-picker-checkerboard - border-radius: inherit + &::after + content: '' + z-index: -1 + left: 0 + top: 0 + width: 100% + height: 100% + position: absolute + background: $color-picker-checkerboard + border-radius: inherit -.v-color-picker-preview__sliders - display: flex - flex: 1 0 auto - flex-direction: column - padding-inline-end: $color-picker-preview-sliders-padding + .v-color-picker-preview__sliders + display: flex + flex: 1 0 auto + flex-direction: column + padding-inline-end: $color-picker-preview-sliders-padding -.v-color-picker-preview__dot - position: relative - height: $color-picker-preview-dot-size - width: $color-picker-preview-dot-size - background: $color-picker-checkerboard - border-radius: 50% - overflow: hidden - margin-inline-end: $color-picker-preview-dot-margin + .v-color-picker-preview__dot + position: relative + height: $color-picker-preview-dot-size + width: $color-picker-preview-dot-size + background: $color-picker-checkerboard + border-radius: 50% + overflow: hidden + margin-inline-end: $color-picker-preview-dot-margin - > div - width: 100% - height: 100% + > div + width: 100% + height: 100% -.v-color-picker-preview__hue - &:not(.v-input--is-disabled) - .v-slider-track__background - +tools.ltr() - background: linear-gradient(to right, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, #00F 66.66%, #F0F 83.33%, #F00 100%) + .v-color-picker-preview__hue + &:not(.v-input--is-disabled) + .v-slider-track__background + +tools.ltr() + background: linear-gradient(to right, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, #00F 66.66%, #F0F 83.33%, #F00 100%) - +tools.rtl() - background: linear-gradient(to left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, #00F 66.66%, #F0F 83.33%, #F00 100%) + +tools.rtl() + background: linear-gradient(to left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, #00F 66.66%, #F0F 83.33%, #F00 100%) -.v-color-picker-preview__track - position: relative - width: 100% + .v-color-picker-preview__track + position: relative + width: 100% - margin: 0 !important + margin: 0 !important - .v-slider-track__fill - display: none + .v-slider-track__fill + display: none -.v-color-picker-preview - align-items: center - display: flex - margin-bottom: $color-picker-preview-margin-bottom + .v-color-picker-preview + align-items: center + display: flex + margin-bottom: $color-picker-preview-margin-bottom -.v-color-picker-preview__eye-dropper - position: relative - margin-right: $color-picker-preview-dropper-margin + .v-color-picker-preview__eye-dropper + position: relative + margin-right: $color-picker-preview-dropper-margin diff --git a/packages/vuetify/src/components/VColorPicker/VColorPickerSwatches.sass b/packages/vuetify/src/components/VColorPicker/VColorPickerSwatches.sass index dc79f2e0209..761248ac443 100644 --- a/packages/vuetify/src/components/VColorPicker/VColorPickerSwatches.sass +++ b/packages/vuetify/src/components/VColorPicker/VColorPickerSwatches.sass @@ -1,35 +1,36 @@ @use '../../styles/tools' @use './variables' as * -.v-color-picker-swatches - overflow-y: auto +@include tools.layer('components') + .v-color-picker-swatches + overflow-y: auto - > div - display: flex - flex-wrap: wrap - justify-content: center - padding: $color-picker-swatches-border-radius + > div + display: flex + flex-wrap: wrap + justify-content: center + padding: $color-picker-swatches-border-radius -.v-color-picker-swatches__swatch - display: flex - flex-direction: column - margin-bottom: $color-picker-swatch-margin-bottom + .v-color-picker-swatches__swatch + display: flex + flex-direction: column + margin-bottom: $color-picker-swatch-margin-bottom -.v-color-picker-swatches__color - position: relative - height: $color-picker-swatch-color-height - max-height: $color-picker-swatch-color-height - width: $color-picker-swatch-color-width - margin: $color-picker-swatch-color-margin - border-radius: $color-picker-swatch-color-border-radius - user-select: none - overflow: hidden - background: $color-picker-checkerboard - cursor: pointer + .v-color-picker-swatches__color + position: relative + height: $color-picker-swatch-color-height + max-height: $color-picker-swatch-color-height + width: $color-picker-swatch-color-width + margin: $color-picker-swatch-color-margin + border-radius: $color-picker-swatch-color-border-radius + user-select: none + overflow: hidden + background: $color-picker-checkerboard + cursor: pointer - > div - display: flex - align-items: center - justify-content: center - width: 100% - height: 100% + > div + display: flex + align-items: center + justify-content: center + width: 100% + height: 100% diff --git a/packages/vuetify/src/components/VCombobox/VCombobox.sass b/packages/vuetify/src/components/VCombobox/VCombobox.sass index 073bdc3bee4..cae4b8d4fc6 100644 --- a/packages/vuetify/src/components/VCombobox/VCombobox.sass +++ b/packages/vuetify/src/components/VCombobox/VCombobox.sass @@ -4,102 +4,103 @@ @use '../../styles/tools' @use './variables' as * -.v-combobox - .v-field - .v-text-field__prefix, - .v-text-field__suffix, - .v-field__input, - &.v-field - cursor: text - - .v-field - .v-field__input - > input - flex: 1 1 - - .v-field - input - min-width: $combobox-focused-input - - &:not(.v-field--focused) - input - min-width: 0 - - .v-field--dirty - .v-combobox__selection - margin-inline-end: $combobox-selection-gap - - .v-combobox__selection-text - overflow: hidden - text-overflow: ellipsis - white-space: nowrap - -.v-combobox - &__content - overflow: hidden - - @include tools.elevation($combobox-content-elevation) - @include tools.rounded($combobox-content-border-radius) - - &__mask - background: rgb(var(--v-theme-surface-light)) - - &__selection - display: inline-flex - align-items: center - height: calc($input-font-size * $input-line-height) - letter-spacing: inherit - line-height: inherit - max-width: calc(100% - $combobox-selection-gap - $combobox-input-buffer) - - &__selection - &:first-child - margin-inline-start: 0 - - &--chips.v-input--density-compact - .v-field--variant-solo, - .v-field--variant-solo-inverted, - .v-field--variant-filled, - .v-field--variant-solo-filled - .v-label.v-field-label - &--floating - top: 0px - - &--selecting-index - .v-combobox__selection - opacity: var(--v-medium-emphasis-opacity) - - &--selected - opacity: 1 - - .v-field__input > input - caret-color: transparent - - &--single:not(.v-combobox--selection-slot) - &.v-text-field input - flex: 1 1 - position: absolute - left: 0 - right: 0 - width: 100% - padding-inline: inherit - - .v-field--active +@include tools.layer('components') + .v-combobox + .v-field + .v-text-field__prefix, + .v-text-field__suffix, + .v-field__input, + &.v-field + cursor: text + + .v-field + .v-field__input + > input + flex: 1 1 + + .v-field input - transition: none + min-width: $combobox-focused-input - .v-field--dirty:not(.v-field--focused) - input - opacity: 0 + &:not(.v-field--focused) + input + min-width: 0 - .v-field--focused + .v-field--dirty + .v-combobox__selection + margin-inline-end: $combobox-selection-gap + + .v-combobox__selection-text + overflow: hidden + text-overflow: ellipsis + white-space: nowrap + + .v-combobox + &__content + overflow: hidden + + @include tools.elevation($combobox-content-elevation) + @include tools.rounded($combobox-content-border-radius) + + &__mask + background: rgb(var(--v-theme-surface-light)) + + &__selection + display: inline-flex + align-items: center + height: calc($input-font-size * $input-line-height) + letter-spacing: inherit + line-height: inherit + max-width: calc(100% - $combobox-selection-gap - $combobox-input-buffer) + + &__selection + &:first-child + margin-inline-start: 0 + + &--chips.v-input--density-compact + .v-field--variant-solo, + .v-field--variant-solo-inverted, + .v-field--variant-filled, + .v-field--variant-solo-filled + .v-label.v-field-label + &--floating + top: 0px + + &--selecting-index .v-combobox__selection - opacity: 0 + opacity: var(--v-medium-emphasis-opacity) - &__menu-icon - margin-inline-start: 4px - transition: $combobox-transition + &--selected + opacity: 1 - .v-combobox--active-menu & - opacity: var(--v-high-emphasis-opacity) - transform: rotate(180deg) + .v-field__input > input + caret-color: transparent + + &--single:not(.v-combobox--selection-slot) + &.v-text-field input + flex: 1 1 + position: absolute + left: 0 + right: 0 + width: 100% + padding-inline: inherit + + .v-field--active + input + transition: none + + .v-field--dirty:not(.v-field--focused) + input + opacity: 0 + + .v-field--focused + .v-combobox__selection + opacity: 0 + + &__menu-icon + margin-inline-start: 4px + transition: $combobox-transition + + .v-combobox--active-menu & + opacity: var(--v-high-emphasis-opacity) + transform: rotate(180deg) diff --git a/packages/vuetify/src/components/VCounter/VCounter.sass b/packages/vuetify/src/components/VCounter/VCounter.sass index 7db1f37486a..8cb94641ad4 100644 --- a/packages/vuetify/src/components/VCounter/VCounter.sass +++ b/packages/vuetify/src/components/VCounter/VCounter.sass @@ -1,8 +1,10 @@ @use '../../styles/settings' +@use '../../styles/tools' @use './variables' as * -.v-counter - color: $counter-color - flex: $counter-flex - font-size: $counter-font-size - transition-duration: $counter-transition-duration +@include tools.layer('components') + .v-counter + color: $counter-color + flex: $counter-flex + font-size: $counter-font-size + transition-duration: $counter-transition-duration diff --git a/packages/vuetify/src/components/VDataTable/VDataTable.sass b/packages/vuetify/src/components/VDataTable/VDataTable.sass index 4c044186dc9..ef19cb553e3 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTable.sass +++ b/packages/vuetify/src/components/VDataTable/VDataTable.sass @@ -3,125 +3,126 @@ @use '../../components/VTable/variables' as * @use './variables' as * -.v-data-table - width: 100% +@include tools.layer('components') + .v-data-table + width: 100% -.v-data-table__table - width: 100% - border-collapse: separate - border-spacing: 0 + .v-data-table__table + width: 100% + border-collapse: separate + border-spacing: 0 -.v-data-table__tr - &--focus - border: 1px dotted black + .v-data-table__tr + &--focus + border: 1px dotted black - &--clickable - cursor: pointer + &--clickable + cursor: pointer -.v-data-table - .v-table__wrapper - > table - > thead, - tbody - > tr - > td, - th + .v-data-table + .v-table__wrapper + > table + > thead, + tbody + > tr + > td, + th - &.v-data-table-column--align-end - text-align: end + &.v-data-table-column--align-end + text-align: end - .v-data-table-header__content - flex-direction: row-reverse + .v-data-table-header__content + flex-direction: row-reverse - &.v-data-table-column--align-center - text-align: center + &.v-data-table-column--align-center + text-align: center - .v-data-table-header__content - justify-content: center + .v-data-table-header__content + justify-content: center - &.v-data-table-column--no-padding - padding: 0 8px + &.v-data-table-column--no-padding + padding: 0 8px - &.v-data-table-column--nowrap - text-overflow: ellipsis - text-wrap: nowrap - overflow: hidden + &.v-data-table-column--nowrap + text-overflow: ellipsis + text-wrap: nowrap + overflow: hidden - & .v-data-table-header__content - display: contents + & .v-data-table-header__content + display: contents - > th - align-items: center + > th + align-items: center - > th.v-data-table__th--fixed - position: sticky + > th.v-data-table__th--fixed + position: sticky - > th.v-data-table__th--sortable:hover - cursor: pointer - color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) + > th.v-data-table__th--sortable:hover + cursor: pointer + color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) - > th:not(.v-data-table__th--sorted) - .v-data-table-header__sort-icon - opacity: 0 - - &:hover + > th:not(.v-data-table__th--sorted) .v-data-table-header__sort-icon - opacity: 0.5 - -.v-data-table-column--fixed, -.v-data-table__th--sticky - background: $table-background - position: sticky !important - left: 0 - z-index: 1 - -.v-data-table-column--last-fixed - border-right: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)) - -.v-data-table.v-table--fixed-header > .v-table__wrapper > table > thead > tr > th.v-data-table-column--fixed - z-index: 2 - -.v-data-table-group-header-row - td - background: rgba(var(--v-theme-surface)) - color: rgba(var(--v-theme-on-surface)) - - > span - padding-left: 5px - -.v-data-table--loading - .v-data-table__td - opacity: $data-table-loading-opacity - -.v-data-table-group-header-row__column - padding-left: calc(var(--v-data-table-group-header-row-depth) * 16px) !important - -.v-data-table-header__content - display: flex - align-items: center - -.v-data-table-header__sort-badge - display: inline-flex - justify-content: center - align-items: center - font-size: 0.875rem - padding: 4px - border-radius: 50% - background: $data-table-header-sort-badge-color - min-width: $data-table-header-sort-badge-size - min-height: $data-table-header-sort-badge-size - width: $data-table-header-sort-badge-size - height: $data-table-header-sort-badge-size - -.v-data-table-progress - > th - border: none !important - height: auto !important - padding: 0 !important - -.v-data-table-progress__loader - position: relative - -.v-data-table-rows-loading, -.v-data-table-rows-no-data - text-align: center + opacity: 0 + + &:hover + .v-data-table-header__sort-icon + opacity: 0.5 + + .v-data-table-column--fixed, + .v-data-table__th--sticky + background: $table-background + position: sticky !important + left: 0 + z-index: 1 + + .v-data-table-column--last-fixed + border-right: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)) + + .v-data-table.v-table--fixed-header > .v-table__wrapper > table > thead > tr > th.v-data-table-column--fixed + z-index: 2 + + .v-data-table-group-header-row + td + background: rgba(var(--v-theme-surface)) + color: rgba(var(--v-theme-on-surface)) + + > span + padding-left: 5px + + .v-data-table--loading + .v-data-table__td + opacity: $data-table-loading-opacity + + .v-data-table-group-header-row__column + padding-left: calc(var(--v-data-table-group-header-row-depth) * 16px) !important + + .v-data-table-header__content + display: flex + align-items: center + + .v-data-table-header__sort-badge + display: inline-flex + justify-content: center + align-items: center + font-size: 0.875rem + padding: 4px + border-radius: 50% + background: $data-table-header-sort-badge-color + min-width: $data-table-header-sort-badge-size + min-height: $data-table-header-sort-badge-size + width: $data-table-header-sort-badge-size + height: $data-table-header-sort-badge-size + + .v-data-table-progress + > th + border: none !important + height: auto !important + padding: 0 !important + + .v-data-table-progress__loader + position: relative + + .v-data-table-rows-loading, + .v-data-table-rows-no-data + text-align: center diff --git a/packages/vuetify/src/components/VDataTable/VDataTableFooter.sass b/packages/vuetify/src/components/VDataTable/VDataTableFooter.sass index 1e8ff47a3d0..3a211f2785a 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTableFooter.sass +++ b/packages/vuetify/src/components/VDataTable/VDataTableFooter.sass @@ -2,34 +2,35 @@ @use '../../styles/tools' @use './variables' as * -.v-data-table-footer - display: flex - align-items: center - flex-wrap: wrap - padding: $data-table-footer-padding - justify-content: flex-end +@include tools.layer('components') + .v-data-table-footer + display: flex + align-items: center + flex-wrap: wrap + padding: $data-table-footer-padding + justify-content: flex-end -.v-data-table-footer__items-per-page - display: flex - align-items: center - justify-content: center + .v-data-table-footer__items-per-page + display: flex + align-items: center + justify-content: center - > span - padding-inline-end: $data-table-footer-items-per-page-padding + > span + padding-inline-end: $data-table-footer-items-per-page-padding - > .v-select - width: $data-table-footer-select-width + > .v-select + width: $data-table-footer-select-width -.v-data-table-footer__info - display: flex - justify-content: flex-end - min-width: $data-table-footer-info-min-width - padding: $data-table-footer-info-padding + .v-data-table-footer__info + display: flex + justify-content: flex-end + min-width: $data-table-footer-info-min-width + padding: $data-table-footer-info-padding -.v-data-table-footer__pagination - display: flex - align-items: center - margin-inline-start: $data-table-footer-pagination-margin-inline-start + .v-data-table-footer__pagination + display: flex + align-items: center + margin-inline-start: $data-table-footer-pagination-margin-inline-start -.v-data-table-footer__page - padding: 0 8px + .v-data-table-footer__page + padding: 0 8px diff --git a/packages/vuetify/src/components/VDatePicker/VDatePicker.sass b/packages/vuetify/src/components/VDatePicker/VDatePicker.sass index 3bbbb7165cf..9621aee4004 100644 --- a/packages/vuetify/src/components/VDatePicker/VDatePicker.sass +++ b/packages/vuetify/src/components/VDatePicker/VDatePicker.sass @@ -1,9 +1,10 @@ @use '../../styles/tools' @use './variables' as * -.v-date-picker - overflow: hidden - width: $date-picker-width +@include tools.layer('components') + .v-date-picker + overflow: hidden + width: $date-picker-width - &--show-week - width: $date-picker-show-week-width + &--show-week + width: $date-picker-show-week-width diff --git a/packages/vuetify/src/components/VDatePicker/VDatePickerControls.sass b/packages/vuetify/src/components/VDatePicker/VDatePickerControls.sass index 2589646e634..3420da1a357 100644 --- a/packages/vuetify/src/components/VDatePicker/VDatePickerControls.sass +++ b/packages/vuetify/src/components/VDatePicker/VDatePickerControls.sass @@ -1,57 +1,58 @@ @use '../../styles/tools' -.v-date-picker-controls - display: flex - align-items: center - justify-content: space-between - font-size: .875rem - padding-top: 4px - padding-bottom: 4px - padding-inline-start: 6px - padding-inline-end: 12px - - > .v-btn:first-child - text-transform: none - font-weight: 400 - line-height: initial - letter-spacing: initial - - &--variant-classic - padding-inline-start: 12px - - &--variant-modern - .v-date-picker__title - &:not(:hover) - opacity: .7 - - .v-date-picker--month & - cursor: pointer - - .v-date-picker--year & - opacity: 1 - - .v-btn:last-child - margin-inline-start: 4px - - .v-date-picker--year & - .v-date-picker-controls__mode-btn - transform: rotate(180deg) - -.v-date-picker-controls__date - margin-inline-end: 4px - - .v-date-picker-controls--variant-classic & - margin: auto - text-align: center - -.v-date-picker-controls__month - display: flex - - @include tools.rtl() - flex-direction: row-reverse - - .v-date-picker-controls--variant-classic & - flex: 1 0 auto - -.v-date-picker__title - display: inline-block +@include tools.layer('components') + .v-date-picker-controls + display: flex + align-items: center + justify-content: space-between + font-size: .875rem + padding-top: 4px + padding-bottom: 4px + padding-inline-start: 6px + padding-inline-end: 12px + + > .v-btn:first-child + text-transform: none + font-weight: 400 + line-height: initial + letter-spacing: initial + + &--variant-classic + padding-inline-start: 12px + + &--variant-modern + .v-date-picker__title + &:not(:hover) + opacity: .7 + + .v-date-picker--month & + cursor: pointer + + .v-date-picker--year & + opacity: 1 + + .v-btn:last-child + margin-inline-start: 4px + + .v-date-picker--year & + .v-date-picker-controls__mode-btn + transform: rotate(180deg) + + .v-date-picker-controls__date + margin-inline-end: 4px + + .v-date-picker-controls--variant-classic & + margin: auto + text-align: center + + .v-date-picker-controls__month + display: flex + + @include tools.rtl() + flex-direction: row-reverse + + .v-date-picker-controls--variant-classic & + flex: 1 0 auto + + .v-date-picker__title + display: inline-block diff --git a/packages/vuetify/src/components/VDatePicker/VDatePickerHeader.sass b/packages/vuetify/src/components/VDatePicker/VDatePickerHeader.sass index 73aea847136..1da7cd8970e 100644 --- a/packages/vuetify/src/components/VDatePicker/VDatePickerHeader.sass +++ b/packages/vuetify/src/components/VDatePicker/VDatePickerHeader.sass @@ -1,59 +1,61 @@ @use '../../styles/settings' +@use '../../styles/tools' @use './variables' as * -.v-date-picker-header - align-items: flex-end - height: $date-picker-header-height - display: grid - grid-template-areas: "prepend content append" - grid-template-columns: min-content minmax(0, 1fr) min-content - overflow: hidden - padding-inline: 24px 12px - padding-bottom: 12px - -.v-date-picker-header__append - grid-area: append - -.v-date-picker-header__prepend - grid-area: prepend - padding-inline-start: 8px - -.v-date-picker-header__content - align-items: center - display: inline-flex - font-size: 32px - line-height: 40px - grid-area: content - justify-content: space-between - - .v-date-picker-header--clickable & - cursor: pointer - - &:not(:hover) - opacity: .7 - -.date-picker-header-transition, -.date-picker-header-reverse-transition - &-enter-active - transition-duration: 0.3s - transition-timing-function: settings.$standard-easing - - &-leave-active - transition-duration: 0.3s - transition-timing-function: settings.$standard-easing - -.date-picker-header-transition - &-enter-from - transform: translate(0, 100%) - - &-leave-to - opacity: 0 - transform: translate(0, -100%) - -.date-picker-header-reverse-transition - &-enter-from - transform: translate(0, -100%) - - &-leave-to - opacity: 0 - transform: translate(0, 100%) +@include tools.layer('components') + .v-date-picker-header + align-items: flex-end + height: $date-picker-header-height + display: grid + grid-template-areas: "prepend content append" + grid-template-columns: min-content minmax(0, 1fr) min-content + overflow: hidden + padding-inline: 24px 12px + padding-bottom: 12px + + .v-date-picker-header__append + grid-area: append + + .v-date-picker-header__prepend + grid-area: prepend + padding-inline-start: 8px + + .v-date-picker-header__content + align-items: center + display: inline-flex + font-size: 32px + line-height: 40px + grid-area: content + justify-content: space-between + + .v-date-picker-header--clickable & + cursor: pointer + + &:not(:hover) + opacity: .7 + + .date-picker-header-transition, + .date-picker-header-reverse-transition + &-enter-active + transition-duration: 0.3s + transition-timing-function: settings.$standard-easing + + &-leave-active + transition-duration: 0.3s + transition-timing-function: settings.$standard-easing + + .date-picker-header-transition + &-enter-from + transform: translate(0, 100%) + + &-leave-to + opacity: 0 + transform: translate(0, -100%) + + .date-picker-header-reverse-transition + &-enter-from + transform: translate(0, -100%) + + &-leave-to + opacity: 0 + transform: translate(0, 100%) diff --git a/packages/vuetify/src/components/VDatePicker/VDatePickerMonth.sass b/packages/vuetify/src/components/VDatePicker/VDatePickerMonth.sass index e7ca1117746..5468998271e 100644 --- a/packages/vuetify/src/components/VDatePicker/VDatePickerMonth.sass +++ b/packages/vuetify/src/components/VDatePicker/VDatePickerMonth.sass @@ -1,53 +1,55 @@ +@use '../../styles/tools' @use './variables' as * -.v-date-picker-month - display: flex - justify-content: center - padding: $date-picker-month-padding - - --v-date-picker-month-day-diff: 4px - -.v-date-picker-month__weeks - display: grid - grid-template-rows: min-content min-content min-content min-content min-content min-content min-content - column-gap: $date-picker-month-column-gap - font-size: $date-picker-month-font-size - - + .v-date-picker-month__days - grid-row-gap: 0 - -.v-date-picker-month__weekday - font-size: $date-picker-month-font-size - -.v-date-picker-month__days - display: grid - grid-template-columns: min-content min-content min-content min-content min-content min-content min-content - column-gap: $date-picker-month-column-gap - flex: 1 1 - justify-content: space-around - -.v-date-picker-month__day - align-items: center - display: flex - justify-content: center - position: relative - height: $date-picker-month-day-size - width: $date-picker-month-day-size - - &--selected - .v-btn - background-color: rgb(var(--v-theme-surface-variant)) - color: rgb(var(--v-theme-on-surface-variant)) - - .v-btn.v-date-picker-month__day-btn - --v-btn-height: #{$date-picker-month-btn-height} - --v-btn-size: #{$date-picker-month-btn-size} - - &--week - font-size: var(--v-btn-size) - -.v-date-picker-month__day--adjacent - opacity: 0.5 - -.v-date-picker-month__day--hide-adjacent - opacity: 0 +@include tools.layer('components') + .v-date-picker-month + display: flex + justify-content: center + padding: $date-picker-month-padding + + --v-date-picker-month-day-diff: 4px + + .v-date-picker-month__weeks + display: grid + grid-template-rows: min-content min-content min-content min-content min-content min-content min-content + column-gap: $date-picker-month-column-gap + font-size: $date-picker-month-font-size + + + .v-date-picker-month__days + grid-row-gap: 0 + + .v-date-picker-month__weekday + font-size: $date-picker-month-font-size + + .v-date-picker-month__days + display: grid + grid-template-columns: min-content min-content min-content min-content min-content min-content min-content + column-gap: $date-picker-month-column-gap + flex: 1 1 + justify-content: space-around + + .v-date-picker-month__day + align-items: center + display: flex + justify-content: center + position: relative + height: $date-picker-month-day-size + width: $date-picker-month-day-size + + &--selected + .v-btn + background-color: rgb(var(--v-theme-surface-variant)) + color: rgb(var(--v-theme-on-surface-variant)) + + .v-btn.v-date-picker-month__day-btn + --v-btn-height: #{$date-picker-month-btn-height} + --v-btn-size: #{$date-picker-month-btn-size} + + &--week + font-size: var(--v-btn-size) + + .v-date-picker-month__day--adjacent + opacity: 0.5 + + .v-date-picker-month__day--hide-adjacent + opacity: 0 diff --git a/packages/vuetify/src/components/VDatePicker/VDatePickerMonths.sass b/packages/vuetify/src/components/VDatePicker/VDatePickerMonths.sass index d4d8f8e2602..2bae969e42a 100644 --- a/packages/vuetify/src/components/VDatePicker/VDatePickerMonths.sass +++ b/packages/vuetify/src/components/VDatePicker/VDatePickerMonths.sass @@ -1,20 +1,22 @@ +@use '../../styles/tools' @use './variables' as * -.v-date-picker-months - height: $date-picker-months-height +@include tools.layer('components') + .v-date-picker-months + height: $date-picker-months-height -.v-date-picker-months__content - align-items: center - display: grid - flex: 1 1 - height: inherit - justify-content: space-around - grid-template-columns: repeat(2, 1fr) - grid-gap: $date-picker-months-grid-gap - padding-inline-start: 36px - padding-inline-end: 36px + .v-date-picker-months__content + align-items: center + display: grid + flex: 1 1 + height: inherit + justify-content: space-around + grid-template-columns: repeat(2, 1fr) + grid-gap: $date-picker-months-grid-gap + padding-inline-start: 36px + padding-inline-end: 36px - .v-btn - text-transform: none - padding-inline-start: 8px - padding-inline-end: 8px + .v-btn + text-transform: none + padding-inline-start: 8px + padding-inline-end: 8px diff --git a/packages/vuetify/src/components/VDatePicker/VDatePickerYears.sass b/packages/vuetify/src/components/VDatePicker/VDatePickerYears.sass index a8797600438..81d60717882 100644 --- a/packages/vuetify/src/components/VDatePicker/VDatePickerYears.sass +++ b/packages/vuetify/src/components/VDatePicker/VDatePickerYears.sass @@ -1,16 +1,18 @@ +@use '../../styles/tools' @use './variables' as * -.v-date-picker-years - height: $date-picker-years-height - overflow-y: scroll +@include tools.layer('components') + .v-date-picker-years + height: $date-picker-years-height + overflow-y: scroll -.v-date-picker-years__content - display: grid - flex: 1 1 - justify-content: space-around - grid-template-columns: repeat(3, 1fr) - gap: 8px 24px - padding-inline: $date-picker-years-padding-inline + .v-date-picker-years__content + display: grid + flex: 1 1 + justify-content: space-around + grid-template-columns: repeat(3, 1fr) + gap: 8px 24px + padding-inline: $date-picker-years-padding-inline - .v-btn - padding-inline: 8px + .v-btn + padding-inline: 8px diff --git a/packages/vuetify/src/components/VDialog/VDialog.sass b/packages/vuetify/src/components/VDialog/VDialog.sass index 59720dae385..96aeb78ec6f 100644 --- a/packages/vuetify/src/components/VDialog/VDialog.sass +++ b/packages/vuetify/src/components/VDialog/VDialog.sass @@ -1,83 +1,83 @@ @use '../../styles/tools' @use './variables' as * -// Block -.v-dialog - align-items: center - justify-content: center - margin: auto +@include tools.layer('components') + .v-dialog + align-items: center + justify-content: center + margin: auto - > .v-overlay__content - max-height: calc(100% - #{$dialog-margin * 2}) - width: calc(100% - #{$dialog-margin * 2}) - max-width: calc(100% - #{$dialog-margin * 2}) - margin: $dialog-margin + > .v-overlay__content + max-height: calc(100% - #{$dialog-margin * 2}) + width: calc(100% - #{$dialog-margin * 2}) + max-width: calc(100% - #{$dialog-margin * 2}) + margin: $dialog-margin - &, - > form - display: flex - flex-direction: column - min-height: 0 + &, + > form + display: flex + flex-direction: column + min-height: 0 - > .v-card, - > .v-sheet - --v-scrollbar-offset: 0px - border-radius: $dialog-border-radius - overflow-y: auto + > .v-card, + > .v-sheet + --v-scrollbar-offset: 0px + border-radius: $dialog-border-radius + overflow-y: auto - @include tools.elevation($dialog-elevation) + @include tools.elevation($dialog-elevation) - > .v-card - display: flex - flex-direction: column + > .v-card + display: flex + flex-direction: column - > .v-card-item - padding: $dialog-card-header-padding + > .v-card-item + padding: $dialog-card-header-padding - + .v-card-text - padding-top: $dialog-card-header-text-padding-top + + .v-card-text + padding-top: $dialog-card-header-text-padding-top - > .v-card-text - font-size: inherit - letter-spacing: $dialog-card-text-letter-spacing - line-height: inherit - padding: $dialog-card-text-padding + > .v-card-text + font-size: inherit + letter-spacing: $dialog-card-text-letter-spacing + line-height: inherit + padding: $dialog-card-text-padding -.v-dialog--fullscreen - --v-scrollbar-offset: 0px + .v-dialog--fullscreen + --v-scrollbar-offset: 0px - > .v-overlay__content - border-radius: 0 - margin: 0 - padding: 0 - width: 100% - height: 100% - max-width: 100% - max-height: 100% - overflow-y: auto - top: 0 - left: 0 + > .v-overlay__content + border-radius: 0 + margin: 0 + padding: 0 + width: 100% + height: 100% + max-width: 100% + max-height: 100% + overflow-y: auto + top: 0 + left: 0 + &, + > form + > .v-card, + > .v-sheet + min-height: 100% + min-width: 100% + border-radius: 0 + + .v-dialog--scrollable > .v-overlay__content &, > form - > .v-card, - > .v-sheet - min-height: 100% - min-width: 100% - border-radius: 0 - -.v-dialog--scrollable > .v-overlay__content - &, - > form - display: flex - - > .v-card display: flex - flex: 1 1 100% - flex-direction: column - max-height: 100% - max-width: 100% - > .v-card-text - backface-visibility: hidden - overflow-y: auto + > .v-card + display: flex + flex: 1 1 100% + flex-direction: column + max-height: 100% + max-width: 100% + + > .v-card-text + backface-visibility: hidden + overflow-y: auto diff --git a/packages/vuetify/src/components/VDivider/VDivider.sass b/packages/vuetify/src/components/VDivider/VDivider.sass index 1f127759d05..164745f849b 100644 --- a/packages/vuetify/src/components/VDivider/VDivider.sass +++ b/packages/vuetify/src/components/VDivider/VDivider.sass @@ -1,51 +1,52 @@ @use '../../styles/tools' @use './variables' as * -.v-divider - display: block - flex: $divider-flex - height: 0px - max-height: 0px - opacity: $divider-opacity - transition: inherit - - @include tools.border($divider-border...) - - &--vertical - align-self: stretch - border-width: $divider-vertical-border-width - display: inline-flex - height: 100% - margin-left: $divider-vertical-margin-left - max-height: 100% - max-width: 0px - vertical-align: text-bottom - width: 0px - - &--inset - &:not(.v-divider--vertical) - max-width: $divider-inset-max-width - margin-inline-start: $divider-inset-margin - - &.v-divider--vertical - margin-bottom: $divider-vertical-inset-margin-bottom - margin-top: $divider-vertical-inset-margin-top - max-height: $divider-vertical-inset-max-height - -.v-divider__content - padding: $divider-content-padding - - .v-divider__wrapper--vertical & - padding: $divider-content-vertical-padding - -.v-divider__wrapper - display: flex - align-items: center - justify-content: center - - &--vertical - flex-direction: column - height: 100% - - .v-divider - margin: 0 auto +@include tools.layer('components') + .v-divider + display: block + flex: $divider-flex + height: 0px + max-height: 0px + opacity: $divider-opacity + transition: inherit + + @include tools.border($divider-border...) + + &--vertical + align-self: stretch + border-width: $divider-vertical-border-width + display: inline-flex + height: 100% + margin-left: $divider-vertical-margin-left + max-height: 100% + max-width: 0px + vertical-align: text-bottom + width: 0px + + &--inset + &:not(.v-divider--vertical) + max-width: $divider-inset-max-width + margin-inline-start: $divider-inset-margin + + &.v-divider--vertical + margin-bottom: $divider-vertical-inset-margin-bottom + margin-top: $divider-vertical-inset-margin-top + max-height: $divider-vertical-inset-max-height + + .v-divider__content + padding: $divider-content-padding + + .v-divider__wrapper--vertical & + padding: $divider-content-vertical-padding + + .v-divider__wrapper + display: flex + align-items: center + justify-content: center + + &--vertical + flex-direction: column + height: 100% + + .v-divider + margin: 0 auto diff --git a/packages/vuetify/src/components/VExpansionPanel/VExpansionPanel.sass b/packages/vuetify/src/components/VExpansionPanel/VExpansionPanel.sass index 0318cb43c35..7fd294cc8ac 100644 --- a/packages/vuetify/src/components/VExpansionPanel/VExpansionPanel.sass +++ b/packages/vuetify/src/components/VExpansionPanel/VExpansionPanel.sass @@ -3,188 +3,189 @@ @use '../../styles/tools' @use './variables' as * -// Theme -.v-expansion-panel - background-color: $expansion-panel-background-color - color: $expansion-panel-color - - &:not(:first-child)::after - border-color: $expansion-panel-border-color - - &--disabled - .v-expansion-panel-title - color: $expansion-panel-disabled-color +@include tools.layer('components') + // Theme + .v-expansion-panel + background-color: $expansion-panel-background-color + color: $expansion-panel-color + + &:not(:first-child)::after + border-color: $expansion-panel-border-color + + &--disabled + .v-expansion-panel-title + color: $expansion-panel-disabled-color + + .v-expansion-panel-title__overlay + // This is multiplied by the text opacity, + // so we need to divide it to get the desired value + // TODO: Should disabled be part of states mixin? + opacity: math.div($expansion-panel-disabled-overlay, $expansion-panel-disabled-opacity) + + // Block + .v-expansion-panels + display: flex + flex-wrap: wrap + justify-content: center + list-style-type: none + padding: 0 + width: 100% + position: relative + z-index: 1 + + &:not(&--variant-accordion) + > :not(:first-child):not(:last-child):not(.v-expansion-panel--active):not(.v-expansion-panel--before-active) + border-bottom-left-radius: 0 !important + border-bottom-right-radius: 0 !important + + > :not(:first-child):not(:last-child):not(.v-expansion-panel--active):not(.v-expansion-panel--after-active) + border-top-left-radius: 0 !important + border-top-right-radius: 0 !important + + > :first-child:not(:last-child):not(.v-expansion-panel--active):not(.v-expansion-panel--before-active) + border-bottom-left-radius: 0 !important + border-bottom-right-radius: 0 !important + + > :last-child:not(:first-child):not(.v-expansion-panel--active):not(.v-expansion-panel--after-active) + border-top-left-radius: 0 !important + border-top-right-radius: 0 !important + + &--variant-accordion + > :first-child:not(:last-child) + border-bottom-left-radius: 0 !important + border-bottom-right-radius: 0 !important + + > :last-child:not(:first-child) + border-top-left-radius: 0 !important + border-top-right-radius: 0 !important + + .v-expansion-panel-title--active + border-bottom-left-radius: initial + border-bottom-right-radius: initial + + > :not(:first-child):not(:last-child) + border-radius: 0 !important .v-expansion-panel-title__overlay - // This is multiplied by the text opacity, - // so we need to divide it to get the desired value - // TODO: Should disabled be part of states mixin? - opacity: math.div($expansion-panel-disabled-overlay, $expansion-panel-disabled-opacity) - -// Block -.v-expansion-panels - display: flex - flex-wrap: wrap - justify-content: center - list-style-type: none - padding: 0 - width: 100% - position: relative - z-index: 1 - - &:not(&--variant-accordion) - > :not(:first-child):not(:last-child):not(.v-expansion-panel--active):not(.v-expansion-panel--before-active) - border-bottom-left-radius: 0 !important - border-bottom-right-radius: 0 !important - - > :not(:first-child):not(:last-child):not(.v-expansion-panel--active):not(.v-expansion-panel--after-active) - border-top-left-radius: 0 !important - border-top-right-radius: 0 !important - - > :first-child:not(:last-child):not(.v-expansion-panel--active):not(.v-expansion-panel--before-active) - border-bottom-left-radius: 0 !important - border-bottom-right-radius: 0 !important - - > :last-child:not(:first-child):not(.v-expansion-panel--active):not(.v-expansion-panel--after-active) - border-top-left-radius: 0 !important - border-top-right-radius: 0 !important - - &--variant-accordion - > :first-child:not(:last-child) - border-bottom-left-radius: 0 !important - border-bottom-right-radius: 0 !important - - > :last-child:not(:first-child) - border-top-left-radius: 0 !important - border-top-right-radius: 0 !important - - .v-expansion-panel-title--active - border-bottom-left-radius: initial - border-bottom-right-radius: initial - - > :not(:first-child):not(:last-child) - border-radius: 0 !important - - .v-expansion-panel-title__overlay - transition: 0.3s border-radius settings.$standard-easing - -// Element -.v-expansion-panel - flex: 1 0 100% - max-width: 100% - position: relative - transition: .3s all settings.$standard-easing - transition-property: margin-top, border-radius, border, max-width - border-radius: $expansion-panel-border-radius - - &:not(:first-child)::after - border-top-style: solid - border-top-width: thin - content: '' - left: 0 - position: absolute - right: 0 - top: 0 - transition: 0.3s opacity settings.$standard-easing - - &--disabled - .v-expansion-panel-title - pointer-events: none - - &--active - &:not(:first-child), - + .v-expansion-panel - margin-top: $expansion-panel-active-margin + transition: 0.3s border-radius settings.$standard-easing - &::after - opacity: 0 - - > .v-expansion-panel-title - border-bottom-left-radius: 0 - border-bottom-right-radius: 0 - - &:not(.v-expansion-panel-title--static) - min-height: $expansion-panel-active-title-min-height - -.v-expansion-panel__shadow - @include tools.absolute() - @include tools.elevation(2) - border-radius: inherit - z-index: -1 - -.v-expansion-panel-title - align-items: center - text-align: start - border-radius: inherit - display: flex - font-size: $expansion-panel-title-font-size - line-height: 1 - min-height: $expansion-panel-title-min-height - outline: none - padding: $expansion-panel-title-padding - position: relative - transition: .3s min-height settings.$standard-easing - width: 100% - justify-content: space-between - - @include tools.states('.v-expansion-panel-title__overlay', false) - - &--focusable.v-expansion-panel-title--active - @include tools.active-states('.v-expansion-panel-title__overlay') - -.v-expansion-panel-title__overlay - @include tools.absolute() - background-color: currentColor - border-radius: inherit - opacity: 0 - -.v-expansion-panel-title__icon - display: inline-flex - margin-bottom: -4px - margin-top: -4px - user-select: none - margin-inline-start: auto - -.v-expansion-panel-text - display: flex - - &__wrapper - padding: $expansion-panel-text-padding - flex: 1 1 auto + // Element + .v-expansion-panel + flex: 1 0 100% max-width: 100% + position: relative + transition: .3s all settings.$standard-easing + transition-property: margin-top, border-radius, border, max-width + border-radius: $expansion-panel-border-radius + + &:not(:first-child)::after + border-top-style: solid + border-top-width: thin + content: '' + left: 0 + position: absolute + right: 0 + top: 0 + transition: 0.3s opacity settings.$standard-easing + + &--disabled + .v-expansion-panel-title + pointer-events: none -// Variants -.v-expansion-panels--variant-accordion - > .v-expansion-panel - margin-top: 0 - - &::after - opacity: 1 + &--active + &:not(:first-child), + + .v-expansion-panel + margin-top: $expansion-panel-active-margin + + &::after + opacity: 0 + + > .v-expansion-panel-title + border-bottom-left-radius: 0 + border-bottom-right-radius: 0 + + &:not(.v-expansion-panel-title--static) + min-height: $expansion-panel-active-title-min-height + + .v-expansion-panel__shadow + @include tools.absolute() + @include tools.elevation(2) + border-radius: inherit + z-index: -1 + + .v-expansion-panel-title + align-items: center + text-align: start + border-radius: inherit + display: flex + font-size: $expansion-panel-title-font-size + line-height: 1 + min-height: $expansion-panel-title-min-height + outline: none + padding: $expansion-panel-title-padding + position: relative + transition: .3s min-height settings.$standard-easing + width: 100% + justify-content: space-between + + @include tools.states('.v-expansion-panel-title__overlay', false) + + &--focusable.v-expansion-panel-title--active + @include tools.active-states('.v-expansion-panel-title__overlay') + + .v-expansion-panel-title__overlay + @include tools.absolute() + background-color: currentColor + border-radius: inherit + opacity: 0 + + .v-expansion-panel-title__icon + display: inline-flex + margin-bottom: -4px + margin-top: -4px + user-select: none + margin-inline-start: auto + + .v-expansion-panel-text + display: flex + + &__wrapper + padding: $expansion-panel-text-padding + flex: 1 1 auto + max-width: 100% + + // Variants + .v-expansion-panels--variant-accordion + > .v-expansion-panel + margin-top: 0 -.v-expansion-panels--variant-popout - > .v-expansion-panel - max-width: $expansion-panel-popout-max-width + &::after + opacity: 1 - &--active - max-width: $expansion-panel-popout-active-max-width + .v-expansion-panels--variant-popout + > .v-expansion-panel + max-width: $expansion-panel-popout-max-width -.v-expansion-panels--variant-inset - > .v-expansion-panel - max-width: $expansion-panel-inset-max-width + &--active + max-width: $expansion-panel-popout-active-max-width - &--active - max-width: $expansion-panel-inset-active-max-width + .v-expansion-panels--variant-inset + > .v-expansion-panel + max-width: $expansion-panel-inset-max-width -.v-expansion-panels--flat - > .v-expansion-panel - &::after - border-top: none + &--active + max-width: $expansion-panel-inset-active-max-width - .v-expansion-panel__shadow - display: none + .v-expansion-panels--flat + > .v-expansion-panel + &::after + border-top: none -.v-expansion-panels--tile - border-radius: 0 + .v-expansion-panel__shadow + display: none - > .v-expansion-panel + .v-expansion-panels--tile border-radius: 0 + + > .v-expansion-panel + border-radius: 0 diff --git a/packages/vuetify/src/components/VField/VField.sass b/packages/vuetify/src/components/VField/VField.sass index 668f5708550..a7a952d5eeb 100644 --- a/packages/vuetify/src/components/VField/VField.sass +++ b/packages/vuetify/src/components/VField/VField.sass @@ -5,529 +5,530 @@ @use '../../styles/tools' @use './variables' as * -/* region INPUT */ -.v-field - display: grid - grid-template-areas: "prepend-inner field clear append-inner" - grid-template-columns: min-content minmax(0, 1fr) min-content min-content - font-size: $field-font-size - letter-spacing: $field-letter-spacing - max-width: $field-max-width - border-radius: $field-border-radius - contain: layout - flex: 1 0 - grid-area: control - position: relative - - &--disabled - opacity: var(--v-disabled-opacity) - pointer-events: none +@include tools.layer('components') + /* region INPUT */ + .v-field + display: grid + grid-template-areas: "prepend-inner field clear append-inner" + grid-template-columns: min-content minmax(0, 1fr) min-content min-content + font-size: $field-font-size + letter-spacing: $field-letter-spacing + max-width: $field-max-width + border-radius: $field-border-radius + contain: layout + flex: 1 0 + grid-area: control + position: relative + + &--disabled + opacity: var(--v-disabled-opacity) + pointer-events: none - --v-field-padding-start: #{$field-control-padding-start} - --v-field-padding-end: #{$field-control-padding-end} - --v-field-padding-top: #{$field-control-padding-top} - --v-field-padding-bottom: #{$field-control-padding-bottom} - --v-field-input-padding-top: #{$field-input-padding-top} - --v-field-input-padding-bottom: #{$field-input-padding-bottom} + --v-field-padding-start: #{$field-control-padding-start} + --v-field-padding-end: #{$field-control-padding-end} + --v-field-padding-top: #{$field-control-padding-top} + --v-field-padding-bottom: #{$field-control-padding-bottom} + --v-field-input-padding-top: #{$field-input-padding-top} + --v-field-input-padding-bottom: #{$field-input-padding-bottom} - .v-chip - --v-chip-height: #{$field-chip-height} + .v-chip + --v-chip-height: #{$field-chip-height} -/* endregion */ -/* region MODIFIERS */ -.v-field - &--prepended - padding-inline-start: $field-control-affixed-padding + /* endregion */ + /* region MODIFIERS */ + .v-field + &--prepended + padding-inline-start: $field-control-affixed-padding - &--appended - padding-inline-end: $field-control-affixed-padding + &--appended + padding-inline-end: $field-control-affixed-padding - &--variant-solo, - &--variant-solo-filled - background: $field-control-solo-background - border-color: transparent - color: $field-control-solo-color + &--variant-solo, + &--variant-solo-filled + background: $field-control-solo-background + border-color: transparent + color: $field-control-solo-color - @include tools.elevation($field-control-solo-elevation) + @include tools.elevation($field-control-solo-elevation) - &--variant-solo-inverted - background: $field-control-solo-background - border-color: transparent - color: $field-control-solo-inverted-color + &--variant-solo-inverted + background: $field-control-solo-background + border-color: transparent + color: $field-control-solo-inverted-color - @include tools.elevation($field-control-solo-elevation) + @include tools.elevation($field-control-solo-elevation) - &.v-field--focused - color: $field-control-solo-inverted-focused-color + &.v-field--focused + color: $field-control-solo-inverted-focused-color - &--variant-filled - border-bottom-left-radius: 0 - border-bottom-right-radius: 0 + &--variant-filled + border-bottom-left-radius: 0 + border-bottom-right-radius: 0 - &--variant-solo, - &--variant-solo-inverted, - &--variant-solo-filled, - &--variant-filled - $root: & + &--variant-solo, + &--variant-solo-inverted, + &--variant-solo-filled, + &--variant-filled + $root: & - @at-root - @include tools.density('v-input', $input-density) using ($modifier) - @at-root #{selector.nest(&, $root)} - --v-input-control-height: #{$field-control-height + $modifier} - --v-field-padding-bottom: #{math.max(0px, $field-control-padding-bottom + $modifier * .5)} + @at-root + @include tools.density('v-input', $input-density) using ($modifier) + @at-root #{selector.nest(&, $root)} + --v-input-control-height: #{$field-control-height + $modifier} + --v-field-padding-bottom: #{math.max(0px, $field-control-padding-bottom + $modifier * .5)} - &--variant-outlined, - &--single-line, - &--no-label - --v-field-padding-top: 0px - $root: & + &--variant-outlined, + &--single-line, + &--no-label + --v-field-padding-top: 0px + $root: & - @at-root - @include tools.density('v-input', $input-density) using ($modifier) - @at-root #{selector.nest(&, $root)} - --v-field-padding-bottom: #{16px + $modifier * .5} + @at-root + @include tools.density('v-input', $input-density) using ($modifier) + @at-root #{selector.nest(&, $root)} + --v-field-padding-bottom: #{16px + $modifier * .5} - &--variant-plain, - &--variant-underlined - $root: & - border-radius: 0 - padding: 0 + &--variant-plain, + &--variant-underlined + $root: & + border-radius: 0 + padding: 0 + &.v-field + --v-field-padding-start: 0px + --v-field-padding-end: 0px + + @at-root + @include tools.density('v-input', $input-density) using ($modifier) + @at-root #{selector.nest(&, $root)} + --v-input-control-height: #{$field-control-underlined-height + $modifier} + --v-field-padding-top: #{math.max(0px, 4px + $modifier * .25)} + --v-field-padding-bottom: #{math.max(0px, $field-control-padding-bottom + $modifier * .5)} + + &--flat + box-shadow: none + + &--rounded + @include tools.rounded($field-rounded-border-radius) + + // These are separate so they can override the default variant styles &.v-field - --v-field-padding-start: 0px - --v-field-padding-end: 0px + &--prepended + --v-field-padding-start: #{$field-control-affixed-inner-padding} + + &--appended + --v-field-padding-end: #{$field-control-affixed-inner-padding} + + /* endregion */ + /* region ELEMENTS */ + .v-field__input + align-items: center + color: inherit + column-gap: $field-input-column-gap + display: flex + flex-wrap: wrap + letter-spacing: $field-letter-spacing + opacity: $field-input-opacity + min-height: $field-input-min-height + min-width: 0 + padding-inline: var(--v-field-padding-start) var(--v-field-padding-end) + padding-top: var(--v-field-input-padding-top) + padding-bottom: var(--v-field-input-padding-bottom) + position: relative + width: 100% + + $root: & @at-root @include tools.density('v-input', $input-density) using ($modifier) @at-root #{selector.nest(&, $root)} - --v-input-control-height: #{$field-control-underlined-height + $modifier} - --v-field-padding-top: #{math.max(0px, 4px + $modifier * .25)} - --v-field-padding-bottom: #{math.max(0px, $field-control-padding-bottom + $modifier * .5)} + row-gap: #{$field-input-row-gap + $modifier * .25} - &--flat - box-shadow: none + input + letter-spacing: inherit - &--rounded - @include tools.rounded($field-rounded-border-radius) + @at-root + & input::placeholder, + input#{&}::placeholder, + textarea#{&}::placeholder + color: currentColor + opacity: var(--v-disabled-opacity) + + &:focus, + &:active + outline: none + + // Remove Firefox red outline + &:invalid + box-shadow: none + + .v-field__field + flex: 1 0 + grid-area: field + position: relative + align-items: flex-start + display: flex - // These are separate so they can override the default variant styles - &.v-field - &--prepended - --v-field-padding-start: #{$field-control-affixed-inner-padding} + /* endregion */ + /* region AFFIXES */ + .v-field__prepend-inner + grid-area: prepend-inner + padding-inline-end: var(--v-field-padding-after) - &--appended - --v-field-padding-end: #{$field-control-affixed-inner-padding} - -/* endregion */ -/* region ELEMENTS */ -.v-field__input - align-items: center - color: inherit - column-gap: $field-input-column-gap - display: flex - flex-wrap: wrap - letter-spacing: $field-letter-spacing - opacity: $field-input-opacity - min-height: $field-input-min-height - min-width: 0 - padding-inline: var(--v-field-padding-start) var(--v-field-padding-end) - padding-top: var(--v-field-input-padding-top) - padding-bottom: var(--v-field-input-padding-bottom) - position: relative - width: 100% - - $root: & - - @at-root - @include tools.density('v-input', $input-density) using ($modifier) - @at-root #{selector.nest(&, $root)} - row-gap: #{$field-input-row-gap + $modifier * .25} - - input - letter-spacing: inherit - - @at-root - & input::placeholder, - input#{&}::placeholder, - textarea#{&}::placeholder - color: currentColor - opacity: var(--v-disabled-opacity) + .v-field__clearable + grid-area: clear - &:focus, - &:active - outline: none - - // Remove Firefox red outline - &:invalid - box-shadow: none - -.v-field__field - flex: 1 0 - grid-area: field - position: relative - align-items: flex-start - display: flex - -/* endregion */ -/* region AFFIXES */ -.v-field__prepend-inner - grid-area: prepend-inner - padding-inline-end: var(--v-field-padding-after) - -.v-field__clearable - grid-area: clear - -.v-field__append-inner - grid-area: append-inner - padding-inline-start: var(--v-field-padding-after) - -.v-field__append-inner, -.v-field__clearable, -.v-field__prepend-inner - display: flex - align-items: flex-start - padding-top: var(--v-input-padding-top, $field-control-padding-top) - - .v-field--center-affix & - align-items: center - padding-top: 0 + .v-field__append-inner + grid-area: append-inner + padding-inline-start: var(--v-field-padding-after) -.v-field.v-field--variant-underlined, -.v-field.v-field--variant-plain .v-field__append-inner, .v-field__clearable, .v-field__prepend-inner + display: flex align-items: flex-start - padding-top: $field-input-padding-top - padding-bottom: $field-input-padding-bottom - -.v-field__prepend-inner, -.v-field__append-inner - .v-field--focused & - opacity: 1 - -.v-field__prepend-inner, -.v-field__append-inner, -.v-field__clearable - > .v-icon - opacity: var(--v-medium-emphasis-opacity) - - .v-field--disabled &, - .v-field--error & - > .v-icon + padding-top: var(--v-input-padding-top, $field-control-padding-top) + + .v-field--center-affix & + align-items: center + padding-top: 0 + + .v-field.v-field--variant-underlined, + .v-field.v-field--variant-plain + .v-field__append-inner, + .v-field__clearable, + .v-field__prepend-inner + align-items: flex-start + padding-top: $field-input-padding-top + padding-bottom: $field-input-padding-bottom + + .v-field__prepend-inner, + .v-field__append-inner + .v-field--focused & opacity: 1 - .v-field--error:not(.v-field--disabled) & + .v-field__prepend-inner, + .v-field__append-inner, + .v-field__clearable > .v-icon - color: rgb(var(--v-theme-error)) + opacity: var(--v-medium-emphasis-opacity) -.v-field__clearable - cursor: pointer - opacity: 0 - overflow: hidden - margin-inline: $field-clearable-margin - transition: $field-transition-timing - transition-property: opacity, transform, width + .v-field--disabled &, + .v-field--error & + > .v-icon + opacity: 1 - .v-field--focused &, - .v-field--persistent-clear & - opacity: 1 + .v-field--error:not(.v-field--disabled) & + > .v-icon + color: rgb(var(--v-theme-error)) - @media (hover: hover) - .v-field:hover & - opacity: 1 - - @media (hover: none) - opacity: 1 - -/* endregion */ -/* region LABEL */ -.v-label.v-field-label - contain: layout paint - display: block - margin-inline-start: var(--v-field-padding-start) - margin-inline-end: var(--v-field-padding-end) - max-width: calc(100% - var(--v-field-padding-start) - var(--v-field-padding-end)) - pointer-events: none - position: absolute - top: var(--v-input-padding-top) - transform-origin: left center - transition: $field-transition-timing - transition-property: opacity, transform - z-index: 1 - - .v-field--variant-underlined &, - .v-field--variant-plain & - top: calc(var(--v-input-padding-top) + var(--v-field-padding-top)) - - .v-field--center-affix & - top: 50% - transform: translateY(-50%) - - .v-field--active & - visibility: hidden - - .v-field--focused &, - .v-field--error & - opacity: 1 - - .v-field--error:not(.v-field--disabled) & - color: rgb(var(--v-theme-error)) - - &--floating - --v-field-label-scale: #{$field-label-floating-scale}em - font-size: var(--v-field-label-scale) - visibility: hidden - max-width: 100% + .v-field__clearable + cursor: pointer + opacity: 0 + overflow: hidden + margin-inline: $field-clearable-margin + transition: $field-transition-timing + transition-property: opacity, transform, width - .v-field--center-affix & - transform: none + .v-field--focused &, + .v-field--persistent-clear & + opacity: 1 - .v-field.v-field--active & - visibility: unset + @media (hover: hover) + .v-field:hover & + opacity: 1 - .v-field--variant-solo &, - .v-field--variant-solo-inverted &, - .v-field--variant-filled &, - .v-field--variant-solo-filled & - $root: & + @media (hover: none) + opacity: 1 - @at-root - @include tools.density('v-input', $input-density) using ($modifier) - @at-root #{selector.nest(&, $root)} - top: 7px + $modifier * .25 + /* endregion */ + /* region LABEL */ + .v-label.v-field-label + contain: layout paint + display: block + margin-inline-start: var(--v-field-padding-start) + margin-inline-end: var(--v-field-padding-end) + max-width: calc(100% - var(--v-field-padding-start) - var(--v-field-padding-end)) + pointer-events: none + position: absolute + top: var(--v-input-padding-top) + transform-origin: left center + transition: $field-transition-timing + transition-property: opacity, transform + z-index: 1 - .v-field--variant-plain &, - .v-field--variant-underlined & - transform: translateY(-16px) - margin: 0 - top: var(--v-input-padding-top) + .v-field--variant-underlined &, + .v-field--variant-plain & + top: calc(var(--v-input-padding-top) + var(--v-field-padding-top)) - .v-field--variant-outlined & + .v-field--center-affix & + top: 50% transform: translateY(-50%) - transform-origin: center - position: static - margin: 0 4px - -/* endregion */ -/* region OUTLINE */ -.v-field__outline - --v-field-border-width: #{$field-border-width} - --v-field-border-opacity: #{$field-outline-opacity} - align-items: stretch - contain: layout - display: flex - height: 100% - left: 0 - pointer-events: none - position: absolute - right: 0 - width: 100% - - @media (hover: hover) - .v-field:hover & - --v-field-border-opacity: var(--v-high-emphasis-opacity) - - .v-field--error:not(.v-field--disabled) & - color: rgb(var(--v-theme-error)) - - .v-field.v-field--focused &, - .v-input.v-input--error & - --v-field-border-opacity: 1 - - .v-field--variant-outlined.v-field--focused & - --v-field-border-width: #{$field-focused-border-width} - - .v-field--variant-filled &, - .v-field--variant-underlined & - &::before - border-color: currentColor - border-style: solid - border-width: 0 0 var(--v-field-border-width) - opacity: var(--v-field-border-opacity) - transition: opacity $field-subtle-transition-timing - @include tools.absolute(true) - - .v-field--variant-filled &, - .v-field--variant-underlined & - &::after - border-color: currentColor - border-style: solid - border-width: 0 0 $field-focused-border-width - transform: scaleX(0) - transition: transform $field-transition-timing - @include tools.absolute(true) - - @at-root #{selector.append('.v-field--focused', &)} - transform: scaleX(1) - - .v-field--variant-outlined & - border-radius: inherit - &__start, - &__notch::before, - &__notch::after, - &__end - border: 0 solid currentColor - opacity: var(--v-field-border-opacity) - transition: opacity $field-subtle-transition-timing + .v-field--active & + visibility: hidden - &__start - flex: 0 0 $field-control-affixed-padding - border-top-width: var(--v-field-border-width) - border-bottom-width: var(--v-field-border-width) - border-inline-start-width: var(--v-field-border-width) - border-start-start-radius: inherit - border-start-end-radius: 0 - border-end-end-radius: 0 - border-end-start-radius: inherit + .v-field--focused &, + .v-field--error & + opacity: 1 - @at-root - #{selector.append('.v-field--rounded', &)}, - #{selector.append('[class^="rounded-"]', &)}, - #{selector.append('[class*=" rounded-"]', &)} - flex-basis: calc(var(--v-input-control-height) / 2 + 2px) - - @at-root #{selector.append('.v-field--reverse', &)} - border-start-start-radius: 0 - border-start-end-radius: inherit - border-end-end-radius: inherit - border-end-start-radius: 0 - border-inline-end-width: var(--v-field-border-width) - border-inline-start-width: 0 + .v-field--error:not(.v-field--disabled) & + color: rgb(var(--v-theme-error)) - &__notch - flex: none - position: relative - max-width: calc(100% - $field-control-affixed-padding) + &--floating + --v-field-label-scale: #{$field-label-floating-scale}em + font-size: var(--v-field-label-scale) + visibility: hidden + max-width: 100% + + .v-field--center-affix & + transform: none + + .v-field.v-field--active & + visibility: unset + + .v-field--variant-solo &, + .v-field--variant-solo-inverted &, + .v-field--variant-filled &, + .v-field--variant-solo-filled & + $root: & + + @at-root + @include tools.density('v-input', $input-density) using ($modifier) + @at-root #{selector.nest(&, $root)} + top: 7px + $modifier * .25 + + .v-field--variant-plain &, + .v-field--variant-underlined & + transform: translateY(-16px) + margin: 0 + top: var(--v-input-padding-top) + + .v-field--variant-outlined & + transform: translateY(-50%) + transform-origin: center + position: static + margin: 0 4px + + /* endregion */ + /* region OUTLINE */ + .v-field__outline + --v-field-border-width: #{$field-border-width} + --v-field-border-opacity: #{$field-outline-opacity} + align-items: stretch + contain: layout + display: flex + height: 100% + left: 0 + pointer-events: none + position: absolute + right: 0 + width: 100% - &::before, - &::after + @media (hover: hover) + .v-field:hover & + --v-field-border-opacity: var(--v-high-emphasis-opacity) + + .v-field--error:not(.v-field--disabled) & + color: rgb(var(--v-theme-error)) + + .v-field.v-field--focused &, + .v-input.v-input--error & + --v-field-border-opacity: 1 + + .v-field--variant-outlined.v-field--focused & + --v-field-border-width: #{$field-focused-border-width} + + .v-field--variant-filled &, + .v-field--variant-underlined & + &::before + border-color: currentColor + border-style: solid + border-width: 0 0 var(--v-field-border-width) opacity: var(--v-field-border-opacity) transition: opacity $field-subtle-transition-timing + @include tools.absolute(true) + .v-field--variant-filled &, + .v-field--variant-underlined & + &::after + border-color: currentColor + border-style: solid + border-width: 0 0 $field-focused-border-width + transform: scaleX(0) + transition: transform $field-transition-timing @include tools.absolute(true) - &::before - border-width: var(--v-field-border-width) 0 0 + @at-root #{selector.append('.v-field--focused', &)} + transform: scaleX(1) - &::after - bottom: 0 - border-width: 0 0 var(--v-field-border-width) + .v-field--variant-outlined & + border-radius: inherit - @at-root #{selector.append('.v-field--active', &)} - &::before - opacity: 0 - - &__end - flex: 1 - border-top-width: var(--v-field-border-width) - border-bottom-width: var(--v-field-border-width) - border-inline-end-width: var(--v-field-border-width) - border-start-start-radius: 0 - border-start-end-radius: inherit - border-end-end-radius: inherit - border-end-start-radius: 0 - - @at-root #{selector.append('.v-field--reverse', &)} + &__start, + &__notch::before, + &__notch::after, + &__end + border: 0 solid currentColor + opacity: var(--v-field-border-opacity) + transition: opacity $field-subtle-transition-timing + + &__start + flex: 0 0 $field-control-affixed-padding + border-top-width: var(--v-field-border-width) + border-bottom-width: var(--v-field-border-width) + border-inline-start-width: var(--v-field-border-width) border-start-start-radius: inherit border-start-end-radius: 0 border-end-end-radius: 0 - border-end-start-radius: inherit - border-inline-end-width: 0 - border-inline-start-width: var(--v-field-border-width) + border-end-start-radius: inherit + + @at-root + #{selector.append('.v-field--rounded', &)}, + #{selector.append('[class^="rounded-"]', &)}, + #{selector.append('[class*=" rounded-"]', &)} + flex-basis: calc(var(--v-input-control-height) / 2 + 2px) + + @at-root #{selector.append('.v-field--reverse', &)} + border-start-start-radius: 0 + border-start-end-radius: inherit + border-end-end-radius: inherit + border-end-start-radius: 0 + border-inline-end-width: var(--v-field-border-width) + border-inline-start-width: 0 + + &__notch + flex: none + position: relative + max-width: calc(100% - $field-control-affixed-padding) + + &::before, + &::after + opacity: var(--v-field-border-opacity) + transition: opacity $field-subtle-transition-timing + + @include tools.absolute(true) -/* endregion */ -/* region LOADER */ -.v-field__loader - top: calc(100% - 2px) - left: 0 - position: absolute - right: 0 - width: 100% - border-top-left-radius: 0 - border-top-right-radius: 0 - border-bottom-left-radius: inherit - border-bottom-right-radius: inherit - overflow: hidden - - .v-field--variant-outlined & - top: calc(100% - 3px) - width: calc(100% - #{$field-border-width} * 2) - left: $field-border-width - -/* endregion */ -/* region OVERLAY */ -.v-field__overlay - border-radius: inherit - pointer-events: none - - @include tools.absolute() - -.v-field--variant-filled - .v-field__overlay - background-color: currentColor - opacity: $field-overlay-filled-opacity - transition: opacity $field-subtle-transition-timing + &::before + border-width: var(--v-field-border-width) 0 0 - &.v-field--has-background .v-field__overlay - opacity: 0 + &::after + bottom: 0 + border-width: 0 0 var(--v-field-border-width) - @media (hover: hover) - &:hover .v-field__overlay - opacity: calc((#{$field-overlay-filled-opacity} + #{map.get(settings.$states, 'hover')}) * var(--v-theme-overlay-multiplier)) + @at-root #{selector.append('.v-field--active', &)} + &::before + opacity: 0 - &.v-field--focused .v-field__overlay - opacity: calc((#{$field-overlay-filled-opacity} + #{map.get(settings.$states, 'focus')}) * var(--v-theme-overlay-multiplier)) + &__end + flex: 1 + border-top-width: var(--v-field-border-width) + border-bottom-width: var(--v-field-border-width) + border-inline-end-width: var(--v-field-border-width) + border-start-start-radius: 0 + border-start-end-radius: inherit + border-end-end-radius: inherit + border-end-start-radius: 0 + + @at-root #{selector.append('.v-field--reverse', &)} + border-start-start-radius: inherit + border-start-end-radius: 0 + border-end-end-radius: 0 + border-end-start-radius: inherit + border-inline-end-width: 0 + border-inline-start-width: var(--v-field-border-width) + + /* endregion */ + /* region LOADER */ + .v-field__loader + top: calc(100% - 2px) + left: 0 + position: absolute + right: 0 + width: 100% + border-top-left-radius: 0 + border-top-right-radius: 0 + border-bottom-left-radius: inherit + border-bottom-right-radius: inherit + overflow: hidden + + .v-field--variant-outlined & + top: calc(100% - 3px) + width: calc(100% - #{$field-border-width} * 2) + left: $field-border-width -.v-field--variant-solo-filled + /* endregion */ + /* region OVERLAY */ .v-field__overlay - background-color: currentColor - opacity: $field-overlay-filled-opacity - transition: opacity $field-subtle-transition-timing + border-radius: inherit + pointer-events: none - @media (hover: hover) - &:hover .v-field__overlay - opacity: calc((#{$field-overlay-filled-opacity} + #{map.get(settings.$states, 'hover')}) * var(--v-theme-overlay-multiplier)) + @include tools.absolute() - &.v-field--focused .v-field__overlay - opacity: calc((#{$field-overlay-filled-opacity} + #{map.get(settings.$states, 'focus')}) * var(--v-theme-overlay-multiplier)) + .v-field--variant-filled + .v-field__overlay + background-color: currentColor + opacity: $field-overlay-filled-opacity + transition: opacity $field-subtle-transition-timing -.v-field--variant-solo-inverted - .v-field__overlay - transition: opacity $field-subtle-transition-timing + &.v-field--has-background .v-field__overlay + opacity: 0 - &.v-field--has-background .v-field__overlay - opacity: 0 + @media (hover: hover) + &:hover .v-field__overlay + opacity: calc((#{$field-overlay-filled-opacity} + #{map.get(settings.$states, 'hover')}) * var(--v-theme-overlay-multiplier)) - @media (hover: hover) - &:hover .v-field__overlay - opacity: calc((#{.04} + #{map.get(settings.$states, 'hover')}) * var(--v-theme-overlay-multiplier)) + &.v-field--focused .v-field__overlay + opacity: calc((#{$field-overlay-filled-opacity} + #{map.get(settings.$states, 'focus')}) * var(--v-theme-overlay-multiplier)) - &.v-field--focused .v-field__overlay - background-color: $field-overlay-focused-background-color - opacity: 1 + .v-field--variant-solo-filled + .v-field__overlay + background-color: currentColor + opacity: $field-overlay-filled-opacity + transition: opacity $field-subtle-transition-timing -/* endregion */ -/* region MODIFIERS */ -.v-field--reverse - .v-field__field, - .v-field__input, - .v-field__outline - flex-direction: row-reverse + @media (hover: hover) + &:hover .v-field__overlay + opacity: calc((#{$field-overlay-filled-opacity} + #{map.get(settings.$states, 'hover')}) * var(--v-theme-overlay-multiplier)) - .v-field__input, input - text-align: end + &.v-field--focused .v-field__overlay + opacity: calc((#{$field-overlay-filled-opacity} + #{map.get(settings.$states, 'focus')}) * var(--v-theme-overlay-multiplier)) -.v-field--variant-filled, -.v-field--variant-underlined - .v-input--disabled & - .v-field__outline::before - border-image: repeating-linear-gradient(to right, $field-disabled-color 0px, $field-disabled-color 2px, transparent 2px, transparent 4px) 1 repeat + .v-field--variant-solo-inverted + .v-field__overlay + transition: opacity $field-subtle-transition-timing -.v-field--loading - .v-field__outline::after, - .v-field__outline::before - opacity: 0 + &.v-field--has-background .v-field__overlay + opacity: 0 + + @media (hover: hover) + &:hover .v-field__overlay + opacity: calc((#{.04} + #{map.get(settings.$states, 'hover')}) * var(--v-theme-overlay-multiplier)) + + &.v-field--focused .v-field__overlay + background-color: $field-overlay-focused-background-color + opacity: 1 + + /* endregion */ + /* region MODIFIERS */ + .v-field--reverse + .v-field__field, + .v-field__input, + .v-field__outline + flex-direction: row-reverse + + .v-field__input, input + text-align: end + + .v-field--variant-filled, + .v-field--variant-underlined + .v-input--disabled & + .v-field__outline::before + border-image: repeating-linear-gradient(to right, $field-disabled-color 0px, $field-disabled-color 2px, transparent 2px, transparent 4px) 1 repeat + + .v-field--loading + .v-field__outline::after, + .v-field__outline::before + opacity: 0 -/* endregion */ + /* endregion */ diff --git a/packages/vuetify/src/components/VFileInput/VFileInput.sass b/packages/vuetify/src/components/VFileInput/VFileInput.sass index 2ed80a2ee30..888e3e3e2b6 100644 --- a/packages/vuetify/src/components/VFileInput/VFileInput.sass +++ b/packages/vuetify/src/components/VFileInput/VFileInput.sass @@ -3,38 +3,37 @@ @use 'sass:math' @use 'sass:selector' -// Block -.v-file-input +@include tools.layer('components') + .v-file-input + &--hide.v-input + .v-field, + .v-input__control, + .v-input__details + display: none - &--hide.v-input - .v-field, - .v-input__control, - .v-input__details - display: none - - .v-input__prepend - grid-area: control - margin: 0 auto + .v-input__prepend + grid-area: control + margin: 0 auto - &--chips.v-input--density-compact - .v-field--variant-solo, - .v-field--variant-solo-inverted, - .v-field--variant-filled, - .v-field--variant-solo-filled - .v-label.v-field-label - &--floating - top: 0px + &--chips.v-input--density-compact + .v-field--variant-solo, + .v-field--variant-solo-inverted, + .v-field--variant-filled, + .v-field--variant-solo-filled + .v-label.v-field-label + &--floating + top: 0px - input[type="file"] - height: 100% - left: 0 - opacity: 0 - position: absolute - top: 0 - width: 100% - z-index: 1 + input[type="file"] + height: 100% + left: 0 + opacity: 0 + position: absolute + top: 0 + width: 100% + z-index: 1 - .v-input__details - padding-inline: $file-input-details-padding-inline - @at-root #{selector.append('.v-input--plain-underlined', &)} - padding-inline: 0 + .v-input__details + padding-inline: $file-input-details-padding-inline + @at-root #{selector.append('.v-input--plain-underlined', &)} + padding-inline: 0 diff --git a/packages/vuetify/src/components/VFooter/VFooter.sass b/packages/vuetify/src/components/VFooter/VFooter.sass index 3c6450d38a2..e6c2d16bf31 100644 --- a/packages/vuetify/src/components/VFooter/VFooter.sass +++ b/packages/vuetify/src/components/VFooter/VFooter.sass @@ -1,21 +1,22 @@ @use '../../styles/tools' @use './variables' as * -.v-footer - align-items: center - display: flex - flex: $footer-flex - padding: $footer-padding - position: relative - transition: $footer-transition - transition-property: height, width, transform, max-width, left, right, top, bottom +@include tools.layer('components') + .v-footer + align-items: center + display: flex + flex: $footer-flex + padding: $footer-padding + position: relative + transition: $footer-transition + transition-property: height, width, transform, max-width, left, right, top, bottom - // missing from variables - @include tools.border($footer-border...) - @include tools.elevation($footer-elevation) - @include tools.position($footer-positions) - @include tools.rounded($footer-border-radius) - @include tools.theme($footer-theme...) + // missing from variables + @include tools.border($footer-border...) + @include tools.elevation($footer-elevation) + @include tools.position($footer-positions) + @include tools.rounded($footer-border-radius) + @include tools.theme($footer-theme...) - &--rounded - @include tools.rounded($footer-rounded-border-radius) + &--rounded + @include tools.rounded($footer-rounded-border-radius) diff --git a/packages/vuetify/src/components/VGrid/VGrid.sass b/packages/vuetify/src/components/VGrid/VGrid.sass index ed8f2da1687..90e338e29cf 100644 --- a/packages/vuetify/src/components/VGrid/VGrid.sass +++ b/packages/vuetify/src/components/VGrid/VGrid.sass @@ -1,49 +1,51 @@ @use '../../styles/settings' +@use '../../styles/tools' @use './mixins' as * -.v-container - @include make-container - @include make-container-max-widths +@include tools.layer('components') + .v-container + @include make-container + @include make-container-max-widths - &--fluid - max-width: 100% + &--fluid + max-width: 100% - &.fill-height - align-items: center - display: flex - flex-wrap: wrap + &.fill-height + align-items: center + display: flex + flex-wrap: wrap -// Row -// -// Rows contain and clear the floats of your columns. -.v-row - +make-row + // Row + // + // Rows contain and clear the floats of your columns. + .v-row + +make-row - & + .v-row - margin-top: settings.$grid-gutter * .5 + & + .v-row + margin-top: settings.$grid-gutter * .5 + + &--dense + margin-top: settings.$form-grid-gutter * .5 &--dense - margin-top: settings.$form-grid-gutter * .5 - - &--dense - margin: -(settings.$form-grid-gutter) * .5 - - > .v-col, - > [class*="v-col-"] - padding: settings.$form-grid-gutter * .5 - - // Remove the negative margin from default .v-row, then the horizontal padding - // from all immediate children columns (to prevent runaway style inheritance). - &.v-row--no-gutters - margin: 0 - > .v-col, - > [class*="v-col-"] - padding: 0 - -.v-spacer - flex-grow: 1 - -// Columns -// -// Common styles for small and large grid columns -@include make-grid-columns + margin: -(settings.$form-grid-gutter) * .5 + + > .v-col, + > [class*="v-col-"] + padding: settings.$form-grid-gutter * .5 + + // Remove the negative margin from default .v-row, then the horizontal padding + // from all immediate children columns (to prevent runaway style inheritance). + &.v-row--no-gutters + margin: 0 + > .v-col, + > [class*="v-col-"] + padding: 0 + + .v-spacer + flex-grow: 1 + + // Columns + // + // Common styles for small and large grid columns + @include make-grid-columns diff --git a/packages/vuetify/src/components/VIcon/VIcon.sass b/packages/vuetify/src/components/VIcon/VIcon.sass index 1585cf46fcf..1914a30202b 100644 --- a/packages/vuetify/src/components/VIcon/VIcon.sass +++ b/packages/vuetify/src/components/VIcon/VIcon.sass @@ -1,42 +1,44 @@ @use 'sass:map' @use '../../styles/settings' +@use '../../styles/tools' @use './variables' as * -.v-icon - --v-icon-size-multiplier: 1 - align-items: center - display: inline-flex - font-feature-settings: 'liga' - height: $icon-size - justify-content: center - letter-spacing: $icon-letter-spacing - line-height: $icon-line-height - position: relative - text-indent: $icon-text-indent - text-align: center - user-select: none - vertical-align: $icon-vertical-align - width: $icon-size - min-width: $icon-size +@include tools.layer('components') + .v-icon + --v-icon-size-multiplier: 1 + align-items: center + display: inline-flex + font-feature-settings: 'liga' + height: $icon-size + justify-content: center + letter-spacing: $icon-letter-spacing + line-height: $icon-line-height + position: relative + text-indent: $icon-text-indent + text-align: center + user-select: none + vertical-align: $icon-vertical-align + width: $icon-size + min-width: $icon-size - &--clickable - cursor: pointer + &--clickable + cursor: pointer - &--disabled - pointer-events: none - opacity: $icon-disabled-opacity + &--disabled + pointer-events: none + opacity: $icon-disabled-opacity - @each $name in settings.$sizes - &--size-#{$name} - font-size: calc(var(--v-icon-size-multiplier) * #{map.get($icon-sizes, $name)}) + @each $name in settings.$sizes + &--size-#{$name} + font-size: calc(var(--v-icon-size-multiplier) * #{map.get($icon-sizes, $name)}) -.v-icon__svg - fill: currentColor - width: 100% - height: 100% + .v-icon__svg + fill: currentColor + width: 100% + height: 100% -.v-icon--start - margin-inline-end: $icon-margin-start + .v-icon--start + margin-inline-end: $icon-margin-start -.v-icon--end - margin-inline-start: $icon-margin-end + .v-icon--end + margin-inline-start: $icon-margin-end diff --git a/packages/vuetify/src/components/VImg/VImg.sass b/packages/vuetify/src/components/VImg/VImg.sass index bc96991c7fa..00fa63324e7 100644 --- a/packages/vuetify/src/components/VImg/VImg.sass +++ b/packages/vuetify/src/components/VImg/VImg.sass @@ -1,34 +1,35 @@ @use '../../styles/tools' @use './variables' as * -.v-img - --v-theme-overlay-multiplier: 3 - z-index: 0 +@include tools.layer('components') + .v-img + --v-theme-overlay-multiplier: 3 + z-index: 0 - &--booting .v-responsive__sizer - transition: none + &--booting .v-responsive__sizer + transition: none - &--rounded - @include tools.rounded($img-rounded-border-radius) + &--rounded + @include tools.rounded($img-rounded-border-radius) -.v-img__img, -.v-img__picture, -.v-img__gradient, -.v-img__placeholder, -.v-img__error - z-index: -1 + .v-img__img, + .v-img__picture, + .v-img__gradient, + .v-img__placeholder, + .v-img__error + z-index: -1 - @include tools.absolute() + @include tools.absolute() -.v-img__img - &--preload - filter: $img-preload-filter + .v-img__img + &--preload + filter: $img-preload-filter - &--contain - object-fit: contain + &--contain + object-fit: contain - &--cover - object-fit: cover + &--cover + object-fit: cover -.v-img__gradient - background-repeat: no-repeat + .v-img__gradient + background-repeat: no-repeat diff --git a/packages/vuetify/src/components/VInfiniteScroll/VInfiniteScroll.sass b/packages/vuetify/src/components/VInfiniteScroll/VInfiniteScroll.sass index dcf3865526f..01984da82b8 100644 --- a/packages/vuetify/src/components/VInfiniteScroll/VInfiniteScroll.sass +++ b/packages/vuetify/src/components/VInfiniteScroll/VInfiniteScroll.sass @@ -1,25 +1,27 @@ +@use '../../styles/tools' @use './variables' as * -.v-infinite-scroll--horizontal - display: flex - flex-direction: row - overflow-x: auto +@include tools.layer('components') + .v-infinite-scroll--horizontal + display: flex + flex-direction: row + overflow-x: auto - .v-infinite-scroll-intersect - height: 100% - width: 1px + .v-infinite-scroll-intersect + height: 100% + width: 1px -.v-infinite-scroll--vertical - display: flex - flex-direction: column - overflow-y: auto + .v-infinite-scroll--vertical + display: flex + flex-direction: column + overflow-y: auto - .v-infinite-scroll-intersect - height: 1px - width: 100% + .v-infinite-scroll-intersect + height: 1px + width: 100% -.v-infinite-scroll__side - align-items: center - display: flex - justify-content: center - padding: $infinite-scroll-side-padding + .v-infinite-scroll__side + align-items: center + display: flex + justify-content: center + padding: $infinite-scroll-side-padding diff --git a/packages/vuetify/src/components/VInput/VInput.sass b/packages/vuetify/src/components/VInput/VInput.sass index 1dfe0b40b67..11ded05238b 100644 --- a/packages/vuetify/src/components/VInput/VInput.sass +++ b/packages/vuetify/src/components/VInput/VInput.sass @@ -3,113 +3,114 @@ @use '../../styles/tools' @use './variables' as * -.v-input - display: grid - flex: $input-flex - font-size: $input-font-size - font-weight: $input-font-weight - line-height: $input-line-height - - &--disabled - pointer-events: none - - @at-root - @include tools.density('v-input', $input-density) using ($modifier) - --v-input-control-height: #{$input-control-height + $modifier} - --v-input-padding-top: #{16px + $modifier * .5} - -.v-input--vertical - grid-template-areas: "append" "control" "prepend" - grid-template-rows: max-content auto max-content - grid-template-columns: min-content +@include tools.layer('components') + .v-input + display: grid + flex: $input-flex + font-size: $input-font-size + font-weight: $input-font-weight + line-height: $input-line-height + + &--disabled + pointer-events: none + + @at-root + @include tools.density('v-input', $input-density) using ($modifier) + --v-input-control-height: #{$input-control-height + $modifier} + --v-input-padding-top: #{16px + $modifier * .5} + + .v-input--vertical + grid-template-areas: "append" "control" "prepend" + grid-template-rows: max-content auto max-content + grid-template-columns: min-content + + .v-input__prepend + margin-block-start: $input-affix-margin-inside - .v-input__prepend - margin-block-start: $input-affix-margin-inside + .v-input__append + margin-block-end: $input-affix-margin-inside + + .v-input--horizontal + grid-template-areas: "prepend control append" "a messages b" + grid-template-columns: max-content minmax(0, 1fr) max-content + grid-template-rows: auto auto + .v-input__prepend + margin-inline-end: $input-affix-margin-inside + + .v-input__append + margin-inline-start: $input-affix-margin-inside + + .v-input__details + align-items: flex-end + display: flex + font-size: $input-details-font-size + font-weight: $input-details-font-weight + grid-area: messages + letter-spacing: $input-details-letter-spacing + line-height: $input-details-line-height + min-height: $input-details-min-height + padding-top: $input-details-padding-above + overflow: hidden + justify-content: space-between + + .v-input__details, + .v-input__prepend, .v-input__append - margin-block-end: $input-affix-margin-inside + > .v-icon + opacity: var(--v-medium-emphasis-opacity) -.v-input--horizontal - grid-template-areas: "prepend control append" "a messages b" - grid-template-columns: max-content minmax(0, 1fr) max-content - grid-template-rows: auto auto + .v-input--disabled &, + .v-input--error & + > .v-icon, + .v-messages + opacity: 1 - .v-input__prepend - margin-inline-end: $input-affix-margin-inside + .v-input--disabled & + opacity: var(--v-disabled-opacity) + .v-input--error:not(.v-input--disabled) & + > .v-icon, + .v-messages + color: rgb(var(--v-theme-error)) + + .v-input__prepend, .v-input__append - margin-inline-start: $input-affix-margin-inside - -.v-input__details - align-items: flex-end - display: flex - font-size: $input-details-font-size - font-weight: $input-details-font-weight - grid-area: messages - letter-spacing: $input-details-letter-spacing - line-height: $input-details-line-height - min-height: $input-details-min-height - padding-top: $input-details-padding-above - overflow: hidden - justify-content: space-between - -.v-input__details, -.v-input__prepend, -.v-input__append - > .v-icon - opacity: var(--v-medium-emphasis-opacity) - - .v-input--disabled &, - .v-input--error & - > .v-icon, - .v-messages - opacity: 1 - - .v-input--disabled & - opacity: var(--v-disabled-opacity) - - .v-input--error:not(.v-input--disabled) & - > .v-icon, - .v-messages - color: rgb(var(--v-theme-error)) - -.v-input__prepend, -.v-input__append - display: flex - align-items: flex-start - padding-top: var(--v-input-padding-top) - - .v-input--center-affix & - align-items: center - padding-top: 0 - -.v-input__prepend - grid-area: prepend - -.v-input__append - grid-area: append - -.v-input__control - display: flex - grid-area: control - -.v-input - &--hide-spin-buttons - input::-webkit-outer-spin-button, - input::-webkit-inner-spin-button - -webkit-appearance: none - margin: 0 - input[type=number] - -moz-appearance: textfield - - &--plain-underlined - - .v-input__prepend, - .v-input__append - $this: & - align-items: flex-start + display: flex + align-items: flex-start + padding-top: var(--v-input-padding-top) + + .v-input--center-affix & + align-items: center + padding-top: 0 - @at-root - @include tools.density('v-input', $input-density) using ($modifier) - @at-root #{selector.append(&, $this)} - padding-top: calc(var(--v-input-padding-top) + #{math.max(0px, 4px + $modifier * .25)}) + .v-input__prepend + grid-area: prepend + + .v-input__append + grid-area: append + + .v-input__control + display: flex + grid-area: control + + .v-input + &--hide-spin-buttons + input::-webkit-outer-spin-button, + input::-webkit-inner-spin-button + -webkit-appearance: none + margin: 0 + input[type=number] + -moz-appearance: textfield + + &--plain-underlined + + .v-input__prepend, + .v-input__append + $this: & + align-items: flex-start + + @at-root + @include tools.density('v-input', $input-density) using ($modifier) + @at-root #{selector.append(&, $this)} + padding-top: calc(var(--v-input-padding-top) + #{math.max(0px, 4px + $modifier * .25)}) diff --git a/packages/vuetify/src/components/VItemGroup/VItemGroup.sass b/packages/vuetify/src/components/VItemGroup/VItemGroup.sass index dc81487dc49..31bf5fbccb3 100644 --- a/packages/vuetify/src/components/VItemGroup/VItemGroup.sass +++ b/packages/vuetify/src/components/VItemGroup/VItemGroup.sass @@ -1,7 +1,9 @@ +@use '../../styles/tools' @use './variables' as * -.v-item-group - flex: 0 1 auto - max-width: 100% - position: relative - transition: $item-group-transition +@include tools.layer('components') + .v-item-group + flex: 0 1 auto + max-width: 100% + position: relative + transition: $item-group-transition diff --git a/packages/vuetify/src/components/VKbd/VKbd.sass b/packages/vuetify/src/components/VKbd/VKbd.sass index 3b6d0d10485..7dce6b32bde 100644 --- a/packages/vuetify/src/components/VKbd/VKbd.sass +++ b/packages/vuetify/src/components/VKbd/VKbd.sass @@ -1,13 +1,14 @@ @use '../../styles/tools' @use './variables' as * -.v-kbd - background: rgb(var(--v-theme-kbd)) - color: rgb(var(--v-theme-on-kbd)) - border-radius: $kbd-border-radius - display: $kbd-display - font-size: $kbd-font-size - font-weight: $kbd-font-weight - padding: $kbd-padding +@include tools.layer('components') + .v-kbd + background: rgb(var(--v-theme-kbd)) + color: rgb(var(--v-theme-on-kbd)) + border-radius: $kbd-border-radius + display: $kbd-display + font-size: $kbd-font-size + font-weight: $kbd-font-weight + padding: $kbd-padding - @include tools.elevation($kbd-elevation) + @include tools.elevation($kbd-elevation) diff --git a/packages/vuetify/src/components/VLabel/VLabel.sass b/packages/vuetify/src/components/VLabel/VLabel.sass index 209004bde2a..2af93b4965a 100644 --- a/packages/vuetify/src/components/VLabel/VLabel.sass +++ b/packages/vuetify/src/components/VLabel/VLabel.sass @@ -2,17 +2,18 @@ @use '../../styles/tools' @use './variables' as * -.v-label - align-items: center - color: $label-color - display: $label-display - font-size: $label-font-size - letter-spacing: $label-letter-spacing - min-width: 0 - opacity: $label-opacity - overflow: hidden - text-overflow: ellipsis - white-space: nowrap +@include tools.layer('components') + .v-label + align-items: center + color: $label-color + display: $label-display + font-size: $label-font-size + letter-spacing: $label-letter-spacing + min-width: 0 + opacity: $label-opacity + overflow: hidden + text-overflow: ellipsis + white-space: nowrap -.v-label--clickable - cursor: pointer + .v-label--clickable + cursor: pointer diff --git a/packages/vuetify/src/components/VLayout/VLayout.sass b/packages/vuetify/src/components/VLayout/VLayout.sass index 9bedd5568c4..82a9260b404 100644 --- a/packages/vuetify/src/components/VLayout/VLayout.sass +++ b/packages/vuetify/src/components/VLayout/VLayout.sass @@ -1,8 +1,11 @@ -.v-layout - --v-scrollbar-offset: 0px - display: flex - flex: 1 1 auto +@use '../../styles/tools' - &--full-height - --v-scrollbar-offset: inherit - height: 100% +@include tools.layer('components') + .v-layout + --v-scrollbar-offset: 0px + display: flex + flex: 1 1 auto + + &--full-height + --v-scrollbar-offset: inherit + height: 100% diff --git a/packages/vuetify/src/components/VLayout/VLayoutItem.sass b/packages/vuetify/src/components/VLayout/VLayoutItem.sass index 55255c52f46..280058c42c6 100644 --- a/packages/vuetify/src/components/VLayout/VLayoutItem.sass +++ b/packages/vuetify/src/components/VLayout/VLayoutItem.sass @@ -1,8 +1,10 @@ @use '../../styles/settings' +@use '../../styles/tools' -.v-layout-item - position: absolute - transition: 0.2s settings.$standard-easing +@include tools.layer('components') + .v-layout-item + position: absolute + transition: 0.2s settings.$standard-easing -.v-layout-item--absolute - position: absolute + .v-layout-item--absolute + position: absolute diff --git a/packages/vuetify/src/components/VList/VList.sass b/packages/vuetify/src/components/VList/VList.sass index b9c9500b87f..6bec2f9f528 100644 --- a/packages/vuetify/src/components/VList/VList.sass +++ b/packages/vuetify/src/components/VList/VList.sass @@ -2,89 +2,90 @@ @use '../../styles/tools' @use './variables' as * -.v-list - overflow: auto - padding: $list-padding - position: relative - outline: none - - @include tools.border($list-border...) - @include tools.elevation($list-elevation) - @include tools.rounded($list-border-radius) - @include tools.theme($list-theme...) - - &--disabled - pointer-events: none - user-select: none - - &--nav - padding-inline: $list-nav-padding - - &--rounded - @include tools.rounded($list-rounded-border-radius) - - &--subheader - padding-top: $list-subheader-padding-top - -.v-list-img - border-radius: inherit - display: flex - height: 100% - left: 0 - overflow: hidden - position: absolute - top: 0 - width: 100% - z-index: -1 - -.v-list-subheader - $root: & - - align-items: center - background: inherit - color: $list-subheader-color - display: flex - font-size: $list-subheader-font-size - font-weight: $list-subheader-font-weight - line-height: $list-subheader-line-height - padding-inline-end: $list-subheader-padding-end - min-height: $list-subheader-min-height - transition: $list-subheader-transition - - &__text +@include tools.layer('components') + .v-list + overflow: auto + padding: $list-padding + position: relative + outline: none + + @include tools.border($list-border...) + @include tools.elevation($list-elevation) + @include tools.rounded($list-border-radius) + @include tools.theme($list-theme...) + + &--disabled + pointer-events: none + user-select: none + + &--nav + padding-inline: $list-nav-padding + + &--rounded + @include tools.rounded($list-rounded-border-radius) + + &--subheader + padding-top: $list-subheader-padding-top + + .v-list-img + border-radius: inherit + display: flex + height: 100% + left: 0 overflow: hidden - text-overflow: ellipsis - white-space: nowrap - - @at-root - @include tools.density('v-list', $list-density) using ($modifier) - $base-padding: list.nth($list-item-padding, 2) - - #{$root} - min-height: $list-subheader-min-height + ($modifier * $list-subheader-min-height-multiplier) - padding-inline-start: calc(#{$base-padding} + var(--indent-padding)) !important - - &--inset - --indent-padding: #{$list-subheader-inset-padding-start} + position: absolute + top: 0 + width: 100% + z-index: -1 - .v-list--nav & - font-size: $list-nav-subheader-font-size + .v-list-subheader + $root: & - &--sticky + align-items: center background: inherit + color: $list-subheader-color + display: flex + font-size: $list-subheader-font-size + font-weight: $list-subheader-font-weight + line-height: $list-subheader-line-height + padding-inline-end: $list-subheader-padding-end + min-height: $list-subheader-min-height + transition: $list-subheader-transition + + &__text + overflow: hidden + text-overflow: ellipsis + white-space: nowrap + + @at-root + @include tools.density('v-list', $list-density) using ($modifier) + $base-padding: list.nth($list-item-padding, 2) + + #{$root} + min-height: $list-subheader-min-height + ($modifier * $list-subheader-min-height-multiplier) + padding-inline-start: calc(#{$base-padding} + var(--indent-padding)) !important + + &--inset + --indent-padding: #{$list-subheader-inset-padding-start} + + .v-list--nav & + font-size: $list-nav-subheader-font-size + + &--sticky + background: inherit + left: 0 + position: sticky + top: 0 + z-index: 1 + + .v-list__overlay + background-color: currentColor + border-radius: inherit + bottom: 0 left: 0 - position: sticky + opacity: 0 + pointer-events: none + position: absolute + right: 0 top: 0 - z-index: 1 - -.v-list__overlay - background-color: currentColor - border-radius: inherit - bottom: 0 - left: 0 - opacity: 0 - pointer-events: none - position: absolute - right: 0 - top: 0 - transition: opacity 0.2s ease-in-out + transition: opacity 0.2s ease-in-out diff --git a/packages/vuetify/src/components/VList/VListItem.sass b/packages/vuetify/src/components/VList/VListItem.sass index 416befa551e..cfa039d1685 100644 --- a/packages/vuetify/src/components/VList/VListItem.sass +++ b/packages/vuetify/src/components/VList/VListItem.sass @@ -5,324 +5,325 @@ @use '../../styles/tools' @use './variables' as * -.v-list-item - align-items: center - display: grid - flex: none - grid-template-areas: "prepend content append" - grid-template-columns: max-content 1fr auto - outline: none - max-width: 100% - padding: $list-item-padding - position: relative - text-decoration: none - - @include tools.border($list-item-border...) - @include tools.states('.v-list-item__overlay') - @include tools.rounded($list-item-border-radius) - @include tools.variant($list-item-variants...) - - @supports selector(:focus-visible) - &::after - @include tools.absolute(true) - pointer-events: none - border: 2px solid currentColor - border-radius: 4px - opacity: 0 - transition: opacity .2s ease-in-out - - &:focus-visible::after - opacity: calc(.15 * var(--v-theme-overlay-multiplier)) - - &__prepend, - &__append - > .v-badge .v-icon, - > .v-icon - opacity: #{$list-item-icon-opacity} - - &--active - .v-list-item__prepend, - .v-list-item__append +@include tools.layer('components') + .v-list-item + align-items: center + display: grid + flex: none + grid-template-areas: "prepend content append" + grid-template-columns: max-content 1fr auto + outline: none + max-width: 100% + padding: $list-item-padding + position: relative + text-decoration: none + + @include tools.border($list-item-border...) + @include tools.states('.v-list-item__overlay') + @include tools.rounded($list-item-border-radius) + @include tools.variant($list-item-variants...) + + @supports selector(:focus-visible) + &::after + @include tools.absolute(true) + pointer-events: none + border: 2px solid currentColor + border-radius: 4px + opacity: 0 + transition: opacity .2s ease-in-out + + &:focus-visible::after + opacity: calc(.15 * var(--v-theme-overlay-multiplier)) + + &__prepend, + &__append > .v-badge .v-icon, > .v-icon - opacity: #{$list-item-icon-active-opacity} - - &:not(.v-list-item--link) - .v-list-item__overlay - opacity: calc(#{map.get(settings.$states, 'activated')} * var(--v-theme-overlay-multiplier)) + opacity: #{$list-item-icon-opacity} - &--rounded - @include tools.rounded($list-item-rounded-border-radius) - - &--disabled - pointer-events: none - user-select: none - opacity: $list-disabled-opacity + &--active + .v-list-item__prepend, + .v-list-item__append + > .v-badge .v-icon, + > .v-icon + opacity: #{$list-item-icon-active-opacity} - &--link - cursor: pointer + &:not(.v-list-item--link) + .v-list-item__overlay + opacity: calc(#{map.get(settings.$states, 'activated')} * var(--v-theme-overlay-multiplier)) - .v-navigation-drawer--rail:not(.v-navigation-drawer--expand-on-hover) &, - .v-navigation-drawer--rail.v-navigation-drawer--expand-on-hover:not(.v-navigation-drawer--is-hovering) & - .v-avatar - --v-avatar-height: 24px + &--rounded + @include tools.rounded($list-item-rounded-border-radius) -.v-list-item__prepend - align-items: center - align-self: center - display: flex - grid-area: prepend + &--disabled + pointer-events: none + user-select: none + opacity: $list-disabled-opacity - > .v-badge, - > .v-icon, - > .v-tooltip - ~ .v-list-item__spacer - width: $list-item-icon-margin-start + &--link + cursor: pointer - > .v-avatar ~ .v-list-item__spacer - width: $list-item-avatar-margin-start + .v-navigation-drawer--rail:not(.v-navigation-drawer--expand-on-hover) &, + .v-navigation-drawer--rail.v-navigation-drawer--expand-on-hover:not(.v-navigation-drawer--is-hovering) & + .v-avatar + --v-avatar-height: 24px - > .v-list-item-action ~ .v-list-item__spacer - width: $list-item-action-spacer-width + .v-list-item__prepend + align-items: center + align-self: center + display: flex + grid-area: prepend - .v-list-item--slim & > .v-badge, > .v-icon, > .v-tooltip ~ .v-list-item__spacer - width: $list-item-slim-spacer-width + width: $list-item-icon-margin-start > .v-avatar ~ .v-list-item__spacer - width: $list-item-slim-avatar-spacer-width + width: $list-item-avatar-margin-start > .v-list-item-action ~ .v-list-item__spacer - width: $list-item-slim-action-spacer-width + width: $list-item-action-spacer-width - .v-list-item--three-line & - align-self: start + .v-list-item--slim & + > .v-badge, + > .v-icon, + > .v-tooltip + ~ .v-list-item__spacer + width: $list-item-slim-spacer-width -.v-list-item__append - align-self: center - display: flex - align-items: center - grid-area: append + > .v-avatar ~ .v-list-item__spacer + width: $list-item-slim-avatar-spacer-width - .v-list-item__spacer - order: -1 - transition: 150ms width settings.$standard-easing + > .v-list-item-action ~ .v-list-item__spacer + width: $list-item-slim-action-spacer-width - > .v-badge, - > .v-icon, - > .v-tooltip - ~ .v-list-item__spacer - width: $list-item-icon-margin-end + .v-list-item--three-line & + align-self: start - > .v-avatar ~ .v-list-item__spacer - width: $list-item-avatar-margin-end + .v-list-item__append + align-self: center + display: flex + align-items: center + grid-area: append - > .v-list-item-action ~ .v-list-item__spacer - width: $list-item-action-spacer-width + .v-list-item__spacer + order: -1 + transition: 150ms width settings.$standard-easing - .v-list-item--slim & > .v-badge, > .v-icon, > .v-tooltip ~ .v-list-item__spacer - width: $list-item-slim-spacer-width + width: $list-item-icon-margin-end > .v-avatar ~ .v-list-item__spacer - width: $list-item-slim-avatar-spacer-width + width: $list-item-avatar-margin-end > .v-list-item-action ~ .v-list-item__spacer - width: $list-item-slim-action-spacer-width - - .v-list-item--three-line & - align-self: start - -.v-list-item__content - align-self: center - grid-area: content - overflow: hidden - -.v-list-item-action - align-self: center - display: flex - align-items: center - flex: none - transition: inherit - transition-property: height, width - - &--start - margin-inline-end: $list-item-action-margin-end - margin-inline-start: -$list-item-action-margin-start - - &--end - margin-inline-start: $list-item-action-margin-start - margin-inline-end: -$list-item-action-margin-end - -.v-list-item-media - margin-top: $list-item-media-margin-top - margin-bottom: $list-item-media-margin-bottom - - &--start - margin-inline-end: $list-item-media-margin-end - - &--end - margin-inline-start: $list-item-media-margin-start - - .v-list-item--two-line & - margin-top: $list-item-media-two-line-margin-top - margin-bottom: $list-item-media-two-line-margin-bottom - - .v-list-item--three-line & - margin-top: $list-item-media-three-line-margin-top - margin-bottom: $list-item-media-three-line-margin-bottom - -.v-list-item-subtitle - -webkit-box-orient: vertical - display: -webkit-box - opacity: $list-item-subtitle-opacity - overflow: hidden - padding: $list-item-subtitle-padding - text-overflow: ellipsis - overflow-wrap: $list-item-subtitle-overflow-wrap - word-break: $list-item-subtitle-word-break - - .v-list-item--one-line & - -webkit-line-clamp: 1 - - .v-list-item--two-line & - -webkit-line-clamp: 2 + width: $list-item-action-spacer-width + + .v-list-item--slim & + > .v-badge, + > .v-icon, + > .v-tooltip + ~ .v-list-item__spacer + width: $list-item-slim-spacer-width + + > .v-avatar ~ .v-list-item__spacer + width: $list-item-slim-avatar-spacer-width + + > .v-list-item-action ~ .v-list-item__spacer + width: $list-item-slim-action-spacer-width + + .v-list-item--three-line & + align-self: start + + .v-list-item__content + align-self: center + grid-area: content + overflow: hidden + + .v-list-item-action + align-self: center + display: flex + align-items: center + flex: none + transition: inherit + transition-property: height, width + + &--start + margin-inline-end: $list-item-action-margin-end + margin-inline-start: -$list-item-action-margin-start + + &--end + margin-inline-start: $list-item-action-margin-start + margin-inline-end: -$list-item-action-margin-end + + .v-list-item-media + margin-top: $list-item-media-margin-top + margin-bottom: $list-item-media-margin-bottom + + &--start + margin-inline-end: $list-item-media-margin-end + + &--end + margin-inline-start: $list-item-media-margin-start + + .v-list-item--two-line & + margin-top: $list-item-media-two-line-margin-top + margin-bottom: $list-item-media-two-line-margin-bottom + + .v-list-item--three-line & + margin-top: $list-item-media-three-line-margin-top + margin-bottom: $list-item-media-three-line-margin-bottom + + .v-list-item-subtitle + -webkit-box-orient: vertical + display: -webkit-box + opacity: $list-item-subtitle-opacity + overflow: hidden + padding: $list-item-subtitle-padding + text-overflow: ellipsis + overflow-wrap: $list-item-subtitle-overflow-wrap + word-break: $list-item-subtitle-word-break + + .v-list-item--one-line & + -webkit-line-clamp: 1 + + .v-list-item--two-line & + -webkit-line-clamp: 2 + + .v-list-item--three-line & + -webkit-line-clamp: 3 + + @include tools.typography($list-item-subtitle-typography...) + + .v-list-item--nav & + @include tools.typography($list-item-nav-subtitle-typography...) + + .v-list-item-title + hyphens: $list-item-title-hyphens + overflow-wrap: $list-item-title-overflow-wrap + overflow: hidden + padding: $list-item-title-padding + white-space: nowrap + text-overflow: ellipsis + word-break: $list-item-title-word-break + word-wrap: $list-item-title-word-wrap + + @include tools.typography($list-item-title-typography...) + + .v-list-item--nav & + @include tools.typography($list-item-nav-title-typography...) + + .v-list-item + @at-root + @include tools.density('v-list-item', $list-density) using ($modifier) + min-height: $list-item-min-height + $modifier - .v-list-item--three-line & - -webkit-line-clamp: 3 - - @include tools.typography($list-item-subtitle-typography...) - - .v-list-item--nav & - @include tools.typography($list-item-nav-subtitle-typography...) - -.v-list-item-title - hyphens: $list-item-title-hyphens - overflow-wrap: $list-item-title-overflow-wrap - overflow: hidden - padding: $list-item-title-padding - white-space: nowrap - text-overflow: ellipsis - word-break: $list-item-title-word-break - word-wrap: $list-item-title-word-wrap - - @include tools.typography($list-item-title-typography...) - - .v-list-item--nav & - @include tools.typography($list-item-nav-title-typography...) - -.v-list-item - @at-root - @include tools.density('v-list-item', $list-density) using ($modifier) - min-height: $list-item-min-height + $modifier - - &.v-list-item--one-line - $one-line-padding: (list.nth($list-item-padding, 1) + $modifier) + &.v-list-item--one-line + $one-line-padding: (list.nth($list-item-padding, 1) + $modifier) - min-height: $list-item-one-line-min-height + $modifier + min-height: $list-item-one-line-min-height + $modifier - @if ($one-line-padding > 0) - padding-top: $one-line-padding - padding-bottom: $one-line-padding + @if ($one-line-padding > 0) + padding-top: $one-line-padding + padding-bottom: $one-line-padding - &.v-list-item--two-line - $two-line-padding: (list.nth($list-item-two-line-padding, 1) + $modifier) + &.v-list-item--two-line + $two-line-padding: (list.nth($list-item-two-line-padding, 1) + $modifier) - min-height: $list-item-two-line-min-height + $modifier + min-height: $list-item-two-line-min-height + $modifier - @if ($two-line-padding > 0) - padding-top: $two-line-padding - padding-bottom: $two-line-padding + @if ($two-line-padding > 0) + padding-top: $two-line-padding + padding-bottom: $two-line-padding - &.v-list-item--three-line - $three-line-padding: (list.nth($list-item-three-line-padding, 1) + $modifier) + &.v-list-item--three-line + $three-line-padding: (list.nth($list-item-three-line-padding, 1) + $modifier) - min-height: $list-item-three-line-min-height + $modifier + min-height: $list-item-three-line-min-height + $modifier - @if ($three-line-padding > 0) - padding-top: $three-line-padding - padding-bottom: $three-line-padding + @if ($three-line-padding > 0) + padding-top: $three-line-padding + padding-bottom: $three-line-padding - .v-list-item__prepend, - .v-list-item__append - padding-top: math.div($three-line-padding, 2) + .v-list-item__prepend, + .v-list-item__append + padding-top: math.div($three-line-padding, 2) - &:not(.v-list-item--nav) - &.v-list-item--one-line - padding-inline: list.nth($list-item-padding, 2) + &:not(.v-list-item--nav) + &.v-list-item--one-line + padding-inline: list.nth($list-item-padding, 2) - &.v-list-item--two-line - padding-inline: list.nth($list-item-two-line-padding, 2) + &.v-list-item--two-line + padding-inline: list.nth($list-item-two-line-padding, 2) - &.v-list-item--three-line - padding-inline: list.nth($list-item-three-line-padding, 2) + &.v-list-item--three-line + padding-inline: list.nth($list-item-three-line-padding, 2) - &--nav - padding-inline: $list-nav-padding + &--nav + padding-inline: $list-nav-padding - .v-list & - &:not(:only-child) - margin-bottom: $list-item-nav-margin-top + .v-list & + &:not(:only-child) + margin-bottom: $list-item-nav-margin-top -.v-list-item__underlay - position: absolute + .v-list-item__underlay + position: absolute -.v-list-item__overlay - background-color: currentColor - border-radius: inherit - bottom: 0 - left: 0 - opacity: 0 - pointer-events: none - position: absolute - right: 0 - top: 0 - transition: opacity 0.2s ease-in-out + .v-list-item__overlay + background-color: currentColor + border-radius: inherit + bottom: 0 + left: 0 + opacity: 0 + pointer-events: none + position: absolute + right: 0 + top: 0 + transition: opacity 0.2s ease-in-out - .v-list-item--active.v-list-item--variant-elevated & - --v-theme-overlay-multiplier: 0 + .v-list-item--active.v-list-item--variant-elevated & + --v-theme-overlay-multiplier: 0 -$base-padding: list.nth($list-item-padding, 2) -.v-list - --indent-padding: 0px + $base-padding: list.nth($list-item-padding, 2) + .v-list + --indent-padding: 0px - &--nav - --indent-padding: -#{$list-nav-padding} + &--nav + --indent-padding: -#{$list-nav-padding} -.v-list-group - --list-indent-size: #{$list-indent-size} - --parent-padding: var(--indent-padding) - --prepend-width: #{$list-item-prepend-size} + .v-list-group + --list-indent-size: #{$list-indent-size} + --parent-padding: var(--indent-padding) + --prepend-width: #{$list-item-prepend-size} - .v-list--slim & - --prepend-width: #{$list-item-slim-prepend-size} + .v-list--slim & + --prepend-width: #{$list-item-slim-prepend-size} - &--fluid - --list-indent-size: 0px + &--fluid + --list-indent-size: 0px - &--prepend - --parent-padding: calc(var(--indent-padding) + var(--prepend-width)) + &--prepend + --parent-padding: calc(var(--indent-padding) + var(--prepend-width)) - &--fluid.v-list-group--prepend - --parent-padding: var(--indent-padding) + &--fluid.v-list-group--prepend + --parent-padding: var(--indent-padding) -.v-list-group__items - --indent-padding: calc(var(--parent-padding) + var(--list-indent-size)) + .v-list-group__items + --indent-padding: calc(var(--parent-padding) + var(--list-indent-size)) -.v-list-group__items .v-list-item - padding-inline-start: calc(#{$base-padding} + var(--indent-padding)) !important + .v-list-group__items .v-list-item + padding-inline-start: calc(#{$base-padding} + var(--indent-padding)) !important -.v-list-group__header.v-list-item--active - &:not(:focus-visible) - .v-list-item__overlay - opacity: 0 + .v-list-group__header.v-list-item--active + &:not(:focus-visible) + .v-list-item__overlay + opacity: 0 - &:hover - .v-list-item__overlay - opacity: calc(#{map.get(settings.$states, 'hover')} * var(--v-theme-overlay-multiplier)) + &:hover + .v-list-item__overlay + opacity: calc(#{map.get(settings.$states, 'hover')} * var(--v-theme-overlay-multiplier)) diff --git a/packages/vuetify/src/components/VLocaleProvider/VLocaleProvider.sass b/packages/vuetify/src/components/VLocaleProvider/VLocaleProvider.sass index 20009443427..414d01dda17 100644 --- a/packages/vuetify/src/components/VLocaleProvider/VLocaleProvider.sass +++ b/packages/vuetify/src/components/VLocaleProvider/VLocaleProvider.sass @@ -1,2 +1,5 @@ -.v-locale-provider - display: contents +@use '../../styles/tools' + +@include tools.layer('components') + .v-locale-provider + display: contents diff --git a/packages/vuetify/src/components/VMain/VMain.sass b/packages/vuetify/src/components/VMain/VMain.sass index 285fdf8e874..cff317ddb9d 100644 --- a/packages/vuetify/src/components/VMain/VMain.sass +++ b/packages/vuetify/src/components/VMain/VMain.sass @@ -1,27 +1,28 @@ @use '../../styles/tools' @use './variables' as * -.v-main - flex: 1 0 auto - max-width: 100% - transition: $main-transition - padding-left: var(--v-layout-left) - padding-right: var(--v-layout-right) - padding-top: var(--v-layout-top) - padding-bottom: var(--v-layout-bottom) - - &__scroller +@include tools.layer('components') + .v-main + flex: 1 0 auto max-width: 100% - position: relative + transition: $main-transition + padding-left: var(--v-layout-left) + padding-right: var(--v-layout-right) + padding-top: var(--v-layout-top) + padding-bottom: var(--v-layout-bottom) + + &__scroller + max-width: 100% + position: relative - &--scrollable - display: flex - @include tools.absolute() + &--scrollable + display: flex + @include tools.absolute() - & > .v-main__scroller - flex: 1 1 auto - overflow-y: auto - --v-layout-left: 0px - --v-layout-right: 0px - --v-layout-top: 0px - --v-layout-bottom: 0px + & > .v-main__scroller + flex: 1 1 auto + overflow-y: auto + --v-layout-left: 0px + --v-layout-right: 0px + --v-layout-top: 0px + --v-layout-bottom: 0px diff --git a/packages/vuetify/src/components/VMenu/VMenu.sass b/packages/vuetify/src/components/VMenu/VMenu.sass index 43986623a97..bb2776d54e4 100644 --- a/packages/vuetify/src/components/VMenu/VMenu.sass +++ b/packages/vuetify/src/components/VMenu/VMenu.sass @@ -1,18 +1,19 @@ @use '../../styles/tools' @use './variables' as * -.v-menu - > .v-overlay__content - display: flex - flex-direction: column - @include tools.rounded($menu-content-border-radius) +@include tools.layer('components') + .v-menu + > .v-overlay__content + display: flex + flex-direction: column + @include tools.rounded($menu-content-border-radius) - > .v-card, - > .v-sheet, - > .v-list - background: rgb(var(--v-theme-surface)) - border-radius: inherit - overflow: auto - height: 100% + > .v-card, + > .v-sheet, + > .v-list + background: rgb(var(--v-theme-surface)) + border-radius: inherit + overflow: auto + height: 100% - @include tools.elevation($menu-elevation) + @include tools.elevation($menu-elevation) diff --git a/packages/vuetify/src/components/VMessages/VMessages.sass b/packages/vuetify/src/components/VMessages/VMessages.sass index 446cac200e7..b1ab3c0dfc5 100644 --- a/packages/vuetify/src/components/VMessages/VMessages.sass +++ b/packages/vuetify/src/components/VMessages/VMessages.sass @@ -1,19 +1,20 @@ @use '../../styles/settings' +@use '../../styles/tools' @use './variables' as * +@include tools.layer('components') + .v-messages + flex: 1 1 auto + font-size: $messages-font-size + min-height: $messages-min-height + min-width: 1px // Ensure takes up space with no messages and inside of flex + opacity: var(--v-medium-emphasis-opacity) + position: relative -.v-messages - flex: 1 1 auto - font-size: $messages-font-size - min-height: $messages-min-height - min-width: 1px // Ensure takes up space with no messages and inside of flex - opacity: var(--v-medium-emphasis-opacity) - position: relative - - &__message - line-height: $messages-line-height - word-break: break-word - overflow-wrap: break-word - word-wrap: break-word - hyphens: auto - transition-duration: $messages-transition-duration + &__message + line-height: $messages-line-height + word-break: break-word + overflow-wrap: break-word + word-wrap: break-word + hyphens: auto + transition-duration: $messages-transition-duration diff --git a/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.sass b/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.sass index 76dbc4573b9..16a5490881c 100644 --- a/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.sass +++ b/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.sass @@ -1,93 +1,94 @@ @use '../../styles/tools' @use './variables' as * -.v-navigation-drawer - -webkit-overflow-scrolling: $navigation-drawer-overflow-scrolling - background: $navigation-drawer-background - display: flex - flex-direction: column - height: $navigation-drawer-height - max-width: 100% - pointer-events: auto - transition-duration: $navigation-drawer-transition-duration - transition-property: $navigation-drawer-transition-property - transition-timing-function: $navigation-drawer-transition-timing-function - position: absolute - - @include tools.border($navigation-drawer-border...) - @include tools.elevation($navigation-drawer-elevation) - @include tools.rounded($navigation-drawer-border-radius) - @include tools.theme($navigation-drawer-theme...) - - &--rounded - @include tools.rounded($navigation-drawer-rounded-border-radius) - - &--top +@include tools.layer('components') + .v-navigation-drawer + -webkit-overflow-scrolling: $navigation-drawer-overflow-scrolling + background: $navigation-drawer-background + display: flex + flex-direction: column + height: $navigation-drawer-height + max-width: 100% + pointer-events: auto + transition-duration: $navigation-drawer-transition-duration + transition-property: $navigation-drawer-transition-property + transition-timing-function: $navigation-drawer-transition-timing-function + position: absolute + + @include tools.border($navigation-drawer-border...) + @include tools.elevation($navigation-drawer-elevation) + @include tools.rounded($navigation-drawer-border-radius) + @include tools.theme($navigation-drawer-theme...) + + &--rounded + @include tools.rounded($navigation-drawer-rounded-border-radius) + + &--top + top: 0 + border-bottom-width: $navigation-drawer-border-thin-width + + &--bottom + left: 0 + border-top-width: $navigation-drawer-border-thin-width + + &--left + top: 0 + left: 0 + right: auto + border-right-width: $navigation-drawer-border-thin-width + + &--right + top: 0 + left: auto + right: 0 + border-left-width: $navigation-drawer-border-thin-width + + &--floating + border: none + + &--temporary.v-navigation-drawer--active + @include tools.elevation($navigation-drawer-temporary-elevation) + + &--sticky + height: auto + transition: box-shadow, transform, visibility, width, height, left, right + + .v-list + overflow: hidden + + .v-navigation-drawer__content + flex: 0 1 auto + height: $navigation-drawer-content-height + max-width: 100% + overflow-x: $navigation-drawer-content-overflow-x + overflow-y: $navigation-drawer-content-overflow-y + + .v-navigation-drawer__img + height: 100% + left: 0 + position: absolute top: 0 - border-bottom-width: $navigation-drawer-border-thin-width + width: 100% + z-index: -1 - &--bottom - left: 0 - border-top-width: $navigation-drawer-border-thin-width + // TODO: remove in v4 + img:not(.v-img__img) + height: $navigation-drawer-img-height + object-fit: $navigation-drawer-img-object-fit + width: $navigation-drawer-img-width - &--left + .v-navigation-drawer__scrim + position: absolute top: 0 left: 0 - right: auto - border-right-width: $navigation-drawer-border-thin-width - - &--right - top: 0 - left: auto - right: 0 - border-left-width: $navigation-drawer-border-thin-width - - &--floating - border: none - - &--temporary.v-navigation-drawer--active - @include tools.elevation($navigation-drawer-temporary-elevation) - - &--sticky - height: auto - transition: box-shadow, transform, visibility, width, height, left, right - - .v-list + width: 100% + height: 100% + background: black + opacity: $navigation-drawer-scrim-opacity + transition: opacity $navigation-drawer-transition-duration $navigation-drawer-transition-timing-function + z-index: 1 + + .v-navigation-drawer__prepend, + .v-navigation-drawer__append + flex: none overflow: hidden - -.v-navigation-drawer__content - flex: 0 1 auto - height: $navigation-drawer-content-height - max-width: 100% - overflow-x: $navigation-drawer-content-overflow-x - overflow-y: $navigation-drawer-content-overflow-y - -.v-navigation-drawer__img - height: 100% - left: 0 - position: absolute - top: 0 - width: 100% - z-index: -1 - - // TODO: remove in v4 - img:not(.v-img__img) - height: $navigation-drawer-img-height - object-fit: $navigation-drawer-img-object-fit - width: $navigation-drawer-img-width - -.v-navigation-drawer__scrim - position: absolute - top: 0 - left: 0 - width: 100% - height: 100% - background: black - opacity: $navigation-drawer-scrim-opacity - transition: opacity $navigation-drawer-transition-duration $navigation-drawer-transition-timing-function - z-index: 1 - -.v-navigation-drawer__prepend, -.v-navigation-drawer__append - flex: none - overflow: hidden diff --git a/packages/vuetify/src/components/VOtpInput/VOtpInput.sass b/packages/vuetify/src/components/VOtpInput/VOtpInput.sass index 77764200917..862537454e3 100644 --- a/packages/vuetify/src/components/VOtpInput/VOtpInput.sass +++ b/packages/vuetify/src/components/VOtpInput/VOtpInput.sass @@ -3,57 +3,58 @@ @use '../../styles/tools' @use './variables' as * -.v-otp-input - @include tools.rounded(4px) +@include tools.layer('components') + .v-otp-input + @include tools.rounded(4px) + + align-items: center + display: flex + justify-content: center + padding: $otp-input-padding + position: relative + + .v-field + height: 100% + + .v-otp-input__divider + margin: $otp-input-divider-margin + + .v-otp-input__content + align-items: center + display: flex + gap: $otp-input-content-gap + height: $otp-input-content-height + padding: $otp-input-content-padding + justify-content: center + max-width: $otp-input-content-max-width + position: relative + border-radius: inherit + + .v-otp-input--divided & + max-width: $otp-input-divided-content-max-width + + .v-otp-input__field + color: inherit + font-size: $otp-input-field-font-size + height: 100% + outline: none + text-align: center + width: 100% + + &[type=number]::-webkit-outer-spin-button, + &[type=number]::-webkit-inner-spin-button + -webkit-appearance: none + margin: 0 - align-items: center - display: flex - justify-content: center - padding: $otp-input-padding - position: relative + &[type=number] + -moz-appearance: textfield - .v-field + .v-otp-input__loader + align-items: center + display: flex height: 100% + justify-content: center + width: 100% -.v-otp-input__divider - margin: $otp-input-divider-margin - -.v-otp-input__content - align-items: center - display: flex - gap: $otp-input-content-gap - height: $otp-input-content-height - padding: $otp-input-content-padding - justify-content: center - max-width: $otp-input-content-max-width - position: relative - border-radius: inherit - - .v-otp-input--divided & - max-width: $otp-input-divided-content-max-width - -.v-otp-input__field - color: inherit - font-size: $otp-input-field-font-size - height: 100% - outline: none - text-align: center - width: 100% - - &[type=number]::-webkit-outer-spin-button, - &[type=number]::-webkit-inner-spin-button - -webkit-appearance: none - margin: 0 - - &[type=number] - -moz-appearance: textfield - -.v-otp-input__loader - align-items: center - display: flex - height: 100% - justify-content: center - width: 100% - - .v-progress-linear - position: absolute + .v-progress-linear + position: absolute diff --git a/packages/vuetify/src/components/VOverlay/VOverlay.sass b/packages/vuetify/src/components/VOverlay/VOverlay.sass index efd4650b600..7d8a1cec563 100644 --- a/packages/vuetify/src/components/VOverlay/VOverlay.sass +++ b/packages/vuetify/src/components/VOverlay/VOverlay.sass @@ -1,62 +1,64 @@ @use 'sass:selector' +@use '../../styles/tools' @use './variables' as * -// Block -.v-overlay-container - contain: layout - left: 0 - pointer-events: none - position: absolute - top: 0 - display: contents +@include tools.layer('components') + // Block + .v-overlay-container + contain: layout + left: 0 + pointer-events: none + position: absolute + top: 0 + display: contents -.v-overlay-scroll-blocked - padding-inline-end: var(--v-scrollbar-offset) + .v-overlay-scroll-blocked + padding-inline-end: var(--v-scrollbar-offset) - &:not(html) - overflow-y: hidden !important + &:not(html) + overflow-y: hidden !important - @at-root #{selector.append(html, &)} + @at-root #{selector.append(html, &)} + position: fixed + top: var(--v-body-scroll-y) + left: var(--v-body-scroll-x) + width: 100% + height: 100% + + .v-overlay + border-radius: inherit + display: flex + left: 0 + pointer-events: none + position: fixed + top: 0 + bottom: 0 + right: 0 + + // Element + .v-overlay__content + outline: none + position: absolute + pointer-events: auto + contain: layout + + .v-overlay__scrim + pointer-events: auto + background: $overlay-scrim-background + border-radius: inherit + bottom: 0 + left: 0 + opacity: $overlay-opacity position: fixed - top: var(--v-body-scroll-y) - left: var(--v-body-scroll-x) - width: 100% - height: 100% - -.v-overlay - border-radius: inherit - display: flex - left: 0 - pointer-events: none - position: fixed - top: 0 - bottom: 0 - right: 0 - -// Element -.v-overlay__content - outline: none - position: absolute - pointer-events: auto - contain: layout - -.v-overlay__scrim - pointer-events: auto - background: $overlay-scrim-background - border-radius: inherit - bottom: 0 - left: 0 - opacity: $overlay-opacity - position: fixed - right: 0 - top: 0 - -// Modifier -.v-overlay--absolute - position: absolute - -.v-overlay--contained .v-overlay__scrim - position: absolute - -.v-overlay--scroll-blocked - padding-inline-end: var(--v-scrollbar-offset) + right: 0 + top: 0 + + // Modifier + .v-overlay--absolute + position: absolute + + .v-overlay--contained .v-overlay__scrim + position: absolute + + .v-overlay--scroll-blocked + padding-inline-end: var(--v-scrollbar-offset) diff --git a/packages/vuetify/src/components/VPagination/VPagination.sass b/packages/vuetify/src/components/VPagination/VPagination.sass index 406d23f1a4d..0669b56750f 100644 --- a/packages/vuetify/src/components/VPagination/VPagination.sass +++ b/packages/vuetify/src/components/VPagination/VPagination.sass @@ -1,15 +1,17 @@ +@use '../../styles/tools' @use './variables' as * -.v-pagination - &__list - display: inline-flex - list-style-type: none - justify-content: center - width: 100% +@include tools.layer('components') + .v-pagination + &__list + display: inline-flex + list-style-type: none + justify-content: center + width: 100% - &__item, - &__first, - &__prev, - &__next, - &__last - margin: $pagination-item-margin + &__item, + &__first, + &__prev, + &__next, + &__last + margin: $pagination-item-margin diff --git a/packages/vuetify/src/components/VParallax/VParallax.sass b/packages/vuetify/src/components/VParallax/VParallax.sass index 947d6d81f3e..68d41d646ee 100644 --- a/packages/vuetify/src/components/VParallax/VParallax.sass +++ b/packages/vuetify/src/components/VParallax/VParallax.sass @@ -1,6 +1,9 @@ -.v-parallax - position: relative - overflow: hidden +@use '../../styles/tools' - &--active > .v-img__img - will-change: transform +@include tools.layer('components') + .v-parallax + position: relative + overflow: hidden + + &--active > .v-img__img + will-change: transform diff --git a/packages/vuetify/src/components/VProgressCircular/VProgressCircular.sass b/packages/vuetify/src/components/VProgressCircular/VProgressCircular.sass index 0f7c5ec05e5..8cbb42ac143 100644 --- a/packages/vuetify/src/components/VProgressCircular/VProgressCircular.sass +++ b/packages/vuetify/src/components/VProgressCircular/VProgressCircular.sass @@ -1,89 +1,91 @@ @use 'sass:list' @use '../../styles/settings' +@use '../../styles/tools' @use './variables' as * -// Elements -.v-progress-circular - align-items: center - display: inline-flex - justify-content: center - position: relative - vertical-align: middle - - > svg - width: 100% - height: 100% - margin: auto - position: absolute - top: 0 - bottom: 0 - left: 0 - right: 0 - z-index: 0 - -.v-progress-circular__content - align-items: center - display: flex - justify-content: center - -.v-progress-circular__underlay - color: $progress-circular-underlay-color - stroke: currentColor - z-index: 1 - -.v-progress-circular__overlay - stroke: currentColor - transition: $progress-circular-overlay-transition - z-index: 2 - -// Modifiers -.v-progress-circular - @each $name, $multiplier in $progress-circular-sizes - $size: $progress-circular-size + (settings.$size-scale * $multiplier) - - &--size-#{$name} - height: $size - width: $size - -.v-progress-circular--indeterminate - > svg - animation: $progress-circular-rotate-animation - transform-origin: center center - transition: $progress-circular-intermediate-svg-transition +@include tools.layer('components') + // Elements + .v-progress-circular + align-items: center + display: inline-flex + justify-content: center + position: relative + vertical-align: middle + + > svg + width: 100% + height: 100% + margin: auto + position: absolute + top: 0 + bottom: 0 + left: 0 + right: 0 + z-index: 0 + + .v-progress-circular__content + align-items: center + display: flex + justify-content: center + + .v-progress-circular__underlay + color: $progress-circular-underlay-color + stroke: currentColor + z-index: 1 .v-progress-circular__overlay - animation: $progress-circular-rotate-dash, $progress-circular-rotate-animation - stroke-dasharray: 25, 200 - stroke-dashoffset: 0 - stroke-linecap: round - transform-origin: center center - transform: $progress-circular-overlay-transform - -.v-progress-circular--disable-shrink - > svg - animation-duration: list.nth($progress-circular-rotate-animation, 2) * .5 - - .v-progress-circular__overlay - animation: none - -.v-progress-circular--indeterminate:not(.v-progress-circular--visible) - > svg, - .v-progress-circular__overlay - animation-play-state: paused !important - -@keyframes progress-circular-dash - 0% - stroke-dasharray: 1, 200 - stroke-dashoffset: 0px - - 50% - stroke-dasharray: 100, 200 - stroke-dashoffset: -15px - - 100% - stroke-dasharray: 100, 200 - stroke-dashoffset: -124px - -@keyframes progress-circular-rotate - 100% - transform: rotate(270deg) + stroke: currentColor + transition: $progress-circular-overlay-transition + z-index: 2 + + // Modifiers + .v-progress-circular + @each $name, $multiplier in $progress-circular-sizes + $size: $progress-circular-size + (settings.$size-scale * $multiplier) + + &--size-#{$name} + height: $size + width: $size + + .v-progress-circular--indeterminate + > svg + animation: $progress-circular-rotate-animation + transform-origin: center center + transition: $progress-circular-intermediate-svg-transition + + .v-progress-circular__overlay + animation: $progress-circular-rotate-dash, $progress-circular-rotate-animation + stroke-dasharray: 25, 200 + stroke-dashoffset: 0 + stroke-linecap: round + transform-origin: center center + transform: $progress-circular-overlay-transform + + .v-progress-circular--disable-shrink + > svg + animation-duration: list.nth($progress-circular-rotate-animation, 2) * .5 + + .v-progress-circular__overlay + animation: none + + .v-progress-circular--indeterminate:not(.v-progress-circular--visible) + > svg, + .v-progress-circular__overlay + animation-play-state: paused !important + + @keyframes progress-circular-dash + 0% + stroke-dasharray: 1, 200 + stroke-dashoffset: 0px + + 50% + stroke-dasharray: 100, 200 + stroke-dashoffset: -15px + + 100% + stroke-dasharray: 100, 200 + stroke-dashoffset: -124px + + @keyframes progress-circular-rotate + 100% + transform: rotate(270deg) diff --git a/packages/vuetify/src/components/VProgressLinear/VProgressLinear.sass b/packages/vuetify/src/components/VProgressLinear/VProgressLinear.sass index 92f3bfb1d0c..526ae8933a1 100644 --- a/packages/vuetify/src/components/VProgressLinear/VProgressLinear.sass +++ b/packages/vuetify/src/components/VProgressLinear/VProgressLinear.sass @@ -1,197 +1,198 @@ @use '../../styles/tools' @use './variables' as * -// Block -.v-progress-linear - background: transparent - overflow: hidden - position: relative - transition: $progress-linear-transition - width: 100% - - &--rounded - @include tools.rounded($progress-linear-border-radius) - -// Elements -.v-progress-linear__background, -.v-progress-linear__buffer - background: $progress-linear-background - bottom: 0 - left: 0 - opacity: $progress-linear-background-opacity - position: absolute - top: 0 - width: 100% - transition-property: width, left, right - transition: inherit - -.v-progress-linear__content - align-items: center - display: flex - height: 100% - justify-content: center - left: 0 - pointer-events: none - position: absolute - top: 0 - width: 100% - -.v-progress-linear__determinate, -.v-progress-linear__indeterminate - background: $progress-linear-background - -.v-progress-linear__determinate - height: inherit - left: 0 - position: absolute - transition: inherit - transition-property: width, left, right - -.v-progress-linear__indeterminate - .long, .short - animation-play-state: paused - animation-duration: $progress-linear-indeterminate-animation-duration - animation-iteration-count: infinite +@include tools.layer('components') + // Block + .v-progress-linear + background: transparent + overflow: hidden + position: relative + transition: $progress-linear-transition + width: 100% + + &--rounded + @include tools.rounded($progress-linear-border-radius) + + // Elements + .v-progress-linear__background, + .v-progress-linear__buffer + background: $progress-linear-background bottom: 0 - height: inherit left: 0 + opacity: $progress-linear-background-opacity position: absolute - right: auto top: 0 - width: auto - - .long - animation-name: indeterminate-ltr - - .short - animation-name: indeterminate-short-ltr - -.v-progress-linear__stream - animation: $progress-linear-stream-animation - animation-play-state: paused - bottom: 0 - left: auto - opacity: $progress-linear-stream-opacity - pointer-events: none - position: absolute - transition: inherit - transition-property: width, left, right - -// Modifiers -.v-progress-linear--reverse - .v-progress-linear__background, - .v-progress-linear__determinate, + width: 100% + transition-property: width, left, right + transition: inherit + .v-progress-linear__content - left: auto - right: 0 + align-items: center + display: flex + height: 100% + justify-content: center + left: 0 + pointer-events: none + position: absolute + top: 0 + width: 100% + + .v-progress-linear__determinate, + .v-progress-linear__indeterminate + background: $progress-linear-background + + .v-progress-linear__determinate + height: inherit + left: 0 + position: absolute + transition: inherit + transition-property: width, left, right .v-progress-linear__indeterminate .long, .short - left: auto - right: 0 + animation-play-state: paused + animation-duration: $progress-linear-indeterminate-animation-duration + animation-iteration-count: infinite + bottom: 0 + height: inherit + left: 0 + position: absolute + right: auto + top: 0 + width: auto .long - animation-name: indeterminate-rtl + animation-name: indeterminate-ltr .short - animation-name: indeterminate-short-rtl + animation-name: indeterminate-short-ltr .v-progress-linear__stream - right: auto + animation: $progress-linear-stream-animation + animation-play-state: paused + bottom: 0 + left: auto + opacity: $progress-linear-stream-opacity + pointer-events: none + position: absolute + transition: inherit + transition-property: width, left, right -.v-progress-linear--absolute, -.v-progress-linear--fixed - left: 0 - z-index: 1 + // Modifiers + .v-progress-linear--reverse + .v-progress-linear__background, + .v-progress-linear__determinate, + .v-progress-linear__content + left: auto + right: 0 -.v-progress-linear--absolute - position: absolute + .v-progress-linear__indeterminate + .long, .short + left: auto + right: 0 -.v-progress-linear--fixed - position: fixed + .long + animation-name: indeterminate-rtl -.v-progress-linear--rounded - @include tools.rounded($progress-linear-border-radius) + .short + animation-name: indeterminate-short-rtl - &.v-progress-linear--rounded-bar - .v-progress-linear__determinate, - .v-progress-linear__indeterminate - border-radius: inherit + .v-progress-linear__stream + right: auto -.v-progress-linear--striped - .v-progress-linear__determinate - animation: $progress-linear-striped-animation - background-image: $progress-linear-stripe-gradient - background-repeat: repeat - background-size: $progress-linear-striped-size + .v-progress-linear--absolute, + .v-progress-linear--fixed + left: 0 + z-index: 1 -.v-progress-linear--active - .v-progress-linear__indeterminate - .long, .short - animation-play-state: running + .v-progress-linear--absolute + position: absolute - .v-progress-linear__stream - animation-play-state: running + .v-progress-linear--fixed + position: fixed -.v-progress-linear--rounded-bar - .v-progress-linear__determinate, - .v-progress-linear__indeterminate, - .v-progress-linear__stream + .v-progress-linear__background + .v-progress-linear--rounded @include tools.rounded($progress-linear-border-radius) - .v-progress-linear__determinate - border-start-start-radius: 0 - border-end-start-radius: 0 - -// Keyframes -@keyframes indeterminate-ltr - 0% - left: -90% - right: 100% - 60% - left: -90% - right: 100% - 100% - left: 100% - right: -35% - -@keyframes indeterminate-rtl - 0% - left: 100% - right: -90% - 60% - left: 100% - right: -90% - 100% - left: -35% - right: 100% - -@keyframes indeterminate-short-ltr - 0% - left: -200% - right: 100% - 60% - left: 107% - right: -8% - 100% - left: 107% - right: -8% - -@keyframes indeterminate-short-rtl - 0% - left: 100% - right: -200% - 60% - left: -8% - right: 107% - 100% - left: -8% - right: 107% - -@keyframes stream - to - transform: translateX(var(--v-progress-linear-stream-to)) - -@keyframes progress-linear-stripes - 0% - background-position-x: $progress-linear-striped-size + &.v-progress-linear--rounded-bar + .v-progress-linear__determinate, + .v-progress-linear__indeterminate + border-radius: inherit + + .v-progress-linear--striped + .v-progress-linear__determinate + animation: $progress-linear-striped-animation + background-image: $progress-linear-stripe-gradient + background-repeat: repeat + background-size: $progress-linear-striped-size + + .v-progress-linear--active + .v-progress-linear__indeterminate + .long, .short + animation-play-state: running + + .v-progress-linear__stream + animation-play-state: running + + .v-progress-linear--rounded-bar + .v-progress-linear__determinate, + .v-progress-linear__indeterminate, + .v-progress-linear__stream + .v-progress-linear__background + @include tools.rounded($progress-linear-border-radius) + + .v-progress-linear__determinate + border-start-start-radius: 0 + border-end-start-radius: 0 + + // Keyframes + @keyframes indeterminate-ltr + 0% + left: -90% + right: 100% + 60% + left: -90% + right: 100% + 100% + left: 100% + right: -35% + + @keyframes indeterminate-rtl + 0% + left: 100% + right: -90% + 60% + left: 100% + right: -90% + 100% + left: -35% + right: 100% + + @keyframes indeterminate-short-ltr + 0% + left: -200% + right: 100% + 60% + left: 107% + right: -8% + 100% + left: 107% + right: -8% + + @keyframes indeterminate-short-rtl + 0% + left: 100% + right: -200% + 60% + left: -8% + right: 107% + 100% + left: -8% + right: 107% + + @keyframes stream + to + transform: translateX(var(--v-progress-linear-stream-to)) + + @keyframes progress-linear-stripes + 0% + background-position-x: $progress-linear-striped-size diff --git a/packages/vuetify/src/components/VRadioGroup/VRadioGroup.sass b/packages/vuetify/src/components/VRadioGroup/VRadioGroup.sass index 41460bcb87d..43ecd1c1cbd 100644 --- a/packages/vuetify/src/components/VRadioGroup/VRadioGroup.sass +++ b/packages/vuetify/src/components/VRadioGroup/VRadioGroup.sass @@ -1,15 +1,17 @@ +@use '../../styles/tools' @use './variables' as * -.v-radio-group - > .v-input__control - flex-direction: column +@include tools.layer('components') + .v-radio-group + > .v-input__control + flex-direction: column - > .v-label - margin-inline-start: $radio-group-label-margin-inline-start + > .v-label + margin-inline-start: $radio-group-label-margin-inline-start - + .v-selection-control-group - padding-inline-start: $radio-group-label-selection-group-padding-inline - margin-top: $radio-group-label-selection-group-margin-top + + .v-selection-control-group + padding-inline-start: $radio-group-label-selection-group-padding-inline + margin-top: $radio-group-label-selection-group-margin-top - .v-input__details - padding-inline: $radio-group-details-padding-inline + .v-input__details + padding-inline: $radio-group-details-padding-inline diff --git a/packages/vuetify/src/components/VRating/VRating.sass b/packages/vuetify/src/components/VRating/VRating.sass index 32eb7723c3f..c4bfb87b59a 100644 --- a/packages/vuetify/src/components/VRating/VRating.sass +++ b/packages/vuetify/src/components/VRating/VRating.sass @@ -1,57 +1,59 @@ +@use '../../styles/tools' @use './variables' as * -// Block -.v-rating - max-width: 100% - display: inline-flex - white-space: $rating-white-space +@include tools.layer('components') + // Block + .v-rating + max-width: 100% + display: inline-flex + white-space: $rating-white-space - &--readonly - pointer-events: none + &--readonly + pointer-events: none -// Element -.v-rating__wrapper - align-items: $rating-item-align-items - display: inline-flex - flex-direction: column + // Element + .v-rating__wrapper + align-items: $rating-item-align-items + display: inline-flex + flex-direction: column - &--bottom - flex-direction: column-reverse + &--bottom + flex-direction: column-reverse -.v-rating__item - display: inline-flex - position: relative + .v-rating__item + display: inline-flex + position: relative - label - cursor: pointer + label + cursor: pointer - .v-btn--variant-plain - opacity: $rating-item-button-opacity + .v-btn--variant-plain + opacity: $rating-item-button-opacity - .v-btn - transition-property: $rating-item-button-transition-property + .v-btn + transition-property: $rating-item-button-transition-property - .v-icon - transition: inherit - transition-timing-function: $rating-item-transition-timing-function + .v-icon + transition: inherit + transition-timing-function: $rating-item-transition-timing-function - &:hover:not(.v-rating__item--focused) - .v-rating--hover & - .v-btn - transform: $rating-item-icon-transform + &:hover:not(.v-rating__item--focused) + .v-rating--hover & + .v-btn + transform: $rating-item-icon-transform - &--half - overflow: hidden + &--half + overflow: hidden + position: absolute + clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%) + z-index: 1 + + .v-btn__overlay, + &:hover .v-btn__overlay + opacity: 0 + + .v-rating__hidden + height: 0 + opacity: 0 position: absolute - clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%) - z-index: 1 - - .v-btn__overlay, - &:hover .v-btn__overlay - opacity: 0 - -.v-rating__hidden - height: 0 - opacity: 0 - position: absolute - width: 0 + width: 0 diff --git a/packages/vuetify/src/components/VResponsive/VResponsive.sass b/packages/vuetify/src/components/VResponsive/VResponsive.sass index d9e5eb00362..b7218e2b95d 100644 --- a/packages/vuetify/src/components/VResponsive/VResponsive.sass +++ b/packages/vuetify/src/components/VResponsive/VResponsive.sass @@ -1,25 +1,27 @@ @use '../../styles/settings' +@use '../../styles/tools' -.v-responsive - display: flex - flex: 1 0 auto - max-height: 100% - max-width: 100% - overflow: hidden - position: relative +@include tools.layer('components') + .v-responsive + display: flex + flex: 1 0 auto + max-height: 100% + max-width: 100% + overflow: hidden + position: relative - &--inline - display: inline-flex - flex: 0 0 auto + &--inline + display: inline-flex + flex: 0 0 auto -.v-responsive__content - flex: 1 0 0px - max-width: 100% + .v-responsive__content + flex: 1 0 0px + max-width: 100% -.v-responsive__sizer ~ .v-responsive__content - margin-inline-start: -100% + .v-responsive__sizer ~ .v-responsive__content + margin-inline-start: -100% -.v-responsive__sizer - flex: 1 0 0px - transition: padding-bottom 0.2s settings.$standard-easing - pointer-events: none + .v-responsive__sizer + flex: 1 0 0px + transition: padding-bottom 0.2s settings.$standard-easing + pointer-events: none diff --git a/packages/vuetify/src/components/VSelect/VSelect.sass b/packages/vuetify/src/components/VSelect/VSelect.sass index 26b29a6fdab..6f0c79508ae 100644 --- a/packages/vuetify/src/components/VSelect/VSelect.sass +++ b/packages/vuetify/src/components/VSelect/VSelect.sass @@ -4,62 +4,63 @@ @use '../../styles/tools' @use './variables' as * -.v-select - .v-field - .v-text-field__prefix, - .v-text-field__suffix, - .v-field__input, - &.v-field - cursor: pointer +@include tools.layer('components') + .v-select + .v-field + .v-text-field__prefix, + .v-text-field__suffix, + .v-field__input, + &.v-field + cursor: pointer - .v-field - .v-field__input - > input - align-self: flex-start - opacity: 1 - flex: 0 0 - position: absolute - width: 100% - transition: none - pointer-events: none - caret-color: transparent + .v-field + .v-field__input + > input + align-self: flex-start + opacity: 1 + flex: 0 0 + position: absolute + width: 100% + transition: none + pointer-events: none + caret-color: transparent - .v-field--dirty - .v-select__selection - margin-inline-end: 2px + .v-field--dirty + .v-select__selection + margin-inline-end: 2px - .v-select__selection-text - overflow: hidden - text-overflow: ellipsis - white-space: nowrap + .v-select__selection-text + overflow: hidden + text-overflow: ellipsis + white-space: nowrap - &__content - overflow: hidden + &__content + overflow: hidden - @include tools.elevation($select-content-elevation) - @include tools.rounded($select-content-border-radius) + @include tools.elevation($select-content-elevation) + @include tools.rounded($select-content-border-radius) - &__selection - display: inline-flex - align-items: center - letter-spacing: inherit - line-height: inherit - max-width: 100% + &__selection + display: inline-flex + align-items: center + letter-spacing: inherit + line-height: inherit + max-width: 100% - .v-select__selection - &:first-child - margin-inline-start: 0 + .v-select__selection + &:first-child + margin-inline-start: 0 - &--selected - .v-field - .v-field__input - > input - opacity: 0 + &--selected + .v-field + .v-field__input + > input + opacity: 0 - &__menu-icon - margin-inline-start: 4px - transition: $select-transition + &__menu-icon + margin-inline-start: 4px + transition: $select-transition - .v-select--active-menu & - opacity: var(--v-high-emphasis-opacity) - transform: rotate(180deg) + .v-select--active-menu & + opacity: var(--v-high-emphasis-opacity) + transform: rotate(180deg) diff --git a/packages/vuetify/src/components/VSelectionControl/VSelectionControl.sass b/packages/vuetify/src/components/VSelectionControl/VSelectionControl.sass index 028763f05c3..adcefd96e09 100644 --- a/packages/vuetify/src/components/VSelectionControl/VSelectionControl.sass +++ b/packages/vuetify/src/components/VSelectionControl/VSelectionControl.sass @@ -4,96 +4,97 @@ @use '../../styles/tools' @use './variables' as * -.v-selection-control - align-items: center - contain: layout - display: flex - flex: 1 0 - grid-area: control - position: relative - user-select: none - - .v-label - white-space: normal - word-break: break-word - height: 100% - - &--disabled - opacity: var(--v-disabled-opacity) - pointer-events: none - - &--error, - &--disabled - .v-label - opacity: 1 +@include tools.layer('components') + .v-selection-control + align-items: center + contain: layout + display: flex + flex: 1 0 + grid-area: control + position: relative + user-select: none - &--error:not(.v-selection-control--disabled) .v-label - color: rgb(var(--v-theme-error)) - - &--inline + white-space: normal + word-break: break-word + height: 100% + + &--disabled + opacity: var(--v-disabled-opacity) + pointer-events: none + + &--error, + &--disabled + .v-label + opacity: 1 + + &--error:not(.v-selection-control--disabled) + .v-label + color: rgb(var(--v-theme-error)) + + &--inline + display: inline-flex + flex: 0 0 auto + min-width: 0 + max-width: 100% + + .v-label + width: auto + + @at-root + @include tools.density('v-selection-control', $selection-control-density) using ($modifier) + --v-selection-control-size: #{$selection-control-size + $modifier} + + .v-selection-control__wrapper + width: var(--v-selection-control-size) + height: var(--v-selection-control-size) display: inline-flex - flex: 0 0 auto - min-width: 0 - max-width: 100% + align-items: center + position: relative + justify-content: center + flex: none + + .v-selection-control__input + width: var(--v-selection-control-size) + height: var(--v-selection-control-size) + align-items: center + display: flex + flex: none + justify-content: center + position: relative + border-radius: 50% + + input + cursor: pointer + position: absolute + left: 0 + top: 0 + width: 100% + height: 100% + opacity: 0 + + &::before + @include tools.absolute(true) + border-radius: 100% + background-color: currentColor + opacity: 0 + pointer-events: none + + &:hover::before + opacity: calc(#{map.get(settings.$states, 'hover')} * var(--v-theme-overlay-multiplier)) - .v-label - width: auto - - @at-root - @include tools.density('v-selection-control', $selection-control-density) using ($modifier) - --v-selection-control-size: #{$selection-control-size + $modifier} - -.v-selection-control__wrapper - width: var(--v-selection-control-size) - height: var(--v-selection-control-size) - display: inline-flex - align-items: center - position: relative - justify-content: center - flex: none - -.v-selection-control__input - width: var(--v-selection-control-size) - height: var(--v-selection-control-size) - align-items: center - display: flex - flex: none - justify-content: center - position: relative - border-radius: 50% - - input - cursor: pointer - position: absolute - left: 0 - top: 0 - width: 100% - height: 100% - opacity: 0 - - &::before - @include tools.absolute(true) - border-radius: 100% - background-color: currentColor - opacity: 0 - pointer-events: none - - &:hover::before - opacity: calc(#{map.get(settings.$states, 'hover')} * var(--v-theme-overlay-multiplier)) - - > .v-icon - opacity: var(--v-medium-emphasis-opacity) - - .v-selection-control--disabled &, - .v-selection-control--dirty &, - .v-selection-control--error & > .v-icon - opacity: 1 + opacity: var(--v-medium-emphasis-opacity) - .v-selection-control--error:not(.v-selection-control--disabled) & - > .v-icon - color: rgb(var(--v-theme-error)) + .v-selection-control--disabled &, + .v-selection-control--dirty &, + .v-selection-control--error & + > .v-icon + opacity: 1 + + .v-selection-control--error:not(.v-selection-control--disabled) & + > .v-icon + color: rgb(var(--v-theme-error)) - .v-selection-control--focus-visible &::before - opacity: calc(#{map.get(settings.$states, 'focus')} * var(--v-theme-overlay-multiplier)) + .v-selection-control--focus-visible &::before + opacity: calc(#{map.get(settings.$states, 'focus')} * var(--v-theme-overlay-multiplier)) diff --git a/packages/vuetify/src/components/VSelectionControlGroup/VSelectionControlGroup.sass b/packages/vuetify/src/components/VSelectionControlGroup/VSelectionControlGroup.sass index 5f8c12dd5d5..1e73a42c797 100644 --- a/packages/vuetify/src/components/VSelectionControlGroup/VSelectionControlGroup.sass +++ b/packages/vuetify/src/components/VSelectionControlGroup/VSelectionControlGroup.sass @@ -1,10 +1,12 @@ +@use '../../styles/tools' @use './variables' as * -.v-selection-control-group - grid-area: $selection-control-group-grid-area - display: flex - flex-direction: column +@include tools.layer('components') + .v-selection-control-group + grid-area: $selection-control-group-grid-area + display: flex + flex-direction: column - &--inline - flex-direction: row - flex-wrap: wrap + &--inline + flex-direction: row + flex-wrap: wrap diff --git a/packages/vuetify/src/components/VSheet/VSheet.sass b/packages/vuetify/src/components/VSheet/VSheet.sass index b556addadf6..dfb1197810c 100644 --- a/packages/vuetify/src/components/VSheet/VSheet.sass +++ b/packages/vuetify/src/components/VSheet/VSheet.sass @@ -1,14 +1,15 @@ @use '../../styles/tools' @use './variables' as * -.v-sheet - display: block +@include tools.layer('components') + .v-sheet + display: block - @include tools.border($sheet-border...) - @include tools.elevation($sheet-elevation) - @include tools.position($sheet-positions) - @include tools.rounded($sheet-border-radius) - @include tools.theme($sheet-theme...) + @include tools.border($sheet-border...) + @include tools.elevation($sheet-elevation) + @include tools.position($sheet-positions) + @include tools.rounded($sheet-border-radius) + @include tools.theme($sheet-theme...) - &--rounded - @include tools.rounded($sheet-rounded-border-radius) + &--rounded + @include tools.rounded($sheet-rounded-border-radius) diff --git a/packages/vuetify/src/components/VSkeletonLoader/VSkeletonLoader.sass b/packages/vuetify/src/components/VSkeletonLoader/VSkeletonLoader.sass index da6924a3e4d..6a7c29d8c0c 100644 --- a/packages/vuetify/src/components/VSkeletonLoader/VSkeletonLoader.sass +++ b/packages/vuetify/src/components/VSkeletonLoader/VSkeletonLoader.sass @@ -3,226 +3,227 @@ @use '../../styles/tools' @use './variables' as * -.v-skeleton-loader - align-items: center - background: $skeleton-loader-background - border-radius: $skeleton-loader-border-radius - display: flex - flex-wrap: wrap - position: relative - vertical-align: top - - &__actions - justify-content: end - - .v-skeleton-loader__ossein - height: 100% - - .v-skeleton-loader__avatar, - .v-skeleton-loader__button, - .v-skeleton-loader__chip, - .v-skeleton-loader__divider, - .v-skeleton-loader__heading, - .v-skeleton-loader__image, - .v-skeleton-loader__ossein, - .v-skeleton-loader__text - background: $skeleton-loader-text-background - - .v-skeleton-loader__list-item, - .v-skeleton-loader__list-item-avatar, - .v-skeleton-loader__list-item-text, - .v-skeleton-loader__list-item-two-line, - .v-skeleton-loader__list-item-avatar-two-line, - .v-skeleton-loader__list-item-three-line, - .v-skeleton-loader__list-item-avatar-three-line - border-radius: $skeleton-loader-border-radius - - &__bone +@include tools.layer('components') + .v-skeleton-loader align-items: center - border-radius: inherit + background: $skeleton-loader-background + border-radius: $skeleton-loader-border-radius display: flex - flex: 1 1 100% flex-wrap: wrap - overflow: hidden position: relative + vertical-align: top - &::after - @include tools.absolute(true) - - animation: $skeleton-loader-loading-animation - background: $skeleton-loader-bone-background - transform: $skeleton-loader-loading-transform - z-index: 1 - - &__avatar - border-radius: 50% - flex: 0 1 auto - margin: $skeleton-loader-avatar-margin - max-height: $skeleton-loader-avatar-height - min-height: $skeleton-loader-avatar-height - height: $skeleton-loader-avatar-height - max-width: $skeleton-loader-avatar-width - min-width: $skeleton-loader-avatar-width - width: $skeleton-loader-avatar-width - - + .v-skeleton-loader__bone - flex: 1 1 auto - margin-inline-start: 0 - - + .v-skeleton-loader__sentences, - + .v-skeleton-loader__paragraph - > .v-skeleton-loader__text + &__actions + justify-content: end + + .v-skeleton-loader__ossein + height: 100% + + .v-skeleton-loader__avatar, + .v-skeleton-loader__button, + .v-skeleton-loader__chip, + .v-skeleton-loader__divider, + .v-skeleton-loader__heading, + .v-skeleton-loader__image, + .v-skeleton-loader__ossein, + .v-skeleton-loader__text + background: $skeleton-loader-text-background + + .v-skeleton-loader__list-item, + .v-skeleton-loader__list-item-avatar, + .v-skeleton-loader__list-item-text, + .v-skeleton-loader__list-item-two-line, + .v-skeleton-loader__list-item-avatar-two-line, + .v-skeleton-loader__list-item-three-line, + .v-skeleton-loader__list-item-avatar-three-line + border-radius: $skeleton-loader-border-radius + + &__bone + align-items: center + border-radius: inherit + display: flex + flex: 1 1 100% + flex-wrap: wrap + overflow: hidden + position: relative + + &::after + @include tools.absolute(true) + + animation: $skeleton-loader-loading-animation + background: $skeleton-loader-bone-background + transform: $skeleton-loader-loading-transform + z-index: 1 + + &__avatar + border-radius: 50% + flex: 0 1 auto + margin: $skeleton-loader-avatar-margin + max-height: $skeleton-loader-avatar-height + min-height: $skeleton-loader-avatar-height + height: $skeleton-loader-avatar-height + max-width: $skeleton-loader-avatar-width + min-width: $skeleton-loader-avatar-width + width: $skeleton-loader-avatar-width + + + .v-skeleton-loader__bone + flex: 1 1 auto margin-inline-start: 0 - &__button - border-radius: $skeleton-loader-button-border-radius - height: $skeleton-loader-button-height - margin: $skeleton-loader-gutter - max-width: $skeleton-loader-button-width + + .v-skeleton-loader__sentences, + + .v-skeleton-loader__paragraph + > .v-skeleton-loader__text + margin-inline-start: 0 - + .v-skeleton-loader__bone - flex: 1 1 auto - margin-inline-start: 0 + &__button + border-radius: $skeleton-loader-button-border-radius + height: $skeleton-loader-button-height + margin: $skeleton-loader-gutter + max-width: $skeleton-loader-button-width - + .v-skeleton-loader__sentences, - + .v-skeleton-loader__paragraph - > .v-skeleton-loader__text + + .v-skeleton-loader__bone + flex: 1 1 auto margin-inline-start: 0 - &__chip - border-radius: $skeleton-loader-chip-border-radius - margin: $skeleton-loader-gutter - height: $skeleton-loader-chip-height - max-width: $skeleton-loader-chip-width + + .v-skeleton-loader__sentences, + + .v-skeleton-loader__paragraph + > .v-skeleton-loader__text + margin-inline-start: 0 - + .v-skeleton-loader__bone - flex: 1 1 auto - margin-inline-start: 0 + &__chip + border-radius: $skeleton-loader-chip-border-radius + margin: $skeleton-loader-gutter + height: $skeleton-loader-chip-height + max-width: $skeleton-loader-chip-width - + .v-skeleton-loader__sentences, - + .v-skeleton-loader__paragraph - > .v-skeleton-loader__text + + .v-skeleton-loader__bone + flex: 1 1 auto margin-inline-start: 0 - &__date-picker - border-radius: $skeleton-loader-date-picker-border-radius + + .v-skeleton-loader__sentences, + + .v-skeleton-loader__paragraph + > .v-skeleton-loader__text + margin-inline-start: 0 - .v-skeleton-loader__list-item:first-child - .v-skeleton-loader__text - max-width: $skeleton-loader-date-picker-text-max-width - width: $skeleton-loader-date-picker-text-width + &__date-picker + border-radius: $skeleton-loader-date-picker-border-radius - .v-skeleton-loader__heading - max-width: $skeleton-loader-date-picker-heading-max-width - width: $skeleton-loader-date-picker-heading-width + .v-skeleton-loader__list-item:first-child + .v-skeleton-loader__text + max-width: $skeleton-loader-date-picker-text-max-width + width: $skeleton-loader-date-picker-text-width - &__date-picker-days - flex-wrap: wrap - margin: $skeleton-loader-gutter + .v-skeleton-loader__heading + max-width: $skeleton-loader-date-picker-heading-max-width + width: $skeleton-loader-date-picker-heading-width - .v-skeleton-loader__avatar - border-radius: $skeleton-loader-border-radius - margin: $skeleton-loader-date-picker-days-margin - max-width: 100% + &__date-picker-days + flex-wrap: wrap + margin: $skeleton-loader-gutter - &__date-picker-options - flex-wrap: nowrap + .v-skeleton-loader__avatar + border-radius: $skeleton-loader-border-radius + margin: $skeleton-loader-date-picker-days-margin + max-width: 100% - .v-skeleton-loader__text - flex: 1 1 auto + &__date-picker-options + flex-wrap: nowrap - &__divider - border-radius: $skeleton-loader-divider-border-radius - height: $skeleton-loader-divider-height + .v-skeleton-loader__text + flex: 1 1 auto - &__heading - border-radius: $skeleton-loader-heading-border-radius - margin: $skeleton-loader-gutter - height: $skeleton-loader-heading-height + &__divider + border-radius: $skeleton-loader-divider-border-radius + height: $skeleton-loader-divider-height - + .v-skeleton-loader__subtitle - margin-top: -$skeleton-loader-gutter + &__heading + border-radius: $skeleton-loader-heading-border-radius + margin: $skeleton-loader-gutter + height: $skeleton-loader-heading-height - &__image - height: $skeleton-loader-image-height - border-radius: 0 + + .v-skeleton-loader__subtitle + margin-top: -$skeleton-loader-gutter - &__card - .v-skeleton-loader__image + &__image + height: $skeleton-loader-image-height border-radius: 0 - &__list-item - margin: $skeleton-loader-gutter + &__card + .v-skeleton-loader__image + border-radius: 0 - .v-skeleton-loader__text - margin: 0 + &__list-item + margin: $skeleton-loader-gutter - &__table-thead - justify-content: space-between + .v-skeleton-loader__text + margin: 0 - .v-skeleton-loader__heading - margin-top: $skeleton-loader-gutter - max-width: $skeleton-loader-gutter + &__table-thead + justify-content: space-between - &__table-tfoot - flex-wrap: nowrap + .v-skeleton-loader__heading + margin-top: $skeleton-loader-gutter + max-width: $skeleton-loader-gutter - > .v-skeleton-loader__text.v-skeleton-loader__bone - margin-top: $skeleton-loader-gutter + &__table-tfoot + flex-wrap: nowrap - &__table-row - align-items: baseline - margin: $skeleton-loader-table-row-margin - justify-content: space-evenly - flex-wrap: nowrap + > .v-skeleton-loader__text.v-skeleton-loader__bone + margin-top: $skeleton-loader-gutter - > .v-skeleton-loader__text.v-skeleton-loader__bone - margin-inline: $skeleton-loader-table-row-text-margin + &__table-row + align-items: baseline + margin: $skeleton-loader-table-row-margin + justify-content: space-evenly + flex-wrap: nowrap - + .v-skeleton-loader__divider - margin: 0 $skeleton-loader-gutter + > .v-skeleton-loader__text.v-skeleton-loader__bone + margin-inline: $skeleton-loader-table-row-text-margin - &__table-cell - align-items: center - display: flex - height: $skeleton-loader-table-cell-height - width: $skeleton-loader-table-cell-width + + .v-skeleton-loader__divider + margin: 0 $skeleton-loader-gutter - .v-skeleton-loader__text - margin-bottom: 0 + &__table-cell + align-items: center + display: flex + height: $skeleton-loader-table-cell-height + width: $skeleton-loader-table-cell-width - &__subtitle - max-width: $skeleton-loader-subtitle-max-width + .v-skeleton-loader__text + margin-bottom: 0 - > .v-skeleton-loader__text - height: $skeleton-loader-subtitle-text-height - border-radius: $skeleton-loader-subtitle-text-border-radius + &__subtitle + max-width: $skeleton-loader-subtitle-max-width - &__text - border-radius: $skeleton-loader-text-border-radius - margin: $skeleton-loader-gutter - height: $skeleton-loader-text-height + > .v-skeleton-loader__text + height: $skeleton-loader-subtitle-text-height + border-radius: $skeleton-loader-subtitle-text-border-radius - + .v-skeleton-loader__text - margin-top: $skeleton-loader-text-two-text-margin-top - max-width: $skeleton-loader-text-two-text-max-width + &__text + border-radius: $skeleton-loader-text-border-radius + margin: $skeleton-loader-gutter + height: $skeleton-loader-text-height + .v-skeleton-loader__text - max-width: $skeleton-loader-text-three-text-max-width + margin-top: $skeleton-loader-text-two-text-margin-top + max-width: $skeleton-loader-text-two-text-max-width - &--boilerplate - .v-skeleton-loader__bone:after - display: none + + .v-skeleton-loader__text + max-width: $skeleton-loader-text-three-text-max-width - &--is-loading - overflow: hidden + &--boilerplate + .v-skeleton-loader__bone:after + display: none - &--tile - border-radius: 0 + &--is-loading + overflow: hidden - .v-skeleton-loader__bone + &--tile border-radius: 0 -@keyframes loading - 100% - transform: translateX(100%) + .v-skeleton-loader__bone + border-radius: 0 + + @keyframes loading + 100% + transform: translateX(100%) diff --git a/packages/vuetify/src/components/VSlideGroup/VSlideGroup.sass b/packages/vuetify/src/components/VSlideGroup/VSlideGroup.sass index ebe113a963f..c2c1c0e801d 100644 --- a/packages/vuetify/src/components/VSlideGroup/VSlideGroup.sass +++ b/packages/vuetify/src/components/VSlideGroup/VSlideGroup.sass @@ -4,44 +4,45 @@ @use '../../styles/tools' @use './variables' as * -// Block -.v-slide-group - display: flex - overflow: hidden +@include tools.layer('components') + // Block + .v-slide-group + display: flex + overflow: hidden -// Element -.v-slide-group__next, -.v-slide-group__prev - align-items: center - display: flex - flex: 0 1 $slide-group-prev-basis - justify-content: center - min-width: $slide-group-prev-basis - cursor: pointer + // Element + .v-slide-group__next, + .v-slide-group__prev + align-items: center + display: flex + flex: 0 1 $slide-group-prev-basis + justify-content: center + min-width: $slide-group-prev-basis + cursor: pointer - &--disabled - pointer-events: none - opacity: var(--v-disabled-opacity) + &--disabled + pointer-events: none + opacity: var(--v-disabled-opacity) -.v-slide-group__content - display: flex - flex: 1 0 auto - position: relative - transition: 0.2s all settings.$standard-easing - white-space: nowrap + .v-slide-group__content + display: flex + flex: 1 0 auto + position: relative + transition: 0.2s all settings.$standard-easing + white-space: nowrap - > * - white-space: initial + > * + white-space: initial -.v-slide-group__container - contain: content - display: flex - flex: 1 1 auto - overflow: hidden + .v-slide-group__container + contain: content + display: flex + flex: 1 1 auto + overflow: hidden -// Modifiers -.v-slide-group--vertical - &, - .v-slide-group__container, - .v-slide-group__content - flex-direction: column + // Modifiers + .v-slide-group--vertical + &, + .v-slide-group__container, + .v-slide-group__content + flex-direction: column diff --git a/packages/vuetify/src/components/VSlider/VSlider.sass b/packages/vuetify/src/components/VSlider/VSlider.sass index 53f415f8305..899ed1dafbc 100644 --- a/packages/vuetify/src/components/VSlider/VSlider.sass +++ b/packages/vuetify/src/components/VSlider/VSlider.sass @@ -4,59 +4,60 @@ @use '../../styles/tools' @use './variables' as * -// Block -.v-slider - .v-slider__container - input - cursor: default +@include tools.layer('components') + // Block + .v-slider + .v-slider__container + input + cursor: default + padding: 0 + width: 100% + display: none + + > .v-input__append, + > .v-input__prepend padding: 0 - width: 100% - display: none - - > .v-input__append, - > .v-input__prepend - padding: 0 - -// Elements -.v-slider__container - position: relative - min-height: inherit - width: 100% - height: 100% - display: flex - justify-content: center - align-items: center - cursor: pointer - - .v-input--disabled & - opacity: var(--v-disabled-opacity) - - .v-input--error:not(.v-input--disabled) & - color: rgb(var(--v-theme-error)) - -// Modifiers -.v-slider.v-input--horizontal - align-items: center - margin-inline: $slider-horizontal-start $slider-horizontal-end - - > .v-input__control - min-height: $slider-horizontal-min-height + + // Elements + .v-slider__container + position: relative + min-height: inherit + width: 100% + height: 100% display: flex + justify-content: center + align-items: center + cursor: pointer + + .v-input--disabled & + opacity: var(--v-disabled-opacity) + + .v-input--error:not(.v-input--disabled) & + color: rgb(var(--v-theme-error)) + + // Modifiers + .v-slider.v-input--horizontal align-items: center + margin-inline: $slider-horizontal-start $slider-horizontal-end + + > .v-input__control + min-height: $slider-horizontal-min-height + display: flex + align-items: center -.v-slider.v-input--vertical - justify-content: center - margin-top: $slider-vertical-margin-top - margin-bottom: $slider-vertical-margin-bottom + .v-slider.v-input--vertical + justify-content: center + margin-top: $slider-vertical-margin-top + margin-bottom: $slider-vertical-margin-bottom - > .v-input__control - min-height: $slider-vertical-min-height + > .v-input__control + min-height: $slider-vertical-min-height -.v-slider.v-input--disabled - pointer-events: none + .v-slider.v-input--disabled + pointer-events: none -.v-slider--has-labels > .v-input__control - margin-bottom: $slider-tick-label-margin-top * .5 + .v-slider--has-labels > .v-input__control + margin-bottom: $slider-tick-label-margin-top * .5 -.v-slider__label - margin-inline-end: $slider-label-margin-end + .v-slider__label + margin-inline-end: $slider-label-margin-end diff --git a/packages/vuetify/src/components/VSlider/VSliderThumb.sass b/packages/vuetify/src/components/VSlider/VSliderThumb.sass index dab1e18fa5a..977d221cd3d 100644 --- a/packages/vuetify/src/components/VSlider/VSliderThumb.sass +++ b/packages/vuetify/src/components/VSlider/VSliderThumb.sass @@ -5,150 +5,151 @@ @use '../../styles/tools' @use './variables' as * -// Theme -.v-slider-thumb - touch-action: none - color: rgb(var(--v-theme-surface-variant)) - - .v-input--error:not(.v-input--disabled) & - color: inherit - -.v-slider-thumb__label - background: rgba(var(--v-theme-surface-variant), .7) - color: rgb(var(--v-theme-on-surface-variant)) - - &::before - color: rgba(var(--v-theme-surface-variant), .7) - -// Block -.v-slider-thumb - outline: none - position: absolute - transition: $slider-transition - -.v-slider-thumb__surface - cursor: pointer - width: var(--v-slider-thumb-size) - height: var(--v-slider-thumb-size) - border-radius: $slider-thumb-border-radius - user-select: none - background-color: currentColor - - &::before - transition: 0.3s settings.$standard-easing - content: '' - color: inherit - top: 0 - left: 0 - width: 100% - height: 100% - border-radius: $slider-thumb-border-radius - background: currentColor - position: absolute - pointer-events: none - opacity: 0 - - &::after - content: '' - width: $slider-thumb-touch-size - height: $slider-thumb-touch-size - position: absolute - top: 50% - left: 50% - transform: translate(-50%, -50%) - -.v-slider-thumb__label-container - position: absolute - transition: $slider-thumb-label-transition - -.v-slider-thumb__label - display: flex - align-items: center - justify-content: center - font-size: $slider-thumb-label-font-size - min-width: $slider-thumb-label-min-width - height: $slider-thumb-label-height - border-radius: $slider-thumb-label-border-radius - padding: $slider-thumb-label-padding - position: absolute - user-select: none - transition: $slider-thumb-label-transition - - &::before - content: '' - width: 0 - height: 0 - position: absolute - -.v-slider-thumb__ripple - position: absolute - left: calc(var(--v-slider-thumb-size) / -2) - top: calc(var(--v-slider-thumb-size) / -2) - width: calc(var(--v-slider-thumb-size) * 2) - height: calc(var(--v-slider-thumb-size) * 2) - background: inherit - -// Horizontal -.v-slider.v-input--horizontal +@include tools.layer('components') + // Theme .v-slider-thumb - top: 50% - transform: translateY(-50%) - inset-inline-start: calc(var(--v-slider-thumb-position) - var(--v-slider-thumb-size) / 2) + touch-action: none + color: rgb(var(--v-theme-surface-variant)) - .v-slider-thumb__label-container - left: calc(var(--v-slider-thumb-size) / 2) - top: 0 + .v-input--error:not(.v-input--disabled) & + color: inherit .v-slider-thumb__label - bottom: $slider-thumb-label-offset - - +tools.ltr() - transform: translateX(-50%) - +tools.rtl() - transform: translateX(50%) + background: rgba(var(--v-theme-surface-variant), .7) + color: rgb(var(--v-theme-on-surface-variant)) &::before - border-left: $slider-thumb-label-wedge-size solid transparent - border-right: $slider-thumb-label-wedge-size solid transparent - border-top: $slider-thumb-label-wedge-size solid currentColor - bottom: -$slider-thumb-label-wedge-size + color: rgba(var(--v-theme-surface-variant), .7) -// Vertical -.v-slider.v-input--vertical + // Block .v-slider-thumb - top: calc(var(--v-slider-thumb-position) - var(--v-slider-thumb-size) / 2) - - .v-slider-thumb__label-container - top: calc(var(--v-slider-thumb-size) / 2) - right: 0 + outline: none + position: absolute + transition: $slider-transition - .v-slider-thumb__label - top: math.div($slider-thumb-label-height, -2) - left: $slider-thumb-label-offset + .v-slider-thumb__surface + cursor: pointer + width: var(--v-slider-thumb-size) + height: var(--v-slider-thumb-size) + border-radius: $slider-thumb-border-radius + user-select: none + background-color: currentColor &::before - border-right: $slider-thumb-label-wedge-size solid currentColor - border-top: $slider-thumb-label-wedge-size solid transparent - border-bottom: $slider-thumb-label-wedge-size solid transparent - left: -$slider-thumb-label-wedge-size + transition: 0.3s settings.$standard-easing + content: '' + color: inherit + top: 0 + left: 0 + width: 100% + height: 100% + border-radius: $slider-thumb-border-radius + background: currentColor + position: absolute + pointer-events: none + opacity: 0 + + &::after + content: '' + width: $slider-thumb-touch-size + height: $slider-thumb-touch-size + position: absolute + top: 50% + left: 50% + transform: translate(-50%, -50%) -// Modifiers -.v-slider-thumb--focused - .v-slider-thumb__surface::before - transform: scale(2) - opacity: $slider-thumb-focus-opacity + .v-slider-thumb__label-container + position: absolute + transition: $slider-thumb-label-transition -.v-slider-thumb--pressed - transition: none + .v-slider-thumb__label + display: flex + align-items: center + justify-content: center + font-size: $slider-thumb-label-font-size + min-width: $slider-thumb-label-min-width + height: $slider-thumb-label-height + border-radius: $slider-thumb-label-border-radius + padding: $slider-thumb-label-padding + position: absolute + user-select: none + transition: $slider-thumb-label-transition - .v-slider-thumb__surface::before - opacity: $slider-thumb-pressed-opacity + &::before + content: '' + width: 0 + height: 0 + position: absolute -@media (hover: hover) - .v-slider-thumb:hover + .v-slider-thumb__ripple + position: absolute + left: calc(var(--v-slider-thumb-size) / -2) + top: calc(var(--v-slider-thumb-size) / -2) + width: calc(var(--v-slider-thumb-size) * 2) + height: calc(var(--v-slider-thumb-size) * 2) + background: inherit + + // Horizontal + .v-slider.v-input--horizontal + .v-slider-thumb + top: 50% + transform: translateY(-50%) + inset-inline-start: calc(var(--v-slider-thumb-position) - var(--v-slider-thumb-size) / 2) + + .v-slider-thumb__label-container + left: calc(var(--v-slider-thumb-size) / 2) + top: 0 + + .v-slider-thumb__label + bottom: $slider-thumb-label-offset + + +tools.ltr() + transform: translateX(-50%) + +tools.rtl() + transform: translateX(50%) + + &::before + border-left: $slider-thumb-label-wedge-size solid transparent + border-right: $slider-thumb-label-wedge-size solid transparent + border-top: $slider-thumb-label-wedge-size solid currentColor + bottom: -$slider-thumb-label-wedge-size + + // Vertical + .v-slider.v-input--vertical + .v-slider-thumb + top: calc(var(--v-slider-thumb-position) - var(--v-slider-thumb-size) / 2) + + .v-slider-thumb__label-container + top: calc(var(--v-slider-thumb-size) / 2) + right: 0 + + .v-slider-thumb__label + top: math.div($slider-thumb-label-height, -2) + left: $slider-thumb-label-offset + + &::before + border-right: $slider-thumb-label-wedge-size solid currentColor + border-top: $slider-thumb-label-wedge-size solid transparent + border-bottom: $slider-thumb-label-wedge-size solid transparent + left: -$slider-thumb-label-wedge-size + + // Modifiers + .v-slider-thumb--focused .v-slider-thumb__surface::before transform: scale(2) + opacity: $slider-thumb-focus-opacity + + .v-slider-thumb--pressed + transition: none - .v-slider-thumb:hover:not(.v-slider-thumb--focused) .v-slider-thumb__surface::before - opacity: $slider-thumb-hover-opacity + opacity: $slider-thumb-pressed-opacity + + @media (hover: hover) + .v-slider-thumb:hover + .v-slider-thumb__surface::before + transform: scale(2) + + .v-slider-thumb:hover:not(.v-slider-thumb--focused) + .v-slider-thumb__surface::before + opacity: $slider-thumb-hover-opacity diff --git a/packages/vuetify/src/components/VSlider/VSliderTrack.sass b/packages/vuetify/src/components/VSlider/VSliderTrack.sass index fab056971a6..0e457ac997d 100644 --- a/packages/vuetify/src/components/VSlider/VSliderTrack.sass +++ b/packages/vuetify/src/components/VSlider/VSliderTrack.sass @@ -4,156 +4,157 @@ @use '../../styles/tools' @use './variables' as * -// Theme -.v-slider-track__background - background-color: rgb(var(--v-theme-surface-variant)) +@include tools.layer('components') + // Theme + .v-slider-track__background + background-color: rgb(var(--v-theme-surface-variant)) -.v-slider-track__fill - background-color: rgb(var(--v-theme-surface-variant)) + .v-slider-track__fill + background-color: rgb(var(--v-theme-surface-variant)) -.v-slider-track__tick - background-color: rgb(var(--v-theme-surface-variant)) + .v-slider-track__tick + background-color: rgb(var(--v-theme-surface-variant)) - &--filled - background-color: $slider-tick-background + &--filled + background-color: $slider-tick-background -// Elements -.v-slider-track - border-radius: $slider-track-border-radius + // Elements + .v-slider-track + border-radius: $slider-track-border-radius -.v-slider-track - &__background, &__fill - position: absolute - transition: $slider-transition - border-radius: inherit - - .v-slider--pressed & - transition: none - - .v-input--error:not(.v-input--disabled) & - background-color: currentColor - -.v-slider-track__ticks - height: 100% - width: 100% - position: relative - -.v-slider-track__tick - position: absolute - opacity: 0 - transition: 0.2s opacity settings.$standard-easing - border-radius: $slider-tick-border-radius - width: var(--v-slider-tick-size) - height: var(--v-slider-tick-size) - transform: translate(calc(var(--v-slider-tick-size) / -2), calc(var(--v-slider-tick-size) / -2)) - - &--first .v-slider-track__tick-label - @include tools.ltr() - transform: none - - @include tools.rtl() - transform: translateX(100%) - - &--last .v-slider-track__tick-label - @include tools.ltr() - transform: translateX(-100%) - - @include tools.rtl() - transform: none - -.v-slider-track__tick-label - position: absolute - user-select: none - white-space: nowrap - -// Horizontal -.v-slider.v-input--horizontal .v-slider-track - display: flex - align-items: center - width: 100% - height: $slider-track-active-size - touch-action: pan-y + &__background, &__fill + position: absolute + transition: $slider-transition + border-radius: inherit - &__background - height: var(--v-slider-track-size) + .v-slider--pressed & + transition: none - &__fill - height: inherit + .v-input--error:not(.v-input--disabled) & + background-color: currentColor - .v-slider-track__tick - margin-top: calc(#{$slider-track-active-size} / 2) + .v-slider-track__ticks + height: 100% + width: 100% + position: relative - @include tools.rtl() - transform: translate(calc(var(--v-slider-tick-size) / 2), calc(var(--v-slider-tick-size) / -2)) + .v-slider-track__tick + position: absolute + opacity: 0 + transition: 0.2s opacity settings.$standard-easing + border-radius: $slider-tick-border-radius + width: var(--v-slider-tick-size) + height: var(--v-slider-tick-size) + transform: translate(calc(var(--v-slider-tick-size) / -2), calc(var(--v-slider-tick-size) / -2)) + + &--first .v-slider-track__tick-label + @include tools.ltr() + transform: none - .v-slider-track__tick-label - margin-top: calc(var(--v-slider-track-size) / 2 + #{$slider-tick-label-margin-top}) + @include tools.rtl() + transform: translateX(100%) + &--last .v-slider-track__tick-label @include tools.ltr() - transform: translateX(-50%) + transform: translateX(-100%) @include tools.rtl() - transform: translateX(50%) + transform: none + + .v-slider-track__tick-label + position: absolute + user-select: none + white-space: nowrap - &--first - margin-inline-start: calc(var(--v-slider-tick-size) + 1px) + // Horizontal + .v-slider.v-input--horizontal + .v-slider-track + display: flex + align-items: center + width: 100% + height: $slider-track-active-size + touch-action: pan-y - .v-slider-track__tick-label - @include tools.ltr() - transform: translateX(0%) + &__background + height: var(--v-slider-track-size) - @include tools.rtl() - transform: translateX(0%) + &__fill + height: inherit - &--last - margin-inline-start: calc(100% - var(--v-slider-tick-size) - 1px) + .v-slider-track__tick + margin-top: calc(#{$slider-track-active-size} / 2) + + @include tools.rtl() + transform: translate(calc(var(--v-slider-tick-size) / 2), calc(var(--v-slider-tick-size) / -2)) .v-slider-track__tick-label + margin-top: calc(var(--v-slider-track-size) / 2 + #{$slider-tick-label-margin-top}) + @include tools.ltr() - transform: translateX(-100%) + transform: translateX(-50%) @include tools.rtl() - transform: translateX(100%) + transform: translateX(50%) -// Vertical -.v-slider.v-input--vertical - .v-slider-track - height: 100% - display: flex - justify-content: center - width: $slider-track-active-size - touch-action: pan-x + &--first + margin-inline-start: calc(var(--v-slider-tick-size) + 1px) - &__background - width: var(--v-slider-track-size) + .v-slider-track__tick-label + @include tools.ltr() + transform: translateX(0%) - &__fill - width: inherit + @include tools.rtl() + transform: translateX(0%) - .v-slider-track__ticks - height: 100% + &--last + margin-inline-start: calc(100% - var(--v-slider-tick-size) - 1px) - .v-slider-track__tick - margin-inline-start: calc(#{$slider-track-active-size} / 2) - transform: translate(calc(var(--v-slider-tick-size) / -2), calc(var(--v-slider-tick-size) / 2)) + .v-slider-track__tick-label + @include tools.ltr() + transform: translateX(-100%) - @include tools.rtl() - transform: translate(calc(var(--v-slider-tick-size) / 2), calc(var(--v-slider-tick-size) / 2)) + @include tools.rtl() + transform: translateX(100%) - &--first - bottom: calc(0% + var(--v-slider-tick-size) + 1px) - &--last - bottom: calc(100% - var(--v-slider-tick-size) - 1px) + // Vertical + .v-slider.v-input--vertical + .v-slider-track + height: 100% + display: flex + justify-content: center + width: $slider-track-active-size + touch-action: pan-x - .v-slider-track__tick-label - margin-inline-start: calc(var(--v-slider-track-size) / 2 + #{$slider-tick-label-margin-start}) - transform: translateY(-50%) + &__background + width: var(--v-slider-track-size) -// Modifiers -.v-slider-track__ticks--always-show, .v-slider--focused - .v-slider-track__tick - opacity: 1 + &__fill + width: inherit + + .v-slider-track__ticks + height: 100% + + .v-slider-track__tick + margin-inline-start: calc(#{$slider-track-active-size} / 2) + transform: translate(calc(var(--v-slider-tick-size) / -2), calc(var(--v-slider-tick-size) / 2)) + + @include tools.rtl() + transform: translate(calc(var(--v-slider-tick-size) / 2), calc(var(--v-slider-tick-size) / 2)) + + &--first + bottom: calc(0% + var(--v-slider-tick-size) + 1px) + &--last + bottom: calc(100% - var(--v-slider-tick-size) - 1px) + + .v-slider-track__tick-label + margin-inline-start: calc(var(--v-slider-track-size) / 2 + #{$slider-tick-label-margin-start}) + transform: translateY(-50%) + + // Modifiers + .v-slider-track__ticks--always-show, .v-slider--focused + .v-slider-track__tick + opacity: 1 -.v-slider-track__background--opacity - opacity: 0.38 + .v-slider-track__background--opacity + opacity: 0.38 diff --git a/packages/vuetify/src/components/VSnackbar/VSnackbar.sass b/packages/vuetify/src/components/VSnackbar/VSnackbar.sass index bc021f39018..1c16e8a82c6 100644 --- a/packages/vuetify/src/components/VSnackbar/VSnackbar.sass +++ b/packages/vuetify/src/components/VSnackbar/VSnackbar.sass @@ -2,86 +2,87 @@ @use '../../styles/settings' @use './variables' as * -.v-snackbar - justify-content: center - z-index: $snackbar-z-index - margin: $snackbar-wrapper-margin - margin-inline-end: calc(#{$snackbar-wrapper-margin} + var(--v-scrollbar-offset)) - - &:not(.v-snackbar--centered):not(.v-snackbar--top) - align-items: flex-end - - &__wrapper - align-items: center - display: flex - max-width: $snackbar-wrapper-max-width - min-height: $snackbar-wrapper-min-height - min-width: $snackbar-wrapper-min-width - overflow: hidden - padding: $snackbar-wrapper-padding - - @include tools.rounded($snackbar-border-radius) - - @at-root .v-snackbar - @include tools.variant($snackbar-variants...) - - &__content - flex-grow: 1 - font-size: $snackbar-font-size - font-weight: $snackbar-font-weight - letter-spacing: $snackbar-letter-spacing - line-height: $snackbar-line-height - margin-right: auto - padding: $snackbar-content-padding - text-align: initial - - &__actions - align-items: center - align-self: center - display: flex - margin-inline-end: $snackbar-action-margin - - & > .v-btn - padding: $snackbar-btn-padding - min-width: auto - - &__timer - width: 100% - position: absolute - top: 0 - - .v-progress-linear - transition: .2s linear - - &--absolute - position: absolute - z-index: $snackbar-absolute-z-index - - &--multi-line &__wrapper - min-height: $snackbar-multi-line-wrapper-min-height - - &--vertical &__wrapper - flex-direction: column - - .v-snackbar__actions - align-self: flex-end - margin-bottom: $snackbar-vertical-action-margin-bottom - -.v-snackbar-transition - &-enter-active, - &-leave-active - transition-duration: .15s - transition-timing-function: settings.$decelerated-easing - - &-enter-active - transition-property: opacity, transform - - &-enter-from - opacity: 0 - transform: scale($snackbar-transition-scale) - - &-leave-active - transition-property: opacity - - &-leave-to - opacity: 0 +@include tools.layer('components') + .v-snackbar + justify-content: center + z-index: $snackbar-z-index + margin: $snackbar-wrapper-margin + margin-inline-end: calc(#{$snackbar-wrapper-margin} + var(--v-scrollbar-offset)) + + &:not(.v-snackbar--centered):not(.v-snackbar--top) + align-items: flex-end + + &__wrapper + align-items: center + display: flex + max-width: $snackbar-wrapper-max-width + min-height: $snackbar-wrapper-min-height + min-width: $snackbar-wrapper-min-width + overflow: hidden + padding: $snackbar-wrapper-padding + + @include tools.rounded($snackbar-border-radius) + + @at-root .v-snackbar + @include tools.variant($snackbar-variants...) + + &__content + flex-grow: 1 + font-size: $snackbar-font-size + font-weight: $snackbar-font-weight + letter-spacing: $snackbar-letter-spacing + line-height: $snackbar-line-height + margin-right: auto + padding: $snackbar-content-padding + text-align: initial + + &__actions + align-items: center + align-self: center + display: flex + margin-inline-end: $snackbar-action-margin + + & > .v-btn + padding: $snackbar-btn-padding + min-width: auto + + &__timer + width: 100% + position: absolute + top: 0 + + .v-progress-linear + transition: .2s linear + + &--absolute + position: absolute + z-index: $snackbar-absolute-z-index + + &--multi-line &__wrapper + min-height: $snackbar-multi-line-wrapper-min-height + + &--vertical &__wrapper + flex-direction: column + + .v-snackbar__actions + align-self: flex-end + margin-bottom: $snackbar-vertical-action-margin-bottom + + .v-snackbar-transition + &-enter-active, + &-leave-active + transition-duration: .15s + transition-timing-function: settings.$decelerated-easing + + &-enter-active + transition-property: opacity, transform + + &-enter-from + opacity: 0 + transform: scale($snackbar-transition-scale) + + &-leave-active + transition-property: opacity + + &-leave-to + opacity: 0 diff --git a/packages/vuetify/src/components/VStepper/VStepper.sass b/packages/vuetify/src/components/VStepper/VStepper.sass index 69284526251..fb72c89d0e2 100644 --- a/packages/vuetify/src/components/VStepper/VStepper.sass +++ b/packages/vuetify/src/components/VStepper/VStepper.sass @@ -2,52 +2,53 @@ @use '../../styles/tools' @use './variables' as * -.v-stepper.v-sheet - @include tools.elevation($stepper-elevation) - @include tools.rounded($stepper-border-radius) +@include tools.layer('components') + .v-stepper.v-sheet + @include tools.elevation($stepper-elevation) + @include tools.rounded($stepper-border-radius) - overflow: hidden + overflow: hidden - &.v-stepper--flat - @include tools.elevation(0) + &.v-stepper--flat + @include tools.elevation(0) -.v-stepper-header - @include tools.elevation($stepper-header-elevation) + .v-stepper-header + @include tools.elevation($stepper-header-elevation) - align-items: center - display: flex - position: relative - overflow-x: auto - justify-content: space-between - z-index: 1 + align-items: center + display: flex + position: relative + overflow-x: auto + justify-content: space-between + z-index: 1 - .v-divider - margin: $stepper-header-divider-margin + .v-divider + margin: $stepper-header-divider-margin - &:last-child - margin-inline-end: 0 + &:last-child + margin-inline-end: 0 - &:first-child - margin-inline-start: 0 + &:first-child + margin-inline-start: 0 - .v-stepper--alt-labels & - height: auto + .v-stepper--alt-labels & + height: auto - .v-divider - align-self: flex-start - margin: $stepper-alt-labels-header-divider + .v-divider + align-self: flex-start + margin: $stepper-alt-labels-header-divider -.v-stepper-window - margin: $stepper-window-margin + .v-stepper-window + margin: $stepper-window-margin -.v-stepper-actions - display: flex - align-items: center - justify-content: space-between - padding: $stepper-actions-padding + .v-stepper-actions + display: flex + align-items: center + justify-content: space-between + padding: $stepper-actions-padding - .v-stepper & - padding: $stepper-actions-stepper-padding + .v-stepper & + padding: $stepper-actions-stepper-padding - .v-stepper-window-item & - padding: $stepper-actions-stepper-window-item-padding + .v-stepper-window-item & + padding: $stepper-actions-stepper-window-item-padding diff --git a/packages/vuetify/src/components/VStepper/VStepperItem.sass b/packages/vuetify/src/components/VStepper/VStepperItem.sass index be3d5b7f3d8..26b21fd56ea 100644 --- a/packages/vuetify/src/components/VStepper/VStepperItem.sass +++ b/packages/vuetify/src/components/VStepper/VStepperItem.sass @@ -1,71 +1,73 @@ @use '../../styles/settings' +@use '../../styles/tools' @use './variables' as * -.v-stepper-item - align-items: center - align-self: stretch - display: inline-flex - flex: none - opacity: $stepper-item-opacity - padding: $stepper-item-padding - transition-duration: $stepper-item-transition-duration - transition-property: $stepper-item-transition-property - transition-timing-function: $stepper-item-transition-timing-function - - &--selected - opacity: 1 - - &--error - color: rgb(var(--v-theme-error)) - - &--disabled - opacity: var(--v-medium-emphasis-opacity) - pointer-events: none - - .v-stepper--alt-labels & - flex-direction: column - justify-content: flex-start +@include tools.layer('components') + .v-stepper-item align-items: center - flex-basis: $stepper-alt-labels-flex-basis - -.v-stepper-item__avatar.v-avatar - background: $stepper-item-avatar-background - color: $stepper-item-avatar-color - font-size: $stepper-item-avatar-font-size - margin-inline-end: $stepper-item-avatar-margin-inline-end - - .v-icon - font-size: $stepper-item-avatar-icon-font-size - - .v-stepper-item--selected &, - .v-stepper-item--complete & - background: rgb(var(--v-theme-surface-variant)) - - .v-stepper-item--error & - background: rgb(var(--v-theme-error)) - - .v-stepper--alt-labels & - margin-bottom: $stepper-item-alt-labels-margin-bottom - margin-inline-end: 0 - -.v-stepper-item__content - .v-stepper--alt-labels & - // min-height: 28px - -.v-stepper-item__title - line-height: $stepper-item-title-line-height - - .v-stepper--mobile & - display: none - -.v-stepper-item__subtitle - font-size: $stepper-item-subtitle-font-size - text-align: left - line-height: $stepper-item-subtitle-line-height - opacity: $stepper-item-subtitle-opacity - - .v-stepper--alt-labels & - text-align: center - - .v-stepper--mobile & - display: none + align-self: stretch + display: inline-flex + flex: none + opacity: $stepper-item-opacity + padding: $stepper-item-padding + transition-duration: $stepper-item-transition-duration + transition-property: $stepper-item-transition-property + transition-timing-function: $stepper-item-transition-timing-function + + &--selected + opacity: 1 + + &--error + color: rgb(var(--v-theme-error)) + + &--disabled + opacity: var(--v-medium-emphasis-opacity) + pointer-events: none + + .v-stepper--alt-labels & + flex-direction: column + justify-content: flex-start + align-items: center + flex-basis: $stepper-alt-labels-flex-basis + + .v-stepper-item__avatar.v-avatar + background: $stepper-item-avatar-background + color: $stepper-item-avatar-color + font-size: $stepper-item-avatar-font-size + margin-inline-end: $stepper-item-avatar-margin-inline-end + + .v-icon + font-size: $stepper-item-avatar-icon-font-size + + .v-stepper-item--selected &, + .v-stepper-item--complete & + background: rgb(var(--v-theme-surface-variant)) + + .v-stepper-item--error & + background: rgb(var(--v-theme-error)) + + .v-stepper--alt-labels & + margin-bottom: $stepper-item-alt-labels-margin-bottom + margin-inline-end: 0 + + //.v-stepper-item__content + // .v-stepper--alt-labels & + // min-height: 28px + + .v-stepper-item__title + line-height: $stepper-item-title-line-height + + .v-stepper--mobile & + display: none + + .v-stepper-item__subtitle + font-size: $stepper-item-subtitle-font-size + text-align: left + line-height: $stepper-item-subtitle-line-height + opacity: $stepper-item-subtitle-opacity + + .v-stepper--alt-labels & + text-align: center + + .v-stepper--mobile & + display: none diff --git a/packages/vuetify/src/components/VSwitch/VSwitch.sass b/packages/vuetify/src/components/VSwitch/VSwitch.sass index 8ed2ba3bfc7..3d3a8d5d874 100644 --- a/packages/vuetify/src/components/VSwitch/VSwitch.sass +++ b/packages/vuetify/src/components/VSwitch/VSwitch.sass @@ -3,127 +3,128 @@ @use '../../styles/tools' @use './variables' as * -.v-switch - .v-label - padding-inline-start: $switch-label-margin-inline-start - -.v-switch__loader - display: flex - - .v-progress-circular - color: $switch-loader-color - -.v-switch__track, -.v-switch__thumb - transition: none - - .v-selection-control--error:not(.v-selection-control--disabled) & - background-color: $switch-error-background-color - color: $switch-error-color - -.v-switch__track-true - margin-inline-end: auto - - .v-selection-control:not(.v-selection-control--dirty) & - opacity: 0 - -.v-switch__track-false - margin-inline-start: auto - - .v-selection-control--dirty & - opacity: 0 - -.v-switch__track - display: inline-flex - align-items: center - font-size: .5rem - padding: 0 5px - background-color: $switch-track-background - border-radius: $switch-track-radius - height: $switch-track-height - opacity: $switch-track-opacity - min-width: $switch-track-width - cursor: pointer - transition: $switch-track-transition - - .v-switch--inset & - border-radius: $switch-inset-track-border-radius +@include tools.layer('components') + .v-switch + .v-label + padding-inline-start: $switch-label-margin-inline-start + + .v-switch__loader + display: flex + + .v-progress-circular + color: $switch-loader-color + + .v-switch__track, + .v-switch__thumb + transition: none + + .v-selection-control--error:not(.v-selection-control--disabled) & + background-color: $switch-error-background-color + color: $switch-error-color + + .v-switch__track-true + margin-inline-end: auto + + .v-selection-control:not(.v-selection-control--dirty) & + opacity: 0 + + .v-switch__track-false + margin-inline-start: auto + + .v-selection-control--dirty & + opacity: 0 + + .v-switch__track + display: inline-flex + align-items: center + font-size: .5rem + padding: 0 5px + background-color: $switch-track-background + border-radius: $switch-track-radius + height: $switch-track-height + opacity: $switch-track-opacity + min-width: $switch-track-width + cursor: pointer + transition: $switch-track-transition + + .v-switch--inset & + border-radius: $switch-inset-track-border-radius + font-size: .75rem + height: $switch-inset-track-height + min-width: $switch-inset-track-width + + .v-switch__thumb + align-items: center + background-color: $switch-thumb-background + color: $switch-thumb-color + border-radius: $switch-thumb-radius + display: flex font-size: .75rem - height: $switch-inset-track-height - min-width: $switch-inset-track-width - -.v-switch__thumb - align-items: center - background-color: $switch-thumb-background - color: $switch-thumb-color - border-radius: $switch-thumb-radius - display: flex - font-size: .75rem - height: $switch-thumb-height - justify-content: center - width: $switch-thumb-width - pointer-events: none - transition: $switch-thumb-transition - position: relative - overflow: hidden - - .v-switch:not(.v-switch--inset) & - @include tools.elevation($switch-thumb-elevation) - - .v-switch.v-switch--flat:not(.v-switch--inset) & - background: $switch-thumb-flat-background - color: $switch-thumb-flat-color - - @include tools.elevation(0) - - .v-switch--inset & - height: $switch-inset-thumb-height - width: $switch-inset-thumb-width - transform: scale(calc($switch-inset-thumb-off-height / $switch-inset-thumb-height)) - - &--filled - transform: none + height: $switch-thumb-height + justify-content: center + width: $switch-thumb-width + pointer-events: none + transition: $switch-thumb-transition + position: relative + overflow: hidden - .v-switch--inset .v-selection-control--dirty & - transform: none - transition: .15s .05s transform settings.$decelerated-easing + .v-switch:not(.v-switch--inset) & + @include tools.elevation($switch-thumb-elevation) -.v-switch - $switch-thumb-transform: $switch-track-width * .5 - $switch-thumb-width * .5 + $switch-thumb-offset + .v-switch.v-switch--flat:not(.v-switch--inset) & + background: $switch-thumb-flat-background + color: $switch-thumb-flat-color - &.v-input - flex: $switch-flex + @include tools.elevation(0) - .v-selection-control - min-height: var(--v-input-control-height) + .v-switch--inset & + height: $switch-inset-thumb-height + width: $switch-inset-thumb-width + transform: scale(calc($switch-inset-thumb-off-height / $switch-inset-thumb-height)) - .v-selection-control__input - border-radius: 50% - transition: $switch-control-input-transition - transform: translateX(-$switch-thumb-transform) - position: absolute + &--filled + transform: none - .v-icon - position: absolute + .v-switch--inset .v-selection-control--dirty & + transform: none + transition: .15s .05s transform settings.$decelerated-easing - .v-selection-control--dirty - .v-selection-control__input - transform: translateX($switch-thumb-transform) + .v-switch + $switch-thumb-transform: $switch-track-width * .5 - $switch-thumb-width * .5 + $switch-thumb-offset + + &.v-input + flex: $switch-flex + + .v-selection-control + min-height: var(--v-input-control-height) - &.v-switch--indeterminate .v-selection-control__input - transform: scale(.8) - .v-switch__thumb - transform: scale(.75) - box-shadow: none + border-radius: 50% + transition: $switch-control-input-transition + transform: translateX(-$switch-thumb-transform) + position: absolute - &.v-switch--inset - .v-selection-control__wrapper - width: auto + .v-icon + position: absolute - &.v-input--vertical - .v-label - min-width: max-content + .v-selection-control--dirty + .v-selection-control__input + transform: translateX($switch-thumb-transform) + + &.v-switch--indeterminate + .v-selection-control__input + transform: scale(.8) + .v-switch__thumb + transform: scale(.75) + box-shadow: none + + &.v-switch--inset + .v-selection-control__wrapper + width: auto + + &.v-input--vertical + .v-label + min-width: max-content - .v-selection-control__wrapper - transform: $switch-thumb-vertical-transform + .v-selection-control__wrapper + transform: $switch-thumb-vertical-transform diff --git a/packages/vuetify/src/components/VSystemBar/VSystemBar.sass b/packages/vuetify/src/components/VSystemBar/VSystemBar.sass index 8fc6b7b3762..bf40285239c 100644 --- a/packages/vuetify/src/components/VSystemBar/VSystemBar.sass +++ b/packages/vuetify/src/components/VSystemBar/VSystemBar.sass @@ -1,31 +1,32 @@ @use '../../styles/tools' @use './variables' as * -.v-system-bar - align-items: center - display: flex - flex: $system-bar-flex - height: $system-bar-height - justify-content: $system-bar-justify-content - max-width: 100% - padding-inline: $system-bar-padding-x - position: relative - text-align: $system-bar-text-align - width: 100% +@include tools.layer('components') + .v-system-bar + align-items: center + display: flex + flex: $system-bar-flex + height: $system-bar-height + justify-content: $system-bar-justify-content + max-width: 100% + padding-inline: $system-bar-padding-x + position: relative + text-align: $system-bar-text-align + width: 100% - .v-icon - opacity: $system-bar-icon-opacity + .v-icon + opacity: $system-bar-icon-opacity - @include tools.elevation($system-bar-elevation) - @include tools.position($system-bar-positions) - @include tools.theme($system-bar-theme...) - @include tools.typography($system-bar-typography...) + @include tools.elevation($system-bar-elevation) + @include tools.position($system-bar-positions) + @include tools.theme($system-bar-theme...) + @include tools.typography($system-bar-typography...) - &--rounded - @include tools.rounded($system-bar-border-radius) + &--rounded + @include tools.rounded($system-bar-border-radius) - &--window - height: $system-bar-window-height + &--window + height: $system-bar-window-height - &:not(.v-system-bar--absolute) - padding-inline-end: calc(var(--v-scrollbar-offset) + #{$system-bar-padding-x}) + &:not(.v-system-bar--absolute) + padding-inline-end: calc(var(--v-scrollbar-offset) + #{$system-bar-padding-x}) diff --git a/packages/vuetify/src/components/VTable/VTable.sass b/packages/vuetify/src/components/VTable/VTable.sass index 1ea5250faeb..f59fa487414 100644 --- a/packages/vuetify/src/components/VTable/VTable.sass +++ b/packages/vuetify/src/components/VTable/VTable.sass @@ -3,167 +3,168 @@ @use './variables' as * @use './mixins' as * -// Theme -.v-table - @include tools.theme($table-theme...) +@include tools.layer('components') + // Theme + .v-table + @include tools.theme($table-theme...) - font-size: $table-font-size - transition-duration: $table-transition-duration - transition-property: $table-transition-property - transition-timing-function: $table-transition-timing-function + font-size: $table-font-size + transition-duration: $table-transition-duration + transition-property: $table-transition-property + transition-timing-function: $table-transition-timing-function - .v-table-divider - border-right: $table-border + .v-table-divider + border-right: $table-border - .v-table__wrapper - > table - > thead - > tr - > th - border-bottom: $table-border - - > tbody - > tr - &:not(:last-child) - > td, + .v-table__wrapper + > table + > thead + > tr > th border-bottom: $table-border + > tbody + > tr + &:not(:last-child) + > td, + > th + border-bottom: $table-border + + > tfoot + > tr + > td, + > th + border-top: $table-border + + + &.v-table--hover + > .v-table__wrapper + > table + > tbody + > tr + > td + position: relative + + &:hover > td::after + @include tools.absolute(true) + background: $table-hover-color + pointer-events: none + + &.v-table--fixed-header + > .v-table__wrapper + > table + > thead + > tr + > th + background: $table-background + box-shadow: inset 0 -1px 0 $table-border-color + z-index: 1 + + &.v-table--fixed-footer > tfoot > tr + > th, + > td + background: $table-background + box-shadow: inset 0 1px 0 $table-border-color + + // Block + .v-table + border-radius: inherit + // Do not inherit line-height + line-height: $table-line-height + max-width: 100% + display: flex + flex-direction: column + + > .v-table__wrapper + > table + width: 100% + border-spacing: 0 + + > tbody, + > thead, + > tfoot + > tr > td, > th - border-top: $table-border + padding: $table-column-padding + transition-duration: $table-transition-duration + transition-property: $table-transition-property + transition-timing-function: $table-transition-timing-function + > td + height: var(--v-table-row-height) + + > th + height: var(--v-table-header-height) + font-weight: $table-header-font-weight + user-select: none + text-align: start + + @at-root + @include tools.density('v-table', $table-density) using ($modifier) + --v-table-header-height: #{$table-header-height + $modifier} + --v-table-row-height: #{$table-row-height + $modifier} + + // Elements + .v-table__wrapper + border-radius: inherit + overflow: auto + flex: 1 1 auto - &.v-table--hover + // Modifiers + .v-table--has-top > .v-table__wrapper > table > tbody > tr - > td - position: relative + &:first-child + &:hover + > td + &:first-child + border-top-left-radius: 0 - &:hover > td::after - @include tools.absolute(true) - background: $table-hover-color - pointer-events: none + &:last-child + border-top-right-radius: 0 - &.v-table--fixed-header + .v-table--has-bottom > .v-table__wrapper > table - > thead + > tbody > tr - > th - background: $table-background - box-shadow: inset 0 -1px 0 $table-border-color - z-index: 1 - - &.v-table--fixed-footer - > tfoot - > tr - > th, - > td - background: $table-background - box-shadow: inset 0 1px 0 $table-border-color - -// Block -.v-table - border-radius: inherit - // Do not inherit line-height - line-height: $table-line-height - max-width: 100% - display: flex - flex-direction: column - - > .v-table__wrapper - > table - width: 100% - border-spacing: 0 - - > tbody, - > thead, - > tfoot - > tr - > td, - > th - padding: $table-column-padding - transition-duration: $table-transition-duration - transition-property: $table-transition-property - transition-timing-function: $table-transition-timing-function - - > td - height: var(--v-table-row-height) - - > th - height: var(--v-table-header-height) - font-weight: $table-header-font-weight - user-select: none - text-align: start - - @at-root - @include tools.density('v-table', $table-density) using ($modifier) - --v-table-header-height: #{$table-header-height + $modifier} - --v-table-row-height: #{$table-row-height + $modifier} - -// Elements -.v-table__wrapper - border-radius: inherit - overflow: auto - flex: 1 1 auto - -// Modifiers -.v-table--has-top - > .v-table__wrapper - > table - > tbody - > tr - &:first-child - &:hover - > td - &:first-child - border-top-left-radius: 0 + &:last-child + &:hover + > td + &:first-child + border-bottom-left-radius: 0 - &:last-child - border-top-right-radius: 0 + &:last-child + border-bottom-right-radius: 0 -.v-table--has-bottom - > .v-table__wrapper - > table - > tbody - > tr - &:last-child - &:hover - > td - &:first-child - border-bottom-left-radius: 0 - - &:last-child - border-bottom-right-radius: 0 - -.v-table--fixed-height - > .v-table__wrapper - overflow-y: auto - -.v-table--fixed-header - > .v-table__wrapper - > table - > thead - position: sticky - top: 0 - z-index: 2 - > tr - > th - border-bottom: 0px !important + .v-table--fixed-height + > .v-table__wrapper + overflow-y: auto -.v-table--fixed-footer - > .v-table__wrapper - > table - > tfoot - > tr + .v-table--fixed-header + > .v-table__wrapper + > table + > thead position: sticky - bottom: 0 - z-index: 1 - > td, - > th - border-top: 0px !important + top: 0 + z-index: 2 + > tr + > th + border-bottom: 0px !important + + .v-table--fixed-footer + > .v-table__wrapper + > table + > tfoot + > tr + position: sticky + bottom: 0 + z-index: 1 + > td, + > th + border-top: 0px !important diff --git a/packages/vuetify/src/components/VTabs/VTab.sass b/packages/vuetify/src/components/VTabs/VTab.sass index 7ab79394a81..61d267145ff 100644 --- a/packages/vuetify/src/components/VTabs/VTab.sass +++ b/packages/vuetify/src/components/VTabs/VTab.sass @@ -1,32 +1,34 @@ +@use '../../styles/tools' @use './variables' as * -.v-tab - // override v-btn size specificity - &.v-tab.v-btn - height: var(--v-tabs-height) - border-radius: $tab-border-radius - min-width: $tab-min-width +@include tools.layer('components') + .v-tab + // override v-btn size specificity + &.v-tab.v-btn + height: var(--v-tabs-height) + border-radius: $tab-border-radius + min-width: $tab-min-width - .v-slide-group--horizontal & - max-width: $tab-max-width + .v-slide-group--horizontal & + max-width: $tab-max-width - .v-slide-group--vertical & - justify-content: start + .v-slide-group--vertical & + justify-content: start -.v-tab__slider - position: absolute - bottom: 0 - left: 0 - height: $tab-slider-size - width: 100% - background: currentColor - pointer-events: none - opacity: 0 + .v-tab__slider + position: absolute + bottom: 0 + left: 0 + height: $tab-slider-size + width: 100% + background: currentColor + pointer-events: none + opacity: 0 - .v-tab--selected & - opacity: 1 + .v-tab--selected & + opacity: 1 - .v-slide-group--vertical & - top: 0 - height: 100% - width: $tab-slider-size + .v-slide-group--vertical & + top: 0 + height: 100% + width: $tab-slider-size diff --git a/packages/vuetify/src/components/VTabs/VTabs.sass b/packages/vuetify/src/components/VTabs/VTabs.sass index 8dfb0fc6903..382dcc35a2b 100644 --- a/packages/vuetify/src/components/VTabs/VTabs.sass +++ b/packages/vuetify/src/components/VTabs/VTabs.sass @@ -4,51 +4,52 @@ @use '../../styles/tools' @use './variables' as * -.v-tabs - display: flex - height: var(--v-tabs-height) +@include tools.layer('components') + .v-tabs + display: flex + height: var(--v-tabs-height) - @at-root - @include tools.density('v-tabs', $tabs-density) using ($modifier) - --v-tabs-height: #{$tabs-height + $modifier} + @at-root + @include tools.density('v-tabs', $tabs-density) using ($modifier) + --v-tabs-height: #{$tabs-height + $modifier} - &.v-tabs--stacked - --v-tabs-height: #{$tabs-stacked-height + $modifier} + &.v-tabs--stacked + --v-tabs-height: #{$tabs-stacked-height + $modifier} - &.v-slide-group--vertical - height: auto - flex: none - --v-tabs-height: #{$tabs-height} + &.v-slide-group--vertical + height: auto + flex: none + --v-tabs-height: #{$tabs-height} -.v-tabs--align-tabs-title:not(.v-slide-group--has-affixes) - .v-tab:first-child - margin-inline-start: $tab-align-tabs-title-margin - -.v-tabs--fixed-tabs, -.v-tabs--align-tabs-center - .v-slide-group__content > *:last-child - margin-inline-end: auto - - .v-slide-group__content > *:first-child - margin-inline-start: auto + .v-tabs--align-tabs-title:not(.v-slide-group--has-affixes) + .v-tab:first-child + margin-inline-start: $tab-align-tabs-title-margin -.v-tabs--grow - flex-grow: 1 + .v-tabs--fixed-tabs, + .v-tabs--align-tabs-center + .v-slide-group__content > *:last-child + margin-inline-end: auto - .v-tab - flex: 1 0 auto - max-width: none + .v-slide-group__content > *:first-child + margin-inline-start: auto -.v-tabs--align-tabs-end - .v-tab:first-child - margin-inline-start: auto + .v-tabs--grow + flex-grow: 1 - .v-tab:last-child - margin-inline-end: 0 + .v-tab + flex: 1 0 auto + max-width: none -@media #{map-get(settings.$display-breakpoints, 'md-and-down')} - .v-tabs.v-slide-group--is-overflowing.v-slide-group--horizontal:not(.v-slide-group--has-affixes) + .v-tabs--align-tabs-end .v-tab:first-child - margin-inline-start: 52px + margin-inline-start: auto + .v-tab:last-child - margin-inline-end: 52px + margin-inline-end: 0 + + @media #{map-get(settings.$display-breakpoints, 'md-and-down')} + .v-tabs.v-slide-group--is-overflowing.v-slide-group--horizontal:not(.v-slide-group--has-affixes) + .v-tab:first-child + margin-inline-start: 52px + .v-tab:last-child + margin-inline-end: 52px diff --git a/packages/vuetify/src/components/VTextField/VTextField.sass b/packages/vuetify/src/components/VTextField/VTextField.sass index 5f6810a7f04..f7a57b5d1c0 100644 --- a/packages/vuetify/src/components/VTextField/VTextField.sass +++ b/packages/vuetify/src/components/VTextField/VTextField.sass @@ -1,74 +1,76 @@ @use 'sass:selector' @use '../../styles/settings' +@use '../../styles/tools' @use './variables' as * -/* region BLOCK */ -.v-text-field - input - color: inherit - opacity: 0 - flex: $text-field-input-flex - transition: $text-field-input-transition - min-width: 0 +@include tools.layer('components') + /* region BLOCK */ + .v-text-field + input + color: inherit + opacity: 0 + flex: $text-field-input-flex + transition: $text-field-input-transition + min-width: 0 - &:focus, - &:active - outline: none + &:focus, + &:active + outline: none - // Remove Firefox red outline - &:invalid - box-shadow: none + // Remove Firefox red outline + &:invalid + box-shadow: none - .v-field - cursor: text + .v-field + cursor: text - .v-field__input - @at-root #{selector.append('.v-text-field--prefixed', &)} - --v-field-padding-start: #{$text-field-input-padding-start} + .v-field__input + @at-root #{selector.append('.v-text-field--prefixed', &)} + --v-field-padding-start: #{$text-field-input-padding-start} - @at-root #{selector.append('.v-text-field--suffixed', &)} - --v-field-padding-end: #{$text-field-input-padding-end} + @at-root #{selector.append('.v-text-field--suffixed', &)} + --v-field-padding-end: #{$text-field-input-padding-end} - .v-input__details - padding-inline: $text-field-details-padding-inline - @at-root #{selector.append('.v-input--plain-underlined', &)} - padding-inline: 0 + .v-input__details + padding-inline: $text-field-details-padding-inline + @at-root #{selector.append('.v-input--plain-underlined', &)} + padding-inline: 0 - .v-field--no-label, - .v-field--active - input - opacity: 1 + .v-field--no-label, + .v-field--active + input + opacity: 1 - .v-field--single-line - input - transition: none + .v-field--single-line + input + transition: none -/* endregion */ -/* region ELEMENTS */ -.v-text-field - &__prefix, - &__suffix - align-items: center - color: $text-field-affix-color - cursor: default - display: flex - opacity: 0 - transition: inherit - white-space: nowrap - min-height: $field-input-min-height - padding-top: calc(var(--v-field-padding-top, 4px) + var(--v-input-padding-top, 0)) - padding-bottom: var(--v-field-padding-bottom, 6px) + /* endregion */ + /* region ELEMENTS */ + .v-text-field + &__prefix, + &__suffix + align-items: center + color: $text-field-affix-color + cursor: default + display: flex + opacity: 0 + transition: inherit + white-space: nowrap + min-height: $field-input-min-height + padding-top: calc(var(--v-field-padding-top, 4px) + var(--v-input-padding-top, 0)) + padding-bottom: var(--v-field-padding-bottom, 6px) - .v-field--active & - opacity: 1 + .v-field--active & + opacity: 1 - .v-field--disabled & - color: $text-field-disabled-affix-color + .v-field--disabled & + color: $text-field-disabled-affix-color - &__prefix - padding-inline-start: var(--v-field-padding-start) + &__prefix + padding-inline-start: var(--v-field-padding-start) - &__suffix - padding-inline-end: var(--v-field-padding-end) + &__suffix + padding-inline-end: var(--v-field-padding-end) -/* endregion */ + /* endregion */ diff --git a/packages/vuetify/src/components/VTextarea/VTextarea.sass b/packages/vuetify/src/components/VTextarea/VTextarea.sass index dc882902979..4f86f5742c9 100644 --- a/packages/vuetify/src/components/VTextarea/VTextarea.sass +++ b/packages/vuetify/src/components/VTextarea/VTextarea.sass @@ -4,50 +4,51 @@ @use '../../styles/tools' @use './variables' as * -.v-textarea - .v-field - --v-textarea-control-height: var(--v-input-control-height) - - .v-field__field - --v-input-control-height: var(--v-textarea-control-height) - - .v-field__input - $a: calc((var(--v-field-padding-top, 0) + var(--v-input-padding-top, 0)) - 6px) - $b: calc(var(--v-field-padding-top, 0) + var(--v-input-padding-top, 0) + 4px) - - flex: 1 1 auto - outline: none - -webkit-mask-image: linear-gradient(to bottom, transparent, transparent $a, black $b) - mask-image: linear-gradient(to bottom, transparent, transparent $a, black $b) - - &.v-textarea__sizer - visibility: hidden - position: absolute - top: 0 - left: 0 - height: 0 !important - min-height: 0 !important - pointer-events: none - - &--no-resize - .v-field__input - resize: none +@include tools.layer('components') + .v-textarea + .v-field + --v-textarea-control-height: var(--v-input-control-height) - .v-field--no-label, - .v-field--active - textarea - opacity: 1 + .v-field__field + --v-input-control-height: var(--v-textarea-control-height) - textarea - opacity: 0 - flex: 1 - min-width: 0 - transition: .15s opacity settings.$standard-easing + .v-field__input + $a: calc((var(--v-field-padding-top, 0) + var(--v-input-padding-top, 0)) - 6px) + $b: calc(var(--v-field-padding-top, 0) + var(--v-input-padding-top, 0) + 4px) - &:focus, - &:active + flex: 1 1 auto outline: none + -webkit-mask-image: linear-gradient(to bottom, transparent, transparent $a, black $b) + mask-image: linear-gradient(to bottom, transparent, transparent $a, black $b) + + &.v-textarea__sizer + visibility: hidden + position: absolute + top: 0 + left: 0 + height: 0 !important + min-height: 0 !important + pointer-events: none + + &--no-resize + .v-field__input + resize: none + + .v-field--no-label, + .v-field--active + textarea + opacity: 1 - // Remove Firefox red outline - &:invalid - box-shadow: none + textarea + opacity: 0 + flex: 1 + min-width: 0 + transition: .15s opacity settings.$standard-easing + + &:focus, + &:active + outline: none + + // Remove Firefox red outline + &:invalid + box-shadow: none diff --git a/packages/vuetify/src/components/VThemeProvider/VThemeProvider.sass b/packages/vuetify/src/components/VThemeProvider/VThemeProvider.sass index 6f1ec34958d..68f0eee6139 100644 --- a/packages/vuetify/src/components/VThemeProvider/VThemeProvider.sass +++ b/packages/vuetify/src/components/VThemeProvider/VThemeProvider.sass @@ -1,3 +1,6 @@ -.v-theme-provider - background: rgb(var(--v-theme-background)) - color: rgb(var(--v-theme-on-background)) +@use '../../styles/tools' + +@include tools.layer('components') + .v-theme-provider + background: rgb(var(--v-theme-background)) + color: rgb(var(--v-theme-on-background)) diff --git a/packages/vuetify/src/components/VTimeline/VTimeline.sass b/packages/vuetify/src/components/VTimeline/VTimeline.sass index 42b98499a5d..36d5f396ccb 100644 --- a/packages/vuetify/src/components/VTimeline/VTimeline.sass +++ b/packages/vuetify/src/components/VTimeline/VTimeline.sass @@ -5,406 +5,407 @@ @use './variables' as * @use './mixins' as * -// VTimeline -.v-timeline - .v-timeline-divider__dot - background: $timeline-dot-divider-background +@include tools.layer('components') + // VTimeline + .v-timeline + .v-timeline-divider__dot + background: $timeline-dot-divider-background - .v-timeline-divider__inner-dot - background: $timeline-inner-dot-divider-background + .v-timeline-divider__inner-dot + background: $timeline-inner-dot-divider-background -.v-timeline - display: grid - grid-auto-flow: dense - position: relative + .v-timeline + display: grid + grid-auto-flow: dense + position: relative - @include horizontal(true) - grid-column-gap: $timeline-item-padding - width: 100% + @include horizontal(true) + grid-column-gap: $timeline-item-padding + width: 100% - .v-timeline-item:nth-child(2n) - .v-timeline-item__body - grid-row: 3 + .v-timeline-item:nth-child(2n) + .v-timeline-item__body + grid-row: 3 + padding-block-start: $timeline-item-padding + + .v-timeline-item__opposite + grid-row: 1 + padding-block-end: $timeline-item-padding + align-self: flex-end + + .v-timeline-item:nth-child(2n+1) + .v-timeline-item__body + grid-row: 1 + padding-block-end: $timeline-item-padding + align-self: flex-end + + .v-timeline-item__opposite + grid-row: 3 + padding-block-start: $timeline-item-padding + + @include vertical(true) + row-gap: $timeline-item-padding + height: 100% + + @include timeline-first-item() padding-block-start: $timeline-item-padding - .v-timeline-item__opposite - grid-row: 1 + @include timeline-last-item() padding-block-end: $timeline-item-padding - align-self: flex-end - .v-timeline-item:nth-child(2n+1) - .v-timeline-item__body - grid-row: 1 - padding-block-end: $timeline-item-padding - align-self: flex-end + .v-timeline-item:nth-child(2n) + .v-timeline-item__body + grid-column: 1 + padding-inline-end: $timeline-item-padding - .v-timeline-item__opposite - grid-row: 3 - padding-block-start: $timeline-item-padding + .v-timeline-item__opposite + grid-column: 3 + padding-inline-start: $timeline-item-padding - @include vertical(true) - row-gap: $timeline-item-padding - height: 100% + .v-timeline-item:nth-child(2n+1) + .v-timeline-item__body + grid-column: 3 + padding-inline-start: $timeline-item-padding - @include timeline-first-item() - padding-block-start: $timeline-item-padding + .v-timeline-item__opposite + grid-column: 1 + justify-self: flex-end + padding-inline-end: $timeline-item-padding - @include timeline-last-item() - padding-block-end: $timeline-item-padding + // VTimelineItem + .v-timeline-item + display: contents - .v-timeline-item:nth-child(2n) - .v-timeline-item__body - grid-column: 1 - padding-inline-end: $timeline-item-padding + // VTimelineDivider + .v-timeline-divider + position: relative + display: flex + align-items: center - .v-timeline-item__opposite - grid-column: 3 - padding-inline-start: $timeline-item-padding + @include horizontal + flex-direction: row + grid-row: 2 + width: 100% - .v-timeline-item:nth-child(2n+1) - .v-timeline-item__body - grid-column: 3 - padding-inline-start: $timeline-item-padding + @include vertical + height: 100% + flex-direction: column + grid-column: 2 + + $timeline-line-size: calc(var(--v-timeline-line-size-base) + #{math.div($timeline-item-padding, 2)} - var(--v-timeline-line-inset)) + $timeline-line-start: math.div(-$timeline-item-padding, 2) + $timeline-line-size-first-last: calc(var(--v-timeline-line-size-base) - var(--v-timeline-line-inset) + var(--v-timeline-line-size-offset)) - .v-timeline-item__opposite - grid-column: 1 - justify-self: flex-end - padding-inline-end: $timeline-item-padding - -// VTimelineItem -.v-timeline-item - display: contents - -// VTimelineDivider -.v-timeline-divider - position: relative - display: flex - align-items: center - - @include horizontal - flex-direction: row - grid-row: 2 - width: 100% - - @include vertical - height: 100% - flex-direction: column - grid-column: 2 - -$timeline-line-size: calc(var(--v-timeline-line-size-base) + #{math.div($timeline-item-padding, 2)} - var(--v-timeline-line-inset)) -$timeline-line-start: math.div(-$timeline-item-padding, 2) -$timeline-line-size-first-last: calc(var(--v-timeline-line-size-base) - var(--v-timeline-line-inset) + var(--v-timeline-line-size-offset)) - -.v-timeline-divider__before - background: $timeline-divider-line-background - position: absolute - - @include horizontal - height: $timeline-divider-line-thickness - width: $timeline-line-size - inset-inline-start: $timeline-line-start - inset-inline-end: initial - - @include vertical - height: $timeline-line-size - width: $timeline-divider-line-thickness - top: $timeline-line-start - -.v-timeline-divider__after - background: $timeline-divider-line-background - position: absolute - - @include horizontal - height: $timeline-divider-line-thickness - width: $timeline-line-size - inset-inline-end: $timeline-line-start - inset-inline-start: initial - - @include vertical - height: $timeline-line-size - width: $timeline-divider-line-thickness - bottom: $timeline-line-start - -.v-timeline-item:first-child .v-timeline-divider__before - @include vertical - height: $timeline-line-size - top: 0 + background: $timeline-divider-line-background + position: absolute @include horizontal + height: $timeline-divider-line-thickness width: $timeline-line-size - inset-inline-start: 0 + inset-inline-start: $timeline-line-start inset-inline-end: initial - .v-timeline-divider__after @include vertical - height: $timeline-line-size-first-last + height: $timeline-line-size + width: $timeline-divider-line-thickness + top: $timeline-line-start + + .v-timeline-divider__after + background: $timeline-divider-line-background + position: absolute @include horizontal - width: $timeline-line-size-first-last + height: $timeline-divider-line-thickness + width: $timeline-line-size inset-inline-end: $timeline-line-start inset-inline-start: initial -.v-timeline-item:last-child - .v-timeline-divider__before @include vertical - height: $timeline-line-size-first-last - - @include horizontal - width: $timeline-line-size-first-last + height: $timeline-line-size + width: $timeline-divider-line-thickness + bottom: $timeline-line-start - .v-timeline-divider__after - @include vertical - height: calc(var(--v-timeline-line-size-base) + #{math.div($timeline-item-padding, 2)} - var(--v-timeline-line-inset)) - bottom: 0 + .v-timeline-item:first-child + .v-timeline-divider__before + @include vertical + height: $timeline-line-size + top: 0 - @include horizontal - width: calc(var(--v-timeline-line-size-base) + #{math.div($timeline-item-padding, 2)} - var(--v-timeline-line-inset)) - inset-inline-end: 0 - inset-inline-start: initial + @include horizontal + width: $timeline-line-size + inset-inline-start: 0 + inset-inline-end: initial -.v-timeline-item:only-child - .v-timeline-divider__after - @include vertical - height: calc(var(--v-timeline-line-size-base) - var(--v-timeline-line-inset)) + .v-timeline-divider__after + @include vertical + height: $timeline-line-size-first-last -.v-timeline-divider__dot - z-index: 1 - flex-shrink: 0 - border-radius: $timeline-dot-border-radius - display: flex - justify-content: center - align-items: center + @include horizontal + width: $timeline-line-size-first-last + inset-inline-end: $timeline-line-start + inset-inline-start: initial - @include tools.elevation($timeline-divider-dot-elevation) + .v-timeline-item:last-child + .v-timeline-divider__before + @include vertical + height: $timeline-line-size-first-last - @each $name, $multiplier in settings.$size-scales - $size: $timeline-dot-size + (8 * $multiplier) + @include horizontal + width: $timeline-line-size-first-last - &--size-#{$name} - height: $size - width: $size + .v-timeline-divider__after + @include vertical + height: calc(var(--v-timeline-line-size-base) + #{math.div($timeline-item-padding, 2)} - var(--v-timeline-line-inset)) + bottom: 0 - .v-timeline-divider__inner-dot - height: calc(100% - #{map.get($timeline-dot-border-sizes, $name)}) - width: calc(100% - #{map.get($timeline-dot-border-sizes, $name)}) + @include horizontal + width: calc(var(--v-timeline-line-size-base) + #{math.div($timeline-item-padding, 2)} - var(--v-timeline-line-inset)) + inset-inline-end: 0 + inset-inline-start: initial -.v-timeline-divider__inner-dot - align-items: center - border-radius: $timeline-dot-border-radius - display: flex - justify-content: center + .v-timeline-item:only-child + .v-timeline-divider__after + @include vertical + height: calc(var(--v-timeline-line-size-base) - var(--v-timeline-line-inset)) -/** Modifiers **/ + .v-timeline-divider__dot + z-index: 1 + flex-shrink: 0 + border-radius: $timeline-dot-border-radius + display: flex + justify-content: center + align-items: center -// Justify -.v-timeline--justify-center - @include horizontal(true) - grid-template-rows: $timeline-item-grid-template-center + @include tools.elevation($timeline-divider-dot-elevation) - @include vertical(true) - grid-template-columns: $timeline-item-grid-template-center + @each $name, $multiplier in settings.$size-scales + $size: $timeline-dot-size + (8 * $multiplier) -.v-timeline--justify-auto - @include horizontal(true) - grid-template-rows: $timeline-item-grid-template-auto + &--size-#{$name} + height: $size + width: $size - @include vertical(true) - grid-template-columns: $timeline-item-grid-template-auto + .v-timeline-divider__inner-dot + height: calc(100% - #{map.get($timeline-dot-border-sizes, $name)}) + width: calc(100% - #{map.get($timeline-dot-border-sizes, $name)}) -// Density -.v-timeline--density-comfortable - @include horizontal(true) - height: 100% + .v-timeline-divider__inner-dot + align-items: center + border-radius: $timeline-dot-border-radius + display: flex + justify-content: center - &.v-timeline--side-end - grid-template-rows: $timeline-density-comfortable-grid-template-end + /** Modifiers **/ - &.v-timeline--side-start - grid-template-rows: $timeline-density-comfortable-grid-template-start + // Justify + .v-timeline--justify-center + @include horizontal(true) + grid-template-rows: $timeline-item-grid-template-center - @include vertical(true) - width: 100% + @include vertical(true) + grid-template-columns: $timeline-item-grid-template-center - &.v-timeline--side-end - grid-template-columns: $timeline-density-comfortable-grid-template-end + .v-timeline--justify-auto + @include horizontal(true) + grid-template-rows: $timeline-item-grid-template-auto - &.v-timeline--side-start - grid-template-columns: $timeline-density-comfortable-grid-template-start + @include vertical(true) + grid-template-columns: $timeline-item-grid-template-auto -.v-timeline--density-compact - @include horizontal(true) - &.v-timeline--side-end - grid-template-rows: $timeline-density-compact-grid-template-end + // Density + .v-timeline--density-comfortable + @include horizontal(true) + height: 100% - &.v-timeline--side-start - grid-template-rows: $timeline-density-compact-grid-template-start + &.v-timeline--side-end + grid-template-rows: $timeline-density-comfortable-grid-template-end - .v-timeline-item__body - grid-row: 1 + &.v-timeline--side-start + grid-template-rows: $timeline-density-comfortable-grid-template-start - @include vertical(true) - &.v-timeline--side-end - grid-template-columns: $timeline-density-compact-grid-template-end + @include vertical(true) + width: 100% - &.v-timeline--side-start - grid-template-columns: $timeline-density-compact-grid-template-start + &.v-timeline--side-end + grid-template-columns: $timeline-density-comfortable-grid-template-end - .v-timeline-item__body - grid-column: 3 + &.v-timeline--side-start + grid-template-columns: $timeline-density-comfortable-grid-template-start -// Side -.v-timeline.v-timeline--side-end - .v-timeline-item + .v-timeline--density-compact @include horizontal(true) - .v-timeline-item__body - grid-row: 3 - padding-block-end: initial - padding-block-start: $timeline-item-padding + &.v-timeline--side-end + grid-template-rows: $timeline-density-compact-grid-template-end - .v-timeline-item__opposite + &.v-timeline--side-start + grid-template-rows: $timeline-density-compact-grid-template-start + + .v-timeline-item__body grid-row: 1 - padding-block-end: $timeline-item-padding - padding-block-start: initial @include vertical(true) + &.v-timeline--side-end + grid-template-columns: $timeline-density-compact-grid-template-end + + &.v-timeline--side-start + grid-template-columns: $timeline-density-compact-grid-template-start + .v-timeline-item__body grid-column: 3 - padding-inline-start: $timeline-item-padding - padding-inline-end: initial - justify-self: flex-start - .v-timeline-item__opposite - grid-column: 1 - justify-self: flex-end - padding-inline-end: $timeline-item-padding - padding-inline-start: initial + // Side + .v-timeline.v-timeline--side-end + .v-timeline-item + @include horizontal(true) + .v-timeline-item__body + grid-row: 3 + padding-block-end: initial + padding-block-start: $timeline-item-padding + + .v-timeline-item__opposite + grid-row: 1 + padding-block-end: $timeline-item-padding + padding-block-start: initial + + @include vertical(true) + .v-timeline-item__body + grid-column: 3 + padding-inline-start: $timeline-item-padding + padding-inline-end: initial + justify-self: flex-start + + .v-timeline-item__opposite + grid-column: 1 + justify-self: flex-end + padding-inline-end: $timeline-item-padding + padding-inline-start: initial + + .v-timeline.v-timeline--side-start + .v-timeline-item + @include horizontal(true) + .v-timeline-item__body + grid-row: 1 + padding-block-end: $timeline-item-padding + padding-block-start: initial + + .v-timeline-item__opposite + grid-row: 3 + padding-block-end: initial + padding-block-start: $timeline-item-padding + + @include vertical(true) + .v-timeline-item__body + grid-column: 1 + justify-self: flex-end + padding-inline-end: $timeline-item-padding + + .v-timeline-item__opposite + grid-column: 3 + padding-inline-start: $timeline-item-padding + justify-self: flex-start + + // Fill dot + .v-timeline-divider--fill-dot + .v-timeline-divider__inner-dot + height: inherit + width: inherit + + // Alignment + .v-timeline--align-center + --v-timeline-line-size-base: 50% + --v-timeline-line-size-offset: 0px -.v-timeline.v-timeline--side-start - .v-timeline-item @include horizontal(true) - .v-timeline-item__body - grid-row: 1 - padding-block-end: $timeline-item-padding - padding-block-start: initial - - .v-timeline-item__opposite - grid-row: 3 - padding-block-end: initial - padding-block-start: $timeline-item-padding + justify-items: center - @include vertical(true) .v-timeline-item__body - grid-column: 1 - justify-self: flex-end - padding-inline-end: $timeline-item-padding + padding-inline: math.div($timeline-item-padding, 2) .v-timeline-item__opposite - grid-column: 3 - padding-inline-start: $timeline-item-padding - justify-self: flex-start - -// Fill dot -.v-timeline-divider--fill-dot - .v-timeline-divider__inner-dot - height: inherit - width: inherit - -// Alignment -.v-timeline--align-center - --v-timeline-line-size-base: 50% - --v-timeline-line-size-offset: 0px - - @include horizontal(true) - justify-items: center + padding-inline: math.div($timeline-item-padding, 2) - .v-timeline-item__body - padding-inline: math.div($timeline-item-padding, 2) + .v-timeline-divider + justify-content: center - .v-timeline-item__opposite - padding-inline: math.div($timeline-item-padding, 2) + @include vertical(true) + align-items: center - .v-timeline-divider - justify-content: center + .v-timeline-divider + justify-content: center - @include vertical(true) - align-items: center + .v-timeline--align-start + --v-timeline-line-size-base: 100% + --v-timeline-line-size-offset: #{math.div($timeline-item-padding, 2)} - .v-timeline-divider - justify-content: center + $timeline-line-size-before: calc(var(--v-timeline-line-size-offset) + var(--v-timeline-dot-size) / 2 - var(--v-timeline-line-inset)) + $timeline-line-size-after: calc(var(--v-timeline-line-size-base) - var(--v-timeline-dot-size) / 2 + var(--v-timeline-line-size-offset) - var(--v-timeline-line-inset)) -.v-timeline--align-start - --v-timeline-line-size-base: 100% - --v-timeline-line-size-offset: #{math.div($timeline-item-padding, 2)} + .v-timeline-item:first-child + .v-timeline-divider__before + --v-timeline-line-size-offset: #{$timeline-item-padding} - $timeline-line-size-before: calc(var(--v-timeline-line-size-offset) + var(--v-timeline-dot-size) / 2 - var(--v-timeline-line-inset)) - $timeline-line-size-after: calc(var(--v-timeline-line-size-base) - var(--v-timeline-dot-size) / 2 + var(--v-timeline-line-size-offset) - var(--v-timeline-line-inset)) + .v-timeline-divider__after + --v-timeline-line-size-offset: -#{math.div($timeline-item-padding, 2)} - .v-timeline-item:first-child - .v-timeline-divider__before - --v-timeline-line-size-offset: #{$timeline-item-padding} + .v-timeline-item:last-child + .v-timeline-divider__after + --v-timeline-line-size-offset: 0px - .v-timeline-divider__after - --v-timeline-line-size-offset: -#{math.div($timeline-item-padding, 2)} + @include horizontal(true) + justify-items: flex-start - .v-timeline-item:last-child - .v-timeline-divider__after - --v-timeline-line-size-offset: 0px + .v-timeline-divider + justify-content: flex-start - @include horizontal(true) - justify-items: flex-start + .v-timeline-divider__before + width: $timeline-line-size-before - .v-timeline-divider - justify-content: flex-start + .v-timeline-divider__after + width: $timeline-line-size-after - .v-timeline-divider__before - width: $timeline-line-size-before + @include vertical(true) + align-items: flex-start - .v-timeline-divider__after - width: $timeline-line-size-after + .v-timeline-divider + justify-content: flex-start - @include vertical(true) - align-items: flex-start + .v-timeline-divider__before + height: $timeline-line-size-before - .v-timeline-divider - justify-content: flex-start + .v-timeline-divider__after + height: $timeline-line-size-after + // Truncate start + .v-timeline--truncate-line-start + .v-timeline-item:first-child .v-timeline-divider__before - height: $timeline-line-size-before + display: none .v-timeline-divider__after - height: $timeline-line-size-after + --v-timeline-line-size-offset: #{math.div($timeline-item-padding, 2)} -// Truncate start -.v-timeline--truncate-line-start - .v-timeline-item:first-child - .v-timeline-divider__before - display: none - - .v-timeline-divider__after - --v-timeline-line-size-offset: #{math.div($timeline-item-padding, 2)} - - @include vertical(true) - @include timeline-first-item() - padding-block-start: 0 + @include vertical(true) + @include timeline-first-item() + padding-block-start: 0 - @include horizontal(true) - @include timeline-first-item() - padding-inline-start: 0 + @include horizontal(true) + @include timeline-first-item() + padding-inline-start: 0 -// Truncate end -.v-timeline--truncate-line-end - .v-timeline-item:last-child - .v-timeline-divider__after - display: none + // Truncate end + .v-timeline--truncate-line-end + .v-timeline-item:last-child + .v-timeline-divider__after + display: none - .v-timeline-divider__before - --v-timeline-line-size-offset: #{math.div($timeline-item-padding, 2)} + .v-timeline-divider__before + --v-timeline-line-size-offset: #{math.div($timeline-item-padding, 2)} - @include vertical(true) - @include timeline-last-item() - padding-block-end: 0 + @include vertical(true) + @include timeline-last-item() + padding-block-end: 0 - @include horizontal(true) - @include timeline-last-item() - padding-inline-end: 0 + @include horizontal(true) + @include timeline-last-item() + padding-inline-end: 0 diff --git a/packages/vuetify/src/components/VToolbar/VToolbar.sass b/packages/vuetify/src/components/VToolbar/VToolbar.sass index 6c131c2598a..d95d05bd19d 100644 --- a/packages/vuetify/src/components/VToolbar/VToolbar.sass +++ b/packages/vuetify/src/components/VToolbar/VToolbar.sass @@ -1,109 +1,110 @@ @use '../../styles/tools' @use './variables' as * -// Block -.v-toolbar - align-items: flex-start - display: flex - flex: $toolbar-flex - flex-direction: column - justify-content: space-between - max-width: 100% - position: relative - transition: $toolbar-transition - transition-property: height, width, transform, max-width, left, right, top, bottom, box-shadow - width: 100% - - @include tools.border($toolbar-border...) - @include tools.elevation($toolbar-elevation) - @include tools.rounded($toolbar-border-radius) - @include tools.theme($toolbar-theme...) - - &--absolute - position: absolute - - &--collapse - max-width: $toolbar-collapsed-max-width +@include tools.layer('components') + // Block + .v-toolbar + align-items: flex-start + display: flex + flex: $toolbar-flex + flex-direction: column + justify-content: space-between + max-width: 100% + position: relative + transition: $toolbar-transition + transition-property: height, width, transform, max-width, left, right, top, bottom, box-shadow + width: 100% + + @include tools.border($toolbar-border...) + @include tools.elevation($toolbar-elevation) + @include tools.rounded($toolbar-border-radius) + @include tools.theme($toolbar-theme...) + + &--absolute + position: absolute + + &--collapse + max-width: $toolbar-collapsed-max-width + overflow: hidden + border-end-end-radius: $toolbar-collapsed-border-radius + + .v-toolbar-title + display: none + + &--flat + @include tools.elevation($toolbar-flat-elevation) + + &--floating + display: inline-flex + + &--rounded + @include tools.rounded($toolbar-rounded-border-radius) + + .v-toolbar__content, + .v-toolbar__extension + align-items: center + display: flex + flex: 0 0 auto + position: relative + transition: inherit + width: 100% + + .v-toolbar__content overflow: hidden - border-end-end-radius: $toolbar-collapsed-border-radius - - .v-toolbar-title - display: none - - &--flat - @include tools.elevation($toolbar-flat-elevation) - &--floating - display: inline-flex + > .v-btn:first-child + margin-inline-start: $toolbar-prepend-btn-margin-start - &--rounded - @include tools.rounded($toolbar-rounded-border-radius) + > .v-btn:last-child + margin-inline-end: $toolbar-append-btn-margin-end -.v-toolbar__content, -.v-toolbar__extension - align-items: center - display: flex - flex: 0 0 auto - position: relative - transition: inherit - width: 100% + > .v-toolbar-title + margin-inline-start: $toolbar-title-margin -.v-toolbar__content - overflow: hidden + .v-toolbar--density-prominent & + align-items: flex-start - > .v-btn:first-child - margin-inline-start: $toolbar-prepend-btn-margin-start + .v-toolbar__image + @include tools.absolute() - > .v-btn:last-child - margin-inline-end: $toolbar-append-btn-margin-end + display: flex + opacity: var(--v-toolbar-image-opacity, 1) + transition-property: opacity - > .v-toolbar-title - margin-inline-start: $toolbar-title-margin - - .v-toolbar--density-prominent & - align-items: flex-start + .v-toolbar__prepend, + .v-toolbar__append + align-items: center + align-self: stretch + display: flex -.v-toolbar__image - @include tools.absolute() + .v-toolbar__prepend + margin-inline: $toolbar-prepend-btn-margin-start auto - display: flex - opacity: var(--v-toolbar-image-opacity, 1) - transition-property: opacity + .v-toolbar__append + margin-inline: auto $toolbar-append-btn-margin-end -.v-toolbar__prepend, -.v-toolbar__append - align-items: center - align-self: stretch - display: flex + .v-toolbar-title + flex: 1 1 + font-size: $toolbar-title-font-size + min-width: 0 -.v-toolbar__prepend - margin-inline: $toolbar-prepend-btn-margin-start auto + @include tools.typography($toolbar-title-typography...) -.v-toolbar__append - margin-inline: auto $toolbar-append-btn-margin-end + .v-toolbar--density-prominent & + align-self: flex-end + padding-bottom: 6px -.v-toolbar-title - flex: 1 1 - font-size: $toolbar-title-font-size - min-width: 0 + @include tools.typography($toolbar-prominent-title-typography...) - @include tools.typography($toolbar-title-typography...) - - .v-toolbar--density-prominent & - align-self: flex-end - padding-bottom: 6px - - @include tools.typography($toolbar-prominent-title-typography...) - -.v-toolbar-title__placeholder - overflow: hidden - text-overflow: ellipsis - white-space: nowrap + .v-toolbar-title__placeholder + overflow: hidden + text-overflow: ellipsis + white-space: nowrap -.v-toolbar-items - display: flex - height: inherit - align-self: stretch + .v-toolbar-items + display: flex + height: inherit + align-self: stretch - > .v-btn - border-radius: 0 + > .v-btn + border-radius: 0 diff --git a/packages/vuetify/src/components/VTooltip/VTooltip.sass b/packages/vuetify/src/components/VTooltip/VTooltip.sass index cb4419b3b12..eeab163e2b6 100644 --- a/packages/vuetify/src/components/VTooltip/VTooltip.sass +++ b/packages/vuetify/src/components/VTooltip/VTooltip.sass @@ -1,26 +1,28 @@ @use '../../styles/settings' +@use '../../styles/tools' @use './variables' as * -.v-tooltip - > .v-overlay__content - background: $tooltip-background-color - color: $tooltip-text-color - border-radius: $tooltip-border-radius - font-size: $tooltip-font-size - line-height: $tooltip-line-height - display: inline-block - padding: $tooltip-padding - text-transform: initial - width: auto - opacity: 1 - pointer-events: none - transition-property: opacity, transform - overflow-wrap: $tooltip-overflow-wrap +@include tools.layer('components') + .v-tooltip + > .v-overlay__content + background: $tooltip-background-color + color: $tooltip-text-color + border-radius: $tooltip-border-radius + font-size: $tooltip-font-size + line-height: $tooltip-line-height + display: inline-block + padding: $tooltip-padding + text-transform: initial + width: auto + opacity: 1 + pointer-events: none + transition-property: opacity, transform + overflow-wrap: $tooltip-overflow-wrap - &[class*="enter-active"] - transition-timing-function: settings.$decelerated-easing - transition-duration: $tooltip-transition-enter-duration + &[class*="enter-active"] + transition-timing-function: settings.$decelerated-easing + transition-duration: $tooltip-transition-enter-duration - &[class*="leave-active"] - transition-timing-function: settings.$accelerated-easing - transition-duration: $tooltip-transition-leave-duration + &[class*="leave-active"] + transition-timing-function: settings.$accelerated-easing + transition-duration: $tooltip-transition-leave-duration diff --git a/packages/vuetify/src/components/VVirtualScroll/VVirtualScroll.sass b/packages/vuetify/src/components/VVirtualScroll/VVirtualScroll.sass index f175837fe02..ca1bf68b4f9 100644 --- a/packages/vuetify/src/components/VVirtualScroll/VVirtualScroll.sass +++ b/packages/vuetify/src/components/VVirtualScroll/VVirtualScroll.sass @@ -1,9 +1,12 @@ -.v-virtual-scroll - display: block - flex: 1 1 auto - max-width: 100% - overflow: auto - position: relative +@use '../../styles/tools' - &__container +@include tools.layer('components') + .v-virtual-scroll display: block + flex: 1 1 auto + max-width: 100% + overflow: auto + position: relative + + &__container + display: block diff --git a/packages/vuetify/src/components/VWindow/VWindow.sass b/packages/vuetify/src/components/VWindow/VWindow.sass index 5b105dcea2f..e735c239c4f 100644 --- a/packages/vuetify/src/components/VWindow/VWindow.sass +++ b/packages/vuetify/src/components/VWindow/VWindow.sass @@ -1,82 +1,86 @@ +@use '../../styles/tools' @use './variables' as * -.v-window - overflow: hidden - - &__container - display: flex - flex-direction: column - height: inherit - position: relative - transition: $window-transition - - &__controls - position: absolute - left: 0 - top: 0 - width: 100% - height: 100% - display: flex - align-items: center - justify-content: space-between - padding: $window-controls-padding - pointer-events: none - - > * - pointer-events: auto - - &--show-arrows-on-hover +@include tools.layer('components') + .v-window overflow: hidden - .v-window__left - transform: translateX(-200%) - - .v-window__right - transform: translateX(200%) - - &:hover - .v-window__left, - .v-window__right - transform: translateX(0) - - &-x-transition, - &-x-reverse-transition, - &-y-transition, - &-y-reverse-transition - &-enter-active, - &-leave-active + &__container + display: flex + flex-direction: column + height: inherit + position: relative transition: $window-transition - &-leave-from, - &-leave-to - position: absolute !important + &__controls + position: absolute + left: 0 top: 0 width: 100% + height: 100% + display: flex + align-items: center + justify-content: space-between + padding: $window-controls-padding + pointer-events: none - &-x-transition - &-enter-from - transform: translateX(100%) - - &-leave-to - transform: translateX(-100%) + > * + pointer-events: auto - &-x-reverse-transition - &-enter-from - transform: translateX(-100%) + &--show-arrows-on-hover + overflow: hidden - &-leave-to - transform: translateX(100%) + .v-window__left + transform: translateX(-200%) - &-y-transition - &-enter-from - transform: translateY(100%) - - &-leave-to - transform: translateY(-100%) - - &-y-reverse-transition - &-enter-from - transform: translateY(-100%) - - &-leave-to - transform: translateY(100%) + .v-window__right + transform: translateX(200%) + + &:hover + .v-window__left, + .v-window__right + transform: translateX(0) + +@include tools.layer('transitions') + .v-window + &-x-transition, + &-x-reverse-transition, + &-y-transition, + &-y-reverse-transition + &-enter-active, + &-leave-active + transition: $window-transition + + &-leave-from, + &-leave-to + position: absolute !important + top: 0 + width: 100% + + &-x-transition + &-enter-from + transform: translateX(100%) + + &-leave-to + transform: translateX(-100%) + + &-x-reverse-transition + &-enter-from + transform: translateX(-100%) + + &-leave-to + transform: translateX(100%) + + &-y-transition + &-enter-from + transform: translateY(100%) + + &-leave-to + transform: translateY(-100%) + + &-y-reverse-transition + &-enter-from + transform: translateY(-100%) + + &-leave-to + transform: translateY(100%) diff --git a/packages/vuetify/src/directives/ripple/VRipple.sass b/packages/vuetify/src/directives/ripple/VRipple.sass index 1d5edec7bab..5a63b4856d5 100644 --- a/packages/vuetify/src/directives/ripple/VRipple.sass +++ b/packages/vuetify/src/directives/ripple/VRipple.sass @@ -1,39 +1,41 @@ +@use '../../styles/tools' @use './variables' as * -.v-ripple - &__container - color: inherit - border-radius: inherit - position: absolute - width: 100% - height: 100% - left: 0 - top: 0 - overflow: hidden - z-index: 0 - pointer-events: none - contain: strict +@include tools.layer('components') + .v-ripple + &__container + color: inherit + border-radius: inherit + position: absolute + width: 100% + height: 100% + left: 0 + top: 0 + overflow: hidden + z-index: 0 + pointer-events: none + contain: strict - &__animation - color: inherit - position: absolute - top: 0 - left: 0 - border-radius: 50% - background: currentColor - opacity: 0 - pointer-events: none - overflow: hidden - will-change: transform, opacity - - &--enter - transition: none + &__animation + color: inherit + position: absolute + top: 0 + left: 0 + border-radius: 50% + background: currentColor opacity: 0 + pointer-events: none + overflow: hidden + will-change: transform, opacity - &--in - transition: $ripple-animation-transition-in - opacity: $ripple-animation-visible-opacity + &--enter + transition: none + opacity: 0 - &--out - transition: $ripple-animation-transition-out - opacity: 0 + &--in + transition: $ripple-animation-transition-in + opacity: $ripple-animation-visible-opacity + + &--out + transition: $ripple-animation-transition-out + opacity: 0 diff --git a/packages/vuetify/src/labs/VCalendar/VCalendar.sass b/packages/vuetify/src/labs/VCalendar/VCalendar.sass index ccac7fdd29d..ebadddd2877 100644 --- a/packages/vuetify/src/labs/VCalendar/VCalendar.sass +++ b/packages/vuetify/src/labs/VCalendar/VCalendar.sass @@ -1,170 +1,172 @@ -@import './_variables.scss' +@use '../../styles/tools' +@use './variables' as * -.v-calendar-weekly - width: 100% - height: 100% - display: flex - flex-direction: column - // https://github.com/vuetifyjs/vuetify/issues/8319 - min-height: 0 - // Themed - background-color: #fff +@include tools.layer('components') + .v-calendar-weekly + width: 100% + height: 100% + display: flex + flex-direction: column + // https://github.com/vuetifyjs/vuetify/issues/8319 + min-height: 0 + // Themed + background-color: #fff -.v-calendar__container - border-top: $calendar-line-width solid $calendar-line-color - border-left: $calendar-line-width solid $calendar-line-color - border-right: $calendar-line-width solid $calendar-line-color + .v-calendar__container + border-top: $calendar-line-width solid $calendar-line-color + border-left: $calendar-line-width solid $calendar-line-color + border-right: $calendar-line-width solid $calendar-line-color -.v-calendar-weekly__head - display: grid - grid-template-columns: $calendar-weekly-weeknumber-flex-basis repeat(7, 1fr) - user-select: none - &.days__0 - grid-template-columns: 1fr - &.v-calendar-weekly__head-weeknumbers - grid-template-columns: $calendar-weekly-weeknumber-flex-basis 1fr - &.days__1 - grid-template-columns: 1fr - &.v-calendar-weekly__head-weeknumbers - grid-template-columns: $calendar-weekly-weeknumber-flex-basis 1fr - &.days__2 - grid-template-columns: repeat(2, 1fr) - &.v-calendar-weekly__head-weeknumbers - grid-template-columns: $calendar-weekly-weeknumber-flex-basis repeat(2, 1fr) - &.days__3 - grid-template-columns: repeat(3, 1fr) - &.v-calendar-weekly__head-weeknumbers - grid-template-columns: $calendar-weekly-weeknumber-flex-basis repeat(3, 1fr) - &.days__4 - grid-template-columns: repeat(4, 1fr) - &.v-calendar-weekly__head-weeknumbers - grid-template-columns: $calendar-weekly-weeknumber-flex-basis repeat(4, 1fr) - &.days__5 - grid-template-columns: repeat(5, 1fr) - &.v-calendar-weekly__head-weeknumbers - grid-template-columns: $calendar-weekly-weeknumber-flex-basis repeat(5, 1fr) - &.days__6 - grid-template-columns: repeat(6, 1fr) - &.v-calendar-weekly__head-weeknumbers - grid-template-columns: $calendar-weekly-weeknumber-flex-basis repeat(6, 1fr) - &.days__7 - grid-template-columns: repeat(7, 1fr) - &.v-calendar-weekly__head-weeknumbers - grid-template-columns: $calendar-weekly-weeknumber-flex-basis repeat(7, 1fr) + .v-calendar-weekly__head + display: grid + grid-template-columns: $calendar-weekly-weeknumber-flex-basis repeat(7, 1fr) + user-select: none + &.days__0 + grid-template-columns: 1fr + &.v-calendar-weekly__head-weeknumbers + grid-template-columns: $calendar-weekly-weeknumber-flex-basis 1fr + &.days__1 + grid-template-columns: 1fr + &.v-calendar-weekly__head-weeknumbers + grid-template-columns: $calendar-weekly-weeknumber-flex-basis 1fr + &.days__2 + grid-template-columns: repeat(2, 1fr) + &.v-calendar-weekly__head-weeknumbers + grid-template-columns: $calendar-weekly-weeknumber-flex-basis repeat(2, 1fr) + &.days__3 + grid-template-columns: repeat(3, 1fr) + &.v-calendar-weekly__head-weeknumbers + grid-template-columns: $calendar-weekly-weeknumber-flex-basis repeat(3, 1fr) + &.days__4 + grid-template-columns: repeat(4, 1fr) + &.v-calendar-weekly__head-weeknumbers + grid-template-columns: $calendar-weekly-weeknumber-flex-basis repeat(4, 1fr) + &.days__5 + grid-template-columns: repeat(5, 1fr) + &.v-calendar-weekly__head-weeknumbers + grid-template-columns: $calendar-weekly-weeknumber-flex-basis repeat(5, 1fr) + &.days__6 + grid-template-columns: repeat(6, 1fr) + &.v-calendar-weekly__head-weeknumbers + grid-template-columns: $calendar-weekly-weeknumber-flex-basis repeat(6, 1fr) + &.days__7 + grid-template-columns: repeat(7, 1fr) + &.v-calendar-weekly__head-weeknumbers + grid-template-columns: $calendar-weekly-weeknumber-flex-basis repeat(7, 1fr) -.v-calendar-weekly__head-weekday, .v-calendar-weekly__head-weekday-with-weeknumber - flex: 1 0 20px - user-select: none - padding: $calendar-weekly-weekday-padding - font-size: $calendar-weekly-weekday-font-size - overflow: hidden - text-align: center - text-overflow: ellipsis - text-transform: uppercase - white-space: nowrap - // Themed - border-right: $calendar-line-width solid $calendar-line-color + .v-calendar-weekly__head-weekday, .v-calendar-weekly__head-weekday-with-weeknumber + flex: 1 0 20px + user-select: none + padding: $calendar-weekly-weekday-padding + font-size: $calendar-weekly-weekday-font-size + overflow: hidden + text-align: center + text-overflow: ellipsis + text-transform: uppercase + white-space: nowrap + // Themed + border-right: $calendar-line-width solid $calendar-line-color - &:last-child - border-right: none + &:last-child + border-right: none - // TODO change this - > div .v-btn - font-size: 1.5rem + // TODO change this + > div .v-btn + font-size: 1.5rem -.v-calendar-weekly__head-weeknumber - background: $calendar-weekly-weeknumber-background - color: $calendar-weekly-weeknumber-color + .v-calendar-weekly__head-weeknumber + background: $calendar-weekly-weeknumber-background + color: $calendar-weekly-weeknumber-color -.v-calendar-weekly__week - display: flex - flex: 1 - height: unset - // https://github.com/vuetifyjs/vuetify/issues/8319 - min-height: 0 + .v-calendar-weekly__week + display: flex + flex: 1 + height: unset + // https://github.com/vuetifyjs/vuetify/issues/8319 + min-height: 0 -.v-calendar-month__weeknumber - padding-top: $calendar-weekly-weeknumber-padding-top - background: $calendar-month-weeknumber-background - border-bottom: $calendar-line-width solid $calendar-line-color - color: $calendar-month-weeknumber-color - text-align: center - font-size: $calendar-weekly-weeknumber-font-size - font-weight: $calendar-weekly-weeknumber-font-weight + .v-calendar-month__weeknumber + padding-top: $calendar-weekly-weeknumber-padding-top + background: $calendar-month-weeknumber-background + border-bottom: $calendar-line-width solid $calendar-line-color + color: $calendar-month-weeknumber-color + text-align: center + font-size: $calendar-weekly-weeknumber-font-size + font-weight: $calendar-weekly-weeknumber-font-weight -.v-calendar-month__days - display: grid - flex: 1 1 - > .v-calendar-month__day - min-height: $calendar-weekly-day-min-height - &.days__0 - grid-template-columns: 1fr + .v-calendar-month__days + display: grid + flex: 1 1 > .v-calendar-month__day - border-right: none - &.days__1 - grid-template-columns: 1fr - > .v-calendar-month__day - border-right: none - &.days__2 - grid-template-columns: repeat(2, 1fr) - > .v-calendar-month__day:nth-child(2n) - border-right: none - &.days__3 - grid-template-columns: repeat(3, 1fr) - > .v-calendar-month__day:nth-child(3n) - border-right: none - &.days__4 - grid-template-columns: repeat(4, 1fr) - > .v-calendar-month__day:nth-child(4n) - border-right: none - &.days__5 - grid-template-columns: repeat(5, 1fr) - > .v-calendar-month__day:nth-child(5n) - border-right: none - &.days__6 - grid-template-columns: repeat(6, 1fr) - > .v-calendar-month__day:nth-child(6n) - border-right: none - &.v-calendar-month__weeknumbers - grid-template-columns: $calendar-weekly-weeknumber-flex-basis repeat(6, 1fr) - &.days__7 - grid-template-columns: repeat(7, 1fr) - > .v-calendar-month__day:nth-child(7n) - border-right: none + min-height: $calendar-weekly-day-min-height + &.days__0 + grid-template-columns: 1fr + > .v-calendar-month__day + border-right: none + &.days__1 + grid-template-columns: 1fr + > .v-calendar-month__day + border-right: none + &.days__2 + grid-template-columns: repeat(2, 1fr) + > .v-calendar-month__day:nth-child(2n) + border-right: none + &.days__3 + grid-template-columns: repeat(3, 1fr) + > .v-calendar-month__day:nth-child(3n) + border-right: none + &.days__4 + grid-template-columns: repeat(4, 1fr) + > .v-calendar-month__day:nth-child(4n) + border-right: none + &.days__5 + grid-template-columns: repeat(5, 1fr) + > .v-calendar-month__day:nth-child(5n) + border-right: none + &.days__6 + grid-template-columns: repeat(6, 1fr) + > .v-calendar-month__day:nth-child(6n) + border-right: none + &.v-calendar-month__weeknumbers + grid-template-columns: $calendar-weekly-weeknumber-flex-basis repeat(6, 1fr) + &.days__7 + grid-template-columns: repeat(7, 1fr) + > .v-calendar-month__day:nth-child(7n) + border-right: none - &.days-with-weeknumbers__0 - grid-template-columns: $calendar-weekly-weeknumber-flex-basis 1fr - > .v-calendar-month__day - border-right: none - &.days-with-weeknumbers__1 - grid-template-columns: $calendar-weekly-weeknumber-flex-basis 1fr - > .v-calendar-month__day - border-right: none - &.days-with-weeknumbers__2 - grid-template-columns: $calendar-weekly-weeknumber-flex-basis repeat(2, 1fr) - > .v-calendar-month__day:nth-child(3n) - border-right: none - &.days-with-weeknumbers__3 - grid-template-columns: $calendar-weekly-weeknumber-flex-basis repeat(3, 1fr) - > .v-calendar-month__day:nth-child(4n) - border-right: none - &.days-with-weeknumbers__4 - grid-template-columns: $calendar-weekly-weeknumber-flex-basis repeat(4, 1fr) - > .v-calendar-month__day:nth-child(5n) - border-right: none - &.days-with-weeknumbers__5 - grid-template-columns: $calendar-weekly-weeknumber-flex-basis repeat(5, 1fr) - > .v-calendar-month__day:nth-child(6n) - border-right: none - &.days-with-weeknumbers__6 - grid-template-columns: $calendar-weekly-weeknumber-flex-basis repeat(6, 1fr) - > .v-calendar-month__day:nth-child(7n) - border-right: none - &.days-with-weeknumbers__7 - grid-template-columns: $calendar-weekly-weeknumber-flex-basis repeat(7, 1fr) - > .v-calendar-month__day:nth-child(7n) - border-right: $calendar-line-width solid $calendar-line-width - > .v-calendar-month__day:nth-child(8n) - border-right: none - > .v-calendar-month__day:nth-child(8n) - border-right: none + &.days-with-weeknumbers__0 + grid-template-columns: $calendar-weekly-weeknumber-flex-basis 1fr + > .v-calendar-month__day + border-right: none + &.days-with-weeknumbers__1 + grid-template-columns: $calendar-weekly-weeknumber-flex-basis 1fr + > .v-calendar-month__day + border-right: none + &.days-with-weeknumbers__2 + grid-template-columns: $calendar-weekly-weeknumber-flex-basis repeat(2, 1fr) + > .v-calendar-month__day:nth-child(3n) + border-right: none + &.days-with-weeknumbers__3 + grid-template-columns: $calendar-weekly-weeknumber-flex-basis repeat(3, 1fr) + > .v-calendar-month__day:nth-child(4n) + border-right: none + &.days-with-weeknumbers__4 + grid-template-columns: $calendar-weekly-weeknumber-flex-basis repeat(4, 1fr) + > .v-calendar-month__day:nth-child(5n) + border-right: none + &.days-with-weeknumbers__5 + grid-template-columns: $calendar-weekly-weeknumber-flex-basis repeat(5, 1fr) + > .v-calendar-month__day:nth-child(6n) + border-right: none + &.days-with-weeknumbers__6 + grid-template-columns: $calendar-weekly-weeknumber-flex-basis repeat(6, 1fr) + > .v-calendar-month__day:nth-child(7n) + border-right: none + &.days-with-weeknumbers__7 + grid-template-columns: $calendar-weekly-weeknumber-flex-basis repeat(7, 1fr) + > .v-calendar-month__day:nth-child(7n) + border-right: $calendar-line-width solid $calendar-line-width + > .v-calendar-month__day:nth-child(8n) + border-right: none + > .v-calendar-month__day:nth-child(8n) + border-right: none diff --git a/packages/vuetify/src/labs/VCalendar/VCalendarDay.sass b/packages/vuetify/src/labs/VCalendar/VCalendarDay.sass index 4e8353cba26..d6633def9de 100644 --- a/packages/vuetify/src/labs/VCalendar/VCalendarDay.sass +++ b/packages/vuetify/src/labs/VCalendar/VCalendarDay.sass @@ -1,32 +1,35 @@ -.v-calendar-day - position: relative - display: flex - flex-direction: column +@use '../../styles/tools' -.v-calendar-weekly - .v-calendar__container - display: grid +@include tools.layer('components') + .v-calendar-day + position: relative + display: flex + flex-direction: column - &.days__7 - grid-template-columns: repeat(7, 1fr) + .v-calendar-weekly + .v-calendar__container + display: grid - &.days__6 - grid-template-columns: repeat(6, 1fr) + &.days__7 + grid-template-columns: repeat(7, 1fr) - &.days__5 - grid-template-columns: repeat(5, 1fr) + &.days__6 + grid-template-columns: repeat(6, 1fr) - &.days__4 - grid-template-columns: repeat(4, 1fr) + &.days__5 + grid-template-columns: repeat(5, 1fr) - &.days__3 - grid-template-columns: repeat(3, 1fr) + &.days__4 + grid-template-columns: repeat(4, 1fr) - &.days__2 - grid-template-columns: repeat(2, 1fr) + &.days__3 + grid-template-columns: repeat(3, 1fr) - &.days__1 - grid-template-columns: repeat(1, 1fr) + &.days__2 + grid-template-columns: repeat(2, 1fr) - &.days__0 - grid-template-columns: repeat(1, 1fr) + &.days__1 + grid-template-columns: repeat(1, 1fr) + + &.days__0 + grid-template-columns: repeat(1, 1fr) diff --git a/packages/vuetify/src/labs/VCalendar/VCalendarHeader.sass b/packages/vuetify/src/labs/VCalendar/VCalendarHeader.sass index fd90effeb92..ef43f1f8f6b 100644 --- a/packages/vuetify/src/labs/VCalendar/VCalendarHeader.sass +++ b/packages/vuetify/src/labs/VCalendar/VCalendarHeader.sass @@ -1,13 +1,15 @@ -@import './_variables.scss' +@use '../../styles/tools' +@use './variables' as * -.v-calendar-header - align-items: $calendar-header-align - display: $calendar-header-display - min-height: $calendar-header-min-height +@include tools.layer('components') + .v-calendar-header + align-items: $calendar-header-align + display: $calendar-header-display + min-height: $calendar-header-min-height -.v-calendar-header__today - margin-inline-end: $calendar-header-today-margin-end + .v-calendar-header__today + margin-inline-end: $calendar-header-today-margin-end -.v-calendar-header__title - font-size: $calendar-header-title-font-size - margin-inline-start: $calendar-header-title-margin-start + .v-calendar-header__title + font-size: $calendar-header-title-font-size + margin-inline-start: $calendar-header-title-margin-start diff --git a/packages/vuetify/src/labs/VCalendar/VCalendarInterval.sass b/packages/vuetify/src/labs/VCalendar/VCalendarInterval.sass index 7ce0bedbb3b..8c8057e345b 100644 --- a/packages/vuetify/src/labs/VCalendar/VCalendarInterval.sass +++ b/packages/vuetify/src/labs/VCalendar/VCalendarInterval.sass @@ -1,40 +1,42 @@ -@import './_variables.scss' +@use '../../styles/tools' +@use './variables' as * -.v-calendar-day__row-with-label - display: grid - grid-template-columns: 48px 8px 1fr - border-right: $calendar-line-width solid $calendar-line-color - - .v-calendar-day__row-hairline - position: relative +@include tools.layer('components') + .v-calendar-day__row-with-label + display: grid + grid-template-columns: 48px 8px 1fr border-right: $calendar-line-width solid $calendar-line-color - &:after - content: '' + + .v-calendar-day__row-hairline + position: relative + border-right: $calendar-line-width solid $calendar-line-color + &:after + content: '' + border-bottom: $calendar-line-width solid $calendar-line-color + position: absolute + width: 100% + margin-top: -1px + z-index: 3 + pointer-events: none + + .v-calendar-day__row-label + font-size: 10px + text-align: center + position: relative + top: -8px + .v-calendar-day__row-content border-bottom: $calendar-line-width solid $calendar-line-color - position: absolute - width: 100% - margin-top: -1px - z-index: 3 - pointer-events: none + &.v-calendar-day__row-content-through + border-bottom: none - .v-calendar-day__row-label - font-size: 10px - text-align: center - position: relative - top: -8px - .v-calendar-day__row-content - border-bottom: $calendar-line-width solid $calendar-line-color - &.v-calendar-day__row-content-through - border-bottom: none + .v-calendar-day__row-without-label + display: grid + grid-template-columns: 1fr + border-right: $calendar-line-width solid $calendar-line-color -.v-calendar-day__row-without-label - display: grid - grid-template-columns: 1fr - border-right: $calendar-line-width solid $calendar-line-color - - .v-calendar-day__row-content - overflow: hidden - border-bottom: $calendar-line-width solid $calendar-line-color + .v-calendar-day__row-content + overflow: hidden + border-bottom: $calendar-line-width solid $calendar-line-color - &.v-calendar-day__row-content-through - border-bottom: none \ No newline at end of file + &.v-calendar-day__row-content-through + border-bottom: none diff --git a/packages/vuetify/src/labs/VCalendar/VCalendarIntervalEvent.sass b/packages/vuetify/src/labs/VCalendar/VCalendarIntervalEvent.sass index de53da7d3bb..7c949fc3b02 100644 --- a/packages/vuetify/src/labs/VCalendar/VCalendarIntervalEvent.sass +++ b/packages/vuetify/src/labs/VCalendar/VCalendarIntervalEvent.sass @@ -1,6 +1,9 @@ -.v-calendar-internal-event - overflow: hidden - padding: 4px - text-overflow: ellipsis - white-space: nowrap - // width: 100% +@use '../../styles/tools' + +@include tools.layer('components') + .v-calendar-internal-event + overflow: hidden + padding: 4px + text-overflow: ellipsis + white-space: nowrap + // width: 100% diff --git a/packages/vuetify/src/labs/VCalendar/VCalendarMonthDay.sass b/packages/vuetify/src/labs/VCalendar/VCalendarMonthDay.sass index 418df6b64ea..28bd5523d70 100644 --- a/packages/vuetify/src/labs/VCalendar/VCalendarMonthDay.sass +++ b/packages/vuetify/src/labs/VCalendar/VCalendarMonthDay.sass @@ -1,65 +1,67 @@ -@import './_variables.scss' +@use '../../styles/tools' +@use './variables' as * -.v-calendar-month__day - position: relative - display: flex - flex-direction: column - // https://github.com/vuetifyjs/vuetify/issues/9058 - // https://bugzilla.mozilla.org/show_bug.cgi?id=1114904 - min-width: 0 - min-height: $calendar-weekly-day-min-height - // Themed - border-right: $calendar-line-width solid $calendar-line-color - border-bottom: $calendar-line-width solid $calendar-line-color - flex: 1 1 auto - border-inline-end: $calendar-line-width solid $calendar-line-color +@include tools.layer('components') + .v-calendar-month__day + position: relative + display: flex + flex-direction: column + // https://github.com/vuetifyjs/vuetify/issues/9058 + // https://bugzilla.mozilla.org/show_bug.cgi?id=1114904 + min-width: 0 + min-height: $calendar-weekly-day-min-height + // Themed + border-right: $calendar-line-width solid $calendar-line-color + border-bottom: $calendar-line-width solid $calendar-line-color + flex: 1 1 auto + border-inline-end: $calendar-line-width solid $calendar-line-color -.v-calendar-weekly__day - flex: 1 - width: 0 - overflow: hidden - user-select: none - position: relative - padding: $calendar-weekly-day-padding - // https://github.com/vuetifyjs/vuetify/issues/9058 - // https://bugzilla.mozilla.org/show_bug.cgi?id=1114904 - min-width: 0 - min-height: $calendar-weekly-day-min-height - // Themed - border-right: $calendar-line-width solid $calendar-line-color - border-bottom: $calendar-line-width solid $calendar-line-color - flex: 1 1 auto - border-inline-end: $calendar-line-width solid $calendar-line-color - text-align: center + .v-calendar-weekly__day + flex: 1 + width: 0 + overflow: hidden + user-select: none + position: relative + padding: $calendar-weekly-day-padding + // https://github.com/vuetifyjs/vuetify/issues/9058 + // https://bugzilla.mozilla.org/show_bug.cgi?id=1114904 + min-width: 0 + min-height: $calendar-weekly-day-min-height + // Themed + border-right: $calendar-line-width solid $calendar-line-color + border-bottom: $calendar-line-width solid $calendar-line-color + flex: 1 1 auto + border-inline-end: $calendar-line-width solid $calendar-line-color + text-align: center - &.v-present - .v-calendar-weekly__day-month - color: currentColor + &.v-present + .v-calendar-weekly__day-month + color: currentColor -.v-calendar-weekly__day-label - text-decoration: none - user-select: none - cursor: pointer - box-shadow: none - text-align: center + .v-calendar-weekly__day-label + text-decoration: none + user-select: none + cursor: pointer + box-shadow: none + text-align: center - .v-btn - font-size: $calendar-weekly-day-label-font-size - text-transform: none !important + .v-btn + font-size: $calendar-weekly-day-label-font-size + text-transform: none !important - &.v-calendar-weekly__day-label__today - background: rgba(var(--v-theme-surface-variant), var(--v-medium-emphasis-opacity)) - color: rgb(var(--v-theme-on-surface-variant)) + &.v-calendar-weekly__day-label__today + background: rgba(var(--v-theme-surface-variant), var(--v-medium-emphasis-opacity)) + color: rgb(var(--v-theme-on-surface-variant)) -.v-calendar-weekly__day-month - position: absolute - text-decoration: none - user-select: none - box-shadow: none - top: 0 - left: $calendar-weekly-day-month-left - height: $calendar-weekly-day-label-size - line-height: $calendar-weekly-day-label-size + .v-calendar-weekly__day-month + position: absolute + text-decoration: none + user-select: none + box-shadow: none + top: 0 + left: $calendar-weekly-day-month-left + height: $calendar-weekly-day-label-size + line-height: $calendar-weekly-day-label-size -.v-calendar-weekly__day-alldayevents-container - min-height: 24px \ No newline at end of file + .v-calendar-weekly__day-alldayevents-container + min-height: 24px diff --git a/packages/vuetify/src/labs/VEmptyState/VEmptyState.sass b/packages/vuetify/src/labs/VEmptyState/VEmptyState.sass index 1c01c5fd5ed..9f4aa072790 100644 --- a/packages/vuetify/src/labs/VEmptyState/VEmptyState.sass +++ b/packages/vuetify/src/labs/VEmptyState/VEmptyState.sass @@ -1,62 +1,64 @@ +@use '../../styles/tools' @use './variables' as * -.v-empty-state - align-items: center - display: flex - flex-direction: column - justify-content: center - min-height: $empty-state-min-height - padding: $empty-state-padding +@include tools.layer('components') + .v-empty-state + align-items: center + display: flex + flex-direction: column + justify-content: center + min-height: $empty-state-min-height + padding: $empty-state-padding - &--start - align-items: flex-start + &--start + align-items: flex-start - &--center - align-items: center + &--center + align-items: center + + &--end + align-items: flex-end + + .v-empty-state__media + text-align: center + width: 100% + + .v-icon + color: $empty-state-media-icon-color + + .v-empty-state__headline + color: $empty-state-headline-color + font-size: $empty-state-headline-font-size + font-weight: $empty-state-headline-font-weight + line-height: $empty-state-headline-line-height + text-align: center + margin-bottom: $empty-state-headline-margin-bottom + + .v-empty-state--mobile & + font-size: $empty-state-headline-mobile-font-size + + .v-empty-state__title + font-size: $empty-state-title-font-size + font-weight: $empty-state-title-font-weight + line-height: $empty-state-title-line-height + margin-bottom: $empty-state-title-margin-bottom + text-align: center + + .v-empty-state__text + font-size: $empty-state-text-font-size + font-weight: $empty-state-text-font-weight + line-height: $empty-state-text-line-height + padding: $empty-state-text-padding + text-align: center + + .v-empty-state__content + padding: $empty-state-content-padding + + .v-empty-state__actions + display: flex + gap: $empty-state-actions-gap + padding: $empty-state-actions-padding - &--end - align-items: flex-end - -.v-empty-state__media - text-align: center - width: 100% - - .v-icon - color: $empty-state-media-icon-color - -.v-empty-state__headline - color: $empty-state-headline-color - font-size: $empty-state-headline-font-size - font-weight: $empty-state-headline-font-weight - line-height: $empty-state-headline-line-height - text-align: center - margin-bottom: $empty-state-headline-margin-bottom - - .v-empty-state--mobile & - font-size: $empty-state-headline-mobile-font-size - -.v-empty-state__title - font-size: $empty-state-title-font-size - font-weight: $empty-state-title-font-weight - line-height: $empty-state-title-line-height - margin-bottom: $empty-state-title-margin-bottom - text-align: center - -.v-empty-state__text - font-size: $empty-state-text-font-size - font-weight: $empty-state-text-font-weight - line-height: $empty-state-text-line-height - padding: $empty-state-text-padding - text-align: center - -.v-empty-state__content - padding: $empty-state-content-padding - -.v-empty-state__actions - display: flex - gap: $empty-state-actions-gap - padding: $empty-state-actions-padding - -.v-empty-state__action-btn.v-btn - background-color: $empty-state-actions-btn-background-color - color: $empty-state-actions-btn-color + .v-empty-state__action-btn.v-btn + background-color: $empty-state-actions-btn-background-color + color: $empty-state-actions-btn-color diff --git a/packages/vuetify/src/labs/VFab/VFab.sass b/packages/vuetify/src/labs/VFab/VFab.sass index 21c9ec2f305..6ab35247c01 100644 --- a/packages/vuetify/src/labs/VFab/VFab.sass +++ b/packages/vuetify/src/labs/VFab/VFab.sass @@ -5,78 +5,79 @@ @use './variables' as * @use './mixins' as * -.v-fab - align-items: center - display: inline-flex - flex: 1 1 auto - pointer-events: none - position: relative - transition-duration: $fab-transition-duration - transition-timing-function: $fab-transition-timing-function - vertical-align: middle - - .v-btn - pointer-events: auto - - &--variant-elevated - @include tools.elevation(3) - - &--app, - &--absolute - display: flex - - &--start, - &--left - justify-content: flex-start - - &--center +@include tools.layer('components') + .v-fab align-items: center - justify-content: center + display: inline-flex + flex: 1 1 auto + pointer-events: none + position: relative + transition-duration: $fab-transition-duration + transition-timing-function: $fab-transition-timing-function + vertical-align: middle - &--end, - &--right - justify-content: flex-end + .v-btn + pointer-events: auto - &--bottom - align-items: flex-end + &--variant-elevated + @include tools.elevation(3) - &--top - align-items: flex-start + &--app, + &--absolute + display: flex - &--extended - .v-btn - // min-height: 56px - // min-width: 80px - border-radius: 9999px !important + &--start, + &--left + justify-content: flex-start + + &--center + align-items: center + justify-content: center + + &--end, + &--right + justify-content: flex-end + + &--bottom + align-items: flex-end + + &--top + align-items: flex-start + + &--extended + .v-btn + // min-height: 56px + // min-width: 80px + border-radius: 9999px !important -.v-fab__container - align-self: center - display: inline-flex - vertical-align: middle + .v-fab__container + align-self: center + display: inline-flex + vertical-align: middle - .v-fab--app & - margin: 12px + .v-fab--app & + margin: 12px - .v-fab--absolute & - position: absolute - z-index: 4 + .v-fab--absolute & + position: absolute + z-index: 4 - .v-fab--offset.v-fab--top & - transform: translateY(-50%) + .v-fab--offset.v-fab--top & + transform: translateY(-50%) - .v-fab--offset.v-fab--bottom & - transform: translateY(50%) + .v-fab--offset.v-fab--bottom & + transform: translateY(50%) - .v-fab--top & - top: 0 + .v-fab--top & + top: 0 - .v-fab--bottom & - bottom: 0 + .v-fab--bottom & + bottom: 0 - .v-fab--left &, - .v-fab--start & - left: 0 + .v-fab--left &, + .v-fab--start & + left: 0 - .v-fab--right &, - .v-fab--end & - right: 0 + .v-fab--right &, + .v-fab--end & + right: 0 diff --git a/packages/vuetify/src/labs/VNumberInput/VNumberInput.sass b/packages/vuetify/src/labs/VNumberInput/VNumberInput.sass index ee47531f5ba..62891528831 100644 --- a/packages/vuetify/src/labs/VNumberInput/VNumberInput.sass +++ b/packages/vuetify/src/labs/VNumberInput/VNumberInput.sass @@ -1,48 +1,50 @@ @use 'sass:selector' +@use '../../styles/tools' @use './variables' as * -.v-number-input - $root: & - $control-root: #{selector.append($root, '__control')} +@include tools.layer('components') + .v-number-input + $root: & + $control-root: #{selector.append($root, '__control')} - input[type="number"] - -moz-appearance: textfield + input[type="number"] + -moz-appearance: textfield - &::-webkit-outer-spin-button, - &::-webkit-inner-spin-button - -webkit-appearance: none + &::-webkit-outer-spin-button, + &::-webkit-inner-spin-button + -webkit-appearance: none - .v-field - padding-inline-end: 0 - padding-inline-start: 0 - - &--inset - .v-divider - height: $number-input-inset-divider-size - width: $number-input-inset-divider-size - align-self: center - - &--split - .v-field__input - text-align: center + .v-field + padding-inline-end: 0 + padding-inline-start: 0 + + &--inset + .v-divider + height: $number-input-inset-divider-size + width: $number-input-inset-divider-size + align-self: center + + &--split + .v-field__input + text-align: center + + &--stacked + #{$control-root} + flex-direction: column-reverse + .v-btn + flex: 1 + + &--hide-input + .v-field + flex: none + &__input + width: 0 + padding-inline: 0 + + &__control + display: flex + height: 100% - &--stacked - #{$control-root} - flex-direction: column-reverse .v-btn - flex: 1 - - &--hide-input - .v-field - flex: none - &__input - width: 0 - padding-inline: 0 - - &__control - display: flex - height: 100% - - .v-btn - background-color: transparent - border-radius: 0 + background-color: transparent + border-radius: 0 diff --git a/packages/vuetify/src/labs/VPicker/VPicker.sass b/packages/vuetify/src/labs/VPicker/VPicker.sass index ae877a2f4c4..5c717c89e0d 100644 --- a/packages/vuetify/src/labs/VPicker/VPicker.sass +++ b/packages/vuetify/src/labs/VPicker/VPicker.sass @@ -2,51 +2,52 @@ @use '../../styles/tools' @use './variables' as * -.v-picker.v-sheet - @include tools.elevation($picker-elevation) - @include tools.rounded($picker-border-radius) - - display: grid - grid-auto-rows: min-content - grid-template-areas: "title" "header" "body" - overflow: hidden - - &.v-picker--with-actions - grid-template-areas: "title" "header" "body" "actions" - -.v-picker__body - grid-area: body - overflow: hidden - position: relative - -.v-picker__header - grid-area: header - -.v-picker__actions - grid-area: actions - padding: $picker-actions-padding - display: flex - align-items: center - justify-content: flex-end - - .v-btn - min-width: 48px - - &:not(:last-child) - margin-inline-end: 8px - -.v-picker--landscape - grid-template-areas: "title" "header body" "header body" - -.v-picker--landscape.v-picker--with-actions - grid-template-areas: "title" "header body" "header actions" - -.v-picker-title - text-transform: uppercase - font-size: .75rem - grid-area: title - padding-inline: 24px 12px - padding-top: 16px - padding-bottom: 16px - font-weight: $picker-title-font-weight - letter-spacing: .1666666667em +@include tools.layer('components') + .v-picker.v-sheet + @include tools.elevation($picker-elevation) + @include tools.rounded($picker-border-radius) + + display: grid + grid-auto-rows: min-content + grid-template-areas: "title" "header" "body" + overflow: hidden + + &.v-picker--with-actions + grid-template-areas: "title" "header" "body" "actions" + + .v-picker__body + grid-area: body + overflow: hidden + position: relative + + .v-picker__header + grid-area: header + + .v-picker__actions + grid-area: actions + padding: $picker-actions-padding + display: flex + align-items: center + justify-content: flex-end + + .v-btn + min-width: 48px + + &:not(:last-child) + margin-inline-end: 8px + + .v-picker--landscape + grid-template-areas: "title" "header body" "header body" + + .v-picker--landscape.v-picker--with-actions + grid-template-areas: "title" "header body" "header actions" + + .v-picker-title + text-transform: uppercase + font-size: .75rem + grid-area: title + padding-inline: 24px 12px + padding-top: 16px + padding-bottom: 16px + font-weight: $picker-title-font-weight + letter-spacing: .1666666667em diff --git a/packages/vuetify/src/labs/VSpeedDial/VSpeedDial.sass b/packages/vuetify/src/labs/VSpeedDial/VSpeedDial.sass index 15d31532152..e2d8a3834f2 100644 --- a/packages/vuetify/src/labs/VSpeedDial/VSpeedDial.sass +++ b/packages/vuetify/src/labs/VSpeedDial/VSpeedDial.sass @@ -1,24 +1,27 @@ -.v-speed-dial__content - gap: 8px +@use '../../styles/tools' - &.v-overlay__content - &.v-speed-dial__content--end, - &.v-speed-dial__content--end-center, - &.v-speed-dial__content--right, - &.v-speed-dial__content--right-center - flex-direction: row +@include tools.layer('components') + .v-speed-dial__content + gap: 8px - &.v-speed-dial__content--left, - &.v-speed-dial__content--left-center, - &.v-speed-dial__content--start, - &.v-speed-dial__content--start-center - flex-direction: row-reverse + &.v-overlay__content + &.v-speed-dial__content--end, + &.v-speed-dial__content--end-center, + &.v-speed-dial__content--right, + &.v-speed-dial__content--right-center + flex-direction: row - &.v-speed-dial__content--top, - &.v-speed-dial__content--top-center - flex-direction: column-reverse + &.v-speed-dial__content--left, + &.v-speed-dial__content--left-center, + &.v-speed-dial__content--start, + &.v-speed-dial__content--start-center + flex-direction: row-reverse - > * - @for $i from 1 through 10 - &:nth-child(#{$i}) - transition-delay: 0.05s * ($i - 1) + &.v-speed-dial__content--top, + &.v-speed-dial__content--top-center + flex-direction: column-reverse + + > * + @for $i from 1 through 10 + &:nth-child(#{$i}) + transition-delay: 0.05s * ($i - 1) diff --git a/packages/vuetify/src/labs/VTimePicker/VTimePicker.sass b/packages/vuetify/src/labs/VTimePicker/VTimePicker.sass index 5fbe6833ed9..e62c8eec3dd 100644 --- a/packages/vuetify/src/labs/VTimePicker/VTimePicker.sass +++ b/packages/vuetify/src/labs/VTimePicker/VTimePicker.sass @@ -1,10 +1,11 @@ -@import './_variables.scss' -@import '../VPicker/_variables.scss' +@use '../../styles/tools' +@use './variables' as * -.v-time-picker.v-picker - padding: $time-picker-padding - width: $time-picker-width +@include tools.layer('components') + .v-time-picker.v-picker + padding: $time-picker-padding + width: $time-picker-width - .v-picker-title - padding: 0 - margin-bottom: 20px + .v-picker-title + padding: 0 + margin-bottom: 20px diff --git a/packages/vuetify/src/labs/VTimePicker/VTimePickerClock.sass b/packages/vuetify/src/labs/VTimePicker/VTimePickerClock.sass index fb61819c4d5..71a4e6a9930 100644 --- a/packages/vuetify/src/labs/VTimePicker/VTimePickerClock.sass +++ b/packages/vuetify/src/labs/VTimePicker/VTimePickerClock.sass @@ -1,131 +1,132 @@ -@import './_variables.scss' +@use '../../styles/tools' +@use './variables' as * -// Theme -.v-time-picker-clock - background: rgb(var(--v-theme-background)) - color: rgb(var(--v-theme-on-background)) +@include tools.layer('components') + // Theme + .v-time-picker-clock + background: rgb(var(--v-theme-background)) + color: rgb(var(--v-theme-on-background)) + + &:after + color: rgb(var(--v-theme-primary)) + .v-time-picker-clock__item--active + background-color: rgb(var(--v-theme-surface-variant)) + color: rgb(var(--v-theme-on-surface-variant)) - &:after - color: rgb(var(--v-theme-primary)) + .v-time-picker-clock + margin: 0 auto + background: rgb(var(--v-theme-surface-light)) + border-radius: 50% + position: relative + transition: none + user-select: none + height: 256px + width: 256px + flex: 1 0 auto - .v-time-picker-clock__item--active - background-color: rgb(var(--v-theme-surface-variant)) - color: rgb(var(--v-theme-on-surface-variant)) + &__container + display: flex + flex-direction: column + flex-basis: 290px + justify-content: center + padding: $time-picker-clock-padding -.v-time-picker-clock - margin: 0 auto - background: rgb(var(--v-theme-surface-light)) - border-radius: 50% - position: relative - transition: none - user-select: none - height: 256px - width: 256px - flex: 1 0 auto + &__hand + background-color: currentColor + height: $time-picker-clock-hand-height + width: $time-picker-clock-hand-width + bottom: 50% + left: $time-picker-clock-hand-left + transform-origin: center bottom + position: absolute + will-change: transform + z-index: 1 + + &:before + background: transparent + border-width: $time-picker-clock-end-border-width + border-style: $time-picker-clock-end-border-style + border-color: $time-picker-clock-end-border-color + border-radius: 100% + width: $time-picker-clock-end-size + height: $time-picker-clock-end-size + content: '' + position: absolute + top: $time-picker-clock-end-top + left: 50% + transform: translate(-50%, -50%) + + &:after + content: '' + position: absolute + height: $time-picker-clock-center-size + width: $time-picker-clock-center-size + top: 100% + left: 50% + border-radius: 100% + background-color: currentColor + transform: translate(-50%, -50%) + + &--inner:after + height: $time-picker-clock-inner-hand-height + + &--readonly + pointer-events: none + + .v-time-picker-clock__item--disabled + opacity: var(--v-disabled-opacity) + + .v-picker--full-width + .v-time-picker-clock__container + max-width: $time-picker-clock-max-width + + .v-time-picker-clock__inner + position: absolute + bottom: $time-picker-clock-inner-offset + left: $time-picker-clock-inner-offset + right: $time-picker-clock-inner-offset + top: $time-picker-clock-inner-offset - &__container + .v-time-picker-clock__item + align-items: center + border-radius: 100% + cursor: default display: flex - flex-direction: column - flex-basis: 290px + font-size: $time-picker-number-font-size justify-content: center - padding: $time-picker-clock-padding - - &__hand - background-color: currentColor - height: $time-picker-clock-hand-height - width: $time-picker-clock-hand-width - bottom: 50% - left: $time-picker-clock-hand-left - transform-origin: center bottom + height: $time-picker-indicator-size position: absolute - will-change: transform - z-index: 1 - - &:before - background: transparent - border-width: $time-picker-clock-end-border-width - border-style: $time-picker-clock-end-border-style - border-color: $time-picker-clock-end-border-color - border-radius: 100% - width: $time-picker-clock-end-size - height: $time-picker-clock-end-size - content: '' - position: absolute - top: $time-picker-clock-end-top - left: 50% - transform: translate(-50%, -50%) + text-align: center + width: $time-picker-indicator-size + user-select: none + transform: translate(-50%, -50%) - &:after + > span + z-index: 1 + + &:before, &:after content: '' + border-radius: 100% position: absolute - height: $time-picker-clock-center-size - width: $time-picker-clock-center-size - top: 100% + top: 50% left: 50% - border-radius: 100% - background-color: currentColor + height: 14px + width: 14px transform: translate(-50%, -50%) - &--inner:after - height: $time-picker-clock-inner-hand-height - - &--readonly - pointer-events: none - - .v-time-picker-clock__item--disabled - opacity: var(--v-disabled-opacity) - -.v-picker--full-width - .v-time-picker-clock__container - max-width: $time-picker-clock-max-width - -.v-time-picker-clock__inner - position: absolute - bottom: $time-picker-clock-inner-offset - left: $time-picker-clock-inner-offset - right: $time-picker-clock-inner-offset - top: $time-picker-clock-inner-offset - -.v-time-picker-clock__item - align-items: center - border-radius: 100% - cursor: default - display: flex - font-size: $time-picker-number-font-size - justify-content: center - height: $time-picker-indicator-size - position: absolute - text-align: center - width: $time-picker-indicator-size - user-select: none - transform: translate(-50%, -50%) - - > span - z-index: 1 - - &:before, &:after - content: '' - border-radius: 100% - position: absolute - top: 50% - left: 50% - height: 14px - width: 14px - transform: translate(-50%, -50%) - - &:after, &:before - height: $time-picker-indicator-size - width: $time-picker-indicator-size + &:after, &:before + height: $time-picker-indicator-size + width: $time-picker-indicator-size - &--active - cursor: default - z-index: 2 + &--active + cursor: default + z-index: 2 - &--disabled - pointer-events: none + &--disabled + pointer-events: none -.v-picker--landscape - .v-time-picker-clock - &__container - flex-direction: row + .v-picker--landscape + .v-time-picker-clock + &__container + flex-direction: row diff --git a/packages/vuetify/src/labs/VTimePicker/VTimePickerControls.sass b/packages/vuetify/src/labs/VTimePicker/VTimePickerControls.sass index 00166a6c1f4..f56cea756db 100644 --- a/packages/vuetify/src/labs/VTimePicker/VTimePickerControls.sass +++ b/packages/vuetify/src/labs/VTimePicker/VTimePickerControls.sass @@ -1,102 +1,102 @@ -@import './_variables.scss' -@import '../VPicker/_variables.scss' +@use '../../styles/tools' +@use './variables' as * - -.v-time-picker-controls - display: flex - align-items: center - justify-content: center - font-size: .875rem - padding-top: 4px - padding-bottom: 4px - // padding-inline-start: 6px - // padding-inline-end: 12px - margin-bottom: 36px - - &__text - padding-bottom: 12px - - &__time +@include tools.layer('components') + .v-time-picker-controls display: flex - white-space: nowrap - direction: ltr + align-items: center justify-content: center - - &__btn.v-btn--density-default.v-btn - width: $time-picker-contols-btn-width - height: $time-picker-contols-btn-height - font-size: $time-picker-contols-btn-font - - &__active - background: rgb(var(--v-theme-primary)) - &.v-time-picker-controls__time--with-ampm__btn - width: $time-picker-contols-ampm-btn-width - height: $time-picker-contols-ampm-btn-height - &.v-time-picker-controls__time--with-seconds__btn - // overridden - width: $time-picker-contols-seconds-btn-width + font-size: .875rem + padding-top: 4px + padding-bottom: 4px + // padding-inline-start: 6px + // padding-inline-end: 12px + margin-bottom: 36px + + &__text + padding-bottom: 12px + + &__time + display: flex + white-space: nowrap + direction: ltr + justify-content: center + + &__btn.v-btn--density-default.v-btn + width: $time-picker-contols-btn-width + height: $time-picker-contols-btn-height + font-size: $time-picker-contols-btn-font + + &__active + background: rgb(var(--v-theme-primary)) + &.v-time-picker-controls__time--with-ampm__btn + width: $time-picker-contols-ampm-btn-width + height: $time-picker-contols-ampm-btn-height + &.v-time-picker-controls__time--with-seconds__btn + // overridden + width: $time-picker-contols-seconds-btn-width + height: $time-picker-contols-seconds-btn-height + font-size: $time-picker-contols-seconds-btn-font + &__separator + font-size: $time-picker-contols-btn-font + height: $time-picker-contols-btn-height + width: $time-picker-contols-separator-width + text-align: center + &__separator.v-time-picker-controls--with-seconds__time__separator height: $time-picker-contols-seconds-btn-height - font-size: $time-picker-contols-seconds-btn-font - &__separator - font-size: $time-picker-contols-btn-font - height: $time-picker-contols-btn-height - width: $time-picker-contols-separator-width - text-align: center - &__separator.v-time-picker-controls--with-seconds__time__separator - height: $time-picker-contols-seconds-btn-height - font-size: $time-picker-contols-btn-font - -.v-time-picker-controls__ampm - margin-left: 12px - align-self: flex-end - display: flex - flex-direction: column - font-size: $time-picker-ampm-title-font-size - text-transform: uppercase - - &--readonly - pointer-events: none - - &--readonly - .v-picker__title__btn.v-picker__title__btn--active - opacity: $picker-inactive-btn-opacity + font-size: $time-picker-contols-btn-font - &__btn.v-btn.v-btn--density-default + .v-time-picker-controls__ampm + margin-left: 12px + align-self: flex-end + display: flex + flex-direction: column font-size: $time-picker-ampm-title-font-size - padding: 0 8px - min-width: 52px - height: $time-picker-contols-ampm-height - &.v-time-picker-controls__ampm__am - border-radius: $time-picker-contols-ampm-am-border-radius - border: 1px solid - &.v-time-picker-controls__ampm__pm - border-radius: $time-picker-contols-ampm-pm-border-radius - border: 1px solid - border-top: none - &__active - background: rgb(var(--v-theme-primary)) + text-transform: uppercase + + &--readonly + pointer-events: none + + &--readonly + .v-picker__title__btn.v-picker__title__btn--active + opacity: $picker-inactive-btn-opacity + + &__btn.v-btn.v-btn--density-default + font-size: $time-picker-ampm-title-font-size + padding: 0 8px + min-width: 52px + height: $time-picker-contols-ampm-height + &.v-time-picker-controls__ampm__am + border-radius: $time-picker-contols-ampm-am-border-radius + border: 1px solid + &.v-time-picker-controls__ampm__pm + border-radius: $time-picker-contols-ampm-pm-border-radius + border: 1px solid + border-top: none + &__active + background: rgb(var(--v-theme-primary)) -.v-picker__title--landscape - .v-time-picker-controls - flex-direction: column - justify-content: center - height: 100% + .v-picker__title--landscape + .v-time-picker-controls + flex-direction: column + justify-content: center + height: 100% - .v-time-picker-controls__time - text-align: right + .v-time-picker-controls__time + text-align: right - .v-picker__title__btn, - span - height: $time-picker-landscape-title-btn-height - font-size: $time-picker-landscape-title-btn-height + .v-picker__title__btn, + span + height: $time-picker-landscape-title-btn-height + font-size: $time-picker-landscape-title-btn-height - .v-time-picker-controls__ampm - margin: $time-picker-landscape-ampm-title-margin - align-self: initial - text-align: center + .v-time-picker-controls__ampm + margin: $time-picker-landscape-ampm-title-margin + align-self: initial + text-align: center -.v-picker--time .v-picker__title--landscape - padding: 0 + .v-picker--time .v-picker__title--landscape + padding: 0 - .v-time-picker-controls__time - text-align: center + .v-time-picker-controls__time + text-align: center diff --git a/packages/vuetify/src/labs/VTimePicker/_variables.scss b/packages/vuetify/src/labs/VTimePicker/_variables.scss index a956d58552c..e684cdf8fe4 100644 --- a/packages/vuetify/src/labs/VTimePicker/_variables.scss +++ b/packages/vuetify/src/labs/VTimePicker/_variables.scss @@ -1,4 +1,4 @@ -// @import '../../styles/styles.sass'; +@forward '../VPicker/variables'; $time-picker-padding: 24px !default; $time-picker-contols-btn-font: 56px !default; diff --git a/packages/vuetify/src/labs/VTreeview/VTreeviewItem.sass b/packages/vuetify/src/labs/VTreeview/VTreeviewItem.sass index 3c278856a6a..4cc4baaf06d 100644 --- a/packages/vuetify/src/labs/VTreeview/VTreeviewItem.sass +++ b/packages/vuetify/src/labs/VTreeview/VTreeviewItem.sass @@ -1,19 +1,21 @@ +@use '../../styles/tools' @use './variables' as * -.v-treeview-item--filtered - display: none +@include tools.layer('components') + .v-treeview-item--filtered + display: none -.v-treeview - --indent-padding: 0px + .v-treeview + --indent-padding: 0px -.v-treeview-group.v-list-group - --list-indent-size: #{$treeview-group-list-indent-size} + .v-treeview-group.v-list-group + --list-indent-size: #{$treeview-group-list-indent-size} - .v-list--slim & - --prepend-width: #{$treeview-group-list-prepend-width} + .v-list--slim & + --prepend-width: #{$treeview-group-list-prepend-width} - .v-list-group__items .v-list-item - padding-inline-start: calc(#{$treeview-item-padding-inline-start} + var(--indent-padding)) !important + .v-list-group__items .v-list-item + padding-inline-start: calc(#{$treeview-item-padding-inline-start} + var(--indent-padding)) !important - .v-list-group__items .v-list-item--prepend - // padding-inline-start: calc(#{$treeview-item-prepend-padding-inline-start} + var(--indent-padding)) !important + .v-list-group__items .v-list-item--prepend + // padding-inline-start: calc(#{$treeview-item-prepend-padding-inline-start} + var(--indent-padding)) !important diff --git a/packages/vuetify/src/labs/VTreeview/variables.scss b/packages/vuetify/src/labs/VTreeview/_variables.scss similarity index 80% rename from packages/vuetify/src/labs/VTreeview/variables.scss rename to packages/vuetify/src/labs/VTreeview/_variables.scss index 05352370d07..ce050d3b605 100644 --- a/packages/vuetify/src/labs/VTreeview/variables.scss +++ b/packages/vuetify/src/labs/VTreeview/_variables.scss @@ -1,6 +1,4 @@ @use 'sass:map'; -@use '../../styles/settings'; -@use '../../styles/tools'; $treeview-group-list-indent-size: 16px !default; $treeview-group-list-prepend-width: 16px !default; diff --git a/packages/vuetify/src/styles/elements/_blockquote.sass b/packages/vuetify/src/styles/elements/_blockquote.sass index 65ebe34cb13..82ad588c254 100644 --- a/packages/vuetify/src/styles/elements/_blockquote.sass +++ b/packages/vuetify/src/styles/elements/_blockquote.sass @@ -1,6 +1,8 @@ @use '../settings' +@use '../tools' -.blockquote - padding: settings.$spacer*4 0 settings.$spacer*4 settings.$spacer*6 - font-size: settings.$blockquote-font-size - font-weight: settings.$blockquote-font-weight +@include tools.layer('components') + .blockquote + padding: settings.$spacer*4 0 settings.$spacer*4 settings.$spacer*6 + font-size: settings.$blockquote-font-size + font-weight: settings.$blockquote-font-weight diff --git a/packages/vuetify/src/styles/elements/_global.sass b/packages/vuetify/src/styles/elements/_global.sass index ee15c205516..0cfac6df552 100644 --- a/packages/vuetify/src/styles/elements/_global.sass +++ b/packages/vuetify/src/styles/elements/_global.sass @@ -1,23 +1,25 @@ @use '../settings' +@use '../tools' -html - font-family: settings.$body-font-family - line-height: settings.$line-height-root - font-size: settings.$font-size-root - overflow-x: hidden - text-rendering: optimizeLegibility - -webkit-font-smoothing: antialiased - -moz-osx-font-smoothing: grayscale - -webkit-tap-highlight-color: rgba(0, 0, 0, 0) +@include tools.layer('base') + html + font-family: settings.$body-font-family + line-height: settings.$line-height-root + font-size: settings.$font-size-root + overflow-x: hidden + text-rendering: optimizeLegibility + -webkit-font-smoothing: antialiased + -moz-osx-font-smoothing: grayscale + -webkit-tap-highlight-color: rgba(0, 0, 0, 0) -html.overflow-y-hidden - overflow-y: hidden !important + html.overflow-y-hidden + overflow-y: hidden !important -:root - --v-theme-overlay-multiplier: 1 - --v-scrollbar-offset: 0px + :root + --v-theme-overlay-multiplier: 1 + --v-scrollbar-offset: 0px -// iOS Safari hack to allow click events on body -@supports (-webkit-touch-callout: none) - body - cursor: pointer + // iOS Safari hack to allow click events on body + @supports (-webkit-touch-callout: none) + body + cursor: pointer diff --git a/packages/vuetify/src/styles/generic/_animations.scss b/packages/vuetify/src/styles/generic/_animations.scss index b0e850fbec3..f764aa6a658 100644 --- a/packages/vuetify/src/styles/generic/_animations.scss +++ b/packages/vuetify/src/styles/generic/_animations.scss @@ -1,13 +1,17 @@ -@keyframes v-shake { - 59% { - margin-left: 0; - } +@use '../tools'; - 60%, 80% { - margin-left: 2px; - } +@include tools.layer('transitions') { + @keyframes v-shake { + 59% { + margin-left: 0; + } + + 60%, 80% { + margin-left: 2px; + } - 70%, 90% { - margin-left: -2px; + 70%, 90% { + margin-left: -2px; + } } } diff --git a/packages/vuetify/src/styles/generic/_colors.scss b/packages/vuetify/src/styles/generic/_colors.scss index dc5a409558b..ce4d091c42a 100644 --- a/packages/vuetify/src/styles/generic/_colors.scss +++ b/packages/vuetify/src/styles/generic/_colors.scss @@ -1,6 +1,7 @@ @use 'sass:map'; @use '../settings'; @use '../settings/colors'; +@use '../tools'; @use '../tools/functions' as *; @mixin background-color($color_value) { @@ -16,55 +17,55 @@ } @if (settings.$color-pack) { - @each $color_name, $color_value in colors.$shades { - .bg-#{$color_name} { - @include background-color($color_value); + @include tools.layer('colors') { + @each $color_name, $color_value in colors.$shades { + .bg-#{$color_name} { + @include background-color($color_value); - @if (map.has-key(colors.$text-on-colors, 'shades')) { - @include background-text-color('shades', $color_name); + @if (map.has-key(colors.$text-on-colors, 'shades')) { + @include background-text-color('shades', $color_name); + } } } - } - @each $color_name, $color_color in colors.$colors { - @each $color_type, $color_value in $color_color { - @if ($color_type == 'base') { - .bg-#{$color_name} { - @include background-color($color_value); + @each $color_name, $color_color in colors.$colors { + @each $color_type, $color_value in $color_color { + @if ($color_type == 'base') { + .bg-#{$color_name} { + @include background-color($color_value); - @if (map.has-key(colors.$text-on-colors, $color_name)) { - @include background-text-color($color_name, $color_type); + @if (map.has-key(colors.$text-on-colors, $color_name)) { + @include background-text-color($color_name, $color_type); + } } - } - } - @else if ($color_type != 'shades') { - .bg-#{$color_name}-#{$color_type} { - @include background-color($color_value); + } @else if ($color_type != 'shades') { + .bg-#{$color_name}-#{$color_type} { + @include background-color($color_value); - @if (map.has-key(colors.$text-on-colors, $color_name)) { - @include background-text-color($color_name, $color_type); + @if (map.has-key(colors.$text-on-colors, $color_name)) { + @include background-text-color($color_name, $color_type); + } } } } } - } - @each $color_name, $color_value in colors.$shades { - .text-#{$color_name} { - @include text-color($color_value); + @each $color_name, $color_value in colors.$shades { + .text-#{$color_name} { + @include text-color($color_value); + } } - } - @each $color_name, $color_color in colors.$colors { - @each $color_type, $color_value in $color_color { - @if ($color_type == 'base') { - .text-#{$color_name} { - @include text-color($color_value); - } - } - @else if ($color_type != 'shades') { - .text-#{$color_name}-#{$color_type} { - @include text-color($color_value); + @each $color_name, $color_color in colors.$colors { + @each $color_type, $color_value in $color_color { + @if ($color_type == 'base') { + .text-#{$color_name} { + @include text-color($color_value); + } + } @else if ($color_type != 'shades') { + .text-#{$color_name}-#{$color_type} { + @include text-color($color_value); + } } } } diff --git a/packages/vuetify/src/styles/generic/_index.scss b/packages/vuetify/src/styles/generic/_index.scss index be7ce914364..f933655aeaf 100644 --- a/packages/vuetify/src/styles/generic/_index.scss +++ b/packages/vuetify/src/styles/generic/_index.scss @@ -1,3 +1,4 @@ +@use './layers'; @use './animations'; @use './colors'; @use './reset'; diff --git a/packages/vuetify/src/styles/generic/_layers.scss b/packages/vuetify/src/styles/generic/_layers.scss new file mode 100644 index 00000000000..aabefdf8f1c --- /dev/null +++ b/packages/vuetify/src/styles/generic/_layers.scss @@ -0,0 +1,7 @@ +@use '../settings'; + +@if (settings.$layers) { + @layer vuetify { + @layer reset, transitions, base, components, overrides, colors, theme, utilities; + } +} diff --git a/packages/vuetify/src/styles/generic/_reset.scss b/packages/vuetify/src/styles/generic/_reset.scss index 467dc258ddb..586d9ef5189 100644 --- a/packages/vuetify/src/styles/generic/_reset.scss +++ b/packages/vuetify/src/styles/generic/_reset.scss @@ -1,4 +1,5 @@ @use '../settings'; +@use '../tools'; /*! * ress.css • v2.0.4 @@ -7,285 +8,287 @@ */ @if (settings.$reset) { - /* # ================================================================= - # Global selectors - # ================================================================= */ - - html { - box-sizing: border-box; - overflow-y: scroll; /* All browsers without overlaying scrollbars */ - -webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS */ - word-break: normal; - -moz-tab-size: 4; - tab-size: 4; - } - - *, - ::before, - ::after { - background-repeat: no-repeat; /* Set `background-repeat: no-repeat` to all elements and pseudo elements */ - box-sizing: inherit; - } - - ::before, - ::after { - text-decoration: inherit; /* Inherit text-decoration and vertical align to ::before and ::after pseudo elements */ - vertical-align: inherit; - } + @include tools.layer('reset') { + /* # ================================================================= + # Global selectors + # ================================================================= */ + + html { + box-sizing: border-box; + overflow-y: scroll; /* All browsers without overlaying scrollbars */ + -webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS */ + word-break: normal; + -moz-tab-size: 4; + tab-size: 4; + } - * { - padding: 0; /* Reset `padding` and `margin` of all elements */ - margin: 0; - } + *, + ::before, + ::after { + background-repeat: no-repeat; /* Set `background-repeat: no-repeat` to all elements and pseudo elements */ + box-sizing: inherit; + } - /* # ================================================================= - # General elements - # ================================================================= */ + ::before, + ::after { + text-decoration: inherit; /* Inherit text-decoration and vertical align to ::before and ::after pseudo elements */ + vertical-align: inherit; + } - hr { - overflow: visible; /* Show the overflow in Edge and IE */ - height: 0; /* Add the correct box sizing in Firefox */ - } + * { + padding: 0; /* Reset `padding` and `margin` of all elements */ + margin: 0; + } - details, - main { - display: block; /* Render the `main` element consistently in IE. */ - } + /* # ================================================================= + # General elements + # ================================================================= */ - summary { - display: list-item; /* Add the correct display in all browsers */ - } + hr { + overflow: visible; /* Show the overflow in Edge and IE */ + height: 0; /* Add the correct box sizing in Firefox */ + } - small { - font-size: 80%; /* Set font-size to 80% in `small` elements */ - } + details, + main { + display: block; /* Render the `main` element consistently in IE. */ + } - [hidden] { - display: none; /* Add the correct display in IE */ - } + summary { + display: list-item; /* Add the correct display in all browsers */ + } - abbr[title] { - border-bottom: none; /* Remove the bottom border in Chrome 57 */ - /* Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari */ - text-decoration: underline; - text-decoration: underline dotted; - } + small { + font-size: 80%; /* Set font-size to 80% in `small` elements */ + } - a { - background-color: transparent; /* Remove the gray background on active links in IE 10 */ - } + [hidden] { + display: none; /* Add the correct display in IE */ + } - a:active, - a:hover { - outline-width: 0; /* Remove the outline when hovering in all browsers */ - } + abbr[title] { + border-bottom: none; /* Remove the bottom border in Chrome 57 */ + /* Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari */ + text-decoration: underline; + text-decoration: underline dotted; + } - code, - kbd, - pre, - samp { - font-family: monospace, monospace; /* Specify the font family of code elements */ - } + a { + background-color: transparent; /* Remove the gray background on active links in IE 10 */ + } - pre { - font-size: 1em; /* Correct the odd `em` font sizing in all browsers */ - } + a:active, + a:hover { + outline-width: 0; /* Remove the outline when hovering in all browsers */ + } - b, - strong { - font-weight: bolder; /* Add the correct font weight in Chrome, Edge, and Safari */ - } + code, + kbd, + pre, + samp { + font-family: monospace, monospace; /* Specify the font family of code elements */ + } - /* https://gist.github.com/unruthless/413930 */ - sub, - sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; - } + pre { + font-size: 1em; /* Correct the odd `em` font sizing in all browsers */ + } - sub { - bottom: -0.25em; - } + b, + strong { + font-weight: bolder; /* Add the correct font weight in Chrome, Edge, and Safari */ + } - sup { - top: -0.5em; - } + /* https://gist.github.com/unruthless/413930 */ + sub, + sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; + } - /* # ================================================================= - # Forms - # ================================================================= */ + sub { + bottom: -0.25em; + } - input { - border-radius: 0; - } + sup { + top: -0.5em; + } - /* Replace pointer cursor in disabled elements */ - [disabled] { - cursor: default; - } + /* # ================================================================= + # Forms + # ================================================================= */ - [type="number"]::-webkit-inner-spin-button, - [type="number"]::-webkit-outer-spin-button { - height: auto; /* Correct the cursor style of increment and decrement buttons in Chrome */ - } + input { + border-radius: 0; + } - [type="search"] { - -webkit-appearance: textfield; /* Correct the odd appearance in Chrome and Safari */ - outline-offset: -2px; /* Correct the outline style in Safari */ - } + /* Replace pointer cursor in disabled elements */ + [disabled] { + cursor: default; + } - [type="search"]::-webkit-search-cancel-button, - [type="search"]::-webkit-search-decoration { - -webkit-appearance: none; /* Remove the inner padding in Chrome and Safari on macOS */ - } + [type="number"]::-webkit-inner-spin-button, + [type="number"]::-webkit-outer-spin-button { + height: auto; /* Correct the cursor style of increment and decrement buttons in Chrome */ + } - textarea { - overflow: auto; /* Internet Explorer 11+ */ - resize: vertical; /* Specify textarea resizability */ - } + [type="search"] { + -webkit-appearance: textfield; /* Correct the odd appearance in Chrome and Safari */ + outline-offset: -2px; /* Correct the outline style in Safari */ + } - button, - input, - optgroup, - select, - textarea { - font: inherit; /* Specify font inheritance of form elements */ - } + [type="search"]::-webkit-search-cancel-button, + [type="search"]::-webkit-search-decoration { + -webkit-appearance: none; /* Remove the inner padding in Chrome and Safari on macOS */ + } - optgroup { - font-weight: bold; /* Restore the font weight unset by the previous rule */ - } + textarea { + overflow: auto; /* Internet Explorer 11+ */ + resize: vertical; /* Specify textarea resizability */ + } - button { - overflow: visible; /* Address `overflow` set to `hidden` in IE 8/9/10/11 */ - } + button, + input, + optgroup, + select, + textarea { + font: inherit; /* Specify font inheritance of form elements */ + } - button, - select { - text-transform: none; /* Firefox 40+, Internet Explorer 11- */ - } + optgroup { + font-weight: bold; /* Restore the font weight unset by the previous rule */ + } - /* Apply cursor pointer to button elements */ - button, - [type="button"], - [type="reset"], - [type="submit"], - [role="button"] { - cursor: pointer; - color: inherit; - } + button { + overflow: visible; /* Address `overflow` set to `hidden` in IE 8/9/10/11 */ + } - /* Remove inner padding and border in Firefox 4+ */ - button::-moz-focus-inner, - [type="button"]::-moz-focus-inner, - [type="reset"]::-moz-focus-inner, - [type="submit"]::-moz-focus-inner { - border-style: none; - padding: 0; - } + button, + select { + text-transform: none; /* Firefox 40+, Internet Explorer 11- */ + } - /* Replace focus style removed in the border reset above */ - button:-moz-focusring, - [type="button"]::-moz-focus-inner, - [type="reset"]::-moz-focus-inner, - [type="submit"]::-moz-focus-inner { - outline: 1px dotted ButtonText; - } + /* Apply cursor pointer to button elements */ + button, + [type="button"], + [type="reset"], + [type="submit"], + [role="button"] { + cursor: pointer; + color: inherit; + } - button, - html [type="button"], /* Prevent a WebKit bug where (2) destroys native `audio` and `video`controls in Android 4 */ - [type="reset"], - [type="submit"] { - -webkit-appearance: button; /* Correct the inability to style clickable types in iOS */ - } + /* Remove inner padding and border in Firefox 4+ */ + button::-moz-focus-inner, + [type="button"]::-moz-focus-inner, + [type="reset"]::-moz-focus-inner, + [type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; + } - /* Remove the default button styling in all browsers */ - button, - input, - select, - textarea { - background-color: transparent; - border-style: none; - } + /* Replace focus style removed in the border reset above */ + button:-moz-focusring, + [type="button"]::-moz-focus-inner, + [type="reset"]::-moz-focus-inner, + [type="submit"]::-moz-focus-inner { + outline: 1px dotted ButtonText; + } - /* Style select like a standard input */ - select { - -moz-appearance: none; /* Firefox 36+ */ - -webkit-appearance: none; /* Chrome 41+ */ - } + button, + html [type="button"], /* Prevent a WebKit bug where (2) destroys native `audio` and `video`controls in Android 4 */ + [type="reset"], + [type="submit"] { + -webkit-appearance: button; /* Correct the inability to style clickable types in iOS */ + } - select::-ms-expand { - display: none; /* Internet Explorer 11+ */ - } + /* Remove the default button styling in all browsers */ + button, + input, + select, + textarea { + background-color: transparent; + border-style: none; + } - select::-ms-value { - color: currentColor; /* Internet Explorer 11+ */ - } + /* Style select like a standard input */ + select { + -moz-appearance: none; /* Firefox 36+ */ + -webkit-appearance: none; /* Chrome 41+ */ + } - legend { - border: 0; /* Correct `color` not being inherited in IE 8/9/10/11 */ - color: inherit; /* Correct the color inheritance from `fieldset` elements in IE */ - display: table; /* Correct the text wrapping in Edge and IE */ - max-width: 100%; /* Correct the text wrapping in Edge and IE */ - white-space: normal; /* Correct the text wrapping in Edge and IE */ - max-width: 100%; /* Correct the text wrapping in Edge 18- and IE */ - } + select::-ms-expand { + display: none; /* Internet Explorer 11+ */ + } - ::-webkit-file-upload-button { - /* Correct the inability to style clickable types in iOS and Safari */ - -webkit-appearance: button; - color: inherit; - font: inherit; /* Change font properties to `inherit` in Chrome and Safari */ - } + select::-ms-value { + color: currentColor; /* Internet Explorer 11+ */ + } - // Remove default password icon in EdgeHTML (#537) - ::-ms-clear, - ::-ms-reveal { - display: none - } + legend { + border: 0; /* Correct `color` not being inherited in IE 8/9/10/11 */ + color: inherit; /* Correct the color inheritance from `fieldset` elements in IE */ + display: table; /* Correct the text wrapping in Edge and IE */ + max-width: 100%; /* Correct the text wrapping in Edge and IE */ + white-space: normal; /* Correct the text wrapping in Edge and IE */ + max-width: 100%; /* Correct the text wrapping in Edge 18- and IE */ + } - /* # ================================================================= - # Specify media element style - # ================================================================= */ + ::-webkit-file-upload-button { + /* Correct the inability to style clickable types in iOS and Safari */ + -webkit-appearance: button; + color: inherit; + font: inherit; /* Change font properties to `inherit` in Chrome and Safari */ + } - img { - border-style: none; /* Remove border when inside `a` element in IE 8/9/10 */ - } + // Remove default password icon in EdgeHTML (#537) + ::-ms-clear, + ::-ms-reveal { + display: none + } - /* Add the correct vertical alignment in Chrome, Firefox, and Opera */ - progress { - vertical-align: baseline; - } + /* # ================================================================= + # Specify media element style + # ================================================================= */ - /* # ================================================================= - # Accessibility - # ================================================================= */ + img { + border-style: none; /* Remove border when inside `a` element in IE 8/9/10 */ + } - /* Hide content from screens but not screenreaders */ - @media screen { - [hidden~="screen"] { - display: inherit; + /* Add the correct vertical alignment in Chrome, Firefox, and Opera */ + progress { + vertical-align: baseline; } - [hidden~="screen"]:not(:active):not(:focus):not(:target) { - position: absolute !important; - clip: rect(0 0 0 0) !important; + + /* # ================================================================= + # Accessibility + # ================================================================= */ + + /* Hide content from screens but not screenreaders */ + @media screen { + [hidden~="screen"] { + display: inherit; + } + [hidden~="screen"]:not(:active):not(:focus):not(:target) { + position: absolute !important; + clip: rect(0 0 0 0) !important; + } } - } - /* Specify the progress cursor of updating elements */ - [aria-busy="true"] { - cursor: progress; - } + /* Specify the progress cursor of updating elements */ + [aria-busy="true"] { + cursor: progress; + } - /* Specify the pointer cursor of trigger elements */ - [aria-controls] { - cursor: pointer; - } + /* Specify the pointer cursor of trigger elements */ + [aria-controls] { + cursor: pointer; + } - /* Specify the unstyled cursor of disabled, not-editable, or otherwise inoperable elements */ - [aria-disabled="true"] { - cursor: default; + /* Specify the unstyled cursor of disabled, not-editable, or otherwise inoperable elements */ + [aria-disabled="true"] { + cursor: default; + } } } diff --git a/packages/vuetify/src/styles/generic/_rtl.scss b/packages/vuetify/src/styles/generic/_rtl.scss index 9052fa967ff..4d3926d060d 100644 --- a/packages/vuetify/src/styles/generic/_rtl.scss +++ b/packages/vuetify/src/styles/generic/_rtl.scss @@ -1,9 +1,13 @@ -.v-locale { - &--is-rtl { - direction: rtl; - } +@use '../tools'; + +@include tools.layer('base') { + .v-locale { + &--is-rtl { + direction: rtl; + } - &--is-ltr { - direction: ltr; + &--is-ltr { + direction: ltr; + } } } diff --git a/packages/vuetify/src/styles/generic/_transitions.scss b/packages/vuetify/src/styles/generic/_transitions.scss index 2f235505ad5..88659677c02 100644 --- a/packages/vuetify/src/styles/generic/_transitions.scss +++ b/packages/vuetify/src/styles/generic/_transitions.scss @@ -1,4 +1,5 @@ @use '../settings'; +@use '../tools'; @mixin transition-default() { &-enter-active { @@ -26,339 +27,341 @@ } } -// Component specific transitions -.dialog-transition, -.dialog-bottom-transition, -.dialog-top-transition { - &-enter-active { - transition-duration: 225ms !important; - transition-timing-function: settings.$decelerated-easing !important; - } +@include tools.layer('transitions') { + // Component specific transitions + .dialog-transition, + .dialog-bottom-transition, + .dialog-top-transition { + &-enter-active { + transition-duration: 225ms !important; + transition-timing-function: settings.$decelerated-easing !important; + } - &-leave-active { - transition-duration: 125ms !important; - transition-timing-function: settings.$accelerated-easing !important; - } + &-leave-active { + transition-duration: 125ms !important; + transition-timing-function: settings.$accelerated-easing !important; + } - &-enter-active, - &-leave-active { - transition-property: transform, opacity !important; - pointer-events: none; + &-enter-active, + &-leave-active { + transition-property: transform, opacity !important; + pointer-events: none; + } } -} -.dialog-transition { - &-enter-from, &-leave-to { - transform: scale(0.9); - opacity: 0; - } + .dialog-transition { + &-enter-from, &-leave-to { + transform: scale(0.9); + opacity: 0; + } - &-enter-to, &-leave-from { - opacity: 1; + &-enter-to, &-leave-from { + opacity: 1; + } } -} -.dialog-bottom-transition { - &-enter-from, &-leave-to { - transform: translateY(calc(50vh + 50%)); + .dialog-bottom-transition { + &-enter-from, &-leave-to { + transform: translateY(calc(50vh + 50%)); + } } -} -.dialog-top-transition { - &-enter-from, &-leave-to { - transform: translateY(calc(-50vh - 50%)); + .dialog-top-transition { + &-enter-from, &-leave-to { + transform: translateY(calc(-50vh - 50%)); + } } -} -.picker-transition, -.picker-reverse-transition { - @include transition-default(); + .picker-transition, + .picker-reverse-transition { + @include transition-default(); - &-enter-from, - &-leave-to { - opacity: 0; - } + &-enter-from, + &-leave-to { + opacity: 0; + } - &-leave-from, - &-leave-active, - &-leave-to { - position: absolute !important; - } + &-leave-from, + &-leave-active, + &-leave-to { + position: absolute !important; + } - &-enter-active, - &-leave-active { - transition-property: transform, opacity !important; + &-enter-active, + &-leave-active { + transition-property: transform, opacity !important; + } } -} -.picker-transition { - @include transition-default(); + .picker-transition { + @include transition-default(); - &-enter-from { - transform: translate(100%, 0); - } + &-enter-from { + transform: translate(100%, 0); + } - &-leave-to { - transform: translate(-100%, 0); + &-leave-to { + transform: translate(-100%, 0); + } } -} -.picker-reverse-transition { - @include transition-default(); + .picker-reverse-transition { + @include transition-default(); - &-enter-from { - transform: translate(-100%, 0); - } + &-enter-from { + transform: translate(-100%, 0); + } - &-leave-to { - transform: translate(100%, 0); + &-leave-to { + transform: translate(100%, 0); + } } -} -// Generic transitions -.expand-transition { - @include transition-default(); + // Generic transitions + .expand-transition { + @include transition-default(); - &-enter-active, - &-leave-active { - transition-property: height !important; + &-enter-active, + &-leave-active { + transition-property: height !important; + } } -} -.expand-x-transition { - @include transition-default(); + .expand-x-transition { + @include transition-default(); - &-enter-active, - &-leave-active { - transition-property: width !important; + &-enter-active, + &-leave-active { + transition-property: width !important; + } } -} -.scale-transition { - @include transition-default(); - @include fade-out(); + .scale-transition { + @include transition-default(); + @include fade-out(); - &-enter-from { - opacity: 0; - transform: scale(0); - } + &-enter-from { + opacity: 0; + transform: scale(0); + } - &-enter-active, - &-leave-active { - transition-property: transform, opacity !important; + &-enter-active, + &-leave-active { + transition-property: transform, opacity !important; + } } -} -.scale-rotate-transition { - @include transition-default(); - @include fade-out(); + .scale-rotate-transition { + @include transition-default(); + @include fade-out(); - &-enter-from { - opacity: 0; - transform: scale(0) rotate(-45deg); - } + &-enter-from { + opacity: 0; + transform: scale(0) rotate(-45deg); + } - &-enter-active, - &-leave-active { - transition-property: transform, opacity !important; + &-enter-active, + &-leave-active { + transition-property: transform, opacity !important; + } } -} -.scale-rotate-reverse-transition { - @include transition-default(); - @include fade-out(); + .scale-rotate-reverse-transition { + @include transition-default(); + @include fade-out(); - &-enter-from { - opacity: 0; - transform: scale(0) rotate(45deg); - } + &-enter-from { + opacity: 0; + transform: scale(0) rotate(45deg); + } - &-enter-active, - &-leave-active { - transition-property: transform, opacity !important; + &-enter-active, + &-leave-active { + transition-property: transform, opacity !important; + } } -} -.message-transition { - @include transition-default(); + .message-transition { + @include transition-default(); - &-enter-from, &-leave-to { - opacity: 0; - transform: translateY(-15px); - } + &-enter-from, &-leave-to { + opacity: 0; + transform: translateY(-15px); + } - &-leave-from, &-leave-active { - position: absolute; - } + &-leave-from, &-leave-active { + position: absolute; + } - &-enter-active, - &-leave-active { - transition-property: transform, opacity !important; + &-enter-active, + &-leave-active { + transition-property: transform, opacity !important; + } } -} -.slide-y-transition { - @include transition-default(); + .slide-y-transition { + @include transition-default(); - &-enter-from, &-leave-to { - opacity: 0; - transform: translateY(-15px); - } + &-enter-from, &-leave-to { + opacity: 0; + transform: translateY(-15px); + } - &-enter-active, - &-leave-active { - transition-property: transform, opacity !important; + &-enter-active, + &-leave-active { + transition-property: transform, opacity !important; + } } -} -.slide-y-reverse-transition { - @include transition-default(); + .slide-y-reverse-transition { + @include transition-default(); - &-enter-from, &-leave-to { - opacity: 0; - transform: translateY(15px); - } + &-enter-from, &-leave-to { + opacity: 0; + transform: translateY(15px); + } - &-enter-active, - &-leave-active { - transition-property: transform, opacity !important; + &-enter-active, + &-leave-active { + transition-property: transform, opacity !important; + } } -} -.scroll-y-transition { - @include transition-default(); + .scroll-y-transition { + @include transition-default(); - &-enter-from, &-leave-to { - opacity: 0; - } + &-enter-from, &-leave-to { + opacity: 0; + } - &-enter-from { - transform: translateY(-15px); - } + &-enter-from { + transform: translateY(-15px); + } - &-leave-to { - transform: translateY(15px); - } + &-leave-to { + transform: translateY(15px); + } - &-enter-active, - &-leave-active { - transition-property: transform, opacity !important; + &-enter-active, + &-leave-active { + transition-property: transform, opacity !important; + } } -} -.scroll-y-reverse-transition { - @include transition-default(); + .scroll-y-reverse-transition { + @include transition-default(); - &-enter-from, &-leave-to { - opacity: 0; - } + &-enter-from, &-leave-to { + opacity: 0; + } - &-enter-from { - transform: translateY(15px); - } + &-enter-from { + transform: translateY(15px); + } - &-leave-to { - transform: translateY(-15px); - } + &-leave-to { + transform: translateY(-15px); + } - &-enter-active, - &-leave-active { - transition-property: transform, opacity !important; + &-enter-active, + &-leave-active { + transition-property: transform, opacity !important; + } } -} -.scroll-x-transition { - @include transition-default(); + .scroll-x-transition { + @include transition-default(); - &-enter-from, &-leave-to { - opacity: 0; - } + &-enter-from, &-leave-to { + opacity: 0; + } - &-enter-from { - transform: translateX(-15px); - } + &-enter-from { + transform: translateX(-15px); + } - &-leave-to { - transform: translateX(15px); - } + &-leave-to { + transform: translateX(15px); + } - &-enter-active, - &-leave-active { - transition-property: transform, opacity !important; + &-enter-active, + &-leave-active { + transition-property: transform, opacity !important; + } } -} -.scroll-x-reverse-transition { - @include transition-default(); + .scroll-x-reverse-transition { + @include transition-default(); - &-enter-from, &-leave-to { - opacity: 0; - } + &-enter-from, &-leave-to { + opacity: 0; + } - &-enter-from { - transform: translateX(15px); - } + &-enter-from { + transform: translateX(15px); + } - &-leave-to { - transform: translateX(-15px); - } + &-leave-to { + transform: translateX(-15px); + } - &-enter-active, - &-leave-active { - transition-property: transform, opacity !important; + &-enter-active, + &-leave-active { + transition-property: transform, opacity !important; + } } -} -.slide-x-transition { - @include transition-default(); + .slide-x-transition { + @include transition-default(); - &-enter-from, &-leave-to { - opacity: 0; - transform: translateX(-15px); - } + &-enter-from, &-leave-to { + opacity: 0; + transform: translateX(-15px); + } - &-enter-active, - &-leave-active { - transition-property: transform, opacity !important; + &-enter-active, + &-leave-active { + transition-property: transform, opacity !important; + } } -} -.slide-x-reverse-transition { - @include transition-default(); + .slide-x-reverse-transition { + @include transition-default(); - &-enter-from, &-leave-to { - opacity: 0; - transform: translateX(15px); - } + &-enter-from, &-leave-to { + opacity: 0; + transform: translateX(15px); + } - &-enter-active, - &-leave-active { - transition-property: transform, opacity !important; + &-enter-active, + &-leave-active { + transition-property: transform, opacity !important; + } } -} -.fade-transition { - @include transition-default(); + .fade-transition { + @include transition-default(); - &-enter-from, &-leave-to { - opacity: 0 !important; - } + &-enter-from, &-leave-to { + opacity: 0 !important; + } - &-enter-active, - &-leave-active { - transition-property: opacity !important; + &-enter-active, + &-leave-active { + transition-property: opacity !important; + } } -} -.fab-transition { - @include transition-default(); + .fab-transition { + @include transition-default(); - &-enter-from, &-leave-to { - transform: scale(0) rotate(-45deg); - } + &-enter-from, &-leave-to { + transform: scale(0) rotate(-45deg); + } - &-enter-active, - &-leave-active { - transition-property: transform !important; + &-enter-active, + &-leave-active { + transition-property: transform !important; + } } } diff --git a/packages/vuetify/src/styles/settings/_variables.scss b/packages/vuetify/src/styles/settings/_variables.scss index bec385b37da..ebddd5d20a8 100644 --- a/packages/vuetify/src/styles/settings/_variables.scss +++ b/packages/vuetify/src/styles/settings/_variables.scss @@ -5,6 +5,7 @@ $color-pack: true !default; $reset: true !default; +$layers: false !default; $body-font-family: 'Roboto', sans-serif !default; $font-size-root: 1rem !default; diff --git a/packages/vuetify/src/styles/tools/_index.sass b/packages/vuetify/src/styles/tools/_index.sass index 5372e8aaa81..fa6599c932b 100644 --- a/packages/vuetify/src/styles/tools/_index.sass +++ b/packages/vuetify/src/styles/tools/_index.sass @@ -4,6 +4,7 @@ @forward '_border' @forward '_density' @forward '_elevation' +@forward '_layer' @forward '_position' @forward '_radius' @forward '_rounded' diff --git a/packages/vuetify/src/styles/tools/_layer.scss b/packages/vuetify/src/styles/tools/_layer.scss new file mode 100644 index 00000000000..74fb238a5dc --- /dev/null +++ b/packages/vuetify/src/styles/tools/_layer.scss @@ -0,0 +1,11 @@ +@use '../settings'; + +@mixin layer ($name) { + @if (settings.$layers) { + @layer vuetify.#{$name} { + @content; + } + } @else { + @content; + } +} diff --git a/packages/vuetify/src/styles/utilities/_display.sass b/packages/vuetify/src/styles/utilities/_display.sass index 543a1b4e585..d30de6c7e3d 100644 --- a/packages/vuetify/src/styles/utilities/_display.sass +++ b/packages/vuetify/src/styles/utilities/_display.sass @@ -1,8 +1,10 @@ @use '../settings' +@use '../tools' @if (settings.$utilities != false and length(settings.$utilities) > 0) - @each $size, $media_query in settings.$display-breakpoints - .hidden - &-#{$size} - @media #{$media_query} - display: none !important + @include tools.layer('utilities') + @each $size, $media_query in settings.$display-breakpoints + .hidden + &-#{$size} + @media #{$media_query} + display: none !important diff --git a/packages/vuetify/src/styles/utilities/_elevation.scss b/packages/vuetify/src/styles/utilities/_elevation.scss index 960ba053c34..37cdefb0b6e 100644 --- a/packages/vuetify/src/styles/utilities/_elevation.scss +++ b/packages/vuetify/src/styles/utilities/_elevation.scss @@ -2,12 +2,14 @@ @use '../settings'; @if (settings.$utilities != false and length(settings.$utilities) > 0) { - $z: 24; - @while $z >= 0 { - .elevation-#{$z} { - @include tools.elevation($z, $important: true); - } + @include tools.layer('utilities') { + $z: 24; + @while $z >= 0 { + .elevation-#{$z} { + @include tools.elevation($z, $important: true); + } - $z: $z - 1; + $z: $z - 1; + } } } diff --git a/packages/vuetify/src/styles/utilities/_index.sass b/packages/vuetify/src/styles/utilities/_index.sass index 04486a9b4fa..e0a13f95d42 100644 --- a/packages/vuetify/src/styles/utilities/_index.sass +++ b/packages/vuetify/src/styles/utilities/_index.sass @@ -7,38 +7,37 @@ @use './elevation' @use './screenreaders' -// Utilities -@each $breakpoint in map.keys(settings.$grid-breakpoints) - // Generate media query if needed - +tools.media-breakpoint-up($breakpoint) - $infix: tools.breakpoint-infix($breakpoint, settings.$grid-breakpoints) +@include tools.layer('utilities') + @each $breakpoint in map.keys(settings.$grid-breakpoints) + // Generate media query if needed + +tools.media-breakpoint-up($breakpoint) + $infix: tools.breakpoint-infix($breakpoint, settings.$grid-breakpoints) - // Loop over each utility property + // Loop over each utility property + @each $key, $utility in settings.$utilities + // The utility can be disabled with `false`, thus check if the utility is a map first + // Only proceed if responsive media queries are enabled or if it's the base media query + @if string.slice($key, -4) == ':ltr' + @if meta.type-of($utility) == "map" and (map.get($utility, responsive) or $infix == "") + +tools.generate-utility($utility, $infix, 'ltr') + @else if string.slice($key, -4) == ':rtl' + @if meta.type-of($utility) == "map" and (map.get($utility, responsive) or $infix == "") + +tools.generate-utility($utility, $infix, 'rtl') + @else + @if meta.type-of($utility) == "map" and (map.get($utility, responsive) or $infix == "") + +tools.generate-utility($utility, $infix, 'bidi') + + // Print utilities + @media print @each $key, $utility in settings.$utilities // The utility can be disabled with `false`, thus check if the utility is a map first - // Only proceed if responsive media queries are enabled or if it's the base media query + // Then check if the utility needs print styles @if string.slice($key, -4) == ':ltr' - @if meta.type-of($utility) == "map" and (map.get($utility, responsive) or $infix == "") - +tools.generate-utility($utility, $infix, 'ltr') + @if meta.type-of($utility) == "map" and map.get($utility, print) == true + +tools.generate-utility($utility, "-print", 'ltr') @else if string.slice($key, -4) == ':rtl' - @if meta.type-of($utility) == "map" and (map.get($utility, responsive) or $infix == "") - +tools.generate-utility($utility, $infix, 'rtl') + @if meta.type-of($utility) == "map" and map.get($utility, print) == true + +tools.generate-utility($utility, "-print", 'rtl') @else - @if meta.type-of($utility) == "map" and (map.get($utility, responsive) or $infix == "") - +tools.generate-utility($utility, $infix, 'bidi') - - -// Print utilities -@media print - @each $key, $utility in settings.$utilities - // The utility can be disabled with `false`, thus check if the utility is a map first - // Then check if the utility needs print styles - @if string.slice($key, -4) == ':ltr' - @if meta.type-of($utility) == "map" and map.get($utility, print) == true - +tools.generate-utility($utility, "-print", 'ltr') - @else if string.slice($key, -4) == ':rtl' - @if meta.type-of($utility) == "map" and map.get($utility, print) == true - +tools.generate-utility($utility, "-print", 'rtl') - @else - @if meta.type-of($utility) == "map" and map.get($utility, print) == true - +tools.generate-utility($utility, "-print", 'bidi') + @if meta.type-of($utility) == "map" and map.get($utility, print) == true + +tools.generate-utility($utility, "-print", 'bidi') diff --git a/packages/vuetify/src/styles/utilities/_screenreaders.sass b/packages/vuetify/src/styles/utilities/_screenreaders.sass index 5a06913b075..7a443976e9f 100644 --- a/packages/vuetify/src/styles/utilities/_screenreaders.sass +++ b/packages/vuetify/src/styles/utilities/_screenreaders.sass @@ -1,15 +1,17 @@ // Source: https://github.com/twbs/bootstrap/blob/master/scss/mixins/_screen-reader.scss @use '../settings' +@use '../tools' @if (settings.$utilities != false and length(settings.$utilities) > 0) - .d-sr-only, - .d-sr-only-focusable:not(:focus) - border: 0 !important - clip: rect(0, 0, 0, 0) !important - height: 1px !important - margin: -1px !important // Fix for https://github.com/twbs/bootstrap/issues/25686 - overflow: hidden !important - padding: 0 !important - position: absolute !important - white-space: nowrap !important - width: 1px !important + @include tools.layer('utilities') + .d-sr-only, + .d-sr-only-focusable:not(:focus) + border: 0 !important + clip: rect(0, 0, 0, 0) !important + height: 1px !important + margin: -1px !important // Fix for https://github.com/twbs/bootstrap/issues/25686 + overflow: hidden !important + padding: 0 !important + position: absolute !important + white-space: nowrap !important + width: 1px !important