diff --git a/src/index.tsx b/src/index.tsx index 62a91f27..b98c8553 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -4,8 +4,7 @@ import { Provider } from 'react-redux'; import { PersistGate } from 'redux-persist/integration/react'; import { configureStore } from '~/redux/store'; import App from '~/containers/App'; - -require('./styles/main.scss'); +import '~/styles/main.scss'; const { store, persistor } = configureStore(); diff --git a/src/styles/colors.scss b/src/styles/_colors.scss similarity index 100% rename from src/styles/colors.scss rename to src/styles/_colors.scss diff --git a/src/styles/_global.scss b/src/styles/_global.scss new file mode 100644 index 00000000..8f755483 --- /dev/null +++ b/src/styles/_global.scss @@ -0,0 +1,110 @@ +@import "src/styles/variables"; + +html { + min-height: 100vh; + box-sizing: border-box; +} + +body { + background: darken($main_bg_color, 12%); + min-height: 100vh; + background: url('../../src/sprites/noise.png') $main_bg_color; + color: $main_text_color; + font: $font_16_regular; + -webkit-font-smoothing: antialiased; + fill: white; + stroke: white; + + &::before { + content: ''; + position: absolute; + height: 600px; + width: 100%; + top: 0; + left: 0; + z-index: -1; + background: url('../../src/sprites/noise_top.png') 0% 0%; + background-size: 600px 600px; + pointer-events: none; + } +} + +#app { + min-height: 100vh; + + & > div { + min-height: 100vh; + } +} + +.grey { + color: #555555; +} + +.todo, .done { + color: #333333; + border-radius: 3px; + padding: 0 2px; + font: $font_14_semibold; + text-transform: uppercase; +} + +.todo { + background-color: $red; +} + +.done { + background-color: $green; +} + +h2 { + font: $font_24_bold; +} + +.username { + background: transparentize($color: #000000, $amount: 0.8); + padding: 2px 4px; + border-radius: 4px; + cursor: pointer; + color: $wisegreen; + font-weight: bold; +} + +a { + color: $primary; + text-decoration: underline; +} + +::-webkit-scrollbar { + width: 18px; + height: 18px; +} + +::-webkit-scrollbar-button { + width: 0; + height: 0; +} + +::-webkit-scrollbar-thumb { + background: #999999; + border: 4px solid $content_bg; + border-radius: 12px; +} + +::-webkit-scrollbar-thumb:hover { + background: lighten(#999999, 4%); +} + +::-webkit-scrollbar-thumb:active { + background: lighten(#999999, 8%); +} + +::-webkit-scrollbar-track { + background: $content_bg; + border: 0px none #ffffff; + border-radius: 50px; +} + +::-webkit-scrollbar-corner { + background: transparent; +} diff --git a/src/styles/reset.scss b/src/styles/_reset.scss similarity index 100% rename from src/styles/reset.scss rename to src/styles/_reset.scss diff --git a/src/styles/global.scss b/src/styles/global.scss deleted file mode 100644 index 373ad182..00000000 --- a/src/styles/global.scss +++ /dev/null @@ -1,201 +0,0 @@ -// @import '~raleway-cyrillic/raleway.css'; -@import "src/styles/variables"; - -html { - min-height: 100vh; - box-sizing: border-box; -} - -body { - background: darken($main_bg_color, 12%); - min-height: 100vh; - // background: url('http://vault48.org/pixmaps/texture.jpg'); - background: url('../../src/sprites/noise.png') $main_bg_color; - color: $main_text_color; - font: $font_16_regular; - -webkit-font-smoothing: antialiased; - // font-size: 16px; - fill: white; - stroke: white; - - &::before { - content: ''; - position: absolute; - height: 600px; - width: 100%; - top: 0; - left: 0; - z-index: -1; - // background: url('http://vault48.org/pixmaps/texture_alt.jpg'); - background: url('../../src/sprites/noise_top.png') 0% 0%; - background-size: 600px 600px; - pointer-events: none; - } -} - -:global(#app) { - min-height: 100vh; - - & > div { - min-height: 100vh; - } -} - -:global(.gap) { - height: $gap; -} - -:global(.spc) { - height: $spc; - - &:global(.double) { - height: $spc * 2; - } - - &:global(.quadro) { - height: $spc * 4; - } - - &:global(.sixty) { - height: $spc * 6; - } -} - -:global(.padded) { - padding: $gap; -} - -:global(.default_container) { - width: 100%; - max-width: $content_width; - margin: auto; -} - -:global(.content_container) { - // background: $content_bg_color; -} - -:global(.head_container) { - //background: $main_bg_color; -} - -:global(.footer) { - height: 40px; -} - -:global(.grey) { - color: #555555; -} - -:global { - .todo, .done { - color: #333333; - border-radius: 3px; - padding: 0 2px; - font: $font_14_semibold; - text-transform: uppercase; - } - - .todo { - background-color: $red; - } - - .done { - background-color: $green; - } -} - -:global(h2) { - font: $font_24_bold; -} - -:global(.username) { - background: transparentize($color: #000000, $amount: 0.8); - padding: 2px 4px; - border-radius: 4px; - cursor: pointer; - color: $wisegreen; - font-weight: bold; -} - -a { - color: $primary; - text-decoration: underline; -} - -::-webkit-scrollbar { - width: 18px; - height: 18px; -} - -::-webkit-scrollbar-button { - width: 0; - height: 0; -} - -::-webkit-scrollbar-thumb { - background: #999999; - border: 4px solid $content_bg; - border-radius: 12px; -} - -::-webkit-scrollbar-thumb:hover { - background: lighten(#999999, 4%); -} - -::-webkit-scrollbar-thumb:active { - background: lighten(#999999, 8%); -} - -::-webkit-scrollbar-track { - background: $content_bg; - border: 0px none #ffffff; - border-radius: 50px; -} - -::-webkit-scrollbar-corner { - background: transparent; -} - -@keyframes fading { - 0% { - opacity: 1; - background: red; - transform: rotate(45deg); - } - 100% { - opacity: 0; - background: blue; - transform: rotate(-45deg); - } -} - -:global { - .fade-enter { - opacity: 0; - transition: opacity 0.5s; - - &-active { - opacity: 1; - transition: opacity 0.5s; - } - - &-done { - opacity: 1; - } - } - - .fade-exit { - opacity: 1; - transition: opacity 0.5s; - - &-active { - opacity: 0; - transition: opacity 0.5s; - } - - &-done { - opacity: 0; - } - } -} diff --git a/src/styles/main.scss b/src/styles/main.scss index b5fd78e5..de65b271 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,2 +1,2 @@ -@import 'reset.scss'; -@import 'global.scss'; +@import '_reset.scss'; +@import '_global.scss';