claritas-web-framework 6.4.26 → 7.0.0

package/styles/mixins/modules/close.css

@@ -1,42 +0,0 @@
-@import "button.css";
-
-@mixin make-close() {
-  @include make-button();
-
-  --padding: calc(var(--spacer) * 0.575);
-  --border-radius: var(--border-radius-round);
-  --border-color: var(--transparent);
-  --border-color-hover: var(--transparent);
-  --background-color: var(--black-transparent-20);
-  --background-color-hover: var(--black-transparent-30);
-  --background-color-focus: var(--black-transparent-40);
-  --box-shadow-active: none;
-  --box-shadow-focus: none;
-  --position: relative;
-  --vertical-align: text-bottom;
-
-  position: var(--position);
-  vertical-align: var(--vertical-align);
-
-  &::before,
-  &::after {
-    position: absolute;
-    display: block;
-    content: "";
-    left: 50%;
-    top: 50%;
-    background-color: var(--white);
-    transform-origin: center center;
-    transform: translateX(-50%) translateY(-50%) rotate(45deg);
-  }
-
-  &::before {
-    height: 2px;
-    width: 50%;
-  }
-
-  &::after {
-    width: 2px;
-    height: 50%;
-  }
-}

package/styles/mixins/modules/list.css

@@ -1,24 +0,0 @@
-@import "./../group.css";
-
-@mixin make-list-unsyled() {
-  --list-style: none;
-  --margin: 0 0 var(--spacer);
-  --padding: 0;
-
-  list-style: var(--list-style);
-  margin: var(--margin);
-  padding: var(--padding);
-}
-
-@mixin make-list-inline() {
-  @include make-group-row();
-  @include make-list-unsyled();
-
-  --gap: var(--spacer);
-
-  & > * {
-    &:not(:last-child) {
-      margin-right: var(--gap);
-    }
-  }
-}

package/styles/mixins/modules/pill.css

@@ -1,43 +0,0 @@
-@mixin make-pill() {
-  --border-width: 1px;
-  --border-color: var(--black-transparent-12);
-  --border-style: solid;
-  --border-radius: var(--border-radius-round);
-  --color: var(--body-color);
-  --background-color: var(--light);
-  --background-color-hover: color-mod(var(--light) shade(10%));
-  --padding: calc((var(--spacer) * 0.125) - 1px) calc(var(--spacer) * 0.25);
-  --line-height: 1;
-  --font-weight: 700;
-  --display: inline-flex;
-  --align-items: center;
-  --vertical-align: top;
-  --justify-content: center;
-  --text-align: center;
-  --white-space: nowrap;
-  --height: auto;
-  --min-width: var(--spacer);
-  --outline: 0;
-  --text-decoration: none;
-
-  border-width: var(--border-width);
-  border-color: var(--border-color);
-  border-style: var(--border-style);
-  font-weight: var(--font-weight);
-  line-height: var(--line-height);
-  color: var(--color);
-  background-color: var(--background-color);
-  padding: var(--padding);
-  border-radius: var(--border-radius);
-  align-items: var(--align-items);
-  display: var(--display);
-  vertical-align: var(--vertical-align);
-  justify-content: var(--justify-content);
-  text-align: var(--text-align);
-  white-space: var(--white-space);
-  height: var(--height);
-  min-width: var(--min-width);
-  outline: var(--outline);
-  text-decoration: var(--text-decoration);
-  font-size: var(--font-size-small);
-}

package/styles/mixins/modules/table.css

@@ -1,75 +0,0 @@
-@mixin make-table() {
-  --border-color: var(--black-transparent-12);
-  --border-width: 1px;
-  --border-width-thick: 2px;
-  --border: var(--border-width) solid var(--border-color);
-  --padding: calc((var(--spacer) * 0.625) - 1px) var(--spacer);
-  --padding-small: calc((var(--spacer) * 0.25) - 1px) calc(var(--spacer) * 0.75);
-
-  width: 100%;
-
-  & td,
-  & th {
-    border: var(--border);
-    border-width: 0 0 var(--border-width);
-    padding: var(--padding);
-    vertical-align: top;
-  }
-
-  & thead {
-    & tr {
-      & th {
-        border-bottom-width: var(--border-width-thick);
-      }
-    }
-  }
-
-  & tfoot {
-    & tr {
-      & th {
-        border-top-width: var(--border-width-thick);
-      }
-    }
-  }
-}
-
-@mixin make-tableBordered() {
-  & td,
-  & th {
-    border-width: var(--border-width);
-  }
-}
-
-@mixin make-tableStriped() {
-  & tbody {
-    & tr {
-      &:nth-of-type(even) {
-        background-color: color-mod(var(--dark) a(4%));
-      }
-
-      &:nth-of-type(odd) {
-        background-color: color-mod(var(--light) a(4%));
-      }
-    }
-  }
-}
-
-@mixin make-tableSmall() {
-  & td,
-  & th {
-    padding: var(--padding-small);
-  }
-}
-
-@mixin make-tableHover() {
-  & tbody {
-    & tr {
-      &:hover {
-        & td,
-        & th {
-          background-color: var(--black-transparent-5);
-        }
-      }
-    }
-  }
-}

package/styles/mixins.css

@@ -1,13 +0,0 @@
-@import "./mixins/helpers/container.css";
-@import "./mixins/helpers/grid.css";
-@import "./mixins/helpers/link.css";
-@import "./mixins/helpers/wrap.css";
-@import "./mixins/modules/button.css";
-@import "./mixins/modules/card.css";
-@import "./mixins/modules/close.css";
-@import "./mixins/modules/list.css";
-@import "./mixins/modules/pill.css";
-@import "./mixins/modules/table.css";
-@import "./mixins/caret.css";
-@import "./mixins/clearfix.css";
-@import "./mixins/group.css";

package/styles/modules/alert.css

@@ -1,85 +0,0 @@
-.alert {
-  --border-color: var(--black-transparent-12);
-  --border: 1px solid var(--border-color);
-  --border-radius: var(--border-radius-medium);
-  --background-color: color-mod(var(--body-color) tint(87.5%));
-  --color: var(--body-color);
-  --link-color: color-mod(var(--body-color) shade(40%));
-  --link-color-hover: color-mod(var(--body-color) shade(30%));
-  --margin-bottom: var(--spacer);
-  --position: relative;
-
-  border: var(--border);
-  margin-bottom: var(--spacer);
-  padding: var(--spacer);
-  border-radius: var(--border-radius);
-  background-color: var(--background-color);
-  color: var(--color);
-  position: var(--position);
-
-  & > * {
-    &:last-child {
-      --margin-bottom: 0;
-    }
-  }
-
-  & a:not(.button) {
-    font-weight: bolder;
-    color: var(--link-color);
-
-    &:hover {
-      color: var(--link-color-hover);
-    }
-  }
-}
-
-@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
-  )
-{
-  .alert--$(name) {
-    --background-color: var(--#{$name});
-    --color: color-mod(var(--#{$name}) shade(75%));
-    --link-color: color-mod(var(--#{$name}) shade(75%));
-    --link-color-hover: color-mod(var(--#{$name}) shade(50%));
-
-    &.is-dark {
-      --color: color-mod(var(--#{$name}) tint(75%));
-      --link-color: color-mod(var(--#{$name}) tint(75%));
-      --link-color-hover: color-mod(var(--#{$name}) tint(90%));
-    }
-  }
-}

package/styles/modules/breadcrumbs.css

@@ -1,41 +0,0 @@
-@import "../mixins/modules/list.css";
-
-.breadcrumbs {
-  @include make-list-unsyled();
-
-  --color: var(--medium);
-  --link-color: var(--color);
-  --link-color-hover: color-mod(var(--link-color) shade(15%));
-
-  display: flex;
-  flex-wrap: wrap;
-
-  & li {
-    position: relative;
-
-    &:not(:last-child) {
-      color: var(--color);
-      padding-right: var(--spacer);
-
-      &::after {
-        content: "";
-        position: absolute;
-        width: calc(var(--spacer) * 0.5);
-        height: calc(var(--spacer) * 0.5);
-        right: calc(var(--spacer) * 0.375);
-        top: calc(var(--spacer) * 0.5);
-        border-top: 1px solid var(--color);
-        border-right: 1px solid var(--color);
-        transform: rotate(45deg);
-      }
-    }
-
-    & a {
-      color: var(--link-color);
-
-      &:hover {
-        color: var(--link-color-hover);
-      }
-    }
-  }
-}

package/styles/modules/button.css

@@ -1,151 +0,0 @@
-@import "../mixins/group.css";
-@import "../mixins/modules/button.css";
-
-.button {
-  @include make-button();
-
-  &.button--small {
-    --padding: calc((var(--spacer) * 0.25) - 1px) calc(var(--spacer) * 0.75);
-    font-size: var(--font-size-small);
-  }
-
-  &.button--large {
-    --padding: calc((var(--spacer) * 0.5) - 1px) calc(var(--spacer) * 1.75);
-    font-size: var(--font-size-5);
-  }
-
-  &.button--rounded {
-    --border-radius: var(--border-radius-round);
-  }
-
-  &.button--square {
-    --border-radius: 0;
-  }
-
-  &.button--outline {
-    --background-color: var(--transparent);
-  }
-
-  &.button--link {
-    --border-color: var(--transparent);
-    --border-color-hover: var(--transparent);
-    --background-color: var(--transparent);
-    --background-color-hover: var(--black-transparent-7);
-    --box-shadow-active: none;
-    --box-shadow-focus: none;
-  }
-
-  &.button--unstyled {
-    --border-color: var(--transparent);
-    --border-color-hover: var(--transparent);
-    --background-color: var(--transparent);
-    --background-color-hover: var(--transparent);
-    --background-color-focus: var(--transparent);
-    --box-shadow-active: none;
-    --box-shadow-focus: none;
-    --padding: 0;
-  }
-
-  &.disabled,
-  &[disabled] {
-    --pointer-events: none;
-    --opacity: 0.5;
-  }
-}
-
-.buttons {
-  @include make-group-row();
-
-  & .buttons {
-    margin-bottom: 0;
-  }
-
-  &.buttons--grouped {
-    @include make-grouped-row();
-  }
-}
-
-@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) {
-    --color: color-mod(var(--#{$name}) tint(85%));
-    --color-hover: color-mod(var(--#{$name}) tint(85%));
-    --color-focus: color-mod(var(--#{$name}) tint(85%));
-    --background-color: var(--#{$name});
-    --background-color-hover: color-mod(var(--#{$name}) shade(10%));
-    --background-color-focus: color-mod(var(--#{$name}) shade(15%));
-    --shadow-color-active: color-mod(var(--#{$name}) a(35%));
-    --shadow-color-focus: color-mod(var(--#{$name}) a(30%));
-
-    &.is-light {
-      --color: color-mod(var(--#{$name}) shade(75%));
-      --color-hover: color-mod(var(--#{$name}) shade(90%));
-    }
-
-    &.button--link {
-      --color: var(--#{$name});
-      --color-hover: color-mod(var(--#{$name}) shade(15%));
-      --color-focus: color-mod(var(--#{$name}) shade(15%));
-      --background-color: var(--transparent);
-      --background-color-hover: color-mod(var(--#{$name}) a(10%));
-      --background-color-focus: color-mod(var(--#{$name}) a(15%));
-      --border-color: var(--transparent);
-      --shadow-color-active: var(--transparent);
-      --shadow-color-focus: var(--transparent);
-    }
-
-    &.button--unstyled {
-      --color: var(--#{$name});
-      --color-hover: color-mod(var(--#{$name}) shade(15%));
-      --color-focus: color-mod(var(--#{$name}) shade(15%));
-      --background-color: var(--transparent);
-      --background-color-hover: var(--transparent);
-      --background-color-focus: var(--transparent);
-      --border-color: var(--transparent);
-      --shadow-color-active: var(--transparent);
-      --shadow-color-focus: var(--transparent);
-    }
-
-    &.button--outline {
-      --color: var(--#{$name});
-      --color-focus: var(--white);
-      --border-color: var(--#{$name});
-      --background-color-hover: var(--#{$name});
-    }
-  }
-}

package/styles/modules/card.css

@@ -1,80 +0,0 @@
-@import "../mixins/group.css";
-@import "../mixins/modules/card.css";
-
-.card {
-  @include make-card();
-
-  & .card--header,
-  & .card--footer {
-    --display: flex;
-    --flex-direction: row;
-    --flex-wrap: wrap;
-    --align-items: normal;
-    --padding: calc(var(--spacer) * 0.5) var(--spacer);
-
-    display: var(--display);
-    flex-direction: var(--flex-direction);
-    flex-wrap: var(--flex-wrap);
-    align-items: var(--align-items);
-    padding: var(--padding);
-
-    & > * {
-      margin-bottom: 0;
-    }
-  }
-
-  & .card--header {
-    flex: 0 1 auto;
-    border-bottom: var(--border);
-  }
-
-  & .card--footer {
-    margin-top: auto;
-    flex: 0 0 auto;
-    border-top: var(--border);
-  }
-
-  & .card--body {
-    flex: 0 0 auto;
-    width: 100%;
-    padding: var(--spacer);
-
-    & > *:last-child:not(.grid--form) {
-      margin-bottom: 0;
-    }
-  }
-
-  & .card--image {
-    flex: 1 0 100%;
-    overflow: hidden;
-
-    & img {
-      width: 100%;
-      height: auto;
-    }
-  }
-}
-
-details.card {
-  & .card--header {
-    border-bottom-color: var(--transparent);
-
-    &:hover {
-      background-color: var(--black-transparent-5);
-    }
-  }
-
-  &[open] {
-    & .card--header {
-      border-bottom-color: var(--border-color);
-    }
-  }
-}
-
-.cards {
-  @include make-group-column();
-
-  &.cards--grouped {
-    @include make-grouped-column();
-  }
-}

package/styles/modules/close.css

@@ -1,5 +0,0 @@
-@import "./../mixins/modules/close.css";
-
-.close {
-  @include make-close();
-}

package/styles/modules/details.css

@@ -1,61 +0,0 @@
-details {
-  margin-bottom: var(--spacer);
-
-  & summary {
-    position: relative;
-    list-style-image: none;
-    list-style: none;
-    padding-left: calc(var(--spacer) * 1.5);
-
-    &:focus {
-      outline: none;
-    }
-
-    &::before {
-      pointer-events: none;
-      outline: none;
-      transform: none;
-      position: absolute;
-      content: "";
-      left: 0;
-      top: calc(50% - 0.125em);
-      width: 0;
-      height: 0;
-      border-left: 0.25em solid var(--transparent);
-      border-right: 0.25em solid var(--transparent);
-      border-top: 0.25em solid var(--primary);
-      border-bottom: 0 none;
-      pointer-events: none;
-    }
-
-    &::marker {
-      color: var(--transparent);
-      display: none;
-    }
-
-    &::-webkit-details-marker {
-      display: none;
-    }
-
-    &.card--header {
-      padding-left: calc(var(--spacer) * 2) !important;
-
-      &::before {
-        left: calc(var(--spacer) * 0.75);
-      }
-    }
-  }
-
-  &[open] {
-    height: auto;
-
-    & summary {
-      &::before {
-        border-left: 0.25em solid var(--transparent);
-        border-right: 0.25em solid var(--transparent);
-        border-bottom: 0.25em solid var(--primary);
-        border-top: 0 none;
-      }
-    }
-  }
-}

package/styles/modules/dialog.css

@@ -1,82 +0,0 @@
-.dialog {
-  padding: var(--spacer);
-  background-color: var(--transparent);
-  border: 0 none;
-  max-width: 100%;
-  max-height: 100%;
-  width: 100%;
-
-  & > * {
-    margin: 0 auto;
-
-    @media (--viewport-desktop) {
-      width: var(--breakpoint-tablet);
-    }
-
-    @media (--viewport-widescreen) {
-      width: var(--breakpoint-desktop);
-    }
-
-    @media (--viewport-fullhd) {
-      width: var(--breakpoint-widescreen);
-    }
-  }
-
-  &::backdrop {
-    background-color: rgba(18, 22, 27, 0.75);
-    backdrop-filter: blur(4px);
-  }
-
-  & .close {
-    --position: absolute;
-
-    right: calc(var(--spacer) * 0.5);
-    top: calc(var(--spacer) * 0.5);
-    z-index: 1;
-  }
-
-  &[open] {
-    --animation: openDialog 0.25s ease normal;
-
-    animation: var(--animation);
-  }
-}
-
-@keyframes openDialog {
-  0% {
-    opacity: 0;
-    transform: translateY(-50vh);
-  }
-
-  20% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 1;
-    transform: translateY(0%);
-  }
-}
-
-/* For polyfill */
-[role="dialog"][open] {
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  position: absolute;
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  justify-content: center;
-
-  & + .backdrop {
-    left: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    position: fixed;
-    background-color: rgba(18, 22, 27, 0.75);
-    backdrop-filter: blur(4px);
-  }
-}