claritas-web-framework 5.0.0

package/scss/_reboot.scss

@@ -0,0 +1,403 @@
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+}
+
+html {
+  font-family: sans-serif;
+  line-height: $line-height-base;
+  scroll-behavior: smooth;
+  -webkit-text-size-adjust: 100%;
+  -webkit-tap-highlight-color: rgba($black, 0);
+}
+
+article,
+aside,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+nav,
+section {
+  display: block;
+}
+
+body {
+  margin: 0;
+  font-family: $font-family-base;
+  font-size: $font-size-base;
+  font-weight: 400;
+  line-height: 1.5;
+  text-align: left;
+  color: $body-color;
+  background-color: $body-background;
+  font-variant-numeric: tabular-nums;
+  font-variant-ligatures: no-common-ligatures;
+}
+
+.clearfix::after {
+  display: block;
+  clear: both;
+  content: "";
+}
+
+[tabindex="-1"]:focus {
+  outline: 0 !important;
+}
+
+::selection {
+  background-color: $primary;
+  text-shadow: none !important;
+  color: $white !important;
+}
+
+p {
+  margin-top: 0;
+  margin-bottom: $spacer;
+}
+
+abbr[data-original-title],
+abbr[title] {
+  text-decoration: underline dotted;
+  cursor: help;
+  border-bottom: 0;
+}
+
+address {
+  margin-bottom: $spacer;
+  font-style: normal;
+  line-height: inherit;
+}
+
+dl,
+ol,
+ul {
+  margin-top: 0;
+  margin-bottom: $spacer;
+}
+
+ol ol,
+ol ul,
+ul ol,
+ul ul {
+  margin-bottom: 0;
+}
+
+dt {
+  font-weight: 700;
+}
+
+dd {
+  margin-left: 0;
+  margin-bottom: calc($spacer * 0.5);
+}
+
+blockquote {
+  margin: 0 0 $spacer;
+}
+
+b,
+strong {
+  font-weight: 700;
+}
+
+sub,
+sup {
+  position: relative;
+  font-size: $font-size-small;
+  line-height: 0;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: calc($spacer * -0.25);
+}
+
+sup {
+  top: calc($spacer * -0.5);
+}
+
+a {
+  cursor: pointer;
+  text-decoration: none;
+  color: $link-color;
+
+  &:hover {
+    text-decoration: underline;
+    color: $link-color-hover;
+  }
+
+  &:not([href]):not([tabindex]) {
+    text-decoration: none;
+
+    &:focus,
+    &:hover {
+      text-decoration: none;
+      outline: 0;
+    }
+  }
+}
+
+code,
+kbd,
+pre,
+samp {
+  font-family: $font-family-monospace;
+  font-size: $font-size-base;
+}
+
+pre {
+  margin-top: 0;
+  margin-bottom: $spacer;
+  overflow: auto;
+}
+
+figure {
+  margin: 0 0 $spacer;
+}
+
+img {
+  vertical-align: middle;
+  border-style: none;
+}
+
+svg {
+  overflow: hidden;
+  vertical-align: middle;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+caption {
+  padding-top: calc($spacer * 0.75);
+  padding-bottom: calc($spacer * 0.75);
+  text-align: left;
+  caption-side: bottom;
+}
+
+td,
+th {
+  background-clip: padding-box;
+}
+
+th {
+  text-align: inherit;
+}
+
+label {
+  display: inline-block;
+}
+
+button {
+  border-radius: 0;
+
+  &:focus {
+    outline: 0 none;
+  }
+}
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+button,
+input {
+  overflow: visible;
+}
+
+button,
+select {
+  text-transform: none;
+}
+
+select {
+  word-wrap: normal;
+}
+
+[type="button"],
+[type="reset"],
+[type="submit"],
+button {
+  appearance: button;
+}
+
+[type="button"]:not(:disabled),
+[type="reset"]:not(:disabled),
+[type="submit"]:not(:disabled),
+button:not(:disabled) {
+  cursor: pointer;
+}
+
+input[type="radio"],
+input[type="checkbox"] {
+  box-sizing: border-box;
+  padding: 0;
+}
+
+input[type="date"],
+input[type="time"],
+input[type="datetime-local"],
+input[type="month"] {
+  appearance: listbox;
+  padding-inline-start: calc(0.375em - 1px);
+}
+
+textarea {
+  overflow: auto;
+  resize: vertical;
+  height: auto;
+}
+
+fieldset {
+  min-width: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+legend {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  padding: 0;
+  margin-bottom: calc($spacer * 0.5);
+  font-size: $font-size-3;
+  line-height: inherit;
+  color: inherit;
+  white-space: normal;
+}
+
+progress {
+  vertical-align: baseline;
+}
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+::-webkit-file-upload-button {
+  font: inherit;
+  appearance: button;
+}
+
+output {
+  display: inline-block;
+}
+
+summary {
+  display: list-item;
+  cursor: pointer;
+}
+
+template {
+  display: none;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6 {
+  margin-top: 0;
+  margin-bottom: calc($spacer * 0.5);
+  font-weight: $header-weight;
+  line-height: 1.5;
+
+  & small {
+    font-weight: normal;
+  }
+}
+
+h1,
+.h1 {
+  font-size: $font-size-1;
+}
+
+h2,
+.h2 {
+  font-size: $font-size-2;
+}
+
+h3,
+.h3 {
+  font-size: $font-size-3;
+}
+
+h4,
+.h4 {
+  font-size: $font-size-4;
+}
+
+h5,
+.h5 {
+  font-size: $font-size-5;
+}
+
+h6,
+.h6 {
+  font-size: $font-size-6;
+}
+
+hr,
+.hr {
+  box-sizing: content-box;
+  height: 0;
+  width: 100%;
+  overflow: visible;
+  margin-top: $spacer;
+  margin-bottom: $spacer;
+  border: 0;
+  border-top: 1px solid rgba($black, .12);
+}
+
+small {
+  font-size: $font-size-small;
+}
+
+mark {
+  padding: calc($spacer * 0.2);
+  background-color: rgba($warning, .75);
+}
+
+button,
+input,
+select,
+textarea {
+  align-items: center;
+  border: 1px solid rgba($black, 0);
+  border-radius: $border-radius;
+  box-shadow: none;
+  display: inline-flex;
+  font-size: $font-size-base;
+  justify-content: flex-start;
+  line-height: 1.5;
+  padding: calc(0.375em - 1px) calc(0.625em - 1px);
+  position: relative;
+  vertical-align: top;
+  background-color: rgba($black, 0);
+}

package/scss/_root.scss

@@ -0,0 +1,30 @@
+:root {
+  // Colors
+  //
+  // Generate palettes for full colors, grays, and theme colors.
+
+  @each $color, $value in $grays {
+    --#{$variable-prefix}gray-#{$color}: #{$value};
+  }
+
+  @each $color, $value in $colors {
+    --#{$variable-prefix}#{$color}: #{$value};
+  }
+
+  @each $color, $value in $theme-colors {
+    --#{$variable-prefix}#{$color}: #{$value};
+  }
+
+  @each $color, $value in $theme-colors-rgb {
+    --#{$variable-prefix}#{$color}-rgb: #{$value};
+  }
+
+  @each $zindex, $value in $zindexes {
+    --#{$variable-prefix}zindex-#{$zindex}: #{$value};
+  }
+
+  --spacer: #{$spacer};
+
+  --body-color: #{$body-color};
+  --body-background: #{$body-background};
+}

package/scss/_utilities.scss

@@ -0,0 +1,17 @@
+@import "./utilities/align";
+@import "./utilities/border";
+@import "./utilities/colors";
+@import "./utilities/display";
+@import "./utilities/flex";
+@import "./utilities/float";
+@import "./utilities/order";
+@import "./utilities/overflow";
+@import "./utilities/pointerEvents";
+@import "./utilities/position";
+@import "./utilities/shadow";
+@import "./utilities/size";
+@import "./utilities/spacing";
+@import "./utilities/translate";
+@import "./utilities/typography";
+@import "./utilities/visibility";
+@import "./utilities/zIndex";