@trilogy-ds/styles 0.0.1-beta.9 → 0.0.1-calendar

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

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