diff options
Diffstat (limited to '.storybook/storybook.scss')
| -rw-r--r-- | .storybook/storybook.scss | 231 |
1 files changed, 0 insertions, 231 deletions
diff --git a/.storybook/storybook.scss b/.storybook/storybook.scss deleted file mode 100644 index ce905cf..0000000 --- a/.storybook/storybook.scss +++ /dev/null @@ -1,231 +0,0 @@ -@import 'typography.scss'; -@import '../src/style/scss/style.scss'; -@import '~prismjs/themes/prism.css'; - -body { - @include base-font-regular(); - margin: 15px; - max-width: 800px; -} - -a { - color: #1474f3; - text-decoration: none; - border-bottom: 1px solid #1474f3; - padding-bottom: 2px; -} - -.colors-table { - width: 100%; - display: flex; - flex-wrap: wrap; - justify-content: flex-start; - font-size: 13px; - .color-section { - display: flex; - flex-direction: column; - margin: 10px 0; - min-width: 150px; - div { - align-self: center; - user-select: text; - } - $circle-size: 40px; - .color-circle { - height: $circle-size; - width: $circle-size; - border-radius: $circle-size; - padding: 10px; - text-align: center; - } - } -} - -.icons-screen { - width: 1190px; - .missing-icon-section { - border-top: 1px solid $light-gray; - padding-top: 10px; - } - .icons-option-selector { - margin-top: 20px; - margin-bottom: 20px; - display: flex; - .option-container { - display: flex; - flex-direction: column; - flex-basis: 100%; - margin-right: 20px; - } - } - - .icons-table { - margin-top: 50px; - width: 100%; - display: flex; - flex-wrap: wrap; - border-top: 1px solid $light-gray; - justify-content: flex-start; - .icon-section { - display: flex; - flex-direction: column; - margin: 10px; - min-width: 150px; - .svg-icon-wrapper { - cursor: pointer; - width: 20px; - height: 42px; - margin-left: auto; - margin-right: auto; - .svg-icon-label { - font-size: 12px; - } - } - } - } - - .svg-icon { - &.storybook-big { - width: 120px; - height: 120px; - } - &.storybook-small { - width: 60px; - height: 60px; - } - } -} - -.sdc-popup-menu { - @include box-shadow(0 1px 3px 0 rgba(0, 0, 0, 0.2)); - width: 200px; - height: 200px; - border: 1px solid $light-gray; -} - -.typography-screen { - .typography-section { - margin: 20px 0; - } - ul { - font-size: 18px; - } - .typo-table { - .typo-section { - div { - display: inline-block; - //border: 1px solid black; - width: 30%; - margin: 4px 0; - } - .sample-text { - white-space: nowrap; - - } - } - } - .heading-1 { - @include heading-1; - } - .heading-2 { - @include heading-2; - } - .heading-3 { - @include heading-3; - } - .heading-4 { - @include heading-4; - } - .heading-4-emphasis { - @include heading-4-emphasis; - } - .heading-5 { - @include heading-5; - } - - .body-1 { - @include body-1; - } - - .body-1-italic { - @include body-1-italic; - } - - .body-2 { - @include body-2; - } - - .body-2-emphasis { - @include body-2-emphasis; - } - - .body-3 { - @include body-3; - } - - .body-3-emphasis { - @include body-3-emphasis; - } - - .body-4 { - @include body-4; - } -} - -.source-toggle-wrapper { - .source-toggle-title { - @include heading-2; - } - .source-toggle { - display: flex; - border-top: 1px solid $light-gray; - padding: 10px 0; - &:first-child { - border-top: none; - } - .source-toggle-example { - flex-basis: 40%; - flex-shrink: 0; - } - .source-toggle-code { - background-color: $light-silver; - padding: 5px; - margin-left: 30px; - pre { - margin-top: 0; - user-select: text; - overflow-x: auto; - overflow-y: hidden; - max-width: 800px; - code { - font-size: 15px; - font-weight: 600; - padding: 2px 5px; - border: 1px solid #eae9e9; - border-radius: 4px; - background-color: #f3f2f2; - color: #3a3a3a; - .token { - line-height: 20px; - } - } - } - .source-toggle-code-tabs { - display: flex; - margin-bottom: 10px; - .source-toggle-tab { - @include body-1; - @include base-font-semibold; - margin-right: 20px; - cursor: pointer; - &.selected { - border-bottom: 2px solid $dark-blue; - color: $dark-blue; - font-weight: bold; - } - } - } - } - } -} - |