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

package/framework/src/elements/_progress.scss

@@ -9,7 +9,7 @@ $progressbar-small: 5px;
   @include block;
 
   border: none;
-  border-radius: $radius-rounded;
+  border-radius: 9999px;
   display: block;
   height: $progressbar-height;
   overflow: hidden;
@@ -18,8 +18,10 @@ $progressbar-small: 5px;
   -moz-appearance: none;
   -webkit-appearance: none;
 
+  background-color: getColor('neutral-fade');
+
   &::-webkit-progress-bar {
-    background-color: getColor('grey-light');
+    background-color: getColor('main-fade');
     border-radius: $progressbar-height;
   }
 
@@ -33,18 +35,12 @@ $progressbar-small: 5px;
     border-radius: $progressbar-height;
   }
 
-  &::-ms-fill {
-    background-color: getColor('font');
-    border: none;
-    border-radius: $progressbar-height;
-  }
-
   &:not(:last-child) {
     margin-bottom: 7.5px;
   }
 
   // Colors
-  @each $name in $colors-brand-funcionnal {
+  @each $name in $colors-brand-functionnal {
     $brandName: getColorBrandName($name);
     $color: getColor($name);
 
@@ -71,12 +67,11 @@ $progressbar-small: 5px;
 
 .progress.is-stacked {
   display: flex;
-  background-color: getColor('grey-light');
   border-radius: $progressbar-height;
 
   .progress-bar {
     height: $progressbar-height;
-    background-color: getVariantColor('alternate',2);
+    background-color: getColor('font');
 
     &:first-child {
       border-radius: $progressbar-height 0 0 $progressbar-height;
@@ -86,7 +81,7 @@ $progressbar-small: 5px;
       border-radius: 0 $progressbar-height $progressbar-height 0;
     }
 
-    @each $name in $colors-brand-funcionnal {
+    @each $name in $colors-brand-functionnal {
       $color: getColor($name);
       $color-invert: invertColor($name);
       $brandName: getColorBrandName($name);
@@ -100,10 +95,10 @@ $progressbar-small: 5px;
 
 // Progress Bar circle
 $progress-circle-slices: (
-  secondary: getColor('alternate'),
+  secondary: getColor('info'),
   tertiary: getColor('font'),
   warning: getColor('warning'),
-  empty: getColor('grey-light')
+  empty: getColor('neutral-fade')
 );
 
 .progress-circle {
@@ -113,7 +108,7 @@ $progress-circle-slices: (
   --progress-circle-spacing-color: 255, 255, 255;
   --progress-circle-spacing-deg: calc(1deg * var(--progress-circle-spacing));
 
-  border-radius: 50%;
+  border-radius: 9999px;
   height: var(--progress-circle-size);
   margin: 40px;
   position: relative;
@@ -151,8 +146,8 @@ $progress-circle-slices: (
 
 .progress-circle-slice::before,
 .progress-circle-slice::after {
-  border: var(--progress-circle-border-width) solid rgba(0,0,0,0);
-  border-radius: 50%;
+  border: var(--progress-circle-border-width) solid rgba(0, 0, 0, 0);
+  border-radius: 9999px;
   content: '';
   height: 100%;
   left: 0;
@@ -181,9 +176,7 @@ $slides-concat: '';
 
       clip-path: inset(0 calc(50% * (var(--#{$name}-check) / var(--#{$name}-check))) 0 0);
     }
-  }
-
-  @else {
+  } @else {
     .progress-circle-background-#{$name} {
       --#{$name}-start: 0;
     }
@@ -204,9 +197,27 @@ $slides-concat: '';
 
   @if $i == 1 {
     $slides-concat: var(--#{$name});
+  } @else {
+    $slides-concat: $slides-concat + ' + ' + var(--#{$name});
   }
+}
 
-  @else {
-    $slides-concat: $slides-concat + ' + ' + var(--#{$name});
+.progress-legends {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+
+  .progress-legend-start {
+    grid-column: 1;
+    text-align: left;
+  }
+
+  .progress-legend-center {
+    grid-column: 2;
+    text-align: center;
+  }
+
+  .progress-legend-end {
+    grid-column: 3;
+    text-align: right;
   }
 }

package/framework/src/elements/_radio.scss

@@ -2,17 +2,22 @@
 
 .radios {
   width: 100%;
-  column-gap: 16px;
+  gap: 16px;
   display: flex;
   flex-wrap: wrap;
+  flex-direction: column;
 
-  &.is-vertical {
-    row-gap: 16px;
+  @include tablet {
+    flex-direction: row;
+
+    &.is-vertical-desktop {
+      flex-direction: column;
+    }
   }
 
   @include mobile {
-    &:not(.is-mobile){
-      display: block;
+    &.is-horizontal-mobile {
+      flex-direction: row;
     }
   }
 
@@ -25,43 +30,52 @@
 
 .radio,
 .radio-tile {
-    input:checked ~ label.radio-label {
-        &:after {
-            content: '';
-            width: 12px;
-            height: 12px;
-        }
+  input:checked ~ label.radio-label {
+    cursor: default;
+
+    &:after {
+      content: '';
+      width: 12px;
+      height: 12px;
     }
+  }
 
-    label.radio-label {
-        &:before,
-        &:after {
-            border-radius: 50%;
-        }
+  label.radio-label {
+    &:before,
+    &:after {
+      border-radius: 9999px;
     }
+  }
 }
 
 .radio {
-    input:checked ~ label.radio-label {
-        &:after {
-            left: 3px;
-        }
+  input:checked ~ label.radio-label {
+    &:after {
+      left: 3px;
+    }
+  }
+
+  input:not(:disabled):not(:checked) ~ label.radio-label:hover {
+    &:before {
+      @include hoverRules()
     }
+  }
+
 }
 
 .radio-tile {
-    input:checked ~ label.radio-label {
-        &:after {
-            top: 18px;
-            right: 18px;
-        }
+  input:checked ~ label.radio-label {
+    &:after {
+      top: 18px;
+      right: 18px;
     }
+  }
 
-    input:checked:disabled ~ label.radio-label {
-        &:after {
-            background-color: getColor('grey');
-            top: 19px;
-            right: 19px;
-        }
+  input:checked:disabled ~ label.radio-label {
+    &:after {
+      background-color: getColor('neutral');
+      top: 19px;
+      right: 19px;
     }
+  }
 }

package/framework/src/elements/_select.scss

@@ -1,315 +1,96 @@
-[data-blur-select] {
-    position: absolute;
-    z-index: zindex('large');
-    min-width: 100%;
-    min-height: 100%;
-    left:0;
-    top: 0;
-}
-
-
-@mixin arrow-style($isDisabled:false, $direction:"up") {
-    $color: getColor('font');
-    @if($isDisabled) { $color: getColor('grey') }
-
-    @include arrow($color,$direction);
-    right: 16px;
-    margin-left: 16px;
-    top: calc(50% - 7px);
-}
 
 .select {
-    border: 1px solid getColor('grey');
-    display: inline-block;
-    max-width: 100%;
-    position: relative;
-    font-family: $body-family;
-    border-radius: 4px;
-    background-color: getColor('background');
-    display: block;
-    font-size: 1em;
-    max-width: 100%;
-    outline: none;
-    cursor: pointer;
-    height: 56px;
-
-    select {
-        height: 100%;
-        border: 1px solid transparent;
-        border-radius: 3px;
-        max-width: 100%;
-        width: 100%;
-        font-size: 1em;
-        font-family: $body-family;
-        color: getColor('font');
-        cursor: pointer;
-        -webkit-appearance: none;
-        -moz-appearance: none;
-        appearance: none;
-        z-index: 10;
-        background-color: transparent;
-        opacity: 100;
-        outline: none;
-        padding-left: $spacing-4;
-        &::-ms-expand {
-            display: none !important;
-        }
-        &:focus, &:hover {
-            outline: 1px auto getColor('alternate');
-        }
-
-    }
-
-    label {
-        position: absolute;
-        top: 50%;
-        transform: translate(0, -50%);
-        left: 16px !important;
-        color: getColor('grey') !important
-    }
-
-    &.select-native {
-        .icon {
-            position: absolute;
-        }
-
-        &.has-icon {
-            select {
-                padding-left: 50px;
-                &:not(.no-label) {
-                    padding-bottom: 5px;
-                }
-            }
-        }
-    }
-
-    .has-dynamic-placeholder {
-        label {
-            top: 18px;
-            color: getColor('grey') !important
-        }
-    }
-
-
-    &-value {
-        position: absolute ;
-        left: 16px;
-        top: 50%;
-        transform: translateY(-20%);
-
-        &.no-label {
-            transform: translateY(-50%);
-
-        }
-    }
-
-
-
-    &-disabled {
-        background-color: getColor('grey-disabled');
-        border: 1px solid getColor('grey-disabled');
-        cursor:default ;
-        label {
-            color: #565656  !important;
-        }
-        .icon {
-            color: #565656;
-        }
-    }
-
-
-
-    .icon {
-        height: 100%;
-        width: 50px;
-    }
-
-    &.has-icon {
-        label {
-            left: 50px !important;
-        }
-        .select-value {
-            left: 50px !important;
-        }
-    }
-
-
-    &:not(.is-loading) {
-        &:not(.select-disabled) {
-            &::after {
-                @include arrow-style(false,"down")
-            }
-            &:not(.select-native):hover, &:not(.select-native):focus {
-                outline: 1px auto getColor('alternate');
-            }
-        }
-        &.select-disabled {
-            &::after {
-                @include arrow-style(true,"down")
-            }
-        }
-
-    }
-
-    &.select-show-options:not(.is-loading) {
-        outline: 1px auto getColor('alternate');
-        &::after {
-            @include arrow-style()
-        }
-        &:hover {
-            &::after {
-                border-color: getColor('font');
-            }
-        }
-    }
-
-    // Colors
-    @each $name in $colors-brand {
-      $brandName: getColorBrandName($name);
-      $color: getColor($name);
-
-        &.is-#{$brandName} {
-            &:not(:hover) {
-                outline: 1px auto $color;
-            }
-            &:hover,
-            &.is-hovered {
-                outline: 1px auto getVariantColor($name, 1);
-            }
-        }
-    }
-
-    // Sizes
-    &.is-small {
-        @include control-small;
-    }
-
-    &.is-large {
-        @include control-large;
-    }
-
-
-    &.is-loading {
-        &::after {
-            @include spinner;
-            margin-top: 0;
-            position: absolute;
-            right: 0.625em;
-            top: 0.625em;
-            transform: none;
-        }
-        &.is-small::after {
-            font-size: $size-small;
-        }
-        &.is-large::after {
-            font-size: $size-large;
-        }
-    }
-}
+  position: relative;
+  input { cursor: pointer;}
 
-.select-options {
-    position: absolute;
-    margin-top: 8px;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    background: getColor('background');
-    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
-    border-radius: 4px;
-    overflow: auto;
+  select {
     width: 100%;
-    max-height: 260px;
-    z-index:  zindex('large') ;
-
-
-    &-option {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: space-between;
-        padding: 14px $spacing-4;
-        width: 100%;
-        .has-icon {
-            display: flex;
-            align-items: center;
-            .icon {
-              margin-right: 16px;
-              width: 20px;
-              height: 20px;
-            }
-          }
-        &-activated {
-            color: getColor('alternate');
-            font-weight: $weight-bold;
-            &::after {
-                content: "";
-                mask-image: url('./assets/icons/all/check.svg');
-                background-color: getColor('alternate');
-                min-width: 15px;
-                min-height: 15px;
-                display:inline-block;
-                margin-left: 16px;
-                mask-size: 20px;
-            }
-        }
-        &-disabled {
-            background-color: getColor('grey-disabled');
-            color: #565656
-        }
-    }
-
-    .option-container, &-option {
-        outline:none;
-        &:focus {
-            background-color: #E4EAED;
-        }
-
-        &:not([data-is-disabled='true']){
-            cursor: pointer;
-        }
+    @include input;
+    &:focus {
+      padding-left: 15px !important;
     }
-}
-
-[data-is-open-options="false"] {
-    display: none;
-}
+  }
 
-[data-is-open-options="true"] {
-    display:block
-}
-
-//AutoComplete
-.is-autocomplete {
-    .autocomplete-menu {
-        display: none;
+  .has-icons-left {
+    select {
+      padding-left: 45px;
+      &:focus {
+        padding-left: 44px !important;
+      }
     }
+  }
 
-    &.is-active {
-        .autocomplete-menu {
-            display: block;
-            border: 1px solid rgba(0,38,60,.4);
-            padding: 5px 10px;
-            border-radius: 4px;
-            max-height: 220px;
-            overflow-y: auto;
-            background-color: getColor('background');
-            z-index: 10000;
-        }
-
-        .autocomplete-item {
-            cursor: pointer;
-            padding: 3.75px calc(15px - 10px);
-
-            &.is-active, &[data-autocomplete-item-hover] {
-                background-color: rgba(16,157,185,.08);
-                border-top: 1px solid getColor('alternate');
-                border-bottom: 1px solid getColor('alternate');
-                margin-left: -10px;
-                margin-right: -10px;
-                padding: 2.75px 15px;
-            }
-        }
-    }
+  &-options { 
+    box-shadow: 0 0 8px #0000001a; 
+    border-radius: 4px;
+    overflow: hidden;
+    position: absolute;
+    top: 64px;
+    z-index: 1001;
+    left: 0;
+    right: 0;
+  }
+
+  .field {
+    &.focus {
+      &:after{
+        @include arrow('up');
+        right: 12px;
+        top:50%;
+        transform: translate(-50%,-50%);
+      }
+    }
+    &:not(.focus) {
+      &:after{
+        @include arrow();
+        right: 12px;
+        top:50%;
+        transform: translate(-50%,-50%);
+      }
+    }
+  } 
+
+
+  &-trilogy_modal_open {
+    position: fixed;
+    top:0;
+    left:0;
+    right:0;
+    bottom:0;
+    z-index: 1000;
+  }
+
+  .radio-tile {
+    input:checked {
+      &~label.radio-label {
+        font-weight: $weight-black ;
+        &:after {
+          content: "" !important;
+          mask-image: url('./assets/icons/all/check.svg') !important;
+          background-color: getColor('main') !important;
+          mask-size: 18px !important;
+          top: 25px !important;
+          right: 18px !important;
+          height:18px  !important;
+          width: 18px !important
+        }
+      } 
+    }
+
+    label.radio-label {
+      border:none !important;
+      border-radius: 0 !important;
+      height: 52px;
+      &:before { display: none; }
+        @include hover 
+    } 
+
+    &.focus label.radio-label { @include hoverRules(); }
+
+    .icon.is-medium {
+      font-size: $text-20 !important;
+    }
+  } 
 }