droidcss 1.2.7 → 2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 588c03223d0453134c9f6492aa6eb25532bee883
-  data.tar.gz: 1678f06adda3b3bb0b4370403dcb9f59da8a198c
+  metadata.gz: 2e3271e38e0c0bbf485812244ed129c6f3aeebe6
+  data.tar.gz: f090877d52cc48afda65e45eb86a4f40e98978d0
 SHA512:
-  metadata.gz: 048bd544a0d20555904570c2dda3ef02a929535a211ac2b58004a324efe1ba503c6e7b2499001b3e113216776f14dbde1fdaaedfbafc2fd68b7ed4e37ae686c9
-  data.tar.gz: 637111d2d6f13162b424eaa257d87daac9f43ba97c14738c9e22036abeaa4a32cdc72e3c397e8bc535eb89caf3b396a30764e791808c3482352834247e80c6e9
+  metadata.gz: 5e3fe0116d42f2c4e59df24be62b6871ec1a875160b4b44b8dfbe5ab93ce66d3ccd3c9764efcd7f1300b94433799a1006f17105f295f7cbaae047dbc53851636
+  data.tar.gz: fe4f9b3bb28141d4347e4c5c4b49ea645c7c4b7137e05ea967f8ea6c854839b0d0526198670469ce4c4f4048c77461eadec9d5e9432e8567b54b1e41bca46f02

data/.gitignore

@@ -1,4 +1,6 @@
 .DS_Store
 pkg/*
 tmp
-.bundle
+.bundle
+.sass-cache
+config.codekit

data/lib/droidcss/version.rb

@@ -1,3 +1,3 @@
 module DroidCss
-  VERSION = "1.2.7"
+  VERSION = "2.0"
 end

data/vendor/assets/stylesheets/droidcss/base.scss

@@ -2,7 +2,7 @@
 @import 'droidcss/partials/setup';
 
 // Adding reset
-@import 'droidcss/partials/reset';
+@import 'droidcss/partials/normalize';
 
 // Adding default styles
 @import 'droidcss/partials/defaults';

data/vendor/assets/stylesheets/droidcss/mixins/grid-framework.scss

@@ -0,0 +1,68 @@
+// Framework grid generation
+
+// Let's do some loops!
+@mixin make-grid-columns($i: 1, $list: ".col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}") {
+  @for $i from (1 + 1) through $grid-columns {
+    $list: "#{$list}, .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}";
+  }
+  #{$list} {
+    // Prevent columns from collapsing when empty
+    min-height: 1px;
+    letter-spacing: normal;
+    display: inline-block;
+    vertical-align: top;
+    // Inner gutter via padding
+    padding-left:  ($grid-gutter-width / 2);
+    padding-right: ($grid-gutter-width / 2);
+    @include box-sizing(border-box);
+  }
+}
+
+
+@mixin calc-grid-column($index, $class, $type) {
+  @if ($type == width) and ($index > 0) {
+    .col-#{$class}-#{$index} {
+      width: percentage(($index / $grid-columns));
+    }
+  }
+  @if ($type == push) and ($index > 0) {
+    .col-#{$class}-push-#{$index} {
+      left: percentage(($index / $grid-columns));
+    }
+  }
+  @if ($type == push) and ($index == 0) {
+    .col-#{$class}-push-0 {
+      left: auto;
+    }
+  }
+  @if ($type == pull) and ($index > 0) {
+    .col-#{$class}-pull-#{$index} {
+      right: percentage(($index / $grid-columns));
+    }
+  }
+  @if ($type == pull) and ($index == 0) {
+    .col-#{$class}-pull-0 {
+      right: auto;
+    }
+  }
+  @if ($type == offset) {
+    .col-#{$class}-offset-#{$index} {
+      margin-left: percentage(($index / $grid-columns));
+    }
+  }
+}
+
+// Let's do some loops!
+@mixin loop-grid-columns($columns, $class, $type) {
+  @for $i from 0 through $columns {
+    @include calc-grid-column($i, $class, $type);
+  }
+}
+
+// Create grid for specific class
+@mixin make-grid($class) {
+  @include loop-grid-columns($grid-columns, $class, width);
+  @include loop-grid-columns($grid-columns, $class, pull);
+  @include loop-grid-columns($grid-columns, $class, push);
+  @include loop-grid-columns($grid-columns, $class, offset);
+}

data/vendor/assets/stylesheets/droidcss/mixins/grid-utilities.scss

@@ -0,0 +1,193 @@
+//
+// Responsive: Utility classes
+// --------------------------------------------------
+
+// Responsive utilities
+
+//
+// More easily include all the states for responsive-utilities.less.
+// [converter] $parent hack
+@mixin responsive-visibility($parent) {
+  #{$parent} {
+    display: block !important;
+  }
+}
+
+// [converter] $parent hack
+@mixin responsive-invisibility($parent) {
+  #{$parent} {
+    display: none !important;
+  }
+}
+
+// IE10 in Windows (Phone) 8
+//
+// Support for responsive views via media queries is kind of borked in IE10, for
+// Surface/desktop in split view and for Windows Phone 8. This particular fix
+// must be accompanied by a snippet of JavaScript to sniff the user agent and
+// apply some conditional CSS to *only* the Surface/desktop Windows 8. Look at
+// our Getting Started page for more information on this bug.
+//
+// For more information, see the following:
+//
+// Issue: https://github.com/twbs/bootstrap/issues/10497
+// Docs: http://getbootstrap.com/getting-started/#support-ie10-width
+// Source: http://timkadlec.com/2013/01/windows-phone-8-and-device-width/
+// Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/
+
+@-ms-viewport {
+  width: device-width;
+}
+
+
+// Visibility utilities
+// Note: Deprecated .visible-xs, .visible-sm, .visible-md, and .visible-lg as of v3.2.0
+
+@include responsive-invisibility('.visible-xs');
+@include responsive-invisibility('.visible-sm');
+@include responsive-invisibility('.visible-md');
+@include responsive-invisibility('.visible-lg');
+
+.visible-xs-block,
+.visible-xs-inline,
+.visible-xs-inline-block,
+.visible-sm-block,
+.visible-sm-inline,
+.visible-sm-inline-block,
+.visible-md-block,
+.visible-md-inline,
+.visible-md-inline-block,
+.visible-lg-block,
+.visible-lg-inline,
+.visible-lg-inline-block {
+  display: none !important;
+}
+
+@media (max-width: $screen-xs-max) {
+  @include responsive-visibility('.visible-xs');
+}
+.visible-xs-block {
+  @media (max-width: $screen-xs-max) {
+    display: block !important;
+  }
+}
+.visible-xs-inline {
+  @media (max-width: $screen-xs-max) {
+    display: inline !important;
+  }
+}
+.visible-xs-inline-block {
+  @media (max-width: $screen-xs-max) {
+    display: inline-block !important;
+  }
+}
+
+@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
+  @include responsive-visibility('.visible-sm');
+}
+.visible-sm-block {
+  @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
+    display: block !important;
+  }
+}
+.visible-sm-inline {
+  @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
+    display: inline !important;
+  }
+}
+.visible-sm-inline-block {
+  @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
+    display: inline-block !important;
+  }
+}
+
+@media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
+  @include responsive-visibility('.visible-md');
+}
+.visible-md-block {
+  @media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
+    display: block !important;
+  }
+}
+.visible-md-inline {
+  @media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
+    display: inline !important;
+  }
+}
+.visible-md-inline-block {
+  @media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
+    display: inline-block !important;
+  }
+}
+
+@media (min-width: $screen-lg-min) {
+  @include responsive-visibility('.visible-lg');
+}
+.visible-lg-block {
+  @media (min-width: $screen-lg-min) {
+    display: block !important;
+  }
+}
+.visible-lg-inline {
+  @media (min-width: $screen-lg-min) {
+    display: inline !important;
+  }
+}
+.visible-lg-inline-block {
+  @media (min-width: $screen-lg-min) {
+    display: inline-block !important;
+  }
+}
+
+@media (max-width: $screen-xs-max) {
+  @include responsive-invisibility('.hidden-xs');
+}
+
+@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
+  @include responsive-invisibility('.hidden-sm');
+}
+
+@media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
+  @include responsive-invisibility('.hidden-md');
+}
+
+@media (min-width: $screen-lg-min) {
+  @include responsive-invisibility('.hidden-lg');
+}
+
+// Print utilities
+//
+// Media queries are placed on the inside to be mixin-friendly.
+
+// Note: Deprecated .visible-print as of v3.2.0
+
+@include responsive-invisibility('.visible-print');
+
+@media print {
+  @include responsive-visibility('.visible-print');
+}
+.visible-print-block {
+  display: none !important;
+
+  @media print {
+    display: block !important;
+  }
+}
+.visible-print-inline {
+  display: none !important;
+
+  @media print {
+    display: inline !important;
+  }
+}
+.visible-print-inline-block {
+  display: none !important;
+
+  @media print {
+    display: inline-block !important;
+  }
+}
+
+@media print {
+  @include responsive-invisibility('.hidden-print');
+}

data/vendor/assets/stylesheets/droidcss/mixins/grid.scss

@@ -0,0 +1,125 @@
+// Grid system
+//
+// Generate semantic grid columns with these mixins.
+
+// Centered container element
+@mixin container-fixed($gutter: $grid-gutter-width) {
+  margin-right: auto;
+  margin-left: auto;
+  padding-left:  ($gutter / 2);
+  padding-right: ($gutter / 2);
+  letter-spacing: -.65em;
+  @include clearfix;
+}
+
+// Creates a wrapper for a series of columns
+@mixin make-row($gutter: $grid-gutter-width) {
+  margin-left:  ($gutter / -2);
+  margin-right: ($gutter / -2);
+  letter-spacing: -.65em;
+  @include clearfix;
+}
+
+// Generate the extra small columns
+@mixin make-xs-column($columns, $gutter: $grid-gutter-width) {
+  display: inline-block;
+  letter-spacing: normal;
+  width: percentage(($columns / $grid-columns));
+  min-height: 1px;
+  padding-left:  ($gutter / 2);
+  padding-right: ($gutter / 2);
+}
+@mixin make-xs-column-offset($columns) {
+  margin-left: percentage(($columns / $grid-columns));
+}
+@mixin make-xs-column-push($columns) {
+  left: percentage(($columns / $grid-columns));
+}
+@mixin make-xs-column-pull($columns) {
+  right: percentage(($columns / $grid-columns));
+}
+
+// Generate the small columns
+@mixin make-sm-column($columns, $gutter: $grid-gutter-width) {
+  min-height: 1px;
+  letter-spacing: normal;
+  padding-left:  ($gutter / 2);
+  padding-right: ($gutter / 2);
+
+  @media (min-width: $screen-sm-min) {
+    float: left;
+    width: percentage(($columns / $grid-columns));
+  }
+}
+@mixin make-sm-column-offset($columns) {
+  @media (min-width: $screen-sm-min) {
+    margin-left: percentage(($columns / $grid-columns));
+  }
+}
+@mixin make-sm-column-push($columns) {
+  @media (min-width: $screen-sm-min) {
+    left: percentage(($columns / $grid-columns));
+  }
+}
+@mixin make-sm-column-pull($columns) {
+  @media (min-width: $screen-sm-min) {
+    right: percentage(($columns / $grid-columns));
+  }
+}
+
+// Generate the medium columns
+@mixin make-md-column($columns, $gutter: $grid-gutter-width) {
+  min-height: 1px;
+  letter-spacing: normal;
+  padding-left:  ($gutter / 2);
+  padding-right: ($gutter / 2);
+
+  @media (min-width: $screen-md-min) {
+    float: left;
+    width: percentage(($columns / $grid-columns));
+  }
+}
+@mixin make-md-column-offset($columns) {
+  @media (min-width: $screen-md-min) {
+    margin-left: percentage(($columns / $grid-columns));
+  }
+}
+@mixin make-md-column-push($columns) {
+  @media (min-width: $screen-md-min) {
+    left: percentage(($columns / $grid-columns));
+  }
+}
+@mixin make-md-column-pull($columns) {
+  @media (min-width: $screen-md-min) {
+    right: percentage(($columns / $grid-columns));
+  }
+}
+
+// Generate the large columns
+@mixin make-lg-column($columns, $gutter: $grid-gutter-width) {
+  min-height: 1px;
+  letter-spacing: normal;
+  padding-left:  ($gutter / 2);
+  padding-right: ($gutter / 2);
+
+  @media (min-width: $screen-lg-min) {
+    float: left;
+    width: percentage(($columns / $grid-columns));
+  }
+}
+@mixin make-lg-column-offset($columns) {
+  @media (min-width: $screen-lg-min) {
+    margin-left: percentage(($columns / $grid-columns));
+  }
+}
+@mixin make-lg-column-push($columns) {
+  @media (min-width: $screen-lg-min) {
+    left: percentage(($columns / $grid-columns));
+  }
+}
+@mixin make-lg-column-pull($columns) {
+  @media (min-width: $screen-lg-min) {
+    right: percentage(($columns / $grid-columns));
+  }
+}
+

data/vendor/assets/stylesheets/droidcss/partials/grid.scss

@@ -1,135 +1,89 @@
-@function contentWidth($num) {
-  @if (unit($gutterWidth) == "%") {
-    @return 100% * ($num/$columnsCount) - 2 * $gutterWidth;
-  } @else {
-    @return 100% * ($num/$columnsCount);
-  }
-}
+@import 'droidcss/mixins/grid';
+@import 'droidcss/mixins/grid-framework';
+
+//
+// Grid system
+// --------------------------------------------------
+
+
+// Container widths
+//
+// Set the container width, and override it for fixed navbars in media queries.
 
-@function contentWidthOffset($num) {
-  @if (unit($gutterWidth) == "%") {
-    @return 100% * ($num/$columnsCount) + 1 * $gutterWidth;
-  } @else {
-    @return 100% * ($num/$columnsCount);
+.container {
+  @include container-fixed;
+
+  @media (min-width: $screen-sm-min) {
+    width: $container-sm;
+  }
+  @media (min-width: $screen-md-min) {
+    width: $container-md;
+  }
+  @media (min-width: $screen-lg-min) {
+    width: $container-lg;
   }
 }
 
-.grid-container {
-  max-width: $gridWidth;
-  margin-left: auto;
-  margin-right: auto;
-  letter-spacing: -4px;
+
+// Fluid container
+//
+// Utilizes the mixin meant for fixed width containers, but without any defined
+// width for fluid, full width layouts.
+
+.container-fluid {
+  @include container-fixed;
 }
 
+
+// Row
+//
+// Rows contain and clear the floats of your columns.
+
 .row {
-  margin-right: -$gutterWidth;
-  margin-left: -$gutterWidth;
-  letter-spacing: -4px;
+  @include make-row;
 }
 
-%grid-settings {
-  #{$gutterType}-left: $gutterWidth;
-  #{$gutterType}-right: $gutterWidth;
-  display: inline-block;
-  vertical-align: top;
-  min-height: 1px;
-  letter-spacing: 0;
-  @include box-sizing(border-box);
-}
 
-%position-relative {
-  position: relative;
-}
+// Columns
+//
+// Common styles for small and large grid columns
 
-@for $i from 1 through $columnsCount {
-  $num: $i;
-  .grid-#{$num} {
-    @extend %grid-settings;
-  }
-  .push-#{$num}, .pull-#{$num} {
-    @extend %position-relative;
-  }
-}
+@include make-grid-columns;
 
-@for $i from 1 through $columnsCount {
-  $num: $i;
-  $contentWidth: contentWidth($num);
-  $contentWidthOffset: contentWidthOffset($num);
-  .grid-#{$num} { width: $contentWidth; }
-  .prefix-#{$num} { #{$gutterType}-left: $contentWidthOffset; }
-  .suffix-#{$num} { #{$gutterType}-right: $contentWidthOffset; }
-  .push-#{$num} { left: $contentWidthOffset; }
-  .pull-#{$num} { left: -$contentWidthOffset; }
-}
 
-/* DESKTOP SUPPORT */
+// Extra small grid
+//
+// Columns, offsets, pushes, and pulls for extra small devices like
+// smartphones.
 
-@media screen and (min-width: $mediaDesktopMin) {
-  .visible-desktop {
-    opacity: 1 !important;
-  }
-  .hide-on-desktop, .only-tablet, .only-mobile {
-    display: none !important;
-  }
+@include make-grid(xs);
+
+
+// Small grid
+//
+// Columns, offsets, pushes, and pulls for the small device range, from phones
+// to tablets.
+
+@media (min-width: $screen-sm-min) {
+  @include make-grid(sm);
 }
 
-/* TABLET SUPPORT */
 
-@media screen and (min-width: $mediaTabletMin) and (max-width: $mediaTabletMax) {
+// Medium grid
+//
+// Columns, offsets, pushes, and pulls for the desktop device range.
 
-  .grid-container {
-    max-width: 100%;
-    #{$gutterTypeTablet}-left: $gutterWidth;
-    #{$gutterTypeTablet}-right: $gutterWidth;
-  }
-  .visible-tablet {
-    opacity: 1 !important;
-  }
-  .hide-on-tablet, .only-desktop, .only-mobile {
-    display: none !important;
-  }
-  .prefix-tablet-0 { #{$gutterTypeTabletOffset}-left: $gutterWidth; }
-  .suffix-tablet-0 { #{$gutterTypeTabletOffset}-right: $gutterWidth; }
-  .push-tablet-0, .pull-tablet-0 { left: 0; }
-
-  @for $i from 1 through $columnsCount {
-    $num: $i;
-    $contentWidth: contentWidth($num);
-    $contentWidthOffset: contentWidthOffset($num);
-    .grid-tablet-#{$num} { width: $contentWidth; }
-    .prefix-tablet-#{$num} { #{$gutterTypeTabletOffset}-left: $contentWidthOffset; }
-    .suffix-tablet-#{$num} { #{$gutterTypeTabletOffset}-right: $contentWidthOffset; }
-    .push-tablet-#{$num} { left: $contentWidthOffset; }
-    .pull-tablet-#{$num} { left: -$contentWidthOffset; }
-  }
+@media (min-width: $screen-md-min) {
+  @include make-grid(md);
 }
 
-/* MOBILE SUPPORT */
 
-@media screen and (max-width: $mediaMobileMax) {
-  .grid-container {
-    max-width: 100%;
-    #{$gutterTypeMobile}-left: $gutterWidth;
-    #{$gutterTypeMobile}-right: $gutterWidth;
-  }
-  .visible-mobile {
-    opacity: 1 !important;
-  }
-  .hide-on-mobile, .only-desktop, .only-tablet {
-    display: none !important;
-  }
-  .prefix-mobile-0 { #{$gutterTypeMobileOffset}-left: $gutterWidth; }
-  .suffix-mobile-0 { #{$gutterTypeMobileOffset}-right: $gutterWidth; }
-  .push-mobile-0, .pull-mobile-0 { left: 0; }
-
-  @for $i from 1 through $columnsCount {
-    $num: $i;
-    $contentWidth: contentWidth($num);
-    $contentWidthOffset: contentWidthOffset($num);
-    .grid-mobile-#{$num} { width: $contentWidth; }
-    .prefix-mobile-#{$num} { #{$gutterTypeMobileOffset}-left: $contentWidthOffset; }
-    .suffix-mobile-#{$num} { #{$gutterTypeMobileOffset}-right: $contentWidthOffset; }
-    .push-mobile-#{$num} { left: $contentWidthOffset; }
-    .pull-mobile-#{$num} { left: -$contentWidthOffset; }
-  }
-}
+// Large grid
+//
+// Columns, offsets, pushes, and pulls for the large desktop device range.
+
+@media (min-width: $screen-lg-min) {
+  @include make-grid(lg);
+}
+
+@import 'droidcss/mixins/grid-utilities';

data/vendor/assets/stylesheets/droidcss/partials/normalize.scss

@@ -0,0 +1,47 @@
+html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
+body,figure{margin:0}
+body{cursor:default}
+article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}
+audio,canvas,progress,video{display:inline-block;vertical-align:baseline}
+audio:not([controls]){display:none;height:0}
+[hidden],template{display:none}
+a{background-color:transparent}
+a:active,a:hover{outline:0}
+abbr[title]{border-bottom:1px dotted}
+b,strong{font-weight:700}
+dfn{font-style:italic}
+h1{font-size:2em;margin:.67em 0}
+mark{background:#ff0;color:#000}
+small{font-size:80%}
+sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
+sup{top:-.5em}
+sub{bottom:-.25em}
+img{border:0}
+svg:not(:root){overflow:hidden}
+figure{margin:1em 40px}
+hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}
+pre{overflow:auto}
+code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}
+button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}
+button{overflow:visible}
+button,select{text-transform:none}
+button,html input[type="button"],/* 1 */
+input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}
+button[disabled],html input[disabled]{cursor:default}
+button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
+input{line-height:normal}
+input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}
+input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}
+input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}
+input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}
+fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}
+legend{border:0;padding:0}
+textarea{overflow:auto}
+optgroup{font-weight:700}
+table{border-collapse:collapse;border-spacing:0}
+td,th{padding:0}
+legend,button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
+input,textarea{cursor:text}
+a,label,select,button,input[type=button],input[type=submit],input[type=checkbox],input[type=radio],input[type=file]{cursor:pointer}
+nav ul{list-style:none;margin:0;padding:0}
+nav ul li{margin:0;padding:0}