From 72863726a96cbef3805d987b5a8f678203aee6c2 Mon Sep 17 00:00:00 2001 From: Jori Lallo Date: Thu, 14 Jul 2016 23:03:04 -0700 Subject: [PATCH] Reorganized styles --- src/components/AtlasPreview/AtlasPreview.scss | 2 +- .../components/DocumentLink/DocumentLink.scss | 4 ++-- .../DocumentPreview/DocumentPreview.scss | 4 ++-- src/components/DropdownMenu/DropdownMenu.scss | 4 ++-- src/components/Layout/Layout.scss | 3 +-- src/components/MarkdownEditor/codemirror.scss | 4 ++-- src/index.js | 8 ++++---- src/scenes/DocumentEdit/DocumentEdit.scss | 4 ++-- src/{utils/base-styles.scss => styles/base.scss} | 6 ++++++ .../codemirror.css => styles/codemirror.scss} | 2 +- src/{utils => styles}/constants.scss | 4 +++- src/{fonts/atlas/atlas.css => styles/fonts.css} | 16 ++++++++-------- .../hljs-github-gist.scss} | 2 +- 13 files changed, 35 insertions(+), 28 deletions(-) rename src/{utils/base-styles.scss => styles/base.scss} (94%) rename src/{assets/styles/codemirror.css => styles/codemirror.scss} (99%) rename src/{utils => styles}/constants.scss (82%) rename src/{fonts/atlas/atlas.css => styles/fonts.css} (54%) rename src/{assets/styles/github-gist.scss => styles/hljs-github-gist.scss} (99%) diff --git a/src/components/AtlasPreview/AtlasPreview.scss b/src/components/AtlasPreview/AtlasPreview.scss index 995678e16..0f0dd2e07 100644 --- a/src/components/AtlasPreview/AtlasPreview.scss +++ b/src/components/AtlasPreview/AtlasPreview.scss @@ -1,4 +1,4 @@ -@import '../../utils/constants.scss'; +@import '~styles/constants.scss'; .container { display: flex; diff --git a/src/components/AtlasPreview/components/DocumentLink/DocumentLink.scss b/src/components/AtlasPreview/components/DocumentLink/DocumentLink.scss index 1907f1128..50fcaa49c 100644 --- a/src/components/AtlasPreview/components/DocumentLink/DocumentLink.scss +++ b/src/components/AtlasPreview/components/DocumentLink/DocumentLink.scss @@ -1,4 +1,4 @@ -@import '../../../../utils/constants.scss'; +@import '~styles/constants.scss'; .link { display: flex; @@ -20,4 +20,4 @@ .timestamp { font-size: 13px; color: #ccc; -} \ No newline at end of file +} diff --git a/src/components/DocumentPreview/DocumentPreview.scss b/src/components/DocumentPreview/DocumentPreview.scss index 426e20b74..122416df9 100644 --- a/src/components/DocumentPreview/DocumentPreview.scss +++ b/src/components/DocumentPreview/DocumentPreview.scss @@ -1,4 +1,4 @@ -@import '../../utils/constants.scss'; +@import '~styles/constants.scss'; .container { @@ -17,4 +17,4 @@ .continueLink { text-decoration: none; -} \ No newline at end of file +} diff --git a/src/components/DropdownMenu/DropdownMenu.scss b/src/components/DropdownMenu/DropdownMenu.scss index 9ee186cd3..5ead00ab2 100644 --- a/src/components/DropdownMenu/DropdownMenu.scss +++ b/src/components/DropdownMenu/DropdownMenu.scss @@ -1,4 +1,4 @@ -@import '../../utils/constants.scss'; +@import '~styles/constants.scss'; .label { display: flex; @@ -48,4 +48,4 @@ &:hover { border-left: 2px solid #2196F3; } -} \ No newline at end of file +} diff --git a/src/components/Layout/Layout.scss b/src/components/Layout/Layout.scss index 513d225cc..a2d85dbae 100644 --- a/src/components/Layout/Layout.scss +++ b/src/components/Layout/Layout.scss @@ -1,4 +1,4 @@ -@import '../../utils/constants.scss'; +@import '~styles/constants.scss'; .container { display: flex; @@ -67,4 +67,3 @@ padding-top: $headerHeight; } } - diff --git a/src/components/MarkdownEditor/codemirror.scss b/src/components/MarkdownEditor/codemirror.scss index 36a45faeb..c09847279 100644 --- a/src/components/MarkdownEditor/codemirror.scss +++ b/src/components/MarkdownEditor/codemirror.scss @@ -1,4 +1,4 @@ -@import '../../utils/constants.scss'; +@import '~styles/constants.scss'; :global { /* Custom styling */ @@ -56,4 +56,4 @@ .cm-s-atlas .CodeMirror-activeline-background { background: #DDDCDC; } .cm-s-atlas .CodeMirror-matchingbracket { text-decoration: underline; color: white !important; } .cm-s-atlas .CodeMirror-placeholder { color: rgba(0, 0, 0, 0.5); font-weight: bold; } -} \ No newline at end of file +} diff --git a/src/index.js b/src/index.js index 9b5c5ef9d..d3f8abec8 100644 --- a/src/index.js +++ b/src/index.js @@ -10,10 +10,10 @@ import stores from 'stores'; window.stores = stores; import 'normalize.css/normalize.css'; -import 'utils/base-styles.scss'; -import 'fonts/atlas/atlas.css'; -import 'assets/styles/github-gist.scss'; -import 'assets/styles/codemirror.css'; +import 'styles/base.scss'; +import 'styles/fonts.css'; +import 'styles/hljs-github-gist.scss'; +import 'styles/codemirror.scss'; import Application from 'scenes/Application'; diff --git a/src/scenes/DocumentEdit/DocumentEdit.scss b/src/scenes/DocumentEdit/DocumentEdit.scss index 307a0ec92..442c4cbfe 100644 --- a/src/scenes/DocumentEdit/DocumentEdit.scss +++ b/src/scenes/DocumentEdit/DocumentEdit.scss @@ -1,4 +1,4 @@ -@import '../../utils/constants.scss'; +@import '~styles/constants.scss'; .preview { display: flex; @@ -43,4 +43,4 @@ ::-webkit-scrollbar { display: none; } -} \ No newline at end of file +} diff --git a/src/utils/base-styles.scss b/src/styles/base.scss similarity index 94% rename from src/utils/base-styles.scss rename to src/styles/base.scss index 6aef31a64..4530aad92 100644 --- a/src/utils/base-styles.scss +++ b/src/styles/base.scss @@ -25,6 +25,12 @@ body { margin: 0; color: $textColor; background-color: #fff; + display: flex; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; } img { max-width: 100%; diff --git a/src/assets/styles/codemirror.css b/src/styles/codemirror.scss similarity index 99% rename from src/assets/styles/codemirror.css rename to src/styles/codemirror.scss index 498c27006..93a0408ba 100644 --- a/src/assets/styles/codemirror.css +++ b/src/styles/codemirror.scss @@ -337,4 +337,4 @@ /* Help users use markselection to safely style text background */ span.CodeMirror-selectedtext { background: none; } -} \ No newline at end of file +} diff --git a/src/utils/constants.scss b/src/styles/constants.scss similarity index 82% rename from src/utils/constants.scss rename to src/styles/constants.scss index 3445e1db6..56e0a77c9 100644 --- a/src/utils/constants.scss +++ b/src/styles/constants.scss @@ -1,3 +1,5 @@ +$lightGray: #eee; + $textColor: #171B35; $linkColor: #0C77F8; @@ -5,4 +7,4 @@ $headerHeight: 42px; :export { textColor: $textColor; -} \ No newline at end of file +} diff --git a/src/fonts/atlas/atlas.css b/src/styles/fonts.css similarity index 54% rename from src/fonts/atlas/atlas.css rename to src/styles/fonts.css index b7d6134e8..cb4186354 100644 --- a/src/fonts/atlas/atlas.css +++ b/src/styles/fonts.css @@ -1,48 +1,48 @@ @font-face { font-family: 'Atlas Grotesk'; - src: url('./AtlasGrotesk-Regular-Web.woff') format('woff'); + src: url('../fonts/atlas/AtlasGrotesk-Regular-Web.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Atlas Grotesk'; - src: url('./AtlasGrotesk-Medium-Web.woff') format('woff'); + src: url('../fonts/atlas/AtlasGrotesk-Medium-Web.woff') format('woff'); font-weight: bold; font-style: normal; } @font-face { font-family: 'Atlas Grotesk'; - src: url('./AtlasGrotesk-RegularItalic-Web.woff') format('woff'); + src: url('../fonts/atlas/AtlasGrotesk-RegularItalic-Web.woff') format('woff'); font-weight: normal; font-style: italic; } @font-face { font-family: 'Atlas Grotesk'; - src: url('./AtlasGrotesk-MediumItalic-Web.woff') format('woff'); + src: url('../fonts/atlas/AtlasGrotesk-MediumItalic-Web.woff') format('woff'); font-weight: bold; font-style: italic; } @font-face { font-family: 'Atlas Grotesk'; - src: url('./AtlasGrotesk-MediumItalic-Web.woff') format('woff'); + src: url('../fonts/atlas/AtlasGrotesk-MediumItalic-Web.woff') format('woff'); font-weight: bold; font-style: italic; } @font-face { font-family: 'Atlas Typewriter'; - src: url('./AtlasTypewriterRegular.woff') format('woff'); + src: url('../fonts/atlas/AtlasTypewriterRegular.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Atlas Typewriter'; - src: url('./AtlasTypewriterMedium.woff') format('woff'); + src: url('../fonts/atlas/AtlasTypewriterMedium.woff') format('woff'); font-weight: bold; font-style: normal; -} \ No newline at end of file +} diff --git a/src/assets/styles/github-gist.scss b/src/styles/hljs-github-gist.scss similarity index 99% rename from src/assets/styles/github-gist.scss rename to src/styles/hljs-github-gist.scss index 2732313f9..3b73bd24d 100644 --- a/src/assets/styles/github-gist.scss +++ b/src/styles/hljs-github-gist.scss @@ -70,4 +70,4 @@ .hljs-link { text-decoration: underline; } -} \ No newline at end of file +}