Merge pull request #291 from codeschool/style_cleanup

johndjameson · johndjameson · commit 8eae20637308 · 2015-12-05T21:06:08.000-05:00
Style Cleanup
diff --git a/client/stylesheets/application.sass b/client/stylesheets/application.sass
@@ -67,6 +67,7 @@
 //   Vendor
 // -------------------------------------
 
+@import 'vendor/animate'
 @import 'vendor/codemirror'
 @import 'vendor/codemirror-theme'
 @import 'vendor/tooltip'
@@ -75,18 +76,4 @@
 //   Inbox
 // -------------------------------------
 
-// Animations are handled using Angulars ng-animate which adds and
-// removes classes during various phases. If this doesn't work we can
-// do something different, but ng-animate is pretty crazy flexible in the timing
-// in code of where these happen if we need to tweak things.
-.animate--fade.ng-enter,
-.animate--fade.ng-leave
-  // transition: all 1s ease-in-out
-.animate--fade.ng-enter,
-.animate--fade.ng-leave.ng-leave-active
-  display: none
-  // opacity: 0
-.animate--fade.ng-leave,
-.animate--fade.ng-enter.ng-enter-active
-  display: block
-  // opacity: 1
+// ...
diff --git a/client/stylesheets/components/_bucket.sass b/client/stylesheets/components/_bucket.sass
@@ -8,7 +8,7 @@
 //   Template (Haml)
 // -------------------------------------
 //
-// .bucket[flag]
+// .bucket[flag l]
 //
 //   .bucket-media
 //     / ...
@@ -19,7 +19,7 @@
 // *************************************
 
 .bucket
-  @extend .group
+  +group
 
 // -------------------------------------
 //   Modifiers
diff --git a/client/stylesheets/components/_button.sass b/client/stylesheets/components/_button.sass
@@ -10,7 +10,7 @@
 //
 // .has-btn
 //
-// .btn[a|b s|l block bordered|rounded success]
+// .btn[...]
 //
 // *************************************
 
diff --git a/client/stylesheets/components/_cell.sass b/client/stylesheets/components/_cell.sass
@@ -7,7 +7,7 @@
 //   Template (Haml)
 // -------------------------------------
 //
-// .cell[s]
+// .cell[s|m]
 //   / ...
 //
 // *************************************
diff --git a/client/stylesheets/components/_form.sass b/client/stylesheets/components/_form.sass
@@ -12,8 +12,9 @@
 //   %fieldset.form-field[inline]
 //     .form-instruction
 //     %label.form-label
-//     %input.form-input[dark]
+//     %input.form-input[dark](invalid)
 //     %textarea.form-textarea
+//     .form-btn
 //
 // *************************************
 
@@ -125,8 +126,8 @@
 // ----- Textarea ----- //
 
 .form-textarea
-  resize: vertical
   max-height: 40vh // FIXME: Magic number!
+  resize: vertical
 
   +respond-to($g-m)
     max-height: none
diff --git a/client/stylesheets/components/_grid.sass b/client/stylesheets/components/_grid.sass
@@ -9,7 +9,7 @@
 //   Template (Haml)
 // -------------------------------------
 //
-// .g
+// .g[xs|s]
 //
 //   .g-b[center 1of2|...]
 //     / ...
@@ -24,7 +24,7 @@
 // -------------------------------------
 
 #{$g-selector}g
-  @extend .group
+  +group
   display: block
   margin-left: -$g-gutter
 
diff --git a/client/stylesheets/components/_list.sass b/client/stylesheets/components/_list.sass
@@ -8,8 +8,9 @@
 //   Template (Haml)
 // -------------------------------------
 //
-// %ul.list[divided inline|object styled|styled--numbered]
+// %ul.list[[f|s|l] divided[f|s|l] inline[divided|dotted]|object styled|styled--numbered]
 //   %li.list-item List Item
+//     .list-item-header
 //   %li.list-item List Item
 //
 // *************************************
diff --git a/client/stylesheets/components/_pillar.sass b/client/stylesheets/components/_pillar.sass
@@ -7,7 +7,7 @@
 //   Template (Haml)
 // -------------------------------------
 //
-//  .pillar
+//  .pillar[thin|thick l]
 //    / ...
 //
 // *************************************
diff --git a/client/stylesheets/components/_sector.sass b/client/stylesheets/components/_sector.sass
@@ -10,7 +10,10 @@
 // .has-sector
 //
 // .sector[a|b]
+//   .sector-content
+//
 // .sector[a|b]
+//   .sector-content
 //
 // *************************************
 
diff --git a/client/stylesheets/components/_thumb.sass b/client/stylesheets/components/_thumb.sass
@@ -20,5 +20,9 @@
 //   Modifiers
 // -------------------------------------
 
+// ----- Sizes ----- //
+
+// Medium
+
 .thumb--m
   border-radius: $b-borderRadius
diff --git a/client/stylesheets/components/_underline.sass b/client/stylesheets/components/_underline.sass
@@ -8,7 +8,7 @@
 //   Template (Haml)
 // -------------------------------------
 //
-// %a.underline[alt]
+// %a.underline[alt](active)
 //
 // *************************************
 
@@ -35,9 +35,7 @@
     transition: transform $underline-color-transition-duration ease-in-out
     z-index: 1
 
-  &:active,
-  &:focus,
-  &:hover
+  +state
     background: none
 
     &::before
diff --git a/client/stylesheets/components/_well.sass b/client/stylesheets/components/_well.sass
@@ -7,7 +7,7 @@
 //   Template (Haml)
 // -------------------------------------
 //
-// .well[l|xs]
+// .well[s|l|m|xl]
 //   / ...
 //
 // *************************************
diff --git a/client/stylesheets/foundation/_helpers.sass b/client/stylesheets/foundation/_helpers.sass
@@ -95,26 +95,29 @@
   user-select: none
   white-space: nowrap
 
-// ----- Font Face ----- //
-// -> https://github.com/thoughtbot/bourbon/edit/master/app/assets/stylesheets/css3/_font-face.scss#
-//
-// $family - the font-family
-// $path - the font path
-// $weight - the font-weight
-// $style - the font-style
-// $asset-pipeline - use the Rails asset pipeline (boolean)
-
-=font-face($family, $path, $weight: normal, $style: normal, $asset-pipeline: true)
-  @font-face
-    font-family: $family
-    font-style: $style
-    font-weight: $weight
-    @if $asset-pipeline == true
-      src: font-url('#{$path}.eot')
-      src: font-url('#{$path}.eot?#iefix') format('embedded-opentype'), font-url('#{$path}.woff') format('woff'), font-url('#{$path}.ttf') format('truetype'), font-url('#{$path}.svg##{$family}') format('svg')
-    @else
-      src: url('#{$path}.eot')
-      src: url('#{$path}.eot?#iefix') format('embedded-opentype'), url('#{$path}.woff') format('woff'), url('#{$path}.ttf') format('truetype'), url('#{$path}.svg##{$family}') format('svg')
+// ----- Clearfix ----- //
+
+=group
+  &::after
+    clear: both
+    content: ''
+    display: table
+
+// ----- Faux Hide ----- //
+// -> Remove element visibility
+
+=fauxHide
+  opacity: 0
+  overflow: hidden
+  visibility: hidden
+
+// ----- Faux Show ----- //
+// -> Restore element visibility
+
+=fauxShow
+  opacity: 1
+  overflow: visible
+  visibility: visible
 
 // ----- List Reset ----- //
 // -> Removes default list styles
@@ -155,36 +158,8 @@
 
 // ----- Clearfix ----- //
 
-.group::after
-  clear: both
-  content: ''
-  display: table
-
-// ----- Ellipsis ----- //
-
-.ellipsis
-  overflow: hidden
-  text-overflow: ellipsis
-  white-space: nowrap
-
-// ----- Faux Hide ----- //
-
-.fauxHide
-  opacity: 0
-  overflow: hidden
-  visibility: hidden
-
-// ----- Faux Hide ----- //
-
-.fauxShow
-  opacity: 1
-  overflow: visible
-  visibility: visible
-
-// ----- List Reset ----- //
-
-.lr
-  +list-reset
+.group
+  +group
 
 // ----- Semantic Hide ----- //
 
diff --git a/client/stylesheets/structures/_alert.sass b/client/stylesheets/structures/_alert.sass
@@ -7,7 +7,9 @@
 //   Template (Haml)
 // -------------------------------------
 //
-// .alert[error|success|warning]
+// .has-alert
+//
+// .alert[error|success|warning](dismissed)
 //
 //   .alert-msg
 //
@@ -29,13 +31,18 @@
 
 // ----- Types ----- //
 
+// Error
+
 .alert--error
   background: $c-error
 
+// Success
+
 .alert--success
   background: $c-success
 
-.alert--info,
+// Warning
+
 .alert--warning
   background: $c-warning
 
@@ -59,8 +66,8 @@
   position: fixed
   right: 0
   top: 0
-  z-index: 10
   width: 100%
+  z-index: 10
 
   +respond-to($g-m)
     width: em(300px)
diff --git a/client/stylesheets/structures/_completionList.sass b/client/stylesheets/structures/_completionList.sass
@@ -8,14 +8,15 @@
 // -------------------------------------
 //
 // %ul.completionList
-//   %li.completionList-item
+//   %li.completionList-item(active|completed)
+//     .completionList-item-icon
 //     %a.completionList-item-link
 //
 // *************************************
 
 .completionList
-  +list-reset()
-  @extend .group
+  +group
+  +list-reset
 
 // -------------------------------------
 //   Scaffolding
diff --git a/client/stylesheets/structures/_courseLayout.sass b/client/stylesheets/structures/_courseLayout.sass
@@ -7,9 +7,10 @@
 //   Template (Haml)
 // -------------------------------------
 //
-// %html.courseLayout(active)
+// %html.courseLayout(active|loaded)
 //
 //   .courseLayout-header
+//     .courseLayout-header-content
 //     .courseLayout-header-toggle
 //
 //   .courseLayout-main
diff --git a/client/stylesheets/structures/_emblem.sass b/client/stylesheets/structures/_emblem.sass
@@ -8,6 +8,7 @@
 // -------------------------------------
 //
 // .emblem
+//   .emblem-content
 //   .emblem-item
 //
 // *************************************
diff --git a/client/stylesheets/structures/_externalLink.sass b/client/stylesheets/structures/_externalLink.sass
@@ -24,6 +24,8 @@
 //   Scaffolding
 // -------------------------------------
 
+// ----- Icon ----- //
+
 .externalLink-icon
   display: inline-block
   opacity: 0
diff --git a/client/stylesheets/structures/_footer.sass b/client/stylesheets/structures/_footer.sass
@@ -20,8 +20,8 @@
   +respond-to($g-l)
     bottom: 0
     box-sizing: border-box
-    left: 0
     height: $site-footer-height
+    left: 0
     position: absolute
     right: 0
     width: 100%
diff --git a/client/stylesheets/structures/_heading.sass b/client/stylesheets/structures/_heading.sass
@@ -7,7 +7,7 @@
 //   Template (Haml)
 // -------------------------------------
 //
-// .h[1|2|3|4 light]
+// .h[1|2|3|4 light|semibold]
 //
 // *************************************
 
diff --git a/client/stylesheets/structures/_hero.sass b/client/stylesheets/structures/_hero.sass
@@ -20,8 +20,8 @@
     min-height: $hero-minHeight
 
   &::before
-    background: url('/images/img-hero.svg') center bottom no-repeat
     background-size: cover
+    background: url('/images/img-hero.svg') center bottom no-repeat
     bottom: 0
     content: ''
     display: none
diff --git a/client/stylesheets/structures/_inlineConsole.sass b/client/stylesheets/structures/_inlineConsole.sass
@@ -9,8 +9,10 @@
 //
 // .inlineConsole(correct|incorrect)
 //
-//   .inlineConsole-icon
-//   .inlineConsole-input
+//   .inlineConsole-btn
+//   .inlineConsole-card
+//   .inlineConsole-icon(caret|check)
+//   %input.inlineConsole-input
 //
 // *************************************
 
diff --git a/client/stylesheets/structures/_label.sass b/client/stylesheets/structures/_label.sass
diff --git a/client/stylesheets/structures/_layout.sass b/client/stylesheets/structures/_layout.sass
diff --git a/client/stylesheets/structures/_link.sass b/client/stylesheets/structures/_link.sass
diff --git a/client/stylesheets/structures/_newsletter.sass b/client/stylesheets/structures/_newsletter.sass
diff --git a/client/stylesheets/structures/_preloader.sass b/client/stylesheets/structures/_preloader.sass
diff --git a/client/stylesheets/structures/_select.sass b/client/stylesheets/structures/_select.sass
diff --git a/client/stylesheets/structures/_state.sass b/client/stylesheets/structures/_state.sass
diff --git a/client/stylesheets/structures/_video.sass b/client/stylesheets/structures/_video.sass
diff --git a/client/stylesheets/vendor/_animate.sass b/client/stylesheets/vendor/_animate.sass
