droidcss 1.2.7 → 2.0

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

@@ -1,32 +1,63 @@
-// Responsive vars
-$mediaMobileMax: 767px !global !default;
-$mediaTabletMin: 768px !global !default;
-$mediaTabletMax: 1024px !global !default;
-$mediaDesktopMin: 1025px !global !default;
-
-// Grids settings
-$gridWidth: 960px !global !default;
-$columnsCount: 12 !global !default;
-
-// Gutters
-$gutterWidth: 1.04166666666% !global !default;
-
-$gutterType: null !global !default;
-$gutterTypeTablet: null !global !default;
-$gutterTypeTabletOffset: null !global !default;
-$gutterTypeMobile: null !global !default;
-$gutterTypeMobileOffset: null !global !default;
-
-@if (unit($gutterWidth) == "%") {
-  $gutterType: margin !global !default;
-  $gutterTypeTablet: padding !global !default;
-  $gutterTypeTabletOffset: margin !global !default;
-  $gutterTypeMobile: padding !global !default;
-  $gutterTypeMobileOffset: margin !global !default;
-} @else {
-  $gutterType: padding !global !default;
-  $gutterTypeTablet: padding !global !default;
-  $gutterTypeTabletOffset: margin !global !default;
-  $gutterTypeMobile: padding !global !default;
-  $gutterTypeMobileOffset: margin !global !default;
-}
+//== Media queries breakpoints
+//
+//## Define the breakpoints at which your layout will change, adapting to different screen sizes.
+
+// Extra small screen / phone
+$screen-xs:                  480px !default;
+$screen-xs-min:              $screen-xs !default;
+$screen-phone:               $screen-xs-min !default;
+
+// Small screen / tablet
+$screen-sm:                  768px !default;
+$screen-sm-min:              $screen-sm !default;
+$screen-tablet:              $screen-sm-min !default;
+
+// Medium screen / desktop
+$screen-md:                  992px !default;
+$screen-md-min:              $screen-md !default;
+$screen-desktop:             $screen-md-min !default;
+
+// Large screen / wide desktop
+$screen-lg:                  1200px !default;
+$screen-lg-min:              $screen-lg !default;
+$screen-lg-desktop:          $screen-lg-min !default;
+
+// So media queries don't overlap when required, provide a maximum
+$screen-xs-max:              ($screen-sm-min - 1) !default;
+$screen-sm-max:              ($screen-md-min - 1) !default;
+$screen-md-max:              ($screen-lg-min - 1) !default;
+
+
+//== Grid system
+//
+//## Define your custom responsive grid.
+
+//** 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;
+// Navbar collapse
+//** Point at which the navbar becomes uncollapsed.
+$grid-float-breakpoint:     $screen-sm-min !default;
+//** Point at which the navbar begins collapsing.
+$grid-float-breakpoint-max: ($grid-float-breakpoint - 1) !default;
+
+
+//== Container sizes
+//
+//## Define the maximum width of `.container` for different screen sizes.
+
+// Small screen / tablet
+$container-tablet:             (720px + $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;
+//** For `$screen-md-min` and up.
+$container-md:                 $container-desktop !default;
+
+// Large screen / wide desktop
+$container-large-desktop:      (1140px + $grid-gutter-width) !default;
+//** For `$screen-lg-min` and up.
+$container-lg:                 $container-large-desktop !default;