@universal-material/web 3.0.27 → 3.0.29

package/scss/_reboot.scss

@@ -0,0 +1,495 @@
+@use "mixins";
+
+@mixin reboot() {
+  // stylelint-disable declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
+
+
+  // Reboot
+  //
+  // Normalization of HTML elements, manually forked from Normalize.css to remove
+  // styles targeting irrelevant browsers while applying new styles.
+  //
+  // Normalize is licensed MIT. https://github.com/necolas/normalize.css
+
+
+  // Document
+  //
+  // Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+
+  // Root
+  //
+  // Ability to the value of the root font sizes, affecting the value of `rem`.
+  // null by default, thus nothing is generated.
+
+  :root {
+    @if $enable-smooth-scroll {
+      @media (prefers-reduced-motion: no-preference) {
+        scroll-behavior: smooth;
+      }
+    }
+  }
+
+
+  // Body
+  //
+  // 1. Remove the margin in all browsers.
+  // 2. As a best practice, apply a default `background-color`.
+  // 3. Prevent adjustments of font size after orientation changes in iOS.
+  // 4. Change the default tap highlight to be completely transparent in iOS.
+
+  // scss-docs-start reboot-body-rules
+  body {
+    background-color: var(--u-color-body);
+    color: rgba(var(--u-current-text-color-rgb), var(--u-text-opacity));
+    margin: 0; // 1
+    @include mixins.typo(body-l);
+    text-align: start;
+    -webkit-text-size-adjust: 100%; // 3
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); // 4
+  }
+  // scss-docs-end reboot-body-rules
+
+
+  // Content grouping
+  //
+  // 1. Reset Firefox's gray color
+
+  hr {
+    margin: 1rem 0;
+    color: inherit;
+    border: 0;
+    border-top: 1px solid;
+    opacity: 0.25;
+  }
+
+
+  // Typography
+  //
+  // 1. Remove top margins from headings
+  //    By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top
+  //    margin for easier control within type scales as it avoids margin collapsing.
+
+  h6, h5, h4, h3, h2, h1 {
+    margin-top: 0;
+    margin-bottom: 0.5rem;
+    font-weight: 500;
+    line-height: 1.2;
+  }
+
+  h1 {
+    font-size: calc(1.375rem + 1.5vw);
+  }
+  @media (min-width: 1200px) {
+    h1 {
+      font-size: 2.5rem;
+    }
+  }
+
+  h2 {
+    font-size: calc(1.325rem + 0.9vw);
+  }
+  @media (min-width: 1200px) {
+    h2 {
+      font-size: 2rem;
+    }
+  }
+
+  h3 {
+    font-size: calc(1.3rem + 0.6vw);
+  }
+  @media (min-width: 1200px) {
+    h3 {
+      font-size: 1.75rem;
+    }
+  }
+
+  h4 {
+    font-size: calc(1.275rem + 0.3vw);
+  }
+  @media (min-width: 1200px) {
+    h4 {
+      font-size: 1.5rem;
+    }
+  }
+
+  h5 {
+    font-size: 1.25rem;
+  }
+
+  h6 {
+    font-size: 1rem;
+  }
+
+  p {
+    margin-top: 0;
+    margin-bottom: 1rem;
+  }
+
+  abbr[title] {
+    -webkit-text-decoration: underline dotted;
+    text-decoration: underline dotted;
+    cursor: help;
+    -webkit-text-decoration-skip-ink: none;
+    text-decoration-skip-ink: none;
+  }
+
+  address {
+    margin-bottom: 1rem;
+    font-style: normal;
+    line-height: inherit;
+  }
+
+  ol,
+  ul {
+    padding-left: 2rem;
+  }
+
+  ol,
+  ul,
+  dl {
+    margin-top: 0;
+    margin-bottom: 1rem;
+  }
+
+  ol ol,
+  ul ul,
+  ol ul,
+  ul ol {
+    margin-bottom: 0;
+  }
+
+  dt {
+    font-weight: 700;
+  }
+
+  dd {
+    margin-bottom: 0.5rem;
+    margin-left: 0;
+  }
+
+  blockquote {
+    margin: 0 0 1rem;
+  }
+
+  b,
+  strong {
+    font-weight: bolder;
+  }
+
+  small {
+    font-size: 0.875em;
+  }
+
+
+  // Mark
+
+  mark {
+    padding: 0.1875em;
+    color: var(--u-color-on-warning);
+    background-color: var(--u-color-warning);
+  }
+
+
+  sub,
+  sup {
+    position: relative;
+    font-size: 0.75em;
+    line-height: 0;
+    vertical-align: baseline;
+  }
+
+  sub {
+    bottom: -0.25em;
+  }
+
+  sup {
+    top: -0.5em;
+  }
+
+  a {
+    --u-current-text-color: var(--u-color-primary);
+    --u-current-text-color-rgb: var(--u-color-primary-rgb);
+    color: rgba(var(--u-current-text-color-rgb), var(--u-text-opacity));
+    text-decoration: none;
+
+    @media (hover: hover) {
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  a:not([href]):not([class]), a:not([href]):not([class]):hover {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  pre,
+  code,
+  kbd,
+  samp {
+    font-family: var(--u-font-monospace);
+    font-size: 1em;
+  }
+
+  pre {
+    display: block;
+    margin-top: 0;
+    margin-bottom: 1rem;
+    overflow: auto;
+    font-size: 0.875em;
+  }
+  pre code {
+    font-size: inherit;
+    color: inherit;
+    word-break: normal;
+  }
+
+  code {
+    font-size: 0.875em;
+    word-wrap: break-word;
+  }
+  a > code {
+    color: inherit;
+  }
+
+  kbd {
+    padding: 0.1875rem 0.375rem;
+    font-size: 0.875em;
+    color: var(--u-color-on-light);
+    background-color: var(--u-color-light);
+    font-weight: var(--u-font-weight-regular);
+    border-radius: 0.25rem;
+  }
+  kbd kbd {
+    padding: 0;
+    font-size: 1em;
+  }
+
+  figure {
+    margin: 0 0 1rem;
+  }
+
+  img,
+  svg {
+    vertical-align: middle;
+  }
+
+  table {
+    caption-side: bottom;
+    border-collapse: collapse;
+  }
+
+  caption {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    color: rgba(var(--u-current-text-color-rgb), var(--u-low-emphasis-opacity));
+    text-align: left;
+  }
+
+  th {
+    text-align: inherit;
+    text-align: -webkit-match-parent;
+  }
+
+  thead,
+  tbody,
+  tfoot,
+  tr,
+  td,
+  th {
+    border-color: inherit;
+    border-style: solid;
+    border-width: 0;
+  }
+
+  label {
+    display: inline-block;
+  }
+
+  button {
+    border-radius: 0;
+  }
+
+  button:focus:not(:focus-visible) {
+    outline: 0;
+  }
+
+  input,
+  button,
+  select,
+  optgroup,
+  textarea {
+    margin: 0;
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+  }
+
+  button,
+  select {
+    text-transform: none;
+  }
+
+  [role=button] {
+    cursor: pointer;
+  }
+
+  select {
+    word-wrap: normal;
+  }
+  select:disabled {
+    opacity: 1;
+  }
+
+  [list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator {
+    display: none !important;
+  }
+
+  button,
+  [type=button],
+  [type=reset],
+  [type=submit] {
+    -webkit-appearance: button;
+  }
+  button:not(:disabled),
+  [type=button]:not(:disabled),
+  [type=reset]:not(:disabled),
+  [type=submit]:not(:disabled) {
+    cursor: pointer;
+  }
+
+  ::-moz-focus-inner {
+    padding: 0;
+    border-style: none;
+  }
+
+  textarea {
+    resize: vertical;
+  }
+
+  fieldset {
+    min-width: 0;
+    padding: 0;
+    margin: 0;
+    border: 0;
+  }
+
+  legend {
+    float: left;
+    width: 100%;
+    padding: 0;
+    margin-bottom: 0.5rem;
+    font-size: calc(1.275rem + 0.3vw);
+    line-height: inherit;
+  }
+
+  // Fix height of inputs with a type of datetime-local, date, month, week, or time
+  // See https://github.com/twbs/bootstrap/issues/18842
+
+  ::-webkit-datetime-edit-fields-wrapper,
+  ::-webkit-datetime-edit-text,
+  ::-webkit-datetime-edit-minute,
+  ::-webkit-datetime-edit-hour-field,
+  ::-webkit-datetime-edit-day-field,
+  ::-webkit-datetime-edit-month-field,
+  ::-webkit-datetime-edit-year-field {
+    padding: 0;
+  }
+
+  ::-webkit-inner-spin-button {
+    height: auto;
+  }
+
+  // 1. This overrides the extra rounded corners on search inputs in iOS so that our
+  //    `.form-control` class can properly style them. Note that this cannot simply
+  //    be added to `.form-control` as it's not specific enough. For details, see
+  //    https://github.com/twbs/bootstrap/issues/11586.
+  // 2. Correct the outline style in Safari.
+
+  [type="search"] {
+    -webkit-appearance: textfield; // 1
+    outline-offset: -2px; // 2
+  }
+
+  // 1. A few input types should stay LTR
+  // See https://rtlstyling.com/posts/rtl-styling#form-inputs
+  // 2. RTL only output
+  // See https://rtlcss.com/learn/usage-guide/control-directives/#raw
+
+  /* rtl:raw:
+  [type="tel"],
+  [type="url"],
+  [type="email"],
+  [type="number"] {
+    direction: ltr;
+  }
+  */
+
+  // Remove the inner padding in Chrome and Safari on macOS.
+
+  ::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+
+  // Remove padding around color pickers in webkit browsers
+
+  ::-webkit-color-swatch-wrapper {
+    padding: 0;
+  }
+
+
+  // 1. Inherit font family and line height for file input buttons
+  // 2. Correct the inability to style clickable types in iOS and Safari.
+
+  ::file-selector-button {
+    font: inherit; // 1
+    -webkit-appearance: button; // 2
+  }
+
+  // Correct element displays
+
+  output {
+    display: inline-block;
+  }
+
+  // Remove border from iframe
+
+  iframe {
+    border: 0;
+  }
+
+  // Summary
+  //
+  // 1. Add the correct display in all browsers
+
+  summary {
+    display: list-item; // 1
+    cursor: pointer;
+  }
+
+
+  // Progress
+  //
+  // Add the correct vertical alignment in Chrome, Firefox, and Opera.
+
+  progress {
+    vertical-align: baseline;
+  }
+
+
+  // Hidden attribute
+  //
+  // Always hide an element with the `hidden` HTML attribute.
+
+  [hidden] {
+    display: none !important;
+  }
+}

package/scss/_utilities.scss

@@ -0,0 +1,3 @@
+@import "utilities/divider";
+@import "utilities/spacing";
+@import "utilities/text";

package/scss/_variables.scss

@@ -2,13 +2,32 @@
 
 $awesome-cubic-bezier: cubic-bezier(.19, 1, .22, 1) !default;
 
+$enable-smooth-scroll: true !default;
+$include-reboot: true !default;
+
+$layout-directions: (
+  "",
+  -block,
+  -inline
+);
+
+$spacing-sides: (
+  "": "",
+  t: -top,
+  b: -bottom,
+  s: -inline-start,
+  e: -inline-end,
+  x: -inline,
+  y: -block,
+);
+
 $breakpoints: (
   xs: 0,
   sm: 600px,
   md: 840px,
   lg: 1200px,
   xl: 1600px
-);
+) !default;
 
 $theme-colors: (
   primary,
@@ -81,14 +100,23 @@ $fixed-colors: (
 );
 
 $spacings: (
+  0: 0,
   extra-small: 4px,
   small: 8px,
   medium: 16px,
   large: 24px,
   extra-large: 40px,
-);
+) !default;
+
+$state-layer-opacity: (
+  hover: .08,
+  focus: .1,
+  press: .1,
+  drag: .16
+) !default;
 
 $font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
+$font-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 
 $font-weights: (
   thin: 100,
@@ -97,7 +125,7 @@ $font-weights: (
   medium: 500,
   bold: 700,
   bolder: 900,
-);
+) !default;
 
 $shape-corner: (
   none: 0,
@@ -107,4 +135,4 @@ $shape-corner: (
   large: 16px,
   extra-large: 28px,
   full: 9999px
-);
+) !default;

package/scss/{text-bg → colors}/_text.scss

@@ -23,17 +23,10 @@
   }
 
   .u-text-#{$prefix}#{$name} {
-    @include _current-color-vars-important(var(--u-color-#{$prefix}#{$color-name}-rgb));
+    @include _current-color-vars-important(--u-color-#{$prefix}#{$color-name});
   }
 }
 
-@each $weight, $value in variables.$font-weights {
-  .u-font-weight-#{$weight} {
-    font-weight: var(--u-font-weight-#{$weight}) !important;
-  }
-}
-
-
 @each $color in variables.$color-roles {
   @include _text-variant-block($color, $color);
 }
@@ -57,17 +50,3 @@
 @include _text-variant(on-light);
 @include _text-variant(on-dark);
 
-.u-text-high-emphasis {
-  --u-text-opacity: var(--u-high-emphasis-opacity);
-  color: rgba(var(--u-current-text-color-rgb), var(--u-text-opacity)) !important;
-}
-.u-text-low-emphasis {
-  --u-text-opacity: var(--u-low-emphasis-opacity);
-  color: rgba(var(--u-current-text-color-rgb), var(--u-text-opacity)) !important;
-}
-
-.u-text-lower-emphasis {
-  --u-text-opacity: var(--u-lower-emphasis-opacity);
-  color: rgba(var(--u-current-text-color-rgb), var(--u-text-opacity)) !important;
-}
-

package/scss/layout/_container.scss

@@ -0,0 +1,13 @@
+@use "../api";
+@use "../mixins";
+
+.u-container-fluid,
+.u-container {
+  padding-inline: var(--u-layout-margin-inline, var(--u-layout-margin));
+  padding-block: var(--u-layout-margin-block, var(--u-layout-margin));
+}
+
+.u-container {
+  max-width: var(--u-container-width, 992px);
+  margin-inline: auto;
+}

package/scss/layout/_grid.scss

@@ -0,0 +1,6 @@
+.u-grid {
+  display: grid;
+  grid-template-columns: repeat(var(--u-grid-columns, 1), minmax(0, 1fr));
+  column-gap: var(--u-layout-gutter-inline, var(--u-layout-gutter));
+  row-gap: var(--u-layout-gutter-block, var(--u-layout-gutter));
+}

package/scss/layout/_margin-and-gutters.scss

@@ -0,0 +1,37 @@
+@use "sass:list";
+@use "sass:map";
+
+@use "../variables";
+@use "../api";
+
+@each $breakpoint in map.keys(variables.$breakpoints) {
+  $infix: api.breakpoint-infix($breakpoint);
+
+  @each $direction in variables.$layout-directions {
+
+    @include api.media-breakpoint-up($breakpoint) {
+      .u-margin#{$direction}#{$infix}-default {
+        --u-layout-margin#{$direction}: var(--u-layout-margin-default);
+      }
+
+      .u-gutter#{$direction}#{$infix}-default {
+        --u-layout-gutter#{$direction}: var(--u-layout-gutter-default);
+      }
+    }
+  }
+
+  @each $spacing in map.keys(variables.$spacings) {
+    @each $direction in variables.$layout-directions {
+
+      @include api.media-breakpoint-up($breakpoint) {
+        .u-margin#{$direction}#{$infix}-#{$spacing} {
+          --u-layout-margin#{$direction}: var(--u-spacing-#{$spacing});
+        }
+
+        .u-gutter#{$direction}#{$infix}-#{$spacing} {
+          --u-layout-gutter#{$direction}: var(--u-spacing-#{$spacing});
+        }
+      }
+    }
+  }
+}