claritas-web-framework 5.0.0

package/styles/mixins/modules/card.css

@@ -0,0 +1,29 @@
+@mixin make-card() {
+  --background-color: var(--white);
+  --border-color: var(--black-transparent-12);
+  --border: 1px solid var(--border-color);
+  --border-radius: var(--border-radius-medium);
+
+  margin-bottom: var(--spacer);
+  background-color: var(--background-color);
+  border-radius: var(--border-radius);
+  display: flex;
+  flex-direction: column;
+  border: var(--border);
+  min-width: 0;
+  word-wrap: break-word;
+  width: 100%;
+  position: relative;
+
+  & > * {
+    &:first-child {
+      border-top-left-radius: calc(var(--border-radius) - 1px);
+      border-top-right-radius: calc(var(--border-radius) - 1px);
+    }
+
+    &:last-child {
+      border-bottom-left-radius: calc(var(--border-radius) - 1px);
+      border-bottom-right-radius: calc(var(--border-radius) - 1px);
+    }
+  }
+}

package/styles/mixins/modules/close.css

@@ -0,0 +1,42 @@
+@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

@@ -0,0 +1,24 @@
+@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

@@ -0,0 +1,44 @@
+@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;
+  --font-size: var(--font-size-small);
+
+  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);
+}

package/styles/mixins/modules/table.css

@@ -0,0 +1,75 @@
+@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

@@ -0,0 +1,13 @@
+@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

@@ -0,0 +1,85 @@
+.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

@@ -0,0 +1,41 @@
+@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

@@ -0,0 +1,151 @@
+@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

@@ -0,0 +1,80 @@
+@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

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

package/styles/modules/details.css

@@ -0,0 +1,61 @@
+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;
+      }
+    }
+  }
+}