@trilogy-ds/styles 0.0.1-beta-1

package/framework/src/elements/_loader.scss

@@ -0,0 +1,126 @@
+$loader-item-width: 60px;
+$loader-item-height: 30px;
+$loader-items-lateral-offset: -25px;
+$loader-items-bottom-offset: -40px;
+
+.loader {
+    width: $loader-item-width;
+    height: $loader-item-height;
+    background-color: transparent;
+    position: relative;
+
+    &::after,
+    &::before,
+    .loader-body {
+        content: '';
+        display: block;
+        width: $loader-item-width;
+        height: $loader-item-height;
+        border-radius: 50%;
+    }
+
+    .loader-body {
+        visibility: hidden;
+        background-color: getColor('alternate');
+        animation: 2.5s linear 0s forwards infinite top_item;
+    }
+
+    &::after,
+    &::before {
+        position: absolute;
+        bottom: $loader-items-bottom-offset;
+    }
+
+    &::before {
+        width: 20px;
+        height: 20px;
+        left: calc(50% - 10px);
+        z-index: zindex('small');
+        background-color: getColor('font');
+        animation: 2.5s linear 0s forwards infinite left_item;
+    }
+
+    &::after {
+        width: 20px;
+        height: 20px;
+        right: calc(50% - 20px);
+        background-color: getColor('main');
+        animation: 2.5s linear 0s forwards infinite right_item;
+    }
+
+    @keyframes top_item {
+        0% {
+            visibility: visible;
+            transform: scale(0, 0);
+        }
+
+        50% {
+            visibility: visible;
+            transform: scale(1, 0);
+        }
+
+        65%,
+        100% {
+            visibility: visible;
+            transform: scale(1);
+        }
+    }
+
+    @keyframes left_item {
+        0% {
+            transform: rotate(55deg) scale(1);
+        }
+
+        45% {
+            width: $loader-item-width;
+            height: $loader-item-height;
+            transform: rotate(55deg) scale(1);
+        }
+
+        50%,
+        54% {
+            transform: rotate(55deg) scale(1.5);
+        }
+
+        60% {
+            transform: rotate(55deg) scale(1);
+        }
+
+        65%,
+        100% {
+            transform: rotate(55deg) scale(1);
+            width: $loader-item-width;
+            height: $loader-item-height;
+            left: $loader-items-lateral-offset;
+        }
+    }
+
+    @keyframes right_item {
+        0% {
+            transform: rotate(-55deg) scale(1);
+        }
+
+        45% {
+            width: $loader-item-width;
+            height: $loader-item-height;
+            transform: rotate(-55deg) scale(1);
+        }
+
+        50%,
+        54% {
+            transform: rotate(-55deg) scale(1.5);
+        }
+
+        60% {
+            transform: rotate(-55deg) scale(1);
+        }
+
+        65%,
+        100% {
+            transform: rotate(-55deg) scale(1);
+            width: $loader-item-width;
+            height: $loader-item-height;
+            right: $loader-items-lateral-offset;
+        }
+    }
+}

package/framework/src/elements/_notification.scss

@@ -0,0 +1,151 @@
+.notification {
+  cursor: pointer;
+  transition: box-shadow $animation-duration;
+
+  &:hover,
+  &:active,
+  &:focus {
+    box-shadow: $shadow;
+  }
+
+  .icon,
+  .call-to-action {
+    color: getColor('font');
+  }
+
+  @include apply-shadow-box();
+
+  padding: 2em 2em;
+  background-color: getColor('background');
+  border-radius: $radius;
+  margin-bottom: 20px;
+  position: relative;
+
+  @include mobile {
+    flex-wrap: wrap;
+  }
+
+  pre code {
+    background: transparent;
+  }
+
+  & > .delete {
+    position: absolute;
+    right: 5px;
+    top: 5px;
+  }
+
+  .call-to-action .button {
+    background-color: getColor('main');
+    border-color: getColor('main');
+  }
+
+  @each $name in $colors-brand-funcionnal {
+    $brandName: getColorBrandName($name);
+    $color: getColor($name);
+    $color-invert: invertColor($name);
+
+    &.is-#{$brandName} {
+      .icon, .title {
+        color: $color;
+      }
+      .call-to-action .button {
+        color: $color-invert;
+      }
+    }
+  }
+
+  &.is-banner {
+    @include desktop {
+      padding-left: 150px;
+      padding-right: 150px;
+    }
+
+    box-shadow: none;
+    border-radius: 0;
+    padding: $spacing-4;
+    margin-bottom: 0;
+  }
+
+  &:not(.has-description) > .icon {
+    align-self: center;
+  }
+
+  &.has-description {
+    @include mobile {
+      justify-content: center;
+      text-align: center;
+
+      .icon {
+        padding: 0;
+        margin-bottom: 30px;
+      }
+
+      .body {
+        flex: 0 1 auto;
+      }
+    }
+  }
+
+  &.has-body {
+    display: flex;
+  }
+
+  > .icon {
+    flex: none;
+    align-self: flex-start;
+    padding-right: 27px;
+    font-size: 32px;
+  }
+
+  > .body {
+    align-self: center;
+    color: getColor('font');
+    margin-bottom: 0;
+    flex-grow: 1;
+    padding: 1px; /* Fixes flex behavior on Safari mobile */
+
+    @include mobile {
+      flex: 1;
+    }
+  }
+
+  > .call-to-action {
+    padding-left: 4em;
+    align-self: center;
+    flex: none;
+
+    @include mobile {
+      flex: 0 1 100%;
+      margin-top: 20px;
+      padding-left: 0;
+    }
+  }
+
+  &.is-small {
+    box-shadow: none;
+    padding: 14px;
+
+    > .icon {
+      padding-right: 10px;
+      width: 40px;
+      font-size: 20px;
+    }
+
+    .title,
+    .text,
+    .paragraph {
+      font-size: $text-14 !important;
+      text-align: left;
+    }
+    color: getColor('font');
+
+    @each $name, $pair in $colors-feedback {
+      $bg-color: nth($pair, 1);
+      &.is-#{$name} {
+        background-color: getColor($bg-color);
+      }
+    }
+
+  }
+}

package/framework/src/elements/_options.scss

@@ -0,0 +1,146 @@
+.options {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+
+    @include desktop {
+        flex-wrap: nowrap;
+    }
+
+    .field {
+        margin: 15px 20px 15px 0;
+        min-width: 70px;
+
+        &:last-child {
+          margin: 15px 0 15px 0;
+        }
+
+        input[type=radio] {
+            @include checkradio;
+
+            + label {
+                border: 1px solid currentColor;
+                border-radius: $radius-small;
+                color: getColor('font');
+                font-weight: $weight-medium;
+                padding: 6px 15px;
+
+                &::before {
+                    border-radius: 100%;
+                    border-width: 2px;
+                    border-color: currentColor;
+                    min-width: 12px;
+                    min-height: 12px;
+                }
+            }
+
+            &:checked + label {
+                color: getColor('alternate');
+                border-color: currentColor;
+                border-width: 2px;
+
+                &::before {
+                    content: "";
+                    mask-image: url('./assets/icons/all/check.svg');
+                    background-color: getColor('alternate');
+                    border-width: 0;
+                    width: 20px;
+                    height: 20px;
+                    margin: 0 6px 0 -4px;
+                   mask-size: 20px;
+                }
+            }
+
+            &[disabled] + label {
+                cursor: not-allowed;
+                color: getColor('grey');
+                border-color: currentColor;
+
+                &::before {
+                    border-color: currentColor;
+                }
+            }
+        }
+
+        &.has-icon {
+            input[type=radio] {
+                + label {
+                    padding-right: 45px;
+
+                    .icon {
+                        position: absolute;
+                        right: 15px;
+                        top: 50%;
+                        transform: translateY(-50%);
+                        height: 20px;
+                        width: 20px;
+                    }
+                }
+
+                &:checked + label {
+                    .icon {
+                       color: getColor('alternate');
+                    }
+                }
+
+                &[disabled] + label {
+                    .icon {
+                      color: getColor('grey');
+                    }
+                }
+            }
+        }
+
+        &.is-multiline {
+            min-width: 120px;
+
+            input[type=radio] {
+                + label {
+                    padding-top: 55px;
+                    justify-content: center;
+                    flex-direction: column;
+
+                    &::before {
+                        position: absolute;
+                        top: 15px;
+                        left: 15px;
+                    }
+
+                    &.is-descriptive > span:not(.icon) {
+                        font-size: $text-12;
+                        font-weight: $weight-medium;
+                    }
+
+                    .icon {
+                        position: absolute;
+                        top: 0;
+                        font-size:30px;
+                        width:100%;
+                    }
+                }
+
+                &:checked + label {
+                    color: getColor('alternate');
+
+                    &::before {
+                        margin-top: -5px;
+                    }
+
+                }
+
+                &[disabled] + label {
+                  color: getColor('grey');
+                }
+            }
+        }
+    }
+
+    &.is-inverted {
+        input[type=radio]:checked {
+            + label {
+                border-color: getColor('font');
+                color: getColor('font');
+            }
+        }
+    }
+}

package/framework/src/elements/_other.scss

@@ -0,0 +1,44 @@
+.block {
+    @include block;
+}
+
+.delete {
+    @include delete;
+}
+
+.heading {
+    display: block;
+    font-size: 11px;
+    letter-spacing: 1px;
+    margin-bottom: 5px;
+    text-transform: uppercase;
+}
+
+.highlight {
+    @include block;
+
+    font-weight: $weight-normal;
+    max-width: 100%;
+    overflow: hidden;
+    padding: 0;
+
+    pre {
+        overflow: auto;
+        max-width: 100%;
+    }
+}
+
+.number {
+    align-items: center;
+    background-color: getColor('grey-light');
+    border-radius: $radius-rounded;
+    display: inline-flex;
+    font-size: $size-medium;
+    height: 2em;
+    justify-content: center;
+    margin-right: 15px;
+    min-width: 2.5em;
+    padding: 2.5px 5px;
+    text-align: center;
+    vertical-align: top;
+}

package/framework/src/elements/_paragraph.scss

@@ -0,0 +1,101 @@
+$text-levels: (
+    ($text-16, $text-20, $text-16),
+    ($text-14, $text-18, $text-16),
+    ($text-12, $text-15, $text-16),
+    ($text-10, $text-12, $text-16)
+);
+$text-levels-mobile: (
+    ($text-16, $text-20, $text-8),
+    ($text-14, $text-18, $text-8),
+    ($text-12, $text-15, $text-8),
+    ($text-10, $text-12, $text-8)
+);
+
+
+.paragraph {
+    &.text {
+        @each $text-level in $text-levels {
+            $i: index($text-levels, $text-level);
+            $font-size: nth($text-level, 1);
+            $line-height: nth($text-level, 2);
+            $margin-bottom: nth($text-level, 3);
+
+            &.is-level-#{$i} {
+                font-size: $font-size;
+                line-height: $line-height;
+                font-family: $family-primary;
+                margin-bottom: $margin-bottom;
+            }
+
+            &.is-inverted {
+                color: getColor('background');
+            }
+        }
+
+        @include mobile {
+            @each $text-level-mobile in $text-levels-mobile {
+                $i: index($text-levels-mobile, $text-level-mobile);
+                $margin-bottom: nth($text-level-mobile, 3);
+
+                &.is-level-#{$i} {
+                    margin-bottom: $margin-bottom;
+                }
+            }
+        }
+
+        &.is-wrapped {
+            word-break: break-word;
+        }
+
+        &.bold {
+            font-weight: $weight-bold;
+        }
+    }
+}
+
+
+.paragraph,
+.text {
+    & a.link:not([disabled]),
+    a {
+        padding: $spacing-1;
+        margin: -4px;
+        text-decoration: underline;
+        font-size: unset;
+        font-weight: $weight-medium;
+
+        &::after {
+            content: none;
+        }
+
+        &.is-static::after {
+            margin-bottom: 0;
+        }
+    }
+}
+
+.paragraph:not(:last-child) {
+    margin-bottom: 10px;
+}
+
+.span {
+    font-style: inherit;
+    font-weight: inherit;
+}
+
+.strong {
+    color: inherit;
+    font-weight: $weight-bold;
+}
+
+.sup {
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+    top: -0.4em;
+    font-size: 0.7em;
+}
+
+.small {
+    font-size: 0.875em;
+}