@simplybusiness/mobius 9.3.4 → 10.1.0

package/src/components/Icon/Icon.css

@@ -1,44 +1,46 @@
-.mobius-icon {
-  height: 1em;
-  vertical-align: -0.2em;
-  transform-origin: center;
+@layer atoms {
+  .mobius-icon {
+    height: 1em;
+    vertical-align: -0.2em;
+    transform-origin: center;
 
-  /* 16px */
-  &.--size-xs {
-    font-size: 1em;
-  }
+    /* 16px */
+    &.--size-xs {
+      font-size: 1em;
+    }
 
-  /* 20px */
-  &.--size-sm {
-    font-size: 1.25em;
-    line-height: 0.05em;
-    vertical-align: -0.075em;
-  }
+    /* 20px */
+    &.--size-sm {
+      font-size: 1.25em;
+      line-height: 0.05em;
+      vertical-align: -0.075em;
+    }
 
-  /* 24px */
-  &.--size-md {
-    font-size: 1.5em;
-    line-height: 0.0416666682em;
-    vertical-align: -0.125em;
-  }
+    /* 24px */
+    &.--size-md {
+      font-size: 1.5em;
+      line-height: 0.0416666682em;
+      vertical-align: -0.125em;
+    }
 
-  /* 32px */
-  &.--size-lg {
-    font-size: 2em;
-    line-height: 0.03125em;
-    vertical-align: -0.1875em;
+    /* 32px */
+    &.--size-lg {
+      font-size: 2em;
+      line-height: 0.03125em;
+      vertical-align: -0.1875em;
+    }
   }
-}
 
-.mobius-icon.--is-spinning {
-  animation: MobiusIconSpinningKeyframes 2s linear infinite;
-}
-
-@keyframes MobiusIconSpinningKeyframes {
-  from {
-    transform: rotate(0deg);
+  .mobius-icon.--is-spinning {
+    animation: MobiusIconSpinningKeyframes 2s linear infinite;
   }
-  to {
-    transform: rotate(1turn);
+
+  @keyframes MobiusIconSpinningKeyframes {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(1turn);
+    }
   }
 }

package/src/components/Label/Label.css

@@ -1,15 +1,17 @@
-.mobius-label {
-  box-sizing: border-box;
-  font-size: var(--font-size-regular);
-  line-height: var(--line-height-normal);
-  font-family: var(--font-family);
-  font-weight: var(--label-font-weight);
-  font-variation-settings: var(--label-font-variation-settings);
-  color: var(--label-color);
+@layer atoms {
+  .mobius-label {
+    box-sizing: border-box;
+    font-size: var(--font-size-regular);
+    line-height: var(--line-height-normal);
+    font-family: var(--font-family);
+    font-weight: var(--label-font-weight);
+    font-variation-settings: var(--label-font-variation-settings);
+    color: var(--label-color);
 
-  &:not(.--is-disabled) {
-    &.--is-invalid {
-      color: var(--color-error);
+    &:not(.--is-disabled) {
+      &.--is-invalid {
+        color: var(--color-error);
+      }
     }
   }
 }

package/src/components/Link/Link.css

@@ -1,35 +1,37 @@
-.mobius-link {
-  box-sizing: border-box;
-  font-family: var(--font-family);
-  line-height: var(--line-height-normal);
-  color: var(--color-link);
-  outline: none;
-  border-radius: var(--radius-1);
+@layer atoms {
+  .mobius-link {
+    box-sizing: border-box;
+    font-family: var(--font-family);
+    line-height: var(--line-height-normal);
+    color: var(--color-link);
+    outline: none;
+    border-radius: var(--radius-1);
 
-  &:hover,
-  &:active {
-    text-decoration: var(--link-hover-text-decoration, underline);
-    cursor: pointer;
-    color: var(--color-link-hover);
-  }
+    &:hover,
+    &:active {
+      text-decoration: var(--link-hover-text-decoration, underline);
+      cursor: pointer;
+      color: var(--color-link-hover);
+    }
 
-  &:focus-visible {
-    box-shadow: var(--link-box-shadow, var(--box-shadow-default));
-    padding: 3px 0;
-  }
+    &:focus-visible {
+      box-shadow: var(--link-box-shadow, var(--box-shadow-default));
+      padding: 3px 0;
+    }
 
-  &.--is-disabled {
-    color: var(--color-text-light);
-    pointer-events: none;
-    cursor: not-allowed;
+    &.--is-disabled {
+      color: var(--color-text-light);
+      pointer-events: none;
+      cursor: not-allowed;
+    }
   }
-}
 
-.mobius-link--secondary {
-  color: var(--color-link-secondary);
+  .mobius-link--secondary {
+    color: var(--color-link-secondary);
 
-  &:hover,
-  &:active {
-    color: var(--color-link-secondary-hover);
+    &:hover,
+    &:active {
+      color: var(--color-link-secondary-hover);
+    }
   }
 }

package/src/components/List/List.css

@@ -1,60 +1,62 @@
-.mobius-list {
-  box-sizing: border-box;
-  font-family: var(--font-family);
-  width: 100%;
-  text-align: left;
-  margin: 0;
-
-  &.--has-icon {
-    padding-left: 0;
-  }
+@layer atoms {
+  .mobius-list {
+    box-sizing: border-box;
+    font-family: var(--font-family);
+    width: 100%;
+    text-align: left;
+    margin: 0;
+
+    &.--has-icon {
+      padding-left: 0;
+    }
 
-  &.--is-disc {
-    list-style-type: disc;
-  }
+    &.--is-disc {
+      list-style-type: disc;
+    }
 
-  &.--is-circle {
-    list-style-type: circle;
-  }
+    &.--is-circle {
+      list-style-type: circle;
+    }
 
-  &.--is-square {
-    list-style-type: square;
-  }
+    &.--is-square {
+      list-style-type: square;
+    }
 
-  &.--is-decimal {
-    list-style-type: decimal;
-  }
+    &.--is-decimal {
+      list-style-type: decimal;
+    }
 
-  &.--is-georgian {
-    list-style-type: georgian;
-  }
+    &.--is-georgian {
+      list-style-type: georgian;
+    }
 
-  &.--is-trad-chinese-informal {
-    list-style-type: trad-chinese-informal;
-  }
+    &.--is-trad-chinese-informal {
+      list-style-type: trad-chinese-informal;
+    }
 
-  &.--is-kannada {
-    list-style-type: kannada;
+    &.--is-kannada {
+      list-style-type: kannada;
+    }
   }
-}
 
-.mobius-list__item {
-  &.--has-icon {
-    list-style-type: none;
-    margin-bottom: var(--size-xs);
+  .mobius-list__item {
+    &.--has-icon {
+      list-style-type: none;
+      margin-bottom: var(--size-xs);
 
-    & p {
-      margin-top: 0;
-      margin-bottom: 0;
+      & p {
+        margin-top: 0;
+        margin-bottom: 0;
+      }
     }
   }
-}
 
-.mobius-list__item-content {
-  display: flex;
-}
+  .mobius-list__item-content {
+    display: flex;
+  }
 
-.mobius-list__icon {
-  flex-shrink: 0;
-  margin-right: var(--size-xs);
+  .mobius-list__icon {
+    flex-shrink: 0;
+    margin-right: var(--size-xs);
+  }
 }

package/src/components/LoadingIndicator/LoadingIndicator.css

@@ -1,3 +1,5 @@
-.mobius-loading-indicator {
-  color: var(--color-primary);
+@layer atoms {
+  .mobius-loading-indicator {
+    color: var(--color-primary);
+  }
 }

package/src/components/Modal/Modal.css

@@ -1,160 +1,162 @@
-/* Disable transitions if reduce motion flag is on */
-@media (prefers-reduced-motion: reduce) {
-  :root,
-  :host,
-  ::backdrop {
-    --modal-transition-duration: 0;
+@layer atoms {
+  /* Disable transitions if reduce motion flag is on */
+  @media (prefers-reduced-motion: reduce) {
+    :root,
+    :host,
+    ::backdrop {
+      --modal-transition-duration: 0;
+    }
   }
-}
 
-.mobius-modal {
-  position: fixed;
-  display: flex;
-  flex-direction: column;
-  width: min(90%, 600px);
-  max-height: 90%;
-  padding: 0;
-  margin: auto;
-  background-color: var(--color-background);
-  border: none;
-  border-radius: var(--radius-1);
-  overflow: hidden;
-
-  @media (min-width: 768px) {
-    max-height: 80%;
-  }
+  .mobius-modal {
+    position: fixed;
+    display: flex;
+    flex-direction: column;
+    width: min(90%, 600px);
+    max-height: 90%;
+    padding: 0;
+    margin: auto;
+    background-color: var(--color-background);
+    border: none;
+    border-radius: var(--radius-1);
+    overflow: hidden;
+
+    @media (min-width: 768px) {
+      max-height: 80%;
+    }
 
-  &:not([open]) {
-    display: none;
-  }
+    &:not([open]) {
+      display: none;
+    }
 
-  &:focus-visible {
-    outline: none;
-  }
+    &:focus-visible {
+      outline: none;
+    }
 
-  &::backdrop {
-    background-color: var(--backdrop-color);
-    opacity: 0;
-    transition: opacity var(--modal-transition-duration) ease-in-out;
-  }
+    &::backdrop {
+      background-color: var(--backdrop-color);
+      opacity: 0;
+      transition: opacity var(--modal-transition-duration) ease-in-out;
+    }
 
-  /* Injected by "dialog-polyfill" */
-  /* Required for iOS <= 15.2 */
-  & + .backdrop {
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    background-color: var(--backdrop-color);
-    opacity: 0.3;
-
-    & + ._dialog_overlay {
+    /* Injected by "dialog-polyfill" */
+    /* Required for iOS <= 15.2 */
+    & + .backdrop {
       position: fixed;
       top: 0;
       right: 0;
       bottom: 0;
       left: 0;
-    }
-  }
-
-  &.--is-fullscreen {
-    top: 0;
-    border-radius: 0;
-    height: 100%;
-    max-height: 100%;
-    width: 100%;
-    max-width: 100vw;
-  }
-
-  &.--no-dialog-support {
-    /* Correctly position modal in x/y middle on iOS <= 15.2 */
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
+      background-color: var(--backdrop-color);
+      opacity: 0.3;
 
-  &:not(.--should-transition) {
-    display: none;
+      & + ._dialog_overlay {
+        position: fixed;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+      }
+    }
 
-    &[open] {
-      display: flex;
+    &.--is-fullscreen {
+      top: 0;
+      border-radius: 0;
+      height: 100%;
+      max-height: 100%;
+      width: 100%;
+      max-width: 100vw;
     }
 
-    &::backdrop {
-      opacity: 0.3;
+    &.--no-dialog-support {
+      /* Correctly position modal in x/y middle on iOS <= 15.2 */
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
     }
-  }
 
-  &.--fade {
-    transition: opacity var(--modal-transition-duration) ease-in-out;
-  }
+    &:not(.--should-transition) {
+      display: none;
 
-  &.--slide-up {
-    transition: transform var(--modal-transition-duration) ease-in-out;
-  }
+      &[open] {
+        display: flex;
+      }
 
-  &.--should-transition {
-    &.--transition {
       &::backdrop {
         opacity: 0.3;
       }
     }
 
+    &.--fade {
+      transition: opacity var(--modal-transition-duration) ease-in-out;
+    }
+
     &.--slide-up {
-      transform: translateY(100vh);
+      transition: transform var(--modal-transition-duration) ease-in-out;
+    }
 
+    &.--should-transition {
       &.--transition {
-        transform: translateY(0vh);
+        &::backdrop {
+          opacity: 0.3;
+        }
       }
-    }
 
-    &.--fade {
-      opacity: 0;
+      &.--slide-up {
+        transform: translateY(100vh);
 
-      &.--transition {
-        opacity: 1;
+        &.--transition {
+          transform: translateY(0vh);
+        }
+      }
+
+      &.--fade {
+        opacity: 0;
+
+        &.--transition {
+          opacity: 1;
+        }
       }
     }
   }
-}
 
-.mobius-modal__header {
-  display: grid;
-  grid-template-columns: 1fr auto;
-  justify-content: space-between;
-  gap: var(--size-md);
-  align-items: start;
-  padding: var(--size-xs);
-  padding-inline: var(--size-sm);
-  font-family: var(--font-family);
-  font-size: var(--font-size-4);
-  margin: 0;
-
-  @media (min-width: 768px) {
-    padding: var(--size-sm);
-    padding-inline: var(--size-md);
-    font-size: var(--font-size-5);
+  .mobius-modal__header {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    justify-content: space-between;
+    gap: var(--size-md);
+    align-items: start;
+    padding: var(--size-xs);
+    padding-inline: var(--size-sm);
+    font-family: var(--font-family);
+    font-size: var(--font-size-4);
+    margin: 0;
+
+    @media (min-width: 768px) {
+      padding: var(--size-sm);
+      padding-inline: var(--size-md);
+      font-size: var(--font-size-5);
+    }
   }
-}
 
-.mobius-modal__close.mobius-button {
-  /* negative padding to match the padding of the header, so it aligns
-     horizontally */
-  padding: calc(var(--size-sm) * -1);
-  font-size: var(--font-size-4);
-  flex-shrink: 0;
-}
+  .mobius-modal__close.mobius-button {
+    /* negative padding to match the padding of the header, so it aligns
+       horizontally */
+    padding: calc(var(--size-sm) * -1);
+    font-size: var(--font-size-4);
+    flex-shrink: 0;
+  }
 
-.mobius-modal__content {
-  flex-grow: 1;
-  padding: 0 var(--size-sm);
-  margin: var(--size-sm) 0;
-  font-family: var(--font-family);
-  overflow-y: auto;
+  .mobius-modal__content {
+    flex-grow: 1;
+    padding: 0 var(--size-sm);
+    margin: var(--size-sm) 0;
+    font-family: var(--font-family);
+    overflow-y: auto;
 
-  @media (min-width: 768px) {
-    padding: 0 var(--size-md);
-    margin: var(--size-md) 0;
+    @media (min-width: 768px) {
+      padding: 0 var(--size-md);
+      margin: var(--size-md) 0;
+    }
   }
 }