@trilogy-ds/styles 0.0.1-beta-1

package/framework/src/components/_price.scss

@@ -0,0 +1,209 @@
+$price-levels: (
+  ($text-64),
+  ($text-56),
+  ($text-44),
+  ($text-32),
+  ($text-28),
+  ($text-24),
+  ($text-20),
+);
+
+
+.price {
+    display: inline-flex;
+    // flex-wrap: wrap;
+    &:not(.is-inlined){
+        font-size: 44px;
+    }
+
+
+    @each $price-level in $price-levels {
+        $i: index($price-levels, $price-level);
+        $font-size: nth($price-level , 1);
+
+        &.is-level-#{$i} {
+            font-size: $font-size;
+
+            @if $i > 4 {
+                .price-details {
+                    padding-left: 2px !important;
+                }
+            }
+          }
+
+    // the details : cents + period
+
+    .price-details {
+        padding-left: $spacing-1;
+
+        .cents,
+        .centimes,
+        .periode,
+        .period {
+            line-height: 1;
+            display: block;
+        }
+
+        .cents,
+        .centimes {
+            font-weight: 600;
+            font-size: 0.475em;
+            vertical-align: top;
+            text-align: left;
+
+            sup {
+                font-weight: $weight-medium;
+                padding-left: 2px;
+                top: -0.3em;
+            }
+        }
+
+        .period,
+        .periode {
+            font-size: 0.375em;
+            margin-top: 0;
+            padding-left: 0.1em;
+            text-align: left;
+        }
+    }
+
+
+    }
+
+    // FIXME : le nom de cette classe devrait être préfixé de "price-"
+    .main,
+    .price-main {
+        font-weight: $weight-semibold;
+        line-height: 0.8;
+        margin-bottom: 0;
+    }
+
+
+
+
+
+    // rendre les is-n deprecated dans 4 versions -  v1.18.11 -
+
+    &.is-1 {
+        font-size: 56px;
+    }
+
+    &.is-2 {
+        font-size: 44px;
+    }
+
+    &.is-3 {
+        font-size: 32px;
+    }
+
+    &.is-4 {
+        font-size: 29px;
+    }
+
+    &.is-5 {
+        font-size: 23px;
+    }
+
+    &.is-6 {
+        font-size: 14px;
+    }
+
+    &.is-huge {
+        font-size: 62px;
+    }
+
+    &.is-main-price {
+        color: getColor('alternate');
+    }
+
+    &.is-inverted {
+        color: getColor('background');
+    }
+
+    &.has-suptitle {
+        display: flex;
+        flex-wrap: wrap;
+
+        .price-suptitle {
+            flex-basis: 100%;
+            font-size: 0.375em;
+        }
+    }
+
+    &.has-description {
+        .cents,
+        .centimes {
+            align-items: flex-start;
+            display: flex;
+        }
+
+        .icon {
+            height: inherit;
+            width: inherit;
+        }
+    }
+
+    &.is-inlined {
+        .price-details {
+            display: inline-flex;
+            margin-left: 0;
+            padding-left: 0 !important;
+            .cents,
+            .centimes,
+            .periode,
+            .period {
+                font-size: inherit;
+                line-height: 0.8;
+                padding-left: 0;
+            }
+        }
+
+        &.is-striked {
+            &::before {
+                transform: rotate(-12deg);
+            }
+        }
+    }
+
+    &.is-striked {
+        position: relative;
+        color: getVariantColor('font', 2);
+
+        &::before {
+            position: absolute;
+            content: "";
+            left: 0;
+            top: 50%;
+            right: 0;
+            border-top: 2px solid;
+            border-color: getColor('font');
+            border-radius: 5px;
+            transform: rotate(-20deg);
+        }
+
+        &.is-main-price {
+            color: getVariantColor('alternate', 2);
+            &::before {
+                border-color: getColor('alternate');
+            }
+        }
+
+        &.is-inverted {
+            color: getVariantColor('background', 2);
+
+            &::before {
+                border-color: getColor('background');
+            }
+        }
+
+        &.has-suptitle {
+            display: inline-flex;
+            margin-top: 0.55em;
+
+            .price-suptitle {
+                position: absolute;
+                top: -1.4em;
+            }
+        }
+    }
+}

package/framework/src/components/_product-tour.scss

@@ -0,0 +1,131 @@
+$product-tour-target-outline: rgba(10,10,10,.86); // comes from Bulma's .modal-background defaults
+
+.product-tour {
+    position: absolute;
+    z-index: zindex('modal');
+    visibility: hidden;
+    opacity: 0;
+    background-color: getColor('background');
+    border-radius: $radius;
+    box-shadow: $shadow;
+    width: 350px;
+    padding: $spacing-3 * 2;
+
+    @include mobile {
+        max-width: inherit;
+    }
+
+    .arrow {
+        position: absolute;
+        top: 0;
+        right: auto !important;
+        bottom: auto !important;
+        left: 50%;
+        margin-top: -4px;
+        margin-left: -4px;
+        border-width: 4px;
+        border-style: solid;
+        border-color: transparent transparent #fff #fff;
+        transform: rotate(135deg);
+        height: 0;
+        width: 0;
+        box-shadow: -1px 1px 2px rgba(10, 10, 10, 0.2);
+        transform-origin: center;
+        pointer-events: none;
+
+        @include mobile {
+            display: none;
+        }
+
+        &.is-one-fifth { left: 20%; }
+        &.is-one-quarter { left: 25%; }
+        &.is-one-third { left: 33%; }
+        &.is-two-fifths { left: 40%; }
+        &.is-three-fifths { left: 60%; }
+        &.is-two-thirds { left: 66%; }
+        &.is-three-quarters { left: 75%; }
+        &.is-four-fifths { left: 80%; }
+
+        &.is-right {
+            top: 50% !important;
+            right: 0 !important;
+            bottom: auto !important;
+            left: 100% !important;
+            transform: rotate(-135deg);
+        }
+
+        &.is-bottom {
+            top: 100% !important;
+            bottom: auto !important;
+            right: auto !important;
+            transform: rotate(-45deg);
+        }
+
+        &.is-left {
+            top: 50% !important;
+            bottom: auto !important;
+            left: 0 !important;
+            right: 100% !important;
+            transform: rotate(45deg);
+        }
+
+        &.is-left,
+        &.is-right {
+            &.is-one-fifth { top: 20% !important; }
+            &.is-one-quarter { top: 25% !important; }
+            &.is-one-third { top: 33% !important; }
+            &.is-two-fifths { top: 40% !important; }
+            &.is-three-fifths { top: 60% !important; }
+            &.is-two-thirds { top: 66% !important; }
+            &.is-three-quarters { top: 75% !important; }
+            &.is-four-fifths { top: 80% !important; }
+        }
+    }
+
+    &.is-active {
+        opacity: 1;
+        visibility: visible;
+    }
+
+    &.has-icon-left,
+    &.has-icon-right {
+        > .icon:not(.close) {
+            position: absolute;
+            top: 0;
+            left: 0;
+            background: white;
+            border-radius: 100%;
+            box-shadow: $shadow;
+            transform: translate(-50%, -50%);
+
+            @include mobile {
+                display: none;
+            }
+
+            img {
+                flex-shrink: 0; // IE11 fix
+            }
+        }
+    }
+
+    &.has-icon-right {
+        > .icon:not(.close) {
+            left: 100% !important;
+            right: 0;
+        }
+    }
+
+    .close {
+        position: absolute;
+        top: 0;
+        right: 0;
+    }
+}
+
+.product-tour-target {
+    &-active {
+        outline: 999em solid $product-tour-target-outline !important;
+        outline-offset: 10px !important;
+        z-index: zindex('modal');
+    }
+}

package/framework/src/components/_progress-radial.scss

@@ -0,0 +1,23 @@
+.progress-radial {
+    background: radial-gradient(white 58%, transparent 51%),
+        conic-gradient(gainsboro 0deg 360deg, gainsboro 0deg 360deg);
+    border-radius: 50%;
+    width: 124px;
+    height: 124px;
+    position: relative;
+
+    .progress-radial-content {
+        border: 1px solid white;
+        border-radius: 50%;
+        width: 102px;
+        height: 102px;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+    }
+}

package/framework/src/components/_range.scss

@@ -0,0 +1,84 @@
+.range-container {
+    @mixin appearence {
+        appearance: none;
+        height: 5px;
+    }
+
+    @mixin slider-thumb {
+        appearance: none;
+        width: 20px;
+        height: 20px;
+        background-color: white;
+        pointer-events: auto;
+        border-radius: 50%;
+        box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
+        outline: none;
+        border: none;
+    }
+    .range {
+        width: 100%;
+        position: relative;
+        margin-top: 18px;
+        margin-bottom: 20px;
+
+        .range-track {
+            width: 100%;
+            height: 8px;
+            border-radius: 8px;
+            position: absolute;
+            margin: auto;
+            top: 0;
+            bottom: 0;
+            color: getColor('alternate');
+            @include mobile {
+                height: 4px;
+                border-radius: 4px;
+            }
+        }
+
+        .range-cursor {
+            appearance: none;
+            -webkit-appearance: none;
+            -moz-appearance: none;
+            width: 100%;
+            outline: none;
+            position: absolute;
+            margin: auto;
+            top: 0;
+            bottom: 0;
+            background-color: transparent;
+            pointer-events: none;
+
+            &::-webkit-slider-runnable-track {
+                @include appearence;
+            }
+
+            &::-moz-range-track {
+                @include appearence;
+            }
+
+            &::-ms-track {
+                @include appearence;
+            }
+
+            &::-webkit-slider-thumb {
+                @include slider-thumb;
+                margin-top: -8px;
+            }
+
+            &::-moz-range-thumb {
+                @include slider-thumb;
+            }
+
+            &::-ms-thumb {
+                @include slider-thumb;
+            }
+        }
+    }
+    .range-values {
+        display: flex;
+        justify-content: space-between;
+        padding-top: 14px;
+        font-weight: bold;
+    }
+}

package/framework/src/components/_scroll-view.scss

@@ -0,0 +1,19 @@
+.scroll-view {
+  overflow: auto;
+
+  &.scroll-horizontal {
+    overflow-x: scroll;
+    overflow-y: hidden;
+    &.scroll-snap {
+      scroll-snap-type: x mandatory;
+      >.div {
+        scroll-snap-align: start;
+      }
+    }
+  }
+
+  &.scroll-vertical {
+    overflow-y: scroll;
+    overflow-x: hidden;
+  }
+}

package/framework/src/components/_search-modal.scss

@@ -0,0 +1,197 @@
+$searchbar-height: 60px;
+$searchbar-height-desktop: 80px;
+
+.search-modal {
+    opacity: 0;
+    pointer-events: none;
+
+    &.is-active,
+    &.is-expanded { // TODO: deprecate .is-expanded (replacement: is-active)
+        opacity: 1;
+        pointer-events: all;
+        height: 100%;
+        position: absolute;
+        top: -$searchbar-height;
+        right: 0;
+        bottom: 0;
+        left: 0;
+
+        @include tablet {
+            top: -$searchbar-height-desktop;
+        }
+
+        .search-bar {
+            height: $searchbar-height;
+            border-bottom: 1px solid getColor('grey-light');
+            opacity: 1;
+
+            @include desktop {
+                height:$searchbar-height-desktop;
+            }
+        }
+
+        .search-results {
+            opacity: 1;
+        }
+
+        .modal-background {
+            opacity: 1;
+        }
+    }
+
+    .modal-background {
+        opacity: 0;
+        position: fixed;
+        z-index: zindex('small');
+
+        @include mobile {
+            z-index: zindex('medium');
+        }
+    }
+
+    .search-bar {
+        position: absolute;
+        z-index: zindex('large');
+        display: flex;
+        align-items: center;
+        background-color: getColor('background');
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 0;
+        opacity: 0;
+
+        @include mobile {
+            padding: 0 20px;
+        }
+
+        @include tablet {
+            left: $logo-width-desktop;
+            padding-left: calc(25% - #{$logo-width-desktop});
+        }
+
+        .field {
+            margin-top: 0;
+            margin-bottom: 0;
+            flex-grow: 1;
+
+            > .control {
+                > .input {
+                    border: 0;
+                    border-radius: 0;
+                    background-color: getColor('background');
+
+                    @include mobile {
+                        background-color: getColor('grey-lighter');
+                    }
+
+                    &:hover {
+                        border: 0;
+                    }
+                }
+            }
+        }
+    }
+
+    .search-results {
+        position: absolute;
+        top: $searchbar-height-desktop;
+        left: 25%;
+        right: 25%;
+        background-color: getColor('background');
+        z-index: zindex('large');
+        padding: 20px;
+        opacity: 0;
+        display: none;
+
+        @include tablet {
+            padding-left: 55px;
+        }
+
+        @include mobile {
+            top: $searchbar-height;
+            left: 0;
+            right: 0;
+        }
+
+        &.is-active {
+            display: block;
+        }
+
+        li {
+            a {
+                display: block;
+                margin-left: -55px;
+                margin-right: -20px;
+                padding: 5px 20px 5px 55px;
+
+                &:hover,
+                &.is-active {
+                    color: getVariantColor('alternate',2);
+                    background-color: getColor('grey-lighter');
+                }
+
+                span {
+                    flex-grow: 1;
+                }
+            }
+        }
+
+        .search-autosuggest {
+            a {
+                span {
+                    display: inline-block;
+                    margin-left: 10px;
+                    font-size: $text-10;
+                    color: getColor('grey');
+                }
+            }
+        }
+
+        .search-autocomplete {
+            a {
+                span {
+                    color: getVariantColor('alternate',2);
+                    font-weight: bold;
+                }
+            }
+        }
+    }
+}
+
+.search-no-modal {
+    .search-results {
+        li {
+            a {
+                display: block;
+                margin-left: -55px;
+                margin-right: -20px;
+                padding: 5px 20px 5px 55px;
+
+                span {
+                    flex-grow: 1;
+                }
+            }
+        }
+
+        .search-autosuggest {
+            a {
+                span {
+                    display: inline-block;
+                    margin-left: 10px;
+                    font-size: $text-10;
+                    color: getColor('grey');
+                }
+            }
+        }
+
+        .search-autocomplete {
+            a {
+                span {
+                    color: getVariantColor('alternate',2);
+                    font-weight: bold;
+                }
+            }
+        }
+    }
+}

package/framework/src/components/_segmented-control.scss

@@ -0,0 +1,60 @@
+.segmented-control {
+    border-radius: 6px;
+    padding: $spacing-1;
+    border: 1px solid getColor('grey-light');
+    background-color: getColor('grey-lighter');
+    display: inline-block;
+    margin: 16px 0;
+
+    @include mobile {
+        display: flex;
+        margin: 24px auto;
+        width: 100%;
+    }
+
+    .segmented-control-item {
+        padding: 0 $spacing-5;
+        border-radius: 4px;
+        font-size: 16px;
+        text-align: center;
+        border: 2px solid transparent;
+        height: 42px;
+        color: getColor('font');
+        background-color: getColor('grey-lighter');
+        font-family: $body-family;
+
+        &:not(:last-child) {
+            margin-right: 4px;
+        }
+
+        @include mobile {
+            padding: 0 $spacing-4;
+            flex: 1 1 0;
+            width: 0;
+            text-overflow: ellipsis;
+            overflow: hidden;
+        }
+
+        &:hover {
+            cursor: pointer;
+            background-color: transparent;
+            color: getColor('alternate');
+            border-color: currentColor;
+        }
+
+        &.is-active {
+            background-color: getColor('alternate');
+            color: invertColor('alternate');
+            font-weight: 600;
+        }
+
+        &[disabled] {
+            background-color: getColor('grey-disabled');
+            border-color: getColor('grey-disabled');
+            color: getColor('grey-darker');
+            &:hover {
+                cursor: not-allowed;
+            }
+        }
+    }
+}