feat: liquid glass effect

Author: koirodev

.browserslistrc

@@ -0,0 +1,8 @@
+last 15 versions
+> 90%
+Safari >= 12
+ios_saf >= 12
+Opera >= 56
+Chrome >= 69
+Edge >= 18
+Firefox >= 62

.csscomb.json

@@ -0,0 +1,344 @@
+{
+  "always-semicolon": true,
+  "block-indent": 2,
+  "color-case": "upper",
+  "color-shorthand": true,
+  "element-case": "lower",
+  "eof-newline": true,
+  "leading-zero": true,
+  "quotes": "double",
+  "remove-empty-rulesets": true,
+  "sort-order-fallback": "abc",
+  "space-after-colon": 1,
+  "space-after-combinator": " ",
+  "space-between-declarations": "\n  ",
+  "space-after-opening-brace": "\n",
+  "space-after-selector-delimiter": "\n",
+  "space-before-closing-brace": "\n",
+  "space-before-colon": "",
+  "space-before-combinator": 1,
+  "space-before-opening-brace": 1,
+  "space-before-selector-delimiter": 0,
+  "strip-spaces": true,
+  "tab-size": 2,
+  "unitless-zero": false,
+  "vendor-prefix-align": true,
+  "lines-between-rulesets": 1,
+  "sort-order": [
+    ["..."],
+    ["$include pseudo", "all", "content"],
+    [
+      "float",
+      "clear",
+      "inset",
+      "order",
+      "position",
+      "z-index",
+      "top",
+      "right",
+      "bottom",
+      "left",
+      "z-index",
+      "grid-column",
+      "grid-column-end",
+      "grid-column-start",
+      "grid-row",
+      "grid-row-end",
+      "grid-row-start",
+      "grid-area",
+      "margin",
+      "margin-top",
+      "margin-right",
+      "margin-bottom",
+      "margin-left",
+      "margin-block",
+      "margin-block-end",
+      "margin-block-start",
+      "margin-inline",
+      "margin-inline-end",
+      "margin-inline-start",
+      "inset-block",
+      "inset-block-end",
+      "inset-block-start",
+      "inset-inline",
+      "inset-inline-end",
+      "inset-inline-start"
+    ],
+    [
+      "container",
+      "container-name",
+      "container-type",
+      "contain",
+      "padding",
+      "padding-top",
+      "padding-right",
+      "padding-bottom",
+      "padding-left",
+      "padding-block",
+      "padding-block-end",
+      "padding-block-start",
+      "padding-inline",
+      "padding-inline-end",
+      "padding-inline-start",
+      "width",
+      "min-width",
+      "max-width",
+      "height",
+      "min-height",
+      "max-height",
+      "$include square",
+      "aspect-ratio",
+      "display",
+      "flex-direction",
+      "align-content",
+      "align-items",
+      "align-self",
+      "justify-content",
+      "justify-items",
+      "justify-self",
+      "place-content",
+      "place-items",
+      "place-self",
+      "grid-auto-columns",
+      "grid-auto-flow",
+      "grid-auto-rows",
+      "grid-template",
+      "grid-template-columns",
+      "grid-template-rows",
+      "grid-template-areas",
+      "flex",
+      "flex-flow",
+      "flex-basis",
+      "flex-grow",
+      "flex-shrink",
+      "flex-wrap",
+      "grid",
+      "gap",
+      "column-gap",
+      "row-gap",
+      "box-sizing",
+      "columns",
+      "column-count",
+      "column-fill",
+      "column-gap",
+      "column-rule",
+      "column-rule-color",
+      "column-rule-style",
+      "column-rule-width",
+      "column-span",
+      "column-width",
+      "object-fit",
+      "object-position"
+    ],
+    [
+      "color",
+      "font",
+      "font-family",
+      "font-size",
+      "font-weight",
+      "font-style",
+      "font-variant",
+      "font-size-adjust",
+      "font-stretch",
+      "font-feature-settings",
+      "font-kerning",
+      "font-optical-sizing",
+      "font-display",
+      "line-height",
+      "letter-spacing",
+      "text-align",
+      "text-align-last",
+      "text-decoration",
+      "text-decoration-color",
+      "text-decoration-line",
+      "text-decoration-style",
+      "text-decoration-skip-ink",
+      "text-decoration-thickness",
+      "text-transform",
+      "text-indent",
+      "text-shadow",
+      "text-overflow",
+      "text-wrap",
+      "line-clamp",
+      "-webkit-line-clamp",
+      "-webkit-box-orient",
+      "text-underline-position",
+      "text-emphasis",
+      "text-emphasis-color",
+      "text-emphasis-style",
+      "text-emphasis-position",
+      "-webkit-text-size-adjust",
+      "white-space",
+      "word-wrap",
+      "word-break",
+      "word-spacing",
+      "hyphens",
+      "hanging-punctuation",
+      "line-break",
+      "overflow-wrap",
+      "tab-size",
+      "list-style",
+      "unicode-bidi",
+      "vertical-align",
+      "writing-mode",
+      "direction",
+      "text-size-adjust",
+      "quotes",
+      "src"
+    ],
+    [
+      "box-shadow",
+      "fill",
+      "background",
+      "background-color",
+      "background-image",
+      "background-repeat",
+      "background-position",
+      "background-size",
+      "background-clip",
+      "background-origin",
+      "background-attachment",
+      "background-blend-mode",
+      "background-position-x",
+      "background-position-y",
+      "background-filter",
+      "backdrop-filter",
+      "filter",
+      "border",
+      "border-width",
+      "border-style",
+      "border-color",
+      "border-top",
+      "border-top-width",
+      "border-top-style",
+      "border-top-color",
+      "border-right",
+      "border-right-width",
+      "border-right-style",
+      "border-right-color",
+      "border-bottom",
+      "border-bottom-width",
+      "border-bottom-style",
+      "border-bottom-color",
+      "border-left",
+      "border-left-width",
+      "border-left-style",
+      "border-left-color",
+      "border-radius",
+      "border-top-left-radius",
+      "border-top-right-radius",
+      "border-bottom-right-radius",
+      "border-bottom-left-radius",
+      "border-image",
+      "border-image-source",
+      "border-image-slice",
+      "border-image-width",
+      "border-image-outset",
+      "border-image-repeat",
+      "outline",
+      "outline-width",
+      "outline-style",
+      "outline-color",
+      "outline-offset",
+      "overflow",
+      "overflow-x",
+      "overflow-y",
+      "overflow-anchor",
+      "overflow-block",
+      "overflow-inline",
+      "visibility",
+      "opacity",
+      "mix-blend-mode",
+      "content-visibility",
+      "clip-rule",
+      "will-change"
+    ],
+    [
+      "animation",
+      "animation-name",
+      "animation-duration",
+      "animation-timing-function",
+      "animation-delay",
+      "animation-iteration-count",
+      "animation-direction",
+      "animation-fill-mode",
+      "animation-play-state",
+      "transform",
+      "transform-origin",
+      "transform-box",
+      "rotate",
+      "perspective",
+      "perspective-origin",
+      "backface-visibility",
+      "transition",
+      "transition-property",
+      "transition-duration",
+      "transition-timing-function",
+      "transition-delay"
+    ],
+    [
+      "quotes",
+      "counter-reset",
+      "counter-increment",
+      "resize",
+      "cursor",
+      "pointer-events",
+      "user-select",
+      "nav-index",
+      "nav-up",
+      "nav-right",
+      "nav-down",
+      "nav-left",
+      "page-break-before",
+      "page-break-after",
+      "page-break-inside",
+      "widows",
+      "orphans",
+      "zoom",
+      "clip",
+      "clip-path",
+      "mask",
+      "mask-clip",
+      "mask-composite",
+      "mask-image",
+      "mask-mode",
+      "mask-origin",
+      "mask-position",
+      "mask-repeat",
+      "mask-size",
+      "mask-type",
+      "appearance",
+      "-moz-appearance",
+      "-webkit-appearance",
+      "image-rendering",
+      "shape-rendering",
+      "text-rendering",
+      "touch-action",
+      "scroll-behavior",
+      "overscroll-behavior",
+      "-webkit-tap-highlight-color",
+      "overflow-anchor",
+      "caret-color",
+      "scroll-snap-type",
+      "scroll-snap-align",
+      "scroll-snap-stop",
+      "scroll-margin",
+      "scroll-margin-top",
+      "scroll-margin-right",
+      "scroll-margin-bottom",
+      "scroll-margin-left",
+      "scroll-padding",
+      "scroll-padding-top",
+      "scroll-padding-right",
+      "scroll-padding-bottom",
+      "scroll-padding-left",
+      "scrollbar-width",
+      "scrollbar-color",
+      "scrollbar-gutter",
+      "$include scrollbar",
+      "$include scrollbarHorizontal",
+      "$include scrollbarDelete"
+    ],
+    ["$include hover"]
+  ]
+}

.editorconfig

@@ -0,0 +1,8 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true

.eslintrc.js

@@ -0,0 +1,14 @@
+module.exports = {
+  env: {
+    browser: true,
+    node: true,
+  },
+  extends: ['eslint:recommended', 'plugin:prettier/recommended'],
+  parserOptions: {
+    ecmaVersion: 2020,
+  },
+  rules: {
+    quotes: ['error', 'single'],
+    semi: ['error', 'always'],
+  },
+};