@trilogy-ds/styles 0.0.1-beta-1

package/framework/src/elements/_checkradio.scss

@@ -0,0 +1,173 @@
+.is-checkradio[type='radio'],
+.is-checkradio[type='checkbox'] {
+    @include checkradio;
+
+    + label {
+        &.is-descriptive {
+            flex-wrap: wrap;
+
+            span {
+                flex-basis: 100%;
+                display: inline-block;
+                padding-left: 25px;
+                margin-top: 5px;
+                font-size: $text-13;
+                color: getColor('grey');
+            }
+
+            &:after {
+                top: 2px;
+                left: 1px;
+                line-height: 18px;
+            }
+        }
+    }
+
+    &:focus-visible {
+        + label {
+            &::before {
+                outline: 1px auto getColor('font');
+            }
+        }
+    }
+
+    &:hover:not([disabled]) {
+        + label {
+            &::before {
+                border-color: getColor('grey-dark');
+            }
+        }
+    }
+
+    &:checked {
+        + label {
+            &::before {
+                animation-name: none;
+                border-color: getColor('grey');
+                color: getColor('alternate');
+            }
+
+            &::after {
+                display: block;
+            }
+        }
+
+        &[disabled] {
+            cursor: not-allowed;
+
+            + label {
+                opacity: 0.5;
+            }
+        }
+    }
+
+    &[disabled] {
+        cursor: not-allowed;
+
+        + label {
+            opacity: 0.5;
+            cursor: not-allowed;
+
+            &:hover,
+            &::before,
+            &::after {
+                cursor: not-allowed;
+            }
+        }
+
+        &:hover {
+            cursor: not-allowed;
+
+            &::before {
+                animation-name: none;
+            }
+        }
+
+        &::before,
+        &::after {
+            cursor: not-allowed;
+        }
+    }
+
+    &.is-inverted {
+        + label::before,
+        &:hover:not([disabled]) + label::before,
+        &:checked + label::before {
+            border-color: getColor('background');
+        }
+
+        + label,
+        &:checked + label::before {
+            color: getColor('background');
+        }
+    }
+}
+
+.is-checkradio[type='checkbox'] {
+    + label {
+        &::before {
+            margin-right: 16px;
+            border-radius: $radius-small;
+        }
+
+        &::after {
+            content: url('data:image/svg+xml; utf8, <svg viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" fill="none"><path d="M11.3 22.4L18.1 29.3L32.7 14.7"/></svg>');
+            display: none;
+            line-height: 0;
+            margin: 0;
+            width: 14px;
+            height: 14px;
+            background-color: getColor('alternate');
+            overflow: hidden;
+            border-radius: 3px;
+            left: 1px;
+        }
+    }
+
+    &.is-inverted {
+        + label::after {
+            color: getColor('background');
+        }
+    }
+}
+
+.is-checkradio[type='radio'] {
+    + label {
+        line-height: 1;
+
+        &::before,
+        &::after {
+            margin-right: 16px; // put size instead
+            border-radius: 100%;
+        }
+
+        &::after {
+            top: 50%;
+            transform: translateY(-50%);
+            left: 2px;
+            width: 12px;
+            height: 12px;
+        }
+
+        &.is-descriptive {
+            &::after {
+                top: 8px;
+                left: 2px;
+            }
+        }
+    }
+
+    &:checked {
+        + label {
+            &::after {
+                background-color: getColor('alternate');
+            }
+        }
+    }
+
+    &.is-inverted {
+        &:checked + label::after {
+            background-color: getColor('background');
+        }
+    }
+}

package/framework/src/elements/_chips.scss

@@ -0,0 +1,100 @@
+$chip-radius: 30px !default;
+
+.chips-list {
+    align-items: center;
+    display: inline-flex;
+    justify-content: flex-start;
+    margin-bottom: 16px;
+    flex-wrap: wrap;
+
+    // multi-chips : ajout d'une marge bottom, supprimable par facette
+    &:not(.is-gapless) {
+        &:not(:last-child) {
+            margin-right: 8px;
+        }
+
+        .chips {
+            margin-bottom: 10px;
+        }
+    }
+
+    // multi-chips : ajout d'une marge à droite de chaque chip
+    .chips:not(:last-child) {
+        margin-right: 8px;
+    }
+
+    // centrage des chips
+    &.is-centered {
+        justify-content: center;
+    }
+
+    &.is-multiple {
+        .chips.is-active:before {
+            content: "";
+            mask-image: url('./assets/icons/all/check.svg');
+            background-color: getColor('background');
+            margin-right: 4px;
+            margin-left: -8px;
+            width: 20px;
+            height: 20px;
+            mask-size: 20px;
+        }
+    }
+
+    .chips {
+        align-items: center;
+        background-color: getColor('grey-lighter');
+        border-radius: $chip-radius;
+        color: getColor('font');
+        display: inline-flex;
+        font-weight: 400;
+        font-size: $size-normal;
+        height: 32px;
+        justify-content: center;
+        line-height: 2;
+        padding: 6px $spacing-4;
+        white-space: nowrap;
+        cursor: pointer;
+        border: 1px solid getColor('grey-light');
+
+        &:not(.is-disabled) {
+            &:hover {
+                background-color: getColor('grey-light');
+                border: 2px solid currentColor;
+                color: getColor('alternate');
+                padding: 5px 15px;
+            }
+
+            &:focus,
+            &:focus-visible,
+            &.is-active {
+                background-color: getColor('alternate');
+                color: white;
+                font-weight: 600;
+                border: 2px solid getColor('alternate');
+                padding: 5px 15px;
+            }
+        }
+
+        &.is-disabled {
+            background-color: getColor('grey-disabled');
+            color: getColor('grey-darker');
+            cursor: no-drop;
+            border: 1px solid getColor('grey-disabled');
+        }
+
+        &.is-inverted {
+            background-color: white;
+            color: getColor('alternate');
+
+            &:active,
+            &:hover,
+            &:focus,
+            &:focus-visible,
+            &.is-active {
+                background-color: getColor('alternate') !important;
+                color: getColor('background') !important;
+            }
+        }
+    }
+}

package/framework/src/elements/_container.scss

@@ -0,0 +1,108 @@
+.container {
+  margin: 0 auto;
+  position: relative;
+
+  &.is-fullhd {
+    width: auto;
+  }
+
+  &.is-sticky-top,
+  &.is-sticky-bottom {
+    background-color: getColor('background');
+  }
+
+  &.is-sticky-top {
+    z-index: 1000;
+  }
+
+  &.is-sticky-bottom {
+    z-index: 999;
+  }
+
+  @include desktop {
+    max-width: $desktop - 2 * $gap;
+    width: $desktop - 2 * $gap;
+
+    &.is-fluid {
+      margin-left: $gap;
+      margin-right: $gap;
+      max-width: none;
+      width: auto;
+    }
+  }
+
+  @include until-widescreen {
+    &.is-widescreen {
+      max-width: $widescreen - 2 * $gap;
+      width: auto;
+    }
+  }
+
+  @include until-fullhd {
+    &.is-fullhd {
+      max-width: $fullhd - 2 * $gap;
+      width: auto;
+    }
+  }
+
+  @include widescreen {
+    max-width: $widescreen - 2 * $gap;
+    width: $widescreen - 2 * $gap;
+  }
+
+  @include fullhd {
+    max-width: $fullhd - 2 * $gap;
+    width: $fullhd - 2 * $gap;
+  }
+
+  &:not(.is-fluid) {
+    @include desktop {
+      width: 904px;
+      max-width: 904px;
+    }
+
+    @include widescreen {
+      width: 1160px;
+      max-width: 1160px;
+    }
+
+    @include fullhd {
+      width: 1308px;
+      max-width: 1308px;
+    }
+  }
+
+  &.is-fluid {
+    @include fullhd {
+      margin: 0 auto;
+      max-width: $fullhd - 2 * $gap;
+    }
+  }
+
+  &.is-medium {
+    max-width: 960px;
+    margin: auto;
+  }
+
+  &.is-fullwidth {
+    max-width: 100%;
+    width: 100%;
+  }
+}
+
+main,
+header .navbar,
+header,
+footer {
+  > .container {
+    &.is-fluid {
+      @include desktop {
+        margin: 0 auto;
+      }
+
+      @include fullhd {
+        max-width: 100%;
+      }
+    }
+  }
+}

package/framework/src/elements/_dot.scss

@@ -0,0 +1,6 @@
+.dot {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    border-radius: 100%;
+}

package/framework/src/elements/_entry.scss

@@ -0,0 +1,109 @@
+.input,
+.textarea {
+    @include input;
+
+    padding-left: $spacing-4;
+    padding-right: $spacing-4;
+    font-family: $body-family;
+    font-size: $size-medium;
+    max-width: 100%;
+    width: 100%;
+
+    &:focus-visible,
+    :focus {
+      outline: 1px auto getColor('alternate');
+    }
+
+    // Colors
+    @each $name in $colors-brand-funcionnal {
+      $color: getColor($name);
+      $color-invert: invertColor($name);
+      $brandName: getColorBrandName($name);
+
+        &.is-#{$brandName} {
+          border: 2px solid $color;
+          &:focus-visible,
+          &:hover,
+          &.is-hovered,
+          &:focus,
+          &.is-focused {
+            outline: 1px auto $color !important;
+          }
+        }
+    }
+
+    // Sizes
+    &.is-small {
+        @include control-small;
+    }
+
+    &.is-large {
+        @include control-large;
+    }
+
+    &.is-fullwidth {
+        display: block;
+        width: 100%;
+    }
+
+    &.is-inline {
+        display: inline;
+    }
+
+    .icon-status {
+        color: aqua !important;
+    }
+
+    & label {
+      margin-top: 10px;
+    }
+}
+
+.input {
+    &::-ms-clear {
+        display: none;
+    }
+
+    &.is-small {
+        height: 24px;
+    }
+
+    &.is-rounded {
+        border-radius: $radius-rounded;
+        padding-left: 1em;
+        padding-right: 1em;
+    }
+
+    &.is-static {
+        background-color: transparent;
+        border-color: transparent;
+        padding-left: 0;
+        padding-right: 0;
+    }
+}
+
+.textarea {
+    display: block;
+    max-width: 100%;
+    min-width: 100%;
+    resize: vertical;
+    padding-top: 15px;
+
+
+    &:not([rows]) {
+        max-height: 600px;
+        min-height: 120px;
+    }
+
+    &[rows] {
+        height: initial;
+    }
+
+    &.has-fixed-size {
+        resize: none;
+    }
+}
+
+.textarea[disabled]:hover {
+  outline: 1px auto getColor('grey-disabled') !important;
+}