claritas-web-framework 6.4.25 → 7.0.0

package/styles/modules/tabs.css

@@ -1,101 +0,0 @@
-@import "../mixins/modules/card.css";
-
-.tabs--wrapper {
-  margin-bottom: var(--spacer);
-
-  & .nav--tabs {
-    margin-bottom: 0;
-    z-index: 1;
-    position: relative;
-    overflow: unset;
-    flex-wrap: nowrap;
-
-    &:not(:empty) {
-      border-bottom: 1px solid var(--black-transparent-12);
-    }
-
-    & a,
-    & button {
-      border: 1px solid var(--black-transparent-12);
-      border-bottom-color: var(--transparent);
-      border-radius: var(--border-radius) var(--border-radius) 0 0;
-      margin-bottom: -1px;
-
-      &:not(:last-child) {
-        margin-right: calc(var(--spacer) * 0.125);
-      }
-
-      &[data-active="true"],
-      &.active {
-        background-color: var(--white);
-        border-color: var(--black-transparent-17);
-        border-bottom-color: var(--transparent);
-      }
-    }
-  }
-
-  & .tab--content {
-    @include make-card();
-
-    --border-radius: 0 0 var(--border-radius-medium) var(--border-radius-medium);
-
-    border-top-color: var(--transparent);
-    display: none !important;
-    padding: var(--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(var(--border-radius) - 1px);
-        }
-
-        &:last-child {
-          border-top-right-radius: calc(var(--border-radius) - 1px);
-        }
-
-        &::after {
-          content: "";
-          left: -1px;
-          bottom: 0;
-          right: -1px;
-          height: 2px;
-          background-color: var(--primary);
-          position: absolute;
-          display: none;
-        }
-
-        &[data-active="true"],
-        &.active {
-          border-color: var(--black-transparent-12);
-
-          &::after {
-            display: block;
-          }
-        }
-      }
-    }
-
-    & .tab--content {
-      border: 0 none;
-      padding: var(--spacer);
-      margin-bottom: 0;
-    }
-  }
-}

package/styles/modules/tag.css

@@ -1,118 +0,0 @@
-@import "../mixins/group.css";
-@import "./../mixins/modules/close.css";
-
-.tag {
-  --border-color: var(--black-transparent-20);
-  --border-color-hover: var(--black-transparent-30);
-  --border: 1px solid var(--border-color);
-  --border-radius: var(--border-radius-medium);
-  --color: var(--body-color);
-  --background-color: var(--light);
-  --background-color-hover: color-mod(var(--light) shade(10%));
-  --padding: calc((var(--spacer) * 0.25) - 1px)
-    calc((var(--spacer) * 0.5) - 1px);
-
-  border: var(--border);
-  color: var(--color);
-  background-color: var(--background-color);
-  padding: var(--padding);
-  border-radius: var(--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: var(--font-size-small);
-
-  &.tag--rounded {
-    --border-radius: var(--border-radius-round);
-  }
-
-  &.tag--square {
-    --border-radius: 0;
-  }
-
-  &.tag--button {
-    cursor: pointer;
-
-    &:not(:disabled):not(.disabled):focus,
-    &:not(:disabled):not(.disabled):hover {
-      background-color: var(--background-color-hover);
-      border-color: var(--border-color-hover);
-    }
-  }
-
-  & > .close {
-    --padding: calc(var(--spacer) * 0.5);
-  }
-
-  @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
-    )
-  {
-    &.tag--$(name) {
-      --background-color: var(--#{$name});
-      --color: color-mod(var(--#{$name}) shade(85%));
-      --background-color-hover: color-mod(var(--#{$name}) shade(10%));
-
-      &.is-dark {
-        --color: color-mod(var(--#{$name}) tint(75%));
-      }
-    }
-  }
-}
-
-.tags {
-  @include make-group-row();
-
-  & .tag {
-    &:empty {
-      align-self: stretch;
-    }
-  }
-
-  & .tags {
-    margin-bottom: 0;
-  }
-
-  &.tags--grouped {
-    @include make-grouped-row();
-  }
-}

package/styles/modules/tile.css

@@ -1,114 +0,0 @@
-@import "../mixins/group.css";
-
-.tile {
-  --background-color: var(--white);
-  --border-color: var(--black-transparent-12);
-  --border-left-color: var(--border-color);
-  --border: 1px solid var(--border-color);
-  --padding: calc(var(--spacer) * 0.5) var(--spacer);
-
-  margin-bottom: var(--spacer);
-  background-color: var(--background-color);
-  display: flex;
-  flex-direction: column;
-  border: var(--border);
-  border-left-width: 4px;
-  border-left-color: var(--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(--padding);
-
-    & > * {
-      margin-bottom: 0;
-    }
-  }
-
-  & .tile--header {
-    flex: 0 1 auto;
-    border-bottom: 1px solid var(--border-color);
-  }
-
-  & .tile--footer {
-    margin-top: auto;
-    flex: 0 0 auto;
-    border-top: 1px solid var(--border-color);
-  }
-
-  & .tile--body {
-    flex: 0 0 auto;
-    width: 100%;
-    padding: var(--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 $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
-  )
-{
-  .tile--$(name) {
-    --border-left-color: var(--#{$name});
-  }
-}

package/styles/modules.css

@@ -1,26 +0,0 @@
-@import "./modules/alert.css";
-@import "./modules/breadcrumbs.css";
-@import "./modules/button.css";
-@import "./modules/card.css";
-@import "./modules/close.css";
-@import "./modules/details.css";
-@import "./modules/dialog.css";
-@import "./modules/dropdown.css";
-@import "./modules/form.css";
-@import "./modules/form/form-field-group.css";
-@import "./modules/form/checkbox.css";
-@import "./modules/form/file.css";
-@import "./modules/form/output.css";
-@import "./modules/form/progress.css";
-@import "./modules/form/radio.css";
-@import "./modules/form/range.css";
-@import "./modules/form/select.css";
-@import "./modules/form/text.css";
-@import "./modules/list.css";
-@import "./modules/loader.css";
-@import "./modules/nav.css";
-@import "./modules/pill.css";
-@import "./modules/table.css";
-@import "./modules/tabs.css";
-@import "./modules/tag.css";
-@import "./modules/tile.css";