basscss-rails 0.0.1 → 1.0.0

data/app/assets/stylesheets/basscss/_responsive-states.scss

@@ -0,0 +1,114 @@
+
+// Converted Variables
+
+$aqua: #7fdbff !default;
+$blue: #0074d9 !default;
+$navy: #001f3f !default;
+$teal: #39cccc !default;
+$green: #2ecc40 !default;
+$olive: #3d9970 !default;
+$lime: #01ff70 !default;
+$yellow: #ffdc00 !default;
+$orange: #ff851b !default;
+$red: #ff4136 !default;
+$fuchsia: #f012be !default;
+$purple: #b10dc9 !default;
+$maroon: #85144b !default;
+$white: #fff !default;
+$silver: #ddd !default;
+$gray: #aaa !default;
+$black: #111 !default;
+$font-family: 'Helvetica Neue', Helvetica, sans-serif !default;
+$line-height: 1.5 !default;
+$heading-font-family: $font-family !default;
+$heading-font-weight: bold !default;
+$heading-line-height: 1.25 !default;
+$monospace-font-family: 'Source Code Pro', Consolas, monospace !default;
+$h1: 2rem !default;
+$h2: 1.5rem !default;
+$h3: 1.25rem !default;
+$h4: 1rem !default;
+$h5: .875rem !default;
+$h6: .75rem !default;
+$bold-font-weight: bold !default;
+$space-1: .5rem !default;
+$space-2: 1rem !default;
+$space-3: 2rem !default;
+$space-4: 4rem !default;
+$form-field-font-size: 1rem !default;
+$form-field-height: 2.25rem !default;
+$form-field-padding-y: .5rem !default;
+$form-field-padding-x: .5rem !default;
+$button-font-size: inherit !default;
+$button-font-weight: bold !default;
+$button-line-height: 1.125rem !default;
+$button-padding-y: .5rem !default;
+$button-padding-x: 1rem !default;
+$container-width: 64em !default;
+$darken-1: rgba(0,0,0,.0625) !default;
+$darken-2: rgba(0,0,0,.125) !default;
+$darken-3: rgba(0,0,0,.25) !default;
+$darken-4: rgba(0,0,0,.5) !default;
+$border-width: 1px !default;
+$border-radius: 3px !default;
+$border-color: $darken-2 !default;
+
+// Custom Media Query Variables
+
+$breakpoint-sm: '(min-width: 40em)' !default;
+$breakpoint-md: '(min-width: 52em)' !default;
+$breakpoint-lg: '(min-width: 64em)' !default;
+
+/* Basscss Utility Responsive States */
+
+.sm-show, .md-show, .lg-show {
+  display: none !important
+}
+
+@media #{$breakpoint-sm} {
+  .sm-show { display: block !important }
+}
+
+@media #{$breakpoint-md} {
+  .md-show { display: block !important }
+}
+
+@media #{$breakpoint-lg} {
+  .lg-show { display: block !important }
+}
+
+
+@media #{$breakpoint-sm} {
+  .sm-hide { display: none !important }
+}
+
+@media #{$breakpoint-md} {
+  .md-hide { display: none !important }
+}
+
+@media #{$breakpoint-lg} {
+  .lg-hide { display: none !important }
+}
+
+.display-none { display: none !important }
+
+.hide {
+  position: absolute !important;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  clip: rect(1px, 1px, 1px, 1px);
+}
+
+
+/* Basscss Defaults */
+
+/*
+
+   COLOR VARIABLES
+
+   - Cool
+   - Warm
+   - Gray Scale
+
+*/

data/app/assets/stylesheets/basscss/_responsive-white-space.scss

@@ -0,0 +1,194 @@
+
+// Converted Variables
+
+$space-1: .5rem !default;
+$space-2: 1rem !default;
+$space-3: 2rem !default;
+$space-4: 4rem !default;
+
+// Custom Media Query Variables
+
+$breakpoint-sm: '(min-width: 40em)' !default;
+$breakpoint-md: '(min-width: 52em)' !default;
+$breakpoint-lg: '(min-width: 64em)' !default;
+
+/* Basscss Responsive White Space */
+
+@media #{$breakpoint-sm} {
+
+  .sm-m0  { margin:        0 }
+  .sm-mt0 { margin-top:    0 }
+  .sm-mr0 { margin-right:  0 }
+  .sm-mb0 { margin-bottom: 0 }
+  .sm-ml0 { margin-left:   0 }
+
+  .sm-m1  { margin:        $space-1 }
+  .sm-mt1 { margin-top:    $space-1 }
+  .sm-mr1 { margin-right:  $space-1 }
+  .sm-mb1 { margin-bottom: $space-1 }
+  .sm-ml1 { margin-left:   $space-1 }
+
+  .sm-m2  { margin:        $space-2 }
+  .sm-mt2 { margin-top:    $space-2 }
+  .sm-mr2 { margin-right:  $space-2 }
+  .sm-mb2 { margin-bottom: $space-2 }
+  .sm-ml2 { margin-left:   $space-2 }
+
+  .sm-m3  { margin:        $space-3 }
+  .sm-mt3 { margin-top:    $space-3 }
+  .sm-mr3 { margin-right:  $space-3 }
+  .sm-mb3 { margin-bottom: $space-3 }
+  .sm-ml3 { margin-left:   $space-3 }
+
+  .sm-m4  { margin:        $space-4 }
+  .sm-mt4 { margin-top:    $space-4 }
+  .sm-mr4 { margin-right:  $space-4 }
+  .sm-mb4 { margin-bottom: $space-4 }
+  .sm-ml4 { margin-left:   $space-4 }
+
+  .sm-mxn1 { margin-left: -$space-1; margin-right: -$space-1; }
+  .sm-mxn2 { margin-left: -$space-2; margin-right: -$space-2; }
+  .sm-mxn3 { margin-left: -$space-3; margin-right: -$space-3; }
+  .sm-mxn4 { margin-left: -$space-4; margin-right: -$space-4; }
+
+  .sm-mx-auto { margin-left: auto; margin-right: auto; }
+
+}
+@media #{$breakpoint-md} {
+
+  .md-m0  { margin:        0 }
+  .md-mt0 { margin-top:    0 }
+  .md-mr0 { margin-right:  0 }
+  .md-mb0 { margin-bottom: 0 }
+  .md-ml0 { margin-left:   0 }
+
+  .md-m1  { margin:        $space-1 }
+  .md-mt1 { margin-top:    $space-1 }
+  .md-mr1 { margin-right:  $space-1 }
+  .md-mb1 { margin-bottom: $space-1 }
+  .md-ml1 { margin-left:   $space-1 }
+
+  .md-m2  { margin:        $space-2 }
+  .md-mt2 { margin-top:    $space-2 }
+  .md-mr2 { margin-right:  $space-2 }
+  .md-mb2 { margin-bottom: $space-2 }
+  .md-ml2 { margin-left:   $space-2 }
+
+  .md-m3  { margin:        $space-3 }
+  .md-mt3 { margin-top:    $space-3 }
+  .md-mr3 { margin-right:  $space-3 }
+  .md-mb3 { margin-bottom: $space-3 }
+  .md-ml3 { margin-left:   $space-3 }
+
+  .md-m4  { margin:        $space-4 }
+  .md-mt4 { margin-top:    $space-4 }
+  .md-mr4 { margin-right:  $space-4 }
+  .md-mb4 { margin-bottom: $space-4 }
+  .md-ml4 { margin-left:   $space-4 }
+
+  .md-mxn1 { margin-left: -$space-1; margin-right: -$space-1; }
+  .md-mxn2 { margin-left: -$space-2; margin-right: -$space-2; }
+  .md-mxn3 { margin-left: -$space-3; margin-right: -$space-3; }
+  .md-mxn4 { margin-left: -$space-4; margin-right: -$space-4; }
+
+  .md-mx-auto { margin-left: auto; margin-right: auto; }
+
+}
+@media #{$breakpoint-lg} {
+
+  .lg-m0  { margin:        0 }
+  .lg-mt0 { margin-top:    0 }
+  .lg-mr0 { margin-right:  0 }
+  .lg-mb0 { margin-bottom: 0 }
+  .lg-ml0 { margin-left:   0 }
+
+  .lg-m1  { margin:        $space-1 }
+  .lg-mt1 { margin-top:    $space-1 }
+  .lg-mr1 { margin-right:  $space-1 }
+  .lg-mb1 { margin-bottom: $space-1 }
+  .lg-ml1 { margin-left:   $space-1 }
+
+  .lg-m2  { margin:        $space-2 }
+  .lg-mt2 { margin-top:    $space-2 }
+  .lg-mr2 { margin-right:  $space-2 }
+  .lg-mb2 { margin-bottom: $space-2 }
+  .lg-ml2 { margin-left:   $space-2 }
+
+  .lg-m3  { margin:        $space-3 }
+  .lg-mt3 { margin-top:    $space-3 }
+  .lg-mr3 { margin-right:  $space-3 }
+  .lg-mb3 { margin-bottom: $space-3 }
+  .lg-ml3 { margin-left:   $space-3 }
+
+  .lg-m4  { margin:        $space-4 }
+  .lg-mt4 { margin-top:    $space-4 }
+  .lg-mr4 { margin-right:  $space-4 }
+  .lg-mb4 { margin-bottom: $space-4 }
+  .lg-ml4 { margin-left:   $space-4 }
+
+  .lg-mxn1 { margin-left: -$space-1; margin-right: -$space-1; }
+  .lg-mxn2 { margin-left: -$space-2; margin-right: -$space-2; }
+  .lg-mxn3 { margin-left: -$space-3; margin-right: -$space-3; }
+  .lg-mxn4 { margin-left: -$space-4; margin-right: -$space-4; }
+
+  .lg-mx-auto { margin-left: auto; margin-right: auto; }
+
+}
+
+@media #{$breakpoint-sm} {
+
+  .sm-p1  { padding:       $space-1 }
+  .sm-py1 { padding-top:   $space-1; padding-bottom: $space-1 }
+  .sm-px1 { padding-left:  $space-1; padding-right:  $space-1 }
+
+  .sm-p2  { padding:       $space-2 }
+  .sm-py2 { padding-top:   $space-2; padding-bottom: $space-2 }
+  .sm-px2 { padding-left:  $space-2; padding-right:  $space-2 }
+
+  .sm-p3  { padding:       $space-3 }
+  .sm-py3 { padding-top:   $space-3; padding-bottom: $space-3 }
+  .sm-px3 { padding-left:  $space-3; padding-right:  $space-3 }
+
+  .sm-p4  { padding:       $space-4 }
+  .sm-py4 { padding-top:   $space-4; padding-bottom: $space-4 }
+  .sm-px4 { padding-left:  $space-4; padding-right:  $space-4 }
+
+}
+@media #{$breakpoint-md} {
+
+  .md-p1  { padding:       $space-1 }
+  .md-py1 { padding-top:   $space-1; padding-bottom: $space-1 }
+  .md-px1 { padding-left:  $space-1; padding-right:  $space-1 }
+
+  .md-p2  { padding:       $space-2 }
+  .md-py2 { padding-top:   $space-2; padding-bottom: $space-2 }
+  .md-px2 { padding-left:  $space-2; padding-right:  $space-2 }
+
+  .md-p3  { padding:       $space-3 }
+  .md-py3 { padding-top:   $space-3; padding-bottom: $space-3 }
+  .md-px3 { padding-left:  $space-3; padding-right:  $space-3 }
+
+  .md-p4  { padding:       $space-4 }
+  .md-py4 { padding-top:   $space-4; padding-bottom: $space-4 }
+  .md-px4 { padding-left:  $space-4; padding-right:  $space-4 }
+
+}
+@media #{$breakpoint-lg} {
+
+  .lg-p1  { padding:       $space-1 }
+  .lg-py1 { padding-top:   $space-1; padding-bottom: $space-1 }
+  .lg-px1 { padding-left:  $space-1; padding-right:  $space-1 }
+
+  .lg-p2  { padding:       $space-2 }
+  .lg-py2 { padding-top:   $space-2; padding-bottom: $space-2 }
+  .lg-px2 { padding-left:  $space-2; padding-right:  $space-2 }
+
+  .lg-p3  { padding:       $space-3 }
+  .lg-py3 { padding-top:   $space-3; padding-bottom: $space-3 }
+  .lg-px3 { padding-left:  $space-3; padding-right:  $space-3 }
+
+  .lg-p4  { padding:       $space-4 }
+  .lg-py4 { padding-top:   $space-4; padding-bottom: $space-4 }
+  .lg-px4 { padding-left:  $space-4; padding-right:  $space-4 }
+
+}

data/app/assets/stylesheets/basscss/_table-object.scss

@@ -1,26 +1,58 @@
-// Table object
 
-.mobile-table {
+// Converted Variables
+
+
+// Custom Media Query Variables
+
+$breakpoint-sm: '(min-width: 40em)' !default;
+$breakpoint-md: '(min-width: 52em)' !default;
+$breakpoint-lg: '(min-width: 64em)' !default;
+
+/* Basscss Table Object */
+
+.table {
   display: table;
   width: 100%;
 }
-.mobile-table-cell {
+.table-cell {
   display: table-cell;
   vertical-align: middle;
 }
 
-@media (min-width: $breakpoint-desktop){
-  .table {
+.table-fixed { table-layout: fixed }
+@media #{$breakpoint-sm} {
+
+  .sm-table {
     display: table;
     width: 100%;
   }
-  .table-cell {
+  .sm-table-cell {
     display: table-cell;
     vertical-align: middle;
   }
+
 }
+@media #{$breakpoint-md} {
+
+  .md-table {
+    display: table;
+    width: 100%;
+  }
+  .md-table-cell {
+    display: table-cell;
+    vertical-align: middle;
+  }
 
-.table-fixed {
-  table-layout: fixed;
 }
+@media #{$breakpoint-lg} {
+
+  .lg-table {
+    display: table;
+    width: 100%;
+  }
+  .lg-table-cell {
+    display: table-cell;
+    vertical-align: middle;
+  }
 
+}

data/app/assets/stylesheets/basscss/_ui-utility-groups.scss

@@ -0,0 +1,21 @@
+
+// Converted Variables
+
+$border-width: 1px !default;
+
+// Custom Media Query Variables
+
+
+/* Basscss UI Utility Groups */
+
+.x-group-item { margin-left: -$border-width }
+.x-group-item:first-of-type { margin-left: 0 }
+
+.y-group-item { margin-top: -$border-width }
+.y-group-item:first-of-type { margin-top: 0 }
+
+.x-group-item:focus,
+.y-group-item:focus {
+  position: relative;
+  z-index: 1;
+}

data/app/assets/stylesheets/basscss/_utility-headings.scss

@@ -0,0 +1,33 @@
+
+// Converted Variables
+
+$h00: 4rem !default;
+$h0: 3rem !default;
+$h00-responsive: 8vw !default;
+$h0-responsive: 6vw !default;
+$h1-responsive: 4vw !default;
+$h00-responsive-max: 7.68rem !default;
+$h0-responsive-max: 5.76rem !default;
+$h1-responsive-max: 3.84rem !default;
+
+// Custom Media Query Variables
+
+$breakpoint-md: '(min-width: 52em)' !default;
+$breakpoint-xl: '(min-width: 96em)' !default;
+
+/* Basscss Utility Headings */
+
+.h00 { font-size: $h00 }
+.h0 {  font-size: $h0 }
+
+@media #{$breakpoint-md} {
+  .h00-responsive { font-size: $h00-responsive }
+  .h0-responsive {  font-size: $h0-responsive }
+  .h1-responsive {  font-size: $h1-responsive }
+}
+
+@media #{$breakpoint-xl} {
+  .h00-responsive { font-size: $h00-responsive-max }
+  .h0-responsive {  font-size: $h0-responsive-max }
+  .h1-responsive {  font-size: $h1-responsive-max }
+}

data/app/assets/stylesheets/basscss/_utility-layout.scss

@@ -0,0 +1,31 @@
+
+// Converted Variables
+
+
+// Custom Media Query Variables
+
+
+/* Basscss Utility Layout */
+
+.inline       { display: inline }
+.block        { display: block }
+.inline-block { display: inline-block }
+
+.overflow-hidden { overflow: hidden }
+.overflow-scroll { overflow: scroll }
+.overflow-auto   { overflow: auto }
+
+.clearfix:before,
+.clearfix:after {
+  content: " ";
+  display: table
+}
+.clearfix:after { clear: both }
+
+.left  { float: left }
+.right { float: right }
+
+.fit { max-width: 100% }
+
+.half-width { width: 50% }
+.full-width { width: 100% }