@worksafevictoria/wcl7.5 1.0.0

package/src/components/Paragraphs/RichText/scss/base.scss

@@ -0,0 +1,355 @@
+/*! wysiwyg.css v0.0.3 | MIT License | github.com/jgthms/wysiwyg.css*/
+/* stylelint-disable */
+@import '../../../../includes/scss/all';
+.wysiwyg {
+  line-height: 1.6;
+  &.rtl {
+    @include makeRTL();
+  }
+  :deep() {
+    p.intro {
+      font-size: 24px;
+      line-height: 28px;
+      letter-spacing: 0px;
+    }
+    .cta-button:last-child {
+      margin-top: 16px;
+      margin-bottom: 0;
+    }
+    a:not(.wcl-cta):not(.cta-button) {
+      text-decoration: underline;
+      color: $black;
+      &:hover {
+        color: $blue;
+      }
+    }
+    abbr {
+      border-bottom: 1px dotted;
+      cursor: help;
+    }
+    cite {
+      font-style: italic;
+    }
+    hr {
+      background: #e6e6e6;
+      border: none;
+      display: block;
+      height: 1px;
+      margin-bottom: 1.4em;
+      margin-top: 1.4em;
+    }
+    img {
+      vertical-align: text-bottom;
+    }
+    ins {
+      background-color: lime;
+      text-decoration: none;
+    }
+    mark {
+      background-color: yellow;
+    }
+    small {
+      font-size: 0.8em;
+    }
+    strong {
+      font-style: normal;
+      font-weight: 600;
+    }
+    sub {
+      font-size: 0.8em;
+      vertical-align: sub;
+    }
+    sup {
+      font-size: 0.8em;
+      vertical-align: super;
+    }
+
+    h1 {
+      @include fp('font-size', 32, 40);
+      @include fp('line-height', 40, 48);
+      font-style: normal;
+      font-weight: 700;
+      letter-spacing: 0px;
+      margin-bottom: 24px;
+      margin-top: 64px;
+      &:first-child {
+        margin-top: 0;
+      }
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+    @media all and (-ms-high-contrast: none) {
+      ::-ms-backdrop,
+      h1 {
+        width: 650px;
+      } /* IE11 */
+      @media screen\9, screen and (max-width: 1150px) {
+        h1 {
+          width: 450px;
+        }
+      }
+      @media screen\9, screen and (max-width: 767px) {
+        h1 {
+          max-width: 350px;
+          overflow-x: hidden;
+          overflow-y: hidden;
+        }
+      }
+    }
+    h2 {
+      //styleName: Heading/H2;
+      font-size: 32px;
+      line-height: 36px;
+      // if needs to be fluid
+      // @include fp('font-size', 28, 32);
+      // @include fp('line-height', 32, 36);
+      font-style: normal;
+      font-weight: 700;
+      letter-spacing: 0px;
+      margin-bottom: 24px;
+      margin-top: 64px;
+      &:first-child {
+        margin-top: 0;
+      }
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+    h3 {
+      //styleName: Heading/H3;
+      font-size: 26px;
+      line-height: 30px;
+      font-style: normal;
+      font-weight: 700;
+      letter-spacing: 0px;
+      margin-bottom: 24px;
+      margin-top: 24px;
+      &:first-child {
+        margin-top: 0;
+      }
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    h3.card-title {
+      //styleName: Heading/H3;
+      font-size: 20px;
+      font-style: normal;
+      font-weight: 700;
+      line-height: 24px;
+      letter-spacing: 0px;
+      margin-bottom: 24px;
+      margin-top: 24px;
+      &:first-child {
+        margin-top: 0;
+      }
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    h4 {
+      //styleName: Heading/H4;
+      font-size: 24px;
+      font-style: normal;
+      font-weight: 700;
+      line-height: 28px;
+      letter-spacing: 0px;
+      margin-bottom: 24px;
+      margin-top: 24px;
+      &:first-child {
+        margin-top: 0;
+      }
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+    h5 {
+      //styleName: Heading/H5;
+      font-size: 20px;
+      font-style: normal;
+      font-weight: 700;
+      line-height: 24px;
+      letter-spacing: 0px;
+      margin-bottom: 24px;
+      margin-top: 24px;
+      &:first-child {
+        margin-top: 0;
+      }
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+    h6 {
+      //styleName: Heading/H6;
+      font-size: 16px;
+      font-style: normal;
+      font-weight: 700;
+      line-height: 20px;
+      letter-spacing: 0px;
+      margin-bottom: 24px;
+      margin-top: 24px;
+      &:first-child {
+        margin-top: 0;
+      }
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+    dd {
+      margin-left: 1.4em;
+    }
+    ol {
+      list-style-position: outside;
+      margin-left: 1.4em;
+      list-style-type: decimal;
+      margin-bottom: 1.4em;
+      ol {
+        list-style-type: lower-alpha;
+        ol {
+          list-style-type: lower-roman;
+          ol {
+            list-style-type: lower-greek;
+            ol {
+              list-style-type: decimal;
+              ol {
+                list-style-type: lower-alpha;
+              }
+            }
+          }
+        }
+      }
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+    ul {
+      list-style-position: outside;
+      margin-left: 1.4em;
+      list-style-type: disc;
+      margin-bottom: 1.4em;
+      ul {
+        list-style-type: circle;
+        ul {
+          list-style-type: square;
+          ul {
+            list-style-type: circle;
+            ul {
+              list-style-type: disc;
+              ul {
+                list-style-type: circle;
+              }
+            }
+          }
+        }
+      }
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+    blockquote {
+      border-left: 4px solid #e6e6e6;
+      padding: 0.6em 1.2em;
+      margin-bottom: 1.4em;
+      p {
+        margin-bottom: 16px;
+      }
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+    code {
+      -moz-osx-font-smoothing: auto;
+      -webkit-font-smoothing: auto;
+      background-color: $white;
+      color: $black;
+      font-size: 0.9em;
+      border-radius: 3px;
+      line-height: 1.77778;
+      padding: 0.1em 0.4em 0.2em;
+      vertical-align: baseline;
+    }
+    kbd {
+      -moz-osx-font-smoothing: auto;
+      -webkit-font-smoothing: auto;
+      background-color: $white;
+      color: $black;
+      font-size: 0.9em;
+      border-radius: 3px;
+      line-height: 1.77778;
+      padding: 0.1em 0.4em 0.2em;
+      vertical-align: baseline;
+    }
+    samp {
+      -moz-osx-font-smoothing: auto;
+      -webkit-font-smoothing: auto;
+      background-color: $white;
+      color: $black;
+      font-size: 0.9em;
+      border-radius: 3px;
+      line-height: 1.77778;
+      padding: 0.1em 0.4em 0.2em;
+      vertical-align: baseline;
+    }
+    pre {
+      -moz-osx-font-smoothing: auto;
+      -webkit-font-smoothing: auto;
+      background-color: $white;
+      color: $black;
+      font-size: 0.9em;
+      overflow: auto;
+      padding: 1em 1.2em;
+      margin-bottom: 1.4em;
+      code {
+        background: none;
+        font-size: 1em;
+        line-height: 1em;
+      }
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+    figure {
+      margin-bottom: 2.8em;
+      text-align: center;
+      &:first-child {
+        margin-top: 0;
+      }
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+    figcaption {
+      font-size: 0.8em;
+      margin-top: 0.875em;
+    }
+
+    li {
+      margin-bottom: 8px;
+      &:last-child {
+        margin-bottom: 0;
+      }
+      &:empty {
+        display: none;
+      }
+    }
+
+    p {
+      margin-bottom: 16px;
+      &:last-child {
+        margin-bottom: 0;
+      }
+      &:empty {
+        display: none;
+      }
+    }
+    dl {
+      margin-bottom: 1.4em;
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+}

package/src/components/Paragraphs/RichText/scss/definition-list.scss

@@ -0,0 +1,35 @@
+.wysiwyg {
+  :deep() {
+    dl {
+      margin: 0;
+      padding-left: 24px;
+
+      &.rtl {
+        direction: rtl;
+        text-align: right;
+        float: right;
+        padding-left: 0;
+        padding-right: 24px;
+        dd {
+          margin-left: 0;
+          margin-right: 24px;
+        }
+      }
+
+      dt,
+      dd {
+        font-size: 16px;
+        line-height: 24px;
+      }
+
+      dt {
+        font-weight: 600;
+        margin-bottom: 8px;
+      }
+
+      dd {
+        margin-left: 24px;
+      }
+    }
+  }
+}

package/src/components/Paragraphs/RichText/scss/styled-list.scss

@@ -0,0 +1,152 @@
+.wysiwyg {
+  :deep() {
+    ol,
+    ul {
+      margin-left: 0;
+      padding-left: 16px;
+      ol,
+      ul {
+        li {
+          margin-left: 16px;
+          @include mq('xs') {
+            margin-left: 0;
+          }
+        }
+      }
+    }
+
+    ol.styled-list {
+      margin-left: 16px;
+      li {
+        padding-left: 16px;
+        list-style-type: decimal;
+      }
+      &.rtl {
+        margin-left: 0;
+        margin-right: 16px;
+        li {
+          padding-left: 0px;
+          padding-right: 16px;
+        }
+      }
+    }
+    .styled-list {
+      margin: 0;
+      padding-left: 24px;
+      list-style: none;
+      display: block;
+      width: 100%;
+
+      // Nested ul and ol spacing defaults
+      ul,
+      ol {
+        display: block;
+        margin: {
+          top: 12px;
+        }
+      }
+
+      // Default all li
+      li {
+        margin-bottom: 12px;
+        list-style: none;
+        line-height: 24px;
+
+        img {
+          width: 16px;
+          height: 16px;
+          margin-right: 16px;
+          top: -1px;
+          position: relative;
+
+          &.tick {
+            filter: invert(43%) sepia(37%) saturate(467%) hue-rotate(60deg)
+              brightness(89%) contrast(97%);
+          }
+          &.cross {
+            filter: invert(34%) sepia(70%) saturate(5323%) hue-rotate(352deg)
+              brightness(93%) contrast(83%);
+          }
+        }
+      }
+      &.rtl {
+        direction: rtl;
+        text-align: right;
+        float: right;
+        li {
+          img {
+            margin-right: 0;
+            margin-left: 16px;
+          }
+        }
+      }
+
+      &[type='number'],
+      ol[type='number'] {
+        li {
+          list-style-type: decimal;
+        }
+      }
+
+      &[type='upper-a'],
+      ol[type='upper-a'] {
+        li {
+          list-style-type: upper-alpha;
+        }
+      }
+      &[type='lower-a'],
+      ol[type='lower-a'] {
+        li {
+          list-style-type: lower-alpha;
+        }
+      }
+      &[type='upper-i'],
+      ol[type='upper-i'] {
+        li {
+          list-style-type: upper-roman;
+        }
+      }
+      &[type='lower-i'],
+      ol[type='lower-i'] {
+        li {
+          list-style-type: lower-roman;
+        }
+      }
+      &[type='checkbox'] {
+        margin: 0;
+        padding: 0;
+        &.rtl {
+          li {
+            padding-left: 0;
+            padding-right: 16px;
+            &:before {
+              margin-right: 0px;
+              margin-left: 16px;
+            }
+            ul,
+            ol {
+              li {
+                padding-left: 16px;
+                padding-right: 0;
+              }
+            }
+          }
+        }
+        li {
+          list-style-type: none;
+          padding-left: 16px;
+          &:before {
+            content: '▢';
+            margin-right: 16px;
+          }
+          ul,
+          ol {
+            li {
+              padding-left: 0;
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/src/components/Paragraphs/RichText/scss/table.scss

@@ -0,0 +1,85 @@
+.wysiwyg {
+  :deep() {
+    table {
+      width: 100%;
+      table-layout: fixed;
+      margin-bottom: 32px;
+
+      td,
+      th {
+        white-space: normal;
+        word-wrap: break-word;
+      }
+
+      thead {
+        tr {
+          background: #e5e5e5;
+          th {
+            padding: 32px 16px;
+          }
+        }
+      }
+
+      tr {
+        th,
+        td {
+          border: 1px solid #ccc;
+          padding: 23px 16px;
+        }
+      }
+
+      tr:nth-child(even) {
+        background-color: $lightgray;
+      }
+    }
+
+    .table-stacked {
+      width: 100%;
+      min-width: 100%;
+
+      @include mq('xs') {
+        display: table;
+      }
+
+      thead {
+        @include mq('xs') {
+          display: none;
+        }
+      }
+      tr {
+        @include mq('xs') {
+          display: block;
+          width: 100%;
+          border-top: 1px solid #ccc;
+          padding: 16px 0;
+          break-after: avoid;
+          -webkit-break-after: avoid;
+        }
+        td {
+          span {
+            display: none;
+            font-weight: bold;
+            width: 50%;
+            float: left;
+
+            @include mq('xs') {
+              display: block;
+            }
+          }
+        }
+
+        th,
+        td {
+          @include mq('xs') {
+            width: 100%;
+            display: block;
+            padding: 5px;
+            margin: 0;
+            border: 0;
+            font-size: inherit;
+          }
+        }
+      }
+    }
+  }
+}