@vuetify/nightly 3.0.0-alpha.8 → 3.0.0-beta.0

package/lib/components/VTabs/VTabs.sass

@@ -1,225 +1,55 @@
-// Imports
-@import './_variables.scss'
+@use 'sass:math'
+@forward './variables'
+@use 'sass:map'
+@use '../../styles/settings'
+@use '../../styles/tools'
+@use './variables' as *
 
-+theme(v-tabs) using ($material)
-  > .v-tabs-bar
-    background-color: map-get($material, $tabs-bar-background-color)
-
-    .v-tab:not(.v-tab--active),
-    .v-tab:not(.v-tab--active) > .v-icon,
-    .v-tab:not(.v-tab--active) > .v-btn,
-    .v-tab--disabled
-      color: map-get($material, 'tabs')
-
-  .v-tab
-    +states($material)
-
-+theme(v-tabs-items) using ($material)
-  background-color: map-get($material, 'cards')
-
-.v-tabs-bar
-  &.primary,
-  &.secondary,
-  &.accent,
-  &.success,
-  &.error,
-  &.warning,
-  &.info
-    .v-tab,
-    .v-tabs-slider
-      color: map-deep-get($material-dark, 'text', 'primary')
-
-// Block
 .v-tabs
-  flex: 1 1 auto
-  width: 100%
-
-  .v-menu__activator
-    height: 100%
-  
-  &.v.tabs--vertical.v-tabs--right
-    flex-direction: row-reverse
-
-  &:not(.v-tabs--vertical)
-    .v-tab
-      white-space: normal
-
-    // https://github.com/vuetifyjs/vuetify/issues/8294
-    &.v-tabs--right
-      > .v-slide-group--is-overflowing.v-tabs-bar--is-mobile:not(.v-slide-group--has-affixes)
-        .v-slide-group__next
-          display: initial
-          visibility: hidden
-
-    // https://github.com/vuetifyjs/vuetify/issues/6932
-    &:not(.v-tabs--right)
-      > .v-slide-group--is-overflowing.v-tabs-bar--is-mobile:not(.v-slide-group--has-affixes)
-        .v-slide-group__prev
-          display: initial
-          visibility: hidden
-
-// Element
-.v-tabs-bar
-  border-radius: inherit
-  height: $tabs-bar-height
-
-  &.v-item-group > *
-    cursor: initial
-
-.v-tab
-  align-items: center
-  cursor: pointer
   display: flex
-  flex: 0 1 auto
-  font-size: $tab-font-size
-  font-weight: $tab-font-weight
-  justify-content: center
-  letter-spacing: $tabs-item-letter-spacing
-  line-height: $tab-line-height
-  min-width: $tabs-item-min-width
-  max-width: $tabs-item-max-width
-  outline: none
-  padding: $tabs-item-padding
-  position: relative
-  text-align: center
-  text-decoration: none
-  text-transform: uppercase
-  transition: none
-  user-select: none
-
-  // Needs increased specificity
-  &.v-tab
-    color: inherit
-
-  &:before
-    background-color: currentColor
-    bottom: 0
-    content: ''
-    left: 0
-    opacity: 0
-    pointer-events: none
-    position: absolute
-    right: 0
-    top: 0
-    transition: $primary-transition
-
-
-.v-tabs-slider
-  background-color: currentColor
-  height: 100%
-  width: 100%
 
-  &-wrapper
-    bottom: 0
-    margin: 0 !important
-    position: absolute
-    transition: $primary-transition
-    z-index: 1
+  @at-root
+    @include tools.density('v-tabs', $tabs-density) using ($modifier)
+      height: $tabs-height + $modifier
 
-// Modifier
-.v-tabs--align-with-title > .v-tabs-bar:not(.v-tabs-bar--show-arrows):not(.v-slide-group--is-overflowing) > .v-slide-group__wrapper > .v-tabs-bar__content
-  & > .v-tab:first-child,
-  & > .v-tabs-slider-wrapper + .v-tab
-    +ltr()
-      margin-left: $tabs-item-align-with-title-margin
+      &.v-tabs--stacked
+        height: $tabs-stacked-height + $modifier
 
-    +rtl()
-      margin-right: $tabs-item-align-with-title-margin
+  &.v-slide-group--vertical
+    height: auto
 
-.v-tabs--fixed-tabs > .v-tabs-bar,
-.v-tabs--centered > .v-tabs-bar
-  .v-tabs-bar__content > *:last-child
-    +ltr()
-      margin-right: auto
+    .v-tab
+      --v-btn-height: #{$tabs-height}
 
-    +rtl()
-      margin-left: auto
+.v-tabs--align-with-title:not(.v-slide-group--has-affixes)
+  .v-tab:first-child
+    margin-inline-start: $tab-align-with-title-margin
 
-  .v-tabs-bar__content > *:first-child:not(.v-tabs-slider-wrapper),
-  .v-tabs-slider-wrapper + *
-    +ltr()
-      margin-left: auto
+.v-tabs--fixed-tabs,
+.v-tabs--centered
+  .v-slide-group__content > *:last-child
+    margin-inline-end: auto
 
-    +rtl()
-      margin-right: auto
+  .v-slide-group__content > *:first-child
+    margin-inline-start: auto
 
-.v-tabs--fixed-tabs > .v-tabs-bar
-  .v-tab
-    flex: 1 1 auto
-    width: 100%
+.v-tabs--grow
+  flex-grow: 1
 
-.v-tabs--grow > .v-tabs-bar
   .v-tab
     flex: 1 0 auto
     max-width: none
 
-.v-tabs--icons-and-text > .v-tabs-bar
-  height: $tabs-icons-and-text-bar-height
-
-  .v-tab
-    flex-direction: column-reverse
-
-    > *:first-child
-      margin-bottom: $tabs-icons-and-text-first-tab-margin-bottom
-
-.v-tabs--overflow > .v-tabs-bar
-  .v-tab
-    flex: 1 0 auto
-
-.v-tabs--right > .v-tabs-bar
-  .v-tab:first-child,
-  .v-tabs-slider-wrapper + .v-tab
-    +ltr()
-      margin-left: auto
-
-    +rtl()
-      margin-right: auto
+.v-tabs--right
+  .v-tab:first-child
+    margin-inline-start: auto
 
   .v-tab:last-child
-    +ltr()
-      margin-right: 0
-
-    +rtl()
-      margin-left: 0
-
-.v-tabs--vertical
-  display: flex
-
-  & > .v-tabs-bar
-    flex: 1 0 auto
-    height: auto
-
-    .v-slide-group__next,
-    .v-slide-group__prev
-      display: none
-
-    .v-tabs-bar__content
-      flex-direction: column
-
-    .v-tab
-      height: $tabs-item-vertical-height
-
-    .v-tabs-slider
-      height: 100%
-
-  & > .v-window
-    flex: 0 1 100%
-
-  &.v-tabs--icons-and-text
-    & > .v-tabs-bar
-      .v-tab
-        height: $tabs-item-vertical-icons-and-text-height
-
-.v-tab--active
-  color: inherit
-
-  &.v-tab:not(:focus)::before
-    opacity: 0
-
-  .v-icon,
-  .v-btn.v-btn--flat
-    color: inherit
-
-.v-tab--disabled
-  pointer-events: none
-  opacity: $tab-disabled-opacity
+    margin-inline-end: 0
+
+@media #{map-get(settings.$display-breakpoints, 'md-and-down')}
+  .v-tabs.v-slide-group--is-overflowing:not(.v-slide-group--has-affixes)
+    .v-tab:first-child
+      margin-inline-start: 52px
+    .v-tab:last-child
+      margin-inline-end: 52px

package/lib/components/VTabs/_variables.scss

@@ -1,19 +1,11 @@
-@import '../../styles/styles.sass';
+@use 'sass:math';
+@use 'sass:map';
 
-$tab-disabled-opacity: .5 !default;
-$tab-font-size: map-deep-get($typography, 'subtitle-2', 'size') !default;
-$tab-font-weight: map-deep-get($typography, 'subtitle-2', 'weight') !default;
-$tab-line-height: normal !default;
-$tabs-bar-background-color: 'cards' !default;
-$tabs-bar-height: 48px !default;
-$tabs-icons-and-text-bar-height: 72px !default;
-$tabs-icons-and-text-first-tab-margin-bottom: 6px !default;
-$tabs-item-align-with-title-margin: 42px !default;
-$tabs-item-focus-opacity: 0.20 !default;
-$tabs-item-hover-opacity: 0.16 !default;
-$tabs-item-letter-spacing: .0892857143em !default;
-$tabs-item-max-width: 360px !default;
-$tabs-item-min-width: 90px !default;
-$tabs-item-padding: 0 16px !default;
-$tabs-item-vertical-height: $tabs-bar-height !default;
-$tabs-item-vertical-icons-and-text-height: $tabs-icons-and-text-bar-height !default;
+$tabs-density: ( 'default': 0, 'comfortable' : -1, 'compact': -3) !default;
+$tabs-height: 48px !default;
+$tabs-stacked-height: 72px !default;
+
+$tab-align-with-title-margin: 42px !default;
+$tab-max-width: 360px !default;
+$tab-min-width: 90px !default;
+$tab-slider-size: 2px !default;

package/lib/components/VTabs/index.mjs

@@ -1,16 +1,3 @@
-import VTabs from "./VTabs.mjs";
-import VTab from "./VTab.mjs";
-import VTabsItems from "./VTabsItems.mjs";
-import VTabItem from "./VTabItem.mjs";
-import VTabsSlider from "./VTabsSlider.mjs";
-export { VTabs, VTab, VTabItem, VTabsItems, VTabsSlider };
-export default {
-  $_vuetify_subcomponents: {
-    VTabs,
-    VTab,
-    VTabsItems,
-    VTabItem,
-    VTabsSlider
-  }
-};
+export { VTabs } from "./VTabs.mjs";
+export { VTab } from "./VTab.mjs";
 //# sourceMappingURL=index.mjs.map

package/lib/components/VTabs/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VTabs/index.ts"],"names":["VTabs","VTab","VTabsItems","VTabItem","VTabsSlider","$_vuetify_subcomponents"],"mappings":"OAAOA,K;OACAC,I;OACAC,U;OACAC,Q;OACAC,W;AAEP,SAASJ,KAAT,EAAgBC,IAAhB,EAAsBE,QAAtB,EAAgCD,UAAhC,EAA4CE,WAA5C;AAEA,eAAe;AACbC,EAAAA,uBAAuB,EAAE;AACvBL,IAAAA,KADuB;AAEvBC,IAAAA,IAFuB;AAGvBC,IAAAA,UAHuB;AAIvBC,IAAAA,QAJuB;AAKvBC,IAAAA;AALuB;AADZ,CAAf","sourcesContent":["import VTabs from './VTabs'\nimport VTab from './VTab'\nimport VTabsItems from './VTabsItems'\nimport VTabItem from './VTabItem'\nimport VTabsSlider from './VTabsSlider'\n\nexport { VTabs, VTab, VTabItem, VTabsItems, VTabsSlider }\n\nexport default {\n  $_vuetify_subcomponents: {\n    VTabs,\n    VTab,\n    VTabsItems,\n    VTabItem,\n    VTabsSlider,\n  },\n}\n"],"file":"index.mjs"}
+{"version":3,"sources":["../../../src/components/VTabs/index.ts"],"names":["VTabs","VTab"],"mappings":"SAASA,K;SACAC,I","sourcesContent":["export { VTabs } from './VTabs'\nexport { VTab } from './VTab'\n"],"file":"index.mjs"}

package/lib/components/VTextField/VTextField.css

@@ -0,0 +1,70 @@
+/* region BLOCK */
+.v-text-field input {
+  color: inherit;
+  flex: 1;
+  opacity: 0;
+  transition: 0.15s opacity cubic-bezier(0.4, 0, 0.2, 1);
+}
+.v-text-field input:focus, .v-text-field input:active {
+  outline: none;
+}
+.v-text-field input:invalid {
+  box-shadow: none;
+}
+.v-text-field .v-field {
+  cursor: text;
+}
+.v-text-field--prefixed.v-text-field .v-field__input {
+  --v-field-padding-start: 6px;
+}
+
+.v-text-field--suffixed.v-text-field .v-field__input {
+  --v-field-padding-end: 0;
+}
+
+.v-text-field .v-input__details {
+  padding-inline-start: 16px;
+  padding-inline-end: 16px;
+}
+.v-text-field .v-field--active input {
+  opacity: 1;
+}
+.v-text-field .v-field--single-line input {
+  transition: none;
+}
+
+/* endregion */
+/* region ELEMENTS */
+.v-text-field__prefix, .v-text-field__suffix {
+  align-items: center;
+  color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+  cursor: default;
+  display: flex;
+  opacity: 0;
+  padding-top: var(--v-field-padding-top);
+  transition: inherit;
+  white-space: nowrap;
+}
+.v-field--active .v-text-field__prefix, .v-field--active .v-text-field__suffix {
+  opacity: 1;
+}
+.v-field--disabled .v-text-field__prefix, .v-field--disabled .v-text-field__suffix {
+  color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity));
+}
+.v-text-field__prefix {
+  padding-inline-start: var(--v-field-padding-start);
+}
+.v-text-field__suffix {
+  padding-inline-end: var(--v-field-padding-end);
+}
+
+/* endregion */
+/* region MODIFIERS */
+.v-text-field--flush-details .v-input__details {
+  padding: 0;
+}
+.v-text-field--persistent-placeholder input {
+  opacity: 1;
+}
+
+/* endregion */