Issue 4917 - Shrink space around accent section headings and content when section contains cards on…

static/scss/components/_groups.scss

 // This file is part of acceptableads.org.
 // Copyright (C) 2016 Eyeo GmbH
 //
 // acceptableads.org is free software: you can redistribute it and/or modify
 // it under the terms of the GNU General Public License as published by
 // the Free Software Foundation, either version 3 of the License, or
 // (at your option) any later version.
 //
 // acceptableads.org is distributed in the hope that it will be useful,
 // but WITHOUT ANY WARRANTY; without even the implied warranty of
 // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 // GNU General Public License for more details.
 //
 // You should have received a copy of the GNU General Public License
 // along with acceptableads.org.  If not, see <http://www.gnu.org/licenses/>.
 
 // display like a table (even grid)
 
 .group-container
 {
   width: 100%;
   max-width: $max-width;
   margin: 0 auto;
   padding: $xl 0;
 }
 
+.bg-accent .group-container

[juliandoucette, 2017/06/08 21:28:54]

I'm guessing you applied this to `.bg-accent .group-container` instead of
`.group-container` because the ticket said all groups on accent backgrounds. But
I think this may apply more broadly to all `.group-container`s. Can you check?

[ire, 2017/06/12 08:39:21]

It looks like the `.group-container` has, so-far, always been placed within a
`.bg-accent` in the markup. So, I will just apply the styles to the
`.group-container` selector alone. 

+{
+  padding: $md 0;
+}
+
 .group-container > %headings,
 .group-container > p
 {
   margin: $xl auto;
   padding: 0 $sm;
 }
 
+.bg-accent .group-container > %headings,

[juliandoucette, 2017/06/08 21:28:54]

Note: I'd like to get away from using %headings because it causes some really
long and complicated selectors. Instead, I would prefer a `.group-heading` and
`.group-body`. But I think this works fine for now. If you agree with my
preference then you may change this. If not, leave it.

[ire, 2017/06/12 08:39:21]

I agree with you that this should be changed. But, perhaps in a separate issue
so we can refactor all uses of the %headings selector?

[juliandoucette, 2017/06/16 18:25:30]

No objections. Please create the issue before marking this Done if you would
like to do so.

+.bg-accent .group-container > p
+{
+  margin: $md auto;
+}
+
 .group
 {
   display: table;
   width: 100%;
   table-layout: fixed;
 }
 
 .group-container .group
 {
   margin-bottom: 0;
@@ skipping 230 matching lines @@
     width: 100%;
   }
   // un-center all cards
   .group > div:nth-child(4),
   .group > div:nth-child(3),
   .group > div:nth-child(5)
   {
     margin-left: 0;
   }
 }