WIP: move SCSS to webpack

Makefile

@@ -32,3 +32,9 @@ clean:
 
 clean-git: clean
 	git checkout -- dist
+
+scss: dist/core-server.css apps/settings/css/settings.scss
+	node_modules/node-sass/bin/node-sass apps/settings/css/settings.scss dist/settings-setting-settingss.css
+
+dist/core-%.css: core/css/%.scss
+	node_modules/node-sass/bin/node-sass $< $@

apps/settings/css/settings.scss

@@ -14,25 +14,25 @@ input {
 }
 
 /* icons for sidebar */
-.nav-icon-personal-settings {
-	@include icon-color('personal', 'settings', $color-black);
-}
-
-.nav-icon-security {
-	@include icon-color('toggle-filelist', 'settings', $color-black);
-}
-
-.nav-icon-clientsbox {
-	@include icon-color('change', 'settings', $color-black);
-}
-
-.nav-icon-federated-cloud {
-	@include icon-color('share', 'settings', $color-black);
-}
-
-.nav-icon-second-factor-backup-codes, .nav-icon-ssl-root-certificate {
-	@include icon-color('password', 'settings', $color-black);
-}
+//.nav-icon-personal-settings {
+//	@include icon-color('personal', 'settings', $color-black);
+//}
+//
+//.nav-icon-security {
+//	@include icon-color('toggle-filelist', 'settings', $color-black);
+//}
+//
+//.nav-icon-clientsbox {
+//	@include icon-color('change', 'settings', $color-black);
+//}
+//
+//.nav-icon-federated-cloud {
+//	@include icon-color('share', 'settings', $color-black);
+//}
+//
+//.nav-icon-second-factor-backup-codes, .nav-icon-ssl-root-certificate {
+//	@include icon-color('password', 'settings', $color-black);
+//}
 
 #avatarform {
 	.avatardiv {
@@ -916,7 +916,7 @@ span.version {
 	}
 }
 
-@media only screen and (max-width: $breakpoint-mobile) {
+@media only screen and (max-width: var(--breakpoint-mobile)) {
 	.store .section {
 		width: 50%;
 	}
@@ -1049,6 +1049,11 @@ span.version {
 		align-items: center;
 	}
 
+	.counter {
+		padding-left: calc(var(--header-height) - 10px);
+		margin: 10px;
+	}
+
 	&.installed {
 		.apps-list-container {
 			display: table;
@@ -1572,7 +1577,7 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
 				align-self: normal;
 				background-color: var(--color-main-background);
 				z-index: 100; /* above multiselect */
-				top: $header-height;
+				top: var(--header-height);
 
 				&.sticky {
 					box-shadow: 0 -2px 10px 1px var(--color-box-shadow);

apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/ProfileVisibilitySection.vue

@@ -80,9 +80,7 @@ export default {
 				.map(([paramId, { appId, displayId, visibility }]) => ({ id: paramId, appId, displayId, visibility }))
 				.sort(compareParams),
 			// TODO remove this when not used once the settings layout is updated
-			marginLeft: window.matchMedia('(min-width: 1600px)').matches
-				? window.getComputedStyle(document.getElementById('personal-settings-avatar-container')).getPropertyValue('width').trim()
-				: '0px',
+			marginLeft: '0px',
 		}
 	},
 
@@ -104,6 +102,11 @@ export default {
 				? window.getComputedStyle(document.getElementById('personal-settings-avatar-container')).getPropertyValue('width').trim()
 				: '0px'
 		}
+		setTimeout(() => {
+			this.marginLeft = window.matchMedia('(min-width: 1600px)').matches
+				? window.getComputedStyle(document.getElementById('personal-settings-avatar-container')).getPropertyValue('width').trim()
+				: '0px'
+		}, 1000)
 	},
 
 	beforeDestroy() {

apps/settings/src/main.js

@@ -0,0 +1 @@
+import '../css/settings.scss'

apps/settings/templates/settings/frame.php

@@ -21,12 +21,13 @@
  *
  */
 
-style('settings', 'settings');
-script('settings', 'settings');
-\OCP\Util::addScript('settings', 'legacy-admin');
-script('core', 'setupchecks');
-script('files', 'jquery.fileupload');
+use OCP\Util;
 
+Util::addScript('settings', 'settings');
+Util::addScript('core', 'setupchecks');
+Util::addScript('files', 'jquery.fileupload');
+Util::addScript('settings', 'legacy-admin');
+Util::addStyle('settings', 'settings');
 ?>
 
 <div id="app-navigation">

core/css/apps.scss

@@ -80,14 +80,14 @@ kbd {
 #app-navigation:not(.vue) {
 	width: $navigation-width;
 	position: fixed;
-	top: $header-height;
+	top: var(--header-height);
 	left: 0;
 	z-index: 500;
 	overflow-y: auto;
 	overflow-x: hidden;
 	// Do not use vh because of mobile headers
 	// are included in the calculation
-	height: calc(100% - #{$header-height});
+	height: calc(100% - var(--header-height));
 	box-sizing: border-box;
 	background-color: var(--color-main-background);
 	-webkit-user-select: none;
@@ -593,7 +593,7 @@ kbd {
 	position: relative;
 	display: flex;
 	// padding is included in height
-	padding-top: $header-height;
+	padding-top: var(--header-height);
 	min-height: 100%;
 }
 
@@ -652,13 +652,13 @@ $min-content-width: $breakpoint-mobile - $navigation-width - $list-min-width;
 	min-width: $sidebar-min-width;
 	max-width: $sidebar-max-width;
 	display: block;
-	@include position('sticky');
-	top: $header-height;
+	position: 'sticky';
+	top: var(--header-height);
 	right:0;
 	overflow-y: auto;
 	overflow-x: hidden;
 	z-index: 1500;
-	height: calc(100vh - #{$header-height});
+	height: calc(100vh - var(--header-height));
 	background: var(--color-main-background);
 	border-left: 1px solid var(--color-border);
 	flex-shrink: 0;
@@ -1118,14 +1118,14 @@ $outter-margin: ($popoveritem-height - $popovericon-size) / 2;
 
 /* CONTENT LIST ------------------------------------------------------------ */
 .app-content-list {
-	@include position('sticky');
-	top: $header-height;
+	position: 'sticky';
+	top: var(--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 - var(--header-height));
+	max-height: calc(100vh - var(--header-height));
 	overflow-y: auto;
 	overflow-x: hidden;
 	flex: 1 1 $list-min-width;

core/css/css-variables.scss

@@ -67,4 +67,6 @@
 	--animation-slow: #{$animation-slow};
 
 	--header-height: #{$header-height};
+
+	--breakpoint-mobile: #{$breakpoint-mobile};
 }

core/css/functions.scss

@@ -27,7 +27,9 @@
  * @return string The color without #
  */
 @function remove-hash-from-color($color) {
-	$color: unquote($color);
+	@if type-of($color) == 'string' {
+		$color: unquote($color);
+	}
 	$index: str-index(inspect($color), '#');
 	@if $index {
 		$color: str-slice(inspect($color), 2);
@@ -48,9 +50,9 @@
 @function icon-color-path($icon, $dir, $color, $version: 1, $core: false) {
 	$color: remove-hash-from-color($color);
 	@if $core {
-		@return '#{$webroot}/svg/core/#{$dir}/#{$icon}?color=#{$color}&v=#{$version}';
+		@return '../../svg/core/#{$dir}/#{$icon}?color=\##{$color}&v=#{$version}';
 	} @else {
-		@return '#{$webroot}/svg/#{$dir}/#{$icon}?color=#{$color}&v=#{$version}';
+		@return '../../svg/#{$dir}/#{$icon}?color=\##{$color}&v=#{$version}';
 	}
 }
 

core/css/header.scss

@@ -48,7 +48,7 @@
 	top: 0;
 	width: 100%;
 	z-index: 2000;
-	height: $header-height;
+	height: var(--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 +78,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 - var(--header-height) * 4);
 }
 
 #header {
@@ -96,7 +96,7 @@
 		max-width: 350px;
 		@include header-menu-height();
 		right: 5px; // relative to parent
-		top: $header-height;
+		top: var(--header-height);
 		margin: 0;
 
 		&:not(.popovermenu) {
@@ -233,7 +233,7 @@
 				display: flex;
 				justify-content: center;
 				align-items: center;
-				width: $header-height;
+				width: var(--header-height);
 				height: 100%;
 				cursor: pointer;
 				opacity: 0.6;
@@ -304,9 +304,9 @@
 /* NAVIGATION --------------------------------------------------------------- */
 nav[role='navigation'] {
 	display: inline-block;
-	width: $header-height;
-	height: $header-height;
-	margin-left: -$header-height;
+	width: var(--header-height);
+	height: var(--header-height);
+	margin-left: -var(--header-height);
 	position: relative;
 }
 
@@ -428,7 +428,7 @@ nav[role='navigation'] {
 /* Apps menu */
 #appmenu {
 	display: inline-flex;
-	min-width: $header-height;
+	min-width: var(--header-height);
 	z-index: 2;
 
 	li {
@@ -442,8 +442,8 @@ nav[role='navigation'] {
 			position: relative;
 			display: flex;
 			margin: 0;
-			height: $header-height;
-			width: $header-height;
+			height: var(--header-height);
+			width: var(--header-height);
 			align-items: center;
 			justify-content: center;
 			opacity: .6;
@@ -655,7 +655,7 @@ nav[role='navigation'] {
 
 	&:focus,
 	&:active {
-		top: $header-height;
+		top: var(--header-height);
 	}
 }
 

core/css/icons.scss

@@ -36,7 +36,7 @@
 }
 
 .icon-breadcrumb {
-	background-image: url('../img/breadcrumb.svg?v=1');
+	background-image: url('../core/img/breadcrumb.svg?v=1');
 }
 
 /* LOADING ------------------------------------------------------------------ */

core/css/mobile.scss

@@ -64,7 +64,7 @@
 		#app-navigation-toggle-back {
 			position: fixed;
 			display: inline-block !important;
-			top: $header-height;
+			top: var(--header-height);
 			left: 0;
 			width: 44px;
 			height: 44px;

core/css/server.scss

@@ -1,3 +1,6 @@
+@import 'variables.scss';
+@import 'functions.scss';
+@import 'css-variables.scss';
 @import 'styles.scss';
 @import 'inputs.scss';
 @import 'header.scss';

core/css/styles.scss

@@ -179,7 +179,7 @@ body {
 
 #controls {
 	box-sizing: border-box;
-	@include position('sticky');
+	position: 'sticky';
 	height: 44px;
 	padding: 0;
 	margin: 0;
@@ -190,7 +190,7 @@ body {
 	-ms-user-select: none;
 	user-select: none;
 	display: flex;
-	top: $header-height;
+	top: var(--header-height);
 }
 
 /* position controls for apps with app-navigation */
@@ -1138,7 +1138,7 @@ span.ui-icon {
 }
 div.crumb {
 	display: inline-flex;
-	background-image: url('../img/breadcrumb.svg?v=1');
+	background-image: url('../core/img/breadcrumb.svg?v=1');
 	background-repeat: no-repeat;
 	background-position: right center;
 	height: 44px;

core/templates/layout.user.php

@@ -10,7 +10,7 @@
 		'size' => $size,
 		'v' => $_['userAvatarVersion']
 	]);
-}
+};
 
 ?><!DOCTYPE html>
 <html class="ng-csp" data-placeholder-focus="false" lang="<?php p($_['language']); ?>" data-locale="<?php p($_['locale']); ?>" >