From f50f5893407c29ae3c6d53e5c09991a14e56ad29 Mon Sep 17 00:00:00 2001
From: Tony Air <tony@thewebdevelopmentagency.com>
Date: Mon, 20 Jul 2020 14:15:57 +0700
Subject: [PATCH] IMPR: minor improvements and updates

---
 package.json                              |   2 +-
 src/js/_components/_ui.form.basics.js     |   2 +-
 src/scss/_components/_ui.form.basics.scss | 321 +++++++++++-----------
 src/scss/_components/_ui.main.scss        |  24 +-
 src/scss/types/cms.scss                   |  67 +++++
 5 files changed, 253 insertions(+), 163 deletions(-)

diff --git a/package.json b/package.json
index f9056a2..cb5f5a5 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@a2nt/ss-bootstrap-ui-webpack-boilerplate",
-	"version": "2.3.1",
+	"version": "2.3.2",
 	"author": "Tony Air <tony@twma.pro>",
 	"license": "MIT",
 	"description": "This UI Kit allows you to build Bootstrap 4 webapp with some extra UI features. It's easy to extend and easy to convert HTML templates to CMS templates.",
diff --git a/src/js/_components/_ui.form.basics.js b/src/js/_components/_ui.form.basics.js
index e4e4989..e8a0970 100755
--- a/src/js/_components/_ui.form.basics.js
+++ b/src/js/_components/_ui.form.basics.js
@@ -42,7 +42,6 @@ const FormBasics = (($) => {
       const $selectFields = $el
         .find('select:not([readonly])')
         .not('.no-select2');
-      const $radioOptions = $el.find('input[type="radio"]');
 
       $selectFields.each((i, el) => {
         $(el).select2();
@@ -56,6 +55,7 @@ const FormBasics = (($) => {
         }
       });
 
+      const $radioOptions = $el.find('input[type="radio"]');
       $radioOptions.each((e, el) => {
         const $el = $(el);
 
diff --git a/src/scss/_components/_ui.form.basics.scss b/src/scss/_components/_ui.form.basics.scss
index 5a3bf8a..30c5d75 100755
--- a/src/scss/_components/_ui.form.basics.scss
+++ b/src/scss/_components/_ui.form.basics.scss
@@ -1,227 +1,228 @@
+@import '~select2/dist/css/select2.css';
+
 legend {
-    @extend h2;
+	@extend h2;
 }
 
 // date-time fields
 input.date,
 input.time {
-    &[readonly] {
-        background-color: $white;
-    }
+	&[readonly] {
+		background-color: $white;
+	}
 }
 
 input.checkbox {
-    margin-right: 0.5em;
+	margin-right: 0.5em;
 }
 
 /*
  * Basic class definition at _ui.main.scss
  */
 .field {
-    &.collapse {
-        display: none;
-        &.show {
-            display: flex;
-        }
-    }
+	&.collapse {
+		display: none;
+		&.show {
+			display: flex;
+		}
+	}
 
-    &.composite {
-        display: block;
-        margin-top: 0;
-        margin-bottom: 0;
-        &.row {
-            display: flex;
-        }
-        &.collapse {
-            display: none;
-            &.show {
-                display: block;
-                &.row {
-                    display: flex;
-                }
-            }
-        }
-    }
+	&.CompositeField,
+	&.composite {
+		flex-direction: column;
+		margin-top: 0;
+		margin-bottom: 0;
+		&.row {
+			 flex-direction: row;
+		}
+	}
 
-    &.required {
-        &:after {
-            display: block;
-            position: absolute;
-            top: 2rem;
-            right: 0.5rem;
-            content: '*';
-            color: $red;
-            z-index: 2;
-        }
-    }
+	&.required {
+		&:after {
+			display: block;
+			position: absolute;
+			top: 2rem;
+			right: 0.5rem;
+			content: '*';
+			color: $red;
+			z-index: 2;
+		}
+	}
 
-    &.holder-error,
-    &.error {
-        input,
-        select,
-        textarea {
-            border-color: $red;
-        }
+	&.holder-error,
+	&.error {
+		input,
+		select,
+		textarea {
+			border-color: $red;
+		}
 
-        label {
-            color: $red;
-        }
-    }
+		label {
+			color: $red;
+		}
+	}
 
-    .left {
-        flex: 1 1 20%;
-    }
+	.left {
+		flex: 1 1 20%;
+	}
 
-    .middleColumn {
-        flex: 1 1 auto;
-    }
+	.middleColumn {
+		flex: 1 1 auto;
+	}
 
-    .right {
-    }
+	.right {
+	}
 
-    .message,
-    .alert {
-        margin: 1rem 0;
-        display: block;
-        width: 100%;
-        max-width: 100%;
-    }
+	.message,
+	.alert {
+		margin: 1rem 0;
+		display: block;
+		width: 100%;
+		max-width: 100%;
+	}
 
-    .bootstrap-select:not([class*='col-']):not([class*='form-control']):not(.input-group-btn) {
-        width: 100%;
-        max-width: 100%;
-    }
+	.bootstrap-select:not([class*='col-']):not([class*='form-control']):not(.input-group-btn) {
+		width: 100%;
+		max-width: 100%;
+	}
 }
 
 .checkbox-list {
-    display: flex;
-    flex-wrap: wrap;
-    .field {
-        margin: 0.5rem !important;
-        min-width: 25%;
-        .right {
-            margin: 0;
-            padding: 0;
-        }
-    }
+	display: flex;
+	flex-wrap: wrap;
+	.field {
+		margin: 0.5rem !important;
+		min-width: 25%;
+		.right {
+			margin: 0;
+			padding: 0;
+		}
+	}
 }
 
 .bootstrap-timepicker-widget,
 .datepicker-dropdown {
-    border: 1px solid #ced4da;
-    box-shadow: 0 0 3px #999;
+	border: 1px solid #ced4da;
+	box-shadow: 0 0 3px #999;
 }
 
 .bootstrap-timepicker-widget {
-    .glyphicon {
-        -moz-osx-font-smoothing: grayscale;
-        -webkit-font-smoothing: antialiased;
-        display: inline-block;
-        font-style: normal;
-        font-variant: normal;
-        text-rendering: auto;
-        line-height: 1;
-        font-family: Font awesome\5 Free;
-        font-weight: 900;
-    }
+	.glyphicon {
+		-moz-osx-font-smoothing: grayscale;
+		-webkit-font-smoothing: antialiased;
+		display: inline-block;
+		font-style: normal;
+		font-variant: normal;
+		text-rendering: auto;
+		line-height: 1;
+		font-family: Font awesome\5 Free;
+		font-weight: 900;
+	}
 
-    .glyphicon-chevron-up:before {
-        content: '\f077';
-    }
+	.glyphicon-chevron-up:before {
+		content: '\f077';
+	}
 
-    .glyphicon-chevron-down:before {
-        content: '\f078';
-    }
+	.glyphicon-chevron-down:before {
+		content: '\f078';
+	}
 
-    input {
-        border: 1px solid #ced4da;
-    }
+	input {
+		border: 1px solid #ced4da;
+	}
 }
 
 .form-inline {
-    margin-top: -1rem;
+	position: relative;
+	margin: 2rem 0;
+	.field {
+		margin: 0;
+	}
 
-    fieldset {
-        margin-top: 1rem;
-    }
+	fieldset {
+		margin-top: 1rem;
+	}
 
-    .form-control {
-        width: 100%;
-    }
+	.form-control {
+		width: 100%;
+	}
 }
 
 // select2 dropdowns bootstrap4 styling
+body > .select2-container {
+	position: fixed !important;
+}
 .select2-container {
-    display: block;
-    width: 100% !important;
+	display: block;
+	width: 100% !important;
 }
 
 .select2-container--default {
-    &.select2-container--focus {
-        .select2-selection {
-            color: $input-focus-color;
-            background-color: $input-focus-bg;
-            border-color: $input-focus-border-color;
-            outline: 0;
+	&.select2-container--focus {
+		.select2-selection {
+			color: $input-focus-color;
+			background-color: $input-focus-bg;
+			border-color: $input-focus-border-color;
+			outline: 0;
 
-            // Avoid using mixin so we can pass custom focus shadow properly
-            @if $enable-shadows {
-                box-shadow: $input-box-shadow, $input-focus-box-shadow;
-            } @else {
-                box-shadow: $input-focus-box-shadow;
-            }
+			// Avoid using mixin so we can pass custom focus shadow properly
+			@if $enable-shadows {
+				box-shadow: $input-box-shadow, $input-focus-box-shadow;
+			} @else {
+				box-shadow: $input-focus-box-shadow;
+			}
 
-            &.select2-selection--single {
-            }
+			&.select2-selection--single {
+			}
 
-            &.select2-selection--multiple {
-            }
-        }
-    }
+			&.select2-selection--multiple {
+			}
+		}
+	}
 
-    .select2-selection {
-        @extend .form-control;
+	.select2-selection {
+		@extend .form-control;
 
-        .select2-selection__rendered {
-            line-height: inherit;
-        }
+		.select2-selection__rendered {
+			line-height: inherit;
+		}
 
-        &.select2-selection--single {
-        }
+		&.select2-selection--single {
+		}
 
-        &.select2-selection--multiple {
-            padding-top: 0;
-            padding-bottom: 0;
+		&.select2-selection--multiple {
+			padding-top: 0;
+			padding-bottom: 0;
 
-            .select2-selection__choice {
-                @extend .badge;
+			.select2-selection__choice {
+				@extend .badge;
 
-                @extend .badge-primary;
+				@extend .badge-primary;
 
-                padding: $input-padding-y $input-padding-x;
-                border: 0;
-            }
+				padding: $input-padding-y $input-padding-x;
+				border: 0;
+			}
 
-            .select2-selection__choice__remove {
-                color: color-yiq($primary);
-            }
-        }
-    }
+			.select2-selection__choice__remove {
+				color: color-yiq($primary);
+			}
+		}
+	}
 
-    .select2-results__option--highlighted[aria-selected] {
-        background: $primary;
-        color: color-yiq($primary);
-    }
+	.select2-results__option--highlighted[aria-selected] {
+		background: $primary;
+		color: color-yiq($primary);
+	}
 }
 
 .select2-dropdown {
-    border: $input-border-width solid $input-border-color;
+	border: $input-border-width solid $input-border-color;
 
-    .select2-search--dropdown {
-        padding: $input-padding-y $input-padding-x;
-    }
+	.select2-search--dropdown {
+		padding: $input-padding-y $input-padding-x;
+	}
 
-    .select2-search__field {
-        @extend .form-control;
-    }
+	.select2-search__field {
+		@extend .form-control;
+	}
 }
diff --git a/src/scss/_components/_ui.main.scss b/src/scss/_components/_ui.main.scss
index 19e38d4..6326968 100755
--- a/src/scss/_components/_ui.main.scss
+++ b/src/scss/_components/_ui.main.scss
@@ -119,13 +119,15 @@ select,
 textarea,
 .btn,
 .btn *,
-.alert,
 .dropdown,
 [data-toggle],
 [data-toggle] *,
 .container,
 .container-fluid,
 .row,
+.alert,
+.alert *,
+.message,
 [class='col-*'] {
     transition: all 0.4s ease;
 }
@@ -166,6 +168,26 @@ textarea,
     display: block;
 }
 
+.alert + .alert {
+    border-top: 0;
+}
+
+.alert {
+    .container {
+        position: relative;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+    }
+    .typography {
+        flex: 1 1;
+    }
+    .btn-close {
+        margin-left: 1rem;
+    }
+}
+
 .message {
     @extend .alert;
 
diff --git a/src/scss/types/cms.scss b/src/scss/types/cms.scss
index 5a3d1bf..c279178 100755
--- a/src/scss/types/cms.scss
+++ b/src/scss/types/cms.scss
@@ -1,3 +1,4 @@
+// remove unused Model Admins
 #Menu-SilverStripe-CampaignAdmin-CampaignAdmin,
 #Menu-Dynamic-Elements-Sponsors-Admin-SponsorsAdmin,
 #Menu-Dynamic-Elements-Admin-TestimonialsAdmin,
@@ -5,6 +6,7 @@
 	display: none;
 }
 
+// Fix form actions
 #Form_ItemEditForm_MajorActions_Holder {
 	min-width: 30%;
 	padding-bottom: 0;
@@ -25,6 +27,71 @@
 	border: 0;
 }
 
+// make edit icon always shown
+.grid-field__icon-action {
+	&.edit-link {
+		opacity: 1;
+	}
+}
+
+// correct primary buttons coloring
+.toolbar--south {
+	.btn-outline-primary,
+	.btn-primary {
+		color: #fff;
+	}
+}
+
+#ActionMenus_MoreOptions {
+	.btn-primary {
+		color: #5589a7;
+	}
+}
+
+// correct scrolls
 body.cms {
 	overflow: hidden;
 }
+
+// short fields margins/paddings
+.fields-short {
+	.form-group {
+		padding-bottom: 0.5rem;
+		margin-bottom: 0.25rem;
+		.form__field-label {
+			font-weight: bold;
+		}
+		&:after {
+			margin-bottom: 0.25rem;
+		}
+	}
+}
+
+.fields-row {
+	margin: 0 !important;
+	padding: 0;
+	width: 90%;
+	.form__fieldgroup {
+		margin: 0 !important;
+		padding: 0;
+		width: 100% !important;
+		max-width: 100% !important;
+		flex: 0 0 100% !important;
+		display: flex;
+		flex-wrap: wrap;
+		> .form-group {
+			padding: 0 1rem;
+			flex: 1 1 50%;
+			max-width: 50%;
+		}
+	}
+}
+
+// notifications rendering
+.notifications-list {
+	.alert {
+		.btn-close {
+			display: none;
+		}
+	}
+}