@trilogy-ds/styles 0.0.1-beta.9 → 0.0.2-alpha-prompt

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

@@ -1,23 +0,0 @@
-.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/_search-modal.scss

@@ -1,197 +0,0 @@
-$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/_slices.scss

@@ -1,316 +0,0 @@
-.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

@@ -1,92 +0,0 @@
-[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;
-        }
-    }
-}

package/framework/src/elements/_all.scss

@@ -1,35 +0,0 @@
-@charset "utf-8";
-@import '../utilities/spacing';
-
-@import 'alert';
-@import 'badge';
-@import 'box';
-@import 'button';
-@import 'chips';
-@import 'checkbox';
-@import 'checkradio';
-@import 'container';
-@import 'dot';
-@import 'entry';
-@import 'form';
-@import 'icon';
-@import 'image';
-@import 'loader';
-@import 'link';
-@import 'list';
-@import 'notification';
-@import 'toaster';
-@import 'options';
-@import 'progress';
-@import 'paragraph';
-@import 'radio';
-@import 'switch';
-@import 'table';
-@import 'tag';
-@import 'title';
-@import 'other';
-@import 'select';
-@import 'sticker';
-@import 'textarea';
-@import 'input-gauge';
-@import 'input-icons';