Merge pull request #122 from mobify/fix-43

Fix #43 by updating all heading underlines in Sass code examples

Author: Marlow Payne

CHANGELOG

@@ -1,4 +1,5 @@
 2.5.2
+    - Fix #43 by updating all underlines in Sass code examples
     - Fix #114 by removing invalid options from CSSComb config file
     - Add a React rule to make sure propTypes are ordered, required ones declared first and callbacks (e.g. onChange) declared last.
     - Update ES6 indent rule on switch statements

css/comments/Readme.md

@@ -15,10 +15,10 @@ Headings in CSS comments should follow the following format:
 
 ```
 // Heading Level 1
-// ===============
+// ===
 //
 // Heading Level 2
-// ---------------
+// ---
 //
 // ### Heading Level 3 and beyond
 ```
@@ -36,16 +36,16 @@ For example...
 
 ```
 // Documentation Headings Example
-// ==============================
+// ===
 //
 // The First Example
-// -----------------
+// ---
 //
 // Notice how there is only a single line between the level 1 and 2 headings above.
 
 
 // The Second Example
-// ------------------
+// ---
 //
 // All headings that don't immediately follow another heading will have two spaces
 // above, like the heading directly above.
@@ -100,7 +100,7 @@ Bad example:
 
 ```
 // Buttons
-// =======
+// ===
 
 .button {
     display: block; // This must be a block because reasons. Reasons like because
@@ -114,7 +114,7 @@ Better example:
 
 ```
 // Buttons
-// =======
+// ===
 //
 // Notes:
 //
@@ -132,7 +132,7 @@ Notice how we can apply the same line comment to multiple lines:
 
 ```
 // Modal
-// =====
+// ===
 //
 // Notes:
 //
@@ -157,7 +157,7 @@ Example:
 
 ```
 // Checkout
-// ========
+// ===
 //
 // @url http://www.website.com/checkout
 ```
@@ -169,26 +169,26 @@ Example:
 
 ```
 // Checkout
-// ========
+// ===
 //
 // @url http://www.website.com/checkout
 
 .t-checkout {
 
     // Global
-    // ------
+    // ---
     //
     // ...
 
 
     // Your Details
-    // ------------
+    // ---
     //
     // ...
 
 
     // Credit Card Info
-    // ----------------
+    // ---
     //
     // ...
 }
@@ -198,13 +198,13 @@ Alternatively:
 
 ```
 // Checkout
-// ========
+// ===
 //
 // @url http://www.website.com/checkout
 
 
 // Global
-// ------
+// ---
 //
 // ...
 
@@ -213,7 +213,7 @@ Alternatively:
 
 
 // Your Details
-// ------------
+// ---
 //
 // ...
 
@@ -222,7 +222,7 @@ Alternatively:
 
 
 // Credit Card Info
-// ----------------
+// ---
 //
 // ...
 
@@ -235,7 +235,7 @@ the base template scope and with a level 2 heading. Example:
 
 ```
 // Checkout
-// ========
+// ===
 //
 // @url http://www.website.com/checkout
 
@@ -244,14 +244,14 @@ the base template scope and with a level 2 heading. Example:
 
 
 // Checkout: Form
-// --------------
+// ---
 
 .t-checkout__form {
 }
 
 
 // Checkout: Sidebar
-// -----------------
+// ---
 
 .t-checkout__sidebar {
 }
@@ -278,7 +278,7 @@ SCSS file.
 
 ```
 // Breadcrumbs
-// ===========
+// ===
 
 .c-breadcrumbs {
 }
@@ -293,7 +293,7 @@ use a level 2 heading for each sub-component.
 
 ```
 // Breadcrumbs: Link
-// -----------------
+// ---
 
 .c-breadcrumbs__link {
 }
@@ -308,7 +308,7 @@ Notice the lack of any "Link Arrow" heading in the following example:
 
 ```
 // Breadcrumbs: Link
-// -----------------
+// ---
 
 .c-breadcrumbs__link {
 }
@@ -331,7 +331,7 @@ Method 1: Nested
 
 ```
 // Breadcrumbs: Link
-// -----------------
+// ---
 
 .c-breadcrumbs__link {
 
@@ -344,7 +344,7 @@ Method 2: Unnested
 
 ```
 // Breadcrumbs: Link
-// -----------------
+// ---
 
 .c-breadcrumbs__link {
 }
@@ -360,14 +360,14 @@ breadcrumb link styles. That could be enough to warrant a heading:
 
 ```
 // Breadcrumbs: Link
-// -----------------
+// ---
 
 .c-breadcrumbs__link {
 }
 
 
 // Breadcrumbs: Current Link
-// -------------------------
+// ---
 
 .c-breadcrumbs__link.c--current {
 }
@@ -406,7 +406,7 @@ An example of both the doc block and dependencies can be seen here:
 
 ```
 // My Function
-// ===========
+// ===
 //
 // Standard definition section goes here.
 //

css/sass-best-practices/readme.md

@@ -291,7 +291,7 @@ The second aspect of comments are the comments themselves! There are three types
 
 ```scss
 // My Component
-// ============
+// ===
 //
 // This is a general comment that applies to the whole of this section. It can contain
 // any information that is important to the file, styles and classes inside.
@@ -308,7 +308,7 @@ Be aware that these notes typically only refer to the code directly beneath it,
 
 ```scss
 // My Component
-// ============
+// ===
 //
 // Notes:
 //
@@ -326,7 +326,7 @@ Be aware that these notes typically only refer to the code directly beneath it,
 
 
 // My Component: Inner
-// -------------------
+// ---
 //
 // Notes:
 //
@@ -348,7 +348,7 @@ This is a rare use case, but can be useful sometimes when you have the same set
 
 ```scss
 // My Component
-// ============
+// ===
 //
 // Notes:
 //
@@ -360,7 +360,7 @@ This is a rare use case, but can be useful sometimes when you have the same set
 
 
 // My Component: Inner
-// -------------------
+// ---
 
 .c-my-component__inner {
     display: none; // A