concisecss 0.0.5 → 2.0.0

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

@@ -0,0 +1,25 @@
+//------------------------------------
+//  COLORS
+//------------------------------------
+
+// Background colors
+@if $use-bg-colors == true {
+  @each $bg-color, $color in $bg-colors {
+    .bg-#{$bg-color},
+    %bg-#{$bg-color} { background-color: $color; }
+
+    @if $bg-color != "white" {
+      .bg-light-#{$bg-color},
+      %bg-light-#{$bg-color} { background-color: lighten($color, 32.5%); }
+    }
+  }
+}
+
+
+// Type colors
+@if $use-type-colors == true {
+  @each $type-color, $color in $type-colors {
+    .color-#{$type-color},
+    %color-#{$type-color} { color: $color; }
+  }
+}

data/app/assets/stylesheets/{objects → components}/_dropdowns.scss

@@ -7,11 +7,13 @@
     outline: none;
     position: relative;
     width: auto;
-    
+
     .dropdown-menu {
-      background-color: #fff;
-      border: 1px solid #eee;
+      background-color: $dropdown-bg-color;
+      border: 1px solid $dropdown-border-color;
       border-radius: inherit;
+      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+      filter: alpha(opacity=0);
       font-weight: inherit;
       left: 0;
       margin-left: 0px;
@@ -21,100 +23,92 @@
       right: 0;
       text-transform: none;
       z-index: 99999;
-      
-      @include vendor(transition, all 0.3s ease-in);
-      
+
+      @include vendor(transition, all 0.3s ease-in, ms official);
+
       a { text-decoration: none; }
-      
+
       p {
         margin: 0;
         padding: 10px 15px;
       }
-      
+
       span { line-height: inherit; }
-      
+
       img {
         padding: 15px;
         width: 100%;
       }
-      
+
       iframe {
         height: auto;
         padding: 15px;
         width: 100%;
       }
-      
-      img + p, iframe + p { padding-top: 0px; }
-      
+
+      img + p,
+      iframe + p { padding-top: 0px; }
+
       hr { margin: 10px; }
-    }
-    
-    ul.dropdown-menu { list-style-type: none; }
-    
-    .dropdown-menu {
+
       li {
         display: block;
         padding: 5px 10px;
-        
-        @include vendor(transition, all 0.3s ease-out);
-      }
-      
-      
-      // Rounded corners
-      &.border-radius li {
-        &:first-of-type { border-radius: $border-radius $border-radius 0 0; }
-        
-        &:last-of-type { border-radius: 0 0 $border-radius $border-radius; }
+
+        @include vendor(transition, all 0.3s ease-out, ms official);
       }
-      
-      li:hover { background-color: #f3f8f8; }
+
+      li:hover { background-color: $dropdown-hover-color; }
+
+
+      // Headers
+      & > .dropdown-header { margin: 0; }
     }
-    
+
+    ul.dropdown-menu { list-style-type: none; }
+
     &.dropdown-active .dropdown-menu {
+      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+      filter: alpha(opacity=100);
       opacity: 1;
       pointer-events: auto;
     }
-    
-    .header {
-      color: #aaa;
+
+    .dropdown-header {
+      color: $dropdown-header-color;
       cursor: default;
-      font-size: 14px;
-      font-size: 0.9rem;
-      @include font-size(14px); 
+      @include font-size(14px);
       margin: 12px 0 0;
       padding: 0 0 0 9px;
     }
-  }
 
-  @include breakpoint(small) {
-    .dropdown {
-      .dropdown-menu { width: 200px; }
-      
-      &.dropdown-small .dropdown-menu { width: 150px; }
-      
-      &.dropdown-large .dropdown-menu { width: 350px; }
-      
-      &.dropdown-full .dropdown-menu { width: 100%; }
+    &.dropdown-collapse-full .dropdown-menu { width: 100%; }
+
+    @include breakpoint(small) {
+      & {
+        .dropdown-menu { width: 200px; }
+
+        &.dropdown-small .dropdown-menu { width: 150px; }
+
+        &.dropdown-large .dropdown-menu { width: 350px; }
+
+        &.dropdown-full .dropdown-menu { width: 100%; }
+
+        &.dropdown-collapse-full .dropdown-menu { width: 200px; }
+      }
     }
-  }
 
+    .dropdown-header:hover,
+    li.dropdown-header:hover { background: none; }
 
-  // Headers
-  .dropdown-menu > .header { margin: 0; }
 
-  .dropdown {
-    .header:hover, 
-    li.header:hover { background: none; }
-    
-    .dropdown-menu.border-radius { border-radius: $border-radius; }
-    
-    
-    // Arrows 
+    // Arrows
     &[class*='dropdown-arrow-'] .dropdown-menu {
       margin-top: 10px;
-      
+
+      &:before,
       &:after {
-        border-color: #fff transparent;
+        border-color: $dropdown-bg-color transparent;
         border-style: solid;
         bottom: 100%;
         border-width: 0 6px 6px 6px;
@@ -123,45 +117,39 @@
         position: absolute;
         width: 0;
       }
-      
+
       &:before {
         border-color: rgba(0, 0, 0, 0.1) transparent;
-        border-style: solid;
-        bottom: 100%;
         border-width: 0 8px 8px 8px;
-        content: "";
-        height: 0;
-        position: absolute;
-        width: 0;
       }
     }
-    
+
     &.dropdown-arrow-left .dropdown-menu {
       &:after { left: 15px; }
-      
+
       &:before { left: 13px; }
     }
-    
+
     &.dropdown-arrow-right .dropdown-menu {
       &:after { right: 15px; }
-      
+
       &:before { right: 13px; }
     }
-    
-    
-    // Dropup 
+
+
+    // Dropup
     &.up {
       .dropdown-menu { bottom: 100%; }
-      
+
       &[class*='dropdown-arrow-'] .dropdown-menu {
         margin-bottom: 10px;
-        
+
         &:after, &:before { top: 100%; }
-        
+
         &:after { border-width: 6px 6px 0 6px; }
-        
+
         &:before { border-width: 8px 8px 0 8px; }
       }
     }
   }
-}
+}

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

@@ -0,0 +1,133 @@
+ @if $use-navigation == true {
+  //------------------------------------
+  //  NAVIGATION
+  //------------------------------------
+
+  // Silent Class
+  %before-responsive-icon {
+    clear: both;
+    content: ".";
+    display: block;
+    height: 0;
+    line-height: 0;
+    text-align: center;
+    visibility: hidden;
+  }
+
+
+  // Navigation Styles
+  nav {
+    ul,
+    ol {
+      list-style: none;
+      margin: 0;
+    }
+
+    li {
+      cursor: pointer;
+      position: relative;
+
+      .dropdown & { margin-right: 0px; }
+    }
+  }
+
+
+  @if $use-responsive-navigation == true {
+    // Responsive navigation
+    //
+    // Thanks to Ben Plum for the great work on his
+    // Naver plugin (https://github.com/benplum/Naver/)
+    .naver {
+      .naver-handle {
+        color: inherit;
+        cursor: pointer;
+        display: none;
+        @include font-size(24px);
+        text-align: right;
+        text-transform: uppercase;
+
+        @include vendor(user-select, none, ms official);
+      }
+
+      .naver-wrapper {
+        height: auto;
+        width: 100%;
+      }
+
+      &.enabled {
+        .naver-handle { display: block; }
+
+        .naver-wrapper {
+          height: 0px;
+          overflow: hidden;
+
+          li {
+            display: block;
+            padding: 8px;
+            text-align: left;
+            width: 100%;
+
+            &:hover { background: #f9f9f9; }
+          }
+        }
+      }
+    }
+
+    .nav-responsive {
+      &.naver .naver-handle:after {
+        content: "\2261";
+        text-align: right;
+      }
+
+      &.nav-responsive-text.naver {
+        .naver-handle:after { content: "\00a0 \2261"; }
+
+        .naver-container:before {
+          @extend %before-responsive-icon;
+        }
+      }
+    }
+
+
+    // Left-aligned responsive navigation
+    .nav-responsive-left {
+      &.naver .naver-handle {
+        text-align: left;
+
+        &:before {
+          content: "\2261";
+          text-align: left;
+        }
+      }
+
+      &.nav-responsive-text.naver {
+        .naver-handle:before { content: "\2261 \00a0"; }
+
+        .naver-container:after {
+          @extend %before-responsive-icon;
+        }
+      }
+    }
+
+
+    // Centered responsive navigation
+    .nav-responsive-center {
+      &.naver .naver-handle {
+        text-align: center;
+
+        &:before {
+          content: "\2261";
+          text-align: center;
+        }
+      }
+
+      &.nav-responsive-text.naver {
+        .naver-handle:before { content: "\2261 \00a0"; }
+
+        .naver-container:after {
+          @extend %before-responsive-icon;
+        }
+      }
+    }
+  }
+}

data/app/assets/stylesheets/concise.scss

@@ -8,53 +8,53 @@
  * http://opensource.org/licenses/MIT
  *
  */
- 
- 
- 
 
+
+
+
+//------------------------------------
+//  IMPORTS
 //------------------------------------
-//  IMPORTS  
-//------------------------------------ 
-// Generic utility styles
-@import "defaults";
-@import "generic/mixins";
-@import "generic/normalize";
-@import "generic/clearfix";
-@import "generic/shared";
+// Utility helpers
+@import "helpers/variables";
+@import "helpers/functions";
+@import "helpers/mixins";
+@import "helpers/normalize";
+@import "helpers/clearfix";
 
 
 
 
 // Base styles
 @import "base/main";
+@import "base/vertical-rhythm";
 @import "base/selection";
-@import "base/container";
 @import "base/type";
 @import "base/headings";
-@import "base/blockquotes";
-@import "base/lists";
-@import "base/tables";
-@import "base/forms";
-@import "base/grid";
 
 
 
 
-// Objects and abstractions
-@import "objects/colors";
-@import "objects/buttons";
-@import "objects/groups";
-@import "objects/dropdowns";
-@import "objects/navigation";
-@import "objects/breadcrumbs";
-@import "objects/wells";
-@import "objects/badges";
-@import "objects/progress";
+// Layout styles
+@import "layout/container";
+@import "layout/grid";
+@import "layout/lists";
+@import "layout/forms";
+@import "layout/tables";
+
+
+
+
+// Component styles
+@import "components/colors";
+@import "components/buttons";
+@import "components/dropdowns";
+@import "components/navigation";
 
 
 
 
-// Helper classes
-@import "generic/helper";
-@import "generic/conditional";
-@import "generic/print";
+// Helpers
+@import "helpers/helpers";
+@import "helpers/conditional";
+@import "base/print";