@trilogy-ds/styles 0.0.1-beta-1

package/framework/src/components/_slices.scss

@@ -0,0 +1,316 @@
+.slices {
+    display: flex;
+    background-color: getColor('background');
+    flex-direction: column;
+
+    > .slice:not(:last-child),
+    > .slice-group:not(:last-child) {
+        border-bottom: 1px solid getColor('grey-light');
+    }
+
+    &.is-transparent {
+        background-color: transparent;
+
+        .slice {
+            background-color: transparent;
+        }
+    }
+}
+
+.slice {
+    padding: 20px 0;
+    display: flex;
+    background-color: getColor('background');
+
+    &:not(.is-disabled):hover {
+        cursor: pointer;
+
+        .title {
+            color: getColor('alternate');
+        }
+
+        .slice-icon,
+        .slice-image {
+            @include tablet {
+                padding-left: 5px;
+                transition: padding-left 150ms ease-in-out;
+            }
+        }
+
+        .slice-call-to-action,
+        .slice-cta {
+            color: getColor('alternate');
+
+            @include tablet {
+                padding-right: 5px;
+                transition: padding-right 150ms ease-in-out;
+            }
+        }
+    }
+
+    > * {
+        align-self: center;
+    }
+
+    .slice-icon,
+    .slice-image {
+        flex-grow: 0;
+        margin-right: 30px;
+    }
+
+    .slice-image {
+        .image {
+            align-items: center;
+            display: flex;
+            justify-content: center;
+            height: 100px;
+            width: 100px;
+
+            img {
+                max-height: 100%;
+                max-width: 100%;
+            }
+
+            .is-rounded {
+                max-height: 65%;
+                max-width: 65%;
+            }
+        }
+    }
+
+    &:not(.is-illustrated-mobile) {
+        .slice-icon,
+        .slice-image {
+            @include mobile {
+                display: none;
+            }
+        }
+    }
+
+    &.has-long-cta {
+        @include mobile {
+            flex-wrap: wrap;
+
+            > * {
+                align-self: flex-start;
+            }
+        }
+
+        .slice-call-to-action,
+        .slice-cta {
+            @include mobile {
+                flex: 0 1 100%;
+                margin-top: 20px;
+            }
+        }
+
+        .slice-icon ~ .slice-call-to-action,
+        .slice-image ~ .slice-call-to-action,
+        .slice-icon ~ .slice-cta,
+        .slice-image ~ .slice-cta {
+            text-align: center;
+        }
+    }
+
+    .slice-content {
+        flex: 1;
+        padding: 1px; /* Fix flex behavior on safari mobile */
+        margin-right: 20px;
+        text-align: left;
+
+        p {
+            margin: 0;
+        }
+
+        p:not(.title) {
+            font-size: 13px;
+            color: getColor('font');
+        }
+    }
+
+    .slice-call-to-action,
+    .slice-cta {
+        flex-grow: 0;
+        white-space: nowrap;
+
+        @include mobile {
+            .button.is-text {
+                display: inline;
+                white-space: pre-wrap;
+            }
+        }
+
+        .tri-ui-arrow-right-r {
+            font-size: 20px;
+        }
+    }
+
+    > .field {
+        width: 100%;
+
+        > .control {
+            position: relative;
+            display: flex;
+            align-items: center;
+            min-height: 45px;
+
+            .is-checkradio[type="checkbox"] {
+                &:checked {
+                    + label {
+                        &::after {
+                            top: inherit;
+                        }
+                    }
+                }
+            }
+
+            .is-checkradio[type="radio"] {
+                + label {
+                    &::before,
+                    &::after {
+                        width: 22px;
+                        height: 22px;
+                    }
+
+                    &::before {
+                        transform: translateY(0) translateY(0);
+                    }
+
+                    &::after {
+                        transform: scale(0.5) translateY(0) translateY(0);
+                        display: none;
+                    }
+                }
+
+                &:checked {
+                    + label {
+                        &::after {
+                            content: '';
+                            display: inline-block;
+                            top: 50%;
+                            margin-top: -11px;
+                            margin-left: 4px;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+.slice-select {
+    .slice {
+        .slice-body {
+            align-items: center;
+            display: flex;
+            width: 100%;
+
+            @include mobile {
+                flex-wrap: wrap;
+            }
+
+            .slice-call-to-action,
+            .slice-cta {
+                display: none;
+
+                @include mobile {
+                    width: 100%;
+                }
+            }
+        }
+
+        & > .field > .control > {
+            .is-checkradio[type="checkbox"],
+            .is-checkradio[type="radio"] {
+                &:checked {
+                    ~ .slice-body {
+                        .slice-icon,
+                        .slice-image {
+                            @include tablet {
+                                padding-left: 5px;
+                            }
+                        }
+
+                        .title {
+                            color: getColor('alternate');
+                        }
+
+                        .slice-call-to-action,
+                        .slice-cta {
+                            display: block;
+                            margin-top: 15px;
+
+                            @include tablet {
+                                padding-right: 5px;
+                                margin-top: 0;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+/* TODO: code obsolète, à effacer quand select-line (sélecteur de ligne) ne sera plus */
+.is-select-line.slices {
+    .slice {
+        padding: 0;
+
+        > .field > .control {
+            flex-direction: row;
+
+            @include mobile {
+                flex-wrap: wrap;
+            }
+
+            .slice-call-to-action,
+            .slice-cta {
+                display: none;
+                padding-right: 15px;
+
+                @include mobile {
+                    justify-content: center;
+                    padding-right: 0;
+                    width: 100%;
+                    margin-bottom: 20px;
+                }
+            }
+
+            .is-checkradio[type="checkbox"],
+            .is-checkradio[type="radio"] {
+                + label {
+                    padding: 20px 12.5px 20px 50px;
+                    margin: 0;
+                    flex-direction: row;
+
+                    &::before {
+                        left: -36px;
+                    }
+                }
+            }
+
+            .is-checkradio[type="checkbox"]:checked + label::after {
+                margin-left: 13px;
+            }
+
+            .is-checkradio[type="radio"]:checked + label::after {
+                margin-left: 14px;
+            }
+        }
+    }
+
+    &.is-mutually-exclusive {
+        .slice > .field > .control {
+            .is-checkradio[type="checkbox"],
+            .is-checkradio[type="radio"] {
+                &:checked {
+                    ~ .slice-call-to-action,
+                    ~ .slice-cta {
+                        display: block;
+                    }
+                }
+            }
+        }
+    }
+}

package/framework/src/components/_slider.scss

@@ -0,0 +1,92 @@
+[data-slider] {
+    position: relative;
+
+    [data-slider-pages] {
+        overflow: hidden;
+    }
+
+    [data-slider-page] {
+        &.column:not(.is-12-mobile) {
+            min-width: 0;
+        }
+    }
+
+    [data-slides-container] {
+        display: flex;
+    }
+
+    [data-slide] {
+        flex: 0 0 100%;
+    }
+
+    [data-slider-dots] {
+        position: absolute;
+        left: 50%;
+        bottom: -20px;
+        transform: translateX(-50%);
+
+        &:not(.is-inverted) {
+            .slider-dot {
+                background-color: getColor('background');
+            }
+        }
+
+        .slider-dot {
+            width: 7px;
+            height: 7px;
+            background-color: getColor('grey');
+            border-radius: 100%;
+            margin: 4px;
+            padding: 0;
+            opacity: 1;
+
+            &.is-active {
+                background-color: getColor('alternate');
+            }
+        }
+    }
+
+    [data-slider-prev],
+    [data-slider-next] {
+        display: none;
+
+        @include desktop {
+            box-shadow: 0 2px 4px 0 rgba(#000, 0.1);
+            display: flex;
+            position: absolute;
+            z-index: zindex("tiny");
+            top: 50%;
+            left: 30px;
+            transform: translateY(-50%);
+            cursor: pointer;
+        }
+    }
+
+    [data-slider-next] {
+        left: auto;
+        right: 30px;
+    }
+
+    &.is-motionless-desktop {
+        @include desktop {
+            pointer-events: none;
+
+            a,
+            .link,
+            .button {
+                pointer-events: auto;
+            }
+
+            [data-slider-page] {
+                min-width: auto;
+            }
+        }
+    }
+
+    > .pricing-table {
+        @include mobile {
+            flex-direction: row;
+            flex-wrap: nowrap;
+        }
+    }
+}