From 10fff34dc4aa4500a8f28fb883c33144d96bab7a Mon Sep 17 00:00:00 2001 From: Josh Black Date: Fri, 28 Jul 2023 10:21:52 -0500 Subject: [PATCH 1/2] chore(deps): update styled-components and related dependencies to v5 --- .changeset/blue-gorillas-lie.md | 7 + package-lock.json | 216 +- package.json | 10 +- .../__snapshots__/NavList.test.tsx.snap | 457 +-- .../__snapshots__/PageLayout.test.tsx.snap | 322 +- .../__snapshots__/SelectPanel.test.tsx.snap | 4 +- .../SplitPageLayout.test.tsx.snap | 20 + .../__snapshots__/Pagination.test.tsx.snap | 9 +- .../__snapshots__/ActionMenu.test.tsx.snap | 4 +- .../AnchoredOverlay.test.tsx.snap | 50 +- .../__snapshots__/Autocomplete.test.tsx.snap | 580 +-- src/__tests__/__snapshots__/Box.test.tsx.snap | 24 + .../__snapshots__/Button.test.tsx.snap | 23 +- .../__snapshots__/CircleBadge.test.tsx.snap | 2 +- .../ConfirmationDialog.test.tsx.snap | 21 +- .../__snapshots__/Dialog.test.tsx.snap | 57 +- .../__snapshots__/Popover.test.tsx.snap | 3648 +++++------------ .../__snapshots__/SideNav.test.tsx.snap | 82 - .../__snapshots__/TextInput.test.tsx.snap | 1734 ++++---- .../TextInputWithTokens.test.tsx.snap | 3253 ++++++++------- .../__snapshots__/ToggleSwitch.test.tsx.snap | 28 +- .../__snapshots__/ActionList.test.tsx.snap | 82 +- .../__snapshots__/ActionMenu.test.tsx.snap | 21 +- .../__snapshots__/Button.test.tsx.snap | 198 +- 24 files changed, 4707 insertions(+), 6145 deletions(-) create mode 100644 .changeset/blue-gorillas-lie.md diff --git a/.changeset/blue-gorillas-lie.md b/.changeset/blue-gorillas-lie.md new file mode 100644 index 00000000000..b6268336b63 --- /dev/null +++ b/.changeset/blue-gorillas-lie.md @@ -0,0 +1,7 @@ +--- +'@primer/react': major +--- + +Update styled-components and related dependencies to v5.x + + diff --git a/package-lock.json b/package-lock.json index dbcaf512a98..34512b8b839 100644 --- a/package-lock.json +++ b/package-lock.json @@ -89,7 +89,7 @@ "@types/node": "18.16.19", "@types/react": "18.0.28", "@types/react-dom": "18.2.6", - "@types/styled-components": "^5.1.11", + "@types/styled-components": "^5.1.26", "@typescript-eslint/eslint-plugin": "5.59.6", "@typescript-eslint/parser": "5.59.6", "ajv": "8.12.0", @@ -100,7 +100,7 @@ "babel-plugin-dev-expression": "0.2.3", "babel-plugin-macros": "3.1.0", "babel-plugin-open-source": "1.3.4", - "babel-plugin-styled-components": "2.1.1", + "babel-plugin-styled-components": "2.1.3", "babel-plugin-transform-replace-expressions": "0.2.0", "babel-polyfill": "6.26.0", "change-case": "4.1.2", @@ -132,7 +132,7 @@ "jest-environment-jsdom": "29.4.3", "jest-fail-on-console": "3.1.1", "jest-matchmedia-mock": "1.1.0", - "jest-styled-components": "6.3.4", + "jest-styled-components": "7.1.1", "jest-watch-typeahead": "2.2.2", "jscodeshift": "0.14.0", "lint-staged": "13.2.2", @@ -164,7 +164,7 @@ "size-limit": "8.2.4", "storybook": "7.1.0", "storybook-addon-turbo-build": "2.0.1", - "styled-components": "4.4.1", + "styled-components": "5.3.1", "terser": "5.17.6", "ts-node": "10.9.1", "ts-toolbelt": "9.6.0", @@ -186,7 +186,7 @@ "@types/styled-components": "^5.1.11", "react": "^18.0.0", "react-dom": "^18.0.0", - "styled-components": "4.x || 5.x" + "styled-components": "5.x" }, "peerDependenciesMeta": { "@types/react": { @@ -3471,6 +3471,12 @@ "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==", "dev": true }, + "node_modules/@emotion/stylis": { + "version": "0.8.5", + "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz", + "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==", + "dev": true + }, "node_modules/@emotion/unitless": { "version": "0.7.5", "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz", @@ -13233,18 +13239,6 @@ "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=", "dev": true }, - "node_modules/atob": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz", - "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==", - "dev": true, - "bin": { - "atob": "bin/atob.js" - }, - "engines": { - "node": ">= 4.5.0" - } - }, "node_modules/autoprefixer": { "version": "10.4.14", "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.14.tgz", @@ -13823,16 +13817,16 @@ } }, "node_modules/babel-plugin-styled-components": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.1.1.tgz", - "integrity": "sha512-c8lJlszObVQPguHkI+akXv8+Jgb9Ccujx0EetL7oIvwU100LxO6XAGe45qry37wUL40a5U9f23SYrivro2XKhA==", + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.1.3.tgz", + "integrity": "sha512-jBioLwBVHpOMU4NsueH/ADcHrjS0Y/WTpt2eGVmmuSFNEv2DF3XhcMncuZlbbjxQ4vzxg+yEr6E6TNjrIQbsJQ==", "dev": true, "dependencies": { - "@babel/helper-annotate-as-pure": "^7.16.0", - "@babel/helper-module-imports": "^7.16.0", + "@babel/helper-annotate-as-pure": "^7.18.6", + "@babel/helper-module-imports": "^7.21.4", "babel-plugin-syntax-jsx": "^6.18.0", "lodash": "^4.17.21", - "picomatch": "^2.3.0" + "picomatch": "^2.3.1" }, "peerDependencies": { "styled-components": ">= 2" @@ -14598,10 +14592,13 @@ } }, "node_modules/camelize": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz", - "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=", - "dev": true + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz", + "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==", + "dev": true, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } }, "node_modules/can-bind-to-host": { "version": "1.1.2", @@ -15781,18 +15778,6 @@ "node": ">=8" } }, - "node_modules/css": { - "version": "2.2.4", - "resolved": "https://registry.npmjs.org/css/-/css-2.2.4.tgz", - "integrity": "sha512-oUnjmWpy0niI3x/mPL8dVEI1l7MnG3+HHyRPHf+YFSbK+svOhXpmSOcDURUh2aOCgl2grzrOPt1nHLuCVFULLw==", - "dev": true, - "dependencies": { - "inherits": "^2.0.3", - "source-map": "^0.6.1", - "source-map-resolve": "^0.5.2", - "urix": "^0.1.0" - } - }, "node_modules/css-blank-pseudo": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/css-blank-pseudo/-/css-blank-pseudo-6.0.0.tgz", @@ -15821,7 +15806,7 @@ "node_modules/css-color-keywords": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", - "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=", + "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==", "dev": true, "engines": { "node": ">=4" @@ -15931,22 +15916,16 @@ } }, "node_modules/css-to-react-native": { - "version": "2.3.2", - "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-2.3.2.tgz", - "integrity": "sha512-VOFaeZA053BqvvvqIA8c9n0+9vFppVBAHCp6JgFTtTMU3Mzi+XnelJ9XC9ul3BqFzZyQ5N+H0SnwsWT2Ebchxw==", + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz", + "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==", "dev": true, "dependencies": { "camelize": "^1.0.0", "css-color-keywords": "^1.0.0", - "postcss-value-parser": "^3.3.0" + "postcss-value-parser": "^4.0.2" } }, - "node_modules/css-to-react-native/node_modules/postcss-value-parser": { - "version": "3.3.1", - "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz", - "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==", - "dev": true - }, "node_modules/css-tree": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz", @@ -16291,15 +16270,6 @@ "url": "https://github.com/sponsors/wooorm" } }, - "node_modules/decode-uri-component": { - "version": "0.2.2", - "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.2.tgz", - "integrity": "sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ==", - "dev": true, - "engines": { - "node": ">=0.10" - } - }, "node_modules/dedent": { "version": "0.7.0", "resolved": "https://registry.npmjs.org/dedent/-/dedent-0.7.0.tgz", @@ -25874,15 +25844,18 @@ "dev": true }, "node_modules/jest-styled-components": { - "version": "6.3.4", - "resolved": "https://registry.npmjs.org/jest-styled-components/-/jest-styled-components-6.3.4.tgz", - "integrity": "sha512-dc32l0/6n3FtsILODpvKNz6SLg50OmbJ/3r3oRh9jc2VIPPGZT5jWv7BKIcNCYH7E38ZK7uejNl3zJsCOIenng==", + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/jest-styled-components/-/jest-styled-components-7.1.1.tgz", + "integrity": "sha512-OUq31R5CivBF8oy81dnegNQrRW13TugMol/Dz6ZnFfEyo03exLASod7YGwyHGuayYlKmCstPtz0RQ1+NrAbIIA==", "dev": true, "dependencies": { - "css": "^2.2.4" + "@adobe/css-tools": "^4.0.1" + }, + "engines": { + "node": ">= 12" }, "peerDependencies": { - "styled-components": "^2 || ^3 || ^4" + "styled-components": ">= 5" } }, "node_modules/jest-util": { @@ -28208,12 +28181,6 @@ "node": ">= 4.0.0" } }, - "node_modules/memoize-one": { - "version": "5.2.1", - "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz", - "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==", - "dev": true - }, "node_modules/memoizerific": { "version": "1.11.3", "resolved": "https://registry.npmjs.org/memoizerific/-/memoizerific-1.11.3.tgz", @@ -28248,15 +28215,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/merge-anything": { - "version": "2.4.4", - "resolved": "https://registry.npmjs.org/merge-anything/-/merge-anything-2.4.4.tgz", - "integrity": "sha512-l5XlriUDJKQT12bH+rVhAHjwIuXWdAIecGwsYjv2LJo+dA1AeRTmeQS+3QBpO6lEthBMDi2IUMpLC1yyRvGlwQ==", - "dev": true, - "dependencies": { - "is-what": "^3.3.1" - } - }, "node_modules/merge-descriptors": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz", @@ -32986,13 +32944,6 @@ "url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1" } }, - "node_modules/resolve-url": { - "version": "0.2.1", - "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz", - "integrity": "sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=", - "deprecated": "https://github.com/lydell/resolve-url#deprecated", - "dev": true - }, "node_modules/resolve-url-loader": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/resolve-url-loader/-/resolve-url-loader-5.0.0.tgz", @@ -33683,6 +33634,12 @@ "node": ">=8" } }, + "node_modules/shallowequal": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", + "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==", + "dev": true + }, "node_modules/shebang-command": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz", @@ -33899,20 +33856,6 @@ "node": ">=0.10.0" } }, - "node_modules/source-map-resolve": { - "version": "0.5.3", - "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.5.3.tgz", - "integrity": "sha512-Htz+RnsXWk5+P2slx5Jh3Q66vhQj1Cllm0zvnaY98+NFx+Dv2CF/f5O/t8x+KaNdrdIAsruNzoh/KpialbqAnw==", - "deprecated": "See https://github.com/lydell/source-map-resolve#deprecated", - "dev": true, - "dependencies": { - "atob": "^2.1.2", - "decode-uri-component": "^0.2.0", - "resolve-url": "^0.2.1", - "source-map-url": "^0.4.0", - "urix": "^0.1.0" - } - }, "node_modules/source-map-support": { "version": "0.5.21", "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz", @@ -33923,13 +33866,6 @@ "source-map": "^0.6.0" } }, - "node_modules/source-map-url": { - "version": "0.4.1", - "resolved": "https://registry.npmjs.org/source-map-url/-/source-map-url-0.4.1.tgz", - "integrity": "sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw==", - "deprecated": "See https://github.com/lydell/source-map-url#deprecated", - "dev": true - }, "node_modules/space-separated-tokens": { "version": "1.1.5", "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-1.1.5.tgz", @@ -34378,37 +34314,35 @@ } }, "node_modules/styled-components": { - "version": "4.4.1", - "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-4.4.1.tgz", - "integrity": "sha512-RNqj14kYzw++6Sr38n7197xG33ipEOktGElty4I70IKzQF1jzaD1U4xQ+Ny/i03UUhHlC5NWEO+d8olRCDji6g==", + "version": "5.3.1", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.1.tgz", + "integrity": "sha512-JThv2JRzyH0NOIURrk9iskdxMSAAtCfj/b2Sf1WJaCUsloQkblepy1jaCLX/bYE+mhYo3unmwVSI9I5d9ncSiQ==", "dev": true, - "hasInstallScript": true, "dependencies": { "@babel/helper-module-imports": "^7.0.0", - "@babel/traverse": "^7.0.0", - "@emotion/is-prop-valid": "^0.8.1", - "@emotion/unitless": "^0.7.0", - "babel-plugin-styled-components": ">= 1", - "css-to-react-native": "^2.2.2", - "memoize-one": "^5.0.0", - "merge-anything": "^2.2.4", - "prop-types": "^15.5.4", - "react-is": "^16.6.0", - "stylis": "^3.5.0", - "stylis-rule-sheet": "^0.0.10", + "@babel/traverse": "^7.4.5", + "@emotion/is-prop-valid": "^0.8.8", + "@emotion/stylis": "^0.8.4", + "@emotion/unitless": "^0.7.4", + "babel-plugin-styled-components": ">= 1.12.0", + "css-to-react-native": "^3.0.0", + "hoist-non-react-statics": "^3.0.0", + "shallowequal": "^1.1.0", "supports-color": "^5.5.0" }, + "engines": { + "node": ">=10" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/styled-components" + }, "peerDependencies": { - "react": ">= 16.3.0", - "react-dom": ">= 16.3.0" + "react": ">= 16.8.0", + "react-dom": ">= 16.8.0", + "react-is": ">= 16.8.0" } }, - "node_modules/styled-components/node_modules/react-is": { - "version": "16.13.1", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", - "dev": true - }, "node_modules/styled-system": { "version": "5.1.5", "resolved": "https://registry.npmjs.org/styled-system/-/styled-system-5.1.5.tgz", @@ -34445,21 +34379,6 @@ "postcss": "^8.2.15" } }, - "node_modules/stylis": { - "version": "3.5.4", - "resolved": "https://registry.npmjs.org/stylis/-/stylis-3.5.4.tgz", - "integrity": "sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q==", - "dev": true - }, - "node_modules/stylis-rule-sheet": { - "version": "0.0.10", - "resolved": "https://registry.npmjs.org/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz", - "integrity": "sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw==", - "dev": true, - "peerDependencies": { - "stylis": "^3.5.0" - } - }, "node_modules/stylus": { "version": "0.59.0", "resolved": "https://registry.npmjs.org/stylus/-/stylus-0.59.0.tgz", @@ -36000,13 +35919,6 @@ "punycode": "^2.1.0" } }, - "node_modules/urix": { - "version": "0.1.0", - "resolved": "https://registry.npmjs.org/urix/-/urix-0.1.0.tgz", - "integrity": "sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI=", - "deprecated": "Please see https://github.com/lydell/urix#deprecated", - "dev": true - }, "node_modules/url": { "version": "0.11.1", "resolved": "https://registry.npmjs.org/url/-/url-0.11.1.tgz", diff --git a/package.json b/package.json index 20e5e8a7425..88be5922e7b 100644 --- a/package.json +++ b/package.json @@ -174,7 +174,7 @@ "@types/node": "18.16.19", "@types/react": "18.0.28", "@types/react-dom": "18.2.6", - "@types/styled-components": "^5.1.11", + "@types/styled-components": "^5.1.26", "@typescript-eslint/eslint-plugin": "5.59.6", "@typescript-eslint/parser": "5.59.6", "ajv": "8.12.0", @@ -185,7 +185,7 @@ "babel-plugin-dev-expression": "0.2.3", "babel-plugin-macros": "3.1.0", "babel-plugin-open-source": "1.3.4", - "babel-plugin-styled-components": "2.1.1", + "babel-plugin-styled-components": "2.1.3", "babel-plugin-transform-replace-expressions": "0.2.0", "babel-polyfill": "6.26.0", "change-case": "4.1.2", @@ -217,7 +217,7 @@ "jest-environment-jsdom": "29.4.3", "jest-fail-on-console": "3.1.1", "jest-matchmedia-mock": "1.1.0", - "jest-styled-components": "6.3.4", + "jest-styled-components": "7.1.1", "jest-watch-typeahead": "2.2.2", "jscodeshift": "0.14.0", "lint-staged": "13.2.2", @@ -249,7 +249,7 @@ "size-limit": "8.2.4", "storybook": "7.1.0", "storybook-addon-turbo-build": "2.0.1", - "styled-components": "4.4.1", + "styled-components": "5.3.1", "terser": "5.17.6", "ts-node": "10.9.1", "ts-toolbelt": "9.6.0", @@ -267,7 +267,7 @@ "@types/styled-components": "^5.1.11", "react": "^18.0.0", "react-dom": "^18.0.0", - "styled-components": "4.x || 5.x" + "styled-components": "5.x" }, "peerDependenciesMeta": { "@types/react": { diff --git a/src/NavList/__snapshots__/NavList.test.tsx.snap b/src/NavList/__snapshots__/NavList.test.tsx.snap index 51c4560234b..0a4d94b1939 100644 --- a/src/NavList/__snapshots__/NavList.test.tsx.snap +++ b/src/NavList/__snapshots__/NavList.test.tsx.snap @@ -88,12 +88,11 @@ exports[`NavList renders a simple list 1`] = ` --divider-color: rgba(208,215,222,0.48); } -[data-component="ActionList.Divider"] + .c2 { +[data-component="ActionList.Divider"] + .c1 { --divider-color: transparent !important; } -.c2:hover:not([aria-disabled]), -.c2:focus:not([aria-disabled]), +.c2:hover:not([aria-disabled]),.c2:focus:not([aria-disabled]), .c2[data-focus-visible-added]:not([aria-disabled]) { --divider-color: transparent; } @@ -169,12 +168,11 @@ exports[`NavList renders a simple list 1`] = ` --divider-color: rgba(208,215,222,0.48); } -[data-component="ActionList.Divider"] + .c6 { +[data-component="ActionList.Divider"] + .c1 { --divider-color: transparent !important; } -.c6:hover:not([aria-disabled]), -.c6:focus:not([aria-disabled]), +.c6:hover:not([aria-disabled]),.c6:focus:not([aria-disabled]), .c6[data-focus-visible-added]:not([aria-disabled]) { --divider-color: transparent; } @@ -362,29 +360,6 @@ exports[`NavList renders a simple list 1`] = ` `; exports[`NavList renders with groups 1`] = ` -.c8 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; - min-width: 0; -} - -.c9 { - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; - font-weight: 400; -} - .c1 { height: 1px; background-color: rgba(208,215,222,0.48); @@ -419,6 +394,29 @@ exports[`NavList renders with groups 1`] = ` padding-inline-start: 0; } +.c8 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; + min-width: 0; +} + +.c9 { + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; + font-weight: 400; +} + .c0 { margin: 0; padding-inline-start: 0; @@ -483,12 +481,11 @@ exports[`NavList renders with groups 1`] = ` --divider-color: rgba(208,215,222,0.48); } -[data-component="ActionList.Divider"] + .c6 { +[data-component="ActionList.Divider"] + .c5 { --divider-color: transparent !important; } -.c6:hover:not([aria-disabled]), -.c6:focus:not([aria-disabled]), +.c6:hover:not([aria-disabled]),.c6:focus:not([aria-disabled]), .c6[data-focus-visible-added]:not([aria-disabled]) { --divider-color: transparent; } @@ -564,12 +561,11 @@ exports[`NavList renders with groups 1`] = ` --divider-color: rgba(208,215,222,0.48); } -[data-component="ActionList.Divider"] + .c10 { +[data-component="ActionList.Divider"] + .c5 { --divider-color: transparent !important; } -.c10:hover:not([aria-disabled]), -.c10:focus:not([aria-disabled]), +.c10:hover:not([aria-disabled]),.c10:focus:not([aria-disabled]), .c10[data-focus-visible-added]:not([aria-disabled]) { --divider-color: transparent; } @@ -785,7 +781,11 @@ exports[`NavList renders with groups 1`] = ` `; exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav contains the current item and is open 1`] = ` -.c4 { +.c2 { + list-style: none; +} + +.c5 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -801,18 +801,6 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav } .c6 { - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; - font-weight: 400; -} - -.c1 { - list-style: none; -} - -.c5 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -823,13 +811,15 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav flex-grow: 1; } -.c9 { - padding: 0; - margin: 0; - display: block; +.c7 { + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; + font-weight: 400; } -.c7 { +.c8 { height: 20px; -webkit-flex-shrink: 0; -ms-flex-negative: 0; @@ -839,12 +829,17 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav font-weight: initial; } -[data-variant="danger"]:hover .c7, -[data-variant="danger"]:active .c7 { +[data-variant="danger"]:hover .c1,[data-variant="danger"]:active .c8 { color: #1F2328; } -.c8 { +.c10 { + padding: 0; + margin: 0; + display: block; +} + +.c9 { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); @@ -857,7 +852,16 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav padding-bottom: 8px; } -.c10 { +[data-component="ActionList.Divider"] + .c3 { + --divider-color: transparent !important; +} + +.c13:hover:not([aria-disabled]) + .c3, +.c13[data-focus-visible-added] + li { + --divider-color: transparent; +} + +.c11 { position: relative; display: -webkit-box; display: -webkit-flex; @@ -891,15 +895,15 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav background-color: rgba(208,215,222,0.24); } -.c10[aria-disabled] { +.c11[aria-disabled] { cursor: not-allowed; } -.c10 [data-component="ActionList.Item--DividerContainer"] { +.c11 [data-component="ActionList.Item--DividerContainer"] { position: relative; } -.c10 [data-component="ActionList.Item--DividerContainer"]::before { +.c11 [data-component="ActionList.Item--DividerContainer"]::before { content: " "; display: block; position: absolute; @@ -910,26 +914,25 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav border-color: var(--divider-color,transparent); } -.c10:not(:first-of-type) { +.c11:not(:first-of-type) { --divider-color: rgba(208,215,222,0.48); } -[data-component="ActionList.Divider"] + .c10 { +[data-component="ActionList.Divider"] + .c3 { --divider-color: transparent !important; } -.c10:hover:not([aria-disabled]), -.c10:focus:not([aria-disabled]), -.c10[data-focus-visible-added]:not([aria-disabled]) { +.c11:hover:not([aria-disabled]),.c11:focus:not([aria-disabled]), +.c11[data-focus-visible-added]:not([aria-disabled]) { --divider-color: transparent; } -.c10:hover:not([aria-disabled]) + .c2, -.c10[data-focus-visible-added] + li { +.c11:hover:not([aria-disabled]) + .c3, +.c11[data-focus-visible-added] + li { --divider-color: transparent; } -.c10::after { +.c11::after { position: absolute; top: calc(50% - 12px); left: -8px; @@ -940,42 +943,7 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav border-radius: 6px; } -.c12:hover:not([aria-disabled]) + .c2, -.c12[data-focus-visible-added] + li { - --divider-color: transparent; -} - -.c13:hover:not([aria-disabled]) + .c2, -.c13[data-focus-visible-added] + li { - --divider-color: transparent; -} - -.c14:hover:not([aria-disabled]) + .c2, -.c14[data-focus-visible-added] + li { - --divider-color: transparent; -} - -.c15:hover:not([aria-disabled]) + .c2, -.c15[data-focus-visible-added] + li { - --divider-color: transparent; -} - -.c16:hover:not([aria-disabled]) + .c2, -.c16[data-focus-visible-added] + li { - --divider-color: transparent; -} - -.c17:hover:not([aria-disabled]) + .c2, -.c17[data-focus-visible-added] + li { - --divider-color: transparent; -} - -.c18:hover:not([aria-disabled]) + .c2, -.c18[data-focus-visible-added] + li { - --divider-color: transparent; -} - -.c3 { +.c4 { position: relative; display: -webkit-box; display: -webkit-flex; @@ -1007,15 +975,15 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav font-weight: 600; } -.c3[aria-disabled] { +.c4[aria-disabled] { cursor: not-allowed; } -.c3 [data-component="ActionList.Item--DividerContainer"] { +.c4 [data-component="ActionList.Item--DividerContainer"] { position: relative; } -.c3 [data-component="ActionList.Item--DividerContainer"]::before { +.c4 [data-component="ActionList.Item--DividerContainer"]::before { content: " "; display: block; position: absolute; @@ -1026,7 +994,7 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav border-color: var(--divider-color,transparent); } -.c3:not(:first-of-type) { +.c4:not(:first-of-type) { --divider-color: rgba(208,215,222,0.48); } @@ -1034,23 +1002,17 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav --divider-color: transparent !important; } -.c3:hover:not([aria-disabled]), -.c3:focus:not([aria-disabled]), -.c3[data-focus-visible-added]:not([aria-disabled]) { - --divider-color: transparent; -} - -.c3:hover:not([aria-disabled]) + .c2, -.c3[data-focus-visible-added] + li { +.c4:hover:not([aria-disabled]),.c4:focus:not([aria-disabled]), +.c4[data-focus-visible-added]:not([aria-disabled]) { --divider-color: transparent; } -.c19:hover:not([aria-disabled]) + .c2, -.c19[data-focus-visible-added] + li { +.c4:hover:not([aria-disabled]) + .c3, +.c4[data-focus-visible-added] + li { --divider-color: transparent; } -.c11 { +.c12 { color: #0969da; -webkit-text-decoration: none; text-decoration: none; @@ -1072,12 +1034,12 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav font-weight: 400; } -.c11:hover { +.c12:hover { -webkit-text-decoration: underline; text-decoration: underline; } -.c11:is(button) { +.c12:is(button) { display: inline-block; padding: 0; font-size: inherit; @@ -1094,58 +1056,66 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav appearance: none; } -.c11:hover { +.c12:hover { color: inherit; -webkit-text-decoration: none; text-decoration: none; } @media (hover:hover) and (pointer:fine) { - .c10:hover:not([aria-disabled]) { + +} + +@media (forced-colors:active) { + +} + +@media (hover:hover) and (pointer:fine) { + .c11:hover:not([aria-disabled]) { background-color: rgba(208,215,222,0.32); color: #1F2328; } - .c10:focus-visible, - .c10 > a:focus-visible { + .c11:focus-visible, + .c11 > a:focus-visible { outline: none; border: 2 solid; box-shadow: 0 0 0 2px #0969da; } - .c10:active:not([aria-disabled]) { + .c11:active:not([aria-disabled]) { background-color: rgba(208,215,222,0.48); color: #1F2328; } } @media (forced-colors:active) { - .c10:focus { + .c11:focus { outline: solid 1px transparent !important; } } @media (hover:hover) and (pointer:fine) { - .c3:hover:not([aria-disabled]) { + .c4:hover:not([aria-disabled]) { background-color: rgba(208,215,222,0.32); color: #1F2328; } - .c3:focus-visible, - .c3 > a:focus-visible { + .c4:focus-visible, + .c4 > a:focus-visible { outline: none; border: 2 solid; box-shadow: 0 0 0 2px #0969da; } - .c3:active:not([aria-disabled]) { + .c4:active:not([aria-disabled]) { background-color: rgba(208,215,222,0.48); color: #1F2328; } } @media (forced-colors:active) { - .c3:focus { + .c4:focus { outline: solid 1px transparent !important; } } @@ -1159,34 +1129,34 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav >
  • Some content diff --git a/src/__tests__/__snapshots__/Popover.test.tsx.snap b/src/__tests__/__snapshots__/Popover.test.tsx.snap index 07ec53303e0..c524d5caae9 100644 --- a/src/__tests__/__snapshots__/Popover.test.tsx.snap +++ b/src/__tests__/__snapshots__/Popover.test.tsx.snap @@ -7,7 +7,7 @@ exports[`Popover Popover.Content renders consistently 1`] = ` display: block; } -.c2 { +.c3 { border: 1px solid #d0d7de; border-radius: 6px; position: relative; @@ -18,22 +18,22 @@ exports[`Popover Popover.Content renders consistently 1`] = ` background-color: #ffffff; } -.c2::before, -.c2::after { +.c3::before, +.c3::after { position: absolute; left: 50%; display: inline-block; content: ''; } -.c2::before { +.c3::before { top: -16px; margin-left: -9px; border: 8px solid transparent; border-bottom-color: #d0d7de; } -.c2::after { +.c3::after { top: -14px; margin-left: -8px; border: 7px solid transparent; @@ -41,84 +41,84 @@ exports[`Popover Popover.Content renders consistently 1`] = ` } .c0.caret-pos--bottom .c2::before, -.c0.caret-pos--bottom-right .c2::before, -.c0.caret-pos--bottom-left .c2::before, -.c0.caret-pos--bottom .c2::after, -.c0.caret-pos--bottom-right .c2::after, -.c0.caret-pos--bottom-left .c2::after { +.c0.caret-pos--bottom-right .c3::before, +.c0.caret-pos--bottom-left .c3::before, +.c0.caret-pos--bottom .c3::after, +.c0.caret-pos--bottom-right .c3::after, +.c0.caret-pos--bottom-left .c3::after { top: auto; border-bottom-color: transparent; } .c0.caret-pos--bottom .c2::before, -.c0.caret-pos--bottom-right .c2::before, -.c0.caret-pos--bottom-left .c2::before { +.c0.caret-pos--bottom-right .c3::before, +.c0.caret-pos--bottom-left .c3::before { bottom: -16px; border-top-color: #d0d7de; } .c0.caret-pos--bottom .c2::after, -.c0.caret-pos--bottom-right .c2::after, -.c0.caret-pos--bottom-left .c2::after { +.c0.caret-pos--bottom-right .c3::after, +.c0.caret-pos--bottom-left .c3::after { bottom: -14px; border-top-color: #ffffff; } .c0.caret-pos--top-right .c2, -.c0.caret-pos--bottom-right .c2 { +.c0.caret-pos--bottom-right .c3 { right: -9px; margin-right: 0; } .c0.caret-pos--top-right .c2::before, -.c0.caret-pos--bottom-right .c2::before, -.c0.caret-pos--top-right .c2::after, -.c0.caret-pos--bottom-right .c2::after { +.c0.caret-pos--bottom-right .c3::before, +.c0.caret-pos--top-right .c3::after, +.c0.caret-pos--bottom-right .c3::after { left: auto; margin-left: 0; } .c0.caret-pos--top-right .c2::before, -.c0.caret-pos--bottom-right .c2::before { +.c0.caret-pos--bottom-right .c3::before { right: 20px; } .c0.caret-pos--top-right .c2::after, -.c0.caret-pos--bottom-right .c2::after { +.c0.caret-pos--bottom-right .c3::after { right: 21px; } .c0.caret-pos--top-left .c2, -.c0.caret-pos--bottom-left .c2 { +.c0.caret-pos--bottom-left .c3 { left: -9px; margin-left: 0; } .c0.caret-pos--top-left .c2::before, -.c0.caret-pos--bottom-left .c2::before, -.c0.caret-pos--top-left .c2::after, -.c0.caret-pos--bottom-left .c2::after { +.c0.caret-pos--bottom-left .c3::before, +.c0.caret-pos--top-left .c3::after, +.c0.caret-pos--bottom-left .c3::after { left: 24px; margin-left: 0; } .c0.caret-pos--top-left .c2::after, -.c0.caret-pos--bottom-left .c2::after { +.c0.caret-pos--bottom-left .c3::after { left: calc(24px + 1px); } .c0.caret-pos--right .c2::before, -.c0.caret-pos--right-top .c2::before, -.c0.caret-pos--right-bottom .c2::before, -.c0.caret-pos--left .c2::before, -.c0.caret-pos--left-top .c2::before, -.c0.caret-pos--left-bottom .c2::before, -.c0.caret-pos--right .c2::after, -.c0.caret-pos--right-top .c2::after, -.c0.caret-pos--right-bottom .c2::after, -.c0.caret-pos--left .c2::after, -.c0.caret-pos--left-top .c2::after, -.c0.caret-pos--left-bottom .c2::after { +.c0.caret-pos--right-top .c3::before, +.c0.caret-pos--right-bottom .c3::before, +.c0.caret-pos--left .c3::before, +.c0.caret-pos--left-top .c3::before, +.c0.caret-pos--left-bottom .c3::before, +.c0.caret-pos--right .c3::after, +.c0.caret-pos--right-top .c3::after, +.c0.caret-pos--right-bottom .c3::after, +.c0.caret-pos--left .c3::after, +.c0.caret-pos--left-top .c3::after, +.c0.caret-pos--left-bottom .c3::after { top: 50%; left: auto; margin-left: 0; @@ -126,72 +126,72 @@ exports[`Popover Popover.Content renders consistently 1`] = ` } .c0.caret-pos--right .c2::before, -.c0.caret-pos--right-top .c2::before, -.c0.caret-pos--right-bottom .c2::before, -.c0.caret-pos--left .c2::before, -.c0.caret-pos--left-top .c2::before, -.c0.caret-pos--left-bottom .c2::before { +.c0.caret-pos--right-top .c3::before, +.c0.caret-pos--right-bottom .c3::before, +.c0.caret-pos--left .c3::before, +.c0.caret-pos--left-top .c3::before, +.c0.caret-pos--left-bottom .c3::before { margin-top: calc((8px + 1px) * -1); } .c0.caret-pos--right .c2::after, -.c0.caret-pos--right-top .c2::after, -.c0.caret-pos--right-bottom .c2::after, -.c0.caret-pos--left .c2::after, -.c0.caret-pos--left-top .c2::after, -.c0.caret-pos--left-bottom .c2::after { +.c0.caret-pos--right-top .c3::after, +.c0.caret-pos--right-bottom .c3::after, +.c0.caret-pos--left .c3::after, +.c0.caret-pos--left-top .c3::after, +.c0.caret-pos--left-bottom .c3::after { margin-top: -8px; } .c0.caret-pos--right .c2::before, -.c0.caret-pos--right-top .c2::before, -.c0.caret-pos--right-bottom .c2::before { +.c0.caret-pos--right-top .c3::before, +.c0.caret-pos--right-bottom .c3::before { right: -16px; border-left-color: #d0d7de; } .c0.caret-pos--right .c2::after, -.c0.caret-pos--right-top .c2::after, -.c0.caret-pos--right-bottom .c2::after { +.c0.caret-pos--right-top .c3::after, +.c0.caret-pos--right-bottom .c3::after { right: -14px; border-left-color: #ffffff; } .c0.caret-pos--left .c2::before, -.c0.caret-pos--left-top .c2::before, -.c0.caret-pos--left-bottom .c2::before { +.c0.caret-pos--left-top .c3::before, +.c0.caret-pos--left-bottom .c3::before { left: -16px; border-right-color: #d0d7de; } .c0.caret-pos--left .c2::after, -.c0.caret-pos--left-top .c2::after, -.c0.caret-pos--left-bottom .c2::after { +.c0.caret-pos--left-top .c3::after, +.c0.caret-pos--left-bottom .c3::after { left: -14px; border-right-color: #ffffff; } .c0.caret-pos--right-top .c2::before, -.c0.caret-pos--left-top .c2::before, -.c0.caret-pos--right-top .c2::after, -.c0.caret-pos--left-top .c2::after { +.c0.caret-pos--left-top .c3::before, +.c0.caret-pos--right-top .c3::after, +.c0.caret-pos--left-top .c3::after { top: 24px; } .c0.caret-pos--right-bottom .c2::before, -.c0.caret-pos--left-bottom .c2::before, -.c0.caret-pos--right-bottom .c2::after, -.c0.caret-pos--left-bottom .c2::after { +.c0.caret-pos--left-bottom .c3::before, +.c0.caret-pos--right-bottom .c3::after, +.c0.caret-pos--left-bottom .c3::after { top: auto; } .c0.caret-pos--right-bottom .c2::before, -.c0.caret-pos--left-bottom .c2::before { +.c0.caret-pos--left-bottom .c3::before { bottom: 16px; } .c0.caret-pos--right-bottom .c2::after, -.c0.caret-pos--left-bottom .c2::after { +.c0.caret-pos--left-bottom .c3::after { bottom: calc(16px + 1px); } @@ -200,7 +200,7 @@ exports[`Popover Popover.Content renders consistently 1`] = ` open={true} >
    Hello!
    @@ -214,7 +214,7 @@ exports[`Popover renders consistently 1`] = ` display: block; } -.c2 { +.c3 { border: 1px solid #d0d7de; border-radius: 6px; position: relative; @@ -225,22 +225,22 @@ exports[`Popover renders consistently 1`] = ` background-color: #ffffff; } -.c2::before, -.c2::after { +.c3::before, +.c3::after { position: absolute; left: 50%; display: inline-block; content: ''; } -.c2::before { +.c3::before { top: -16px; margin-left: -9px; border: 8px solid transparent; border-bottom-color: #d0d7de; } -.c2::after { +.c3::after { top: -14px; margin-left: -8px; border: 7px solid transparent; @@ -248,84 +248,84 @@ exports[`Popover renders consistently 1`] = ` } .c0.caret-pos--bottom .c2::before, -.c0.caret-pos--bottom-right .c2::before, -.c0.caret-pos--bottom-left .c2::before, -.c0.caret-pos--bottom .c2::after, -.c0.caret-pos--bottom-right .c2::after, -.c0.caret-pos--bottom-left .c2::after { +.c0.caret-pos--bottom-right .c3::before, +.c0.caret-pos--bottom-left .c3::before, +.c0.caret-pos--bottom .c3::after, +.c0.caret-pos--bottom-right .c3::after, +.c0.caret-pos--bottom-left .c3::after { top: auto; border-bottom-color: transparent; } .c0.caret-pos--bottom .c2::before, -.c0.caret-pos--bottom-right .c2::before, -.c0.caret-pos--bottom-left .c2::before { +.c0.caret-pos--bottom-right .c3::before, +.c0.caret-pos--bottom-left .c3::before { bottom: -16px; border-top-color: #d0d7de; } .c0.caret-pos--bottom .c2::after, -.c0.caret-pos--bottom-right .c2::after, -.c0.caret-pos--bottom-left .c2::after { +.c0.caret-pos--bottom-right .c3::after, +.c0.caret-pos--bottom-left .c3::after { bottom: -14px; border-top-color: #ffffff; } .c0.caret-pos--top-right .c2, -.c0.caret-pos--bottom-right .c2 { +.c0.caret-pos--bottom-right .c3 { right: -9px; margin-right: 0; } .c0.caret-pos--top-right .c2::before, -.c0.caret-pos--bottom-right .c2::before, -.c0.caret-pos--top-right .c2::after, -.c0.caret-pos--bottom-right .c2::after { +.c0.caret-pos--bottom-right .c3::before, +.c0.caret-pos--top-right .c3::after, +.c0.caret-pos--bottom-right .c3::after { left: auto; margin-left: 0; } .c0.caret-pos--top-right .c2::before, -.c0.caret-pos--bottom-right .c2::before { +.c0.caret-pos--bottom-right .c3::before { right: 20px; } .c0.caret-pos--top-right .c2::after, -.c0.caret-pos--bottom-right .c2::after { +.c0.caret-pos--bottom-right .c3::after { right: 21px; } .c0.caret-pos--top-left .c2, -.c0.caret-pos--bottom-left .c2 { +.c0.caret-pos--bottom-left .c3 { left: -9px; margin-left: 0; } .c0.caret-pos--top-left .c2::before, -.c0.caret-pos--bottom-left .c2::before, -.c0.caret-pos--top-left .c2::after, -.c0.caret-pos--bottom-left .c2::after { +.c0.caret-pos--bottom-left .c3::before, +.c0.caret-pos--top-left .c3::after, +.c0.caret-pos--bottom-left .c3::after { left: 24px; margin-left: 0; } .c0.caret-pos--top-left .c2::after, -.c0.caret-pos--bottom-left .c2::after { +.c0.caret-pos--bottom-left .c3::after { left: calc(24px + 1px); } .c0.caret-pos--right .c2::before, -.c0.caret-pos--right-top .c2::before, -.c0.caret-pos--right-bottom .c2::before, -.c0.caret-pos--left .c2::before, -.c0.caret-pos--left-top .c2::before, -.c0.caret-pos--left-bottom .c2::before, -.c0.caret-pos--right .c2::after, -.c0.caret-pos--right-top .c2::after, -.c0.caret-pos--right-bottom .c2::after, -.c0.caret-pos--left .c2::after, -.c0.caret-pos--left-top .c2::after, -.c0.caret-pos--left-bottom .c2::after { +.c0.caret-pos--right-top .c3::before, +.c0.caret-pos--right-bottom .c3::before, +.c0.caret-pos--left .c3::before, +.c0.caret-pos--left-top .c3::before, +.c0.caret-pos--left-bottom .c3::before, +.c0.caret-pos--right .c3::after, +.c0.caret-pos--right-top .c3::after, +.c0.caret-pos--right-bottom .c3::after, +.c0.caret-pos--left .c3::after, +.c0.caret-pos--left-top .c3::after, +.c0.caret-pos--left-bottom .c3::after { top: 50%; left: auto; margin-left: 0; @@ -333,72 +333,72 @@ exports[`Popover renders consistently 1`] = ` } .c0.caret-pos--right .c2::before, -.c0.caret-pos--right-top .c2::before, -.c0.caret-pos--right-bottom .c2::before, -.c0.caret-pos--left .c2::before, -.c0.caret-pos--left-top .c2::before, -.c0.caret-pos--left-bottom .c2::before { +.c0.caret-pos--right-top .c3::before, +.c0.caret-pos--right-bottom .c3::before, +.c0.caret-pos--left .c3::before, +.c0.caret-pos--left-top .c3::before, +.c0.caret-pos--left-bottom .c3::before { margin-top: calc((8px + 1px) * -1); } .c0.caret-pos--right .c2::after, -.c0.caret-pos--right-top .c2::after, -.c0.caret-pos--right-bottom .c2::after, -.c0.caret-pos--left .c2::after, -.c0.caret-pos--left-top .c2::after, -.c0.caret-pos--left-bottom .c2::after { +.c0.caret-pos--right-top .c3::after, +.c0.caret-pos--right-bottom .c3::after, +.c0.caret-pos--left .c3::after, +.c0.caret-pos--left-top .c3::after, +.c0.caret-pos--left-bottom .c3::after { margin-top: -8px; } .c0.caret-pos--right .c2::before, -.c0.caret-pos--right-top .c2::before, -.c0.caret-pos--right-bottom .c2::before { +.c0.caret-pos--right-top .c3::before, +.c0.caret-pos--right-bottom .c3::before { right: -16px; border-left-color: #d0d7de; } .c0.caret-pos--right .c2::after, -.c0.caret-pos--right-top .c2::after, -.c0.caret-pos--right-bottom .c2::after { +.c0.caret-pos--right-top .c3::after, +.c0.caret-pos--right-bottom .c3::after { right: -14px; border-left-color: #ffffff; } .c0.caret-pos--left .c2::before, -.c0.caret-pos--left-top .c2::before, -.c0.caret-pos--left-bottom .c2::before { +.c0.caret-pos--left-top .c3::before, +.c0.caret-pos--left-bottom .c3::before { left: -16px; border-right-color: #d0d7de; } .c0.caret-pos--left .c2::after, -.c0.caret-pos--left-top .c2::after, -.c0.caret-pos--left-bottom .c2::after { +.c0.caret-pos--left-top .c3::after, +.c0.caret-pos--left-bottom .c3::after { left: -14px; border-right-color: #ffffff; } .c0.caret-pos--right-top .c2::before, -.c0.caret-pos--left-top .c2::before, -.c0.caret-pos--right-top .c2::after, -.c0.caret-pos--left-top .c2::after { +.c0.caret-pos--left-top .c3::before, +.c0.caret-pos--right-top .c3::after, +.c0.caret-pos--left-top .c3::after { top: 24px; } .c0.caret-pos--right-bottom .c2::before, -.c0.caret-pos--left-bottom .c2::before, -.c0.caret-pos--right-bottom .c2::after, -.c0.caret-pos--left-bottom .c2::after { +.c0.caret-pos--left-bottom .c3::before, +.c0.caret-pos--right-bottom .c3::after, +.c0.caret-pos--left-bottom .c3::after { top: auto; } .c0.caret-pos--right-bottom .c2::before, -.c0.caret-pos--left-bottom .c2::before { +.c0.caret-pos--left-bottom .c3::before { bottom: 16px; } .c0.caret-pos--right-bottom .c2::after, -.c0.caret-pos--left-bottom .c2::after { +.c0.caret-pos--left-bottom .c3::after { bottom: calc(16px + 1px); } @@ -407,7 +407,7 @@ exports[`Popover renders consistently 1`] = ` open={true} >
    Hello!
    @@ -421,7 +421,7 @@ exports[`Popover renders correctly for a caret position of bottom 1`] = ` display: block; } -.c2 { +.c3 { border: 1px solid #d0d7de; border-radius: 6px; position: relative; @@ -432,22 +432,22 @@ exports[`Popover renders correctly for a caret position of bottom 1`] = ` background-color: #ffffff; } -.c2::before, -.c2::after { +.c3::before, +.c3::after { position: absolute; left: 50%; display: inline-block; content: ''; } -.c2::before { +.c3::before { top: -16px; margin-left: -9px; border: 8px solid transparent; border-bottom-color: #d0d7de; } -.c2::after { +.c3::after { top: -14px; margin-left: -8px; border: 7px solid transparent; @@ -455,84 +455,84 @@ exports[`Popover renders correctly for a caret position of bottom 1`] = ` } .c0.caret-pos--bottom .c2::before, -.c0.caret-pos--bottom-right .c2::before, -.c0.caret-pos--bottom-left .c2::before, -.c0.caret-pos--bottom .c2::after, -.c0.caret-pos--bottom-right .c2::after, -.c0.caret-pos--bottom-left .c2::after { +.c0.caret-pos--bottom-right .c3::before, +.c0.caret-pos--bottom-left .c3::before, +.c0.caret-pos--bottom .c3::after, +.c0.caret-pos--bottom-right .c3::after, +.c0.caret-pos--bottom-left .c3::after { top: auto; border-bottom-color: transparent; } .c0.caret-pos--bottom .c2::before, -.c0.caret-pos--bottom-right .c2::before, -.c0.caret-pos--bottom-left .c2::before { +.c0.caret-pos--bottom-right .c3::before, +.c0.caret-pos--bottom-left .c3::before { bottom: -16px; border-top-color: #d0d7de; } .c0.caret-pos--bottom .c2::after, -.c0.caret-pos--bottom-right .c2::after, -.c0.caret-pos--bottom-left .c2::after { +.c0.caret-pos--bottom-right .c3::after, +.c0.caret-pos--bottom-left .c3::after { bottom: -14px; border-top-color: #ffffff; } .c0.caret-pos--top-right .c2, -.c0.caret-pos--bottom-right .c2 { +.c0.caret-pos--bottom-right .c3 { right: -9px; margin-right: 0; } .c0.caret-pos--top-right .c2::before, -.c0.caret-pos--bottom-right .c2::before, -.c0.caret-pos--top-right .c2::after, -.c0.caret-pos--bottom-right .c2::after { +.c0.caret-pos--bottom-right .c3::before, +.c0.caret-pos--top-right .c3::after, +.c0.caret-pos--bottom-right .c3::after { left: auto; margin-left: 0; } .c0.caret-pos--top-right .c2::before, -.c0.caret-pos--bottom-right .c2::before { +.c0.caret-pos--bottom-right .c3::before { right: 20px; } .c0.caret-pos--top-right .c2::after, -.c0.caret-pos--bottom-right .c2::after { +.c0.caret-pos--bottom-right .c3::after { right: 21px; } .c0.caret-pos--top-left .c2, -.c0.caret-pos--bottom-left .c2 { +.c0.caret-pos--bottom-left .c3 { left: -9px; margin-left: 0; } .c0.caret-pos--top-left .c2::before, -.c0.caret-pos--bottom-left .c2::before, -.c0.caret-pos--top-left .c2::after, -.c0.caret-pos--bottom-left .c2::after { +.c0.caret-pos--bottom-left .c3::before, +.c0.caret-pos--top-left .c3::after, +.c0.caret-pos--bottom-left .c3::after { left: 24px; margin-left: 0; } .c0.caret-pos--top-left .c2::after, -.c0.caret-pos--bottom-left .c2::after { +.c0.caret-pos--bottom-left .c3::after { left: calc(24px + 1px); } .c0.caret-pos--right .c2::before, -.c0.caret-pos--right-top .c2::before, -.c0.caret-pos--right-bottom .c2::before, -.c0.caret-pos--left .c2::before, -.c0.caret-pos--left-top .c2::before, -.c0.caret-pos--left-bottom .c2::before, -.c0.caret-pos--right .c2::after, -.c0.caret-pos--right-top .c2::after, -.c0.caret-pos--right-bottom .c2::after, -.c0.caret-pos--left .c2::after, -.c0.caret-pos--left-top .c2::after, -.c0.caret-pos--left-bottom .c2::after { +.c0.caret-pos--right-top .c3::before, +.c0.caret-pos--right-bottom .c3::before, +.c0.caret-pos--left .c3::before, +.c0.caret-pos--left-top .c3::before, +.c0.caret-pos--left-bottom .c3::before, +.c0.caret-pos--right .c3::after, +.c0.caret-pos--right-top .c3::after, +.c0.caret-pos--right-bottom .c3::after, +.c0.caret-pos--left .c3::after, +.c0.caret-pos--left-top .c3::after, +.c0.caret-pos--left-bottom .c3::after { top: 50%; left: auto; margin-left: 0; @@ -540,104 +540,158 @@ exports[`Popover renders correctly for a caret position of bottom 1`] = ` } .c0.caret-pos--right .c2::before, -.c0.caret-pos--right-top .c2::before, -.c0.caret-pos--right-bottom .c2::before, -.c0.caret-pos--left .c2::before, -.c0.caret-pos--left-top .c2::before, -.c0.caret-pos--left-bottom .c2::before { +.c0.caret-pos--right-top .c3::before, +.c0.caret-pos--right-bottom .c3::before, +.c0.caret-pos--left .c3::before, +.c0.caret-pos--left-top .c3::before, +.c0.caret-pos--left-bottom .c3::before { margin-top: calc((8px + 1px) * -1); } .c0.caret-pos--right .c2::after, -.c0.caret-pos--right-top .c2::after, -.c0.caret-pos--right-bottom .c2::after, -.c0.caret-pos--left .c2::after, -.c0.caret-pos--left-top .c2::after, -.c0.caret-pos--left-bottom .c2::after { +.c0.caret-pos--right-top .c3::after, +.c0.caret-pos--right-bottom .c3::after, +.c0.caret-pos--left .c3::after, +.c0.caret-pos--left-top .c3::after, +.c0.caret-pos--left-bottom .c3::after { margin-top: -8px; } .c0.caret-pos--right .c2::before, -.c0.caret-pos--right-top .c2::before, -.c0.caret-pos--right-bottom .c2::before { +.c0.caret-pos--right-top .c3::before, +.c0.caret-pos--right-bottom .c3::before { right: -16px; border-left-color: #d0d7de; } .c0.caret-pos--right .c2::after, -.c0.caret-pos--right-top .c2::after, -.c0.caret-pos--right-bottom .c2::after { +.c0.caret-pos--right-top .c3::after, +.c0.caret-pos--right-bottom .c3::after { right: -14px; border-left-color: #ffffff; } .c0.caret-pos--left .c2::before, -.c0.caret-pos--left-top .c2::before, -.c0.caret-pos--left-bottom .c2::before { +.c0.caret-pos--left-top .c3::before, +.c0.caret-pos--left-bottom .c3::before { left: -16px; border-right-color: #d0d7de; } .c0.caret-pos--left .c2::after, -.c0.caret-pos--left-top .c2::after, -.c0.caret-pos--left-bottom .c2::after { +.c0.caret-pos--left-top .c3::after, +.c0.caret-pos--left-bottom .c3::after { left: -14px; border-right-color: #ffffff; } .c0.caret-pos--right-top .c2::before, -.c0.caret-pos--left-top .c2::before, -.c0.caret-pos--right-top .c2::after, -.c0.caret-pos--left-top .c2::after { +.c0.caret-pos--left-top .c3::before, +.c0.caret-pos--right-top .c3::after, +.c0.caret-pos--left-top .c3::after { top: 24px; } .c0.caret-pos--right-bottom .c2::before, -.c0.caret-pos--left-bottom .c2::before, -.c0.caret-pos--right-bottom .c2::after, -.c0.caret-pos--left-bottom .c2::after { +.c0.caret-pos--left-bottom .c3::before, +.c0.caret-pos--right-bottom .c3::after, +.c0.caret-pos--left-bottom .c3::after { top: auto; } .c0.caret-pos--right-bottom .c2::before, -.c0.caret-pos--left-bottom .c2::before { +.c0.caret-pos--left-bottom .c3::before { bottom: 16px; } .c0.caret-pos--right-bottom .c2::after, -.c0.caret-pos--left-bottom .c2::after { +.c0.caret-pos--left-bottom .c3::after { bottom: calc(16px + 1px); } -.c0.caret-pos--bottom .c3::before, -.c0.caret-pos--bottom-right .c3::before, -.c0.caret-pos--bottom-left .c3::before, -.c0.caret-pos--bottom .c3::after, -.c0.caret-pos--bottom-right .c3::after, -.c0.caret-pos--bottom-left .c3::after { - top: auto; - border-bottom-color: transparent; +
    +
    + Hello! +
    +
    +`; + +exports[`Popover renders correctly for a caret position of bottom-left 1`] = ` +.c1 { + position: absolute; + z-index: 100; + display: block; } -.c0.caret-pos--bottom .c3::before, -.c0.caret-pos--bottom-right .c3::before, -.c0.caret-pos--bottom-left .c3::before { - bottom: -16px; +.c3 { + border: 1px solid #d0d7de; + border-radius: 6px; + position: relative; + width: 232px; + margin-right: auto; + margin-left: auto; + padding: 24px; + background-color: #ffffff; } -.c0.caret-pos--bottom .c3::after, -.c0.caret-pos--bottom-right .c3::after, -.c0.caret-pos--bottom-left .c3::after { +.c3::before, +.c3::after { + position: absolute; + left: 50%; + display: inline-block; + content: ''; +} + +.c3::before { + top: -16px; + margin-left: -9px; + border: 8px solid transparent; + border-bottom-color: #d0d7de; +} + +.c3::after { + top: -14px; + margin-left: -8px; + border: 7px solid transparent; + border-bottom-color: #ffffff; +} + +.c0.caret-pos--bottom .c2::before, +.c0.caret-pos--bottom-right .c3::before, +.c0.caret-pos--bottom-left .c3::before, +.c0.caret-pos--bottom .c3::after, +.c0.caret-pos--bottom-right .c3::after, +.c0.caret-pos--bottom-left .c3::after { + top: auto; + border-bottom-color: transparent; +} + +.c0.caret-pos--bottom .c2::before, +.c0.caret-pos--bottom-right .c3::before, +.c0.caret-pos--bottom-left .c3::before { + bottom: -16px; + border-top-color: #d0d7de; +} + +.c0.caret-pos--bottom .c2::after, +.c0.caret-pos--bottom-right .c3::after, +.c0.caret-pos--bottom-left .c3::after { bottom: -14px; + border-top-color: #ffffff; } -.c0.caret-pos--top-right .c3, +.c0.caret-pos--top-right .c2, .c0.caret-pos--bottom-right .c3 { right: -9px; margin-right: 0; } -.c0.caret-pos--top-right .c3::before, +.c0.caret-pos--top-right .c2::before, .c0.caret-pos--bottom-right .c3::before, .c0.caret-pos--top-right .c3::after, .c0.caret-pos--bottom-right .c3::after { @@ -645,23 +699,23 @@ exports[`Popover renders correctly for a caret position of bottom 1`] = ` margin-left: 0; } -.c0.caret-pos--top-right .c3::before, +.c0.caret-pos--top-right .c2::before, .c0.caret-pos--bottom-right .c3::before { right: 20px; } -.c0.caret-pos--top-right .c3::after, +.c0.caret-pos--top-right .c2::after, .c0.caret-pos--bottom-right .c3::after { right: 21px; } -.c0.caret-pos--top-left .c3, +.c0.caret-pos--top-left .c2, .c0.caret-pos--bottom-left .c3 { left: -9px; margin-left: 0; } -.c0.caret-pos--top-left .c3::before, +.c0.caret-pos--top-left .c2::before, .c0.caret-pos--bottom-left .c3::before, .c0.caret-pos--top-left .c3::after, .c0.caret-pos--bottom-left .c3::after { @@ -669,12 +723,12 @@ exports[`Popover renders correctly for a caret position of bottom 1`] = ` margin-left: 0; } -.c0.caret-pos--top-left .c3::after, +.c0.caret-pos--top-left .c2::after, .c0.caret-pos--bottom-left .c3::after { left: calc(24px + 1px); } -.c0.caret-pos--right .c3::before, +.c0.caret-pos--right .c2::before, .c0.caret-pos--right-top .c3::before, .c0.caret-pos--right-bottom .c3::before, .c0.caret-pos--left .c3::before, @@ -692,7 +746,7 @@ exports[`Popover renders correctly for a caret position of bottom 1`] = ` border-bottom-color: transparent; } -.c0.caret-pos--right .c3::before, +.c0.caret-pos--right .c2::before, .c0.caret-pos--right-top .c3::before, .c0.caret-pos--right-bottom .c3::before, .c0.caret-pos--left .c3::before, @@ -701,7 +755,7 @@ exports[`Popover renders correctly for a caret position of bottom 1`] = ` margin-top: calc((8px + 1px) * -1); } -.c0.caret-pos--right .c3::after, +.c0.caret-pos--right .c2::after, .c0.caret-pos--right-top .c3::after, .c0.caret-pos--right-bottom .c3::after, .c0.caret-pos--left .c3::after, @@ -710,74 +764,78 @@ exports[`Popover renders correctly for a caret position of bottom 1`] = ` margin-top: -8px; } -.c0.caret-pos--right .c3::before, +.c0.caret-pos--right .c2::before, .c0.caret-pos--right-top .c3::before, .c0.caret-pos--right-bottom .c3::before { right: -16px; + border-left-color: #d0d7de; } -.c0.caret-pos--right .c3::after, +.c0.caret-pos--right .c2::after, .c0.caret-pos--right-top .c3::after, .c0.caret-pos--right-bottom .c3::after { right: -14px; + border-left-color: #ffffff; } -.c0.caret-pos--left .c3::before, +.c0.caret-pos--left .c2::before, .c0.caret-pos--left-top .c3::before, .c0.caret-pos--left-bottom .c3::before { left: -16px; + border-right-color: #d0d7de; } -.c0.caret-pos--left .c3::after, +.c0.caret-pos--left .c2::after, .c0.caret-pos--left-top .c3::after, .c0.caret-pos--left-bottom .c3::after { left: -14px; + border-right-color: #ffffff; } -.c0.caret-pos--right-top .c3::before, +.c0.caret-pos--right-top .c2::before, .c0.caret-pos--left-top .c3::before, .c0.caret-pos--right-top .c3::after, .c0.caret-pos--left-top .c3::after { top: 24px; } -.c0.caret-pos--right-bottom .c3::before, +.c0.caret-pos--right-bottom .c2::before, .c0.caret-pos--left-bottom .c3::before, .c0.caret-pos--right-bottom .c3::after, .c0.caret-pos--left-bottom .c3::after { top: auto; } -.c0.caret-pos--right-bottom .c3::before, +.c0.caret-pos--right-bottom .c2::before, .c0.caret-pos--left-bottom .c3::before { bottom: 16px; } -.c0.caret-pos--right-bottom .c3::after, +.c0.caret-pos--right-bottom .c2::after, .c0.caret-pos--left-bottom .c3::after { bottom: calc(16px + 1px); }
    Hello!
    `; -exports[`Popover renders correctly for a caret position of bottom-left 1`] = ` +exports[`Popover renders correctly for a caret position of bottom-right 1`] = ` .c1 { position: absolute; z-index: 100; display: block; } -.c2 { +.c3 { border: 1px solid #d0d7de; border-radius: 6px; position: relative; @@ -788,22 +846,22 @@ exports[`Popover renders correctly for a caret position of bottom-left 1`] = ` background-color: #ffffff; } -.c2::before, -.c2::after { +.c3::before, +.c3::after { position: absolute; left: 50%; display: inline-block; content: ''; } -.c2::before { +.c3::before { top: -16px; margin-left: -9px; border: 8px solid transparent; border-bottom-color: #d0d7de; } -.c2::after { +.c3::after { top: -14px; margin-left: -8px; border: 7px solid transparent; @@ -811,84 +869,84 @@ exports[`Popover renders correctly for a caret position of bottom-left 1`] = ` } .c0.caret-pos--bottom .c2::before, -.c0.caret-pos--bottom-right .c2::before, -.c0.caret-pos--bottom-left .c2::before, -.c0.caret-pos--bottom .c2::after, -.c0.caret-pos--bottom-right .c2::after, -.c0.caret-pos--bottom-left .c2::after { +.c0.caret-pos--bottom-right .c3::before, +.c0.caret-pos--bottom-left .c3::before, +.c0.caret-pos--bottom .c3::after, +.c0.caret-pos--bottom-right .c3::after, +.c0.caret-pos--bottom-left .c3::after { top: auto; border-bottom-color: transparent; } .c0.caret-pos--bottom .c2::before, -.c0.caret-pos--bottom-right .c2::before, -.c0.caret-pos--bottom-left .c2::before { +.c0.caret-pos--bottom-right .c3::before, +.c0.caret-pos--bottom-left .c3::before { bottom: -16px; border-top-color: #d0d7de; } .c0.caret-pos--bottom .c2::after, -.c0.caret-pos--bottom-right .c2::after, -.c0.caret-pos--bottom-left .c2::after { +.c0.caret-pos--bottom-right .c3::after, +.c0.caret-pos--bottom-left .c3::after { bottom: -14px; border-top-color: #ffffff; } .c0.caret-pos--top-right .c2, -.c0.caret-pos--bottom-right .c2 { +.c0.caret-pos--bottom-right .c3 { right: -9px; margin-right: 0; } .c0.caret-pos--top-right .c2::before, -.c0.caret-pos--bottom-right .c2::before, -.c0.caret-pos--top-right .c2::after, -.c0.caret-pos--bottom-right .c2::after { +.c0.caret-pos--bottom-right .c3::before, +.c0.caret-pos--top-right .c3::after, +.c0.caret-pos--bottom-right .c3::after { left: auto; margin-left: 0; } .c0.caret-pos--top-right .c2::before, -.c0.caret-pos--bottom-right .c2::before { +.c0.caret-pos--bottom-right .c3::before { right: 20px; } .c0.caret-pos--top-right .c2::after, -.c0.caret-pos--bottom-right .c2::after { +.c0.caret-pos--bottom-right .c3::after { right: 21px; } .c0.caret-pos--top-left .c2, -.c0.caret-pos--bottom-left .c2 { +.c0.caret-pos--bottom-left .c3 { left: -9px; margin-left: 0; } .c0.caret-pos--top-left .c2::before, -.c0.caret-pos--bottom-left .c2::before, -.c0.caret-pos--top-left .c2::after, -.c0.caret-pos--bottom-left .c2::after { +.c0.caret-pos--bottom-left .c3::before, +.c0.caret-pos--top-left .c3::after, +.c0.caret-pos--bottom-left .c3::after { left: 24px; margin-left: 0; } .c0.caret-pos--top-left .c2::after, -.c0.caret-pos--bottom-left .c2::after { +.c0.caret-pos--bottom-left .c3::after { left: calc(24px + 1px); } .c0.caret-pos--right .c2::before, -.c0.caret-pos--right-top .c2::before, -.c0.caret-pos--right-bottom .c2::before, -.c0.caret-pos--left .c2::before, -.c0.caret-pos--left-top .c2::before, -.c0.caret-pos--left-bottom .c2::before, -.c0.caret-pos--right .c2::after, -.c0.caret-pos--right-top .c2::after, -.c0.caret-pos--right-bottom .c2::after, -.c0.caret-pos--left .c2::after, -.c0.caret-pos--left-top .c2::after, -.c0.caret-pos--left-bottom .c2::after { +.c0.caret-pos--right-top .c3::before, +.c0.caret-pos--right-bottom .c3::before, +.c0.caret-pos--left .c3::before, +.c0.caret-pos--left-top .c3::before, +.c0.caret-pos--left-bottom .c3::before, +.c0.caret-pos--right .c3::after, +.c0.caret-pos--right-top .c3::after, +.c0.caret-pos--right-bottom .c3::after, +.c0.caret-pos--left .c3::after, +.c0.caret-pos--left-top .c3::after, +.c0.caret-pos--left-bottom .c3::after { top: 50%; left: auto; margin-left: 0; @@ -896,76 +954,128 @@ exports[`Popover renders correctly for a caret position of bottom-left 1`] = ` } .c0.caret-pos--right .c2::before, -.c0.caret-pos--right-top .c2::before, -.c0.caret-pos--right-bottom .c2::before, -.c0.caret-pos--left .c2::before, -.c0.caret-pos--left-top .c2::before, -.c0.caret-pos--left-bottom .c2::before { +.c0.caret-pos--right-top .c3::before, +.c0.caret-pos--right-bottom .c3::before, +.c0.caret-pos--left .c3::before, +.c0.caret-pos--left-top .c3::before, +.c0.caret-pos--left-bottom .c3::before { margin-top: calc((8px + 1px) * -1); } .c0.caret-pos--right .c2::after, -.c0.caret-pos--right-top .c2::after, -.c0.caret-pos--right-bottom .c2::after, -.c0.caret-pos--left .c2::after, -.c0.caret-pos--left-top .c2::after, -.c0.caret-pos--left-bottom .c2::after { +.c0.caret-pos--right-top .c3::after, +.c0.caret-pos--right-bottom .c3::after, +.c0.caret-pos--left .c3::after, +.c0.caret-pos--left-top .c3::after, +.c0.caret-pos--left-bottom .c3::after { margin-top: -8px; } .c0.caret-pos--right .c2::before, -.c0.caret-pos--right-top .c2::before, -.c0.caret-pos--right-bottom .c2::before { +.c0.caret-pos--right-top .c3::before, +.c0.caret-pos--right-bottom .c3::before { right: -16px; border-left-color: #d0d7de; } .c0.caret-pos--right .c2::after, -.c0.caret-pos--right-top .c2::after, -.c0.caret-pos--right-bottom .c2::after { +.c0.caret-pos--right-top .c3::after, +.c0.caret-pos--right-bottom .c3::after { right: -14px; border-left-color: #ffffff; } .c0.caret-pos--left .c2::before, -.c0.caret-pos--left-top .c2::before, -.c0.caret-pos--left-bottom .c2::before { +.c0.caret-pos--left-top .c3::before, +.c0.caret-pos--left-bottom .c3::before { left: -16px; border-right-color: #d0d7de; } .c0.caret-pos--left .c2::after, -.c0.caret-pos--left-top .c2::after, -.c0.caret-pos--left-bottom .c2::after { +.c0.caret-pos--left-top .c3::after, +.c0.caret-pos--left-bottom .c3::after { left: -14px; border-right-color: #ffffff; } .c0.caret-pos--right-top .c2::before, -.c0.caret-pos--left-top .c2::before, -.c0.caret-pos--right-top .c2::after, -.c0.caret-pos--left-top .c2::after { +.c0.caret-pos--left-top .c3::before, +.c0.caret-pos--right-top .c3::after, +.c0.caret-pos--left-top .c3::after { top: 24px; } .c0.caret-pos--right-bottom .c2::before, -.c0.caret-pos--left-bottom .c2::before, -.c0.caret-pos--right-bottom .c2::after, -.c0.caret-pos--left-bottom .c2::after { +.c0.caret-pos--left-bottom .c3::before, +.c0.caret-pos--right-bottom .c3::after, +.c0.caret-pos--left-bottom .c3::after { top: auto; } .c0.caret-pos--right-bottom .c2::before, -.c0.caret-pos--left-bottom .c2::before { +.c0.caret-pos--left-bottom .c3::before { bottom: 16px; } .c0.caret-pos--right-bottom .c2::after, -.c0.caret-pos--left-bottom .c2::after { +.c0.caret-pos--left-bottom .c3::after { bottom: calc(16px + 1px); } -.c0.caret-pos--bottom .c3::before, +
    +
    + Hello! +
    +
    +`; + +exports[`Popover renders correctly for a caret position of left 1`] = ` +.c1 { + position: absolute; + z-index: 100; + display: block; +} + +.c3 { + border: 1px solid #d0d7de; + border-radius: 6px; + position: relative; + width: 232px; + margin-right: auto; + margin-left: auto; + padding: 24px; + background-color: #ffffff; +} + +.c3::before, +.c3::after { + position: absolute; + left: 50%; + display: inline-block; + content: ''; +} + +.c3::before { + top: -16px; + margin-left: -9px; + border: 8px solid transparent; + border-bottom-color: #d0d7de; +} + +.c3::after { + top: -14px; + margin-left: -8px; + border: 7px solid transparent; + border-bottom-color: #ffffff; +} + +.c0.caret-pos--bottom .c2::before, .c0.caret-pos--bottom-right .c3::before, .c0.caret-pos--bottom-left .c3::before, .c0.caret-pos--bottom .c3::after, @@ -975,25 +1085,27 @@ exports[`Popover renders correctly for a caret position of bottom-left 1`] = ` border-bottom-color: transparent; } -.c0.caret-pos--bottom .c3::before, +.c0.caret-pos--bottom .c2::before, .c0.caret-pos--bottom-right .c3::before, .c0.caret-pos--bottom-left .c3::before { bottom: -16px; + border-top-color: #d0d7de; } -.c0.caret-pos--bottom .c3::after, +.c0.caret-pos--bottom .c2::after, .c0.caret-pos--bottom-right .c3::after, .c0.caret-pos--bottom-left .c3::after { bottom: -14px; + border-top-color: #ffffff; } -.c0.caret-pos--top-right .c3, +.c0.caret-pos--top-right .c2, .c0.caret-pos--bottom-right .c3 { right: -9px; margin-right: 0; } -.c0.caret-pos--top-right .c3::before, +.c0.caret-pos--top-right .c2::before, .c0.caret-pos--bottom-right .c3::before, .c0.caret-pos--top-right .c3::after, .c0.caret-pos--bottom-right .c3::after { @@ -1001,23 +1113,23 @@ exports[`Popover renders correctly for a caret position of bottom-left 1`] = ` margin-left: 0; } -.c0.caret-pos--top-right .c3::before, +.c0.caret-pos--top-right .c2::before, .c0.caret-pos--bottom-right .c3::before { right: 20px; } -.c0.caret-pos--top-right .c3::after, +.c0.caret-pos--top-right .c2::after, .c0.caret-pos--bottom-right .c3::after { right: 21px; } -.c0.caret-pos--top-left .c3, +.c0.caret-pos--top-left .c2, .c0.caret-pos--bottom-left .c3 { left: -9px; margin-left: 0; } -.c0.caret-pos--top-left .c3::before, +.c0.caret-pos--top-left .c2::before, .c0.caret-pos--bottom-left .c3::before, .c0.caret-pos--top-left .c3::after, .c0.caret-pos--bottom-left .c3::after { @@ -1025,12 +1137,12 @@ exports[`Popover renders correctly for a caret position of bottom-left 1`] = ` margin-left: 0; } -.c0.caret-pos--top-left .c3::after, +.c0.caret-pos--top-left .c2::after, .c0.caret-pos--bottom-left .c3::after { left: calc(24px + 1px); } -.c0.caret-pos--right .c3::before, +.c0.caret-pos--right .c2::before, .c0.caret-pos--right-top .c3::before, .c0.caret-pos--right-bottom .c3::before, .c0.caret-pos--left .c3::before, @@ -1048,7 +1160,7 @@ exports[`Popover renders correctly for a caret position of bottom-left 1`] = ` border-bottom-color: transparent; } -.c0.caret-pos--right .c3::before, +.c0.caret-pos--right .c2::before, .c0.caret-pos--right-top .c3::before, .c0.caret-pos--right-bottom .c3::before, .c0.caret-pos--left .c3::before, @@ -1057,7 +1169,7 @@ exports[`Popover renders correctly for a caret position of bottom-left 1`] = ` margin-top: calc((8px + 1px) * -1); } -.c0.caret-pos--right .c3::after, +.c0.caret-pos--right .c2::after, .c0.caret-pos--right-top .c3::after, .c0.caret-pos--right-bottom .c3::after, .c0.caret-pos--left .c3::after, @@ -1066,74 +1178,78 @@ exports[`Popover renders correctly for a caret position of bottom-left 1`] = ` margin-top: -8px; } -.c0.caret-pos--right .c3::before, +.c0.caret-pos--right .c2::before, .c0.caret-pos--right-top .c3::before, .c0.caret-pos--right-bottom .c3::before { right: -16px; + border-left-color: #d0d7de; } -.c0.caret-pos--right .c3::after, +.c0.caret-pos--right .c2::after, .c0.caret-pos--right-top .c3::after, .c0.caret-pos--right-bottom .c3::after { right: -14px; + border-left-color: #ffffff; } -.c0.caret-pos--left .c3::before, +.c0.caret-pos--left .c2::before, .c0.caret-pos--left-top .c3::before, .c0.caret-pos--left-bottom .c3::before { left: -16px; + border-right-color: #d0d7de; } -.c0.caret-pos--left .c3::after, +.c0.caret-pos--left .c2::after, .c0.caret-pos--left-top .c3::after, .c0.caret-pos--left-bottom .c3::after { left: -14px; + border-right-color: #ffffff; } -.c0.caret-pos--right-top .c3::before, +.c0.caret-pos--right-top .c2::before, .c0.caret-pos--left-top .c3::before, .c0.caret-pos--right-top .c3::after, .c0.caret-pos--left-top .c3::after { top: 24px; } -.c0.caret-pos--right-bottom .c3::before, +.c0.caret-pos--right-bottom .c2::before, .c0.caret-pos--left-bottom .c3::before, .c0.caret-pos--right-bottom .c3::after, .c0.caret-pos--left-bottom .c3::after { top: auto; } -.c0.caret-pos--right-bottom .c3::before, +.c0.caret-pos--right-bottom .c2::before, .c0.caret-pos--left-bottom .c3::before { bottom: 16px; } -.c0.caret-pos--right-bottom .c3::after, +.c0.caret-pos--right-bottom .c2::after, .c0.caret-pos--left-bottom .c3::after { bottom: calc(16px + 1px); }
    Hello!
    `; -exports[`Popover renders correctly for a caret position of bottom-right 1`] = ` +exports[`Popover renders correctly for a caret position of left-bottom 1`] = ` .c1 { position: absolute; z-index: 100; display: block; } -.c2 { +.c3 { border: 1px solid #d0d7de; border-radius: 6px; position: relative; @@ -1144,22 +1260,22 @@ exports[`Popover renders correctly for a caret position of bottom-right 1`] = ` background-color: #ffffff; } -.c2::before, -.c2::after { +.c3::before, +.c3::after { position: absolute; left: 50%; display: inline-block; content: ''; } -.c2::before { +.c3::before { top: -16px; margin-left: -9px; border: 8px solid transparent; border-bottom-color: #d0d7de; } -.c2::after { +.c3::after { top: -14px; margin-left: -8px; border: 7px solid transparent; @@ -1167,1993 +1283,60 @@ exports[`Popover renders correctly for a caret position of bottom-right 1`] = ` } .c0.caret-pos--bottom .c2::before, -.c0.caret-pos--bottom-right .c2::before, -.c0.caret-pos--bottom-left .c2::before, -.c0.caret-pos--bottom .c2::after, -.c0.caret-pos--bottom-right .c2::after, -.c0.caret-pos--bottom-left .c2::after { +.c0.caret-pos--bottom-right .c3::before, +.c0.caret-pos--bottom-left .c3::before, +.c0.caret-pos--bottom .c3::after, +.c0.caret-pos--bottom-right .c3::after, +.c0.caret-pos--bottom-left .c3::after { top: auto; border-bottom-color: transparent; } .c0.caret-pos--bottom .c2::before, -.c0.caret-pos--bottom-right .c2::before, -.c0.caret-pos--bottom-left .c2::before { +.c0.caret-pos--bottom-right .c3::before, +.c0.caret-pos--bottom-left .c3::before { bottom: -16px; border-top-color: #d0d7de; } .c0.caret-pos--bottom .c2::after, -.c0.caret-pos--bottom-right .c2::after, -.c0.caret-pos--bottom-left .c2::after { +.c0.caret-pos--bottom-right .c3::after, +.c0.caret-pos--bottom-left .c3::after { bottom: -14px; border-top-color: #ffffff; } .c0.caret-pos--top-right .c2, -.c0.caret-pos--bottom-right .c2 { +.c0.caret-pos--bottom-right .c3 { right: -9px; margin-right: 0; } .c0.caret-pos--top-right .c2::before, -.c0.caret-pos--bottom-right .c2::before, -.c0.caret-pos--top-right .c2::after, -.c0.caret-pos--bottom-right .c2::after { +.c0.caret-pos--bottom-right .c3::before, +.c0.caret-pos--top-right .c3::after, +.c0.caret-pos--bottom-right .c3::after { left: auto; margin-left: 0; } .c0.caret-pos--top-right .c2::before, -.c0.caret-pos--bottom-right .c2::before { +.c0.caret-pos--bottom-right .c3::before { right: 20px; } .c0.caret-pos--top-right .c2::after, -.c0.caret-pos--bottom-right .c2::after { +.c0.caret-pos--bottom-right .c3::after { right: 21px; } .c0.caret-pos--top-left .c2, -.c0.caret-pos--bottom-left .c2 { +.c0.caret-pos--bottom-left .c3 { left: -9px; margin-left: 0; } .c0.caret-pos--top-left .c2::before, -.c0.caret-pos--bottom-left .c2::before, -.c0.caret-pos--top-left .c2::after, -.c0.caret-pos--bottom-left .c2::after { - left: 24px; - margin-left: 0; -} - -.c0.caret-pos--top-left .c2::after, -.c0.caret-pos--bottom-left .c2::after { - left: calc(24px + 1px); -} - -.c0.caret-pos--right .c2::before, -.c0.caret-pos--right-top .c2::before, -.c0.caret-pos--right-bottom .c2::before, -.c0.caret-pos--left .c2::before, -.c0.caret-pos--left-top .c2::before, -.c0.caret-pos--left-bottom .c2::before, -.c0.caret-pos--right .c2::after, -.c0.caret-pos--right-top .c2::after, -.c0.caret-pos--right-bottom .c2::after, -.c0.caret-pos--left .c2::after, -.c0.caret-pos--left-top .c2::after, -.c0.caret-pos--left-bottom .c2::after { - top: 50%; - left: auto; - margin-left: 0; - border-bottom-color: transparent; -} - -.c0.caret-pos--right .c2::before, -.c0.caret-pos--right-top .c2::before, -.c0.caret-pos--right-bottom .c2::before, -.c0.caret-pos--left .c2::before, -.c0.caret-pos--left-top .c2::before, -.c0.caret-pos--left-bottom .c2::before { - margin-top: calc((8px + 1px) * -1); -} - -.c0.caret-pos--right .c2::after, -.c0.caret-pos--right-top .c2::after, -.c0.caret-pos--right-bottom .c2::after, -.c0.caret-pos--left .c2::after, -.c0.caret-pos--left-top .c2::after, -.c0.caret-pos--left-bottom .c2::after { - margin-top: -8px; -} - -.c0.caret-pos--right .c2::before, -.c0.caret-pos--right-top .c2::before, -.c0.caret-pos--right-bottom .c2::before { - right: -16px; - border-left-color: #d0d7de; -} - -.c0.caret-pos--right .c2::after, -.c0.caret-pos--right-top .c2::after, -.c0.caret-pos--right-bottom .c2::after { - right: -14px; - border-left-color: #ffffff; -} - -.c0.caret-pos--left .c2::before, -.c0.caret-pos--left-top .c2::before, -.c0.caret-pos--left-bottom .c2::before { - left: -16px; - border-right-color: #d0d7de; -} - -.c0.caret-pos--left .c2::after, -.c0.caret-pos--left-top .c2::after, -.c0.caret-pos--left-bottom .c2::after { - left: -14px; - border-right-color: #ffffff; -} - -.c0.caret-pos--right-top .c2::before, -.c0.caret-pos--left-top .c2::before, -.c0.caret-pos--right-top .c2::after, -.c0.caret-pos--left-top .c2::after { - top: 24px; -} - -.c0.caret-pos--right-bottom .c2::before, -.c0.caret-pos--left-bottom .c2::before, -.c0.caret-pos--right-bottom .c2::after, -.c0.caret-pos--left-bottom .c2::after { - top: auto; -} - -.c0.caret-pos--right-bottom .c2::before, -.c0.caret-pos--left-bottom .c2::before { - bottom: 16px; -} - -.c0.caret-pos--right-bottom .c2::after, -.c0.caret-pos--left-bottom .c2::after { - bottom: calc(16px + 1px); -} - -.c0.caret-pos--bottom .c3::before, -.c0.caret-pos--bottom-right .c3::before, -.c0.caret-pos--bottom-left .c3::before, -.c0.caret-pos--bottom .c3::after, -.c0.caret-pos--bottom-right .c3::after, -.c0.caret-pos--bottom-left .c3::after { - top: auto; - border-bottom-color: transparent; -} - -.c0.caret-pos--bottom .c3::before, -.c0.caret-pos--bottom-right .c3::before, -.c0.caret-pos--bottom-left .c3::before { - bottom: -16px; -} - -.c0.caret-pos--bottom .c3::after, -.c0.caret-pos--bottom-right .c3::after, -.c0.caret-pos--bottom-left .c3::after { - bottom: -14px; -} - -.c0.caret-pos--top-right .c3, -.c0.caret-pos--bottom-right .c3 { - right: -9px; - margin-right: 0; -} - -.c0.caret-pos--top-right .c3::before, -.c0.caret-pos--bottom-right .c3::before, -.c0.caret-pos--top-right .c3::after, -.c0.caret-pos--bottom-right .c3::after { - left: auto; - margin-left: 0; -} - -.c0.caret-pos--top-right .c3::before, -.c0.caret-pos--bottom-right .c3::before { - right: 20px; -} - -.c0.caret-pos--top-right .c3::after, -.c0.caret-pos--bottom-right .c3::after { - right: 21px; -} - -.c0.caret-pos--top-left .c3, -.c0.caret-pos--bottom-left .c3 { - left: -9px; - margin-left: 0; -} - -.c0.caret-pos--top-left .c3::before, -.c0.caret-pos--bottom-left .c3::before, -.c0.caret-pos--top-left .c3::after, -.c0.caret-pos--bottom-left .c3::after { - left: 24px; - margin-left: 0; -} - -.c0.caret-pos--top-left .c3::after, -.c0.caret-pos--bottom-left .c3::after { - left: calc(24px + 1px); -} - -.c0.caret-pos--right .c3::before, -.c0.caret-pos--right-top .c3::before, -.c0.caret-pos--right-bottom .c3::before, -.c0.caret-pos--left .c3::before, -.c0.caret-pos--left-top .c3::before, -.c0.caret-pos--left-bottom .c3::before, -.c0.caret-pos--right .c3::after, -.c0.caret-pos--right-top .c3::after, -.c0.caret-pos--right-bottom .c3::after, -.c0.caret-pos--left .c3::after, -.c0.caret-pos--left-top .c3::after, -.c0.caret-pos--left-bottom .c3::after { - top: 50%; - left: auto; - margin-left: 0; - border-bottom-color: transparent; -} - -.c0.caret-pos--right .c3::before, -.c0.caret-pos--right-top .c3::before, -.c0.caret-pos--right-bottom .c3::before, -.c0.caret-pos--left .c3::before, -.c0.caret-pos--left-top .c3::before, -.c0.caret-pos--left-bottom .c3::before { - margin-top: calc((8px + 1px) * -1); -} - -.c0.caret-pos--right .c3::after, -.c0.caret-pos--right-top .c3::after, -.c0.caret-pos--right-bottom .c3::after, -.c0.caret-pos--left .c3::after, -.c0.caret-pos--left-top .c3::after, -.c0.caret-pos--left-bottom .c3::after { - margin-top: -8px; -} - -.c0.caret-pos--right .c3::before, -.c0.caret-pos--right-top .c3::before, -.c0.caret-pos--right-bottom .c3::before { - right: -16px; -} - -.c0.caret-pos--right .c3::after, -.c0.caret-pos--right-top .c3::after, -.c0.caret-pos--right-bottom .c3::after { - right: -14px; -} - -.c0.caret-pos--left .c3::before, -.c0.caret-pos--left-top .c3::before, -.c0.caret-pos--left-bottom .c3::before { - left: -16px; -} - -.c0.caret-pos--left .c3::after, -.c0.caret-pos--left-top .c3::after, -.c0.caret-pos--left-bottom .c3::after { - left: -14px; -} - -.c0.caret-pos--right-top .c3::before, -.c0.caret-pos--left-top .c3::before, -.c0.caret-pos--right-top .c3::after, -.c0.caret-pos--left-top .c3::after { - top: 24px; -} - -.c0.caret-pos--right-bottom .c3::before, -.c0.caret-pos--left-bottom .c3::before, -.c0.caret-pos--right-bottom .c3::after, -.c0.caret-pos--left-bottom .c3::after { - top: auto; -} - -.c0.caret-pos--right-bottom .c3::before, -.c0.caret-pos--left-bottom .c3::before { - bottom: 16px; -} - -.c0.caret-pos--right-bottom .c3::after, -.c0.caret-pos--left-bottom .c3::after { - bottom: calc(16px + 1px); -} - -
    -
    - Hello! -
    -
    -`; - -exports[`Popover renders correctly for a caret position of left 1`] = ` -.c1 { - position: absolute; - z-index: 100; - display: block; -} - -.c2 { - border: 1px solid #d0d7de; - border-radius: 6px; - position: relative; - width: 232px; - margin-right: auto; - margin-left: auto; - padding: 24px; - background-color: #ffffff; -} - -.c2::before, -.c2::after { - position: absolute; - left: 50%; - display: inline-block; - content: ''; -} - -.c2::before { - top: -16px; - margin-left: -9px; - border: 8px solid transparent; - border-bottom-color: #d0d7de; -} - -.c2::after { - top: -14px; - margin-left: -8px; - border: 7px solid transparent; - border-bottom-color: #ffffff; -} - -.c0.caret-pos--bottom .c2::before, -.c0.caret-pos--bottom-right .c2::before, -.c0.caret-pos--bottom-left .c2::before, -.c0.caret-pos--bottom .c2::after, -.c0.caret-pos--bottom-right .c2::after, -.c0.caret-pos--bottom-left .c2::after { - top: auto; - border-bottom-color: transparent; -} - -.c0.caret-pos--bottom .c2::before, -.c0.caret-pos--bottom-right .c2::before, -.c0.caret-pos--bottom-left .c2::before { - bottom: -16px; - border-top-color: #d0d7de; -} - -.c0.caret-pos--bottom .c2::after, -.c0.caret-pos--bottom-right .c2::after, -.c0.caret-pos--bottom-left .c2::after { - bottom: -14px; - border-top-color: #ffffff; -} - -.c0.caret-pos--top-right .c2, -.c0.caret-pos--bottom-right .c2 { - right: -9px; - margin-right: 0; -} - -.c0.caret-pos--top-right .c2::before, -.c0.caret-pos--bottom-right .c2::before, -.c0.caret-pos--top-right .c2::after, -.c0.caret-pos--bottom-right .c2::after { - left: auto; - margin-left: 0; -} - -.c0.caret-pos--top-right .c2::before, -.c0.caret-pos--bottom-right .c2::before { - right: 20px; -} - -.c0.caret-pos--top-right .c2::after, -.c0.caret-pos--bottom-right .c2::after { - right: 21px; -} - -.c0.caret-pos--top-left .c2, -.c0.caret-pos--bottom-left .c2 { - left: -9px; - margin-left: 0; -} - -.c0.caret-pos--top-left .c2::before, -.c0.caret-pos--bottom-left .c2::before, -.c0.caret-pos--top-left .c2::after, -.c0.caret-pos--bottom-left .c2::after { - left: 24px; - margin-left: 0; -} - -.c0.caret-pos--top-left .c2::after, -.c0.caret-pos--bottom-left .c2::after { - left: calc(24px + 1px); -} - -.c0.caret-pos--right .c2::before, -.c0.caret-pos--right-top .c2::before, -.c0.caret-pos--right-bottom .c2::before, -.c0.caret-pos--left .c2::before, -.c0.caret-pos--left-top .c2::before, -.c0.caret-pos--left-bottom .c2::before, -.c0.caret-pos--right .c2::after, -.c0.caret-pos--right-top .c2::after, -.c0.caret-pos--right-bottom .c2::after, -.c0.caret-pos--left .c2::after, -.c0.caret-pos--left-top .c2::after, -.c0.caret-pos--left-bottom .c2::after { - top: 50%; - left: auto; - margin-left: 0; - border-bottom-color: transparent; -} - -.c0.caret-pos--right .c2::before, -.c0.caret-pos--right-top .c2::before, -.c0.caret-pos--right-bottom .c2::before, -.c0.caret-pos--left .c2::before, -.c0.caret-pos--left-top .c2::before, -.c0.caret-pos--left-bottom .c2::before { - margin-top: calc((8px + 1px) * -1); -} - -.c0.caret-pos--right .c2::after, -.c0.caret-pos--right-top .c2::after, -.c0.caret-pos--right-bottom .c2::after, -.c0.caret-pos--left .c2::after, -.c0.caret-pos--left-top .c2::after, -.c0.caret-pos--left-bottom .c2::after { - margin-top: -8px; -} - -.c0.caret-pos--right .c2::before, -.c0.caret-pos--right-top .c2::before, -.c0.caret-pos--right-bottom .c2::before { - right: -16px; - border-left-color: #d0d7de; -} - -.c0.caret-pos--right .c2::after, -.c0.caret-pos--right-top .c2::after, -.c0.caret-pos--right-bottom .c2::after { - right: -14px; - border-left-color: #ffffff; -} - -.c0.caret-pos--left .c2::before, -.c0.caret-pos--left-top .c2::before, -.c0.caret-pos--left-bottom .c2::before { - left: -16px; - border-right-color: #d0d7de; -} - -.c0.caret-pos--left .c2::after, -.c0.caret-pos--left-top .c2::after, -.c0.caret-pos--left-bottom .c2::after { - left: -14px; - border-right-color: #ffffff; -} - -.c0.caret-pos--right-top .c2::before, -.c0.caret-pos--left-top .c2::before, -.c0.caret-pos--right-top .c2::after, -.c0.caret-pos--left-top .c2::after { - top: 24px; -} - -.c0.caret-pos--right-bottom .c2::before, -.c0.caret-pos--left-bottom .c2::before, -.c0.caret-pos--right-bottom .c2::after, -.c0.caret-pos--left-bottom .c2::after { - top: auto; -} - -.c0.caret-pos--right-bottom .c2::before, -.c0.caret-pos--left-bottom .c2::before { - bottom: 16px; -} - -.c0.caret-pos--right-bottom .c2::after, -.c0.caret-pos--left-bottom .c2::after { - bottom: calc(16px + 1px); -} - -.c0.caret-pos--bottom .c3::before, -.c0.caret-pos--bottom-right .c3::before, -.c0.caret-pos--bottom-left .c3::before, -.c0.caret-pos--bottom .c3::after, -.c0.caret-pos--bottom-right .c3::after, -.c0.caret-pos--bottom-left .c3::after { - top: auto; - border-bottom-color: transparent; -} - -.c0.caret-pos--bottom .c3::before, -.c0.caret-pos--bottom-right .c3::before, -.c0.caret-pos--bottom-left .c3::before { - bottom: -16px; -} - -.c0.caret-pos--bottom .c3::after, -.c0.caret-pos--bottom-right .c3::after, -.c0.caret-pos--bottom-left .c3::after { - bottom: -14px; -} - -.c0.caret-pos--top-right .c3, -.c0.caret-pos--bottom-right .c3 { - right: -9px; - margin-right: 0; -} - -.c0.caret-pos--top-right .c3::before, -.c0.caret-pos--bottom-right .c3::before, -.c0.caret-pos--top-right .c3::after, -.c0.caret-pos--bottom-right .c3::after { - left: auto; - margin-left: 0; -} - -.c0.caret-pos--top-right .c3::before, -.c0.caret-pos--bottom-right .c3::before { - right: 20px; -} - -.c0.caret-pos--top-right .c3::after, -.c0.caret-pos--bottom-right .c3::after { - right: 21px; -} - -.c0.caret-pos--top-left .c3, -.c0.caret-pos--bottom-left .c3 { - left: -9px; - margin-left: 0; -} - -.c0.caret-pos--top-left .c3::before, -.c0.caret-pos--bottom-left .c3::before, -.c0.caret-pos--top-left .c3::after, -.c0.caret-pos--bottom-left .c3::after { - left: 24px; - margin-left: 0; -} - -.c0.caret-pos--top-left .c3::after, -.c0.caret-pos--bottom-left .c3::after { - left: calc(24px + 1px); -} - -.c0.caret-pos--right .c3::before, -.c0.caret-pos--right-top .c3::before, -.c0.caret-pos--right-bottom .c3::before, -.c0.caret-pos--left .c3::before, -.c0.caret-pos--left-top .c3::before, -.c0.caret-pos--left-bottom .c3::before, -.c0.caret-pos--right .c3::after, -.c0.caret-pos--right-top .c3::after, -.c0.caret-pos--right-bottom .c3::after, -.c0.caret-pos--left .c3::after, -.c0.caret-pos--left-top .c3::after, -.c0.caret-pos--left-bottom .c3::after { - top: 50%; - left: auto; - margin-left: 0; - border-bottom-color: transparent; -} - -.c0.caret-pos--right .c3::before, -.c0.caret-pos--right-top .c3::before, -.c0.caret-pos--right-bottom .c3::before, -.c0.caret-pos--left .c3::before, -.c0.caret-pos--left-top .c3::before, -.c0.caret-pos--left-bottom .c3::before { - margin-top: calc((8px + 1px) * -1); -} - -.c0.caret-pos--right .c3::after, -.c0.caret-pos--right-top .c3::after, -.c0.caret-pos--right-bottom .c3::after, -.c0.caret-pos--left .c3::after, -.c0.caret-pos--left-top .c3::after, -.c0.caret-pos--left-bottom .c3::after { - margin-top: -8px; -} - -.c0.caret-pos--right .c3::before, -.c0.caret-pos--right-top .c3::before, -.c0.caret-pos--right-bottom .c3::before { - right: -16px; -} - -.c0.caret-pos--right .c3::after, -.c0.caret-pos--right-top .c3::after, -.c0.caret-pos--right-bottom .c3::after { - right: -14px; -} - -.c0.caret-pos--left .c3::before, -.c0.caret-pos--left-top .c3::before, -.c0.caret-pos--left-bottom .c3::before { - left: -16px; -} - -.c0.caret-pos--left .c3::after, -.c0.caret-pos--left-top .c3::after, -.c0.caret-pos--left-bottom .c3::after { - left: -14px; -} - -.c0.caret-pos--right-top .c3::before, -.c0.caret-pos--left-top .c3::before, -.c0.caret-pos--right-top .c3::after, -.c0.caret-pos--left-top .c3::after { - top: 24px; -} - -.c0.caret-pos--right-bottom .c3::before, -.c0.caret-pos--left-bottom .c3::before, -.c0.caret-pos--right-bottom .c3::after, -.c0.caret-pos--left-bottom .c3::after { - top: auto; -} - -.c0.caret-pos--right-bottom .c3::before, -.c0.caret-pos--left-bottom .c3::before { - bottom: 16px; -} - -.c0.caret-pos--right-bottom .c3::after, -.c0.caret-pos--left-bottom .c3::after { - bottom: calc(16px + 1px); -} - -
    -
    - Hello! -
    -
    -`; - -exports[`Popover renders correctly for a caret position of left-bottom 1`] = ` -.c1 { - position: absolute; - z-index: 100; - display: block; -} - -.c2 { - border: 1px solid #d0d7de; - border-radius: 6px; - position: relative; - width: 232px; - margin-right: auto; - margin-left: auto; - padding: 24px; - background-color: #ffffff; -} - -.c2::before, -.c2::after { - position: absolute; - left: 50%; - display: inline-block; - content: ''; -} - -.c2::before { - top: -16px; - margin-left: -9px; - border: 8px solid transparent; - border-bottom-color: #d0d7de; -} - -.c2::after { - top: -14px; - margin-left: -8px; - border: 7px solid transparent; - border-bottom-color: #ffffff; -} - -.c0.caret-pos--bottom .c2::before, -.c0.caret-pos--bottom-right .c2::before, -.c0.caret-pos--bottom-left .c2::before, -.c0.caret-pos--bottom .c2::after, -.c0.caret-pos--bottom-right .c2::after, -.c0.caret-pos--bottom-left .c2::after { - top: auto; - border-bottom-color: transparent; -} - -.c0.caret-pos--bottom .c2::before, -.c0.caret-pos--bottom-right .c2::before, -.c0.caret-pos--bottom-left .c2::before { - bottom: -16px; - border-top-color: #d0d7de; -} - -.c0.caret-pos--bottom .c2::after, -.c0.caret-pos--bottom-right .c2::after, -.c0.caret-pos--bottom-left .c2::after { - bottom: -14px; - border-top-color: #ffffff; -} - -.c0.caret-pos--top-right .c2, -.c0.caret-pos--bottom-right .c2 { - right: -9px; - margin-right: 0; -} - -.c0.caret-pos--top-right .c2::before, -.c0.caret-pos--bottom-right .c2::before, -.c0.caret-pos--top-right .c2::after, -.c0.caret-pos--bottom-right .c2::after { - left: auto; - margin-left: 0; -} - -.c0.caret-pos--top-right .c2::before, -.c0.caret-pos--bottom-right .c2::before { - right: 20px; -} - -.c0.caret-pos--top-right .c2::after, -.c0.caret-pos--bottom-right .c2::after { - right: 21px; -} - -.c0.caret-pos--top-left .c2, -.c0.caret-pos--bottom-left .c2 { - left: -9px; - margin-left: 0; -} - -.c0.caret-pos--top-left .c2::before, -.c0.caret-pos--bottom-left .c2::before, -.c0.caret-pos--top-left .c2::after, -.c0.caret-pos--bottom-left .c2::after { - left: 24px; - margin-left: 0; -} - -.c0.caret-pos--top-left .c2::after, -.c0.caret-pos--bottom-left .c2::after { - left: calc(24px + 1px); -} - -.c0.caret-pos--right .c2::before, -.c0.caret-pos--right-top .c2::before, -.c0.caret-pos--right-bottom .c2::before, -.c0.caret-pos--left .c2::before, -.c0.caret-pos--left-top .c2::before, -.c0.caret-pos--left-bottom .c2::before, -.c0.caret-pos--right .c2::after, -.c0.caret-pos--right-top .c2::after, -.c0.caret-pos--right-bottom .c2::after, -.c0.caret-pos--left .c2::after, -.c0.caret-pos--left-top .c2::after, -.c0.caret-pos--left-bottom .c2::after { - top: 50%; - left: auto; - margin-left: 0; - border-bottom-color: transparent; -} - -.c0.caret-pos--right .c2::before, -.c0.caret-pos--right-top .c2::before, -.c0.caret-pos--right-bottom .c2::before, -.c0.caret-pos--left .c2::before, -.c0.caret-pos--left-top .c2::before, -.c0.caret-pos--left-bottom .c2::before { - margin-top: calc((8px + 1px) * -1); -} - -.c0.caret-pos--right .c2::after, -.c0.caret-pos--right-top .c2::after, -.c0.caret-pos--right-bottom .c2::after, -.c0.caret-pos--left .c2::after, -.c0.caret-pos--left-top .c2::after, -.c0.caret-pos--left-bottom .c2::after { - margin-top: -8px; -} - -.c0.caret-pos--right .c2::before, -.c0.caret-pos--right-top .c2::before, -.c0.caret-pos--right-bottom .c2::before { - right: -16px; - border-left-color: #d0d7de; -} - -.c0.caret-pos--right .c2::after, -.c0.caret-pos--right-top .c2::after, -.c0.caret-pos--right-bottom .c2::after { - right: -14px; - border-left-color: #ffffff; -} - -.c0.caret-pos--left .c2::before, -.c0.caret-pos--left-top .c2::before, -.c0.caret-pos--left-bottom .c2::before { - left: -16px; - border-right-color: #d0d7de; -} - -.c0.caret-pos--left .c2::after, -.c0.caret-pos--left-top .c2::after, -.c0.caret-pos--left-bottom .c2::after { - left: -14px; - border-right-color: #ffffff; -} - -.c0.caret-pos--right-top .c2::before, -.c0.caret-pos--left-top .c2::before, -.c0.caret-pos--right-top .c2::after, -.c0.caret-pos--left-top .c2::after { - top: 24px; -} - -.c0.caret-pos--right-bottom .c2::before, -.c0.caret-pos--left-bottom .c2::before, -.c0.caret-pos--right-bottom .c2::after, -.c0.caret-pos--left-bottom .c2::after { - top: auto; -} - -.c0.caret-pos--right-bottom .c2::before, -.c0.caret-pos--left-bottom .c2::before { - bottom: 16px; -} - -.c0.caret-pos--right-bottom .c2::after, -.c0.caret-pos--left-bottom .c2::after { - bottom: calc(16px + 1px); -} - -.c0.caret-pos--bottom .c3::before, -.c0.caret-pos--bottom-right .c3::before, -.c0.caret-pos--bottom-left .c3::before, -.c0.caret-pos--bottom .c3::after, -.c0.caret-pos--bottom-right .c3::after, -.c0.caret-pos--bottom-left .c3::after { - top: auto; - border-bottom-color: transparent; -} - -.c0.caret-pos--bottom .c3::before, -.c0.caret-pos--bottom-right .c3::before, -.c0.caret-pos--bottom-left .c3::before { - bottom: -16px; -} - -.c0.caret-pos--bottom .c3::after, -.c0.caret-pos--bottom-right .c3::after, -.c0.caret-pos--bottom-left .c3::after { - bottom: -14px; -} - -.c0.caret-pos--top-right .c3, -.c0.caret-pos--bottom-right .c3 { - right: -9px; - margin-right: 0; -} - -.c0.caret-pos--top-right .c3::before, -.c0.caret-pos--bottom-right .c3::before, -.c0.caret-pos--top-right .c3::after, -.c0.caret-pos--bottom-right .c3::after { - left: auto; - margin-left: 0; -} - -.c0.caret-pos--top-right .c3::before, -.c0.caret-pos--bottom-right .c3::before { - right: 20px; -} - -.c0.caret-pos--top-right .c3::after, -.c0.caret-pos--bottom-right .c3::after { - right: 21px; -} - -.c0.caret-pos--top-left .c3, -.c0.caret-pos--bottom-left .c3 { - left: -9px; - margin-left: 0; -} - -.c0.caret-pos--top-left .c3::before, -.c0.caret-pos--bottom-left .c3::before, -.c0.caret-pos--top-left .c3::after, -.c0.caret-pos--bottom-left .c3::after { - left: 24px; - margin-left: 0; -} - -.c0.caret-pos--top-left .c3::after, -.c0.caret-pos--bottom-left .c3::after { - left: calc(24px + 1px); -} - -.c0.caret-pos--right .c3::before, -.c0.caret-pos--right-top .c3::before, -.c0.caret-pos--right-bottom .c3::before, -.c0.caret-pos--left .c3::before, -.c0.caret-pos--left-top .c3::before, -.c0.caret-pos--left-bottom .c3::before, -.c0.caret-pos--right .c3::after, -.c0.caret-pos--right-top .c3::after, -.c0.caret-pos--right-bottom .c3::after, -.c0.caret-pos--left .c3::after, -.c0.caret-pos--left-top .c3::after, -.c0.caret-pos--left-bottom .c3::after { - top: 50%; - left: auto; - margin-left: 0; - border-bottom-color: transparent; -} - -.c0.caret-pos--right .c3::before, -.c0.caret-pos--right-top .c3::before, -.c0.caret-pos--right-bottom .c3::before, -.c0.caret-pos--left .c3::before, -.c0.caret-pos--left-top .c3::before, -.c0.caret-pos--left-bottom .c3::before { - margin-top: calc((8px + 1px) * -1); -} - -.c0.caret-pos--right .c3::after, -.c0.caret-pos--right-top .c3::after, -.c0.caret-pos--right-bottom .c3::after, -.c0.caret-pos--left .c3::after, -.c0.caret-pos--left-top .c3::after, -.c0.caret-pos--left-bottom .c3::after { - margin-top: -8px; -} - -.c0.caret-pos--right .c3::before, -.c0.caret-pos--right-top .c3::before, -.c0.caret-pos--right-bottom .c3::before { - right: -16px; -} - -.c0.caret-pos--right .c3::after, -.c0.caret-pos--right-top .c3::after, -.c0.caret-pos--right-bottom .c3::after { - right: -14px; -} - -.c0.caret-pos--left .c3::before, -.c0.caret-pos--left-top .c3::before, -.c0.caret-pos--left-bottom .c3::before { - left: -16px; -} - -.c0.caret-pos--left .c3::after, -.c0.caret-pos--left-top .c3::after, -.c0.caret-pos--left-bottom .c3::after { - left: -14px; -} - -.c0.caret-pos--right-top .c3::before, -.c0.caret-pos--left-top .c3::before, -.c0.caret-pos--right-top .c3::after, -.c0.caret-pos--left-top .c3::after { - top: 24px; -} - -.c0.caret-pos--right-bottom .c3::before, -.c0.caret-pos--left-bottom .c3::before, -.c0.caret-pos--right-bottom .c3::after, -.c0.caret-pos--left-bottom .c3::after { - top: auto; -} - -.c0.caret-pos--right-bottom .c3::before, -.c0.caret-pos--left-bottom .c3::before { - bottom: 16px; -} - -.c0.caret-pos--right-bottom .c3::after, -.c0.caret-pos--left-bottom .c3::after { - bottom: calc(16px + 1px); -} - -
    -
    - Hello! -
    -
    -`; - -exports[`Popover renders correctly for a caret position of left-top 1`] = ` -.c1 { - position: absolute; - z-index: 100; - display: block; -} - -.c2 { - border: 1px solid #d0d7de; - border-radius: 6px; - position: relative; - width: 232px; - margin-right: auto; - margin-left: auto; - padding: 24px; - background-color: #ffffff; -} - -.c2::before, -.c2::after { - position: absolute; - left: 50%; - display: inline-block; - content: ''; -} - -.c2::before { - top: -16px; - margin-left: -9px; - border: 8px solid transparent; - border-bottom-color: #d0d7de; -} - -.c2::after { - top: -14px; - margin-left: -8px; - border: 7px solid transparent; - border-bottom-color: #ffffff; -} - -.c0.caret-pos--bottom .c2::before, -.c0.caret-pos--bottom-right .c2::before, -.c0.caret-pos--bottom-left .c2::before, -.c0.caret-pos--bottom .c2::after, -.c0.caret-pos--bottom-right .c2::after, -.c0.caret-pos--bottom-left .c2::after { - top: auto; - border-bottom-color: transparent; -} - -.c0.caret-pos--bottom .c2::before, -.c0.caret-pos--bottom-right .c2::before, -.c0.caret-pos--bottom-left .c2::before { - bottom: -16px; - border-top-color: #d0d7de; -} - -.c0.caret-pos--bottom .c2::after, -.c0.caret-pos--bottom-right .c2::after, -.c0.caret-pos--bottom-left .c2::after { - bottom: -14px; - border-top-color: #ffffff; -} - -.c0.caret-pos--top-right .c2, -.c0.caret-pos--bottom-right .c2 { - right: -9px; - margin-right: 0; -} - -.c0.caret-pos--top-right .c2::before, -.c0.caret-pos--bottom-right .c2::before, -.c0.caret-pos--top-right .c2::after, -.c0.caret-pos--bottom-right .c2::after { - left: auto; - margin-left: 0; -} - -.c0.caret-pos--top-right .c2::before, -.c0.caret-pos--bottom-right .c2::before { - right: 20px; -} - -.c0.caret-pos--top-right .c2::after, -.c0.caret-pos--bottom-right .c2::after { - right: 21px; -} - -.c0.caret-pos--top-left .c2, -.c0.caret-pos--bottom-left .c2 { - left: -9px; - margin-left: 0; -} - -.c0.caret-pos--top-left .c2::before, -.c0.caret-pos--bottom-left .c2::before, -.c0.caret-pos--top-left .c2::after, -.c0.caret-pos--bottom-left .c2::after { - left: 24px; - margin-left: 0; -} - -.c0.caret-pos--top-left .c2::after, -.c0.caret-pos--bottom-left .c2::after { - left: calc(24px + 1px); -} - -.c0.caret-pos--right .c2::before, -.c0.caret-pos--right-top .c2::before, -.c0.caret-pos--right-bottom .c2::before, -.c0.caret-pos--left .c2::before, -.c0.caret-pos--left-top .c2::before, -.c0.caret-pos--left-bottom .c2::before, -.c0.caret-pos--right .c2::after, -.c0.caret-pos--right-top .c2::after, -.c0.caret-pos--right-bottom .c2::after, -.c0.caret-pos--left .c2::after, -.c0.caret-pos--left-top .c2::after, -.c0.caret-pos--left-bottom .c2::after { - top: 50%; - left: auto; - margin-left: 0; - border-bottom-color: transparent; -} - -.c0.caret-pos--right .c2::before, -.c0.caret-pos--right-top .c2::before, -.c0.caret-pos--right-bottom .c2::before, -.c0.caret-pos--left .c2::before, -.c0.caret-pos--left-top .c2::before, -.c0.caret-pos--left-bottom .c2::before { - margin-top: calc((8px + 1px) * -1); -} - -.c0.caret-pos--right .c2::after, -.c0.caret-pos--right-top .c2::after, -.c0.caret-pos--right-bottom .c2::after, -.c0.caret-pos--left .c2::after, -.c0.caret-pos--left-top .c2::after, -.c0.caret-pos--left-bottom .c2::after { - margin-top: -8px; -} - -.c0.caret-pos--right .c2::before, -.c0.caret-pos--right-top .c2::before, -.c0.caret-pos--right-bottom .c2::before { - right: -16px; - border-left-color: #d0d7de; -} - -.c0.caret-pos--right .c2::after, -.c0.caret-pos--right-top .c2::after, -.c0.caret-pos--right-bottom .c2::after { - right: -14px; - border-left-color: #ffffff; -} - -.c0.caret-pos--left .c2::before, -.c0.caret-pos--left-top .c2::before, -.c0.caret-pos--left-bottom .c2::before { - left: -16px; - border-right-color: #d0d7de; -} - -.c0.caret-pos--left .c2::after, -.c0.caret-pos--left-top .c2::after, -.c0.caret-pos--left-bottom .c2::after { - left: -14px; - border-right-color: #ffffff; -} - -.c0.caret-pos--right-top .c2::before, -.c0.caret-pos--left-top .c2::before, -.c0.caret-pos--right-top .c2::after, -.c0.caret-pos--left-top .c2::after { - top: 24px; -} - -.c0.caret-pos--right-bottom .c2::before, -.c0.caret-pos--left-bottom .c2::before, -.c0.caret-pos--right-bottom .c2::after, -.c0.caret-pos--left-bottom .c2::after { - top: auto; -} - -.c0.caret-pos--right-bottom .c2::before, -.c0.caret-pos--left-bottom .c2::before { - bottom: 16px; -} - -.c0.caret-pos--right-bottom .c2::after, -.c0.caret-pos--left-bottom .c2::after { - bottom: calc(16px + 1px); -} - -.c0.caret-pos--bottom .c3::before, -.c0.caret-pos--bottom-right .c3::before, -.c0.caret-pos--bottom-left .c3::before, -.c0.caret-pos--bottom .c3::after, -.c0.caret-pos--bottom-right .c3::after, -.c0.caret-pos--bottom-left .c3::after { - top: auto; - border-bottom-color: transparent; -} - -.c0.caret-pos--bottom .c3::before, -.c0.caret-pos--bottom-right .c3::before, -.c0.caret-pos--bottom-left .c3::before { - bottom: -16px; -} - -.c0.caret-pos--bottom .c3::after, -.c0.caret-pos--bottom-right .c3::after, -.c0.caret-pos--bottom-left .c3::after { - bottom: -14px; -} - -.c0.caret-pos--top-right .c3, -.c0.caret-pos--bottom-right .c3 { - right: -9px; - margin-right: 0; -} - -.c0.caret-pos--top-right .c3::before, -.c0.caret-pos--bottom-right .c3::before, -.c0.caret-pos--top-right .c3::after, -.c0.caret-pos--bottom-right .c3::after { - left: auto; - margin-left: 0; -} - -.c0.caret-pos--top-right .c3::before, -.c0.caret-pos--bottom-right .c3::before { - right: 20px; -} - -.c0.caret-pos--top-right .c3::after, -.c0.caret-pos--bottom-right .c3::after { - right: 21px; -} - -.c0.caret-pos--top-left .c3, -.c0.caret-pos--bottom-left .c3 { - left: -9px; - margin-left: 0; -} - -.c0.caret-pos--top-left .c3::before, -.c0.caret-pos--bottom-left .c3::before, -.c0.caret-pos--top-left .c3::after, -.c0.caret-pos--bottom-left .c3::after { - left: 24px; - margin-left: 0; -} - -.c0.caret-pos--top-left .c3::after, -.c0.caret-pos--bottom-left .c3::after { - left: calc(24px + 1px); -} - -.c0.caret-pos--right .c3::before, -.c0.caret-pos--right-top .c3::before, -.c0.caret-pos--right-bottom .c3::before, -.c0.caret-pos--left .c3::before, -.c0.caret-pos--left-top .c3::before, -.c0.caret-pos--left-bottom .c3::before, -.c0.caret-pos--right .c3::after, -.c0.caret-pos--right-top .c3::after, -.c0.caret-pos--right-bottom .c3::after, -.c0.caret-pos--left .c3::after, -.c0.caret-pos--left-top .c3::after, -.c0.caret-pos--left-bottom .c3::after { - top: 50%; - left: auto; - margin-left: 0; - border-bottom-color: transparent; -} - -.c0.caret-pos--right .c3::before, -.c0.caret-pos--right-top .c3::before, -.c0.caret-pos--right-bottom .c3::before, -.c0.caret-pos--left .c3::before, -.c0.caret-pos--left-top .c3::before, -.c0.caret-pos--left-bottom .c3::before { - margin-top: calc((8px + 1px) * -1); -} - -.c0.caret-pos--right .c3::after, -.c0.caret-pos--right-top .c3::after, -.c0.caret-pos--right-bottom .c3::after, -.c0.caret-pos--left .c3::after, -.c0.caret-pos--left-top .c3::after, -.c0.caret-pos--left-bottom .c3::after { - margin-top: -8px; -} - -.c0.caret-pos--right .c3::before, -.c0.caret-pos--right-top .c3::before, -.c0.caret-pos--right-bottom .c3::before { - right: -16px; -} - -.c0.caret-pos--right .c3::after, -.c0.caret-pos--right-top .c3::after, -.c0.caret-pos--right-bottom .c3::after { - right: -14px; -} - -.c0.caret-pos--left .c3::before, -.c0.caret-pos--left-top .c3::before, -.c0.caret-pos--left-bottom .c3::before { - left: -16px; -} - -.c0.caret-pos--left .c3::after, -.c0.caret-pos--left-top .c3::after, -.c0.caret-pos--left-bottom .c3::after { - left: -14px; -} - -.c0.caret-pos--right-top .c3::before, -.c0.caret-pos--left-top .c3::before, -.c0.caret-pos--right-top .c3::after, -.c0.caret-pos--left-top .c3::after { - top: 24px; -} - -.c0.caret-pos--right-bottom .c3::before, -.c0.caret-pos--left-bottom .c3::before, -.c0.caret-pos--right-bottom .c3::after, -.c0.caret-pos--left-bottom .c3::after { - top: auto; -} - -.c0.caret-pos--right-bottom .c3::before, -.c0.caret-pos--left-bottom .c3::before { - bottom: 16px; -} - -.c0.caret-pos--right-bottom .c3::after, -.c0.caret-pos--left-bottom .c3::after { - bottom: calc(16px + 1px); -} - -
    -
    - Hello! -
    -
    -`; - -exports[`Popover renders correctly for a caret position of right 1`] = ` -.c1 { - position: absolute; - z-index: 100; - display: block; -} - -.c2 { - border: 1px solid #d0d7de; - border-radius: 6px; - position: relative; - width: 232px; - margin-right: auto; - margin-left: auto; - padding: 24px; - background-color: #ffffff; -} - -.c2::before, -.c2::after { - position: absolute; - left: 50%; - display: inline-block; - content: ''; -} - -.c2::before { - top: -16px; - margin-left: -9px; - border: 8px solid transparent; - border-bottom-color: #d0d7de; -} - -.c2::after { - top: -14px; - margin-left: -8px; - border: 7px solid transparent; - border-bottom-color: #ffffff; -} - -.c0.caret-pos--bottom .c2::before, -.c0.caret-pos--bottom-right .c2::before, -.c0.caret-pos--bottom-left .c2::before, -.c0.caret-pos--bottom .c2::after, -.c0.caret-pos--bottom-right .c2::after, -.c0.caret-pos--bottom-left .c2::after { - top: auto; - border-bottom-color: transparent; -} - -.c0.caret-pos--bottom .c2::before, -.c0.caret-pos--bottom-right .c2::before, -.c0.caret-pos--bottom-left .c2::before { - bottom: -16px; - border-top-color: #d0d7de; -} - -.c0.caret-pos--bottom .c2::after, -.c0.caret-pos--bottom-right .c2::after, -.c0.caret-pos--bottom-left .c2::after { - bottom: -14px; - border-top-color: #ffffff; -} - -.c0.caret-pos--top-right .c2, -.c0.caret-pos--bottom-right .c2 { - right: -9px; - margin-right: 0; -} - -.c0.caret-pos--top-right .c2::before, -.c0.caret-pos--bottom-right .c2::before, -.c0.caret-pos--top-right .c2::after, -.c0.caret-pos--bottom-right .c2::after { - left: auto; - margin-left: 0; -} - -.c0.caret-pos--top-right .c2::before, -.c0.caret-pos--bottom-right .c2::before { - right: 20px; -} - -.c0.caret-pos--top-right .c2::after, -.c0.caret-pos--bottom-right .c2::after { - right: 21px; -} - -.c0.caret-pos--top-left .c2, -.c0.caret-pos--bottom-left .c2 { - left: -9px; - margin-left: 0; -} - -.c0.caret-pos--top-left .c2::before, -.c0.caret-pos--bottom-left .c2::before, -.c0.caret-pos--top-left .c2::after, -.c0.caret-pos--bottom-left .c2::after { - left: 24px; - margin-left: 0; -} - -.c0.caret-pos--top-left .c2::after, -.c0.caret-pos--bottom-left .c2::after { - left: calc(24px + 1px); -} - -.c0.caret-pos--right .c2::before, -.c0.caret-pos--right-top .c2::before, -.c0.caret-pos--right-bottom .c2::before, -.c0.caret-pos--left .c2::before, -.c0.caret-pos--left-top .c2::before, -.c0.caret-pos--left-bottom .c2::before, -.c0.caret-pos--right .c2::after, -.c0.caret-pos--right-top .c2::after, -.c0.caret-pos--right-bottom .c2::after, -.c0.caret-pos--left .c2::after, -.c0.caret-pos--left-top .c2::after, -.c0.caret-pos--left-bottom .c2::after { - top: 50%; - left: auto; - margin-left: 0; - border-bottom-color: transparent; -} - -.c0.caret-pos--right .c2::before, -.c0.caret-pos--right-top .c2::before, -.c0.caret-pos--right-bottom .c2::before, -.c0.caret-pos--left .c2::before, -.c0.caret-pos--left-top .c2::before, -.c0.caret-pos--left-bottom .c2::before { - margin-top: calc((8px + 1px) * -1); -} - -.c0.caret-pos--right .c2::after, -.c0.caret-pos--right-top .c2::after, -.c0.caret-pos--right-bottom .c2::after, -.c0.caret-pos--left .c2::after, -.c0.caret-pos--left-top .c2::after, -.c0.caret-pos--left-bottom .c2::after { - margin-top: -8px; -} - -.c0.caret-pos--right .c2::before, -.c0.caret-pos--right-top .c2::before, -.c0.caret-pos--right-bottom .c2::before { - right: -16px; - border-left-color: #d0d7de; -} - -.c0.caret-pos--right .c2::after, -.c0.caret-pos--right-top .c2::after, -.c0.caret-pos--right-bottom .c2::after { - right: -14px; - border-left-color: #ffffff; -} - -.c0.caret-pos--left .c2::before, -.c0.caret-pos--left-top .c2::before, -.c0.caret-pos--left-bottom .c2::before { - left: -16px; - border-right-color: #d0d7de; -} - -.c0.caret-pos--left .c2::after, -.c0.caret-pos--left-top .c2::after, -.c0.caret-pos--left-bottom .c2::after { - left: -14px; - border-right-color: #ffffff; -} - -.c0.caret-pos--right-top .c2::before, -.c0.caret-pos--left-top .c2::before, -.c0.caret-pos--right-top .c2::after, -.c0.caret-pos--left-top .c2::after { - top: 24px; -} - -.c0.caret-pos--right-bottom .c2::before, -.c0.caret-pos--left-bottom .c2::before, -.c0.caret-pos--right-bottom .c2::after, -.c0.caret-pos--left-bottom .c2::after { - top: auto; -} - -.c0.caret-pos--right-bottom .c2::before, -.c0.caret-pos--left-bottom .c2::before { - bottom: 16px; -} - -.c0.caret-pos--right-bottom .c2::after, -.c0.caret-pos--left-bottom .c2::after { - bottom: calc(16px + 1px); -} - -.c0.caret-pos--bottom .c3::before, -.c0.caret-pos--bottom-right .c3::before, -.c0.caret-pos--bottom-left .c3::before, -.c0.caret-pos--bottom .c3::after, -.c0.caret-pos--bottom-right .c3::after, -.c0.caret-pos--bottom-left .c3::after { - top: auto; - border-bottom-color: transparent; -} - -.c0.caret-pos--bottom .c3::before, -.c0.caret-pos--bottom-right .c3::before, -.c0.caret-pos--bottom-left .c3::before { - bottom: -16px; -} - -.c0.caret-pos--bottom .c3::after, -.c0.caret-pos--bottom-right .c3::after, -.c0.caret-pos--bottom-left .c3::after { - bottom: -14px; -} - -.c0.caret-pos--top-right .c3, -.c0.caret-pos--bottom-right .c3 { - right: -9px; - margin-right: 0; -} - -.c0.caret-pos--top-right .c3::before, -.c0.caret-pos--bottom-right .c3::before, -.c0.caret-pos--top-right .c3::after, -.c0.caret-pos--bottom-right .c3::after { - left: auto; - margin-left: 0; -} - -.c0.caret-pos--top-right .c3::before, -.c0.caret-pos--bottom-right .c3::before { - right: 20px; -} - -.c0.caret-pos--top-right .c3::after, -.c0.caret-pos--bottom-right .c3::after { - right: 21px; -} - -.c0.caret-pos--top-left .c3, -.c0.caret-pos--bottom-left .c3 { - left: -9px; - margin-left: 0; -} - -.c0.caret-pos--top-left .c3::before, -.c0.caret-pos--bottom-left .c3::before, -.c0.caret-pos--top-left .c3::after, -.c0.caret-pos--bottom-left .c3::after { - left: 24px; - margin-left: 0; -} - -.c0.caret-pos--top-left .c3::after, -.c0.caret-pos--bottom-left .c3::after { - left: calc(24px + 1px); -} - -.c0.caret-pos--right .c3::before, -.c0.caret-pos--right-top .c3::before, -.c0.caret-pos--right-bottom .c3::before, -.c0.caret-pos--left .c3::before, -.c0.caret-pos--left-top .c3::before, -.c0.caret-pos--left-bottom .c3::before, -.c0.caret-pos--right .c3::after, -.c0.caret-pos--right-top .c3::after, -.c0.caret-pos--right-bottom .c3::after, -.c0.caret-pos--left .c3::after, -.c0.caret-pos--left-top .c3::after, -.c0.caret-pos--left-bottom .c3::after { - top: 50%; - left: auto; - margin-left: 0; - border-bottom-color: transparent; -} - -.c0.caret-pos--right .c3::before, -.c0.caret-pos--right-top .c3::before, -.c0.caret-pos--right-bottom .c3::before, -.c0.caret-pos--left .c3::before, -.c0.caret-pos--left-top .c3::before, -.c0.caret-pos--left-bottom .c3::before { - margin-top: calc((8px + 1px) * -1); -} - -.c0.caret-pos--right .c3::after, -.c0.caret-pos--right-top .c3::after, -.c0.caret-pos--right-bottom .c3::after, -.c0.caret-pos--left .c3::after, -.c0.caret-pos--left-top .c3::after, -.c0.caret-pos--left-bottom .c3::after { - margin-top: -8px; -} - -.c0.caret-pos--right .c3::before, -.c0.caret-pos--right-top .c3::before, -.c0.caret-pos--right-bottom .c3::before { - right: -16px; -} - -.c0.caret-pos--right .c3::after, -.c0.caret-pos--right-top .c3::after, -.c0.caret-pos--right-bottom .c3::after { - right: -14px; -} - -.c0.caret-pos--left .c3::before, -.c0.caret-pos--left-top .c3::before, -.c0.caret-pos--left-bottom .c3::before { - left: -16px; -} - -.c0.caret-pos--left .c3::after, -.c0.caret-pos--left-top .c3::after, -.c0.caret-pos--left-bottom .c3::after { - left: -14px; -} - -.c0.caret-pos--right-top .c3::before, -.c0.caret-pos--left-top .c3::before, -.c0.caret-pos--right-top .c3::after, -.c0.caret-pos--left-top .c3::after { - top: 24px; -} - -.c0.caret-pos--right-bottom .c3::before, -.c0.caret-pos--left-bottom .c3::before, -.c0.caret-pos--right-bottom .c3::after, -.c0.caret-pos--left-bottom .c3::after { - top: auto; -} - -.c0.caret-pos--right-bottom .c3::before, -.c0.caret-pos--left-bottom .c3::before { - bottom: 16px; -} - -.c0.caret-pos--right-bottom .c3::after, -.c0.caret-pos--left-bottom .c3::after { - bottom: calc(16px + 1px); -} - -
    -
    - Hello! -
    -
    -`; - -exports[`Popover renders correctly for a caret position of right-bottom 1`] = ` -.c1 { - position: absolute; - z-index: 100; - display: block; -} - -.c2 { - border: 1px solid #d0d7de; - border-radius: 6px; - position: relative; - width: 232px; - margin-right: auto; - margin-left: auto; - padding: 24px; - background-color: #ffffff; -} - -.c2::before, -.c2::after { - position: absolute; - left: 50%; - display: inline-block; - content: ''; -} - -.c2::before { - top: -16px; - margin-left: -9px; - border: 8px solid transparent; - border-bottom-color: #d0d7de; -} - -.c2::after { - top: -14px; - margin-left: -8px; - border: 7px solid transparent; - border-bottom-color: #ffffff; -} - -.c0.caret-pos--bottom .c2::before, -.c0.caret-pos--bottom-right .c2::before, -.c0.caret-pos--bottom-left .c2::before, -.c0.caret-pos--bottom .c2::after, -.c0.caret-pos--bottom-right .c2::after, -.c0.caret-pos--bottom-left .c2::after { - top: auto; - border-bottom-color: transparent; -} - -.c0.caret-pos--bottom .c2::before, -.c0.caret-pos--bottom-right .c2::before, -.c0.caret-pos--bottom-left .c2::before { - bottom: -16px; - border-top-color: #d0d7de; -} - -.c0.caret-pos--bottom .c2::after, -.c0.caret-pos--bottom-right .c2::after, -.c0.caret-pos--bottom-left .c2::after { - bottom: -14px; - border-top-color: #ffffff; -} - -.c0.caret-pos--top-right .c2, -.c0.caret-pos--bottom-right .c2 { - right: -9px; - margin-right: 0; -} - -.c0.caret-pos--top-right .c2::before, -.c0.caret-pos--bottom-right .c2::before, -.c0.caret-pos--top-right .c2::after, -.c0.caret-pos--bottom-right .c2::after { - left: auto; - margin-left: 0; -} - -.c0.caret-pos--top-right .c2::before, -.c0.caret-pos--bottom-right .c2::before { - right: 20px; -} - -.c0.caret-pos--top-right .c2::after, -.c0.caret-pos--bottom-right .c2::after { - right: 21px; -} - -.c0.caret-pos--top-left .c2, -.c0.caret-pos--bottom-left .c2 { - left: -9px; - margin-left: 0; -} - -.c0.caret-pos--top-left .c2::before, -.c0.caret-pos--bottom-left .c2::before, -.c0.caret-pos--top-left .c2::after, -.c0.caret-pos--bottom-left .c2::after { - left: 24px; - margin-left: 0; -} - -.c0.caret-pos--top-left .c2::after, -.c0.caret-pos--bottom-left .c2::after { - left: calc(24px + 1px); -} - -.c0.caret-pos--right .c2::before, -.c0.caret-pos--right-top .c2::before, -.c0.caret-pos--right-bottom .c2::before, -.c0.caret-pos--left .c2::before, -.c0.caret-pos--left-top .c2::before, -.c0.caret-pos--left-bottom .c2::before, -.c0.caret-pos--right .c2::after, -.c0.caret-pos--right-top .c2::after, -.c0.caret-pos--right-bottom .c2::after, -.c0.caret-pos--left .c2::after, -.c0.caret-pos--left-top .c2::after, -.c0.caret-pos--left-bottom .c2::after { - top: 50%; - left: auto; - margin-left: 0; - border-bottom-color: transparent; -} - -.c0.caret-pos--right .c2::before, -.c0.caret-pos--right-top .c2::before, -.c0.caret-pos--right-bottom .c2::before, -.c0.caret-pos--left .c2::before, -.c0.caret-pos--left-top .c2::before, -.c0.caret-pos--left-bottom .c2::before { - margin-top: calc((8px + 1px) * -1); -} - -.c0.caret-pos--right .c2::after, -.c0.caret-pos--right-top .c2::after, -.c0.caret-pos--right-bottom .c2::after, -.c0.caret-pos--left .c2::after, -.c0.caret-pos--left-top .c2::after, -.c0.caret-pos--left-bottom .c2::after { - margin-top: -8px; -} - -.c0.caret-pos--right .c2::before, -.c0.caret-pos--right-top .c2::before, -.c0.caret-pos--right-bottom .c2::before { - right: -16px; - border-left-color: #d0d7de; -} - -.c0.caret-pos--right .c2::after, -.c0.caret-pos--right-top .c2::after, -.c0.caret-pos--right-bottom .c2::after { - right: -14px; - border-left-color: #ffffff; -} - -.c0.caret-pos--left .c2::before, -.c0.caret-pos--left-top .c2::before, -.c0.caret-pos--left-bottom .c2::before { - left: -16px; - border-right-color: #d0d7de; -} - -.c0.caret-pos--left .c2::after, -.c0.caret-pos--left-top .c2::after, -.c0.caret-pos--left-bottom .c2::after { - left: -14px; - border-right-color: #ffffff; -} - -.c0.caret-pos--right-top .c2::before, -.c0.caret-pos--left-top .c2::before, -.c0.caret-pos--right-top .c2::after, -.c0.caret-pos--left-top .c2::after { - top: 24px; -} - -.c0.caret-pos--right-bottom .c2::before, -.c0.caret-pos--left-bottom .c2::before, -.c0.caret-pos--right-bottom .c2::after, -.c0.caret-pos--left-bottom .c2::after { - top: auto; -} - -.c0.caret-pos--right-bottom .c2::before, -.c0.caret-pos--left-bottom .c2::before { - bottom: 16px; -} - -.c0.caret-pos--right-bottom .c2::after, -.c0.caret-pos--left-bottom .c2::after { - bottom: calc(16px + 1px); -} - -.c0.caret-pos--bottom .c3::before, -.c0.caret-pos--bottom-right .c3::before, -.c0.caret-pos--bottom-left .c3::before, -.c0.caret-pos--bottom .c3::after, -.c0.caret-pos--bottom-right .c3::after, -.c0.caret-pos--bottom-left .c3::after { - top: auto; - border-bottom-color: transparent; -} - -.c0.caret-pos--bottom .c3::before, -.c0.caret-pos--bottom-right .c3::before, -.c0.caret-pos--bottom-left .c3::before { - bottom: -16px; -} - -.c0.caret-pos--bottom .c3::after, -.c0.caret-pos--bottom-right .c3::after, -.c0.caret-pos--bottom-left .c3::after { - bottom: -14px; -} - -.c0.caret-pos--top-right .c3, -.c0.caret-pos--bottom-right .c3 { - right: -9px; - margin-right: 0; -} - -.c0.caret-pos--top-right .c3::before, -.c0.caret-pos--bottom-right .c3::before, -.c0.caret-pos--top-right .c3::after, -.c0.caret-pos--bottom-right .c3::after { - left: auto; - margin-left: 0; -} - -.c0.caret-pos--top-right .c3::before, -.c0.caret-pos--bottom-right .c3::before { - right: 20px; -} - -.c0.caret-pos--top-right .c3::after, -.c0.caret-pos--bottom-right .c3::after { - right: 21px; -} - -.c0.caret-pos--top-left .c3, -.c0.caret-pos--bottom-left .c3 { - left: -9px; - margin-left: 0; -} - -.c0.caret-pos--top-left .c3::before, .c0.caret-pos--bottom-left .c3::before, .c0.caret-pos--top-left .c3::after, .c0.caret-pos--bottom-left .c3::after { @@ -3161,12 +1344,12 @@ exports[`Popover renders correctly for a caret position of right-bottom 1`] = ` margin-left: 0; } -.c0.caret-pos--top-left .c3::after, +.c0.caret-pos--top-left .c2::after, .c0.caret-pos--bottom-left .c3::after { left: calc(24px + 1px); } -.c0.caret-pos--right .c3::before, +.c0.caret-pos--right .c2::before, .c0.caret-pos--right-top .c3::before, .c0.caret-pos--right-bottom .c3::before, .c0.caret-pos--left .c3::before, @@ -3184,7 +1367,7 @@ exports[`Popover renders correctly for a caret position of right-bottom 1`] = ` border-bottom-color: transparent; } -.c0.caret-pos--right .c3::before, +.c0.caret-pos--right .c2::before, .c0.caret-pos--right-top .c3::before, .c0.caret-pos--right-bottom .c3::before, .c0.caret-pos--left .c3::before, @@ -3193,7 +1376,7 @@ exports[`Popover renders correctly for a caret position of right-bottom 1`] = ` margin-top: calc((8px + 1px) * -1); } -.c0.caret-pos--right .c3::after, +.c0.caret-pos--right .c2::after, .c0.caret-pos--right-top .c3::after, .c0.caret-pos--right-bottom .c3::after, .c0.caret-pos--left .c3::after, @@ -3202,74 +1385,78 @@ exports[`Popover renders correctly for a caret position of right-bottom 1`] = ` margin-top: -8px; } -.c0.caret-pos--right .c3::before, +.c0.caret-pos--right .c2::before, .c0.caret-pos--right-top .c3::before, .c0.caret-pos--right-bottom .c3::before { right: -16px; + border-left-color: #d0d7de; } -.c0.caret-pos--right .c3::after, +.c0.caret-pos--right .c2::after, .c0.caret-pos--right-top .c3::after, .c0.caret-pos--right-bottom .c3::after { right: -14px; + border-left-color: #ffffff; } -.c0.caret-pos--left .c3::before, +.c0.caret-pos--left .c2::before, .c0.caret-pos--left-top .c3::before, .c0.caret-pos--left-bottom .c3::before { left: -16px; + border-right-color: #d0d7de; } -.c0.caret-pos--left .c3::after, +.c0.caret-pos--left .c2::after, .c0.caret-pos--left-top .c3::after, .c0.caret-pos--left-bottom .c3::after { left: -14px; + border-right-color: #ffffff; } -.c0.caret-pos--right-top .c3::before, +.c0.caret-pos--right-top .c2::before, .c0.caret-pos--left-top .c3::before, .c0.caret-pos--right-top .c3::after, .c0.caret-pos--left-top .c3::after { top: 24px; } -.c0.caret-pos--right-bottom .c3::before, +.c0.caret-pos--right-bottom .c2::before, .c0.caret-pos--left-bottom .c3::before, .c0.caret-pos--right-bottom .c3::after, .c0.caret-pos--left-bottom .c3::after { top: auto; } -.c0.caret-pos--right-bottom .c3::before, +.c0.caret-pos--right-bottom .c2::before, .c0.caret-pos--left-bottom .c3::before { bottom: 16px; } -.c0.caret-pos--right-bottom .c3::after, +.c0.caret-pos--right-bottom .c2::after, .c0.caret-pos--left-bottom .c3::after { bottom: calc(16px + 1px); }
    Hello!
    `; -exports[`Popover renders correctly for a caret position of right-top 1`] = ` +exports[`Popover renders correctly for a caret position of left-top 1`] = ` .c1 { position: absolute; z-index: 100; display: block; } -.c2 { +.c3 { border: 1px solid #d0d7de; border-radius: 6px; position: relative; @@ -3280,22 +1467,22 @@ exports[`Popover renders correctly for a caret position of right-top 1`] = ` background-color: #ffffff; } -.c2::before, -.c2::after { +.c3::before, +.c3::after { position: absolute; left: 50%; display: inline-block; content: ''; } -.c2::before { +.c3::before { top: -16px; margin-left: -9px; border: 8px solid transparent; border-bottom-color: #d0d7de; } -.c2::after { +.c3::after { top: -14px; margin-left: -8px; border: 7px solid transparent; @@ -3303,161 +1490,6 @@ exports[`Popover renders correctly for a caret position of right-top 1`] = ` } .c0.caret-pos--bottom .c2::before, -.c0.caret-pos--bottom-right .c2::before, -.c0.caret-pos--bottom-left .c2::before, -.c0.caret-pos--bottom .c2::after, -.c0.caret-pos--bottom-right .c2::after, -.c0.caret-pos--bottom-left .c2::after { - top: auto; - border-bottom-color: transparent; -} - -.c0.caret-pos--bottom .c2::before, -.c0.caret-pos--bottom-right .c2::before, -.c0.caret-pos--bottom-left .c2::before { - bottom: -16px; - border-top-color: #d0d7de; -} - -.c0.caret-pos--bottom .c2::after, -.c0.caret-pos--bottom-right .c2::after, -.c0.caret-pos--bottom-left .c2::after { - bottom: -14px; - border-top-color: #ffffff; -} - -.c0.caret-pos--top-right .c2, -.c0.caret-pos--bottom-right .c2 { - right: -9px; - margin-right: 0; -} - -.c0.caret-pos--top-right .c2::before, -.c0.caret-pos--bottom-right .c2::before, -.c0.caret-pos--top-right .c2::after, -.c0.caret-pos--bottom-right .c2::after { - left: auto; - margin-left: 0; -} - -.c0.caret-pos--top-right .c2::before, -.c0.caret-pos--bottom-right .c2::before { - right: 20px; -} - -.c0.caret-pos--top-right .c2::after, -.c0.caret-pos--bottom-right .c2::after { - right: 21px; -} - -.c0.caret-pos--top-left .c2, -.c0.caret-pos--bottom-left .c2 { - left: -9px; - margin-left: 0; -} - -.c0.caret-pos--top-left .c2::before, -.c0.caret-pos--bottom-left .c2::before, -.c0.caret-pos--top-left .c2::after, -.c0.caret-pos--bottom-left .c2::after { - left: 24px; - margin-left: 0; -} - -.c0.caret-pos--top-left .c2::after, -.c0.caret-pos--bottom-left .c2::after { - left: calc(24px + 1px); -} - -.c0.caret-pos--right .c2::before, -.c0.caret-pos--right-top .c2::before, -.c0.caret-pos--right-bottom .c2::before, -.c0.caret-pos--left .c2::before, -.c0.caret-pos--left-top .c2::before, -.c0.caret-pos--left-bottom .c2::before, -.c0.caret-pos--right .c2::after, -.c0.caret-pos--right-top .c2::after, -.c0.caret-pos--right-bottom .c2::after, -.c0.caret-pos--left .c2::after, -.c0.caret-pos--left-top .c2::after, -.c0.caret-pos--left-bottom .c2::after { - top: 50%; - left: auto; - margin-left: 0; - border-bottom-color: transparent; -} - -.c0.caret-pos--right .c2::before, -.c0.caret-pos--right-top .c2::before, -.c0.caret-pos--right-bottom .c2::before, -.c0.caret-pos--left .c2::before, -.c0.caret-pos--left-top .c2::before, -.c0.caret-pos--left-bottom .c2::before { - margin-top: calc((8px + 1px) * -1); -} - -.c0.caret-pos--right .c2::after, -.c0.caret-pos--right-top .c2::after, -.c0.caret-pos--right-bottom .c2::after, -.c0.caret-pos--left .c2::after, -.c0.caret-pos--left-top .c2::after, -.c0.caret-pos--left-bottom .c2::after { - margin-top: -8px; -} - -.c0.caret-pos--right .c2::before, -.c0.caret-pos--right-top .c2::before, -.c0.caret-pos--right-bottom .c2::before { - right: -16px; - border-left-color: #d0d7de; -} - -.c0.caret-pos--right .c2::after, -.c0.caret-pos--right-top .c2::after, -.c0.caret-pos--right-bottom .c2::after { - right: -14px; - border-left-color: #ffffff; -} - -.c0.caret-pos--left .c2::before, -.c0.caret-pos--left-top .c2::before, -.c0.caret-pos--left-bottom .c2::before { - left: -16px; - border-right-color: #d0d7de; -} - -.c0.caret-pos--left .c2::after, -.c0.caret-pos--left-top .c2::after, -.c0.caret-pos--left-bottom .c2::after { - left: -14px; - border-right-color: #ffffff; -} - -.c0.caret-pos--right-top .c2::before, -.c0.caret-pos--left-top .c2::before, -.c0.caret-pos--right-top .c2::after, -.c0.caret-pos--left-top .c2::after { - top: 24px; -} - -.c0.caret-pos--right-bottom .c2::before, -.c0.caret-pos--left-bottom .c2::before, -.c0.caret-pos--right-bottom .c2::after, -.c0.caret-pos--left-bottom .c2::after { - top: auto; -} - -.c0.caret-pos--right-bottom .c2::before, -.c0.caret-pos--left-bottom .c2::before { - bottom: 16px; -} - -.c0.caret-pos--right-bottom .c2::after, -.c0.caret-pos--left-bottom .c2::after { - bottom: calc(16px + 1px); -} - -.c0.caret-pos--bottom .c3::before, .c0.caret-pos--bottom-right .c3::before, .c0.caret-pos--bottom-left .c3::before, .c0.caret-pos--bottom .c3::after, @@ -3467,25 +1499,27 @@ exports[`Popover renders correctly for a caret position of right-top 1`] = ` border-bottom-color: transparent; } -.c0.caret-pos--bottom .c3::before, +.c0.caret-pos--bottom .c2::before, .c0.caret-pos--bottom-right .c3::before, .c0.caret-pos--bottom-left .c3::before { bottom: -16px; + border-top-color: #d0d7de; } -.c0.caret-pos--bottom .c3::after, +.c0.caret-pos--bottom .c2::after, .c0.caret-pos--bottom-right .c3::after, .c0.caret-pos--bottom-left .c3::after { bottom: -14px; + border-top-color: #ffffff; } -.c0.caret-pos--top-right .c3, +.c0.caret-pos--top-right .c2, .c0.caret-pos--bottom-right .c3 { right: -9px; margin-right: 0; } -.c0.caret-pos--top-right .c3::before, +.c0.caret-pos--top-right .c2::before, .c0.caret-pos--bottom-right .c3::before, .c0.caret-pos--top-right .c3::after, .c0.caret-pos--bottom-right .c3::after { @@ -3493,23 +1527,23 @@ exports[`Popover renders correctly for a caret position of right-top 1`] = ` margin-left: 0; } -.c0.caret-pos--top-right .c3::before, +.c0.caret-pos--top-right .c2::before, .c0.caret-pos--bottom-right .c3::before { right: 20px; } -.c0.caret-pos--top-right .c3::after, +.c0.caret-pos--top-right .c2::after, .c0.caret-pos--bottom-right .c3::after { right: 21px; } -.c0.caret-pos--top-left .c3, +.c0.caret-pos--top-left .c2, .c0.caret-pos--bottom-left .c3 { left: -9px; margin-left: 0; } -.c0.caret-pos--top-left .c3::before, +.c0.caret-pos--top-left .c2::before, .c0.caret-pos--bottom-left .c3::before, .c0.caret-pos--top-left .c3::after, .c0.caret-pos--bottom-left .c3::after { @@ -3517,12 +1551,12 @@ exports[`Popover renders correctly for a caret position of right-top 1`] = ` margin-left: 0; } -.c0.caret-pos--top-left .c3::after, +.c0.caret-pos--top-left .c2::after, .c0.caret-pos--bottom-left .c3::after { left: calc(24px + 1px); } -.c0.caret-pos--right .c3::before, +.c0.caret-pos--right .c2::before, .c0.caret-pos--right-top .c3::before, .c0.caret-pos--right-bottom .c3::before, .c0.caret-pos--left .c3::before, @@ -3540,7 +1574,7 @@ exports[`Popover renders correctly for a caret position of right-top 1`] = ` border-bottom-color: transparent; } -.c0.caret-pos--right .c3::before, +.c0.caret-pos--right .c2::before, .c0.caret-pos--right-top .c3::before, .c0.caret-pos--right-bottom .c3::before, .c0.caret-pos--left .c3::before, @@ -3549,7 +1583,7 @@ exports[`Popover renders correctly for a caret position of right-top 1`] = ` margin-top: calc((8px + 1px) * -1); } -.c0.caret-pos--right .c3::after, +.c0.caret-pos--right .c2::after, .c0.caret-pos--right-top .c3::after, .c0.caret-pos--right-bottom .c3::after, .c0.caret-pos--left .c3::after, @@ -3558,74 +1592,78 @@ exports[`Popover renders correctly for a caret position of right-top 1`] = ` margin-top: -8px; } -.c0.caret-pos--right .c3::before, +.c0.caret-pos--right .c2::before, .c0.caret-pos--right-top .c3::before, .c0.caret-pos--right-bottom .c3::before { right: -16px; + border-left-color: #d0d7de; } -.c0.caret-pos--right .c3::after, +.c0.caret-pos--right .c2::after, .c0.caret-pos--right-top .c3::after, .c0.caret-pos--right-bottom .c3::after { right: -14px; + border-left-color: #ffffff; } -.c0.caret-pos--left .c3::before, +.c0.caret-pos--left .c2::before, .c0.caret-pos--left-top .c3::before, .c0.caret-pos--left-bottom .c3::before { left: -16px; + border-right-color: #d0d7de; } -.c0.caret-pos--left .c3::after, +.c0.caret-pos--left .c2::after, .c0.caret-pos--left-top .c3::after, .c0.caret-pos--left-bottom .c3::after { left: -14px; + border-right-color: #ffffff; } -.c0.caret-pos--right-top .c3::before, +.c0.caret-pos--right-top .c2::before, .c0.caret-pos--left-top .c3::before, .c0.caret-pos--right-top .c3::after, .c0.caret-pos--left-top .c3::after { top: 24px; } -.c0.caret-pos--right-bottom .c3::before, +.c0.caret-pos--right-bottom .c2::before, .c0.caret-pos--left-bottom .c3::before, .c0.caret-pos--right-bottom .c3::after, .c0.caret-pos--left-bottom .c3::after { top: auto; } -.c0.caret-pos--right-bottom .c3::before, +.c0.caret-pos--right-bottom .c2::before, .c0.caret-pos--left-bottom .c3::before { bottom: 16px; } -.c0.caret-pos--right-bottom .c3::after, +.c0.caret-pos--right-bottom .c2::after, .c0.caret-pos--left-bottom .c3::after { bottom: calc(16px + 1px); }
    Hello!
    `; -exports[`Popover renders correctly for a caret position of top 1`] = ` +exports[`Popover renders correctly for a caret position of right 1`] = ` .c1 { position: absolute; z-index: 100; display: block; } -.c2 { +.c3 { border: 1px solid #d0d7de; border-radius: 6px; position: relative; @@ -3636,22 +1674,22 @@ exports[`Popover renders correctly for a caret position of top 1`] = ` background-color: #ffffff; } -.c2::before, -.c2::after { +.c3::before, +.c3::after { position: absolute; left: 50%; display: inline-block; content: ''; } -.c2::before { +.c3::before { top: -16px; margin-left: -9px; border: 8px solid transparent; border-bottom-color: #d0d7de; } -.c2::after { +.c3::after { top: -14px; margin-left: -8px; border: 7px solid transparent; @@ -3659,84 +1697,84 @@ exports[`Popover renders correctly for a caret position of top 1`] = ` } .c0.caret-pos--bottom .c2::before, -.c0.caret-pos--bottom-right .c2::before, -.c0.caret-pos--bottom-left .c2::before, -.c0.caret-pos--bottom .c2::after, -.c0.caret-pos--bottom-right .c2::after, -.c0.caret-pos--bottom-left .c2::after { +.c0.caret-pos--bottom-right .c3::before, +.c0.caret-pos--bottom-left .c3::before, +.c0.caret-pos--bottom .c3::after, +.c0.caret-pos--bottom-right .c3::after, +.c0.caret-pos--bottom-left .c3::after { top: auto; border-bottom-color: transparent; } .c0.caret-pos--bottom .c2::before, -.c0.caret-pos--bottom-right .c2::before, -.c0.caret-pos--bottom-left .c2::before { +.c0.caret-pos--bottom-right .c3::before, +.c0.caret-pos--bottom-left .c3::before { bottom: -16px; border-top-color: #d0d7de; } .c0.caret-pos--bottom .c2::after, -.c0.caret-pos--bottom-right .c2::after, -.c0.caret-pos--bottom-left .c2::after { +.c0.caret-pos--bottom-right .c3::after, +.c0.caret-pos--bottom-left .c3::after { bottom: -14px; border-top-color: #ffffff; } .c0.caret-pos--top-right .c2, -.c0.caret-pos--bottom-right .c2 { +.c0.caret-pos--bottom-right .c3 { right: -9px; margin-right: 0; } .c0.caret-pos--top-right .c2::before, -.c0.caret-pos--bottom-right .c2::before, -.c0.caret-pos--top-right .c2::after, -.c0.caret-pos--bottom-right .c2::after { +.c0.caret-pos--bottom-right .c3::before, +.c0.caret-pos--top-right .c3::after, +.c0.caret-pos--bottom-right .c3::after { left: auto; margin-left: 0; } .c0.caret-pos--top-right .c2::before, -.c0.caret-pos--bottom-right .c2::before { +.c0.caret-pos--bottom-right .c3::before { right: 20px; } .c0.caret-pos--top-right .c2::after, -.c0.caret-pos--bottom-right .c2::after { +.c0.caret-pos--bottom-right .c3::after { right: 21px; } .c0.caret-pos--top-left .c2, -.c0.caret-pos--bottom-left .c2 { +.c0.caret-pos--bottom-left .c3 { left: -9px; margin-left: 0; } .c0.caret-pos--top-left .c2::before, -.c0.caret-pos--bottom-left .c2::before, -.c0.caret-pos--top-left .c2::after, -.c0.caret-pos--bottom-left .c2::after { +.c0.caret-pos--bottom-left .c3::before, +.c0.caret-pos--top-left .c3::after, +.c0.caret-pos--bottom-left .c3::after { left: 24px; margin-left: 0; } .c0.caret-pos--top-left .c2::after, -.c0.caret-pos--bottom-left .c2::after { +.c0.caret-pos--bottom-left .c3::after { left: calc(24px + 1px); } .c0.caret-pos--right .c2::before, -.c0.caret-pos--right-top .c2::before, -.c0.caret-pos--right-bottom .c2::before, -.c0.caret-pos--left .c2::before, -.c0.caret-pos--left-top .c2::before, -.c0.caret-pos--left-bottom .c2::before, -.c0.caret-pos--right .c2::after, -.c0.caret-pos--right-top .c2::after, -.c0.caret-pos--right-bottom .c2::after, -.c0.caret-pos--left .c2::after, -.c0.caret-pos--left-top .c2::after, -.c0.caret-pos--left-bottom .c2::after { +.c0.caret-pos--right-top .c3::before, +.c0.caret-pos--right-bottom .c3::before, +.c0.caret-pos--left .c3::before, +.c0.caret-pos--left-top .c3::before, +.c0.caret-pos--left-bottom .c3::before, +.c0.caret-pos--right .c3::after, +.c0.caret-pos--right-top .c3::after, +.c0.caret-pos--right-bottom .c3::after, +.c0.caret-pos--left .c3::after, +.c0.caret-pos--left-top .c3::after, +.c0.caret-pos--left-bottom .c3::after { top: 50%; left: auto; margin-left: 0; @@ -3744,76 +1782,128 @@ exports[`Popover renders correctly for a caret position of top 1`] = ` } .c0.caret-pos--right .c2::before, -.c0.caret-pos--right-top .c2::before, -.c0.caret-pos--right-bottom .c2::before, -.c0.caret-pos--left .c2::before, -.c0.caret-pos--left-top .c2::before, -.c0.caret-pos--left-bottom .c2::before { +.c0.caret-pos--right-top .c3::before, +.c0.caret-pos--right-bottom .c3::before, +.c0.caret-pos--left .c3::before, +.c0.caret-pos--left-top .c3::before, +.c0.caret-pos--left-bottom .c3::before { margin-top: calc((8px + 1px) * -1); } .c0.caret-pos--right .c2::after, -.c0.caret-pos--right-top .c2::after, -.c0.caret-pos--right-bottom .c2::after, -.c0.caret-pos--left .c2::after, -.c0.caret-pos--left-top .c2::after, -.c0.caret-pos--left-bottom .c2::after { +.c0.caret-pos--right-top .c3::after, +.c0.caret-pos--right-bottom .c3::after, +.c0.caret-pos--left .c3::after, +.c0.caret-pos--left-top .c3::after, +.c0.caret-pos--left-bottom .c3::after { margin-top: -8px; } .c0.caret-pos--right .c2::before, -.c0.caret-pos--right-top .c2::before, -.c0.caret-pos--right-bottom .c2::before { +.c0.caret-pos--right-top .c3::before, +.c0.caret-pos--right-bottom .c3::before { right: -16px; border-left-color: #d0d7de; } .c0.caret-pos--right .c2::after, -.c0.caret-pos--right-top .c2::after, -.c0.caret-pos--right-bottom .c2::after { +.c0.caret-pos--right-top .c3::after, +.c0.caret-pos--right-bottom .c3::after { right: -14px; border-left-color: #ffffff; } .c0.caret-pos--left .c2::before, -.c0.caret-pos--left-top .c2::before, -.c0.caret-pos--left-bottom .c2::before { +.c0.caret-pos--left-top .c3::before, +.c0.caret-pos--left-bottom .c3::before { left: -16px; border-right-color: #d0d7de; } .c0.caret-pos--left .c2::after, -.c0.caret-pos--left-top .c2::after, -.c0.caret-pos--left-bottom .c2::after { +.c0.caret-pos--left-top .c3::after, +.c0.caret-pos--left-bottom .c3::after { left: -14px; border-right-color: #ffffff; } .c0.caret-pos--right-top .c2::before, -.c0.caret-pos--left-top .c2::before, -.c0.caret-pos--right-top .c2::after, -.c0.caret-pos--left-top .c2::after { +.c0.caret-pos--left-top .c3::before, +.c0.caret-pos--right-top .c3::after, +.c0.caret-pos--left-top .c3::after { top: 24px; } .c0.caret-pos--right-bottom .c2::before, -.c0.caret-pos--left-bottom .c2::before, -.c0.caret-pos--right-bottom .c2::after, -.c0.caret-pos--left-bottom .c2::after { +.c0.caret-pos--left-bottom .c3::before, +.c0.caret-pos--right-bottom .c3::after, +.c0.caret-pos--left-bottom .c3::after { top: auto; } .c0.caret-pos--right-bottom .c2::before, -.c0.caret-pos--left-bottom .c2::before { +.c0.caret-pos--left-bottom .c3::before { bottom: 16px; } .c0.caret-pos--right-bottom .c2::after, -.c0.caret-pos--left-bottom .c2::after { +.c0.caret-pos--left-bottom .c3::after { bottom: calc(16px + 1px); } -.c0.caret-pos--bottom .c3::before, +
    +
    + Hello! +
    +
    +`; + +exports[`Popover renders correctly for a caret position of right-bottom 1`] = ` +.c1 { + position: absolute; + z-index: 100; + display: block; +} + +.c3 { + border: 1px solid #d0d7de; + border-radius: 6px; + position: relative; + width: 232px; + margin-right: auto; + margin-left: auto; + padding: 24px; + background-color: #ffffff; +} + +.c3::before, +.c3::after { + position: absolute; + left: 50%; + display: inline-block; + content: ''; +} + +.c3::before { + top: -16px; + margin-left: -9px; + border: 8px solid transparent; + border-bottom-color: #d0d7de; +} + +.c3::after { + top: -14px; + margin-left: -8px; + border: 7px solid transparent; + border-bottom-color: #ffffff; +} + +.c0.caret-pos--bottom .c2::before, .c0.caret-pos--bottom-right .c3::before, .c0.caret-pos--bottom-left .c3::before, .c0.caret-pos--bottom .c3::after, @@ -3823,25 +1913,27 @@ exports[`Popover renders correctly for a caret position of top 1`] = ` border-bottom-color: transparent; } -.c0.caret-pos--bottom .c3::before, +.c0.caret-pos--bottom .c2::before, .c0.caret-pos--bottom-right .c3::before, .c0.caret-pos--bottom-left .c3::before { bottom: -16px; + border-top-color: #d0d7de; } -.c0.caret-pos--bottom .c3::after, +.c0.caret-pos--bottom .c2::after, .c0.caret-pos--bottom-right .c3::after, .c0.caret-pos--bottom-left .c3::after { bottom: -14px; + border-top-color: #ffffff; } -.c0.caret-pos--top-right .c3, +.c0.caret-pos--top-right .c2, .c0.caret-pos--bottom-right .c3 { right: -9px; margin-right: 0; } -.c0.caret-pos--top-right .c3::before, +.c0.caret-pos--top-right .c2::before, .c0.caret-pos--bottom-right .c3::before, .c0.caret-pos--top-right .c3::after, .c0.caret-pos--bottom-right .c3::after { @@ -3849,23 +1941,23 @@ exports[`Popover renders correctly for a caret position of top 1`] = ` margin-left: 0; } -.c0.caret-pos--top-right .c3::before, +.c0.caret-pos--top-right .c2::before, .c0.caret-pos--bottom-right .c3::before { right: 20px; } -.c0.caret-pos--top-right .c3::after, +.c0.caret-pos--top-right .c2::after, .c0.caret-pos--bottom-right .c3::after { right: 21px; } -.c0.caret-pos--top-left .c3, +.c0.caret-pos--top-left .c2, .c0.caret-pos--bottom-left .c3 { left: -9px; margin-left: 0; } -.c0.caret-pos--top-left .c3::before, +.c0.caret-pos--top-left .c2::before, .c0.caret-pos--bottom-left .c3::before, .c0.caret-pos--top-left .c3::after, .c0.caret-pos--bottom-left .c3::after { @@ -3873,12 +1965,12 @@ exports[`Popover renders correctly for a caret position of top 1`] = ` margin-left: 0; } -.c0.caret-pos--top-left .c3::after, +.c0.caret-pos--top-left .c2::after, .c0.caret-pos--bottom-left .c3::after { left: calc(24px + 1px); } -.c0.caret-pos--right .c3::before, +.c0.caret-pos--right .c2::before, .c0.caret-pos--right-top .c3::before, .c0.caret-pos--right-bottom .c3::before, .c0.caret-pos--left .c3::before, @@ -3896,7 +1988,7 @@ exports[`Popover renders correctly for a caret position of top 1`] = ` border-bottom-color: transparent; } -.c0.caret-pos--right .c3::before, +.c0.caret-pos--right .c2::before, .c0.caret-pos--right-top .c3::before, .c0.caret-pos--right-bottom .c3::before, .c0.caret-pos--left .c3::before, @@ -3905,7 +1997,7 @@ exports[`Popover renders correctly for a caret position of top 1`] = ` margin-top: calc((8px + 1px) * -1); } -.c0.caret-pos--right .c3::after, +.c0.caret-pos--right .c2::after, .c0.caret-pos--right-top .c3::after, .c0.caret-pos--right-bottom .c3::after, .c0.caret-pos--left .c3::after, @@ -3914,74 +2006,78 @@ exports[`Popover renders correctly for a caret position of top 1`] = ` margin-top: -8px; } -.c0.caret-pos--right .c3::before, +.c0.caret-pos--right .c2::before, .c0.caret-pos--right-top .c3::before, .c0.caret-pos--right-bottom .c3::before { right: -16px; + border-left-color: #d0d7de; } -.c0.caret-pos--right .c3::after, +.c0.caret-pos--right .c2::after, .c0.caret-pos--right-top .c3::after, .c0.caret-pos--right-bottom .c3::after { right: -14px; + border-left-color: #ffffff; } -.c0.caret-pos--left .c3::before, +.c0.caret-pos--left .c2::before, .c0.caret-pos--left-top .c3::before, .c0.caret-pos--left-bottom .c3::before { left: -16px; + border-right-color: #d0d7de; } -.c0.caret-pos--left .c3::after, +.c0.caret-pos--left .c2::after, .c0.caret-pos--left-top .c3::after, .c0.caret-pos--left-bottom .c3::after { left: -14px; + border-right-color: #ffffff; } -.c0.caret-pos--right-top .c3::before, +.c0.caret-pos--right-top .c2::before, .c0.caret-pos--left-top .c3::before, .c0.caret-pos--right-top .c3::after, .c0.caret-pos--left-top .c3::after { top: 24px; } -.c0.caret-pos--right-bottom .c3::before, +.c0.caret-pos--right-bottom .c2::before, .c0.caret-pos--left-bottom .c3::before, .c0.caret-pos--right-bottom .c3::after, .c0.caret-pos--left-bottom .c3::after { top: auto; } -.c0.caret-pos--right-bottom .c3::before, +.c0.caret-pos--right-bottom .c2::before, .c0.caret-pos--left-bottom .c3::before { bottom: 16px; } -.c0.caret-pos--right-bottom .c3::after, +.c0.caret-pos--right-bottom .c2::after, .c0.caret-pos--left-bottom .c3::after { bottom: calc(16px + 1px); }
    Hello!
    `; -exports[`Popover renders correctly for a caret position of top-left 1`] = ` +exports[`Popover renders correctly for a caret position of right-top 1`] = ` .c1 { position: absolute; z-index: 100; display: block; } -.c2 { +.c3 { border: 1px solid #d0d7de; border-radius: 6px; position: relative; @@ -3992,22 +2088,22 @@ exports[`Popover renders correctly for a caret position of top-left 1`] = ` background-color: #ffffff; } -.c2::before, -.c2::after { +.c3::before, +.c3::after { position: absolute; left: 50%; display: inline-block; content: ''; } -.c2::before { +.c3::before { top: -16px; margin-left: -9px; border: 8px solid transparent; border-bottom-color: #d0d7de; } -.c2::after { +.c3::after { top: -14px; margin-left: -8px; border: 7px solid transparent; @@ -4015,84 +2111,84 @@ exports[`Popover renders correctly for a caret position of top-left 1`] = ` } .c0.caret-pos--bottom .c2::before, -.c0.caret-pos--bottom-right .c2::before, -.c0.caret-pos--bottom-left .c2::before, -.c0.caret-pos--bottom .c2::after, -.c0.caret-pos--bottom-right .c2::after, -.c0.caret-pos--bottom-left .c2::after { +.c0.caret-pos--bottom-right .c3::before, +.c0.caret-pos--bottom-left .c3::before, +.c0.caret-pos--bottom .c3::after, +.c0.caret-pos--bottom-right .c3::after, +.c0.caret-pos--bottom-left .c3::after { top: auto; border-bottom-color: transparent; } .c0.caret-pos--bottom .c2::before, -.c0.caret-pos--bottom-right .c2::before, -.c0.caret-pos--bottom-left .c2::before { +.c0.caret-pos--bottom-right .c3::before, +.c0.caret-pos--bottom-left .c3::before { bottom: -16px; border-top-color: #d0d7de; } .c0.caret-pos--bottom .c2::after, -.c0.caret-pos--bottom-right .c2::after, -.c0.caret-pos--bottom-left .c2::after { +.c0.caret-pos--bottom-right .c3::after, +.c0.caret-pos--bottom-left .c3::after { bottom: -14px; border-top-color: #ffffff; } .c0.caret-pos--top-right .c2, -.c0.caret-pos--bottom-right .c2 { +.c0.caret-pos--bottom-right .c3 { right: -9px; margin-right: 0; } .c0.caret-pos--top-right .c2::before, -.c0.caret-pos--bottom-right .c2::before, -.c0.caret-pos--top-right .c2::after, -.c0.caret-pos--bottom-right .c2::after { +.c0.caret-pos--bottom-right .c3::before, +.c0.caret-pos--top-right .c3::after, +.c0.caret-pos--bottom-right .c3::after { left: auto; margin-left: 0; } .c0.caret-pos--top-right .c2::before, -.c0.caret-pos--bottom-right .c2::before { +.c0.caret-pos--bottom-right .c3::before { right: 20px; } .c0.caret-pos--top-right .c2::after, -.c0.caret-pos--bottom-right .c2::after { +.c0.caret-pos--bottom-right .c3::after { right: 21px; } .c0.caret-pos--top-left .c2, -.c0.caret-pos--bottom-left .c2 { +.c0.caret-pos--bottom-left .c3 { left: -9px; margin-left: 0; } .c0.caret-pos--top-left .c2::before, -.c0.caret-pos--bottom-left .c2::before, -.c0.caret-pos--top-left .c2::after, -.c0.caret-pos--bottom-left .c2::after { +.c0.caret-pos--bottom-left .c3::before, +.c0.caret-pos--top-left .c3::after, +.c0.caret-pos--bottom-left .c3::after { left: 24px; margin-left: 0; } .c0.caret-pos--top-left .c2::after, -.c0.caret-pos--bottom-left .c2::after { +.c0.caret-pos--bottom-left .c3::after { left: calc(24px + 1px); } .c0.caret-pos--right .c2::before, -.c0.caret-pos--right-top .c2::before, -.c0.caret-pos--right-bottom .c2::before, -.c0.caret-pos--left .c2::before, -.c0.caret-pos--left-top .c2::before, -.c0.caret-pos--left-bottom .c2::before, -.c0.caret-pos--right .c2::after, -.c0.caret-pos--right-top .c2::after, -.c0.caret-pos--right-bottom .c2::after, -.c0.caret-pos--left .c2::after, -.c0.caret-pos--left-top .c2::after, -.c0.caret-pos--left-bottom .c2::after { +.c0.caret-pos--right-top .c3::before, +.c0.caret-pos--right-bottom .c3::before, +.c0.caret-pos--left .c3::before, +.c0.caret-pos--left-top .c3::before, +.c0.caret-pos--left-bottom .c3::before, +.c0.caret-pos--right .c3::after, +.c0.caret-pos--right-top .c3::after, +.c0.caret-pos--right-bottom .c3::after, +.c0.caret-pos--left .c3::after, +.c0.caret-pos--left-top .c3::after, +.c0.caret-pos--left-bottom .c3::after { top: 50%; left: auto; margin-left: 0; @@ -4100,76 +2196,128 @@ exports[`Popover renders correctly for a caret position of top-left 1`] = ` } .c0.caret-pos--right .c2::before, -.c0.caret-pos--right-top .c2::before, -.c0.caret-pos--right-bottom .c2::before, -.c0.caret-pos--left .c2::before, -.c0.caret-pos--left-top .c2::before, -.c0.caret-pos--left-bottom .c2::before { +.c0.caret-pos--right-top .c3::before, +.c0.caret-pos--right-bottom .c3::before, +.c0.caret-pos--left .c3::before, +.c0.caret-pos--left-top .c3::before, +.c0.caret-pos--left-bottom .c3::before { margin-top: calc((8px + 1px) * -1); } .c0.caret-pos--right .c2::after, -.c0.caret-pos--right-top .c2::after, -.c0.caret-pos--right-bottom .c2::after, -.c0.caret-pos--left .c2::after, -.c0.caret-pos--left-top .c2::after, -.c0.caret-pos--left-bottom .c2::after { +.c0.caret-pos--right-top .c3::after, +.c0.caret-pos--right-bottom .c3::after, +.c0.caret-pos--left .c3::after, +.c0.caret-pos--left-top .c3::after, +.c0.caret-pos--left-bottom .c3::after { margin-top: -8px; } .c0.caret-pos--right .c2::before, -.c0.caret-pos--right-top .c2::before, -.c0.caret-pos--right-bottom .c2::before { +.c0.caret-pos--right-top .c3::before, +.c0.caret-pos--right-bottom .c3::before { right: -16px; border-left-color: #d0d7de; } .c0.caret-pos--right .c2::after, -.c0.caret-pos--right-top .c2::after, -.c0.caret-pos--right-bottom .c2::after { +.c0.caret-pos--right-top .c3::after, +.c0.caret-pos--right-bottom .c3::after { right: -14px; border-left-color: #ffffff; } .c0.caret-pos--left .c2::before, -.c0.caret-pos--left-top .c2::before, -.c0.caret-pos--left-bottom .c2::before { +.c0.caret-pos--left-top .c3::before, +.c0.caret-pos--left-bottom .c3::before { left: -16px; border-right-color: #d0d7de; } .c0.caret-pos--left .c2::after, -.c0.caret-pos--left-top .c2::after, -.c0.caret-pos--left-bottom .c2::after { +.c0.caret-pos--left-top .c3::after, +.c0.caret-pos--left-bottom .c3::after { left: -14px; border-right-color: #ffffff; } .c0.caret-pos--right-top .c2::before, -.c0.caret-pos--left-top .c2::before, -.c0.caret-pos--right-top .c2::after, -.c0.caret-pos--left-top .c2::after { +.c0.caret-pos--left-top .c3::before, +.c0.caret-pos--right-top .c3::after, +.c0.caret-pos--left-top .c3::after { top: 24px; } .c0.caret-pos--right-bottom .c2::before, -.c0.caret-pos--left-bottom .c2::before, -.c0.caret-pos--right-bottom .c2::after, -.c0.caret-pos--left-bottom .c2::after { +.c0.caret-pos--left-bottom .c3::before, +.c0.caret-pos--right-bottom .c3::after, +.c0.caret-pos--left-bottom .c3::after { top: auto; } .c0.caret-pos--right-bottom .c2::before, -.c0.caret-pos--left-bottom .c2::before { +.c0.caret-pos--left-bottom .c3::before { bottom: 16px; } .c0.caret-pos--right-bottom .c2::after, -.c0.caret-pos--left-bottom .c2::after { +.c0.caret-pos--left-bottom .c3::after { bottom: calc(16px + 1px); } -.c0.caret-pos--bottom .c3::before, +
    +
    + Hello! +
    +
    +`; + +exports[`Popover renders correctly for a caret position of top 1`] = ` +.c1 { + position: absolute; + z-index: 100; + display: block; +} + +.c3 { + border: 1px solid #d0d7de; + border-radius: 6px; + position: relative; + width: 232px; + margin-right: auto; + margin-left: auto; + padding: 24px; + background-color: #ffffff; +} + +.c3::before, +.c3::after { + position: absolute; + left: 50%; + display: inline-block; + content: ''; +} + +.c3::before { + top: -16px; + margin-left: -9px; + border: 8px solid transparent; + border-bottom-color: #d0d7de; +} + +.c3::after { + top: -14px; + margin-left: -8px; + border: 7px solid transparent; + border-bottom-color: #ffffff; +} + +.c0.caret-pos--bottom .c2::before, .c0.caret-pos--bottom-right .c3::before, .c0.caret-pos--bottom-left .c3::before, .c0.caret-pos--bottom .c3::after, @@ -4179,25 +2327,27 @@ exports[`Popover renders correctly for a caret position of top-left 1`] = ` border-bottom-color: transparent; } -.c0.caret-pos--bottom .c3::before, +.c0.caret-pos--bottom .c2::before, .c0.caret-pos--bottom-right .c3::before, .c0.caret-pos--bottom-left .c3::before { bottom: -16px; + border-top-color: #d0d7de; } -.c0.caret-pos--bottom .c3::after, +.c0.caret-pos--bottom .c2::after, .c0.caret-pos--bottom-right .c3::after, .c0.caret-pos--bottom-left .c3::after { bottom: -14px; + border-top-color: #ffffff; } -.c0.caret-pos--top-right .c3, +.c0.caret-pos--top-right .c2, .c0.caret-pos--bottom-right .c3 { right: -9px; margin-right: 0; } -.c0.caret-pos--top-right .c3::before, +.c0.caret-pos--top-right .c2::before, .c0.caret-pos--bottom-right .c3::before, .c0.caret-pos--top-right .c3::after, .c0.caret-pos--bottom-right .c3::after { @@ -4205,23 +2355,23 @@ exports[`Popover renders correctly for a caret position of top-left 1`] = ` margin-left: 0; } -.c0.caret-pos--top-right .c3::before, +.c0.caret-pos--top-right .c2::before, .c0.caret-pos--bottom-right .c3::before { right: 20px; } -.c0.caret-pos--top-right .c3::after, +.c0.caret-pos--top-right .c2::after, .c0.caret-pos--bottom-right .c3::after { right: 21px; } -.c0.caret-pos--top-left .c3, +.c0.caret-pos--top-left .c2, .c0.caret-pos--bottom-left .c3 { left: -9px; margin-left: 0; } -.c0.caret-pos--top-left .c3::before, +.c0.caret-pos--top-left .c2::before, .c0.caret-pos--bottom-left .c3::before, .c0.caret-pos--top-left .c3::after, .c0.caret-pos--bottom-left .c3::after { @@ -4229,12 +2379,12 @@ exports[`Popover renders correctly for a caret position of top-left 1`] = ` margin-left: 0; } -.c0.caret-pos--top-left .c3::after, +.c0.caret-pos--top-left .c2::after, .c0.caret-pos--bottom-left .c3::after { left: calc(24px + 1px); } -.c0.caret-pos--right .c3::before, +.c0.caret-pos--right .c2::before, .c0.caret-pos--right-top .c3::before, .c0.caret-pos--right-bottom .c3::before, .c0.caret-pos--left .c3::before, @@ -4252,7 +2402,7 @@ exports[`Popover renders correctly for a caret position of top-left 1`] = ` border-bottom-color: transparent; } -.c0.caret-pos--right .c3::before, +.c0.caret-pos--right .c2::before, .c0.caret-pos--right-top .c3::before, .c0.caret-pos--right-bottom .c3::before, .c0.caret-pos--left .c3::before, @@ -4261,7 +2411,7 @@ exports[`Popover renders correctly for a caret position of top-left 1`] = ` margin-top: calc((8px + 1px) * -1); } -.c0.caret-pos--right .c3::after, +.c0.caret-pos--right .c2::after, .c0.caret-pos--right-top .c3::after, .c0.caret-pos--right-bottom .c3::after, .c0.caret-pos--left .c3::after, @@ -4270,74 +2420,78 @@ exports[`Popover renders correctly for a caret position of top-left 1`] = ` margin-top: -8px; } -.c0.caret-pos--right .c3::before, +.c0.caret-pos--right .c2::before, .c0.caret-pos--right-top .c3::before, .c0.caret-pos--right-bottom .c3::before { right: -16px; + border-left-color: #d0d7de; } -.c0.caret-pos--right .c3::after, +.c0.caret-pos--right .c2::after, .c0.caret-pos--right-top .c3::after, .c0.caret-pos--right-bottom .c3::after { right: -14px; + border-left-color: #ffffff; } -.c0.caret-pos--left .c3::before, +.c0.caret-pos--left .c2::before, .c0.caret-pos--left-top .c3::before, .c0.caret-pos--left-bottom .c3::before { left: -16px; + border-right-color: #d0d7de; } -.c0.caret-pos--left .c3::after, +.c0.caret-pos--left .c2::after, .c0.caret-pos--left-top .c3::after, .c0.caret-pos--left-bottom .c3::after { left: -14px; + border-right-color: #ffffff; } -.c0.caret-pos--right-top .c3::before, +.c0.caret-pos--right-top .c2::before, .c0.caret-pos--left-top .c3::before, .c0.caret-pos--right-top .c3::after, .c0.caret-pos--left-top .c3::after { top: 24px; } -.c0.caret-pos--right-bottom .c3::before, +.c0.caret-pos--right-bottom .c2::before, .c0.caret-pos--left-bottom .c3::before, .c0.caret-pos--right-bottom .c3::after, .c0.caret-pos--left-bottom .c3::after { top: auto; } -.c0.caret-pos--right-bottom .c3::before, +.c0.caret-pos--right-bottom .c2::before, .c0.caret-pos--left-bottom .c3::before { bottom: 16px; } -.c0.caret-pos--right-bottom .c3::after, +.c0.caret-pos--right-bottom .c2::after, .c0.caret-pos--left-bottom .c3::after { bottom: calc(16px + 1px); }
    Hello!
    `; -exports[`Popover renders correctly for a caret position of top-right 1`] = ` +exports[`Popover renders correctly for a caret position of top-left 1`] = ` .c1 { position: absolute; z-index: 100; display: block; } -.c2 { +.c3 { border: 1px solid #d0d7de; border-radius: 6px; position: relative; @@ -4348,22 +2502,22 @@ exports[`Popover renders correctly for a caret position of top-right 1`] = ` background-color: #ffffff; } -.c2::before, -.c2::after { +.c3::before, +.c3::after { position: absolute; left: 50%; display: inline-block; content: ''; } -.c2::before { +.c3::before { top: -16px; margin-left: -9px; border: 8px solid transparent; border-bottom-color: #d0d7de; } -.c2::after { +.c3::after { top: -14px; margin-left: -8px; border: 7px solid transparent; @@ -4371,84 +2525,84 @@ exports[`Popover renders correctly for a caret position of top-right 1`] = ` } .c0.caret-pos--bottom .c2::before, -.c0.caret-pos--bottom-right .c2::before, -.c0.caret-pos--bottom-left .c2::before, -.c0.caret-pos--bottom .c2::after, -.c0.caret-pos--bottom-right .c2::after, -.c0.caret-pos--bottom-left .c2::after { +.c0.caret-pos--bottom-right .c3::before, +.c0.caret-pos--bottom-left .c3::before, +.c0.caret-pos--bottom .c3::after, +.c0.caret-pos--bottom-right .c3::after, +.c0.caret-pos--bottom-left .c3::after { top: auto; border-bottom-color: transparent; } .c0.caret-pos--bottom .c2::before, -.c0.caret-pos--bottom-right .c2::before, -.c0.caret-pos--bottom-left .c2::before { +.c0.caret-pos--bottom-right .c3::before, +.c0.caret-pos--bottom-left .c3::before { bottom: -16px; border-top-color: #d0d7de; } .c0.caret-pos--bottom .c2::after, -.c0.caret-pos--bottom-right .c2::after, -.c0.caret-pos--bottom-left .c2::after { +.c0.caret-pos--bottom-right .c3::after, +.c0.caret-pos--bottom-left .c3::after { bottom: -14px; border-top-color: #ffffff; } .c0.caret-pos--top-right .c2, -.c0.caret-pos--bottom-right .c2 { +.c0.caret-pos--bottom-right .c3 { right: -9px; margin-right: 0; } .c0.caret-pos--top-right .c2::before, -.c0.caret-pos--bottom-right .c2::before, -.c0.caret-pos--top-right .c2::after, -.c0.caret-pos--bottom-right .c2::after { +.c0.caret-pos--bottom-right .c3::before, +.c0.caret-pos--top-right .c3::after, +.c0.caret-pos--bottom-right .c3::after { left: auto; margin-left: 0; } .c0.caret-pos--top-right .c2::before, -.c0.caret-pos--bottom-right .c2::before { +.c0.caret-pos--bottom-right .c3::before { right: 20px; } .c0.caret-pos--top-right .c2::after, -.c0.caret-pos--bottom-right .c2::after { +.c0.caret-pos--bottom-right .c3::after { right: 21px; } .c0.caret-pos--top-left .c2, -.c0.caret-pos--bottom-left .c2 { +.c0.caret-pos--bottom-left .c3 { left: -9px; margin-left: 0; } .c0.caret-pos--top-left .c2::before, -.c0.caret-pos--bottom-left .c2::before, -.c0.caret-pos--top-left .c2::after, -.c0.caret-pos--bottom-left .c2::after { +.c0.caret-pos--bottom-left .c3::before, +.c0.caret-pos--top-left .c3::after, +.c0.caret-pos--bottom-left .c3::after { left: 24px; margin-left: 0; } .c0.caret-pos--top-left .c2::after, -.c0.caret-pos--bottom-left .c2::after { +.c0.caret-pos--bottom-left .c3::after { left: calc(24px + 1px); } .c0.caret-pos--right .c2::before, -.c0.caret-pos--right-top .c2::before, -.c0.caret-pos--right-bottom .c2::before, -.c0.caret-pos--left .c2::before, -.c0.caret-pos--left-top .c2::before, -.c0.caret-pos--left-bottom .c2::before, -.c0.caret-pos--right .c2::after, -.c0.caret-pos--right-top .c2::after, -.c0.caret-pos--right-bottom .c2::after, -.c0.caret-pos--left .c2::after, -.c0.caret-pos--left-top .c2::after, -.c0.caret-pos--left-bottom .c2::after { +.c0.caret-pos--right-top .c3::before, +.c0.caret-pos--right-bottom .c3::before, +.c0.caret-pos--left .c3::before, +.c0.caret-pos--left-top .c3::before, +.c0.caret-pos--left-bottom .c3::before, +.c0.caret-pos--right .c3::after, +.c0.caret-pos--right-top .c3::after, +.c0.caret-pos--right-bottom .c3::after, +.c0.caret-pos--left .c3::after, +.c0.caret-pos--left-top .c3::after, +.c0.caret-pos--left-bottom .c3::after { top: 50%; left: auto; margin-left: 0; @@ -4456,76 +2610,128 @@ exports[`Popover renders correctly for a caret position of top-right 1`] = ` } .c0.caret-pos--right .c2::before, -.c0.caret-pos--right-top .c2::before, -.c0.caret-pos--right-bottom .c2::before, -.c0.caret-pos--left .c2::before, -.c0.caret-pos--left-top .c2::before, -.c0.caret-pos--left-bottom .c2::before { +.c0.caret-pos--right-top .c3::before, +.c0.caret-pos--right-bottom .c3::before, +.c0.caret-pos--left .c3::before, +.c0.caret-pos--left-top .c3::before, +.c0.caret-pos--left-bottom .c3::before { margin-top: calc((8px + 1px) * -1); } .c0.caret-pos--right .c2::after, -.c0.caret-pos--right-top .c2::after, -.c0.caret-pos--right-bottom .c2::after, -.c0.caret-pos--left .c2::after, -.c0.caret-pos--left-top .c2::after, -.c0.caret-pos--left-bottom .c2::after { +.c0.caret-pos--right-top .c3::after, +.c0.caret-pos--right-bottom .c3::after, +.c0.caret-pos--left .c3::after, +.c0.caret-pos--left-top .c3::after, +.c0.caret-pos--left-bottom .c3::after { margin-top: -8px; } .c0.caret-pos--right .c2::before, -.c0.caret-pos--right-top .c2::before, -.c0.caret-pos--right-bottom .c2::before { +.c0.caret-pos--right-top .c3::before, +.c0.caret-pos--right-bottom .c3::before { right: -16px; border-left-color: #d0d7de; } .c0.caret-pos--right .c2::after, -.c0.caret-pos--right-top .c2::after, -.c0.caret-pos--right-bottom .c2::after { +.c0.caret-pos--right-top .c3::after, +.c0.caret-pos--right-bottom .c3::after { right: -14px; border-left-color: #ffffff; } .c0.caret-pos--left .c2::before, -.c0.caret-pos--left-top .c2::before, -.c0.caret-pos--left-bottom .c2::before { +.c0.caret-pos--left-top .c3::before, +.c0.caret-pos--left-bottom .c3::before { left: -16px; border-right-color: #d0d7de; } .c0.caret-pos--left .c2::after, -.c0.caret-pos--left-top .c2::after, -.c0.caret-pos--left-bottom .c2::after { +.c0.caret-pos--left-top .c3::after, +.c0.caret-pos--left-bottom .c3::after { left: -14px; border-right-color: #ffffff; } .c0.caret-pos--right-top .c2::before, -.c0.caret-pos--left-top .c2::before, -.c0.caret-pos--right-top .c2::after, -.c0.caret-pos--left-top .c2::after { +.c0.caret-pos--left-top .c3::before, +.c0.caret-pos--right-top .c3::after, +.c0.caret-pos--left-top .c3::after { top: 24px; } .c0.caret-pos--right-bottom .c2::before, -.c0.caret-pos--left-bottom .c2::before, -.c0.caret-pos--right-bottom .c2::after, -.c0.caret-pos--left-bottom .c2::after { +.c0.caret-pos--left-bottom .c3::before, +.c0.caret-pos--right-bottom .c3::after, +.c0.caret-pos--left-bottom .c3::after { top: auto; } .c0.caret-pos--right-bottom .c2::before, -.c0.caret-pos--left-bottom .c2::before { +.c0.caret-pos--left-bottom .c3::before { bottom: 16px; } .c0.caret-pos--right-bottom .c2::after, -.c0.caret-pos--left-bottom .c2::after { +.c0.caret-pos--left-bottom .c3::after { bottom: calc(16px + 1px); } -.c0.caret-pos--bottom .c3::before, +
    +
    + Hello! +
    +
    +`; + +exports[`Popover renders correctly for a caret position of top-right 1`] = ` +.c1 { + position: absolute; + z-index: 100; + display: block; +} + +.c3 { + border: 1px solid #d0d7de; + border-radius: 6px; + position: relative; + width: 232px; + margin-right: auto; + margin-left: auto; + padding: 24px; + background-color: #ffffff; +} + +.c3::before, +.c3::after { + position: absolute; + left: 50%; + display: inline-block; + content: ''; +} + +.c3::before { + top: -16px; + margin-left: -9px; + border: 8px solid transparent; + border-bottom-color: #d0d7de; +} + +.c3::after { + top: -14px; + margin-left: -8px; + border: 7px solid transparent; + border-bottom-color: #ffffff; +} + +.c0.caret-pos--bottom .c2::before, .c0.caret-pos--bottom-right .c3::before, .c0.caret-pos--bottom-left .c3::before, .c0.caret-pos--bottom .c3::after, @@ -4535,25 +2741,27 @@ exports[`Popover renders correctly for a caret position of top-right 1`] = ` border-bottom-color: transparent; } -.c0.caret-pos--bottom .c3::before, +.c0.caret-pos--bottom .c2::before, .c0.caret-pos--bottom-right .c3::before, .c0.caret-pos--bottom-left .c3::before { bottom: -16px; + border-top-color: #d0d7de; } -.c0.caret-pos--bottom .c3::after, +.c0.caret-pos--bottom .c2::after, .c0.caret-pos--bottom-right .c3::after, .c0.caret-pos--bottom-left .c3::after { bottom: -14px; + border-top-color: #ffffff; } -.c0.caret-pos--top-right .c3, +.c0.caret-pos--top-right .c2, .c0.caret-pos--bottom-right .c3 { right: -9px; margin-right: 0; } -.c0.caret-pos--top-right .c3::before, +.c0.caret-pos--top-right .c2::before, .c0.caret-pos--bottom-right .c3::before, .c0.caret-pos--top-right .c3::after, .c0.caret-pos--bottom-right .c3::after { @@ -4561,23 +2769,23 @@ exports[`Popover renders correctly for a caret position of top-right 1`] = ` margin-left: 0; } -.c0.caret-pos--top-right .c3::before, +.c0.caret-pos--top-right .c2::before, .c0.caret-pos--bottom-right .c3::before { right: 20px; } -.c0.caret-pos--top-right .c3::after, +.c0.caret-pos--top-right .c2::after, .c0.caret-pos--bottom-right .c3::after { right: 21px; } -.c0.caret-pos--top-left .c3, +.c0.caret-pos--top-left .c2, .c0.caret-pos--bottom-left .c3 { left: -9px; margin-left: 0; } -.c0.caret-pos--top-left .c3::before, +.c0.caret-pos--top-left .c2::before, .c0.caret-pos--bottom-left .c3::before, .c0.caret-pos--top-left .c3::after, .c0.caret-pos--bottom-left .c3::after { @@ -4585,12 +2793,12 @@ exports[`Popover renders correctly for a caret position of top-right 1`] = ` margin-left: 0; } -.c0.caret-pos--top-left .c3::after, +.c0.caret-pos--top-left .c2::after, .c0.caret-pos--bottom-left .c3::after { left: calc(24px + 1px); } -.c0.caret-pos--right .c3::before, +.c0.caret-pos--right .c2::before, .c0.caret-pos--right-top .c3::before, .c0.caret-pos--right-bottom .c3::before, .c0.caret-pos--left .c3::before, @@ -4608,7 +2816,7 @@ exports[`Popover renders correctly for a caret position of top-right 1`] = ` border-bottom-color: transparent; } -.c0.caret-pos--right .c3::before, +.c0.caret-pos--right .c2::before, .c0.caret-pos--right-top .c3::before, .c0.caret-pos--right-bottom .c3::before, .c0.caret-pos--left .c3::before, @@ -4617,7 +2825,7 @@ exports[`Popover renders correctly for a caret position of top-right 1`] = ` margin-top: calc((8px + 1px) * -1); } -.c0.caret-pos--right .c3::after, +.c0.caret-pos--right .c2::after, .c0.caret-pos--right-top .c3::after, .c0.caret-pos--right-bottom .c3::after, .c0.caret-pos--left .c3::after, @@ -4626,50 +2834,54 @@ exports[`Popover renders correctly for a caret position of top-right 1`] = ` margin-top: -8px; } -.c0.caret-pos--right .c3::before, +.c0.caret-pos--right .c2::before, .c0.caret-pos--right-top .c3::before, .c0.caret-pos--right-bottom .c3::before { right: -16px; + border-left-color: #d0d7de; } -.c0.caret-pos--right .c3::after, +.c0.caret-pos--right .c2::after, .c0.caret-pos--right-top .c3::after, .c0.caret-pos--right-bottom .c3::after { right: -14px; + border-left-color: #ffffff; } -.c0.caret-pos--left .c3::before, +.c0.caret-pos--left .c2::before, .c0.caret-pos--left-top .c3::before, .c0.caret-pos--left-bottom .c3::before { left: -16px; + border-right-color: #d0d7de; } -.c0.caret-pos--left .c3::after, +.c0.caret-pos--left .c2::after, .c0.caret-pos--left-top .c3::after, .c0.caret-pos--left-bottom .c3::after { left: -14px; + border-right-color: #ffffff; } -.c0.caret-pos--right-top .c3::before, +.c0.caret-pos--right-top .c2::before, .c0.caret-pos--left-top .c3::before, .c0.caret-pos--right-top .c3::after, .c0.caret-pos--left-top .c3::after { top: 24px; } -.c0.caret-pos--right-bottom .c3::before, +.c0.caret-pos--right-bottom .c2::before, .c0.caret-pos--left-bottom .c3::before, .c0.caret-pos--right-bottom .c3::after, .c0.caret-pos--left-bottom .c3::after { top: auto; } -.c0.caret-pos--right-bottom .c3::before, +.c0.caret-pos--right-bottom .c2::before, .c0.caret-pos--left-bottom .c3::before { bottom: 16px; } -.c0.caret-pos--right-bottom .c3::after, +.c0.caret-pos--right-bottom .c2::after, .c0.caret-pos--left-bottom .c3::after { bottom: calc(16px + 1px); } @@ -4679,7 +2891,7 @@ exports[`Popover renders correctly for a caret position of top-right 1`] = ` open={true} >
    Hello!
    diff --git a/src/__tests__/__snapshots__/SideNav.test.tsx.snap b/src/__tests__/__snapshots__/SideNav.test.tsx.snap index d54bec24567..d26dbaf999a 100644 --- a/src/__tests__/__snapshots__/SideNav.test.tsx.snap +++ b/src/__tests__/__snapshots__/SideNav.test.tsx.snap @@ -37,88 +37,6 @@ exports[`SideNav SideNav.Link renders consistently 1`] = ` font-size: 14px; } -.c1 > .c2 { - border-bottom: none; -} - -.c2.variant-normal > .c1 { - color: #1F2328; - padding: 16px; - border: 0; - border-top: 1px solid hsla(210,18%,87%,1); -} - -.c2.variant-normal > .c1:first-child { - border-top: 0; - border-top-right-radius: 6px; - border-top-left-radius: 6px; -} - -.c2.variant-normal > .c1:last-child { - border-bottom-right-radius: 6px; - border-bottom-left-radius: 6px; -} - -.c2.variant-normal > .c1::before { - position: absolute; - top: 0; - bottom: 0; - left: 0; - z-index: 1; - width: 3px; - pointer-events: none; - content: ''; -} - -.c2.variant-normal > .c1:hover { - background-color: rgba(234,238,242,0.5); - -webkit-text-decoration: none; - text-decoration: none; -} - -.c2.variant-normal > .c1:focus { - background-color: rgba(234,238,242,0.5); - -webkit-text-decoration: none; - text-decoration: none; - outline: solid 2px #0969da; - z-index: 1; -} - -.c2.variant-normal > .c1[aria-current='page'], -.c2.variant-normal > .c1[aria-selected='true'] { - background-color: #ffffff; -} - -.c2.variant-normal > .c1[aria-current='page']::before, -.c2.variant-normal > .c1[aria-selected='true']::before { - background-color: #fd8c73; -} - -.c2.variant-lightweight > .c1 { - padding: 4px 0; - color: #0969da; -} - -.c2.variant-lightweight > .c1:hover { - color: #1F2328; - -webkit-text-decoration: none; - text-decoration: none; -} - -.c2.variant-lightweight > .c1:focus { - color: #1F2328; - -webkit-text-decoration: none; - text-decoration: none; - outline: solid 1px #0969da; - z-index: 1; -} - -.c2.variant-lightweight > .c1[aria-current='page'], -.c2.variant-lightweight > .c1[aria-selected='true'] { - color: #1F2328; - font-weight: 500; -} -
    diff --git a/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/__tests__/__snapshots__/TextInput.test.tsx.snap index 27312a90434..01df5fda7fe 100644 --- a/src/__tests__/__snapshots__/TextInput.test.tsx.snap +++ b/src/__tests__/__snapshots__/TextInput.test.tsx.snap @@ -20,10 +20,6 @@ exports[`TextInput renders 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; - background-repeat: no-repeat; - background-position: right 8px center; - padding-left: 0; - padding-right: 0; } .c0 input, @@ -61,12 +57,19 @@ exports[`TextInput renders 1`] = ` padding: 12px; } -.c0 > :not(:last-child) { +.c1 { + background-repeat: no-repeat; + background-position: right 8px center; + padding-left: 0; + padding-right: 0; +} + +.c1 > :not(:last-child) { margin-right: 8px; } -.c0 .TextInput-icon, -.c0 .TextInput-action { +.c1 .TextInput-icon, +.c1 .TextInput-action { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; @@ -76,13 +79,13 @@ exports[`TextInput renders 1`] = ` flex-shrink: 0; } -.c0 > input, -.c0 > select { +.c1 > input, +.c1 > select { padding-left: 12px; padding-right: 12px; } -.c1 { +.c2 { border: 0; font-size: inherit; font-family: inherit; @@ -92,7 +95,7 @@ exports[`TextInput renders 1`] = ` width: 100%; } -.c1:focus { +.c2:focus { outline: 0; } @@ -104,11 +107,11 @@ exports[`TextInput renders 1`] = ` :not(:last-child) { +.c1 { + background-repeat: no-repeat; + background-position: right 8px center; + padding-left: 0; + padding-right: 0; +} + +.c1 > :not(:last-child) { margin-right: 8px; } -.c0 .TextInput-icon, -.c0 .TextInput-action { +.c1 .TextInput-icon, +.c1 .TextInput-action { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; @@ -202,13 +208,13 @@ exports[`TextInput renders block 1`] = ` flex-shrink: 0; } -.c0 > input, -.c0 > select { +.c1 > input, +.c1 > select { padding-left: 12px; padding-right: 12px; } -.c1 { +.c2 { border: 0; font-size: inherit; font-family: inherit; @@ -218,7 +224,7 @@ exports[`TextInput renders block 1`] = ` width: 100%; } -.c1:focus { +.c2:focus { outline: 0; } @@ -230,11 +236,11 @@ exports[`TextInput renders block 1`] = ` :not(:last-child) { +.c1 { + background-repeat: no-repeat; + background-position: right 8px center; + padding-left: 0; + padding-right: 0; +} + +.c1 > :not(:last-child) { margin-right: 8px; } -.c0 .TextInput-icon, -.c0 .TextInput-action { +.c1 .TextInput-icon, +.c1 .TextInput-action { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; @@ -320,13 +329,13 @@ exports[`TextInput renders consistently 1`] = ` flex-shrink: 0; } -.c0 > input, -.c0 > select { +.c1 > input, +.c1 > select { padding-left: 12px; padding-right: 12px; } -.c1 { +.c2 { border: 0; font-size: inherit; font-family: inherit; @@ -336,7 +345,7 @@ exports[`TextInput renders consistently 1`] = ` width: 100%; } -.c1:focus { +.c2:focus { outline: 0; } @@ -348,11 +357,11 @@ exports[`TextInput renders consistently 1`] = ` :not(:last-child) { +.c1 { + background-repeat: no-repeat; + background-position: right 8px center; + padding-left: 0; + padding-right: 0; +} + +.c1 > :not(:last-child) { margin-right: 8px; } -.c0 .TextInput-icon, -.c0 .TextInput-action { +.c1 .TextInput-icon, +.c1 .TextInput-action { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; @@ -438,13 +450,13 @@ exports[`TextInput renders contrast 1`] = ` flex-shrink: 0; } -.c0 > input, -.c0 > select { +.c1 > input, +.c1 > select { padding-left: 12px; padding-right: 12px; } -.c1 { +.c2 { border: 0; font-size: inherit; font-family: inherit; @@ -454,7 +466,7 @@ exports[`TextInput renders contrast 1`] = ` width: 100%; } -.c1:focus { +.c2:focus { outline: 0; } @@ -466,11 +478,11 @@ exports[`TextInput renders contrast 1`] = ` :not(:last-child) { +.c1 { + background-repeat: no-repeat; + background-position: right 8px center; + padding-left: 0; + padding-right: 0; +} + +.c1 > :not(:last-child) { margin-right: 8px; } -.c0 .TextInput-icon, -.c0 .TextInput-action { +.c1 .TextInput-icon, +.c1 .TextInput-action { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; @@ -563,13 +578,13 @@ exports[`TextInput renders error 1`] = ` flex-shrink: 0; } -.c0 > input, -.c0 > select { +.c1 > input, +.c1 > select { padding-left: 12px; padding-right: 12px; } -.c1 { +.c2 { border: 0; font-size: inherit; font-family: inherit; @@ -579,7 +594,7 @@ exports[`TextInput renders error 1`] = ` width: 100%; } -.c1:focus { +.c2:focus { outline: 0; } @@ -591,11 +606,11 @@ exports[`TextInput renders error 1`] = ` :not(:last-child) { +.c1 { + background-repeat: no-repeat; + background-position: right 8px center; + padding-left: 0; + padding-right: 0; +} + +.c1 > :not(:last-child) { margin-right: 8px; } -.c0 .TextInput-icon, -.c0 .TextInput-action { +.c1 .TextInput-icon, +.c1 .TextInput-action { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; @@ -687,13 +705,13 @@ exports[`TextInput renders large 1`] = ` flex-shrink: 0; } -.c0 > input, -.c0 > select { +.c1 > input, +.c1 > select { padding-left: 12px; padding-right: 12px; } -.c1 { +.c2 { border: 0; font-size: inherit; font-family: inherit; @@ -703,7 +721,7 @@ exports[`TextInput renders large 1`] = ` width: 100%; } -.c1:focus { +.c2:focus { outline: 0; } @@ -715,12 +733,12 @@ exports[`TextInput renders large 1`] = ` :not(:last-child) { +.c1 { + background-repeat: no-repeat; + background-position: right 8px center; + padding-left: 12px; + padding-right: 0; +} + +.c1 > :not(:last-child) { margin-right: 8px; } -.c0 .TextInput-icon, -.c0 .TextInput-action { +.c1 .TextInput-icon, +.c1 .TextInput-action { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; @@ -806,13 +827,13 @@ exports[`TextInput renders leadingVisual 1`] = ` flex-shrink: 0; } -.c0 > input, -.c0 > select { +.c1 > input, +.c1 > select { padding-left: 0; padding-right: 12px; } -.c1 { +.c2 { border: 0; font-size: inherit; font-family: inherit; @@ -822,7 +843,7 @@ exports[`TextInput renders leadingVisual 1`] = ` width: 100%; } -.c1:focus { +.c2:focus { outline: 0; } @@ -834,7 +855,7 @@ exports[`TextInput renders leadingVisual 1`] = ` :not(:last-child) { +.c1 { + background-repeat: no-repeat; + background-position: right 8px center; + padding-left: 12px; + padding-right: 0; +} + +.c1 > :not(:last-child) { margin-right: 8px; } -.c0 .TextInput-icon, -.c0 .TextInput-action { +.c1 .TextInput-icon, +.c1 .TextInput-action { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; @@ -951,13 +975,13 @@ exports[`TextInput renders leadingVisual 2`] = ` flex-shrink: 0; } -.c0 > input, -.c0 > select { +.c1 > input, +.c1 > select { padding-left: 0; padding-right: 12px; } -.c1 { +.c2 { border: 0; font-size: inherit; font-family: inherit; @@ -967,7 +991,7 @@ exports[`TextInput renders leadingVisual 2`] = ` width: 100%; } -.c1:focus { +.c2:focus { outline: 0; } @@ -979,7 +1003,7 @@ exports[`TextInput renders leadingVisual 2`] = ` :not(:last-child) { +.c1 { + background-repeat: no-repeat; + background-position: right 8px center; + padding-left: 12px; + padding-right: 0; +} + +.c1 > :not(:last-child) { margin-right: 8px; } -.c0 .TextInput-icon, -.c0 .TextInput-action { +.c1 .TextInput-icon, +.c1 .TextInput-action { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; @@ -1096,13 +1123,13 @@ exports[`TextInput renders leadingVisual 3`] = ` flex-shrink: 0; } -.c0 > input, -.c0 > select { +.c1 > input, +.c1 > select { padding-left: 0; padding-right: 12px; } -.c1 { +.c2 { border: 0; font-size: inherit; font-family: inherit; @@ -1112,7 +1139,7 @@ exports[`TextInput renders leadingVisual 3`] = ` width: 100%; } -.c1:focus { +.c2:focus { outline: 0; } @@ -1124,7 +1151,7 @@ exports[`TextInput renders leadingVisual 3`] = ` :not(:last-child) { +.c1 { + background-repeat: no-repeat; + background-position: right 8px center; + padding-left: 12px; + padding-right: 0; +} + +.c1 > :not(:last-child) { margin-right: 8px; } -.c0 .TextInput-icon, -.c0 .TextInput-action { +.c1 .TextInput-icon, +.c1 .TextInput-action { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; @@ -1222,13 +1252,13 @@ exports[`TextInput renders leadingVisual 4`] = ` flex-shrink: 0; } -.c0 > input, -.c0 > select { +.c1 > input, +.c1 > select { padding-left: 0; padding-right: 12px; } -.c1 { +.c2 { border: 0; font-size: inherit; font-family: inherit; @@ -1238,7 +1268,7 @@ exports[`TextInput renders leadingVisual 4`] = ` width: 100%; } -.c1:focus { +.c2:focus { outline: 0; } @@ -1250,7 +1280,7 @@ exports[`TextInput renders leadingVisual 4`] = ` :not(:last-child) { +.c1 { + background-repeat: no-repeat; + background-position: right 8px center; + padding-left: 0; + padding-right: 0; +} + +.c1 > :not(:last-child) { margin-right: 8px; } -.c0 .TextInput-icon, -.c0 .TextInput-action { +.c1 .TextInput-icon, +.c1 .TextInput-action { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; @@ -1349,13 +1382,13 @@ exports[`TextInput renders monospace 1`] = ` flex-shrink: 0; } -.c0 > input, -.c0 > select { +.c1 > input, +.c1 > select { padding-left: 12px; padding-right: 12px; } -.c1 { +.c2 { border: 0; font-size: inherit; font-family: inherit; @@ -1365,7 +1398,7 @@ exports[`TextInput renders monospace 1`] = ` width: 100%; } -.c1:focus { +.c2:focus { outline: 0; } @@ -1377,11 +1410,11 @@ exports[`TextInput renders monospace 1`] = ` :not(:last-child) { +.c1 { + background-repeat: no-repeat; + background-position: right 8px center; + padding-left: 0; + padding-right: 0; +} + +.c1 > :not(:last-child) { margin-right: 8px; } -.c0 .TextInput-icon, -.c0 .TextInput-action { +.c1 .TextInput-icon, +.c1 .TextInput-action { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; @@ -1467,13 +1503,13 @@ exports[`TextInput renders placeholder 1`] = ` flex-shrink: 0; } -.c0 > input, -.c0 > select { +.c1 > input, +.c1 > select { padding-left: 12px; padding-right: 12px; } -.c1 { +.c2 { border: 0; font-size: inherit; font-family: inherit; @@ -1483,7 +1519,7 @@ exports[`TextInput renders placeholder 1`] = ` width: 100%; } -.c1:focus { +.c2:focus { outline: 0; } @@ -1495,11 +1531,11 @@ exports[`TextInput renders placeholder 1`] = ` :not(:last-child) { +.c1 { + background-repeat: no-repeat; + background-position: right 8px center; + padding-left: 0; + padding-right: 0; +} + +.c1 > :not(:last-child) { margin-right: 8px; } -.c0 .TextInput-icon, -.c0 .TextInput-action { +.c1 .TextInput-icon, +.c1 .TextInput-action { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; @@ -1594,13 +1633,13 @@ exports[`TextInput renders small 1`] = ` flex-shrink: 0; } -.c0 > input, -.c0 > select { +.c1 > input, +.c1 > select { padding-left: 12px; padding-right: 12px; } -.c1 { +.c2 { border: 0; font-size: inherit; font-family: inherit; @@ -1610,7 +1649,7 @@ exports[`TextInput renders small 1`] = ` width: 100%; } -.c1:focus { +.c2:focus { outline: 0; } @@ -1622,12 +1661,12 @@ exports[`TextInput renders small 1`] = ` :not(:last-child) { +.c5[data-size="small"] [data-component="buttonContent"] > :not(:last-child) { margin-right: 4px; } -.c4[data-size="small"][data-component=IconButton] { +.c5[data-size="small"][data-component=IconButton] { width: 28px; padding: unset; } -.c4[data-size="large"] { +.c5[data-size="large"] { padding: 0 16px; height: 40px; gap: 8px; } -.c4[data-size="large"] [data-component="buttonContent"] > :not(:last-child) { +.c5[data-size="large"] [data-component="buttonContent"] > :not(:last-child) { margin-right: 8px; } -.c4[data-size="large"][data-component=IconButton] { +.c5[data-size="large"][data-component=IconButton] { width: 40px; padding: unset; } -.c4[data-block="block"] { +.c5[data-block="block"] { width: 100%; } -.c4 [data-component="leadingVisual"] { +.c5 [data-component="leadingVisual"] { grid-area: leadingVisual; color: #656d76; } -.c4 [data-component="text"] { +.c5 [data-component="text"] { grid-area: text; line-height: calc(20/14); white-space: nowrap; @@ -1813,16 +1851,16 @@ exports[`TextInput renders trailingAction icon button 1`] = ` align-items: center; } -.c4 [data-component="trailingVisual"] { +.c5 [data-component="trailingVisual"] { grid-area: trailingVisual; } -.c4 [data-component="trailingAction"] { +.c5 [data-component="trailingAction"] { margin-right: -4px; color: #656d76; } -.c4 [data-component="buttonContent"] { +.c5 [data-component="buttonContent"] { -webkit-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: 1 0 auto; @@ -1838,43 +1876,43 @@ exports[`TextInput renders trailingAction icon button 1`] = ` align-content: center; } -.c4 [data-component="buttonContent"] > :not(:last-child) { +.c5 [data-component="buttonContent"] > :not(:last-child) { margin-right: 8px; } -.c4:hover:not([disabled]) { +.c5:hover:not([disabled]) { background-color: rgba(208,215,222,0.32); } -.c4:active:not([disabled]) { +.c5:active:not([disabled]) { background-color: rgba(208,215,222,0.48); } -.c4[aria-expanded=true] { +.c5[aria-expanded=true] { background-color: rgba(208,215,222,0.24); } -.c4[data-component="IconButton"][data-no-visuals] { +.c5[data-component="IconButton"][data-no-visuals] { color: #656d76; } -.c4[data-no-visuals] { +.c5[data-no-visuals] { color: #0969da; } -.c4:has([data-component="ButtonCounter"]) { +.c5:has([data-component="ButtonCounter"]) { color: #24292f; } -.c4:disabled[data-no-visuals] { +.c5:disabled[data-no-visuals] { color: #8c959f; } -.c4:disabled[data-no-visuals] [data-component=ButtonCounter] { +.c5:disabled[data-no-visuals] [data-component=ButtonCounter] { color: inherit; } -.c4[data-size="small"][data-no-visuals="true"] { +.c5[data-size="small"][data-no-visuals="true"] { padding-top: 2px; padding-right: 4px; padding-bottom: 2px; @@ -1882,7 +1920,7 @@ exports[`TextInput renders trailingAction icon button 1`] = ` position: relative; } -.c4[data-size="small"][data-no-visuals="true"][data-component="IconButton"] { +.c5[data-size="small"][data-no-visuals="true"][data-component="IconButton"] { width: var(--inner-action-size); height: var(--inner-action-size); } @@ -1906,10 +1944,6 @@ exports[`TextInput renders trailingAction icon button 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; - background-repeat: no-repeat; - background-position: right 8px center; - padding-left: 0; - padding-right: 0; } .c0 input, @@ -1941,12 +1975,19 @@ exports[`TextInput renders trailingAction icon button 1`] = ` padding: 12px; } -.c0 > :not(:last-child) { +.c1 { + background-repeat: no-repeat; + background-position: right 8px center; + padding-left: 0; + padding-right: 0; +} + +.c1 > :not(:last-child) { margin-right: 8px; } -.c0 .TextInput-icon, -.c0 .TextInput-action { +.c1 .TextInput-icon, +.c1 .TextInput-action { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; @@ -1956,18 +1997,18 @@ exports[`TextInput renders trailingAction icon button 1`] = ` flex-shrink: 0; } -.c0 > input, -.c0 > select { +.c1 > input, +.c1 > select { padding-left: 12px; padding-right: 0; } -.c3 { +.c4 { position: relative; display: inline-block; } -.c3::before { +.c4::before { position: absolute; z-index: 1000001; display: none; @@ -1980,7 +2021,7 @@ exports[`TextInput renders trailingAction icon button 1`] = ` opacity: 0; } -.c3::after { +.c4::after { position: absolute; z-index: 1000000; display: none; @@ -2006,14 +2047,14 @@ exports[`TextInput renders trailingAction icon button 1`] = ` opacity: 0; } -.c3:hover::before, -.c3:active::before, -.c3:focus::before, -.c3:focus-within::before, -.c3:hover::after, -.c3:active::after, -.c3:focus::after, -.c3:focus-within::after { +.c4:hover::before, +.c4:active::before, +.c4:focus::before, +.c4:focus-within::before, +.c4:hover::after, +.c4:active::after, +.c4:focus::after, +.c4:focus-within::after { display: inline-block; -webkit-text-decoration: none; text-decoration: none; @@ -2029,36 +2070,36 @@ exports[`TextInput renders trailingAction icon button 1`] = ` animation-delay: 0.4s; } -.c3.tooltipped-no-delay:hover::before, -.c3.tooltipped-no-delay:active::before, -.c3.tooltipped-no-delay:focus::before, -.c3.tooltipped-no-delay:focus-within::before, -.c3.tooltipped-no-delay:hover::after, -.c3.tooltipped-no-delay:active::after, -.c3.tooltipped-no-delay:focus::after, -.c3.tooltipped-no-delay:focus-within::after { +.c4.tooltipped-no-delay:hover::before, +.c4.tooltipped-no-delay:active::before, +.c4.tooltipped-no-delay:focus::before, +.c4.tooltipped-no-delay:focus-within::before, +.c4.tooltipped-no-delay:hover::after, +.c4.tooltipped-no-delay:active::after, +.c4.tooltipped-no-delay:focus::after, +.c4.tooltipped-no-delay:focus-within::after { -webkit-animation-delay: 0s; animation-delay: 0s; } -.c3.tooltipped-multiline:hover::after, -.c3.tooltipped-multiline:active::after, -.c3.tooltipped-multiline:focus::after, -.c3.tooltipped-multiline:focus-within::after { +.c4.tooltipped-multiline:hover::after, +.c4.tooltipped-multiline:active::after, +.c4.tooltipped-multiline:focus::after, +.c4.tooltipped-multiline:focus-within::after { display: table-cell; } -.c3.tooltipped-s::after, -.c3.tooltipped-se::after, -.c3.tooltipped-sw::after { +.c4.tooltipped-s::after, +.c4.tooltipped-se::after, +.c4.tooltipped-sw::after { top: 100%; right: 50%; margin-top: 6px; } -.c3.tooltipped-s::before, -.c3.tooltipped-se::before, -.c3.tooltipped-sw::before { +.c4.tooltipped-s::before, +.c4.tooltipped-se::before, +.c4.tooltipped-sw::before { top: auto; right: 50%; bottom: -7px; @@ -2066,27 +2107,27 @@ exports[`TextInput renders trailingAction icon button 1`] = ` border-bottom-color: #24292f; } -.c3.tooltipped-se::after { +.c4.tooltipped-se::after { right: auto; left: 50%; margin-left: -16px; } -.c3.tooltipped-sw::after { +.c4.tooltipped-sw::after { margin-right: -16px; } -.c3.tooltipped-n::after, -.c3.tooltipped-ne::after, -.c3.tooltipped-nw::after { +.c4.tooltipped-n::after, +.c4.tooltipped-ne::after, +.c4.tooltipped-nw::after { right: 50%; bottom: 100%; margin-bottom: 6px; } -.c3.tooltipped-n::before, -.c3.tooltipped-ne::before, -.c3.tooltipped-nw::before { +.c4.tooltipped-n::before, +.c4.tooltipped-ne::before, +.c4.tooltipped-nw::before { top: -7px; right: 50%; bottom: auto; @@ -2094,24 +2135,24 @@ exports[`TextInput renders trailingAction icon button 1`] = ` border-top-color: #24292f; } -.c3.tooltipped-ne::after { +.c4.tooltipped-ne::after { right: auto; left: 50%; margin-left: -16px; } -.c3.tooltipped-nw::after { +.c4.tooltipped-nw::after { margin-right: -16px; } -.c3.tooltipped-s::after, -.c3.tooltipped-n::after { +.c4.tooltipped-s::after, +.c4.tooltipped-n::after { -webkit-transform: translateX(50%); -ms-transform: translateX(50%); transform: translateX(50%); } -.c3.tooltipped-w::after { +.c4.tooltipped-w::after { right: 100%; bottom: 50%; margin-right: 6px; @@ -2120,7 +2161,7 @@ exports[`TextInput renders trailingAction icon button 1`] = ` transform: translateY(50%); } -.c3.tooltipped-w::before { +.c4.tooltipped-w::before { top: 50%; bottom: 50%; left: -7px; @@ -2128,7 +2169,7 @@ exports[`TextInput renders trailingAction icon button 1`] = ` border-left-color: #24292f; } -.c3.tooltipped-e::after { +.c4.tooltipped-e::after { bottom: 50%; left: 100%; margin-left: 6px; @@ -2137,7 +2178,7 @@ exports[`TextInput renders trailingAction icon button 1`] = ` transform: translateY(50%); } -.c3.tooltipped-e::before { +.c4.tooltipped-e::before { top: 50%; right: -7px; bottom: 50%; @@ -2145,7 +2186,7 @@ exports[`TextInput renders trailingAction icon button 1`] = ` border-right-color: #24292f; } -.c3.tooltipped-multiline::after { +.c4.tooltipped-multiline::after { width: -webkit-max-content; width: -moz-max-content; width: max-content; @@ -2155,8 +2196,8 @@ exports[`TextInput renders trailingAction icon button 1`] = ` border-collapse: separate; } -.c3.tooltipped-multiline.tooltipped-s::after, -.c3.tooltipped-multiline.tooltipped-n::after { +.c4.tooltipped-multiline.tooltipped-s::after, +.c4.tooltipped-multiline.tooltipped-n::after { right: auto; left: 50%; -webkit-transform: translateX(-50%); @@ -2164,30 +2205,30 @@ exports[`TextInput renders trailingAction icon button 1`] = ` transform: translateX(-50%); } -.c3.tooltipped-multiline.tooltipped-w::after, -.c3.tooltipped-multiline.tooltipped-e::after { +.c4.tooltipped-multiline.tooltipped-w::after, +.c4.tooltipped-multiline.tooltipped-e::after { right: 100%; } -.c3.tooltipped-align-right-2::after { +.c4.tooltipped-align-right-2::after { right: 0; margin-right: 0; } -.c3.tooltipped-align-right-2::before { +.c4.tooltipped-align-right-2::before { right: 15px; } -.c3.tooltipped-align-left-2::after { +.c4.tooltipped-align-left-2::after { left: 0; margin-left: 0; } -.c3.tooltipped-align-left-2::before { +.c4.tooltipped-align-left-2::before { left: 10px; } -.c1 { +.c2 { border: 0; font-size: inherit; font-family: inherit; @@ -2197,18 +2238,18 @@ exports[`TextInput renders trailingAction icon button 1`] = ` width: 100%; } -.c1:focus { +.c2:focus { outline: 0; } @media (forced-colors:active) { - .c4:focus { + .c5:focus { outline: solid 1px transparent; } } @media (pointer:coarse) { - .c4[data-size="small"][data-no-visuals="true"]:after { + .c5[data-size="small"][data-no-visuals="true"]:after { content: ""; position: absolute; left: 0; @@ -2229,11 +2270,11 @@ exports[`TextInput renders trailingAction icon button 1`] = `