From fffb93009e88651a88df528f9805024591ffa385 Mon Sep 17 00:00:00 2001 From: mishevong Date: Wed, 21 Jul 2021 15:13:09 -0700 Subject: [PATCH] feat #396 - add styles --- src/__snapshots__/storybook.test.ts.snap | 310 +++---- src/components/Plausible/index.tsx | 36 +- .../Plausible/plausible-exclusion.css | 828 ------------------ 3 files changed, 176 insertions(+), 998 deletions(-) delete mode 100644 src/components/Plausible/plausible-exclusion.css diff --git a/src/__snapshots__/storybook.test.ts.snap b/src/__snapshots__/storybook.test.ts.snap index ddcc6f49..8d045880 100644 --- a/src/__snapshots__/storybook.test.ts.snap +++ b/src/__snapshots__/storybook.test.ts.snap @@ -4587,32 +4587,32 @@ exports[`Storyshots Plausible Disable Plausible 1`] = ` className="container-0-2-232" >
Plausible Exclude
Click the button below to toggle your exclusion in analytics for this site -
-
- You currently - - are not - - excluding your visits. + You currently + + are not + + excluding your visits. +
diff --git a/src/components/Plausible/plausible-exclusion.css b/src/components/Plausible/plausible-exclusion.css deleted file mode 100644 index c5ef43a9..00000000 --- a/src/components/Plausible/plausible-exclusion.css +++ /dev/null @@ -1,828 +0,0 @@ -/*! tailwindcss v2.0.3 | MIT License | https://tailwindcss.com */ - -/*! modern-normalize v1.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */ - -/* -Document -======== -*/ - -/** -Use a better box model (opinionated). -*/ - -*, -*::before, -*::after { - box-sizing: border-box; -} - -/** -Use a more readable tab size (opinionated). -*/ - -:root { - -moz-tab-size: 4; - -o-tab-size: 4; - tab-size: 4; -} - -/** -1. Correct the line height in all browsers. -2. Prevent adjustments of font size after orientation changes in iOS. -*/ - -html { - line-height: 1.15; /* 1 */ - -webkit-text-size-adjust: 100%; /* 2 */ -} - -/* -Sections -======== -*/ - -/** -Remove the margin in all browsers. -*/ - -body { - margin: 0; -} - -/** -Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) -*/ - -body { - font-family: system-ui, -apple-system, - /* Firefox supports this but not yet `system-ui` */ 'Segoe UI', Roboto, - Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'; -} - -/* -Grouping content -================ -*/ - -/** -1. Add the correct height in Firefox. -2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) -*/ - -hr { - height: 0; /* 1 */ - color: inherit; /* 2 */ -} - -/* -Text-level semantics -==================== -*/ - -/** -Add the correct text decoration in Chrome, Edge, and Safari. -*/ - -abbr[title] { - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; -} - -/** -Add the correct font weight in Edge and Safari. -*/ - -b, -strong { - font-weight: bolder; -} - -/** -1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) -2. Correct the odd 'em' font sizing in all browsers. -*/ - -code, -kbd, -samp, -pre { - font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', - Menlo, monospace; /* 1 */ - font-size: 1em; /* 2 */ -} - -/** -Add the correct font size in all browsers. -*/ - -small { - font-size: 80%; -} - -/** -Prevent 'sub' and 'sup' elements from affecting the line height in all browsers. -*/ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -/* -Tabular data -============ -*/ - -/** -1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) -2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) -*/ - -table { - text-indent: 0; /* 1 */ - border-color: inherit; /* 2 */ -} - -/* -Forms -===== -*/ - -/** -1. Change the font styles in all browsers. -2. Remove the margin in Firefox and Safari. -*/ - -button, -input, -optgroup, -select, -textarea { - font-family: inherit; /* 1 */ - font-size: 100%; /* 1 */ - line-height: 1.15; /* 1 */ - margin: 0; /* 2 */ -} - -/** -Remove the inheritance of text transform in Edge and Firefox. -1. Remove the inheritance of text transform in Firefox. -*/ - -button, -select { - /* 1 */ - text-transform: none; -} - -/** -Correct the inability to style clickable types in iOS and Safari. -*/ - -button { - -webkit-appearance: button; -} - -/** -Remove the inner border and padding in Firefox. -*/ - -/** -Restore the focus styles unset by the previous rule. -*/ - -/** -Remove the additional ':invalid' styles in Firefox. -See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737 -*/ - -/** -Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers. -*/ - -legend { - padding: 0; -} - -/** -Add the correct vertical alignment in Chrome and Firefox. -*/ - -progress { - vertical-align: baseline; -} - -/** -Correct the cursor style of increment and decrement buttons in Safari. -*/ - -/** -1. Correct the odd appearance in Chrome and Safari. -2. Correct the outline style in Safari. -*/ - -/** -Remove the inner padding in Chrome and Safari on macOS. -*/ - -/** -1. Correct the inability to style clickable types in iOS and Safari. -2. Change font properties to 'inherit' in Safari. -*/ - -/* -Interactive -=========== -*/ - -/* -Add the correct display in Chrome and Safari. -*/ - -summary { - display: list-item; -} - -/** - * Manually forked from SUIT CSS Base: https://github.com/suitcss/base - * A thin layer on top of normalize.css that provides a starting point more - * suitable for web applications. - */ - -/** - * Removes the default spacing and border for appropriate elements. - */ - -blockquote, -dl, -dd, -h1, -h2, -h3, -h4, -h5, -h6, -hr, -figure, -p, -pre { - margin: 0; -} - -button { - background-color: transparent; - background-image: none; -} - -/** - * Work around a Firefox/IE bug where the transparent `button` background - * results in a loss of the default `button` focus styles. - */ - -button:focus { - outline: 1px dotted; - outline: 5px auto -webkit-focus-ring-color; -} - -fieldset { - margin: 0; - padding: 0; -} - -ol, -ul { - list-style: none; - margin: 0; - padding: 0; -} - -/** - * Tailwind custom reset styles - */ - -/** - * 1. Use the user's configured `sans` font-family (with Tailwind's default - * sans-serif font stack as a fallback) as a sane default. - * 2. Use Tailwind's default "normal" line-height so the user isn't forced - * to override it to ensure consistency even when using the default theme. - */ - -html { - font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, - 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, - 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', - 'Noto Color Emoji'; /* 1 */ - line-height: 1.5; /* 2 */ -} - -/** - * Inherit font-family and line-height from `html` so users can set them as - * a class directly on the `html` element. - */ - -body { - font-family: inherit; - line-height: inherit; -} - -/** - * 1. Prevent padding and border from affecting element width. - * - * We used to set this in the html element and inherit from - * the parent element for everything else. This caused issues - * in shadow-dom-enhanced elements like
where the content - * is wrapped by a div with box-sizing set to `content-box`. - * - * https://github.com/mozdevs/cssremedy/issues/4 - * - * - * 2. Allow adding a border to an element by just adding a border-width. - * - * By default, the way the browser specifies that an element should have no - * border is by setting it's border-style to `none` in the user-agent - * stylesheet. - * - * In order to easily add borders to elements by just setting the `border-width` - * property, we change the default border-style for all elements to `solid`, and - * use border-width to hide them instead. This way our `border` utilities only - * need to set the `border-width` property instead of the entire `border` - * shorthand, making our border utilities much more straightforward to compose. - * - * https://github.com/tailwindcss/tailwindcss/pull/116 - */ - -*, -::before, -::after { - box-sizing: border-box; /* 1 */ - border-width: 0; /* 2 */ - border-style: solid; /* 2 */ - border-color: #e5e7eb; /* 2 */ -} - -/* - * Ensure horizontal rules are visible by default - */ - -hr { - border-top-width: 1px; -} - -/** - * Undo the `border-style: none` reset that Normalize applies to images so that - * our `border-{width}` utilities have the expected effect. - * - * The Normalize reset is unnecessary for us since we default the border-width - * to 0 on all elements. - * - * https://github.com/tailwindcss/tailwindcss/issues/362 - */ - -img { - border-style: solid; -} - -textarea { - resize: vertical; -} - -input::-moz-placeholder, -textarea::-moz-placeholder { - opacity: 1; - color: #9ca3af; -} - -input:-ms-input-placeholder, -textarea:-ms-input-placeholder { - opacity: 1; - color: #9ca3af; -} - -input::placeholder, -textarea::placeholder { - opacity: 1; - color: #9ca3af; -} - -button { - cursor: pointer; -} - -table { - border-collapse: collapse; -} - -h1, -h2, -h3, -h4, -h5, -h6 { - font-size: inherit; - font-weight: inherit; -} - -/** - * Reset links to optimize for opt-in styling instead of - * opt-out. - */ - -a { - color: inherit; - text-decoration: inherit; -} - -/** - * Reset form element properties that are easy to forget to - * style explicitly so you don't inadvertently introduce - * styles that deviate from your design system. These styles - * supplement a partial reset that is already applied by - * normalize.css. - */ - -button, -input, -optgroup, -select, -textarea { - padding: 0; - line-height: inherit; - color: inherit; -} - -/** - * Use the configured 'mono' font family for elements that - * are expected to be rendered with a monospace font, falling - * back to the system monospace stack if there is no configured - * 'mono' font family. - */ - -pre, -code, -kbd, -samp { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, - 'Liberation Mono', 'Courier New', monospace; -} - -/** - * Make replaced elements `display: block` by default as that's - * the behavior you want almost all of the time. Inspired by - * CSS Remedy, with `svg` added as well. - * - * https://github.com/mozdevs/cssremedy/issues/14 - */ - -img, -svg, -video, -canvas, -audio, -iframe, -embed, -object { - display: block; - vertical-align: middle; -} - -/** - * Constrain images and videos to the parent width and preserve - * their instrinsic aspect ratio. - * - * https://github.com/mozdevs/cssremedy/issues/14 - */ - -img, -video { - max-width: 100%; - height: auto; -} - -.container { - width: 100%; -} - -@media (min-width: 640px) { - .container { - max-width: 640px; - } -} - -@media (min-width: 768px) { - .container { - max-width: 768px; - } -} - -@media (min-width: 1024px) { - .container { - max-width: 1024px; - } -} - -@media (min-width: 1280px) { - .container { - max-width: 1280px; - } -} - -@media (min-width: 1536px) { - .container { - max-width: 1536px; - } -} - -.bg-gray-100 { - --tw-bg-opacity: 1; - background-color: rgba(243, 244, 246, var(--tw-bg-opacity)); -} - -.bg-indigo-600 { - --tw-bg-opacity: 1; - background-color: rgba(79, 70, 229, var(--tw-bg-opacity)); -} - -.hover\:bg-indigo-700:hover { - --tw-bg-opacity: 1; - background-color: rgba(67, 56, 202, var(--tw-bg-opacity)); -} - -.dark .dark\:bg-gray-900 { - --tw-bg-opacity: 1; - background-color: rgba(17, 24, 39, var(--tw-bg-opacity)); -} - -.rounded-lg { - border-radius: 0.5rem; -} - -.inline { - display: inline; -} - -.flex { - display: flex; -} - -.table { - display: table; -} - -.hidden { - display: none; -} - -.flex-col { - flex-direction: column; -} - -.items-center { - align-items: center; -} - -.font-semibold { - font-weight: 600; -} - -.font-bold { - font-weight: 700; -} - -.font-black { - font-weight: 900; -} - -.h-full { - height: 100%; -} - -.text-base { - font-size: 1rem; - line-height: 1.5rem; -} - -.text-xl { - font-size: 1.25rem; - line-height: 1.75rem; -} - -.text-5xl { - font-size: 3rem; - line-height: 1; -} - -.my-4 { - margin-top: 1rem; - margin-bottom: 1rem; -} - -.mt-24 { - margin-top: 6rem; -} - -.focus\:outline-none:focus { - outline: 2px solid transparent; - outline-offset: 2px; -} - -.py-2 { - padding-top: 0.5rem; - padding-bottom: 0.5rem; -} - -.px-4 { - padding-left: 1rem; - padding-right: 1rem; -} - -* { - --tw-shadow: 0 0 #0000; -} - -.shadow-md { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), - 0 2px 4px -1px rgba(0, 0, 0, 0.06); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), - var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -* { - --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/); - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgba(59, 130, 246, 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; -} - -.focus\:ring-2:focus { - --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 - var(--tw-ring-offset-width) var(--tw-ring-offset-color); - --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 - calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); - box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), - var(--tw-shadow, 0 0 #0000); -} - -.focus\:ring-offset-indigo-200:focus { - --tw-ring-offset-color: #c7d2fe; -} - -.focus\:ring-offset-2:focus { - --tw-ring-offset-width: 2px; -} - -.focus\:ring-indigo-500:focus { - --tw-ring-opacity: 1; - --tw-ring-color: rgba(99, 102, 241, var(--tw-ring-opacity)); -} - -.text-center { - text-align: center; -} - -.text-white { - --tw-text-opacity: 1; - color: rgba(255, 255, 255, var(--tw-text-opacity)); -} - -.text-red-600 { - --tw-text-opacity: 1; - color: rgba(220, 38, 38, var(--tw-text-opacity)); -} - -.text-green-600 { - --tw-text-opacity: 1; - color: rgba(5, 150, 105, var(--tw-text-opacity)); -} - -.dark .dark\:text-gray-100 { - --tw-text-opacity: 1; - color: rgba(243, 244, 246, var(--tw-text-opacity)); -} - -.dark .dark\:text-red-400 { - --tw-text-opacity: 1; - color: rgba(248, 113, 113, var(--tw-text-opacity)); -} - -.dark .dark\:text-green-400 { - --tw-text-opacity: 1; - color: rgba(52, 211, 153, var(--tw-text-opacity)); -} - -.w-full { - width: 100%; -} - -.transition { - transition-property: background-color, border-color, color, fill, stroke, - opacity, box-shadow, transform; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} - -.ease-in { - transition-timing-function: cubic-bezier(0.4, 0, 1, 1); -} - -.duration-200 { - transition-duration: 200ms; -} - -@-webkit-keyframes spin { - to { - transform: rotate(360deg); - } -} - -@keyframes spin { - to { - transform: rotate(360deg); - } -} - -@-webkit-keyframes ping { - 75%, - 100% { - transform: scale(2); - opacity: 0; - } -} - -@keyframes ping { - 75%, - 100% { - transform: scale(2); - opacity: 0; - } -} - -@-webkit-keyframes pulse { - 50% { - opacity: 0.5; - } -} - -@keyframes pulse { - 50% { - opacity: 0.5; - } -} - -@-webkit-keyframes bounce { - 0%, - 100% { - transform: translateY(-25%); - -webkit-animation-timing-function: cubic-bezier(0.8, 0, 1, 1); - animation-timing-function: cubic-bezier(0.8, 0, 1, 1); - } - - 50% { - transform: none; - -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1); - animation-timing-function: cubic-bezier(0, 0, 0.2, 1); - } -} - -@keyframes bounce { - 0%, - 100% { - transform: translateY(-25%); - -webkit-animation-timing-function: cubic-bezier(0.8, 0, 1, 1); - animation-timing-function: cubic-bezier(0.8, 0, 1, 1); - } - - 50% { - transform: none; - -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1); - animation-timing-function: cubic-bezier(0, 0, 0.2, 1); - } -} - -@media (min-width: 640px) { -} - -@media (min-width: 768px) { -} - -@media (min-width: 1024px) { -} - -@media (min-width: 1280px) { -} - -@media (min-width: 1536px) { -}