@odx/ui 4.10.0 → 4.10.1

package/scss/card.component.scss

@@ -0,0 +1,232 @@
+@use 'sass:math';
+@use '../abstract/breakpoints';
+@use '../abstract/dimensions';
+@use '../abstract/motion';
+@use '../abstract/typography';
+@use '../abstract/utils';
+@use '../layout/typography' as *;
+
+:root {
+  --odx-card-avatar-size: 64px;
+  --odx-card-content-vertical-alignment: center;
+
+  @include breakpoints.up(phone) {
+    --odx-card-avatar-size: 128px;
+    --odx-card-content-vertical-alignment: top;
+  }
+}
+
+.odx-card {
+  $root: &;
+
+  --odx-card-main-padding: #{dimensions.get-size(math.div(12, 24))};
+  --odx-card-gap: #{dimensions.get-size(math.div(12, 24))};
+
+  $main-padding: var(--odx-card-main-padding);
+
+  @include motion.transition(box-shadow outline-color color);
+  @include utils.interactive(false);
+  @include utils.with-outline-bold();
+
+  background-color: var(--odx-c-background-content);
+  behavior: button;
+  border-radius: var(--odx-v-border-radius);
+  display: block;
+  padding: $main-padding;
+  position: relative;
+
+  &--image-card {
+    --odx-card-main-padding: #{dimensions.get-size(1)};
+
+    overflow: clip;
+  }
+
+  &.is-disabled * {
+    color: var(--odx-c-text-disabled);
+  }
+
+  &__container {
+    display: flex;
+    gap: var(--odx-card-gap);
+
+    #{$root}--default &,
+    #{$root}--image-card & {
+      flex-direction: column;
+    }
+
+    @include breakpoints.up(phone) {
+      #{$root}--launch-tile-centered & {
+        flex-direction: column;
+      }
+    }
+
+    #{$root}--launch-tile &,
+    #{$root}--launch-tile-centered & {
+      @include dimensions.padding-y(0.5);
+      @include dimensions.padding-x(math.div(8, 24));
+
+      gap: dimensions.get-size(math.div(16, 24));
+
+      @include breakpoints.up(phone) {
+        @include dimensions.padding(1, bottom);
+
+        gap: dimensions.get-size(1);
+      }
+    }
+  }
+
+  &-image {
+    $img-margin: calc(#{$main-padding} * -1);
+
+    display: block;
+    margin: $img-margin $img-margin 0 $img-margin;
+    max-height: var(--odx-card-image-max-height);
+    max-width: max-content;
+    overflow: clip;
+
+    img {
+      aspect-ratio: var(--odx-card-image-aspect-ratio);
+      display: block;
+      height: auto;
+      max-width: 100%;
+      object-fit: cover;
+    }
+  }
+
+  .odx-chip-list-row:has(.odx-chip) {
+    left: $main-padding;
+    padding: dimensions.get-size(math.div(6, 24)) 0;
+    position: absolute;
+    top: $main-padding;
+    width: calc(100% - dimensions.get-size(math.div(40, 24)) - #{$main-padding} - dimensions.get-size(math.div(30, 24)));
+  }
+
+  &__content {
+    #{$root}--default & {
+      padding-right: dimensions.get-size(math.div(40, 24));
+    }
+
+    #{$root}--launch-tile &,
+    #{$root}--launch-tile-centered & {
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+      justify-content: var(--odx-card-content-vertical-alignment);
+    }
+  }
+
+  &__title {
+    #{$root}--default & {
+      padding-right: dimensions.get-size(math.div(36, 24));
+    }
+
+    #{$root}--launch-tile &,
+    #{$root}--launch-tile-centered & {
+      font-size: dimensions.get-size(math.div(20, 24));
+      line-height: dimensions.get-size(math.div(30, 24));
+      overflow-wrap: anywhere;
+
+      @include typography.font-weight(medium);
+      @include typography.line-clamp(3);
+
+      @include breakpoints.up(phone) {
+        @include dimensions.margin-y(math.div(9, 24));
+
+        font-size: dimensions.get-size(math.div(25, 24));
+      }
+    }
+  }
+
+  &:focus-visible,
+  &:hover,
+  &:focus-within:has(:focus-visible) {
+    box-shadow: var(--odx-v-box-shadow-layer-1);
+  }
+
+  &--launch-tile,
+  &--launch-tile-centered {
+    #{$root}__subtitle {
+      display: block;
+    }
+  }
+
+  @include breakpoints.up(phone) {
+    &__content {
+      padding-right: unset;
+    }
+
+    &__title,
+    &__subtitle {
+      #{$root}--launch-tile-centered & {
+        text-align: center;
+      }
+    }
+
+    &__container {
+      padding-right: unset;
+
+      #{$root}--launch-tile & {
+        @include dimensions.padding-y(1);
+      }
+
+      #{$root}--launch-tile-centered & {
+        gap: dimensions.get-size(math.div(16, 24));
+      }
+    }
+  }
+
+  .odx-avatar {
+    flex: 0 0 auto;
+    height: var(--odx-card-avatar-size);
+    width: var(--odx-card-avatar-size);
+
+    @include dimensions.margin-y(math.div(4, 24));
+
+    @include breakpoints.up(phone) {
+      margin: dimensions.get-size(math.div(4, 24)) auto 0;
+    }
+  }
+
+  &__footer {
+    @include dimensions.padding-x(0.5);
+
+    display: flex;
+    gap: dimensions.get-size(math.div(12, 24));
+    justify-content: flex-end;
+
+    #{$root}--default & {
+      display: block;
+      margin-top: $main-padding;
+    }
+
+    #{$root}--image-card & {
+      display: none;
+    }
+
+    @include breakpoints.up(phone) {
+      #{$root}--launch-tile-centered & {
+        justify-content: center;
+      }
+
+      padding-bottom: dimensions.get-size(math.div(12, 24));
+    }
+
+    .odx-button {
+      margin: 0;
+    }
+  }
+
+  > .odx-action-group {
+    margin: 0;
+    position: absolute;
+    right: $main-padding;
+    top: $main-padding;
+  }
+
+  &.is-disabled {
+    .odx-avatar {
+      color: var(--odx-c-text-disabled);
+      filter: saturate(0);
+    }
+  }
+}

package/scss/checkbox.component.scss

@@ -0,0 +1,136 @@
+@use 'sass:math';
+@use '../layout/helpers';
+@use '../layout/typography' as *;
+@use '../abstract/dimensions';
+@use '../abstract/typography';
+@use '../abstract/utils';
+@use '../abstract/motion';
+
+.odx-checkbox {
+  $root: &;
+
+  color: var(--odx-c-text);
+  display: inline-block;
+
+  &.is-disabled {
+    color: var(--odx-control-color-disabled);
+  }
+
+  &.is-readonly {
+    @include utils.non-interactive();
+  }
+
+  &__label {
+    @include dimensions.line-height(1);
+    @include motion.transition(background-color color outline-color);
+    @include typography.font-size(0);
+    @include utils.interactive($focus-within: true);
+
+    border-radius: var(--odx-v-border-radius-controls);
+    color: inherit;
+    display: inline-flex;
+    min-height: dimensions.get-size(1);
+    padding: 0 2px;
+    user-select: auto;
+    vertical-align: top;
+
+    #{$root}.is-disabled & {
+      cursor: default;
+    }
+  }
+
+  &__subtitle {
+    @extend .odx-text--small;
+  }
+
+  &__input {
+    @include utils.visually-hidden();
+  }
+
+  &__indicator {
+    @include dimensions.container(1, math.div(20, 24));
+    @include motion.transition(background-color color outline-color);
+    @include utils.center-content(true);
+    @include utils.with-outline();
+
+    background-color: var(--odx-control-background-color);
+    border-radius: var(--odx-v-border-radius-controls);
+    color: var(--odx-control-color-selected);
+    flex: 0 0 auto;
+    outline-color: var(--odx-control-outline-color);
+    padding: 1px;
+
+    > .odx-icon {
+      $checkmark-size: math.div(18, 24);
+
+      @include dimensions.container($checkmark-size);
+      @include motion.transition(opacity);
+
+      font-size: dimensions.get-size($checkmark-size);
+      opacity: 0;
+    }
+
+    #{$root}:hover & {
+      background-color: var(--odx-control-background-color-hover);
+      outline-color: var(--odx-control-outline-color-hover);
+    }
+
+    #{$root}.is-active &,
+    #{$root}__input:indeterminate ~ &,
+    #{$root}__input:checked ~ & {
+      background-color: var(--odx-control-background-color-selected);
+      outline-color: var(--odx-control-outline-color-selected);
+
+      > .odx-icon {
+        opacity: 1;
+      }
+    }
+
+    #{$root}.has-error & {
+      background-color: var(--odx-control-background-color-error);
+      color: var(--odx-control-color-error);
+      outline-color: var(--odx-control-outline-color-error);
+    }
+
+    #{$root}.has-error:hover & {
+      outline-color: var(--odx-control-outline-color-error-hover);
+    }
+
+    #{$root}.is-disabled & {
+      background-color: var(--odx-control-background-color-disabled);
+      color: var(--odx-control-color-disabled);
+      outline-color: var(--odx-control-outline-color-disabled);
+    }
+
+    #{$root}.is-readonly & {
+      background-color: var(--odx-control-background-color-readonly);
+      color: var(--odx-control-color-readonly);
+      outline-color: var(--odx-control-outline-color-readonly);
+    }
+  }
+
+  &__content {
+    @include dimensions.margin(0.5, left);
+
+    display: flex;
+    flex-direction: column;
+    padding-left: 2px;
+
+    &:empty {
+      margin: 0;
+      padding: 0;
+    }
+  }
+
+  &__required {
+    @include typography.font-size(0);
+
+    color: var(--odx-c-error-text);
+    margin-left: 2px;
+    vertical-align: top;
+
+    #{$root}.is-disabled & {
+      color: var(--odx-control-color-disabled);
+    }
+  }
+}

package/scss/chip-list.component.scss

@@ -0,0 +1,23 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
+
+$form-field-inner-padding: math.div(8, 24);
+
+.odx-chip-list {
+  $root: &;
+
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+
+  &-row {
+    &:has(.odx-chip) {
+      @include dimensions.padding($form-field-inner-padding, ('top', 'left', 'right'));
+      @include dimensions.padding(math.div(4, 24), ('bottom'));
+
+      display: flex;
+      flex-wrap: wrap;
+      gap: dimensions.get-size($form-field-inner-padding);
+    }
+  }
+}

package/scss/chip.component.scss

@@ -0,0 +1,74 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
+@use '../abstract/utils';
+@use '../abstract/motion';
+@use '../abstract/typography';
+
+$sizes: (small 1 -1 math.div(16, 24), medium 1.5 0 1);
+$variants: secondary, highlight, success, danger, warning, confirmation;
+
+.odx-chip {
+  $root: &;
+
+  @include typography.font-weight(medium);
+  @include motion.transition(background-color color);
+
+  display: inline-flex;
+  gap: dimensions.get-size(math.div(4, 24));
+  user-select: none;
+
+  &__content {
+    @include typography.prevent-text-overflow();
+  }
+
+  &__action {
+    @include utils.center-content();
+    @include motion.transition(background-color color outline);
+
+    border-radius: 50%;
+    margin: 0;
+
+    #{$root}--warning & {
+      background-color: var(--odx-c-warning);
+      color: var(--odx-c-warning-text);
+
+      &:hover {
+        background-color: var(--odx-c-warning-hover);
+      }
+
+      &.is-active,
+      &:active {
+        background-color: var(--odx-c-warning-active);
+      }
+    }
+  }
+
+  @each $size, $size-factor, $font-size-factor, $icon-size in $sizes {
+    &--#{$size} {
+      @include dimensions.padding-x(math.div($size-factor, 3));
+      @include dimensions.line-height($size-factor);
+      @include typography.font-size($font-size-factor);
+
+      border-radius: dimensions.get-size(math.div($size-factor, 2));
+
+      #{$root}__action {
+        @include dimensions.margin(math.div($size-factor, -3), 'right');
+      }
+
+      > .odx-icon {
+        font-size: dimensions.get-size($icon-size);
+      }
+    }
+  }
+
+  @each $variant in $variants {
+    &--#{$variant} {
+      background-color: var(--odx-c-#{$variant});
+      color: var(--odx-c-#{$variant}-text);
+    }
+  }
+
+  > .odx-icon {
+    align-self: center;
+  }
+}

package/scss/circular-progress.component.scss

@@ -0,0 +1,75 @@
+@use '../abstract/motion';
+@use '../abstract/dimensions';
+
+@keyframes odx-circular-progress-indicator-animation {
+  0% {
+    stroke-dashoffset: 100;
+  }
+
+  25% {
+    stroke-dashoffset: 250;
+    transform: rotate(180deg);
+  }
+
+  100% {
+    stroke-dashoffset: 100;
+    transform: rotate(270deg);
+  }
+}
+
+@keyframes odx-circular-progress-inner-animation {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.odx-circular-progress {
+  $root: &;
+
+  aspect-ratio: 1;
+  display: inline-block;
+  height: 100%;
+
+  &__track,
+  &__indicator {
+    fill: transparent;
+  }
+
+  &__track {
+    stroke: var(--gray-100);
+  }
+
+  &__indicator {
+    @include motion.transition(stroke-dashoffset);
+
+    stroke: var(--odx-c-highlight);
+    transform: rotate(-90deg);
+    transform-origin: 50% 50%;
+  }
+
+  &--indeterminate {
+    #{$root}__inner {
+      animation: 1.75s linear infinite odx-circular-progress-inner-animation;
+    }
+
+    #{$root}__indicator {
+      animation: 1.75s ease infinite odx-circular-progress-indicator-animation both;
+    }
+  }
+
+  &--small {
+    @include dimensions.height(2, 1.5);
+  }
+
+  &--medium {
+    @include dimensions.height(3, 2.5);
+  }
+
+  &--large {
+    @include dimensions.height(4, 4);
+  }
+}

package/scss/components/card.component.scss

@@ -28,12 +28,6 @@
   @include utils.interactive(false);
   @include utils.with-outline-bold();
 
-  &--image-card {
-    --odx-card-main-padding: #{dimensions.get-size(1)};
-
-    overflow: clip;
-  }
-
   background-color: var(--odx-c-background-content);
   behavior: button;
   border-radius: var(--odx-v-border-radius);
@@ -41,6 +35,12 @@
   padding: $main-padding;
   position: relative;
 
+  &--image-card {
+    --odx-card-main-padding: #{dimensions.get-size(1)};
+
+    overflow: clip;
+  }
+
   &.is-disabled * {
     color: var(--odx-c-text-disabled);
   }

package/scss/components/table.component.scss

@@ -59,6 +59,7 @@
     @include typography.font-weight(medium);
 
     border-bottom-color: var(--odx-table-head-border-color);
+    vertical-align: top;
 
     .odx-form-field {
       height: dimensions.get-size(2);

package/scss/connected-overlay.scss

@@ -0,0 +1,63 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
+@use '../abstract/motion';
+@use '../abstract/typography';
+@use '../abstract/utils';
+
+.odx-cdk-connected-overlay {
+  @include motion.transition(opacity visibility overlay);
+
+  background: transparent;
+  border: 0;
+  color: var(--odx-c-text);
+  margin: 0;
+  opacity: 0;
+  overflow: visible;
+  padding: 0;
+  position: fixed;
+  transform: translate(var(--odx-cdk-connected-overlay-position-x, 0), var(--odx-cdk-connected-overlay-position-y, 0));
+  transition-behavior: allow-discrete;
+
+  &.force-hidden {
+    display: none;
+  }
+
+  &--non-interactive {
+    pointer-events: none;
+  }
+
+  &__content {
+    left: 0 !important;
+    max-height: var(--odx-cdk-connected-overlay-max-height-modified, var(--odx-cdk-connected-overlay-max-height, unset));
+    max-width: var(--odx-cdk-connected-overlay-max-width-modified, var(--odx-cdk-connected-overlay-max-width, unset));
+    min-height: var(--odx-cdk-connected-overlay-min-height-modified, var(--odx-cdk-connected-overlay-min-height, unset));
+    min-width: var(--odx-cdk-connected-overlay-min-width-modified, var(--odx-cdk-connected-overlay-min-width, unset));
+    position: relative !important;
+    top: 0 !important;
+
+    > * {
+      max-height: var(--odx-cdk-connected-overlay-max-height-modified, var(--odx-cdk-connected-overlay-max-height, unset));
+    }
+  }
+
+  &:popover-open {
+    opacity: 1;
+  }
+
+  &.is-hidden:popover-open {
+    opacity: 0;
+  }
+
+  @starting-style {
+    &:popover-open {
+      opacity: 0;
+    }
+  }
+}
+
+.odx-cdk-connected-overlay-arrow {
+  height: dimensions.get-size(0.5);
+  position: fixed;
+  transform: rotate(45deg);
+  width: dimensions.get-size(0.5);
+}

package/scss/content-box.component.scss

@@ -0,0 +1,46 @@
+@use '../abstract/breakpoints';
+@use '../abstract/dimensions';
+
+.odx-content-box {
+  background-color: var(--odx-c-background-content);
+  display: block;
+
+  &__header,
+  &__footer {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+
+    > * {
+      flex: 1 1 auto;
+    }
+  }
+
+  &__header {
+    @include dimensions.padding(0.5, ('top', 'right', 'left'));
+
+    @include breakpoints.up(phone) {
+      @include dimensions.padding(1, ('top', 'right', 'left'));
+    }
+  }
+
+  &__footer {
+    @include dimensions.padding(0.5, ('right', 'bottom', 'left'));
+
+    @include breakpoints.up(phone) {
+      @include dimensions.padding(1, ('right', 'bottom', 'left'));
+    }
+  }
+
+  &__content {
+    @include dimensions.padding(0.5);
+
+    @include breakpoints.up(phone) {
+      @include dimensions.padding(1);
+    }
+  }
+
+  & > .odx-area-header ~ &__content {
+    padding-top: 0;
+  }
+}