@trilogy-ds/styles 0.0.1-beta.5 → 0.0.1-beta.50

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/components/_switch.scss

@@ -1,209 +0,0 @@
-$switch-margin: 10px !default;
-$switch-paddle-offset: 2px !default;
-$switch-height: 22px;
-$switch-width: $switch-height * 2;
-$paddle-height: $switch-height - $switch-paddle-offset * 2;
-$paddle-width: $paddle-height;
-
-.switch[type='checkbox'] {
-    outline: 0;
-    user-select: none;
-    display: inline-block;
-    position: absolute;
-    opacity: 0;
-
-    &[disabled] {
-        cursor: not-allowed;
-
-        + label {
-            opacity: 0.5;
-
-            &::before,
-            &::after {
-                opacity: 0.5;
-            }
-
-            &:hover {
-                cursor: not-allowed;
-            }
-        }
-    }
-
-    + label {
-        flex-direction: row-reverse;
-        justify-content: space-between;
-
-        &::before,
-        &::after {
-            content: '';
-            border: none;
-        }
-
-        &::before {
-            min-width: $switch-width;
-            flex-basis: $switch-width;
-            height: $switch-height;
-            background: getColor('grey-disabled');
-            border-radius: $radius * 4;
-            margin-right: 0;
-            margin-left: $switch-margin;
-        }
-
-        &::after {
-            content: '\f103';
-            margin-left: 0;
-            margin-right: 0;
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            width: $paddle-width;
-            height: $paddle-height;
-            color: getColor('grey-disabled');
-            left: auto;
-            right: $switch-width - $paddle-width - $switch-paddle-offset;
-            top: 50%;
-            transform: translateY(-50%);
-            background: getColor('background');
-            transition: all 0.25s ease-out;
-            border-radius: 100%;
-        }
-    }
-
-    &:checked {
-        + label {
-            &::before {
-              background: getColor('alternate');
-            }
-
-            &::after {
-                right: $switch-paddle-offset;
-                content: '\f102';
-                color: getColor('alternate');
-            }
-        }
-    }
-
-    &.is-success {
-        &:checked {
-            + label {
-                &::before {
-                    background: getColor('success');
-                }
-
-                &::after {
-                    color: getColor('success');
-                }
-            }
-        }
-    }
-
-    &.is-info {
-        &:checked {
-            + label {
-                &::before {
-                    background: getColor('info');
-                }
-
-                &::after {
-                    color: getColor('info');
-                }
-            }
-        }
-    }
-
-    &.is-warning {
-        &:checked {
-            + label {
-                &::before {
-                    background: getColor('warning');
-                }
-
-                &::after {
-                    color: getColor('warning');
-                }
-            }
-        }
-    }
-
-    &.is-error {
-        &:checked {
-            + label {
-                &::before {
-                    background: getColor('error');
-                }
-
-                &::after {
-                    color: getColor('error');
-                }
-            }
-        }
-    }
-
-    &.has-slice {
-        + label {
-            justify-content: center;
-            flex-direction: column;
-            align-items: flex-start;
-            padding-right: $switch-width + $switch-margin;
-
-            &::before {
-                position: absolute;
-                right: 0;
-                top: 50%;
-                transform: translateY(-50%);
-                margin-left: 0;
-            }
-
-            &::after {
-                position: absolute;
-            }
-        }
-    }
-
-    &.is-inverted {
-        + label::before {
-            background: getColor('background');
-        }
-
-        + label::after {
-            background: getColor('grey-disabled');
-        }
-
-        &:checked {
-            + label {
-                &::before {
-                    background: getColor('background');
-                }
-
-                &::after {
-                    background: getColor('alternate');
-                    color: getColor('background');
-                }
-            }
-        }
-
-        &.is-success {
-            &:checked + label::after {
-                background: getColor('success');
-            }
-        }
-
-        &.is-info {
-            &:checked + label::after {
-                background: getColor('info');
-            }
-        }
-
-        &.is-warning {
-            &:checked + label::after {
-                background: getColor('warning');
-            }
-        }
-
-        &.is-error {
-            &:checked + label::after {
-                background: getColor('error');
-            }
-        }
-    }
-}