@odx/ui 4.10.0 → 4.10.2

package/scss/mainfilter-group.component.scss

@@ -0,0 +1,163 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
+@use '../abstract/typography';
+@use '../abstract/utils';
+
+@include utils.theme-selector(dark) {
+  .odx-mainfilter-group {
+    --odx-input-control-outline-color: var(--blue-900);
+    --odx-input-control-outline-color-hover: var(--blue-900);
+    --odx-c-highlight: var(--blue-900);
+    --odx-c-highlight-text: var(--white);
+    --odx-c-focus-outline: var(--cyan-800);
+    --odx-c-focus: var(--focus-bg);
+  }
+}
+
+.odx-mainfilter-group {
+  --odx-input-control-background-color: var(--gray-50);
+  --odx-input-control-outline-color: var(--blue-700);
+  --odx-c-highlight: var(--blue-700);
+  --odx-input-control-outline-color-hover: var(--blue-700);
+  --odx-input-control-background-color-hover: var(--gray-100);
+  --odx-c-secondary: var(--gray-50);
+  --odx-c-secondary-hover: var(--odx-input-control-background-color-hover);
+  --odx-c-secondary-active: var(--gray-200);
+  --odx-c-focus-outline: var(--cyan-700);
+  --odx-c-focus: var(--cyan-50);
+  --odx-c-highlight-active: var(--odx-c-focus-outline);
+
+  .odx-form-field {
+    flex: 0;
+    position: relative;
+
+    &__control {
+      .odx-form-field-control {
+        min-width: dimensions.get-size(math.div(150, 24));
+
+        &.odx-spinbox {
+          min-width: dimensions.get-size(math.div(172, 24));
+        }
+      }
+    }
+
+    &__label {
+      @include dimensions.padding-x(math.div(3, 24));
+
+      background-color: var(--odx-input-control-background-color);
+      margin-top: 0;
+      position: absolute;
+      right: 0;
+      right: dimensions.get-size(math.div(8, 24));
+      top: dimensions.get-size(math.div(12, 24));
+      z-index: 1;
+    }
+
+    &:has(.odx-spinbox) {
+      .odx-form-field__label {
+        right: dimensions.get-size(math.div(36, 24));
+      }
+    }
+
+    &-label {
+      @include dimensions.padding-y(math.div(2, 24));
+
+      border-radius: var(--odx-v-border-radius-controls);
+      display: inline-block;
+      font-size: dimensions.get-size(math.div(10, 24));
+      line-height: 1;
+    }
+
+    &__hint {
+      display: none;
+    }
+  }
+
+  .odx-button {
+    margin-top: calc(var(--odx-vertical-rythm-base-size) * 0.8334);
+    outline-offset: -1px;
+    outline-width: var(--odx-v-outline-width);
+    overflow: visible;
+    position: relative;
+
+    &:focus-visible {
+      background-color: var(--odx-c-focus);
+    }
+
+    &::before {
+      @include dimensions.padding-x(math.div(3, 24));
+      @include dimensions.padding-y(math.div(2, 24));
+      @include typography.prevent-text-overflow();
+
+      background-color: var(--odx-input-control-background-color);
+      border-radius: var(--odx-v-border-radius-controls);
+      content: attr(label);
+      display: inline-block;
+      font-size: dimensions.get-size(math.div(10, 24));
+      font-weight: var(--odx-typography-font-weight-normal);
+      line-height: 1;
+      margin-top: 0;
+      position: absolute;
+      right: dimensions.get-size(math.div(8, 24));
+      top: dimensions.get-size(math.div(-7, 24));
+      z-index: 1;
+    }
+  }
+
+  .odx-spinbox {
+    .odx-spinbox__action {
+      &:hover {
+        border-color: var(--odx-input-control-outline-color);
+      }
+
+      &:active {
+        background-color: var(--odx-c-secondary-active);
+      }
+    }
+  }
+
+  .odx-toggle-button-group {
+    margin: 0;
+
+    &.is-active {
+      &:not(.is-disabled, .is-readonly):hover {
+        background-color: unset;
+      }
+
+      &:focus-within:has(:focus-visible) {
+        background-color: transparent;
+        outline-color: transparent;
+
+        &:hover {
+          background-color: transparent;
+        }
+      }
+    }
+  }
+
+  .odx-datepicker,
+  .odx-daterangepicker {
+    & > .odx-action-group {
+      z-index: 1;
+    }
+
+    .odx-button {
+      margin-top: 0 !important;
+      outline: none;
+
+      &::before {
+        content: unset;
+      }
+    }
+  }
+
+  .odx-calendar {
+    --odx-input-control-outline-color: var(--gray-200);
+  }
+
+  .odx-button:not(.odx-calendar .odx-button) {
+    &:not(:focus-visible) {
+      outline-color: var(--odx-input-control-outline-color);
+    }
+  }
+}

package/scss/menu.component.scss

@@ -0,0 +1,51 @@
+@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 {
+      align-items: flex-start;
+      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/modal.component.scss

@@ -0,0 +1,219 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
+@use '../abstract/breakpoints';
+@use '../abstract/motion';
+@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)};
+  --odx-modal-margin-bottom: #{dimensions.get-size(0.5)};
+
+  $root: &;
+
+  background: transparent;
+  border: 0;
+  border-radius: var(--odx-v-border-radius);
+  box-shadow: var(--odx-v-box-shadow-layer-2);
+  color: var(--odx-c-text);
+  margin-top: var(--odx-modal-margin-y);
+  overflow: unset;
+  padding: 0;
+  width: min(var(--odx-modal-max-width), calc(100% - 2 * var(--odx-modal-margin-x)));
+
+  &::backdrop,
+  &:modal {
+    @include motion.transition(opacity visibility overlay transform);
+
+    opacity: 0;
+    transition-behavior: allow-discrete;
+  }
+
+  &::backdrop {
+    backdrop-filter: blur(var(--odx-v-backdrop-blur));
+    background-color: var(--odx-c-backdrop-dark);
+  }
+
+  &:modal {
+    max-height: calc(100% - var(--odx-modal-margin-y) - var(--odx-modal-margin-bottom));
+    max-width: 100vw;
+  }
+
+  &[open]::backdrop,
+  &[open]:modal {
+    opacity: 1;
+  }
+
+  &.is-hidden {
+    &[open]::backdrop,
+    &[open]:modal {
+      opacity: 0;
+    }
+
+    &[open]:modal:not(#{$root}--sidesheet) {
+      transform: translateY(#{dimensions.get-size(math.div(8, 24))});
+    }
+
+    &[open]:modal#{$root}--sidesheet {
+      transform: translateX(#{dimensions.get-size(math.div(8, 4))});
+    }
+  }
+
+  &[open]:modal {
+    transform: translateY(0);
+    transform: translateX(0);
+  }
+
+  @starting-style {
+    &[open]:modal,
+    &[open]::backdrop {
+      opacity: 0;
+    }
+
+    &[open]:modal:not(#{$root}--sidesheet) {
+      transform: translateY(#{dimensions.get-size(math.div(8, 24))});
+    }
+
+    &[open]:modal#{$root}--sidesheet {
+      transform: translateX(#{dimensions.get-size(math.div(8, 4))});
+    }
+  }
+
+  &.odx-modal--xsmall {
+    --odx-modal-max-width: #{dimensions.get-size(15)};
+  }
+
+  &.odx-modal--medium {
+    --odx-modal-max-width: #{dimensions.get-size(30)};
+  }
+
+  &.odx-modal--large {
+    --odx-modal-max-width: #{dimensions.get-size(50)};
+  }
+
+  &--sidesheet {
+    height: 100%;
+
+    #{$root}__container {
+      height: calc(100dvh - var(--odx-modal-margin-y) - var(--odx-modal-margin-bottom));
+    }
+
+    &::backdrop {
+      backdrop-filter: unset;
+      background-color: unset;
+    }
+
+    @include breakpoints.up(phone) {
+      margin-right: dimensions.get-size(0.5);
+    }
+
+    @include breakpoints.down(phone) {
+      --odx-modal-max-width: 100dvw !important;
+    }
+  }
+
+  @include breakpoints.up(phone) {
+    --odx-modal-margin-y: #{dimensions.get-size(3)};
+    --odx-modal-margin-x: #{dimensions.get-size(1)};
+    --odx-modal-margin-bottom: #{dimensions.get-size(1)};
+  }
+
+  &__container {
+    @include dimensions.padding-x(1);
+
+    background-color: var(--odx-c-background-content);
+    border-radius: var(--odx-v-border-radius);
+    display: flex;
+    flex-direction: column;
+    max-height: calc(100dvh - var(--odx-modal-margin-y) - var(--odx-modal-margin-bottom));
+
+    #{$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-x(-0.5);
+
+      flex: 1 1 auto;
+      max-width: 100%;
+
+      @include breakpoints.up(phone) {
+        @include dimensions.margin(-1, left);
+      }
+    }
+  }
+
+  &__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));
+    margin-left: auto;
+
+    > .odx-button {
+      display: flex;
+    }
+  }
+}
+
+.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/navigation-back.component.scss

@@ -0,0 +1,23 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
+@use '../abstract/motion';
+@use '../abstract/utils';
+
+.odx-navigation-back {
+  border-radius: var(--odx-v-border-radius-controls);
+  height: dimensions.get-size(1.5);
+  width: dimensions.get-size(1.5);
+
+  @include motion.transition(background-color outline);
+  @include utils.center-content(true);
+  @include utils.interactive($with-background: true);
+
+  &:hover {
+    background-color: var(--blue-700-5);
+  }
+
+  &:active {
+    background-color: var(--cyan-500-15);
+    border: none;
+  }
+}

package/scss/notification-center.component.scss

@@ -0,0 +1,74 @@
+@use '../abstract/dimensions';
+@use '../abstract/typography';
+
+.odx-notification-center-overlay {
+  --odx-cdk-connected-overlay-min-height-modified: #{dimensions.get-size(9)};
+  --odx-cdk-connected-overlay-max-height-modified: min(var(--odx-cdk-connected-overlay-max-height), #{dimensions.get-size(15)});
+}
+
+.odx-notification-center {
+  --odx-notification-center-padding-x: #{dimensions.get-size(0.5)};
+  --odx-notification-center-padding-y: #{dimensions.get-size(0.5)};
+  --odx-notification-center-header-height: #{dimensions.get-size(2)};
+  --odx-notification-center-footer-height: #{dimensions.get-size(2.5)};
+
+  background-color: var(--odx-c-background-content);
+
+  &__header,
+  &__footer {
+    background-color: inherit;
+    border-radius: var(--odx-v-border-radius);
+    left: 0;
+    margin-right: var(--odx-notification-center-padding-x);
+    padding-left: var(--odx-notification-center-padding-x);
+    position: absolute;
+    right: 0;
+    z-index: 1;
+  }
+
+  &__header {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    height: var(--odx-notification-center-header-height);
+    line-height: var(--odx-notification-center-header-height);
+    top: 0;
+    user-select: none;
+
+    @include typography.font-size(0);
+    @include typography.font-weight(semibold);
+  }
+
+  &__content {
+    display: grid;
+    padding-bottom: calc(var(--odx-notification-center-footer-height) - var(--odx-notification-center-padding-y));
+    padding-top: calc(var(--odx-notification-center-header-height) - var(--odx-notification-center-padding-y));
+
+    > .odx-list-item {
+      border-radius: 0;
+
+      &:first-child {
+        border-top-left-radius: var(--odx-v-border-radius-controls);
+        border-top-right-radius: var(--odx-v-border-radius-controls);
+      }
+
+      &:last-child {
+        border-bottom-left-radius: var(--odx-v-border-radius-controls);
+        border-bottom-right-radius: var(--odx-v-border-radius-controls);
+      }
+    }
+  }
+
+  &__footer {
+    align-items: center;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    bottom: 0;
+    display: flex;
+    height: var(--odx-notification-center-footer-height);
+    justify-content: flex-end;
+
+    > .odx-button {
+      margin: 0;
+    }
+  }
+}

package/scss/notification-item.component.scss

@@ -0,0 +1,41 @@
+@use 'sass:math';
+@use '../abstract/breakpoints';
+@use '../abstract/dimensions';
+@use '../abstract/typography';
+
+.odx-notification-item {
+  $root: &;
+
+  column-gap: dimensions.get-size(math.div(16, 24));
+  display: grid;
+  grid-template-areas: 'avatar title actions' '. description .';
+  grid-template-columns: auto 1fr auto;
+  grid-template-rows: auto auto;
+  min-width: dimensions.get-size(10);
+
+  @include dimensions.padding-x(0.25);
+
+  @include breakpoints.up(phone) {
+    max-width: dimensions.get-size(16);
+  }
+
+  &__title,
+  &__description {
+    @include dimensions.line-height(1);
+  }
+
+  &__title {
+    align-self: center;
+    grid-area: title;
+  }
+
+  &__description {
+    grid-area: description;
+
+    @include typography.font-size(-2);
+  }
+
+  &__actions {
+    grid-area: actions;
+  }
+}

package/scss/option.component.scss

@@ -0,0 +1,40 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
+@use '../abstract/motion';
+@use '../abstract/typography';
+
+.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);
+  user-select: none;
+
+  &:not(.is-disabled) {
+    cursor: pointer;
+  }
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  &.is-active,
+  &:hover:not(.is-disabled) {
+    background-color: var(--gray-50);
+  }
+
+  &.is-selected {
+    background-color: var(--cyan-500-15);
+  }
+
+  &.is-disabled {
+    color: var(--odx-control-color-disabled);
+  }
+
+  > .odx-checkbox {
+    @include dimensions.margin(math.div(8, 24), right);
+  }
+}

package/scss/paginator.component.scss

@@ -0,0 +1,34 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
+
+.odx-paginator {
+  align-items: center;
+  display: grid;
+  justify-content: flex-end;
+
+  &:has(.odx-paginator__summary) {
+    grid-gap: dimensions.get-size(1.5);
+    grid-template-columns: auto auto;
+  }
+
+  &__navigation {
+    align-items: center;
+    display: flex;
+
+    @include dimensions.margin-y(math.div(8, 24));
+  }
+
+  .odx-action-group {
+    @include dimensions.height(1);
+
+    grid-gap: dimensions.get-size(0.5);
+  }
+
+  .odx-button {
+    min-width: auto;
+  }
+
+  &__range {
+    @include dimensions.margin-x(math.div(16, 24));
+  }
+}

package/scss/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;
+  }
+}