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

package/scss/components/content-box/content-box.component.scss

@@ -1,50 +0,0 @@
-@use '../../modules/breakpoints' as br;
-@use '../../modules/vertical-rythm' as vr;
-
-.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 vr.padding(1, ('top', 'right', 'left'));
-    @include br.down(phone) {
-      @include vr.padding(0.5, ('top', 'right', 'left'));
-    }
-  }
-
-  &__footer {
-    @include vr.padding(1, ('right', 'bottom', 'left'));
-    @include br.down(phone) {
-      @include vr.padding(0.5, ('right', 'bottom', 'left'));
-    }
-  }
-
-  &__content {
-    @include vr.padding(1);
-    @include br.down(phone) {
-      @include vr.padding(0.5);
-    }
-  }
-
-  .odx-area-header ~ &__content {
-    padding-top: 0;
-  }
-
-  .odx-area-header {
-    @include vr.padding(1, ('top', 'bottom'));
-    @include br.down(phone) {
-      @include vr.padding(0.5, ('top', 'bottom'));
-    }
-  }
-}

package/scss/components/header/header.component.scss

@@ -1,39 +0,0 @@
-@use 'sass:math';
-@use '../../base/mixins' as mx;
-@use '../../modules/vertical-rythm' as vr;
-@use '../../modules/typography' as t;
-
-.odx-header {
-  @include vr.padding(math.div(20, 24), 'left');
-  @include vr.padding(0.5, 'right');
-  @include vr.height(2);
-  @include mx.vertical-center-content();
-
-  background-color: var(--odx-c-background-content);
-
-  .odx-main-menu-button {
-    margin-left: vr.get-size(-1 * math.div(1, 3));
-    margin-right: vr.get-size(0.5);
-  }
-
-  &__title,
-  .odx-logo {
-    margin-right: auto;
-  }
-
-  &__title {
-    @extend .odx-title;
-    @extend .odx-title--6;
-    @include t.prevent-text-overflow();
-  }
-
-  .odx-action-group:not(:last-child) {
-    border-right: 1px solid var(--odx-c-seperator);
-    margin-right: vr.get-size(0.5);
-    padding-right: vr.get-size(0.5);
-  }
-
-  &__title ~ .odx-logo {
-    display: none;
-  }
-}

package/scss/components/icon/icon.component.scss

@@ -1,38 +0,0 @@
-@use 'sass:math';
-@use '../../modules/vertical-rythm' as vr;
-
-$icon-sizes: (small math.div(2, 3) 1, large math.div(4, 3) 2);
-
-.odx-icon {
-  @include vr.container(1);
-
-  direction: ltr;
-  display: inline-block;
-  font-feature-settings: 'liga';
-  font-size: vr.get-size(1);
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  font-style: normal;
-  font-weight: normal;
-  letter-spacing: normal;
-  line-height: 1;
-  overflow: hidden;
-  position: relative;
-  text-rendering: auto;
-  text-transform: none;
-  white-space: nowrap;
-
-  @each $size, $size_factor, $factor in $icon-sizes {
-    &.odx-icon--#{$size} {
-      @include vr.container($factor, $size_factor);
-
-      font-size: vr.get-size($size_factor);
-    }
-  }
-
-  &.odx-icon--inline {
-    font-size: inherit;
-    height: auto;
-    width: auto;
-  }
-}

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

@@ -1,7 +0,0 @@
-@use '../../button/button.component';
-
-.odx-main-menu-button {
-  @extend .odx-button--ghost;
-
-  color: var(--odx-c-control-text);
-}

package/scss/components/radio-group/_radio-group.component.scss

@@ -1,145 +0,0 @@
-@use 'sass:math';
-@use '../../modules/vertical-rythm' as vr;
-@use '../../modules/typography' as t;
-@use '../../base/mixins' as mx;
-
-:root {
-  --odx-radio-button-color: var(--odx-c-highlight-text);
-  --odx-radio-button-color-disabled: var(--odx-c-control-text-disabled);
-
-  --odx-radio-button-background-color: var(--odx-c-control);
-  --odx-radio-button-background-color-active: var(--odx-c-highlight);
-  --odx-radio-button-background-color-disabled: var(--odx-c-control-disabled);
-  --odx-radio-button-background-color-readonly: var(--white);
-
-  --odx-radio-button-border-color: var(--odx-c-control-disabled);
-  --odx-radio-button-border-color-active: var(--odx-c-highlight);
-  --odx-radio-button-border-color-hover: var(--odx-c-control-hover);
-  --odx-radio-button-border-color-readonly: var(--odx-c-control-disabled);
-
-  --odx-radio-button-label-color: var(--odx-c-text);
-  --odx-radio-button-label-color-disabled: var(--odx-c-text-disabled);
-}
-
-.odx-radio-group {
-  @include vr.padding-y(0.5);
-
-  display: block;
-
-  &--horizontal {
-    column-gap: vr.get-size(0.5);
-    display: flex;
-    flex-wrap: wrap;
-  }
-}
-
-.odx-radio-button {
-  $root: &;
-
-  color: var(--odx-radio-button-label-color);
-  display: block;
-
-  &.is-disabled,
-  &.is-readonly {
-    @include mx.non-interactive();
-  }
-
-  &.is-disabled {
-    color: var(--odx-radio-button-label-color-disabled);
-  }
-
-  &__label {
-    @include mx.interactive($focus-within: true);
-    @include vr.line-height(1);
-    @include mx.transition(background-color color outline);
-    @include t.font-size(0);
-
-    border-radius: var(--odx-v-border-radius-controls);
-    border-radius: vr.get-size(0.5);
-    border-bottom-right-radius: var(--odx-v-border-radius-controls);
-    border-top-right-radius: var(--odx-v-border-radius-controls);
-    color: inherit;
-    cursor: pointer;
-    display: inline-flex;
-    min-height: vr.get-size(1);
-    padding: 0 2px;
-    vertical-align: top;
-  }
-
-  &__input {
-    @include mx.visually-hidden();
-  }
-
-  &__indicator {
-    @include vr.container(1, math.div(20, 24));
-    @include mx.transition(background-color border-color);
-    @include mx.center-content();
-
-    background-color: var(--odx-radio-button-background-color);
-    border: 1px solid var(--odx-radio-button-border-color);
-    border-radius: 50%;
-    box-sizing: border-box;
-    color: var(--odx-radio-button-color);
-    flex: 0 0 auto;
-
-    &::before {
-      @include mx.transition(transform);
-      @include vr.container(math.div(4, 24));
-
-      background-color: currentcolor;
-      border-radius: 50%;
-      content: '';
-      transform: scale(0);
-    }
-
-    #{$root}:hover & {
-      border-color: var(--odx-radio-button-border-color-hover);
-    }
-
-    #{$root}__input:checked ~ & {
-      background-color: var(--odx-radio-button-background-color-active);
-      border-color: var(--odx-radio-button-border-color-active);
-    }
-
-    #{$root}.has-error & {
-      background-color: var(--odx-c-error);
-      border-color: var(--odx-c-error-outline);
-      color: var(--odx-c-error-text);
-    }
-
-    #{$root}.has-error:hover & {
-      border-color: var(--odx-c-error-outline-hover);
-    }
-
-    #{$root}.is-disabled & {
-      background-color: var(--odx-radio-button-background-color-disabled);
-      border-color: transparent;
-      color: var(--odx-radio-button-color-disabled);
-    }
-
-    #{$root}.is-readonly & {
-      background-color: var(--odx-radio-button-background-color-readonly);
-      border-color: var(--odx-radio-button-border-color-readonly);
-      color: inherit;
-    }
-  }
-
-  &__content {
-    @include vr.margin(0.5, left);
-
-    padding-left: 2px;
-
-    &:empty {
-      margin: 0;
-      padding: 0;
-    }
-  }
-
-  &__input:checked ~ .odx-radio-button__indicator::before {
-    transform: scale(1);
-  }
-
-  &--no-label .odx-radio-button__label {
-    border-radius: vr.get-size(0.5);
-  }
-}

package/scss/modules/_typography.scss

@@ -1,161 +0,0 @@
-/* stylelint-disable block-closing-brace-newline-after */
-@use 'sass:math';
-@use 'breakpoints' as br;
-@use 'vertical-rythm' as vr;
-@use '../base/utils' as utils;
-
-$base-size: 16px;
-$base-line-height: 1.5;
-
-@mixin font-size($size: 1) {
-  @if math.round($size) != $size {
-    @error '$size must me an integer';
-  }
-
-  @if $size < 0 {
-    font-size: calc(var(--odx-t-base-size) * utils.css-pow(var(--odx-t-negative-font-scaling-factor), $size));
-  } @else {
-    font-size: calc(var(--odx-t-base-size) * utils.css-pow(var(--odx-t-positive-font-scaling-factor), $size));
-  }
-}
-
-@mixin prevent-text-overflow() {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-:root {
-  --odx-t-base-size: #{$base-size};
-  --odx-t-base-line-height: #{$base-line-height};
-  --odx-t-font-weight-normal: normal;
-  --odx-t-font-weight-medium: 500;
-  --odx-t-font-weight-bold: bold;
-  --odx-t-positive-font-scaling-factor: 1.125;
-  --odx-t-negative-font-scaling-factor: 1.2;
-
-  @include br.up(tablet) {
-    --odx-t-positive-font-scaling-factor: 1.25;
-  }
-}
-
-@font-face {
-  font-family: Pangea;
-  font-style: normal;
-  font-weight: normal;
-  src: url('../assets/fonts/PangeaText-RegularWeb.woff2') format('woff2');
-}
-
-@font-face {
-  font-family: Pangea;
-  font-style: normal;
-  font-weight: 500;
-  src: url('../assets/fonts/PangeaText-MediumWeb.woff2') format('woff2');
-}
-
-@font-face {
-  font-family: Pangea;
-  font-style: normal;
-  font-weight: bold;
-  src: url('../assets/fonts/PangeaText-SemiBoldWeb.woff2') format('woff2');
-}
-
-html body {
-  @include font-size(0);
-  @include vr.line-height(1);
-
-  color: var(--odx-c-text);
-  font-family: Pangea, sans-serif;
-  font-weight: var(--odx-t-font-weight-normal);
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-.odx-title,
-.odx-subtitle {
-  color: var(--odx-c-headline);
-  font-weight: var(--odx-t-font-weight-bold);
-}
-
-.odx-subtitle {
-  font-weight: var(--odx-t-font-weight-normal);
-}
-
-h1,
-.odx-title--1 {
-  @include font-size(5);
-  @include vr.line-height(2, math.div(40, 24));
-
-  @include br.up(tablet) {
-    @include vr.line-height(3, math.div(64, 24));
-  }
-}
-
-h2,
-.odx-title--2 {
-  @include font-size(4);
-  @include vr.line-height(2, 1.5);
-
-  @include br.up(tablet) {
-    @include vr.line-height(3, math.div(54, 24));
-  }
-}
-
-h3,
-.odx-title--3 {
-  @include font-size(3);
-  @include vr.line-height(2, math.div(32, 24));
-
-  @include br.up(tablet) {
-    @include vr.line-height(2, math.div(42, 24));
-  }
-}
-
-h4,
-.odx-title--4 {
-  @include font-size(2);
-  @include vr.line-height(2, math.div(30, 24));
-}
-
-h5,
-.odx-title--5 {
-  @include font-size(1);
-  @include vr.line-height(1);
-}
-
-h6,
-.odx-title--6 {
-  @include font-size(0);
-  @include vr.line-height(1);
-}
-
-p,
-.odx-text {
-  @include vr.line-height(1);
-
-  font-weight: var(--odx-t-font-weight-normal);
-
-  &--small {
-    @include font-size(-1);
-    @include vr.line-height(1, math.div(20, 24));
-  }
-
-  &--xsmall {
-    @include font-size(-2);
-    @include vr.line-height(1, math.div(16, 24));
-  }
-}
-
-.odx-fs-normal {
-  font-weight: var(--odx-t-font-weight-normal);
-}
-
-b,
-strong,
-.odx-fs-bold {
-  font-weight: var(--odx-t-font-weight-bold);
-}