Add in masonstrap scss files

- straight conversion from less and it shows
- they compile.. but boy are they bad

masonstrap/_bootswatch.scss

@@ -9,7 +9,7 @@ $web-font-path: "https://fonts.googleapis.com/css?family=Open+Sans:300italic,400
 
 .navbar {
   border: none;
-  font-size: 13px;
+  font-size: 13rem;
   font-weight: 300;
 
   .navbar-toggle:hover .icon-bar {
@@ -22,13 +22,13 @@ $web-font-path: "https://fonts.googleapis.com/css?family=Open+Sans:300italic,400
   }
 
   .btn {
-    padding-top: 6px;
-    padding-bottom: 6px;
+    padding-top: 6rem;
+    padding-bottom: 6rem;
   }
 
   &-form {
-    margin-top: 7px;
-    margin-bottom: 5px;
+    margin-top: 7rem;
+    margin-bottom: 5rem;
 
     .form-control {
       height: auto;
@@ -37,8 +37,8 @@ $web-font-path: "https://fonts.googleapis.com/css?family=Open+Sans:300italic,400
   }
 
   &-text {
-    margin: 12px 15px;
-    line-height: 21px;
+    margin: 12rem 15rem;
+    line-height: 21rem;
   }
 
   .dropdown {
@@ -49,7 +49,7 @@ $web-font-path: "https://fonts.googleapis.com/css?family=Open+Sans:300italic,400
       > li > a,
       > li > a:focus {
         background-color: transparent;
-        font-size: 13px;
+        font-size: 13rem;
         font-weight: 300;
       }
     }
@@ -118,8 +118,8 @@ $web-font-path: "https://fonts.googleapis.com/css?family=Open+Sans:300italic,400
 .btn-group {
 
   .btn ~ .dropdown-toggle {
-    padding-left: 16px;
-    padding-right: 16px;
+    padding-left: 16rem;
+    padding-right: 16rem;
   }
 
   .dropdown-menu {
@@ -127,7 +127,7 @@ $web-font-path: "https://fonts.googleapis.com/css?family=Open+Sans:300italic,400
   }
 
   &.dropup .dropdown-menu {
-    border-top-width: 1px;
+    border-top-width: 1rem;
     border-bottom-width: 0;
     margin-bottom: 0;
   }
@@ -225,11 +225,11 @@ cite {
 }
 
 blockquote {
-  border-left-width: 1px;
+  border-left-width: 1rem;
   color: $gray;
 
   &.pull-right {
-    border-right-width: 1px;
+    border-right-width: 1rem;
   }
 
   small {
@@ -257,7 +257,7 @@ label,
 
 input[type="radio"],
 input[type="checkbox"] {
-  margin-top: 1px;
+  margin-top: 1rem;
 }
 
 // Navs =======================================================================
@@ -287,9 +287,9 @@ input[type="checkbox"] {
 }
 
 .breadcrumb {
-  border: 1px solid $table-border-color;
-  border-radius: 3px;
-  font-size: 10px;
+  border: 1rem solid $table-border-color;
+  border-radius: 3rem;
+  font-size: 10rem;
   font-weight: 300;
   text-transform: uppercase;
 }
@@ -302,7 +302,7 @@ input[type="checkbox"] {
   > li {
     > a,
     > span {
-      margin-left: 4px;
+      margin-left: 4rem;
       color: $gray-light;
     }
   }
@@ -319,19 +319,19 @@ input[type="checkbox"] {
   > li:last-child {
     > a,
     > span {
-      border-radius: 3px;
+      border-radius: 3rem;
     }
   }
 
   &-lg > li > a,
   &-lg > li > span {
-    padding-left: 22px;
-    padding-right: 22px;
+    padding-left: 22rem;
+    padding-right: 22rem;
   }
 
   &-sm > li > a,
   &-sm > li > span {
-    padding: 0 5px;
+    padding: 0 5rem;
   }
 }
 
@@ -389,10 +389,10 @@ input[type="checkbox"] {
 // Progress bars ==============================================================
 
 .progress {
-  height: 22px;
-  padding: 2px;
+  height: 22rem;
+  padding: 2rem;
   background-color: #f6f6f6;
-  border: 1px solid #ccc;
+  border: 1rem solid #ccc;
   @include box-shadow(none);
 }
 
@@ -406,7 +406,7 @@ input[type="checkbox"] {
     font-size: $font-size-small;
 
     > li > a {
-      padding: 12px 15px;
+      padding: 12rem 15rem;
       color: black;
     }
 
@@ -417,16 +417,16 @@ input[type="checkbox"] {
   }
 
   &-header {
-    padding-left: 15px;
-    padding-right: 15px;
-    font-size: 9px;
+    padding-left: 15rem;
+    padding-right: 15rem;
+    font-size: 9rem;
     text-transform: uppercase;
   }
 }
 
 .popover {
   color: #fff;
-  font-size: 12px;
+  font-size: 12rem;
   font-weight: 300;
 }
 

masonstrap/_variables.scss

@@ -49,21 +49,21 @@ $font-family-serif:       Georgia, "Times New Roman", Times, serif !default;
 $font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace !default;
 $font-family-base:        $font-family-sans-serif !default;
 
-$font-size-base:          15px !default;
-$font-size-large:         ceil(($font-size-base * 1.25)) !default; // ~18px
-$font-size-small:         12px !default; // ~12px
-
-$font-size-h1:            floor(($font-size-base * 2.6)) !default; // ~36px
-$font-size-h2:            floor(($font-size-base * 2.15)) !default; // ~30px
-$font-size-h3:            ceil(($font-size-base * 1.7)) !default; // ~24px
-$font-size-h4:            ceil(($font-size-base * 1.25)) !default; // ~18px
+$font-size-base:          15rem !default;
+$font-size-large:         ceil(($font-size-base * 1.25)) !default; // ~18rem
+$font-size-small:         12rem !default; // ~12rem
+
+$font-size-h1:            floor(($font-size-base * 2.6)) !default; // ~36rem
+$font-size-h2:            floor(($font-size-base * 2.15)) !default; // ~30rem
+$font-size-h3:            ceil(($font-size-base * 1.7)) !default; // ~24rem
+$font-size-h4:            ceil(($font-size-base * 1.25)) !default; // ~18rem
 $font-size-h5:            $font-size-base !default;
-$font-size-h6:            ceil(($font-size-base * 0.85)) !default; // ~12px
+$font-size-h6:            ceil(($font-size-base * 0.85)) !default; // ~12rem
 
 //** Unit-less `line-height` for use in components like buttons.
 $line-height-base:        1.4 !default;
 //** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
-$line-height-computed:    floor(($font-size-base * $line-height-base)) !default; // ~20px
+$line-height-computed:    floor(($font-size-base * $line-height-base)) !default; // ~20rem
 
 //** By default, this inherits from the `<body>`.
 $headings-font-family:    $font-family-base !default;
@@ -86,19 +86,19 @@ $icon-font-svg-id:        "glyphicons_halflingsregular" !default;
 
 //== Components
 //
-//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
+//## Define common padding and border radius sizes and more. Values based on 14rem text and 1.428 line-height (~20rem to start).
 
-$padding-base-vertical:     8px !default;
-$padding-base-horizontal:   12px !default;
+$padding-base-vertical:     8rem !default;
+$padding-base-horizontal:   12rem !default;
 
-$padding-large-vertical:    16px !default;
-$padding-large-horizontal:  20px !default;
+$padding-large-vertical:    16rem !default;
+$padding-large-horizontal:  20rem !default;
 
-$padding-small-vertical:    8px !default;
-$padding-small-horizontal:  12px !default;
+$padding-small-vertical:    8rem !default;
+$padding-small-horizontal:  12rem !default;
 
-$padding-xs-vertical:       4px !default;
-$padding-xs-horizontal:     6px !default;
+$padding-xs-vertical:       4rem !default;
+$padding-xs-horizontal:     6rem !default;
 
 $line-height-large:         1.3333333 !default; // extra decimals for Win 8.1 Chrome
 $line-height-small:         1.5 !default;
@@ -108,14 +108,14 @@ $border-radius-large:       0 !default;
 $border-radius-small:       0 !default;
 
 //** Global color for active items (e.g., navs or dropdowns).
-$component-active-color:    $navbar-default-link-color !default;
+$component-active-color:    #fff !default;
 //** Global background color for active items (e.g., navs or dropdowns).
 $component-active-bg:       $brand-primary !default;
 
 //** Width of the `border` for generating carets that indicator dropdowns.
-$caret-width-base:          4px !default;
+$caret-width-base:          4rem !default;
 //** Carets increase slightly in size for larger components.
-$caret-width-large:         5px !default;
+$caret-width-large:         5rem !default;
 
 
 //== Tables
@@ -123,9 +123,9 @@ $caret-width-large:         5px !default;
 //## Customizes the `.table` component with basic values, each used across all table variations.
 
 //** Padding for `<th>`s and `<td>`s.
-$table-cell-padding:            8px !default;
+$table-cell-padding:            8rem !default;
 //** Padding for cells in `.table-condensed`.
-$table-condensed-cell-padding:  5px !default;
+$table-condensed-cell-padding:  5rem !default;
 
 //** Default background color used for all tables.
 $table-bg:                      transparent !default;
@@ -214,7 +214,7 @@ $input-height-large:             (ceil($font-size-large * $line-height-large) +
 $input-height-small:             (floor($font-size-small * $line-height-small) + ($padding-small-vertical * 2) + 2) !default;
 
 //** `.form-group` margin
-$form-group-margin-bottom:       15px !default;
+$form-group-margin-bottom:       15rem !default;
 
 $legend-color:                   $gray-dark !default;
 $legend-border-color:            #e5e5e5 !default;
@@ -285,7 +285,7 @@ $zindex-modal:             1050 !default;
 
 // Extra small screen / phone
 //** Deprecated `$screen-xs` as of v3.0.1
-$screen-xs:                  480px !default;
+$screen-xs:                  480rem !default;
 //** Deprecated `$screen-xs-min` as of v3.2.0
 $screen-xs-min:              $screen-xs !default;
 //** Deprecated `$screen-phone` as of v3.0.1
@@ -293,21 +293,21 @@ $screen-phone:               $screen-xs-min !default;
 
 // Small screen / tablet
 //** Deprecated `$screen-sm` as of v3.0.1
-$screen-sm:                  768px !default;
+$screen-sm:                  768rem !default;
 $screen-sm-min:              $screen-sm !default;
 //** Deprecated `$screen-tablet` as of v3.0.1
 $screen-tablet:              $screen-sm-min !default;
 
 // Medium screen / desktop
 //** Deprecated `$screen-md` as of v3.0.1
-$screen-md:                  992px !default;
+$screen-md:                  992rem !default;
 $screen-md-min:              $screen-md !default;
 //** Deprecated `$screen-desktop` as of v3.0.1
 $screen-desktop:             $screen-md-min !default;
 
 // Large screen / wide desktop
 //** Deprecated `$screen-lg` as of v3.0.1
-$screen-lg:                  1200px !default;
+$screen-lg:                  1200rem !default;
 $screen-lg-min:              $screen-lg !default;
 //** Deprecated `$screen-lg-desktop` as of v3.0.1
 $screen-lg-desktop:          $screen-lg-min !default;
@@ -325,7 +325,7 @@ $screen-md-max:              ($screen-lg-min - 1) !default;
 //** Number of columns in the grid.
 $grid-columns:              12 !default;
 //** Padding between columns. Gets divided in half for the left and right.
-$grid-gutter-width:         30px !default;
+$grid-gutter-width:         30rem !default;
 // Navbar collapse
 //** Point at which the navbar becomes uncollapsed.
 $grid-float-breakpoint:     $screen-sm-min !default;
@@ -338,17 +338,17 @@ $grid-float-breakpoint-max: ($grid-float-breakpoint - 1) !default;
 //## Define the maximum width of `.container` for different screen sizes.
 
 // Small screen / tablet
-$container-tablet:             (720px + $grid-gutter-width) !default;
+$container-tablet:             (720rem + $grid-gutter-width) !default;
 //** For `$screen-sm-min` and up.
 $container-sm:                 $container-tablet !default;
 
 // Medium screen / desktop
-$container-desktop:            (940px + $grid-gutter-width) !default;
+$container-desktop:            (940rem + $grid-gutter-width) !default;
 //** For `$screen-md-min` and up.
 $container-md:                 $container-desktop !default;
 
 // Large screen / wide desktop
-$container-large-desktop:      (1140px + $grid-gutter-width) !default;
+$container-large-desktop:      (1140rem + $grid-gutter-width) !default;
 //** For `$screen-lg-min` and up.
 $container-lg:                 $container-large-desktop !default;
 
@@ -358,12 +358,12 @@ $container-lg:                 $container-large-desktop !default;
 //##
 
 // Basics of a navbar
-$navbar-height:                    45px !default;
+$navbar-height:                    45rem !default;
 $navbar-margin-bottom:             $line-height-computed !default;
 $navbar-border-radius:             $border-radius-base !default;
 $navbar-padding-horizontal:        floor(($grid-gutter-width / 2)) !default;
 $navbar-padding-vertical:          (($navbar-height - $line-height-computed) / 2) !default;
-$navbar-collapse-max-height:       340px !default;
+$navbar-collapse-max-height:       340rem !default;
 
 $navbar-default-color:             #006633 !default;
 $navbar-default-bg:                #006633 !default;
@@ -420,7 +420,7 @@ $navbar-inverse-toggle-border-color:       transparent !default;
 //##
 
 //=== Shared nav styles
-$nav-link-padding:                          10px 15px !default;
+$nav-link-padding:                          10rem 15rem !default;
 $nav-link-hover-bg:                         $gray-lighter !default;
 
 $nav-disabled-link-color:                   $gray-light !default;
@@ -471,7 +471,7 @@ $pagination-disabled-border:           transparent !default;
 
 $pager-bg:                             $pagination-bg !default;
 $pager-border:                         $pagination-border !default;
-$pager-border-radius:                  3px !default;
+$pager-border-radius:                  3rem !default;
 
 $pager-hover-bg:                       $pagination-hover-bg !default;
 
@@ -485,7 +485,7 @@ $pager-disabled-color:                 $gray-light !default;
 //
 //##
 
-$jumbotron-padding:              30px !default;
+$jumbotron-padding:              30rem !default;
 $jumbotron-color:                inherit !default;
 $jumbotron-bg:                   #fafafa !default;
 $jumbotron-heading-color:        inherit !default;
@@ -519,7 +519,7 @@ $state-danger-border:            darken($state-danger-text, 5%) !default;
 //##
 
 //** Tooltip max width
-$tooltip-max-width:           200px !default;
+$tooltip-max-width:           200rem !default;
 //** Tooltip text color
 $tooltip-color:               #fff !default;
 //** Tooltip background color
@@ -527,7 +527,7 @@ $tooltip-bg:                  $gray-dark !default;
 $tooltip-opacity:             .9 !default;
 
 //** Tooltip arrow width
-$tooltip-arrow-width:         5px !default;
+$tooltip-arrow-width:         5rem !default;
 //** Tooltip arrow color
 $tooltip-arrow-color:         $tooltip-bg !default;
 
@@ -539,7 +539,7 @@ $tooltip-arrow-color:         $tooltip-bg !default;
 //** Popover body background color
 $popover-bg:                          $gray-dark !default;
 //** Popover maximum width
-$popover-max-width:                   276px !default;
+$popover-max-width:                   276rem !default;
 //** Popover border color
 $popover-border-color:                transparent !default;
 //** Popover fallback border color
@@ -549,7 +549,7 @@ $popover-fallback-border-color:       $gray-dark !default;
 $popover-title-bg:                    $popover-bg !default;
 
 //** Popover arrow width
-$popover-arrow-width:                 10px !default;
+$popover-arrow-width:                 10rem !default;
 //** Popover arrow color
 $popover-arrow-color:                 $popover-bg !default;
 
@@ -589,10 +589,10 @@ $label-link-hover-color:      #fff !default;
 //##
 
 //** Padding applied to the modal body
-$modal-inner-padding:         20px !default;
+$modal-inner-padding:         20rem !default;
 
 //** Padding applied to the modal title
-$modal-title-padding:         15px !default;
+$modal-title-padding:         15rem !default;
 //** Modal title line-height
 $modal-title-line-height:     $line-height-base !default;
 
@@ -612,16 +612,16 @@ $modal-header-border-color:   #e5e5e5 !default;
 //** Modal footer border color
 $modal-footer-border-color:   $modal-header-border-color !default;
 
-$modal-lg:                    900px !default;
-$modal-md:                    600px !default;
-$modal-sm:                    300px !default;
+$modal-lg:                    900rem !default;
+$modal-md:                    600rem !default;
+$modal-sm:                    300rem !default;
 
 
 //== Alerts
 //
 //## Define alert colors, border radius, and padding.
 
-$alert-padding:               15px !default;
+$alert-padding:               15rem !default;
 $alert-border-radius:         $border-radius-base !default;
 $alert-link-font-weight:      bold !default;
 
@@ -704,8 +704,8 @@ $list-group-link-heading-color: #333 !default;
 //##
 
 $panel-bg:                    #fff !default;
-$panel-body-padding:          15px !default;
-$panel-heading-padding:       10px 15px !default;
+$panel-body-padding:          15rem !default;
+$panel-heading-padding:       10rem 15rem !default;
 $panel-footer-padding:        $panel-heading-padding !default;
 $panel-border-radius:         $border-radius-base !default;
 
@@ -743,7 +743,7 @@ $panel-danger-heading-bg:     $brand-danger !default;
 //##
 
 //** Padding around the thumbnail image
-$thumbnail-padding:           4px !default;
+$thumbnail-padding:           4rem !default;
 //** Thumbnail background color
 $thumbnail-bg:                $body-bg !default;
 //** Thumbnail border color
@@ -754,7 +754,7 @@ $thumbnail-border-radius:     $border-radius-base !default;
 //** Custom text color for thumbnail captions
 $thumbnail-caption-color:     $text-color !default;
 //** Padding around the thumbnail caption
-$thumbnail-caption-padding:   9px !default;
+$thumbnail-caption-padding:   9rem !default;
 
 
 //== Wells
@@ -781,15 +781,15 @@ $badge-active-bg:             #fff !default;
 
 $badge-font-weight:           bold !default;
 $badge-line-height:           1 !default;
-$badge-border-radius:         10px !default;
+$badge-border-radius:         10rem !default;
 
 
 //== Breadcrumbs
 //
 //##
 
-$breadcrumb-padding-vertical:   8px !default;
-$breadcrumb-padding-horizontal: 15px !default;
+$breadcrumb-padding-vertical:   8rem !default;
+$breadcrumb-padding-horizontal: 15rem !default;
 //** Breadcrumb background color
 $breadcrumb-bg:                 #f5f5f5 !default;
 //** Breadcrumb text color
@@ -804,12 +804,12 @@ $breadcrumb-separator:          "/" !default;
 //
 //##
 
-$carousel-text-shadow:                        0 1px 2px rgba(0,0,0,.6) !default;
+$carousel-text-shadow:                        0 1rem 2rem rgba(0,0,0,.6) !default;
 
 $carousel-control-color:                      #fff !default;
 $carousel-control-width:                      15% !default;
 $carousel-control-opacity:                    .5 !default;
-$carousel-control-font-size:                  20px !default;
+$carousel-control-font-size:                  20rem !default;
 
 $carousel-indicator-active-bg:                #fff !default;
 $carousel-indicator-border-color:             #fff !default;
@@ -823,7 +823,7 @@ $carousel-caption-color:                      #fff !default;
 
 $close-font-weight:           bold !default;
 $close-color:                 #fff !default;
-$close-text-shadow:           0 1px 0 #fff !default;
+$close-text-shadow:           0 1rem 0 #fff !default;
 
 
 //== Code
@@ -839,7 +839,7 @@ $kbd-bg:                      #333 !default;
 $pre-bg:                      #f5f5f5 !default;
 $pre-color:                   $gray-dark !default;
 $pre-border-color:            #ccc !default;
-$pre-scrollable-max-height:   340px !default;
+$pre-scrollable-max-height:   340rem !default;
 
 
 //== Type
@@ -847,7 +847,7 @@ $pre-scrollable-max-height:   340px !default;
 //##
 
 //** Horizontal offset for forms and lists.
-$component-offset-horizontal: 180px !default;
+$component-offset-horizontal: 180rem !default;
 //** Text muted color
 $text-muted:                  $gray-light !default;
 //** Abbreviations and acronyms border color