vft 0.0.415 → 0.0.416

package/theme-style/src/dialog.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+
 @use 'mixins/mixins' as *;
 @use 'mixins/var' as *;
 @use 'common/var' as *;
@@ -6,27 +7,34 @@
 $name: dialog;
 
 @include b($name) {
+  @include set-component-css-var('dialog', $dialog);
+
   position: relative;
   box-sizing: border-box;
   width: var(#{getCssVarName('dialog-width')}, 50%);
   margin: var(#{getCssVarName('dialog-margin-top')}, 15vh) auto 50px;
+  padding: getCssVar('dialog', 'padding-primary');
   border-radius: getCssVar('dialog', 'border-radius');
   background: getCssVar('dialog', 'bg-color');
   box-shadow: getCssVar('dialog', 'box-shadow');
+  overflow-wrap: break-word;
 
-  @include set-component-css-var('dialog', $dialog);
+  &:focus {
+    outline: none !important;
+  }
 
   @include when(align-center) {
     margin: auto;
   }
 
   @include when(fullscreen) {
+    @include set-css-var-value('dialog-width', 100%);
+    @include set-css-var-value('dialog-margin-top', 0);
+
     height: 100%;
     margin-bottom: 0;
     overflow: auto;
-
-    @include set-css-var-value('dialog-width', 100%);
-    @include set-css-var-value('dialog-margin-top', 0);
+    border-radius: 0;
   }
 
   @include e(wrapper) {
@@ -47,34 +55,26 @@ $name: dialog;
   }
 
   @include e(header) {
-    margin-right: 16px;
-    padding: getCssVar('dialog', 'padding-primary')
-      getCssVar('dialog', 'padding-primary') 10px;
+    padding-bottom: getCssVar('dialog', 'padding-primary');
+
+    &.show-close {
+      padding-right: calc(
+        getCssVar('dialog', 'padding-primary') +
+          var(
+            #{getCssVarName('message-close-size')},
+            map.get($message, 'close-size')
+          )
+      );
+    }
   }
 
   @include e(headerbtn) {
     position: absolute;
-    top: 6px;
-    right: 0;
-    width: 54px;
-    height: 54px;
-    padding: 0;
-    border: none;
-    outline: none;
-    background: transparent;
-    font-size: var(#{getCssVarName('message-close-size')}, 20px);
-    cursor: pointer;
-
-    .#{$namespace}-dialog__close {
-      color: getCssVar('info-color');
-      font-size: inherit;
-    }
+    top: 20px;
+    right: 20px;
 
-    &:focus,
     &:hover {
-      .#{$namespace}-dialog__close {
-        color: getCssVar('primary-color');
-      }
+      color: getCssVar('primary-color');
     }
   }
 
@@ -85,16 +85,13 @@ $name: dialog;
   }
 
   @include e(body) {
-    padding: calc(#{getCssVar('dialog-padding-primary')} + 10px)
-      getCssVar('dialog-padding-primary');
     color: getCssVar('text-regular-color');
     font-size: getCssVar('dialog-content-font-size');
   }
 
   @include e(footer) {
     box-sizing: border-box;
-    padding: 10px getCssVar('dialog-padding-primary')
-      getCssVar('dialog-padding-primary');
+    padding-top: getCssVar('dialog', 'padding-primary');
     text-align: right;
   }
 
@@ -103,7 +100,6 @@ $name: dialog;
     text-align: center;
 
     @include e(body) {
-      padding: 25px calc(#{getCssVar('dialog-padding-primary')} + 5px) 30px;
       text-align: initial;
     }
 
@@ -113,9 +109,15 @@ $name: dialog;
   }
 
   @include icon-close;
+}
 
-  &:focus {
-    outline: none !important;
+.#{$namespace}-modal-dialog {
+  &.is-penetrable {
+    pointer-events: none;
+
+    .#{$namespace}-dialog {
+      pointer-events: auto;
+    }
   }
 }
 
@@ -130,7 +132,6 @@ $name: dialog;
 
 .dialog-fade-enter-active {
   animation: modal-fade-in getCssVar('transition-duration');
-
   .#{$namespace}-overlay-dialog {
     animation: dialog-fade-in getCssVar('transition-duration');
   }
@@ -138,7 +139,6 @@ $name: dialog;
 
 .dialog-fade-leave-active {
   animation: modal-fade-out getCssVar('transition-duration');
-
   .#{$namespace}-overlay-dialog {
     animation: dialog-fade-out getCssVar('transition-duration');
   }

package/theme-style/src/drawer.scss

@@ -4,34 +4,29 @@
 
 $directions: rtl, ltr, ttb, btt;
 
+.#{$namespace}-overlay.is-drawer {
+  overflow: hidden;
+}
+
 @include b(drawer) {
   @include set-component-css-var('drawer', $drawer);
 }
 
 @include b(drawer) {
-  @each $direction in $directions {
-    .#{$direction} {
-      transform: translate(0, 0);
-    }
-  }
-
   display: flex;
   position: absolute;
   box-sizing: border-box;
   flex-direction: column;
-  overflow: hidden;
   transition: all getCssVar('transition-duration');
   background-color: getCssVar('drawer', 'bg-color');
   box-shadow: getCssVar('box-shadow', 'dark');
 
-  @include e(footer) {
-    padding: getCssVar('drawer-padding-primary');
-    padding-top: 10px;
-    text-align: right;
+  @each $direction in $directions {
+    .#{$direction} {
+      transform: translate(0, 0);
+    }
   }
 
-  @include icon-close;
-
   &__sr-focus:focus {
     outline: none !important;
   }
@@ -42,7 +37,8 @@ $directions: rtl, ltr, ttb, btt;
     margin-bottom: 32px;
     padding: getCssVar('drawer-padding-primary');
     padding-bottom: 0;
-    color: rgb(114, 118, 123);
+    overflow: hidden;
+    color: getCssVar('text', 'primary-color');
 
     & > :first-child {
       flex: 1;
@@ -52,10 +48,34 @@ $directions: rtl, ltr, ttb, btt;
   &__title {
     flex: 1;
     margin: 0;
-    font-size: 1rem;
+    font-size: 16px;
     line-height: inherit;
   }
 
+  @include e(footer) {
+    padding: getCssVar('drawer-padding-primary');
+    padding-top: 10px;
+    overflow: hidden;
+    text-align: right;
+  }
+
+  &__close-btn {
+    display: inline-flex;
+    border: none;
+    outline: none;
+    background-color: transparent;
+    color: inherit;
+    font-size: getCssVar('font-size-extra-large');
+    cursor: pointer;
+
+    &:focus,
+    &:hover {
+      i {
+        color: getCssVar('primary-color');
+      }
+    }
+  }
+
   &__body {
     flex: 1;
     padding: getCssVar('drawer-padding-primary');
@@ -66,11 +86,47 @@ $directions: rtl, ltr, ttb, btt;
     }
   }
 
+  @include when(dragging) {
+    transition: none;
+  }
+
+  @include e(dragger) {
+    position: absolute;
+    transition: all 0.2s;
+    background-color: transparent;
+    user-select: none;
+
+    &::before {
+      content: '';
+      position: absolute;
+      transition: all 0.2s;
+      background-color: transparent;
+    }
+
+    &:hover::before {
+      background-color: getCssVar('primary-color');
+    }
+  }
+
   &.ltr,
   &.rtl {
     top: 0;
     bottom: 0;
     height: 100%;
+
+    > .#{$namespace}-drawer__dragger {
+      top: 0;
+      bottom: 0;
+      width: getCssVar('drawer-dragger-size');
+      height: 100%;
+      cursor: ew-resize;
+
+      &::before {
+        top: 0;
+        bottom: 0;
+        width: 3px;
+      }
+    }
   }
 
   &.ttb,
@@ -78,22 +134,68 @@ $directions: rtl, ltr, ttb, btt;
     right: 0;
     left: 0;
     width: 100%;
+
+    > .#{$namespace}-drawer__dragger {
+      right: 0;
+      left: 0;
+      width: 100%;
+      height: getCssVar('drawer-dragger-size');
+      cursor: ns-resize;
+
+      &::before {
+        right: 0;
+        left: 0;
+        height: 3px;
+      }
+    }
   }
 
   &.ltr {
     left: 0;
+
+    > .#{$namespace}-drawer__dragger {
+      right: 0;
+
+      &::before {
+        right: -2px;
+      }
+    }
   }
 
   &.rtl {
     right: 0;
+
+    > .#{$namespace}-drawer__dragger {
+      left: 0;
+
+      &::before {
+        left: -2px;
+      }
+    }
   }
 
   &.ttb {
     top: 0;
+
+    > .#{$namespace}-drawer__dragger {
+      bottom: 0;
+
+      &::before {
+        bottom: -2px;
+      }
+    }
   }
 
   &.btt {
     bottom: 0;
+
+    > .#{$namespace}-drawer__dragger {
+      top: 0;
+
+      &::before {
+        top: -2px;
+      }
+    }
   }
 }
 
@@ -114,12 +216,7 @@ $directions: rtl, ltr, ttb, btt;
 
   &-enter-from,
   &-leave-to {
-    opacity: 0;
-  }
-
-  &-enter-to,
-  &-leave-from {
-    opacity: 1;
+    background-color: transparent !important;
   }
 
   &-enter-from,

package/theme-style/src/md-container.scss

@@ -168,6 +168,7 @@ $name: md-container;
   }
 
   summary {
+    margin-bottom: 5px;
     cursor: pointer;
   }
 

package/theme-style/src/tag.scss

@@ -80,7 +80,7 @@ $tag-icon-span-gap: map.merge(
   background-color: getCssVar('tag-bg-color');
   color: getCssVar('tag-text-color');
   font-size: getCssVar('tag-font-size');
-  line-height: 1;
+  line-height: map.get($tag-height, 'default');;
   white-space: nowrap;
 
   @include css-var-from-global(('tag', 'text-color'), ('primary', 'color'));

package/theme-style/vft-dialog.css

@@ -1 +1 @@
-.vft-dialog{position:relative;box-sizing:border-box;width:var(--vft-dialog-width,50%);margin:var(--vft-dialog-margin-top,15vh) auto 50px;border-radius:var(--vft-dialog-border-radius);background:var(--vft-dialog-bg-color);box-shadow:var(--vft-dialog-box-shadow);--vft-dialog-width:50%;--vft-dialog-margin-top:15vh;--vft-dialog-bg-color:var(--vft-bg-color);--vft-dialog-box-shadow:var(--vft-box-shadow);--vft-dialog-title-font-size:var(--vft-font-size-large);--vft-dialog-content-font-size:14px;--vft-dialog-font-line-height:var(--vft-font-line-height-primary);--vft-dialog-padding-primary:20px;--vft-dialog-border-radius:var(--vft-border-radius-small)}.vft-dialog.is-align-center{margin:auto}.vft-dialog.is-fullscreen{height:100%;margin-bottom:0;overflow:auto;--vft-dialog-width:100%;--vft-dialog-margin-top:0}.vft-dialog__wrapper{position:fixed;top:0;right:0;bottom:0;left:0;margin:0;overflow:auto}.vft-dialog.is-draggable .vft-dialog__header{cursor:move;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vft-dialog__header{margin-right:16px;padding:var(--vft-dialog-padding-primary) var(--vft-dialog-padding-primary) 10px}.vft-dialog__headerbtn{position:absolute;top:6px;right:0;width:54px;height:54px;padding:0;border:none;outline:0;background:0 0;font-size:var(--vft-message-close-size,20px);cursor:pointer}.vft-dialog__headerbtn .vft-dialog__close{color:var(--vft-info-color);font-size:inherit}.vft-dialog__headerbtn:focus .vft-dialog__close,.vft-dialog__headerbtn:hover .vft-dialog__close{color:var(--vft-primary-color)}.vft-dialog__title{color:var(--vft-text-primary-color);font-size:var(--vft-dialog-title-font-size);line-height:var(--vft-dialog-font-line-height)}.vft-dialog__body{padding:calc(var(--vft-dialog-padding-primary) + 10px) var(--vft-dialog-padding-primary);color:var(--vft-text-regular-color);font-size:var(--vft-dialog-content-font-size)}.vft-dialog__footer{box-sizing:border-box;padding:10px var(--vft-dialog-padding-primary) var(--vft-dialog-padding-primary);text-align:right}.vft-dialog--center{text-align:center}.vft-dialog--center .vft-dialog__body{padding:25px calc(var(--vft-dialog-padding-primary) + 5px) 30px;text-align:initial}.vft-dialog--center .vft-dialog__footer{text-align:inherit}.vft-dialog .icon-close{width:1em;height:1em;background-color:currentcolor;-webkit-mask:url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="1024" height="1024" viewBox="0 0 1024 1024"%3E%3Cpath fill="currentColor" d="M764.288 214.592L512 466.88L259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512L214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"%2F%3E%3C%2Fsvg%3E') no-repeat;mask:url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="1024" height="1024" viewBox="0 0 1024 1024"%3E%3Cpath fill="currentColor" d="M764.288 214.592L512 466.88L259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512L214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"%2F%3E%3C%2Fsvg%3E') no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}.vft-dialog:focus{outline:0!important}.vft-overlay-dialog{position:fixed;top:0;right:0;bottom:0;left:0;overflow:auto}.dialog-fade-enter-active{animation:modal-fade-in var(--vft-transition-duration)}.dialog-fade-enter-active .vft-overlay-dialog{animation:dialog-fade-in var(--vft-transition-duration)}.dialog-fade-leave-active{animation:modal-fade-out var(--vft-transition-duration)}.dialog-fade-leave-active .vft-overlay-dialog{animation:dialog-fade-out var(--vft-transition-duration)}@keyframes dialog-fade-in{0%{transform:translate3d(0,-20px,0);opacity:0}100%{transform:translate3d(0,0,0);opacity:1}}@keyframes dialog-fade-out{0%{transform:translate3d(0,0,0);opacity:1}100%{transform:translate3d(0,-20px,0);opacity:0}}@keyframes modal-fade-in{0%{opacity:0}100%{opacity:1}}@keyframes modal-fade-out{0%{opacity:1}100%{opacity:0}}
+.vft-dialog{--vft-dialog-width:50%;--vft-dialog-margin-top:15vh;--vft-dialog-bg-color:var(--vft-bg-color);--vft-dialog-box-shadow:var(--vft-box-shadow);--vft-dialog-title-font-size:var(--vft-font-size-large);--vft-dialog-content-font-size:14px;--vft-dialog-font-line-height:var(--vft-font-line-height-primary);--vft-dialog-padding-primary:20px;--vft-dialog-border-radius:var(--vft-border-radius-small);position:relative;box-sizing:border-box;width:var(--vft-dialog-width,50%);margin:var(--vft-dialog-margin-top,15vh) auto 50px;padding:var(--vft-dialog-padding-primary);border-radius:var(--vft-dialog-border-radius);background:var(--vft-dialog-bg-color);box-shadow:var(--vft-dialog-box-shadow);overflow-wrap:break-word}.vft-dialog:focus{outline:0!important}.vft-dialog.is-align-center{margin:auto}.vft-dialog.is-fullscreen{--vft-dialog-width:100%;--vft-dialog-margin-top:0;height:100%;margin-bottom:0;overflow:auto;border-radius:0}.vft-dialog__wrapper{position:fixed;top:0;right:0;bottom:0;left:0;margin:0;overflow:auto}.vft-dialog.is-draggable .vft-dialog__header{cursor:move;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vft-dialog__header{padding-bottom:var(--vft-dialog-padding-primary)}.vft-dialog__header.show-close{padding-right:calc(var(--vft-dialog-padding-primary) + var(--vft-message-close-size,))}.vft-dialog__headerbtn{position:absolute;top:20px;right:20px}.vft-dialog__headerbtn:hover{color:var(--vft-primary-color)}.vft-dialog__title{color:var(--vft-text-primary-color);font-size:var(--vft-dialog-title-font-size);line-height:var(--vft-dialog-font-line-height)}.vft-dialog__body{color:var(--vft-text-regular-color);font-size:var(--vft-dialog-content-font-size)}.vft-dialog__footer{box-sizing:border-box;padding-top:var(--vft-dialog-padding-primary);text-align:right}.vft-dialog--center{text-align:center}.vft-dialog--center .vft-dialog__body{text-align:initial}.vft-dialog--center .vft-dialog__footer{text-align:inherit}.vft-dialog .icon-close{width:1em;height:1em;background-color:currentcolor;-webkit-mask:url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="1024" height="1024" viewBox="0 0 1024 1024"%3E%3Cpath fill="currentColor" d="M764.288 214.592L512 466.88L259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512L214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"%2F%3E%3C%2Fsvg%3E') no-repeat;mask:url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="1024" height="1024" viewBox="0 0 1024 1024"%3E%3Cpath fill="currentColor" d="M764.288 214.592L512 466.88L259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512L214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"%2F%3E%3C%2Fsvg%3E') no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}.vft-modal-dialog.is-penetrable{pointer-events:none}.vft-modal-dialog.is-penetrable .vft-dialog{pointer-events:auto}.vft-overlay-dialog{position:fixed;top:0;right:0;bottom:0;left:0;overflow:auto}.dialog-fade-enter-active{animation:modal-fade-in var(--vft-transition-duration)}.dialog-fade-enter-active .vft-overlay-dialog{animation:dialog-fade-in var(--vft-transition-duration)}.dialog-fade-leave-active{animation:modal-fade-out var(--vft-transition-duration)}.dialog-fade-leave-active .vft-overlay-dialog{animation:dialog-fade-out var(--vft-transition-duration)}@keyframes dialog-fade-in{0%{transform:translate3d(0,-20px,0);opacity:0}100%{transform:translate3d(0,0,0);opacity:1}}@keyframes dialog-fade-out{0%{transform:translate3d(0,0,0);opacity:1}100%{transform:translate3d(0,-20px,0);opacity:0}}@keyframes modal-fade-in{0%{opacity:0}100%{opacity:1}}@keyframes modal-fade-out{0%{opacity:1}100%{opacity:0}}

package/theme-style/vft-drawer.css

@@ -1 +1 @@
-.vft-drawer{--vft-drawer-bg-color:var(--vft-dialog-bg-color, var(--vft-bg-color));--vft-drawer-padding-primary:var(--vft-dialog-padding-primary, 20px)}.vft-drawer{display:flex;position:absolute;box-sizing:border-box;flex-direction:column;overflow:hidden;transition:all var(--vft-transition-duration);background-color:var(--vft-drawer-bg-color);box-shadow:var(--vft-box-shadow-dark)}.vft-drawer .rtl{transform:translate(0,0)}.vft-drawer .ltr{transform:translate(0,0)}.vft-drawer .ttb{transform:translate(0,0)}.vft-drawer .btt{transform:translate(0,0)}.vft-drawer__footer{padding:var(--vft-drawer-padding-primary);padding-top:10px;text-align:right}.vft-drawer .icon-close{width:1em;height:1em;background-color:currentcolor;-webkit-mask:url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="1024" height="1024" viewBox="0 0 1024 1024"%3E%3Cpath fill="currentColor" d="M764.288 214.592L512 466.88L259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512L214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"%2F%3E%3C%2Fsvg%3E') no-repeat;mask:url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="1024" height="1024" viewBox="0 0 1024 1024"%3E%3Cpath fill="currentColor" d="M764.288 214.592L512 466.88L259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512L214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"%2F%3E%3C%2Fsvg%3E') no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}.vft-drawer__sr-focus:focus{outline:0!important}.vft-drawer__header{display:flex;align-items:center;margin-bottom:32px;padding:var(--vft-drawer-padding-primary);padding-bottom:0;color:#72767b}.vft-drawer__header>:first-child{flex:1}.vft-drawer__title{flex:1;margin:0;font-size:1rem;line-height:inherit}.vft-drawer__body{flex:1;padding:var(--vft-drawer-padding-primary);overflow:auto}.vft-drawer__body>*{box-sizing:border-box}.vft-drawer.ltr,.vft-drawer.rtl{top:0;bottom:0;height:100%}.vft-drawer.btt,.vft-drawer.ttb{right:0;left:0;width:100%}.vft-drawer.ltr{left:0}.vft-drawer.rtl{right:0}.vft-drawer.ttb{top:0}.vft-drawer.btt{bottom:0}.vft-drawer-fade-enter-active,.vft-drawer-fade-leave-active{transition:all var(--vft-transition-duration)}.vft-drawer-fade-enter-active,.vft-drawer-fade-enter-from,.vft-drawer-fade-enter-to,.vft-drawer-fade-leave-active,.vft-drawer-fade-leave-from,.vft-drawer-fade-leave-to{overflow:hidden!important}.vft-drawer-fade-enter-from,.vft-drawer-fade-leave-to{opacity:0}.vft-drawer-fade-enter-to,.vft-drawer-fade-leave-from{opacity:1}.vft-drawer-fade-enter-from .rtl,.vft-drawer-fade-leave-to .rtl{transform:translateX(100%)}.vft-drawer-fade-enter-from .ltr,.vft-drawer-fade-leave-to .ltr{transform:translateX(-100%)}.vft-drawer-fade-enter-from .ttb,.vft-drawer-fade-leave-to .ttb{transform:translateY(-100%)}.vft-drawer-fade-enter-from .btt,.vft-drawer-fade-leave-to .btt{transform:translateY(100%)}
+.vft-overlay.is-drawer{overflow:hidden}.vft-drawer{--vft-drawer-bg-color:var(--vft-dialog-bg-color, var(--vft-bg-color));--vft-drawer-padding-primary:var(--vft-dialog-padding-primary, 20px)}.vft-drawer{display:flex;position:absolute;box-sizing:border-box;flex-direction:column;transition:all var(--vft-transition-duration);background-color:var(--vft-drawer-bg-color);box-shadow:var(--vft-box-shadow-dark)}.vft-drawer .rtl{transform:translate(0,0)}.vft-drawer .ltr{transform:translate(0,0)}.vft-drawer .ttb{transform:translate(0,0)}.vft-drawer .btt{transform:translate(0,0)}.vft-drawer__sr-focus:focus{outline:0!important}.vft-drawer__header{display:flex;align-items:center;margin-bottom:32px;padding:var(--vft-drawer-padding-primary);padding-bottom:0;overflow:hidden;color:var(--vft-text-primary-color)}.vft-drawer__header>:first-child{flex:1}.vft-drawer__title{flex:1;margin:0;font-size:16px;line-height:inherit}.vft-drawer__footer{padding:var(--vft-drawer-padding-primary);padding-top:10px;overflow:hidden;text-align:right}.vft-drawer__close-btn{display:inline-flex;border:none;outline:0;background-color:transparent;color:inherit;font-size:var(--vft-font-size-extra-large);cursor:pointer}.vft-drawer__close-btn:focus i,.vft-drawer__close-btn:hover i{color:var(--vft-primary-color)}.vft-drawer__body{flex:1;padding:var(--vft-drawer-padding-primary);overflow:auto}.vft-drawer__body>*{box-sizing:border-box}.vft-drawer.is-dragging{transition:none}.vft-drawer__dragger{position:absolute;transition:all .2s;background-color:transparent;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vft-drawer__dragger::before{content:"";position:absolute;transition:all .2s;background-color:transparent}.vft-drawer__dragger:hover::before{background-color:var(--vft-primary-color)}.vft-drawer.ltr,.vft-drawer.rtl{top:0;bottom:0;height:100%}.vft-drawer.ltr>.vft-drawer__dragger,.vft-drawer.rtl>.vft-drawer__dragger{top:0;bottom:0;width:var(--vft-drawer-dragger-size);height:100%;cursor:ew-resize}.vft-drawer.ltr>.vft-drawer__dragger::before,.vft-drawer.rtl>.vft-drawer__dragger::before{top:0;bottom:0;width:3px}.vft-drawer.btt,.vft-drawer.ttb{right:0;left:0;width:100%}.vft-drawer.btt>.vft-drawer__dragger,.vft-drawer.ttb>.vft-drawer__dragger{right:0;left:0;width:100%;height:var(--vft-drawer-dragger-size);cursor:ns-resize}.vft-drawer.btt>.vft-drawer__dragger::before,.vft-drawer.ttb>.vft-drawer__dragger::before{right:0;left:0;height:3px}.vft-drawer.ltr{left:0}.vft-drawer.ltr>.vft-drawer__dragger{right:0}.vft-drawer.ltr>.vft-drawer__dragger::before{right:-2px}.vft-drawer.rtl{right:0}.vft-drawer.rtl>.vft-drawer__dragger{left:0}.vft-drawer.rtl>.vft-drawer__dragger::before{left:-2px}.vft-drawer.ttb{top:0}.vft-drawer.ttb>.vft-drawer__dragger{bottom:0}.vft-drawer.ttb>.vft-drawer__dragger::before{bottom:-2px}.vft-drawer.btt{bottom:0}.vft-drawer.btt>.vft-drawer__dragger{top:0}.vft-drawer.btt>.vft-drawer__dragger::before{top:-2px}.vft-drawer-fade-enter-active,.vft-drawer-fade-leave-active{transition:all var(--vft-transition-duration)}.vft-drawer-fade-enter-active,.vft-drawer-fade-enter-from,.vft-drawer-fade-enter-to,.vft-drawer-fade-leave-active,.vft-drawer-fade-leave-from,.vft-drawer-fade-leave-to{overflow:hidden!important}.vft-drawer-fade-enter-from,.vft-drawer-fade-leave-to{background-color:transparent!important}.vft-drawer-fade-enter-from .rtl,.vft-drawer-fade-leave-to .rtl{transform:translateX(100%)}.vft-drawer-fade-enter-from .ltr,.vft-drawer-fade-leave-to .ltr{transform:translateX(-100%)}.vft-drawer-fade-enter-from .ttb,.vft-drawer-fade-leave-to .ttb{transform:translateY(-100%)}.vft-drawer-fade-enter-from .btt,.vft-drawer-fade-leave-to .btt{transform:translateY(100%)}