@odx/ui 4.9.0 → 4.10.1

package/scss/breadcrumbs.component.scss

@@ -0,0 +1,45 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
+@use '../abstract/utils';
+@use '../abstract/typography';
+@use '@odx/icons/core/core-utils' as icons;
+
+.odx-breadcrumbs {
+  @include dimensions.padding-x(1);
+  @include dimensions.padding-y(math.div(12, 24));
+  @include utils.vertical-center-content();
+
+  flex-wrap: wrap;
+  gap: dimensions.get-size(math.div(8, 24));
+
+  .odx-link {
+    white-space: nowrap;
+
+    &:not(:last-child) {
+      @include dimensions.margin(math.div(20, 24), right);
+
+      &::after {
+        color: var(--gray-500);
+        content: icons.get-icon-glyph('chevron-right');
+        display: inline-block;
+        font-family: icons.get-font-family();
+        font-size: dimensions.get-size(math.div(12, 24));
+        pointer-events: none;
+        position: absolute;
+
+        @include dimensions.margin(math.div(12, 24), left);
+      }
+    }
+
+    &:visited {
+      color: var(--odx-c-link);
+    }
+
+    &:last-child,
+    &:last-child:visited {
+      @include typography.font-weight(semibold);
+
+      color: var(--odx-c-text);
+    }
+  }
+}

package/scss/button-group.component.scss

@@ -0,0 +1,101 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
+
+@mixin buttons-radius($vertical: false, $reversed: false) {
+  $start: 'first';
+  $end: 'last';
+
+  @if $reversed {
+    $start: 'last';
+    $end: 'first';
+  }
+
+  @if $vertical {
+    margin: 0;
+
+    &:#{$start}-of-type {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    &:#{$end}-of-type {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+    }
+  } @else {
+    &:#{$start}-of-type {
+      border-bottom-right-radius: 0;
+      border-top-right-radius: 0;
+    }
+
+    &:#{$end}-of-type {
+      border-bottom-left-radius: 0;
+      border-top-left-radius: 0;
+    }
+  }
+
+  &:not(:first-of-type, :last-of-type) {
+    border-radius: 0;
+  }
+}
+
+.odx-button-group {
+  display: inline-flex;
+  gap: dimensions.get-size(math.div(2, 24));
+
+  &--reverse {
+    flex-direction: row-reverse;
+    justify-content: flex-end;
+  }
+
+  &--reverse#{&}--vertical#{&}--block {
+    flex-direction: column-reverse;
+    justify-content: flex-end;
+  }
+
+  &--block {
+    display: flex;
+    width: 100%;
+  }
+
+  &:not(#{&}--vertical)#{&}--align-right {
+    justify-content: flex-end;
+  }
+
+  &:not(#{&}--vertical)#{&}--align-right#{&}--reverse {
+    justify-content: flex-start;
+  }
+
+  &:not(#{&}--vertical, #{&}--reverse) > .odx-button {
+    @include buttons-radius();
+  }
+
+  &:not(#{&}--vertical)#{&}--reverse > .odx-button {
+    @include buttons-radius(false, true);
+  }
+
+  &--vertical {
+    @include dimensions.margin-y(math.div(10, 24));
+
+    flex-direction: column;
+
+    > .odx-button {
+      @include dimensions.height(math.div(35, 24));
+    }
+  }
+
+  &:not(#{&}--reverse)#{&}--vertical {
+    > .odx-button {
+      @include buttons-radius(true);
+    }
+  }
+
+  &#{&}--reverse#{&}--vertical {
+    display: inline-flex;
+    flex-direction: column-reverse;
+
+    > .odx-button {
+      @include buttons-radius(true, true);
+    }
+  }
+}

package/scss/button.component.scss

@@ -0,0 +1,143 @@
+@use 'sass:map';
+@use 'sass:math';
+@use '../abstract/breakpoints';
+@use '../abstract/dimensions';
+@use '../abstract/motion';
+@use '../abstract/typography';
+@use '../abstract/utils';
+@use 'avatar.component' as avatar;
+@use 'dropdown.component' as dropdown;
+@use 'icon.component';
+
+.odx-button {
+  $variants: secondary, primary, highlight, success, danger, confirmation, ghost;
+  $icon-margin: 0.25;
+
+  @extend .odx-button--secondary;
+  @include dimensions.height(2, 1.5);
+  @include dimensions.padding-x(2 * $icon-margin);
+  @include motion.transition(background-color color outline);
+  @include typography.font-size(0);
+  @include typography.font-weight(medium);
+  @include utils.center-content(true);
+  @include utils.interactive($with-background: false);
+  @include utils.with-outline-bold();
+
+  appearance: none;
+  border-radius: var(--odx-v-border-radius-controls);
+  min-width: dimensions.get-size(1.5);
+  overflow-wrap: anywhere;
+  overflow-y: clip;
+  vertical-align: middle;
+
+  &:not(:has(> .odx-icon, > .odx-avatar)) {
+    min-width: dimensions.get-size(3);
+  }
+
+  > .odx-icon {
+    @include dimensions.margin-x(-$icon-margin);
+  }
+
+  > .odx-icon[alignLeft] {
+    @include dimensions.margin($icon-margin, right);
+  }
+
+  > .odx-icon[alignRight] {
+    @include dimensions.margin($icon-margin, left);
+  }
+
+  > .odx-avatar {
+    @include avatar.avatar-size(1.5, math.div(32, 24), -1, 1);
+    @include dimensions.margin-x(-2 * $icon-margin);
+  }
+
+  &[data-breakpoint]:has(> .odx-icon, > .odx-avatar) {
+    min-width: dimensions.get-size(1.5);
+  }
+
+  @each $breakpoint in breakpoints.get-breakpoint-names() {
+    @include breakpoints.down($breakpoint) {
+      &[data-breakpoint='#{$breakpoint}'] {
+        font-size: 0;
+
+        > .odx-icon {
+          @include dimensions.margin-x(-$icon-margin);
+        }
+      }
+    }
+  }
+
+  &--highlight:focus-visible {
+    outline-color: var(--odx-c-focus-outline-dark);
+  }
+
+  @each $variant in $variants {
+    &--#{$variant} {
+      background-color: var(--odx-c-#{$variant});
+      color: var(--odx-c-#{$variant}-text);
+
+      &:hover {
+        background-color: var(--odx-c-#{$variant}-hover);
+      }
+
+      &#{dropdown.$dropdown-open-selector},
+      &.is-active,
+      &:active {
+        background-color: var(--odx-c-#{$variant}-active);
+      }
+
+      &:disabled,
+      &.is-disabled {
+        background-color: var(--odx-c-#{$variant}-disabled);
+        color: var(--odx-c-#{$variant}-text-disabled);
+      }
+    }
+  }
+
+  &--small {
+    $icon-margin: math.div(1, 8);
+
+    @include dimensions.height(1);
+    @include dimensions.padding-x(2 * $icon-margin);
+    @include typography.font-size(-1);
+
+    line-height: dimensions.get-size(1);
+    min-width: dimensions.get-size(1);
+
+    &:not(:has(> .odx-icon, > .odx-avatar)) {
+      min-width: dimensions.get-size(2);
+    }
+
+    > .odx-icon {
+      @include dimensions.margin-x(-2 * $icon-margin);
+    }
+
+    > .odx-icon[alignLeft] {
+      @include dimensions.margin($icon-margin, right);
+    }
+
+    > .odx-icon[alignRight] {
+      @include dimensions.margin($icon-margin, left);
+    }
+  }
+
+  &--large {
+    $icon-margin: 0.5;
+
+    @include dimensions.height(2, 2);
+    @include dimensions.padding-x(2 * $icon-margin);
+    @include typography.font-size(1);
+
+    > .odx-icon {
+      @include dimensions.margin-x(-$icon-margin * math.div(2, 3));
+    }
+
+    > .odx-icon[alignLeft] {
+      @include dimensions.margin($icon-margin * math.div(2, 3), right);
+    }
+
+    > .odx-icon[alignRight] {
+      @include dimensions.margin($icon-margin * math.div(2, 3), left);
+    }
+  }
+}

package/scss/calendar.component.scss

@@ -0,0 +1,243 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
+@use '../abstract/motion';
+@use '../abstract/typography';
+@use '../abstract/utils';
+
+.odx-calendar {
+  $root: &;
+  --max-calendar-height: 300px;
+
+  display: inline-block;
+  flex-direction: column;
+  max-height: inherit;
+
+  &:has(#{$root}-years) {
+    max-height: var(--max-calendar-height);
+  }
+
+  &-header {
+    @include motion.transition(background-color outline-color color border-radius);
+    @include utils.vertical-center-content();
+    @include typography.font-weight(normal);
+
+    background-color: var(--odx-c-background-content);
+    border-bottom: 1px solid var(--odx-input-control-outline-color);
+
+    .odx-action-group {
+      width: 100%;
+
+      @include dimensions.margin(0, top);
+      @include dimensions.margin(math.div(4, 24), bottom);
+    }
+
+    &__title {
+      flex: 1 1 auto;
+    }
+  }
+
+  &-cell {
+    @include dimensions.container(1.5);
+    @include motion.transition(background-color outline-color color border-radius);
+    @include utils.interactive(false);
+    @include utils.with-outline-bold();
+    @include typography.font-weight(normal);
+
+    border-radius: var(--odx-v-border-radius-controls);
+    cursor: pointer;
+    outline-color: transparent;
+    position: relative;
+    text-align: center;
+    vertical-align: middle;
+    z-index: 1;
+
+    &--adjacent,
+    &.is-disabled {
+      color: var(--odx-input-control-color-disabled);
+    }
+
+    &:focus {
+      &:disabled,
+      &.is-disabled {
+        outline-color: var(--odx-c-focus-outline-disabled);
+      }
+    }
+
+    &:hover:not(.is-in-any-range) {
+      background-color: var(--blue-700-10);
+    }
+
+    &--is-current,
+    &.is-selected:not(.is-in-any-range) {
+      @include typography.font-weight(medium);
+    }
+
+    &.is-selected:not(.is-in-any-range) {
+      background-color: var(--odx-c-focus);
+
+      &:hover {
+        background-color: var(--cyan-500-20);
+      }
+    }
+  }
+
+  &-month {
+    #{$root}__table {
+      border-collapse: separate;
+      border-spacing: dimensions.get-size(math.div(4, 24));
+
+      @include dimensions.margin-x(math.div(-4, 24));
+    }
+
+    #{$root}__weekdays {
+      @include typography.font-weight(semibold);
+      @include typography.font-size(-1);
+      @include utils.non-interactive();
+
+      text-align: center;
+
+      td {
+        @include dimensions.container(1.5);
+
+        vertical-align: middle;
+      }
+    }
+
+    #{$root}-cell {
+      border-radius: 0;
+
+      &--is-current::after {
+        @include dimensions.container(1);
+        @include dimensions.margin(0.25);
+
+        background-color: var(--blue-700-15);
+        border-radius: 50%;
+        content: '';
+        left: 0;
+        position: absolute;
+        top: 0;
+        z-index: -1;
+      }
+
+      &--is-in-range::before {
+        background-color: var(--odx-c-selected);
+        bottom: 0;
+        content: '';
+        left: 0;
+        position: absolute;
+        right: 0;
+        top: 0;
+        z-index: -1;
+      }
+
+      &--is-range-start {
+        @include typography.font-weight(medium);
+
+        &::before {
+          border-bottom-left-radius: var(--odx-v-border-radius-controls);
+          border-top-left-radius: var(--odx-v-border-radius-controls);
+        }
+      }
+
+      &--is-range-end {
+        @include typography.font-weight(medium);
+
+        &::before {
+          border-bottom-right-radius: var(--odx-v-border-radius-controls);
+          border-top-right-radius: var(--odx-v-border-radius-controls);
+        }
+      }
+
+      &--is-in-range:not(&--is-range-end) {
+        box-shadow: 4px 0 0 0 var(--odx-c-selected);
+      }
+
+      &--is-in-preview-range::before {
+        background-color: var(--cyan-500-5);
+        bottom: 0;
+        content: '';
+        left: 0;
+        position: absolute;
+        right: 0;
+        top: 0;
+        z-index: -1;
+      }
+
+      &--is-preview-range-start {
+        @include typography.font-weight(medium);
+
+        &::before {
+          background-color: var(--odx-c-selected);
+          border-bottom-left-radius: var(--odx-v-border-radius-controls);
+          border-top-left-radius: var(--odx-v-border-radius-controls);
+        }
+      }
+
+      &--is-preview-range-end {
+        @include typography.font-weight(medium);
+
+        &::before {
+          background-color: var(--odx-c-selected);
+          border-bottom-right-radius: var(--odx-v-border-radius-controls);
+          border-top-right-radius: var(--odx-v-border-radius-controls);
+        }
+      }
+
+      &--is-in-preview-range:not(&--is-preview-range-end) {
+        box-shadow: 4px 0 0 0 var(--cyan-500-5);
+      }
+    }
+  }
+
+  &-year,
+  &-years {
+    #{$root}-cell {
+      &--is-current {
+        background-color: var(--blue-700-10);
+      }
+    }
+  }
+
+  &-year {
+    #{$root}__body {
+      display: inline-table;
+
+      @include dimensions.margin-y(1.75);
+    }
+
+    #{$root}__table {
+      @include dimensions.margin(1.42, bottom);
+    }
+
+    #{$root}__season {
+      display: grid;
+      grid-gap: 50px;
+      grid-template-columns: repeat(3, 1fr);
+      margin: 2px 0;
+
+      @include dimensions.padding-x(1.16);
+    }
+
+    #{$root}-cell {
+      @include dimensions.container(math.div(5, 3));
+    }
+  }
+
+  &-years {
+    #{$root}__table {
+      margin: 0 28px;
+    }
+
+    #{$root}__year-row {
+      display: grid;
+      grid-gap: 36px;
+      grid-template-columns: repeat(3, 1fr);
+      margin: 2px 0;
+    }
+
+    #{$root}-cell {
+      height: dimensions.get-size(math.div(5, 3));
+      width: dimensions.get-size(2);
+    }
+  }
+}