From c07ee49fc3549e3488e46e1818db8bc27e1a17e1 Mon Sep 17 00:00:00 2001 From: Ivan Pazhitnykh Date: Tue, 10 Mar 2020 18:21:13 +0300 Subject: [PATCH] style(core): rename to scss modules [#94] --- ...sidebar.scss => admin-sidebar.module.scss} | 2 +- .../admin/{admin.scss => admin.module.scss} | 6 +- ...ByTag2.scss => articlesByTag2.module.scss} | 6 +- ...ByTag3.scss => articlesByTag3.module.scss} | 4 +- .../{banner.scss => banner.module.scss} | 4 +- ...kWrapper.scss => blockWrapper.module.scss} | 4 +- .../blocks/{diary.scss => diary.module.scss} | 4 +- ...eBlockB.scss => tagPageBlockB.module.scss} | 2 +- ...lockCD.scss => tagPageBlockCD.module.scss} | 2 +- ...gsByTopic.scss => tagsByTopic.module.scss} | 2 +- .../{twoInRow.scss => twoInRow.module.scss} | 2 +- .../{article.scss => article.module.scss} | 4 +- ...rdWrapper.scss => cardWrapper.module.scss} | 4 +- .../{location.scss => location.module.scss} | 4 +- .../cards/{person.scss => person.module.scss} | 4 +- ...aceholder.scss => placeholder.module.scss} | 2 +- .../{tagCard.scss => tagCard.module.scss} | 4 +- ...login-form.scss => login-form.module.scss} | 2 +- .../form/{forms.scss => forms.module.scss} | 2 +- .../error/{error.scss => error.module.scss} | 4 +- .../{footer.scss => footer/index.module.scss} | 57 +------------------ .../common/layout/footer/layout.module.scss | 51 +++++++++++++++++ .../{navbar.scss => header/styles.scss} | 4 +- components/common/layout/layout.scss | 4 +- .../{sidebar.scss => sidebar.module.scss} | 4 +- .../modal/{modal.scss => modal.module.scss} | 4 +- ...on-group.scss => button-group.module.scss} | 18 +++--- .../ui/{button.scss => button.module.scss} | 2 +- .../ui/{input.scss => input.module.scss} | 18 +++--- components/common/ui/link.scss | 2 +- .../{picture.scss => ui/picture.module.scss} | 2 +- .../ui/{table.scss => table.module.scss} | 0 ...uttons.scss => social-buttons.module.scss} | 6 +- ...aryArrows.scss => diaryArrows.module.scss} | 0 pages/_app.js | 9 +++ .../{example.scss => example.module.scss} | 6 +- .../{article.scss => article.module.scss} | 4 +- .../pages/{diary.scss => diary.module.scss} | 4 +- .../pages/{login.scss => login.module.scss} | 6 +- .../{preview.scss => preview.module.scss} | 0 styles/pages/{tag.scss => tag.module.scss} | 4 +- .../pages/{topic.scss => topic.module.scss} | 4 +- utils/ui.js | 2 - 43 files changed, 143 insertions(+), 136 deletions(-) rename components/admin/{admin-sidebar.scss => admin-sidebar.module.scss} (84%) rename components/admin/{admin.scss => admin.module.scss} (82%) rename components/articles/blocks/{articlesByTag2.scss => articlesByTag2.module.scss} (96%) rename components/articles/blocks/{articlesByTag3.scss => articlesByTag3.module.scss} (96%) rename components/articles/blocks/{banner.scss => banner.module.scss} (93%) rename components/articles/blocks/{blockWrapper.scss => blockWrapper.module.scss} (89%) rename components/articles/blocks/{diary.scss => diary.module.scss} (97%) rename components/articles/blocks/{tagPageBlockB.scss => tagPageBlockB.module.scss} (95%) rename components/articles/blocks/{tagPageBlockCD.scss => tagPageBlockCD.module.scss} (95%) rename components/articles/blocks/{tagsByTopic.scss => tagsByTopic.module.scss} (96%) rename components/articles/blocks/{twoInRow.scss => twoInRow.module.scss} (95%) rename components/articles/cards/{article.scss => article.module.scss} (99%) rename components/articles/cards/{cardWrapper.scss => cardWrapper.module.scss} (92%) rename components/articles/cards/{location.scss => location.module.scss} (97%) rename components/articles/cards/{person.scss => person.module.scss} (98%) rename components/articles/cards/{placeholder.scss => placeholder.module.scss} (89%) rename components/articles/cards/{tagCard.scss => tagCard.module.scss} (97%) rename components/auth/{login-form.scss => login-form.module.scss} (97%) rename components/common/form/{forms.scss => forms.module.scss} (54%) rename components/common/layout/error/{error.scss => error.module.scss} (91%) rename components/common/layout/{footer.scss => footer/index.module.scss} (64%) create mode 100644 components/common/layout/footer/layout.module.scss rename components/common/layout/{navbar.scss => header/styles.scss} (96%) rename components/common/layout/{sidebar.scss => sidebar.module.scss} (96%) rename components/common/modal/{modal.scss => modal.module.scss} (96%) rename components/common/ui/{button-group.scss => button-group.module.scss} (88%) rename components/common/ui/{button.scss => button.module.scss} (93%) rename components/common/ui/{input.scss => input.module.scss} (83%) rename components/common/{picture.scss => ui/picture.module.scss} (91%) rename components/common/ui/{table.scss => table.module.scss} (100%) rename components/social/{social-buttons.scss => social-buttons.module.scss} (93%) rename components/specials/diary/{diaryArrows.scss => diaryArrows.module.scss} (100%) rename pages/markup/{example.scss => example.module.scss} (84%) rename styles/pages/{article.scss => article.module.scss} (99%) rename styles/pages/{diary.scss => diary.module.scss} (96%) rename styles/pages/{login.scss => login.module.scss} (87%) rename styles/pages/{preview.scss => preview.module.scss} (100%) rename styles/pages/{tag.scss => tag.module.scss} (93%) rename styles/pages/{topic.scss => topic.module.scss} (95%) diff --git a/components/admin/admin-sidebar.scss b/components/admin/admin-sidebar.module.scss similarity index 84% rename from components/admin/admin-sidebar.scss rename to components/admin/admin-sidebar.module.scss index 96862716..e382505e 100644 --- a/components/admin/admin-sidebar.scss +++ b/components/admin/admin-sidebar.module.scss @@ -1,5 +1,5 @@ .admin-sidebar { - &-nav-list { + &__nav-list { list-style-type: none; margin: 0 0 30px; padding: 0; diff --git a/components/admin/admin.scss b/components/admin/admin.module.scss similarity index 82% rename from components/admin/admin.scss rename to components/admin/admin.module.scss index 8ed890d5..e15297c0 100644 --- a/components/admin/admin.scss +++ b/components/admin/admin.module.scss @@ -1,16 +1,16 @@ .admin-panel { padding: 0 90px 60px; - &-grid { + &__grid { display: flex; - &__aside { + &-aside { flex: 0 0 auto; padding-right: 20px; width: 100px; } - &__main { + &-main { flex: 1 1 auto; font-size: 0.9rem; } diff --git a/components/articles/blocks/articlesByTag2.scss b/components/articles/blocks/articlesByTag2.module.scss similarity index 96% rename from components/articles/blocks/articlesByTag2.scss rename to components/articles/blocks/articlesByTag2.module.scss index 731748bd..c900b03b 100644 --- a/components/articles/blocks/articlesByTag2.scss +++ b/components/articles/blocks/articlesByTag2.module.scss @@ -1,5 +1,5 @@ -@import 'responsiveness'; -@import 'variables'; +@import 'styles/responsiveness'; +@import 'styles/variables'; .articles-by-tag-2 { display: flex; @@ -127,7 +127,7 @@ } // ALERT HACK. - &__card1 { + &__card-1 { margin: 20px 0; } diff --git a/components/articles/blocks/articlesByTag3.scss b/components/articles/blocks/articlesByTag3.module.scss similarity index 96% rename from components/articles/blocks/articlesByTag3.scss rename to components/articles/blocks/articlesByTag3.module.scss index fb894188..2c92115a 100644 --- a/components/articles/blocks/articlesByTag3.scss +++ b/components/articles/blocks/articlesByTag3.module.scss @@ -1,5 +1,5 @@ -@import 'responsiveness'; -@import 'variables'; +@import 'styles/responsiveness'; +@import 'styles/variables'; .articles-by-tag-3 { &__title { diff --git a/components/articles/blocks/banner.scss b/components/articles/blocks/banner.module.scss similarity index 93% rename from components/articles/blocks/banner.scss rename to components/articles/blocks/banner.module.scss index 25a3c069..087619aa 100644 --- a/components/articles/blocks/banner.scss +++ b/components/articles/blocks/banner.module.scss @@ -1,5 +1,5 @@ -@import 'responsiveness'; -@import 'variables'; +@import 'styles/responsiveness'; +@import 'styles/variables'; .banner { position: relative; diff --git a/components/articles/blocks/blockWrapper.scss b/components/articles/blocks/blockWrapper.module.scss similarity index 89% rename from components/articles/blocks/blockWrapper.scss rename to components/articles/blocks/blockWrapper.module.scss index 168fc293..4619555b 100644 --- a/components/articles/blocks/blockWrapper.scss +++ b/components/articles/blocks/blockWrapper.module.scss @@ -1,5 +1,5 @@ -@import 'responsiveness'; -@import 'variables'; +@import 'styles/responsiveness'; +@import 'styles/variables'; .block { &.wir-no-background { diff --git a/components/articles/blocks/diary.scss b/components/articles/blocks/diary.module.scss similarity index 97% rename from components/articles/blocks/diary.scss rename to components/articles/blocks/diary.module.scss index 642dad6d..fc198291 100644 --- a/components/articles/blocks/diary.scss +++ b/components/articles/blocks/diary.module.scss @@ -1,5 +1,5 @@ -@import 'responsiveness'; -@import 'variables'; +@import 'styles/responsiveness'; +@import 'styles/variables'; .diary { &__content { diff --git a/components/articles/blocks/tagPageBlockB.scss b/components/articles/blocks/tagPageBlockB.module.scss similarity index 95% rename from components/articles/blocks/tagPageBlockB.scss rename to components/articles/blocks/tagPageBlockB.module.scss index f8cc58bb..cb845bb7 100644 --- a/components/articles/blocks/tagPageBlockB.scss +++ b/components/articles/blocks/tagPageBlockB.module.scss @@ -1,4 +1,4 @@ -@import 'responsiveness'; +@import 'styles/responsiveness'; .tag-page-block-b { display: flex; diff --git a/components/articles/blocks/tagPageBlockCD.scss b/components/articles/blocks/tagPageBlockCD.module.scss similarity index 95% rename from components/articles/blocks/tagPageBlockCD.scss rename to components/articles/blocks/tagPageBlockCD.module.scss index aa2ebfec..44050130 100644 --- a/components/articles/blocks/tagPageBlockCD.scss +++ b/components/articles/blocks/tagPageBlockCD.module.scss @@ -1,4 +1,4 @@ -@import 'responsiveness'; +@import 'styles/responsiveness'; .tag-page-block-cd { display: flex; diff --git a/components/articles/blocks/tagsByTopic.scss b/components/articles/blocks/tagsByTopic.module.scss similarity index 96% rename from components/articles/blocks/tagsByTopic.scss rename to components/articles/blocks/tagsByTopic.module.scss index 9e87b4cf..a330e5fc 100644 --- a/components/articles/blocks/tagsByTopic.scss +++ b/components/articles/blocks/tagsByTopic.module.scss @@ -1,4 +1,4 @@ -@import 'responsiveness'; +@import 'styles/responsiveness'; .tags-by-topic { display: flex; diff --git a/components/articles/blocks/twoInRow.scss b/components/articles/blocks/twoInRow.module.scss similarity index 95% rename from components/articles/blocks/twoInRow.scss rename to components/articles/blocks/twoInRow.module.scss index 853efcd2..9395778a 100644 --- a/components/articles/blocks/twoInRow.scss +++ b/components/articles/blocks/twoInRow.module.scss @@ -1,4 +1,4 @@ -@import 'responsiveness'; +@import 'styles/responsiveness'; .two-in-row { display: flex; diff --git a/components/articles/cards/article.scss b/components/articles/cards/article.module.scss similarity index 99% rename from components/articles/cards/article.scss rename to components/articles/cards/article.module.scss index 404cedc4..c1ab7cd9 100644 --- a/components/articles/cards/article.scss +++ b/components/articles/cards/article.module.scss @@ -1,5 +1,5 @@ -@import 'responsiveness'; -@import 'variables'; +@import 'styles/responsiveness'; +@import 'styles/variables'; @import './cards'; diff --git a/components/articles/cards/cardWrapper.scss b/components/articles/cards/cardWrapper.module.scss similarity index 92% rename from components/articles/cards/cardWrapper.scss rename to components/articles/cards/cardWrapper.module.scss index cee63742..2bffac02 100644 --- a/components/articles/cards/cardWrapper.scss +++ b/components/articles/cards/cardWrapper.module.scss @@ -1,5 +1,5 @@ -@import 'responsiveness'; -@import 'variables'; +@import 'styles/responsiveness'; +@import 'styles/variables'; @import './cards'; diff --git a/components/articles/cards/location.scss b/components/articles/cards/location.module.scss similarity index 97% rename from components/articles/cards/location.scss rename to components/articles/cards/location.module.scss index db7bf1b5..de301604 100644 --- a/components/articles/cards/location.scss +++ b/components/articles/cards/location.module.scss @@ -1,5 +1,5 @@ -@import 'responsiveness'; -@import 'variables'; +@import 'styles/responsiveness'; +@import 'styles/variables'; @import './cards'; diff --git a/components/articles/cards/person.scss b/components/articles/cards/person.module.scss similarity index 98% rename from components/articles/cards/person.scss rename to components/articles/cards/person.module.scss index a778d60c..9b73d659 100644 --- a/components/articles/cards/person.scss +++ b/components/articles/cards/person.module.scss @@ -1,5 +1,5 @@ -@import 'responsiveness'; -@import 'variables'; +@import 'styles/responsiveness'; +@import 'styles/variables'; @import './cards'; diff --git a/components/articles/cards/placeholder.scss b/components/articles/cards/placeholder.module.scss similarity index 89% rename from components/articles/cards/placeholder.scss rename to components/articles/cards/placeholder.module.scss index ee1a4ca1..1aa2de44 100644 --- a/components/articles/cards/placeholder.scss +++ b/components/articles/cards/placeholder.module.scss @@ -1,4 +1,4 @@ -@import 'responsiveness'; +@import 'styles/responsiveness'; @import './cards'; diff --git a/components/articles/cards/tagCard.scss b/components/articles/cards/tagCard.module.scss similarity index 97% rename from components/articles/cards/tagCard.scss rename to components/articles/cards/tagCard.module.scss index a34cee0e..c7d007c9 100644 --- a/components/articles/cards/tagCard.scss +++ b/components/articles/cards/tagCard.module.scss @@ -1,5 +1,5 @@ -@import 'responsiveness'; -@import 'variables'; +@import 'styles/responsiveness'; +@import 'styles/variables'; .tag-card { // diff --git a/components/auth/login-form.scss b/components/auth/login-form.module.scss similarity index 97% rename from components/auth/login-form.scss rename to components/auth/login-form.module.scss index 878042f9..1877c66d 100644 --- a/components/auth/login-form.scss +++ b/components/auth/login-form.module.scss @@ -1,4 +1,4 @@ -@import 'variables'; +@import 'styles/variables'; .login-form { width: 100%; diff --git a/components/common/form/forms.scss b/components/common/form/forms.module.scss similarity index 54% rename from components/common/form/forms.scss rename to components/common/form/forms.module.scss index 6d27ef8c..246c0245 100644 --- a/components/common/form/forms.scss +++ b/components/common/form/forms.module.scss @@ -1,4 +1,4 @@ -@import 'variables'; +@import 'styles/variables'; .form-error { color: $error; diff --git a/components/common/layout/error/error.scss b/components/common/layout/error/error.module.scss similarity index 91% rename from components/common/layout/error/error.scss rename to components/common/layout/error/error.module.scss index 95be1e59..b55b16b2 100644 --- a/components/common/layout/error/error.scss +++ b/components/common/layout/error/error.module.scss @@ -1,5 +1,5 @@ -@import 'variables'; -@import 'responsiveness'; +@import 'styles/variables'; +@import 'styles/responsiveness'; .error-message { padding: 1.5rem 2rem 3rem; diff --git a/components/common/layout/footer.scss b/components/common/layout/footer/index.module.scss similarity index 64% rename from components/common/layout/footer.scss rename to components/common/layout/footer/index.module.scss index 43712a7c..efacb60a 100644 --- a/components/common/layout/footer.scss +++ b/components/common/layout/footer/index.module.scss @@ -1,58 +1,5 @@ -@import 'responsiveness'; -@import 'variables'; - -.footer-layout { - margin: 5rem 2rem 1rem 1rem; - padding: 2rem 0 0; - - @include touch { - margin: 3rem 6rem 3rem 3rem; - } - - &__nested1 { - display: flex; - flex-direction: column; - - @include desktop { - flex-direction: row; - } - } - - &__nested2 { - display: flex; - flex-direction: column; - - @media screen and (min-width: 720px) { - flex-direction: row; - } - - @include desktop { - flex: 5; - } - } - - &__block1 { - @include touch { - flex: 1; - } - } - - &__block2 { - @include touch { - flex: 1; - } - } - - &__block3 { - @include desktop { - flex: 2; - } - } - - &__block4 { - // Bottom block. - } -} +@import 'styles/responsiveness'; +@import 'styles/variables'; .footer { border-top: solid 1px $primary-grey; diff --git a/components/common/layout/footer/layout.module.scss b/components/common/layout/footer/layout.module.scss new file mode 100644 index 00000000..fa7fee7b --- /dev/null +++ b/components/common/layout/footer/layout.module.scss @@ -0,0 +1,51 @@ +@import 'styles/responsiveness'; +@import 'styles/variables'; + +.footer-layout { + margin: 5rem 2rem 1rem 1rem; + padding: 2rem 0 0; + + @include touch { + margin: 3rem 6rem 3rem 3rem; + } + + &__nested1 { + display: flex; + flex-direction: column; + + @include desktop { + flex-direction: row; + } + } + + &__nested2 { + display: flex; + flex-direction: column; + + @media screen and (min-width: 720px) { + flex-direction: row; + } + + @include desktop { + flex: 5; + } + } + + &__block1 { + @include touch { + flex: 1; + } + } + + &__block2 { + @include touch { + flex: 1; + } + } + + &__block3 { + @include desktop { + flex: 2; + } + } +} diff --git a/components/common/layout/navbar.scss b/components/common/layout/header/styles.scss similarity index 96% rename from components/common/layout/navbar.scss rename to components/common/layout/header/styles.scss index e4e3edc2..86498754 100644 --- a/components/common/layout/navbar.scss +++ b/components/common/layout/header/styles.scss @@ -1,5 +1,5 @@ -@import 'responsiveness'; -@import 'variables'; +@import 'styles/responsiveness'; +@import 'styles/variables'; $navbar-base-height: 42px; diff --git a/components/common/layout/layout.scss b/components/common/layout/layout.scss index 88ff57b7..ed5c9904 100644 --- a/components/common/layout/layout.scss +++ b/components/common/layout/layout.scss @@ -1,5 +1,5 @@ -@import 'responsiveness'; -@import 'variables'; +@import 'styles/responsiveness'; +@import 'styles/variables'; html { height: 100%; diff --git a/components/common/layout/sidebar.scss b/components/common/layout/sidebar.module.scss similarity index 96% rename from components/common/layout/sidebar.scss rename to components/common/layout/sidebar.module.scss index c1fa3568..04105163 100644 --- a/components/common/layout/sidebar.scss +++ b/components/common/layout/sidebar.module.scss @@ -1,5 +1,5 @@ -@import 'responsiveness'; -@import 'variables'; +@import 'styles/responsiveness'; +@import 'styles/variables'; .sidebar { background-color: $primary-concrete; diff --git a/components/common/modal/modal.scss b/components/common/modal/modal.module.scss similarity index 96% rename from components/common/modal/modal.scss rename to components/common/modal/modal.module.scss index 04291e16..353bcfd1 100644 --- a/components/common/modal/modal.scss +++ b/components/common/modal/modal.module.scss @@ -1,5 +1,5 @@ -@import 'responsiveness'; -@import 'variables'; +@import 'styles/responsiveness'; +@import 'styles/variables'; .wir-modal { height: 100%; diff --git a/components/common/ui/button-group.scss b/components/common/ui/button-group.module.scss similarity index 88% rename from components/common/ui/button-group.scss rename to components/common/ui/button-group.module.scss index 8f346662..50c44704 100644 --- a/components/common/ui/button-group.scss +++ b/components/common/ui/button-group.module.scss @@ -1,11 +1,18 @@ -@import 'variables'; +@import 'styles/variables'; -.wir-button-group { +.button-group { display: flex; font-size: 0.8rem; position: relative; - .wir-button { + &__icon { + button { + flex-basis: auto; + flex-grow: 1; + } + } + + button { background-color: $primary-white; border: 1px solid $primary-grey; border-left: 0; @@ -13,11 +20,6 @@ outline: none; text-align: center; - &__icon { - flex-basis: auto; - flex-grow: 1; - } - &:hover { background-color: $primary-white; box-shadow: inset 0 0 1px $primary-grey; diff --git a/components/common/ui/button.scss b/components/common/ui/button.module.scss similarity index 93% rename from components/common/ui/button.scss rename to components/common/ui/button.module.scss index 454fcf38..6f8802b8 100644 --- a/components/common/ui/button.scss +++ b/components/common/ui/button.module.scss @@ -1,4 +1,4 @@ -@import 'variables'; +@import 'styles/variables'; .wir-kit-button { background-color: $primary-white; diff --git a/components/common/ui/input.scss b/components/common/ui/input.module.scss similarity index 83% rename from components/common/ui/input.scss rename to components/common/ui/input.module.scss index 5b5518ae..2e22ffe0 100644 --- a/components/common/ui/input.scss +++ b/components/common/ui/input.module.scss @@ -1,4 +1,4 @@ -@import 'variables'; +@import 'styles/variables'; .wir-input { display: flex; @@ -37,7 +37,7 @@ color: $error; } - &__input { + &__control { background: inherit; border: 0; flex-grow: 1; @@ -88,12 +88,12 @@ transform: rotate(360deg); } } -} -// change autocomplete styles in Chrome -input:-webkit-autofill, -input:-webkit-autofill:hover, -input:-webkit-autofill:focus, -input:-webkit-autofill:active { - transition: background-color 5000s ease-in-out 0s; + // change autocomplete styles in Chrome + input:-webkit-autofill, + input:-webkit-autofill:hover, + input:-webkit-autofill:focus, + input:-webkit-autofill:active { + transition: background-color 5000s ease-in-out 0s; + } } diff --git a/components/common/ui/link.scss b/components/common/ui/link.scss index 7b89d929..7b5b38bf 100644 --- a/components/common/ui/link.scss +++ b/components/common/ui/link.scss @@ -1,4 +1,4 @@ -@import 'variables'; +@import 'styles/variables'; .wir-link { color: $primary; diff --git a/components/common/picture.scss b/components/common/ui/picture.module.scss similarity index 91% rename from components/common/picture.scss rename to components/common/ui/picture.module.scss index 28f1154e..bf87788c 100644 --- a/components/common/picture.scss +++ b/components/common/ui/picture.module.scss @@ -1,4 +1,4 @@ -picture { +.picture { source { height: 100%; width: 100%; diff --git a/components/common/ui/table.scss b/components/common/ui/table.module.scss similarity index 100% rename from components/common/ui/table.scss rename to components/common/ui/table.module.scss diff --git a/components/social/social-buttons.scss b/components/social/social-buttons.module.scss similarity index 93% rename from components/social/social-buttons.scss rename to components/social/social-buttons.module.scss index 693b2dad..6eaa821a 100644 --- a/components/social/social-buttons.scss +++ b/components/social/social-buttons.module.scss @@ -1,7 +1,7 @@ -@import 'responsiveness'; -@import 'variables'; +@import 'styles/responsiveness'; +@import 'styles/variables'; -.wir-social-buttons { +.social-buttons { &__native { display: none; diff --git a/components/specials/diary/diaryArrows.scss b/components/specials/diary/diaryArrows.module.scss similarity index 100% rename from components/specials/diary/diaryArrows.scss rename to components/specials/diary/diaryArrows.module.scss diff --git a/pages/_app.js b/pages/_app.js index 7394182f..505f00c1 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -1,10 +1,14 @@ import 'normalize.css'; import 'styles/index.scss'; +import 'components/common/ui/link.scss'; +import 'components/common/layout/layout.scss'; +import 'components/common/layout/header/styles.scss'; import React from 'react'; import PropTypes from 'prop-types'; import ReactGA from 'react-ga'; import moment from 'moment'; +import block from 'bem-css-modules'; import { Provider } from 'react-redux'; import withRedux from 'next-redux-wrapper'; @@ -41,6 +45,11 @@ import loadYM from 'utils/loadYM'; import { authActions } from 'redux/ducks/auth'; import { sidebarActions } from 'redux/ducks/sidebar'; +block.setSettings({ + throwOnError: true, + modifierDelimiter: '--', +}); + const getEmptyObject = () => ({}); const getLocale = ({ asPath, query: { lang } }) => { diff --git a/pages/markup/example.scss b/pages/markup/example.module.scss similarity index 84% rename from pages/markup/example.scss rename to pages/markup/example.module.scss index b1f15a11..8b13c9f8 100644 --- a/pages/markup/example.scss +++ b/pages/markup/example.module.scss @@ -1,17 +1,17 @@ .example { margin: 20px; - .blue { + &__blue { // stylelint-disable-next-line color-named color: blue; } - .red { + &__red { // stylelint-disable-next-line color-named color: red; } - .big { + &__big { font-size: 50px; } } diff --git a/styles/pages/article.scss b/styles/pages/article.module.scss similarity index 99% rename from styles/pages/article.scss rename to styles/pages/article.module.scss index 497b5699..d83b82c6 100644 --- a/styles/pages/article.scss +++ b/styles/pages/article.module.scss @@ -1,5 +1,5 @@ -@import 'responsiveness'; -@import 'variables'; +@import 'styles/responsiveness'; +@import 'styles/variables'; /* stylelint-disable no-descending-specificity */ $block-spacing: 60px; diff --git a/styles/pages/diary.scss b/styles/pages/diary.module.scss similarity index 96% rename from styles/pages/diary.scss rename to styles/pages/diary.module.scss index 45fc02db..c4365944 100644 --- a/styles/pages/diary.scss +++ b/styles/pages/diary.module.scss @@ -1,5 +1,5 @@ -@import 'responsiveness'; -@import 'variables'; +@import 'styles/responsiveness'; +@import 'styles/variables'; .diary-page { display: flex; diff --git a/styles/pages/login.scss b/styles/pages/login.module.scss similarity index 87% rename from styles/pages/login.scss rename to styles/pages/login.module.scss index f1f6a745..cdd3b47e 100644 --- a/styles/pages/login.scss +++ b/styles/pages/login.module.scss @@ -1,7 +1,7 @@ -@import 'variables'; +@import 'styles/variables'; .login-page { - &-container { + &__container { align-items: center; background: $primary-concrete; display: flex; @@ -12,7 +12,7 @@ width: 100%; } - &-wrap { + &__wrap { background: $primary-white; border-radius: 10px; box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1); diff --git a/styles/pages/preview.scss b/styles/pages/preview.module.scss similarity index 100% rename from styles/pages/preview.scss rename to styles/pages/preview.module.scss diff --git a/styles/pages/tag.scss b/styles/pages/tag.module.scss similarity index 93% rename from styles/pages/tag.scss rename to styles/pages/tag.module.scss index 9ed39d1a..4fd2d1a8 100644 --- a/styles/pages/tag.scss +++ b/styles/pages/tag.module.scss @@ -1,5 +1,5 @@ -@import 'responsiveness'; -@import 'variables'; +@import 'styles/responsiveness'; +@import 'styles/variables'; .tag-page { padding-bottom: 3rem; diff --git a/styles/pages/topic.scss b/styles/pages/topic.module.scss similarity index 95% rename from styles/pages/topic.scss rename to styles/pages/topic.module.scss index f953491f..68f5d13a 100644 --- a/styles/pages/topic.scss +++ b/styles/pages/topic.module.scss @@ -1,5 +1,5 @@ -@import 'responsiveness'; -@import 'variables'; +@import 'styles/responsiveness'; +@import 'styles/variables'; $columns: ( mobile: 1, diff --git a/utils/ui.js b/utils/ui.js index 5855b4ba..ec1ec356 100644 --- a/utils/ui.js +++ b/utils/ui.js @@ -1,5 +1,3 @@ -import 'components/common/ui/link.scss'; - import cn from 'classnames'; export const linkCn = ({ className, disabled, dark, active, noStyles } = {}) =>