remove scss (#143)

* remove scss

.editorconfig

@@ -1,4 +1,4 @@
-[*.{js,jsx,json,ts,tsx,vue,scss}]
+[*.{js,jsx,json,ts,tsx,vue,css}]
 indent_style = space
 indent_size = 2
 end_of_line = lf

package.json

@@ -23,12 +23,10 @@
     "@fortawesome/free-solid-svg-icons": "^6.2.1",
     "@fortawesome/vue-fontawesome": "^3.0.0-5",
     "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
-    "bulma": "^0.9.4",
     "bulmaswatch": "^0.8.1",
     "d3": "^7.6.1",
     "jison": "^0.4.18",
     "ladder-diagram": "^2.0.0",
-    "sass-loader": "^13.2.0",
     "vue": "^3.2.45",
     "vue-router": "^4.1.6",
     "vue-select": "^4.0.0-beta.6",
@@ -53,6 +51,7 @@
     "@vue/eslint-config-typescript": "^13.0.0",
     "@vue/test-utils": "^2.2.4",
     "@vue/vue3-jest": "^27.0.0",
+    "bulma": "^1.0.2",
     "cypress": "^13.13.3",
     "eslint": ">=7.5.0",
     "eslint-plugin-import": "^2.26.0",
@@ -61,7 +60,6 @@
     "purescript": "^0.14.9",
     "purs-loader": "^3.7.2",
     "purty": "^7.0.0",
-    "sass": "^1.56.1",
     "spago": "^0.21.0",
     "ts-jest": "^27.0.4",
     "typescript": "~4.9.3",

src/App.vue

@@ -14,23 +14,34 @@ export default {
 };
 </script>
 
-<style lang="scss">
+<style>
+:root {
+  --vertical-container-padding-top: 50px;
+  --vertical-container-padding-right: 20px;
+  --vertical-container-padding-bottom: 50px;
+  --vertical-container-padding-left: 20px;
+  --vertical-container-border-width: 5px;
+  --vertical-container-border-color: white;
+  --vertical-container-hover-bg-color: lightgray;
+}
+
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
 }
-// Max: added vertical-container
+
 .vertical-container {
-  padding-top: 50px;
-  padding-right: 20px;
-  padding-bottom: 50px;
-  padding-left: 20px;
+  padding-top: var(--vertical-container-padding-top);
+  padding-right: var(--vertical-container-padding-right);
+  padding-bottom: var(--vertical-container-padding-bottom);
+  padding-left: var(--vertical-container-padding-left);
   cursor: pointer;
-  border: 5px solid white;
+  border: var(--vertical-container-border-width) solid var(--vertical-container-border-color);
 }
+
 .vertical-container:hover {
-  background-color: lightgray;
+  background-color: var(--vertical-container-hover-bg-color);
 }
 </style>

src/assets/main.scss → src/assets/main.css

@@ -1,13 +1,8 @@
-// Bulma Import
 @import '~bulma';
-//- @import '~bulmaswatch/darkly/bulmaswatch';
-//-@import '~bulma-list/sass/bulma-list';
+/*- @import '~bulmaswatch/darkly/bulmaswatch';
+-@import '~bulma-list/sass/bulma-list';*/
 
 .is-radio-button {
-  label {
-    @extend button
-  }
-
   input {
     -webkit-appearance: none;
     -moz-appearance: none;
@@ -16,17 +11,19 @@
     appearance: none;
   }
 }
+
 .is-disabled {
   cursor: not-allowed;
   pointer-events: none;
   color: transparent;
   opacity: 0.6;
 }
 
-$card-border-width: 1px !default;
-$card-border-color: rgba(#000, .125) !default;
+:root {
+  --card-border-width: 1px;
+  --card-border-color: rgba(0, 0, 0, 0.125);
+}
 
 .card-border {
-  @extend .is-shadowless;
-  border: $card-border-width solid $card-border-color;
+  border: var(--card-border-width, 1px) solid var(--card-border-color, rgba(0, 0, 0, 0.125));
 }

src/components/QuestionBase.vue

@@ -93,33 +93,31 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-.question-block {
-  .question-content {
-    margin-top: 0.25rem;
-    margin-bottom: 0.25rem;
-    padding: 0.5rem 0;
-    border-radius: 4px;
+<style scoped>
+.question-block .question-content {
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+  padding: 0.5rem 0;
+  border-radius: 4px;
+}
 
-    &:last-child {
-      margin-bottom: 0;
-    }
+.question-block .question-content:last-child {
+  margin-bottom: 0;
+}
 
-    .is-single-question {
-      margin-right: 0.5rem;
-      margin-top: 0;
-      margin-bottom: 0;
-      gap: 0.5rem;
-    }
+.question-block .question-content .is-single-question {
+  margin-right: 0.5rem;
+  margin-top: 0;
+  margin-bottom: 0;
+  gap: 0.5rem;
+}
 
-    .is-asking {
-      flex-grow: 1;
-    }
+.question-block .question-content .is-asking {
+  flex-grow: 1;
+}
 
-    .is-answering {
-      flex-shrink: 0;
-      text-align: right;
-    }
-  }
+.question-block .question-content .is-answering {
+  flex-shrink: 0;
+  text-align: right;
 }
 </style>

src/components/QuestionDiagram.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="card">
+  <div class="card is-shadowless">
     <svg class="tree" id="tree">
       <!-- preserveAspectRatio="xMinYMin meet"> -->
       <clippath id="clip" />

src/components/QuestionRadio.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="control">
     <label
-      class="button is-radio-button px-2"
+      class="button is-radio-button button px-2"
       v-for="(opt, index) in btnOptions"
       :key="index"
       :class="getColor(opt.color, opt.value, selectedValue, disabled)"

src/components/TheMain.vue

@@ -81,7 +81,7 @@ export default {
 };
 </script>
 
-<style lang="scss">
+<style>
 .mt-8 {
   margin-top: 4rem !important;
   margin-bottom: 5rem !important;

src/main.ts

@@ -3,7 +3,7 @@ import App from './App.vue';
 import router from './router';
 import store from './store';
 
-require('@/assets/main.scss');
+require('@/assets/main.css');
 
 createApp(App)
   .use(store)