feat: add variant hint-modal to modal component (#764)

Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/764
Reviewed-by: konrad <k@knt.li>
Co-authored-by: dpschen <dpschen@noreply.kolaente.de>
Co-committed-by: dpschen <dpschen@noreply.kolaente.de>

src/styles/components/_all.scss

@@ -14,7 +14,6 @@
 @import 'comments';
 @import 'table-view';
 @import 'kanban';
-@import 'modal';
 @import 'list-backgrounds';
 @import 'color-picker';
 @import 'namespaces';
@@ -24,4 +23,3 @@
 @import 'datepicker';
 @import 'notifications';
 @import 'quick-actions';
-@import 'hint-modal';

src/styles/components/hint-modal.scss

@@ -1,43 +0,0 @@
-.hint-modal {
-	z-index: 4600;
-
-	.card-content {
-		text-align: left;
-
-		.info {
-			font-style: italic;
-		}
-
-		p {
-			display: flex;
-			justify-content: space-between;
-			align-items: center;
-
-			.shortcuts {
-				display: flex;
-				align-items: center;
-
-				i {
-					padding: 0 .25rem;
-				}
-
-				span {
-					padding: .1rem .35rem;
-					border: 1px solid $grey-300;
-					background: $grey-100;
-					border-radius: 3px;
-					font-size: .75rem;
-				}
-			}
-		}
-
-		.message-body {
-			padding: .5rem .75rem;
-		}
-	}
-}
-
-.modal-container-smaller .hint-modal .modal-container {
-	height: calc(100vh - 5rem);
-}
-

src/styles/components/kanban.scss

@@ -1,5 +1,3 @@
-@use 'sass:math';
-
 $bucket-background: $grey-100;
 $task-background: $white;
 $ease-out: all .3s cubic-bezier(0.23, 1, 0.32, 1);

src/styles/components/modal.scss

@@ -1,83 +0,0 @@
-.modal-mask {
-  position: fixed;
-  z-index: 4000;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, .8);
-  transition: opacity 150ms ease;
-  color: #fff;
-
-  .modal-container {
-    transition: all 150ms ease;
-    position: relative;
-    width: 100%;
-    height: 100%;
-    max-height: 100vh;
-    overflow: auto;
-
-    .scrolling-content {
-      max-width: 1024px;
-      width: 100%;
-      margin: 4rem auto;
-
-      @media screen and (max-width: $desktop) {
-        margin: 0;
-
-        .close {
-          display: none;
-        }
-      }
-    }
-
-    .modal-content {
-      text-align: center;
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      text-align: center;
-
-      @media screen and (max-width: $tablet) {
-        margin: 0;
-        top: 25%;
-        transform: translate(-50%, -25%);
-      }
-
-      .header {
-        font-size: 2rem;
-        font-weight: 700;
-      }
-
-      .button {
-        margin: 0 0.5rem;
-      }
-    }
-
-    .close {
-      position: fixed;
-      top: 5px;
-      right: 26px;
-      color: $white;
-      font-size: 2rem;
-    }
-
-    .is-wide {
-      max-width: $desktop;
-      width: calc(100% - 2rem);
-    }
-  }
-}
-
-/* Transitions */
-
-.modal-enter,
-.modal-leave-active {
-  opacity: 0;
-}
-
-.modal-enter .modal-container,
-.modal-leave-active .modal-container {
-  transform: scale(0.9);
-}

src/styles/components/quick-actions.scss

@@ -1,10 +1,4 @@
 .quick-actions {
-
-	.modal-content {
-		top: 6rem !important;
-		transform: translate(-50%, -3rem) !important;
-	}
-
 	.action-input {
 		display: flex;
 		align-items: center;

src/styles/theme/navigation.scss

@@ -1,5 +1,3 @@
-@use "sass:math";
-
 .navbar {
 	z-index: 4 !important;
 

src/styles/theme/variables-derived.scss

@@ -1,4 +1,2 @@
-@use "sass:math";
-
 // Variables that are derived from bulma variables need to be included after them
 $mobile: math.div($tablet, 2);

src/styles/variables/_index.scss

@@ -0,0 +1,6 @@
+@import "colors";
+@import "shadows";
+@import "variables";
+
+// the default values get overwritten by the definitions above
+@import "bulma/sass/utilities/_all";