Merge branch 'release/2.5.2'

Author: tonifisler

CHANGELOG.md

@@ -3,6 +3,10 @@ CHANGELOG
 
 This changelog references the relevant changes and bug fixes.
 
+* 2.5.2 (2015-02-26)
+ * #356 fix error with active state of `.list-emphasis` as list parent
+ * #358 fix `.table-striped` error due to new Bootstrap version
+
 * 2.5.1 (2015-02-10)
  * #353 Improve print styles
  * #348 #347 Fix errors with image flow in Publications

README.md

@@ -3,7 +3,17 @@ Swiss Admin web guidelines
 
 - [About Accessibility](Accessibility.md)
 - [How to use the styleguide in your project?](HOWTO.md)
-- [How to install the styleguide in order to contribute?](#installation-development-tools)
+
+
+## Summary
+
+- [The Swiss Federal Administration on the Internet](#the-swiss-federal-administration-on-the-internet)
+- [Contribution](#contribution)
+- [Grid System](#grid-system)
+- [Print Classes](#print-classes)
+- [Styleguide Theme](#styleguide-theme)
+- [FAQ](#faq)
+- [Known Issues](#known-issues)
 
 The Confederation Web Guidelines define the design specifications for the presentation of the [Swiss Federal Administration](http://www.admin.ch) on the Internet and are binding for all websites within the domain admin.ch. These guidelines specify how the websites of the Federal authorities have to look and how they should behave. At the same time they give the government departments and public offices the necessary flexibility to be able to optimize their online communications to the requirements of their specific business purposes.
 
@@ -132,7 +142,7 @@ Please refer to their documentation for more details.
 The stylguide theme is in `styleguide-theme`. It's a theme for Trulia's [Hologram](https://github.com/trulia/hologram).
 It was based on [Cortana](https://github.com/Yago31/Cortana).
 
-## How is it included?
+### How is it included?
 
 The `hologram_config.yml` has a reference  to the styleguide theme:
 
@@ -142,7 +152,7 @@ destination: ./path/to/output
 documentation_assets: ./path/to/theme
 ```
 
-## Build the Styleguide Theme
+### Build the Styleguide Theme
 
 The theme has his own gulpfile (for the moment). So you have to do the following command to build the assets then generate the styleguide with `$ hologram`:
 
@@ -189,3 +199,15 @@ Download [rubygems 2.2.3](https://github.com/rubygems/rubygems/releases/tag/v2.2
 C:\>gem install --local C:\rubygems-update-2.2.3.gem
 C:\>update_rubygems --no-ri --no-rdoc
 ```
+
+## Known issues
+
+### `@font-face` + Cache-Control/Pragma: 
+There is a known issue with Internet Explorer when loading the page over HTTPS with Cache-Control or Pragma headers set. Disable cache control on fonts to fix it (refer to [issue #359](https://github.com/swiss/styleguide/issues/359) for more information):
+
+```bash
+<FilesMatch "\.(eot|otf|woff|ttf)$">
+   Header unset Cache-Control
+   Header unset Pragma
+</FilesMatch>
+```

VERSION

@@ -1 +1 @@
-2.5.1
+2.5.2

assets/sass/components/navigation.scss

@@ -898,16 +898,23 @@ Navigation below the content level on a smartphone with links to the home page,
   - added the optional `.list-emphasis` class to the first `<li>` element. Put it if you need a bolder and darker element in the list.
   - if you want the drilldown behaviour, embed the `.nav-page-list` element in `<div class="drilldown"><div class="drilldown-container"></div></div>` and add some `<nav class="drilldown-sub"></nav>` elements in any `<li>` you want. Add the `.list-sub` class to the `<li>` element too.
 
+<br>
 **2.3.0:**
 
   - added `aria-selected="true"` for current link
   - removed first button in the list (looked like a back link)
   - changed label of back button in drilldown sub from "Back" to title
     of section
 
+<br>
 **2.5.0:**
 
   - allow nested `<ul/>` lists in `.nav-page-list` elements
+
+<br>
+**2.5.2:**
+
+  - fix error with active state of `.list-emphasis`, **please always wrap the text of this list element with a `span` or a `a`**.
 </div>
 
 ```html_example
@@ -922,9 +929,8 @@ Navigation below the content level on a smartphone with links to the home page,
           <a href="#" class="icon icon--before icon--less visible-xs">Back to parent</a>
           <a href="#" class="icon icon--before icon--less"><span class="sr-only">Back to </span>Comestible Goods</a>
           <ul>
-            <!-- the .list-emphasis class is optionnal -->
-            <li class="list-emphasis">
-              <a href="#">Drinks</a>
+            <li class="list-emphasis active">
+              <span>Drinks</span><span class="sr-only">active</span>
               <ul>
                 <!-- add the .list-sub class if the list has some animated sub-lists -->
                 <li class="list-sub"><a href="#">Mineral water</a>
@@ -938,7 +944,7 @@ Navigation below the content level on a smartphone with links to the home page,
                     </ul>
                   </nav>
                 </li>
-                <li class="active">Wine <span class="sr-only"></span></li>
+                <li><a href="#">Wine</a></li>
                 <li><a href="#">Beer</a></li>
                 <li><a href="#">Spirits</a></li>
               </ul>
@@ -960,10 +966,38 @@ Navigation below the content level on a smartphone with links to the home page,
     padding-left: 15px;
     padding-right: 15px;
     li.list-emphasis {
-      > a {
+      padding: 0;
+      border: 0;
+      > a,
+      > span:first-child {
+        border-bottom: 1px solid $coal;
+        display: block;
         color: $black;
         font-weight: 700;
-        border-color: $coal;
+        padding: 10px 0;
+        position: relative;
+        &:before {
+          content: '';
+          display: block;
+          position: absolute;
+          top: 0;
+          left: -15px;
+          width: 5px;
+          height: 100%;
+        }
+      }
+      &.active {
+        padding: 0;
+        border: 0;
+        &:before {
+          background: none;
+        }
+        > a,
+        >span {
+          &:before {
+            background: $venetian-red;
+          }
+        }
       }
     }
   }
@@ -989,6 +1023,7 @@ Navigation below the content level on a smartphone with links to the home page,
     &:hover:before {background: none;}
   }
   li {
+    border-bottom: 1px solid $silver;
     display: block;
     margin: 0;
     &:before {
@@ -1008,12 +1043,16 @@ Navigation below the content level on a smartphone with links to the home page,
       &:before {
         background: $venetian-red;
       }
-      a:before,
-      a:hover:before {background: $venetian-red;}
+      > a {
+        padding: 0;
+        &:before,
+        &:hover:before {
+          background: $venetian-red;
+        }
+      }
       .nav-mobile & { padding-bottom: 40px; }
     }
     a {
-      border-bottom: 1px solid $silver;
       color: $empress;
       padding: 10px 0;
       @media only screen and (max-width: $screen-xs-max) { padding: 10px; }

assets/sass/layout/tables.scss

@@ -210,17 +210,11 @@ A simple example :
 */
 
 .table-striped {
-  > tbody > tr:nth-child(odd) {
-    > td,
-    > th {
-      background-color: transparent;
-    }
+  > tbody > tr:nth-of-type(odd) {
+    background-color: transparent;
   }
-  > tbody > tr:nth-child(even) {
-    > td,
-    > th {
-      background-color: $table-bg-accent;
-    }
+  > tbody > tr:nth-of-type(even) {
+    background-color: $table-bg-accent;
   }
   > thead td, > thead th, > tfoot td, > tfoot th {
     background: $smoke;