concisecss 0.0.5 → 2.0.0

data/app/assets/stylesheets/base/_main.scss

@@ -2,31 +2,33 @@
   //------------------------------------
   //  MAIN
   //------------------------------------
-  
+
   // Variables
-  $font-size: #{($base-font-size/16px)*1em};
+  $font-size: #{($base-font-size / 16px) * 1em};
   $line-height-integer: #{$line-height-ratio};
-  
+
   *{
     &,
     &:before,
     &:after {
-      @include vendor(box-sizing, border-box);
+      @include vendor(box-sizing, border-box, official);
     }
   }
-  
-  html, 
+
+  html,
   body {
-    background-color: #fff;
+    background-color: $website-bg-color;
     color: $base-font-color;
     font: normal normal $font-size/$line-height-integer $base-font-family;
     margin: 0;
-    
-    font-smooth: always;
-    
-    -webkit-font-smoothing: antialiased;
-    -moz-font-smoothing: antialiased;
+
+    @if $enable-font-smoothing == true {
+      font-smooth: always;
+
+      -webkit-font-smoothing: antialiased;
+      -moz-font-smoothing: antialiased;
+    }
   }
 
   html[dir="rtl"] { direction: rtl; }
-}
+}

data/app/assets/stylesheets/{generic → base}/_print.scss

@@ -5,106 +5,88 @@
   @media print {
     @page { margin: 0.5cm; }
 
-    * {
+    *,
+    *:before,
+    *:after {
       background: transparent !important;
       color: black !important;
       text-shadow: none !important;
-      
-      @include vendor(filter, none !important);
-      
-      &:before, 
-      &:after {
-        background: transparent !important;
-        color: black !important;
-        text-shadow: none !important;
-        
-        @include vendor(filter, none !important);
-      }
+
+      @include vendor(filter, none !important, webkit moz ms official);
     }
-    
+
     body {
       background-color: #fff;
       color: #000;
-      font: 0.57em / 1.3 Georgia, "Times New Roman", Times, serif;
+      font: 0.57em / 1.3 $base-print-font-family;
     }
-    
+
     img { max-width: 100% !important; }
-    
+
     .show-print {
       display: block;
       visibility: visible;
     }
-    
-    .hide-print, 
-    video, 
-    audio, 
-    object, 
-    embed, 
-    nav, 
-    footer, 
+
+    .hide-print,
+    video,
+    audio,
+    object,
+    embed,
+    nav,
+    footer,
     a[href^="#"]:after {
       display: none;
       visibility: hidden;
     }
-    
-    p, 
-    h2, 
+
+    p,
+    h2,
     h3 {
       orphans: 3;
       widows: 3;
     }
-    
-    h2, 
+
+    h2,
     h3 { page-break-after: avoid; }
-    
-    a {
+
+    a,
+    a:visited {
       color: #000;
       text-decoration: underline;
       word-wrap: break-word;
-      
-      &:visited {
-        color: #000;
-        text-decoration: underline;
-        word-wrap: break-word;
-      }
-      
+
       &[href]:after {
         content: " (" attr(href) ")";
         font-size: smaller;
       }
     }
-    
+
     q:after { content: " (Source: " attr(cite) ")"; }
-    
+
     abbr[title]:after { content: " (" attr(title) ")"; }
-    
+
     a {
-      &:after, 
-      &[href^="javascript:"]:after, 
+      &:after,
+      &[href^="javascript:"]:after,
       &[href^="#"]:after { content: ""; }
     }
-    
+
     pre,
     blockquote {
       border: 1px solid #ededed;
       page-break-inside: avoid;
     }
-    
+
     thead { display: table-header-group; }
-    
-    tr, 
+
+    tr,
     img { page-break-inside: avoid; }
-    
+
     ul {
       list-style: none;
-      
+
       li { content: "» "; }
     }
-    
-    .label, 
-    .badge {
-      border: 1px solid #000;
-      color: #000;
-    }
   }
-}
+}

data/app/assets/stylesheets/base/_selection.scss

@@ -2,20 +2,26 @@
   //------------------------------------
   //  SELECTION
   //------------------------------------
+
+  // Silent Class
+  %selection-style {
+    background-color: $selection-background;
+    color: $selection-color;
+  }
+
+
+  // Selection Style
   * {
     &::-webkit-selection {
-      background-color: $selection-background;
-      color: $selection-color;
+      @extend %selection-style;
     }
-    
+
     &::-moz-selection {
-      background-color: $selection-background;
-      color: $selection-color;
+      @extend %selection-style;
     }
-    
+
     &::selection {
-      background-color: $selection-background;
-      color: $selection-color;
+      @extend %selection-style;
     }
   }
-}
+}

data/app/assets/stylesheets/base/_type.scss

@@ -2,48 +2,50 @@
   //------------------------------------
   //  TYPE
   //------------------------------------
+
+  // Variables
+  $small-size: 12px !default;
+  $micro-size: 10px !default;
+
+
   // Links
   a {
-    color: $base-link-color; 
+    color: $base-link-color;
     text-decoration: none;
-    
-    &:hover, 
+
+    &:hover,
     &:visited {
       color: lighten($base-link-color, 10%);
       cursor: pointer;
       text-decoration: underline;
     }
-  }
 
-  p a {
-    line-height: inherit;
-    
-    &:visited { line-height: inherit; }
+    p & {
+      &,
+      &:visited { line-height: inherit; }
+    }
   }
 
 
   // Sizing
-  small, 
+  small,
   .small {
-    @include font-size($small-size); 
+    @include font-size($small-size);
   }
 
-  .micro { 
-    @include font-size($micro-size); 
+  .micro {
+    @include font-size($micro-size);
   }
 
 
   // Addresses
-  address {
-    font-style: normal;
-    
-    > strong { display: block; }
-  }
+  address { font-style: normal; }
 
 
   // Other elements
   abbr {
-    &[title], &[data-original-title] {
+    &[title],
+    &[data-original-title] {
       cursor: help;
       border-bottom: 1px dotted #999;
     }
@@ -51,7 +53,7 @@
 
   acronym {
     cursor: help;
-    border-bottom: 1px dashed blue;
+    border-bottom: 1px dashed $base-link-color;
   }
 
   kbd {

data/app/assets/stylesheets/{generic/_shared.scss → base/_vertical-rhythm.scss}

@@ -1,24 +1,23 @@
-@if $use-shared == true {
+@if $use-vertical-rhythm == true {
   //------------------------------------
   //  SHARED
   //------------------------------------
-  
+
   // Thanks to inuitcss for some simple ways to help maintain
   // vertical rhythm (https://github.com/csswizardry/inuit.css/edit/master/generic/_shared.scss)
-  
-  // Declare a common bottom margin for most elements 
+
+  // Declare a common bottom margin for most elements
   // to maintain a consistent vertical rhythm.
-  h1, h2, h3, h4, h5, h6, 
+  h1, h2, h3, h4, h5, h6,
   .h1, .h2, .h3, .h4, .h5, .h6,
-  .giga, .mega, .kilo, 
+  .giga, .mega, .kilo,
   hgroup,
   ul, ol, dl,
   blockquote, p, address,
   table,
   fieldset, figure,
   pre,
-  .row,
-  .well {
+  .row, .form-item {
     margin-bottom: $base-spacing-unit;
     margin-bottom: ($base-spacing-unit / $base-font-size) * 1rem;
   }
@@ -32,8 +31,8 @@
 
 
   // Left margin for lists
-  ul, 
-  ol, 
+  ul,
+  ol,
   dd {
     margin-left: 2 * $base-spacing-unit;
     margin-left: (2 * $base-spacing-unit / $base-font-size) * 1rem;

data/app/assets/stylesheets/components/_buttons.scss

@@ -0,0 +1,174 @@
+@if $use-buttons == true {
+  //------------------------------------
+  //  BUTTONS
+  //------------------------------------
+  .btn {
+    background-color: $object-ui-color;
+    border: 0;
+    color: $button-font-color;
+    cursor: pointer;
+    display: inline-block;
+    font-family: inherit;
+    font-size: 100%;
+    line-height: 1;
+    padding: 0.5em 1em;
+    position: relative;
+    text-align: center;
+    text-decoration: none;
+    vertical-align: baseline;
+    white-space: nowrap;
+
+    -webkit-touch-callout: none;
+
+    @include vendor(user-select, none, webkit ms o official);
+
+    @include vendor(user-drag, none, webkit);
+
+    &::-moz-focus-inner {
+      padding: 0;
+      border: 0;
+    }
+
+    &:hover { background-color: darken($object-ui-color, 10%); }
+
+    &:active { background-color: darken($object-ui-color, 5%); }
+
+    &[disabled] {
+      &,
+      &:hover,
+      &:active,
+      &:focus {
+        background: #dededc !important;
+        border: none;
+        color: #b3b3b1;
+        cursor: not-allowed;
+      }
+    }
+
+
+    // Background colors
+    @if $use-button-bg-colors == true {
+      @each $bg-color, $color in $bg-colors {
+        &.bg-#{$bg-color} { background-color: $color; }
+
+        &.bg-#{$bg-color}:hover { background-color: darken($color, 10%); }
+
+        &.bg-#{$bg-color}:active { background-color: darken($color, 5%); }
+
+        @if $bg-color != "white" {
+          &.bg-light-#{$bg-color} { background-color: lighten($color, 32.5%); }
+        }
+      }
+    }
+  }
+
+  a.btn {
+    &,
+    &:hover {
+      color: $button-hover-font-color;
+      text-decoration: none;
+    }
+
+    &:active { outline: 0; }
+  }
+
+  input[type="submit"].btn {
+    color: $button-font-color;
+    height: auto;
+    padding: 0.5em 1em;
+  }
+
+  button.btn { color: $button-font-color; }
+
+
+  @if $use-button-styles == true {
+    // Full-width collapsed button
+    .btn-collapse-full {
+      display: block;
+      margin: 12px 0;
+      width: 100%;
+
+      @include breakpoint(extra-small) {
+        & {
+          display: inline-block;
+          margin: 0;
+          width: auto;
+        }
+      }
+    }
+
+
+    // Button sizes
+    .btn-extra-small,
+    a.btn-extra-small,
+    p.btn-extra-small,
+    input.btn-extra-small {
+      @include font-size(10px);
+      padding: 0.25em 0.75em;
+    }
+
+    .btn-small,
+    a.btn-small,
+    p.btn-small,
+    input.btn-small { @include font-size(12px); }
+
+    .btn-large,
+    a.btn-large,
+    p.btn-large,
+    input.btn-large {
+      @include font-size(18px);
+      padding: 1em 2em;
+    }
+
+    .btn-extra-large,
+    a.btn-extra-large,
+    p.btn-extra-large,
+    input.btn-extra-large {
+      @include font-size(24px);
+      padding: 1em 2em;
+    }
+
+
+    // Dropdowns
+    .btn.dropdown {
+      width: 100%;
+
+      .dropdown-menu {
+        margin-top: auto;
+        text-align: left;
+        top: 100%;
+        width: 100%;
+      }
+
+      &[class*='dropdown-arrow-'] .dropdown-menu { margin-top: 10px; }
+
+      &.up {
+        .dropdown-menu {
+          margin-bottom: 0px;
+          top: auto;
+        }
+
+        &[class*='dropdown-arrow-'] .dropdown-menu { margin-bottom: 10px; }
+      }
+    }
+
+    @include breakpoint(small) {
+      .btn-extra-small .caret,
+      .btn-small .caret {
+        border-top: 4px solid;
+        border-right: 4px solid transparent;
+        border-left: 4px solid transparent;
+      }
+
+      .btn.dropdown {
+        width: auto;
+
+        &.extra-small .dropdown-menu { margin-top: 6px; }
+
+        &.dropdown-small .dropdown-menu { margin-top: 11px; }
+
+        &.dropdown-large .dropdown-menu { margin-top: 21px; }
+      }
+    }
+  }
+}