Migrate core scss

Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>

10 files changed, 120 insertions, 170 deletions

diff --git a/core/css/apps.scss b/core/css/apps.scss
index a9b20cfec2b..aab575f5dd2 100644
--- a/core/css/apps.scss
+++ b/core/css/apps.scss
@@ -15,6 +15,9 @@
  * @license GNU AGPL version 3 or any later version
  *
  */
+@use 'variables';
+@use 'sass:math';
+@import 'functions';
 
 /* BASE STYLING ------------------------------------------------------------ */
 // no h1 allowed since h1 = logo
@@ -78,9 +81,9 @@ kbd {
 /* APP-NAVIGATION ------------------------------------------------------------ */
 /* Navigation: folder like structure */
 #app-navigation:not(.vue) {
-	width: $navigation-width;
+	width: variables.$navigation-width;
 	position: fixed;
-	top: $header-height;
+	top: variables.$header-height;
 	left: 0;
 	z-index: 500;
 	overflow-y: auto;
@@ -378,7 +381,7 @@ kbd {
 			margin: 0;
 			padding: 0;
 			background: none;
-			@include icon-color('triangle-s', 'actions', $color-black, 1, true);
+			@include icon-color('triangle-s', 'actions', variables.$color-black, 1, true);
 			background-size: 16px;
 			background-repeat: no-repeat;
 			background-position: center;
@@ -394,7 +397,7 @@ kbd {
 			z-index: 105; // above a, under button
 			background-color: var(--color-background-hover);
 			border-radius: 50%;
-			transition: opacity $animation-quick ease-in-out;
+			transition: opacity variables.$animation-quick ease-in-out;
 		}
 
 		/* force padding on link no matter if 'a' has an icon class */
@@ -442,7 +445,7 @@ kbd {
 		.app-navigation-entry-utils-menu-button {
 			/* Prevent bg img override if an icon class is set */
 			button:not([class^='icon-']):not([class*=' icon-']) {
-				@include icon-color('more', 'actions', $color-black, 1, true);
+				@include icon-color('more', 'actions', variables.$color-black, 1, true);
 			}
 			&:hover button,
 			&:focus button {
@@ -530,7 +533,7 @@ kbd {
 	.app-navigation-entry-deleted {
 		display: inline-flex;
 		padding-left: 44px;
-		transform: translateX(#{$navigation-width});
+		transform: translateX(#{variables.$navigation-width});
 		.app-navigation-entry-deleted-description {
 			position: relative;
 			white-space: nowrap;
@@ -592,7 +595,7 @@ kbd {
 	position: relative;
 	display: flex;
 	// padding is included in height
-	padding-top: $header-height;
+	padding-top: variables.$header-height;
 	min-height: 100%;
 }
 
@@ -601,10 +604,10 @@ kbd {
 
 /**
  * !Important. We are defining the minimum requirement we want for flex
- * Just before the mobile breakpoint we have $breakpoint-mobile (1024px) - $navigation-width
+ * Just before the mobile breakpoint we have variables.$breakpoint-mobile (1024px) - variables.$navigation-width
  * -> 468px. In that case we want 200px for the list and 268px for the content
  */
-$min-content-width: $breakpoint-mobile - $navigation-width - $list-min-width;
+$min-content-width: variables.$breakpoint-mobile - variables.$navigation-width - variables.$list-min-width;
 
 #app-content {
 	z-index: 1000;
@@ -614,7 +617,7 @@ $min-content-width: $breakpoint-mobile - $navigation-width - $list-min-width;
 	min-height: 100%;
 	/* margin if navigation element is here */
 	#app-navigation:not(.hidden) + & {
-		margin-left: $navigation-width;
+		margin-left: variables.$navigation-width;
 	}
 	/* no top border for first settings item */
 	> .section:first-child {
@@ -648,16 +651,17 @@ $min-content-width: $breakpoint-mobile - $navigation-width - $list-min-width;
 */
 #app-sidebar {
 	width: 27vw;
-	min-width: $sidebar-min-width;
-	max-width: $sidebar-max-width;
+	min-width: variables.$sidebar-min-width;
+	max-width: variables.$sidebar-max-width;
 	display: block;
-	@include position('sticky');
-	top: $header-height;
+	position: -webkit-sticky;
+	position: sticky;
+	top: variables.$header-height;
 	right:0;
 	overflow-y: auto;
 	overflow-x: hidden;
 	z-index: 1500;
-	height: calc(100vh - #{$header-height});
+	height: calc(100vh - #{variables.$header-height});
 	background: var(--color-main-background);
 	border-left: 1px solid var(--color-border);
 	flex-shrink: 0;
@@ -727,6 +731,7 @@ $min-content-width: $breakpoint-mobile - $navigation-width - $list-min-width;
 	width: 100%;
 	padding: 0;
 	margin: 0;
+	background-color: var(--color-main-background);
 	box-shadow: none;
 	border: 0;
 	border-radius: 0;
@@ -867,7 +872,7 @@ $min-content-width: $breakpoint-mobile - $navigation-width - $list-min-width;
 /* POPOVER MENU ------------------------------------------------------------ */
 $popoveritem-height: 44px;
 $popovericon-size: 16px;
-$outter-margin: ($popoveritem-height - $popovericon-size) / 2;
+$outter-margin: math.div($popoveritem-height - $popovericon-size, 2);
 
 .ie,
 .edge {
@@ -1126,19 +1131,20 @@ $outter-margin: ($popoveritem-height - $popovericon-size) / 2;
 
 /* CONTENT LIST ------------------------------------------------------------ */
 .app-content-list {
-	@include position('sticky');
-	top: $header-height;
+	position: -webkit-sticky;
+	position: sticky;
+	top: variables.$header-height;
 	border-right: 1px solid var(--color-border);
 	display: flex;
 	flex-direction: column;
 	transition: transform 250ms ease-in-out;
-	min-height: calc(100vh - #{$header-height});
-	max-height: calc(100vh - #{$header-height});
+	min-height: calc(100vh - #{variables.$header-height});
+	max-height: calc(100vh - #{variables.$header-height});
 	overflow-y: auto;
 	overflow-x: hidden;
-	flex: 1 1 $list-min-width;
-	min-width: $list-min-width;
-	max-width: $list-max-width;
+	flex: 1 1 variables.$list-min-width;
+	min-width: variables.$list-min-width;
+	max-width: variables.$list-max-width;
 
 	/* Default item */
 	.app-content-list-item {
diff --git a/core/css/css-variables.scss b/core/css/css-variables.scss
deleted file mode 100644
index 1fe6e88dbe7..00000000000
--- a/core/css/css-variables.scss
+++ /dev/null
@@ -1,70 +0,0 @@
-// CSS4 Variables
-// Remember, you cannot use scss functions with css4 variables
-// All css4 variables must be fixed! Scss is a PRE processor
-// css4 variables are processed after scss!
-:root {
-	--color-main-text: #{$color-main-text};
-	--color-main-background: #{$color-main-background};
-	--color-main-background-translucent: #{$color-main-background-translucent};
-
-	// To use like this: background-image: linear-gradient(0, var(--gradient-main-background));
-	--gradient-main-background: var(--color-main-background) 0%, var(--color-main-background-translucent) 85%, transparent 100%;
-
-	--color-background-hover: #{$color-background-hover};
-	--color-background-dark: #{$color-background-dark};
-	--color-background-darker: #{$color-background-darker};
-
-	--color-placeholder-light: #{$color-placeholder-light};
-	--color-placeholder-dark: #{$color-placeholder-dark};
-
-	--color-primary: #{$color-primary};
-	--color-primary-hover: #{$color-primary-hover};
-	--color-primary-light: #{$color-primary-light};
-	--color-primary-light-hover: #{$color-primary-light-hover};
-	--color-primary-text: #{$color-primary-text};
-	--color-primary-light-text: #{$color-primary-light-text};
-	--color-primary-text-dark: #{$color-primary-text-dark};
-	--color-primary-element: #{$color-primary-element};
-	--color-primary-element-hover: #{$color-primary-element-hover};
-	--color-primary-element-light: #{$color-primary-element-light};
-	--color-primary-element-lighter: #{$color-primary-element-lighter};
-
-	--color-error: #{$color-error};
-	--color-error-hover: #{$color-error-hover};
-	--color-warning: #{$color-warning};
-	--color-warning-hover: #{$color-warning-hover};
-	--color-success: #{$color-success};
-	--color-success-hover: #{$color-success-hover};
-
-	--color-text-maxcontrast: #{$color-text-maxcontrast};
-	--color-text-light: #{$color-main-text};
-	--color-text-lighter: #{$color-text-maxcontrast};
-
-	--image-logo: #{$image-logo};
-	--image-login-background: #{$image-login-background};
-	--image-logoheader: #{$image-logoheader};
-	--image-favicon: #{$image-favicon};
-
-	--color-loading-light: #{$color-loading-light};
-	--color-loading-dark: #{$color-loading-dark};
-
-	--color-box-shadow: #{$color-box-shadow};
-
-	--color-border: #{$color-border};
-	--color-border-dark: #{$color-border-dark};
-
-
-	--border-radius: #{$border-radius};
-	--border-radius-large: #{$border-radius-large};
-	--border-radius-pill: #{$border-radius-pill};
-
-	--font-face: #{$font-face};
-	--default-font-size: #{$default-font-size};
-
-	--default-line-height: #{$default-line-height};
-
-	--animation-quick: #{$animation-quick};
-	--animation-slow: #{$animation-slow};
-
-	--header-height: #{$header-height};
-}
diff --git a/core/css/functions.scss b/core/css/functions.scss
index 35db19c3142..62cd200a098 100644
--- a/core/css/functions.scss
+++ b/core/css/functions.scss
@@ -21,21 +21,6 @@
  */
 
 /**
- * Removes the "#" from a color.
- *
- * @param string $color The color
- * @return string The color without #
- */
-@function remove-hash-from-color($color) {
-	$color: unquote($color);
-	$index: str-index(inspect($color), '#');
-	@if $index {
-		$color: str-slice(inspect($color), 2);
-	}
-	@return $color;
-}
-
-/**
  * @see core/src/icons.js
  */
 @function match-color-string($color) {
@@ -80,12 +65,3 @@
 	$varName: "--icon-#{$icon}-#{$color}";
 	background-image: var(#{$varName});
 }
-
-@mixin position($value) {
-	@if $value == 'sticky' {
-		position: -webkit-sticky; // Safari support
-		position: sticky;
-	} @else {
-		position: $value;
-	}
-}
diff --git a/core/css/header.scss b/core/css/header.scss
index a5a706ae239..4549c18487e 100644
--- a/core/css/header.scss
+++ b/core/css/header.scss
@@ -12,6 +12,7 @@
  * @license GNU AGPL version 3 or any later version
  *
  */
+@use 'variables';
 
 /* prevent ugly selection effect on accidental selection */
 #header,
@@ -48,7 +49,7 @@
 	top: 0;
 	width: 100%;
 	z-index: 2000;
-	height: $header-height;
+	height: variables.$header-height;
 	background-color: var(--color-primary);
 	background-image: linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-element-light) 100%);
 	box-sizing: border-box;
@@ -78,7 +79,7 @@
 
 @mixin header-menu-height() {
 	min-height: calc(44px * 1.5); // show at least 1.5 entries
-	max-height: calc(100vh - #{$header-height} * 4);
+	max-height: calc(100vh - #{variables.$header-height} * 4);
 }
 
 #header {
@@ -96,7 +97,7 @@
 		max-width: 350px;
 		@include header-menu-height();
 		right: 5px; // relative to parent
-		top: $header-height;
+		top: variables.$header-height;
 		margin: 0;
 
 		&:not(.popovermenu) {
@@ -229,7 +230,7 @@
 				display: flex;
 				justify-content: center;
 				align-items: center;
-				width: $header-height;
+				width: variables.$header-height;
 				height: 100%;
 				cursor: pointer;
 				opacity: 0.6;
@@ -300,9 +301,9 @@
 /* NAVIGATION --------------------------------------------------------------- */
 nav[role='navigation'] {
 	display: inline-block;
-	width: $header-height;
-	height: $header-height;
-	margin-left: -$header-height;
+	width: variables.$header-height;
+	height: variables.$header-height;
+	margin-left: -#{variables.$header-height};
 	position: relative;
 }
 
@@ -424,7 +425,7 @@ nav[role='navigation'] {
 /* Apps menu */
 #appmenu {
 	display: inline-flex;
-	min-width: $header-height;
+	min-width: variables.$header-height;
 	z-index: 2;
 
 	li {
@@ -438,8 +439,8 @@ nav[role='navigation'] {
 			position: relative;
 			display: flex;
 			margin: 0;
-			height: $header-height;
-			width: $header-height;
+			height: variables.$header-height;
+			width: variables.$header-height;
 			align-items: center;
 			justify-content: center;
 			opacity: .6;
@@ -642,13 +643,13 @@ nav[role='navigation'] {
 	background: var(--color-primary) !important;
 
 	&.skip-content {
-		left: $navigation-width;
+		left: variables.$navigation-width;
 		margin-left: 3px;
 	}
 
 	&:focus,
 	&:active {
-		top: $header-height;
+		top: variables.$header-height;
 	}
 }
 
diff --git a/core/css/icons.scss b/core/css/icons.scss
index 9acec4895be..710dd6b0287 100644
--- a/core/css/icons.scss
+++ b/core/css/icons.scss
@@ -26,6 +26,8 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  *
  */
+@use 'variables';
+@import 'functions';
 
 /* GLOBAL ------------------------------------------------------------------- */
 [class^='icon-'], [class*=' icon-'] {
@@ -117,36 +119,13 @@ audio, canvas, embed, iframe, img, input, object, video {
 	background-size: 32px !important;
 }
 
-.icon-white {
-	&.icon-shadow {
-		filter: drop-shadow(1px 1px 4px var(--color-box-shadow));
-	}
-}
-
-.icon-audio-white {
-	filter: drop-shadow(1px 1px 4px var(--color-box-shadow));
-}
-
-.icon-audio-off-white {
-	filter: drop-shadow(1px 1px 4px var(--color-box-shadow));
-}
-
-.icon-fullscreen-white {
-	filter: drop-shadow(1px 1px 4px var(--color-box-shadow));
-}
-
-.icon-screen-white {
-	filter: drop-shadow(1px 1px 4px var(--color-box-shadow));
-}
-
-.icon-screen-off-white {
-	filter: drop-shadow(1px 1px 4px var(--color-box-shadow));
-}
-
-.icon-video-white {
-	filter: drop-shadow(1px 1px 4px var(--color-box-shadow));
-}
-
+.icon-white.icon-shadow,
+.icon-audio-white,
+.icon-audio-off-white,
+.icon-fullscreen-white,
+.icon-screen-white,
+.icon-screen-off-white,
+.icon-video-white,
 .icon-video-off-white {
 	filter: drop-shadow(1px 1px 4px var(--color-box-shadow));
 }
diff --git a/core/css/inputs.scss b/core/css/inputs.scss
index 057daf672ee..4d444df8f62 100644
--- a/core/css/inputs.scss
+++ b/core/css/inputs.scss
@@ -11,6 +11,8 @@
  * @license GNU AGPL version 3 or any later version
  *
  */
+@use 'variables';
+@import 'functions';
 
  /* Specifically override browser styles */
 input, textarea, select, button, div[contenteditable=true], div[contenteditable=false] {
@@ -281,7 +283,7 @@ input {
 			margin-right: 0;
 			&:disabled {
 				cursor: default;
-				@include icon-color('confirm-fade', 'actions', $color-black, 2, true);
+				@include icon-color('confirm-fade', 'actions', variables.$color-black, 2, true);
 			}
 		}
 
@@ -330,8 +332,8 @@ select,
 
 /* Radio & Checkboxes */
 $checkbox-radio-size: 14px;
-$color-checkbox-radio-disabled: nc-darken($color-main-background, 27%);
-$color-checkbox-radio-border: nc-darken($color-main-background, 47%);
+$color-checkbox-radio-disabled: nc-darken(variables.$color-main-background, 27%);
+$color-checkbox-radio-border: nc-darken(variables.$color-main-background, 47%);
 $color-checkbox-radio-white: #fff;
 
 input {
diff --git a/core/css/mobile.scss b/core/css/mobile.scss
index d1abb0176a5..2dd03480b26 100644
--- a/core/css/mobile.scss
+++ b/core/css/mobile.scss
@@ -1,4 +1,6 @@
-@media only screen and (max-width: $breakpoint-mobile) {
+@use 'variables';
+
+@media only screen and (max-width: variables.$breakpoint-mobile) {
 
 	/* position share dropdown */
 	#dropdown {
@@ -20,7 +22,7 @@
 
 	/* APP SIDEBAR TOGGLE and SWIPE ----------------------------------------------*/
 	#app-navigation {
-		transform: translateX(-#{$navigation-width});
+		transform: translateX(-#{variables.$navigation-width});
 	}
 	.snapjs-left {
 		#app-navigation {
@@ -64,7 +66,7 @@
 		#app-navigation-toggle-back {
 			position: fixed;
 			display: inline-block !important;
-			top: $header-height;
+			top: variables.$header-height;
 			left: 0;
 			width: 44px;
 			height: 44px;
@@ -117,7 +119,7 @@
 		display: none;
 	}
 	#body-settings #controls {
-		min-width: $breakpoint-mobile !important;
+		min-width: variables.$breakpoint-mobile !important;
 	}
 
 	/* do not show dates in filepicker */
diff --git a/core/css/styles.scss b/core/css/styles.scss
index bd7e747169b..f1130979134 100644
--- a/core/css/styles.scss
+++ b/core/css/styles.scss
@@ -13,6 +13,7 @@
  * @license GNU AGPL version 3 or any later version
  *
  */
+@use 'variables';
 
 html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section {
 	margin: 0;
@@ -179,7 +180,8 @@ body {
 
 #controls {
 	box-sizing: border-box;
-	@include position('sticky');
+	position: -webkit-sticky;
+	position: sticky;
 	height: 44px;
 	padding: 0;
 	margin: 0;
@@ -190,7 +192,7 @@ body {
 	-ms-user-select: none;
 	user-select: none;
 	display: flex;
-	top: $header-height;
+	top: variables.$header-height;
 }
 
 /* position controls for apps with app-navigation */
diff --git a/core/css/toast.scss b/core/css/toast.scss
new file mode 100644
index 00000000000..88d9cbc6785
--- /dev/null
+++ b/core/css/toast.scss
@@ -0,0 +1,52 @@
+@use 'variables';
+@import 'functions';
+
+.toastify.toast {
+	min-width: 200px;
+	background: none;
+	background-color: var(--color-main-background);
+	color: var(--color-main-text);
+	box-shadow: 0 0 6px 0 var(--color-box-shadow);
+	padding: 12px;
+	padding-right: 34px;
+	margin-top: 45px;
+	position: fixed;
+	z-index: 9000;
+	border-radius: var(--border-radius);
+
+	.toast-close {
+		position: absolute;
+		top: 0;
+		right: 0;
+		width: 38px;
+		opacity: 0.4;
+		padding: 12px;
+		@include icon-color('close', 'actions', variables.$color-black, 2, true);
+		background-position: center;
+		background-repeat: no-repeat;
+		text-indent: 200%;
+		white-space: nowrap;
+		overflow: hidden;
+
+		&:hover, &:focus, &:active {
+			cursor: pointer;
+			opacity: 1;
+		}
+	}
+}
+.toastify.toastify-top {
+	right: 10px;
+}
+
+.toast-error {
+	border-left: 3px solid var(--color-error);
+}
+.toast-info {
+	border-left: 3px solid var(--color-primary);
+}
+.toast-warning {
+	border-left: 3px solid var(--color-warning);
+}
+.toast-success {
+	border-left: 3px solid var(--color-success);
+}
diff --git a/core/css/variables.scss b/core/css/variables.scss
index 87ef3fdcb1b..9ec9effb0c6 100644
--- a/core/css/variables.scss
+++ b/core/css/variables.scss
@@ -19,8 +19,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  *
  */
-
- // SCSS darken/lighten function override
+// SCSS darken/lighten function override
 @function nc-darken($color, $value) {
 	@return darken($color, $value);
 }
@@ -117,3 +116,4 @@ $header-menu-profile-item-height: 66px;
 
 // mobile. Keep in sync with core/js/js.js
 $breakpoint-mobile: 1024px;
+