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

package/framework/src/elements/_box.scss

@@ -1,267 +0,0 @@
-@use 'sass:math';
-@import "../utilities/spacing";
-
-$space-between-tiles: 5px;
-$padding-box: $spacing-5;
-$padding-box-mobile: $spacing-4;
-
-a.box {
-  cursor: pointer;
-  transition: box-shadow $animation-duration;
-
-  &:hover,
-  &:active,
-  &:focus {
-    box-shadow: $focus-shadow;
-  }
-}
-
-.box {
-  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
-  background-color: getColor('background');
-  border-radius: $radius;
-  color: getColor('font');
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  position: relative;
-  padding: 24px;
-
-  @include mobile {
-    padding: 16px;
-  }
-
-  &:not(:last-child) {
-    margin-bottom: 15px;
-  }
-
-  &.has-background {
-    background-repeat: no-repeat;
-
-    &.is-inverted {
-      .box-content {
-        color: getColor('background');
-      }
-
-      .title,
-      .subtitle,
-      .text,
-      .paragraph,
-      p {
-        color: getColor('background');
-      }
-    }
-
-    .box-content {
-      background-color: transparent;
-    }
-  }
-
-
-  &.is-active {
-    border: 2px solid getColor('alternate');
-
-    > .box-header {
-      border-radius: ($radius - 2px) ($radius - 2px) 0 0;
-      padding-top: 6px;
-      padding-left: 22px;
-      padding-right: 6px;
-    }
-
-    ~ .box-content {
-      border-radius: 0 0 ($radius - 2px) ($radius - 2px);
-
-    }
-
-    > .box-content {
-      padding-left: 22px;
-      padding-right: 22px;
-      @include mobile {
-        padding-left: 14px;
-        padding-right: 14px;
-      }
-
-      &:first-child {
-        border-radius: ($radius - 2px) ($radius - 2px) 0 0;
-        padding-top: 22px;
-        @include mobile {
-          padding-top: 14px;
-        }
-
-      }
-
-      &:last-child {
-        border-radius: 0 0 ($radius - 2px) ($radius - 2px);
-        padding-bottom: 22px;
-        @include mobile {
-          padding-bottom: 14px;
-        }
-      }
-
-      &:only-child {
-        border-radius: ($radius - 2px);
-        padding: 22px;
-        @include mobile {
-          padding: 14px;
-        }
-      }
-    }
-
-    > .box-footer {
-      margin: 12.5px 5.5px 5.5px;
-    }
-  }
-
-  &.is-fullheight {
-    .box-content {
-      flex-grow: 1;
-    }
-  }
-
-  &.is-highlighted {
-    .box-content {
-      padding-left: 23px;
-      border-left: 8px solid transparent;
-    }
-
-    @each $name, $pair in $colors-brand-funcionnal {
-      $color: getColor($name);
-      $brandName: getColorBrandName($name);
-
-      &.is-#{$brandName} .box-content {
-        border-left-color: $color;
-        border-left-width: 4px;
-      }
-    }
-  }
-
-  &.is-flat {
-    box-shadow: none;
-    border: 1px solid getColor('grey-dark');
-
-    &.has-hat > .is-hat {
-      left: -1px;
-      right: -1px;
-    }
-
-    .box-header {
-      margin-top: calc(-#{$padding-box} - 1px);
-      margin-left: calc(-#{$padding-box} - 1px);
-      margin-right: calc(-#{$padding-box} - 1px);
-    }
-  }
-
-  .box-header {
-    z-index: inherit;
-    background-color: getColor('font');
-    color: getColor('background');
-    margin-top: -$padding-box;
-    margin-left: -$padding-box;
-    margin-right: -$padding-box;
-    padding: 8px;
-    padding-left: 24px;
-    box-shadow: none;
-    border-radius: $radius $radius 0 0;
-    font-size: 15px;
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
-    align-items: center;
-    font-weight: $weight-semibold;
-
-    @include mobile {
-      margin-top: -16px;
-      margin-left: -16px;
-      margin-right: -16px;
-    }
-
-    @include tablet {
-      flex-direction: row;
-      align-items: center;
-      justify-content: space-between;
-    }
-
-    > p:not(:last-child),
-    > .paragraph:not(:last-child) {
-      margin: 0 0 0.3em;
-
-      @include tablet {
-        align-self: center;
-        margin: 0 3em 0 0;
-      }
-    }
-
-    ~ .box-content {
-      margin-top: 0;
-      border-radius: 0 0 $radius $radius;
-    }
-  }
-
-  .box-content {
-    background-color: getColor('background');
-    color: getColor('font');
-    margin: -$padding-box;
-    padding: $padding-box;
-
-    @include mobile {
-      margin: -$padding-box-mobile;
-      padding: $padding-box-mobile;
-    }
-
-    @include mobile {
-      text-align: left;
-    }
-
-    &:first-child {
-      border-radius: $radius $radius 0 0;
-    }
-
-    &:last-child {
-      border-radius: 0 0 $radius $radius;
-    }
-
-    &:only-child {
-      border-radius: $radius;
-    }
-
-    > .is-unboxed {
-      margin-left: -$padding-box;
-      margin-right: -$padding-box;
-      width: auto;
-
-      @include desktop {
-        margin-left: -$padding-box;
-        margin-right: -$padding-box;
-      }
-    }
-
-    &.is-grey,
-    &.tiles-container {
-      padding: $padding-box;
-
-      .tile.is-parent,
-      .tile.is-child:not(.box) {
-        padding: $space-between-tiles;
-      }
-
-      .tile.is-vertical > .tile.is-child:not(:last-child) {
-        margin-bottom: ($space-between-tiles * 2) !important;
-      }
-
-      .box {
-        box-shadow: none;
-        padding: $padding-box;
-      }
-    }
-
-    &.is-transparent {
-      background-color: transparent;
-    }
-  }
-
-  .box-footer {
-    padding-top: $padding-box;
-    border-top: 1px solid getColor('grey-disabled');
-    margin: 12.5px 7.5px 7.5px;
-  }
-}

package/framework/src/elements/_button.scss

@@ -1,192 +0,0 @@
-$button-border-width: 2px !default;
-$button-padding-vertical: calc(0.375em - #{$button-border-width}) !default;
-
-$button-disabled-shadow: none !default;
-$button-disabled-opacity: 1 !default;
-
-$is-check-button-icon-pos-left: 5px;
-
-.buttons {
-  width: 100%;
-  column-gap: 16px;
-
-  &.is-vertical {
-    row-gap: 16px;
-  }
-
-  @include tablet {
-    display: flex;
-    align-items: center;
-    width: auto;
-  }
-
-  &.is-centered,
-  &.has-text-centered,
-  .has-text-centered & {
-    justify-content: center;
-  }
-
-  &.is-mobile {
-    flex-wrap: wrap;
-
-    .button {
-      margin-bottom: 16px;
-    }
-  }
-}
-
-.button {
-  @include control;
-  @include unselectable;
-
-  background-color: white;
-  border-width: $button-border-width;
-  border-radius: 4px;
-  cursor: pointer;
-  justify-content: center;
-  text-align: center;
-  font-family: $body-family;
-  white-space: nowrap;
-  height: 44px;
-  padding: 0 $spacing-4;
-  font-size: $text-15;
-  text-decoration: inherit;
-  font-weight: $weight-semibold;
-
-  &:focus {
-    outline: 1px auto getVariantColor('font', 1);
-  }
-
-  @include mobile {
-    width: 100%;
-    margin: 8px 0 !important;
-  }
-
-  &.is-loading {
-    color: transparent !important;
-    pointer-events: none;
-
-    &::after {
-      @include spinner;
-      @include center(1em);
-
-      position: absolute !important;
-    }
-  }
-
-  &[class*='is-'] {
-    &[disabled] {
-      @extend %disabled;
-
-      background-color: getColor('bg-disabled');
-      border-color: transparent;
-      box-shadow: none;
-      color: getColor('disabled');
-
-      &:hover {
-        color: getColor('disabled');
-        background-color: getColor('bg-disabled');
-        border-color: getColor('bg-disabled');
-      }
-    }
-  }
-
-  @each $name, $pair in $colors {
-    $color: nth($pair, 1);
-    $invColor: nth($pair, 3);
-
-    &.is-#{$color} {
-      background-color: getColor($name);
-      color: invertColor($name);
-    }
-  }
-
-  %disabled {
-    background-color: getColor('bg-disabled');
-    color: getColor('disabled');
-    box-shadow: $button-disabled-shadow;
-    opacity: $button-disabled-opacity;
-
-    &:hover {
-      color: getColor('disabled');
-    }
-  }
-
-
-  &.is-primary {
-    background-color: getColor('main');
-    border-color: getColor('main');
-    color: getColor('background');
-
-    &:hover,
-    &.is-hovered {
-      background-color: getVariantColor('main',2);
-      border-color: getVariantColor('main',2);
-      opacity: 1;
-    }
-
-    &:focus,
-    &.is-focused,
-    &:active,
-    &.is-active {
-      background-color: getVariantColor('main',1);
-      border-color: getVariantColor('main',1);
-    }
-  }
-
-  &.is-secondary {
-    background-color: getColor('alternate');
-    color: getColor('background');
-    border-color: getColor('alternate');
-
-    &:hover,
-    &.is-hovered {
-      color: getColor('background');
-      background-color: getVariantColor('alternate',1);
-    }
-
-    &:focus,
-    &.is-focused,
-    &:active,
-    &.is-active {
-      color: getColor('background');
-      background-color: getVariantColor('alternate',2);
-    }
-  }
-
-  &.is-tertiary {
-    background-color: getColor('background');
-    border: 2px solid getVariantColor('alternate',2);
-    color: getColor('alternate');
-
-    &:hover,
-    &.is-hovered{
-      color: getColor('alternate');
-      background-color: getVariantColor('alternate',3);
-      border-color: getVariantColor('alternate',2);
-
-    }
-
-    &:focus,
-    &.is-focused{
-      color: getColor('alternate');
-      background-color: getVariantColor('alternate',3);
-      border-color: getColor('alternate');
-    }
-
-    &:active,
-    &.is-active {
-      color: getVariantColor('alternate',1);
-      background-color: getVariantColor('alternate',3);
-      border: 2px solid currentColor;
-    }
-
-    &:disabled,
-    &[disabled],
-    &[disabled]:hover{
-      background-color: getColor('background');
-      border: 2px solid getColor('grey-light');
-      color: getColor('disabled');
-    }
-  }
-}

package/framework/src/elements/_checkbox.scss

@@ -1,39 +0,0 @@
-@include checkbox-and-radio('checkbox');
-
-.checkbox,
-.checkbox-tile {
-    input:checked ~ label.checkbox-label {
-      &:before {
-        background-color: getColor('alternate');
-      }
-      &:after {
-        content: "";
-        mask-image: url('./assets/icons/all/check.svg');
-        background-color: getColor('background');
-        mask-size: 18px;
-      }
-    }
-
-    label.checkbox-label {
-        &:before,
-        &:after {
-            border-radius: 4px;
-        }
-    }
-}
-
-.checkbox-tile {
-    input:checked ~ label.checkbox-label {
-        &:after {
-            top: 15px;
-            right: 15px;
-        }
-    }
-    input:checked:disabled ~ label.checkbox-label {
-        &:after {
-            background-color: getColor('grey');
-            top: $spacing-4;
-            right: $spacing-4;
-        }
-    }
-}

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