[4.0] Flex based control-group fields

administrator/components/com_banners/tmpl/banner/edit.php

@@ -60,7 +60,7 @@
 		<?php echo HTMLHelper::_('uitab.endTab'); ?>
 
 		<?php echo HTMLHelper::_('uitab.addTab', 'myTab', 'otherparams', Text::_('COM_BANNERS_GROUP_LABEL_BANNER_DETAILS')); ?>
-			<fieldset id="fieldset-otherparams" class="form-no-margin options-form">
+			<fieldset id="fieldset-otherparams" class="options-form">
 				<legend><?php echo Text::_('COM_BANNERS_GROUP_LABEL_BANNER_DETAILS'); ?></legend>
 				<div>
 					<?php echo $this->form->renderFieldset('otherparams'); ?>

administrator/components/com_config/src/Field/FiltersField.php

@@ -92,7 +92,7 @@ protected function getInput()
 		$html = array();
 
 		// Open the table.
-		$html[] = '<table id="filter-config" class="table">';
+		$html[] = '<table id="filter-config" class="table table-responsive">';
 
 		// The table heading.
 		$html[] = '	<thead>';

administrator/components/com_config/tmpl/application/default_permissions.php

@@ -15,7 +15,7 @@
 $this->name        = Text::_('COM_CONFIG_PERMISSION_SETTINGS');
 $this->description = '';
 $this->fieldsname  = 'permissions';
-$this->formclass   = 'form-no-margin form-no-columns options-form';
+$this->formclass   = 'form-no-columns options-form';
 $this->showlabel   = false;
 
 echo LayoutHelper::render('joomla.content.options_default', $this);

administrator/components/com_content/tmpl/article/edit.php

@@ -151,7 +151,7 @@
 
 		<?php if ($this->canDo->get('core.admin') && $params->get('show_configure_edit_options', 1) == 1) : ?>
 			<?php echo HTMLHelper::_('uitab.addTab', 'myTab', 'editor', Text::_('COM_CONTENT_SLIDER_EDITOR_CONFIG')); ?>
-			<fieldset id="fieldset-editor" class="form-no-margin options-form">
+			<fieldset id="fieldset-editor" class="options-form">
 				<legend><?php echo Text::_('COM_CONTENT_SLIDER_EDITOR_CONFIG'); ?></legend>
 				<div class="column-count-md-2 column-count-lg-3">
 				<?php echo $this->form->renderFieldset('editorConfig'); ?>

administrator/components/com_menus/tmpl/item/edit.php

@@ -50,7 +50,7 @@
 
 	<?php // Add the translation of the menu item title when client is administrator ?>
 	<?php if ($clientId === 1 && $this->item->id != 0) : ?>
-		<div class="row title-alias form-vertical form-no-margin mb-3">
+		<div class="row title-alias form-vertical mb-3">
 			<div class="col-12">
 				<div class="control-group">
 					<div class="control-label">

administrator/components/com_workflow/tmpl/stage/edit.php

@@ -47,7 +47,7 @@
 		<div class="col-lg-3">
 			<div class="card card-block">
 				<div class="card-body">
-					<fieldset class="form-vertical form-no-margin">
+					<fieldset class="form-vertical">
 						<?php echo $this->form->renderField('published'); ?>
 						<?php echo $this->form->renderField('default'); ?>
 					</fieldset>

administrator/components/com_workflow/tmpl/workflow/edit.php

@@ -39,15 +39,15 @@
 		<div class="row">
 			<div class="col-lg-9">
 				<div class="card card-block">
-					<div class="card-body form-vertical form-no-margin">
+					<div class="card-body form-vertical">
 					<?php echo $this->form->renderField('description'); ?>
 					</div>
 				</div>
 			</div>
 			<div class="col-lg-3">
 				<div class="card card-block">
 					<div class="card-body">
-						<fieldset class="form-vertical form-no-margin">
+						<fieldset class="form-vertical">
 							<?php echo $this->form->renderField('published'); ?>
 							<?php echo $this->form->renderField('default'); ?>
 						</fieldset>

administrator/templates/atum/scss/blocks/_edit.scss

@@ -18,9 +18,6 @@
 }
 
 .layout-edit {
-  .control-group {
-    min-width: (100% / 3);
-  }
 
   .title-alias {
     box-shadow: $atum-box-shadow;

administrator/templates/atum/scss/blocks/_form.scss

@@ -6,7 +6,9 @@
 }
 
 .control-group {
-  margin-bottom: 18px;
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0 0 1rem 0;
 
   > .form-check {
     display: inline-block;
@@ -19,24 +21,25 @@
   }
 
   .control-label {
-    float: left;
-    width: 220px;
-    padding-top: 5px;
-    padding-right: 5px;
-    text-align: left;
+    width: 240px;
+    padding: .3rem 0;
   }
 
   .controls {
-    margin-left: 220px;
+    position: relative;
+    flex: 1;
+    min-width: 210px;
 
-    @include media-breakpoint-down(sm) {
-      margin-left: 0;
+    + div {
+      width: 100%;
+      margin: 5px 0 10px;
+    }
+  }
 
-      [dir=rtl] & {
-        margin-right: 0;
-      }
-    }	
+  .form-vertical & {
+    flex-direction: column;
   }
+
 }
 
 .control-group {
@@ -45,38 +48,6 @@
   }
 }
 
-.col-md-9 .control-group .switcher__legend,
-.col-md-12 .control-group .switcher__legend {
-
-  @include media-breakpoint-down(sm) {
-    margin-left: 0;
-    float: none;
-
-    [dir=rtl] & {
-      margin-right: 0;
-    }
-  }	
-}
-
-.form-no-margin {
-
-  .control-group {
-
-    .controls {
-      margin-left: 0;
-
-      .switcher__legend {
-        float: none;
-        margin-left: 0;
-      }
-    }
-
-    .control-label {
-      float: none;
-    }
-  }
-}
-
 .spacer {
   hr {
     width: 380px;
@@ -136,12 +107,6 @@ legend {
   opacity: 0.3;
 }
 
-// Search Input Tooltip
-/* make the containers relative */
-.control-group > .controls {
-  position: relative;
-}
-
 /* set up hidden tooltip */
 [role="tooltip"]:not(.show) {
   display: none;

administrator/templates/atum/scss/blocks/_utilities.scss

@@ -30,7 +30,8 @@
   padding-bottom: 1rem;
 
   > div {
-    display: inline-block;
+    display: inline-flex;
+    flex-direction: column;
     break-inside: avoid;
     width: 100%;
 

administrator/templates/atum/scss/template-rtl.scss

@@ -20,12 +20,6 @@ body {
   }
 }
 
-.control-group {
-  .custom-select {
-    float: right;
-  }
-}
-
 .dropdown-menu-right {
 
   &::after {
@@ -49,10 +43,6 @@ body {
   float: right;
 }
 
-.form-no-margin .control-group .controls .switcher__legend {
-  text-align: right;
-}
-
 // Alerts
 .notify-alerts {
   margin-left: 0;

administrator/templates/atum/scss/vendor/bootstrap/_form.scss

@@ -4,73 +4,6 @@ label {
   margin-bottom: 0;
 }
 
-.control-group {
-  margin-bottom: 18px;
-
-  > .form-check {
-    display: inline-block;
-  }
-
-  &::after {
-    display: table;
-    clear: both;
-    content: "";
-  }
-
-  .control-label {
-    float: left;
-    width: 220px;
-    padding-top: 5px;
-    padding-right: 5px;
-    text-align: left;
-
-    [dir=rtl] & {
-      float: right;
-      text-align: right;
-    }
-
-    @include media-breakpoint-down(sm) {
-      float: none;
-      width: 100%;
-    }
-  }
-
-  .controls {
-    margin-left: 220px;
-
-    [dir=rtl] & {
-      margin-right: 220px;
-      margin-left: 0;
-    }
-
-    @include media-breakpoint-down(sm) {
-      margin-left: 0;
-
-      [dir=rtl] & {
-        margin-right: 0;
-      }
-    }
-  }
-}
-
-.form-no-margin {
-
-  .control-group {
-
-    .controls {
-      margin-left: 0;
-
-      [dir=rtl] & {
-        margin-right: auto;
-      }
-    }
-
-    .control-label {
-      float: none;
-    }
-  }
-}
-
 .spacer {
   hr {
     width: 380px;
@@ -125,23 +58,14 @@ legend {
   display: block;
 }
 
-[aria-grabbed='true'] {
+[aria-grabbed="true"] {
   box-shadow: 0 0 2px 1px var(--atum-bg-dark);
 }
 
 select.form-control {
   background-color: $custom-select-bg;
 }
 
-@include media-breakpoint-down(xs) {
-  .control-group {
-    .control-label {
-      float: none;
-      max-width: 100%;
-    }
-  }
-}
-
 .field-media-wrapper {
   max-width: calc(50vw - 5rem);
   width: 100%;

build/media_source/system/scss/fields/switcher.scss

@@ -1,13 +1,13 @@
 $off-background-colour: lightgrey;
 $on-background-colour: #2f7d32;
-$switcher-width:  62px;
+$switcher-width: 62px;
 $switcher-height: 28px;
 
 .switcher {
   position: relative;
   width: 18rem;
   height: 28px;
-  float: left;
+  margin: 0;
 }
 
 .switcher input {
@@ -41,7 +41,7 @@ $switcher-height: 28px;
 
 .switcher input:focus ~ .toggle-outside {
   border-color: var(--focus);
-  box-shadow: 0 0 0 .2rem rgba(26,70,107,.25);
+  box-shadow: 0 0 0 .2rem rgba(26, 70, 107, .25);
 }
 
 .switcher label {
@@ -74,7 +74,7 @@ $switcher-height: 28px;
   position: absolute;
   width: 58px;
   box-sizing: border-box;
-  border: 1px solid rgba(0,0,0,.18);
+  border: 1px solid rgba(0, 0, 0, .18);
   left: 0;
 
   [dir=rtl] & {
@@ -83,7 +83,7 @@ $switcher-height: 28px;
   }
 }
 
-.switcher input ~ input:checked ~ .toggle-outside{
+.switcher input ~ input:checked ~ .toggle-outside {
   background: $on-background-colour;
 }
 
@@ -104,32 +104,5 @@ $switcher-height: 28px;
   margin-bottom: 1rem;
   font-size: 1rem;
   font-weight: 400;
-  float: left;
-  width: 220px;
-  padding-top: 5px;
-  padding-right: 5px;
-  text-align: left;
-
-  [dir=rtl] & {
-    padding-left: 5px;
-    padding-right: 0;
-    float: right;
-    text-align: right;
-  }
-}
-
-.col-md-9 .control-group .switcher__legend,
-.col-md-12 .control-group .switcher__legend {
-  margin-left: -220px;
-
-  [dir=rtl] & {
-    margin-left: 0;
-    margin-right: -220px;
-    float: right;
-    text-align: right;
-  }
-}
-
-.col-md-3 .switcher__legend {
-  margin-left: 0;
+  padding: 5px 0;
 }