@trilogy-ds/styles 0.0.1-beta.5 → 0.0.1-beta.50

package/framework/src/elements/_select.scss

@@ -1,315 +1,98 @@
-[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%);
-
-        }
-    }
-
+  position: relative;
+  input { cursor: pointer;}
 
+  .field.focus .control input:first-child, 
+  .field.focus .input.select-native { 
+    border: 2px solid currentColor;
+   }
 
-    &-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;
-        }
-    }
-}
-
-.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);
+  &-options { 
+    box-shadow: 0 0 8px #0000001a; 
     border-radius: 4px;
-    overflow: auto;
-    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
-        }
+    overflow: hidden;
+    position: absolute;
+    top: 64px;
+    z-index: 1001;
+    left: 0;
+    right: 0;
+  }
+
+  .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;
+    }
+  } 
+
+  .control:not(.has-icons-left.has-icons-right) {
+    .select-native.multiple.input {
+      padding-left:0 !important;
+      select option {padding-left: 16px;}
+    }
+  }
+
+  &-native {
+    position: relative;
+    select {
+      width: 100%;
+      border:none;
+      height: 100%;
+      background-color: transparent;
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      text-indent: 1px;
+      outline: none;
+      color:  getColor('main');
+      font-size: $text-16 !important;
     }
 
-    .option-container, &-option {
-        outline:none;
-        &:focus {
-            background-color: #E4EAED;
-        }
-
-        &:not([data-is-disabled='true']){
-            cursor: pointer;
-        }
+    &.input {
+      padding-top: 0px !important;
+      padding-bottom: 0px !important;
     }
-}
-
-[data-is-open-options="false"] {
-    display: none;
-}
 
-[data-is-open-options="true"] {
-    display:block
-}
-
-//AutoComplete
-.is-autocomplete {
-    .autocomplete-menu {
-        display: none;
+    &.multiple.input{
+      height: auto !important;
+      padding-right: 0 !important;
+      select { padding-top: 0 !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;
-            }
-        }
-    }
+  &-trilogy_modal_open {
+    position: fixed;
+    top:0;
+    left:0;
+    right:0;
+    bottom:0;
+    z-index: 1000;
+  }
 }
 
 

package/framework/src/elements/_sticker.scss

@@ -1,8 +1,7 @@
 $sticker-height: 35px;
-$sticker-radius: $radius-large;
 
 .sticker {
-  border-radius: 24px;
+  border-radius: 9999px;
   font-size: 16px;
   flex-grow: 0;
   display: inline-flex;
@@ -16,58 +15,44 @@ $sticker-radius: $radius-large;
   &:not(.is-hat) {
     width: fit-content;
 
-    @include mobile{
-      border-radius: 16px;
+    @include mobile {
       font-size: 12px;
       padding: $spacing-1 $spacing-2;
       height: auto;
       line-height: 15px;
 
-      &.is-flag {
-        border-radius: 0 $sticker-radius 0 0;
-      }
-
     }
   }
 
-
-  &.is-primary {
-    background-color: getColor('main');
+  &.is-accent {
+    background-color: getColor('alternate');
     color: getColor('background') !important;
   }
 
-  &.is-flag {
-    border-radius: 0 16px 0 0;
+  &.is-info {
+    background-color: getColor('info');
+    color: getColor('background') !important;
   }
 
-  &.is-outlined,
   &.is-inverted {
     background-color: white !important;
     border-style: solid;
     border-width: 2px;
     border-color: currentColor;
-    color: getColor('font') !important;
-
-    &.is-primary {
-      color: getColor('main') !important;
-    }
+    color: currentColor;
   }
 
   &.is-small {
-    border-radius: 16px;
     font-size: 12px;
     padding: $spacing-1 $spacing-2;
     height: auto;
     line-height: 15px;
 
-    &.is-flag {
-      border-radius: 0 $sticker-radius 0 0;
-    }
   }
 
   // deprecated
   &.is-stretched {
-    border-radius: $radius 0;
+    border-radius: var(--radius) 0;
     padding: 0 10px;
     position: relative;
     margin-right: 10px;
@@ -87,12 +72,12 @@ $sticker-radius: $radius-large;
     }
 
     &::before {
-      border-radius: $radius 0 0 $radius;
+      border-radius: var(--radius) 0 0 var(--radius);
       left: -6px;
     }
 
     &::after {
-      border-radius: 0 $radius $radius 0;
+      border-radius: 0 var(--radius) var(--radius) 0;
       right: -7px;
     }
   }
@@ -111,7 +96,7 @@ $sticker-radius: $radius-large;
 .has-hat-mobile {
   .is-hat {
     display: inline-block;
-    border-radius: $radius $radius 0 0;
+    border-radius: var(--radius) var(--radius) 0 0;
     position: absolute;
     top: -$sticker-height;
     left: 0;

package/framework/src/elements/_switch.scss

@@ -1,108 +1,105 @@
 .switch {
-    position: relative;
-    margin: 8px;
+  position: relative;
+  margin: 8px;
 
-    input {
-        display: none;
+  input {
+    display: none;
 
-        &:disabled ~ label,
-        &:disabled:checked ~ label {
-          &:hover {
-            cursor: no-drop;
-          }
-
-          &:before {
-            background-color: getColor('grey-disabled');
-          }
-        }
+    &:disabled ~ label,
+    &:disabled:checked ~ label {
+      cursor: not-allowed;
+      &:before {
+        background-color: getColor('disabled');
+      }
+    }
 
-        &:disabled ~ label {
-          &:after {
-            $colorSvg: encodecolor(getColorValue('grey-dark'));
-            content: url('data:image/svg+xml; utf8, <svg viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" stroke="#{$colorSvg}" stroke-linecap="round" stroke-width="3.2" fill="none"><path d="M12.6 12.6L31.4 31.4M12.6 31.4L31.4 12.6"/></svg>');
-          }
-        }
+    &:disabled ~ label {
+      &:after {
+        $colorSvg: encodecolor(getColorValue('neutral-dark'));
+        content: url('data:image/svg+xml; utf8, <svg viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" stroke="#{$colorSvg}" stroke-linecap="round" stroke-width="3.2" fill="none"><path d="M12.6 12.6L31.4 31.4M12.6 31.4L31.4 12.6"/></svg>');
+      }
+    }
 
-        &:disabled:checked ~ label {
-            &:after {
-              $colorSvg: encodecolor(getColorValue('grey-dark'));
-              content: url('data:image/svg+xml; utf8, <svg viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" stroke="#{$colorSvg}" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" fill="none"><path d="M11.3 22.4L18.1 29.3L32.7 14.7"/></svg>');
-            }
-        }
+    &:disabled:checked ~ label {
+      &:after {
+        $colorSvg: encodecolor(getColorValue('neutral-dark'));
+        content: url('data:image/svg+xml; utf8, <svg viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" stroke="#{$colorSvg}" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" fill="none"><path d="M11.3 22.4L18.1 29.3L32.7 14.7"/></svg>');
+      }
     }
+  }
 
-    label {
-        width: 100%;
-        display: flex;
-        align-items: center;
-        cursor: pointer;
-        padding: $spacing-1;
-        padding-right: 60px;
+  label {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    padding: $spacing-1;
+    padding-right: 60px;
 
-        &:before {
-            content: '';
-            position: absolute;
-            top: 50%;
-            transform: translateY(-50%);
-            right: 0;
-            border-radius: 24px;
-            width: 44px;
-            height: 22px;
-            background-color: getColorValue('grey');
-            margin-left: 16px;
-        }
+    &:before {
+      content: '';
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      right: 0;
+      border-radius: 9999px;
+      width: 44px;
+      height: 22px;
+      background-color: getBGColor('font');
+      margin-left: 16px;
+    }
 
-        &:after {
-            $colorSvg: encodecolor(getColorValue('grey'));
-            content: url('data:image/svg+xml; utf8, <svg viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" stroke="#{$colorSvg}" stroke-linecap="round" stroke-width="3.2" fill="none"><path d="M12.6 12.6L31.4 31.4M12.6 31.4L31.4 12.6"/></svg>');
-            position: absolute;
-            top: 50%;
-            transform: translateY(-50%);
-            right: calc(44px - 18px - 2px);
-            border-radius: 50%;
-            width: 18px;
-            height: 18px;
-            background-color: getColorValue('background');
-            transition: 0.3s;
-        }
+    &:after {
+      $colorSvg: encodecolor(getBGColorValue('font'));
+      content: url('data:image/svg+xml; utf8, <svg viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" stroke="#{$colorSvg}" stroke-linecap="round" stroke-width="3.2" fill="none"><path d="M12.6 12.6L31.4 31.4M12.6 31.4L31.4 12.6"/></svg>');
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      right: calc(44px - 18px - 2px);
+      border-radius: 9999px;
+      width: 18px;
+      height: 18px;
+      background-color: getColorValue('background');
+      transition: 0.3s;
     }
+  }
 
-    input:checked {
-        & ~ label {
-            font-weight: bold;
+  input:checked {
+    & ~ label {
+      font-weight: bold;
 
-            &:before {
-                background-color: getColorValue('alternate');
-            }
+      &:before {
+        background-color: getColorValue('main');
+      }
 
-            &:after {
-                right: 2px;
-                $colorSvg: encodecolor(getColorValue('alternate'));
-                content: url('data:image/svg+xml; utf8, <svg viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" stroke="#{$colorSvg}" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" fill="none"><path d="M11.3 22.4L18.1 29.3L32.7 14.7"/></svg>');
-                background-color: getColorValue('background');
-            }
-        }
+      &:after {
+        right: 2px;
+        $colorSvg: encodecolor(getColorValue('main'));
+        content: url('data:image/svg+xml; utf8, <svg viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" stroke="#{$colorSvg}" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" fill="none"><path d="M11.3 22.4L18.1 29.3L32.7 14.7"/></svg>');
+        background-color: getColorValue('background');
+      }
     }
+  }
 
-    &.is-reversed {
-        label {
-            flex-direction: row-reverse;
-            padding-right: 0;
-            padding-left: 60px;
+  &.is-reversed {
+    label {
+      flex-direction: row-reverse;
+      padding-right: 0;
+      padding-left: 60px;
 
-            &:before {
-                left: 0;
-                margin-left: 0;
-                margin-right: 16px;
-            }
+      &:before {
+        left: 0;
+        margin-left: 0;
+        margin-right: 16px;
+      }
 
-            &:after {
-                left: 2px;
-            }
-        }
+      &:after {
+        left: 2px;
+      }
+    }
 
-        input:checked ~ label:after {
-            left: calc(44px - 18px - 2px);
-        }
+    input:checked ~ label:after {
+      left: calc(44px - 18px - 2px);
     }
+  }
 }