chore: Put styles in separate files

frappe/public/build.json

@@ -111,9 +111,7 @@
 		"public/less/chat.less",
 		"public/less/filters.less",
 		"public/less/social.less",
-		"public/scss/website.scss",
-		"public/scss/global.scss",
-		"public/scss/new_ui.scss",
+		"public/scss/main.scss",
 		"node_modules/frappe-charts/dist/frappe-charts.min.css"
 	],
 	"css/frappe-rtl.css": [

frappe/public/scss/breadcrumb.scss

@@ -0,0 +1,5 @@
+.breadcrumb {
+	padding-left: 0;
+	padding-right: 0;
+	background-color: white;
+}

frappe/public/scss/form.scss

@@ -0,0 +1,17 @@
+.form-section {
+	margin-right: -45px;
+}
+
+.form-control {
+	border: none;
+	background-color: $control-bg;
+	color: $text-light;
+	box-shadow: none;
+	border-radius: $border-radius;
+}
+
+.form-section .section-body {
+	width: 100%;
+	padding: 15px;
+	@extend .row;
+}

frappe/public/scss/global.scss

@@ -1,4 +1,11 @@
 @import "variables";
+@import "~bootstrap/scss/mixins";
+@import "~bootstrap/scss/bootstrap-grid";
+@import "~bootstrap/scss/buttons";
+
+html {
+	height: 100%;
+}
 
 body {
 	font-family: Inter;
@@ -10,4 +17,86 @@ a {
 
 .hide {
 	display: none !important;
+}
+
+.col-xs-1 { @extend .col-1; }
+.col-xs-2 { @extend .col-2; }
+.col-xs-3 { @extend .col-3; }
+.col-xs-4 { @extend .col-4; }
+.col-xs-5 { @extend .col-5; }
+.col-xs-6 { @extend .col-6; }
+.col-xs-7 { @extend .col-7; }
+.col-xs-8 { @extend .col-8; }
+.col-xs-9 { @extend .col-9; }
+.col-xs-10 { @extend .col-10; }
+.col-xs-11 { @extend .col-11; }
+.col-xs-12 { @extend .col-12; }
+
+.btn-default { @extend .btn-light; }
+
+.btn-xs { @extend .btn-sm; }
+
+.hidden-xs {
+	@extend .d-none;
+	@extend .d-sm-block;
+}
+
+.visible-xs {
+	@extend .d-block;
+	@extend .d-sm-none;
+}
+
+footer {
+	flex-shrink: 0;
+}
+
+.pull-right {
+	float: right;
+}
+
+img {
+	max-width: 100%;
+}
+
+.hidden {
+	@extend .d-none;
+}
+
+.hide-control {
+	@extend .d-none;
+}
+
+.text-underline {
+	text-decoration: underline;
+}
+
+.text-extra-muted {
+	color: #d1d8dd !important;
+}
+
+.no-underline {
+	text-decoration: none !important;
+}
+
+.btn {
+	border: none;
+	border-radius: $border-radius;
+}
+
+.btn-secondary, .btn-default {
+	background-color: $control-bg;
+}
+
+.btn-primary {
+	background: $brand-gradient;
+}
+
+
+h1, h2, h3 {
+	color: $text-color;
+	font-weight: bold;
+}
+
+h1 {
+	font-size: 20px;
 }

frappe/public/scss/indicator.scss

@@ -0,0 +1,3 @@
+.indicator {
+	font-size: inherit;
+}

frappe/public/scss/main.scss

@@ -0,0 +1,15 @@
+@import "variables";
+
+@import "~bootstrap/scss/bootstrap";
+@import "global";
+@import "form";
+@import "list";
+@import "navbar";
+@import "modal";
+@import "breadcrumb";
+@import "indicator";
+@import "page";
+
+@import "frappe/public/css/font-awesome";
+@import "multilevel-dropdown";
+@import "website-image";

frappe/public/scss/modal.scss

@@ -0,0 +1,7 @@
+h4.modal-title {
+	font-size: 1em;
+}
+
+h5.modal-title {
+	margin: 0px !important;
+}

frappe/public/scss/navbar.scss

@@ -0,0 +1,42 @@
+.navbar {
+	padding-left: 0;
+	padding-right: 0;
+
+	background: white;
+	box-shadow: $box-shadow;
+
+	.container {
+		padding-left: 15px;
+		padding-right: 15px;
+	}
+}
+
+.navbar.bg-dark {
+	.dropdown-menu {
+		font-size: .75rem;
+		background-color: $dark;
+		border-radius: 0;
+	}
+
+	.nav-link {
+		white-space: nowrap;
+		color: $light;
+
+		&:hover {
+			color: $primary;
+		}
+	}
+
+	.nav-item {
+		padding: 0rem 1rem;
+	}
+
+	.dropdown-item {
+		color: $light;
+
+		&:hover {
+			background-color: $dark;
+			color: $primary;
+		}
+	}
+}

frappe/public/scss/new_ui.scss

@@ -1,40 +0,0 @@
-@import "variables";
-
-a {
-	color: $text-color;
-}
-
-.btn {
-	border: none;
-	border-radius: $border-radius;
-}
-
-.btn-secondary, .btn-default {
-	background-color: $control-bg;
-}
-
-.btn-primary {
-	background: $brand-gradient;
-}
-
-.form-control {
-	border: none;
-	background-color: $control-bg;
-	color: $text-light;
-	box-shadow: none;
-	border-radius: $border-radius;
-}
-
-.navbar {
-	background: white;
-	box-shadow: $box-shadow;
-}
-
-h1, h2, h3 {
-	color: $text-color;
-	font-weight: bold;
-}
-
-h1 {
-	font-size: 20px;
-}

frappe/public/scss/variables.scss

@@ -124,10 +124,15 @@ $border-radius: var(--border-radius);
 $text-color: $gray-900;
 $body-color: $gray-800;
 
+$container-max-widths: (
+  sm: 540px,
+  md: 840px,
+  lg: 1090px,
+  xl: 1290px
+);
+
 $brand-gradient: linear-gradient(180deg, #2C9AF1 0%, var(--blue-500) 100%);
 
 $box-shadow: inset 0px -1px 0px var(--grey-2-100);
 $font-size-base: 0.8rem;
-$font-family-base: Inter;
-
-@import "~bootstrap/scss/bootstrap";
+$font-family-base: Inter;

frappe/public/scss/website.scss

@@ -1,105 +1,14 @@
 @import "variables";
-@import "frappe/public/css/font-awesome";
 @import "~bootstrap/scss/bootstrap";
-@import "multilevel-dropdown";
-@import "website-image";
-
-html {
-  height: 100%;
-}
-
-body {
-	min-height: 100%;
-	display: flex;
-	flex-direction: column;
-
-	> div {
-		flex: 1 0 auto;
-	}
-}
 
 footer {
 	flex-shrink: 0;
 }
 
-// make navbar padding consistent with the page
-.navbar {
-	padding-left: 0;
-	padding-right: 0;
-
-	.container {
-		padding-left: 15px;
-		padding-right: 15px;
-	}
-}
-
-.navbar.bg-dark {
-	.dropdown-menu {
-		font-size: .75rem;
-		background-color: $dark;
-		border-radius: 0;
-	}
-
-	.nav-link {
-		white-space: nowrap;
-		color: $light;
-
-		&:hover {
-			color: $primary;
-		}
-	}
-
-	.nav-item {
-		padding: 0rem 1rem;
-	}
-
-	.dropdown-item {
-		color: $light;
-
-		&:hover {
-			background-color: $dark;
-			color: $primary;
-		}
-	}
-}
-
-
-.input-dark {
-	background-color: $dark;
-	border-color: $border-color;
-	color: $light;
-}
-
-.breadcrumb {
-    padding-left: 0;
-    padding-right: 0;
-    background-color: white;
-}
-
 a.card {
 	text-decoration: none;
 }
 
-img {
-	max-width: 100%;
-}
-
-.hidden {
-	@extend .d-none;
-}
-
-.hide-control {
-    @extend .d-none;
-}
-
-.text-underline {
-	text-decoration: underline;
-}
-
-.text-extra-muted {
-	color: #d1d8dd !important;
-}
-
 .web-footer {
 	padding: 5rem 0;
 	min-height: 140px;
@@ -112,61 +21,4 @@ img {
 
 .footer-parent-item {
 	margin-bottom: 1rem;
-}
-
-.no-underline {
-    text-decoration: none !important;
-}
-
-.indicator {
-    font-size: inherit;
-}
-
-h4.modal-title {
-  font-size: 1em;
-}
-
-h5.modal-title {
-  margin: 0px !important;
-}
-
-.col-xs-1 { @extend .col-1; }
-.col-xs-2 { @extend .col-2; }
-.col-xs-3 { @extend .col-3; }
-.col-xs-4 { @extend .col-4; }
-.col-xs-5 { @extend .col-5; }
-.col-xs-6 { @extend .col-6; }
-.col-xs-7 { @extend .col-7; }
-.col-xs-8 { @extend .col-8; }
-.col-xs-9 { @extend .col-9; }
-.col-xs-10 { @extend .col-10; }
-.col-xs-11 { @extend .col-11; }
-.col-xs-12 { @extend .col-12; }
-
-.btn-default { @extend .btn-light; }
-
-.btn-xs { @extend .btn-sm; }
-
-.hidden-xs {
-	@extend .d-none;
-	@extend .d-sm-block;
-}
-
-.visible-xs {
-	@extend .d-block;
-	@extend .d-sm-none;
-}
-
-.form-section {
-	margin-right: -45px;
-}
-
-.form-section .section-body {
-	width: 100%;
-	padding: 15px;
-	@extend .row;
-}
-
-.pull-right {
-	float: right;
-}
+}