@trilogy-ds/styles 0.0.1-beta.33 → 0.0.1-beta.35

package/framework/src/elements/_alert.scss

@@ -23,7 +23,6 @@ a.alert {
   .text:first-child,
   .title:first-child {
     line-height: normal;
-    font-size: $text-16 !important;
   }
 
   .title,
@@ -80,7 +79,6 @@ a.alert {
     }
   }
 
-  .title,
   .text,
   .paragraph {
     font-size: $text-14;

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

@@ -13,13 +13,11 @@
       label {
         left: 45px;
       }
-
       .icon-left {
         position: absolute;
         height: 100%;
         width: 45px;
         left: 0;
-
         i {
           font-size: 20px;
         }
@@ -27,19 +25,18 @@
 
 
     }
-
-    .has-icons-right {
-      .icon-right {
-        position: absolute;
-        height: 100%;
-        width: 45px;
-        z-index: 10;
-        right: 0;
-        left: auto;
-
-        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/_select.scss

@@ -1,277 +1,97 @@
-[data-blur-select] {
-  position: absolute;
-  z-index: zindex('large');
-  min-width: 100%;
-  min-height: 100%;
-  left: 0;
-  top: 0;
-}
-
-
-@mixin arrow-style($direction:"up") {
-  @include arrow($direction);
-  right: 16px;
-  margin-left: 16px;
-  top: calc(50% - 7px);
-}
 
 .select {
-  border: var(--border);
-  display: inline-block;
-  max-width: 100%;
   position: relative;
-  border-radius: var(--radius-small);
-  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: $family-sans-serif;
-    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;
+  input { cursor: pointer;}
 
-    &::-ms-expand {
-      display: none !important;
-    }
-
-    @include hover();
-
-  }
+  .field.focus .control input:first-child, 
+  .field.focus .input.select-native { 
+    border: 2px solid currentColor;
+   }
 
-  label {
+  &-options { 
+    box-shadow: 0 0 8px #0000001a; 
+    border-radius: 4px;
+    overflow: hidden;
     position: absolute;
-    top: 50%;
-    transform: translate(0, -50%);
-    left: 16px !important;
-    color: getColor('neutral') !important
-  }
-
-  &.select-native {
-    .icon {
-      position: absolute;
-    }
-
-    &.has-icon {
-      select {
-        padding-left: 50px;
-
-        &:not(.no-label) {
-          padding-bottom: 5px;
+    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
         }
-      }
-    }
-  }
-
-  .has-dynamic-placeholder {
-    label {
-      top: 18px;
-      color: getColor('neutral') !important
-    }
-  }
-
-
-  &-value {
-    position: absolute;
-    left: 16px;
-    top: 50%;
-    transform: translateY(-20%);
-
-    &.no-label {
-      transform: translateY(-50%);
-
-    }
-  }
-
-  .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("down")
-      }
-
-      &:not(.select-native) {
-        @include hover();
-      }
-    }
-  }
-
-  &.select-show-options:not(.is-loading) {
-    outline: 1px auto getColor('main');
-
-    &::after {
-      @include arrow-style()
+      } 
     }
 
-    #{$hoverSelector} {
-      &::after {
-        border-color: getColor('font');
-      }
-    }
-  }
-
-  // Sizes
-  &.is-small {
-    @include control-small;
-  }
-
-  &.is-large {
-    @include control-large;
-  }
+    label.radio-label {
+      border:none !important;
+      border-radius: 0 !important;
+      height: 52px;
+      &:before { display: none; }
+        @include hover 
+    } 
 
-  &.is-loading {
-    &::after {
-      @include spinner;
-      margin-top: 0;
-      position: absolute;
-      right: 0.625em;
-      top: 0.625em;
-      transform: none;
-    }
+    &.focus label.radio-label { @include hoverRules(); }
 
-    &.is-small::after {
-      font-size: $size-small;
+    .icon.is-medium {
+      font-size: $text-20 !important;
     }
+  } 
 
-    &.is-large::after {
-      font-size: $size-large;
+  .control:not(.has-icons-left.has-icons-right) {
+    .select-native.multiple.input {
+      padding-left:0 !important;
+      select option {padding-left: 16px;}
     }
   }
-}
-
-.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: var(--radius-small);
-  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;
-      }
+  &-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;
     }
 
-    &-activated {
-      color: getColor('main');
-      font-weight: $weight-bold;
-
-      &::after {
-        content: "";
-        mask-image: url('./assets/icons/all/check.svg');
-        background-color: getColor('main');
-        min-width: 15px;
-        min-height: 15px;
-        display: inline-block;
-        margin-left: 16px;
-        mask-size: 20px;
-      }
+    &.input {
+      padding-top: 0px !important;
+      padding-bottom: 0px !important;
     }
 
-  }
-
-  .option-container, &-option {
-    outline: none;
-
-    &:focus {
-      background-color: #E4EAED;
-    }
-
-    &:not([data-is-disabled='true']) {
-      cursor: pointer;
+    &.multiple.input{
+      height: auto !important;
+      padding-right: 0 !important;
+      select { padding-top: 0 !important; }
     }
   }
-}
-
-[data-is-open-options="false"] {
-  display: none;
-}
 
-[data-is-open-options="true"] {
-  display: block
-}
-
-//AutoComplete
-.is-autocomplete {
-  .autocomplete-menu {
-    display: none;
-  }
-
-  &.is-active {
-    .autocomplete-menu {
-      display: block;
-      border: var(--border);
-      border-radius: var(--radius-small);
-      max-height: 220px;
-      overflow-y: auto;
-      background-color: getColor('background');
-      z-index: 10000;
-    }
-
-    .autocomplete-item {
-      cursor: pointer;
-      padding: 16px;
-
-      @include hover();
-
-      &.is-active, &[data-autocomplete-item-hover] {
-        @include hoverRules();
-        font-weight: bold;
-      }
-    }
+  &-trilogy_modal_open {
+    position: fixed;
+    top:0;
+    left:0;
+    right:0;
+    bottom:0;
+    z-index: 1000;
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trilogy-ds/styles",
-  "version": "0.0.1-beta.33",
+  "version": "0.0.1-beta.35",
   "author": "Bouygues Telecom",
   "license": "UNLICENSED",
   "files": [