From 9c787823d541afd83032607e3cf12b2020f41a47 Mon Sep 17 00:00:00 2001 From: Hannu Pelkonen Date: Wed, 26 Nov 2014 13:51:58 +0200 Subject: [PATCH] Re-style section headings --- lib/app/js/controllers/sections.js | 14 --- lib/app/sass/app.scss | 128 ++++++++++++++-------------- lib/app/views/partials/section.html | 99 ++++++++++----------- 3 files changed, 111 insertions(+), 130 deletions(-) diff --git a/lib/app/js/controllers/sections.js b/lib/app/js/controllers/sections.js index 1e04d556..fa9f868f 100644 --- a/lib/app/js/controllers/sections.js +++ b/lib/app/js/controllers/sections.js @@ -42,24 +42,10 @@ angular.module('sgApp') } } - // Check section level (main/sub/sub-sub/sub-sub-sub) - $scope.getLevel = function(section) { - if (/([0-9]\.)/.test(section.reference)) { - return section.reference.split('.').map(function(i) { - return 'sub' - }).join('-').substring(4); - } - return 'main'; - } - $scope.getActive = function(section) { return section.reference == $rootScope.currentReference.section.reference ? 'active' : ''; } - $scope.getClass = function(section) { - return this.getLevel(section) + ' ' + this.getActive(section); - } - $scope.filterSection = function(section) { if ($scope.currentSection === 'all') return true; var re = new RegExp('(^' + $scope.currentSection + '$)|(^' + diff --git a/lib/app/sass/app.scss b/lib/app/sass/app.scss index 28be3cd3..36058db8 100644 --- a/lib/app/sass/app.scss +++ b/lib/app/sass/app.scss @@ -311,14 +311,7 @@ $mobile: new-breakpoint(max-width 480px); @include span-columns(12); } - // Remove top margin from first header in markdown and in every section - // Make sure that style does not leak to previews - .sg.section:first-child > header { - h1, h2, h3, h4 { - margin-top: 0; - padding-top: 0; - } - } + // Remove top margin from first header in markdown .sg.heading:nth-of-type(1) { margin-top: 0; padding-top: 0; @@ -353,7 +346,6 @@ $mobile: new-breakpoint(max-width 480px); //
//
//
-// //

Title

//
//
@@ -670,20 +662,67 @@ $mobile: new-breakpoint(max-width 480px); } } +// Sections header +// +// Sections can be used to structure content. Sections are generated from +// KSS reference numbers. +// +// Markup: +//
+//

1.0 Section title

+//
+// +// Styleguide 3.4. + +.sg.section-header { + @include default-font; + background-color: $primary-color; + border-top-left-radius: 5px; + border-top-right-radius: 5px; + + h1 { + padding: 13px; + margin: 0; + font-size: 1.777em; + color: $secondary-color; + + .reference-number { + color: white; + } + } + + i.fa { + padding: 0.4em 0.7em; + float: right; + color: rgba($secondary-color, .6); + + @include transition(all .4s ease-out); + + &:hover { + color: rgba($secondary-color, 1); + &:after { + opacity: 1; + } + } + } +} -// Sections +// Sections blocks // // Sections can be used to structure content. Sections are generated from // KSS reference numbers. // // Markup: // -//
    -//
  • .modifier1 - Modifier1 description
    • -//
  • .modifier2 - Modifier2 description
    • -//
  • .modifier3 - Modifier3 description
    • -//
+//
+//

Section description

+//
    +//
  • .modifier1 - Modifier1 description
    • +//
  • .modifier2 - Modifier2 description
    • +//
  • .modifier3 - Modifier3 description
    • +//
+//
//
//
//
@@ -732,9 +771,11 @@ $mobile: new-breakpoint(max-width 480px); //
//
// -// Styleguide 3.4. +// Styleguide 3.5. .sg.section { + margin-bottom: 20px; + .sg.section-partial { position: relative; position: relative; @@ -748,10 +789,12 @@ $mobile: new-breakpoint(max-width 480px); background: rgba(#fff, 1); } + .sg.section-partial:last-child { + border-bottom: 1px solid $secondary-color; + } + .sg.code-listing { padding: 0; - - border-bottom: 1px solid $secondary-color; background-color: #f8f8f8; pre { @@ -772,48 +815,6 @@ $mobile: new-breakpoint(max-width 480px); cursor: pointer; } } - - > header { - display: inline-block; - - padding: 0 1em .5em 0; - h1, - h2, - h3, - h4 { - display: inline-block; - } - - i.fa { - margin-left: .5em; - - color: rgba($primary-color, .2); - - @include transition(all .4s ease-out); - - &:after { - margin-left: .5em; - - opacity: 0; - color: rgba($primary-color, .4); - - @include transition(all .4s ease-out); - } - - &:hover { - color: rgba($primary-color, .7); - &:after { - opacity: 1; - } - } - } - i.fa-link { - &:after { - content: 'Link to this section'; - } - } - } - .sg.modifier-list { @include default-font; list-style: none; @@ -827,11 +828,12 @@ $mobile: new-breakpoint(max-width 480px); } } -.desigerToolVisible .sg.section { +.sg.desigerToolVisible .sg.section { padding-right: $min-content-margin; + border-right: transparent 2px solid; } -.desigerToolVisible .sg.section.active { +.sg.desigerToolVisible .sg.section.active { border-right: $default-action-color 2px solid; } @@ -915,7 +917,7 @@ $mobile: new-breakpoint(max-width 480px); // variable name // // -// Styleguide 3.5. +// Styleguide 3.6. .sg.heading .current-variable { display: inline; diff --git a/lib/app/views/partials/section.html b/lib/app/views/partials/section.html index 176a367f..f56a0d2c 100644 --- a/lib/app/views/partials/section.html +++ b/lib/app/views/partials/section.html @@ -1,71 +1,64 @@
-
-

-

-

-

+ ng-class="getActive(section)"> +
+

{{ section.reference }} {{ section.header }}

-
+

-
  • -
- -
-
-
- - - -
-
-
-
+
+
+
+
+ + +
-
- - - -
-
-
+ ng-bind-html="mod.wrappedMarkup | setModifierClass: mod.className | setVariables: variables | unsafe "> +
+
+
+
+
+ + +
+
+
+
-
-
- - - -
-
- Show CSS +
+
+ + +
+
+ Show CSS +
-
-
- - - -
-
- Show markup +
+
+ + +
+
+ Show markup