claritas-web-framework 6.4.26 → 7.0.1

package/styles/modules/form.css

@@ -1,176 +0,0 @@
-::placeholder {
-  color: var(--gray-3);
-}
-
-.form--field {
-  margin-bottom: var(--spacer);
-
-  & .small,
-  & small {
-    color: var(--medium);
-    display: block;
-    margin-top: calc(var(--spacer) * 0.25);
-  }
-}
-
-input,
-textarea,
-output,
-select,
-progress,
-.form--span,
-.input--div,
-.input--editor {
-  --border-color: var(--black-transparent-20);
-  --border-color-hover: var(--black-transparent-30);
-  --border-radius: var(--border-radius-medium);
-
-  --box-shadow: inset 0 1px 2px var(--black-transparent-7);
-  --box-shadow-hover: 0 0 0 0.125em var(--black-transparent-17);
-
-  --padding-y: calc((var(--spacer) * 0.5) - 1.5px);
-  --padding-x: calc(var(--spacer) * 0.75);
-  --padding: var(--padding-y) var(--padding-x);
-
-  --color: var(--body-color);
-  --color-disabled: color-mod(var(--body-color) tint(25%));
-
-  --background-color: var(--white);
-  --background-color-disabled: var(--black-transparent-5);
-
-  background-color: var(--background-color);
-  border: 1px solid var(--border-color);
-  padding: var(--padding);
-  color: var(--color);
-  border-radius: var(--border-radius);
-  box-shadow: var(--box-shadow);
-  max-width: 100%;
-  width: 100%;
-  font-size: var(--font-size-base);
-
-  &:hover {
-    border-color: var(--border-color-hover);
-  }
-
-  &:active,
-  &:focus {
-    border-color: var(--border-color-hover);
-    box-shadow: var(--box-shadow-hover);
-    outline: 0;
-  }
-
-  &.input--rounded {
-    border-radius: var(--border-radius-round);
-  }
-
-  &.input--small {
-    font-size: var(--font-size-small);
-  }
-
-  &.input--large {
-    --padding: calc((var(--spacer) * 0.5) - 1px) calc(var(--spacer) * 1.25);
-    font-size: var(--font-size-5);
-  }
-
-  &:disabled,
-  &.disabled,
-  &[readonly],
-  &[aria-disabled="true"] {
-    --color: var(--color-disabled);
-    --background-color: var(--background-color-disabled);
-    --border-color-hover: var(--border-color);
-
-    opacity: 1;
-  }
-
-  &:disabled,
-  &.disabled,
-  &[aria-disabled="true"] {
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-
-  @each $name in success, warning, danger {
-    &.input--$(name) {
-      --border-color: var(--#{$name});
-      --border-color-hover: color-mod(var(--#{$name}) shade(25%));
-      --box-shadow-hover: 0 0 0 0.125em color-mod(var(--#{$name}) a(25%));
-    }
-  }
-}
-
-.form--label {
-  --display: block;
-  --padding: 0 0 calc(var(--spacer) * 0.25);
-  --margin: 0;
-  --font-weight: 500;
-  --text-transform: none;
-  --color: var(--body-color);
-
-  display: var(--display);
-  padding: var(--padding);
-  margin: var(--margin);
-  font-weight: var(--font-weight);
-  text-transform: var(--text-transform);
-  font-size: var(--font-size-base);
-  color: var(--color);
-
-  &::after {
-    position: relative;
-  }
-}
-
-.form--control {
-  --box-sizing: border-box;
-  --clear: both;
-  --position: relative;
-  --text-align: left;
-  --display: block;
-  --flex-direction: column;
-  --justify-content: flex-start;
-  --align-items: stretch;
-
-  box-sizing: var(--box-sizing);
-  clear: var(--clear);
-  position: var(--position);
-  text-align: var(--text-align);
-  display: var(--display);
-  flex-direction: var(--flex-direction);
-  justify-content: var(--justify-content);
-  align-items: var(--align-items);
-
-  &.form--control-checkbox,
-  &.form--control-radio,
-  &.form--control-toggle {
-    --display: flex;
-
-    &:not(.stacked) {
-      --flex-direction: row;
-      --align-items: center;
-
-      & .form--label {
-        --padding: 0;
-      }
-    }
-
-    &.stacked {
-      & .form--label {
-        order: -1;
-      }
-    }
-  }
-}
-
-.form--span {
-  --background-color: var(--light);
-
-  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;
-}

package/styles/modules/list.css

@@ -1,99 +0,0 @@
-@import "../mixins/modules/list.css";
-@import "../mixins/group.css";
-@import "../mixins/helpers/grid.css";
-
-@svg-load subdirectory url("subdirectory.svg") {
-  fill: color-mod(var(--black) a(25%));
-  stroke: none;
-}
-
-.list--unstyled {
-  @include make-list-unsyled();
-}
-
-.list--inline {
-  @include make-list-inline();
-}
-
-dl {
-  --margin-bottom: var(--spacer);
-
-  margin-bottom: var(--margin-bottom);
-
-  &.grid {
-    margin-left: calc(var(--grid-gutter) * -0.25) !important;
-    margin-right: calc(var(--grid-gutter) * -0.25) !important;
-
-    & > * {
-      padding-left: calc(var(--grid-gutter) * 0.25) !important;
-      padding-right: calc(var(--grid-gutter) * 0.25) !important;
-      margin-bottom: calc(var(--spacer) * 0.5);
-
-      &:last-of-type {
-        margin-bottom: 0;
-      }
-    }
-  }
-}
-
-.list--group {
-  @include make-list-unsyled();
-
-  & > li {
-    --border-color: var(--black-transparent-12);
-    --border: 1px solid var(--border-color);
-    --padding: calc((var(--spacer) * 0.625) - 1px) var(--spacer);
-
-    position: relative;
-    padding: var(--padding);
-    border: var(--border);
-    border-bottom-color: var(--transparent);
-
-    &:first-child {
-      border-top-left-radius: var(--border-radius);
-      border-top-right-radius: var(--border-radius);
-    }
-
-    &:last-child {
-      border-bottom: var(--border);
-      border-bottom-left-radius: var(--border-radius);
-      border-bottom-right-radius: var(--border-radius);
-    }
-  }
-}
-
-.list--nested {
-  @include make-list-unsyled();
-
-  & > li {
-    --background-color: var(--white);
-    --border-color: var(--black-transparent-12);
-    --border: 1px solid var(--border-color);
-    --padding: calc(calc(var(--spacer) * 0.625) - 1px) var(--spacer);
-
-    background-color: var(--background-color);
-    border-radius: var(--border-radius);
-    border: var(--border);
-    margin-bottom: var(--spacer);
-
-    & .list--item {
-      padding: var(--padding);
-    }
-
-    & .list--nested {
-      margin-bottom: 0;
-
-      & > li {
-        border-radius: 0;
-        border: 0 none;
-        margin-bottom: 0;
-        background-image: svg-inline(subdirectory);
-        background-size: var(--spacer) auto;
-        background-repeat: no-repeat;
-        background-position: left calc(var(--spacer) * 0.5) top var(--spacer);
-        padding-left: calc(var(--spacer) * 1.5);
-        border-top: 1px solid var(--border-color);
-      }
-    }
-  }
-}

package/styles/modules/loader.css

@@ -1,229 +0,0 @@
-.loader {
-  width: var(--spacer);
-  height: var(--spacer);
-  display: inline-block;
-  position: relative;
-  vertical-align: middle;
-
-  &.loader--ring {
-    & span {
-      box-sizing: border-box;
-      display: block;
-      position: absolute;
-      width: var(--spacer);
-      height: var(--spacer);
-      border: 2px solid var(--body-color);
-      border-radius: var(--border-radius-round);
-      animation: ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
-      border-color: var(--body-color) var(--transparent) var(--transparent)
-        var(--transparent);
-
-      &:nth-child(1) {
-        animation-delay: -0.45s;
-      }
-
-      &:nth-child(2) {
-        animation-delay: -0.3s;
-      }
-
-      &:nth-child(3) {
-        animation-delay: -0.15s;
-      }
-    }
-  }
-
-  &.loader--ellipsis {
-    width: calc(var(--spacer) * 2.5);
-    height: var(--spacer);
-
-    & span {
-      position: absolute;
-      top: calc(var(--spacer) * 0.25);
-      width: calc(var(--spacer) * 0.5);
-      height: calc(var(--spacer) * 0.5);
-      border-radius: var(--border-radius-round);
-      background: var(--body-color);
-      animation-timing-function: cubic-bezier(0, 1, 1, 0);
-
-      &:nth-child(1) {
-        left: calc(var(--spacer) * 0.25);
-        animation: ellipsis1 0.6s infinite;
-      }
-
-      &:nth-child(2) {
-        left: calc(var(--spacer) * 0.25);
-        animation: ellipsis2 0.6s infinite;
-      }
-
-      &:nth-child(3) {
-        left: var(--spacer);
-        animation: ellipsis2 0.6s infinite;
-      }
-
-      &:nth-child(4) {
-        left: calc(var(--spacer) * 1.75);
-        animation: ellipsis3 0.6s infinite;
-      }
-    }
-  }
-
-  &.loader--large {
-    width: calc(var(--spacer) * 2);
-    height: calc(var(--spacer) * 2);
-
-    &.loader--ring {
-      & span {
-        width: calc(var(--spacer) * 2);
-        height: calc(var(--spacer) * 2);
-        border-width: 4px;
-      }
-    }
-
-    &.loader--ellipsis {
-      width: calc(var(--spacer) * 2.5);
-      height: var(--spacer);
-
-      & span {
-        &:nth-child(1) {
-          left: calc(var(--spacer) * 0.25);
-        }
-
-        &:nth-child(2) {
-          left: calc(var(--spacer) * 0.25);
-        }
-
-        &:nth-child(3) {
-          left: var(--spacer);
-        }
-
-        &:nth-child(4) {
-          left: calc(var(--spacer) * 1.75);
-        }
-      }
-    }
-  }
-
-  &.loader--small {
-    &.loader--ellipsis {
-      & span {
-        width: calc(var(--spacer) * 0.25);
-        height: calc(var(--spacer) * 0.25);
-
-        &:nth-child(1) {
-          left: calc(var(--spacer) * 0.125);
-        }
-
-        &:nth-child(2) {
-          left: calc(var(--spacer) * 0.125);
-          animation: ellipsis2-small 0.6s infinite;
-        }
-
-        &:nth-child(3) {
-          left: calc(var(--spacer) * 0.5);
-          animation: ellipsis2-small 0.6s infinite;
-        }
-
-        &:nth-child(4) {
-          left: calc(var(--spacer) * 0.875);
-        }
-      }
-    }
-  }
-
-  @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
-    )
-  {
-    &.loader--$(name) {
-      &.loader--ring {
-        & span {
-          border-color: var(--#{$name})
-            var(--transparent)
-            var(--transparent)
-            var(--transparent);
-        }
-      }
-
-      &.loader--ellipsis {
-        & span {
-          background: var(--#{$name});
-        }
-      }
-    }
-  }
-}
-
-@keyframes ring {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes ellipsis1 {
-  0% {
-    transform: scale(0);
-  }
-  100% {
-    transform: scale(1);
-  }
-}
-@keyframes ellipsis2 {
-  0% {
-    transform: translate(0, 0);
-  }
-  100% {
-    transform: translate(calc(var(--spacer) * 0.75), 0);
-  }
-}
-@keyframes ellipsis3 {
-  0% {
-    transform: scale(1);
-  }
-  100% {
-    transform: scale(0);
-  }
-}
-@keyframes ellipsis2-small {
-  0% {
-    transform: translate(0, 0);
-  }
-  100% {
-    transform: translate(calc(var(--spacer) * 0.375), 0);
-  }
-}

package/styles/modules/nav.css

@@ -1,99 +0,0 @@
-.nav {
-  --padding-item: calc(var(--spacer) * 0.5) calc(var(--spacer) * 0.75);
-  --color: var(--body-color);
-  --color-hover: color-mod(var(--body-color) shade(25%));
-  --color-active: color-mod(var(--body-color) shade(25%));
-  --color-disabled: color-mod(var(--body-color) a(50%));
-  --background-color: var(--transparent);
-  --background-color-hover: var(--black-transparent-5);
-  --background-color-active: var(--black-transparent-5);
-
-  display: flex;
-  flex-wrap: wrap;
-  list-style: none;
-  margin: 0 0 var(--spacer);
-  padding: 0;
-  align-items: center;
-
-  & li {
-    margin: 0;
-    padding: 0;
-
-    & ul {
-      border-left: 1px solid var(--black-transparent-5);
-      margin: calc(var(--spacer) * 0.75);
-      padding-left: calc(var(--spacer) * 0.75);
-      list-style: none;
-    }
-  }
-
-  & .nav--label {
-    color: var(--medium);
-    font-size: var(--font-size-small);
-    text-transform: uppercase;
-    display: block;
-    padding: var(--padding-item);
-    font-weight: 500;
-  }
-
-  & .nav--title {
-    display: block;
-    padding: var(--padding-item);
-    font-weight: bolder;
-  }
-
-  &.flex-direction--column {
-    align-items: stretch;
-    flex-wrap: nowrap;
-
-    & > * {
-      flex-shrink: 0;
-    }
-
-    & .nav--label {
-      &:not(:first-child) {
-        margin-top: calc(var(--spacer) * 0.5);
-      }
-    }
-  }
-
-  & a,
-  & button {
-    display: block;
-    border-radius: 0;
-    text-align: left;
-    padding: var(--padding-item);
-    cursor: pointer;
-    color: var(--color);
-    white-space: nowrap;
-    position: relative;
-    background-color: var(--background-color);
-
-    &:disabled {
-      color: var(--color-disabled);
-      cursor: not-allowed;
-    }
-
-    &:hover {
-      text-decoration: none;
-
-      &:not(:disabled) {
-        background-color: var(--background-color-hover);
-        color: var(--color-hover);
-      }
-    }
-
-    &:active,
-    &:focus,
-    &:hover {
-      outline: 0;
-    }
-
-    &[data-active="true"],
-    &.active,
-    &:active {
-      background-color: var(--background-color-active);
-      color: var(--color-active);
-    }
-  }
-}

package/styles/modules/pill.css

@@ -1,72 +0,0 @@
-@import "../mixins/group.css";
-@import "../mixins/modules/pill.css";
-
-.pill {
-  @include make-pill();
-
-  @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
-    )
-  {
-    &.pill--$(name) {
-      --background-color: var(--#{$name});
-      --color: color-mod(var(--#{$name}) shade(65%));
-      --background-color-hover: color-mod(var(--#{$name}) shade(10%));
-
-      &.is-dark {
-        --color: color-mod(var(--#{$name}) tint(85%));
-      }
-    }
-  }
-}
-
-.pills {
-  @include make-group-row();
-
-  & .pill {
-    &:empty {
-      align-self: stretch;
-    }
-  }
-
-  & .pills {
-    margin-bottom: 0;
-  }
-
-  &.pills--grouped {
-    @include make-grouped-row();
-  }
-}

package/styles/modules/table.css

@@ -1,21 +0,0 @@
-@import "../mixins/modules/table.css";
-
-.table {
-  @include make-table();
-
-  &.table--bordered {
-    @include make-tableBordered();
-  }
-
-  &.table--striped {
-    @include make-tableStriped();
-  }
-
-  &.table--small {
-    @include make-tableSmall();
-  }
-
-  &.table--hover {
-    @include make-tableHover();
-  }
-}