Do not use block section styles when main section does not have markup

SC5 · Nov 26, 2014 · 4e68498 · 4e68498
1 parent a500281
commit 4e68498
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 23 deletions.
diff --git a/lib/app/js/controllers/sections.js b/lib/app/js/controllers/sections.js
@@ -42,18 +42,22 @@ angular.module('sgApp')
       }
     }
 
-    $scope.getActive = function(section) {
+    $scope.isEmptyMainSection = function(section) {
+      return section.reference.indexOf('.') === -1 && !section.wrappedMarkup && (!section.modifiers || section.modifiers.length === 0);
+    };
+
+    $scope.isActive = function(section) {
       return section.reference == $rootScope.currentReference.section.reference ? 'active' : '';
-    }
+    };
 
     $scope.filterSection = function(section) {
       if ($scope.currentSection === 'all') return true;
       var re = new RegExp('(^' + $scope.currentSection + '$)|(^' +
         $scope.currentSection + '\\.)');
       return re.test(section.reference);
-    }
+    };
 
     $scope.getCommonClass = function() {
       return Styleguide.config.data.commonClass;
-    }
+    };
   });
diff --git a/lib/app/sass/app.scss b/lib/app/sass/app.scss
@@ -707,6 +707,31 @@ $mobile: new-breakpoint(max-width 480px);
   }
 }
 
+.sg.section.main {
+  .section-header {
+    background-color: transparent;
+
+    h1 {
+      padding-top: 0;
+      font-size: 2.369em;
+      color: #333;
+    }
+
+    i.fa {
+      display: none;
+    }
+  }
+
+  .reference-number {
+    display: none;
+  }
+
+  .sg.section-partial, .sg.section-partial:last-child {
+    padding-top: 0;
+    padding-bottom: 0;
+    border: none;
+  }
+}
 
 // Sections blocks
 //
@@ -837,24 +862,6 @@ $mobile: new-breakpoint(max-width 480px);
   border-right: $default-action-color 2px solid;
 }
 
-.sg.section.main {
-  &:nth-child(n+2) {
-    margin-top: 3em;
-  }
-}
-
-.sg.section.sub,
-.sg.section.sub-sub,
-.sg.section.sub-sub-sub {
-  margin: 0 auto 1em auto;
-
-  > .body {
-    > p {
-      margin-bottom: 1.3em;
-    }
-  }
-}
-
 .sg.label {
   @include default-font;
   position: absolute;

diff --git a/lib/app/views/partials/section.html b/lib/app/views/partials/section.html
@@ -1,5 +1,5 @@
 <section class="sg section"
-  ng-class="getActive(section)">
+  ng-class="{active: isActive(section), main: isEmptyMainSection(section)}">
   <header class="sg section-header">
     <a ng-href="{{section.reference}}"><i class="fa fa-link"></i></a>
     <h1 class="sg"><span class="reference-number">{{ section.reference }}</span> {{ section.header }}</h1>