@trilogy-ds/styles 0.0.1-beta-1

package/framework/src/base/_loading.scss

@@ -0,0 +1,102 @@
+@use "sass:math";
+
+@keyframes loading-pulse {
+    100% {
+        opacity: .1;
+    }
+}
+
+@mixin text-blocks() {
+    p.suptitle {
+        @content;
+    }
+}
+
+@mixin loading {
+    &.is-loading,
+    .is-loading & {
+        @content;
+    }
+}
+
+p.is-loading,
+.is-loading p {
+    @include text-tags {
+        visibility: hidden;
+    }
+}
+
+.is-loading {
+    @include unselectable;
+
+    &.is-checkradio[type="checkbox"] + label::before,
+    .is-checkradio[type="checkbox"] + label::before,
+    &.is-checkradio[type="checkbox"] + label::after,
+    .is-checkradio[type="checkbox"] + label::after {
+        visibility: hidden;
+    }
+
+    &.field,
+    .field {
+        .icon {
+            display: none;
+        }
+
+        .input {
+            border: 0;
+            pointer-events: none;
+
+            &::placeholder {
+                color: transparent;
+            }
+        }
+    }
+
+    filter: grayscale(1);
+    cursor: default !important;
+
+    // make the text elements like subtle animated lines
+    @include text-tags {
+        display: inline;
+        border-radius: 99em;
+        background: currentColor !important;
+        box-decoration-break: clone;
+        font-size: 70%;
+        letter-spacing: 2px;
+        -webkit-animation: loading-pulse 1.5s ease-out infinite alternate;
+        -moz-animation: none;
+        opacity: .2;
+    }
+
+    @include text-blocks {
+        display: block;
+    }
+
+    // we need the headings to have margins AND be inline
+    @include heading-tags {
+        display: table; // FIXME: well... `@include clearfix;` didn't do the trick
+    }
+
+    & & {
+        @include disable-animation;
+    }
+}
+
+// skeleton transitions
+//
+.is-loaded {
+    /**
+    The shape of the animation are designed so that the final state appears
+    as quick as possible. This should enhance the speed index
+    */
+    @include text-tags {
+        transition-duration: math.div($animation-duration, 2);
+        transition-timing-function: $animation-timing-function;
+        transition-property: font-size, letter-spacing;
+
+        /**
+        Animations are too slow on FF. We choose to disable it until they fix the problem
+        */
+        -moz-transition: none;
+    }
+}

package/framework/src/base/_reset.scss

@@ -0,0 +1,138 @@
+/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */
+// Blocks
+.reset-wrap {
+    p,
+    ol,
+    ul,
+    li,
+    dl,
+    dt,
+    dd,
+    blockquote,
+    figure,
+    fieldset,
+    legend,
+    textarea,
+    pre,
+    iframe,
+    hr,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        margin: 0;
+        padding: 0;
+    }
+
+    // Headings
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        font-size: 100%;
+        font-weight: normal;
+    }
+
+    p:not(:last-child) {
+        margin-bottom: 10px;
+    }
+
+    a {
+        cursor: pointer;
+        text-decoration: none;
+    }
+
+    // List
+    ul {
+        list-style: none;
+    }
+
+    // Form
+    button,
+    input,
+    select,
+    textarea {
+        margin: 0;
+    }
+
+    // Media
+    img,
+    audio,
+    video {
+        height: auto;
+        max-width: 100%;
+    }
+
+    // Iframe
+    iframe {
+        border: 0;
+    }
+
+    // Table
+    table {
+        border-collapse: collapse;
+        border-spacing: 0;
+    }
+
+    td,
+    th {
+        padding: 0;
+        text-align: left;
+
+        &:not([align]) {
+            text-align: left;
+        }
+    }
+
+    span {
+        font-style: inherit;
+        font-weight: inherit;
+    }
+
+    strong {
+        color: inherit;
+        font-weight: $weight-bold;
+    }
+
+    sup {
+        line-height: 0;
+        position: relative;
+        vertical-align: baseline;
+        top: -.4em;
+        font-size: .7em;
+    }
+
+    small {
+        font-size: 0.875em;
+    }
+
+    code {
+        font-size: $size-7;
+        padding: 4px 8px;
+    }
+
+    code,
+    pre {
+        -moz-osx-font-smoothing: auto;
+        -webkit-font-smoothing: auto;
+        font-family: $family-code;
+    }
+
+    pre {
+        @include overflow-touch;
+        font-size: 0.875em;
+        overflow-x: auto;
+        padding: 12.5px 15px;
+        white-space: pre;
+        word-wrap: normal;
+
+        code {
+            font-size: 1em;
+            padding: 0;
+        }
+    }
+}

package/framework/src/components/_accordion.scss

@@ -0,0 +1,178 @@
+.accordions#{$suffix} {
+  padding-left: 0;
+  padding-right: 0;
+  margin: $spacing-4 0;
+
+  .accordion {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    background-color: invertColor(currentColor, 'accordion');
+    font-size: $size-normal;
+    border: 1px solid getColor('grey-disabled');
+    border-radius: 8px;
+    margin: 8px 0;
+    min-height: 56px;
+    max-height: max-content;
+
+    .accordion-body {
+      display: none;
+      padding: $spacing-4;
+      padding-top: 0 !important;
+    }
+
+    &.is-active > .accordion-header:first-child, [data-accordion-toggle]:checked ~ .accordion-header {
+      font-weight: bold;
+      & .toggle {
+        &::before {
+          @include arrow(getColor('font'), 'up');
+        }
+      }
+    }
+
+    &.is-active > .accordion-header:first-child ~ .accordion-body, [data-accordion-toggle]:checked ~ .accordion-body {
+      display: block;
+    }
+
+    &:hover:not(.is-disabled) {
+      border: 2px solid getColor('alternate');
+
+      .accordion-header {
+        color: getColor('alternate');
+        padding: 15px;
+      }
+
+      .accordion-body {
+        padding: 15px;
+        padding-top: 1px !important;
+      }
+    }
+
+    &:not(:first-child) {
+      .accordion-header {
+        border-radius: 0;
+      }
+    }
+
+    &:not(:last-child) {
+      .accordion-content {
+        border-radius: 0;
+      }
+    }
+
+    &:first-child {
+      margin-top: 0;
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    &.is-disabled {
+      background-color: getColor('bg-disabled');
+      cursor: no-drop;
+      .accordion-header,
+      .accordion-header .toggle::before {
+        color: getColor('disabled');
+        cursor: no-drop;
+      }
+
+      &.is-active {
+        .accordion-header:not(input) + .accordion-body {
+          color: getColor('grey');
+        }
+      }
+    }
+
+    .accordion-header {
+      align-items: center;
+      display: flex;
+      position: relative;
+      height: auto;
+      cursor: pointer;
+      padding: $spacing-4;
+
+      &.is-grouped {
+        > *:first-child {
+          flex-grow: 0;
+        }
+      }
+
+      .field:not(:last-child) {
+        margin-bottom: 0;
+      }
+
+      .accordion-title {
+        .title {
+          margin: 0;
+        }
+
+        @include mobile() {
+          flex-grow: 1;
+        }
+      }
+
+      .toggle {
+        -moz-appearance: none;
+        -webkit-appearance: none;
+        user-select: none;
+        border: none;
+        background-color: transparent;
+        cursor: pointer;
+        display: inline-block;
+        flex-grow: 0;
+        flex-shrink: 0;
+        height: 20px;
+        width: 20px;
+        max-height: 20px;
+        max-width: 20px;
+        min-height: 20px;
+        min-width: 20px;
+        outline-offset: 8px;
+        position: relative;
+        vertical-align: top;
+        margin-left: auto;
+        padding: 0 0 0 10px;
+
+        &::after {
+          display: none;
+        }
+
+        &::before {
+          @include arrow(getColor('grey-dark'));
+          top: -0.25em;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          width: 15px;
+          height: 5px;
+          margin: auto;
+        }
+      }
+
+      p {
+        margin-bottom: 0;
+      }
+
+      & + .accordion-body {
+        overflow-y: hidden;
+        .accordion-content {
+          border-radius: $radius;
+          margin-bottom: 10px;
+
+          @include mobile() {
+            padding: 15px;
+          }
+        }
+      }
+    }
+
+    .accordion-body {
+      .accordion-content,
+      p:last-child {
+        margin-bottom: 0 !important;
+        padding: 0 !important;
+      }
+    }
+  }
+}

package/framework/src/components/_all.scss

@@ -0,0 +1,30 @@
+@charset "utf-8";
+@import '../utilities/spacing';
+
+@import 'disclaimer';
+@import 'divider';
+@import 'breadcrumb';
+@import 'switch';
+@import 'card';
+@import 'dropdown';
+@import 'level';
+@import 'menu';
+@import 'modal';
+@import 'pagination';
+@import 'popover';
+@import 'product-tour';
+@import 'price';
+@import 'tabs';
+@import 'accordion';
+@import 'countdown';
+@import 'timeline';
+@import 'slices';
+@import 'stepper';
+@import 'slider';
+@import 'plus-symbol';
+@import 'otp';
+@import 'segmented-control';
+@import 'progress-radial';
+@import 'range';
+@import 'scroll-view';
+@import 'fab';

package/framework/src/components/_autolayout2.scss

@@ -0,0 +1,38 @@
+body:not(.is-tight) {
+  .box {
+    margin-top: 16px;
+  }
+  .box:not(:first-child) + * {
+    margin-top: 16px;
+  }
+  * + .box {
+    margin-top: 8px;
+  }
+  .text {
+    margin-top: 8px;
+  }
+  .card {
+    margin-top: 16px;
+  }
+  .button {
+    margin-top: 16px;
+  }
+  .accordions {
+    margin-top: 16px;
+  }
+  .alert {
+    margin-top: 16px;
+  }
+  .field {
+    margin-top: 8px;
+  }
+  .chips-list {
+    margin-top: 16px;
+  }
+  .tags {
+    margin-top: 16px;
+  }
+  .chips-list {
+    margin-top: 16px;
+  }
+}

package/framework/src/components/_breadcrumb.scss

@@ -0,0 +1,45 @@
+.breadcrumb {
+    @include block;
+    @include unselectable;
+
+    ul,
+    ol {
+        @include desktop {
+            display: flex;
+            flex-wrap: wrap;
+        }
+    }
+
+    li {
+        display: inline;
+        position: relative;
+
+        @include desktop {
+            display: flex;
+            align-items: center;
+        }
+
+        &:first-child a {
+            margin-left: 0;
+        }
+
+        &.is-active {
+            a {
+                color: getColor('font');
+                cursor: default;
+                pointer-events: none;
+            }
+        }
+
+        + li a::before {
+            content: ">";
+            text-align: center;
+            padding-right: 0.5em;
+        }
+    }
+
+    a {
+        color: getColor('alternate');
+        margin: 0 0.5em;
+    }
+}