claritas-web-framework 5.0.0

package/scss/modules/_tabs.scss

@@ -0,0 +1,99 @@
+.tabs--wrapper {
+  margin-bottom: $spacer;
+
+  & .nav--tabs {
+    margin-bottom: 0;
+    z-index: 1;
+    position: relative;
+    overflow: unset;
+    flex-wrap: nowrap;
+
+    &:not(:empty) {
+      border-bottom: 1px solid rgba($black, 0.12);
+    }
+
+    & a,
+    & button {
+      border: 1px solid rgba($black, 0.12);
+      border-bottom-color: rgba($black, 0);
+      border-radius: $border-radius-medium $border-radius-medium 0 0;
+      margin-bottom: -1px;
+
+      &:not(:last-child) {
+        margin-right: calc($spacer * 0.125);
+      }
+
+      &[data-active="true"],
+      &.active {
+        background-color: $white;
+        border-color: rgba($black, 0.17);
+        border-bottom-color: rgba($black, 0);
+      }
+    }
+  }
+
+  & .tab--content {
+    @include make-card();
+
+    --#{$variable-prefix}border-radius: 0 0 #{$border-radius-medium} #{$border-radius-medium};
+
+    border-top-color: rgba($black, 0);
+    display: none !important;
+    padding: $spacer;
+
+    & > *:last-child {
+      margin-bottom: 0;
+    }
+
+    &[data-active="true"],
+    &.active {
+      display: flex !important;
+    }
+  }
+
+  &.card {
+    & .nav--tabs {
+      & a,
+      & button {
+        margin-right: 0;
+        border-width: 0 1px 0 0;
+        border-radius: 0;
+        margin-bottom: 0;
+
+        &:first-child {
+          border-top-left-radius: calc($border-radius-medium - 1px);
+        }
+
+        &:last-child {
+          border-top-right-radius: calc($border-radius-medium - 1px);
+        }
+
+        &::after {
+          content: "";
+          left: -1px;
+          bottom: 0;
+          right: -1px;
+          height: 2px;
+          background-color: $primary;
+          position: absolute;
+          display: none;
+        }
+
+        &[data-active="true"],
+        &.active {
+          border-color: rgba($black, 0.12);
+
+          &::after {
+            display: block;
+          }
+        }
+      }
+    }
+
+    & .tab--content {
+      border: 0 none;
+      padding: $spacer;
+      margin-bottom: 0;
+    }
+  }
+}

package/scss/modules/_tag.scss

@@ -0,0 +1,82 @@
+.tag {
+  --#{$variable-prefix}border-color: #{rgba($black, 0.2)};
+  --#{$variable-prefix}border-color-hover: #{rgba($black, 0.3)};
+  --#{$variable-prefix}border: 1px solid var(--#{$variable-prefix}border-color);
+  --#{$variable-prefix}border-radius: #{$border-radius-medium};
+  --#{$variable-prefix}color: #{$body-color};
+  --#{$variable-prefix}background-color: #{$light};
+  --#{$variable-prefix}background-color-hover: #{shade-color($light, 10%)};
+  --#{$variable-prefix}padding: calc((#{$spacer} * 0.25) - 1px) calc((#{$spacer} * 0.5) - 1px);
+
+  border: var(--#{$variable-prefix}border);
+  color: var(--#{$variable-prefix}color);
+  background-color: var(--#{$variable-prefix}background-color);
+  padding: var(--#{$variable-prefix}padding);
+  border-radius: var(--#{$variable-prefix}border-radius);
+  align-items: center;
+  display: inline-flex;
+  vertical-align: top;
+  justify-content: center;
+  text-align: center;
+  white-space: nowrap;
+  height: auto;
+  outline: 0;
+  text-decoration: none;
+  font-size: $font-size-small;
+
+  &.tag--rounded {
+    --#{$variable-prefix}border-radius: #{$border-radius-round};
+  }
+
+  &.tag--square {
+    --#{$variable-prefix}border-radius: 0;
+  }
+
+  &.tag--button {
+    cursor: pointer;
+
+    &:not(:disabled):not(.disabled):focus,
+    &:not(:disabled):not(.disabled):hover {
+      background-color: var(--#{$variable-prefix}background-color-hover);
+      border-color: var(--#{$variable-prefix}border-color-hover);
+    }
+  }
+
+  & > .close {
+    --padding: calc(#{$spacer} * 0.5);
+  }
+}
+
+.tags {
+  @include make-group-row();
+
+  & .tag {
+    &:empty {
+      align-self: stretch;
+    }
+  }
+
+  & .tags {
+    margin-bottom: 0;
+  }
+
+  &.tags--grouped {
+    @include make-grouped-row();
+  }
+}
+
+@each $key, $value in $colors {
+  .tag--#{$key} {
+    --#{$variable-prefix}color: #{tint-color($value, 85%)};
+    --#{$variable-prefix}background-color: #{$value};
+    --#{$variable-prefix}background-color-hover: #{shade-color($value, 10%)};
+  }
+}
+
+@each $key, $value in $theme-colors {
+  .tag--#{$key} {
+    --#{$variable-prefix}color: #{tint-color($value, 85%)};
+    --#{$variable-prefix}background-color: #{$value};
+    --#{$variable-prefix}background-color-hover: #{shade-color($value, 10%)};
+  }
+}

package/scss/modules/_tile.scss

@@ -0,0 +1,82 @@
+.tile {
+  --#{$variable-prefix}background-color: #{$white};
+  --#{$variable-prefix}border-color: #{rgba($black, 0.12)};
+  --#{$variable-prefix}border-left-color: var(--#{$variable-prefix}border-color);
+  --#{$variable-prefix}border: 1px solid var(--#{$variable-prefix}border-color);
+  --#{$variable-prefix}padding: calc(#{$spacer} * 0.5) #{$spacer};
+
+  margin-bottom: $spacer;
+  background-color: var(--#{$variable-prefix}background-color);
+  display: flex;
+  flex-direction: column;
+  border: var(--#{$variable-prefix}border);
+  border-left-width: 4px;
+  border-left-color: var(--#{$variable-prefix}border-left-color);
+  min-width: 0;
+  word-wrap: break-word;
+  width: 100%;
+  position: relative;
+
+  & .tile--header,
+  & .tile--footer {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    padding: var(--#{$variable-prefix}padding);
+
+    & > * {
+      margin-bottom: 0;
+    }
+  }
+
+  & .tile--header {
+    flex: 0 1 auto;
+    border-bottom: 1px solid var(--#{$variable-prefix}border-color);
+  }
+
+  & .tile--footer {
+    margin-top: auto;
+    flex: 0 0 auto;
+    border-top: 1px solid var(--#{$variable-prefix}border-color);
+  }
+
+  & .tile--body {
+    flex: 0 0 auto;
+    width: 100%;
+    padding: var(--#{$variable-prefix}padding);
+
+    & > *:last-child:not(.grid--form) {
+      margin-bottom: 0;
+    }
+  }
+
+  & .tile--image {
+    flex: 1 0 100%;
+    overflow: hidden;
+
+    & img {
+      width: 100%;
+      height: auto;
+    }
+  }
+}
+
+.tiles {
+  @include make-group-column();
+
+  &.tiles--grouped {
+    @include make-grouped-column();
+  }
+}
+
+@each $key, $value in $colors {
+  .tile--#{$key} {
+    --#{$variable-prefix}border-left-color: #{$value};
+  }
+}
+
+@each $key, $value in $theme-colors {
+  .tile--#{$key} {
+    --#{$variable-prefix}border-left-color: #{$value};
+  }
+}

package/scss/modules/_tooltip.scss

@@ -0,0 +1,127 @@
+[data-tooltip] {
+  position: relative;
+  cursor: help;
+
+  &::after,
+  &::before {
+    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
+    transform: translate3d(0, 0, 0);
+    position: absolute;
+    visibility: hidden;
+    opacity: 0;
+    pointer-events: none;
+    z-index: $zindex-tooltip;
+    color: $white;
+    text-align: center;
+    font-size: $font-size-small;
+    line-height: normal;
+    font-weight: 400;
+  }
+
+  &::before {
+    content: "";
+    border-top: 6px solid rgba($black, 0.75);
+    border-right: 6px solid rgba($black, 0);
+    border-bottom: 0 none;
+    border-left: 6px solid rgba($black, 0);
+    top: -6px;
+    right: auto;
+    bottom: auto;
+    left: 50%;
+    margin: 0 0 0 -6px;
+  }
+
+  &::after {
+    background-color: rgba($black, 0.75);
+    content: attr(data-tooltip);
+    width: auto;
+    min-width: calc($spacer * 6);
+    padding: 4px 8px;
+    border-radius: 3px;
+    top: auto;
+    right: auto;
+    bottom: 100%;
+    left: 50%;
+    transform: translateY(-6px) translateX(-50%);
+  }
+
+  &.tooltip--large {
+    &::after {
+      min-width: calc($spacer * 16);
+    }
+  }
+
+  &[data-placement="left"] {
+    &::before {
+      border-top: 6px solid rgba($black, 0);
+      border-right: 0 none;
+      border-bottom: 6px solid rgba($black, 0);
+      border-left: 6px solid rgba($black, 0.75);
+      top: 50%;
+      right: auto;
+      bottom: auto;
+      left: -6px;
+      margin: -6px 0 0;
+    }
+
+    &::after {
+      top: 50%;
+      right: 100%;
+      bottom: auto;
+      left: auto;
+      transform: translateY(-50%) translateX(-6px);
+    }
+  }
+
+  &[data-placement="right"] {
+    &::before {
+      border-top: 6px solid rgba($black, 0);
+      border-right: 6px solid rgba($black, 0.75);
+      border-bottom: 6px solid rgba($black, 0);
+      border-left: 0 none;
+      top: 50%;
+      right: -6px;
+      bottom: auto;
+      left: auto;
+      margin: -6px 0 0;
+    }
+
+    &::after {
+      top: 50%;
+      right: auto;
+      bottom: auto;
+      left: 100%;
+      transform: translateY(-50%) translateX(6px);
+    }
+  }
+
+  &[data-placement="bottom"] {
+    &::before {
+      border-top: 0 none;
+      border-right: 6px solid rgba($black, 0);
+      border-bottom: 6px solid rgba($black, 0.75);
+      border-left: 6px solid rgba($black, 0);
+      top: auto;
+      right: auto;
+      bottom: -6px;
+      left: 50%;
+      margin: 0 0 0 -6px;
+    }
+
+    &::after {
+      top: 100%;
+      right: auto;
+      bottom: auto;
+      left: 50%;
+      transform: translateY(6px) translateX(-50%);
+    }
+  }
+
+  &:hover {
+    &::after,
+    &::before {
+      visibility: visible;
+      opacity: 1;
+    }
+  }
+}

package/scss/modules/form/_checkbox.scss

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

package/scss/modules/form/_file.scss

@@ -0,0 +1,109 @@
+
+.form--control-file {
+  --#{$variable-prefix}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) {
+      --#{$variable-prefix}border-color: #{$gray-3};
+      --#{$variable-prefix}border-color-hover: #{shade-color($gray-3, 25%)};
+
+      border-right: 1px solid var(--#{$variable-prefix}border-color);
+      border-bottom: 1px solid var(--#{$variable-prefix}border-color);
+      border-left: 1px solid var(--#{$variable-prefix}border-color);
+      border-bottom-right-radius: $border-radius-medium;
+      border-bottom-left-radius: $border-radius-medium;
+      padding: var(--padding);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      text-align: center;
+    }
+
+    &:empty {
+      & ~ .form--label {
+        border-bottom-right-radius: $border-radius-medium;
+        border-bottom-left-radius: $border-radius-medium;
+      }
+    }
+  }
+
+  & ~ .form--label {
+    --#{$variable-prefix}border-color: #{$gray-3};
+    --#{$variable-prefix}border-color-hover: #{shade-color($gray-3, 25%)};
+
+    order: 2;
+    cursor: pointer;
+    width: 100%;
+    display: block;
+    position: relative;
+    margin-bottom: 0;
+    text-align: center;
+    padding: $spacer $spacer calc($spacer * 3);
+    border: 1px solid var(--#{$variable-prefix}border-color);
+    border-top-left-radius: $border-radius-medium;
+    border-top-right-radius: $border-radius-medium;
+    background-color: rgba($black, 0.05);
+
+    &::after {
+      content: "";
+      position: absolute;
+      width: calc($spacer * 2);
+      height: calc($spacer * 2);
+      top: auto;
+      left: 50%;
+      bottom: calc($spacer * 0.5);
+      transform: translateX(-50%);
+      margin: 0;
+      background-size: calc($spacer * 2) auto;
+      background-image: escape-svg($form-file-indicator);
+    }
+  }
+
+  &:hover {
+    & ~ .form--label {
+      border-color: var(--#{$variable-prefix}border-color-hover);
+
+      &::after {
+        background-image: escape-svg($form-file-indicator-hover);
+      }
+    }
+
+    & ~ .file--name {
+      &:not(:empty) {
+        border-color: var(--#{$variable-prefix}border-color-hover);
+      }
+    }
+  }
+
+  @each $key, $value in $theme-colors {
+    &.input--#{$key} {
+      & ~ .form--label {
+        --#{$variable-prefix}border-color: #{$value};
+        --#{$variable-prefix}border-color-hover: #{shade-color($value, 25%)};
+      }
+      & ~ .file--name {
+        &:not(:empty) {
+          --#{$variable-prefix}border-color: #{$value};
+          --#{$variable-prefix}border-color-hover: #{shade-color($value, 25%)};
+        }
+      }
+    }
+  }
+}

package/scss/modules/form/_formFieldGroup.scss

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

package/scss/modules/form/_output.scss

@@ -0,0 +1,5 @@
+output {
+  --#{$variable-prefix}background-color: #{rgba($black, 0.05)};
+
+  pointer-events: none;
+}