@iamproperty/components 7.1.0--beta7 → 7.2.0

package/assets/sass/foundations/reboot.scss

@@ -1,219 +1,225 @@
 @use 'sass:math';
 @use '../_func' as *;
 
-// Code
-pre,
-code,
-kbd,
-samp {
-  font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
-  font-size: 1rem;
-}
-
-pre {
-  display: block;
-  margin-top: 0; // 1
-  margin-bottom: 1rem; // 2
-  overflow: auto; // 3
-  font-size: rem(14);
-  color: $pre-color;
-
-  // Account for some code outputs that place code tags in pre tags
-  code {
-    font-size: inherit;
-    color: inherit;
-    word-break: normal;
+$layers: 'true' !default;
+$mobileOnly: 'false' !default;
+$darkMode: 'true' !default;
+
+@include layer('reset', $layers) {
+  // Code
+  pre,
+  code,
+  kbd,
+  samp {
+    font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+    font-size: 1rem;
   }
-}
 
-code {
-  font-size: rem(14);
-  color: #d63384;
-  word-wrap: break-word;
-
-  // Streamline the style when inside anchors to avoid broken underline and more
-  a > & {
-    color: inherit;
+  pre {
+    display: block;
+    margin-top: 0; // 1
+    margin-bottom: 1rem; // 2
+    overflow: auto; // 3
+    font-size: rem(14);
+    color: $pre-color;
+
+    // Account for some code outputs that place code tags in pre tags
+    code {
+      font-size: inherit;
+      color: inherit;
+      word-break: normal;
+    }
   }
-}
 
-kbd {
-  padding: 0.1875rem 0.375rem;
-  font-size: rem(14);
+  code {
+    font-size: rem(14);
+    color: #d63384;
+    word-wrap: break-word;
 
-  kbd {
-    padding: 0;
-    font-size: 1rem;
-    font-weight: normal;
+    // Streamline the style when inside anchors to avoid broken underline and more
+    a > & {
+      color: inherit;
+    }
   }
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
 
-/* Reset & Defaults */
-html {
-  -webkit-font-smoothing: antialiased; // Fix for Safari/iOS
-  height: 100%;
-  width: 100%;
-  overflow-x: hidden;
-  overflow-y: scroll;
-  font-size: vw($device-xs-width);
-  scroll-padding-top: rem(100);
+  kbd {
+    padding: 0.1875rem 0.375rem;
+    font-size: rem(14);
 
-  @include media-breakpoint-up(sm) {
-    font-size: vw($device-sm-width);
+    kbd {
+      padding: 0;
+      font-size: 1rem;
+      font-weight: normal;
+    }
   }
-  @include media-breakpoint-up(md) {
-    font-size: vw($device-md-width);
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
   }
 
-  @if $mobileOnly != 'true' {
-    @media (min-width: #{em(1280)}) {
-      font-size: 100%;
-      font-size: vw(1280);
+  /* Reset & Defaults */
+  html {
+    -webkit-font-smoothing: antialiased; // Fix for Safari/iOS
+    height: 100%;
+    width: 100%;
+    overflow-x: hidden;
+    overflow-y: scroll;
+    font-size: vw($device-xs-width);
+    scroll-padding-top: rem(100);
+
+    @include media-breakpoint-up(sm, $mobileOnly) {
+      font-size: vw($device-sm-width);
+    }
+    @include media-breakpoint-up(md, $mobileOnly) {
+      font-size: vw($device-md-width);
+    }
 
-      &:has(.nav--large) {
+    @if $mobileOnly != 'true' {
+      @media (min-width: #{em(1280)}) {
         font-size: 100%;
+        font-size: vw(1280);
+
+        &:has(.nav--large) {
+          font-size: 100%;
+        }
       }
-    }
 
-    @media (min-width: #{em(1440)}) {
-      font-size: 112.5%;
+      @media (min-width: #{em(1440)}) {
+        font-size: 112.5%;
 
-      &:has(.nav--large) {
-        font-size: 100%;
+        &:has(.nav--large) {
+          font-size: 100%;
+        }
       }
-    }
 
-    @media (min-width: #{em(1680)}) {
-      //font-size: 131.25%;
-    }
+      @media (min-width: #{em(1680)}) {
+        //font-size: 131.25%;
+      }
 
-    @media print {
-      font-size: 16px;
-    }
+      @media print {
+        font-size: 16px;
+      }
 
-    @media screen and (min-width: 120em) {
-      // 1920
+      @media screen and (min-width: 120em) {
+        // 1920
 
-      &:has(.nav--large) {
-        font-size: vw(1920);
+        &:has(.nav--large) {
+          font-size: vw(1920);
+        }
       }
     }
   }
-}
 
-body {
-  margin: 0; // 1
-  color-scheme: light dark;
-  @include var(background, --colour-canvas);
-  @include var(font-family, --font-body);
-  @include var(color, --colour-body);
-  width: 100%;
-  line-height: 1.2;
-  min-height: 100%;
-  -webkit-text-size-adjust: 100%; // 3
-  -webkit-tap-highlight-color: rgba($black, 0); // 4
-}
+  body {
+    margin: 0; // 1
+    color-scheme: light dark;
+    @include var(background, --colour-canvas);
+    @include var(font-family, --font-body);
+    @include var(color, --colour-body);
+    width: 100%;
+    line-height: 1.2;
+    min-height: 100%;
+    -webkit-text-size-adjust: 100%; // 3
+    -webkit-tap-highlight-color: rgba($black, 0); // 4
+  }
 
-// #region scrollbars
-:is(div, form, fieldset, textarea)::-webkit-scrollbar {
-  width: 10px;
-  height: 10px;
-}
+  // #region scrollbars
+  :is(div, form, fieldset, textarea, details)::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
 
-:is(div, form, fieldset, textarea)::-webkit-scrollbar-track {
-  background-color: #f1f1f1;
-  border-top: 4px solid var(--colour-canvas-2);
-  border-left: 4px solid var(--colour-canvas-2);
-}
+  :is(div, form, fieldset, textarea, details)::-webkit-scrollbar-track {
+    background-color: #f1f1f1;
+    border-top: 4px solid var(--colour-canvas-2);
+    border-left: 4px solid var(--colour-canvas-2);
+  }
 
-:is(div, form, fieldset, textarea)::-webkit-scrollbar-thumb {
-  background-color: #c1c1c1;
-  width: 6px;
-  border-top: 4px solid var(--colour-canvas-2);
-  border-left: 4px solid var(--colour-canvas-2);
-}
+  :is(div, form, fieldset, textarea, details)::-webkit-scrollbar-thumb {
+    background-color: #c1c1c1;
+    width: 6px;
+    border-top: 4px solid var(--colour-canvas-2);
+    border-left: 4px solid var(--colour-canvas-2);
+  }
 
-//#endregion
+  //#endregion
 
-body > footer,
-body > #app > footer {
-  position: sticky;
-  top: 100vh;
-}
+  body > footer,
+  body > #app > footer {
+    position: sticky;
+    top: 100vh;
+  }
 
-address {
-  margin: 0;
-}
+  address {
+    margin: 0;
+  }
 
-button {
-  font-size: inherit;
-}
+  button {
+    font-size: inherit;
+  }
 
-button:focus {
-  border-radius: initial;
-  outline: 2px auto -webkit-focus-ring-color;
-}
+  button:focus {
+    border-radius: initial;
+    outline: 2px auto -webkit-focus-ring-color;
+  }
 
-hr {
-  --border-style: solid;
-  --border-color: var(--colour-border);
-  border: 0;
-  color: transparent;
-  margin: 0;
-  border-bottom: none;
-  background-color: currentColor;
-  opacity: 1;
-  clear: both;
-
-  &:after {
-    display: table;
+  hr {
+    --border-style: solid;
+    --border-color: var(--colour-border);
+    border: 0;
+    color: transparent;
+    margin: 0;
+    border-bottom: none;
+    background-color: currentColor;
+    opacity: 1;
     clear: both;
-    content: '';
+
+    &:after {
+      display: table;
+      clear: both;
+      content: '';
+    }
   }
-}
 
-[hidden] {
-  display: none !important;
-}
+  [hidden] {
+    display: none !important;
+  }
 
-form {
-  display: contents;
-}
+  form {
+    display: contents;
+  }
 
-input[type='search' i]::-webkit-search-cancel-button {
-  appearance: none;
-}
+  input[type='search' i]::-webkit-search-cancel-button {
+    appearance: none;
+  }
 
-[list]::-webkit-calendar-picker-indicator {
-  display: none !important;
-}
+  [list]::-webkit-calendar-picker-indicator {
+    display: none !important;
+  }
 
-img {
-  max-width: 100%;
-}
+  img {
+    max-width: 100%;
+  }
 
-// Details reset
-summary {
-  list-style: none;
-}
-summary::-webkit-details-marker {
-  display: none;
-}
+  // Details reset
+  summary {
+    list-style: none;
+  }
+  summary::-webkit-details-marker {
+    display: none;
+  }
 
-details summary {
-  cursor: pointer;
-}
+  details summary {
+    cursor: pointer;
+  }
 
-details summary > * {
-  display: inline;
-}
+  details summary > * {
+    display: inline;
+  }
 
-details {
-  width: 100%;
+  details {
+    width: 100%;
+  }
 }