new features

sa-si-dev · Feb 20, 2021 · 8b1111a · 8b1111a
1 parent c0b266f
commit 8b1111a
Show file tree

Hide file tree

Showing 5 changed files with 234 additions and 57 deletions.
diff --git a/src/sass/partials/mixins.scss b/src/sass/partials/mixins.scss
@@ -5,4 +5,10 @@
   border-top-color: transparent;
   -webkit-transform: rotate(45deg) translate(1px, -4px);
   transform: rotate(45deg) translate(1px, -4px);
+}
+
+@mixin ellipse {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
 }
diff --git a/src/sass/partials/variable.scss b/src/sass/partials/variable.scss
@@ -1,13 +1,15 @@
 $primaryColor: #512DA8;
 $primaryBg: #fff;
 $fontColor: #333;
+$fontColorLight: #666;
 $borderColor: #ddd;
 $focusColor: #ccc;
 $selectedColor: #eee;
 $arrowColor: #111;
 $checkboxColor: #888;
 
 $fontSize: 14px;
+$fontSizeSmall: 13px;
 $arrowSize: 6px;
 $dropboxHeight: 250px;
 $dropboxMargin: 4px;

diff --git a/src/sass/partials/virtual-select.scss b/src/sass/partials/virtual-select.scss
@@ -130,6 +130,7 @@
 
 .vscomp-option {
   display: flex;
+  flex-wrap: wrap;
   position: relative;
   align-items: center;
   padding: 10px 15px;
@@ -193,12 +194,19 @@
 }
 
 .vscomp-option-text {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
+  @include ellipse;
   width: 100%;
 }
 
+.vscomp-option-description {
+  @include ellipse;
+  width: 100%;
+  line-height: 15px;
+  margin-top: 5px;
+  color: $fontColorLight;
+  font-size: $fontSizeSmall;
+}
+
 .vscomp-search-container {
   display: flex;
   align-items: center;
@@ -307,6 +315,10 @@
       .vscomp-option-text {
         width: calc(100% - #{$checkboxFullWidth});
       }
+
+      .vscomp-option-description {
+        padding-left: $checkboxFullWidth;
+      }
 
       &.selected .checkbox-icon::after {
         @include checkbox-checked;