IMPR: minor improvements and updates

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.",

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);
 

src/scss/_components/_ui.form.basics.scss

@@ -1,3 +1,5 @@
+@import '~select2/dist/css/select2.css';
+
 legend {
 	@extend h2;
 }
@@ -25,21 +27,13 @@ input.checkbox {
 		}
 	}
 
+	&.CompositeField,
 	&.composite {
-        display: block;
+		flex-direction: column;
 		margin-top: 0;
 		margin-bottom: 0;
 		&.row {
-            display: flex;
-        }
-        &.collapse {
-            display: none;
-            &.show {
-                display: block;
-                &.row {
-                    display: flex;
-                }
-            }
+			 flex-direction: row;
 		}
 	}
 
@@ -139,7 +133,11 @@ input.checkbox {
 }
 
 .form-inline {
-    margin-top: -1rem;
+	position: relative;
+	margin: 2rem 0;
+	.field {
+		margin: 0;
+	}
 
 	fieldset {
 		margin-top: 1rem;
@@ -151,6 +149,9 @@ input.checkbox {
 }
 
 // select2 dropdowns bootstrap4 styling
+body > .select2-container {
+	position: fixed !important;
+}
 .select2-container {
 	display: block;
 	width: 100% !important;

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;
 

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;
+		}
+	}
+}