Refactor/improve Umami demo's search form CSS for better responsive support

Hi @kjay

Reviewed your patch and the use of flexbox for consistency looks good on search. Placeholder is visible this time on all screen size. Just noticed one thing on focus of search input there's a bluish-greenish border and before it was not there so I think we should remove the outline from focus so that the greenish border on focus looks more good like before. Adding screenshots of before and after.

Hi @kjay,

It looks like this patch needs a reroll after the patch if IE11 support was committed today.

The code looks good on first inspection, so it shouldn't be a huge amount of work for us to get this committed.

Hi! rerolled patch.
had one conflict in blocks/search/search.css

<<<<<<< HEAD
  color: #464646;
}

.form-search:focus {
  outline: none;
  margin: 0 0 -2px -2px;
  padding: 5px 8px 5px 32px;
}

=======
  background-size: 1.5em;
  background-color: rgba(255,255,255,0.5);
}
>>>>>>> Applying patch from issue 2977510 comment 12640958
.form-search::placeholder {
  opacity: 1;
}

conflict resolved.

Removed tag. Unassigned so that someone can review.

#5 looks good but that bluish-greenish border issue still there but this time on search button and only on chrome and before it was on search input which I had mentioned in #3. Added a screenshot after patch.

I removed the `box-sizing: border-box;` from the patch and it seems to work fine. It used the border-box from the base.css file, which is correct.

Would be nice to see a new patch with that removed please.

The patch on #9 works well with RTL, with one caveat - the pager at the bottom.

By adding this code it fixes it for RTL (and not breaking anything on LTR)

.pager__items {
  display: flex;
  justify-content: center;
}

I added 2 fixes to patch #9:

• fix for RTL search results' pager
• removed box-sizing: border-box; (per @markconroy request)

I made some additional updates to the patch.
I tested that it works correctly on Safari 9.1

Main changes included in this patch (based on #13)

• Various RTL issues fixed
• Flex not wrapping correctly on Safari
• Restored box-sizing rule
• Moving margin to .region-content, instead of margins for each inner element

@kjay

This patch is brilliant. I'm annoyed we've left the search results looking so bad for so long and great that we finally have it this good. Thanks so much.

I'm proposing 2 tiny changes. If you can make those, I'll mark it RTBC then.

1. +++ b/core/profiles/demo_umami/themes/umami/css/components/blocks/search/search-results.css
   @@ -3,106 +3,129 @@
   +.search-form + .item-list > h3 {
   

   Can we change this from an element to a class? Like this:
   .search-form + .item-list > .search-result__title

2. +++ b/core/profiles/demo_umami/themes/umami/css/components/blocks/search/search-results.css
   @@ -3,106 +3,129 @@
    .search-results li {
   

   Let's be a little less generic here, incase there is a list within the search result node itself. I suggest:
   .search-results > li
   and the same for the [dir=rtl] following it.

Looks like we're ready for RTBC.

From stylelint (while attempting to commit):

core/profiles/demo_umami/themes/umami/css/components/blocks/search/search-results.css
 16:1  ✖  Expected empty line before at-rule   at-rule-empty-line-before
 38:1  ✖  Expected empty line before at-rule   at-rule-empty-line-before

Adding new patch - no changes except adding a blank line before the @ statements.

I don't know why this was not reported earlier, but there you go:

core/profiles/demo_umami/themes/umami/css/components/blocks/search/search-results.css
 43:1  ✖  Expected empty line before at-rule   at-rule-empty-line-before

New patch to add new line to stop the linter failing.

I ran the linter as well, and no new CSS bugs were picked up.

Setting to rtbc again as tests have passed.

Thanks a lot!