chore: add custom class to inputs until fix is released on buefy's master

2 files changed, 238 insertions, 20 deletions

diff --git a/src/site/assets/styles/bulma-divider.scss b/src/site/assets/styles/bulma-divider.scss
new file mode 100644
index 0000000..713c7e4
--- /dev/null
+++ b/src/site/assets/styles/bulma-divider.scss
@@ -0,0 +1,164 @@
+/*! @creativebulma/bulma-divider v1.1.0 | (c) 2020 Gaetan | MIT License | https://github.com/CreativeBulma/bulma-divider */
+@-webkit-keyframes spinAround {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(359deg);
+  }
+}
+
+@keyframes spinAround {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(359deg);
+  }
+}
+
+/* line 17, src/sass/app.sass */
+.divider {
+  position: relative;
+  display: flex;
+  align-items: center;
+  text-transform: uppercase;
+  color: #7a7a7a;
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: .5px;
+  margin: 25px 0;
+}
+
+/* line 28, src/sass/app.sass */
+.divider::after, .divider::before {
+  content: '';
+  display: block;
+  flex: 1;
+  height: 1px;
+  background-color: #dbdbdb;
+}
+
+/* line 37, src/sass/app.sass */
+.divider:not(.is-right)::after {
+  margin-left: 10px;
+}
+
+/* line 41, src/sass/app.sass */
+.divider:not(.is-left)::before {
+  margin-right: 10px;
+}
+
+/* line 45, src/sass/app.sass */
+.divider.is-left::before {
+  display: none;
+}
+
+/* line 49, src/sass/app.sass */
+.divider.is-right::after {
+  display: none;
+}
+
+/* line 52, src/sass/app.sass */
+.divider.is-vertical {
+  flex-direction: column;
+  margin: 0 25px;
+}
+
+/* line 56, src/sass/app.sass */
+.divider.is-vertical::after, .divider.is-vertical::before {
+  height: auto;
+  width: 1px;
+}
+
+/* line 61, src/sass/app.sass */
+.divider.is-vertical::after {
+  margin-left: 0;
+  margin-top: 10px;
+}
+
+/* line 65, src/sass/app.sass */
+.divider.is-vertical::before {
+  margin-right: 0;
+  margin-bottom: 10px;
+}
+
+/* line 72, src/sass/app.sass */
+.divider.is-white::after, .divider.is-white::before {
+  background-color: white;
+}
+
+/* line 72, src/sass/app.sass */
+.divider.is-black::after, .divider.is-black::before {
+  background-color: #0a0a0a;
+}
+
+/* line 72, src/sass/app.sass */
+.divider.is-light::after, .divider.is-light::before {
+  background-color: whitesmoke;
+}
+
+/* line 72, src/sass/app.sass */
+.divider.is-dark::after, .divider.is-dark::before {
+  background-color: #363636;
+}
+
+/* line 72, src/sass/app.sass */
+.divider.is-primary::after, .divider.is-primary::before {
+  background-color: #00d1b2;
+}
+
+/* line 80, src/sass/app.sass */
+.divider.is-primary.is-light::after, .divider.is-primary.is-light::before {
+  background-color: #ebfffc;
+}
+
+/* line 72, src/sass/app.sass */
+.divider.is-link::after, .divider.is-link::before {
+  background-color: #3273dc;
+}
+
+/* line 80, src/sass/app.sass */
+.divider.is-link.is-light::after, .divider.is-link.is-light::before {
+  background-color: #eef3fc;
+}
+
+/* line 72, src/sass/app.sass */
+.divider.is-info::after, .divider.is-info::before {
+  background-color: #3298dc;
+}
+
+/* line 80, src/sass/app.sass */
+.divider.is-info.is-light::after, .divider.is-info.is-light::before {
+  background-color: #eef6fc;
+}
+
+/* line 72, src/sass/app.sass */
+.divider.is-success::after, .divider.is-success::before {
+  background-color: #48c774;
+}
+
+/* line 80, src/sass/app.sass */
+.divider.is-success.is-light::after, .divider.is-success.is-light::before {
+  background-color: #effaf3;
+}
+
+/* line 72, src/sass/app.sass */
+.divider.is-warning::after, .divider.is-warning::before {
+  background-color: #ffdd57;
+}
+
+/* line 80, src/sass/app.sass */
+.divider.is-warning.is-light::after, .divider.is-warning.is-light::before {
+  background-color: #fffbeb;
+}
+
+/* line 72, src/sass/app.sass */
+.divider.is-danger::after, .divider.is-danger::before {
+  background-color: #f14668;
+}
+
+/* line 80, src/sass/app.sass */
+.divider.is-danger.is-light::after, .divider.is-danger.is-light::before {
+  background-color: #feecf0;
+}
diff --git a/src/site/assets/styles/style.scss b/src/site/assets/styles/style.scss
index 202e02a..026f277 100644
--- a/src/site/assets/styles/style.scss
+++ b/src/site/assets/styles/style.scss
@@ -10,11 +10,16 @@ $family-primary: 'Nunito', BlinkMacSystemFont, -apple-system, 'Segoe UI', 'Robot
 	'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
 $size-normal: 1rem;
 
-@import '../../../node_modules/bulma/bulma.sass';
-@import '../../../node_modules/buefy/src/scss/buefy.scss';
+/* @import '../../../node_modules/bulma/bulma.sass';
+@import '../../../node_modules/buefy/src/scss/buefy.scss'; */
+
+@import "~bulma";
+@import "~buefy/src/scss/buefy";
 
 @import '@mdi/font/css/materialdesignicons.css';
 
+@import './bulma-divider.scss';
+
 html {
 	// font-size: 100%;
 	font-size: 14px;
@@ -204,24 +209,6 @@ section#register a.is-text {
 	margin-top: 5px;
 }
 
-.input,
-.taginput .taginput-container.is-focusable,
-.textarea,
-.select select {
-	border: 2px solid #21252d;
-	border-radius: 0.3em !important;
-	background: rgba(0, 0, 0, 0.15);
-	padding: 1rem;
-	color: $textColor;
-	height: 3rem;
-	&:focus,
-	&:hover {
-		border: 2px solid #21252d;
-	}
-	&::placeholder {
-		color: $textColor;
-	}
-}
 /* button.button.is-primary {
 	background-color: #323846;
 	border: 2px solid #21252d;
@@ -277,6 +264,29 @@ table.table {
 	}
 }
 
+.lolisafe-input input,
+.lolisafe-select select,
+.lolisafe-textarea textarea {
+	border: 2px solid #21252d;
+	border-radius: 0.3em !important;
+	background: rgba(0, 0, 0, 0.15);
+	padding: 1rem;
+	color: $textColor;
+	height: 3rem;
+	&:focus,
+	&:hover {
+		border: 2px solid #21252d;
+	}
+	&::placeholder {
+		color: $textColor;
+	}
+} 
+
+.lolisafe-input .icon {
+	color: #323846 !important;
+}
+
+
 // vue-bar
 .vb > .vb-dragger {
 	z-index: 5;
@@ -345,3 +355,47 @@ table.table {
 	height: 3rem;
 	padding-right: 1rem;
 }
+
+.is-marginless {
+	margin: 0 !important;
+}
+
+.fucking-opl-shut-up {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.lolisafe-on-border.field.is-floating-label .label:before {
+	background-color: $lolisafe;
+}
+
+.is-lolisafe.divider::after, .is-lolisafe.divider::before {
+	background-color: #21252d;
+}
+
+.lolisafe.taginput {
+	.taginput-container {
+		background-color: #21252d;
+		border: 2px solid #21252d;
+		border-radius: 0.3em !important;
+
+		input {
+			background-color: #21252d;
+			color: $textColor;
+			&::placeholder {
+				color: $textColor;
+			}
+		}
+
+		.icon {
+			padding-left: 15px;
+		}
+
+		&:focus,
+		&:hover,
+		&:active {
+			border: 2px solid #21252d;
+		}
+	}
+}