Refactoring :: move scss files into vue files (#440)

* move style and deletion "deleteConfirmationModal.scss" * move resizable panels style to .vue file * move dataviewer scss into vue file * move pipeline styles to pipeline vue file * move step scss file into vue file * remove useless main.scss * move widget-list__container decalration into its own vue file * move google font import into playground * move some global style from variables.scss to querybuilder and dataviewer SFC * move global box-sizing to playground * fix linter * Apply suggestions from code review * move box-sizing declaration to all element from playground to weaverbird css Co-authored-by: David Nowinsky <david@nowinsky.net>
ToucanToco · Feb 24, 2020 · 1f11873 · 1f11873
1 parent 9eced2f
commit 1f11873
Show file tree

Hide file tree

Showing 15 changed files with 476 additions and 475 deletions.
diff --git a/playground/dist/index.html b/playground/dist/index.html
@@ -14,6 +14,8 @@
     <link rel="stylesheet" href="/playground.css" />
     <title>weaverbird</title>
     <style>
+      @import url('https://fonts.googleapis.com/css?family=Montserrat:500,600,700&display=swap');
+      @import url('https://fonts.googleapis.com/css?family=Roboto+Slab:400&display=swap');
       html,
       body {
         margin: 0;

diff --git a/src/components/DataViewer.vue b/src/components/DataViewer.vue
@@ -214,7 +214,140 @@ export default class DataViewer extends Vue {
 </script>
 <style lang="scss" scoped>
 @import '../styles/_variables';
-@import '../styles/DataViewer';
+
+.data-viewer {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  @extend %main-font-style;
+  /deep/ *,
+  /deep/ ::after,
+  /deep/ ::before {
+    box-sizing: border-box;
+  }
+
+  /deep/ button {
+    outline: none;
+  }
+
+  /deep/ fieldset {
+    border: none;
+  }
+}
+
+.data-viewer-container {
+  width: 100%;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.data-viewer-table-container {
+  width: 100%;
+  max-height: 100%;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.data-viewer-table {
+  border-collapse: collapse;
+  width: 100%;
+}
+
+.data-viewer__header-cell,
+.data-viewer-cell {
+  position: relative;
+  padding: 8px;
+  background-color: white;
+  border: 1px solid $data-viewer-border-color;
+  font-size: 13px;
+  text-align: left;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: pre;
+  //firefox hack for border-collapse issue
+  background-clip: padding-box;
+}
+
+.data-viewer-cell {
+  background-color: #fafafa;
+  white-space: normal;
+}
+
+.data-viewer__header-cell--active,
+.data-viewer-cell--active {
+  // It's trick to have its left side colored cause of border-collapse
+  border-left: 1px double;
+  background-color: $active-color-faded-3;
+  border-right-color: $active-color;
+  border-left-color: $active-color;
+}
+
+.data-viewer__row:last-child {
+  .data-viewer-cell--active {
+    border-bottom-color: $active-color;
+  }
+}
+
+.data-viewer__header-cell {
+  cursor: pointer;
+  font-weight: bold;
+  padding: 6px 8px;
+}
+
+.data-viewer__header-cell--active {
+  border-top-color: $active-color;
+  border-left: 1px double;
+  color: $active-color;
+
+  .data-viewer__header-action:hover {
+    background-color: $active-color-faded-2;
+  }
+
+  .data-viewer__header-icon {
+    color: $active-color-faded;
+  }
+
+  .data-viewer__header-icon--active:hover {
+    color: $active-color;
+  }
+}
+
+.data-viewer__header-label {
+  text-overflow: ellipsis;
+  max-width: 200px;
+  overflow: hidden;
+  padding-right: 23px;
+}
+
+.data-viewer__header-icon {
+  font-family: 'Roboto Slab', serif;
+  color: #aaaaaa;
+  margin-right: 6px;
+}
+
+.data-viewer__header-action {
+  position: absolute;
+  font-size: 18px;
+  right: 10px;
+  top: 6px;
+  transition: opacity 300ms ease;
+  display: flex;
+  width: 18px;
+  height: 18px;
+  border-radius: 4px;
+  align-items: center;
+  justify-content: center;
+}
+
+.data-viewer__header-action:hover {
+  background-color: $data-viewer-border-color;
+}
+
+.data-viewer__header-icon--active:hover {
+  color: $base-color;
+}
 
 .data-viewer-loader-spinner {
   border-radius: 50%;

diff --git a/src/components/DeleteConfirmationModal.vue b/src/components/DeleteConfirmationModal.vue
@@ -43,5 +43,119 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../styles/DeleteConfirmationModal';
+.vqb-modal {
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  left: 0;
+  overflow: auto;
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: 999;
+}
+
+.vqb-modal__backdrop {
+  background-color: rgba(0, 0, 0, 0.54);
+  bottom: 0;
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+}
+
+.vqb-modal__container {
+  align-items: center;
+  display: flex;
+  flex-shrink: 0;
+  justify-content: center;
+  min-height: 100%;
+  padding: 40px 40px 20px;
+  width: 100%;
+}
+
+.vqb-modal__body {
+  background-color: #fff;
+  border-radius: 20px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
+  position: relative;
+}
+
+.vqb-modal__close {
+  color: #4c4c4c;
+  font-size: 30px;
+  position: absolute;
+  top: 15px;
+  right: 30px;
+}
+
+.fa-times {
+  cursor: pointer;
+}
+
+.vqb-modal__header {
+  background-color: #f5f5f5;
+  border-top-left-radius: 20px;
+  border-top-right-radius: 20px;
+  display: flex;
+  padding: 20px 30px;
+}
+
+.vqb-modal__title {
+  font-size: 12px;
+  letter-spacing: 0.25px;
+  line-height: 20px;
+  color: #4c4c4c;
+  font-weight: 700;
+  font-size: 18px;
+}
+
+.vqb-modal__section {
+  box-shadow: inset 0 -1px 0 0 #f5f5f5;
+  padding: 25px 30px;
+}
+
+.vqb-modal__text {
+  font-size: 14px;
+  letter-spacing: 0.25px;
+  line-height: 22px;
+  color: #4c4c4c;
+  font-weight: 400;
+}
+
+strong.vqb-modal__text {
+  display: block;
+  font-weight: 700;
+}
+
+.vqb-modal__footer {
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+  display: flex;
+  justify-content: center;
+  padding: 30px;
+}
+
+.vqb-modal__action {
+  font-size: 12px;
+  letter-spacing: 0.25px;
+  line-height: 20px;
+  cursor: pointer;
+  font-weight: 700;
+  padding: 10px 30px;
+  text-transform: uppercase;
+}
+
+.vqb-modal__action--secondary {
+  background-color: #f5f5f5;
+  color: #a5a5a5;
+  margin-right: 20px;
+  border: none;
+}
+
+.vqb-modal__action--primary {
+  background-color: #4c4c4c;
+  color: #fff;
+  border: none;
+}
 </style>
diff --git a/src/components/Pipeline.vue b/src/components/Pipeline.vue
@@ -56,5 +56,36 @@ export default class PipelineComponent extends Vue {
 </script>
 
 <style lang="scss" scoped>
-@import '../styles/Pipeline';
+.query-pipeline {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.query-pipeline__tips-container {
+  width: 60%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-weight: lighter;
+}
+
+.query-pipeline__tips {
+  font-size: 24px;
+  color: rgb(154, 154, 154);
+  margin-top: 120px;
+  margin-bottom: 40px;
+  text-align: center;
+}
+
+.fa-code {
+  color: rgb(239, 239, 239);
+}
+
+.fa-magic {
+  color: rgb(239, 239, 239);
+  font-size: 64px;
+}
 </style>
diff --git a/src/components/QueryBuilder.vue b/src/components/QueryBuilder.vue
@@ -104,6 +104,23 @@ export default class QueryBuilder extends Vue {
 <style lang="scss" scoped>
 @import '../styles/_variables';
 
+.query-builder {
+  @extend %main-font-style;
+  /deep/ *,
+  /deep/ ::after,
+  /deep/ ::before {
+    box-sizing: border-box;
+  }
+
+  /deep/ button {
+    outline: none;
+  }
+
+  /deep/ fieldset {
+    border: none;
+  }
+}
+
 .slide-left-enter,
 .slide-left-leave-to {
   transform: translateX(-100%);

diff --git a/src/components/ResizablePanels.vue b/src/components/ResizablePanels.vue
@@ -55,5 +55,30 @@ export default class ResizablePanels extends Vue {
 }
 </script>
 <style lang="scss" scoped>
-@import '../styles/ResizablePanels';
+.resizable-panels {
+  display: flex;
+  max-height: 100%;
+  height: 100%;
+}
+
+.resizable-panels__panel {
+  padding: 10px 15px;
+  max-height: 100%;
+  overflow: auto;
+  box-sizing: border-box;
+}
+
+.resizable-panels__resizer {
+  display: flex;
+  justify-content: space-around;
+  width: 5px;
+  border-left: 1px solid rgba(0, 0, 0, 0.3);
+  border-right: 1px solid rgba(0, 0, 0, 0.3);
+  cursor: ew-resize;
+}
+
+.resizable-panels__line {
+  width: 1px;
+  background-color: rgba(0, 0, 0, 0.3);
+}
 </style>