Merge remote-tracking branch 'adrinux/bulma-css-variables' into bulma-css-variables

# Conflicts:
#	package.json
#	src/components/misc/no-auth-wrapper.vue
#	yarn.lock

src/components/home/Logo.vue

@@ -7,5 +7,11 @@ const Logo = computed(() => new Date().getMonth() === 5 ? LogoFullPride : LogoFu
 </script>
 
 <template>
-	<Logo alt="Vikunja" />
-</template>
+	<Logo alt="Vikunja" class="logo" />
+</template>
+
+<style lang="scss" scoped>
+.logo {
+	color: var(--logo-text-color);
+}
+</style>

src/components/home/topNavigation.vue

@@ -5,7 +5,7 @@
 		class="navbar main-theme is-fixed-top"
 		role="navigation"
 	>
-		<router-link :to="{name: 'home'}" class="navbar-item logo">
+		<router-link :to="{name: 'home'}" class="logo-link">
 			<Logo width="164" height="48"/>
 		</router-link>
 		<MenuButton class="menu-button"/>
@@ -137,19 +137,18 @@ export default {
 
 <style lang="scss" scoped>
 $vikunja-nav-logo-full-width: 164px;
+$user-dropdown-width-mobile: 5rem;
+
+$hamburger-menu-icon-spacing: 1rem;
+$hamburger-menu-icon-width: 28px;
 
 .navbar {
 	z-index: 4 !important;
 }
 
-.logo {
+.logo-link {
 	display: none;
-	color: var(--logo-text-color);
-
-  &:hover, &:focus {
-		background-color: transparent;
-		color: var(--primary);
-	}
+	padding: 0.5rem 0.75rem;
 
 	@media screen and (min-width: $tablet) {
 		align-self: stretch;

src/components/misc/no-auth-wrapper.vue

@@ -38,7 +38,6 @@ const motd = computed(() => store.state.config.motd)
 }
 
 .logo {
-	max-width: 100%;
 	color: var(--logo-text-color);
 }
 </style>

src/styles/common-imports.scss

@@ -33,17 +33,12 @@ $transition-duration: 150ms;
 $transition: $transition-duration ease;
 
 $button-height: 34px;
-
 $switch-view-height: 2.69rem;
 
-$user-dropdown-width-mobile: 5rem;
-$hamburger-menu-icon-spacing: 1rem;
-$hamburger-menu-icon-width: 28px;
 $navbar-height: 4rem;
 $navbar-width: 300px;
 $navbar-icon-width: 40px;
 
-
 $lists-per-row: 5;
 $list-height: 150px;
 $list-spacing: 1rem;

src/styles/custom-properties/colors.scss

@@ -24,45 +24,49 @@
   --grey-lighter:  var(--grey-200);
   --grey-lightest: var(--grey-100);
   --input-border-color: var(--grey-200);
+
   --white-h: 0deg;
   --white-s: 0%;
   --white-l: 100%;
   --white-a: 1;
   --white: hsla(var(--white-h), var(--white-s), var(--white-l), var(--white-a));
   --white-translucent: hsla(var(--white-h), var(--white-s), var(--white-l), 0.75);
+
   --black-h: 0deg;
   --black-s: 0%;
   --black-l: 4%;
   --black-a: 1;
   --black: hsla(var(--black-h), var(--black-s), var(--black-l), var(--black-a));
-  // $warning / $orange: #ff851b or hsl(27.9, 100%, 55.3%)
+
+  // $warning / $orange: #ff851b
   --warning-h: 27.9deg;
   --warning-s: 100%;
   --warning-l: 55.3%;
   --warning-a: 1;
   --warning: hsla(var(--warning-h), var(--warning-s), var(--warning-l), var(--warning-a));
-	// $success / $green is #00db60 or hsl(146.3, 100%, 42.9%)
+
+	// $success / $green is #00db60
   --success-h: 146.3deg;
   --success-s: 100%;
   --success-l: 42.9%;
   --success-a: 1;
   --success: hsla(var(--success-h), var(--success-s), var(--success-l), var(--success-a));
-	// $danger / $red is #ff4136 or hsl(3.3, 100%, 60.6%)
+
+	// $danger / $red is #ff4136
   --danger-h: 3.3deg;
   --danger-s: 100%;
   --danger-l: 60.6%;
   --danger-a: 1;
   --danger: hsla(var(--danger-h), var(--danger-s), var(--danger-l), var(--danger-a));
-	// var(--primary) / $blue is #1973ff or hsl(216.5, 100%, 54.9%)
+
+	// var(--primary) / $blue is #1973ff
   --primary-h: 216.5deg;
   --primary-s: 100%;
   --primary-l: 54.9%;
-  // simulate sass lighten($primary, 30) by increasing lightness 30% to 73%
-  --primary-light-l: 73%;
   --primary-a: 1;
-  --primary-hsl: 216.5deg, 100%, 54.9%;
+  --primary-hsl: var(--primary-h), var(--primary-s), var(--primary-l);
   --primary: hsla(var(--primary-h), var(--primary-s), var(--primary-l), var(--primary-a));
-  --primary-light: hsla(var(--primary-h), var(--primary-s), var(--primary-light-l), var(--primary-a));
+  // END Overrides of Bulma defaults
 
 
   // Define custom color variable to prevent change in dark mode

src/views/tasks/TaskDetailView.vue

@@ -843,20 +843,18 @@ $flash-background-duration: 750ms;
       }
 
       &:not(:disabled) {
-		// HACK: these styles are repeated from bulma-css-variables/sass/form/shared.sass
-		$input-background-color: var(--scheme-main, #{$scheme-main});
-		$input-border-color: var(--border, #{$border});
-		$input-focus-border-color: var(--link, #{$link});
-
-        &:hover, &:active {
-          background: $input-background-color;
-          border-color: $input-border-color;
+        &:hover,
+        &:active,
+        &:focus {
+          background: var(--scheme-main);
+          border-color: var(--border);
           cursor: text;
         }
 
-        &:focus {
-          background: $input-background-color;
-          border-color: $input-focus-border-color;
+        &:hover,
+        &:active {
+          cursor: text;
+          border-color: var(--link)
         }
       }
     }
@@ -894,12 +892,12 @@ $flash-background-duration: 750ms;
 
   .checklist-summary {
     margin-left: .25rem;
-  }	
+  }
 }
 
 .task-view-container {
   padding-bottom: 1rem;
-	
+
   @media screen and (max-width: $desktop) {
 	padding-bottom: 0;
   }
@@ -922,6 +920,11 @@ $flash-background-duration: 750ms;
   }
 }
 
+.task-view-container {
+  // simulate sass lighten($primary, 30) by increasing lightness 30% to 73%
+  --primary-light: hsla(var(--primary-h), var(--primary-s), 73%, var(--primary-a));
+}
+
 .flash-background-enter-from,
 .flash-background-enter-active  {
   animation: flash-background $flash-background-duration ease 1;