concisecss 0.0.5 → 2.0.0

data/app/assets/stylesheets/generic/_mixins.scss

@@ -1,157 +0,0 @@
-//------------------------------------
-//  FUNCTIONS
-//------------------------------------
-
-//
-// Calculates proper rem font-size given
-// a pixel amount.
-//
-@function calculate-rem($font-size) {
-  $rem-size: ($font-size / $base-font-size) * 1rem;
-  @return $rem-size;
-}
-
-
-//
-// Calculates proper line-height given a
-// font-size to maintain vertical rhythm.
-//
-@function calculate-line-height($font-size) {
-  $line-height-size: ceil($font-size / $base-line-height) * ($base-line-height / $font-size);
-  @return $line-height-size;
-}
-
-
-
-
-//------------------------------------
-//  MIXINS
-//------------------------------------
-
-//
-// Uses `calculate-rem()` to calculate rem font-size and px
-// fallback. line-height is calculated with `calculate-line-height()`
-// but passing `false` will prevent that.
-//
-//  `@include font-size(24px);`
-//
-//
-// Big thanks to inuitcss for inspiration behind this
-// (https://github.com/csswizardry/inuit.css/blob/master/generic/_mixins.scss)
-@mixin font-size($font-size, $line-height: true) {
-  font-size: $font-size;
-  font-size: calculate-rem($font-size);
-
-  @if $line-height == true {
-    line-height: calculate-line-height($font-size);
-  }
-}
-
-
-//
-// Proper vendor prefixes are created just by
-// passing a property value and size value.
-//
-//  `@include vendor(border-radius, 4px);`
-//
-//
-// Thanks to inuitcss for this handy mixin
-// (https://github.com/csswizardry/inuit.css/blob/master/generic/_mixins.scss)
-@mixin vendor($property, $value...) {
-  -webkit-#{$property}: $value;
-  -moz-#{$property}: $value;
-  -ms-#{$property}: $value;
-  -o-#{$property}: $value;
-  #{$property}: $value;
-}
-
-
-//
-// By passing in one of the pre-defined media queries that
-// are packaged with Concise by default, you can easily
-// create styles that are built from the ground-up to be
-// mobile friendly.
-//
-//  `@include breakpoint(extra-small) { ... }`
-//
-//
-@mixin breakpoint($point) {
-  @if $point == extra-small {
-    @media (min-width: $extra-small-start)  { @content; }
-  }
-
-  @else if $point == small {
-    @media (min-width: $small-start)  { @content; }
-  }
-
-  @else if $point == medium {
-    @media (min-width: $medium-start) { @content; }
-  }
-
-  @else if $point == large {
-    @media (min-width: $large-start) { @content; }
-  }
-
-  @else if $point == extra-large {
-    @media (min-width: $extra-large-start) { @content; }
-  }
-
-  @else if $point == high-density {
-    @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
-           only screen and (min--moz-device-pixel-ratio: 1.5),
-           only screen and (-o-min-device-pixel-ratio: 3/2),
-           only screen and (min-device-pixel-ratio: 1.5) { @content; }
-  }
-}
-
-
-//
-// Create variable-number grid columns given the value
-// for variable `$column-number`
-//
-@mixin grid-setup($number: $column-number) {
-  // Assign percentage-based widths for columns
-  @for $i from 1 through $number {
-    .#{$column-prefix + $i} { width: 100% / $number * $i; }
-  }
-
-  @for $i from 1 through $number {
-    // Style all but the last column
-    $width-of-column: (100% - $gutters * ($number - 1)) / $number;
-
-    .gutters .#{$column-prefix + $i} {
-      width: $width-of-column * $i + $gutters * ($i - 1);
-      content: $gutters * ($i - 1);
-    }
-  }
-}
-
-
-//
-// Create proper `.push-` classes given the value
-// for variable `$column-number`
-//
-@mixin push-setup($number: $column-number) {
-  @for $i from 1 to $number {
-    .push-#{$i} { left: 100% / $number * $i; }
-  }
-
-  @for $i from 1 to $number {
-    .gutters .push-#{$i} { left: 100% / $number * $i - $gutters; }
-  }
-}
-
-
-//
-// Create proper `.pull-` classes given the value
-// for variable `$column-number`
-//
-@mixin pull-setup($number: $column-number) {
-  @for $i from 1 to $number {
-    .pull-#{$i} { right: 100% / $number * $i; }
-  }
-
-  @for $i from 1 to $number {
-    .gutters .pull-#{$i} { right: 100% / $number * $i - $gutters; }
-  }
-}

data/app/assets/stylesheets/objects/_badges.scss

@@ -1,53 +0,0 @@
-@if $use-badges == true {
-  //------------------------------------
-  //  BADGES
-  //------------------------------------
-  .label, 
-  .badge {
-    background-color: #b5b5b5;
-    color: #fff;
-    @include font-size(12px); 
-    font-weight: bold;
-    padding: 3px 7px;
-    text-align: center;
-    vertical-align: baseline;
-    white-space: nowrap;
-  }
-
-  .label {
-    border-radius: 4px;
-    display: inline;
-  }
-
-  .badge {
-    border-radius: 10px;
-    display: inline-block;
-    padding: 1px 7px; 
-  }
-
-  .label[href] {
-    &:hover, &:focus {
-      color: #fff;
-      cursor: pointer;
-      text-decoration: none;
-    }
-  }
-
-  a.badge {
-    &:hover, &:focus {
-      color: #fff;
-      cursor: pointer;
-      text-decoration: none;
-    }
-  }
-
-  .label a, 
-  .badge a {
-    color: #fff;
-    cursor: pointer;
-    text-decoration: none;
-  }
-
-  .label:empty, 
-  .badge:empty { display: none; }
-}

data/app/assets/stylesheets/objects/_breadcrumbs.scss

@@ -1,35 +0,0 @@
-@if $use-breadcrumbs == true {
-  //------------------------------------
-  //  BREADCRUMBS
-  //------------------------------------
-  .breadcrumbs {
-    @include font-size(13px);
-    margin: 12px 0;
-    padding: 5px 15px 5px 0;
-    
-    li {
-      display: inline;
-      margin-right: 10px;
-      
-      &:last-child { margin-right: 0px; }
-      
-      &:after {
-        content: "/";
-        color: #ccc;
-        padding-left: 12px;
-        vertical-align: middle;
-      }
-      
-      &:last-child {
-        color: #999;
-        
-        a { color: #999; }
-        
-        &:after { content: ""; }
-      }
-    }
-    
-    .well,
-    &.well { padding-left: 15px; }
-  }
-}

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

@@ -1,287 +0,0 @@
-@if $use-buttons == true {
-  //------------------------------------
-  //  BUTTONS
-  //------------------------------------
-  .btn {
-    background-color: #ccc;
-    border: 0;
-    color: #fff;
-    cursor: pointer;
-    display: block;
-    font-size: 100%;
-    font-weight: 700;
-    letter-spacing: 1px;
-    line-height: 1;
-    margin: 12px auto;
-    outline: none;
-    padding: 15px 48px;
-    position: relative;
-    text-align: center;
-    text-transform: uppercase;
-    vertical-align: baseline;
-    white-space: nowrap;
-    width: 100%;
-    
-    -webkit-touch-callout: none;
-    
-    @include vendor(user-select, none);
-    
-    @include vendor(user-drag, none);
-    
-    @include vendor(transition, all 0.3s);
-    
-    &::-moz-focus-inner {
-      padding: 0;
-      border: 0;
-    }
-    
-    &:after {
-      content: "";
-      position: absolute;
-      z-index: -1;
-    }
-    
-    &:hover {
-      background-color: #b5b5b5;
-      background-image: -webkit-gradient(linear, 50, 50, 50 100%, from(rgba(50, 50, 50, 0.05)), to(rgba(50, 50, 50, 0.05)));
-      background-image: -webkit-linear-gradient(top, rgba(50, 50, 50, 0.05), rgba(50, 50, 50, 0.05));
-      background-image: -moz-linear-gradient(top, rgba(50, 50, 50, 0.05), rgba(50, 50, 50, 0.05));
-      background-image: -o-linear-gradient(top, rgba(50, 50, 50, 0.05), rgba(50, 50, 50, 0.05));
-      background-image: linear-gradient(to bottom, rgba(50, 50, 50, 0.05), rgba(50, 50, 50, 0.05));
-      background-repeat: repeat-x;
-    }
-    
-    &:active {
-      background-image: -webkit-gradient(linear, 50, 50, 50 100%, from(rgba(50, 50, 50, 0.1)), to(rgba(50, 50, 50, 0.1)));
-      background-image: -webkit-linear-gradient(top, rgba(50, 50, 50, 0.1), rgba(50, 50, 50, 0.1));
-      background-image: -moz-linear-gradient(top, rgba(50, 50, 50, 0.1), rgba(50, 50, 50, 0.1));
-      background-image: -o-linear-gradient(top, rgba(50, 50, 50, 0.1), rgba(50, 50, 50, 0.1));
-      background-image: linear-gradient(to bottom, rgba(50, 50, 50, 0.1), rgba(50, 50, 50, 0.1));
-      background-repeat: repeat-x;
-    }
-    
-    &[disabled] {
-      background: #dededc !important;
-      border: none;
-      color: #b3b3b1;
-      cursor: default;
-      
-      &:hover, 
-      &:active,
-      &:focus {
-        background: #dededc !important;
-        border: none;
-        color: #b3b3b1;
-        cursor: default;
-      }
-    }
-  }
-
-  @include breakpoint(small) {
-    .btn {
-      display: inline-block;
-      *display: inline;
-      margin: 0px;
-      width: auto;
-      zoom: 1;
-    }
-    
-    .btn-extra-small, 
-    a.btn-extra-small, 
-    p.btn-extra-small, 
-    input.btn-extra-small {
-      @include font-size(11px); 
-      padding: 5px 16px;
-    }
-    
-    .btn-small, 
-    a.btn-small, 
-    p.btn-small, 
-    input.btn-small {
-      @include font-size(12px); 
-      padding: 10px 32px;
-    }
-    
-    .btn-large, 
-    a.btn-large, 
-    p.btn-large, 
-    input.btn-large { padding: 20px 64px; }
-    
-    .btn-extra-large, 
-    a.btn-extra-large, 
-    p.btn-extra-large, 
-    input.btn-extra-large { padding: 25px 80px; }
-  }
-
-  a.btn {
-    color: #fff;
-    text-decoration: none;
-    
-    &:hover {
-      color: #fff;
-      text-decoration: none;
-    }
-    
-    &:active { outline: 0; }
-  }
-
-  input[type="submit"].btn {
-    color: #fff;
-    height: auto;
-  }
-
-  button.btn { color: #fff; }
-
-  .btn {
-    &.bg-white { color: #333; }
-    
-    
-    // Bordered 
-    &.btn-border {
-      background: transparent;
-      border-color: #ddd;
-      border-style: solid;
-      border-width: 1px;
-      color: #aaa;
-      
-      &:hover {
-        background: #ddd;
-        color: #fff !important;
-      }
-      
-      &.white {
-        border-color: $bg-white;
-        
-        &:hover {
-          background: $bg-white;
-          color: $color-black !important;
-        }
-      }
-    }
-  }
-
-
-  // Bordered white 
-  a.btn.btn-border.white:hover {
-    background: $bg-white;
-    color: $color-black !important;
-  }
-
-  .btn.btn-border.white, 
-  a.btn.btn-border.white { color: $color-white; }
-
-  .btn.btn-border {
-    &.white {
-      &:active, &:focus { background-color: #f9f9f9; }
-    }
-    
-    
-    // Bordered black 
-    &.black {
-      border-color: $bg-black;
-      color: $color-black;
-      
-      &:hover { background-color: $bg-black; }
-      
-      &:active, &:focus { background-color: $bg-black; }
-    }
-    
-    
-    // Bordered gray 
-    &.gray {
-      border-color: $bg-gray;
-      color: $color-gray;
-      
-      &:hover { background-color: $bg-gray; }
-      
-      &:active, &:focus { background-color: darken($bg-gray, 15%); }
-    }
-    
-    
-    // Bordered green 
-    &.green {
-      border-color: $bg-green;
-      color: $color-green;
-      
-      &:hover { background-color: $bg-green; }
-      
-      &:active, &:focus { background-color: darken($bg-green, 15%); }
-    }
-    
-    
-    // Bordered blue 
-    &.blue {
-      border-color: $bg-blue;
-      color: $color-blue;
-      
-      &:hover { background-color: $bg-blue; }
-    
-      &:active, &:focus { background-color: darken($bg-blue, 15%); }
-    }
-    
-    
-    // Bordered yellow 
-    &.yellow {
-      border-color: $bg-yellow;
-      color: $color-yellow;
-      
-      &:hover { background-color: $bg-yellow; }
-      
-      &:active, &:focus { background-color: darken($bg-yellow, 15%); }
-    }
-    
-    
-    // Bordered red 
-    &.red {
-      border-color: $bg-red;
-      color: $color-red;
-      
-      &:hover { background-color: $bg-red; }
-      
-      &:active, &:focus { background-color: darken($bg-red, 15%); }
-    }
-  }
-
-
-  // Dropdown 
-  .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; }
-    }
-  }
-}