@everchron/ec-shards 3.1.4 → 3.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everchron/ec-shards",
-  "version": "3.1.4",
+  "version": "3.2.0",
   "private": false,
   "description": "Everchron Shards UI Library",
   "repository": "https://github.com/everchron/ec-shards.git",

package/src/components/alert/alert.vue

@@ -1,11 +1,11 @@
 <template>
   <div v-if="show" class="ecs-alert" :class="[typeClass, dismissable ? 'ecs-alert-dismissable' : '', inset ? 'ecs-alert-inset' : '']">
     <button v-if="dismissable" @click="dismiss" class="close">
-      <ecs-icon type="close" width="20" height="20" />
+      <ecs-icon type="close" size="20" />
     </button>
     <div class="ecs-alert-inner">
       <h4 v-if="headline" class="ecs-alert-headline">
-        <ecs-icon v-if="icon" :type="icon" width="20" height="20" />
+        <ecs-icon v-if="icon" :type="icon" size="20" />
         {{ headline }}
       </h4>
       <div v-if="$slots.default" class="ecs-alert-content">

package/src/components/breadcrumb-button/breadcrumb-button.vue

@@ -7,8 +7,8 @@
               typeClass
             ]"
   >
-    <ecs-icon v-if="icon" :type="icon" width="20" height="20" />
-    <ecs-icon v-if="type == 'more'" type="more" width="20" height="20" />
+    <ecs-icon v-if="icon" :type="icon" size="20" />
+    <ecs-icon v-if="type == 'more'" type="more" size="20" />
     <span v-if="type != 'more'">
       <slot></slot>
     </span>

package/src/components/button/button.vue

@@ -13,7 +13,7 @@
       @mouseover="$emit('mouseover', $event)"
       @mouseleave="$emit('mouseleave', $event)">
 
-    <ecs-icon v-if="icon || loading" :type="iconType" :width="iconSize" :height="iconSize" />
+    <ecs-icon v-if="icon || loading" :type="iconType" :size="iconSize" />
     <slot></slot>
   </a>
 
@@ -31,7 +31,7 @@
       @mouseover="$emit('mouseover', $event)"
       @mouseleave="$emit('mouseleave', $event)">
 
-    <ecs-icon v-if="icon || loading" :type="iconType" :width="iconSize" :height="iconSize" />
+    <ecs-icon v-if="icon || loading" :type="iconType" :size="iconSize" />
     <slot></slot>
   </button>
 

package/src/components/button-context/button-context.vue

@@ -5,7 +5,7 @@
     :style="selectedColorText"
     @click="$emit('click', $event)">
 
-    <ecs-icon v-if="icon || loading" :type="iconType" width="20" height="20" />
+    <ecs-icon v-if="icon || loading" :type="iconType" size="20" />
     <div v-if="selectedColor" class="ecs-context-button-color" :style="selectedColorBackground" />
     <slot></slot>
   </button>

package/src/components/button-more/button-more.vue

@@ -5,7 +5,7 @@
             ]"
     @click="$emit('click', $event)">
 
-    <ecs-icon v-if="type == 'ellipsis'" type="more" width="20" height="20" color="#FFF" />
+    <ecs-icon v-if="type == 'ellipsis'" type="more" size="20" color="#FFF" />
     <slot></slot>
   </button>
 </template>

package/src/components/button-table/button-table.vue

@@ -15,7 +15,7 @@
     @mouseover="$emit('mouseover', $event)"
     @mouseleave="$emit('mouseleave', $event)">
 
-    <ecs-icon v-if="icon || loading" :type="iconType" :width="iconSize" :height="iconSize" />
+    <ecs-icon v-if="icon || loading" :type="iconType" :size="iconSize" />
     <div v-if="label != null" class="button-label">{{ label }}</div>
     <div v-if="chevron" class="chevron" :class="active ? 'expand' : ''" />
   </button>

package/src/components/button-toolbar/button-toolbar.vue

@@ -9,10 +9,10 @@
             dropdownClass]"
             @click="$emit('click', $event)">
 
-    <ecs-icon v-if="(icon && iconPosition == 'left') || (loading && iconPosition == 'left')" :width="iconSize" :height="iconSize" :color="iconTint" :type="iconType" :spinning="loading" />
+    <ecs-icon v-if="(icon && iconPosition == 'left') || (loading && iconPosition == 'left')" :size="iconSize" :color="iconTint" :type="iconType" :spinning="loading" />
     <slot></slot>
     <span class="badge" v-if="badge" :style="{ background: badgeColor }"></span>
-    <ecs-icon v-if="(icon && iconPosition == 'right') || (loading && iconPosition == 'right')" :width="iconSize" :height="iconSize" :color="iconTint" :type="iconType" :spinning="loading" />
+    <ecs-icon v-if="(icon && iconPosition == 'right') || (loading && iconPosition == 'right')" :size="iconSize" :color="iconTint" :type="iconType" :spinning="loading" />
   </a>
 
   <button v-else class="ecs-toolbar-button"
@@ -25,10 +25,10 @@
             dropdownClass]"
             @click="$emit('click', $event)">
 
-    <ecs-icon v-if="(icon && iconPosition == 'left') || (loading && iconPosition == 'left')" :width="iconSize" :height="iconSize" :color="iconTint" :type="iconType" :spinning="loading" />
+    <ecs-icon v-if="(icon && iconPosition == 'left') || (loading && iconPosition == 'left')" :size="iconSize" :color="iconTint" :type="iconType" :spinning="loading" />
     <slot></slot>
     <span class="badge" v-if="badge" :style="{ background: badgeColor }"></span>
-    <ecs-icon v-if="(icon && iconPosition == 'right') || (loading && iconPosition == 'right')" :width="iconSize" :height="iconSize" :color="iconTint" :type="iconType" :spinning="loading" />
+    <ecs-icon v-if="(icon && iconPosition == 'right') || (loading && iconPosition == 'right')" :size="iconSize" :color="iconTint" :type="iconType" :spinning="loading" />
   </button>
 </template>
 

package/src/components/button-toolbar-icon/button-toolbar-icon.vue

@@ -8,7 +8,7 @@
     <ecs-icon :type="icon" />
     <span v-if="hasBadge" class="badge" />
     <div class="sub-icon">
-      <ecs-icon v-if="subIcon" :type="subIcon" width="14" height="14" />
+      <ecs-icon v-if="subIcon" :type="subIcon" size="14" />
     </div>
   </button>
 </template>

package/src/components/collection-control/collection-control.vue

@@ -8,7 +8,7 @@
       isVisible || nonInteractive ? '' : 'collapsed',
       nonInteractive ? '' : 'interactive',
       ]">
-      <ecs-icon v-if="icon" :type="icon" color="#858E9E" :width="iconSize" :height="iconSize" />
+      <ecs-icon v-if="icon" :type="icon" color="#858E9E" :size="iconSize" />
       <div class="description" v-if="label">{{ label }}</div>
       <div class="collection"
         @mouseover="toggleTooltip"

package/src/components/data-card/data-card.vue

@@ -15,7 +15,7 @@
       <slot name="control"></slot>
     </div>
 
-    <ecs-icon v-if="icon" :type="icon" :color="iconColor" :spinning="spinning" width="26" height="26" />
+    <ecs-icon v-if="icon" :type="icon" :color="iconColor" :spinning="spinning" size="26" />
     <ecs-skeleton-loader v-if="icon && loading" type="rect" :width="26" :height="26" />
 
     <div class="ecs-data-card-inner">

package/src/components/dialog/dialog.vue

@@ -1,14 +1,14 @@
 <template>
-    <dialog ref="dialog" :class="[large ? 'ecs-dialog-large' : '']" class="ecs-dialog">
-      <div class="ecs-dialog-body">
-        <slot></slot>
-      </div>
-
-      <div v-if="$slots.actions" class="ecs-dialog-footer" :class="[stackedFooter ? 'ecs-dialog-footer-stacked' : '']">
-        <!-- @slot Slot for the dialog footer buttons. Should only contain EcsButtonDialog components. -->
-        <slot name="actions"></slot>
-      </div>
-    </dialog>
+  <dialog v-if="lazyLoad" ref="dialog" :class="[large ? 'ecs-dialog-large' : '']" class="ecs-dialog">
+    <div class="ecs-dialog-body">
+      <slot></slot>
+    </div>
+
+    <div v-if="$slots.actions" class="ecs-dialog-footer" :class="[stackedFooter ? 'ecs-dialog-footer-stacked' : '']">
+      <!-- @slot Slot for the dialog footer buttons. Should only contain EcsButtonDialog components. -->
+      <slot name="actions"></slot>
+    </div>
+  </dialog>
 </template>
 
 <script>
@@ -33,7 +33,8 @@
 
     data () {
       return {
-        isShown: this.show
+        isShown: this.show,
+        lazyLoad: false
       }
     },
 
@@ -49,10 +50,17 @@
       show(){
         this.isShown = this.show
 
-        if(this.isShown)
-          this.$refs.dialog.showModal()
-        else
+        if(this.isShown){
+          this.lazyLoad = true
+          this.$nextTick(() => {
+            this.$refs.dialog.showModal()
+          })
+        } else {
           this.$refs.dialog.close()
+          this.$nextTick(() => {
+            this.lazyLoad = false
+          })
+        }
       }
     },
 
@@ -80,8 +88,8 @@
   display: flex;
   flex-direction: column;
   margin: auto;
-  margin-bottom: auto;
-  margin-top: auto;
+  margin-bottom: auto !important;
+  margin-top: auto !important;
   border: none;
   padding: 0;
   overflow: visible;

package/src/components/document-state/document-state.vue

@@ -5,7 +5,7 @@
     <div v-if="instantView" class="instant" />
     <div v-else class="no-instant" />
     <span v-if="loading" class="loading">
-      <ecs-icon type="loading" width="18px" height="18px" color="#202127" />
+      <ecs-icon type="loading" size="18" color="#202127" />
     </span>
   </div>
 </template>

package/src/components/empty-state/empty-state.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="ecs-empty-state">
-    <ecs-icon v-if="type!='loading'" :type="type" :color="iconColor" :width="iconSize" :height="iconSize" />
+    <ecs-icon v-if="type!='loading'" :type="type" :color="iconColor" :size="iconSize" />
     <div v-else class="ecs-empty-state-loading" />
     <div v-if="type!='loading'" class="ecs-empty-state-message" :class="size">
       <slot></slot>

package/src/components/excerpt-snippet/excerpt-snippet.vue

@@ -3,7 +3,7 @@
     <div class="ecs-excerpt-title">
       <div class="ecs-excerpt-title-headline">
         <ecs-skeleton-loader v-if="icon && loading" type="rect" :width="20" :height="20" />
-        <ecs-icon v-if="icon && !loading" :type="icon" width="20" height="20" />
+        <ecs-icon v-if="icon && !loading" :type="icon" size="20" />
         <ecs-skeleton-loader v-if="loading" type="single" :width="20" />
         <span v-else>{{ headline }}</span>
       </div>

package/src/components/info-tooltip/info-tooltip.vue

@@ -2,7 +2,7 @@
   <i class="ecs-info-tooltip"
     @click="handleClick"
   >
-    <ecs-icon :type="icon" width="20" height="20" />
+    <ecs-icon :type="icon" size="20" />
   </i>
 </template>
 

package/src/components/input-addon/input-addon.vue

@@ -1,7 +1,7 @@
 <template>
   <span class="ecs-input-group-addon" :class="[iconClass, button ? `has-button` : '',]">
     <slot></slot>
-    <ecs-icon v-if="icon" :type="icon" width="80%" height="80%" />
+    <ecs-icon v-if="icon" :type="icon" size="80%" />
   </span>
 </template>
 

package/src/components/input-clear/input-clear.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="ecs-input-clear">
     <button @click="$emit('click', $event)" :title="tooltip" class="ecs-input-clear-button" />
-    <ecs-icon v-if="loading" type="loading" width="32" height="32" spinning color="#AEB1B9" />
+    <ecs-icon v-if="loading" type="loading" size="32" spinning color="#AEB1B9" />
   </div>
 </template>
 

package/src/components/input-search/input-search.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="ecs-search-group" :class="groupSizeClass">
-    <ecs-icon type="search" color="#B9BCC2" :width="iconSize" :height="iconSize" />
+    <ecs-icon type="search" color="#B9BCC2" :size="iconSize" />
     <input ref="input"
       :name="name"
       :disabled="disabled"

package/src/components/multiselect-option/multiselect-option.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="ecs-multiselect-option" :class="typeClass">
-    <ecs-icon v-if="icon" :type="icon" width="20" height="20" />
+    <ecs-icon v-if="icon" :type="icon" size="20" />
     <slot></slot>
   </div>
 </template>

package/src/components/multiselect-search-token/multiselect-search-token.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="ecs-multiselect-search-token" :class="typeClass">
     <div v-if="icon || operator" class="symbol">
-      <ecs-icon :type="icon" width="20" height="20" color="#FFF" />
+      <ecs-icon :type="icon" size="20" color="#FFF" />
       <div v-if="operator" class="operator">{{ operator }}</div>
     </div>
     <div class="query">
       <div v-if="descriptor" class="descriptor">{{ descriptor }}</div>
       <slot></slot>
       <button @click="$emit('remove', $event)" class="remove" title="Remove">
-        <ecs-icon type="close" width="14" height="14" color="#FFF" />
+        <ecs-icon type="close" size="14" color="#FFF" />
       </button>
     </div>
   </div>

package/src/components/multiselect-token/multiselect-token.vue

@@ -2,7 +2,7 @@
   <div class="ecs-multiselect-token">
     <slot></slot>
     <button @click="$emit('remove', $event)" class="remove">
-      <ecs-icon type="close" width="14" height="14" color="#FFF" />
+      <ecs-icon type="close" size="14" color="#FFF" />
     </button>
   </div>
 </template>

package/src/components/overlay/overlay.vue

@@ -3,7 +3,7 @@
     <div v-if="isShown" class="ecs-overlay" :style="{ top: offsetTop + 'px', height: 'calc(100vh - '+ offsetTop +'px' }">
       <div class="ecs-overlay-header">
         <div class="ecs-overlay-titles">
-          <ecs-icon v-if="icon" :type="icon" width="40" height="40" color="#B9BCC2" />
+          <ecs-icon v-if="icon" :type="icon" size="40" color="#B9BCC2" />
           <div>
             <span class="title"><span v-if="headerTitleEmphasized" class="emphasized">{{ headerTitleEmphasized }}</span> {{ headerTitle }}</span>
             <span v-if="headerTitleSubline" class="subline">{{ headerTitleSubline }}</span>

package/src/components/pagination/pagination.vue

@@ -1,62 +1,66 @@
 <template>
   <div class="ecs-pagination" :class="[ floating ? 'ecs-pagination-floating' : '' ]">
-    <ecs-flex-row :gap="8" class="ecs-pagination-nav" :style="{minWidth: tabsSpacing - 4 + 'px'}">
-      <template v-if="type == 'paginated'">
-        <ecs-flex-row>
-          <ecs-button @click="$emit('firstPage', $event)" :disabled="loading || currentPage === 1" icon="chevron-double-left" icon-only type="secondary" title="First Page" data-test="pagination-first-button" />
-          <ecs-button @click="$emit('prevPage', $event)" :disabled="loading || currentPage === 1" icon="chevron-left" icon-only type="secondary" title="Previous Page" data-test="pagination-previous-button" />
-        </ecs-flex-row>
-        <ecs-flex-row :gap="4">
-          <span>Page</span>
-          <ecs-select @change="$emit('updatePage', $event.target.value)" :disabled="!totalPages" size="sml">
-            <option v-for="n in totalPages" :key="n" :value="n" :selected="n === currentPage">{{ n }}</option>
-          </ecs-select>
-          <span v-if="totalPages" class="total">of {{ totalPages }}</span>
-        </ecs-flex-row>
-        <ecs-flex-row>
-          <ecs-button @click="$emit('nextPage', $event)" :disabled="loading || currentPage === totalPages" icon="chevron-right" icon-only type="secondary" title="Next Page" data-test="pagination-next-button" />
-          <ecs-button @click="$emit('lastPage', $event)" :disabled="loading || currentPage === totalPages" icon="chevron-double-right" icon-only type="secondary" title="Last Page" data-test="pagination-last-button" />
-        </ecs-flex-row>
-      </template>
-      <transition name="fade">
-        <ecs-flex-row v-if="loading" :gap="4" :class="$slots.tabs && type =='paginated' ? 'push-right' : ''">
-          <div v-if="!$slots.tabs && type =='paginated'" class="separator" />
-          <ecs-icon type="loading" spinning size="24" color="#858E9E" />
-        </ecs-flex-row>
-      </transition>
-    </ecs-flex-row>
-
-    <div class="ecs-pagination-tabs">
+    <div class="ecs-pagination-nav">
+      <ecs-button-toolbar-group>
+        <ecs-button-toolbar
+          @click="$emit('prevPage', $event)"
+          :disabled="loading || currentPage === 1"
+          icon="back"
+          data-test="pagination-previous-button">
+          Previous Page
+        </ecs-button-toolbar>
+        <ecs-button-toolbar
+          @click="$emit('nextPage', $event)"
+          :disabled="loading || currentPage === totalPages"
+          icon="next"
+          icon-position="right"
+          data-test="pagination-next-button">
+          Next Page
+        </ecs-button-toolbar>
+      </ecs-button-toolbar-group>
+
+      <div class="ecs-pagination-dropdown">
+        <span>Page</span>
+        <div @click="toggleDropdown" class="ecs-pagination-dropdown-button" :class="[dropdownShown ? 'active' : '', totalPages ? '' : 'disabled']">
+          <template v-if="currentPage">{{ currentPage }}</template>
+          <template v-else>-</template>
+          
+          <transition name="dropdown">
+            <div v-if="dropdownShown && totalPages" class="ecs-pagination-select scrollbar scrollbar-sml">
+              <ecs-popover-list>
+                <ecs-popover-list-item
+                  @click="$emit('update:page', n), hideDropdown"
+                  v-for="n in totalPages"
+                  :key="n"
+                  :selected="n === currentPage">
+                  {{ n }}
+                </ecs-popover-list-item>
+              </ecs-popover-list>
+            </div>
+          </transition>
+        </div>
+        <span v-if="totalPages" class="total">of {{ totalPages }}</span>
+      </div>
+    </div>
+    <div>
       <!-- @slot Slot for a sheet tab bar. -->
       <slot name="tabs"></slot>
     </div>
-
-    <ecs-flex-row v-if="showItemsPerPage && type == 'paginated'" :gap="4" class="ecs-pagination-items">
-      <span>Items per page</span>
-      <ecs-select @change="$emit('itemsPerPage', $event.target.value)" :disabled="loading" size="sml">
-        <option v-for="n in itemsPerPage" :key="n" :value="n" :selected="n === itemsPerPageSelected">{{ n }}</option>
-      </ecs-select>
-    </ecs-flex-row>
-
-    <ecs-flex-row v-if="$slots.controls" :gap="4" class="ecs-pagination-controls">
-      <!-- @slot Slot for a additional controls, such as a settings button. -->
-      <slot name="controls"></slot>
-    </ecs-flex-row>
   </div>
 </template>
 
 <script>
-  import EcsButton from '../button/button'
-  import EcsSelect from '../select/select'
-  import EcsFlexRow from '../flex/flex-row'
-  import EcsIcon from '../icon/icon'
+  import EcsButtonToolbarGroup from '../button-toolbar-group/button-toolbar-group'
+  import EcsButtonToolbar from '../button-toolbar/button-toolbar'
+  import EcsPopoverList from '../popover-list/popover-list'
+  import EcsPopoverListItem from '../popover-list-item/popover-list-item'
 
   export default {
     components: {
-      EcsButton,
-      EcsSelect,
-      EcsFlexRow,
-      EcsIcon
+      EcsButtonToolbarGroup,
+      EcsButtonToolbar,
+      EcsPopoverList,
+      EcsPopoverListItem
     },
 
     props: {
@@ -65,12 +69,6 @@
         type: Boolean,
         default: false
       },
-      /** Determines which elements are visible in the pagination component. */
-      type: {
-        type: String,
-        validator: v => ['paginated', 'infinite'].includes(v),
-        default: 'paginated'
-      },
       /** Briefly disables all controls while ongoing navigation. */
       loading: {
         type: Boolean,
@@ -83,28 +81,23 @@
       /** The total pages of the index. */
       totalPages: {
         type: Number,
+      }
+    },
+
+    data() {
+      return {
+        dropdownShown: false
+      }
+    },
+
+    methods: {
+      toggleDropdown(){
+        if(this.totalPages)
+          this.dropdownShown = !this.dropdownShown
       },
-      /** The width of the area left to the tab area in pixels. This is used to align the tab bar with a column in the table. Not needed when tabs aren't in use. */
-      tabsSpacing: {
-        type: Number,
-        default: 400
-      },
-      /** Determines if the selector for items per page should be shown. */
-      showItemsPerPage: {
-        type: Boolean,
-        default: true
-      },
-      /** The options to be show as selectable in the items per page dropdown. Requires an array with Numbers. Default: `[25, 50, 100]` */
-      itemsPerPage: {
-        type: Array,
-        default() {
-          return [25, 50, 100]
-        }
-      },
-      /** The selected option in the items per page dropdown. */
-      itemsPerPageSelected: {
-        type: Number,
-        default: 100
+
+      hideDropdown(){
+        this.dropdownShown = false
       }
     }
   }
@@ -123,9 +116,6 @@
   box-shadow: 0 -1px 0 $color-gray-4;
   position: relative;
   z-index: 2;
-  font-size: $type-scale-2-font-size;
-  line-height: $type-scale-2-line-height;
-  color: $color-gray-15;
 
   &-floating{
     border-radius: $border-radius-small;
@@ -133,51 +123,94 @@
   }
 
   &-nav{
+    display: flex;
+    align-items: center;
     height: 40px;
+    margin-right: 24px;
+  }
 
-    .ecs-form-select{
-      width: 52px;
-    }
+  .ecs-toolbar-button-group{
+    margin-right: 32px;
   }
 
-  &-tabs{
-    flex: 1;
+  .ecs-toolbar-button-icon{
+    font-size: $type-scale-2-font-size;
   }
 
-  &-items{
-    padding-right: $spacing-5;
-    
-    .ecs-form-select{
-      width: 52px;
+  &-dropdown{
+    display: flex;
+    align-items: center;
+    font-size: $type-scale-2-font-size;
+    color: $color-gray-9;
+
+    .total{
+      color: $color-gray-15;
     }
-  }
 
-  &-controls{
-    margin-left: $spacing-10;
-  }
+    &-button{
+      background: #FFF;
+      display: flex;
+      align-items: center;
+      border: 1px solid $color-gray-3;
+      padding: 0 8px;
+      height: 32px;
+      transition: .2s;
+      border-radius: $border-radius-small;
+      margin: 0 6px;
+      cursor: pointer;
+      position: relative;
+      color: $color-gray-15;
+
+      &:after{
+        content: "";
+        background: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" width="8" height="5" viewBox="0 0 8 5"><polyline fill="none" stroke="#858E9E" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" points="0 0 3 3 6 0" transform="translate(1 .8)"/></svg>');
+        width: 8px;
+        height: 5px;
+        margin-left: 6px;
+      }
 
-  .separator{
-    width: 1px;
-    background: $color-gray-4;
-    height: $spacing-20;
-  }
+      &:hover{
+        border: 1px solid $color-gray-4;
+        box-shadow: 0 1px 1px rgba($color-gray-4, .25);
+      }
+
+      &.active{
+        border: 1px solid $color-gray-5;
+        box-shadow: 0 1px 0 rgba($color-gray-2, .1) inset;
+        background: rgba($color-gray-5, .1);
+      }
 
-  .ecs-spinner{
-    margin-left: $spacing-5;
+      &.disabled{
+        border: 1px solid $color-gray-3;
+        box-shadow: none;
+        cursor: not-allowed;
+        color: $color-gray-7;
+      }
+    }
   }
 
-  .push-right{
-    margin-left: auto;
-    padding-right: $spacing-10;
+  &-select{
+    position: absolute;
+    left: 0;
+    right: auto;
+    bottom: 34px;
+    z-index: 1000;
+    background-color: #fff;
+    box-shadow: 0 0 0 1px rgba($color-gray-15, .08), 0 1px 3px 0 rgba($color-gray-15, 0.15); 
+    border-radius: $border-radius-small;
+    max-height: 30vh;
+    overflow: auto;
   }
 }
 
-.fade-enter-active, .fade-leave-active {
-  transition: all .15s;
+.dropdown-enter-active,
+.dropdown-leave-active {
+  transition: all .3s;
 }
 
-.fade-enter, .fade-leave-to {
+.dropdown-enter,
+.dropdown-leave-to {
   opacity: 0;
-  transform: scale(.2);
+  transform: translateY(10px);
 }
 </style>