Merge branch 'AD-901-add-lint-for-scss' into AD-456-ikonotv-branded-page-for-registra

.scss-lint.yml

@@ -0,0 +1,224 @@
+linters:
+  BangFormat:
+    enabled: true
+    space_before_bang: true
+    space_after_bang: false
+
+  BemDepth:
+    enabled: false
+    max_elements: 1
+
+  BorderZero:
+    enabled: true
+    convention: zero # or `none`
+
+  ColorKeyword:
+    enabled: true
+
+  ColorVariable:
+    enabled: true
+
+  Comment:
+    enabled: true
+
+  DebugStatement:
+    enabled: true
+
+  DeclarationOrder:
+    enabled: true
+
+  DisableLinterReason:
+    enabled: false
+
+  DuplicateProperty:
+    enabled: true
+
+  ElsePlacement:
+    enabled: true
+    style: same_line # or 'new_line'
+
+  EmptyLineBetweenBlocks:
+    enabled: true
+    ignore_single_line_blocks: true
+
+  EmptyRule:
+    enabled: true
+
+  ExtendDirective:
+    enabled: false
+
+  FinalNewline:
+    enabled: true
+    present: true
+
+  HexLength:
+    enabled: true
+    style: short # or 'long'
+
+  HexNotation:
+    enabled: true
+    style: lowercase # or 'uppercase'
+
+  HexValidation:
+    enabled: true
+
+  IdSelector:
+    enabled: true
+
+  ImportantRule:
+    enabled: true
+
+  ImportPath:
+    enabled: true
+    leading_underscore: false
+    filename_extension: false
+
+  Indentation:
+    enabled: true
+    allow_non_nested_indentation: false
+    character: space # or 'tab'
+    width: 4
+
+  LeadingZero:
+    enabled: true
+    style: exclude_zero # or 'include_zero'
+
+  MergeableSelector:
+    enabled: true
+    force_nesting: true
+
+  NameFormat:
+    enabled: true
+    allow_leading_underscore: true
+    convention: hyphenated_lowercase # or 'camel_case', or 'snake_case', or a regex pattern
+
+  NestingDepth:
+    enabled: true
+    max_depth: 3
+    ignore_parent_selectors: false
+
+  PlaceholderInExtend:
+    enabled: true
+
+  PropertyCount:
+    enabled: false
+    include_nested: false
+    max_properties: 10
+
+  PropertySortOrder:
+    enabled: true
+    ignore_unspecified: false
+    min_properties: 2
+    separate_groups: false
+
+  PropertySpelling:
+    enabled: true
+    extra_properties: []
+
+  PropertyUnits:
+    enabled: true
+    global: [
+      'ch', 'em', 'ex', 'rem',                 # Font-relative lengths
+      'cm', 'in', 'mm', 'pc', 'pt', 'px', 'q', # Absolute lengths
+      'vh', 'vw', 'vmin', 'vmax',              # Viewport-percentage lengths
+      'deg', 'grad', 'rad', 'turn',            # Angle
+      'ms', 's',                               # Duration
+      'Hz', 'kHz',                             # Frequency
+      'dpi', 'dpcm', 'dppx',                   # Resolution
+      '%']                                     # Other
+    properties: {}
+
+  QualifyingElement:
+    enabled: true
+    allow_element_with_attribute: false
+    allow_element_with_class: false
+    allow_element_with_id: false
+
+  SelectorDepth:
+    enabled: true
+    max_depth: 3
+
+  SelectorFormat:
+    enabled: true
+    convention: hyphenated_lowercase # or 'strict_BEM', or 'hyphenated_BEM', or 'snake_case', or 'camel_case', or a regex pattern
+
+  Shorthand:
+    enabled: true
+    allowed_shorthands: [1, 2, 3]
+
+  SingleLinePerProperty:
+    enabled: true
+    allow_single_line_rule_sets: true
+
+  SingleLinePerSelector:
+    enabled: true
+
+  SpaceAfterComma:
+    enabled: true
+
+  SpaceAfterPropertyColon:
+    enabled: true
+    style: one_space # or 'no_space', or 'at_least_one_space', or 'aligned'
+
+  SpaceAfterPropertyName:
+    enabled: true
+
+  SpaceAfterVariableName:
+    enabled: true
+
+  SpaceAroundOperator:
+    enabled: true
+    style: one_space # or 'no_space'
+
+  SpaceBeforeBrace:
+    enabled: true
+    style: space # or 'new_line'
+    allow_single_line_padding: false
+
+  SpaceBetweenParens:
+    enabled: true
+    spaces: 0
+
+  StringQuotes:
+    enabled: true
+    style: single_quotes # or double_quotes
+
+  TrailingSemicolon:
+    enabled: true
+
+  TrailingWhitespace:
+    enabled: true
+
+  TrailingZero:
+    enabled: false
+
+  TransitionAll:
+    enabled: false
+
+  UnnecessaryMantissa:
+    enabled: true
+
+  UnnecessaryParentReference:
+    enabled: true
+
+  UrlFormat:
+    enabled: true
+
+  UrlQuotes:
+    enabled: true
+
+  VariableForProperty:
+    enabled: false
+    properties: []
+
+  VendorPrefix:
+    enabled: false
+    identifier_list: base
+    additional_identifiers: []
+    excluded_identifiers: []
+
+  ZeroUnit:
+    enabled: true
+
+  Compass::*:
+    enabled: false

README.md

@@ -32,8 +32,8 @@ Additionally, to work on the white labeling functionality, you need to edit your
 ```
 
 
-Code Conventions
+JavaScript Code Conventions
-================
+===========================
 For this project, we're using:
 
 * 4 Spaces
@@ -42,6 +42,15 @@ For this project, we're using:
 * We don't use camel case for file naming but in everything Javascript related
 * We use `let` instead of `var`: [SA Post](http://stackoverflow.com/questions/762011/javascript-let-keyword-vs-var-keyword) 
 
+
+SCSS Code Conventions
+=====================
+Install [lint-scss](https://github.com/brigade/scss-lint), check the [editor integration docs](https://github.com/brigade/scss-lint#editor-integration) to integrate the lint in your editor.
+
+Some interesting links:
+* [Improving Sass code quality on theguardian.com](https://www.theguardian.com/info/developer-blog/2014/may/13/improving-sass-code-quality-on-theguardiancom)
+
+
 Testing
 ===============
 We're using Facebook's jest to do testing as it integrates nicely with react.js as well.

js/components/whitelabel/prize/components/prize_settings_container.js

@@ -190,7 +190,7 @@ let PrizeJurySettings = React.createClass({
                                 {getLangText('RESEND')}
                             </button>
                             <button
-                                className="btn btn-default btn-sm ascribe-btn-gray margin-left-2px"
+                                className="btn btn-warning btn-sm margin-left-2px"
                                 onClick={this.handleRevoke}
                                 data-id={member.email}>
                                 {getLangText('REVOKE')}
@@ -218,7 +218,7 @@ let PrizeJurySettings = React.createClass({
                     }
                     buttons={
                         <button
-                            className="btn btn-default btn-sm ascribe-btn-gray"
+                            className="btn btn-warning btn-sm"
                             onClick={this.handleRevoke}
                             data-id={member.email}>
                             {getLangText('REVOKE')}

sass/ascribe_accordion_list.scss

@@ -1,5 +1,4 @@
 $ascribe-accordion-list-item-height: 8em;
-$ascribe-accordion-list-font: 'Source Sans Pro';
 
 .ascribe-accordion-list {
     padding-left: 15px;
@@ -11,68 +10,77 @@ $ascribe-accordion-list-font: 'Source Sans Pro';
     border: 1px solid black;
     height: $ascribe-accordion-list-item-height;
 
-    padding-left:0;
+    padding-left: 0;
-    padding-right:0;
+    padding-right: 0;
     margin-top: 1.5em;
-    &::first-child {
+    overflow: hidden;
-        margin-top:0;
-    }
 
-    overflow:hidden;
-
-    border-left: 0.1em solid rgba(0,0,0,.2);
-    border-right: 0.1em solid rgba(0,0,0,.2);
-    border-top: 0.1em solid rgba(0,0,0,.2);
     border-radius: 1px;
-    border-bottom: 0.1em solid rgba(0,0,0,.2);
+    border-left: .1em solid rgba(0, 0, 0, .2);
-    .wrapper {
+    border-right: .1em solid rgba(0, 0, 0, .2);
-        &:hover{
+    border-top: .1em solid rgba(0, 0, 0, .2);
-            background-color: rgba(2, 182, 163, 0.05);
+    border-bottom: .1em solid rgba(0, 0, 0, .2);
+
+    &::first-child {
+        margin-top: 0;
     }
-        width:100%;
+
-        height:100%;
+    .wrapper {
+        height: 100%;
+        width: 100%;
+
+        &:hover {
+            background-color: rgba(2, 182, 163, .05);
+        }
+
         // ToDo: Include media queries for thumbnail
         .thumbnail-wrapper {
-            width: 110px;
-            height: 110px;
-            padding:0;
             cursor: pointer;
+            height: 110px;
+            padding: 0;
             text-align: center;
+            width: 110px;
+
             img {
-                max-width: 100%;
                 max-height: 100%;
+                max-width: 100%;
             }
+
             &::before {
                 content: ' ';
                 display: inline-block;
-                    vertical-align: middle; /* vertical alignment of the inline element */
                 height: 100%;
+                vertical-align: middle; // vertical alignment of the inline element
             }
         }
+
         h1 {
-            margin: .1em 0 .1em 0;
+            cursor: pointer;
             font-size: 2.2em;
-            cursor: pointer;
+            margin: .1em 0;
-            white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
+            white-space: nowrap;
         }
+
         h3 {
-            font-size: 1.3em;
-            margin: .2em 0 .3em 0;
             cursor: pointer;
-            white-space: nowrap;
+            font-size: 1.3em;
+            margin: .2em 0 .3em;
             overflow: hidden;
             text-overflow: ellipsis;
+            white-space: nowrap;
         }
+
         a:not(.btn) {
             color: #666;
         }
+
     }
 }
 
 .accordion-list-item-header {
-    margin-top:.65em;
+    margin-top: .65em;
 
     > a {
         text-decoration: none;
@@ -85,46 +93,47 @@ $ascribe-accordion-list-font: 'Source Sans Pro';
 }
 
 .ascribe-accordion-list-item-table {
-    font-size: .9em;
-    text-align: center;
     background-color: white;
-
+    border-bottom: .1em solid rgba(0, 0, 0, .15);
-    //border-bottom-left-radius: 1px;
+    border-left: .1em solid rgba(0, 0, 0, .2);
-    //border-bottom-right-radius: 1px;
+    border-right: .1em solid rgba(0, 0, 0, .2);
-    border-bottom: 0.1em solid rgba(0,0,0,.15);
+    font-size: .9em;
-    border-left: 0.1em solid rgba(0,0,0,.2);
-    border-right: 0.1em solid rgba(0,0,0,.2);
     padding: 0;
+    text-align: center;
+
     thead:first-child {
+        border-bottom: 1px solid rgba(0, 0, 0, .05);
+        border-left: 3px solid rgba(0, 0, 0, 0);
+
         tr:first-child {
-            border: none! important;
+            border: none !important;
             th {
+                border: none !important;
                 padding-left: 10px;
-                border: none! important;
             }
         }
-        border-left: 3px solid rgba(0,0,0,0);
-        //border-top: 1px solid rgba(0,0,0,.1);
-        border-bottom: 1px solid rgba(0,0,0,.05);
     }
+
     tbody {
         tr {
+            border-bottom: 1px solid rgba(0, 0, 0, .03);
+            border-left: 3px solid rgba(0, 0, 0, 0);
             padding: 1em;
-            &:hover{
+
+            &:hover {
                 background-color: rgba(2, 182, 163, 0.05);
                 border-left: 3px solid rgba(2, 182, 163, 0.4);
             }
-            border-left: 3px solid rgba(0,0,0,0);
+
-            border-bottom:  1px solid rgba(0,0,0,.03);
             td {
-                border: none! important;
+                border: none !important;
                 a {
-                    color: #444
+                    color: #444;
+                }
+            }
         }
 
-            }
+        tr {
-        }
-        tr{
             td:first-child {
                 margin-left: 10px;
             }
@@ -132,48 +141,51 @@ $ascribe-accordion-list-font: 'Source Sans Pro';
     }
 }
 
-span.ascribe-accordion-list-table-toggle {
+.ascribe-accordion-list-table-toggle {
-    -webkit-user-select: none;
-    -moz-user-select: none;
     -khtml-user-select: none;
+    -moz-user-select: none;
     -ms-user-select: none;
+    -webkit-user-select: none;
 
     &:hover {
         color: $ascribe-color-green;
-        cursor:pointer;
+        cursor: pointer;
     }
 }
 
 .ascribe-accordion-list-table-list {
     margin-bottom: .5em;
-    th, td {
+
-      font-size:.85em;
+    th,
+    td {
+        font-size: .85em;
         text-align: center;
     }
 }
 
 .request-action-badge {
-    position: absolute;
-    top: 0px;
-    right: 0px;
     color: $ascribe-color-green;
     font-size: 1.2em;
-    padding: 0.3em;
+    padding: .3em;
+    position: absolute;
+    right: 0;
+    top: 0;
 }
 
 .ascribe-accordion-list-item-edition-widget {
     cursor: pointer;
 
-    -webkit-user-select: none;
-    -moz-user-select: none;
     -khtml-user-select: none;
+    -moz-user-select: none;
     -ms-user-select: none;
+    -webkit-user-select: none;
 
     &:hover {
         color: $ascribe-color-green;
     }
+
     .glyphicon {
+        font-size: .8em;
         top: 1px !important;
-        font-size: 0.8em;
     }
 }

sass/ascribe_button.scss

@@ -1,9 +0,0 @@
-.ascribe-btn-gray {
-    border-color: #CCCCCC;
-    background-color: #CCCCCC;
-
-    &:hover{
-        border-color: #AAAAAA;
-        background-color: #AAAAAA;
-    }
-}

sass/ascribe_edition.scss

@@ -5,44 +5,46 @@
 
 .ascribe-edition-collapsible-wrapper {
     vertical-align: bottom;
-    width:100%;
-}
-
-.ascribe-edition-collapsible-wrapper > div:first-child {
     width: 100%;
+
+    > div:first-child {
+        background-color: rgba(0, 0, 0, 0);
         cursor: pointer;
-    background-color: rgba(0,0,0,0);
-    padding: 0 10px 10px 0;
         margin-top: 20px;
-}
+        padding: 0 10px 10px 0;
-.ascribe-edition-collapsible-wrapper > div > span {
+        width: 100%;
+    }
+
+    > div > span {
         font-size: 1.2em;
         margin-right: .5em;
-}
+    }
-.ascribe-edition-collapsible-wrapper > div > span:nth-child(2) {
+
-    font-size: 0.9em;
+    > div > span:nth-child(2) {
+        font-size: .9em;
+    }
 }
 
 .ascribe-edition-collapsible-content {
-    width:100%;
     background: none;
-    border: none;
+    border: 0;
+    width: 100%;
 }
 
 .coa-file-wrapper {
     display: table;
     height: 200px;
-    overflow: hidden;
     margin: 0 auto;
-    width: 100%;
+    overflow: hidden;
     padding: 1em;
+    width: 100%;
 }
 
 .coa-file {
+    background-color: #F8F8F8;
+    border: 1px solid #CCC;
     display: table-cell;
     vertical-align: middle;
-    border: 1px solid #CCC;
-    background-color: #F8F8F8;
 }
 
 .ascribe-button-list {

sass/ascribe_footer.scss

@@ -1,17 +1,32 @@
 
 .ascribe-footer {
     text-align: center;
-}
 
-.ascribe-footer hr {
+    hr {
-    border: 0;
+        background-color: rgba(0, 0, 0, 0);
         border-top: 1px solid #eee;
-    background-color: rgba(0,0,0,0);
+        border: 0;
         margin-bottom: 0 !important;
-}
+    }
 
-.ascribe-footer .btn-ascribe-landing {
+    .btn-ascribe-landing {
         margin-top: 2em;
+    }
+
+    .social-icons-wrapper {
+        margin-top: 1em;
+
+        a {
+            color: #424242;
+            font-size: 1.3em;
+            margin-left: 1em;
+        }
+
+        a:hover {
+            color: #48DACB;
+        }
+    }
+
 }
 
 .ascribe-footer-statement {
@@ -21,7 +36,8 @@
     margin-top: 0;
 }
 
-.ascribe-footer-statement a, .ascribe-footer-sub-statement a {
+.ascribe-footer-statement a,
+.ascribe-footer-sub-statement a {
     color: #424242;
 }
 
@@ -30,23 +46,7 @@
     margin-bottom: 2.5em;
 }
 
-.ascribe-footer-statement a, .ascribe-footer-sub-statement a {
+.ascribe-footer-statement a:hover,
-    color: #424242;
+.ascribe-footer-sub-statement a:hover {
-}
+    color: #48dacb;
-.ascribe-footer-statement a:hover, .ascribe-footer-sub-statement a:hover {
-    color: #48DACB;
-}
-
-.ascribe-footer .social-icons-wrapper {
-    margin-top: 1em;
-}
-
-.ascribe-footer .social-icons-wrapper a {
-    color: #424242;
-    margin-left: 1em;
-    font-size: 1.3em;
-}
-
-.ascribe-footer .social-icons-wrapper a:hover {
-    color: #48DACB;
 }

sass/ascribe_form.scss

@@ -1,24 +1,25 @@
 .ascribe-form-bordered {
-    border: 1px solid #F5F5F5;
+    border: 1px solid #f5f5f5;
 }
 
 .ascribe-form-header {
-    padding-bottom: 0;
-    margin-bottom: 0;
     background-color: white;
-}
-
-.ascribe-form-header > h3 {
-    padding: .75em 0 .75em 1em;
-    margin-top: 0;
     margin-bottom: 0;
+    padding-bottom: 0;
+
+    > h3 {
         color: #616161;
+        margin-bottom: 0;
+        margin-top: 0;
+        padding: .75em 0 .75em 1em;
+    }
 }
 
 .ascribe-form-wrapper {
-    width: 80%;
     margin: 0 auto;
     max-width: 600px;
+    width: 80%;
+
     @media (max-width: 550px) {
         width: 100%;
     }

sass/ascribe_global_notification.scss

@@ -1,14 +1,12 @@
 .ascribe-global-notification {
-    position: fixed;
-    
     background-color: #212121;
     color: white;
+    display: table;
+    height: 3.5em;
+    left: 0;
+    position: fixed;
+    transition: .2s bottom cubic-bezier(.77, 0, .175, 1);
     width: 100%;
-    height:3.5em;
-    left:0;
-    display:table;
-
-    transition: .2s bottom cubic-bezier(0.77, 0, 0.175, 1);
 }
 
 .ascribe-global-notification-off {
@@ -19,34 +17,29 @@
     bottom: 0;
 }
 
-.ascribe-global-notification > div, .ascribe-global-notification-bubble > div {
+.ascribe-global-notification > div,
-    display:table-cell;
-    vertical-align: middle;
-    font-size: 1.25em;
-    font-family: 'Source Sans Pro';
-    text-align: right;
-    padding-right: 3em;
-}
-
 .ascribe-global-notification-bubble > div {
-    padding: .75em 1.5em .75em 1.5em;
+    display: table-cell;
+    font-size: 1.25em;
+    padding-right: 3em;
+    text-align: right;
+    vertical-align: middle;
 }
 
 .ascribe-global-notification-bubble {
-    position: fixed;
-    bottom: 3em;
-    right: -50em;
-
-    display:table;
-
-    height: 3.5em;
-
     background-color: #212121;
     border-radius: 2px;
-
+    bottom: 3em;
     color: white;
-
+    display: table;
+    height: 3.5em;
+    position: fixed;
+    right: -50em;
     transition: 1s right ease;
+
+    > div {
+        padding: .75em 1.5em;
+    }
 }
 
 .ascribe-global-notification-bubble-off {

sass/ascribe_login.scss

@@ -2,26 +2,28 @@ $break-small: 764px;
 
 
 .ascribe-btn-login {
-  padding: 0.5em;
-  font-weight: 500;
-  text-align: center;
     background-color: rgba(2, 182, 163, 1);
+    border: none;
+    border-radius: 0;
     color: white;
     font-size: 1.2em;
-  border-radius: 0;
+    font-weight: 500;
+    padding: .5em;
+    text-align: center;
     width: 100%;
-  border:none;
     //margin-left: 1.2em;
 
     &:hover {
+        background-color: rgba(2, 182, 163, .8);
+        border: 0;
         color: white;
-    background-color: rgba(2, 182, 163, 0.8);
-    border: none;
     }
-  &:active, &:focus {
+
+    &:active,
+    &:focus {
+        background-color: rgba(2, 182, 163, .6);
+        border: 0;
         color: white;
-    background-color: rgba(2, 182, 163, 0.6);
-    border: none;
     }
 
     &[disabled] {
@@ -29,49 +31,54 @@ $break-small: 764px;
     }
 }
 
-.ascribe-btn-login-spinner{
+.ascribe-btn-login-spinner {
-  background-color: rgba(2, 182, 163, 0.4);
+    background-color: rgba(2, 182, 163, .4);
-  padding: 0.4em;
+    padding: .4em;
+
     img {
         height: 1.6em;
     }
+
     &:hover {
-    background-color: rgba(2, 182, 163, 0.4);
+        background-color: rgba(2, 182, 163, .4);
     }
-  &:active, &:focus {
+
-    background-color: rgba(2, 182, 163, 0.4);
+    &:active,
+    &:focus {
+        background-color: rgba(2, 182, 163, .4);
     }
 }
 
 
 .ascribe-login-wrapper {
-  width: 80%;
     margin: 0 auto;
     max-width: 600px;
+    width: 80%;
+
     @media screen and (max-width: $break-small) {
         width: 100%;
     }
 }
 
 .ascribe-login-text {
-  font-size: 0.8em;
+    color: rgba(0, 0, 0, .6);
-  padding: 0 0 1em 0;
+    font-size: .8em;
-  margin-left: 0.4em;
+    margin-left: .4em;
     margin-top: 1.5em;
-  color: rgba(0, 0, 0, 0.6);
+    padding: 0 0 1em;
 }
 
 .ascribe-login-header {
     font-size: 2em;
-  margin-left: 0.8em;
+    margin-left: .8em;
 }
 
 .ascribe-form {
     hr {
-    color: rgba(0, 0, 0, 0.05);
+        background-color: rgba(0, 0, 0, .05);
-    border: none;
+        border: 0;
+        color: rgba(0, 0, 0, .05);
         height: 1px;
-    background-color: rgba(0, 0, 0, 0.05);
         margin-top: 0;
     }
 }
@@ -79,7 +86,7 @@ $break-small: 764px;
 %vertical-align {
     position: relative;
     top: 50%;
-  -webkit-transform: translateY(-50%);
     -ms-transform: translateY(-50%);
+    -webkit-transform: translateY(-50%);
     transform: translateY(-50%);
 }

sass/ascribe_media_player.scss

@@ -3,36 +3,36 @@
 
     video,
     img {
-        max-width: 100%;
-        max-height: 640px;
-        width: auto;
-        height: auto;
         display: block;
+        height: auto;
         margin: 0 auto;
+        max-height: 640px;
+        max-width: 100%;
+        width: auto;
     }
 
     .media-other {
-        font-size: 500%;
         color: #cccccc;
+        font-size: 500%;
     }
 
     .audiojs {
-        margin: 50px auto;
         background-image: none;
-    }
+        margin: 50px auto;
-
+        * {
-    .audiojs * {
             box-sizing: content-box;
         }
 
-    .audiojs .loaded {
+        .loaded {
             background-color: $ascribe-color-green;
             background-image: none;
         }
-    .audiojs .progress {
+
-        background-color: rgba(255,255,255,0.8);
+        .progress {
+            background-color: rgba(255, 255, 255, .8);
             background-image: none;
         }
+    }
 
     .video-js,
     .vjs-poster {
@@ -44,12 +44,13 @@
     }
 
     .vjs-fullscreen {
-        padding-top: 0px;
+        padding-top: 0;
-    }
 
-    .vjs-fullscreen video {
+        video {
             max-height: 100%;
         }
+    }
+
 
     .vjs-default-skin .vjs-play-progress,
     .vjs-default-skin .vjs-volume-level {
@@ -57,41 +58,35 @@
     }
 
     .vjs-default-skin .vjs-big-play-button {
-        border-radius: 6px;
+        background-color: rgba(0, 0, 0, .8);
-        -o-border-radius: 6px;
+        border: 0;
         -moz-border-radius: 6px;
+        -o-border-radius: 6px;
         -webkit-border-radius: 6px;
-
+        border-radius: 6px;
-        box-shadow: none;
-        -o-box-shadow: none;
         -moz-box-shadow: none;
+        -o-box-shadow: none;
         -webkit-box-shadow: none;
-
+        box-shadow: none;
-        width: 100px;
         height: 60px;
-        top: 50%;
         left: 50%;
         margin: -30px -50px;
-
+        top: 50%;
-        border: none;
+        width: 100px;
-
-        background-color: rgba(0,0,0,.8);
     }
 
     .vjs-default-skin:hover .vjs-big-play-button,
     .vjs-default-skin .vjs-big-play-button:focus {
+        background-color: rgba(0, 0, 0, .9);
         border-color: #fff;
-        background-color: rgba(0,0,0,.9);
-
-        box-shadow: none;
-        -o-box-shadow: none;
         -moz-box-shadow: none;
+        -o-box-shadow: none;
         -webkit-box-shadow: none;
-
+        box-shadow: none;
-        transition: all 0s;
-        -o-transition: all 0s;
         -moz-transition: all 0s;
+        -o-transition: all 0s;
         -webkit-transition: all 0s;
+        transition: all 0s;
     }
 
     .vjs-default-skin .vjs-big-play-button:before {
@@ -108,7 +103,7 @@
     }
 
     .vjs-default-skin .vjs-control-bar {
-        background-color: rgba(0,0,0,.7);
+        background-color: rgba(0, 0, 0, .7);
     }
 }
 

sass/ascribe_panel.scss

@@ -1,13 +1,12 @@
 .ascribe-panel-wrapper {
-    border: 1px solid #DDD;
+    border: 1px solid #ddd;
-    min-height: 5em;
     height: 5em;
-
     margin-top: 1em;
+    min-height: 5em;
 
     > div {
-        height: 100%;
         float: left;
+        height: 100%;
 
         &:first-child {
             width: 60%;
@@ -20,7 +19,7 @@
 }
 
 .ascribe-panel-table {
-    display:table;
+    display: table;
 
     > .ascribe-panel-content {
         display: table-cell;
@@ -32,7 +31,6 @@
             > div {
                 padding-left: 1em;
             }
-            
         }
 
         &:nth-child(2) {
@@ -40,7 +38,7 @@
                 padding-right: 1em;
 
                 > button {
-                    float:right;
+                    float: right;
                 }
             }
         }
@@ -52,7 +50,6 @@
             > div {
                 padding-left: 2em;
             }
-            
         }
 
         &:nth-child(2) {
@@ -60,7 +57,7 @@
                 padding-right: 2em;
 
                 > button {
-                    float:right;
+                    float: right;
                 }
             }
         }
@@ -73,8 +70,8 @@
     }
 
     .ascribe-panel-subtitle {
+        color: rgba(0, 0, 0, .5);
         font-size: .7em;
-        color: rgba(0,0,0,0.5);
     }
 
 }
@@ -85,8 +82,8 @@
     }
 
     .ascribe-panel-subtitle {
+        color: rgba(0, 0, 0, .5);
         font-size: .9em;
-        color: rgba(0,0,0,0.5);
     }
 }
 

sass/ascribe_piece_list_bulk_modal.scss

@@ -1,20 +1,17 @@
 .ascribe-piece-list-bulk-modal {
-    position: fixed;
+    background-color: #fafafa;
-    top:0;
+    border-bottom: .2em solid #e0e0e0;
-    left: 3%;
-    width:94%;
-
-    background-color: #FAFAFA;
-
-    border-left: 0.1em solid #E0E0E0;
-    border-right: 0.1em solid #E0E0E0;
-    border-top: 0.1em solid #E0E0E0;
     border-bottom-left-radius: 5px;
     border-bottom-right-radius: 5px;
-    border-bottom: 0.2em solid #E0E0E0;
+    border-left: .1em solid #e0e0e0;
-    z-index:1000;
+    border-right: .1em solid #e0e0e0;
-    
+    border-top: .1em solid #e0e0e0;
+    left: 3%;
     padding-bottom: 1em;
+    position: fixed;
+    top: 0;
+    width: 94%;
+    z-index: 1000;
 }
 
 @media(min-width:1174px){
@@ -25,6 +22,6 @@
 }
 
 .piece-list-bulk-modal-clear-all {
+    cursor: pointer;
     text-decoration: underline;
-    cursor:pointer;
 }

sass/ascribe_piece_list_toolbar.scss

@@ -6,6 +6,7 @@
 
 .search-bar {
     max-width: 200px;
+
     input {
         height: 33px;
     }
@@ -13,37 +14,45 @@
 
 .ascribe-input-glyph > .form-group > .input-group {
     margin-left: 6px;
+
     input {
-        box-shadow: none;
         background-color: transparent;
         border: 1px solid #02b6a3;
         border-right: 0;
+        box-shadow: none;
     }
+
     > .input-group-addon {
         background-color: transparent;
+
         > .filter-glyph {
             color: #02b6a3;
         }
+
         border: 1px solid #02b6a3;
         border-left: 0;
     }
 }
 
 .ascribe-piece-list-toolbar-filter-widget {
+
     button {
-        background-color: rgba(0,0,0,0);
+        background-color: rgba(0, 0, 0, 0);
+        border: 1px solid rgba(0, 0, 0, 0);
         color: #02b6a3;
-        border: 1px solid rgba(0,0,0,0);
         padding: 6px 4px 6px 8px;
-        &:hover, &:active {
+
+        &:hover,
+        &:active {
             background-color: #02b6a3 !important;
-            color: white;
             border: 1px solid #02b6a3 !important;
+            color: white;
         }
         .caret {
             display: none;
         }
     }
+
     .filter-widget-item {
 
         > a {
@@ -53,23 +62,22 @@
     }
 
     .checkbox-line {
-        position: relative;
         height: 25px;
+        position: relative;
 
         span {
-            position: absolute;
-            left: 9px;
-            top: 3px;
             cursor: pointer;
-
+            left: 9px;
             margin-right: 10px;
+            position: absolute;
+            top: 3px;
         }
 
         input {
-            position: absolute;
-            top: 2px;
-            right: 9px;
             margin-left: 10px;
+            position: absolute;
+            right: 9px;
+            top: 2px;
         }
     }
 }

sass/ascribe_piece_register.scss

@@ -9,8 +9,9 @@ $break-medium: 991px;
         max-width: 1200px;
     }
     margin: 0 auto;
+
+    > div {
+        padding-left: 0;
+    }
 }
 
-.ascribe-row > div {
-    padding-left: 0;
-}

sass/ascribe_settings.scss

@@ -1,98 +1,108 @@
-.settings-container{
+.settings-container {
-    max-width: 600px;
     margin: auto;
+    max-width: 600px;
 }
 
 .ascribe-settings-wrapper {
-    width: 100%;
-    text-align: center;
-    padding-bottom: 1em;
-
     background-color: white;
-
+    border-left: 3px solid rgba(0, 0, 0, 0);
-    border-left: 3px solid rgba(0,0,0,0);
+    padding-bottom: 1em;
+    text-align: center;
+    width: 100%;
 
     &div:last-of-type {
-        border-bottom: 1px solid rgba(0,0,0,.05);
+        border-bottom: 1px solid rgba(0, 0, 0, .05);
     }
-    &:hover{
+
-      border-left: 3px solid rgba(2, 182, 163, 0.4);
+    &:hover {
+      border-left: 3px solid rgba(2, 182, 163, .4);
     }
 }
 
-.is-hidden{
+.is-hidden {
     display: none;
 }
 
 .is-focused {
-    background-color: rgba(2, 182, 163, 0.05);
+    background-color: rgba(2, 182, 163, .05);
     border-left: 3px solid rgba(2, 182, 163, 1) !important;
 }
 
 .is-error {
-    background-color: rgba(169, 68, 66, 0.05);
+    background-color: rgba(169, 68, 66, .05);
     border-left: 3px solid rgba(169, 68, 66, 1);
+
     > div {
         > span {
             color: rgba(169, 68, 66, 1);
-            font-size: 0.9em;
+            font-size: .9em;
             margin-right: 1em;
         }
-        > input, > textarea {
+
+        > input,
+        > textarea {
             color: #666;
         }
     }
 
-    &:hover{
+    &:hover {
       border-left: 3px solid rgba(169, 68, 66, 1);
     }
 }
 
 .is-fixed {
     cursor: default;
+
     > div {
         cursor: default;
+
         > span {
             cursor: default;
         }
-        > input, > div, > pre, > textarea {
+
-            cursor: default;
+        > input,
+        > div,
+        > pre,
+        > textarea {
             color: #666;
+            cursor: default;
         }
     }
 }
 
 .ascribe-settings-property {
+    border-top: 1px solid rgba(0, 0, 0, .05);
+    cursor: pointer;
     display: inline-block;
-    width: 100%;
-    text-align: left;
-    border-top: 1px solid rgba(0,0,0,.05);
-
-    padding-top: 1em;
     padding-left: 1.5em;
     padding-right: 1.5em;
+    padding-top: 1em;
+    text-align: left;
+    width: 100%;
 
-    cursor:pointer;
+    > div,
-    
+    > input,
-    > input, > div, > span:not(.glyphicon), > pre, > textarea, > select {
+    > pre,
+    > select,
+    > span:not(.glyphicon),
+    > textarea {
         font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     }
 
     > span {
+        color: rgba(0, 0, 0, .5);
+        font-size: .9em;
         font-weight: normal;
-        font-size: 0.9em;
-        color: rgba(0,0,0,.5);
     }
 
     > div {
-        /* margin-top: 10px; */
         > div:not(.file-drag-and-drop div) {
-          padding-left: 0;
-          font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-          font-weight: normal;
-          font-size: 1.1em;
-          cursor: default;
             color: rgba(0, 0, 0, .5);
+            cursor: default;
+            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+            font-size: 1.1em;
+            font-weight: normal;
+            padding-left: 0;
         }
     }
 
@@ -100,29 +110,34 @@
         margin-top: 0 !important;
     }
 
-    > input, > pre, > textarea, > select, .datepicker__input {
+    > input,
-        font-weight: 400;
+    > pre,
-        font-size: 1.1em;
+    > textarea,
-        width:100%;
+    > select,
-        margin-top: .5em;
+    .datepicker__input {
+        background-color: rgba(0, 0, 0, 0);
         border: 0;
-        background-color: rgba(0,0,0,0);
-        color: rgba(0,0,0,.8);
-        padding-left: 0;
         box-shadow: none;
+        color: rgba(0, 0, 0, .8);
+        font-size: 1.1em;
+        font-weight: 400;
+        margin-top: .5em;
+        padding-left: 0;
+        width: 100%;
 
         &:focus {
-            border:0;
+            border: 0;
-            outline:0;
             box-shadow: none;
+            outline: 0;
         }
 
         &::selection {
+            background-color: rgba(0, 0, 0, 1);
             color: white;
-            background-color: rgba(0,0,0,1);
         }
 
     }
+
     .datepicker__input {
         padding: 0;
     }
@@ -135,77 +150,74 @@
 }
 
 .ascribe-property-footer {
-    font-size: 0.8em;
+    font-size: .8em;
     margin-top: 10px;
     width: 100%;
 }
 
 .ascribe-settings-property-collapsible-toggle {
-    text-align: left;
+    border-top: 1px solid rgba(0, 0, 0, .05);
     display: inline-block;
+    padding: .5em 1.5em;
+    text-align: left;
     width: 100%;
-    border-top: 1px solid rgba(0,0,0,.05);
-
-    padding: .5em 1.5em .5em 1.5em;
 }
 
 .ascribe-checkbox-wrapper{
-    .checkbox > span {color: black;}
+    .checkbox > span {
+        color: black;
+    }
 }
 
 .ascribe-settings-property-collapsible-toggle, .ascribe-checkbox-wrapper {
+    cursor: pointer;
 
-    cursor:pointer;
+    // Taken from: http://www.htmllion.com/css3-checkbox.html
-
-    /* Taken from: http://www.htmllion.com/css3-checkbox.html */
     .checkbox {
         display: inline-block;
-
         font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-        font-weight: normal;
         font-size: .9em;
-        vertical-align:middle;
+        font-weight: normal;
+        vertical-align: middle;
 
         > span {
+            left: 5px;
             position: relative;
             top: 1px;
-            left: 5px;
 
-            -webkit-user-select: none;
-            -moz-user-select: none;
             -khtml-user-select: none;
+            -moz-user-select: none;
             -ms-user-select: none;
+            -webkit-user-select: none;
         }
     }
 
-    input[type=checkbox] {
+    [type=checkbox] {
-        display:none; 
+        display: none;
     }
 
     .checkbox:before {
+        background-color: white;
+        border: 1px solid rgba(0, 0, 0, .5);
+        border-radius: 1px;
+        color: #f3f3f3;
         content: "";
         display: inline-block;
-        width: 17px;
         height: 17px;
-        vertical-align:middle;
-        background-color: white;
-        color: #f3f3f3;
         text-align: center;
-
+        vertical-align: middle;
-        border-radius: 1px;
+        width: 17px;
-        border: 1px solid rgba(0, 0, 0, .5);
     }
 
-    input[type=checkbox]:checked + .checkbox:before {
+    [type=checkbox]:checked + .checkbox:before {
-        line-height: .8;
+        color: rgba(2, 182, 163, 1);
-
         content: "\2713";
         font-size: 20px;
-        color: rgba(2, 182, 163, 1);
+        line-height: .8;
     }
 }
 
-.ascribe-checkbox-badge{
+.ascribe-checkbox-badge {
     > span > span {
         margin-top: 0;
     }

sass/ascribe_slides_container.scss

@@ -6,40 +6,41 @@
 }
 
 .ascribe-sliding-container {
-    transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1);
     padding-left: 0;
     padding-right: 0;
+    transition: transform 1s cubic-bezier(.23, 1, .32, 1);
 }
 
 .ascribe-slide {
-    position: relative;
+    float: left;
     min-height: 1px;
-    float:left;
+    position: relative;
 }
 
-.ascribe-breadcrumb-container{
+.ascribe-breadcrumb-container {
     div:last-child {
         .ascribe-breadcrumb {
-            border-right: 1px solid #EEE;
+            border-right: 1px solid #eee;
         }
     }
 }
 
 .ascribe-breadcrumb {
-    padding: 1em;
-    border: 1px solid #EEE;
-    border-right: 1px solid rgba(0, 0, 0, 0);
-    margin-bottom: 0.6em;
     background-color: white;
+    border: 1px solid #eee;
+    border-right: 1px solid rgba(0, 0, 0, 0);
+    margin-bottom: .6em;
+    padding: 1em;
 
     .active {
         color: #666;
     }
+
     a {
-        color: #DDD;
+        color: #ddd;
-        text-decoration: none;
         font-size: 1.1em;
         font-style: italic;
+        text-decoration: none;
     }
 }
 

sass/ascribe_table.scss

@@ -1,11 +1,11 @@
 .ascribe-table {
-    margin-bottom:0;
+    margin-bottom: 0;
     font-size: 1.1em;
 }
 
-/*This is aligning the first checkbox in pieclist detail with all the other ones*/
+// This is aligning the first checkbox in pieclist detail with all the other ones
 .table > thead:first-child > tr:first-child > th {
-    padding-left:0;
+    padding-left: 0;
 }
 
 
@@ -14,36 +14,34 @@
 }
 
 .ascribe-table-header-column > span {
-    display: table-cell;
-    vertical-align: middle;
-    font-family: 'Source Sans Pro';
-    font-weight: 600;
     color: #424242;
+    display: table-cell;
+    font-weight: 600;
+    vertical-align: middle;
 }
 
 .ascribe-table-item-column {
-    font-family: 'Source Sans Pro';
+    display: table-cell;
     font-size: .8em;
-    height:3em;
+    height: 3em;
     vertical-align: middle;
-    display: table-cell;
-}
 
-.ascribe-table-item-column > * {
+    > * {
         display: table-cell;
-    vertical-align: middle;
-    white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
-}
+        vertical-align: middle;
+        white-space: nowrap;
+    }
 
-.ascribe-table-item-column > span > input {
+    > span > input {
-    margin-top:10px;
+        margin-left: 2px;
-    margin-left:2px;
+        margin-top: 10px;
+    }
 }
 
 .ascribe-table-item-selected {
-    background-color: rgba(2, 182, 163, 0.5);
+    background-color: rgba(2, 182, 163, .5);
 }
 
 .ascribe-table-item-selectable {

sass/ascribe_textarea.scss

@@ -1,24 +1,23 @@
 .ascribe-textarea {
-    border: none;
+    border: 0;
     box-shadow: none;
     margin-bottom: 1em;
 }
 
 .ascribe-textarea-editable:hover {
-    //border: 1px solid #AAA;;
+    border: 0;
-    border: none;
 }
 
-.ascribe-pre{
+.ascribe-pre {
-    word-break: break-word;
-    white-space: pre-wrap;
-    white-space: -moz-pre-wrap;
-    white-space: -pre-wrap;
-    white-space: -o-pre-wrap;
-    font-family: inherit;
-    text-align: justify;
     background-color: white;
-    border: none;
+    border: 0;
+    font-family: inherit;
+    margin: 0;
     padding: 0;
-    margin:0;
+    text-align: justify;
+    white-space: -moz-pre-wrap;
+    white-space: -o-pre-wrap;
+    white-space: -pre-wrap;
+    white-space: pre-wrap;
+    word-break: break-word;
 }

sass/ascribe_theme.scss

@@ -1,15 +1,15 @@
-/* All bootstrap overwrites should take place in this file */
+// All bootstrap overwrites should take place in this file
 
 .pager li a {
     color: white;
 }
 
 .panel-default {
-    border: none;
+    border: 0;
     box-shadow: none;
     margin-bottom: 0;
 }
 
 .panel-body {
-    padding:0;
+    padding: 0;
 }

sass/ascribe_uploader.scss

@@ -1,21 +1,26 @@
 .file-drag-and-drop {
-    display: block;
+    background-color: #fefefe;
-    outline: 1px dashed #9E9E9E;
-    vertical-align: middle;
-    text-align: center;
-    height: auto;
-    background-color: #FEFEFE;
-    overflow: auto;
-    margin-top: 1em;
-
     cursor: default !important;
+    display: block;
+    height: auto;
+    margin-top: 1em;
+    outline: 1px dashed #9e9e9e;
+    overflow: auto;
+    padding: 1.5em 0;
+    text-align: center;
+    vertical-align: middle;
 
-    padding: 1.5em 0 1.5em 0;
+    .file-drag-and-drop-dialog > p:first-child {
+        font-size: 1.5em !important;
+        margin-bottom: 0;
+        margin-top: 0;
+        padding-bottom: 0;
+    }
 }
 
 .inactive-dropzone {
+    background-color: rgba(0, 0, 0, 0) !important;
     cursor: default !important;
-    background-color: rgba(0,0,0,0) !important;
     outline: 0;
 }
 
@@ -25,44 +30,34 @@
     }
 
     .btn {
-        margin: 0 1em 0 1em;
+        margin: 0 1em;
     }
 }
 
-.file-drag-and-drop .file-drag-and-drop-dialog > p:first-child {
-    font-size: 1.5em !important;
-
-    margin-top: 0;
-    margin-bottom: 0;
-    padding-bottom: 0;
-}
 
 .file-drag-and-drop-position {
-    position: relative;
     display: inline-block;
-
     margin-left: .7em;
     margin-right: .7em;
+    position: relative;
 
     .delete-file {
-        display: block;
         background-color: black;
-        
+        border-radius: 1em;
-        width: 20px;
+        cursor: pointer;
+        display: block;
         height: 20px;
         position: absolute;
         right: -7px;
-        top: -7px;
-        border-radius: 1em;
         text-align: center;
-
+        top: -7px;
-        cursor: pointer;
+        width: 20px;
 
         span {
             color: white;
-            top: 1;
-            left: 0;
             font-size: .8em;
+            left: 0;
+            top: 1px;
 
             &:hover {
                 color: $brand-danger;
@@ -73,68 +68,74 @@
 
 .file-drag-and-drop-preview-table-wrapper {
     display: table;
-    height:94px;
+    height: 94px;
-    width:104px;
+    width: 104px;
 }
 
 .file-drag-and-drop-preview {
-    overflow:hidden;
+    background-color: #eeeeee;
-    cursor: default;
-    background-color: #EEEEEE;
     border: 1px solid #616161;
+    cursor: default;
+    overflow: hidden;
 }
 
 .file-drag-and-drop-preview-image {
-    display: table;
-    height:104px;
-    width:104px;
-    overflow:hidden;
     border: 1px solid #616161;
+    display: table;
+    height: 104px;
+    overflow: hidden;
     text-align: center;
-}
+    width: 104px;
 
-.file-drag-and-drop-preview-image .action-file {
+    .action-file {
+        color: white;
+        cursor: pointer;
         font-size: 2.5em;
         margin-top: .6em;
-    color: white;
         text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
-    cursor: pointer;
 
-    &:link, &:visited, &:hover, &:active {
+        &:link,
+        &:visited,
+        &:hover,
+        &:active {
             text-decoration: none;
         }
 
         &:hover {
             color: #d9534f;
         }
-}
-
-.file-drag-and-drop-preview-other .action-file {
-    position: relative;
-    top: .3em;
-    margin-top: 0;
-    font-size: 2.5em;
-    color: white;
-    text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
-    cursor: pointer;
-
-    &:link, &:visited, &:hover, &:active {
-        text-decoration: none;
-    }
-
-    &:hover {
-        color: #d9534f;
     }
 }
 
+
 .file-drag-and-drop-preview-other {
     display: table-cell;
     text-align: center;
     vertical-align: middle;
 
-}
+    .action-file {
+        color: white;
+        cursor: pointer;
+        font-size: 2.5em;
+        margin-top: 0;
+        position: relative;
+        text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
+        top: .3em;
 
-.file-drag-and-drop-preview-other span:not(:first-child) {
+        &:link,
+        &:visited,
+        &:hover,
+        &:active {
+            text-decoration: none;
+        }
+
+        &:hover {
+            color: #d9534f;
+        }
+
+        span:not(:first-child) {
             display: block;
             margin-top: .5em;
+        }
+    }
 }

sass/ascribe_variables.scss

@@ -1,4 +1,3 @@
 $ascribe-color-green: rgba(2, 182, 163, 1);
 
-$ascribe-brand-danger: #FC535F;
+$ascribe-brand-danger: #fc535f;
-$ascribe-brand-warning: #FFC354;

sass/main.scss

@@ -29,14 +29,15 @@ $BASE_URL: '<%= BASE_URL %>';
 @import 'ascribe_slides_container';
 @import 'ascribe_form';
 @import 'ascribe_panel';
-@import 'ascribe_button';
 
 @import 'whitelabel/index';
 
 
-html, body {
+html,
+body {
+    background-color: #fdfdfd;
+    font-family: 'Source Sans Pro';
     height: 100%;
-    background-color: #FDFDFD;
 }
 
 html {
@@ -44,8 +45,8 @@ html {
 }
 
 .ascribe-default-app {
-    padding-top: 70px;
     overflow-x: hidden;
+    padding-top: 70px;
 }
 
 hr {
@@ -60,153 +61,180 @@ hr {
     display: none;
 }
 
-.no-margin{
+.no-margin {
     margin: 0;
+    margin-left: 0;
+    margin-right: 0;
 }
-.no-padding{
+
+.no-padding {
     padding: 0;
 }
-.inline{
+
+.inline {
     display: inline;
 }
 
 .navbar-default {
-    border: none;
+    border: 0;
-    border-left:0;
+    border-color: #ccc;
-    border-right:0;
+    border-left: 0;
+    border-right: 0;
+    border-top: 0;
+    font-size: .8em;
     margin-bottom: 1.5em;
-    border-top:0;
-    border-color: #CCC;
-    font-size: 0.8em;
-}
 
-.navbar-default .navbar-nav > .active {
+    .navbar-nav > li > a {
+        border: 1px solid rgba(0, 0, 0, 0);
+    }
+
+    .navbar-nav > .active {
         a {
-        background-color: transparent!important;
+            background-color: transparent !important;
-        > span {color: #02b6a3;}
-        color: #02b6a3;
             border-bottom: 1px solid #02b6a3;
-
-        &:hover, &:focus{
-            > span {color: #02b6a3;}
             color: #02b6a3;
+
+            > span {
+                color: #02b6a3;
+            }
+
+            &:hover,
+            &:focus {
                 background-color: transparent;
                 border-bottom: 1px solid #02b6a3;
+                color: #02b6a3;
+
+                > span {
+                    color: #02b6a3;
+                }
+            }
         }
     }
 }
-.navbar-default .navbar-nav > li > a {
+
-    border: 1px solid rgba(0,0,0,0);
+
-}
 
 .img-brand {
     height: 60px;
 }
 
 .truncate {
-    white-space: nowrap;
-    width: 4em;
     overflow: hidden;
     text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 4em;
+
     @media only screen and (min-width: 400px) {
         width: 8em;
     }
+
     @media only screen and (min-width: 600px) {
         width: 12em;
     }
+
     @media only screen and (min-width: 1000px) {
         width: 14em;
     }
+
     @media only screen and (min-width: 1200px) {
         width: 16em;
     }
+
     @media only screen and (min-width: 1400px) {
         width: 18em;
     }
 }
+
 .navbar-right {
     margin-right: 0;
 }
 
 .clear-paddings {
-    padding-left:0;
+    padding-left: 0;
-    padding-right:0;
+    padding-right: 0;
 }
 
 .clear-margins {
-    margin-top:0;
+    margin-bottom: 0;
-    margin-bottom:0;
+    margin-top: 0;
 }
 
 .ascribe-color {
     color: $ascribe-color-green;
 }
 
-.ascribe-subheader{
+.ascribe-subheader {
     padding-bottom: 10px;
     margin-top: -10px;
+
     a {
-        cursor: pointer;
-        font-size: 0.8em;
         color: #222;
+        cursor: pointer;
+        font-size: .8em;
     }
 }
 
-.tooltip-inner{
+.tooltip-inner {
+    background-color: #fcfafa;
+    border: 1px solid;
+    border-radius: 0;
+    color: #000;
     max-width: 300px;
     padding: 3px 8px;
-    color: #000;
     text-align: center;
     text-decoration: none;
-    background-color: #FCFAFA;
-    border-radius: 0;
-    border: 1px solid;
 }
 
-/* Taken from http://stackoverflow.com/a/20548578 */
+// Taken from http://stackoverflow.com/a/20548578
 .vcenter {
     display: inline-block;
-    vertical-align: middle;
     float: none;
+    vertical-align: middle;
 }
-.filter-glyph{
+
+.filter-glyph {
     color: white;
 }
-.no-margin {
+
-    margin-right: 0;
+.btn-delete {
-    margin-left: 0;
+    background-color: rgba(0, 0, 0, 0);
-}
+    border: 1px solid rgba(0, 0, 0, 0);
-.btn-delete{
-    background-color: rgba(0,0,0,0);
     color: #888;
-    border: 1px solid rgba(0,0,0,0);
+
-    &:hover{
+    &:hover {
         border: 1px solid $ascribe-brand-danger;
     }
 }
-.btn-ascribe, .btn-ascribe-inv {
+
+.btn-ascribe,
+.btn-ascribe-inv {
     border: 1px solid #444;
-    line-height: 2em;
-    margin-right: 1px;
-    margin-left: 0 !important;
-    font-family: sans-serif !important;
     border-radius: 0 !important;
+    font-family: sans-serif !important;
+    line-height: 2em;
+    margin-left: 0 !important;
+    margin-right: 1px;
 }
 
-.btn-ascribe, .btn-ascribe-inv:active, .btn-ascribe-inv:hover {
+.btn-ascribe,
+.btn-ascribe-inv:active,
+.btn-ascribe-inv:hover {
+    background-color: #fff;
     color: #222 !important;
-    background-color: #FFF;
 }
 
-.btn-ascribe:active, .btn-ascribe:hover, .btn-ascribe-inv {
+.btn-ascribe:active,
-    color: #FFF !important;
+.btn-ascribe:hover,
+.btn-ascribe-inv {
     background-color: #444;
+    color: #fff !important;
 }
 
-.btn-ascribe-inv:disabled, .btn-ascribe-inv:focus {
+.btn-ascribe-inv:disabled,
-    color: #444 !important;
+.btn-ascribe-inv:focus {
     background-color: #BBB !important;
     border: 1px solid #444 !important;
+    color: #444 !important;
 }
 
 .btn-ascribe-sm {
@@ -214,24 +242,29 @@ hr {
     line-height: 1.3em;
 }
 
-.btn-ascribe-green, .btn-ascribe-green-inv {
+.btn-ascribe-green,
-    border: 1px solid #48DACB;
+.btn-ascribe-green-inv {
+    border: 1px solid #48dacb;
+    border-radius: 0 !important;
+    font-family: sans-serif !important;
     line-height: 2em;
     margin-left: 0 !important;
-    font-family: sans-serif !important;
-    border-radius: 0 !important;
 }
 
-.btn-ascribe-green, .btn-ascribe-green-inv:active, .btn-ascribe-green-inv:hover {
+.btn-ascribe-green,
-    background-color: #FFF;
+.btn-ascribe-green-inv:active,
-    border: 1px solid rgba(2, 182, 163, 0.5);
+.btn-ascribe-green-inv:hover {
+    background-color: #fff;
+    border: 1px solid rgba(2, 182, 163, .5);
     color: rgba(2, 182, 163, 0.5);
 }
 
-.btn-ascribe-green:active, .btn-ascribe-green:hover, .btn-ascribe-green-inv {
+.btn-ascribe-green:active,
-    border: 1px solid rgba(2, 182, 163, 0.5);
+.btn-ascribe-green:hover,
+.btn-ascribe-green-inv {
+    background-color: rgba(2, 182, 163, .5);
+    border: 1px solid rgba(2, 182, 163, .5);
     color: white;
-    background-color: rgba(2, 182, 163, 0.5);
 }
 
 .ascribe-detail-title {
@@ -240,33 +273,34 @@ hr {
 }
 
 .ascribe-detail-property {
-    padding-bottom: 0.4em;
+    padding-bottom: .4em;
 }
 
 .ascribe-detail-property-label {
-    font-size: 0.8em;
+    font-size: .8em;
 }
 
 .ascribe-detail-property-value {
-    /* white-space: nowrap;
-    overflow: hidden; */
     text-overflow: ellipsis;
 }
 
-::-webkit-input-placeholder { /* WebKit browsers */
+::-webkit-input-placeholder { // WebKit browsers
-    font-size: 0.9em;
+    font-size: .9em;
     font-style: italic;
 }
-:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
+
-    font-size: 0.9em;
+:-moz-placeholder { // Mozilla Firefox 4 to 18
+    font-size: .9em;
     font-style: italic;
 }
-::-moz-placeholder { /* Mozilla Firefox 19+ */
+
-    font-size: 0.9em;
+::-moz-placeholder { // Mozilla Firefox 19+
+    font-size: .9em;
     font-style: italic;
 }
-:-ms-input-placeholder { /* Internet Explorer 10+ */
+
-    font-size: 0.9em;
+:-ms-input-placeholder { // Internet Explorer 10+
+    font-size: .9em;
     font-style: italic;
 }
 
@@ -275,15 +309,15 @@ hr {
 }
 
 .input-checkbox-ascribe {
-    text-align: left;
     line-height: 1.6;
-    width: 90%;
     margin-left: 1.6em;
     margin-right: auto;
+    text-align: left;
+    width: 90%;
 }
 
-/* columns of same height styles */
+// columns of same height styles
-/* http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height */
+// http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height
 .row-full-height {
     height: 100%;
 }
@@ -295,9 +329,9 @@ hr {
 
 .row-same-height {
     display: table;
-    width: 100%;
+    // fix overflow
-    /* fix overflow */
     table-layout: fixed;
+    width: 100%;
 }
 
 .col-xs-height {
@@ -326,7 +360,7 @@ hr {
     }
 }
 
-/* vertical alignment styles */
+// vertical alignment styles
 
 .col-top {
     vertical-align: top;
@@ -345,44 +379,48 @@ hr {
     margin-top: 1px;
 }
 
-.margin-left-2px{
+.margin-left-2px {
     margin-left: 2px;
 }
 
 .spin {
-    display:inline-block;
-    -webkit-animation: spin 1s infinite linear;
     -moz-animation: spin 1s infinite linear;
-    -o-animation: spin 1s infinite linear;
     -ms-animation: spin 1s infinite linear;
+    -o-animation: spin 1s infinite linear;
+    -webkit-animation: spin 1s infinite linear;
     animation: spin 1s infinite linear;
-    -webkit-transform-origin: 55% 70%;
     -moz-transform-origin: 55% 70%;
     -o-transform-origin: 55% 70%;
+    -webkit-transform-origin: 55% 70%;
+    display: inline-block;
     transform-origin: 55% 70%;
     width: 10px;
     height: 10px;
 }
 
 @-webkit-keyframes spin {
-0% { -webkit-transform: rotate(0deg);}
+    0% { -webkit-transform: rotate(0deg);}
-100% { -webkit-transform: rotate(360deg);}
+    100% { -webkit-transform: rotate(360deg);}
 }
+
 @-moz-keyframes spin {
-0% { -moz-transform: rotate(0deg); }
+    0% { -moz-transform: rotate(0deg); }
-100% { -moz-transform: rotate(360deg);}
+    100% { -moz-transform: rotate(360deg);}
 }
+
 @-o-keyframes spin {
-0% { -o-transform: rotate(0deg);}
+    0% { -o-transform: rotate(0deg);}
-100% { -o-transform: rotate(360deg);}
+    100% { -o-transform: rotate(360deg);}
 }
+
 @-ms-keyframes spin {
-0% { -ms-transform: rotate(0deg);}
+    0% { -ms-transform: rotate(0deg);}
-100% { -ms-transform: rotate(360deg);}
+    100% { -ms-transform: rotate(360deg);}
 }
+
 @-keyframes spin {
-0% { transform: rotate(0deg); }
+    0% { transform: rotate(0deg); }
-100% { transform: rotate(360deg);}
+    100% { transform: rotate(360deg);}
 }
 
 .btn-default {
@@ -392,9 +430,8 @@ hr {
 }
 
 .fullpage-spinner {
-    padding-top: 30%;
     padding-bottom: 30%;
-
+    padding-top: 30%;
     text-align: center;
 
     > span {
@@ -404,21 +441,22 @@ hr {
 
 
 .disable-select {
-    -webkit-user-select: none;  
     -moz-user-select: none;
     -ms-user-select: none;
+    -webkit-user-select: none;
     user-select: none;
 }
 
 .link-ascribe {
     color: #666;
+
     &:hover {
         color: #000;
     }
 }
 
 .ascribe-loading-position {
-    padding-top: 30%;
     padding-bottom: 30%;
+    padding-top: 30%;
     text-align: center;
 }

sass/offset_right.scss

@@ -1,81 +1,106 @@
-/* Taken from: http://stackoverflow.com/a/27501063/1263876 */
+// Taken from: http://stackoverflow.com/a/27501063/1263876
 
 .col-xs-offset-right-12 {
     margin-right: 100%;
 }
+
 .col-xs-offset-right-11 {
     margin-right: 91.66666667%;
 }
+
 .col-xs-offset-right-10 {
     margin-right: 83.33333333%;
 }
+
 .col-xs-offset-right-9 {
     margin-right: 75%;
 }
+
 .col-xs-offset-right-8 {
     margin-right: 66.66666667%;
 }
+
 .col-xs-offset-right-7 {
     margin-right: 58.33333333%;
 }
+
 .col-xs-offset-right-6 {
     margin-right: 50%;
 }
+
 .col-xs-offset-right-5 {
     margin-right: 41.66666667%;
 }
+
 .col-xs-offset-right-4 {
     margin-right: 33.33333333%;
 }
+
 .col-xs-offset-right-3 {
     margin-right: 25%;
 }
+
 .col-xs-offset-right-2 {
     margin-right: 16.66666667%;
 }
+
 .col-xs-offset-right-1 {
     margin-right: 8.33333333%;
 }
+
 .col-xs-offset-right-0 {
     margin-right: 0;
 }
+
 @media (min-width: 768px) {
     .col-sm-offset-right-12 {
         margin-right: 100%;
     }
+
     .col-sm-offset-right-11 {
         margin-right: 91.66666667%;
     }
+
     .col-sm-offset-right-10 {
         margin-right: 83.33333333%;
     }
+
     .col-sm-offset-right-9 {
         margin-right: 75%;
     }
+
     .col-sm-offset-right-8 {
         margin-right: 66.66666667%;
     }
+
     .col-sm-offset-right-7 {
         margin-right: 58.33333333%;
     }
+
     .col-sm-offset-right-6 {
         margin-right: 50%;
     }
+
     .col-sm-offset-right-5 {
         margin-right: 41.66666667%;
     }
+
     .col-sm-offset-right-4 {
         margin-right: 33.33333333%;
     }
+
     .col-sm-offset-right-3 {
         margin-right: 25%;
     }
+
     .col-sm-offset-right-2 {
         margin-right: 16.66666667%;
     }
+
     .col-sm-offset-right-1 {
         margin-right: 8.33333333%;
     }
+
     .col-sm-offset-right-0 {
         margin-right: 0;
     }
@@ -84,80 +109,105 @@
     .col-md-offset-right-12 {
         margin-right: 100%;
     }
+
     .col-md-offset-right-11 {
         margin-right: 91.66666667%;
     }
+
     .col-md-offset-right-10 {
         margin-right: 83.33333333%;
     }
+
     .col-md-offset-right-9 {
         margin-right: 75%;
     }
+
     .col-md-offset-right-8 {
         margin-right: 66.66666667%;
     }
+
     .col-md-offset-right-7 {
         margin-right: 58.33333333%;
     }
+
     .col-md-offset-right-6 {
         margin-right: 50%;
     }
+
     .col-md-offset-right-5 {
         margin-right: 41.66666667%;
     }
+
     .col-md-offset-right-4 {
         margin-right: 33.33333333%;
     }
+
     .col-md-offset-right-3 {
         margin-right: 25%;
     }
+
     .col-md-offset-right-2 {
         margin-right: 16.66666667%;
     }
+
     .col-md-offset-right-1 {
         margin-right: 8.33333333%;
     }
+
     .col-md-offset-right-0 {
         margin-right: 0;
     }
 }
+
 @media (min-width: 1200px) {
     .col-lg-offset-right-12 {
         margin-right: 100%;
     }
+
     .col-lg-offset-right-11 {
         margin-right: 91.66666667%;
     }
+
     .col-lg-offset-right-10 {
         margin-right: 83.33333333%;
     }
+
     .col-lg-offset-right-9 {
         margin-right: 75%;
     }
+
     .col-lg-offset-right-8 {
         margin-right: 66.66666667%;
     }
+
     .col-lg-offset-right-7 {
         margin-right: 58.33333333%;
     }
+
     .col-lg-offset-right-6 {
         margin-right: 50%;
     }
+
     .col-lg-offset-right-5 {
         margin-right: 41.66666667%;
     }
+
     .col-lg-offset-right-4 {
         margin-right: 33.33333333%;
     }
+
     .col-lg-offset-right-3 {
         margin-right: 25%;
     }
+
     .col-lg-offset-right-2 {
         margin-right: 16.66666667%;
     }
+
     .col-lg-offset-right-1 {
         margin-right: 8.33333333%;
     }
+
     .col-lg-offset-right-0 {
         margin-right: 0;
     }

sass/variables.scss

@@ -18,7 +18,7 @@ $gray-lighter:           lighten($gray-base, 93.5%) !default; // #eee
 $brand-primary:         darken(#428bca, 6.5%) !default; // #337ab7
 $brand-success:         #5cb85c !default;
 $brand-info:            #5bc0de !default;
-$brand-warning:         $ascribe-brand-warning !default;
+$brand-warning:         #ccc !default;
 $brand-danger:          $ascribe-brand-danger !default;
 
 
@@ -51,14 +51,14 @@ $font-family-base:        $font-family-sans-serif !default;
 
 $font-size-base:          14px !default;
 $font-size-large:         ceil(($font-size-base * 1.25)) !default; // ~18px
-$font-size-small:         ceil(($font-size-base * 0.85)) !default; // ~12px
+$font-size-small:         ceil(($font-size-base * .85)) !default; // ~12px
 
 $font-size-h1:            floor(($font-size-base * 2.6)) !default; // ~36px
 $font-size-h2:            floor(($font-size-base * 2.15)) !default; // ~30px
 $font-size-h3:            ceil(($font-size-base * 1.7)) !default; // ~24px
 $font-size-h4:            ceil(($font-size-base * 1.25)) !default; // ~18px
 $font-size-h5:            $font-size-base !default;
-$font-size-h6:            ceil(($font-size-base * 0.85)) !default; // ~12px
+$font-size-h6:            ceil(($font-size-base * .85)) !default; // ~12px
 
 //** Unit-less `line-height` for use in components like buttons.
 $line-height-base:        1.428571429 !default; // 20/14
@@ -234,7 +234,7 @@ $cursor-disabled:                not-allowed !default;
 //** Background for the dropdown menu.
 $dropdown-bg:                    #fff !default;
 //** Dropdown menu `border-color`.
-$dropdown-border:                rgba(0,0,0,.15) !default;
+$dropdown-border:                rgba(0, 0, 0, .15) !default;
 //** Dropdown menu `border-color` **for IE8**.
 $dropdown-fallback-border:       #ccc !default;
 //** Divider color for between dropdown items.
@@ -541,7 +541,7 @@ $popover-bg:                          #fff !default;
 //** Popover maximum width
 $popover-max-width:                   276px !default;
 //** Popover border color
-$popover-border-color:                rgba(0,0,0,.2) !default;
+$popover-border-color:                rgba(0, 0, 0, .2) !default;
 //** Popover fallback border color
 $popover-fallback-border-color:       #ccc !default;
 
@@ -556,7 +556,7 @@ $popover-arrow-color:                 $popover-bg !default;
 //** Popover outer arrow width
 $popover-arrow-outer-width:           ($popover-arrow-width + 1) !default;
 //** Popover outer arrow color
-$popover-arrow-outer-color:           fade_in($popover-border-color, 0.05) !default;
+$popover-arrow-outer-color:           fade_in($popover-border-color, .05) !default;
 //** Popover outer arrow fallback color
 $popover-arrow-outer-fallback-color:  darken($popover-fallback-border-color, 20%) !default;
 
@@ -804,7 +804,7 @@ $breadcrumb-separator:          "/" !default;
 //
 //##
 
-$carousel-text-shadow:                        0 1px 2px rgba(0,0,0,.6) !default;
+$carousel-text-shadow:                        0 1px 2px rgba(0, 0, 0, .6) !default;
 
 $carousel-control-color:                      #fff !default;
 $carousel-control-width:                      15% !default;