halleyx-ui-framework 4.6.2 → 4.6.4

package/dist/src/assets/styles/select.scss

@@ -1,4 +1,7 @@
 .hlx-select-container,
+// [data-tooltip]:before{
+//   word-wrap: break-word;
+// }
 .cascade-select {
   display: flex;
   font-family: var(--hlx-font-type-content);
@@ -192,6 +195,10 @@
 .hlx-multi-select-option-container {
   display: block;
 }
+
+// .hlx-select-option-value-container{
+//   // position: relative;
+// }
 .hlx-select-option-value-container,
 .hlx-multi-select-option-value-container {
   font-family: var(--hlx-font-type-content);
@@ -460,7 +467,7 @@
 
 .add-style {
   border-color: var(--hlx-color-primary) !important;
-  .cutom-multi-select-title{
+  .custom-multi-select-title{
     color: var(--hlx-color-primary) !important;
   }
 }
@@ -742,6 +749,7 @@ button {
   .custom-dropdown-whole-container{
     position: absolute;
     width: 100%;
+    border-radius: 3px;
     // top:45px;
     // left:0px;
     border: 1px solid var(--hlx-border-color);
@@ -832,7 +840,7 @@ button {
   color: black;
 }
 
-.custom-multi-select {
+.inline-multi-select{
   height: 36px;
   width: 100%;
   border: 1px solid var(--hlx-border-color);
@@ -842,64 +850,105 @@ button {
   align-items: center;
   background-color: white;
   position: relative;
+  margin-bottom: 20px;
   cursor: pointer;
   &:hover {
     border-color: var(--hlx-color-primary);
-    .cutom-multi-select-title
+    .custom-multi-select-title
     {
       color: var(--hlx-color-primary) !important;
     }
   }
-  .custom-multi-select-tag-value {
-    margin-left: 8px;
-    cursor: pointer;
-
-    .multiselect-inline-tag-option {
-      width: 100px;
-      height:25px;
-      background: var(--hlx-color-primary-light);
-      color: var(--hlx-color-primary-dark);
-    }
+  .asterik{
+    color: var(--hlx-color-error);
   }
-  .multi-select-inline-count-value {
-    width: 25px;
-    display: flex;
-    align-items: center;
-    background: var(--hlx-color-primary-light);
-    color: var(--hlx-color-primary-dark);
-    // background: var(--hlx-color-primary);
-    border-radius: 25px;
-    height: 25px;
+  .customerror {
+    position: absolute;
     font-size: 12px;
-    margin-left: 2px;
-    // color: var(--hlx-color-white);
-    justify-content: center;
-    // position: absolute;
+    color: var(--hlx-color-error);
+    top: 35px;
+    left: 1px;
   }
-  .custom-multi-select-input {
+  .inline-input-section{
+    display:flex;
+    width:100%;
+    height:100%;
+    input{
     width: 97%;
     height: 100%;
     border: none;
-    // background-color: blue;
-    padding-left: 8px;
-    border-top-left-radius: 4px;
     cursor: pointer;
-    border-bottom-left-radius: 4px;
+    }
+    .inline-multi-select-tag-value{
+      width: 97%;
+      height: 100%;
+      border: none;
+      display: flex;       
+
+      .custom-multi-select-tag-value{
+        width:100px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-right: 3px;
+        .multiselect-inline-tag-option {
+          width: 95px;
+          height:25px;
+          background: var(--hlx-color-primary-light);
+          color: var(--hlx-color-primary-dark);
+        }
+      }
+    }
+    .inline-multi-select-count-section{
+      height:30px;
+      width:30px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    .inline-multi-select-count{
+      width: 25px;
+      display: flex;
+      align-items: center;
+      background: var(--hlx-color-primary-light);
+      color: var(--hlx-color-primary-dark);
+      border-radius: 25px;
+      height: 25px;
+      font-size: 12px;
+      margin-left: 2px;
+      justify-content: center;
+    }
   }
-  .icon-angle-down-regular,
-  .icon-angle-up-regular {
-    position: absolute;
-    right: 0px;
-    font-size: 14px;
-    width:30px;
-    height: 29px;
-    display: flex;
-    align-items: center;
-    border-bottom-right-radius: 2px;
-    border-top-right-radius: 2px;
-    background-color: white;
+    .icon-angle-down-regular,.icon-angle-up-regular{
+      height: 30px;
+      width: 30px;
+      font-size: 14px;
+      padding-right:7px;
+      display: flex;
+      // justify-content: center;
+      align-items: center;
+    }
+    .custom-multi-select-title1{
+      position: absolute;
+      top: 7px;
+      // background: white;
+      font-size: 14px;
+      left: 6px;
+      margin: 0 5px 0 5px;
+      padding: 0 5px 0 5px;
+      color: #a6a6a6;
+    }
+    .custom-multi-select-title{
+      position: absolute;
+      top: -12px;
+      background: white;
+      font-size: 12px;
+      left: 6px;
+      margin: 0 5px 0 5px;
+      padding: 0 5px 0 5px;
+      color: #a6a6a6;
+    }
   }
-  .custom-multi-select-option-container {
+  .inline-multi-select-option-container{
     position: absolute;
     height: 200px;
     width: 100%;
@@ -910,55 +959,168 @@ button {
     padding-bottom: 8px;
     top: 39px;
     left: 0px;
-    overflow-y: none;
+    overflow-y: auto;
     z-index: 10000000000000000;
     display: flex;
     flex-direction: column;
     // flex-wrap: wrap;
      height: auto;
      max-height: 250px;
-
-    .input-container232{
-      padding-top: 8px;
-      padding-left: 8px;
-      overflow-y: scroll;
-      overflow-x: hidden;
-      // height:100%;
-      // height:180px;
-    }
-     .custom-multi-select-footer{
-      display: flex;
-      overflow: none;
-      justify-content: flex-end;
-      padding-top: 8px;
-      border-top: 1px solid var(--hlx-border-color);
-      .primary{
-        margin-right: 10px;
-        margin-left: 10px;
-        height: 30px;
-      }
-      .secondary-success {
-        height: 30px;
-
-      }
-     }
   }
-  .custom-multi-select-option-container .input-container232{
-    overflow-x: none !important;
+  .inline-multi-select-placeholder{
+    border: none;
+    width: 100%;
+    text-align: left;
+    outline: none;
+    cursor: pointer;
+    font-size: 14px;
+    color: #a6a6a6;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+    height: 34px;
+    padding: 8px 12px;
   }
-
-  .cutom-multi-select-title {
-    position: absolute;
+  .custom-multi-select-title{
+        position: absolute;
     top: -12px;
     background: white;
     font-size: 12px;
     left: 6px;
     margin: 0 5px 0 5px;
     padding: 0 5px 0 5px;
-    color: #a6a6a6;
   }
 }
 
+// .custom-multi-select {
+//   height: 36px;
+//   width: 100%;
+//   border: 1px solid var(--hlx-border-color);
+//   border-radius: 4px;
+//   padding-left: 8px;
+//   display: flex;
+//   align-items: center;
+//   background-color: white;
+//   position: relative;
+//   cursor: pointer;
+//   &:hover {
+//     border-color: var(--hlx-color-primary);
+//     .cutom-multi-select-title
+//     {
+//       color: var(--hlx-color-primary) !important;
+//     }
+//   }
+//   .custom-multi-select-tag-value {
+//     margin-left: 8px;
+//     cursor: pointer;
+
+//     .multiselect-inline-tag-option {
+//       width: 100px;
+//       height:25px;
+//       background: var(--hlx-color-primary-light);
+//       color: var(--hlx-color-primary-dark);
+//     }
+//   }
+//   .multi-select-inline-count-value {
+//     width: 25px;
+//     display: flex;
+//     align-items: center;
+//     background: var(--hlx-color-primary-light);
+//     color: var(--hlx-color-primary-dark);
+//     // background: var(--hlx-color-primary);
+//     border-radius: 25px;
+//     height: 25px;
+//     font-size: 12px;
+//     margin-left: 2px;
+//     // color: var(--hlx-color-white);
+//     justify-content: center;
+//     // position: absolute;
+//   }
+//   .custom-multi-select-input {
+//     width: 97%;
+//     height: 100%;
+//     border: none;
+//     // background-color: blue;
+//     padding-left: 8px;
+//     border-top-left-radius: 4px;
+//     cursor: pointer;
+//     border-bottom-left-radius: 4px;
+//   }
+//   .icon-angle-down-regular,
+//   .icon-angle-up-regular {
+//     position: absolute;
+//     right: 0px;
+//     font-size: 14px;
+//     width:30px;
+//     height: 29px;
+//     display: flex;
+//     align-items: center;
+//     border-bottom-right-radius: 2px;
+//     border-top-right-radius: 2px;
+//     background-color: white;
+//   }
+//   .custom-multi-select-option-container {
+//     position: absolute;
+//     height: 200px;
+//     width: 100%;
+//     border: 1px solid var(--hlx-border-color);
+//     background-color: white;
+//     // overflow: scroll;
+//     border-radius: 5px;
+//     padding-bottom: 8px;
+//     top: 39px;
+//     left: 0px;
+//     overflow-y: none;
+//     z-index: 10000000000000000;
+//     display: flex;
+//     flex-direction: column;
+//     // flex-wrap: wrap;
+//      height: auto;
+//      max-height: 250px;
+
+//     .input-container232{
+//       padding-top: 8px;
+//       padding-left: 8px;
+//       overflow-y: scroll;
+//       overflow-x: hidden;
+//       // height:100%;
+//       // height:180px;
+//     }
+//      .custom-multi-select-footer{
+//       display: flex;
+//       overflow: none;
+//       justify-content: flex-end;
+//       padding-top: 8px;
+//       border-top: 1px solid var(--hlx-border-color);
+//       .primary{
+//         margin-right: 10px;
+//         margin-left: 10px;
+//         height: 30px;
+//       }
+//       .secondary-success {
+//         height: 30px;
+
+//       }
+//      }
+//   }
+//   .custom-multi-select-option-container .input-container232{
+//     overflow-x: none !important;
+//   }
+
+//   .cutom-multi-select-title {
+//     position: absolute;
+//     top: -12px;
+//     background: white;
+//     font-size: 12px;
+//     left: 6px;
+//     margin: 0 5px 0 5px;
+//     padding: 0 5px 0 5px;
+//     color: #a6a6a6;
+//   }
+// }
+
 
 .not-all-tag{
   // width:95%;
@@ -966,4 +1128,14 @@ button {
 }
 .all-option{
   width:100%;
+}
+
+
+
+// [data-tip] {
+//   position: relative;
+// }
+
+[data-tooltip]:before{
+   word-wrap: break-word;
 }

package/dist/src/assets/styles/tooltip.scss

@@ -152,189 +152,3 @@
   transform-origin: bottom;
 }
 
-/* Settings that make the pen look nicer */
-// html {
-//   width: 100%;
-//   height: 100%;
-//   font-family: 'Roboto', sans-serif;
-//   color: white;
-//   font-size: 1.2em;
-//   // background: linear-gradient(45deg, #243949, #2cacd1, #35eb93);
-//   background-size: 120% 120%;
-//   animation: moveFocus 5s ease infinite alternate;
-// }
-// @keyframes moveFocus {
-//   0%   { background-position: 0% 100% }
-//   100% { background-position: 100% 0% }
-// }
-
-// body {
-//   background: none;    display: flex;
-//     flex-direction: column;
-//     height: 100%;
-//     margin: 0;
-// }
-
-// main {
-//   padding: 0 4%;
-//   display: flex;
-//   flex-direction: row;
-//   margin: auto 0;
-// }
-
-// button {
-// margin: 0;
-// padding: 0.7rem 1.4rem;
-
-// cursor: pointer;
-// text-align: center;
-// border: none;
-// border-radius: 4px;
-// outline: inherit;
-// text-decoration: none;
-// font-family: Roboto, sans-serif;
-// font-size: 0.7em;
-// background-color: rgba(174, 184, 192, 0.55);
-// color: white;
-
-//   transition: background 350ms ease-in-out,
-//               transform 150ms ease;
-// }
-// button:hover {
-//   background-color: #484f56;
-// }
-// button:active {
-//   transform: scale(0.98);
-// }
-// button:focus {
-//   box-shadow: 0 0 2px 2px #298bcf;
-// }
-// button::-moz-focus-inner {
-//   border: 0;
-// }
-
-// .example-elements {
-//   flex-grow: 1;
-//   display: flex;
-//   flex-direction: column;
-//   align-items: center;
-//   align-content: center;
-//   justify-content: center;
-//   text-align: center;
-//   padding-right: 4%;
-// }
-
-// .example-elements p {
-//   padding: 6px;
-//   display: inline-block;
-//   margin-bottom: 5%;
-//   color: #fff;
-// }
-// .example-elements p:hover {
-//   border-left: 1px solid lightgrey;
-//   border-right: 1px solid lightgrey;
-//   padding-left: 5px;
-//   padding-right: 5px;
-// }
-
-// .example-elements a {
-//   margin-left: 6px;
-//   margin-bottom: calc(5% + 10px);
-//   color: #76daff;
-//   text-decoration: none;
-// }
-// .example-elements a:hover {
-//   margin-bottom: calc(5% + 9px);
-//   border-bottom: 1px solid #76daff;
-// }
-
-// .example-elements button {
-//   margin-bottom: 20px;
-// }
-
-// .info-wrapper {
-//   flex-grow: 8;
-//   display: flex;
-//   flex-direction: column;
-//   justify-content: center;
-//   text-align: justify;
-//   padding-left: 6%;
-//   border-left: 3px solid #35ea95;
-// }
-
-// .info-wrapper p {
-//   color: rgba(255, 255, 255, 0.69);
-// }
-// .info-wrapper p {
-//   max-width: 600px;
-//   text-align: justify;
-// }
-
-// .info-wrapper .title-question {
-//   display: block;
-//   color: #fff;
-//   font-size: 1.36em;
-//   font-weight: 500;
-//   padding-bottom: 24px;
-// }
-
-// @media (max-height: 450px) {
-//   main {
-//     margin: 2rem 0;
-//   }
-// }
-
-// @media (max-width: 800px) {
-//   html {
-//     font-size: 0.9em;
-//   }
-// }
-
-/* Thumbnail settings */
-// @media (max-width: 750px) {
-// html {
-//   animation-duration: 0.6s;
-//   font-size: 1em;
-// }
-// body {
-//   display: flex;
-//   background: none;
-//   height: 100%;
-//   margin: 0px;
-// }
-// main {
-//   font-size: 1.1em;
-//   padding: 6%;
-// }
-//   .info-wrapper p:before,
-//   .info-wrapper p:after {
-//     display: none;
-//   }
-//   .example-elements {
-//     max-width: 150px;
-//     font-size: 22px;
-//   }
-//   .example-elements a, button {
-//     display: none;
-//   }
-//   .example-elements p:before,
-//   .example-elements p:after {
-//     visibility: visible;
-//     opacity: 1;
-//   }
-//   .example-elements p:before {
-//     content: "Tooltip";
-//     font-size: 20px;
-//     transform: translate(-50%, calc(0px - var(--arrow-size))) scale(1);
-//   }
-//   .example-elements p:after {
-//     transform: translate(-50%, -1px) scaleY(1);
-//   }
-
-//   [data-tooltip]:after {
-//     bottom: calc(100% + 3px);
-//   }
-//   [data-tooltip]:after {
-//     border-width: 7px 7px 0px 7px;
-//   }
-// }