@varlet/ui 1.27.7 → 1.27.9-alpha.1653036733481

package/highlight/attributes.json

@@ -239,6 +239,10 @@
     "type": "string",
     "description": "图片地址 默认值：-"
   },
+  "var-card/layout": {
+    "type": "string",
+    "description": "排列方式，可选值为 `row` `column` 默认值：column"
+  },
   "var-card/fit": {
     "type": "string",
     "description": "填充模式，可选值为 `fill` `contain` `cover` `none` `scale-down` 默认值：cover"
@@ -251,10 +255,22 @@
     "type": "string | number",
     "description": "图片高度 默认值：-"
   },
+  "var-card/width": {
+    "type": "string | number",
+    "description": "图片宽度 默认值：-"
+  },
   "var-card/ripple": {
     "type": "boolean",
     "description": "是否开启水波 默认值：false"
   },
+  "var-card/floating": {
+    "type": "boolean",
+    "description": "是否开启全屏 默认值：false"
+  },
+  "var-card/floatingDuration": {
+    "type": "number",
+    "description": "开关全屏所需时间（ms） 默认值：250"
+  },
   "var-cell/title": {
     "type": "string | number",
     "description": "单元格标题 默认值：-"
@@ -800,7 +816,7 @@
     "description": "是否开启锚点吸顶 默认值：true"
   },
   "var-index-bar/sticky-offset-top": {
-    "type": "number",
+    "type": "number | string",
     "description": "锚点吸顶时与顶部的距离 默认值：0"
   },
   "var-index-bar/hide-list": {
@@ -1039,6 +1055,10 @@
     "type": "number[]",
     "description": "级联模式的初始化索引列表 默认值：-"
   },
+  "var-picker/text-formatter": {
+    "type": "(text: any, columnIndex: number) => any",
+    "description": "文本格式化 默认值：text => text"
+  },
   "var-picker/option-height": {
     "type": "string | number",
     "description": "选项的高度(px rem) 默认值：44"
@@ -1249,11 +1269,11 @@
   },
   "var-rate/size": {
     "type": "number | string",
-    "description": "图标大小，默认单位为 `px` 默认值：20"
+    "description": "图标大小，默认单位为 `px` 默认值：-"
   },
   "var-rate/gap": {
     "type": "number | string",
-    "description": "图标间隔，默认单位为 `px` 默认值：4"
+    "description": "图标间隔，默认单位为 `px` 默认值：-"
   },
   "var-rate/half": {
     "type": "boolean",
@@ -1637,7 +1657,7 @@
   },
   "var-switch/size": {
     "type": "string | number",
-    "description": "switch 的大小 默认值：20"
+    "description": "switch 的大小 默认值：-"
   },
   "var-switch/rules": {
     "type": "array",

package/highlight/tags.json

@@ -89,10 +89,14 @@
       "description",
       "elevation",
       "src",
+      "layout",
       "fit",
       "alt",
       "height",
-      "ripple"
+      "width",
+      "ripple",
+      "floating",
+      "floatingDuration"
     ]
   },
   "var-cell": {
@@ -398,6 +402,7 @@
       "toolbar",
       "cascade",
       "cascade-initial-indexes",
+      "text-formatter",
       "option-height",
       "option-count",
       "confirm-button-text",

package/highlight/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "framework": "vue",
-  "version": "1.27.6",
+  "version": "1.27.8",
   "name": "VARLET",
   "contributions": {
     "html": {
@@ -706,6 +706,15 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": "layout",
+              "description": "排列方式，可选值为 `row` `column`",
+              "default": "column",
+              "value": {
+                "type": "string",
+                "kind": "expression"
+              }
+            },
             {
               "name": "fit",
               "description": "填充模式，可选值为 `fill` `contain` `cover` `none` `scale-down`",
@@ -733,6 +742,15 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": "width",
+              "description": "图片宽度",
+              "default": "-",
+              "value": {
+                "type": "string | number",
+                "kind": "expression"
+              }
+            },
             {
               "name": "ripple",
               "description": "是否开启水波",
@@ -741,6 +759,24 @@
                 "type": "boolean",
                 "kind": "expression"
               }
+            },
+            {
+              "name": "floating",
+              "description": "是否开启全屏",
+              "default": "false",
+              "value": {
+                "type": "boolean",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "floatingDuration",
+              "description": "开关全屏所需时间（ms）",
+              "default": "250",
+              "value": {
+                "type": "number",
+                "kind": "expression"
+              }
             }
           ],
           "events": [
@@ -766,9 +802,17 @@
               "name": "description",
               "description": "自定义描述"
             },
+            {
+              "name": "content",
+              "description": "自定义正文"
+            },
             {
               "name": "extra",
               "description": "自定义底部内容"
+            },
+            {
+              "name": "toolbar-close",
+              "description": "工具栏自定义关闭"
             }
           ]
         },
@@ -2403,7 +2447,7 @@
               "description": "锚点吸顶时与顶部的距离",
               "default": "0",
               "value": {
-                "type": "number",
+                "type": "number | string",
                 "kind": "expression"
               }
             },
@@ -3123,6 +3167,15 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": "text-formatter",
+              "description": "文本格式化",
+              "default": "text => text",
+              "value": {
+                "type": "(text: any, columnIndex: number) => any",
+                "kind": "expression"
+              }
+            },
             {
               "name": "option-height",
               "description": "选项的高度(px rem)",
@@ -3735,7 +3788,7 @@
             {
               "name": "size",
               "description": "图标大小，默认单位为 `px`",
-              "default": "20",
+              "default": "-",
               "value": {
                 "type": "number | string",
                 "kind": "expression"
@@ -3744,7 +3797,7 @@
             {
               "name": "gap",
               "description": "图标间隔，默认单位为 `px`",
-              "default": "4",
+              "default": "-",
               "value": {
                 "type": "number | string",
                 "kind": "expression"
@@ -4857,7 +4910,7 @@
             {
               "name": "size",
               "description": "switch 的大小",
-              "default": "20",
+              "default": "-",
               "value": {
                 "type": "string | number",
                 "kind": "expression"

package/lib/badge/Badge.js

@@ -80,7 +80,7 @@ var _default = (0, _vue.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/lib/card/Card.js

@@ -6,6 +6,10 @@ exports.render = render;
 
 var _ripple = _interopRequireDefault(require("../ripple"));
 
+var _icon = _interopRequireDefault(require("../icon"));
+
+var _button = _interopRequireDefault(require("../button"));
+
 var _vue = require("vue");
 
 var _props = require("./props");
@@ -14,37 +18,68 @@ var _elements = require("../utils/elements");
 
 var _components = require("../utils/components");
 
+var _zIndex = require("../context/zIndex");
+
+var _lock = require("../context/lock");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+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); }); }; }
+
 var {
   n,
   classes
 } = (0, _components.createNamespace)('card');
+var RIPPLE_DELAY = 500;
 
 var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
 
 var _hoisted_1 = ["src", "alt"];
 
 function render(_ctx, _cache) {
+  var _component_var_icon = (0, _vue.resolveComponent)("var-icon");
+
+  var _component_var_button = (0, _vue.resolveComponent)("var-button");
+
   var _directive_ripple = (0, _vue.resolveDirective)("ripple");
 
-  return (0, _vue.withDirectives)(((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
-    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n(), [_ctx.elevation, "var-elevation--" + _ctx.elevation, 'var-elevation--2'])),
+  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    ref: "card",
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n(), [_ctx.isRow, _ctx.n('--layout-row')])),
     onClick: _cache[0] || (_cache[0] = function () {
       return _ctx.onClick && _ctx.onClick(...arguments);
     })
+  }, [(0, _vue.withDirectives)(((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    ref: "cardFloater",
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('floater'), [_ctx.elevation, "var-elevation--" + _ctx.elevation, 'var-elevation--1'])),
+    style: (0, _vue.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
+    })
   }, [(0, _vue.renderSlot)(_ctx.$slots, "image", {}, () => [_ctx.src ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("img", {
     key: 0,
     class: (0, _vue.normalizeClass)(_ctx.n('image')),
     style: (0, _vue.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)) : (0, _vue.createCommentVNode)("v-if", true)]), (0, _vue.renderSlot)(_ctx.$slots, "title", {}, () => [_ctx.title ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+  , _hoisted_1)) : (0, _vue.createCommentVNode)("v-if", true)]), (0, _vue.createElementVNode)("div", {
+    class: (0, _vue.normalizeClass)(_ctx.n('container'))
+  }, [(0, _vue.renderSlot)(_ctx.$slots, "title", {}, () => [_ctx.title ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
     key: 0,
     class: (0, _vue.normalizeClass)(_ctx.n('title'))
   }, (0, _vue.toDisplayString)(_ctx.title), 3
@@ -64,11 +99,58 @@ function render(_ctx, _cache) {
     class: (0, _vue.normalizeClass)(_ctx.n('footer'))
   }, [(0, _vue.renderSlot)(_ctx.$slots, "extra")], 2
   /* CLASS */
+  )) : (0, _vue.createCommentVNode)("v-if", true), _ctx.$slots.content && !_ctx.isRow ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    key: 1,
+    class: (0, _vue.normalizeClass)(_ctx.n('content')),
+    style: (0, _vue.normalizeStyle)({
+      height: _ctx.contentHeight,
+      opacity: _ctx.opacity,
+      transition: "opacity " + _ctx.floatingDuration * 2 + "ms"
+    })
+  }, [(0, _vue.renderSlot)(_ctx.$slots, "content")], 6
+  /* CLASS, STYLE */
   )) : (0, _vue.createCommentVNode)("v-if", true)], 2
   /* CLASS */
+  ), _ctx.showToolBar ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    key: 0,
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('toolbar'), 'var--box')),
+    style: (0, _vue.normalizeStyle)({
+      zIndex: _ctx.zIndex,
+      opacity: _ctx.opacity,
+      transition: "opacity " + _ctx.floatingDuration * 2 + "ms"
+    })
+  }, [(0, _vue.renderSlot)(_ctx.$slots, "toolbar-close", {}, () => [(0, _vue.createVNode)(_component_var_button, {
+    size: "large",
+    round: "",
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('toolbar-close'), 'var-elevation--6')),
+    onClick: (0, _vue.withModifiers)(_ctx.close, ["stop"])
+  }, {
+    default: (0, _vue.withCtx)(() => [(0, _vue.createVNode)(_component_var_icon, {
+      name: "window-close",
+      size: "24px"
+    })]),
+    _: 1
+    /* STABLE */
+
+  }, 8
+  /* PROPS */
+  , ["class", "onClick"])]), (0, _vue.renderSlot)(_ctx.$slots, "toolbar-extra")], 6
+  /* CLASS, STYLE */
+  )) : (0, _vue.createCommentVNode)("v-if", true)], 6
+  /* CLASS, STYLE */
   )), [[_directive_ripple, {
-    disabled: !_ctx.ripple
-  }]]);
+    disabled: !_ctx.ripple || _ctx.floater
+  }]]), (0, _vue.createElementVNode)("div", {
+    class: (0, _vue.normalizeClass)(_ctx.n('holder')),
+    style: (0, _vue.normalizeStyle)({
+      width: _ctx.holderWidth,
+      height: _ctx.holderHeight
+    })
+  }, null, 6
+  /* CLASS, STYLE */
+  )], 2
+  /* CLASS */
+  );
 }
 
 var _default = (0, _vue.defineComponent)({
@@ -77,13 +159,136 @@ var _default = (0, _vue.defineComponent)({
   directives: {
     Ripple: _ripple.default
   },
+  components: {
+    VarIcon: _icon.default,
+    VarButton: _button.default
+  },
   props: _props.props,
 
-  setup() {
+  setup(props) {
+    var card = (0, _vue.ref)(null);
+    var cardFloater = (0, _vue.ref)(null);
+    var holderWidth = (0, _vue.ref)('auto');
+    var holderHeight = (0, _vue.ref)('auto');
+    var floaterWidth = (0, _vue.ref)('100%');
+    var floaterHeight = (0, _vue.ref)('100%');
+    var floaterTop = (0, _vue.ref)('auto');
+    var floaterLeft = (0, _vue.ref)('auto');
+    var floaterPosition = (0, _vue.ref)('static');
+    var floaterOverflow = (0, _vue.ref)('hidden');
+    var contentHeight = (0, _vue.ref)('0px');
+    var opacity = (0, _vue.ref)('0');
+    var {
+      zIndex
+    } = (0, _zIndex.useZIndex)(() => props.floating, 1);
+    var isRow = (0, _vue.computed)(() => props.layout === 'row');
+    var showToolBar = (0, _vue.ref)(false);
+    var floated = (0, _vue.ref)(false);
+    (0, _lock.useLock)(() => props.floating, () => isRow);
+    var dropdownFloaterTop = 'auto';
+    var dropdownFloaterLeft = 'auto';
+    var dropper = null;
+    var floater = (0, _vue.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 = (0, _elements.toSizeUnit)(width);
+          holderHeight.value = (0, _elements.toSizeUnit)(height);
+          floaterWidth.value = holderWidth.value;
+          floaterHeight.value = holderHeight.value;
+          floaterTop.value = (0, _elements.toSizeUnit)(top);
+          floaterLeft.value = (0, _elements.toSizeUnit)(left);
+          floaterPosition.value = 'fixed';
+          dropdownFloaterTop = floaterTop.value;
+          dropdownFloaterLeft = floaterLeft.value;
+          showToolBar.value = true;
+          yield (0, _elements.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 = () => {
+      (0, _components.call)(props['onUpdate:floating'], false);
+    };
+
+    (0, _vue.watch)(() => props.floating, value => {
+      if (isRow.value) return;
+      (0, _vue.nextTick)(() => {
+        value ? floating() : dropdown();
+      });
+    }, {
+      immediate: true
+    });
     return {
       n,
       classes,
-      toSizeUnit: _elements.toSizeUnit
+      toSizeUnit: _elements.toSizeUnit,
+      card,
+      cardFloater,
+      holderWidth,
+      holderHeight,
+      floater,
+      floaterWidth,
+      floaterHeight,
+      floaterTop,
+      floaterLeft,
+      floaterPosition,
+      floaterOverflow,
+      contentHeight,
+      opacity,
+      zIndex,
+      isRow,
+      close,
+      showToolBar,
+      floated
     };
   }
 

package/lib/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);}