diff options
Diffstat (limited to '.storybook/storybook.scss')
| -rw-r--r-- | .storybook/storybook.scss | 231 |
1 files changed, 231 insertions, 0 deletions
diff --git a/.storybook/storybook.scss b/.storybook/storybook.scss new file mode 100644 index 0000000..ce905cf --- /dev/null +++ b/.storybook/storybook.scss @@ -0,0 +1,231 @@ +@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; + } + } + } + } + } +} + |