claritas-web-framework 6.4.26 → 7.0.0

package/styles/modules/dropdown.css

@@ -1,126 +0,0 @@
-.dropdown {
-  --color-caret: var(--body-color);
-  --padding-nav: calc(var(--spacer) * 0.5) 0;
-  --padding-nav-item: calc(var(--spacer) * 0.25) calc(var(--spacer) * 0.75);
-  --background-color-nav: var(--white);
-  --border-color-nav: var(--black-transparent-12);
-  --border-nav: 1px solid var(--border-color-nav);
-  --box-shadow-nav: var(--box-shadow-small);
-
-  display: inline-flex;
-  position: relative;
-  vertical-align: top;
-  z-index: var(--zindex-dropdown);
-
-  & .dropdown--trigger {
-    @include make-caret-down();
-
-    --padding: calc((var(--spacer) * 0.5) - 1.5px) calc(var(--spacer) * 2)
-      calc((var(--spacer) * 0.5) - 1.5px) var(--spacer);
-
-    &::after {
-      right: calc(var(--spacer) * 0.75);
-      border-top-color: var(--color-caret);
-    }
-
-    &[data-active="true"],
-    &:focus,
-    &:hover {
-      & ~ .nav {
-        display: flex;
-      }
-    }
-
-    &.dropdown--right {
-      & ~ .nav {
-        right: 0;
-        left: auto;
-      }
-    }
-
-    & ~ .nav {
-      display: none;
-      position: absolute;
-      flex-direction: column;
-      top: 100%;
-      left: 0;
-      padding: var(--padding-nav);
-      background-color: var(--background-color-nav);
-      border: var(--border-nav);
-      box-shadow: var(--box-shadow-nav);
-      border-radius: var(--border-radius);
-      align-items: stretch;
-      min-width: calc(var(--spacer) * 10);
-
-      & > * {
-        padding: var(--padding-nav-item);
-        white-space: nowrap;
-      }
-
-      & > hr,
-      & > .hr {
-        margin-bottom: calc(var(--spacer) * 0.5);
-        margin-top: calc(var(--spacer) * 0.5);
-        padding: 0;
-      }
-    }
-
-    @each $name
-      in (
-        white,
-        black,
-        light,
-        medium,
-        dark,
-        transparent,
-        primary,
-        primary-light,
-        primary-dark,
-        secondary,
-        secondary-light,
-        secondary-dark,
-        info,
-        info-light,
-        info-dark,
-        success,
-        success-light,
-        success-dark,
-        warning,
-        warning-light,
-        warning-dark,
-        danger,
-        danger-light,
-        danger-dark,
-        gray-1,
-        gray-2,
-        gray-3,
-        gray-4,
-        gray-5,
-        gray-6,
-        gray-7,
-        gray-8,
-        gray-9
-      )
-    {
-      &.button--$(name) {
-        &::after {
-          --color-caret: color-mod(var(--#{$name}) tint(75%));
-        }
-
-        &.is-light {
-          &::after {
-            --color-caret: color-mod(var(--#{$name}) shade(75%));
-          }
-        }
-      }
-    }
-  }
-
-  &[data-active="true"],
-  &:focus,
-  &:hover {
-    & > .nav {
-      display: flex;
-    }
-  }
-}

package/styles/modules/form/checkbox.css

@@ -1,99 +0,0 @@
-input[type="checkbox"] {
-  --height: calc(var(--spacer) * 1.5);
-  --width: calc(var(--spacer) * 1.5);
-
-  appearance: none;
-  font-size: var(--spacer);
-  height: var(--height);
-  width: var(--width);
-  min-width: var(--width);
-  display: inline-block;
-  vertical-align: text-bottom;
-  position: relative;
-  margin-right: calc(var(--spacer) * 0.5);
-
-  &::before {
-    content: "";
-    position: absolute;
-    margin: auto;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    top: 0;
-    overflow: hidden;
-  }
-
-  &:checked {
-    --background-color: var(--primary);
-    --border-color: var(--primary);
-
-    &::before {
-      border-right: 2px solid var(--white);
-      border-bottom: 2px solid var(--white);
-      height: 65%;
-      width: 32.5%;
-      transform: rotate(45deg) translateY(-15%) translateX(-15%);
-    }
-
-    &:disabled,
-    &.disabled,
-    &[aria-disabled="true"] {
-      --background-color: color-mod(var(--primary) a(40%));
-      --border-color: color-mod(var(--primary) a(80%));
-    }
-  }
-
-  &:indeterminate,
-  &[aria-checked="mixed"] {
-    &::before {
-      border: 2px solid var(--white);
-      height: 0;
-      width: 65%;
-    }
-  }
-
-  &.input--toggle {
-    --width: calc(var(--spacer) * 3);
-
-    border-radius: var(--border-radius-round);
-
-    &::before {
-      height: 0;
-      width: 0;
-      left: 0.25em;
-      right: auto;
-      border: 0.5em solid var(--transparent);
-      border-radius: var(--border-radius-round);
-      background: var(--border-color);
-      transition: transform 0.2s;
-    }
-
-    &:checked {
-      &::before {
-        transform: translateX(1.5em);
-        height: 0;
-        width: 0;
-        background: var(--white);
-      }
-    }
-  }
-
-  &.input--large {
-    --height: calc(var(--spacer) * 2);
-    --width: calc(var(--spacer) * 2);
-
-    &.input--toggle {
-      --width: calc(var(--spacer) * 4);
-
-      &::before {
-        border-width: 0.75em;
-      }
-
-      &:checked {
-        &::before {
-          transform: translateX(2em);
-        }
-      }
-    }
-  }
-}

package/styles/modules/form/file.css

@@ -1,119 +0,0 @@
-@svg-load upload url("upload.svg") {
-  fill: color-mod(var(--black-transparent-25) tint(0%));
-  stroke: none;
-}
-
-@svg-load uploadHover url("upload.svg") {
-  fill: color-mod(var(--black-transparent-50) tint(0%));
-  stroke: none;
-}
-
-.form--control-file {
-  --display: flex;
-
-  flex: 0 0 auto;
-  width: 100%;
-}
-
-input[type="file"] {
-  order: 1;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  opacity: 0;
-
-  & ~ .file--name {
-    order: 999;
-
-    &:not(:empty) {
-      --border-color: var(--gray-3);
-      --border-color-hover: color-mod(var(--gray-3) shade(25%));
-
-      border-right: 1px solid var(--border-color);
-      border-bottom: 1px solid var(--border-color);
-      border-left: 1px solid var(--border-color);
-      border-bottom-right-radius: var(--border-radius);
-      border-bottom-left-radius: var(--border-radius);
-      padding: var(--padding);
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      text-align: center;
-    }
-
-    &:empty {
-      & ~ .form--label {
-        border-bottom-right-radius: var(--border-radius);
-        border-bottom-left-radius: var(--border-radius);
-      }
-    }
-  }
-
-  & ~ .form--label {
-    --border-color: var(--gray-3);
-    --border-color-hover: color-mod(var(--gray-3) shade(25%));
-
-    order: 2;
-    cursor: pointer;
-    width: 100%;
-    display: block;
-    position: relative;
-    margin-bottom: 0;
-    text-align: center;
-    padding: var(--spacer) var(--spacer) calc(var(--spacer) * 3);
-    border: 1px solid var(--border-color);
-    border-top-left-radius: var(--border-radius);
-    border-top-right-radius: var(--border-radius);
-    background-color: var(--black-transparent-5);
-
-    &::after {
-      content: "";
-      position: absolute;
-      width: calc(var(--spacer) * 2);
-      height: calc(var(--spacer) * 2);
-      top: auto;
-      left: 50%;
-      bottom: calc(var(--spacer) * 0.5);
-      transform: translateX(-50%);
-      margin: 0;
-      background-size: calc(var(--spacer) * 2) auto;
-      background-image: svg-inline(upload);
-    }
-  }
-
-  &:hover {
-    & ~ .form--label {
-      border-color: var(--border-color-hover);
-
-      &::after {
-        background-image: svg-inline(uploadHover);
-      }
-    }
-
-    & ~ .file--name {
-      &:not(:empty) {
-        border-color: var(--border-color-hover);
-      }
-    }
-  }
-
-  @each $name in success, warning, danger {
-    &.input--$(name) {
-      & ~ .form--label {
-        --border-color: var(--#{$name});
-        --border-color-hover: color-mod(var(--#{$name}) shade(25%));
-      }
-
-      & ~ .file--name {
-        &:not(:empty) {
-          --border-color: var(--#{$name});
-          --border-color-hover: color-mod(var(--#{$name}) shade(25%));
-        }
-      }
-    }
-  }
-}

package/styles/modules/form/form-field-group.css

@@ -1,71 +0,0 @@
-.form--field-group {
-  display: flex;
-  justify-content: flex-start;
-  align-items: stretch;
-
-  & .form--control {
-    --display: flex;
-    --flex-direction: row;
-
-    &:not(:last-child) {
-      margin-right: -1px;
-    }
-
-    & button,
-    & input,
-    & textarea,
-    & output,
-    & select,
-    & progress,
-    & .form--span,
-    & .input--div {
-      border-radius: 0;
-    }
-
-    &:first-child {
-      & button,
-      & input,
-      & textarea,
-      & output,
-      & select,
-      & progress,
-      & .form--span,
-      & .form--div {
-        &:not(.button--square),
-        &:not(.input--square) {
-          border-bottom-left-radius: var(--border-radius);
-          border-top-left-radius: var(--border-radius);
-
-          &.button--rounded,
-          &.input--rounded {
-            border-bottom-left-radius: var(--border-radius-round);
-            border-top-left-radius: var(--border-radius-round);
-          }
-        }
-      }
-    }
-
-    &:last-child {
-      & button,
-      & input,
-      & textarea,
-      & output,
-      & select,
-      & progress,
-      & .form--span,
-      & .form--div {
-        &:not(.button--square),
-        &:not(.input--square) {
-          border-bottom-right-radius: var(--border-radius);
-          border-top-right-radius: var(--border-radius);
-
-          &.button--rounded,
-          &.input--rounded {
-            border-bottom-right-radius: var(--border-radius-round);
-            border-top-right-radius: var(--border-radius-round);
-          }
-        }
-      }
-    }
-  }
-}

package/styles/modules/form/output.css

@@ -1,5 +0,0 @@
-output {
-  --background-color: var(--black-transparent-5);
-
-  pointer-events: none;
-}

package/styles/modules/form/progress.css

@@ -1,57 +0,0 @@
-progress {
-  --background-color: var(--transparent);
-  --background-color-bar: var(--black-transparent-7);
-  --background-color-value: var(--primary);
-  --border-color-hover: var(--gray-3);
-  --padding: 0;
-
-  appearance: none;
-  border-radius: var(--border-radius-round);
-  height: var(--spacer);
-  overflow: hidden;
-  position: relative;
-
-  &::before {
-    content: attr(value);
-    content: attr(value) " / " attr(max);
-    position: absolute;
-    left: 0;
-    top: 50%;
-    width: auto;
-    height: auto;
-    line-height: 1;
-    color: var(--color);
-    padding: 0 calc(var(--spacer) * 0.5);
-    font-size: var(--font-size-small);
-    transform: translateY(-50%);
-  }
-
-  &::-webkit-progress-bar {
-    background-color: var(--background-color-bar);
-  }
-
-  &::-webkit-progress-value {
-    background-color: var(--background-color-value);
-    border-radius: var(--border-radius-round);
-  }
-
-  &::-moz-progress-bar {
-    background-color: var(--background-color-bar);
-  }
-
-  &::-moz-progress-bar {
-    background-color: var(--background-color-value);
-    border-radius: var(--border-radius-round);
-  }
-
-  @each $name in success, warning, danger {
-    &.input--$(name) {
-      --color: color-mod(var(--#{$name}) shade(75%));
-      --border-color: var(--gray-3);
-      --border-color-hover: var(--gray-3);
-      --background-color: var(--transparent);
-      --background-color-bar: var(--black-transparent-7);
-      --background-color-value: var(--#{$name});
-    }
-  }
-}

package/styles/modules/form/radio.css

@@ -1,49 +0,0 @@
-input[type="radio"] {
-  --height: calc(var(--spacer) * 1.5);
-  --width: calc(var(--spacer) * 1.5);
-
-  appearance: none;
-  height: var(--height);
-  width: var(--width);
-  min-width: var(--width);
-  display: inline-block;
-  vertical-align: text-bottom;
-  position: relative;
-  margin-right: calc(var(--spacer) * 0.5);
-  border-radius: var(--border-radius-round);
-
-  &::before {
-    content: "";
-    position: absolute;
-    margin: auto;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    top: 0;
-    overflow: hidden;
-  }
-
-  &::before {
-    height: 0;
-    width: 0;
-  }
-
-  &:checked {
-    &::before {
-      border: 5px solid var(--transparent);
-      border-radius: var(--border-radius-round);
-      background: var(--primary);
-    }
-
-    &:disabled,
-    &.disabled,
-    &[aria-disabled="true"] {
-      --background-color: var(--white);
-      --border-color: color-mod(var(--primary) a(40%));
-
-      &::before {
-        background: color-mod(var(--primary) a(40%));
-      }
-    }
-  }
-}

package/styles/modules/form/range.css

@@ -1,105 +0,0 @@
-@mixin make-track($focus: false, $disabled: false) {
-  --background: var(--background-color-track);
-
-  background: var(--background);
-  border-radius: var(--border-radius-round);
-  width: 100%;
-  height: calc(var(--spacer) * 0.5);
-  cursor: pointer;
-
-  @if $focus == true {
-    --background: var(--background-color-track);
-  }
-
-  @if $disabled == true {
-    --background: var(--background-color-disabled);
-  }
-}
-
-@mixin make-thumb($focus: false, $disabled: false) {
-  --box-shadow: var(--box-shadow);
-  --background: var(--primary);
-
-  margin-top: calc(var(--spacer) * -0.25);
-  width: var(--spacer);
-  height: var(--spacer);
-  background: var(--background);
-  border: 1px solid var(--black-transparent-12);
-  border-radius: var(--border-radius-round);
-  cursor: pointer;
-  box-shadow: var(--box-shadow);
-  appearance: none;
-
-  @if $focus == true {
-    --box-shadow: 0 0 0 1px var(--white),
-      0 0 0 calc(var(--spacer) * 0.25) color-mod(var(--primary) a(25%));
-  }
-
-  @if $disabled == true {
-    --background: var(--background-color-disabled-thumb);
-  }
-}
-
-input[type="range"] {
-  --border-color: var(--transparent);
-  --border-color-hover: var(--transparent);
-  --background-color: var(--transparent);
-  --background-color-track: var(--black-transparent-7);
-  --background-color-disabled-thumb: var(--gray-3);
-  --padding: 0;
-  --box-shadow: none;
-  --box-shadow-hover: none;
-
-  appearance: none;
-  margin: calc(var(--spacer) * 0.5) 0;
-
-  &::-moz-range-track {
-    @include make-track(false, false);
-  }
-
-  &::-webkit-slider-runnable-track {
-    @include make-track(false, false);
-  }
-
-  &::-moz-range-thumb {
-    @include make-thumb(false, false);
-  }
-
-  &::-webkit-slider-thumb {
-    @include make-thumb(false, false);
-  }
-
-  &:focus {
-    &::-webkit-slider-runnable-track {
-      @include make-track(true, false);
-    }
-
-    &::-moz-range-track {
-      @include make-track(true, false);
-    }
-
-    &::-webkit-slider-thumb {
-      @include make-thumb(true, false);
-    }
-  }
-
-  &:disabled,
-  &.disabled,
-  &[aria-disabled="true"] {
-    &::-webkit-slider-runnable-track {
-      @include make-track(false, true);
-    }
-
-    &::-moz-range-track {
-      @include make-track(false, true);
-    }
-
-    &::-moz-range-thumb {
-      @include make-thumb(false, true);
-    }
-
-    &::-webkit-slider-thumb {
-      @include make-thumb(false, true);
-    }
-  }
-}

package/styles/modules/form/select.css

@@ -1,25 +0,0 @@
-@svg-load chevronDown url("chevron-down.svg") {
-  fill: none;
-  stroke: color-mod(var(--body-color) a(100%));
-}
-
-select {
-  --padding: var(--padding-y) calc(var(--spacer) * 1.75) var(--padding-y) var(--padding-x);
-  padding-start: calc(var(--spacer) - 3px);
-  appearance: none;
-
-  &:not([multiple]) {
-    background-image: svg-inline(chevronDown);
-    background-repeat: no-repeat;
-    background-position: right calc(var(--spacer) * 0.5) center;
-    background-size: var(--spacer) auto;
-  }
-
-  &[multiple] {
-    --padding: 0;
-
-    & option {
-      padding: calc(var(--spacer) * 0.5) var(--spacer);
-    }
-  }
-}

package/styles/modules/form/text.css

@@ -1,19 +0,0 @@
-.input--text {
-  --border-color: var(--transparent);
-  --border-color-hover: var(--black-transparent-25);
-  --box-shadow: none;
-  --box-shadow-hover: none;
-  --border-radius: 0;
-  --padding-x: 0;
-
-  border-width: 0 0 1px 0;
-
-  @each $name in success, warning, danger {
-    &.input--$(name) {
-      --border-color: color-mod(var(--#{$name}) a(50%));
-      --border-color-hover: var(--#{$name});
-      --box-shadow: none;
-      --box-shadow-hover: none;
-    }
-  }
-}