@varlet/ui 1.27.8 → 1.27.10

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"
@@ -247,14 +251,26 @@
     "type": "string",
     "description": "替代文本 默认值：-"
   },
-  "var-card/height": {
+  "var-card/image-height": {
     "type": "string | number",
     "description": "图片高度 默认值：-"
   },
+  "var-card/image-width": {
+    "type": "string | number",
+    "description": "图片宽度 默认值：-"
+  },
   "var-card/ripple": {
     "type": "boolean",
     "description": "是否开启水波 默认值：false"
   },
+  "var-card/floating": {
+    "type": "boolean",
+    "description": "是否开启全屏 默认值：false"
+  },
+  "var-card/floating-duration": {
+    "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": {
@@ -1253,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",
@@ -1641,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"
+      "image-height",
+      "image-width",
+      "ripple",
+      "floating",
+      "floating-duration"
     ]
   },
   "var-cell": {

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.7",
+  "version": "1.27.9",
   "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`",
@@ -725,7 +734,7 @@
               }
             },
             {
-              "name": "height",
+              "name": "image-height",
               "description": "图片高度",
               "default": "-",
               "value": {
@@ -733,6 +742,15 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": "image-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": "floating-duration",
+              "description": "开关全屏所需时间（ms）",
+              "default": "250",
+              "value": {
+                "type": "number",
+                "kind": "expression"
+              }
             }
           ],
           "events": [
@@ -766,9 +802,17 @@
               "name": "description",
               "description": "自定义描述"
             },
+            {
+              "name": "content",
+              "description": "自定义正文"
+            },
             {
               "name": "extra",
               "description": "自定义底部内容"
+            },
+            {
+              "name": "close-button",
+              "description": "自定义关闭"
             }
           ]
         },
@@ -2403,7 +2447,7 @@
               "description": "锚点吸顶时与顶部的距离",
               "default": "0",
               "value": {
-                "type": "number",
+                "type": "number | string",
                 "kind": "expression"
               }
             },
@@ -3744,7 +3788,7 @@
             {
               "name": "size",
               "description": "图标大小，默认单位为 `px`",
-              "default": "20",
+              "default": "-",
               "value": {
                 "type": "number | string",
                 "kind": "expression"
@@ -3753,7 +3797,7 @@
             {
               "name": "gap",
               "description": "图标间隔，默认单位为 `px`",
-              "default": "4",
+              "default": "-",
               "value": {
                 "type": "number | string",
                 "kind": "expression"
@@ -4866,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/bottom-navigation-item/BottomNavigationItem.js

@@ -112,7 +112,9 @@ var _default = (0, _vue.defineComponent)({
     };
 
     var handleClick = () => {
-      var active = name.value || index.value;
+      var _name$value;
+
+      var active = (_name$value = name.value) != null ? _name$value : index.value;
       (0, _components.call)(props.onClick, active);
       (0, _components.call)(bottomNavigation.onToggle, active);
     };

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,73 @@ 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'])),
+    ref: "card",
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n(), [_ctx.isRow, _ctx.n('--layout-row')], [_ctx.elevation, "var-elevation--" + _ctx.elevation, 'var-elevation--1'])),
+    style: (0, _vue.normalizeStyle)({
+      zIndex: _ctx.floated ? _ctx.zIndex : undefined
+    }),
     onClick: _cache[0] || (_cache[0] = function () {
       return _ctx.onClick && _ctx.onClick(...arguments);
     })
-  }, [(0, _vue.renderSlot)(_ctx.$slots, "image", {}, () => [_ctx.src ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("img", {
-    key: 0,
-    class: (0, _vue.normalizeClass)(_ctx.n('image')),
+  }, [(0, _vue.createElementVNode)("div", {
+    ref: "cardFloater",
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('floater'))),
     style: (0, _vue.normalizeStyle)({
-      objectFit: _ctx.fit,
-      height: _ctx.toSizeUnit(_ctx.height)
-    }),
-    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", {
+      width: _ctx.floaterWidth,
+      height: _ctx.floaterHeight,
+      top: _ctx.floaterTop,
+      left: _ctx.floaterLeft,
+      overflow: _ctx.floaterOverflow,
+      position: _ctx.floaterPosition,
+      transition: _ctx.floated ? "background-color " + _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", {}, () => {
+    var _ctx$imageHeight;
+
+    return [_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$imageHeight = _ctx.imageHeight) != null ? _ctx$imageHeight : _ctx.height),
+        width: _ctx.toSizeUnit(_ctx.imageWidth)
+      }),
+      src: _ctx.src,
+      alt: _ctx.alt
+    }, null, 14
+    /* CLASS, STYLE, PROPS */
+    , _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,10 +104,60 @@ 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.showFloatingButtons ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    key: 0,
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('floating-buttons'), 'var--box')),
+    style: (0, _vue.normalizeStyle)({
+      zIndex: _ctx.zIndex,
+      opacity: _ctx.opacity,
+      transition: "opacity " + _ctx.floatingDuration * 2 + "ms"
+    })
+  }, [(0, _vue.renderSlot)(_ctx.$slots, "close-button", {}, () => [(0, _vue.createVNode)(_component_var_button, {
+    "var-card-cover": "",
+    round: "",
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('close-button'), 'var-elevation--6')),
+    onClick: (0, _vue.withModifiers)(_ctx.close, ["stop"])
+  }, {
+    default: (0, _vue.withCtx)(() => [(0, _vue.createVNode)(_component_var_icon, {
+      "var-card-cover": "",
+      name: "window-close",
+      class: (0, _vue.normalizeClass)(_ctx.n('close-button-icon'))
+    }, null, 8
+    /* PROPS */
+    , ["class"])]),
+    _: 1
+    /* STABLE */
+
+  }, 8
+  /* PROPS */
+  , ["class", "onClick"])])], 6
+  /* CLASS, STYLE */
+  )) : (0, _vue.createCommentVNode)("v-if", true)], 6
+  /* CLASS, STYLE */
+  ), (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 */
+  )], 6
+  /* CLASS, STYLE */
   )), [[_directive_ripple, {
-    disabled: !_ctx.ripple
+    disabled: !_ctx.ripple || _ctx.floater
   }]]);
 }
 
@@ -77,13 +167,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)(undefined);
+    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 showFloatingButtons = (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;
+          showFloatingButtons.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';
+      showFloatingButtons.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 = undefined;
+        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,
+      showFloatingButtons,
+      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: 140px; --card-image-height: 200px; --card-row-height: 140px; --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-floating-buttons-bottom: 16px; --card-floating-buttons-right: 16px; --card-floating-buttons-color: #fff; --card-close-button-icon-size: 24px; --card-close-button-size: 56px; --card-close-button-primary-color: #212121;}.var-card { border-radius: var(--card-border-radius); overflow: hidden;}.var-card__floater { display: flex; flex-direction: column; position: static; 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 { min-height: var(--card-row-height); height: 100%; flex-direction: row; position: relative; 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: auto; 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__floating-buttons { position: fixed; bottom: var(--card-floating-buttons-bottom); right: var(--card-floating-buttons-right); color: var(--card-floating-buttons-color);}.var-card__close-button[var-card-cover] { padding: var(--card-close-button-padding); width: var(--card-close-button-size); height: var(--card-close-button-size); background-color: var(--card-close-button-primary-color);}.var-card__close-button-icon[var-card-cover] { font-size: var(--card-close-button-icon-size);}