@varlet/ui 1.27.7 → 1.27.9-alpha.1653036733481

package/es/badge/Badge.js

@@ -66,7 +66,7 @@ export default defineComponent({
         icon
       } = props;
       var positionBasic = slots.default && n('position') + " " + n("--" + position);
-      var dotClass = dot && n('dot');
+      var dotClass = dot ? n('dot') : null;
       var positionClass = getPositionClass();
       var iconClass = icon ? n('icon') : null;
       return [n("--" + type), positionBasic, dotClass, positionClass, iconClass];

package/es/card/Card.js

@@ -1,37 +1,68 @@
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
 import Ripple from '../ripple';
-import { defineComponent } from 'vue';
+import VarIcon from '../icon';
+import VarButton from '../button';
+import { ref, defineComponent, watch, computed, nextTick } from 'vue';
 import { props } from './props';
-import { toSizeUnit } from '../utils/elements';
-import { createNamespace } from '../utils/components';
+import { doubleRaf, toSizeUnit } from '../utils/elements';
+import { call, createNamespace } from '../utils/components';
+import { useZIndex } from '../context/zIndex';
+import { useLock } from '../context/lock';
 var {
   n,
   classes
 } = createNamespace('card');
-import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, resolveDirective as _resolveDirective, withDirectives as _withDirectives, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+var RIPPLE_DELAY = 500;
+import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, createVNode as _createVNode, withModifiers as _withModifiers, withCtx as _withCtx, resolveDirective as _resolveDirective, withDirectives as _withDirectives, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
 
 var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
 
 var _hoisted_1 = ["src", "alt"];
 export function render(_ctx, _cache) {
+  var _component_var_icon = _resolveComponent("var-icon");
+
+  var _component_var_button = _resolveComponent("var-button");
+
   var _directive_ripple = _resolveDirective("ripple");
 
-  return _withDirectives((_openBlock(), _createElementBlock("div", {
-    class: _normalizeClass(_ctx.classes(_ctx.n(), [_ctx.elevation, "var-elevation--" + _ctx.elevation, 'var-elevation--2'])),
+  return _openBlock(), _createElementBlock("div", {
+    ref: "card",
+    class: _normalizeClass(_ctx.classes(_ctx.n(), [_ctx.isRow, _ctx.n('--layout-row')])),
     onClick: _cache[0] || (_cache[0] = function () {
       return _ctx.onClick && _ctx.onClick(...arguments);
     })
+  }, [_withDirectives((_openBlock(), _createElementBlock("div", {
+    ref: "cardFloater",
+    class: _normalizeClass(_ctx.classes(_ctx.n('floater'), [_ctx.elevation, "var-elevation--" + _ctx.elevation, 'var-elevation--1'])),
+    style: _normalizeStyle({
+      width: _ctx.floaterWidth,
+      height: _ctx.floaterHeight,
+      top: _ctx.floaterTop,
+      left: _ctx.floaterLeft,
+      overflow: _ctx.floaterOverflow,
+      position: _ctx.floaterPosition,
+      borderRadius: _ctx.floating ? '0px' : undefined,
+      zIndex: _ctx.floated ? _ctx.zIndex : undefined,
+      transition: _ctx.floated ? "background-color " + _ctx.floatingDuration + "ms, border-radius " + _ctx.floatingDuration + "ms, width " + _ctx.floatingDuration + "ms, height " + _ctx.floatingDuration + "ms, top " + _ctx.floatingDuration + "ms, left " + _ctx.floatingDuration + "ms" : undefined
+    })
   }, [_renderSlot(_ctx.$slots, "image", {}, () => [_ctx.src ? (_openBlock(), _createElementBlock("img", {
     key: 0,
     class: _normalizeClass(_ctx.n('image')),
     style: _normalizeStyle({
       objectFit: _ctx.fit,
-      height: _ctx.toSizeUnit(_ctx.height)
+      height: _ctx.toSizeUnit(_ctx.height),
+      width: _ctx.toSizeUnit(_ctx.width)
     }),
     src: _ctx.src,
     alt: _ctx.alt
   }, null, 14
   /* CLASS, STYLE, PROPS */
-  , _hoisted_1)) : _createCommentVNode("v-if", true)]), _renderSlot(_ctx.$slots, "title", {}, () => [_ctx.title ? (_openBlock(), _createElementBlock("div", {
+  , _hoisted_1)) : _createCommentVNode("v-if", true)]), _createElementVNode("div", {
+    class: _normalizeClass(_ctx.n('container'))
+  }, [_renderSlot(_ctx.$slots, "title", {}, () => [_ctx.title ? (_openBlock(), _createElementBlock("div", {
     key: 0,
     class: _normalizeClass(_ctx.n('title'))
   }, _toDisplayString(_ctx.title), 3
@@ -51,11 +82,58 @@ export function render(_ctx, _cache) {
     class: _normalizeClass(_ctx.n('footer'))
   }, [_renderSlot(_ctx.$slots, "extra")], 2
   /* CLASS */
+  )) : _createCommentVNode("v-if", true), _ctx.$slots.content && !_ctx.isRow ? (_openBlock(), _createElementBlock("div", {
+    key: 1,
+    class: _normalizeClass(_ctx.n('content')),
+    style: _normalizeStyle({
+      height: _ctx.contentHeight,
+      opacity: _ctx.opacity,
+      transition: "opacity " + _ctx.floatingDuration * 2 + "ms"
+    })
+  }, [_renderSlot(_ctx.$slots, "content")], 6
+  /* CLASS, STYLE */
   )) : _createCommentVNode("v-if", true)], 2
   /* CLASS */
+  ), _ctx.showToolBar ? (_openBlock(), _createElementBlock("div", {
+    key: 0,
+    class: _normalizeClass(_ctx.classes(_ctx.n('toolbar'), 'var--box')),
+    style: _normalizeStyle({
+      zIndex: _ctx.zIndex,
+      opacity: _ctx.opacity,
+      transition: "opacity " + _ctx.floatingDuration * 2 + "ms"
+    })
+  }, [_renderSlot(_ctx.$slots, "toolbar-close", {}, () => [_createVNode(_component_var_button, {
+    size: "large",
+    round: "",
+    class: _normalizeClass(_ctx.classes(_ctx.n('toolbar-close'), 'var-elevation--6')),
+    onClick: _withModifiers(_ctx.close, ["stop"])
+  }, {
+    default: _withCtx(() => [_createVNode(_component_var_icon, {
+      name: "window-close",
+      size: "24px"
+    })]),
+    _: 1
+    /* STABLE */
+
+  }, 8
+  /* PROPS */
+  , ["class", "onClick"])]), _renderSlot(_ctx.$slots, "toolbar-extra")], 6
+  /* CLASS, STYLE */
+  )) : _createCommentVNode("v-if", true)], 6
+  /* CLASS, STYLE */
   )), [[_directive_ripple, {
-    disabled: !_ctx.ripple
-  }]]);
+    disabled: !_ctx.ripple || _ctx.floater
+  }]]), _createElementVNode("div", {
+    class: _normalizeClass(_ctx.n('holder')),
+    style: _normalizeStyle({
+      width: _ctx.holderWidth,
+      height: _ctx.holderHeight
+    })
+  }, null, 6
+  /* CLASS, STYLE */
+  )], 2
+  /* CLASS */
+  );
 }
 export default defineComponent({
   render,
@@ -63,13 +141,136 @@ export default defineComponent({
   directives: {
     Ripple
   },
+  components: {
+    VarIcon,
+    VarButton
+  },
   props,
 
-  setup() {
+  setup(props) {
+    var card = ref(null);
+    var cardFloater = ref(null);
+    var holderWidth = ref('auto');
+    var holderHeight = ref('auto');
+    var floaterWidth = ref('100%');
+    var floaterHeight = ref('100%');
+    var floaterTop = ref('auto');
+    var floaterLeft = ref('auto');
+    var floaterPosition = ref('static');
+    var floaterOverflow = ref('hidden');
+    var contentHeight = ref('0px');
+    var opacity = ref('0');
+    var {
+      zIndex
+    } = useZIndex(() => props.floating, 1);
+    var isRow = computed(() => props.layout === 'row');
+    var showToolBar = ref(false);
+    var floated = ref(false);
+    useLock(() => props.floating, () => isRow);
+    var dropdownFloaterTop = 'auto';
+    var dropdownFloaterLeft = 'auto';
+    var dropper = null;
+    var floater = ref(null);
+
+    var floating = /*#__PURE__*/function () {
+      var _ref = _asyncToGenerator(function* () {
+        clearTimeout(floater.value);
+        clearTimeout(dropper);
+        floater.value = null;
+        floater.value = setTimeout( /*#__PURE__*/_asyncToGenerator(function* () {
+          var {
+            width,
+            height,
+            left,
+            top
+          } = card.value.getBoundingClientRect();
+          holderWidth.value = toSizeUnit(width);
+          holderHeight.value = toSizeUnit(height);
+          floaterWidth.value = holderWidth.value;
+          floaterHeight.value = holderHeight.value;
+          floaterTop.value = toSizeUnit(top);
+          floaterLeft.value = toSizeUnit(left);
+          floaterPosition.value = 'fixed';
+          dropdownFloaterTop = floaterTop.value;
+          dropdownFloaterLeft = floaterLeft.value;
+          showToolBar.value = true;
+          yield doubleRaf();
+          floaterTop.value = '0';
+          floaterLeft.value = '0';
+          floaterWidth.value = '100vw';
+          floaterHeight.value = '100vh';
+          contentHeight.value = 'auto';
+          opacity.value = '1';
+          floaterOverflow.value = 'auto';
+          floated.value = true;
+        }), props.ripple ? RIPPLE_DELAY : 0);
+      });
+
+      return function floating() {
+        return _ref.apply(this, arguments);
+      };
+    }();
+
+    var dropdown = () => {
+      clearTimeout(dropper);
+      clearTimeout(floater.value);
+      floater.value = null;
+      floaterWidth.value = holderWidth.value;
+      floaterHeight.value = holderHeight.value;
+      floaterTop.value = dropdownFloaterTop;
+      floaterLeft.value = dropdownFloaterLeft;
+      contentHeight.value = '0px';
+      opacity.value = '0';
+      showToolBar.value = false;
+      dropper = setTimeout(() => {
+        holderWidth.value = 'auto';
+        holderHeight.value = 'auto';
+        floaterWidth.value = '100%';
+        floaterHeight.value = '100%';
+        floaterTop.value = 'auto';
+        floaterLeft.value = 'auto';
+        dropdownFloaterTop = 'auto';
+        dropdownFloaterLeft = 'auto';
+        floaterOverflow.value = 'hidden';
+        floaterPosition.value = 'static';
+        floated.value = false;
+      }, props.floatingDuration);
+    };
+
+    var close = () => {
+      call(props['onUpdate:floating'], false);
+    };
+
+    watch(() => props.floating, value => {
+      if (isRow.value) return;
+      nextTick(() => {
+        value ? floating() : dropdown();
+      });
+    }, {
+      immediate: true
+    });
     return {
       n,
       classes,
-      toSizeUnit
+      toSizeUnit,
+      card,
+      cardFloater,
+      holderWidth,
+      holderHeight,
+      floater,
+      floaterWidth,
+      floaterHeight,
+      floaterTop,
+      floaterLeft,
+      floaterPosition,
+      floaterOverflow,
+      contentHeight,
+      opacity,
+      zIndex,
+      isRow,
+      close,
+      showToolBar,
+      floated
     };
   }
 

package/es/card/card.css

@@ -1 +1 @@
-:root { --card-padding: 0 0 15px 0; --card-background: #fff; --card-border-radius: 4px; --card-image-width: 100%; --card-image-height: 200px; --card-title-color: #333; --card-title-font-size: 20px; --card-title-padding: 0 12px; --card-title-margin: 15px 0 0 0; --card-subtitle-color: rgba(0, 0, 0, 0.6); --card-subtitle-font-size: 14px; --card-subtitle-padding: 0 13px; --card-subtitle-margin: 10px 0 0 0; --card-description-color: rgba(0, 0, 0, 0.6); --card-description-font-size: 14px; --card-description-margin: 20px 0 0 0; --card-description-padding: 0 13px; --card-footer-padding: 0 12px; --card-footer-margin: 30px 0 0px 0; --card-line-height: 22px;}.var-card { border-radius: var(--card-border-radius); overflow: hidden; padding: var(--card-padding); line-height: var(--card-line-height); background: var(--card-background); transition: background-color 0.25s;}.var-card__image { width: var(--card-image-width); height: var(--card-image-height); display: block;}.var-card__title { font-size: var(--card-title-font-size); padding: var(--card-title-padding); margin: var(--card-title-margin); color: var(--card-title-color);}.var-card__subtitle { font-size: var(--card-subtitle-font-size); color: var(--card-subtitle-color); padding: var(--card-subtitle-padding); margin: var(--card-subtitle-margin);}.var-card__description { font-size: var(--card-description-font-size); color: var(--card-description-color); margin: var(--card-description-margin); padding: var(--card-description-padding); word-break: break-all;}.var-card__footer { padding: var(--card-footer-padding); margin: var(--card-footer-margin);}
+:root { --card-padding: 0 0 15px 0; --card-background: #fff; --card-border-radius: 4px; --card-image-width: 100%; --card-row-image-width: 150px; --card-image-height: 200px; --card-row-height: 150px; --card-title-color: #333; --card-title-font-size: 20px; --card-title-padding: 0 12px; --card-title-margin: 15px 0 0 0; --card-title-row-margin: 12px 0; --card-subtitle-color: rgba(0, 0, 0, 0.6); --card-subtitle-font-size: 14px; --card-subtitle-padding: 0 12px; --card-subtitle-margin: 10px 0 0 0; --card-subtitle-row-margin: -8px 0 0 0; --card-description-color: rgba(0, 0, 0, 0.6); --card-description-font-size: 14px; --card-description-margin: 20px 0 0 0; --card-description-padding: 0 13px; --card-footer-padding: 0 12px; --card-footer-right: 13px; --card-footer-bottom: 9px; --card-footer-margin: 30px 0 0px 0; --card-line-height: 22px; --card-row-line-height: 1.5; --card-floater-toolbar-bottom: 16px; --card-floater-toolbar-right: 16px; --card-floater-toolbar-color: #fff; --card-floater-toolbar-close-size: 24px; --card-floater-toolbar-close-padding: 16px; --card-floater-toolbar-close-primary-color: #212121;}.var-card--layout-row { height: var(--card-row-height); position: relative;}.var-card__floater { border-radius: var(--card-border-radius); display: flex; flex-direction: column; line-height: var(--card-line-height); background: var(--card-background); transition-timing-function: cubic-bezier(0.45, 0.19, 0.06, 0.89);}.var-card__container { padding: var(--card-padding); flex-grow: 1; min-width: 0;}.var-card--layout-row .var-card__floater { flex-direction: row; line-height: var(--card-row-line-height);}.var-card__image { width: var(--card-image-width); height: var(--card-image-height); display: block;}.var-card--layout-row .var-card__image { width: var(--card-row-image-width); height: 100%; display: block; flex-shrink: 0;}.var-card__title { font-size: var(--card-title-font-size); padding: var(--card-title-padding); margin: var(--card-title-margin); color: var(--card-title-color); word-break: break-word;}.var-card--layout-row .var-card__title { max-width: 100%; overflow: hidden; margin: var(--card-title-row-margin); text-overflow: ellipsis; white-space: nowrap;}.var-card__subtitle { font-size: var(--card-subtitle-font-size); color: var(--card-subtitle-color); padding: var(--card-subtitle-padding); margin: var(--card-subtitle-margin); word-break: break-word;}.var-card--layout-row .var-card__subtitle { margin: var(--card-subtitle-row-margin); text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;}.var-card__description { font-size: var(--card-description-font-size); color: var(--card-description-color); margin: var(--card-description-margin); padding: var(--card-description-padding); word-break: break-all;}.var-card__footer { display: flex; justify-content: flex-end; padding: var(--card-footer-padding); margin: var(--card-footer-margin);}.var-card--layout-row .var-card__footer { position: absolute; padding: 0; right: var(--card-footer-right); bottom: var(--card-footer-bottom);}.var-card__content { overflow: hidden; transition-timing-function: cubic-bezier(0.45, 0.19, 0.06, 0.89);}.var-card__toolbar { position: fixed; bottom: var(--card-floater-toolbar-bottom); right: var(--card-floater-toolbar-right);}.var-card__toolbar-close { padding: var(--card-floater-toolbar-close-padding); background-color: var(--card-floater-toolbar-close-primary-color); color: var(--card-floater-toolbar-color);}.var-card__toolbar-close .var-icon { width: var(--card-floater-toolbar-close-size); height: var(--card-floater-toolbar-close-size); font-size: var(--card-floater-toolbar-close-size);}

package/es/card/card.less

@@ -2,53 +2,97 @@
 @card-background: #fff;
 @card-border-radius: 4px;
 @card-image-width: 100%;
+@card-row-image-width: 150px;
+@card-row-height: 150px;
 @card-image-height: 200px;
 @card-title-color: #333;
 @card-title-font-size: 20px;
 @card-title-padding: 0 12px;
 @card-title-margin: 15px 0 0 0;
+@card-title-row-margin: 12px 0;
 @card-subtitle-color: rgba(0, 0, 0, 0.6);
 @card-subtitle-font-size: 14px;
-@card-subtitle-padding: 0 13px;
+@card-subtitle-padding: 0 12px;
+@card-subtitle-row-margin: -8px 0 0 0;
 @card-subtitle-margin: 10px 0 0 0;
 @card-description-color: rgba(0, 0, 0, 0.6);
 @card-description-font-size: 14px;
 @card-description-margin: 20px 0 0 0;
 @card-description-padding: 0 13px;
 @card-footer-padding: 0 12px;
+@card-footer-right: 13px;
+@card-footer-bottom: 9px;
 @card-footer-margin: 30px 0 0px 0;
 @card-line-height: 22px;
+@card-row-line-height: 1.5;
+@card-floater-toolbar-bottom: 16px;
+@card-floater-toolbar-right: 16px;
+@card-floater-toolbar-color: #fff;
+@card-floater-toolbar-close-size: 24px;
+@card-floater-toolbar-close-padding: 16px;
+@card-floater-toolbar-close-primary-color: #212121;
 
 :root {
   --card-padding: @card-padding;
   --card-background: @card-background;
   --card-border-radius: @card-border-radius;
   --card-image-width: @card-image-width;
+  --card-row-image-width: @card-row-image-width;
   --card-image-height: @card-image-height;
+  --card-row-height: @card-row-height;
   --card-title-color: @card-title-color;
   --card-title-font-size: @card-title-font-size;
   --card-title-padding: @card-title-padding;
   --card-title-margin: @card-title-margin;
+  --card-title-row-margin: @card-title-row-margin;
   --card-subtitle-color: @card-subtitle-color;
   --card-subtitle-font-size: @card-subtitle-font-size;
   --card-subtitle-padding: @card-subtitle-padding;
   --card-subtitle-margin: @card-subtitle-margin;
+  --card-subtitle-row-margin: @card-subtitle-row-margin;
   --card-description-color: @card-description-color;
   --card-description-font-size: @card-description-font-size;
   --card-description-margin: @card-description-margin;
   --card-description-padding: @card-description-padding;
   --card-footer-padding: @card-footer-padding;
+  --card-footer-right: @card-footer-right;
+  --card-footer-bottom: @card-footer-bottom;
   --card-footer-margin: @card-footer-margin;
   --card-line-height: @card-line-height;
+  --card-row-line-height: @card-row-line-height;
+  --card-floater-toolbar-bottom: @card-floater-toolbar-bottom;
+  --card-floater-toolbar-right: @card-floater-toolbar-right;
+  --card-floater-toolbar-color: @card-floater-toolbar-color;
+  --card-floater-toolbar-close-size: @card-floater-toolbar-close-size;
+  --card-floater-toolbar-close-padding: @card-floater-toolbar-close-padding;
+  --card-floater-toolbar-close-primary-color: @card-floater-toolbar-close-primary-color;
 }
 
 .var-card {
-  border-radius: var(--card-border-radius);
-  overflow: hidden;
-  padding: var(--card-padding);
-  line-height: var(--card-line-height);
-  background: var(--card-background);
-  transition: background-color 0.25s;
+  &--layout-row {
+    height: var(--card-row-height);
+    position: relative;
+  }
+
+  &__floater {
+    border-radius: var(--card-border-radius);
+    display: flex;
+    flex-direction: column;
+    line-height: var(--card-line-height);
+    background: var(--card-background);
+    transition-timing-function: cubic-bezier(0.45, 0.19, 0.06, 0.89);
+  }
+
+  &__container {
+    padding: var(--card-padding);
+    flex-grow: 1;
+    min-width: 0;
+  }
+
+  &--layout-row &__floater {
+    flex-direction: row;
+    line-height: var(--card-row-line-height);
+  }
 
   &__image {
     width: var(--card-image-width);
@@ -56,11 +100,27 @@
     display: block;
   }
 
+  &--layout-row &__image {
+    width: var(--card-row-image-width);
+    height: 100%;
+    display: block;
+    flex-shrink: 0;
+  }
+
   &__title {
     font-size: var(--card-title-font-size);
     padding: var(--card-title-padding);
     margin: var(--card-title-margin);
     color: var(--card-title-color);
+    word-break: break-word;
+  }
+
+  &--layout-row &__title {
+    max-width: 100%;
+    overflow: hidden;
+    margin: var(--card-title-row-margin);
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   &__subtitle {
@@ -68,6 +128,16 @@
     color: var(--card-subtitle-color);
     padding: var(--card-subtitle-padding);
     margin: var(--card-subtitle-margin);
+    word-break: break-word;
+  }
+
+  &--layout-row &__subtitle {
+    margin: var(--card-subtitle-row-margin);
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
   }
 
   &__description {
@@ -79,7 +149,39 @@
   }
 
   &__footer {
+    display: flex;
+    justify-content: flex-end;
     padding: var(--card-footer-padding);
     margin: var(--card-footer-margin);
   }
+
+  &--layout-row &__footer {
+    position: absolute;
+    padding: 0;
+    right: var(--card-footer-right);
+    bottom: var(--card-footer-bottom);
+  }
+
+  &__content {
+    overflow: hidden;
+    transition-timing-function: cubic-bezier(0.45, 0.19, 0.06, 0.89);
+  }
+
+  &__toolbar {
+    position: fixed;
+    bottom: var(--card-floater-toolbar-bottom);
+    right: var(--card-floater-toolbar-right);
+  }
+
+  &__toolbar-close {
+    padding: var(--card-floater-toolbar-close-padding);
+    background-color: var(--card-floater-toolbar-close-primary-color);
+    color: var(--card-floater-toolbar-color);
+
+    .var-icon {
+      width: var(--card-floater-toolbar-close-size);
+      height: var(--card-floater-toolbar-close-size);
+      font-size: var(--card-floater-toolbar-close-size);
+    }
+  }
 }

package/es/card/props.js

@@ -14,6 +14,24 @@ export var props = {
   height: {
     type: [String, Number]
   },
+  width: {
+    type: [String, Number]
+  },
+  layout: {
+    type: String,
+    default: 'column'
+  },
+  floating: {
+    type: Boolean,
+    default: false
+  },
+  'onUpdate:floating': {
+    type: Function
+  },
+  floatingDuration: {
+    type: Number,
+    default: 250
+  },
   alt: {
     type: String
   },

package/es/col/Col.js

@@ -11,7 +11,7 @@ var {
 import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
 export function render(_ctx, _cache) {
   return _openBlock(), _createElementBlock("div", {
-    class: _normalizeClass(_ctx.classes(_ctx.n(), 'var--box', [_ctx.span, _ctx.n("--span-" + _ctx.span)], [_ctx.offset, _ctx.n("--offset-" + _ctx.offset)], ..._ctx.getSize('xs', _ctx.xs), ..._ctx.getSize('sm', _ctx.sm), ..._ctx.getSize('md', _ctx.md), ..._ctx.getSize('lg', _ctx.lg), ..._ctx.getSize('xl', _ctx.xl))),
+    class: _normalizeClass(_ctx.classes(_ctx.n(), 'var--box', [_ctx.span >= 0, _ctx.n("--span-" + _ctx.span)], [_ctx.offset, _ctx.n("--offset-" + _ctx.offset)], ..._ctx.getSize('xs', _ctx.xs), ..._ctx.getSize('sm', _ctx.sm), ..._ctx.getSize('md', _ctx.md), ..._ctx.getSize('lg', _ctx.lg), ..._ctx.getSize('xl', _ctx.xl))),
     style: _normalizeStyle({
       paddingLeft: _ctx.toSizeUnit(_ctx.padding.left),
       paddingRight: _ctx.toSizeUnit(_ctx.padding.right)
@@ -49,19 +49,19 @@ export default defineComponent({
     var getSize = (mode, size) => {
       var classes = [];
 
-      if (!size) {
+      if (size == null) {
         return classes;
       }
 
       if (isPlainObject(size)) {
         var {
-          span: _span,
-          offset: _offset
+          offset: _offset,
+          span: _span
         } = size;
-        _span && classes.push(n("--span-" + mode + "-" + _span));
+        Number(_span) >= 0 && classes.push(n("--span-" + mode + "-" + _span));
         _offset && classes.push(n("--offset-" + mode + "-" + _offset));
       } else {
-        classes.push(n("--span-" + mode + "-" + size));
+        Number(size) >= 0 && classes.push(n("--span-" + mode + "-" + size));
       }
 
       return classes;

package/es/col/col.css

@@ -1 +1 @@
-.var-col { transition: all 0.25s;}.var-col--span-1 { flex: 0 0 4.16666667%;}.var-col--offset-1 { margin-left: 4.16666667%;}.var-col--span-2 { flex: 0 0 8.33333333%;}.var-col--offset-2 { margin-left: 8.33333333%;}.var-col--span-3 { flex: 0 0 12.5%;}.var-col--offset-3 { margin-left: 12.5%;}.var-col--span-4 { flex: 0 0 16.66666667%;}.var-col--offset-4 { margin-left: 16.66666667%;}.var-col--span-5 { flex: 0 0 20.83333333%;}.var-col--offset-5 { margin-left: 20.83333333%;}.var-col--span-6 { flex: 0 0 25%;}.var-col--offset-6 { margin-left: 25%;}.var-col--span-7 { flex: 0 0 29.16666667%;}.var-col--offset-7 { margin-left: 29.16666667%;}.var-col--span-8 { flex: 0 0 33.33333333%;}.var-col--offset-8 { margin-left: 33.33333333%;}.var-col--span-9 { flex: 0 0 37.5%;}.var-col--offset-9 { margin-left: 37.5%;}.var-col--span-10 { flex: 0 0 41.66666667%;}.var-col--offset-10 { margin-left: 41.66666667%;}.var-col--span-11 { flex: 0 0 45.83333333%;}.var-col--offset-11 { margin-left: 45.83333333%;}.var-col--span-12 { flex: 0 0 50%;}.var-col--offset-12 { margin-left: 50%;}.var-col--span-13 { flex: 0 0 54.16666667%;}.var-col--offset-13 { margin-left: 54.16666667%;}.var-col--span-14 { flex: 0 0 58.33333333%;}.var-col--offset-14 { margin-left: 58.33333333%;}.var-col--span-15 { flex: 0 0 62.5%;}.var-col--offset-15 { margin-left: 62.5%;}.var-col--span-16 { flex: 0 0 66.66666667%;}.var-col--offset-16 { margin-left: 66.66666667%;}.var-col--span-17 { flex: 0 0 70.83333333%;}.var-col--offset-17 { margin-left: 70.83333333%;}.var-col--span-18 { flex: 0 0 75%;}.var-col--offset-18 { margin-left: 75%;}.var-col--span-19 { flex: 0 0 79.16666667%;}.var-col--offset-19 { margin-left: 79.16666667%;}.var-col--span-20 { flex: 0 0 83.33333333%;}.var-col--offset-20 { margin-left: 83.33333333%;}.var-col--span-21 { flex: 0 0 87.5%;}.var-col--offset-21 { margin-left: 87.5%;}.var-col--span-22 { flex: 0 0 91.66666667%;}.var-col--offset-22 { margin-left: 91.66666667%;}.var-col--span-23 { flex: 0 0 95.83333333%;}.var-col--offset-23 { margin-left: 95.83333333%;}.var-col--span-24 { flex: 0 0 100%;}.var-col--offset-24 { margin-left: 100%;}@media only screen and (max-width: 767px) { .var-col--span-xs-1 { flex: 0 0 4.16666667%; } .var-col--offset-xs-1 { margin-left: 4.16666667%; } .var-col--span-xs-2 { flex: 0 0 8.33333333%; } .var-col--offset-xs-2 { margin-left: 8.33333333%; } .var-col--span-xs-3 { flex: 0 0 12.5%; } .var-col--offset-xs-3 { margin-left: 12.5%; } .var-col--span-xs-4 { flex: 0 0 16.66666667%; } .var-col--offset-xs-4 { margin-left: 16.66666667%; } .var-col--span-xs-5 { flex: 0 0 20.83333333%; } .var-col--offset-xs-5 { margin-left: 20.83333333%; } .var-col--span-xs-6 { flex: 0 0 25%; } .var-col--offset-xs-6 { margin-left: 25%; } .var-col--span-xs-7 { flex: 0 0 29.16666667%; } .var-col--offset-xs-7 { margin-left: 29.16666667%; } .var-col--span-xs-8 { flex: 0 0 33.33333333%; } .var-col--offset-xs-8 { margin-left: 33.33333333%; } .var-col--span-xs-9 { flex: 0 0 37.5%; } .var-col--offset-xs-9 { margin-left: 37.5%; } .var-col--span-xs-10 { flex: 0 0 41.66666667%; } .var-col--offset-xs-10 { margin-left: 41.66666667%; } .var-col--span-xs-11 { flex: 0 0 45.83333333%; } .var-col--offset-xs-11 { margin-left: 45.83333333%; } .var-col--span-xs-12 { flex: 0 0 50%; } .var-col--offset-xs-12 { margin-left: 50%; } .var-col--span-xs-13 { flex: 0 0 54.16666667%; } .var-col--offset-xs-13 { margin-left: 54.16666667%; } .var-col--span-xs-14 { flex: 0 0 58.33333333%; } .var-col--offset-xs-14 { margin-left: 58.33333333%; } .var-col--span-xs-15 { flex: 0 0 62.5%; } .var-col--offset-xs-15 { margin-left: 62.5%; } .var-col--span-xs-16 { flex: 0 0 66.66666667%; } .var-col--offset-xs-16 { margin-left: 66.66666667%; } .var-col--span-xs-17 { flex: 0 0 70.83333333%; } .var-col--offset-xs-17 { margin-left: 70.83333333%; } .var-col--span-xs-18 { flex: 0 0 75%; } .var-col--offset-xs-18 { margin-left: 75%; } .var-col--span-xs-19 { flex: 0 0 79.16666667%; } .var-col--offset-xs-19 { margin-left: 79.16666667%; } .var-col--span-xs-20 { flex: 0 0 83.33333333%; } .var-col--offset-xs-20 { margin-left: 83.33333333%; } .var-col--span-xs-21 { flex: 0 0 87.5%; } .var-col--offset-xs-21 { margin-left: 87.5%; } .var-col--span-xs-22 { flex: 0 0 91.66666667%; } .var-col--offset-xs-22 { margin-left: 91.66666667%; } .var-col--span-xs-23 { flex: 0 0 95.83333333%; } .var-col--offset-xs-23 { margin-left: 95.83333333%; } .var-col--span-xs-24 { flex: 0 0 100%; } .var-col--offset-xs-24 { margin-left: 100%; }}@media only screen and (min-width: 768px) and (max-width: 991px) { .var-col--span-sm-1 { flex: 0 0 4.16666667%; } .var-col--offset-sm-1 { margin-left: 4.16666667%; } .var-col--span-sm-2 { flex: 0 0 8.33333333%; } .var-col--offset-sm-2 { margin-left: 8.33333333%; } .var-col--span-sm-3 { flex: 0 0 12.5%; } .var-col--offset-sm-3 { margin-left: 12.5%; } .var-col--span-sm-4 { flex: 0 0 16.66666667%; } .var-col--offset-sm-4 { margin-left: 16.66666667%; } .var-col--span-sm-5 { flex: 0 0 20.83333333%; } .var-col--offset-sm-5 { margin-left: 20.83333333%; } .var-col--span-sm-6 { flex: 0 0 25%; } .var-col--offset-sm-6 { margin-left: 25%; } .var-col--span-sm-7 { flex: 0 0 29.16666667%; } .var-col--offset-sm-7 { margin-left: 29.16666667%; } .var-col--span-sm-8 { flex: 0 0 33.33333333%; } .var-col--offset-sm-8 { margin-left: 33.33333333%; } .var-col--span-sm-9 { flex: 0 0 37.5%; } .var-col--offset-sm-9 { margin-left: 37.5%; } .var-col--span-sm-10 { flex: 0 0 41.66666667%; } .var-col--offset-sm-10 { margin-left: 41.66666667%; } .var-col--span-sm-11 { flex: 0 0 45.83333333%; } .var-col--offset-sm-11 { margin-left: 45.83333333%; } .var-col--span-sm-12 { flex: 0 0 50%; } .var-col--offset-sm-12 { margin-left: 50%; } .var-col--span-sm-13 { flex: 0 0 54.16666667%; } .var-col--offset-sm-13 { margin-left: 54.16666667%; } .var-col--span-sm-14 { flex: 0 0 58.33333333%; } .var-col--offset-sm-14 { margin-left: 58.33333333%; } .var-col--span-sm-15 { flex: 0 0 62.5%; } .var-col--offset-sm-15 { margin-left: 62.5%; } .var-col--span-sm-16 { flex: 0 0 66.66666667%; } .var-col--offset-sm-16 { margin-left: 66.66666667%; } .var-col--span-sm-17 { flex: 0 0 70.83333333%; } .var-col--offset-sm-17 { margin-left: 70.83333333%; } .var-col--span-sm-18 { flex: 0 0 75%; } .var-col--offset-sm-18 { margin-left: 75%; } .var-col--span-sm-19 { flex: 0 0 79.16666667%; } .var-col--offset-sm-19 { margin-left: 79.16666667%; } .var-col--span-sm-20 { flex: 0 0 83.33333333%; } .var-col--offset-sm-20 { margin-left: 83.33333333%; } .var-col--span-sm-21 { flex: 0 0 87.5%; } .var-col--offset-sm-21 { margin-left: 87.5%; } .var-col--span-sm-22 { flex: 0 0 91.66666667%; } .var-col--offset-sm-22 { margin-left: 91.66666667%; } .var-col--span-sm-23 { flex: 0 0 95.83333333%; } .var-col--offset-sm-23 { margin-left: 95.83333333%; } .var-col--span-sm-24 { flex: 0 0 100%; } .var-col--offset-sm-24 { margin-left: 100%; }}@media only screen and (min-width: 992px) and (max-width: 1199px) { .var-col--span-md-1 { flex: 0 0 4.16666667%; } .var-col--offset-md-1 { margin-left: 4.16666667%; } .var-col--span-md-2 { flex: 0 0 8.33333333%; } .var-col--offset-md-2 { margin-left: 8.33333333%; } .var-col--span-md-3 { flex: 0 0 12.5%; } .var-col--offset-md-3 { margin-left: 12.5%; } .var-col--span-md-4 { flex: 0 0 16.66666667%; } .var-col--offset-md-4 { margin-left: 16.66666667%; } .var-col--span-md-5 { flex: 0 0 20.83333333%; } .var-col--offset-md-5 { margin-left: 20.83333333%; } .var-col--span-md-6 { flex: 0 0 25%; } .var-col--offset-md-6 { margin-left: 25%; } .var-col--span-md-7 { flex: 0 0 29.16666667%; } .var-col--offset-md-7 { margin-left: 29.16666667%; } .var-col--span-md-8 { flex: 0 0 33.33333333%; } .var-col--offset-md-8 { margin-left: 33.33333333%; } .var-col--span-md-9 { flex: 0 0 37.5%; } .var-col--offset-md-9 { margin-left: 37.5%; } .var-col--span-md-10 { flex: 0 0 41.66666667%; } .var-col--offset-md-10 { margin-left: 41.66666667%; } .var-col--span-md-11 { flex: 0 0 45.83333333%; } .var-col--offset-md-11 { margin-left: 45.83333333%; } .var-col--span-md-12 { flex: 0 0 50%; } .var-col--offset-md-12 { margin-left: 50%; } .var-col--span-md-13 { flex: 0 0 54.16666667%; } .var-col--offset-md-13 { margin-left: 54.16666667%; } .var-col--span-md-14 { flex: 0 0 58.33333333%; } .var-col--offset-md-14 { margin-left: 58.33333333%; } .var-col--span-md-15 { flex: 0 0 62.5%; } .var-col--offset-md-15 { margin-left: 62.5%; } .var-col--span-md-16 { flex: 0 0 66.66666667%; } .var-col--offset-md-16 { margin-left: 66.66666667%; } .var-col--span-md-17 { flex: 0 0 70.83333333%; } .var-col--offset-md-17 { margin-left: 70.83333333%; } .var-col--span-md-18 { flex: 0 0 75%; } .var-col--offset-md-18 { margin-left: 75%; } .var-col--span-md-19 { flex: 0 0 79.16666667%; } .var-col--offset-md-19 { margin-left: 79.16666667%; } .var-col--span-md-20 { flex: 0 0 83.33333333%; } .var-col--offset-md-20 { margin-left: 83.33333333%; } .var-col--span-md-21 { flex: 0 0 87.5%; } .var-col--offset-md-21 { margin-left: 87.5%; } .var-col--span-md-22 { flex: 0 0 91.66666667%; } .var-col--offset-md-22 { margin-left: 91.66666667%; } .var-col--span-md-23 { flex: 0 0 95.83333333%; } .var-col--offset-md-23 { margin-left: 95.83333333%; } .var-col--span-md-24 { flex: 0 0 100%; } .var-col--offset-md-24 { margin-left: 100%; }}@media only screen and (min-width: 1200px) and (max-width: 1919px) { .var-col--span-lg-1 { flex: 0 0 4.16666667%; } .var-col--offset-lg-1 { margin-left: 4.16666667%; } .var-col--span-lg-2 { flex: 0 0 8.33333333%; } .var-col--offset-lg-2 { margin-left: 8.33333333%; } .var-col--span-lg-3 { flex: 0 0 12.5%; } .var-col--offset-lg-3 { margin-left: 12.5%; } .var-col--span-lg-4 { flex: 0 0 16.66666667%; } .var-col--offset-lg-4 { margin-left: 16.66666667%; } .var-col--span-lg-5 { flex: 0 0 20.83333333%; } .var-col--offset-lg-5 { margin-left: 20.83333333%; } .var-col--span-lg-6 { flex: 0 0 25%; } .var-col--offset-lg-6 { margin-left: 25%; } .var-col--span-lg-7 { flex: 0 0 29.16666667%; } .var-col--offset-lg-7 { margin-left: 29.16666667%; } .var-col--span-lg-8 { flex: 0 0 33.33333333%; } .var-col--offset-lg-8 { margin-left: 33.33333333%; } .var-col--span-lg-9 { flex: 0 0 37.5%; } .var-col--offset-lg-9 { margin-left: 37.5%; } .var-col--span-lg-10 { flex: 0 0 41.66666667%; } .var-col--offset-lg-10 { margin-left: 41.66666667%; } .var-col--span-lg-11 { flex: 0 0 45.83333333%; } .var-col--offset-lg-11 { margin-left: 45.83333333%; } .var-col--span-lg-12 { flex: 0 0 50%; } .var-col--offset-lg-12 { margin-left: 50%; } .var-col--span-lg-13 { flex: 0 0 54.16666667%; } .var-col--offset-lg-13 { margin-left: 54.16666667%; } .var-col--span-lg-14 { flex: 0 0 58.33333333%; } .var-col--offset-lg-14 { margin-left: 58.33333333%; } .var-col--span-lg-15 { flex: 0 0 62.5%; } .var-col--offset-lg-15 { margin-left: 62.5%; } .var-col--span-lg-16 { flex: 0 0 66.66666667%; } .var-col--offset-lg-16 { margin-left: 66.66666667%; } .var-col--span-lg-17 { flex: 0 0 70.83333333%; } .var-col--offset-lg-17 { margin-left: 70.83333333%; } .var-col--span-lg-18 { flex: 0 0 75%; } .var-col--offset-lg-18 { margin-left: 75%; } .var-col--span-lg-19 { flex: 0 0 79.16666667%; } .var-col--offset-lg-19 { margin-left: 79.16666667%; } .var-col--span-lg-20 { flex: 0 0 83.33333333%; } .var-col--offset-lg-20 { margin-left: 83.33333333%; } .var-col--span-lg-21 { flex: 0 0 87.5%; } .var-col--offset-lg-21 { margin-left: 87.5%; } .var-col--span-lg-22 { flex: 0 0 91.66666667%; } .var-col--offset-lg-22 { margin-left: 91.66666667%; } .var-col--span-lg-23 { flex: 0 0 95.83333333%; } .var-col--offset-lg-23 { margin-left: 95.83333333%; } .var-col--span-lg-24 { flex: 0 0 100%; } .var-col--offset-lg-24 { margin-left: 100%; }}@media only screen and (min-width: 1920px) { .var-col--span-xl-1 { flex: 0 0 4.16666667%; } .var-col--offset-xl-1 { margin-left: 4.16666667%; } .var-col--span-xl-2 { flex: 0 0 8.33333333%; } .var-col--offset-xl-2 { margin-left: 8.33333333%; } .var-col--span-xl-3 { flex: 0 0 12.5%; } .var-col--offset-xl-3 { margin-left: 12.5%; } .var-col--span-xl-4 { flex: 0 0 16.66666667%; } .var-col--offset-xl-4 { margin-left: 16.66666667%; } .var-col--span-xl-5 { flex: 0 0 20.83333333%; } .var-col--offset-xl-5 { margin-left: 20.83333333%; } .var-col--span-xl-6 { flex: 0 0 25%; } .var-col--offset-xl-6 { margin-left: 25%; } .var-col--span-xl-7 { flex: 0 0 29.16666667%; } .var-col--offset-xl-7 { margin-left: 29.16666667%; } .var-col--span-xl-8 { flex: 0 0 33.33333333%; } .var-col--offset-xl-8 { margin-left: 33.33333333%; } .var-col--span-xl-9 { flex: 0 0 37.5%; } .var-col--offset-xl-9 { margin-left: 37.5%; } .var-col--span-xl-10 { flex: 0 0 41.66666667%; } .var-col--offset-xl-10 { margin-left: 41.66666667%; } .var-col--span-xl-11 { flex: 0 0 45.83333333%; } .var-col--offset-xl-11 { margin-left: 45.83333333%; } .var-col--span-xl-12 { flex: 0 0 50%; } .var-col--offset-xl-12 { margin-left: 50%; } .var-col--span-xl-13 { flex: 0 0 54.16666667%; } .var-col--offset-xl-13 { margin-left: 54.16666667%; } .var-col--span-xl-14 { flex: 0 0 58.33333333%; } .var-col--offset-xl-14 { margin-left: 58.33333333%; } .var-col--span-xl-15 { flex: 0 0 62.5%; } .var-col--offset-xl-15 { margin-left: 62.5%; } .var-col--span-xl-16 { flex: 0 0 66.66666667%; } .var-col--offset-xl-16 { margin-left: 66.66666667%; } .var-col--span-xl-17 { flex: 0 0 70.83333333%; } .var-col--offset-xl-17 { margin-left: 70.83333333%; } .var-col--span-xl-18 { flex: 0 0 75%; } .var-col--offset-xl-18 { margin-left: 75%; } .var-col--span-xl-19 { flex: 0 0 79.16666667%; } .var-col--offset-xl-19 { margin-left: 79.16666667%; } .var-col--span-xl-20 { flex: 0 0 83.33333333%; } .var-col--offset-xl-20 { margin-left: 83.33333333%; } .var-col--span-xl-21 { flex: 0 0 87.5%; } .var-col--offset-xl-21 { margin-left: 87.5%; } .var-col--span-xl-22 { flex: 0 0 91.66666667%; } .var-col--offset-xl-22 { margin-left: 91.66666667%; } .var-col--span-xl-23 { flex: 0 0 95.83333333%; } .var-col--offset-xl-23 { margin-left: 95.83333333%; } .var-col--span-xl-24 { flex: 0 0 100%; } .var-col--offset-xl-24 { margin-left: 100%; }}
+.var-col { transition: all 0.25s; display: flex !important;}.var-col--span-0 { display: none !important;}.var-col--span-1 { flex: 0 0 4.16666667%;}.var-col--offset-1 { margin-left: 4.16666667%;}.var-col--span-2 { flex: 0 0 8.33333333%;}.var-col--offset-2 { margin-left: 8.33333333%;}.var-col--span-3 { flex: 0 0 12.5%;}.var-col--offset-3 { margin-left: 12.5%;}.var-col--span-4 { flex: 0 0 16.66666667%;}.var-col--offset-4 { margin-left: 16.66666667%;}.var-col--span-5 { flex: 0 0 20.83333333%;}.var-col--offset-5 { margin-left: 20.83333333%;}.var-col--span-6 { flex: 0 0 25%;}.var-col--offset-6 { margin-left: 25%;}.var-col--span-7 { flex: 0 0 29.16666667%;}.var-col--offset-7 { margin-left: 29.16666667%;}.var-col--span-8 { flex: 0 0 33.33333333%;}.var-col--offset-8 { margin-left: 33.33333333%;}.var-col--span-9 { flex: 0 0 37.5%;}.var-col--offset-9 { margin-left: 37.5%;}.var-col--span-10 { flex: 0 0 41.66666667%;}.var-col--offset-10 { margin-left: 41.66666667%;}.var-col--span-11 { flex: 0 0 45.83333333%;}.var-col--offset-11 { margin-left: 45.83333333%;}.var-col--span-12 { flex: 0 0 50%;}.var-col--offset-12 { margin-left: 50%;}.var-col--span-13 { flex: 0 0 54.16666667%;}.var-col--offset-13 { margin-left: 54.16666667%;}.var-col--span-14 { flex: 0 0 58.33333333%;}.var-col--offset-14 { margin-left: 58.33333333%;}.var-col--span-15 { flex: 0 0 62.5%;}.var-col--offset-15 { margin-left: 62.5%;}.var-col--span-16 { flex: 0 0 66.66666667%;}.var-col--offset-16 { margin-left: 66.66666667%;}.var-col--span-17 { flex: 0 0 70.83333333%;}.var-col--offset-17 { margin-left: 70.83333333%;}.var-col--span-18 { flex: 0 0 75%;}.var-col--offset-18 { margin-left: 75%;}.var-col--span-19 { flex: 0 0 79.16666667%;}.var-col--offset-19 { margin-left: 79.16666667%;}.var-col--span-20 { flex: 0 0 83.33333333%;}.var-col--offset-20 { margin-left: 83.33333333%;}.var-col--span-21 { flex: 0 0 87.5%;}.var-col--offset-21 { margin-left: 87.5%;}.var-col--span-22 { flex: 0 0 91.66666667%;}.var-col--offset-22 { margin-left: 91.66666667%;}.var-col--span-23 { flex: 0 0 95.83333333%;}.var-col--offset-23 { margin-left: 95.83333333%;}.var-col--span-24 { flex: 0 0 100%;}.var-col--offset-24 { margin-left: 100%;}@media only screen and (max-width: 767px) { .var-col--span-xs-1 { flex: 0 0 4.16666667%; } .var-col--offset-xs-1 { margin-left: 4.16666667%; } .var-col--span-xs-2 { flex: 0 0 8.33333333%; } .var-col--offset-xs-2 { margin-left: 8.33333333%; } .var-col--span-xs-3 { flex: 0 0 12.5%; } .var-col--offset-xs-3 { margin-left: 12.5%; } .var-col--span-xs-4 { flex: 0 0 16.66666667%; } .var-col--offset-xs-4 { margin-left: 16.66666667%; } .var-col--span-xs-5 { flex: 0 0 20.83333333%; } .var-col--offset-xs-5 { margin-left: 20.83333333%; } .var-col--span-xs-6 { flex: 0 0 25%; } .var-col--offset-xs-6 { margin-left: 25%; } .var-col--span-xs-7 { flex: 0 0 29.16666667%; } .var-col--offset-xs-7 { margin-left: 29.16666667%; } .var-col--span-xs-8 { flex: 0 0 33.33333333%; } .var-col--offset-xs-8 { margin-left: 33.33333333%; } .var-col--span-xs-9 { flex: 0 0 37.5%; } .var-col--offset-xs-9 { margin-left: 37.5%; } .var-col--span-xs-10 { flex: 0 0 41.66666667%; } .var-col--offset-xs-10 { margin-left: 41.66666667%; } .var-col--span-xs-11 { flex: 0 0 45.83333333%; } .var-col--offset-xs-11 { margin-left: 45.83333333%; } .var-col--span-xs-12 { flex: 0 0 50%; } .var-col--offset-xs-12 { margin-left: 50%; } .var-col--span-xs-13 { flex: 0 0 54.16666667%; } .var-col--offset-xs-13 { margin-left: 54.16666667%; } .var-col--span-xs-14 { flex: 0 0 58.33333333%; } .var-col--offset-xs-14 { margin-left: 58.33333333%; } .var-col--span-xs-15 { flex: 0 0 62.5%; } .var-col--offset-xs-15 { margin-left: 62.5%; } .var-col--span-xs-16 { flex: 0 0 66.66666667%; } .var-col--offset-xs-16 { margin-left: 66.66666667%; } .var-col--span-xs-17 { flex: 0 0 70.83333333%; } .var-col--offset-xs-17 { margin-left: 70.83333333%; } .var-col--span-xs-18 { flex: 0 0 75%; } .var-col--offset-xs-18 { margin-left: 75%; } .var-col--span-xs-19 { flex: 0 0 79.16666667%; } .var-col--offset-xs-19 { margin-left: 79.16666667%; } .var-col--span-xs-20 { flex: 0 0 83.33333333%; } .var-col--offset-xs-20 { margin-left: 83.33333333%; } .var-col--span-xs-21 { flex: 0 0 87.5%; } .var-col--offset-xs-21 { margin-left: 87.5%; } .var-col--span-xs-22 { flex: 0 0 91.66666667%; } .var-col--offset-xs-22 { margin-left: 91.66666667%; } .var-col--span-xs-23 { flex: 0 0 95.83333333%; } .var-col--offset-xs-23 { margin-left: 95.83333333%; } .var-col--span-xs-24 { flex: 0 0 100%; } .var-col--offset-xs-24 { margin-left: 100%; } .var-col--span-xs-0 { display: none !important; }}@media only screen and (min-width: 768px) and (max-width: 991px) { .var-col--span-sm-1 { flex: 0 0 4.16666667%; } .var-col--offset-sm-1 { margin-left: 4.16666667%; } .var-col--span-sm-2 { flex: 0 0 8.33333333%; } .var-col--offset-sm-2 { margin-left: 8.33333333%; } .var-col--span-sm-3 { flex: 0 0 12.5%; } .var-col--offset-sm-3 { margin-left: 12.5%; } .var-col--span-sm-4 { flex: 0 0 16.66666667%; } .var-col--offset-sm-4 { margin-left: 16.66666667%; } .var-col--span-sm-5 { flex: 0 0 20.83333333%; } .var-col--offset-sm-5 { margin-left: 20.83333333%; } .var-col--span-sm-6 { flex: 0 0 25%; } .var-col--offset-sm-6 { margin-left: 25%; } .var-col--span-sm-7 { flex: 0 0 29.16666667%; } .var-col--offset-sm-7 { margin-left: 29.16666667%; } .var-col--span-sm-8 { flex: 0 0 33.33333333%; } .var-col--offset-sm-8 { margin-left: 33.33333333%; } .var-col--span-sm-9 { flex: 0 0 37.5%; } .var-col--offset-sm-9 { margin-left: 37.5%; } .var-col--span-sm-10 { flex: 0 0 41.66666667%; } .var-col--offset-sm-10 { margin-left: 41.66666667%; } .var-col--span-sm-11 { flex: 0 0 45.83333333%; } .var-col--offset-sm-11 { margin-left: 45.83333333%; } .var-col--span-sm-12 { flex: 0 0 50%; } .var-col--offset-sm-12 { margin-left: 50%; } .var-col--span-sm-13 { flex: 0 0 54.16666667%; } .var-col--offset-sm-13 { margin-left: 54.16666667%; } .var-col--span-sm-14 { flex: 0 0 58.33333333%; } .var-col--offset-sm-14 { margin-left: 58.33333333%; } .var-col--span-sm-15 { flex: 0 0 62.5%; } .var-col--offset-sm-15 { margin-left: 62.5%; } .var-col--span-sm-16 { flex: 0 0 66.66666667%; } .var-col--offset-sm-16 { margin-left: 66.66666667%; } .var-col--span-sm-17 { flex: 0 0 70.83333333%; } .var-col--offset-sm-17 { margin-left: 70.83333333%; } .var-col--span-sm-18 { flex: 0 0 75%; } .var-col--offset-sm-18 { margin-left: 75%; } .var-col--span-sm-19 { flex: 0 0 79.16666667%; } .var-col--offset-sm-19 { margin-left: 79.16666667%; } .var-col--span-sm-20 { flex: 0 0 83.33333333%; } .var-col--offset-sm-20 { margin-left: 83.33333333%; } .var-col--span-sm-21 { flex: 0 0 87.5%; } .var-col--offset-sm-21 { margin-left: 87.5%; } .var-col--span-sm-22 { flex: 0 0 91.66666667%; } .var-col--offset-sm-22 { margin-left: 91.66666667%; } .var-col--span-sm-23 { flex: 0 0 95.83333333%; } .var-col--offset-sm-23 { margin-left: 95.83333333%; } .var-col--span-sm-24 { flex: 0 0 100%; } .var-col--offset-sm-24 { margin-left: 100%; } .var-col--span-sm-0 { display: none !important; }}@media only screen and (min-width: 992px) and (max-width: 1199px) { .var-col--span-md-1 { flex: 0 0 4.16666667%; } .var-col--offset-md-1 { margin-left: 4.16666667%; } .var-col--span-md-2 { flex: 0 0 8.33333333%; } .var-col--offset-md-2 { margin-left: 8.33333333%; } .var-col--span-md-3 { flex: 0 0 12.5%; } .var-col--offset-md-3 { margin-left: 12.5%; } .var-col--span-md-4 { flex: 0 0 16.66666667%; } .var-col--offset-md-4 { margin-left: 16.66666667%; } .var-col--span-md-5 { flex: 0 0 20.83333333%; } .var-col--offset-md-5 { margin-left: 20.83333333%; } .var-col--span-md-6 { flex: 0 0 25%; } .var-col--offset-md-6 { margin-left: 25%; } .var-col--span-md-7 { flex: 0 0 29.16666667%; } .var-col--offset-md-7 { margin-left: 29.16666667%; } .var-col--span-md-8 { flex: 0 0 33.33333333%; } .var-col--offset-md-8 { margin-left: 33.33333333%; } .var-col--span-md-9 { flex: 0 0 37.5%; } .var-col--offset-md-9 { margin-left: 37.5%; } .var-col--span-md-10 { flex: 0 0 41.66666667%; } .var-col--offset-md-10 { margin-left: 41.66666667%; } .var-col--span-md-11 { flex: 0 0 45.83333333%; } .var-col--offset-md-11 { margin-left: 45.83333333%; } .var-col--span-md-12 { flex: 0 0 50%; } .var-col--offset-md-12 { margin-left: 50%; } .var-col--span-md-13 { flex: 0 0 54.16666667%; } .var-col--offset-md-13 { margin-left: 54.16666667%; } .var-col--span-md-14 { flex: 0 0 58.33333333%; } .var-col--offset-md-14 { margin-left: 58.33333333%; } .var-col--span-md-15 { flex: 0 0 62.5%; } .var-col--offset-md-15 { margin-left: 62.5%; } .var-col--span-md-16 { flex: 0 0 66.66666667%; } .var-col--offset-md-16 { margin-left: 66.66666667%; } .var-col--span-md-17 { flex: 0 0 70.83333333%; } .var-col--offset-md-17 { margin-left: 70.83333333%; } .var-col--span-md-18 { flex: 0 0 75%; } .var-col--offset-md-18 { margin-left: 75%; } .var-col--span-md-19 { flex: 0 0 79.16666667%; } .var-col--offset-md-19 { margin-left: 79.16666667%; } .var-col--span-md-20 { flex: 0 0 83.33333333%; } .var-col--offset-md-20 { margin-left: 83.33333333%; } .var-col--span-md-21 { flex: 0 0 87.5%; } .var-col--offset-md-21 { margin-left: 87.5%; } .var-col--span-md-22 { flex: 0 0 91.66666667%; } .var-col--offset-md-22 { margin-left: 91.66666667%; } .var-col--span-md-23 { flex: 0 0 95.83333333%; } .var-col--offset-md-23 { margin-left: 95.83333333%; } .var-col--span-md-24 { flex: 0 0 100%; } .var-col--offset-md-24 { margin-left: 100%; } .var-col--span-md-0 { display: none !important; }}@media only screen and (min-width: 1200px) and (max-width: 1919px) { .var-col--span-lg-1 { flex: 0 0 4.16666667%; } .var-col--offset-lg-1 { margin-left: 4.16666667%; } .var-col--span-lg-2 { flex: 0 0 8.33333333%; } .var-col--offset-lg-2 { margin-left: 8.33333333%; } .var-col--span-lg-3 { flex: 0 0 12.5%; } .var-col--offset-lg-3 { margin-left: 12.5%; } .var-col--span-lg-4 { flex: 0 0 16.66666667%; } .var-col--offset-lg-4 { margin-left: 16.66666667%; } .var-col--span-lg-5 { flex: 0 0 20.83333333%; } .var-col--offset-lg-5 { margin-left: 20.83333333%; } .var-col--span-lg-6 { flex: 0 0 25%; } .var-col--offset-lg-6 { margin-left: 25%; } .var-col--span-lg-7 { flex: 0 0 29.16666667%; } .var-col--offset-lg-7 { margin-left: 29.16666667%; } .var-col--span-lg-8 { flex: 0 0 33.33333333%; } .var-col--offset-lg-8 { margin-left: 33.33333333%; } .var-col--span-lg-9 { flex: 0 0 37.5%; } .var-col--offset-lg-9 { margin-left: 37.5%; } .var-col--span-lg-10 { flex: 0 0 41.66666667%; } .var-col--offset-lg-10 { margin-left: 41.66666667%; } .var-col--span-lg-11 { flex: 0 0 45.83333333%; } .var-col--offset-lg-11 { margin-left: 45.83333333%; } .var-col--span-lg-12 { flex: 0 0 50%; } .var-col--offset-lg-12 { margin-left: 50%; } .var-col--span-lg-13 { flex: 0 0 54.16666667%; } .var-col--offset-lg-13 { margin-left: 54.16666667%; } .var-col--span-lg-14 { flex: 0 0 58.33333333%; } .var-col--offset-lg-14 { margin-left: 58.33333333%; } .var-col--span-lg-15 { flex: 0 0 62.5%; } .var-col--offset-lg-15 { margin-left: 62.5%; } .var-col--span-lg-16 { flex: 0 0 66.66666667%; } .var-col--offset-lg-16 { margin-left: 66.66666667%; } .var-col--span-lg-17 { flex: 0 0 70.83333333%; } .var-col--offset-lg-17 { margin-left: 70.83333333%; } .var-col--span-lg-18 { flex: 0 0 75%; } .var-col--offset-lg-18 { margin-left: 75%; } .var-col--span-lg-19 { flex: 0 0 79.16666667%; } .var-col--offset-lg-19 { margin-left: 79.16666667%; } .var-col--span-lg-20 { flex: 0 0 83.33333333%; } .var-col--offset-lg-20 { margin-left: 83.33333333%; } .var-col--span-lg-21 { flex: 0 0 87.5%; } .var-col--offset-lg-21 { margin-left: 87.5%; } .var-col--span-lg-22 { flex: 0 0 91.66666667%; } .var-col--offset-lg-22 { margin-left: 91.66666667%; } .var-col--span-lg-23 { flex: 0 0 95.83333333%; } .var-col--offset-lg-23 { margin-left: 95.83333333%; } .var-col--span-lg-24 { flex: 0 0 100%; } .var-col--offset-lg-24 { margin-left: 100%; } .var-col--span-lg-0 { display: none !important; }}@media only screen and (min-width: 1920px) { .var-col--span-xl-0 { flex: 0 0 0%; } .var-col--offset-xl-0 { margin-left: 0%; } .var-col--span-xl-1 { flex: 0 0 4.16666667%; } .var-col--offset-xl-1 { margin-left: 4.16666667%; } .var-col--span-xl-2 { flex: 0 0 8.33333333%; } .var-col--offset-xl-2 { margin-left: 8.33333333%; } .var-col--span-xl-3 { flex: 0 0 12.5%; } .var-col--offset-xl-3 { margin-left: 12.5%; } .var-col--span-xl-4 { flex: 0 0 16.66666667%; } .var-col--offset-xl-4 { margin-left: 16.66666667%; } .var-col--span-xl-5 { flex: 0 0 20.83333333%; } .var-col--offset-xl-5 { margin-left: 20.83333333%; } .var-col--span-xl-6 { flex: 0 0 25%; } .var-col--offset-xl-6 { margin-left: 25%; } .var-col--span-xl-7 { flex: 0 0 29.16666667%; } .var-col--offset-xl-7 { margin-left: 29.16666667%; } .var-col--span-xl-8 { flex: 0 0 33.33333333%; } .var-col--offset-xl-8 { margin-left: 33.33333333%; } .var-col--span-xl-9 { flex: 0 0 37.5%; } .var-col--offset-xl-9 { margin-left: 37.5%; } .var-col--span-xl-10 { flex: 0 0 41.66666667%; } .var-col--offset-xl-10 { margin-left: 41.66666667%; } .var-col--span-xl-11 { flex: 0 0 45.83333333%; } .var-col--offset-xl-11 { margin-left: 45.83333333%; } .var-col--span-xl-12 { flex: 0 0 50%; } .var-col--offset-xl-12 { margin-left: 50%; } .var-col--span-xl-13 { flex: 0 0 54.16666667%; } .var-col--offset-xl-13 { margin-left: 54.16666667%; } .var-col--span-xl-14 { flex: 0 0 58.33333333%; } .var-col--offset-xl-14 { margin-left: 58.33333333%; } .var-col--span-xl-15 { flex: 0 0 62.5%; } .var-col--offset-xl-15 { margin-left: 62.5%; } .var-col--span-xl-16 { flex: 0 0 66.66666667%; } .var-col--offset-xl-16 { margin-left: 66.66666667%; } .var-col--span-xl-17 { flex: 0 0 70.83333333%; } .var-col--offset-xl-17 { margin-left: 70.83333333%; } .var-col--span-xl-18 { flex: 0 0 75%; } .var-col--offset-xl-18 { margin-left: 75%; } .var-col--span-xl-19 { flex: 0 0 79.16666667%; } .var-col--offset-xl-19 { margin-left: 79.16666667%; } .var-col--span-xl-20 { flex: 0 0 83.33333333%; } .var-col--offset-xl-20 { margin-left: 83.33333333%; } .var-col--span-xl-21 { flex: 0 0 87.5%; } .var-col--offset-xl-21 { margin-left: 87.5%; } .var-col--span-xl-22 { flex: 0 0 91.66666667%; } .var-col--offset-xl-22 { margin-left: 91.66666667%; } .var-col--span-xl-23 { flex: 0 0 95.83333333%; } .var-col--offset-xl-23 { margin-left: 95.83333333%; } .var-col--span-xl-24 { flex: 0 0 100%; } .var-col--offset-xl-24 { margin-left: 100%; } .var-col--span-xl-0 { display: none !important; }}

package/es/col/col.less

@@ -1,5 +1,10 @@
 .var-col {
   transition: all 0.25s;
+  display: flex !important;
+
+  &--span-0 {
+    display: none !important;
+  }
 }
 
 .create-col(@i) when (@i =< 24) {
@@ -23,27 +28,47 @@
     margin-left: @i * (100% / 24);
   }
 
-  .create-responsive-col(@i + 1,@mode);
+  .create-responsive-col(@i + 1, @mode);
 }
 
 .create-col(1);
 
 @media only screen and (max-width: 767px) {
   .create-responsive-col(1, xs);
+
+  .var-col--span-xs-0 {
+    display: none !important;
+  }
 }
 
 @media only screen and (min-width: 768px) and (max-width: 991px) {
   .create-responsive-col(1, sm);
+
+  .var-col--span-sm-0 {
+    display: none !important;
+  }
 }
 
 @media only screen and (min-width: 992px) and (max-width: 1199px) {
   .create-responsive-col(1, md);
+
+  .var-col--span-md-0 {
+    display: none !important;
+  }
 }
 
 @media only screen and (min-width: 1200px) and (max-width: 1919px) {
   .create-responsive-col(1, lg);
+
+  .var-col--span-lg-0 {
+    display: none !important;
+  }
 }
 
 @media only screen and (min-width: 1920px) {
-  .create-responsive-col(1, xl);
+  .create-responsive-col(0, xl);
+
+  .var-col--span-xl-0 {
+    display: none !important;
+  }
 }