@odx/ui 1.0.0-rc.2 → 1.0.0-rc.20

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

@@ -33,6 +33,7 @@
     max-width: var(--odx-main-menu-max-width);
     position: fixed;
     top: 0;
+    width: 100%;
     z-index: 9000;
   }
 
@@ -41,7 +42,7 @@
     background-color: var(--odx-c-backdrop);
     height: 100%;
     left: 0;
-    position: absolute;
+    position: fixed;
     top: 0;
     width: 100%;
     z-index: 8999;
@@ -69,6 +70,7 @@
     --odx-v-scrollbar-thumb-color-hover: var(--blue-500);
 
     @include dimensions.padding-x(0.5);
+    @include dimensions.margin(1, top);
 
     display: flex;
     flex-direction: column;
@@ -96,7 +98,7 @@
   }
 
   &__footer {
-    @include dimensions.height(1);
+    @include dimensions.line-height(1);
     @include dimensions.padding-x(1);
     @include dimensions.padding(math.div(16, 24), top);
     @include dimensions.padding(math.div(32, 24), bottom);

package/scss/components/menu.component.scss

@@ -0,0 +1,50 @@
+@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;
+      margin: 0;
+      width: 100%;
+    }
+  }
+
+  &__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

@@ -1,6 +1,10 @@
 @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)};
@@ -8,14 +12,12 @@
   --odx-modal-max-width: #{dimensions.get-size(20)};
 
   $root: &;
-  $modal-padding: math.div(12, 24);
 
   backdrop-filter: blur(var(--odx-v-backdrop-blur));
   background-color: var(--odx-c-backdrop-dark);
   display: block;
   height: 100%;
   left: 0;
-  overflow: auto;
   overscroll-behavior: contain;
   position: fixed;
   top: 0;
@@ -27,12 +29,17 @@
     --odx-modal-margin-x: #{dimensions.get-size(1)};
   }
 
+  &--sidesheet {
+    backdrop-filter: unset;
+    background-color: unset;
+  }
+
   &__container {
-    @include dimensions.padding-x(math.div(16, 24));
+    @include dimensions.padding-x(1);
 
     background-color: var(--odx-c-background-content);
     border-radius: var(--odx-v-border-radius);
-    box-shadow: var(--odx-v-backdrop-box-shadow-layer-2);
+    box-shadow: var(--odx-v-box-shadow-layer-2);
     display: flex;
     flex-direction: column;
     margin: var(--odx-modal-margin-y) auto 0;
@@ -40,6 +47,10 @@
     min-height: dimensions.get-size(7);
     width: min(var(--odx-modal-max-width), calc(100vw - 2 * var(--odx-modal-margin-x)));
 
+    #{$root}--xsmall & {
+      --odx-modal-max-width: #{dimensions.get-size(15)};
+    }
+
     #{$root}--medium & {
       --odx-modal-max-width: #{dimensions.get-size(30)};
     }
@@ -47,6 +58,21 @@
     #{$root}--large & {
       --odx-modal-max-width: #{dimensions.get-size(50)};
     }
+
+    #{$root}--sidesheet & {
+      height: 100%;
+      left: unset;
+      max-height: calc(100vh - var(--odx-modal-margin-y) - #{dimensions.get-size(1)});
+      right: 0;
+
+      @include breakpoints.up(phone) {
+        margin-right: dimensions.get-size(0.5);
+      }
+    }
+
+    #{$root}--with-component & > * {
+      display: contents;
+    }
   }
 
   &__header,
@@ -56,15 +82,18 @@
   }
 
   &__header {
-    @include dimensions.min-height(1);
-    @include dimensions.padding(math.div(12, 24), top);
+    @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);
+      @include dimensions.margin-x(-0.5);
 
       flex: 1 1 auto;
       max-width: 100%;
+
+      @include breakpoints.up(phone) {
+        @include dimensions.margin(-1, left);
+      }
     }
   }
 
@@ -73,13 +102,53 @@
 
     display: block;
     overflow: auto;
+
+    #{$root}--sidesheet & {
+      flex: 1;
+    }
   }
 
   &__footer {
-    --odx-grid-gutter: #{dimensions.get-size(math.div(16, 24))};
     @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;
+  }
+}

package/scss/components/radio-button.component.scss

@@ -11,7 +11,7 @@
   display: block;
 
   &.is-disabled {
-    color: var(--odx-input-control-color-disabled);
+    color: var(--odx-control-color-disabled);
   }
 
   &.is-readonly {

package/scss/components/rail-navigation-item.component.scss

@@ -0,0 +1,60 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
+@use '../abstract/motion';
+@use '../abstract/typography';
+@use '../abstract/breakpoints';
+@use '../abstract//utils';
+
+.odx-rail-navigation-item {
+  @include motion.transition(outline-color background-color color);
+  @include dimensions.padding(math.div(8, 24));
+  @include utils.interactive(false);
+
+  align-items: center;
+  background-color: unset;
+  border-radius: dimensions.get-size(math.div(3, 24));
+  box-sizing: border-box;
+  display: flex;
+  text-align: left;
+
+  &:hover {
+    background-color: var(--blue-700-5);
+  }
+
+  &.is-selected {
+    background-color: var(--odx-c-selected);
+
+    &:hover {
+      background-color: var(--odx-c-selected-hover);
+    }
+  }
+
+  &.is-disabled {
+    background-color: transparent;
+    color: var(--odx-control-color-disabled);
+    pointer-events: none;
+  }
+
+  &__container {
+    @include typography.prevent-text-overflow();
+    @include motion.transition(width padding-left opacity);
+
+    opacity: 0;
+    overflow: hidden;
+    padding-left: 0;
+    width: 0;
+
+    .odx-rail-navigation.is-open & {
+      &:not(:empty) {
+        @include dimensions.padding(math.div(8, 24), left);
+
+        opacity: 1;
+        width: calc(var(--odx-rail-navigation-max-width) - dimensions.get-size(math.div(64, 24)));
+      }
+    }
+  }
+
+  > .odx-icon {
+    margin: 0;
+  }
+}

package/scss/components/rail-navigation.component.scss

@@ -0,0 +1,32 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
+@use '../abstract/motion';
+@use '../abstract/breakpoints';
+
+.odx-rail-navigation {
+  --odx-rail-navigation-max-width: 230px;
+
+  @include motion.transition(max-width);
+
+  align-items: flex-start;
+  display: inline-flex;
+  flex-direction: column;
+  height: 100%;
+  justify-content: space-between;
+  padding: dimensions.get-size(1) dimensions.get-size(math.div(8, 24));
+
+  &__expand > .odx-icon {
+    @include motion.transition(transform);
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    gap: dimensions.get-size(math.div(12, 24));
+    overflow: auto;
+  }
+
+  &.is-open &__expand > .odx-icon {
+    transform: rotateY(180deg);
+  }
+}

package/scss/components/select.component.scss

@@ -0,0 +1,103 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
+@use '../abstract/motion';
+@use '../abstract/typography';
+@use '../abstract/utils';
+
+:root {
+  --odx-select-max-height: 220px;
+}
+
+.odx-select {
+  $root: &;
+
+  &__trigger {
+    @include utils.vertical-center-content();
+
+    cursor: pointer;
+    flex: 1 1 100%;
+    gap: dimensions.get-size(math.div(6, 24));
+    height: 100%;
+    width: 100%;
+
+    #{$root}.is-readonly & {
+      cursor: text;
+      user-select: unset;
+    }
+  }
+
+  &__placeholder,
+  &__value {
+    @include dimensions.padding-y(math.div(4, 24));
+    @include typography.prevent-text-overflow();
+
+    flex: 1 1 auto;
+    gap: dimensions.get-size(math.div(4, 24));
+    user-select: none;
+  }
+
+  &__placeholder {
+    @include typography.font-weight(normal);
+
+    color: var(--odx-input-control-color);
+    opacity: 0.65;
+  }
+
+  &__search {
+    height: 100%;
+    outline: inherit;
+    padding: 0 !important;
+  }
+
+  &__indicator {
+    @include motion.transition(transform opacity);
+    @include dimensions.margin(math.div(-2, 24), right);
+
+    margin-left: auto;
+
+    #{$root}.is-readonly & {
+      opacity: 0;
+    }
+  }
+}
+
+.odx-select-dropdown {
+  display: flex;
+  flex-direction: column;
+  max-height: var(--odx-select-max-height);
+  min-height: dimensions.get-size(1.5);
+}
+
+.odx-option {
+  @include dimensions.line-height(1.5, 1);
+  @include dimensions.margin(math.div(4, 24), bottom);
+  @include dimensions.padding-x(0.5);
+  @include motion.transition(background-color color outline-color);
+  @include typography.font-weight(normal);
+
+  border-radius: var(--odx-v-border-radius-controls);
+  cursor: pointer;
+  user-select: none;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  &.is-active,
+  &:hover {
+    background-color: var(--gray-50);
+  }
+
+  &.is-selected {
+    background-color: var(--cyan-500-15);
+  }
+
+  &.is-disabled {
+    color: var(--odx-control-color-disabled);
+    pointer-events: none;
+  }
+
+  > .odx-checkbox {
+    @include dimensions.margin(math.div(8, 24), right);
+  }
+}

package/scss/components/slider.component.scss

@@ -0,0 +1,131 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
+@use '../abstract/motion';
+
+.odx-slider {
+  --odx-control-outline-color: var(--gray-200);
+  --odx-control-background-color: var(--gray-100);
+  --odx-control-background-color-hover: var(--cyan-600);
+
+  $root: &;
+  $thumb-size: dimensions.get-size(math.div(20, 24));
+  $track-height: dimensions.get-size(math.div(4, 24));
+
+  appearance: none;
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+
+  @mixin track-container() {
+    background-color: var(--odx-control-background-color);
+    border-radius: 2px;
+    outline: 1px solid var(--odx-control-outline-color);
+    outline-offset: -1px;
+  }
+
+  @mixin track-progress() {
+    border-radius: 2px;
+    height: $track-height;
+    position: relative;
+  }
+
+  @mixin thumb() {
+    @include motion.transition(background-color outline-color);
+
+    appearance: none;
+    background-color: var(--odx-control-background-color-selected);
+    border-radius: 50%;
+    height: $thumb-size;
+    margin-top: calc(#{$thumb-size} / -2 + #{$track-height} / 2);
+    outline: 1px solid var(--white);
+    width: $thumb-size;
+  }
+
+  &::-webkit-slider-container {
+    @include track-container();
+
+    margin: calc((#{$thumb-size} - #{$track-height}) / 2) 0;
+  }
+
+  &::-moz-range-track {
+    @include track-container();
+
+    height: $track-height;
+  }
+
+  &::-webkit-slider-runnable-track {
+    @include track-progress();
+
+    background: linear-gradient(var(--odx-control-background-color-selected), var(--odx-control-background-color-selected)) 0 / var(--odx-slider-filled) 100%
+        no-repeat,
+      transparent;
+  }
+
+  &::-moz-range-progress {
+    @include track-progress();
+
+    background: var(--odx-control-background-color-selected);
+  }
+
+  &::-webkit-slider-thumb {
+    @include thumb();
+
+    position: relative;
+  }
+
+  &::-moz-range-thumb {
+    @include thumb();
+
+    border: unset;
+  }
+
+  &.is-disabled {
+    &::-webkit-slider-container {
+      background-color: var(--odx-control-background-color-disabled);
+      outline: 1px solid transparent;
+    }
+
+    &::-moz-range-track {
+      background-color: var(--odx-control-background-color-disabled);
+      outline: 1px solid transparent;
+    }
+
+    &::-webkit-slider-thumb {
+      background-color: var(--odx-c-text-disabled);
+      outline: 1px solid transparent;
+    }
+
+    &::-moz-range-thumb {
+      background-color: var(--odx-c-text-disabled);
+      outline: 1px solid transparent;
+    }
+
+    &::-webkit-slider-runnable-track {
+      background-image: linear-gradient(var(--odx-c-text-disabled), var(--odx-c-text-disabled));
+    }
+
+    &::-moz-range-progress {
+      background-image: linear-gradient(var(--odx-c-text-disabled), var(--odx-c-text-disabled));
+    }
+  }
+
+  &:focus-visible {
+    &::-webkit-slider-thumb {
+      outline: 2px solid var(--odx-c-highlight-active);
+    }
+
+    &::-moz-range-thumb {
+      outline: 2px solid var(--odx-c-highlight-active);
+    }
+  }
+
+  &:hover:not(.is-disabled) {
+    &::-webkit-slider-thumb {
+      background-color: var(--odx-control-background-color-hover);
+    }
+
+    &::-moz-range-thumb {
+      background-color: var(--odx-control-background-color-hover);
+    }
+  }
+}