@odx/ui 1.0.0-rc.1 → 1.0.0-rc.11

package/scss/components/list-item.component.scss

@@ -0,0 +1,107 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
+@use '../abstract/utils';
+@use '../abstract/motion';
+@use '../abstract/typography';
+
+.odx-list-item {
+  $root: &;
+
+  @include dimensions.padding-x(math.div(1, 3));
+  @include dimensions.line-height(2, 1);
+  @include motion.transition(border-bottom-color background-color outline-color color);
+  @include utils.interactive(false);
+  @include utils.vertical-center-content();
+
+  background-color: transparent;
+  border-radius: var(--odx-v-border-radius-controls);
+  gap: dimensions.get-size(math.div(1, 3));
+  position: relative;
+
+  > [odxListSuffix] {
+    margin-left: auto;
+  }
+
+  &:not(.is-disabled) {
+    cursor: pointer;
+  }
+
+  &::before {
+    @include motion.transition(border-color);
+
+    border-bottom: 1px solid var(--gray-200);
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0;
+    width: calc(100% - #{dimensions.get-size(math.div(14, 24))});
+  }
+
+  &:hover,
+  &:focus-visible,
+  &:first-child {
+    &::before {
+      border-bottom-color: transparent;
+    }
+  }
+
+  &:hover {
+    background-color: var(--blue-700-5);
+  }
+
+  &--danger + &::before,
+  &--selected + &::before,
+  &:hover + &::before {
+    border-color: transparent;
+  }
+
+  &.is-disabled {
+    color: var(--odx-control-color-disabled);
+    pointer-events: none;
+  }
+
+  &--danger {
+    --odx-c-focus: var(--odx-c-danger);
+
+    @include utils.with-outline-bold();
+
+    background-color: var(--odx-c-danger);
+    color: var(--odx-c-danger-text);
+
+    &::before {
+      border-bottom-color: transparent;
+    }
+
+    &:hover {
+      background-color: var(--odx-c-danger-hover);
+    }
+
+    &.is-disabled {
+      color: var(--odx-c-danger-text-disabled);
+    }
+  }
+
+  &--selected {
+    background-color: var(--odx-c-selected);
+
+    &::before {
+      border-bottom-color: transparent;
+    }
+
+    &:hover {
+      background-color: var(--odx-c-selected-hover);
+    }
+
+    &#{$root}--danger {
+      background-color: var(--odx-c-danger-active);
+
+      &:hover {
+        background-color: var(--red-800);
+      }
+
+      &.is-disabled {
+        color: var(--odx-c-danger-text);
+      }
+    }
+  }
+}

package/scss/components/list.component.scss

@@ -0,0 +1,3 @@
+.odx-list {
+  display: block;
+}

package/scss/components/loading-spinner.component.scss

@@ -0,0 +1,54 @@
+@use 'sass:math';
+@use '../abstract/motion';
+@use '../abstract/utils';
+
+.odx-loading-spinner {
+  $root: &;
+
+  backdrop-filter: blur(var(--odx-v-backdrop-blur));
+
+  &,
+  &__backdrop {
+    height: 100%;
+    left: 0;
+    position: absolute;
+    scroll-behavior: contain;
+    top: 0;
+    width: 100%;
+    z-index: 1;
+  }
+
+  &__backdrop {
+    @include motion.transition(background-color);
+
+    background-color: transparent;
+    opacity: 0.8;
+  }
+
+  .odx-circular-progress {
+    height: 66.67%;
+    left: 50%;
+    max-height: 40px;
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 2;
+
+    &__track {
+      stroke: var(--blue-700-15);
+    }
+  }
+
+  &--auto-color {
+    .odx-circular-progress {
+      &__indicator {
+        stroke: currentcolor;
+      }
+    }
+  }
+
+  &-parent {
+    overflow: hidden;
+    user-select: none;
+  }
+}

package/scss/components/{logo/logo.component.scss → logo.component.scss}

@@ -1,4 +1,4 @@
-@use '../../modules/vertical-rythm' as vr;
+@use '../abstract/dimensions';
 
 :root {
   --odx-logo-color: var(--odx-c-primary);
@@ -6,22 +6,23 @@
 }
 
 .odx-logo {
-  @include vr.height(1);
+  @include dimensions.height(1);
 
   aspect-ratio: 2.5 / 1;
   background-color: var(--odx-logo-color);
   display: inline-block;
   mask-image: url('../assets/images/logo.svg');
+  mask-repeat: no-repeat;
 
   &--inverse {
     background-color: var(--odx-logo-color-inverse);
   }
 
   &--medium {
-    @include vr.height(2, 1.5);
+    @include dimensions.height(2, 1.5);
   }
 
   &--large {
-    @include vr.height(3, 2.5);
+    @include dimensions.height(3, 2.5);
   }
 }

package/scss/components/main-menu-button.component.scss

@@ -0,0 +1,7 @@
+@use 'button.component';
+
+.odx-main-menu-button {
+  @extend .odx-button--ghost;
+
+  color: inherit;
+}

package/scss/components/{main-menu/components/main-menu-item.component.scss → main-menu-item.component.scss}

@@ -1,7 +1,8 @@
 @use 'sass:math';
-@use '../../../modules/vertical-rythm' as vr;
-@use '../../../modules/typography' as t;
-@use '../../../base/mixins' as mx;
+@use '../abstract/dimensions';
+@use '../abstract/motion';
+@use '../abstract/utils';
+@use '../abstract/typography';
 
 :root {
   --odx-main-menu-item-background-color: transparent;
@@ -12,22 +13,23 @@
 }
 
 .odx-main-menu-item {
-  @include mx.interactive();
-  @include mx.transition(color background-color outline);
-  @include mx.vertical-center-content();
-  @include t.prevent-text-overflow();
-  @include vr.height(3, math.div(7, 3));
-  @include vr.padding-x(math.div(2, 3));
+  @include dimensions.height(3, math.div(7, 3));
+  @include dimensions.padding-x(math.div(2, 3));
+  @include motion.transition(color background-color outline);
+  @include utils.interactive(false);
+  @include utils.vertical-center-content();
+  @include typography.font-weight(medium);
+  @include typography.prevent-text-overflow();
 
   background-color: transparent;
   border-radius: var(--odx-v-border-radius);
   color: var(--odx-main-menu-item-text-color);
-  font-weight: var(--odx-t-font-weight-medium);
 
   &:hover {
     background-color: var(--odx-main-menu-item-background-color-hover);
   }
 
+  &.is-selected,
   &:active {
     background-color: var(--odx-main-menu-item-background-color-active);
   }
@@ -39,7 +41,7 @@
   }
 
   > .odx-icon {
-    @include vr.margin(math.div(1, 3), right);
-    @include vr.margin(math.div(-1, 3), left);
+    @include dimensions.margin(math.div(1, 3), right);
+    @include dimensions.margin(math.div(-1, 3), left);
   }
 }

package/scss/components/{main-menu/main-menu.component.scss → main-menu.component.scss}

@@ -1,11 +1,11 @@
 @use 'sass:math';
-@use '../../modules/breakpoints' as br;
-@use '../../modules/vertical-rythm' as vr;
-@use '../../modules/typography' as t;
-@use '../../base/mixins' as mx;
-@use '../button/button.component';
-@use 'components/main-menu-button.component';
-@use 'components/main-menu-item.component';
+@use '../abstract/breakpoints';
+@use '../abstract/dimensions';
+@use '../abstract/utils';
+@use '../abstract/typography';
+@use 'button.component';
+@use 'main-menu-button.component';
+@use 'main-menu-item.component';
 
 :root {
   --odx-main-menu-max-width: 100vw;
@@ -13,7 +13,7 @@
   --odx-main-menu-text-color: var(--odx-c-primary-text);
   --odx-main-menu-highlight-color: var(--odx-c-highlight);
 
-  @include br.up(phone) {
+  @include breakpoints.up(phone) {
     --odx-main-menu-max-width: min(100vw, 384px);
   }
 }
@@ -33,22 +33,24 @@
     max-width: var(--odx-main-menu-max-width);
     position: fixed;
     top: 0;
+    width: 100%;
     z-index: 9000;
   }
 
   &__overlay {
-    background-color: var(--odx-c-overlay);
+    backdrop-filter: blur(var(--odx-v-backdrop-blur));
+    background-color: var(--odx-c-backdrop);
     height: 100%;
     left: 0;
-    position: absolute;
+    position: fixed;
     top: 0;
     width: 100%;
     z-index: 8999;
   }
 
   &__actions {
-    @include vr.height(2);
-    @include vr.margin-x(0.5);
+    @include dimensions.height(2);
+    @include dimensions.margin-x(0.5);
   }
 
   &__header,
@@ -64,12 +66,15 @@
   }
 
   &__content {
-    @include vr.padding-x(0.5);
+    --odx-v-scrollbar-thumb-color: var(--blue-400);
+    --odx-v-scrollbar-thumb-color-hover: var(--blue-500);
+
+    @include dimensions.padding-x(0.5);
 
     display: flex;
     flex-direction: column;
-    max-width: calc(var(--odx-main-menu-max-width) + vr.get-size(2));
-    min-height: vr.get-size(5);
+    max-width: calc(var(--odx-main-menu-max-width) + dimensions.get-size(2));
+    min-height: dimensions.get-size(5);
     overflow: auto;
 
     > * {
@@ -79,39 +84,42 @@
 
   &__info {
     @extend .odx-text;
-    @include vr.padding-x(1);
-    @include vr.padding-y(0.5);
+    @include dimensions.padding-x(1);
+    @include dimensions.padding-y(0.5);
 
-    column-gap: vr.get-size(1);
+    column-gap: dimensions.get-size(1);
     display: flex;
     flex-wrap: wrap;
 
-    @include br.up(tablet) {
-      @include vr.padding-y(1);
+    @include breakpoints.up(tablet) {
+      @include dimensions.padding-y(1);
     }
   }
 
   &__footer {
-    @include mx.center-content();
-    @include vr.height(1);
-    @include vr.padding-x(1);
-    @include vr.padding(math.div(16, 24), top);
-    @include vr.padding(math.div(32, 24), bottom);
+    @include dimensions.height(1);
+    @include dimensions.padding-x(1);
+    @include dimensions.padding(math.div(16, 24), top);
+    @include dimensions.padding(math.div(32, 24), bottom);
+    @include utils.center-content();
 
     display: grid;
-    gap: vr.get-size(0.5);
+    gap: dimensions.get-size(0.5);
     grid-template-columns: 1fr auto;
     user-select: none;
 
     > .odx-text {
-      @include vr.line-height(math.div(12, 24));
+      @include dimensions.line-height(math.div(12, 24));
 
       opacity: 0.3;
       word-wrap: break-word;
     }
   }
 
-  .odx-link:visited {
-    color: var(--odx-c-link);
+  .odx-link {
+    &:visited,
+    &:hover {
+      color: var(--odx-c-link);
+    }
   }
 }

package/scss/components/menu-item.component.scss

@@ -0,0 +1,8 @@
+@use '../abstract/dimensions';
+@use '../abstract/motion';
+@use '../abstract/utils';
+
+.odx-menu-item {
+  margin: 0;
+  width: 100%;
+}

package/scss/components/menu.component.scss

@@ -0,0 +1,48 @@
+@use '../abstract/dimensions';
+@use 'sass:math';
+
+.odx-menu {
+  display: block;
+
+  > .odx-action-group {
+    display: flex;
+    flex-direction: column;
+    height: auto;
+    margin: 0;
+
+    > .odx-button {
+      justify-content: flex-start;
+    }
+  }
+
+  &__title:not(:empty) {
+    margin-bottom: dimensions.get-size(math.div(12, 24));
+  }
+
+  &--tile {
+    $avatar-size: dimensions.get-size(math.div(48, 24));
+    $grid-gap: dimensions.get-size(math.div(8, 24));
+
+    .odx-avatar {
+      height: $avatar-size;
+      margin-bottom: $grid-gap;
+      width: $avatar-size;
+    }
+
+    .odx-action-group {
+      display: grid;
+      grid-gap: $grid-gap;
+      grid-template-columns: repeat(3, 1fr);
+
+      .odx-button {
+        flex-direction: column;
+        font-size: dimensions.get-size(math.div(13, 24));
+        font-weight: var(--odx-typography-font-weight-normal);
+        height: unset;
+        line-height: dimensions.get-size(math.div(20, 24));
+        padding: $grid-gap;
+        width: dimensions.get-size(math.div(100, 24));
+      }
+    }
+  }
+}

package/scss/components/modal.component.scss

@@ -0,0 +1,144 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
+@use '../abstract/breakpoints';
+@use '../abstract/typography';
+@use '../abstract/utils';
+
+$modal-padding: math.div(12, 24);
+
+.odx-modal {
+  --odx-modal-margin-y: #{dimensions.get-size(2)};
+  --odx-modal-margin-x: #{dimensions.get-size(math.div(8, 24))};
+  --odx-modal-max-width: #{dimensions.get-size(20)};
+
+  $root: &;
+
+  backdrop-filter: blur(var(--odx-v-backdrop-blur));
+  background-color: var(--odx-c-backdrop-dark);
+  display: block;
+  height: 100%;
+  left: 0;
+  overscroll-behavior: contain;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 1000;
+
+  @include breakpoints.up(phone) {
+    --odx-modal-margin-y: #{dimensions.get-size(3)};
+    --odx-modal-margin-x: #{dimensions.get-size(1)};
+  }
+
+  &--sidesheet {
+    backdrop-filter: unset;
+    background-color: unset;
+  }
+
+  &__container {
+    @include dimensions.padding-x(1);
+
+    background-color: var(--odx-c-background-content);
+    border-radius: var(--odx-v-border-radius);
+    box-shadow: var(--odx-v-box-shadow-layer-2);
+    display: flex;
+    flex-direction: column;
+    margin: var(--odx-modal-margin-y) auto 0;
+    max-height: calc(100vh - 2 * var(--odx-modal-margin-y));
+    min-height: dimensions.get-size(7);
+    width: min(var(--odx-modal-max-width), calc(100vw - 2 * var(--odx-modal-margin-x)));
+
+    #{$root}--medium & {
+      --odx-modal-max-width: #{dimensions.get-size(30)};
+    }
+
+    #{$root}--large & {
+      --odx-modal-max-width: #{dimensions.get-size(50)};
+    }
+
+    #{$root}--sidesheet & {
+      height: 100%;
+      left: unset;
+      margin-right: dimensions.get-size(0.5);
+      max-height: calc(100vh - var(--odx-modal-margin-y) - #{dimensions.get-size(1)});
+      right: 0;
+    }
+
+    #{$root}--with-component & > * {
+      display: contents;
+    }
+  }
+
+  &__header,
+  &__footer {
+    display: flex;
+    flex: 0 0 auto;
+  }
+
+  &__header {
+    @include dimensions.min-height(2.5);
+    @include dimensions.padding($modal-padding, top);
+
+    > .odx-area-header {
+      @include dimensions.margin(-1, left);
+      @include dimensions.margin(-0.5, right);
+
+      flex: 1 1 auto;
+      max-width: 100%;
+    }
+  }
+
+  &__content {
+    @include dimensions.padding-y($modal-padding);
+
+    display: block;
+    overflow: auto;
+
+    #{$root}--sidesheet & {
+      flex: 1;
+    }
+  }
+
+  &__footer {
+    @include dimensions.height(2.5);
+    @include dimensions.padding($modal-padding, bottom);
+
+    gap: dimensions.get-size(math.div(16, 24));
+    justify-content: flex-end;
+  }
+}
+
+.odx-modal-hero {
+  $variants: success, danger, confirmation;
+
+  @include dimensions.min-height(2.5);
+  @include dimensions.padding(0.5, top);
+
+  display: flex;
+  flex-direction: column;
+  position: relative;
+
+  &__dismiss {
+    position: absolute;
+    right: 0;
+    top: dimensions.get-size(0.5);
+  }
+
+  &__icon {
+    margin: dimensions.get-size(0.5) auto auto;
+  }
+
+  &__title {
+    text-align: center;
+  }
+
+  ~ .odx-modal__content {
+    padding-top: 0;
+    text-align: center;
+  }
+
+  @each $variant in $variants {
+    &--#{$variant} &__icon {
+      color: var(--odx-c-#{$variant});
+    }
+  }
+}

package/scss/components/progress.component.scss

@@ -0,0 +1,41 @@
+@use 'sass:math';
+@use '../abstract/motion';
+@use '../abstract/dimensions';
+
+@keyframes progress-indeterminate-animation {
+  from {
+    transform: translateX(-100%);
+  }
+
+  to {
+    transform: translateX(100%);
+  }
+}
+
+.odx-progress {
+  @include dimensions.height(1, math.div(4, 24));
+
+  background: var(--gray-100);
+  display: block;
+  outline: 1px solid var(--gray-200);
+  outline-offset: -1px;
+  overflow: hidden;
+  position: relative;
+
+  &__indicator {
+    @include motion.transition(transform);
+
+    background-color: var(--odx-c-highlight);
+    display: block;
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    transform-origin: 0 0;
+    width: 100%;
+  }
+
+  &--indeterminate #{&}__indicator {
+    animation: 2s ease-in-out infinite progress-indeterminate-animation;
+  }
+}