claritas-web-framework 6.4.26 → 7.0.1

package/styles/utilities/tooltip.css

@@ -1,127 +0,0 @@
-[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: var(--zindex-tooltip);
-    color: var(--white);
-    text-align: center;
-    font-size: var(--font-size-small);
-    line-height: normal;
-    font-weight: 400;
-  }
-
-  &::before {
-    content: "";
-    border-top: 6px solid var(--black-transparent-75);
-    border-right: 6px solid var(--transparent);
-    border-bottom: 0 none;
-    border-left: 6px solid var(--transparent);
-    top: -6px;
-    right: auto;
-    bottom: auto;
-    left: 50%;
-    margin: 0 0 0 -6px;
-  }
-
-  &::after {
-    background-color: var(--black-transparent-75);
-    content: attr(data-tooltip);
-    width: auto;
-    min-width: calc(var(--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(var(--spacer) * 16);
-    }
-  }
-
-  &[data-placement="left"] {
-    &::before {
-      border-top: 6px solid var(--transparent);
-      border-right: 0 none;
-      border-bottom: 6px solid var(--transparent);
-      border-left: 6px solid var(--black-transparent-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 var(--transparent);
-      border-right: 6px solid var(--black-transparent-75);
-      border-bottom: 6px solid var(--transparent);
-      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 var(--transparent);
-      border-bottom: 6px solid var(--black-transparent-75);
-      border-left: 6px solid var(--transparent);
-      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/styles/utilities/translate.css

@@ -1,15 +0,0 @@
-.translate--middle {
-  transform: translate(-50%, -50%) !important;
-}
-
-.translate-x--middle {
-  transform: translateX(-50%) !important;
-}
-
-.translate-y--middle {
-  transform: translateY(-50%) !important;
-}
-
-.translate--bottom {
-  transform: translateY(-100%) !important;
-}

package/styles/utilities/typography.css

@@ -1,74 +0,0 @@
-@each $name in (left, right, center, justify) {
-  .text-align--$(name) {
-    text-align: $name !important;
-  }
-}
-
-@each $view in mobile, tablet, desktop, widescreen, fullhd {
-  @each $name in (left, right, center, justify) {
-    @media (--viewport-$(view)) {
-      .text-align--$(view)-$(name) {
-        text-align: $name !important;
-      }
-    }
-  }
-}
-
-@each $name in (uppercase, lowercase, capitalize, none) {
-  .text-transform--$(name) {
-    text-transform: $name !important;
-  }
-}
-
-@each $name in (lighter, normal, bolder, bold) {
-  .font-weight--$(name) {
-    font-weight: $name !important;
-  }
-}
-
-.font-weight--light {
-  font-weight: 300;
-}
-
-@each $name in (xsmall, small, 1, 2, 3, 4, 5, 6) {
-  .font-size--$(name) {
-    font-size: var(--font-size-#{$name}) !important;
-  }
-}
-
-.font-size--smaller {
-  font-size: 0.85em;
-}
-
-.font-size--larger {
-  font-size: 1.15em;
-}
-
-@each $name in (italic, oblique, normal) {
-  .font-style--$(name) {
-    font-style: $name !important;
-  }
-}
-
-@each $name in (serif, sans-serif, monospace) {
-  .font-family--$(name) {
-    font-family: var(--font-family-#{$name}) !important;
-  }
-}
-
-@each $name in (normal, nowrap) {
-  .text-wrap--$(name) {
-    white-space: $name !important;
-  }
-}
-
-.text-wrap--truncate {
-  white-space: nowrap !important;
-  overflow: hidden !important;
-  text-overflow: ellipsis !important;
-}
-
-code {
-  color: color-mod(var(--primary) hue(300)) !important;
-  font-family: var(--font-family-monospace) !important;
-}

package/styles/utilities/visibility.css

@@ -1,14 +0,0 @@
-@each $name in (visible, hidden) {
-  .visibility--$(name) {
-    visibility: $name !important;
-  }
-}
-@each $view in mobile, tablet, desktop, widescreen, fullhd {
-  @each $name in visible, hidden {
-    @media (--viewport-$(view)) {
-      .visibility--$(view)-$(name) {
-        visibility: $name !important;
-      }
-    }
-  }
-}

package/styles/utilities/zindex.css

@@ -1,7 +0,0 @@
-@each $name
-  in (dropdown, sticky, fixed, modal-backdrop, modal, popover, tooltip)
-{
-  .zindex--$(name) {
-    z-index: var(--zindex-#{$name}) !important;
-  }
-}

package/styles/utilities.css

@@ -1,18 +0,0 @@
-@import "./utilities/align.css";
-@import "./utilities/border.css";
-@import "./utilities/colors.css";
-@import "./utilities/display.css";
-@import "./utilities/flex.css";
-@import "./utilities/float.css";
-@import "./utilities/order.css";
-@import "./utilities/overflow.css";
-@import "./utilities/pointer-events.css";
-@import "./utilities/position.css";
-@import "./utilities/shadow.css";
-@import "./utilities/size.css";
-@import "./utilities/spacing.css";
-@import "./utilities/tooltip.css";
-@import "./utilities/translate.css";
-@import "./utilities/typography.css";
-@import "./utilities/visibility.css";
-@import "./utilities/zindex.css";

package/styles/vars.css

@@ -1,159 +0,0 @@
-@custom-media --viewport-mobile (width >= 20rem);
-@custom-media --viewport-tablet (width >= 48rem);
-@custom-media --viewport-desktop (width >= 64rem);
-@custom-media --viewport-widescreen (width >= 76rem);
-@custom-media --viewport-fullhd (width >= 88rem);
-
-@custom-media --viewport-mobile-max (width < 20rem);
-@custom-media --viewport-tablet-max (width < 48rem);
-@custom-media --viewport-desktop-max (width < 64rem);
-@custom-media --viewport-widescreen-max (width < 76rem);
-@custom-media --viewport-fullhd-max (width < 88rem);
-
-:root {
-  /* Spacing */
-  --spacer: 1rem;
-
-  --breakpoint-mobile: calc(var(--spacer) * 20);
-  --breakpoint-tablet: calc(var(--spacer) * 48);
-  --breakpoint-desktop: calc(var(--spacer) * 64);
-  --breakpoint-widescreen: calc(var(--spacer) * 76);
-  --breakpoint-fullhd: calc(var(--spacer) * 88);
-
-  --grid-gutter: var(--spacer);
-  --grid-gutter-x: calc(var(--grid-gutter) * 1.5);
-  --grid-gutter-y: 0;
-
-  /* Colours */
-  --gray-1: hsl(213, 20%, 98%);
-  --gray-2: hsl(213, 20%, 87%);
-  --gray-3: hsl(213, 20%, 76%);
-  --gray-4: hsl(213, 20%, 65%);
-  --gray-5: hsl(213, 20%, 54%);
-  --gray-6: hsl(213, 20%, 43%);
-  --gray-7: hsl(213, 20%, 32%);
-  --gray-8: hsl(213, 20%, 21%);
-  --gray-9: hsl(213, 20%, 10%);
-
-  --white: hsl(0, 0%, 100%);
-  --black: hsl(0, 0%, 0%);
-  --light: var(--gray-1);
-  --medium: var(--gray-4);
-  --dark: var(--gray-9);
-
-  --black-transparent: var(--black);
-
-  --black-transparent-2: color-mod(var(--black-transparent) a(2%));
-  --black-transparent-5: color-mod(var(--black-transparent) a(5%));
-  --black-transparent-7: color-mod(var(--black-transparent) a(7%));
-  --black-transparent-10: color-mod(var(--black-transparent) a(10%));
-  --black-transparent-12: color-mod(var(--black-transparent) a(12%));
-  --black-transparent-17: color-mod(var(--black-transparent) a(17%));
-  --black-transparent-20: color-mod(var(--black-transparent) a(20%));
-  --black-transparent-25: color-mod(var(--black-transparent) a(25%));
-  --black-transparent-30: color-mod(var(--black-transparent) a(30%));
-  --black-transparent-40: color-mod(var(--black-transparent) a(40%));
-  --black-transparent-50: color-mod(var(--black-transparent) a(50%));
-  --black-transparent-75: color-mod(var(--black-transparent) a(75%));
-
-  --primary: hsl(171, 100%, 41%);
-  --primary-light: color-mod(var(--primary) tint(60%));
-  --primary-dark: color-mod(var(--primary) shade(40%));
-
-  --secondary: hsl(217, 71%, 53%);
-  --secondary-light: color-mod(var(--secondary) tint(60%));
-  --secondary-dark: color-mod(var(--secondary) shade(40%));
-
-  --info: hsl(204, 86%, 53%);
-  --info-light: color-mod(var(--info) tint(60%));
-  --info-dark: color-mod(var(--info) shade(40%));
-
-  --success: hsl(141, 71%, 48%);
-  --success-light: color-mod(var(--success) tint(60%));
-  --success-dark: color-mod(var(--success) shade(40%));
-
-  --warning: hsl(48, 100%, 67%);
-  --warning-light: color-mod(var(--warning) tint(60%));
-  --warning-dark: color-mod(var(--warning) shade(40%));
-
-  --danger: hsl(348, 100%, 61%);
-  --danger-light: color-mod(var(--danger) tint(60%));
-  --danger-dark: color-mod(var(--danger) shade(40%));
-
-  --transparent: hsla(0, 0%, 0%, 0);
-
-  --link-color: var(--primary);
-
-  /* Z-Index */
-  --zindex-static: 0;
-  --zindex-relative: 1;
-  --zindex-absolute: 1;
-  --zindex-sticky: 1020;
-  --zindex-fixed: 1030;
-  --zindex-dropdown: 1040;
-  --zindex-modal-backdrop: 1050;
-  --zindex-modal: 1060;
-  --zindex-popover: 1070;
-  --zindex-tooltip: 1080;
-
-  /* Breakpoints */
-  --breakpoint-mobile: 20rem;
-  --breakpoint-tablet: 48rem;
-  --breakpoint-desktop: 64rem;
-  --breakpoint-widescreen: 76rem;
-  --breakpoint-fullhd: 88rem;
-
-  /* Typography */
-  --font-family-sans-serif: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI",
-    Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
-    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  --font-family-serif: Cambria, "Hoefler Text", Utopia, "Liberation Serif",
-    "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
-  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
-    "Liberation Mono", "Courier New", monospace;
-  --font-family-base: var(--font-family-sans-serif);
-
-  --font-size-base: var(--spacer);
-
-  --font-size-6: var(--font-size-base);
-  --font-size-5: calc(var(--font-size-base) * 1.25);
-  --font-size-4: calc((var(--font-size-base) * 1.275) + 0.3vw);
-  --font-size-3: calc((var(--font-size-base) * 1.3) + 0.6vw);
-  --font-size-2: calc((var(--font-size-base) * 1.325) + 0.9vw);
-  --font-size-1: calc((var(--font-size-base) * 1.375) + 1.5vw);
-
-  --font-size-xsmall: calc(var(--font-size-base) * 0.675);
-  --font-size-small: calc(var(--font-size-base) * 0.875);
-
-  --header-weight: 500;
-
-  /* Miscellaneous */
-  --body-color: var(--dark);
-  --body-background: var(--white);
-
-  --border-radius: calc(var(--spacer) * 0.275);
-  --border-radius-small: calc(var(--spacer) * 0.15);
-  --border-radius-medium: var(--border-radius);
-  --border-radius-large: calc(var(--spacer) * 0.65);
-  --border-radius-round: calc(var(--spacer) * 99);
-  --border-radius-none: 0;
-
-  --box-shadow: 0 calc(var(--spacer) * 0.5) calc(var(--spacer) * 0.75)
-    color-mod(var(--gray-9) a(15%));
-
-  --box-shadow-small: 0 calc(var(--spacer) * 0.125) calc(var(--spacer) * 0.25)
-    color-mod(var(--gray-9) a(7.5%));
-  --box-shadow-medium: var(--box-shadow);
-  --box-shadow-large: 0 var(--spacer) calc(var(--spacer) * 2.5)
-    color-mod(var(--gray-9) a(17.5%));
-
-  --box-shadow-inverse: 0 calc(var(--spacer) * -0.5) calc(var(--spacer) * 0.75)
-    color-mod(var(--gray-9) a(15%));
-  --box-shadow-inverse-small: 0 calc(var(--spacer) * -0.125)
-    calc(var(--spacer) * 0.25) color-mod(var(--gray-9) a(7.5%));
-  --box-shadow-inverse-medium: var(--box-shadow-inverse);
-  --box-shadow-inverse-large: 0 calc(var(--spacer) * -1)
-    calc(var(--spacer) * 2.5) color-mod(var(--gray-9) a(17.5%));
-
-  --box-shadow-none: none;
-}