refactor: Re-organize scss

Co-Authored-By: Shivam Mishra <scm.mymail@gmail.com>
Co-Authored-By: Faris Ansari <netchamp.faris@gmail.com>
Co-Authored-By: Prssanna Desai <prssud@gmail.com>

frappe/public/scss/desk.scss

@@ -0,0 +1 @@
+@import './desk/index';

frappe/public/scss/desk/calendar.scss

@@ -117,7 +117,7 @@ th.fc-day-header {
 
 .fc button {
 	height: 28px !important;
-	font-size: $font-size-md !important;
+	font-size: var(--text-md) !important;
 	outline: none !important;
 	text-transform: capitalize;
 	// .fc-icon {

frappe/public/scss/desk/form.scss

@@ -68,7 +68,7 @@
 
 		.section-head {
 			padding: 0;
-			font-size: $font-size-md;
+			font-size: var(--text-md);
 
 			&:not(.collapsed) {
 				padding-bottom: var(--padding-sm);

frappe/public/scss/desk/global.scss

@@ -264,7 +264,7 @@ select.input-xs {
 .dropdown-menu {
 	min-width: 200px;
 	padding: 4px;
-	font-size: $font-size-md;
+	font-size: var(--text-md);
 	max-height: 500px;
 	overflow: auto;
 	color: $text-color;
@@ -318,7 +318,6 @@ input[type="checkbox"] {
 		box-sizing: border-box;
 		box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
 		border-radius: 4px;
-		background: var(--fg-color);
 	}
 
 	&:checked:before {

frappe/public/scss/desk/image-view.scss

@@ -11,7 +11,7 @@
 		}
 
 		.list-count {
-			font-size: $font-size-md;
+			font-size: var(--text-md);
 			margin: 0;
 		}
 

frappe/public/scss/desk/index.scss

@@ -32,8 +32,4 @@
 @import "controls";
 @import "role_editor";
 @import "user-profile";
-@import "quill";
-
-@import "frappe/public/css/font-awesome";
-@import "multilevel-dropdown";
-@import "website-image";
+@import "quill";

frappe/public/scss/desk/navbar.scss

@@ -91,4 +91,4 @@
 		padding: 0rem 1rem;
 		@extend .my-auto;
 	}
-}
+}

frappe/public/scss/desk/report.scss

@@ -102,12 +102,12 @@
 
 .comparison-message {
 	margin-left: var(--margin-sm);
-	font-size: $font-size-md;
+	font-size: var(--text-md);
 }
 
 .list-count {
 	margin-right: var(--margin-sm);
-	font-size: $font-size-md;
+	font-size: var(--text-md);
 }
 
 .group-by-popover {

frappe/public/scss/desk/sidebar.scss

@@ -431,59 +431,6 @@ body[data-route^="Module"] .main-menu {
 	}
 }
 
-.web-sidebar {
-	padding-top: 2rem;
-	position: sticky;
-	top: 0;
-}
-
-.sidebar-item a {
-	display: block;
-	padding: 0.25rem 0.5rem;
-	margin-top: 0.25rem;
-	border-radius: 0.375rem;
-	font-size: $font-size-sm;
-	color: $gray-600;
-	text-decoration: none;
-	font-weight: 500;
-	@include transition();
-
-	&:hover {
-		color: $gray-900;
-	}
-}
-
-// Remove top margin from first child
-.sidebar-item:first-child a {
-	margin-top: 0rem;
-}
-
-.sidebar-item a.active {
-	color: $primary;
-	background-color: $primary-light;
-}
-
-.sidebar-item-icon {
-	width: 24px;
-	height: 24px;
-	display: inline-block;
-}
-
-.sidebar-group {
-	margin-bottom: 1rem;
-
-	h6 {
-		font-size: $font-size-sm;
-		margin-bottom: 0.75rem;
-		line-height: 1.5;
-	}
-
-	> ul {
-		padding-left: 0.5rem;
-		margin-bottom: 2rem;
-	}
-}
-
 .tags-input {
 	margin-bottom: var(--margin-sm);
 	font-size: var(--text-md);

frappe/public/scss/desk/tree.scss

@@ -26,7 +26,7 @@
 	padding-left: var(--padding-xl);
 
 	.tree-link {
-		font-size: $font-size-md;
+		font-size: var(--text-md);
 		font-weight: normal;
 	}
 }
@@ -119,7 +119,7 @@
 
 .balance-area {
 	color: var(--text-color) !important;
-	font-size: $font-size-md;
+	font-size: var(--text-md);
 	padding: var(--padding-sm);
 }
 

frappe/public/scss/desk/variables.scss

@@ -206,7 +206,7 @@ $card-box-shadow: 0px 0px 1px rgba(17, 43, 66, 0.16), 0px 1px 3px rgba(17, 43, 6
 }
 
 html, body {
-	font-size: 14px;
+	font-size: 16px;
 }
 
 $border-color: var(--border-color);
@@ -291,12 +291,12 @@ $dropdown-item-padding-x: var(--padding-sm);
 
 $spacer: 14px;
 $grid-breakpoints: (
-	xs: 0,
-	sm: 576px,
-	md: 768px,
-	lg: 992px,
-	xl: 1200px,
-	2xl: 1440px
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px,
+  2xl: 1440px
 ) !default;
 
 @import 'dark';

frappe/public/scss/print.scss

@@ -1 +1,2 @@
-@import 'quill';
+@import '~bootstrap/scss/bootstrap';
+@import './desk/quill';

frappe/public/scss/website.scss

@@ -1,238 +1 @@
-@import "variables";
-@import "mixins";
-@import '~quill/dist/quill.core';
-@import 'variables';
-@import 'css_variables';
-@import 'frappe/public/css/font-awesome';
-@import "~bootstrap/scss/bootstrap";
-@import 'multilevel-dropdown';
-@import 'website-image';
-@import 'page-builder';
-@import 'blog';
-@import 'markdown';
-@import "global";
-@import 'sidebar';
-@import 'portal';
-@import 'search';
-@import 'doc';
-@import 'navbar';
-@import 'footer';
-@import 'login';
-
-.ql-editor.read-mode {
-	padding: 0;
-	line-height: 1.6;
-
-	h1,
-	h2,
-	h3,
-	h4,
-	h5 {
-		margin-top: 0.5em;
-		margin-bottom: 0.25em;
-	}
-}
-
-.container {
-	padding-left: 1.25rem;
-	padding-right: 1.25rem;
-}
-
-@include media-breakpoint-up(sm) {
-	.container {
-		padding-left: 0;
-		padding-right: 0;
-	}
-}
-
-@include media-breakpoint-up(lg) {
-	.container {
-		padding-left: 2.5rem;
-		padding-right: 2.5rem;
-	}
-}
-
-@include media-breakpoint-up(xl) {
-	.container {
-		padding-left: 5rem;
-		padding-right: 5rem;
-	}
-}
-
-@include media-breakpoint-up(2xl) {
-	.container {
-		padding-left: 1.5rem;
-		padding-right: 1.5rem;
-	}
-}
-
-.dropdown-menu {
-	padding: 0.25rem;
-}
-
-.dropdown-item {
-	border-radius: $dropdown-border-radius;
-}
-
-.input-dark {
-	background-color: $dark;
-	border-color: darken($primary, 40%);
-	color: $light;
-}
-
-.main-column .page-content-wrapper {
-	margin: 2rem 0;
-}
-
-.breadcrumb-container {
-	margin-top: 1rem;
-	padding-top:  0.25rem;
-}
-
-.breadcrumb {
-	padding: 0;
-	font-size: $font-size-sm;
-	background-color: white;
-}
-
-a.card {
-	text-decoration: none;
-}
-
-.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;
-}
-
-.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;
-}
-
-.image-with-blur {
-	transition: filter 300ms ease-in-out;
-	filter: blur(1.5rem);
-}
-
-.image-loaded {
-	filter: blur(0rem);
-}
-
-.embed-container {
-	position: relative;
-	padding-bottom: 56.25%;
-	height: 0;
-	overflow: hidden;
-	max-width: 100%;
-}
-
-.embed-container iframe {
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-}
-
-.ellipsis {
-	overflow: hidden;
-	white-space: nowrap;
-	text-overflow: ellipsis;
-}
-.about-section {
-	padding-top: 1rem;
-}
-.about-footer {
-	padding-top: 1rem;
-}
+@import './website/index';

frappe/public/scss/website/index.scss

@@ -0,0 +1,251 @@
+@import '~quill/dist/quill.core';
+@import 'variables';
+@import 'css_variables';
+@import '~bootstrap/scss/bootstrap';
+@import 'base';
+@import 'multilevel-dropdown';
+@import 'website-image';
+@import 'page-builder';
+@import 'blog';
+@import 'markdown';
+@import 'sidebar';
+@import 'portal';
+@import 'search';
+@import 'doc';
+@import 'navbar';
+@import 'footer';
+@import 'login';
+
+.ql-editor.read-mode {
+	padding: 0;
+	line-height: 1.6;
+
+	h1,
+	h2,
+	h3,
+	h4,
+	h5 {
+		margin-top: 0.5em;
+		margin-bottom: 0.25em;
+	}
+}
+
+.container {
+	padding-left: 1.25rem;
+	padding-right: 1.25rem;
+}
+
+@include media-breakpoint-up(sm) {
+	.container {
+		padding-left: 0;
+		padding-right: 0;
+	}
+}
+
+@include media-breakpoint-up(lg) {
+	.container {
+		padding-left: 2.5rem;
+		padding-right: 2.5rem;
+	}
+}
+
+@include media-breakpoint-up(xl) {
+	.container {
+		padding-left: 5rem;
+		padding-right: 5rem;
+	}
+}
+
+@include media-breakpoint-up(2xl) {
+	.container {
+		padding-left: 1.5rem;
+		padding-right: 1.5rem;
+	}
+}
+
+.dropdown-menu {
+	padding: 0.25rem;
+}
+
+.dropdown-item {
+	border-radius: $dropdown-border-radius;
+}
+
+.input-dark {
+	background-color: $dark;
+	border-color: darken($primary, 40%);
+	color: $light;
+}
+
+.main-column .page-content-wrapper {
+	margin: 2rem 0;
+}
+
+.breadcrumb-container {
+	margin-top: 1rem;
+	padding-top:  0.25rem;
+}
+
+.breadcrumb {
+	padding: 0;
+	font-size: $font-size-sm;
+	background-color: white;
+}
+
+a.card {
+	text-decoration: none;
+}
+
+.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;
+}
+
+.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;
+}
+
+.btn-primary-light {
+	@include button-variant(
+		$background: $primary-light,
+		$border: $primary-light,
+		$hover-background: lighten($primary-light, 1%),
+		$hover-border: $primary-light,
+		$active-background: lighten($primary-light, 1%),
+		$active-border: darken($primary-light, 12.5%)
+	);
+
+	color: darken($primary, 5%);
+	&:hover {
+		color: darken($primary, 5%);
+	}
+}
+
+.image-with-blur {
+	transition: filter 300ms ease-in-out;
+	filter: blur(1.5rem);
+}
+
+.image-loaded {
+	filter: blur(0rem);
+}
+
+.embed-container {
+	position: relative;
+	padding-bottom: 56.25%;
+	height: 0;
+	overflow: hidden;
+	max-width: 100%;
+}
+
+.embed-container iframe {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+}
+
+.ellipsis {
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}
+.about-section {
+	padding-top: 1rem;
+}
+.about-footer {
+	padding-top: 1rem;
+}

frappe/public/scss/website/multilevel-dropdown.scss

@@ -9,7 +9,7 @@
 	top: .8em;
 }
 
-.dropdown-submenu {
+.dropdown-submenu .dropdown-menu {
 	top: 0;
 	left: 100%;
 	margin-left: .1rem;

frappe/public/scss/website/navbar.scss

@@ -0,0 +1,59 @@
+.navbar-light {
+	border-bottom: 1px solid $border-color;
+}
+
+.navbar-brand {
+	img {
+		display: inline-block;
+		max-width: 150px;
+		max-height: 25px;
+	}
+}
+
+.navbar-cta {
+	@include media-breakpoint-up(lg) {
+		margin-left: 1rem;
+	}
+}
+
+
+.navbar.bg-dark {
+	.dropdown-menu {
+		font-size: 0.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;
+		}
+	}
+}
+
+.navbar-light .navbar-nav .nav-link {
+	color: $gray-700;
+	font-size: $font-size-sm;
+	font-weight: 500;
+
+	&:hover,
+	&:focus, &.active {
+		color: $primary;
+	}
+}

frappe/public/scss/website/sidebar.scss

@@ -0,0 +1,52 @@
+.web-sidebar {
+	padding-top: 2rem;
+	position: sticky;
+	top: 0;
+}
+
+.sidebar-item a {
+	display: block;
+	padding: 0.25rem 0.5rem;
+	margin-top: 0.25rem;
+	border-radius: 0.375rem;
+	font-size: $font-size-sm;
+	color: $gray-600;
+	text-decoration: none;
+	font-weight: 500;
+	@include transition();
+
+	&:hover {
+		color: $gray-900;
+	}
+}
+
+// Remove top margin from frist child
+.sidebar-item:first-child a {
+	margin-top: 0rem;
+}
+
+.sidebar-item a.active {
+	color: $primary;
+	background-color: $primary-light;
+}
+
+.sidebar-item-icon {
+	width: 24px;
+	height: 24px;
+	display: inline-block;
+}
+
+.sidebar-group {
+	margin-bottom: 1rem;
+
+	h6 {
+		font-size: $font-size-sm;
+		margin-bottom: 0.75rem;
+		line-height: 1.5;
+	}
+
+	> ul {
+		padding-left: 0.5rem;
+		margin-bottom: 2rem;
+	}
+}

frappe/public/scss/website/variables.scss

@@ -0,0 +1,122 @@
+$gray-50: #F9FAFA !default;
+$gray-100: #F4F5F6 !default;
+$gray-200: #EEF0F2 !default;
+$gray-300: #E2E6E9 !default;
+$gray-400: #C8CFD5 !default;
+$gray-500: #A6B1B9 !default;
+$gray-600: #74808B !default;
+$gray-700: #4C5A67 !default;
+$gray-800: #313B44 !default;
+$gray-900: #192734 !default;
+
+$black: #000 !default;
+$primary: #2490ef !default;
+$primary-light: lighten($primary, 42%) !default;
+$light: $gray-50 !default;
+
+$body-color: $gray-700 !default;
+$text-muted: $gray-600 !default;
+$border-color: $gray-300 !default;
+$headings-color: $gray-900 !default;
+
+$font-sizes: (
+	"xs": 0.75rem,
+	"sm": 0.875rem,
+	"base": 1rem,
+	"lg": 1.125rem,
+	"xl": 1.25rem,
+	"2xl": 1.5rem,
+	"3xl": 1.875rem,
+	"4xl": 2.25rem,
+	"5xl": 3rem,
+	"6xl": 4rem
+);
+
+@each $size, $value in $font-sizes {
+	.font-size-#{$size} {
+		font-size: $value;
+	}
+}
+
+$font-size-xs: 0.75rem !default;
+$font-size-sm: 0.875rem !default;
+$font-size-base: 1rem !default;
+$font-size-lg: 1.125rem !default;
+$font-size-xl: 1.25rem !default;
+$font-size-2xl: 1.5rem !default;
+$font-size-3xl: 1.875rem !default;
+$font-size-4xl: 2.25rem !default;
+$font-size-5xl: 3rem !default;
+$font-size-6xl: 4rem !default;
+
+$btn-padding-y-lg: 1rem !default;
+$btn-padding-x-lg: 2.5rem !default;
+$btn-font-size-lg: 1.125rem !default;
+$btn-line-height-lg: 1 !default;
+$btn-border-radius-lg: 0.5rem !default;
+$btn-border-radius: 0.375rem !default;
+$btn-font-size: $font-size-sm !default;
+$btn-padding-x: 1rem !default;
+$btn-padding-y: 0.5rem !default;
+$btn-font-weight: 500 !default;
+
+$navbar-nav-link-padding-x: 1rem !default;
+$navbar-padding-y: 1rem !default;
+$card-border-radius: 0.75rem !default;
+$card-spacer-y: 0.5rem !default;
+
+$dropdown-font-size: $font-size-sm !default;
+$dropdown-border-radius: 0.375rem !default;
+$dropdown-item-padding-y: 0.5rem !default;
+$dropdown-item-padding-x: 0.5rem !default;
+
+$input-bg: $gray-100;
+$input-focus-bg: $gray-200;
+$input-focus-box-shadow: none;
+$input-border-color: $gray-100;
+$input-focus-border-color: $gray-200;
+$input-border-radius: 0.375rem;
+$custom-control-indicator-bg: white;
+
+$grid-breakpoints: (
+	xs: 0,
+	sm: 576px,
+	md: 768px,
+	lg: 992px,
+	xl: 1200px,
+	2xl: 1440px
+) !default;
+
+$spacers: (
+	0: 0,
+	1: 0.25rem,
+	2: 0.5rem,
+	3: 0.75rem,
+	4: 1rem,
+	5: 1.25rem,
+	6: 1.5rem,
+	8: 2rem,
+	10: 2.5rem,
+	12: 3rem,
+	14: 3.5rem,
+	16: 4rem,
+	18: 4.5rem,
+	20: 5rem,
+	22: 5.5rem,
+	24: 6rem,
+	28: 7rem,
+	32: 8rem,
+	36: 9rem,
+	40: 10rem,
+	44: 11rem,
+	48: 12rem,
+	52: 13rem,
+	56: 14rem,
+	64: 16rem
+);
+
+@import "~bootstrap/scss/functions";
+@import "~bootstrap/scss/variables";
+@import "~bootstrap/scss/mixins";
+
+$code-color: $purple;

frappe/public/scss/website/website-image.scss

@@ -1,3 +1,5 @@
+@import "variables";
+
 img {
 	position: relative;
 }
@@ -24,6 +26,8 @@ img:after {
 	justify-content: center;
 	border-radius: $border-radius;
 	border: 1px solid $border-color;
+	width: 1.5rem;
+	height: 1.5rem;
 }
 
 .website-image-placeholder {

package.json

@@ -67,6 +67,7 @@
     "rollup-plugin-postcss": "^2.0.3",
     "rollup-plugin-terser": "^4.0.4",
     "rollup-plugin-vue": "4.2.0",
+    "svg-sprite": "^1.5.0",
     "vue-template-compiler": "^2.6.11"
   },
   "snyk": true