Better structured Sass-files

_sass/_09_elements.scss

@@ -1,13 +1,28 @@
+/* TOC
+
+- Table of Contents (Index)
+- Panel
+- Shadows
+- Alerts
+- Breadcrumb
+- Button
+- Side-Nav
+- Meta
+- Accordion
+
+*/
+
+
 
 /* Table of Contents (Index)
 ------------------------------------------------------------------- */
+
 #toc ul,
 #toc ul ul,
 #toc ul ul ul, {
     list-style: none;
     margin-left: 30px;
 }
-
 #toc ul {
     margin-left: 0;
     margin-top: $spacing-unit;
@@ -18,13 +33,12 @@
 /* Panel
 ------------------------------------------------------------------- */
 
-.panel {
-    padding: $spacing-unit/2;
+.border-dotted {
+  border: 1px dotted $grey-5;
+  padding: rem-calc(20);
+  border-radius: $global-radius;
 }
-.panel.dotted-border {
-    border-radius: $global-radius;
-    border: 1px dotted $grey-4;
-} 
+
 
 
 /* Shadows
@@ -36,11 +50,8 @@
 
 
 
-.border-dotted {
-  border: 1px dotted $grey-5;
-  padding: rem-calc(20);
-  border-radius: $global-radius;
-}
+/* Alerts
+------------------------------------------------------------------- */
 
 .alert-box {
   font-family: $font-family-sans-serif;
@@ -69,9 +80,10 @@
     color: $grey-12;
   }
 
-.breadcrumbs>.current {
-  font-weight: bold;
-}
+
+
+/* Button
+------------------------------------------------------------------- */
 
 button, .button         { letter-spacing: 1px; }
   button.grey, .button.grey { background: $grey-10; }
@@ -81,18 +93,22 @@ button, .button         { letter-spacing: 1px; }
   .button.grey:focus      { background-color: $grey-16; }
 
 
-.shadow-no    {text-shadow: rgba(0, 0, 0, 0) 0 0 0;}
-.shadow-black   {text-shadow: rgba(0, 0, 0, 0.498039) 0px 1px 2px;}
-.shadow-white   {text-shadow: rgba(255, 255, 255, 0.498039) 0px 1px 2px;}
 
+/* Side-Nav
+------------------------------------------------------------------- */
 
 .side-nav li.title { text-transform: uppercase;}
 .side-nav li { border-top: 1px solid $grey-3;}
 .side-nav li a:not(.button) { border-bottom: 0; padding: 0.4375rem 0rem; }
-.side-nav li a:not(.button):hover, .side-nav li a:not(.button):focus { background: #eee; }
+.side-nav li a:not(.button):hover, .side-nav li a:not(.button):focus { background: $grey-1; }
 
 .homepage p { margin: 0; padding: 0; color: $grey-10; }
 
+
+
+/* Meta
+------------------------------------------------------------------- */
+
 .meta-info p {
   font-size: rem-calc(13);
   color: scale-color($grey-1, $lightness: 40%);
@@ -107,6 +123,10 @@ button, .button         { letter-spacing: 1px; }
   }
 
 
+
+/* Accordion
+------------------------------------------------------------------- */
+
 dl.accordion  { border-top: 1px solid $grey-2;  }
 .accordion dd   { border-bottom: 1px solid $grey-2;  }
 dd.accordion-navigation span { padding-right: 12px; }
@@ -114,9 +134,3 @@ dd.accordion-navigation span:before { content: "\F107" }
 dd.accordion-navigation.active span:before { content: "\F105" }
 dd.accordion-navigation.active span:before { content: "\F105" }
 
-.ad-space {
-  border: 1px solid scale-color($grey-1, $lightness: 80%);
-  text-align: center;
-  padding: 15px 0;
-  margin-bottom: rem-calc(20);
-}