basscss-rails 3.0.0 → 4.0.0

data/app/assets/stylesheets/basscss/{_utility-layout.scss → _layout.scss}

@@ -1,20 +1,30 @@
 
 // Converted Variables
 
+$width-1: 24rem !default;
+$width-2: 32rem !default;
+$width-3: 48rem !default;
+$width-4: 64rem !default;
 
 // Custom Media Query Variables
 
 
-/* Basscss Utility Layout */
+/* Basscss Layout */
 
 .inline       { display: inline }
+
 .block        { display: block }
+
 .inline-block { display: inline-block }
+
 .table        { display: table }
+
 .table-cell   { display: table-cell }
 
 .overflow-hidden { overflow: hidden }
+
 .overflow-scroll { overflow: scroll }
+
 .overflow-auto   { overflow: auto }
 
 .clearfix:before,
@@ -22,11 +32,21 @@
   content: " ";
   display: table
 }
+
 .clearfix:after { clear: both }
 
 .left  { float: left }
+
 .right { float: right }
 
 .fit { max-width: 100% }
 
+.max-width-1 { max-width: $width-1 }
+
+.max-width-2 { max-width: $width-2 }
+
+.max-width-3 { max-width: $width-3 }
+
+.max-width-4 { max-width: $width-4 }
+
 .border-box { box-sizing: border-box }

data/app/assets/stylesheets/basscss/_lighten.scss

@@ -0,0 +1,20 @@
+
+// Converted Variables
+
+$lighten-1: rgba(255, 255, 255, .0625) !default;
+$lighten-2: rgba(255, 255, 255, .125) !default;
+$lighten-3: rgba(255, 255, 255, .25) !default;
+$lighten-4: rgba(255, 255, 255, .5) !default;
+
+// Custom Media Query Variables
+
+
+/* Basscss Lighten */
+
+.bg-lighten-1 { background-color: $lighten-1 }
+
+.bg-lighten-2 { background-color: $lighten-2 }
+
+.bg-lighten-3 { background-color: $lighten-3 }
+
+.bg-lighten-4 { background-color: $lighten-4 }

data/app/assets/stylesheets/basscss/_margin.scss

@@ -0,0 +1,96 @@
+
+// Converted Variables
+
+$space-1: .5rem !default;
+$space-2: 1rem !default;
+$space-3: 2rem !default;
+$space-4: 4rem !default;
+
+// Custom Media Query Variables
+
+
+/* Basscss Margin */
+
+.m0  { margin:        0 }
+
+.mt0 { margin-top:    0 }
+
+.mr0 { margin-right:  0 }
+
+.mb0 { margin-bottom: 0 }
+
+.ml0 { margin-left:   0 }
+
+.mx0 { margin-left:   0; margin-right:  0 }
+
+.my0 { margin-top:    0; margin-bottom: 0 }
+
+.m1  { margin:        $space-1 }
+
+.mt1 { margin-top:    $space-1 }
+
+.mr1 { margin-right:  $space-1 }
+
+.mb1 { margin-bottom: $space-1 }
+
+.ml1 { margin-left:   $space-1 }
+
+.mx1 { margin-left:   $space-1; margin-right:  $space-1 }
+
+.my1 { margin-top:    $space-1; margin-bottom: $space-1 }
+
+.m2  { margin:        $space-2 }
+
+.mt2 { margin-top:    $space-2 }
+
+.mr2 { margin-right:  $space-2 }
+
+.mb2 { margin-bottom: $space-2 }
+
+.ml2 { margin-left:   $space-2 }
+
+.mx2 { margin-left:   $space-2; margin-right:  $space-2 }
+
+.my2 { margin-top:    $space-2; margin-bottom: $space-2 }
+
+.m3  { margin:        $space-3 }
+
+.mt3 { margin-top:    $space-3 }
+
+.mr3 { margin-right:  $space-3 }
+
+.mb3 { margin-bottom: $space-3 }
+
+.ml3 { margin-left:   $space-3 }
+
+.mx3 { margin-left:   $space-3; margin-right:  $space-3 }
+
+.my3 { margin-top:    $space-3; margin-bottom: $space-3 }
+
+.m4  { margin:        $space-4 }
+
+.mt4 { margin-top:    $space-4 }
+
+.mr4 { margin-right:  $space-4 }
+
+.mb4 { margin-bottom: $space-4 }
+
+.ml4 { margin-left:   $space-4 }
+
+.mx4 { margin-left:   $space-4; margin-right:  $space-4 }
+
+.my4 { margin-top:    $space-4; margin-bottom: $space-4 }
+
+.mxn1 { margin-left: -$space-1; margin-right: -$space-1; }
+
+.mxn2 { margin-left: -$space-2; margin-right: -$space-2; }
+
+.mxn3 { margin-left: -$space-3; margin-right: -$space-3; }
+
+.mxn4 { margin-left: -$space-4; margin-right: -$space-4; }
+
+.ml-auto { margin-left: auto }
+
+.mr-auto { margin-right: auto }
+
+.mx-auto { margin-left: auto; margin-right: auto; }

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

@@ -0,0 +1,55 @@
+
+// Converted Variables
+
+$space-1: .5rem !default;
+$media-object-space: $space-1 !default;
+
+// Custom Media Query Variables
+
+$breakpoint-sm: '(min-width: 40em)' !default;
+$breakpoint-md: '(min-width: 52em)' !default;
+$breakpoint-lg: '(min-width: 64em)' !default;
+
+/* Basscss Media Object */
+
+.media,
+.sm-media,
+.md-media,
+.lg-media {
+  margin-left: -$media-object-space;
+  margin-right: -$media-object-space;
+}
+
+.media {
+  display: flex;
+}
+
+.media-center {
+  align-items: center;
+}
+
+.media-bottom {
+  align-items: flex-end;
+}
+
+.media-img,
+.media-body {
+  padding-left: $media-object-space;
+  padding-right: $media-object-space;
+}
+
+.media-body {
+  flex: 1 1 auto;
+}
+
+@media #{$breakpoint-sm} {
+  .sm-media { display: flex }
+}
+
+@media #{$breakpoint-md} {
+  .md-media { display: flex }
+}
+
+@media #{$breakpoint-lg} {
+  .lg-media { display: flex }
+}

data/app/assets/stylesheets/basscss/_padding.scss

@@ -0,0 +1,82 @@
+
+// Converted Variables
+
+$space-1: .5rem !default;
+$space-2: 1rem !default;
+$space-3: 2rem !default;
+$space-4: 4rem !default;
+
+// Custom Media Query Variables
+
+
+/* Basscss Padding */
+
+.p0  { padding: 0 }
+
+.pt0 { padding-top: 0 }
+
+.pr0 { padding-right: 0 }
+
+.pb0 { padding-bottom: 0 }
+
+.pl0 { padding-left: 0 }
+
+.px0 { padding-left: 0; padding-right:  0 }
+
+.py0 { padding-top: 0;  padding-bottom: 0 }
+
+.p1  { padding:        $space-1 }
+
+.pt1 { padding-top:    $space-1 }
+
+.pr1 { padding-right:  $space-1 }
+
+.pb1 { padding-bottom: $space-1 }
+
+.pl1 { padding-left:   $space-1 }
+
+.py1 { padding-top:    $space-1; padding-bottom: $space-1 }
+
+.px1 { padding-left:   $space-1; padding-right:  $space-1 }
+
+.p2  { padding:        $space-2 }
+
+.pt2 { padding-top:    $space-2 }
+
+.pr2 { padding-right:  $space-2 }
+
+.pb2 { padding-bottom: $space-2 }
+
+.pl2 { padding-left:   $space-2 }
+
+.py2 { padding-top:    $space-2; padding-bottom: $space-2 }
+
+.px2 { padding-left:   $space-2; padding-right:  $space-2 }
+
+.p3  { padding:        $space-3 }
+
+.pt3 { padding-top:    $space-3 }
+
+.pr3 { padding-right:  $space-3 }
+
+.pb3 { padding-bottom: $space-3 }
+
+.pl3 { padding-left:   $space-3 }
+
+.py3 { padding-top:    $space-3; padding-bottom: $space-3 }
+
+.px3 { padding-left:   $space-3; padding-right:  $space-3 }
+
+.p4  { padding:        $space-4 }
+
+.pt4 { padding-top:    $space-4 }
+
+.pr4 { padding-right:  $space-4 }
+
+.pb4 { padding-bottom: $space-4 }
+
+.pl4 { padding-left:   $space-4 }
+
+.py4 { padding-top:    $space-4; padding-bottom: $space-4 }
+
+.px4 { padding-left:   $space-4; padding-right:  $space-4 }

data/app/assets/stylesheets/basscss/{_positions.scss → _position.scss}

@@ -1,22 +1,34 @@
 
 // Converted Variables
 
+$z1: 1 !default;
+$z2: 2 !default;
+$z3: 3 !default;
+$z4: 4 !default;
 
 // Custom Media Query Variables
 
 
-/* Basscss Positions */
+/* Basscss Position */
 
 .relative { position: relative }
+
 .absolute { position: absolute }
+
 .fixed    { position: fixed }
 
 .top-0    { top: 0 }
+
 .right-0  { right: 0 }
+
 .bottom-0 { bottom: 0 }
+
 .left-0   { left: 0 }
 
-.z1 { z-index: 1 }
-.z2 { z-index: 2 }
-.z3 { z-index: 3 }
-.z4 { z-index: 4 }
+.z1 { z-index: $z1 }
+
+.z2 { z-index: $z2 }
+
+.z3 { z-index: $z3 }
+
+.z4 { z-index: $z4 }

data/app/assets/stylesheets/basscss/_progress.scss

@@ -1,67 +1,12 @@
 
 // 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;
-$lighten-1: rgba(255,255,255,.0625) !default;
-$lighten-2: rgba(255,255,255,.125) !default;
-$lighten-3: rgba(255,255,255,.25) !default;
-$lighten-4: rgba(255,255,255,.5) !default;
-$border-width: 1px !default;
-$border-radius: 3px !default;
-$border-color: $darken-2 !default;
+$darken-2: rgba(0, 0, 0, .125) !default;
 
 // Custom Media Query Variables
 
-$breakpoint-sm: '(min-width: 40em)' !default;
-$breakpoint-md: '(min-width: 52em)' !default;
-$breakpoint-lg: '(min-width: 64em)' !default;
 
 /* Basscss Progress */
 
@@ -70,10 +15,10 @@ $breakpoint-lg: '(min-width: 64em)' !default;
   width: 100%;
   height: ( $form-field-height / 4 );
   margin: $form-field-padding-y 0;
+  overflow: hidden;
   background-color: $darken-2;
   border: 0;
   border-radius: 10000px;
-  overflow: hidden;
   -webkit-appearance: none;
 }
 
@@ -84,22 +29,9 @@ $breakpoint-lg: '(min-width: 64em)' !default;
 
 .progress::-webkit-progress-value {
   -webkit-appearance: none;
-  background-color: currentColor;
+  background-color: currentcolor;
 }
 
 .progress::-moz-progress-bar {
-  background-color: currentColor;
-}
-
-
-/* Basscss Defaults */
-
-/*
-
-   COLOR VARIABLES
-
-   - Cool
-   - Warm
-   - Gray Scale
-
-*/
+  background-color: currentcolor;
+}