bulma & font-awesome in place of Bootstrap

package-lock.json

@@ -784,6 +784,48 @@
                 "to-fast-properties": "^2.0.0"
             }
         },
+        "@fortawesome/fontawesome-common-types": {
+            "version": "0.2.19",
+            "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.19.tgz",
+            "integrity": "sha512-nd2Ul/CUs8U9sjofQYAALzOGpgkVJQgEhIJnOHaoyVR/LeC3x2mVg4eB910a4kS6WgLPebAY0M2fApEI497raQ=="
+        },
+        "@fortawesome/fontawesome-svg-core": {
+            "version": "1.2.19",
+            "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.19.tgz",
+            "integrity": "sha512-D4ICXg9oU08eF9o7Or392gPpjmwwgJu8ecCFusthbID95CLVXOgIyd4mOKD9Nud5Ckz+Ty59pqkNtThDKR0erA==",
+            "requires": {
+                "@fortawesome/fontawesome-common-types": "^0.2.19"
+            }
+        },
+        "@fortawesome/free-brands-svg-icons": {
+            "version": "5.9.0",
+            "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.9.0.tgz",
+            "integrity": "sha512-sOz1wFyslaHUak8tY6IEhSAV1mAWbCLssBR8yFQV6f065k8nUCkjyrcxW4RVl9+wiLXmeG1CJUABUJV9DiW+7Q==",
+            "requires": {
+                "@fortawesome/fontawesome-common-types": "^0.2.19"
+            }
+        },
+        "@fortawesome/free-regular-svg-icons": {
+            "version": "5.9.0",
+            "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-5.9.0.tgz",
+            "integrity": "sha512-6ZO0jLhk/Yrso0u5pXeYYSfZiHCNoCF7SgtqStdlEX8WtWD4IOfAB1N+MlSnMo12P5KR4cmucX/K0NCOPrhJwg==",
+            "requires": {
+                "@fortawesome/fontawesome-common-types": "^0.2.19"
+            }
+        },
+        "@fortawesome/free-solid-svg-icons": {
+            "version": "5.9.0",
+            "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.9.0.tgz",
+            "integrity": "sha512-U8YXPfWcSozsCW0psCtlRGKjjRs5+Am5JJwLOUmVHFZbIEWzaz4YbP84EoPwUsVmSAKrisu3QeNcVOtmGml0Xw==",
+            "requires": {
+                "@fortawesome/fontawesome-common-types": "^0.2.19"
+            }
+        },
+        "@fortawesome/vue-fontawesome": {
+            "version": "0.1.6",
+            "resolved": "https://registry.npmjs.org/@fortawesome/vue-fontawesome/-/vue-fontawesome-0.1.6.tgz",
+            "integrity": "sha512-HAGRbrOuGDwwUmCYdpzR0hhNQ3EE30dOS4JiJKcoZ+S4M210CxyU0OXCgzIg3HzK/23rlpHbV8zi9PDDZDnuIw=="
+        },
         "@mrmlnc/readdir-enhanced": {
             "version": "2.2.1",
             "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",
@@ -1802,6 +1844,12 @@
             "integrity": "sha1-hZgoeOIbmOHGZCXgPQF0eI9Wnug=",
             "dev": true
         },
+        "bulma": {
+            "version": "0.7.5",
+            "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.7.5.tgz",
+            "integrity": "sha512-cX98TIn0I6sKba/DhW0FBjtaDpxTelU166pf7ICXpCCuplHWyu6C9LYZmL5PEsnePIeJaiorsTEzzNk3Tsm1hw==",
+            "dev": true
+        },
         "bytes": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
@@ -3769,7 +3817,8 @@
                 "ansi-regex": {
                     "version": "2.1.1",
                     "bundled": true,
-                    "dev": true
+                    "dev": true,
+                    "optional": true
                 },
                 "aproba": {
                     "version": "1.2.0",
@@ -3790,12 +3839,14 @@
                 "balanced-match": {
                     "version": "1.0.0",
                     "bundled": true,
-                    "dev": true
+                    "dev": true,
+                    "optional": true
                 },
                 "brace-expansion": {
                     "version": "1.1.11",
                     "bundled": true,
                     "dev": true,
+                    "optional": true,
                     "requires": {
                         "balanced-match": "^1.0.0",
                         "concat-map": "0.0.1"
@@ -3810,17 +3861,20 @@
                 "code-point-at": {
                     "version": "1.1.0",
                     "bundled": true,
-                    "dev": true
+                    "dev": true,
+                    "optional": true
                 },
                 "concat-map": {
                     "version": "0.0.1",
                     "bundled": true,
-                    "dev": true
+                    "dev": true,
+                    "optional": true
                 },
                 "console-control-strings": {
                     "version": "1.1.0",
                     "bundled": true,
-                    "dev": true
+                    "dev": true,
+                    "optional": true
                 },
                 "core-util-is": {
                     "version": "1.0.2",
@@ -3937,7 +3991,8 @@
                 "inherits": {
                     "version": "2.0.3",
                     "bundled": true,
-                    "dev": true
+                    "dev": true,
+                    "optional": true
                 },
                 "ini": {
                     "version": "1.3.5",
@@ -3949,6 +4004,7 @@
                     "version": "1.0.0",
                     "bundled": true,
                     "dev": true,
+                    "optional": true,
                     "requires": {
                         "number-is-nan": "^1.0.0"
                     }
@@ -3963,6 +4019,7 @@
                     "version": "3.0.4",
                     "bundled": true,
                     "dev": true,
+                    "optional": true,
                     "requires": {
                         "brace-expansion": "^1.1.7"
                     }
@@ -3970,12 +4027,14 @@
                 "minimist": {
                     "version": "0.0.8",
                     "bundled": true,
-                    "dev": true
+                    "dev": true,
+                    "optional": true
                 },
                 "minipass": {
                     "version": "2.3.5",
                     "bundled": true,
                     "dev": true,
+                    "optional": true,
                     "requires": {
                         "safe-buffer": "^5.1.2",
                         "yallist": "^3.0.0"
@@ -3994,6 +4053,7 @@
                     "version": "0.5.1",
                     "bundled": true,
                     "dev": true,
+                    "optional": true,
                     "requires": {
                         "minimist": "0.0.8"
                     }
@@ -4074,7 +4134,8 @@
                 "number-is-nan": {
                     "version": "1.0.1",
                     "bundled": true,
-                    "dev": true
+                    "dev": true,
+                    "optional": true
                 },
                 "object-assign": {
                     "version": "4.1.1",
@@ -4086,6 +4147,7 @@
                     "version": "1.4.0",
                     "bundled": true,
                     "dev": true,
+                    "optional": true,
                     "requires": {
                         "wrappy": "1"
                     }
@@ -4171,7 +4233,8 @@
                 "safe-buffer": {
                     "version": "5.1.2",
                     "bundled": true,
-                    "dev": true
+                    "dev": true,
+                    "optional": true
                 },
                 "safer-buffer": {
                     "version": "2.1.2",
@@ -4207,6 +4270,7 @@
                     "version": "1.0.2",
                     "bundled": true,
                     "dev": true,
+                    "optional": true,
                     "requires": {
                         "code-point-at": "^1.0.0",
                         "is-fullwidth-code-point": "^1.0.0",
@@ -4226,6 +4290,7 @@
                     "version": "3.0.1",
                     "bundled": true,
                     "dev": true,
+                    "optional": true,
                     "requires": {
                         "ansi-regex": "^2.0.0"
                     }
@@ -4269,12 +4334,14 @@
                 "wrappy": {
                     "version": "1.0.2",
                     "bundled": true,
-                    "dev": true
+                    "dev": true,
+                    "optional": true
                 },
                 "yallist": {
                     "version": "3.0.3",
                     "bundled": true,
-                    "dev": true
+                    "dev": true,
+                    "optional": true
                 }
             }
         },

package.json

@@ -12,6 +12,7 @@
     "devDependencies": {
         "axios": "^0.19.0",
         "bootstrap": "^4.1.0",
+        "bulma": "^0.7.5",
         "cross-env": "^5.2.0",
         "jquery": "^3.2",
         "laravel-mix": "^4.0.16",
@@ -24,6 +25,11 @@
         "vue-template-compiler": "^2.6.10"
     },
     "dependencies": {
+        "@fortawesome/fontawesome-svg-core": "^1.2.19",
+        "@fortawesome/free-brands-svg-icons": "^5.9.0",
+        "@fortawesome/free-regular-svg-icons": "^5.9.0",
+        "@fortawesome/free-solid-svg-icons": "^5.9.0",
+        "@fortawesome/vue-fontawesome": "^0.1.6",
         "vue-i18n": "^8.11.2",
         "vue-router": "^3.0.6"
     }

resources/js/bootstrap.js

@@ -10,7 +10,7 @@ try {
     window.Popper = require('popper.js').default;
     window.$ = window.jQuery = require('jquery');
 
-    require('bootstrap');
+    //require('bootstrap');
 } catch (e) {}
 
 /**

resources/sass/app.scss

@@ -5,4 +5,57 @@
 @import 'variables';
 
 // Bootstrap
-@import '~bootstrap/scss/bootstrap';
+//@import '~bootstrap/scss/bootstrap';
+@import '~bulma/bulma';
+
+nav.level {
+    padding: 0 20px;
+    /*postion: fixed;*/
+}
+
+#otp {
+    cursor: pointer;
+}
+
+.twofaccount {
+    font-size: 1.7rem !important;
+    width: 250px;
+    display: block;
+    height: auto;
+    border-radius: 6px;
+}
+
+.twofaccount img {
+    height: 0.75em;
+    width: 0.75em;
+    margin-right: .1em;
+}
+
+.twofaccount span {
+  display: block;
+}
+
+.dots {
+  list-style: none;
+  padding: 0;
+}
+
+.dots li {
+  display: inline-block;
+  margin: 0 5px;
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background: hsl(348, 100%, 61%); /* red */
+}
+.dots li[data-is-active] ~ li {
+  background: hsl(0, 0%, 7%);  /* grey */
+}
+
+.dots li:nth-child(-n+8) {
+  background: hsl(48, 100%, 67%); /* yellow */
+}
+
+.dots li:nth-child(-n+6) {
+  background: hsl(141, 71%, 48%); /* green */
+}