@simplybusiness/mobius 9.3.4 → 10.1.0

package/src/components/Segment/Segment.css

@@ -1,200 +1,202 @@
-/* stylelint-disable no-descending-specificity, no-duplicate-selectors -- complex component with nested groups */
-/*-----------------------------------------------------------------------------
-   Wrapper around select and dropdown icon
-  ----------------------------------------------------------------------------*/
-.mobius-segment-group {
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  border: var(--segment-border);
-  border-radius: var(--radius-2);
-  margin-bottom: var(--size-sm);
-
-  /* Horizontal stack */
-  &.--is-horizontal {
-    flex-direction: row;
-  }
-
-  /* Margins around SegmentGroup */
-  & .mobius-segment-group.gap-size-xs,
-  &.gap-size-xs {
-    margin: var(--size-xs);
-  }
+@layer atoms {
+  /* stylelint-disable no-descending-specificity, no-duplicate-selectors -- complex component with nested groups */
+  /*-----------------------------------------------------------------------------
+     Wrapper around select and dropdown icon
+    ----------------------------------------------------------------------------*/
+  .mobius-segment-group {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    border: var(--segment-border);
+    border-radius: var(--radius-2);
+    margin-bottom: var(--size-sm);
+
+    /* Horizontal stack */
+    &.--is-horizontal {
+      flex-direction: row;
+    }
 
-  & .mobius-segment-group.gap-size-s,
-  &.gap-size-s {
-    margin: var(--size-sm);
-  }
+    /* Margins around SegmentGroup */
+    & .mobius-segment-group.gap-size-xs,
+    &.gap-size-xs {
+      margin: var(--size-xs);
+    }
 
-  & .mobius-segment-group.gap-size-m,
-  &.gap-size-m {
-    margin: var(--size-md);
-  }
+    & .mobius-segment-group.gap-size-s,
+    &.gap-size-s {
+      margin: var(--size-sm);
+    }
 
-  & .mobius-segment-group.gap-size-l,
-  &.gap-size-l {
-    margin: var(--size-lm);
-  }
+    & .mobius-segment-group.gap-size-m,
+    &.gap-size-m {
+      margin: var(--size-md);
+    }
 
-  & .mobius-segment-group.gap-size-xl,
-  &.gap-size-xl {
-    margin: var(--size-xl);
-  }
+    & .mobius-segment-group.gap-size-l,
+    &.gap-size-l {
+      margin: var(--size-lm);
+    }
 
-  & .mobius-segment-group.gap-size-xxl,
-  &.gap-size-xxl {
-    margin: var(--size-xxl);
-  }
+    & .mobius-segment-group.gap-size-xl,
+    &.gap-size-xl {
+      margin: var(--size-xl);
+    }
 
-  /* Groups of vertically attached elements */
-  & > .mobius-segment {
-    border: none;
-    border-top: var(--segment-border);
-  }
+    & .mobius-segment-group.gap-size-xxl,
+    &.gap-size-xxl {
+      margin: var(--size-xxl);
+    }
 
-  &:not(.--is-horizontal) {
+    /* Groups of vertically attached elements */
     & > .mobius-segment {
-      &:first-child {
-        border-top: none;
-        border-radius: var(--radius-2);
+      border: none;
+      border-top: var(--segment-border);
+    }
+
+    &:not(.--is-horizontal) {
+      & > .mobius-segment {
+        &:first-child {
+          border-top: none;
+          border-radius: var(--radius-2);
+        }
+
+        &:not(:first-child):not(:last-child) {
+          border-radius: 0;
+          border-bottom: 0;
+        }
+
+        &:last-child {
+          border-top-left-radius: 0;
+          border-top-right-radius: 0;
+        }
       }
+    }
 
-      &:not(:first-child):not(:last-child) {
+    /* Groups of horizontally attached elements */
+    &.--is-horizontal {
+      & > .mobius-segment,
+      & > .mobius-segment-group {
+        border: none;
         border-radius: 0;
-        border-bottom: 0;
+        border-left: var(--segment-border);
       }
 
-      &:last-child {
-        border-top-left-radius: 0;
+      & > .mobius-segment:first-child,
+      & > .mobius-segment-group:first-child {
+        border-left: 0;
         border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
       }
-    }
-  }
 
-  /* Groups of horizontally attached elements */
-  &.--is-horizontal {
-    & > .mobius-segment,
-    & > .mobius-segment-group {
-      border: none;
-      border-radius: 0;
-      border-left: var(--segment-border);
-    }
+      & > .mobius-segment:not(:first-child):not(:last-child) {
+        border-right: 0;
+        border-radius: 0;
+      }
 
-    & > .mobius-segment:first-child,
-    & > .mobius-segment-group:first-child {
-      border-left: 0;
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
+      & > .mobius-segment:last-child {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
     }
 
-    & > .mobius-segment:not(:first-child):not(:last-child) {
-      border-right: 0;
-      border-radius: 0;
-    }
+    /* Nested Groups: don't double up on borders */
+    & .mobius-segment-group {
+      border-top: none;
+      margin-top: 0;
+      margin-bottom: 0;
+      flex: 1;
 
-    & > .mobius-segment:last-child {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
+      & > .mobius-segment-group.--is-horizontal {
+        border-radius: 0;
+        border: 0;
+        border-top: var(--segment-border);
+        margin: 0;
+      }
+
+      &:not(.--is-horizontal)
+        > .mobius-segment-group:not(.--is-horizontal)
+        .mobius-segment:first-child {
+        border-top: var(--segment-border);
+      }
+      /* NOTE: We may need a similar rule for horizontally
+      nested Segments inside groups for a left border */
     }
   }
 
-  /* Nested Groups: don't double up on borders */
-  & .mobius-segment-group {
-    border-top: none;
-    margin-top: 0;
-    margin-bottom: 0;
-    flex: 1;
-
-    & > .mobius-segment-group.--is-horizontal {
-      border-radius: 0;
-      border: 0;
-      border-top: var(--segment-border);
+  .mobius-segment {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    width: 100%;
+    border: var(--segment-border);
+    border-radius: var(--radius-2);
+    padding: var(--size-sm);
+
+    /* Remove text margins from inner text atoms */
+    & .mobius-text,
+    & .mobius-text.--is-h1,
+    & .mobius-text.--is-h2,
+    & .mobius-text.--is-h3,
+    & .mobius-text.--is-h4 {
       margin: 0;
     }
 
-    &:not(.--is-horizontal)
-      > .mobius-segment-group:not(.--is-horizontal)
-      .mobius-segment:first-child {
-      border-top: var(--segment-border);
+    & h1,
+    & h2,
+    & h3,
+    & h4,
+    & p {
+      margin: 0;
     }
-    /* NOTE: We may need a similar rule for horizontally
-    nested Segments inside groups for a left border */
-  }
-}
-
-.mobius-segment {
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  width: 100%;
-  border: var(--segment-border);
-  border-radius: var(--radius-2);
-  padding: var(--size-sm);
-
-  /* Remove text margins from inner text atoms */
-  & .mobius-text,
-  & .mobius-text.--is-h1,
-  & .mobius-text.--is-h2,
-  & .mobius-text.--is-h3,
-  & .mobius-text.--is-h4 {
-    margin: 0;
-  }
 
-  & h1,
-  & h2,
-  & h3,
-  & h4,
-  & p {
-    margin: 0;
-  }
+    & .mobius-text.--is-p {
+      line-height: var(--font-size-lead);
+    }
 
-  & .mobius-text.--is-p {
-    line-height: var(--font-size-lead);
-  }
+    /* Colours */
+    &.subtle {
+      background-color: var(--color-border-light);
+    }
 
-  /* Colours */
-  &.subtle {
-    background-color: var(--color-border-light);
-  }
+    &.grey {
+      background-color: var(--color-background-light);
+    }
 
-  &.grey {
-    background-color: var(--color-background-light);
-  }
+    &.primary {
+      background-color: var(--color-primary);
+    }
 
-  &.primary {
-    background-color: var(--color-primary);
-  }
+    &.secondary {
+      background-color: var(--color-secondary);
+    }
 
-  &.secondary {
-    background-color: var(--color-secondary);
-  }
+    &.inverted {
+      color: var(--color-text-inverted);
+    }
 
-  &.inverted {
-    color: var(--color-text-inverted);
-  }
+    /* Last child inside a Segment should have no bottom margin */
+    & .mobius-text-field:last-child,
+    & .mobius-checkbox:last-child,
+    & .mobius-radio-group:last-child,
+    & .mobius-text-area:last-child,
+    & .mobius-select__outer:last-child {
+      margin-bottom: 0 !important;
+    }
 
-  /* Last child inside a Segment should have no bottom margin */
-  & .mobius-text-field:last-child,
-  & .mobius-checkbox:last-child,
-  & .mobius-radio-group:last-child,
-  & .mobius-text-area:last-child,
-  & .mobius-select__outer:last-child {
-    margin-bottom: 0 !important;
+    /* Nested Groups inside Segments:
+    make full width and remove bottom margin*/
+    & .mobius-segment-group {
+      width: 100%;
+      margin-bottom: 0;
+    }
   }
 
-  /* Nested Groups inside Segments:
-  make full width and remove bottom margin*/
-  & .mobius-segment-group {
-    width: 100%;
-    margin-bottom: 0;
+  /* Heading */
+  .mobius-segment__heading {
+    box-sizing: border-box;
+    font-size: var(--font-size-regular);
+    margin: 0;
+    margin-bottom: var(--size-sm);
   }
 }
-
-/* Heading */
-.mobius-segment__heading {
-  box-sizing: border-box;
-  font-size: var(--font-size-regular);
-  margin: 0;
-  margin-bottom: var(--size-sm);
-}

package/src/components/Select/Select.css

@@ -1,97 +1,99 @@
-.mobius-select__outer {
-  box-sizing: border-box;
-  width: 100%;
+@layer atoms {
+  .mobius-select__outer {
+    box-sizing: border-box;
+    width: 100%;
 
-  & > :where(.mobius-label.--is-optional)::after {
-    content: " (optional)";
+    & > :where(.mobius-label.--is-optional)::after {
+      content: " (optional)";
+    }
   }
-}
-
-.mobius-select__wrapper {
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  position: relative;
-  max-width: var(--select-wrapper-max-width);
-}
 
-.mobius-select {
-  box-sizing: border-box;
-  width: 100%;
-  padding: var(--input-field-padding);
-  padding-right: var(--size-xxl);
-  font-family: var(--font-family);
-  font-size: var(--font-size-regular);
-  color: var(--color-text);
-  border: var(--border-default);
-  border-radius: var(--input-border-radius);
-  background-color: var(--color-background-input);
-  outline: 0;
-  appearance: none;
-  white-space: nowrap;
-  text-overflow: ellipsis;
+  .mobius-select__wrapper {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    position: relative;
+    max-width: var(--select-wrapper-max-width);
+  }
 
-  /* Hack for placeholder option: only works for required */
-  & option {
+  .mobius-select {
+    box-sizing: border-box;
+    width: 100%;
+    padding: var(--input-field-padding);
+    padding-right: var(--size-xxl);
+    font-family: var(--font-family);
+    font-size: var(--font-size-regular);
     color: var(--color-text);
-  }
+    border: var(--border-default);
+    border-radius: var(--input-border-radius);
+    background-color: var(--color-background-input);
+    outline: 0;
+    appearance: none;
+    white-space: nowrap;
+    text-overflow: ellipsis;
 
-  & option[disabled][selected] {
-    color: var(--color-text-medium);
-  }
+    /* Hack for placeholder option: only works for required */
+    & option {
+      color: var(--color-text);
+    }
 
-  &:invalid {
-    color: var(--color-text-medium);
-  }
+    & option[disabled][selected] {
+      color: var(--color-text-medium);
+    }
 
-  /* Disabled */
-  &.--is-disabled {
-    background-color: var(--color-background-light);
-    border-color: var(--color-border-medium);
-    color: var(--color-text-light);
-    cursor: not-allowed;
-  }
+    &:invalid {
+      color: var(--color-text-medium);
+    }
 
-  /* Focused */
-  &:focus-visible {
-    border-color: var(--color-primary);
-    background-color: var(--color-background-input-active);
-    box-shadow: var(--box-shadow-default);
-  }
+    /* Disabled */
+    &.--is-disabled {
+      background-color: var(--color-background-light);
+      border-color: var(--color-border-medium);
+      color: var(--color-text-light);
+      cursor: not-allowed;
+    }
 
-  /* Hovered */
-  &:not(.--is-invalid):not(.--is-disabled):hover {
-    border-color: var(--color-primary);
-    background-color: var(--color-background-input-active);
-  }
+    /* Focused */
+    &:focus-visible {
+      border-color: var(--color-primary);
+      background-color: var(--color-background-input-active);
+      box-shadow: var(--box-shadow-default);
+    }
 
-  /* Invalid */
-  &.--is-invalid {
-    border-color: var(--color-error);
-    background-color: var(--color-error-background);
-    color: var(--color-error);
+    /* Hovered */
+    &:not(.--is-invalid):not(.--is-disabled):hover {
+      border-color: var(--color-primary);
+      background-color: var(--color-background-input-active);
+    }
+
+    /* Invalid */
+    &.--is-invalid {
+      border-color: var(--color-error);
+      background-color: var(--color-error-background);
+      color: var(--color-error);
+    }
   }
-}
 
-.mobius-select__icon {
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: absolute;
-  right: 2px;
-  height: 100%;
-  width: var(--size-xxl);
-  padding: var(--size-md);
-  border-radius: var(--radius-1);
-  pointer-events: none;
-  color: var(--color-primary-light);
+  .mobius-select__icon {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    right: 2px;
+    height: 100%;
+    width: var(--size-xxl);
+    padding: var(--size-md);
+    border-radius: var(--radius-1);
+    pointer-events: none;
+    color: var(--color-primary-light);
 
-  &.--is-disabled {
-    color: var(--color-text-light);
-  }
+    &.--is-disabled {
+      color: var(--color-text-light);
+    }
 
-  &.--is-invalid {
-    color: var(--color-error);
+    &.--is-invalid {
+      color: var(--color-error);
+    }
   }
 }