fix: Modal design for website (#12474)

frappe/public/scss/common/global.scss

@@ -138,3 +138,34 @@ html.firefox, html.safari {
 	-webkit-transform: translate(-50%, -50%);
 }
 
+.hide {
+	display: none !important;
+}
+
+.btn-link {
+	box-shadow: none !important;
+	outline: none;
+	.icon, &:hover {
+		text-decoration: none !important;
+	}
+}
+
+.hidden {
+	@extend .d-none;
+}
+
+.margin {
+	margin: var(--margin-sm);
+}
+.margin-top {
+	margin-top: var(--margin-sm);
+}
+.margin-bottom {
+	margin-bottom: var(--margin-sm);
+}
+.margin-left {
+	margin-left: var(--margin-sm);
+}
+.margin-right {
+	margin-right: var(--margin-sm);
+}

frappe/public/scss/desk/global.scss

@@ -105,10 +105,6 @@ pre {
 	color: var(--text-light)
 }
 
-.hide {
-	display: none !important;
-}
-
 .col-xs-1 { @extend .col-1; }
 .col-xs-2 { @extend .col-2; }
 .col-xs-3 { @extend .col-3; }
@@ -150,23 +146,6 @@ footer {
 	float: right;
 }
 
-// .border-${position} {
-// 	.border-{$position} {
-// 		border-{$position}: 1px solid var(--border-color);
-// 	}
-// }
-// .border-#{$position} {
-// 	.border-#{$position} {
-// 		border-#{$position}: 1px solid var(--border-color);
-// 	}
-// }
-
-// @include border-(top);
-// @include border-(bottom);
-// @include border-(left);
-// @include border-(right);
-
-
 img {
 	max-width: 100%;
 	height: auto;
@@ -191,9 +170,6 @@ img {
 	}
 }
 
-.hidden {
-	@extend .d-none;
-}
 
 .hide-control {
 	@extend .d-none;
@@ -224,10 +200,6 @@ p {
 	font-size: var(--text-sm);
 }
 
-.fill-width {
-	flex: 1
-}
-
 h1 {
 	font-size: $font-size-3xl;
 	font-weight: 800;
@@ -386,31 +358,6 @@ kbd {
 	cursor: default;
 }
 
-.btn-link {
-	box-shadow: none !important;
-	outline: none;
-	.icon, &:hover {
-		text-decoration: none !important;
-	}
-}
-
-
-.margin {
-	margin: var(--margin-sm);
-}
-.margin-top {
-	margin-top: var(--margin-sm);
-}
-.margin-bottom {
-	margin-bottom: var(--margin-sm);
-}
-.margin-left {
-	margin-left: var(--margin-sm);
-}
-.margin-right {
-	margin-right: var(--margin-sm);
-}
-
 .standard-sidebar {
 	font-size: var(--text-base);
 

frappe/public/scss/website/index.scss

@@ -2,13 +2,14 @@
 @import 'variables';
 @import 'css_variables';
 @import '~bootstrap/scss/bootstrap';
-@import "../common/mixins.scss";
-@import "../common/global.scss";
-@import "../common/icons.scss";
+@import "../common/mixins";
+@import "../common/global";
+@import "../common/icons";
 @import 'base';
 @import "../common/buttons";
 @import "../common/modal";
-@import "../common/indicator.scss";
+@import "../common/indicator";
+@import "../common/flex";
 @import 'multilevel_dropdown';
 @import 'website_image';
 @import 'website_avatar';
@@ -239,4 +240,4 @@ h5.modal-title {
 }
 .about-footer {
 	padding-top: 1rem;
-}
+}

frappe/public/scss/website/variables.scss

@@ -47,6 +47,10 @@ $font-sizes: (
 	}
 }
 
+$border-radius: var(--border-radius);
+$border-radius-sm: var(--border-radius-sm);
+$border-radius-lg: var(--border-radius-lg);
+
 $font-size-xs: 0.75rem !default;
 $font-size-sm: 0.875rem !default;
 $font-size-base: 1rem !default;