:recycle: reformatting css -> postcss

frontend/src/components/ProfileCard.vue

@@ -1,31 +1,16 @@
-<template>
-    <div class="tinder__card">
-        <div class="tinder__card__container">
-            <div
-                v-for="user in users"
-                :key="user.id"
-                @throwout="swipped(user)"
-                :config="config"
-                class="swipe"
-            >
-                <div
-                    class="card"
-                    :style="{ 'background-image': `url(${user.avatar})` }"
-                >
-                    <div class="card__content">
-                        <h3>{{ user.name }}</h3>
-                    </div>
-                </div>
-            </div>
-
-            <div class="swipe__icons">// Icons</div>
-        </div>
-    </div>
+<template lang="pug">
+.profile__card
+  .profiler__card__container
+    .swipe(v-for="user in users" :key="user.id" @throwout="swipped(user)" :config="config")
+      .card(:style="{ 'background-image': `url(${user.avatar})` }")
+        .card__content
+          h3 {{ user.name }}
+    .swipe__icons // Icons
 </template>
 
 <script>
 export default {
-    name: 'tinder-cards',
+    name: 'profile-cards',
     props: {
         users: {
             type: [Object, Array],
@@ -86,66 +71,61 @@ export default {
 }
 </script>
 <style lang="postcss">
-.card
-  position: relative
-  background-color: #fff
-  width: 250px
-  padding: 20px
-  max-width: 85vw
-  height: 50vh
-  border-radius: 9px
-  background-size: cover
-  background-position: center
-
-.tinder__card__container
-  display: flex
-  justify-content: center
-  margin-top: 10vh
+.profile__card__container
+    display: flex
+    justify-content: center
+    margin-top: 10vh
 
 .swipe
-  position: absolute
-
-.card__content
-  width: 100%
-  height: 100%
-
-.card h3
-  position: absolute
-  bottom: 0
-  margin: 10px
-  color: #fff
-  background: linear-gradient(
-    109deg,
-    rgba(0, 0, 0, 0.5) 0%,
-    rgba(0, 0, 0, 0) 100%
-  )
-  border-radius: 9px
-  padding: 5px
-
-.swipe__icons__container
-  display: flex
-  justify-content: center
-
-.swipe__icons
-  position: fixed
-  bottom: 5vh
-  display: flex
-  width: 250px
-  justify-content: space-evenly
+    position: absolute
 
-.swipe__icon__close:hover,
-.swipe__icon__star:hover,
-.swipe__icon__heart:hover
-  transform: scale(1.06)
-  transition: all 0.2s ease-in-out
+.card 
+    position: relative
+    background-color: #fff
+    width: 250px
+    padding: 20px
+    max-width: 85vw
+    height: 50vh
+    border-radius: 9px
+    background-size: cover
+    background-position: center
+    &__content
+        width: 100%
+        height: 100%
+    h3
+        position: absolute
+        bottom: 0
+        margin: 10px
+        color: #fff
+        background: linear-gradient(
+            109deg,
+            rgba(0, 0, 0, 0.5) 0%,
+            rgba(0, 0, 0, 0) 100%
+        )
+        border-radius: 9px
+        padding: 5px
 
-.swipe__icons .material-design-icon__svg
-  background-color: white
-  box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.2) !important
-  border-radius: 30px
-  padding: 10px
+.swipe__icon
+    &s
+        position: fixed
+        bottom: 5vh
+        display: flex
+        width: 250px
+        justify-content: space-evenly
+        .material-design-icon__svg
+            background-color: white
+            box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.2) !important
+            border-radius: 30px
+            padding: 10px
+        &__container
+            display: flex
+            justify-content: center
+    &__close, &__star, &__heart
+        &:hover
+            transform: scale(1.06)
+            transition: all 0.2s ease-in-out
 
 @media only screen and (min-width: 768px)
-  .swipe__icon__power
-    display: none
+    .swipe__icon__power
+        display: none
 </style>

frontend/src/views/Chats.vue

@@ -136,149 +136,114 @@ export default {
 </script>
 
 <style lang="postcss">
-html
-  background-color: #f9f9f9
-
-.wrapper
-  position: relative
-
 .content-wrapper
   float: right
   width: 100%
 
-.content
-  margin-left: 320px
-  clear: both
-  background: #f9f9ff
-  overflow-y: hidden
-  height: 100vh
-
-html
-  box-sizing: border-box
-
-*, *:before, *:after
-  margin: 0
-  padding: 0
-  box-sizing: inherit
-
 .msger
   height: calc(100% - 50px)
   border: var(--border)
   border-radius: 5px
   background: var(--msger-bg)
   box-shadow: 0 15px 15px -5px rgba(0, 0, 0, 0.2)
-
-.msger-header
-  display: flex
-  justify-content: space-between
-  padding: 10px
-  border-bottom: var(--border)
-  background: #ececff
-  color: #666
-
-.msger-header-title
-  display: flex
-  align-items: center
-
-.msger-chat
+  &-header
+    display: flex
+    justify-content: space-between
+    padding: 10px
+    border-bottom: var(--border)
+    background: #ececff
+    color: #666
+    &-title
+      display: flex
+      align-items: center
+
+&-chat
   flex: 1
   overflow-y: auto
   padding: 10px
   height: 100vh
-
-.msger-chat::-webkit-scrollbar
-  width: 6px
-
-.msger-chat::-webkit-scrollbar-track
-  background: #ddd
-
-.msger-chat::-webkit-scrollbar-thumb
-  background: #bdbdbd
+  &::-webkit-scrollbar
+    width: 6px
+    &-track
+      background: #ddd
+    &-thumb
+      background: #bdbdbd
 
 .msg
   display: flex
   align-items: flex-end
-
-.msg-list
-  margin: 10px 0
-
-.msg-img
-  width: 50px
-  height: 50px
-  margin-right: 10px
-  background: #ddd
-  background-repeat: no-repeat
-  background-position: center
-  background-size: cover
-  border-radius: 50%
-
-.msg-bubble
-  max-width: 450px
-  padding: 15px
-  border-radius: 15px
-  background: var(--left-msg-bg)
-
-.msg-info
-  display: flex
-  justify-content: space-between
-  align-items: center
-  margin-bottom: 10px
-
-.msg-info-name
-  margin-right: 10px
-  font-weight: bold
-
-.msg-info-time
-  font-size: 0.85em
-  display: flex
-  margin-top: 10px
-
-.left-msg .msg-bubble
-  border-bottom-left-radius: 0
+  &-list
+    margin: 10px 0
+  &-img
+    width: 50px
+    height: 50px
+    margin-right: 10px
+    background: #ddd
+    background-repeat: no-repeat
+    background-position: center
+    background-size: cover
+    border-radius: 50%
+  &-bubble
+    max-width: 450px
+    padding: 15px
+    border-radius: 15px
+    background: var(--left-msg-bg)
+  &-info
+    display: flex
+    justify-content: space-between
+    align-items: center
+    margin-bottom: 10px
+    &-name
+      margin-right: 10px
+      font-weight: bold
+    &-time
+      font-size: 0.85em
+      display: flex
+      margin-top: 10px
+
+.left-msg
+  .msg
+    &-bubble
+      border-bottom-left-radius: 0
+      display: inline-block
+      border-radius: 12px
+      background-color: rgb(246, 246, 246)
+      padding: 8px 12px
+      align-self: flex-start
+      width: auto
 
 .right-msg
   flex-direction: row-reverse
-
-.right-msg .msg-bubble
-  background: rgb(233, 12, 119)
-  background: linear-gradient(
-    90deg,
-    rgba(233, 12, 119, 1) 0%,
-    rgba(241, 96, 89, 1) 100%
-  )
-  color: #fff
-  border-bottom-right-radius: 0
-
-.right-msg .msg-img
-  margin: 0 0 0 10px
-
-.left-msg .msg-bubble
-  display: inline-block
-  border-radius: 12px
-  background-color: rgb(246, 246, 246)
-  padding: 8px 12px
-  align-self: flex-start
-  width: auto
-
-.msger-inputarea
-  padding: 10px
-  border-top: var(--border)
-  background: #eee
-  position: fixed
-  bottom: 0
-  width: 100vw
-
-.msger-inputarea *
-  padding: 10px
-  border: none
-  border-radius: 3px
-  font-size: 1em
+  .msg
+    &-bubble
+      background: rgb(233, 12, 119)
+      background: linear-gradient(
+        90deg,
+        rgba(233, 12, 119, 1) 0%,
+        rgba(241, 96, 89, 1) 100%
+      )
+      color: #fff
+      border-bottom-right-radius: 0
+    &-img
+      margin: 0 0 0 10px
 
 .msger-input
   flex: 1
   width: calc(100% - 425px)
   background: #ddd
-
+  &area
+    padding: 10px
+    border-top: var(--border)
+    background: #eee
+    position: fixed
+    bottom: 0
+    width: 100vw
+    *
+      padding: 10px
+      border: none
+      border-radius: 3px
+      font-size: 1em
+      
 .msger-send-btn
   margin-left: 10px
   background: rgb(233, 12, 119)