claritas-web-framework 6.4.26 → 7.0.1

package/index.js

@@ -1,2 +1,2 @@
 // Import CSS
-import "./sass/_index.scss";
+import "./sass/index.scss";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "claritas-web-framework",
-  "version": "6.4.26",
-  "updated": "26/05/2023",
+  "version": "7.0.1",
+  "updated": "11/07/2023",
   "description": "The CSS framework built for Claritas front end.",
   "main": "index.js",
   "scripts": {
@@ -18,29 +18,20 @@
   "author": "David Brooks",
   "license": "UNLICENSED",
   "devDependencies": {
-    "@alexlafroscia/postcss-color-mod-function": "^4.0.0",
     "css-loader": "^6.8.1",
-    "cssnano": "^6.0.1",
     "find-unused-sass-variables": "^5.0.0",
-    "html-webpack-plugin": "^5.5.1",
+    "html-webpack-plugin": "^5.5.3",
     "mini-css-extract-plugin": "^2.7.6",
-    "postcss": "^8.4.24",
-    "postcss-advanced-variables": "^3.0.1",
-    "postcss-import": "^15.1.0",
-    "postcss-inline-svg": "^6.0.0",
-    "postcss-loader": "^7.3.2",
-    "postcss-preset-env": "^8.4.2",
-    "postcss-scss": "^4.0.6",
-    "prettier": "^2.8.8",
-    "sass": "^1.62.1",
-    "sass-loader": "^13.3.1",
-    "stylelint": "^15.7.0",
-    "stylelint-config-standard": "^33.0.0",
-    "stylelint-config-standard-scss": "^9.0.0",
-    "stylelint-scss": "^5.0.0",
-    "webpack": "^5.85.1",
-    "webpack-cli": "^5.1.3",
-    "webpack-dev-server": "^4.15.0"
+    "prettier": "^3.0.0",
+    "sass": "^1.63.6",
+    "sass-loader": "^13.3.2",
+    "stylelint": "^15.10.1",
+    "stylelint-config-standard": "^34.0.0",
+    "stylelint-config-standard-scss": "^10.0.0",
+    "stylelint-scss": "^5.0.1",
+    "webpack": "^5.88.1",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1"
   },
   "dependencies": {
     "rfs": "^10.0.0"

package/sass/modules/_modal.scss

@@ -17,6 +17,7 @@
   }
 
   & .modal--content {
+    overflow-y: auto;
     padding: $grid-gutter;
     display: flex;
     flex-direction: column;

package/js/polyfills/customevent.js

@@ -1,16 +0,0 @@
-(function () {
-  "use strict";
-
-  if (typeof window.CustomEvent === "function") return false; //If not IE
-
-  function CustomEvent(event, params) {
-    params = params || { bubbles: false, cancelable: false, detail: undefined };
-    var evt = document.createEvent("CustomEvent");
-    evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
-    return evt;
-  }
-
-  CustomEvent.prototype = window.Event.prototype;
-
-  window.Event = CustomEvent;
-})();

package/postcss.config.js

@@ -1,42 +0,0 @@
-const postcssImport = require("postcss-import");
-const postcssAdvancedVar = require("postcss-advanced-variables");
-const postcssPresetEnv = require("postcss-preset-env");
-const postcssColorMod = require("@alexlafroscia/postcss-color-mod-function");
-const postcssInlineSvg = require("postcss-inline-svg");
-const cssNano = require("cssnano");
-
-module.exports = {
-  plugins: [
-    postcssImport({}),
-    postcssAdvancedVar({
-      disable: "@import",
-    }),
-    postcssColorMod({
-      importFrom: ["./styles/vars.css"],
-      unresolved: "warn",
-    }),
-    postcssPresetEnv({
-      stage: 0,
-    }),
-    postcssInlineSvg({
-      paths: ["./images/"],
-      removeFill: true,
-      removeStroke: true,
-    }),
-    cssNano({
-      preset: [
-        "default",
-        {
-          discardComments: {
-            removeAll: true,
-          },
-          autoprefixer: true,
-          colorMin: false,
-          mergeLonghand: false,
-          mergeRules: false,
-          minifySelectors: false,
-        },
-      ],
-    }),
-  ],
-};

package/styles/helpers/container.css

@@ -1,21 +0,0 @@
-@import "./../mixins/helpers/container.css";
-
-.container,
-.container--fluid {
-  @include make-container();
-}
-
-.container {
-  @media (--viewport-tablet) {
-    --max-width: var(--breakpoint-tablet);
-  }
-  @media (--viewport-desktop) {
-    --max-width: var(--breakpoint-desktop);
-  }
-  @media (--viewport-widescreen) {
-    --max-width: var(--breakpoint-widescreen);
-  }
-  @media (--viewport-fullhd) {
-    --max-width: var(--breakpoint-fullhd);
-  }
-}

package/styles/helpers/embed.css

@@ -1,70 +0,0 @@
-.embed--32by9,
-.embed--21by9,
-.embed--16by9,
-.embed--4by3,
-.embed--1by1 {
-  position: relative;
-  display: block;
-  width: 100%;
-  padding: 0;
-  overflow: hidden;
-
-  &::before {
-    display: block;
-    content: "";
-  }
-
-  & > * {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    border: 0;
-  }
-}
-
-.embed--32by9::before {
-  padding-top: 28.125%;
-}
-
-.embed--21by9::before {
-  padding-top: 42.857143%;
-}
-
-.embed--16by9::before {
-  padding-top: 56.25%;
-}
-
-.embed--4by3::before {
-  padding-top: 75%;
-}
-
-.embed--1by1::before {
-  padding-top: 100%;
-}
-
-@each $view in mobile, tablet, desktop, widescreen, fullhd {
-  @media (--viewport-$(view)) {
-    .embed--$(view)-32by9::before {
-      padding-top: 28.125%;
-    }
-
-    .embed--$(view)-21by9::before {
-      padding-top: 42.857143%;
-    }
-
-    .embed--$(view)-16by9::before {
-      padding-top: 56.25%;
-    }
-
-    .embed--$(view)-4by3::before {
-      padding-top: 75%;
-    }
-
-    .embed--$(view)-1by1::before {
-      padding-top: 100%;
-    }
-  }
-}

package/styles/helpers/grid.css

@@ -1,64 +0,0 @@
-.grid {
-  @include make-grid();
-
-  &.grid--form {
-    --grid-gutter-x: calc(var(--grid-gutter) * 0.75);
-    --grid-gutter-y: 0;
-
-    margin-bottom: calc(var(--spacer) * -1);
-  }
-}
-
-.col {
-  flex: 1 0 0%;
-}
-
-.col--auto {
-  flex: 0 0 auto;
-  width: auto;
-}
-
-@for $i from 1 through 12 {
-  [class*="col--$(i)"],
-  .col--$(i) {
-    @media (--viewport-mobile) {
-      flex: 0 0 auto;
-      width: calc(($i / 12) * 100%);
-    }
-  }
-
-  [class*="offset--$(i)"],
-  .offset--$(i) {
-    @media (--viewport-mobile) {
-      @include make-col-offset($i);
-    }
-  }
-}
-
-@each $view in mobile, tablet, desktop, widescreen, fullhd {
-  @for $i from 1 through 12 {
-    [class*="col--$(view)-$(i)"],
-    .col--$(view)-$(i) {
-      @media (--viewport-$(view)) {
-        flex: 0 0 auto;
-        width: calc(($i / 12) * 100%);
-      }
-    }
-
-    [class*="offset--$(view)-$(i)"],
-    .offset--$(view)-$(i) {
-      @media (--viewport-$(view)) {
-        margin-left: calc(($i / 12) * 100%);
-      }
-    }
-  }
-}
-
-@each $view in mobile, tablet, desktop, widescreen, fullhd {
-  [class*="offset--$(view)-0"],
-  .offset--$(view)-0 {
-    @media (--viewport-$(view)) {
-      margin-left: 0;
-    }
-  }
-}

package/styles/helpers/image.css

@@ -1,5 +0,0 @@
-.image--full {
-  width: auto;
-  height: auto;
-  max-width: 100%;
-}

package/styles/helpers/link.css

@@ -1,20 +0,0 @@
-@import "../mixins/helpers/link.css";
-
-.link--stretched {
-  &::after,
-  &::before {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 1;
-    pointer-events: auto;
-    content: "";
-    background-color: color-mod(var(--gray-9) a(0));
-  }
-
-  &::before {
-    z-index: -1;
-  }
-}

package/styles/helpers/screen-readers.css

@@ -1,22 +0,0 @@
-.screen-reader {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
-
-.screen-reader--focusable {
-  &:active,
-  &:focus {
-    position: static;
-    width: auto;
-    height: auto;
-    overflow: visible;
-    clip: auto;
-    white-space: normal;
-  }
-}

package/styles/helpers/wrap.css

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

package/styles/helpers.css

@@ -1,7 +0,0 @@
-@import "./helpers/container.css";
-@import "./helpers/embed.css";
-@import "./helpers/grid.css";
-@import "./helpers/image.css";
-@import "./helpers/link.css";
-@import "./helpers/screen-readers.css";
-@import "./helpers/wrap.css";

package/styles/index.css

@@ -1,6 +0,0 @@
-@import "./reboot.css";
-@import "./vars.css";
-@import "./mixins.css";
-@import "./utilities.css";
-@import "./helpers.css";
-@import "./modules.css";

package/styles/mixins/caret.css

@@ -1,32 +0,0 @@
-@mixin make-caret() {
-  position: relative;
-
-  &::after {
-    position: absolute;
-    content: "";
-    top: calc(50% - calc(var(--spacer) * 0.125));
-    width: 0;
-    height: 0;
-    border-left: calc(var(--spacer) * 0.25) solid var(--transparent);
-    border-right: calc(var(--spacer) * 0.25) solid var(--transparent);
-    pointer-events: none;
-  }
-}
-
-@mixin make-caret-down() {
-  @include make-caret();
-
-  &::after {
-    border-bottom: 0;
-    border-top: calc(var(--spacer) * 0.25) solid var(--primary);
-  }
-}
-
-@mixin make-caret-up() {
-  @include make-caret();
-
-  &::after {
-    border-top: 0;
-    border-bottom: calc(var(--spacer) * 0.25) solid var(--primary);
-  }
-}

package/styles/mixins/clearfix.css

@@ -1,7 +0,0 @@
-@mixin clearfix() {
-  &::after {
-    display: block;
-    content: "";
-    clear: both;
-  }
-}

package/styles/mixins/group.css

@@ -1,78 +0,0 @@
-@mixin make-group() {
-  --margin: 0 0 var(--spacer);
-  --display: flex;
-  --flex-wrap: wrap;
-  --align-items: center;
-  --justify-content: flex-start;
-  --flex-direction: row;
-
-  margin: var(--margin);
-  display: var(--display);
-  flex-wrap: var(--flex-wrap);
-  align-items: var(--align-items);
-  justify-content: var(--justify-content);
-  flex-direction: var(--flex-direction);
-}
-
-@mixin make-group-column() {
-  @include make-group();
-
-  --flex-direction: column;
-
-  & > * {
-    margin-bottom: 0;
-
-    &:not(:last-child) {
-      margin-bottom: calc(var(--spacer) * 0.5);
-    }
-  }
-}
-
-@mixin make-group-row() {
-  @include make-group();
-
-  & > * {
-    margin-right: 0;
-
-    &:not(:last-child) {
-      margin-right: calc(var(--spacer) * 0.5);
-    }
-  }
-}
-
-@mixin make-grouped-column() {
-  & > * {
-    &:not(:last-child) {
-      border-bottom-right-radius: 0;
-      border-bottom-left-radius: 0;
-      margin-bottom: 0;
-    }
-
-    &:not(:first-child) {
-      border-top-left-radius: 0;
-      border-top-right-radius: 0;
-      margin-top: -1px;
-    }
-  }
-}
-
-@mixin make-grouped-row() {
-  flex-wrap: nowrap;
-
-  & > * {
-    &:not(:last-child) {
-      border-bottom-right-radius: 0;
-      border-top-right-radius: 0;
-      margin-right: -1px;
-    }
-
-    &:not(:first-child) {
-      border-bottom-left-radius: 0;
-      border-top-left-radius: 0;
-    }
-
-    &:last-child {
-      margin-right: 0;
-    }
-  }
-}

package/styles/mixins/helpers/container.css

@@ -1,12 +0,0 @@
-@mixin make-container() {
-  --width: 100%;
-  --max-width: 100vw;
-  --margin: auto;
-  --padding: 0 var(--grid-gutter);
-
-  width: var(--width);
-  max-width: var(--max-width);
-  margin-left: var(--margin);
-  margin-right: var(--margin);
-  padding: var(--padding);
-}

package/styles/mixins/helpers/grid.css

@@ -1,20 +0,0 @@
-@mixin make-grid() {
-  display: flex;
-  flex-wrap: wrap;
-  margin-top: calc(var(--grid-gutter-y) * -1);
-  margin-right: calc(var(--grid-gutter-x) * -0.5) !important;
-  margin-left: calc(var(--grid-gutter-x) * -0.5) !important;
-
-  & > * {
-    flex-shrink: 0;
-    width: 100%;
-    max-width: 100%;
-    padding-right: calc(var(--grid-gutter-x) * 0.5);
-    padding-left: calc(var(--grid-gutter-x) * 0.5);
-    margin-top: var(--grid-gutter-y);
-  }
-}
-
-@mixin make-col-offset($size) {
-  margin-left: calc(($i / 12) * 100%);
-}

package/styles/mixins/helpers/link.css

@@ -1,18 +0,0 @@
-@mixin make-linkStretched() {
-  &::after,
-  &::before {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 1;
-    pointer-events: auto;
-    content: "";
-    background-color: color-mod(var(--gray-9) a(0));
-  }
-
-  &::before {
-    z-index: -1;
-  }
-}

package/styles/mixins/helpers/wrap.css

@@ -1,7 +0,0 @@
-@mixin make-wrap-overflow() {
-  display: block;
-  width: 100%;
-  overflow-x: auto;
-  -webkit-overflow-scrolling: touch;
-  position: static !important;
-}

package/styles/mixins/modules/button.css

@@ -1,91 +0,0 @@
-@mixin make-button() {
-  --border-style: solid;
-  --border-width: 1px;
-  --border-color: var(--black-transparent-20);
-  --border-color-hover: var(--black-transparent-30);
-  --border-radius: var(--border-radius-medium);
-  --color: var(--body-color);
-  --color-hover: var(--body-color);
-  --color-focus: var(--body-color);
-  --shadow-color-active: var(--black-transparent-20);
-  --shadow-color-focus: var(--black-transparent-10);
-  --box-shadow-active: 0 0 0 0.125em var(--shadow-color-active);
-  --box-shadow-focus: 0 0 0 0.125em var(--shadow-color-focus);
-  --background-color: var(--white);
-  --background-color-hover: var(--white);
-  --background-color-focus: var(--black-transparent-5);
-  --padding-y: calc((var(--spacer) * 0.5) - 1.5px);
-  --padding-x: var(--spacer);
-  --padding: var(--padding-y) var(--padding-x);
-  --align-items: center;
-  --display: inline-flex;
-  --vertical-align: top;
-  --cursor: pointer;
-  --justify-content: center;
-  --text-align: center;
-  --white-space: nowrap;
-  --height: auto;
-  --width: auto;
-  --outline: 0;
-  --text-decoration: none;
-  --pointer-events: auto;
-  --opacity: 1;
-
-  display: var(--display);
-  border-width: var(--border-width);
-  border-style: var(--border-style);
-  border-color: var(--border-color);
-  color: var(--color);
-  background-color: var(--background-color);
-  padding: var(--padding);
-  border-radius: var(--border-radius);
-  font-size: var(--font-size-base);
-  align-items: var(--align-items);
-  justify-content: var(--justify-content);
-  text-align: var(--text-align);
-  vertical-align: var(--vertical-align);
-  cursor: var(--cursor);
-  white-space: var(--white-space);
-  height: var(--height);
-  width: var(--width);
-  outline: var(--outline);
-  text-decoration: var(--text-decoration);
-  pointer-events: var(--pointer-events);
-  opacity: var(--opacity);
-
-  &.active,
-  &:active,
-  &:hover {
-    border-color: var(--border-color-hover);
-  }
-
-  &.active,
-  &:active,
-  &:focus,
-  &:hover {
-    background-color: var(--background-color-hover);
-    color: var(--color-hover);
-    text-decoration: var(--text-decoration);
-  }
-
-  &.active,
-  &:active {
-    box-shadow: var(--box-shadow-active);
-    color: var(--color-focus);
-  }
-
-  &:focus {
-    color: var(--color-focus);
-    background-color: var(--background-color-focus);
-
-    &:not(:active):not(.active) {
-      box-shadow: var(--box-shadow-focus);
-    }
-  }
-
-  &.active,
-  &:active,
-  &:focus {
-    z-index: 1;
-  }
-}

package/styles/mixins/modules/card.css

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