Feat/tailwind (#1179)

components/ui/ace-editor.vue

@@ -6,14 +6,14 @@
 
 <style lang="scss">
 .show-if-initialized {
-  opacity: 0;
+  @apply opacity-0;
 
   &.initialized {
-    opacity: 1;
+    @apply opacity-100;
   }
 
   & > * {
-    transition: none;
+    @apply transition-none;
   }
 }
 </style>

components/ui/autocomplete.vue

@@ -32,33 +32,34 @@
 
 <style scoped lang="scss">
 .autocomplete-wrapper {
-  position: relative;
+  @apply relative;
 
   input:focus + ul.suggestions,
   ul.suggestions:hover {
-    display: block;
+    @apply block;
   }
 
   ul.suggestions {
-    display: none;
-    background-color: var(--atc-color);
-    position: absolute;
-    top: calc(100% - 4px);
-    margin: 0 4px;
-    left: 0;
-    padding: 0;
+    @apply hidden;
+    @apply bg-atcColor;
+    @apply absolute;
+    @apply mx-2;
+    @apply left-0;
+    @apply z-50;
+    @apply transition-transform;
+    @apply ease-in-out;
+    @apply duration-200;
+    @apply shadow-lg;
+    top: calc(100% - 8px);
     border-radius: 0 0 8px 8px;
-    z-index: 9999;
-    transition: transform 0.2s ease-out;
-    box-shadow: 0 5px 30px rgba(black, 0.1);
 
     li {
-      width: 100%;
-      display: block;
-      padding: 8px 16px;
-      font-size: 16px;
-      font-family: "Roboto Mono", monospace;
-      font-weight: 400;
+      @apply w-full;
+      @apply block;
+      @apply p-2;
+      @apply text-sm;
+      @apply font-mono;
+      @apply font-normal;
 
       &:last-child {
         border-radius: 0 0 8px 8px;
@@ -66,9 +67,9 @@
 
       &:hover,
       &.active {
-        background-color: var(--ac-color);
-        color: var(--act-color);
-        cursor: pointer;
+        @apply bg-acColor;
+        @apply text-actColor;
+        @apply cursor-pointer;
       }
     }
   }

components/ui/js-editor.vue

@@ -6,14 +6,14 @@
 
 <style lang="scss">
 .show-if-initialized {
-  opacity: 0;
+  @apply opacity-0;
 
   &.initialized {
-    opacity: 1;
+    @apply opacity-100;
   }
 
   & > * {
-    transition: none;
+    @apply transition-none;
   }
 }
 </style>

components/ui/modal.vue

@@ -21,43 +21,46 @@
 </template>
 <style scoped lang="scss">
 .modal-backdrop {
-  position: fixed;
-  z-index: 998;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
+  @apply fixed;
+  @apply inset-0;
+  @apply z-50;
+  @apply w-full;
+  @apply h-full;
+  @apply flex;
+  @apply items-center;
+  @apply justify-center;
+  @apply transition;
+  @apply ease-in-out;
+  @apply duration-200;
   background-color: rgba(0, 0, 0, 0.32);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.2s ease;
 }
 
 .modal-wrapper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-grow: 1;
+  @apply flex;
+  @apply items-center;
+  @apply justify-center;
+  @apply flex-1;
 }
 
 .modal-container {
-  position: relative;
-  display: flex;
-  flex-grow: 1;
-  flex-direction: column;
-  margin: 16px;
-  padding: 16px;
-  transition: all 0.2s ease;
-  background-color: var(--bg-color);
-  border-radius: 8px;
-  box-shadow: 0px 16px 70px rgba(0, 0, 0, 0.5);
+  @apply relative;
+  @apply flex;
+  @apply flex-1;
+  @apply flex-col;
+  @apply m-2;
+  @apply p-2;
+  @apply transition;
+  @apply ease-in-out;
+  @apply duration-200;
+  @apply bg-bgColor;
+  @apply rounded-lg;
+  @apply shadow-2xl;
   max-height: calc(100vh - 128px);
   max-width: 720px;
 }
 
 .modal-body {
-  overflow: auto;
+  @apply overflow-auto;
 }
 
 /*
@@ -71,22 +74,27 @@
 
 .modal-enter,
 .modal-leave-active {
-  opacity: 0;
+  @apply opacity-0;
 }
 
 .modal-enter .modal-container,
 .modal-leave-active .modal-container {
-  transform: scale(0.8);
-  transition: all 0.2s ease-in-out;
+  @apply transform;
+  @apply scale-75;
+  @apply transition;
+  @apply ease-in-out;
+  @apply duration-200;
 }
 
 .fade {
-  position: absolute;
+  @apply absolute;
+  @apply block;
   left: 16px;
   right: 20px;
-  display: block;
   height: 32px;
-  transition: all 0.2s;
+  @apply transition;
+  @apply ease-in-out;
+  @apply duration-200;
 
   &.top {
     top: 68px;

components/ui/pw-toggle.vue

@@ -14,57 +14,50 @@ $useBorder: false;
 $borderColor: var(--fg-light-color);
 $activeColor: var(--ac-color);
 $inactiveColor: var(--fg-light-color);
-
 $inactiveHandleColor: var(--bg-color);
 $activeHandleColor: var(--act-color);
-
 $width: 32px;
 $height: 16px;
 $handleSpacing: 4px;
-
 $transition: all 0.2s ease-in-out;
 
 div {
-  display: inline-block;
-  cursor: pointer;
+  @apply inline-block;
+  @apply cursor-pointer;
 }
 
 label.caption {
-  vertical-align: middle;
-  cursor: pointer;
+  @apply align-middle;
+  @apply cursor-pointer;
 }
 
 label.toggle {
-  position: relative;
-  display: inline-block;
+  @apply relative;
+  @apply inline-block;
+  @apply align-middle;
+  @apply rounded-full;
+  @apply p-0;
+  @apply my-4;
+  @apply mx-2;
+  @apply cursor-pointer;
   width: $width;
   height: $height;
   border: if($useBorder, 2px solid $borderColor, none);
   background-color: if($useBorder, transparent, $inactiveColor);
-  vertical-align: middle;
-
-  border-radius: 32px;
   transition: $transition;
   box-sizing: initial;
-  padding: 0;
-  margin: 8px 4px;
-  cursor: pointer;
 
   .handle {
-    position: absolute;
-    display: inline-block;
-    top: 0;
-    bottom: 0;
-    left: 0;
+    @apply absolute;
+    @apply inline-block;
+    @apply inset-0;
+    @apply rounded-full;
+    @apply pointer-events-none;
+    transition: $transition;
     margin: $handleSpacing;
     background-color: $inactiveHandleColor;
-
     width: #{$height - ($handleSpacing * 2)};
     height: #{$height - ($handleSpacing * 2)};
-    border-radius: 100px;
-
-    pointer-events: none;
-    transition: $transition;
   }
 
   &.on {

components/ui/tab.vue

@@ -4,8 +4,6 @@
   </div>
 </template>
 
-<style scoped lang="scss"></style>
-
 <script>
 export default {
   props: {

components/ui/tabs.vue

@@ -26,50 +26,55 @@
 
 <style scoped lang="scss">
 .tabs-wrapper {
-  display: flex;
-  flex-flow: column nowrap;
-  flex-grow: 1;
-  overflow: hidden;
+  @apply flex;
+  @apply flex-col;
+  @apply flex-no-wrap;
+  @apply flex-1;
+  @apply overflow-hidden;
 
   .tabs {
-    -webkit-overflow-scrolling: touch;
-    display: flex;
-    white-space: nowrap;
-    overflow: auto;
+    @apply scrolling-touch;
+    @apply flex;
+    @apply whitespace-no-wrap;
+    @apply overflow-auto;
 
     ul {
-      display: flex;
-      width: 0px;
+      @apply flex;
+      @apply w-0;
     }
 
     li {
-      display: inline-flex;
+      @apply inline-flex;
+      @apply outline-none;
+      @apply border-none;
 
       a {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding: 8px 16px;
-        color: var(--fg-light-color);
-        border-radius: 8px;
-        cursor: pointer;
+        @apply flex;
+        @apply items-center;
+        @apply justify-center;
+        @apply py-2;
+        @apply px-4;
+        @apply text-fgLightColor;
+        @apply text-sm;
+        @apply rounded-lg;
+        @apply cursor-pointer;
 
         .material-icons {
-          margin-right: 8px;
+          @apply m-4;
         }
 
         &:hover {
-          color: var(--fg-color);
+          @apply text-fgColor;
         }
       }
 
       &:focus a {
-        color: var(--fg-color);
+        @apply text-fgColor;
       }
 
       &.is-active a {
-        background-color: var(--brd-color);
-        color: var(--fg-color);
+        @apply bg-brdColor;
+        @apply text-fgColor;
       }
     }
   }
@@ -78,7 +83,8 @@
 @media (max-width: 768px) {
   ul,
   ol {
-    flex-flow: row nowrap;
+    @apply flex-row;
+    @apply flex-no-wrap;
   }
 }
 </style>

components/ui/url-field.vue

@@ -3,16 +3,16 @@
 </template>
 <style lang="scss">
 .highlight-VAR {
+  @apply font-bold;
   color: var(--ac-color);
-  font-weight: bold;
 }
 .highlight-TEXT {
-  overflow: auto;
+  @apply overflow-auto;
+  @apply break-all;
   height: 20px;
-  word-break: break-all;
 }
 .highlight-TEXT::-webkit-scrollbar {
-  display: none;
+  @apply hidden;
 }
 </style>
 <script>