@nuvoui/core 1.4.7 → 1.5.2

package/src/styles/base/_reset.scss

@@ -1,132 +1,136 @@
-// Box sizing rules
-*,
-::before,
-::after,
-::backdrop,
-::file-selector-button {
-    box-sizing: border-box;
-}
-
-// Remove default margin and padding
-body,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p,
-figure,
-blockquote,
-dl,
-dd {
-    margin: 0;
-    padding: 0;
-}
-
-// Prevent font size inflation
-html {
-    text-size-adjust: none;
-}
-
-// Set core root defaults
-html:focus-within {
-    scroll-behavior: smooth;
-}
-
-// Set core body defaults
-body {
-    min-height: 100vh;
-    min-height: 100dvh;
-    text-rendering: optimizespeed;
-    line-height: 1.5;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-}
-
-// Set shorter line heights on headings and interactive elements
-h1,
-h2,
-h3,
-h4,
-button,
-input,
-label {
-    line-height: 1.1;
-}
-
-// Make images easier to work with
-img,
-picture,
-video,
-canvas,
-svg,
-audio,
-iframe,
-embed,
-object {
-    display: block;
-    vertical-align: middle;
-}
-
-img,
-picture,
-video,
-svg {
-    max-width: 100%;
-    height: auto;
-}
-
-// Inherit fonts for inputs and buttons
-input,
-button,
-textarea,
-select {
-    font: inherit;
-    cursor: pointer;
-
-    &:disabled {
-        cursor: not-allowed;
+@layer reset, base, components;
+
+@layer reset {
+    // Box sizing rules
+    *,
+    ::before,
+    ::after,
+    ::backdrop,
+    ::file-selector-button {
+        box-sizing: border-box;
     }
-}
 
-// Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed
-ul[role="list"],
-ol[role="list"] {
-    list-style: none;
-    padding-inline-start: 0; // Replaces padding-left
-    margin-block: 0; // Replaces margin-top/bottom
+    // Remove default margin and padding
+    body,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    p,
+    figure,
+    blockquote,
+    dl,
+    dd {
+        margin: 0;
+        padding: 0;
+    }
 
-    & > li {
-        margin-block: 0;
+    // Prevent font size inflation
+    html {
+        text-size-adjust: none;
     }
-}
-
-// Remove underline from links
-a {
-    text-decoration-skip-ink: auto;
-    text-decoration: none;
-    color: inherit;
-}
-
-// Make sure text areas without a rows attribute are not tiny
-textarea:not([rows]) {
-    min-height: 10em;
-}
-
-// Anything that has been anchored to should have extra scroll margin
-:target {
-    scroll-margin-block: 5ex;
-}
-
-// Remove all animations and transitions for people that prefer not to see them
-@media (prefers-reduced-motion: reduce) {
-    *,
-    *::before,
-    *::after {
-        animation-duration: 0.01ms !important;
-        animation-iteration-count: 1 !important;
-        transition-duration: 0.01ms !important;
-        scroll-behavior: auto !important;
+
+    // Set core root defaults
+    html:focus-within {
+        scroll-behavior: smooth;
+    }
+
+    // Set core body defaults
+    body {
+        min-height: 100vh;
+        min-height: 100dvh;
+        text-rendering: optimizespeed;
+        line-height: 1.5;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+    }
+
+    // Set shorter line heights on headings and interactive elements
+    h1,
+    h2,
+    h3,
+    h4,
+    button,
+    input,
+    label {
+        line-height: 1.1;
+    }
+
+    // Make images easier to work with
+    img,
+    picture,
+    video,
+    canvas,
+    svg,
+    audio,
+    iframe,
+    embed,
+    object {
+        display: block;
+        vertical-align: middle;
+    }
+
+    img,
+    picture,
+    video,
+    svg {
+        max-width: 100%;
+        height: auto;
+    }
+
+    // Inherit fonts for inputs and buttons
+    input,
+    button,
+    textarea,
+    select {
+        font: inherit;
+        cursor: pointer;
+
+        &:disabled {
+            cursor: not-allowed;
+        }
+    }
+
+    // Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed
+    ul[role="list"],
+    ol[role="list"] {
+        list-style: none;
+        padding-inline-start: 0; // Replaces padding-left
+        margin-block: 0; // Replaces margin-top/bottom
+
+        & > li {
+            margin-block: 0;
+        }
+    }
+
+    // Remove underline from links
+    a {
+        text-decoration-skip-ink: auto;
+        text-decoration: none;
+        color: inherit;
+    }
+
+    // Make sure text areas without a rows attribute are not tiny
+    textarea:not([rows]) {
+        min-height: 10em;
+    }
+
+    // Anything that has been anchored to should have extra scroll margin
+    :target {
+        scroll-margin-block: 5ex;
+    }
+
+    // Remove all animations and transitions for people that prefer not to see them
+    @media (prefers-reduced-motion: reduce) {
+        *,
+        *::before,
+        *::after {
+            animation-duration: 0.01ms !important;
+            animation-iteration-count: 1 !important;
+            transition-duration: 0.01ms !important;
+            scroll-behavior: auto !important;
+        }
     }
-}
+} // end @layer reset