@trilogy-ds/styles 0.0.1-beta.9 → 0.0.3-beta-v4

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');
-            }
-        }
-    }
-}

package/framework/src/elements/_checkradio.scss

@@ -1,173 +0,0 @@
-.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/_dot.scss

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

package/framework/src/elements/_notification.scss

@@ -1,151 +0,0 @@
-.notification {
-  cursor: pointer;
-  transition: box-shadow $animation-duration;
-
-  &:hover,
-  &:active,
-  &:focus {
-    box-shadow: $shadow;
-  }
-
-  .icon,
-  .call-to-action {
-    color: getColor('font');
-  }
-
-  @include apply-shadow-box();
-
-  padding: 2em 2em;
-  background-color: getColor('background');
-  border-radius: $radius;
-  margin-bottom: 20px;
-  position: relative;
-
-  @include mobile {
-    flex-wrap: wrap;
-  }
-
-  pre code {
-    background: transparent;
-  }
-
-  & > .delete {
-    position: absolute;
-    right: 5px;
-    top: 5px;
-  }
-
-  .call-to-action .button {
-    background-color: getColor('main');
-    border-color: getColor('main');
-  }
-
-  @each $name in $colors-brand-funcionnal {
-    $brandName: getColorBrandName($name);
-    $color: getColor($name);
-    $color-invert: invertColor($name);
-
-    &.is-#{$brandName} {
-      .icon, .title {
-        color: $color;
-      }
-      .call-to-action .button {
-        color: $color-invert;
-      }
-    }
-  }
-
-  &.is-banner {
-    @include desktop {
-      padding-left: 150px;
-      padding-right: 150px;
-    }
-
-    box-shadow: none;
-    border-radius: 0;
-    padding: $spacing-4;
-    margin-bottom: 0;
-  }
-
-  &:not(.has-description) > .icon {
-    align-self: center;
-  }
-
-  &.has-description {
-    @include mobile {
-      justify-content: center;
-      text-align: center;
-
-      .icon {
-        padding: 0;
-        margin-bottom: 30px;
-      }
-
-      .body {
-        flex: 0 1 auto;
-      }
-    }
-  }
-
-  &.has-body {
-    display: flex;
-  }
-
-  > .icon {
-    flex: none;
-    align-self: flex-start;
-    padding-right: 27px;
-    font-size: 32px;
-  }
-
-  > .body {
-    align-self: center;
-    color: getColor('font');
-    margin-bottom: 0;
-    flex-grow: 1;
-    padding: 1px; /* Fixes flex behavior on Safari mobile */
-
-    @include mobile {
-      flex: 1;
-    }
-  }
-
-  > .call-to-action {
-    padding-left: 4em;
-    align-self: center;
-    flex: none;
-
-    @include mobile {
-      flex: 0 1 100%;
-      margin-top: 20px;
-      padding-left: 0;
-    }
-  }
-
-  &.is-small {
-    box-shadow: none;
-    padding: 14px;
-
-    > .icon {
-      padding-right: 10px;
-      width: 40px;
-      font-size: 20px;
-    }
-
-    .title,
-    .text,
-    .paragraph {
-      font-size: $text-14 !important;
-      text-align: left;
-    }
-    color: getColor('font');
-
-    @each $name, $pair in $colors-feedback {
-      $bg-color: nth($pair, 1);
-      &.is-#{$name} {
-        background-color: getColor($bg-color);
-      }
-    }
-
-  }
-}

package/framework/src/elements/_options.scss

@@ -1,146 +0,0 @@
-.options {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-
-    @include desktop {
-        flex-wrap: nowrap;
-    }
-
-    .field {
-        margin: 15px 20px 15px 0;
-        min-width: 70px;
-
-        &:last-child {
-          margin: 15px 0 15px 0;
-        }
-
-        input[type=radio] {
-            @include checkradio;
-
-            + label {
-                border: 1px solid currentColor;
-                border-radius: $radius-small;
-                color: getColor('font');
-                font-weight: $weight-medium;
-                padding: 6px 15px;
-
-                &::before {
-                    border-radius: 100%;
-                    border-width: 2px;
-                    border-color: currentColor;
-                    min-width: 12px;
-                    min-height: 12px;
-                }
-            }
-
-            &:checked + label {
-                color: getColor('alternate');
-                border-color: currentColor;
-                border-width: 2px;
-
-                &::before {
-                    content: "";
-                    mask-image: url('./assets/icons/all/check.svg');
-                    background-color: getColor('alternate');
-                    border-width: 0;
-                    width: 20px;
-                    height: 20px;
-                    margin: 0 6px 0 -4px;
-                   mask-size: 20px;
-                }
-            }
-
-            &[disabled] + label {
-                cursor: not-allowed;
-                color: getColor('grey');
-                border-color: currentColor;
-
-                &::before {
-                    border-color: currentColor;
-                }
-            }
-        }
-
-        &.has-icon {
-            input[type=radio] {
-                + label {
-                    padding-right: 45px;
-
-                    .icon {
-                        position: absolute;
-                        right: 15px;
-                        top: 50%;
-                        transform: translateY(-50%);
-                        height: 20px;
-                        width: 20px;
-                    }
-                }
-
-                &:checked + label {
-                    .icon {
-                       color: getColor('alternate');
-                    }
-                }
-
-                &[disabled] + label {
-                    .icon {
-                      color: getColor('grey');
-                    }
-                }
-            }
-        }
-
-        &.is-multiline {
-            min-width: 120px;
-
-            input[type=radio] {
-                + label {
-                    padding-top: 55px;
-                    justify-content: center;
-                    flex-direction: column;
-
-                    &::before {
-                        position: absolute;
-                        top: 15px;
-                        left: 15px;
-                    }
-
-                    &.is-descriptive > span:not(.icon) {
-                        font-size: $text-12;
-                        font-weight: $weight-medium;
-                    }
-
-                    .icon {
-                        position: absolute;
-                        top: 0;
-                        font-size:30px;
-                        width:100%;
-                    }
-                }
-
-                &:checked + label {
-                    color: getColor('alternate');
-
-                    &::before {
-                        margin-top: -5px;
-                    }
-
-                }
-
-                &[disabled] + label {
-                  color: getColor('grey');
-                }
-            }
-        }
-    }
-
-    &.is-inverted {
-        input[type=radio]:checked {
-            + label {
-                border-color: getColor('font');
-                color: getColor('font');
-            }
-        }
-    }
-}