Improve some styling

Author: joeke

assets/dist/assets/main-f6864d5b.js renamed to assets/dist/assets/main-33c9acb7.js

@@ -1,13 +1,13 @@
 {
   "src/main.css": {
-    "file": "assets/main-fbe2bd5e.css",
+    "file": "assets/main-5e610ca6.css",
     "src": "src/main.css"
   },
   "src/main.ts": {
     "css": [
-      "assets/main-fbe2bd5e.css"
+      "assets/main-5e610ca6.css"
     ],
-    "file": "assets/main-f6864d5b.js",
+    "file": "assets/main-33c9acb7.js",
     "isEntry": true,
     "src": "src/main.ts"
   }

assets/dist/assets/main-5e610ca6.css

@@ -6,6 +6,7 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
+    "watch": "vite build --mode development --watch",
     "eslint": "eslint --ext .js,.vue ./src",
     "eslint:fix": "eslint --fix --ext .js,.vue ./src",
     "stylelint": "stylelint ./src/assets/scss",

assets/dist/assets/main-fbe2bd5e.css

@@ -3,13 +3,11 @@
     <h3>Content Security Policy</h3>
 
     <div class="mt-4">
-      <div class="main-wrapper border">
-        <router-view v-slot="{Component}">
-          <transition name="fade" mode="out-in">
-            <component :is="Component" />
-          </transition>
-        </router-view>
-      </div>
+      <router-view v-slot="{Component}">
+        <transition name="fade" mode="out-in">
+          <component :is="Component" />
+        </transition>
+      </router-view>
     </div>
   </div>
 </template>

assets/dist/manifest.json

@@ -8,7 +8,7 @@
         </div>
         <div class="ms-auto">
           <b-button v-if="canSave" variant="primary" class="me-2" @click="onSave">&check;</b-button>
-          <b-button variant="secondary" @click="onAdd">&plus;</b-button>
+          <b-button variant="secondary" size="sm" @click="onAdd"><i class="icon icon-plus"></i></b-button>
         </div>
       </div>
     </div>

assets/package.json

@@ -10,11 +10,11 @@
         @click="checkGroup(record)"
       />
     </div>
-    <div class="ps-md-2">
+    <div class="csp-directives">
       <div
         v-for="directive in record.directives"
         :key="directive.key"
-        class="d-flex align-items-center justify-content-between mt-2"
+        class="d-flex align-items-center justify-content-between"
       >
         <div class="pe-md-3">
           <div class="fw-bold cursor-pointer" @click="checkDirective(directive)">{{ directive.key }}</div>

assets/src/app.vue

@@ -1,9 +1,9 @@
 <template>
   <div>
-    <b-tabs v-if="items.length" v-model="tab" pills fill content-class="pt-4">
+    <b-tabs v-if="items.length" v-model="tab" underline content-class="main-wrapper border-start border-end">
       <b-tab title="Global">
         <b-alert variant="light" :model-value="true">
-          Use this switches below to globally enable/disable directives.
+          Use these switches below to globally enable/disable directives.
         </b-alert>
         <group v-for="group in items" :key="group.id" :model-value="group" class="mt-4" />
       </b-tab>

assets/src/components/directive.vue

@@ -1,4 +1,5 @@
-$primary: #508237;
+// $primary: #508237;
+$primary: #6cb24a;
 $success: #6cb24a;
 $warning: #ffce00;
 $danger: #cf1124;
@@ -10,4 +11,4 @@ $link-color: #234368;
 @import "bootstrap/scss/maps";
 @import "bootstrap/scss/mixins";
 @import "bootstrap/scss/utilities";
-@import "bootstrap/scss/root";
+@import "bootstrap/scss/root";

assets/src/components/group.vue

@@ -5,23 +5,40 @@
 // @import "bootstrap-vue-next/dist/bootstrap-vue-next.css";
 
 #app-root {
-  // @import "bootstrap";
-  font-size: 14px;
-
-  @import "bootstrap/scss/reboot";
-  @import "bootstrap/scss/grid";
-  @import "bootstrap/scss/containers";
-  @import "bootstrap/scss/nav";
-  @import "bootstrap/scss/forms";
-  @import "bootstrap/scss/buttons";
-  @import "bootstrap/scss/type";
-  @import "bootstrap/scss/alert";
-  @import "bootstrap/scss/close";
-  @import "bootstrap/scss/transitions";
-  @import "bootstrap/scss/helpers";
-  @import "bootstrap/scss/utilities/api";
-
-  .cursor-pointer {
-    cursor: pointer;
-  }
+    // @import "bootstrap";
+    font-size: 14px;
+
+    @import "bootstrap/scss/reboot";
+    @import "bootstrap/scss/grid";
+    @import "bootstrap/scss/containers";
+    @import "bootstrap/scss/nav";
+    @import "bootstrap/scss/forms";
+    @import "bootstrap/scss/buttons";
+    @import "bootstrap/scss/type";
+    @import "bootstrap/scss/alert";
+    @import "bootstrap/scss/close";
+    @import "bootstrap/scss/transitions";
+    @import "bootstrap/scss/helpers";
+    @import "bootstrap/scss/utilities/api";
+
+    .cursor-pointer {
+        cursor: pointer;
+    }
+
+    .form-switch {
+        display: flex;
+        align-items: center;
+    }
+
+    .csp-directives {
+        margin-top: .5rem;
+
+        > div {
+            padding: .5rem;
+
+            &:hover {
+                background: $gray-200;
+            }
+        }
+    }
 }