Issue #3044366 by shaal, kjay, tim.plunkett, bnjmnm, alexpott, pawandubey,...

Issue #3044366 by shaal, kjay, tim.plunkett, bnjmnm, alexpott, pawandubey, smaz, lauriii, markconroy, Gábor Hojtsy: Fix styling of Umami for layout builder

core/modules/layout_builder/src/Form/DefaultsEntityForm.php

@@ -80,6 +80,7 @@ public function getBaseFormId() {
    * {@inheritdoc}
    */
   public function buildForm(array $form, FormStateInterface $form_state, SectionStorageInterface $section_storage = NULL) {
+    $form['#attributes']['class'][] = 'layout-builder-form';
     $form['layout_builder'] = [
       '#type' => 'layout_builder',
       '#section_storage' => $section_storage,

core/modules/layout_builder/src/Form/OverridesEntityForm.php

@@ -97,6 +97,7 @@ protected function init(FormStateInterface $form_state) {
   public function buildForm(array $form, FormStateInterface $form_state, SectionStorageInterface $section_storage = NULL) {
     $this->sectionStorage = $section_storage;
     $form = parent::buildForm($form, $form_state);
+    $form['#attributes']['class'][] = 'layout-builder-form';
 
     // @todo \Drupal\layout_builder\Field\LayoutSectionItemList::defaultAccess()
     //   restricts all access to the field, explicitly allow access here until

core/profiles/demo_umami/themes/umami/css/components/blocks/page-title/page-title.css

@@ -13,5 +13,13 @@
 
 .block-page-title-block {
   margin: 1rem 0 3rem;
+  padding: 0 1rem;
   text-align: center;
 }
+
+/* Large */
+@media screen and (min-width: 77rem) { /* 1200px + 2rem */
+  .block-page-title-block {
+    padding: 0;
+  }
+}

core/profiles/demo_umami/themes/umami/css/components/blocks/search/search.css

@@ -69,7 +69,7 @@
 .search-block-form .form-search {
   width: auto;
   height: auto;
-  margin: 0 80px 0 0; /* LTR */
+  margin: 0;
   padding: 7px 8px 7px 32px;
   color: #464646;
   border: 2px solid #fff;
@@ -77,13 +77,10 @@
   font-size: 0.875rem;
   line-height: normal;
 }
-[dir=rtl] .form-search {
-  margin: 0 0 0 80px;
-}
 
 @media screen and (min-width: 48em) {
   .search-block-form .form-search {
-    width: 18em;
+    width: 20rem;
   }
 }
 
@@ -109,8 +106,8 @@
 /* Search submit */
 .search-block-form .form-actions {
   position: relative;
-  margin-top: 0;
-  margin-bottom: 0;
+  margin: 0;
+  padding: 0;
   border-top: 1px solid #dbdbdb;
   border-right: 1px solid #dbdbdb; /* LTR */
   border-bottom: 1px solid #dbdbdb;
@@ -125,6 +122,9 @@
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 3px;
 }
+.search-block-form .form-actions .button {
+  margin: 0;
+}
 .search-block-form .form-submit {
   margin: 0;
   padding: 0.6em 1.25em 0.4em;

core/profiles/demo_umami/themes/umami/css/components/forms/buttons.css

@@ -2,12 +2,23 @@
  * @file
  * This file is used to style form buttons generically, with overrides per form
  */
+
 .form-actions {
-  display: inline-flex;
+  display: flex;
+  flex-wrap: wrap;
+  margin: -0.5rem;
+  padding: 0.75rem 0;
 }
-.form-actions .button {
-  margin-left: 1em;
+
+@media screen and (min-width: 77em) {
+  .form-actions {
+    margin: 1rem -0.5rem;
+    padding: 0;
+  }
 }
-.form-actions .button:first-child {
-  margin-left: 0;
+
+.form-actions > .button,
+.form-actions > .form-wrapper {
+  margin: 0.5rem;
+  line-height: normal;
 }

core/profiles/demo_umami/themes/umami/css/components/forms/contact.css

@@ -6,6 +6,7 @@
 .contact-form {
   max-width: 600px;
   margin: auto auto 1rem;
+  padding: 0 1rem;
 }
 
 @media screen and (min-width: 30rem) { /* 480px */
@@ -26,25 +27,3 @@
   min-width: auto;
   margin: 0 5px 0 0;
 }
-.contact-form .form-actions {
-  display: block;
-}
-
-@media screen and (min-width: 30rem) { /* 480px */
-  .contact-form .form-actions {
-    display: inline-flex;
-  }
-}
-.contact-form .form-actions .button {
-  margin-left: 0;
-}
-
-@media screen and (min-width: 30rem) { /* 480px */
-  .contact-form .form-actions .button {
-    margin-left: 1em; /* LTR */
-  }
-  [dir=rtl] .contact-form .form-actions .button + .button {
-    margin-right: 1em;
-    margin-left: 0;
-  }
-}

core/profiles/demo_umami/themes/umami/css/components/layout_builder/layout-builder.css

@@ -13,3 +13,20 @@
 .layout-builder__message--overrides .messages__content {
   background-image: url("../../../../../../../misc/icons/73b355/location.svg");
 }
+
+.layout-builder-form,
+.layout-builder-discard-changes,
+.layout-builder-revert-overrides {
+  margin-right: 1rem;
+  margin-left: 1rem;
+}
+
+/* Large */
+@media screen and (min-width: 77rem) { /* 1200px + 2rem */
+  .layout-builder-form,
+  .layout-builder-discard-changes,
+  .layout-builder-revert-overrides {
+    margin-right: 0;
+    margin-left: 0;
+  }
+}