vuetify 3.6.0-alpha.2 → 3.6.0

package/lib/styles/generic/_index.scss

@@ -1,3 +1,4 @@
+@use './layers';
 @use './animations';
 @use './colors';
 @use './reset';

package/lib/styles/generic/_layers.scss

@@ -0,0 +1,7 @@
+@use '../settings';
+
+@if (settings.$layers) {
+  @layer vuetify {
+    @layer reset, transitions, base, components, overrides, colors, theme, utilities;
+  }
+}

package/lib/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;
+    }
   }
 }

package/lib/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;
+    }
   }
 }