diff --git a/.storybook/.babelrc b/.storybook/.babelrc index a00483203c..9a32bba549 100644 --- a/.storybook/.babelrc +++ b/.storybook/.babelrc @@ -1,10 +1,5 @@ { - "plugins": [ - "@babel/plugin-proposal-class-properties", - "lodash", - "inline-react-svg", - "macros" - ], + "plugins": ["@babel/plugin-proposal-class-properties", "lodash", "macros"], "presets": [ ["@babel/preset-env", { "loose": true }], "@babel/preset-react", diff --git a/.storybook/components/IconSize.js b/.storybook/components/IconSize.js index 900317760b..42a916f149 100644 --- a/.storybook/components/IconSize.js +++ b/.storybook/components/IconSize.js @@ -69,8 +69,6 @@ const IconSize = ({ size }) => ( ); IconSize.propTypes = { - // eslint-disable-next-line - theme: PropTypes.object.isRequired, size: PropTypes.string.isRequired }; diff --git a/.storybook/components/Icons.js b/.storybook/components/Icons.js new file mode 100644 index 0000000000..8d15a5aa4b --- /dev/null +++ b/.storybook/components/Icons.js @@ -0,0 +1,189 @@ +/** + * Copyright 2019, SumUp Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React, { useState } from 'react'; +import PropTypes from 'prop-types'; +import styled from '@emotion/styled'; +import { css } from '@emotion/core'; +import { ThemeProvider } from 'emotion-theming'; +import { keys, entries, includes, isEmpty, groupBy, sortBy } from 'lodash/fp'; +import * as iconComponents from '@sumup/icons'; +import { icons } from '@sumup/icons/manifest.json'; + +import { + theme as themes, + Heading, + Text, + InlineElements, + Label, + SearchInput, + Select +} from '../../src'; + +function group(key, collection) { + const grouped = groupBy(key, collection); + return entries(grouped).map(([name, items]) => ({ [key]: name, items })); +} + +function getComponentName(name) { + // Split on non-word characters + const words = name.split(/[^a-z0-9]/i); + // Uppercase the first letter and lowercase the rest + const pascalCased = words.map( + part => part.charAt(0).toUpperCase() + part.substr(1).toLowerCase() + ); + return pascalCased.join(''); +} + +const Filters = styled(InlineElements)` + margin-top: ${p => p.theme.spacings.tera}; + margin-bottom: ${p => p.theme.spacings.peta}; +`; + +const Category = styled.section` + margin-bottom: ${p => p.theme.spacings.tera}; +`; + +const List = styled.div` + display: flex; + flex-wrap: wrap; +`; + +const Wrapper = styled.div` + width: 7.5rem; + text-align: center; + margin-top: ${p => p.theme.spacings.giga}; + margin-bottom: ${p => p.theme.spacings.giga}; +`; + +const Size = styled.p` + color: ${p => p.theme.colors.n700}; + font-style: italic; +`; + +const iconStyles = color => theme => css` + height: 3rem; + width: auto; + max-width: 6rem; + color: ${theme.colors[color]}; + background-color: ${color === 'white' + ? theme.colors.n900 + : theme.colors.bodyBg}; +`; + +const Icons = () => { + const [search, setSearch] = useState(''); + const [size, setSize] = useState('all'); + const [color, setColor] = useState('n900'); + + const handleSearch = event => { + setSearch(event.target.value); + }; + + const handleSizeChange = event => { + setSize(event.target.value); + }; + + const handleColorChange = event => { + setColor(event.target.value); + }; + + const sizeOptions = [ + { label: 'All sizes', value: 'all' }, + { label: 'Small', value: 'small' }, + { label: 'Large', value: 'large' } + ]; + + const colorOptions = [ + { label: 'Dark gray', value: 'n900' }, + { label: 'Gray', value: 'n500' }, + { label: 'White', value: 'white' }, + { label: 'Primary', value: 'p500' }, + { label: 'Success', value: 'success' }, + { label: 'Warning', value: 'warning' }, + { label: 'Danger', value: 'danger' } + ]; + + const activeIcons = icons.filter( + icon => + includes(search, icon.name) && (size === 'all' || size === icon.size) + ); + + return ( + + + + + + + + {isEmpty(activeIcons) ? ( + No icons found + ) : ( + group('category', activeIcons).map(({ category, items }) => ( + + + {category} + + + {sortBy('name', items).map(icon => { + const id = `${icon.name}-${icon.size}`; + const componentName = getComponentName(icon.name); + const Icon = iconComponents[componentName]; + return ( + + + + + ); + })} + + + )) + )} + + ); +}; + +export default Icons; diff --git a/.storybook/components/Teaser.js b/.storybook/components/Teaser.js index 6ab93e7317..3065c9e399 100644 --- a/.storybook/components/Teaser.js +++ b/.storybook/components/Teaser.js @@ -20,6 +20,10 @@ import { ThemeProvider } from 'emotion-theming'; import { theme as themes, Heading, Text, Card } from '../../src'; +// HACK: This prevents the cards from awkwardly wrapping if one of them +// only has one line of text. +const CARD_HEIGHT = '185px'; + const Wrapper = styled(Card)( ({ theme }) => css` width: 100%; @@ -29,6 +33,7 @@ const Wrapper = styled(Card)( ${theme.mq.mega} { width: calc(50% - ${theme.spacings.giga}); margin-right: ${theme.spacings.giga}; + min-height: ${CARD_HEIGHT}; } ` ); diff --git a/.storybook/components/index.js b/.storybook/components/index.js index 3c7bf9bbaf..111abd1a5f 100644 --- a/.storybook/components/index.js +++ b/.storybook/components/index.js @@ -31,6 +31,7 @@ export { default as MediaQueriesTable } from './MediaQueriesTable'; export { default as BorderWidth } from './BorderWidth'; export { default as BorderRadius } from './BorderRadius'; export { default as IconSize } from './IconSize'; +export { default as Icons } from './Icons'; export { Grid, Row, Col } from './Grid'; export { default as Intro } from './Intro'; export { default as Teaser } from './Teaser'; diff --git a/.storybook/manager.js b/.storybook/manager.js index c13c633305..af97fc0702 100644 --- a/.storybook/manager.js +++ b/.storybook/manager.js @@ -6,7 +6,7 @@ import { theme, components } from './util/theme'; addons.setConfig({ theme, isFullscreen: false, - showPanel: false, + showPanel: true, panelPosition: 'bottom', isToolshown: true }); diff --git a/.storybook/preview.js b/.storybook/preview.js index b011cc51bc..19b77f6b27 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -21,7 +21,14 @@ const SORT_ORDER = { 'Contributing', 'Code of Conduct' ], - Advanced: ['Static CSS', 'Base Components', 'Theme', 'Grid', 'Fonts'], + Advanced: [ + 'Static CSS', + 'Base Components', + 'Theme', + 'Grid', + 'Icons', + 'Fonts' + ], Typography: ['Heading', 'SubHeading', 'Text'], Layout: [], Forms: [], diff --git a/.babelrc b/babel.config.json similarity index 97% rename from .babelrc rename to babel.config.json index bd42e670ab..946fca9046 100644 --- a/.babelrc +++ b/babel.config.json @@ -16,7 +16,6 @@ "plugins": [ "@babel/plugin-proposal-class-properties", "lodash", - "inline-react-svg", "dev-expression", "react-docgen" ], diff --git a/docs/advanced/grid.story.mdx b/docs/advanced/grid.story.mdx index 0ed4604fc6..1ee36b51fa 100644 --- a/docs/advanced/grid.story.mdx +++ b/docs/advanced/grid.story.mdx @@ -7,7 +7,7 @@ import { Meta, Preview, Grid, Row, Col } from '../../.storybook/components'; The grid provided by Circuit UI is a float-based grid. We use this grid in applications where we need to support older browsers, such as Android and iOS webviews. -The [static CSS](Advanced|Static-CSS) does not include a grid system. +The [static CSS](Advanced/Static-CSS) does not include a grid system. ## Static columns @@ -34,7 +34,7 @@ scenario, you can use the normal `span` attribute of the grid. ## Responsive columns -You can use the following [breakpoints](Advanced|Theme) to define the +You can use the following [breakpoints](Advanced/Theme) to define the responsive behavior of your grid: - `untilKilo` diff --git a/docs/advanced/icons.story.mdx b/docs/advanced/icons.story.mdx new file mode 100644 index 0000000000..a0e4fdd6a8 --- /dev/null +++ b/docs/advanced/icons.story.mdx @@ -0,0 +1,15 @@ +import { Meta, Icons } from '../../.storybook/components'; + + + +# Icons + +The icons used throughout Circuit UI come from [SumUp's icon library](https://github.com/sumup-oss/icons). The [`@sumup/icons`](https://www.npmjs.com/package/@sumup/icons) package is a required peer dependency of [`@sumup/circuit-ui`](https://www.npmjs.com/package/@sumup/circuit-ui). You can install the package by running the following command in your project: + +```bash +yarn add @sumup/icons +# Or if you prefer npm: +npm install @sumup/icons +``` + + diff --git a/docs/advanced/theme.story.mdx b/docs/advanced/theme.story.mdx index 9b5786bfe3..6cfc83bb61 100644 --- a/docs/advanced/theme.story.mdx +++ b/docs/advanced/theme.story.mdx @@ -195,7 +195,7 @@ theme.borderWidth.[kilo|mega] theme.typography.[headings|subHeadings|text]..[fontSize|lineHeight] ``` -Avoid using `theme.typography` directly in your styles, rather use the specialized components [`Heading`](Typography|Heading/Base), [`SubHeading`](Typography|SubHeading/Base), and [`Text`](Typography|Text/Base). +Avoid using `theme.typography` directly in your styles, rather use the specialized components [`Heading`](Typography/Heading/Base), [`SubHeading`](Typography/SubHeading/Base), and [`Text`](Typography/Text/Base). #### Headings @@ -230,7 +230,7 @@ Avoid using `theme.typography` directly in your styles, rather use the specializ theme.fontStack.[default|mono] ``` -Refer to the [Fonts](Advanced|Fonts) documentation to learn how to define and load custom fonts in a performant way. +Refer to the [Fonts](Advanced/Fonts) documentation to learn how to define and load custom fonts in a performant way. ### Font weight @@ -254,9 +254,9 @@ theme.grid..[priority|breakpoint|cols|maxWidth|gutter] The grid provided by Circuit UI is a float-based grid. We use this grid in applications where we need to support older browsers, such as Android and iOS webviews. -The [static CSS](Advanced|Static-CSS) does not include a grid system. +The [static CSS](Advanced/Static-CSS) does not include a grid system. -Refer to the [grid](Advanced|Grid) documentation for an overview of the grid system. +Refer to the [grid](Advanced/Grid) documentation for an overview of the grid system. ### Breakpoints and media queries diff --git a/docs/introduction/contributing.story.mdx b/docs/introduction/contributing.story.mdx index 9ae08653d3..dd80c18ff2 100644 --- a/docs/introduction/contributing.story.mdx +++ b/docs/introduction/contributing.story.mdx @@ -10,7 +10,7 @@ import { Meta, Intro, Image } from '../../.storybook/components'; or become a core contributor. Here's how. -**In the interest of fostering an open and welcoming environment, we expect all participants to read and adhere to our [Code of Conduct](Introduction|Code-of-Conduct).** +**In the interest of fostering an open and welcoming environment, we expect all participants to read and adhere to our [Code of Conduct](Introduction/Code-of-Conduct).** ## Filing an issue diff --git a/docs/introduction/getting-started.story.mdx b/docs/introduction/getting-started.story.mdx index f7c2e99d71..cff22a15d4 100644 --- a/docs/introduction/getting-started.story.mdx +++ b/docs/introduction/getting-started.story.mdx @@ -67,4 +67,4 @@ const App = () => ( export default App; ``` -Refer to the [Theme documentation](Advanced|Theme) to learn how to use and customize the theme. +Refer to the [Theme documentation](Advanced/Theme) to learn how to use and customize the theme. diff --git a/docs/introduction/welcome.story.mdx b/docs/introduction/welcome.story.mdx index a7836bac2e..47c97241a8 100644 --- a/docs/introduction/welcome.story.mdx +++ b/docs/introduction/welcome.story.mdx @@ -29,7 +29,7 @@ import { Set up a new app with Circuit UI or add it to an existing project. -[Get started](Introduction|Getting-started) +[Get started](Introduction/Getting-started) @@ -37,7 +37,7 @@ Set up a new app with Circuit UI or add it to an existing project. Discover the guiding principles behind Circuit UI's design. -[Read design guidelines](Introduction|Design-Principles) +[Read design guidelines](Introduction/Design-Principles) @@ -45,7 +45,7 @@ Discover the guiding principles behind Circuit UI's design. Learn about our foundations such as colors, spacing, and typography. -[Browse theme reference](Advanced|Theme) +[Browse theme reference](Advanced/Theme) @@ -53,7 +53,7 @@ Learn about our foundations such as colors, spacing, and typography. File a bug report, suggest a change, or open a pull request. -[Contribute](Introduction|Contributing) +[Contribute](Introduction/Contributing) diff --git a/jest.config.js b/jest.config.js index d200e05be2..12dbec56e7 100644 --- a/jest.config.js +++ b/jest.config.js @@ -23,7 +23,7 @@ module.exports = { collectCoverageFrom: [ 'src/@(components|util|styles)/**/*.{ts,tsx,js,jsx}', '!src/@(components|util|styles)/**/index.{ts,tsx,js,jsx}', - '!src/@(components|util|styles)/**/*.story.{jts,tsx,s,jsx}', + '!src/@(components|util|styles)/**/*.story.{ts,tsx,js,jsx}', '!src/@(components|util|styles)/**/*.docs.mdx', '!**/node_modules/**' ], diff --git a/package.json b/package.json index dc72d8b5de..119d4c2364 100644 --- a/package.json +++ b/package.json @@ -97,6 +97,7 @@ "@storybook/react": "^5.2.0", "@storybook/source-loader": "^5.2.4", "@sumup/foundry": "^2.1.0", + "@sumup/icons": "^1.0.0-canary.7", "@svgr/webpack": "^4.3.3", "@testing-library/dom": "^6.5.0", "@testing-library/jest-dom": "^4.1.0", @@ -114,7 +115,6 @@ "babel-loader": "^8.0.5", "babel-plugin-dev-expression": "^0.2.2", "babel-plugin-dynamic-import-node": "^2.2.0", - "babel-plugin-inline-react-svg": "^1.1.0", "babel-plugin-lodash": "^3.3.2", "babel-plugin-module-resolver": "^3.2.0", "babel-plugin-react-docgen": "^3.0.0", @@ -155,6 +155,7 @@ "@emotion/is-prop-valid": "0.8.x", "@emotion/styled": "10.x", "@emotion/stylis": "0.8.x", + "@sumup/icons": "1.x", "emotion-theming": "10.x", "react": ">=16.8.0 < 17", "react-dom": ">=16.8.0 < 17" diff --git a/scripts/static-styles/config.js b/scripts/static-styles/config.js index 2aa945474d..c370124fa1 100644 --- a/scripts/static-styles/config.js +++ b/scripts/static-styles/config.js @@ -181,8 +181,9 @@ export default { size: [SubHeading.KILO, SubHeading.MEGA] }), getComponentInfo(Tag, { - icon: PropTypes.element, - onRemove: PropTypes.func + onRemove: PropTypes.func, + prefix: PropTypes.element, + suffix: PropTypes.element }), getComponentInfo(Text, { size: [Text.KILO, Text.MEGA, Text.GIGA] diff --git a/src/__snapshots__/storyshots.spec.js.snap b/src/__snapshots__/storyshots.spec.js.snap index 78e3f69c72..01bf275edb 100644 --- a/src/__snapshots__/storyshots.spec.js.snap +++ b/src/__snapshots__/storyshots.spec.js.snap @@ -1173,6 +1173,19 @@ exports[`Storyshots Components/Button/ButtonGroup Base 1`] = ` `; exports[`Storyshots Components/Button/CloseButton Base 1`] = ` +.circuit-0 { + border: 0; + -webkit-clip: rect(0 0 0 0); + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + white-space: nowrap; + width: 1px; +} + .circuit-3 { padding: 0; margin: 0; @@ -1180,10 +1193,14 @@ exports[`Storyshots Components/Button/CloseButton Base 1`] = ` background-color: transparent; border: none; cursor: pointer; - fill: #0F131A; overflow: initial; - height: 16px; - width: 16px; + color: #5C656F; + height: 24px; + width: 24px; +} + +.circuit-3:hover { + color: #212933; } .circuit-3:focus, @@ -1196,28 +1213,26 @@ exports[`Storyshots Components/Button/CloseButton Base 1`] = ` width: 100%; } -.circuit-0 { - border: 0; - -webkit-clip: rect(0 0 0 0); - clip: rect(0 0 0 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - white-space: nowrap; - width: 1px; -} - `; -exports[`Storyshots Components/Button/LoadingButton Error Animation 1`] = ` +exports[`Storyshots Components/Button/LoadingButton Base 1`] = ` @keyframes animation-0 { 0% { -webkit-transform: rotate3d(0,0,1,0deg); @@ -1309,7 +1324,7 @@ exports[`Storyshots Components/Button/LoadingButton Error Animation 1`] = ` } } -.circuit-9 { +.circuit-7 { background-color: #FAFBFC; border-color: #D8DDE1; border-radius: 4px; @@ -1331,38 +1346,40 @@ exports[`Storyshots Components/Button/LoadingButton Error Animation 1`] = ` border-color: #1760CE; color: #FFFFFF; padding: calc(8px - 0px) calc(24px - 0px); + position: relative; + overflow: hidden; } -.circuit-9:active { +.circuit-7:active { background-color: #D8DDE1; border-color: #9DA7B1; box-shadow: inset 0 4px 8px 0 rgba(12,15,20,0.3); } -.circuit-9:focus { +.circuit-7:focus { border-color: #9DA7B1; border-width: 2px; outline: 0; padding: calc(8px - 1px) calc(24px - 1px); } -.circuit-9:hover { +.circuit-7:hover { background-color: #D8DDE1; } -.circuit-9:hover, -.circuit-9:active { +.circuit-7:hover, +.circuit-7:active { border-color: #9DA7B1; border-width: 1px; padding: calc(8px - 0px) calc(24px - 0px); } -.circuit-9[href] { +.circuit-7[href] { display: inline-block; } -.circuit-9:disabled, -.circuit-9[disabled] { +.circuit-7:disabled, +.circuit-7[disabled] { opacity: 0.4; pointer-events: none; -webkit-user-selectable: none; @@ -1371,64 +1388,61 @@ exports[`Storyshots Components/Button/LoadingButton Error Animation 1`] = ` user-selectable: none; } -.circuit-9:active { +.circuit-7:active { background-color: #1760CE; border-color: #003C8B; } -.circuit-9:focus { +.circuit-7:focus { border-color: #1760CE; } -.circuit-9:hover { +.circuit-7:hover { background-color: #1760CE; } -.circuit-9:hover, -.circuit-9:active { +.circuit-7:hover, +.circuit-7:active { border-color: #003C8B; } -.circuit-7 { - position: relative; -} - -.circuit-3 { - opacity: 0; - max-width: -webkit-fit-content; - max-width: -moz-fit-content; - max-width: fit-content; - position: relative; - -webkit-transition: opacity 200ms ease-in-out; - transition: opacity 200ms ease-in-out; +.circuit-2 { height: 24px; width: 24px; position: absolute; - left: 50%; - top: 50%; - -webkit-transform: translate(-50%,-50%); - -ms-transform: translate(-50%,-50%); - transform: translate(-50%,-50%); -} - -.circuit-0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; width: 100%; - height: 100%; } -.circuit-0 > path { - fill: #FFFFFF; -} - -.circuit-0 > path { +.circuit-0 { + width: 24px; + height: 24px; + border-radius: 100%; + border: 2px solid #FFFFFF; + border-top-color: transparent; -webkit-animation: animation-0 1s infinite linear; animation: animation-0 1s infinite linear; -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; + opacity: 0; + -webkit-transition: opacity 200ms ease-in-out; + transition: opacity 200ms ease-in-out; } -.circuit-5 { +.circuit-4 { + display: inline-block; opacity: 1; -webkit-transform: translate(0,0); -ms-transform: translate(0,0); @@ -1439,34 +1453,27 @@ exports[`Storyshots Components/Button/LoadingButton Error Animation 1`] = ` } `; -exports[`Storyshots Components/Button/LoadingButton No Exit Animation 1`] = ` +exports[`Storyshots Components/Button/LoadingButton Error 1`] = ` @keyframes animation-0 { 0% { -webkit-transform: rotate3d(0,0,1,0deg); @@ -1481,7 +1488,7 @@ exports[`Storyshots Components/Button/LoadingButton No Exit Animation 1`] = ` } } -.circuit-9 { +.circuit-7 { background-color: #FAFBFC; border-color: #D8DDE1; border-radius: 4px; @@ -1503,38 +1510,40 @@ exports[`Storyshots Components/Button/LoadingButton No Exit Animation 1`] = ` border-color: #1760CE; color: #FFFFFF; padding: calc(8px - 0px) calc(24px - 0px); + position: relative; + overflow: hidden; } -.circuit-9:active { +.circuit-7:active { background-color: #D8DDE1; border-color: #9DA7B1; box-shadow: inset 0 4px 8px 0 rgba(12,15,20,0.3); } -.circuit-9:focus { +.circuit-7:focus { border-color: #9DA7B1; border-width: 2px; outline: 0; padding: calc(8px - 1px) calc(24px - 1px); } -.circuit-9:hover { +.circuit-7:hover { background-color: #D8DDE1; } -.circuit-9:hover, -.circuit-9:active { +.circuit-7:hover, +.circuit-7:active { border-color: #9DA7B1; border-width: 1px; padding: calc(8px - 0px) calc(24px - 0px); } -.circuit-9[href] { +.circuit-7[href] { display: inline-block; } -.circuit-9:disabled, -.circuit-9[disabled] { +.circuit-7:disabled, +.circuit-7[disabled] { opacity: 0.4; pointer-events: none; -webkit-user-selectable: none; @@ -1543,64 +1552,61 @@ exports[`Storyshots Components/Button/LoadingButton No Exit Animation 1`] = ` user-selectable: none; } -.circuit-9:active { +.circuit-7:active { background-color: #1760CE; border-color: #003C8B; } -.circuit-9:focus { +.circuit-7:focus { border-color: #1760CE; } -.circuit-9:hover { +.circuit-7:hover { background-color: #1760CE; } -.circuit-9:hover, -.circuit-9:active { +.circuit-7:hover, +.circuit-7:active { border-color: #003C8B; } -.circuit-7 { - position: relative; -} - -.circuit-3 { - opacity: 0; - max-width: -webkit-fit-content; - max-width: -moz-fit-content; - max-width: fit-content; - position: relative; - -webkit-transition: opacity 200ms ease-in-out; - transition: opacity 200ms ease-in-out; +.circuit-2 { height: 24px; width: 24px; position: absolute; - left: 50%; - top: 50%; - -webkit-transform: translate(-50%,-50%); - -ms-transform: translate(-50%,-50%); - transform: translate(-50%,-50%); -} - -.circuit-0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; width: 100%; - height: 100%; -} - -.circuit-0 > path { - fill: #FFFFFF; } -.circuit-0 > path { +.circuit-0 { + width: 24px; + height: 24px; + border-radius: 100%; + border: 2px solid #FFFFFF; + border-top-color: transparent; -webkit-animation: animation-0 1s infinite linear; animation: animation-0 1s infinite linear; -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; + opacity: 0; + -webkit-transition: opacity 200ms ease-in-out; + transition: opacity 200ms ease-in-out; } -.circuit-5 { +.circuit-4 { + display: inline-block; opacity: 1; -webkit-transform: translate(0,0); -ms-transform: translate(0,0); @@ -1611,34 +1617,27 @@ exports[`Storyshots Components/Button/LoadingButton No Exit Animation 1`] = ` } `; -exports[`Storyshots Components/Button/LoadingButton Success Animation 1`] = ` +exports[`Storyshots Components/Button/LoadingButton Success 1`] = ` @keyframes animation-0 { 0% { -webkit-transform: rotate3d(0,0,1,0deg); @@ -1653,7 +1652,7 @@ exports[`Storyshots Components/Button/LoadingButton Success Animation 1`] = ` } } -.circuit-9 { +.circuit-7 { background-color: #FAFBFC; border-color: #D8DDE1; border-radius: 4px; @@ -1675,38 +1674,40 @@ exports[`Storyshots Components/Button/LoadingButton Success Animation 1`] = ` border-color: #1760CE; color: #FFFFFF; padding: calc(8px - 0px) calc(24px - 0px); + position: relative; + overflow: hidden; } -.circuit-9:active { +.circuit-7:active { background-color: #D8DDE1; border-color: #9DA7B1; box-shadow: inset 0 4px 8px 0 rgba(12,15,20,0.3); } -.circuit-9:focus { +.circuit-7:focus { border-color: #9DA7B1; border-width: 2px; outline: 0; padding: calc(8px - 1px) calc(24px - 1px); } -.circuit-9:hover { +.circuit-7:hover { background-color: #D8DDE1; } -.circuit-9:hover, -.circuit-9:active { +.circuit-7:hover, +.circuit-7:active { border-color: #9DA7B1; border-width: 1px; padding: calc(8px - 0px) calc(24px - 0px); } -.circuit-9[href] { +.circuit-7[href] { display: inline-block; } -.circuit-9:disabled, -.circuit-9[disabled] { +.circuit-7:disabled, +.circuit-7[disabled] { opacity: 0.4; pointer-events: none; -webkit-user-selectable: none; @@ -1715,64 +1716,61 @@ exports[`Storyshots Components/Button/LoadingButton Success Animation 1`] = ` user-selectable: none; } -.circuit-9:active { +.circuit-7:active { background-color: #1760CE; border-color: #003C8B; } -.circuit-9:focus { +.circuit-7:focus { border-color: #1760CE; } -.circuit-9:hover { +.circuit-7:hover { background-color: #1760CE; } -.circuit-9:hover, -.circuit-9:active { +.circuit-7:hover, +.circuit-7:active { border-color: #003C8B; } -.circuit-7 { - position: relative; -} - -.circuit-3 { - opacity: 0; - max-width: -webkit-fit-content; - max-width: -moz-fit-content; - max-width: fit-content; - position: relative; - -webkit-transition: opacity 200ms ease-in-out; - transition: opacity 200ms ease-in-out; +.circuit-2 { height: 24px; width: 24px; position: absolute; - left: 50%; - top: 50%; - -webkit-transform: translate(-50%,-50%); - -ms-transform: translate(-50%,-50%); - transform: translate(-50%,-50%); -} - -.circuit-0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; width: 100%; - height: 100%; } -.circuit-0 > path { - fill: #FFFFFF; -} - -.circuit-0 > path { +.circuit-0 { + width: 24px; + height: 24px; + border-radius: 100%; + border: 2px solid #FFFFFF; + border-top-color: transparent; -webkit-animation: animation-0 1s infinite linear; animation: animation-0 1s infinite linear; -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; + opacity: 0; + -webkit-transition: opacity 200ms ease-in-out; + transition: opacity 200ms ease-in-out; } -.circuit-5 { +.circuit-4 { + display: inline-block; opacity: 1; -webkit-transform: translate(0,0); -ms-transform: translate(0,0); @@ -1783,42 +1781,42 @@ exports[`Storyshots Components/Button/LoadingButton Success Animation 1`] = ` } `; exports[`Storyshots Components/Calendar/CalendarTag Base 1`] = ` .circuit-0 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; border-radius: 4px; font-size: 16px; line-height: 24px; box-shadow: 0px 0px 0px 1px #D8DDE1; padding: 4px 12px; cursor: default; - display: inline-block; cursor: pointer; } @@ -1828,23 +1826,30 @@ exports[`Storyshots Components/Calendar/CalendarTag Base 1`] = ` }
- Dates - +
`; exports[`Storyshots Components/Calendar/CalendarTagTwoStep Base 1`] = ` .circuit-0 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; border-radius: 4px; font-size: 16px; line-height: 24px; box-shadow: 0px 0px 0px 1px #D8DDE1; padding: 4px 12px; cursor: default; - display: inline-block; cursor: pointer; } @@ -1854,20 +1859,20 @@ exports[`Storyshots Components/Calendar/CalendarTagTwoStep Base 1`] = ` }
- Dates - +
`; exports[`Storyshots Components/Calendar/RangePicker Base 1`] = ` -.circuit-2 .PresetDateRangePicker_panel { +.circuit-4 .PresetDateRangePicker_panel { padding: 0 22px 11px; } -.circuit-2 .PresetDateRangePicker_button { +.circuit-4 .PresetDateRangePicker_button { position: relative; height: 100%; text-align: center; @@ -1885,41 +1890,41 @@ exports[`Storyshots Components/Calendar/RangePicker Base 1`] = ` cursor: pointer; } -.circuit-2 .PresetDateRangePicker_button:active { +.circuit-4 .PresetDateRangePicker_button:active { outline: 0; } -.circuit-2 .PresetDateRangePicker_button__selected { +.circuit-4 .PresetDateRangePicker_button__selected { color: #fff; background: #00a699; } -.circuit-2 .SingleDatePickerInput { +.circuit-4 .SingleDatePickerInput { display: inline-block; background-color: #fff; } -.circuit-2 .SingleDatePickerInput__withBorder { +.circuit-4 .SingleDatePickerInput__withBorder { border: 1px solid #dbdbdb; } -.circuit-2 .SingleDatePickerInput__rtl { +.circuit-4 .SingleDatePickerInput__rtl { direction: rtl; } -.circuit-2 .SingleDatePickerInput__disabled { +.circuit-4 .SingleDatePickerInput__disabled { background-color: #f2f2f2; } -.circuit-2 .SingleDatePickerInput__block { +.circuit-4 .SingleDatePickerInput__block { display: block; } -.circuit-2 .SingleDatePickerInput__showClearDate { +.circuit-4 .SingleDatePickerInput__showClearDate { padding-right: 30px; } -.circuit-2 .SingleDatePickerInput_clearDate { +.circuit-4 .SingleDatePickerInput_clearDate { background: 0 0; border: 0; color: inherit; @@ -1939,32 +1944,32 @@ exports[`Storyshots Components/Calendar/RangePicker Base 1`] = ` transform: translateY(-50%); } -.circuit-2 .SingleDatePickerInput_clearDate__default:focus, -.circuit-2 .SingleDatePickerInput_clearDate__default:hover { +.circuit-4 .SingleDatePickerInput_clearDate__default:focus, +.circuit-4 .SingleDatePickerInput_clearDate__default:hover { background: #dbdbdb; border-radius: 50%; } -.circuit-2 .SingleDatePickerInput_clearDate__small { +.circuit-4 .SingleDatePickerInput_clearDate__small { padding: 6px; } -.circuit-2 .SingleDatePickerInput_clearDate__hide { +.circuit-4 .SingleDatePickerInput_clearDate__hide { visibility: hidden; } -.circuit-2 .SingleDatePickerInput_clearDate_svg { +.circuit-4 .SingleDatePickerInput_clearDate_svg { fill: #82888a; height: 12px; width: 15px; vertical-align: middle; } -.circuit-2 .SingleDatePickerInput_clearDate_svg__small { +.circuit-4 .SingleDatePickerInput_clearDate_svg__small { height: 9px; } -.circuit-2 .SingleDatePickerInput_calendarIcon { +.circuit-4 .SingleDatePickerInput_calendarIcon { background: 0 0; border: 0; color: inherit; @@ -1978,41 +1983,41 @@ exports[`Storyshots Components/Calendar/RangePicker Base 1`] = ` margin: 0 5px 0 10px; } -.circuit-2 .SingleDatePickerInput_calendarIcon_svg { +.circuit-4 .SingleDatePickerInput_calendarIcon_svg { fill: #82888a; height: 15px; width: 14px; vertical-align: middle; } -.circuit-2 .SingleDatePicker { +.circuit-4 .SingleDatePicker { position: relative; display: inline-block; } -.circuit-2 .SingleDatePicker__block { +.circuit-4 .SingleDatePicker__block { display: block; } -.circuit-2 .SingleDatePicker_picker { +.circuit-4 .SingleDatePicker_picker { z-index: 1; background-color: #fff; position: absolute; } -.circuit-2 .SingleDatePicker_picker__rtl { +.circuit-4 .SingleDatePicker_picker__rtl { direction: rtl; } -.circuit-2 .SingleDatePicker_picker__directionLeft { +.circuit-4 .SingleDatePicker_picker__directionLeft { left: 0; } -.circuit-2 .SingleDatePicker_picker__directionRight { +.circuit-4 .SingleDatePicker_picker__directionRight { right: 0; } -.circuit-2 .SingleDatePicker_picker__portal { +.circuit-4 .SingleDatePicker_picker__portal { background-color: rgba(0,0,0,0.3); position: fixed; top: 0; @@ -2021,11 +2026,11 @@ exports[`Storyshots Components/Calendar/RangePicker Base 1`] = ` width: 100%; } -.circuit-2 .SingleDatePicker_picker__fullScreenPortal { +.circuit-4 .SingleDatePicker_picker__fullScreenPortal { background-color: #fff; } -.circuit-2 .SingleDatePicker_closeButton { +.circuit-4 .SingleDatePicker_closeButton { background: 0 0; border: 0; color: inherit; @@ -2040,20 +2045,20 @@ exports[`Storyshots Components/Calendar/RangePicker Base 1`] = ` z-index: 2; } -.circuit-2 .SingleDatePicker_closeButton:focus, -.circuit-2 .SingleDatePicker_closeButton:hover { +.circuit-4 .SingleDatePicker_closeButton:focus, +.circuit-4 .SingleDatePicker_closeButton:hover { color: darken(#cacccd,10%); -webkit-text-decoration: none; text-decoration: none; } -.circuit-2 .SingleDatePicker_closeButton_svg { +.circuit-4 .SingleDatePicker_closeButton_svg { height: 15px; width: 15px; fill: #cacccd; } -.circuit-2 .DayPickerKeyboardShortcuts_buttonReset { +.circuit-4 .DayPickerKeyboardShortcuts_buttonReset { background: 0 0; border: 0; border-radius: 0; @@ -2066,70 +2071,70 @@ exports[`Storyshots Components/Calendar/RangePicker Base 1`] = ` font-size: 14px; } -.circuit-2 .DayPickerKeyboardShortcuts_buttonReset:active { +.circuit-4 .DayPickerKeyboardShortcuts_buttonReset:active { outline: 0; } -.circuit-2 .DayPickerKeyboardShortcuts_show { +.circuit-4 .DayPickerKeyboardShortcuts_show { width: 22px; position: absolute; z-index: 2; } -.circuit-2 .DayPickerKeyboardShortcuts_show__bottomRight { +.circuit-4 .DayPickerKeyboardShortcuts_show__bottomRight { border-top: 26px solid transparent; border-right: 33px solid #00a699; bottom: 0; right: 0; } -.circuit-2 .DayPickerKeyboardShortcuts_show__bottomRight:hover { +.circuit-4 .DayPickerKeyboardShortcuts_show__bottomRight:hover { border-right: 33px solid #008489; } -.circuit-2 .DayPickerKeyboardShortcuts_show__topRight { +.circuit-4 .DayPickerKeyboardShortcuts_show__topRight { border-bottom: 26px solid transparent; border-right: 33px solid #00a699; top: 0; right: 0; } -.circuit-2 .DayPickerKeyboardShortcuts_show__topRight:hover { +.circuit-4 .DayPickerKeyboardShortcuts_show__topRight:hover { border-right: 33px solid #008489; } -.circuit-2 .DayPickerKeyboardShortcuts_show__topLeft { +.circuit-4 .DayPickerKeyboardShortcuts_show__topLeft { border-bottom: 26px solid transparent; border-left: 33px solid #00a699; top: 0; left: 0; } -.circuit-2 .DayPickerKeyboardShortcuts_show__topLeft:hover { +.circuit-4 .DayPickerKeyboardShortcuts_show__topLeft:hover { border-left: 33px solid #008489; } -.circuit-2 .DayPickerKeyboardShortcuts_showSpan { +.circuit-4 .DayPickerKeyboardShortcuts_showSpan { color: #fff; position: absolute; } -.circuit-2 .DayPickerKeyboardShortcuts_showSpan__bottomRight { +.circuit-4 .DayPickerKeyboardShortcuts_showSpan__bottomRight { bottom: 0; right: -28px; } -.circuit-2 .DayPickerKeyboardShortcuts_showSpan__topRight { +.circuit-4 .DayPickerKeyboardShortcuts_showSpan__topRight { top: 1px; right: -28px; } -.circuit-2 .DayPickerKeyboardShortcuts_showSpan__topLeft { +.circuit-4 .DayPickerKeyboardShortcuts_showSpan__topLeft { top: 1px; left: -28px; } -.circuit-2 .DayPickerKeyboardShortcuts_panel { +.circuit-4 .DayPickerKeyboardShortcuts_panel { overflow: auto; background: #fff; border: 1px solid #dbdbdb; @@ -2144,41 +2149,41 @@ exports[`Storyshots Components/Calendar/RangePicker Base 1`] = ` margin: 33px; } -.circuit-2 .DayPickerKeyboardShortcuts_title { +.circuit-4 .DayPickerKeyboardShortcuts_title { font-size: 16px; font-weight: 700; margin: 0; } -.circuit-2 .DayPickerKeyboardShortcuts_list { +.circuit-4 .DayPickerKeyboardShortcuts_list { list-style: none; padding: 0; font-size: 14px; } -.circuit-2 .DayPickerKeyboardShortcuts_close { +.circuit-4 .DayPickerKeyboardShortcuts_close { position: absolute; right: 22px; top: 22px; z-index: 2; } -.circuit-2 .DayPickerKeyboardShortcuts_close:active { +.circuit-4 .DayPickerKeyboardShortcuts_close:active { outline: 0; } -.circuit-2 .DayPickerKeyboardShortcuts_closeSvg { +.circuit-4 .DayPickerKeyboardShortcuts_closeSvg { height: 15px; width: 15px; fill: #cacccd; } -.circuit-2 .DayPickerKeyboardShortcuts_closeSvg:focus, -.circuit-2 .DayPickerKeyboardShortcuts_closeSvg:hover { +.circuit-4 .DayPickerKeyboardShortcuts_closeSvg:focus, +.circuit-4 .DayPickerKeyboardShortcuts_closeSvg:hover { fill: #82888a; } -.circuit-2 .CalendarDay { +.circuit-4 .CalendarDay { -moz-box-sizing: border-box; box-sizing: border-box; cursor: pointer; @@ -2186,116 +2191,116 @@ exports[`Storyshots Components/Calendar/RangePicker Base 1`] = ` text-align: center; } -.circuit-2 .CalendarDay:active { +.circuit-4 .CalendarDay:active { outline: 0; } -.circuit-2 .CalendarDay__defaultCursor { +.circuit-4 .CalendarDay__defaultCursor { cursor: default; } -.circuit-2 .CalendarDay__default { +.circuit-4 .CalendarDay__default { border: 1px solid #e4e7e7; color: #565a5c; background: #fff; } -.circuit-2 .CalendarDay__default:hover { +.circuit-4 .CalendarDay__default:hover { background: #e4e7e7; border: 1px double #e4e7e7; color: inherit; } -.circuit-2 .CalendarDay__hovered_offset { +.circuit-4 .CalendarDay__hovered_offset { background: #f4f5f5; border: 1px double #e4e7e7; color: inherit; } -.circuit-2 .CalendarDay__outside { +.circuit-4 .CalendarDay__outside { border: 0; background: #fff; color: #565a5c; } -.circuit-2 .CalendarDay__blocked_minimum_nights { +.circuit-4 .CalendarDay__blocked_minimum_nights { background: #fff; border: 1px solid #eceeee; color: #cacccd; } -.circuit-2 .CalendarDay__blocked_minimum_nights:active, -.circuit-2 .CalendarDay__blocked_minimum_nights:hover { +.circuit-4 .CalendarDay__blocked_minimum_nights:active, +.circuit-4 .CalendarDay__blocked_minimum_nights:hover { background: #fff; color: #cacccd; } -.circuit-2 .CalendarDay__highlighted_calendar { +.circuit-4 .CalendarDay__highlighted_calendar { background: #ffe8bc; color: #565a5c; } -.circuit-2 .CalendarDay__highlighted_calendar:active, -.circuit-2 .CalendarDay__highlighted_calendar:hover { +.circuit-4 .CalendarDay__highlighted_calendar:active, +.circuit-4 .CalendarDay__highlighted_calendar:hover { background: #ffce71; color: #565a5c; } -.circuit-2 .CalendarDay__selected_span { +.circuit-4 .CalendarDay__selected_span { background: #66e2da; border: 1px solid #33dacd; color: #fff; } -.circuit-2 .CalendarDay__selected_span:active, -.circuit-2 .CalendarDay__selected_span:hover { +.circuit-4 .CalendarDay__selected_span:active, +.circuit-4 .CalendarDay__selected_span:hover { background: #33dacd; border: 1px solid #33dacd; color: #fff; } -.circuit-2 .CalendarDay__last_in_range { +.circuit-4 .CalendarDay__last_in_range { border-right: #00a699; } -.circuit-2 .CalendarDay__selected, -.circuit-2 .CalendarDay__selected:active, -.circuit-2 .CalendarDay__selected:hover { +.circuit-4 .CalendarDay__selected, +.circuit-4 .CalendarDay__selected:active, +.circuit-4 .CalendarDay__selected:hover { background: #00a699; border: 1px solid #00a699; color: #fff; } -.circuit-2 .CalendarDay__hovered_span, -.circuit-2 .CalendarDay__hovered_span:hover { +.circuit-4 .CalendarDay__hovered_span, +.circuit-4 .CalendarDay__hovered_span:hover { background: #b2f1ec; border: 1px solid #80e8e0; color: #007a87; } -.circuit-2 .CalendarDay__hovered_span:active { +.circuit-4 .CalendarDay__hovered_span:active { background: #80e8e0; border: 1px solid #80e8e0; color: #007a87; } -.circuit-2 .CalendarDay__blocked_calendar, -.circuit-2 .CalendarDay__blocked_calendar:active, -.circuit-2 .CalendarDay__blocked_calendar:hover { +.circuit-4 .CalendarDay__blocked_calendar, +.circuit-4 .CalendarDay__blocked_calendar:active, +.circuit-4 .CalendarDay__blocked_calendar:hover { background: #cacccd; border: 1px solid #cacccd; color: #82888a; } -.circuit-2 .CalendarDay__blocked_out_of_range, -.circuit-2 .CalendarDay__blocked_out_of_range:active, -.circuit-2 .CalendarDay__blocked_out_of_range:hover { +.circuit-4 .CalendarDay__blocked_out_of_range, +.circuit-4 .CalendarDay__blocked_out_of_range:active, +.circuit-4 .CalendarDay__blocked_out_of_range:hover { background: #fff; border: 1px solid #e4e7e7; color: #cacccd; } -.circuit-2 .CalendarMonth { +.circuit-4 .CalendarMonth { background: #fff; text-align: center; padding: 0 13px; @@ -2309,16 +2314,16 @@ exports[`Storyshots Components/Calendar/RangePicker Base 1`] = ` user-select: none; } -.circuit-2 .CalendarMonth_table { +.circuit-4 .CalendarMonth_table { border-collapse: collapse; border-spacing: 0; } -.circuit-2 .CalendarMonth_verticalSpacing { +.circuit-4 .CalendarMonth_verticalSpacing { border-collapse: separate; } -.circuit-2 .CalendarMonth_caption { +.circuit-4 .CalendarMonth_caption { color: #565a5c; font-size: 18px; text-align: center; @@ -2327,58 +2332,58 @@ exports[`Storyshots Components/Calendar/RangePicker Base 1`] = ` caption-side: initial; } -.circuit-2 .CalendarMonth_caption__verticalScrollable { +.circuit-4 .CalendarMonth_caption__verticalScrollable { padding-top: 12px; padding-bottom: 7px; } -.circuit-2 .CalendarMonthGrid { +.circuit-4 .CalendarMonthGrid { background: #fff; text-align: left; z-index: 0; } -.circuit-2 .CalendarMonthGrid__animating { +.circuit-4 .CalendarMonthGrid__animating { z-index: 1; } -.circuit-2 .CalendarMonthGrid__horizontal { +.circuit-4 .CalendarMonthGrid__horizontal { position: absolute; left: 9px; } -.circuit-2 .CalendarMonthGrid__vertical { +.circuit-4 .CalendarMonthGrid__vertical { margin: 0 auto; } -.circuit-2 .CalendarMonthGrid__vertical_scrollable { +.circuit-4 .CalendarMonthGrid__vertical_scrollable { margin: 0 auto; overflow-y: scroll; } -.circuit-2 .CalendarMonthGrid_month__horizontal { +.circuit-4 .CalendarMonthGrid_month__horizontal { display: inline-block; vertical-align: top; min-height: 100%; } -.circuit-2 .CalendarMonthGrid_month__hideForAnimation { +.circuit-4 .CalendarMonthGrid_month__hideForAnimation { position: absolute; z-index: -1; opacity: 0; pointer-events: none; } -.circuit-2 .CalendarMonthGrid_month__hidden { +.circuit-4 .CalendarMonthGrid_month__hidden { visibility: hidden; } -.circuit-2 .DayPickerNavigation_container { +.circuit-4 .DayPickerNavigation_container { position: relative; z-index: 2; } -.circuit-2 .DayPickerNavigation_container__vertical { +.circuit-4 .DayPickerNavigation_container__vertical { background: #fff; box-shadow: 0 0 5px 2px rgba(0,0,0,0.1); position: absolute; @@ -2388,11 +2393,11 @@ exports[`Storyshots Components/Calendar/RangePicker Base 1`] = ` width: 100%; } -.circuit-2 .DayPickerNavigation_container__verticalScrollable { +.circuit-4 .DayPickerNavigation_container__verticalScrollable { position: relative; } -.circuit-2 .DayPickerNavigation_button { +.circuit-4 .DayPickerNavigation_button { cursor: pointer; line-height: 0.78; -webkit-user-select: none; @@ -2404,120 +2409,120 @@ exports[`Storyshots Components/Calendar/RangePicker Base 1`] = ` user-select: none; } -.circuit-2 .DayPickerNavigation_button__default { +.circuit-4 .DayPickerNavigation_button__default { border: 1px solid #e4e7e7; background-color: #fff; color: #757575; } -.circuit-2 .DayPickerNavigation_button__default:focus, -.circuit-2 .DayPickerNavigation_button__default:hover { +.circuit-4 .DayPickerNavigation_button__default:focus, +.circuit-4 .DayPickerNavigation_button__default:hover { border: 1px solid #c4c4c4; } -.circuit-2 .DayPickerNavigation_button__default:active { +.circuit-4 .DayPickerNavigation_button__default:active { background: #f2f2f2; } -.circuit-2 .DayPickerNavigation_button__horizontal { +.circuit-4 .DayPickerNavigation_button__horizontal { border-radius: 3px; padding: 6px 9px; top: 18px; position: absolute; } -.circuit-2 .DayPickerNavigation_leftButton__horizontal { +.circuit-4 .DayPickerNavigation_leftButton__horizontal { left: 22px; } -.circuit-2 .DayPickerNavigation_rightButton__horizontal { +.circuit-4 .DayPickerNavigation_rightButton__horizontal { right: 22px; } -.circuit-2 .DayPickerNavigation_button__vertical { +.circuit-4 .DayPickerNavigation_button__vertical { display: inline-block; position: relative; height: 100%; width: 50%; } -.circuit-2 .DayPickerNavigation_button__vertical__default { +.circuit-4 .DayPickerNavigation_button__vertical__default { padding: 5px; } -.circuit-2 .DayPickerNavigation_nextButton__vertical__default { +.circuit-4 .DayPickerNavigation_nextButton__vertical__default { border-left: 0; } -.circuit-2 .DayPickerNavigation_nextButton__verticalScrollable { +.circuit-4 .DayPickerNavigation_nextButton__verticalScrollable { width: 100%; } -.circuit-2 .DayPickerNavigation_svg__horizontal { +.circuit-4 .DayPickerNavigation_svg__horizontal { height: 19px; width: 19px; fill: #82888a; } -.circuit-2 .DayPickerNavigation_svg__vertical { +.circuit-4 .DayPickerNavigation_svg__vertical { height: 42px; width: 42px; fill: #565a5c; } -.circuit-2 .DayPicker { +.circuit-4 .DayPicker { background: #fff; position: relative; text-align: left; } -.circuit-2 .DayPicker__horizontal { +.circuit-4 .DayPicker__horizontal { background: #fff; } -.circuit-2 .DayPicker__verticalScrollable { +.circuit-4 .DayPicker__verticalScrollable { height: 100%; } -.circuit-2 .DayPicker__hidden { +.circuit-4 .DayPicker__hidden { visibility: hidden; } -.circuit-2 .DayPicker__withBorder { +.circuit-4 .DayPicker__withBorder { box-shadow: 0 2px 6px rgba(0,0,0,0.05),0 0 0 1px rgba(0,0,0,0.07); border-radius: 3px; } -.circuit-2 .DayPicker_portal__horizontal { +.circuit-4 .DayPicker_portal__horizontal { box-shadow: none; position: absolute; left: 50%; top: 50%; } -.circuit-2 .DayPicker_portal__vertical { +.circuit-4 .DayPicker_portal__vertical { position: initial; } -.circuit-2 .DayPicker_focusRegion { +.circuit-4 .DayPicker_focusRegion { outline: 0; } -.circuit-2 .DayPicker_calendarInfo__horizontal, -.circuit-2 .DayPicker_wrapper__horizontal { +.circuit-4 .DayPicker_calendarInfo__horizontal, +.circuit-4 .DayPicker_wrapper__horizontal { display: inline-block; vertical-align: top; } -.circuit-2 .DayPicker_weekHeaders { +.circuit-4 .DayPicker_weekHeaders { position: relative; } -.circuit-2 .DayPicker_weekHeaders__horizontal { +.circuit-4 .DayPicker_weekHeaders__horizontal { margin-left: 9px; } -.circuit-2 .DayPicker_weekHeader { +.circuit-4 .DayPicker_weekHeader { color: #757575; position: absolute; top: 62px; @@ -2526,11 +2531,11 @@ exports[`Storyshots Components/Calendar/RangePicker Base 1`] = ` text-align: left; } -.circuit-2 .DayPicker_weekHeader__vertical { +.circuit-4 .DayPicker_weekHeader__vertical { left: 50%; } -.circuit-2 .DayPicker_weekHeader__verticalScrollable { +.circuit-4 .DayPicker_weekHeader__verticalScrollable { top: 0; display: table-row; border-bottom: 1px solid #dbdbdb; @@ -2541,7 +2546,7 @@ exports[`Storyshots Components/Calendar/RangePicker Base 1`] = ` text-align: center; } -.circuit-2 .DayPicker_weekHeader_ul { +.circuit-4 .DayPicker_weekHeader_ul { list-style: none; margin: 1px 0; padding-left: 0; @@ -2549,29 +2554,29 @@ exports[`Storyshots Components/Calendar/RangePicker Base 1`] = ` font-size: 14px; } -.circuit-2 .DayPicker_weekHeader_li { +.circuit-4 .DayPicker_weekHeader_li { display: inline-block; text-align: center; } -.circuit-2 .DayPicker_transitionContainer { +.circuit-4 .DayPicker_transitionContainer { position: relative; overflow: hidden; border-radius: 3px; } -.circuit-2 .DayPicker_transitionContainer__horizontal { +.circuit-4 .DayPicker_transitionContainer__horizontal { -webkit-transition: height 0.2s ease-in-out; -moz-transition: height 0.2s ease-in-out; -webkit-transition: height 0.2s ease-in-out; transition: height 0.2s ease-in-out; } -.circuit-2 .DayPicker_transitionContainer__vertical { +.circuit-4 .DayPicker_transitionContainer__vertical { width: 100%; } -.circuit-2 .DayPicker_transitionContainer__verticalScrollable { +.circuit-4 .DayPicker_transitionContainer__verticalScrollable { padding-top: 20px; height: 100%; position: absolute; @@ -2582,7 +2587,7 @@ exports[`Storyshots Components/Calendar/RangePicker Base 1`] = ` overflow-y: scroll; } -.circuit-2 .DateInput { +.circuit-4 .DateInput { margin: 0; padding: 0; background: #fff; @@ -2592,20 +2597,20 @@ exports[`Storyshots Components/Calendar/RangePicker Base 1`] = ` vertical-align: middle; } -.circuit-2 .DateInput__small { +.circuit-4 .DateInput__small { width: 90px; } -.circuit-2 .DateInput__block { +.circuit-4 .DateInput__block { width: 100%; } -.circuit-2 .DateInput__disabled { +.circuit-4 .DateInput__disabled { background: #f2f2f2; color: #dbdbdb; } -.circuit-2 .DateInput_input { +.circuit-4 .DateInput_input { font-weight: 200; font-size: 18px; line-height: 24px; @@ -2620,17 +2625,17 @@ exports[`Storyshots Components/Calendar/RangePicker Base 1`] = ` border-left: 0; } -.circuit-2 .DateInput_input__small { +.circuit-4 .DateInput_input__small { font-size: 14px; line-height: 18px; padding: 8px 8px 6px; } -.circuit-2 .DateInput_input__regular { +.circuit-4 .DateInput_input__regular { font-weight: auto; } -.circuit-2 .DateInput_input__readOnly { +.circuit-4 .DateInput_input__readOnly { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; @@ -2640,7 +2645,7 @@ exports[`Storyshots Components/Calendar/RangePicker Base 1`] = ` user-select: none; } -.circuit-2 .DateInput_input__focused { +.circuit-4 .DateInput_input__focused { outline: 0; background: #fff; border: 0; @@ -2650,12 +2655,12 @@ exports[`Storyshots Components/Calendar/RangePicker Base 1`] = ` border-left: 0; } -.circuit-2 .DateInput_input__disabled { +.circuit-4 .DateInput_input__disabled { background: #f2f2f2; font-style: italic; } -.circuit-2 .DateInput_screenReaderMessage { +.circuit-4 .DateInput_screenReaderMessage { border: 0; -webkit-clip: rect(0,0,0,0); clip: rect(0,0,0,0); @@ -2667,7 +2672,7 @@ exports[`Storyshots Components/Calendar/RangePicker Base 1`] = ` width: 1px; } -.circuit-2 .DateInput_fang { +.circuit-4 .DateInput_fang { position: absolute; width: 20px; height: 10px; @@ -2675,58 +2680,58 @@ exports[`Storyshots Components/Calendar/RangePicker Base 1`] = ` z-index: 2; } -.circuit-2 .DateInput_fangShape { +.circuit-4 .DateInput_fangShape { fill: #fff; } -.circuit-2 .DateInput_fangStroke { +.circuit-4 .DateInput_fangStroke { stroke: #dbdbdb; fill: transparent; } -.circuit-2 .DateRangePickerInput { +.circuit-4 .DateRangePickerInput { background-color: #fff; display: inline-block; } -.circuit-2 .DateRangePickerInput__disabled { +.circuit-4 .DateRangePickerInput__disabled { background: #f2f2f2; } -.circuit-2 .DateRangePickerInput__withBorder { +.circuit-4 .DateRangePickerInput__withBorder { border: 1px solid #cacccd; } -.circuit-2 .DateRangePickerInput__rtl { +.circuit-4 .DateRangePickerInput__rtl { direction: rtl; } -.circuit-2 .DateRangePickerInput__block { +.circuit-4 .DateRangePickerInput__block { display: block; } -.circuit-2 .DateRangePickerInput__showClearDates { +.circuit-4 .DateRangePickerInput__showClearDates { padding-right: 30px; } -.circuit-2 .DateRangePickerInput_arrow { +.circuit-4 .DateRangePickerInput_arrow { display: inline-block; vertical-align: middle; } -.circuit-2 .DateRangePickerInput_arrow_svg { +.circuit-4 .DateRangePickerInput_arrow_svg { vertical-align: middle; fill: #565a5c; height: 24px; width: 24px; } -.circuit-2 .DateRangePickerInput_arrow_svg__small { +.circuit-4 .DateRangePickerInput_arrow_svg__small { height: 19px; width: 19px; } -.circuit-2 .DateRangePickerInput_clearDates { +.circuit-4 .DateRangePickerInput_clearDates { background: 0 0; border: 0; color: inherit; @@ -2746,32 +2751,32 @@ exports[`Storyshots Components/Calendar/RangePicker Base 1`] = ` transform: translateY(-50%); } -.circuit-2 .DateRangePickerInput_clearDates__small { +.circuit-4 .DateRangePickerInput_clearDates__small { padding: 6px; } -.circuit-2 .DateRangePickerInput_clearDates_default:focus, -.circuit-2 .DateRangePickerInput_clearDates_default:hover { +.circuit-4 .DateRangePickerInput_clearDates_default:focus, +.circuit-4 .DateRangePickerInput_clearDates_default:hover { background: #dbdbdb; border-radius: 50%; } -.circuit-2 .DateRangePickerInput_clearDates__hide { +.circuit-4 .DateRangePickerInput_clearDates__hide { visibility: hidden; } -.circuit-2 .DateRangePickerInput_clearDates_svg { +.circuit-4 .DateRangePickerInput_clearDates_svg { fill: #82888a; height: 12px; width: 15px; vertical-align: middle; } -.circuit-2 .DateRangePickerInput_clearDates_svg__small { +.circuit-4 .DateRangePickerInput_clearDates_svg__small { height: 9px; } -.circuit-2 .DateRangePickerInput_calendarIcon { +.circuit-4 .DateRangePickerInput_calendarIcon { background: 0 0; border: 0; color: inherit; @@ -2785,41 +2790,41 @@ exports[`Storyshots Components/Calendar/RangePicker Base 1`] = ` margin: 0 5px 0 10px; } -.circuit-2 .DateRangePickerInput_calendarIcon_svg { +.circuit-4 .DateRangePickerInput_calendarIcon_svg { fill: #82888a; height: 15px; width: 14px; vertical-align: middle; } -.circuit-2 .DateRangePicker { +.circuit-4 .DateRangePicker { position: relative; display: inline-block; } -.circuit-2 .DateRangePicker__block { +.circuit-4 .DateRangePicker__block { display: block; } -.circuit-2 .DateRangePicker_picker { +.circuit-4 .DateRangePicker_picker { z-index: 1; background-color: #fff; position: absolute; } -.circuit-2 .DateRangePicker_picker__rtl { +.circuit-4 .DateRangePicker_picker__rtl { direction: rtl; } -.circuit-2 .DateRangePicker_picker__directionLeft { +.circuit-4 .DateRangePicker_picker__directionLeft { left: 0; } -.circuit-2 .DateRangePicker_picker__directionRight { +.circuit-4 .DateRangePicker_picker__directionRight { right: 0; } -.circuit-2 .DateRangePicker_picker__portal { +.circuit-4 .DateRangePicker_picker__portal { background-color: rgba(0,0,0,0.3); position: fixed; top: 0; @@ -2828,11 +2833,11 @@ exports[`Storyshots Components/Calendar/RangePicker Base 1`] = ` width: 100%; } -.circuit-2 .DateRangePicker_picker__fullScreenPortal { +.circuit-4 .DateRangePicker_picker__fullScreenPortal { background-color: #fff; } -.circuit-2 .DateRangePicker_closeButton { +.circuit-4 .DateRangePicker_closeButton { background: 0 0; border: 0; color: inherit; @@ -2847,76 +2852,76 @@ exports[`Storyshots Components/Calendar/RangePicker Base 1`] = ` z-index: 2; } -.circuit-2 .DateRangePicker_closeButton:focus, -.circuit-2 .DateRangePicker_closeButton:hover { +.circuit-4 .DateRangePicker_closeButton:focus, +.circuit-4 .DateRangePicker_closeButton:hover { color: darken(#cacccd,10%); -webkit-text-decoration: none; text-decoration: none; } -.circuit-2 .DateRangePicker_closeButton_svg { +.circuit-4 .DateRangePicker_closeButton_svg { height: 15px; width: 15px; fill: #cacccd; } -.circuit-2 .CalendarDay__default { +.circuit-4 .CalendarDay__default { border: 1px solid #D8DDE1; color: #212933; background: #FFFFFF; vertical-align: middle; } -.circuit-2 .CalendarDay__default:hover { +.circuit-4 .CalendarDay__default:hover { background: #D8DDE1; border: 1px double #D8DDE1; color: inherit; } -.circuit-2 .CalendarDay__hovered_span, -.circuit-2 .CalendarDay__hovered_span:hover { +.circuit-4 .CalendarDay__hovered_span, +.circuit-4 .CalendarDay__hovered_span:hover { background: #EDF4FC; border: 1px solid #3388FF; } -.circuit-2 .CalendarDay__hovered_span:active { +.circuit-4 .CalendarDay__hovered_span:active { background: #EDF4FC; border: 1px solid #3388FF; } -.circuit-2 .CalendarDay__selected_span { +.circuit-4 .CalendarDay__selected_span { background: #EDF4FC; border: 1px solid #AFD0FE; } -.circuit-2 .CalendarDay__selected_span:hover { +.circuit-4 .CalendarDay__selected_span:hover { color: #FFFFFF; background: #AFD0FE; border: 1px solid #AFD0FE; } -.circuit-2 .CalendarDay__last_in_range { +.circuit-4 .CalendarDay__last_in_range { border-right: #00a699; } -.circuit-2 .CalendarDay__selected, -.circuit-2 .CalendarDay__selected:active, -.circuit-2 .CalendarDay__selected:hover { +.circuit-4 .CalendarDay__selected, +.circuit-4 .CalendarDay__selected:active, +.circuit-4 .CalendarDay__selected:hover { background: #3388FF; border: 1px solid #AFD0FE; color: #FFFFFF; } -.circuit-2 .CalendarDay__blocked_out_of_range, -.circuit-2 .CalendarDay__blocked_out_of_range:active, -.circuit-2 .CalendarDay__blocked_out_of_range:hover { +.circuit-4 .CalendarDay__blocked_out_of_range, +.circuit-4 .CalendarDay__blocked_out_of_range:active, +.circuit-4 .CalendarDay__blocked_out_of_range:hover { background: #fff; border: 1px solid #D8DDE1; color: #D8DDE1; } -.circuit-2 .DateRangePickerInput, -.circuit-2 .SingleDatePickerInput { +.circuit-4 .DateRangePickerInput, +.circuit-4 .SingleDatePickerInput { background-color: #FFFFFF; padding: 8px 12px; -webkit-transition: border-color 200ms ease-in-out; @@ -2926,37 +2931,37 @@ exports[`Storyshots Components/Calendar/RangePicker Base 1`] = ` line-height: 24px; } -.circuit-2 .DateRangePickerInput.DateRangePickerInput__withBorder, -.circuit-2 .SingleDatePickerInput.DateRangePickerInput__withBorder, -.circuit-2 .DateRangePickerInput.SingleDatePickerInput__withBorder, -.circuit-2 .SingleDatePickerInput.SingleDatePickerInput__withBorder { +.circuit-4 .DateRangePickerInput.DateRangePickerInput__withBorder, +.circuit-4 .SingleDatePickerInput.DateRangePickerInput__withBorder, +.circuit-4 .DateRangePickerInput.SingleDatePickerInput__withBorder, +.circuit-4 .SingleDatePickerInput.SingleDatePickerInput__withBorder { border-width: 1px; border-style: solid; border-color: #D8DDE1; border-radius: 4px; } -.circuit-2 .DateRangePickerInput.DateRangePickerInput__showClearDates, -.circuit-2 .SingleDatePickerInput.DateRangePickerInput__showClearDates { +.circuit-4 .DateRangePickerInput.DateRangePickerInput__showClearDates, +.circuit-4 .SingleDatePickerInput.DateRangePickerInput__showClearDates { padding-right: 30px; } -.circuit-2 .DateRangePickerInput__disabled { +.circuit-4 .DateRangePickerInput__disabled { background: #f2f2f2; } -.circuit-2 .DateRangePickerInput_arrow { +.circuit-4 .DateRangePickerInput_arrow { margin: 0 12px; width: 24px; height: 24px; } -.circuit-2 .DateInput { +.circuit-4 .DateInput { width: 85px; vertical-align: inherit; } -.circuit-2 .DateInput_input { +.circuit-4 .DateInput_input { color: #212933; font-size: 16px; line-height: 24px; @@ -2967,35 +2972,35 @@ exports[`Storyshots Components/Calendar/RangePicker Base 1`] = ` border: none; } -.circuit-2 .DateInput_input::-webkit-input-placeholder { +.circuit-4 .DateInput_input::-webkit-input-placeholder { color: #9DA7B1; -webkit-transition: color 200ms ease-in-out; transition: color 200ms ease-in-out; } -.circuit-2 .DateInput_input::-moz-placeholder { +.circuit-4 .DateInput_input::-moz-placeholder { color: #9DA7B1; -webkit-transition: color 200ms ease-in-out; transition: color 200ms ease-in-out; } -.circuit-2 .DateInput_input:-ms-input-placeholder { +.circuit-4 .DateInput_input:-ms-input-placeholder { color: #9DA7B1; -webkit-transition: color 200ms ease-in-out; transition: color 200ms ease-in-out; } -.circuit-2 .DateInput_input::placeholder { +.circuit-4 .DateInput_input::placeholder { color: #9DA7B1; -webkit-transition: color 200ms ease-in-out; transition: color 200ms ease-in-out; } -.circuit-2 .DateInput_fang { +.circuit-4 .DateInput_fang { margin-top: -8px; } -.circuit-2 .DayPickerNavigation_button__horizontal { +.circuit-4 .DayPickerNavigation_button__horizontal { background: #FFFFFF; border: 1px solid #D8DDE1; color: #212933; @@ -3004,24 +3009,24 @@ exports[`Storyshots Components/Calendar/RangePicker Base 1`] = ` height: 32px; } -.circuit-2 .DayPickerNavigation_button__horizontal > svg { +.circuit-4 .DayPickerNavigation_button__horizontal > svg { vertical-align: middle; } -.circuit-2 .DayPickerNavigation_leftButton__horizontal { +.circuit-4 .DayPickerNavigation_leftButton__horizontal { -webkit-transform: scale(-1,1); -ms-transform: scale(-1,1); transform: scale(-1,1); } -.circuit-2 .DateRangePickerInput_clearDates { +.circuit-4 .DateRangePickerInput_clearDates { margin: 0; width: 32px; height: 32px; padding: 4px; } -.circuit-2 .CalendarMonth_caption { +.circuit-4 .CalendarMonth_caption { color: #212933; font-size: 18px; text-align: center; @@ -3030,7 +3035,7 @@ exports[`Storyshots Components/Calendar/RangePicker Base 1`] = ` caption-side: initial; } -.circuit-2 .DayPicker_weekHeader { +.circuit-4 .DayPicker_weekHeader { color: #212933; position: absolute; top: 67px; @@ -3039,7 +3044,7 @@ exports[`Storyshots Components/Calendar/RangePicker Base 1`] = ` text-align: left; } -.circuit-2 .DayPicker_weekHeader .DayPicker_weekHeader_ul { +.circuit-4 .DayPicker_weekHeader .DayPicker_weekHeader_ul { font-size: 13px; line-height: 20px; } @@ -3048,8 +3053,12 @@ exports[`Storyshots Components/Calendar/RangePicker Base 1`] = ` color: #3388FF; } +.circuit-2 { + color: #5C656F; +} +
-
- close.svg -
+ + +
@@ -4758,6 +4788,11 @@ HTMLCollection [ justify-content: space-between; box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06); padding: 16px 24px; + width: 500px; + height: 150px; + max-width: 90%; + max-height: 90%; + margin-bottom: 16px; } .circuit-0 { @@ -5016,6 +5051,11 @@ HTMLCollection [ justify-content: space-between; box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06); padding: 16px 24px; + width: 500px; + height: 150px; + max-width: 90%; + max-height: 90%; + margin-bottom: 16px; } .circuit-0 { @@ -5140,6 +5180,11 @@ HTMLCollection [ justify-content: space-between; box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06); padding: 16px 24px; + width: 500px; + height: 150px; + max-width: 90%; + max-height: 90%; + margin-bottom: 16px; } .circuit-2 { @@ -5207,7 +5252,20 @@ HTMLCollection [ This is some text showing in my card

, - .circuit-11 { + .circuit-2 { + border: 0; + -webkit-clip: rect(0 0 0 0); + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + white-space: nowrap; + width: 1px; +} + +.circuit-11 { background-color: #FFFFFF; border-radius: 4px; display: -webkit-box; @@ -5223,6 +5281,11 @@ HTMLCollection [ justify-content: space-between; box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06); padding: 16px 24px; + width: 500px; + height: 150px; + max-width: 90%; + max-height: 90%; + margin-bottom: 16px; } .circuit-7 { @@ -5278,10 +5341,14 @@ HTMLCollection [ background-color: transparent; border: none; cursor: pointer; - fill: #0F131A; overflow: initial; - height: 16px; - width: 16px; + color: #5C656F; + height: 24px; + width: 24px; +} + +.circuit-5:hover { + color: #212933; } .circuit-5:focus, @@ -5294,19 +5361,6 @@ HTMLCollection [ width: 100%; } -.circuit-2 { - border: 0; - -webkit-clip: rect(0 0 0 0); - clip: rect(0 0 0 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - white-space: nowrap; - width: 1px; -} -
-
- close-icon.svg -
+ + @@ -5466,7 +5531,7 @@ exports[`Storyshots Components/Card/CardList Base 1`] = ` `; exports[`Storyshots Components/Carousel Composed 1`] = ` -.circuit-56 { +.circuit-55 { width: 100%; height: auto; position: relative; @@ -5579,7 +5644,7 @@ exports[`Storyshots Components/Carousel Composed 1`] = ` z-index: -2; } -.circuit-54 { +.circuit-53 { width: 100%; display: -webkit-box; display: -webkit-flex; @@ -5596,7 +5661,7 @@ exports[`Storyshots Components/Carousel Composed 1`] = ` margin-top: 16px; } -.circuit-50 { +.circuit-41 { background-color: #FAFBFC; border-color: #D8DDE1; border-radius: 4px; @@ -5624,36 +5689,36 @@ exports[`Storyshots Components/Carousel Composed 1`] = ` margin-left: 8px; } -.circuit-50:active { +.circuit-41:active { background-color: #D8DDE1; border-color: #9DA7B1; box-shadow: inset 0 4px 8px 0 rgba(12,15,20,0.3); } -.circuit-50:focus { +.circuit-41:focus { border-color: #9DA7B1; border-width: 2px; outline: 0; padding: calc(8px - 1px) calc(24px - 1px); } -.circuit-50:hover { +.circuit-41:hover { background-color: #D8DDE1; } -.circuit-50:hover, -.circuit-50:active { +.circuit-41:hover, +.circuit-41:active { border-color: #9DA7B1; border-width: 1px; padding: calc(8px - 0px) calc(24px - 0px); } -.circuit-50[href] { +.circuit-41[href] { display: inline-block; } -.circuit-50:disabled, -.circuit-50[disabled] { +.circuit-41:disabled, +.circuit-41[disabled] { opacity: 0.4; pointer-events: none; -webkit-user-selectable: none; @@ -5662,23 +5727,23 @@ exports[`Storyshots Components/Carousel Composed 1`] = ` user-selectable: none; } -.circuit-50:first-of-type { +.circuit-41:first-of-type { margin-left: 0; } -.circuit-50:active, -.circuit-50:focus, -.circuit-50:hover { +.circuit-41:active, +.circuit-41:focus, +.circuit-41:hover { padding: 0; } @media (max-width:479px) { - .circuit-50 { + .circuit-41 { width: 24px; height: 24px; } - .circuit-50 svg { + .circuit-41 svg { width: 25%; } } @@ -5698,96 +5763,6 @@ exports[`Storyshots Components/Carousel Composed 1`] = ` align-items: center; } -.circuit-42 { - background-color: #FAFBFC; - border-color: #D8DDE1; - border-radius: 4px; - border-style: solid; - border-width: 1px; - box-shadow: inset 0 1px 0 1px rgba(255,255,255,0.06); - display: block; - color: #5C656F; - cursor: pointer; - font-weight: 700; - width: auto; - height: auto; - text-align: center; - -webkit-text-decoration: none; - text-decoration: none; - font-size: 16px; - line-height: 24px; - padding: calc(8px - 0px) calc(24px - 0px); - background-color: #D8DDE1; - width: 32px; - height: 32px; - padding: 0; - overflow: hidden; - border-radius: 50%; - margin-left: 8px; - -webkit-transform: rotate(180deg); - -ms-transform: rotate(180deg); - transform: rotate(180deg); -} - -.circuit-42:active { - background-color: #D8DDE1; - border-color: #9DA7B1; - box-shadow: inset 0 4px 8px 0 rgba(12,15,20,0.3); -} - -.circuit-42:focus { - border-color: #9DA7B1; - border-width: 2px; - outline: 0; - padding: calc(8px - 1px) calc(24px - 1px); -} - -.circuit-42:hover { - background-color: #D8DDE1; -} - -.circuit-42:hover, -.circuit-42:active { - border-color: #9DA7B1; - border-width: 1px; - padding: calc(8px - 0px) calc(24px - 0px); -} - -.circuit-42[href] { - display: inline-block; -} - -.circuit-42:disabled, -.circuit-42[disabled] { - opacity: 0.4; - pointer-events: none; - -webkit-user-selectable: none; - -moz-user-selectable: none; - -ms-user-selectable: none; - user-selectable: none; -} - -.circuit-42:first-of-type { - margin-left: 0; -} - -.circuit-42:active, -.circuit-42:focus, -.circuit-42:hover { - padding: 0; -} - -@media (max-width:479px) { - .circuit-42 { - width: 24px; - height: 24px; - } - - .circuit-42 svg { - width: 25%; - } -} - .circuit-8 { box-shadow: 0 0 1px rgba(0,0,0,0.05); overflow: hidden; @@ -5806,7 +5781,7 @@ exports[`Storyshots Components/Carousel Composed 1`] = ` background: #FAFBFC; } -.circuit-52 { +.circuit-51 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -5821,7 +5796,7 @@ exports[`Storyshots Components/Carousel Composed 1`] = ` justify-content: center; } -.circuit-45 { +.circuit-44 { font-weight: 400; margin-bottom: 16px; font-size: 16px; @@ -5831,14 +5806,14 @@ exports[`Storyshots Components/Carousel Composed 1`] = ` } @media (min-width:480px) { - .circuit-45 { + .circuit-44 { font-size: 16px; line-height: 24px; } } @media (max-width:479px) { - .circuit-45 { + .circuit-44 { font-size: 13px; line-height: 20px; } @@ -5848,7 +5823,7 @@ exports[`Storyshots Components/Carousel Composed 1`] = ` style="width: 50vw;" >

1 @@ -5952,14 +5940,27 @@ exports[`Storyshots Components/Carousel Composed 1`] = ` 3

@@ -5992,7 +5993,7 @@ exports[`Storyshots Components/Carousel Stateful 1`] = ` } } -.circuit-64 { +.circuit-63 { width: 100%; height: auto; position: relative; @@ -6123,7 +6124,7 @@ exports[`Storyshots Components/Carousel Stateful 1`] = ` z-index: -2; } -.circuit-62 { +.circuit-61 { width: 100%; display: -webkit-box; display: -webkit-flex; @@ -6201,7 +6202,7 @@ exports[`Storyshots Components/Carousel Stateful 1`] = ` height: 100%; } -.circuit-60 { +.circuit-59 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -6218,7 +6219,7 @@ exports[`Storyshots Components/Carousel Stateful 1`] = ` } @media (max-width:479px) { - .circuit-60 { + .circuit-59 { margin-left: 12px; } } @@ -6325,102 +6326,12 @@ exports[`Storyshots Components/Carousel Stateful 1`] = ` align-items: center; } -.circuit-53 { - background-color: #FAFBFC; - border-color: #D8DDE1; - border-radius: 4px; - border-style: solid; - border-width: 1px; - box-shadow: inset 0 1px 0 1px rgba(255,255,255,0.06); - display: block; - color: #5C656F; - cursor: pointer; - font-weight: 700; - width: auto; - height: auto; - text-align: center; - -webkit-text-decoration: none; - text-decoration: none; - font-size: 16px; - line-height: 24px; - padding: calc(8px - 0px) calc(24px - 0px); - background-color: #D8DDE1; - width: 32px; - height: 32px; - padding: 0; - overflow: hidden; - border-radius: 50%; - margin-left: 8px; - -webkit-transform: rotate(180deg); - -ms-transform: rotate(180deg); - transform: rotate(180deg); -} - -.circuit-53:active { - background-color: #D8DDE1; - border-color: #9DA7B1; - box-shadow: inset 0 4px 8px 0 rgba(12,15,20,0.3); -} - -.circuit-53:focus { - border-color: #9DA7B1; - border-width: 2px; - outline: 0; - padding: calc(8px - 1px) calc(24px - 1px); -} - -.circuit-53:hover { - background-color: #D8DDE1; -} - -.circuit-53:hover, -.circuit-53:active { - border-color: #9DA7B1; - border-width: 1px; - padding: calc(8px - 0px) calc(24px - 0px); -} - -.circuit-53[href] { - display: inline-block; -} - -.circuit-53:disabled, -.circuit-53[disabled] { - opacity: 0.4; - pointer-events: none; - -webkit-user-selectable: none; - -moz-user-selectable: none; - -ms-user-selectable: none; - user-selectable: none; -} - -.circuit-53:first-of-type { - margin-left: 0; -} - -.circuit-53:active, -.circuit-53:focus, -.circuit-53:hover { - padding: 0; -} - -@media (max-width:479px) { - .circuit-53 { - width: 24px; - height: 24px; - } - - .circuit-53 svg { - width: 25%; - } -} -

@@ -6656,97 +6602,7 @@ exports[`Storyshots Components/Carousel/Buttons All Buttons 1`] = ` align-items: center; } -.circuit-14 { - background-color: #FAFBFC; - border-color: #D8DDE1; - border-radius: 4px; - border-style: solid; - border-width: 1px; - box-shadow: inset 0 1px 0 1px rgba(255,255,255,0.06); - display: block; - color: #5C656F; - cursor: pointer; - font-weight: 700; - width: auto; - height: auto; - text-align: center; - -webkit-text-decoration: none; - text-decoration: none; - font-size: 16px; - line-height: 24px; - padding: calc(8px - 0px) calc(24px - 0px); - background-color: #D8DDE1; - width: 32px; - height: 32px; - padding: 0; - overflow: hidden; - border-radius: 50%; - margin-left: 8px; - -webkit-transform: rotate(180deg); - -ms-transform: rotate(180deg); - transform: rotate(180deg); -} - -.circuit-14:active { - background-color: #D8DDE1; - border-color: #9DA7B1; - box-shadow: inset 0 4px 8px 0 rgba(12,15,20,0.3); -} - -.circuit-14:focus { - border-color: #9DA7B1; - border-width: 2px; - outline: 0; - padding: calc(8px - 1px) calc(24px - 1px); -} - -.circuit-14:hover { - background-color: #D8DDE1; -} - -.circuit-14:hover, -.circuit-14:active { - border-color: #9DA7B1; - border-width: 1px; - padding: calc(8px - 0px) calc(24px - 0px); -} - -.circuit-14[href] { - display: inline-block; -} - -.circuit-14:disabled, -.circuit-14[disabled] { - opacity: 0.4; - pointer-events: none; - -webkit-user-selectable: none; - -moz-user-selectable: none; - -ms-user-selectable: none; - user-selectable: none; -} - -.circuit-14:first-of-type { - margin-left: 0; -} - -.circuit-14:active, -.circuit-14:focus, -.circuit-14:hover { - padding: 0; -} - -@media (max-width:479px) { - .circuit-14 { - width: 24px; - height: 24px; - } - - .circuit-14 svg { - width: 25%; - } -} - -.circuit-21 { +.circuit-20 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -6762,7 +6618,7 @@ exports[`Storyshots Components/Carousel/Buttons All Buttons 1`] = ` }
@@ -8500,6 +8405,19 @@ exports[`Storyshots Components/Modal/Embedded With Title 1`] = ` `; exports[`Storyshots Components/Modal/Embedded With Title And Close Button 1`] = ` +.circuit-2 { + border: 0; + -webkit-clip: rect(0 0 0 0); + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + white-space: nowrap; + width: 1px; +} + .circuit-7 { -webkit-align-items: center; -webkit-box-align: center; @@ -8538,10 +8456,14 @@ exports[`Storyshots Components/Modal/Embedded With Title And Close Button 1`] = background-color: transparent; border: none; cursor: pointer; - fill: #0F131A; overflow: initial; - height: 16px; - width: 16px; + color: #5C656F; + height: 24px; + width: 24px; +} + +.circuit-5:hover { + color: #212933; } .circuit-5:focus, @@ -8554,19 +8476,6 @@ exports[`Storyshots Components/Modal/Embedded With Title And Close Button 1`] = width: 100%; } -.circuit-2 { - border: 0; - -webkit-clip: rect(0 0 0 0); - clip: rect(0 0 0 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - white-space: nowrap; - width: 1px; -} - .circuit-9 { font-weight: 400; margin-bottom: 16px; @@ -8624,13 +8533,24 @@ exports[`Storyshots Components/Modal/Embedded With Title And Close Button 1`] = @@ -8947,7 +8880,7 @@ exports[`Storyshots Components/Notification Base 1`] = ` `; exports[`Storyshots Components/Notification Success 1`] = ` -.circuit-2 { +.circuit-3 { font-weight: 700; margin-bottom: 24px; font-size: 17px; @@ -8956,13 +8889,13 @@ exports[`Storyshots Components/Notification Success 1`] = ` } @media (min-width:480px) { - .circuit-2 { + .circuit-3 { font-size: 17px; line-height: 24px; } } -.circuit-4 { +.circuit-5 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -8981,14 +8914,14 @@ exports[`Storyshots Components/Notification Success 1`] = ` } @media (min-width:480px) { - .circuit-4 { + .circuit-5 { -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } } -.circuit-0 { +.circuit-1 { display: block; margin: 0 0 16px 0; -webkit-box-flex: 0; @@ -9002,23 +8935,47 @@ exports[`Storyshots Components/Notification Success 1`] = ` } @media (min-width:480px) { - .circuit-0 { + .circuit-1 { margin: 0 16px 0 0; } } +.circuit-0 { + color: #47995A; +} +
-
- notification-success.svg -
+ + + +

Transaction successfully refunded

@@ -9026,7 +8983,7 @@ exports[`Storyshots Components/Notification Success 1`] = ` `; exports[`Storyshots Components/Notification Warning 1`] = ` -.circuit-6 { +.circuit-5 { background-color: #FAFBFC; border-color: #D8DDE1; border-radius: 4px; @@ -9047,36 +9004,36 @@ exports[`Storyshots Components/Notification Warning 1`] = ` padding: calc(4px - 0px) calc(16px - 0px); } -.circuit-6:active { +.circuit-5:active { background-color: #D8DDE1; border-color: #9DA7B1; box-shadow: inset 0 4px 8px 0 rgba(12,15,20,0.3); } -.circuit-6:focus { +.circuit-5:focus { border-color: #9DA7B1; border-width: 2px; outline: 0; padding: calc(4px - 1px) calc(16px - 1px); } -.circuit-6:hover { +.circuit-5:hover { background-color: #D8DDE1; } -.circuit-6:hover, -.circuit-6:active { +.circuit-5:hover, +.circuit-5:active { border-color: #9DA7B1; border-width: 1px; padding: calc(4px - 0px) calc(16px - 0px); } -.circuit-6[href] { +.circuit-5[href] { display: inline-block; } -.circuit-6:disabled, -.circuit-6[disabled] { +.circuit-5:disabled, +.circuit-5[disabled] { opacity: 0.4; pointer-events: none; -webkit-user-selectable: none; @@ -9085,7 +9042,7 @@ exports[`Storyshots Components/Notification Warning 1`] = ` user-selectable: none; } -.circuit-4 { +.circuit-3 { font-weight: 700; margin-bottom: 24px; font-size: 17px; @@ -9094,13 +9051,13 @@ exports[`Storyshots Components/Notification Warning 1`] = ` } @media (min-width:480px) { - .circuit-4 { + .circuit-3 { font-size: 17px; line-height: 24px; } } -.circuit-10 { +.circuit-9 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -9119,14 +9076,14 @@ exports[`Storyshots Components/Notification Warning 1`] = ` } @media (min-width:480px) { - .circuit-10 { + .circuit-9 { -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } } -.circuit-2 { +.circuit-1 { display: block; margin: 0 0 16px 0; -webkit-box-flex: 0; @@ -9140,16 +9097,16 @@ exports[`Storyshots Components/Notification Warning 1`] = ` } @media (min-width:480px) { - .circuit-2 { + .circuit-1 { margin: 0 16px 0 0; } } -.circuit-0 rect { - fill: #D8A413; +.circuit-0 { + color: #D8A413; } -.circuit-8 { +.circuit-7 { display: block; padding-left: 24px; margin-top: 16px; @@ -9167,33 +9124,44 @@ exports[`Storyshots Components/Notification Warning 1`] = ` } @media (min-width:480px) { - .circuit-8 { + .circuit-7 { margin-top: 0; } }
-
- notification-success.svg -
+ +

You still need to verify your account

@@ -9315,7 +9283,7 @@ exports[`Storyshots Components/Notification/NotificationBanner Base 1`] = ` `; exports[`Storyshots Components/Notification/NotificationList Base 1`] = ` -.circuit-2 { +.circuit-3 { font-weight: 700; margin-bottom: 24px; font-size: 17px; @@ -9324,13 +9292,13 @@ exports[`Storyshots Components/Notification/NotificationList Base 1`] = ` } @media (min-width:480px) { - .circuit-2 { + .circuit-3 { font-size: 17px; line-height: 24px; } } -.circuit-4 { +.circuit-5 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -9349,14 +9317,14 @@ exports[`Storyshots Components/Notification/NotificationList Base 1`] = ` } @media (min-width:480px) { - .circuit-4 { + .circuit-5 { -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } } -.circuit-0 { +.circuit-1 { display: block; margin: 0 0 16px 0; -webkit-box-flex: 0; @@ -9370,12 +9338,16 @@ exports[`Storyshots Components/Notification/NotificationList Base 1`] = ` } @media (min-width:480px) { - .circuit-0 { + .circuit-1 { margin: 0 16px 0 0; } } -.circuit-8 { +.circuit-0 { + color: #47995A; +} + +.circuit-9 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -9388,22 +9360,22 @@ exports[`Storyshots Components/Notification/NotificationList Base 1`] = ` max-width: calc(100vw - 48px); } -.circuit-8 > * { +.circuit-9 > * { margin-top: 16px; } -.circuit-8 > *:first-child { +.circuit-9 > *:first-child { margin-top: 0; } @media (max-width:767px) { - .circuit-8 { + .circuit-9 { max-width: none; width: 100%; } } -.circuit-6 { +.circuit-7 { background-color: #FFFFFF; border-radius: 4px; display: -webkit-box; @@ -9423,24 +9395,44 @@ exports[`Storyshots Components/Notification/NotificationList Base 1`] = `
  • -
    - notification-success.svg -
    + + + +

    Transaction successfully refunded

    @@ -9976,7 +9968,7 @@ exports[`Storyshots Components/ProgressBar Base 1`] = ` class="circuit-4 circuit-5" >
    `; @@ -10044,7 +10036,7 @@ HTMLCollection [ class="circuit-4 circuit-5" > 70% @@ -10110,7 +10102,7 @@ HTMLCollection [ class="circuit-4 circuit-5" > 70% @@ -10176,7 +10168,7 @@ HTMLCollection [ class="circuit-4 circuit-5" > 70% @@ -10246,7 +10238,7 @@ exports[`Storyshots Components/ProgressBar With Fraction 1`] = ` class="circuit-4 circuit-5" > 7/10 @@ -10315,7 +10307,7 @@ exports[`Storyshots Components/ProgressBar With Percentage 1`] = ` class="circuit-4 circuit-5" > 70% @@ -10334,11 +10326,11 @@ exports[`Storyshots Components/ProgressBar With Percentage 1`] = ` `; exports[`Storyshots Components/Sidebar Base 1`] = ` -.circuit-47 { +.circuit-52 { height: 100vh; } -.circuit-39 { +.circuit-44 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -10363,7 +10355,7 @@ exports[`Storyshots Components/Sidebar Base 1`] = ` } @media (min-width:960px) { - .circuit-39 { + .circuit-44 { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); @@ -10372,7 +10364,7 @@ exports[`Storyshots Components/Sidebar Base 1`] = ` } @media (min-width:960px) { - .circuit-39 { + .circuit-44 { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); @@ -10402,7 +10394,7 @@ exports[`Storyshots Components/Sidebar Base 1`] = ` color: #FAFBFC; } -.circuit-35 { +.circuit-40 { height: auto; justify-self: flex-start; overflow-y: auto; @@ -10437,14 +10429,6 @@ exports[`Storyshots Components/Sidebar Base 1`] = ` color: #FAFBFC; } -.circuit-4 * { - fill: #9DA7B1; -} - -.circuit-4 * { - fill: #FAFBFC; -} - .circuit-2 { margin-left: 12px; } @@ -10468,18 +10452,10 @@ exports[`Storyshots Components/Sidebar Base 1`] = ` color: #9DA7B1; } -.circuit-9 * { - fill: #9DA7B1; -} - .circuit-9:hover { color: #D8DDE1; } -.circuit-9:hover * { - fill: #D8DDE1; -} - .circuit-26 { margin: -8px 0 8px 32px; list-style: none; @@ -10526,18 +10502,10 @@ exports[`Storyshots Components/Sidebar Base 1`] = ` transition: top 200ms ease-in-out; } -.circuit-13 * { - fill: #9DA7B1; -} - .circuit-13:hover { color: #D8DDE1; } -.circuit-13:hover * { - fill: #D8DDE1; -} - .circuit-11 { margin-left: 12px; margin-left: 0px; @@ -10546,7 +10514,31 @@ exports[`Storyshots Components/Sidebar Base 1`] = ` transition: margin-top 300ms ease-in-out; } -.circuit-28 { +.circuit-30 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + height: auto; + margin: 16px; + padding: 4px; + cursor: pointer; + color: #9DA7B1; + -webkit-text-decoration: none; + text-decoration: none; + cursor: not-allowed; + color: #5C656F; +} + +.circuit-33 { display: block; width: 100%; border: 1px solid #D8DDE1; @@ -10555,7 +10547,7 @@ exports[`Storyshots Components/Sidebar Base 1`] = ` border: 1px solid #323E49; } -.circuit-32 { +.circuit-37 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -10577,26 +10569,18 @@ exports[`Storyshots Components/Sidebar Base 1`] = ` text-decoration: none; } -.circuit-32 * { - fill: #9DA7B1; -} - -.circuit-32:hover { +.circuit-37:hover { color: #D8DDE1; } -.circuit-32:hover * { - fill: #D8DDE1; -} - -.circuit-37 { +.circuit-42 { margin-top: auto; padding: 24px; background-color: #212933; color: #FAFBFC; } -.circuit-41 { +.circuit-46 { width: 100%; height: 100%; position: absolute; @@ -10611,14 +10595,15 @@ exports[`Storyshots Components/Sidebar Base 1`] = ` } @media (min-width:960px) { - .circuit-41 { + .circuit-46 { visibility: hidden; } } -.circuit-45 { +.circuit-50 { cursor: pointer; outline: none; + border: none; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -10648,12 +10633,12 @@ exports[`Storyshots Components/Sidebar Base 1`] = ` } @media (min-width:960px) { - .circuit-45 { + .circuit-50 { visibility: hidden; } } -.circuit-43 { +.circuit-48 { border: 0; -webkit-clip: rect(0 0 0 0); clip: rect(0 0 0 0); @@ -10667,10 +10652,10 @@ exports[`Storyshots Components/Sidebar Base 1`] = ` }
Footer
@@ -11676,25 +11735,27 @@ tbody .circuit-18:last-child td { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; - height: 10px; - width: 5px; - left: 12px; - opacity: 0; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + height: 40px; + width: 20px; position: absolute; + left: 0; top: 50%; + opacity: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: opacity 200ms ease-in-out; transition: opacity 200ms ease-in-out; - fill: #3388FF; + color: #3388FF; } .circuit-0 { - margin-top: 2px; - -webkit-transform: rotate(180deg); - -ms-transform: rotate(180deg); - transform: rotate(180deg); + margin-top: -7px; + margin-bottom: -7px; } .circuit-6 { @@ -11884,14 +11945,38 @@ tbody .circuit-32:hover th { -
- arrow.svg -
-
- arrow.svg -
+ + + + + Name @@ -11912,14 +11997,38 @@ tbody .circuit-32:hover th { -
+ + + - arrow.svg -
-
- arrow.svg -
+ + Created at @@ -12160,25 +12269,27 @@ tbody .circuit-8:last-child td { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; - height: 10px; - width: 5px; - left: 12px; - opacity: 0; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + height: 40px; + width: 20px; position: absolute; + left: 0; top: 50%; + opacity: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: opacity 200ms ease-in-out; transition: opacity 200ms ease-in-out; - fill: #3388FF; + color: #3388FF; } .circuit-0 { - margin-top: 2px; - -webkit-transform: rotate(180deg); - -ms-transform: rotate(180deg); - transform: rotate(180deg); + margin-top: -7px; + margin-bottom: -7px; } .circuit-6 { @@ -12270,14 +12381,38 @@ tbody .circuit-8:last-child td { -
- arrow.svg -
-
- arrow.svg -
+ + + + + Country @@ -12496,25 +12631,27 @@ tbody .circuit-14:last-child td { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; - height: 10px; - width: 5px; - left: 12px; - opacity: 0; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + height: 40px; + width: 20px; position: absolute; + left: 0; top: 50%; + opacity: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: opacity 200ms ease-in-out; transition: opacity 200ms ease-in-out; - fill: #3388FF; + color: #3388FF; } .circuit-0 { - margin-top: 2px; - -webkit-transform: rotate(180deg); - -ms-transform: rotate(180deg); - transform: rotate(180deg); + margin-top: -7px; + margin-bottom: -7px; } .circuit-6 { @@ -12647,14 +12784,38 @@ tbody .circuit-14:last-child td { -
+ + + - arrow.svg -
-
- arrow.svg -
+ + Name @@ -12675,14 +12836,38 @@ tbody .circuit-14:last-child td { -
- arrow.svg -
-
- arrow.svg -
+ + + + + Date added @@ -13668,31 +13853,45 @@ exports[`Storyshots Components/Tabs Links 1`] = ` exports[`Storyshots Components/Tag Base 1`] = ` .circuit-0 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; border-radius: 4px; font-size: 16px; line-height: 24px; box-shadow: 0px 0px 0px 1px #D8DDE1; padding: 4px 12px; cursor: default; - display: inline-block; } - Transactions - +
`; exports[`Storyshots Components/Tag Clickable 1`] = ` .circuit-0 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; border-radius: 4px; font-size: 16px; line-height: 24px; box-shadow: 0px 0px 0px 1px #D8DDE1; padding: 4px 12px; cursor: default; - display: inline-block; cursor: pointer; } @@ -13701,11 +13900,11 @@ exports[`Storyshots Components/Tag Clickable 1`] = ` box-shadow: 0px 0px 0px 1px #D8DDE1; } - Transactions - +
`; exports[`Storyshots Components/Tag Removable 1`] = ` @@ -13722,16 +13921,6 @@ exports[`Storyshots Components/Tag Removable 1`] = ` width: 1px; } -.circuit-6 { - border-radius: 4px; - font-size: 16px; - line-height: 24px; - box-shadow: 0px 0px 0px 1px #D8DDE1; - padding: 4px 12px; - cursor: default; - display: inline-block; -} - .circuit-4 { padding: 0; margin: 0; @@ -13739,12 +13928,15 @@ exports[`Storyshots Components/Tag Removable 1`] = ` background-color: transparent; border: none; cursor: pointer; - fill: #0F131A; overflow: initial; - height: 16px; - width: 16px; - margin-left: 12px; - vertical-align: middle; + color: #5C656F; + height: 24px; + width: 24px; + margin-left: 4px; +} + +.circuit-4:hover { + color: #212933; } .circuit-4:focus, @@ -13757,97 +13949,173 @@ exports[`Storyshots Components/Tag Removable 1`] = ` width: 100%; } - Transactions - +
`; exports[`Storyshots Components/Tag Selected 1`] = ` .circuit-0 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; border-radius: 4px; font-size: 16px; line-height: 24px; box-shadow: 0px 0px 0px 1px #D8DDE1; padding: 4px 12px; cursor: default; - display: inline-block; background-color: #3388FF; box-shadow: 0px 0px 0px 1px #3388FF; color: #FFFFFF; } - Transactions - +
`; -exports[`Storyshots Components/Tag With Icon 1`] = ` -.circuit-2 { +exports[`Storyshots Components/Tag With Prefix 1`] = ` +.circuit-1 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; border-radius: 4px; font-size: 16px; line-height: 24px; box-shadow: 0px 0px 0px 1px #D8DDE1; padding: 4px 12px; cursor: default; - display: inline-block; } .circuit-0 { margin-right: 4px; - display: inline-block; - width: 16px; - height: 16px; - vertical-align: middle; } -.circuit-0 > svg { - vertical-align: top; +
+ + + + Transactions +
+`; + +exports[`Storyshots Components/Tag With Suffix 1`] = ` +.circuit-1 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border-radius: 4px; + font-size: 16px; + line-height: 24px; + box-shadow: 0px 0px 0px 1px #D8DDE1; + padding: 4px 12px; + cursor: default; } - - - - - - - Transactions - + + + +
`; exports[`Storyshots Components/Tooltip Base 1`] = ` @@ -13918,20 +14186,16 @@ exports[`Storyshots Components/Tooltip Base 1`] = ` - @@ -14000,20 +14264,16 @@ exports[`Storyshots Components/Tooltip Bottom Right 1`] = ` - @@ -14087,20 +14347,16 @@ exports[`Storyshots Components/Tooltip Left Center 1`] = ` - @@ -14169,20 +14425,16 @@ exports[`Storyshots Components/Tooltip Top Left 1`] = ` - @@ -14254,16 +14506,16 @@ exports[`Storyshots Forms/Checkbox Base 1`] = ` } .circuit-2 svg { - height: 10px; - width: 10px; + height: 16px; + width: 16px; box-sizing: border-box; - fill: #3388FF; + color: #3388FF; display: block; - left: 3px; line-height: 0; opacity: 0; position: absolute; top: 12px; + left: 0; -webkit-transform: translateY(-50%) scale(0,0); -ms-transform: translateY(-50%) scale(0,0); transform: translateY(-50%) scale(0,0); @@ -14277,21 +14529,32 @@ exports[`Storyshots Forms/Checkbox Base 1`] = ` > `; @@ -14365,16 +14628,16 @@ exports[`Storyshots Forms/Checkbox Disabled 1`] = ` } .circuit-2 svg { - height: 10px; - width: 10px; + height: 16px; + width: 16px; box-sizing: border-box; - fill: #3388FF; + color: #3388FF; display: block; - left: 3px; line-height: 0; opacity: 0; position: absolute; top: 12px; + left: 0; -webkit-transform: translateY(-50%) scale(0,0); -ms-transform: translateY(-50%) scale(0,0); transform: translateY(-50%) scale(0,0); @@ -14395,7 +14658,7 @@ exports[`Storyshots Forms/Checkbox Disabled 1`] = ` opacity: 0.5; pointer-events: none; box-shadow: none; - fill: #9DA7B1; + color: #9DA7B1; }
Unchecked - + +
`; @@ -14490,16 +14764,16 @@ exports[`Storyshots Forms/Checkbox Invalid 1`] = ` } .circuit-2 svg { - height: 10px; - width: 10px; + height: 16px; + width: 16px; box-sizing: border-box; - fill: #3388FF; + color: #3388FF; display: block; - left: 3px; line-height: 0; opacity: 0; position: absolute; top: 12px; + left: 0; -webkit-transform: translateY(-50%) scale(0,0); -ms-transform: translateY(-50%) scale(0,0); transform: translateY(-50%) scale(0,0); @@ -14514,7 +14788,7 @@ exports[`Storyshots Forms/Checkbox Invalid 1`] = ` } .circuit-2:not(:focus) svg { - fill: #DB4D4D; + color: #DB4D4D; } .circuit-4 { @@ -14563,21 +14837,32 @@ exports[`Storyshots Forms/Checkbox Invalid 1`] = ` >
, .circuit-4 { @@ -14759,16 +15055,16 @@ HTMLCollection [ } .circuit-2 svg { - height: 10px; - width: 10px; + height: 16px; + width: 16px; box-sizing: border-box; - fill: #3388FF; + color: #3388FF; display: block; - left: 3px; line-height: 0; opacity: 0; position: absolute; top: 12px; + left: 0; -webkit-transform: translateY(-50%) scale(0,0); -ms-transform: translateY(-50%) scale(0,0); transform: translateY(-50%) scale(0,0); @@ -14782,21 +15078,32 @@ HTMLCollection [ > , .circuit-4 { @@ -14864,16 +15171,16 @@ HTMLCollection [ } .circuit-2 svg { - height: 10px; - width: 10px; + height: 16px; + width: 16px; box-sizing: border-box; - fill: #3388FF; + color: #3388FF; display: block; - left: 3px; line-height: 0; opacity: 0; position: absolute; top: 12px; + left: 0; -webkit-transform: translateY(-50%) scale(0,0); -ms-transform: translateY(-50%) scale(0,0); transform: translateY(-50%) scale(0,0); @@ -14887,21 +15194,32 @@ HTMLCollection [ > , ] @@ -15121,6 +15439,7 @@ label + .circuit-4 { width: 100%; font-size: 16px; line-height: 24px; + margin: 0; padding-right: calc( 12px + 16px + 12px ); } @@ -15161,15 +15480,16 @@ label + .circuit-4 { position: absolute; top: 1px; right: 1px; - height: 16px; - width: 16px; - margin: 12px; + margin: 8px; pointer-events: none; + color: #5C656F; + height: 24px; + width: 24px; }