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

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/_chips.scss

@@ -1,100 +0,0 @@
-$chip-radius: 30px !default;
-
-.chips-list {
-    align-items: center;
-    display: inline-flex;
-    justify-content: flex-start;
-    margin-bottom: 16px;
-    flex-wrap: wrap;
-
-    // multi-chips : ajout d'une marge bottom, supprimable par facette
-    &:not(.is-gapless) {
-        &:not(:last-child) {
-            margin-right: 8px;
-        }
-
-        .chips {
-            margin-bottom: 10px;
-        }
-    }
-
-    // multi-chips : ajout d'une marge à droite de chaque chip
-    .chips:not(:last-child) {
-        margin-right: 8px;
-    }
-
-    // centrage des chips
-    &.is-centered {
-        justify-content: center;
-    }
-
-    &.is-multiple {
-        .chips.is-active:before {
-            content: "";
-            mask-image: url('./assets/icons/all/check.svg');
-            background-color: getColor('background');
-            margin-right: 4px;
-            margin-left: -8px;
-            width: 20px;
-            height: 20px;
-            mask-size: 20px;
-        }
-    }
-
-    .chips {
-        align-items: center;
-        background-color: getColor('grey-lighter');
-        border-radius: $chip-radius;
-        color: getColor('font');
-        display: inline-flex;
-        font-weight: 400;
-        font-size: $size-normal;
-        height: 32px;
-        justify-content: center;
-        line-height: 2;
-        padding: 6px $spacing-4;
-        white-space: nowrap;
-        cursor: pointer;
-        border: 1px solid getColor('grey-light');
-
-        &:not(.is-disabled) {
-            &:hover {
-                background-color: getColor('grey-light');
-                border: 2px solid currentColor;
-                color: getColor('alternate');
-                padding: 5px 15px;
-            }
-
-            &:focus,
-            &:focus-visible,
-            &.is-active {
-                background-color: getColor('alternate');
-                color: white;
-                font-weight: 600;
-                border: 2px solid getColor('alternate');
-                padding: 5px 15px;
-            }
-        }
-
-        &.is-disabled {
-            background-color: getColor('grey-disabled');
-            color: getColor('grey-darker');
-            cursor: no-drop;
-            border: 1px solid getColor('grey-disabled');
-        }
-
-        &.is-inverted {
-            background-color: white;
-            color: getColor('alternate');
-
-            &:active,
-            &:hover,
-            &:focus,
-            &:focus-visible,
-            &.is-active {
-                background-color: getColor('alternate') !important;
-                color: getColor('background') !important;
-            }
-        }
-    }
-}

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/_entry.scss

@@ -1,109 +0,0 @@
-.input,
-.textarea {
-    @include input;
-
-    padding-left: $spacing-4;
-    padding-right: $spacing-4;
-    font-family: $body-family;
-    font-size: $size-medium;
-    max-width: 100%;
-    width: 100%;
-
-    &:focus-visible,
-    :focus {
-      outline: 1px auto getColor('alternate');
-    }
-
-    // Colors
-    @each $name in $colors-brand-funcionnal {
-      $color: getColor($name);
-      $color-invert: invertColor($name);
-      $brandName: getColorBrandName($name);
-
-        &.is-#{$brandName} {
-          border: 2px solid $color;
-          &:focus-visible,
-          &:hover,
-          &.is-hovered,
-          &:focus,
-          &.is-focused {
-            outline: 1px auto $color !important;
-          }
-        }
-    }
-
-    // Sizes
-    &.is-small {
-        @include control-small;
-    }
-
-    &.is-large {
-        @include control-large;
-    }
-
-    &.is-fullwidth {
-        display: block;
-        width: 100%;
-    }
-
-    &.is-inline {
-        display: inline;
-    }
-
-    .icon-status {
-        color: aqua !important;
-    }
-
-    & label {
-      margin-top: 10px;
-    }
-}
-
-.input {
-    &::-ms-clear {
-        display: none;
-    }
-
-    &.is-small {
-        height: 24px;
-    }
-
-    &.is-rounded {
-        border-radius: $radius-rounded;
-        padding-left: 1em;
-        padding-right: 1em;
-    }
-
-    &.is-static {
-        background-color: transparent;
-        border-color: transparent;
-        padding-left: 0;
-        padding-right: 0;
-    }
-}
-
-.textarea {
-    display: block;
-    max-width: 100%;
-    min-width: 100%;
-    resize: vertical;
-    padding-top: 15px;
-
-
-    &:not([rows]) {
-        max-height: 600px;
-        min-height: 120px;
-    }
-
-    &[rows] {
-        height: initial;
-    }
-
-    &.has-fixed-size {
-        resize: none;
-    }
-}
-
-.textarea[disabled]:hover {
-  outline: 1px auto getColor('grey-disabled') !important;
-}

package/framework/src/elements/_image.scss

@@ -1,59 +0,0 @@
-.image {
-    display: block;
-    position: relative;
-
-    img {
-        display: block;
-        max-width: 100%;
-
-        &.b-loaded {
-            height: auto;
-        }
-    }
-}
-
-.b-lazy {
-    transition: opacity 250ms ease-in-out;
-    opacity: 0;
-
-    &.b-loaded {
-        opacity: 1;
-
-        &.has-bg-image {
-            &.has-bg-gradient {
-                &::before {
-                    opacity: 0;
-                }
-            }
-        }
-    }
-
-    &.has-bg-image {
-        background-repeat: no-repeat;
-        background-position: center center;
-        background-size: cover;
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        height: 100%;
-
-        &.has-bg-gradient {
-            z-index: zindex('void');
-            opacity: 1;
-
-            &::before {
-                content: '';
-                opacity: 1;
-                position: absolute;
-                top: 0;
-                left: 0;
-                right: 0;
-                bottom: 0;
-                z-index: zindex('tiny');
-                transition: opacity 750ms ease-in-out;
-            }
-        }
-    }
-}

package/framework/src/elements/_input-gauge.scss

@@ -1,37 +0,0 @@
-
-    .field .security-gauge-container {
-        width: 100%;
-        .security-gauge {
-            height: 4px;
-            background: getColor('grey-disabled');
-            border-radius: 4px;
-            margin: 8px 0;
-            .gauge {
-                height: 100%;
-                border-radius: 4px;
-            }
-        }
-
-        .security-gauge-verifies {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            .security {
-                display: flex;
-                align-items: center;
-                margin-bottom: 4px;
-                .icon {
-                    position: relative;
-                    color: getColor('grey');
-                    width: 16px;
-                    margin-right: 8px;
-                    font-size: 16px;
-                    margin-bottom:  -1px;
-
-                    .is-success {
-                        background-color: getColor('success')
-                    }
-                }
-            }
-        }
-    }

package/framework/src/elements/_input-icons.scss

@@ -1,41 +0,0 @@
-.field {
-
-    .has-icons-left {
-        input {
-            padding-left: 45px;
-        }
-        label {
-            left: 45px;
-        }
-        .icon-left
-         {
-            position: absolute;
-            height: 100%;
-            width: 45px;
-            left: 0;
-
-            i {
-                font-size: 20px;
-            }
-        }
-
-
-    }
-
-    .has-icons-right {
-        .icon-right
-         {
-            position: absolute;
-            height: 100%;
-            width: 45px;
-            z-index: 10;
-            right: 0;
-            left: auto;
-            i {
-                font-size: 20px;
-            }
-        }
-    }
-
-
-}

package/framework/src/elements/_link.scss

@@ -1,79 +0,0 @@
-.link:not([disabled]) {
-    position: relative;
-    font-size: 14px;
-    font-weight: $weight-medium;
-    color: getColor('alternate');
-    box-decoration-break: clone;
-    padding: $spacing-2;
-    margin: -8px;
-    text-decoration: underline;
-    cursor: pointer;
-
-    &:not(p .link) {
-        text-decoration-line: underline;
-        text-decoration-style: solid;
-        text-decoration-thickness: 2px;
-        text-underline-offset: 4px;
-    }
-
-    &:hover {
-        filter: brightness(70%);
-    }
-
-      &:focus,
-      &:focus-visible,
-      &.is-focused,
-      &:active,
-      &.is-active {
-        filter: brightness(50%);
-      }
-
-    @include desktop {
-        &:not(.is-static) {
-            display: inline-flex;
-            border-bottom-width: 0;
-        }
-    }
-
-    &.has-icon {
-        display: inline-flex;
-        align-items: center;
-
-        &::after {
-            width: calc(100% - 48px);
-            bottom: 5.5px;
-        }
-    }
-
-    &.is-static::after {
-        margin-bottom: 4px;
-    }
-
-    &.is-inverted {
-        color: getColor('background');
-
-      &.has-icon {
-        > .icon {
-          color: getColor('background');
-        }
-      }
-    }
-
-    @include touch {
-        white-space: normal !important;
-        box-decoration-break: clone;
-        display: inline;
-    }
-}
-
-@keyframes sliding-link {
-    50% {
-        left: 100%;
-        right: 0;
-    }
-
-    50.01% {
-        left: 0;
-        right: 100%;
-    }
-}

package/framework/src/elements/_list.scss

@@ -1,61 +0,0 @@
-// Bullet list classiques
-ul.list , ol.list{
-    margin-left: 30px;
-    li {
-        margin-bottom: 5px;
-    }
-}
-
-ul.list {
-  list-style: disc;
-
-  ul.list {
-    list-style: circle;
-  }
-}
-
-// Listes avec icônes
-ul.icon-list > li {
-    display: flex;
-    align-items: center;
-
-    span[disabled] {
-        opacity: 0.5;
-    }
-
-    .icon {
-        flex: none;
-    }
-}
-
-dl.dl {
-    dt {
-        font-weight: $weight-semibold;
-        margin-bottom: 5px;
-
-        &:not(:first-child) {
-            margin-top: 20px;
-        }
-    }
-
-    dd {
-        color: getColor('font');
-        font-size: $size-7;
-    }
-
-    &:not(:first-child) {
-        margin-top: 20px;
-    }
-
-    &.is-alternate {
-        dt {
-            color: getColor('font');
-            font-size: $size-7;
-        }
-
-        dd {
-            color: getColor('font');
-            font-size: $size-6;
-        }
-    }
-}