style(core): rename to scss modules [#94]

components/admin/admin-sidebar.scss → 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;

components/admin/admin.scss → 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;
  }

components/articles/blocks/articlesByTag2.scss → 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;
  }
 

components/articles/blocks/articlesByTag3.scss → 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 {

components/articles/blocks/banner.scss → components/articles/blocks/banner.module.scss

@@ -1,5 +1,5 @@
-@import 'responsiveness';
-@import 'variables';
+@import 'styles/responsiveness';
+@import 'styles/variables';
 
 .banner {
  position: relative;

components/articles/blocks/blockWrapper.scss → components/articles/blocks/blockWrapper.module.scss

@@ -1,5 +1,5 @@
-@import 'responsiveness';
-@import 'variables';
+@import 'styles/responsiveness';
+@import 'styles/variables';
 
 .block {
  &.wir-no-background {

components/articles/blocks/diary.scss → components/articles/blocks/diary.module.scss

@@ -1,5 +1,5 @@
-@import 'responsiveness';
-@import 'variables';
+@import 'styles/responsiveness';
+@import 'styles/variables';
 
 .diary {
  &__content {

components/articles/blocks/tagPageBlockB.scss → components/articles/blocks/tagPageBlockB.module.scss

@@ -1,4 +1,4 @@
-@import 'responsiveness';
+@import 'styles/responsiveness';
 
 .tag-page-block-b {
  display: flex;

components/articles/blocks/tagPageBlockCD.scss → components/articles/blocks/tagPageBlockCD.module.scss

@@ -1,4 +1,4 @@
-@import 'responsiveness';
+@import 'styles/responsiveness';
 
 .tag-page-block-cd {
  display: flex;

components/articles/blocks/tagsByTopic.scss → components/articles/blocks/tagsByTopic.module.scss

@@ -1,4 +1,4 @@
-@import 'responsiveness';
+@import 'styles/responsiveness';
 
 .tags-by-topic {
  display: flex;

components/articles/blocks/twoInRow.scss → components/articles/blocks/twoInRow.module.scss

@@ -1,4 +1,4 @@
-@import 'responsiveness';
+@import 'styles/responsiveness';
 
 .two-in-row {
  display: flex;

components/articles/cards/article.scss → components/articles/cards/article.module.scss

@@ -1,5 +1,5 @@
-@import 'responsiveness';
-@import 'variables';
+@import 'styles/responsiveness';
+@import 'styles/variables';
 
 @import './cards';
 

components/articles/cards/cardWrapper.scss → components/articles/cards/cardWrapper.module.scss

@@ -1,5 +1,5 @@
-@import 'responsiveness';
-@import 'variables';
+@import 'styles/responsiveness';
+@import 'styles/variables';
 
 @import './cards';
 

components/articles/cards/location.scss → components/articles/cards/location.module.scss

@@ -1,5 +1,5 @@
-@import 'responsiveness';
-@import 'variables';
+@import 'styles/responsiveness';
+@import 'styles/variables';
 
 @import './cards';
 

components/articles/cards/person.scss → components/articles/cards/person.module.scss

@@ -1,5 +1,5 @@
-@import 'responsiveness';
-@import 'variables';
+@import 'styles/responsiveness';
+@import 'styles/variables';
 
 @import './cards';
 

components/articles/cards/placeholder.scss → components/articles/cards/placeholder.module.scss

@@ -1,4 +1,4 @@
-@import 'responsiveness';
+@import 'styles/responsiveness';
 
 @import './cards';
 

components/articles/cards/tagCard.scss → components/articles/cards/tagCard.module.scss

@@ -1,5 +1,5 @@
-@import 'responsiveness';
-@import 'variables';
+@import 'styles/responsiveness';
+@import 'styles/variables';
 
 .tag-card {
  //

components/auth/login-form.scss → components/auth/login-form.module.scss

@@ -1,4 +1,4 @@
-@import 'variables';
+@import 'styles/variables';
 
 .login-form {
  width: 100%;

components/common/form/forms.scss → components/common/form/forms.module.scss

@@ -1,4 +1,4 @@
-@import 'variables';
+@import 'styles/variables';
 
 .form-error {
  color: $error;

components/common/layout/error/error.scss → 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;

components/common/layout/footer.scss → 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;

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;
+ }
+ }
+}

components/common/layout/navbar.scss → components/common/layout/header/styles.scss

@@ -1,5 +1,5 @@
-@import 'responsiveness';
-@import 'variables';
+@import 'styles/responsiveness';
+@import 'styles/variables';
 
 $navbar-base-height: 42px;
 

components/common/layout/layout.scss

@@ -1,5 +1,5 @@
-@import 'responsiveness';
-@import 'variables';
+@import 'styles/responsiveness';
+@import 'styles/variables';
 
 html {
  height: 100%;

components/common/layout/sidebar.scss → 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;

components/common/modal/modal.scss → components/common/modal/modal.module.scss

@@ -1,5 +1,5 @@
-@import 'responsiveness';
-@import 'variables';
+@import 'styles/responsiveness';
+@import 'styles/variables';
 
 .wir-modal {
  height: 100%;

components/common/ui/button-group.scss → components/common/ui/button-group.module.scss

@@ -1,23 +1,25 @@
-@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;
  float: left;
  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;

components/common/ui/button.scss → components/common/ui/button.module.scss

@@ -1,4 +1,4 @@
-@import 'variables';
+@import 'styles/variables';
 
 .wir-kit-button {
  background-color: $primary-white;

components/common/ui/input.scss → 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;
+ }
 }

components/common/ui/link.scss

@@ -1,4 +1,4 @@
-@import 'variables';
+@import 'styles/variables';
 
 .wir-link {
  color: $primary;

components/common/picture.scss → components/common/ui/picture.module.scss

@@ -1,4 +1,4 @@
-picture {
+.picture {
  source {
  height: 100%;
  width: 100%;