@react-fabric/core 1.0.0-beta.0

package/css/reset/_text.css

@@ -0,0 +1,179 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+@layer comp {
+  h1 {
+    font-size: 2.5rem;
+    font-weight: 500;
+  }
+
+  h2 {
+    font-size: 2rem;
+    font-weight: 500;
+  }
+
+  h3 {
+    font-size: 1.75rem;
+    font-weight: 500;
+  }
+
+  h4 {
+    font-size: 1.5rem;
+    font-weight: 500;
+  }
+
+  h5 {
+    font-size: 1.25rem;
+    font-weight: 500;
+  }
+
+  h6 {
+    font-size: 1rem;
+    font-weight: 600;
+  }
+
+  p {
+    line-height: 1.5;
+
+    & + p,
+    & + article {
+      margin-top: 1rem;
+    }
+  }
+
+  article {
+    & + p,
+    & + article {
+      margin-top: 1rem;
+    }
+  }
+
+  ul,
+  ol {
+    margin: 0;
+    padding-inline-start: 2em;
+    list-style-position: outside;
+
+    & > li {
+      padding: 0 2px;
+      line-height: 2;
+    }
+  }
+
+  ul {
+    list-style: disc;
+  }
+
+  ol {
+    list-style: decimal;
+  }
+
+  dl {
+    display: flex;
+    flex-flow: row wrap;
+    margin: 0 0 1rem;
+    line-height: 1.5em;
+
+    dt {
+      overflow: hidden;
+      flex: 0 0 33.3%;
+
+      min-width: 6em;
+      max-width: 12em;
+      padding-inline: 1em;
+
+      font-size: 0.875em;
+      color: theme(textColor.dimmed);
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    dd {
+      flex: 1 1 66.6%;
+      margin: 0;
+      padding: 0;
+    }
+
+    &.align-end > dt {
+      text-align: end;
+
+      &::after {
+        content: ": ";
+      }
+    }
+
+    &.bg-alternate {
+      & > dt:nth-of-type(odd),
+      & > dd:nth-of-type(odd) {
+        background-color: color-mix(in lab, var(--fabric-bg) 99%, var(--tint));
+      }
+
+      & > dt:nth-of-type(even),
+      & > dd:nth-of-type(even) {
+        background-color: color-mix(in lab, var(--fabric-bg) 92%, var(--tint));
+      }
+    }
+  }
+
+  abbr {
+    cursor: help;
+
+    display: inline-block;
+
+    padding: 0 2px;
+
+    color: theme(colors.accent.700);
+    text-decoration: underline dashed 1px;
+
+    background-color: color-mix(in lab, currentcolor 10%, var(--fabric-bg));
+  }
+
+  mark {
+    display: inline-block;
+    color: var(--fabric-text);
+    background-color: theme(colors.accent.100);
+  }
+
+  .link {
+    cursor: pointer;
+    user-select: none;
+
+    font-weight: 500;
+    color: theme(colors.accent.600);
+    text-decoration: underline dotted;
+
+    &:hover {
+      text-decoration: underline solid;
+    }
+  }
+
+  .bg-odd,
+  .bg-alternate > :nth-child(odd) {
+    background-color: color-mix(in lab, var(--fabric-bg) 99%, var(--tint));
+  }
+
+  .bg-even,
+  .bg-alternate > :nth-child(even) {
+    background-color: color-mix(in lab, var(--fabric-bg) 92%, var(--tint));
+  }
+}

package/css/reset/_theme.css

@@ -0,0 +1,110 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+@layer colors {
+  [data-color-scheme="light"] {
+    --fabric-bg: theme(colors.white);
+    --fabric-text: theme(colors.black);
+    --fabric-input: color-mix(in lab, var(--fabric-bg) 90%, #fff);
+    --fabric-input-focus: #fff;
+    --fabric-shadow: #8ba0b0;
+
+    color-scheme: light;
+  }
+
+  [data-color-scheme="dark"] {
+    --fabric-bg: theme(colors.black);
+    --fabric-text: theme(colors.white);
+    --fabric-input: color-mix(in lab, var(--fabric-bg) 80%, #0a1218);
+    --fabric-input-focus: color-mix(in lab, var(--fabric-bg) 60%, #0a1218);
+    --fabric-shadow: #010101;
+
+    color-scheme: dark;
+  }
+}
+
+@layer reset {
+  :root {
+    --black: theme(colors.black);
+    --white: theme(colors.white);
+    --scarlet: theme(colors.scarlet.DEFAULT);
+    --pumpkin: theme(colors.pumpkin.DEFAULT);
+    --marigold: theme(colors.marigold.DEFAULT);
+    --avacado: theme(colors.avacado.DEFAULT);
+    --jade: theme(colors.jade.DEFAULT);
+    --denim: theme(colors.denim.DEFAULT);
+    --iris: theme(colors.iris.DEFAULT);
+    --lilac: theme(colors.lilac.DEFAULT);
+    --coral: theme(colors.coral.DEFAULT);
+    --wood: theme(colors.wood.DEFAULT);
+    --silver: theme(colors.silver.DEFAULT);
+    --steel: theme(colors.steel.DEFAULT);
+    --olive: theme(colors.olive.DEFAULT);
+    --sand: theme(colors.sand.DEFAULT);
+    --info: theme(colors.info.DEFAULT);
+    --danger: theme(colors.danger.DEFAULT);
+    --success: theme(colors.success.DEFAULT);
+    --warning: theme(colors.warning.DEFAULT);
+
+    /* app default primary */
+    --primary: theme(colors.denim.DEFAULT);
+    --accent: theme(colors.jade.DEFAULT);
+    --tint: theme(colors.silver.DEFAULT);
+
+    /* default rounding */
+    --rounding: 0.25rem;
+    --rounding-cap: 0.25rem;
+    --gutter: 0.5rem;
+
+    /* z levels */
+    --z-overlay-mask: 25;
+    --z-overlay: 30;
+    --z-popover-mask: 45;
+    --z-popover: 50;
+    --z-tooltip: 60;
+    --z-notifications: 60;
+  }
+
+  [data-color-scheme] {
+    color: color-mix(in lab, var(--fabric-text) 95%, var(--tint));
+    background-color: color-mix(in lab, var(--fabric-bg) 92%, var(--tint));
+  }
+
+  [data-rounding="sm"] {
+    /* default rounding */
+    --rounding: 2px;
+    --rounding-cap: 2px;
+  }
+
+  [data-rounding="md"] {
+    /* default rounding */
+    --rounding: 0.5rem;
+    --rounding-cap: 0.5rem;
+  }
+
+  [data-rounding="full"] {
+    /* default rounding */
+    --rounding: 9999px;
+    --rounding-cap: 0.5rem;
+  }
+}

package/css/reset/index.css

@@ -0,0 +1,27 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+@import url("./_theme.css");
+@import url("./_reset.css");
+@import url("./_text.css");
+@import url("./_gradients.css");

package/css/styles.css

@@ -0,0 +1,31 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+@layer colors, reset, comp, util, var;
+
+@import url("tailwindcss/base") layer(reset);
+@import url("tailwindcss/components") layer(comp);
+@import url("tailwindcss/utilities") layer(util);
+@import url("tailwindcss/variants") layer(var);
+
+@import url("./reset/index.css");

package/css/tailwind/colors.ts

@@ -0,0 +1,158 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+/* istanbul ignore file */
+
+const COlORS = {
+  silver: "#989da5",
+  steel: "#7c99af",
+  olive: "#769b8d",
+  sand: "#9b9789",
+  info: "#00bfff",
+  danger: "#f24c3d",
+  success: "#44bc69",
+  warning: "#edaa00",
+  scarlet: "#e5484d",
+  pumpkin: "#f76a15",
+  marigold: "#ffc100",
+  avacado: "#46a758",
+  jade: "#29a383",
+  denim: "#0190ff",
+  iris: "#5b5bd6",
+  lilac: "#8e4ec6",
+  coral: "#e93d82",
+  wood: "#ad7f58",
+};
+
+const colorMix = (color: string, shader: string, percent: number) =>
+  `color-mix(in lab, ${applyAlpha(color)} ${percent}%,  ${applyAlpha(shader)})`;
+
+const applyAlpha = (color: string) =>
+  `color(from ${color} srgb r g b / <alpha-value>)`;
+
+export const colors = {
+  black: "#191a1b",
+  white: "#fefdfc",
+  bg: `${applyAlpha("var(--fabric-bg)")}`,
+  text: `${applyAlpha("var(--fabric-text)")}`,
+  primary: {
+    DEFAULT: "var(--primary)",
+    50: colorMix("var(--primary)", "var(--fabric-bg)", 10),
+    100: colorMix("var(--primary)", "var(--fabric-bg)", 27),
+    200: colorMix("var(--primary)", "var(--fabric-bg)", 45),
+    300: colorMix("var(--primary)", "var(--fabric-bg)", 62),
+    400: colorMix("var(--primary)", "var(--fabric-bg)", 80),
+    500: applyAlpha("var(--primary)"),
+    600: colorMix("var(--primary)", "var(--fabric-text)", 80),
+    700: colorMix("var(--primary)", "var(--fabric-text)", 62),
+    800: colorMix("var(--primary)", "var(--fabric-text)", 45),
+    900: colorMix("var(--primary)", "var(--fabric-text)", 27),
+    950: colorMix("var(--primary)", "var(--fabric-text)", 10),
+  },
+  accent: {
+    DEFAULT: "var(--accent)",
+    50: colorMix("var(--accent)", "var(--fabric-bg)", 10),
+    100: colorMix("var(--accent)", "var(--fabric-bg)", 27),
+    200: colorMix("var(--accent)", "var(--fabric-bg)", 45),
+    300: colorMix("var(--accent)", "var(--fabric-bg)", 62),
+    400: colorMix("var(--accent)", "var(--fabric-bg)", 80),
+    500: applyAlpha("var(--accent)"),
+    600: colorMix("var(--accent)", "var(--fabric-text)", 80),
+    700: colorMix("var(--accent)", "var(--fabric-text)", 62),
+    800: colorMix("var(--accent)", "var(--fabric-text)", 45),
+    900: colorMix("var(--accent)", "var(--fabric-text)", 27),
+    950: colorMix("var(--accent)", "var(--fabric-text)", 10),
+  },
+  tint: {
+    DEFAULT: "var(--tint)",
+    50: colorMix("var(--tint)", "var(--fabric-bg)", 10),
+    100: colorMix("var(--tint)", "var(--fabric-bg)", 27),
+    200: colorMix("var(--tint)", "var(--fabric-bg)", 45),
+    300: colorMix("var(--tint)", "var(--fabric-bg)", 62),
+    400: colorMix("var(--tint)", "var(--fabric-bg)", 80),
+    500: applyAlpha("var(--tint)"),
+    600: colorMix("var(--tint)", "var(--fabric-text)", 80),
+    700: colorMix("var(--tint)", "var(--fabric-text)", 62),
+    800: colorMix("var(--tint)", "var(--fabric-text)", 45),
+    900: colorMix("var(--tint)", "var(--fabric-text)", 27),
+    950: colorMix("var(--tint)", "var(--fabric-text)", 10),
+  },
+  ...Object.entries(COlORS).reduce(
+    (ret, [key, color]) => ({
+      ...ret,
+      [key]: {
+        DEFAULT: color,
+        50: colorMix(color, "var(--fabric-bg)", 10),
+        100: colorMix(color, "var(--fabric-bg)", 27),
+        200: colorMix(color, "var(--fabric-bg)", 45),
+        300: colorMix(color, "var(--fabric-bg)", 62),
+        400: colorMix(color, "var(--fabric-bg)", 80),
+        500: applyAlpha(color),
+        600: colorMix(color, "var(--fabric-text)", 80),
+        700: colorMix(color, "var(--fabric-text)", 62),
+        800: colorMix(color, "var(--fabric-text)", 45),
+        900: colorMix(color, "var(--fabric-text)", 27),
+        950: colorMix(color, "var(--fabric-text)", 10),
+      },
+    }),
+    {},
+  ),
+};
+
+export const backgroundColor = {
+  inherit: "inherit",
+  current: "currentColor",
+  transparent: "transparent",
+  DEFAULT: colorMix("var(--fabric-bg)", "var(--tint)", 99),
+  base: colorMix("var(--fabric-bg)", "var(--tint)", 99),
+  dimmed: colorMix("var(--fabric-bg)", "var(--tint)", 90),
+  muted: colorMix("var(--fabric-bg)", "var(--tint)", 80),
+  gray: colorMix("var(--fabric-bg)", "var(--tint)", 50),
+  dark: colorMix("var(--black)", "var(--tint)", 90),
+  light: colorMix("var(--white)", "var(--tint)", 90),
+  invert: colorMix("var(--fabric-bg)", "var(--fabric-text)", 5),
+};
+export const textColor = {
+  inherit: "inherit",
+  current: "currentColor",
+  transparent: "transparent",
+  DEFAULT: colorMix("var(--fabric-text)", "var(--tint)", 95),
+  base: colorMix("var(--fabric-text)", "var(--tint)", 95),
+  dimmed: colorMix("var(--fabric-text)", "var(--tint)", 65),
+  muted: colorMix("var(--fabric-text)", "var(--tint)", 45),
+  gray: colorMix("var(--fabric-text)", "var(--tint)", 50),
+  dark: colorMix("var(--black)", "var(--tint)", 75),
+  light: colorMix("var(--white)", "var(--tint)", 75),
+  invert: colorMix("var(--fabric-text)", "var(--fabric-bg)", 5),
+};
+export const borderColor = {
+  inherit: "inherit",
+  current: "currentColor",
+  transparent: "transparent",
+  DEFAULT: colorMix("var(--fabric-bg)", "var(--tint)", 65),
+  base: colorMix("var(--fabric-bg)", "var(--tint)", 65),
+  dimmed: colorMix("var(--fabric-bg)", "var(--tint)", 72),
+  muted: colorMix("var(--fabric-bg)", "var(--tint)", 80),
+  gray: applyAlpha("var(--tint)"),
+  dark: colorMix("var(--black)", "var(--tint)", 75),
+  light: colorMix("var(--white)", "var(--tint)", 75),
+};

package/dist/cjs/components/actionLabel/ActionLabel.js

@@ -0,0 +1,56 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var classNames = require('classnames');
+var react = require('react');
+var ButtonGroup = require('../button/ButtonGroup.js');
+var ActionLabel_module = require('./ActionLabel.module.css');
+var jsxRuntime = require('react/jsx-runtime');
+
+var _excluded = ["children", "className", "align", "actions", "disabled"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * A simple label component with additional actions (like a button or icon) that becomes visible only when the user hovers over the label,
+ * useful in interfaces where space is limited or where it's important to keep the UI clean and focused
+ */
+var ActionLabel = function ActionLabel(_ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    align = _ref.align,
+    actions = _ref.actions,
+    disabled = _ref.disabled,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  /**
+   * calculate the width of the action box, width will be used for a delayed transition on hover
+   */
+  var calculateBasis = react.useCallback(function (el) {
+    if (el) {
+      var clone = el.cloneNode(true);
+      clone.className = "";
+      clone.style.left = "-200%";
+      clone.style.overflow = "hidden";
+      clone.style.position = "absolute";
+      clone.style.whiteSpace = "nowrap";
+      document.body.appendChild(clone);
+      el.style.setProperty("--width", "".concat(clone.offsetWidth, "px"));
+      clone.remove();
+    }
+  }, []);
+  return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({
+    className: classNames(className, ActionLabel_module.actionLabel, "flex overflow-hidden gap-1 items-center cursor-default select-none"),
+    "data-disabled": disabled
+  }, rest), {}, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(ButtonGroup.ButtonGroup, {
+      ref: calculateBasis,
+      className: classNames(ActionLabel_module.actions, "overflow-hidden flex-content", align === "end" && "order-2"),
+      children: actions
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex-initial truncate",
+      children: children
+    })]
+  }));
+};
+
+exports.ActionLabel = ActionLabel;

package/dist/cjs/components/actionLabel/ActionLabel.module.css

@@ -0,0 +1 @@
+@layer comp{.actionLabel{&>.actions{--width:4rem;width:0}&:not([data-disabled=true]):hover>.actions{transition:all .1s cubic-bezier(.215,.61,.355,1);transition-delay:.5s;width:var(--width)}}}