bootswatch-rails 0.1.0 → 0.2.0

data/README.md

@@ -44,6 +44,7 @@ I'm converting/updating them as time permits. Here's what's included at this poi
 
 * [Amelia](http://bootswatch.com/amelia/)
 * [Cerulean](http://bootswatch.com/cerulean/)
+* [Cosmo](http://bootswatch.com/cosmo/)
 * [Cyborg](http://bootswatch.com/cyborg/)
 * [Journal](http://bootswatch.com/journal/)
 * [Readable](http://bootswatch.com/readable/)

data/lib/bootswatch-rails/version.rb

@@ -1,5 +1,5 @@
 module Bootswatch
   module Rails
-    VERSION = "0.1.0"
+    VERSION = "0.2.0"
   end
 end

data/vendor/assets/stylesheets/bootswatch/amelia/_bootswatch.scss

@@ -29,7 +29,7 @@ h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
 // -----------------------------------------------------
 
 body {
-	@include gradient-radial(lighten(#0F8790, 7%), #0F8790);
+	@include gradient-radial(lighten(#0F8790, .07), #0F8790);
 }
 
 hr {
@@ -73,7 +73,7 @@ footer.footer {
 	}
 
 	.navbar-search .search-query {
-		border: 2px solid lighten($navbarBackground, 10%);
+		border: 2px solid lighten($navbarBackground, .1);
 		@include border-radius(0);
 		@include box-shadow(none);
 
@@ -143,12 +143,12 @@ div.subnav-fixed {
 	}
 
 	li > a:hover {
-		background-color: lighten($navbarBackground, 10%);
+		background-color: lighten($navbarBackground, .1);
 	}
 
 	.navbar-form, .navbar-search {
 		@include box-shadow(none);
-		border-color: lighten($navbarBackground, 10%);
+		border-color: lighten($navbarBackground, .1);
 	}
 
 	.navbar-search .search-query {
@@ -165,19 +165,19 @@ div.subnav-fixed {
   border-color: transparent;
 
   &:hover, &:active, &.active, &.disabled, &[disabled] {
-    background-color: darken($color, 5%);
+    background-color: darken($color, .05);
 	text-shadow: none;
   }
 
   &:active, &.active {
-    background-color: darken($color, 15%);
+    background-color: darken($color, .15);
 	@include box-shadow(none);
   }
 
   // IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves
   &:active,
   &.active {
-    background-color: darken($color, 15%) e("\9");
+    background-color: darken($color, .15) e("\9");
   }
 }
 
@@ -309,17 +309,17 @@ input, textarea, .search-query, .uneditable-input,
 
 .control-group.warning > label,
 .control-group.warning .help-inline {
-	color: lighten($orange, 30%);
+	color: lighten($orange, .3);
 }
 
 .control-group.error > label,
 .control-group.error .help-inline {
-	color: lighten($linkColor, 10%);
+	color: lighten($linkColor, .1);
 }
 
 .control-group.success > label,
 .control-group.success .help-inline {
-	color: lighten($green, 20%);
+	color: lighten($green, .2);
 }
 
 .input-prepend .add-on, .input-append .add-on {
@@ -507,7 +507,7 @@ code, pre {
 }
 
 .label-important, .label-important:hover, .alert-error {
-	background-color: darken($yellow, 3%);
+	background-color: darken($yellow, .03);
 	color: $textColor;
 }
 
@@ -568,10 +568,10 @@ code, pre {
 
 blockquote {
 
-	border-left-color: lighten(#147E88, 12%);
+	border-left-color: lighten(#147E88, .12);
 
 	&.pull-right {
-		border-right-color: lighten(#147E88, 12%);
+		border-right-color: lighten(#147E88, .12);
 	}
 
 	small {

data/vendor/assets/stylesheets/bootswatch/amelia/_variables.scss

@@ -40,7 +40,7 @@ $textColor:             rgba(255, 255, 255, 0.9);
 
 // Links
 // -------------------------
-$linkColor:             lighten($yellow, 15%);
+$linkColor:             lighten($yellow, .15);
 $linkColorHover:        $linkColor;
 
 
@@ -58,10 +58,10 @@ $headingsColor:         inherit; // empty to use BS default, $textColor
 
 // Tables
 // -------------------------
-$tableBackground:                   lighten(#147E88, 10%); // overall background-color
-$tableBackgroundAccent:             lighten(#147E88, 15%); // for striping
+$tableBackground:                   lighten(#147E88, .1); // overall background-color
+$tableBackgroundAccent:             lighten(#147E88, .15); // for striping
 $tableBackgroundHover:              rgba(255, 255, 255, 0.4); // for hover
-$tableBorder:                       lighten(#147E88, 12%); // table and cell border
+$tableBorder:                       lighten(#147E88, .12); // table and cell border
 
 
 // Forms
@@ -117,12 +117,12 @@ $navbarText:                      $white;
 $navbarLinkColor:                 $white;
 $navbarLinkColorHover:            $white;
 $navbarLinkColorActive:           $navbarLinkColorHover;
-$navbarLinkBackgroundHover:       lighten($navbarBackground, 10%);
-$navbarLinkBackgroundActive:      lighten($navbarBackground, 10%);
+$navbarLinkBackgroundHover:       lighten($navbarBackground, .1);
+$navbarLinkBackgroundActive:      lighten($navbarBackground, .1);
 
 $navbarSearchBackground:          rgba(0, 0, 0, 0);
-$navbarSearchBackgroundFocus:     lighten($navbarBackground, 25%);
-$navbarSearchBorder:              darken($navbarSearchBackground, 30%);
+$navbarSearchBackgroundFocus:     lighten($navbarBackground, .25);
+$navbarSearchBorder:              darken($navbarSearchBackground, .3);
 $navbarSearchPlaceholderColor:    $textColor;
 
 
@@ -133,7 +133,7 @@ $btnBackgroundHighlight:            $grayLighter;
 $btnBorder:                         rgba(0, 0, 0, 0);
 
 $btnPrimaryBackground:              $navbarBackground;
-$btnPrimaryBackgroundHighlight:     adjust-hue($btnPrimaryBackground, 15%);
+$btnPrimaryBackgroundHighlight:     adjust-hue($btnPrimaryBackground, .15);
 
 $btnInfoBackground:                 $purple;
 $btnInfoBackgroundHighlight:        $purple;
@@ -144,8 +144,8 @@ $btnSuccessBackgroundHighlight:     $green;
 $btnWarningBackground:              $orange;
 $btnWarningBackgroundHighlight:     $orange;
 
-$btnDangerBackground:               darken($yellow, 3%);
-$btnDangerBackgroundHighlight:      darken($yellow, 3%);
+$btnDangerBackground:               darken($yellow, .03);
+$btnDangerBackgroundHighlight:      darken($yellow, .03);
 
 $btnInverseBackground:              #27666D;
 $btnInverseBackgroundHighlight:     #27666D;
@@ -162,19 +162,19 @@ $heroUnitLeadColor:               inherit;
 // -------------------------
 $warningText:             #c09853;
 $warningBackground:       #fcf8e3;
-$warningBorder:           darken(adjust-hue($warningBackground, -10), 3%);
+$warningBorder:           darken(adjust-hue($warningBackground, -10), .03);
 
 $errorText:               #b94a48;
 $errorBackground:         #f2dede;
-$errorBorder:             darken(adjust-hue($errorBackground, -10), 3%);
+$errorBorder:             darken(adjust-hue($errorBackground, -10), .03);
 
 $successText:             #468847;
 $successBackground:       #dff0d8;
-$successBorder:           darken(adjust-hue($successBackground, -10), 5%);
+$successBorder:           darken(adjust-hue($successBackground, -10), .05);
 
 $infoText:                #3a87ad;
 $infoBackground:          #d9edf7;
-$infoBorder:              darken(adjust-hue($infoBackground, -10), 7%);
+$infoBorder:              darken(adjust-hue($infoBackground, -10), .07);
 
 
 

data/vendor/assets/stylesheets/bootswatch/cerulean/_bootswatch.scss

@@ -25,7 +25,7 @@
 }
 
 .navbar .search-query {
-	border: 1px solid darken($linkColor, 10%);
+	border: 1px solid darken($linkColor, .1);
 }
 
 // responsive menu colors
@@ -47,14 +47,14 @@
 }
 
 .btn-navbar:hover {
-    background-color: darken($white, 20%);
+    background-color: darken($white, .2);
 }
 
 // BUTTONS
 // -----------------------------------------------------
 
 .btn {
-  @include gradient-vertical-three-colors($white, $white, .05, darken($white, 0%));
+  @include gradient-vertical-three-colors($white, $white, .05, darken($white, 0));
   $shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
   @include box-shadow($shadow);
 
@@ -64,27 +64,27 @@
 }
 
 .btn-primary {
-  @include buttonBackground(lighten($btnPrimaryBackground, 5%), $btnPrimaryBackground);
+  @include buttonBackground(lighten($btnPrimaryBackground, .05), $btnPrimaryBackground);
 }
 
 .btn-info {
-  @include buttonBackground(lighten($btnInfoBackground, 5%), $btnInfoBackground);
+  @include buttonBackground(lighten($btnInfoBackground, .05), $btnInfoBackground);
 }
 
 .btn-success {
-  @include buttonBackground(lighten($btnSuccessBackground, 5%), $btnSuccessBackground);
+  @include buttonBackground(lighten($btnSuccessBackground, .05), $btnSuccessBackground);
 }
 
 .btn-warning {
-  @include buttonBackground(lighten($btnWarningBackground, 5%), $btnWarningBackground);
+  @include buttonBackground(lighten($btnWarningBackground, .05), $btnWarningBackground);
 }
 
 .btn-danger {
-  @include buttonBackground(lighten($btnDangerBackground, 5%), $btnDangerBackground);
+  @include buttonBackground(lighten($btnDangerBackground, .05), $btnDangerBackground);
 }
 
 .btn-inverse {
-  @include buttonBackground(lighten($btnInverseBackground, 5%), $btnInverseBackground);
+  @include buttonBackground(lighten($btnInverseBackground, .05), $btnInverseBackground);
 }
 
 // ICONS

data/vendor/assets/stylesheets/bootswatch/cerulean/_variables.scss

@@ -41,7 +41,7 @@ $textColor:             $gray;
 // Links
 // -------------------------
 $linkColor:             #369BD7;
-$linkColorHover:        darken($linkColor, 15%);
+$linkColorHover:        darken($linkColor, .15);
 
 
 // Typography
@@ -67,11 +67,11 @@ $tableBorder:                       #ddd; // table and cell border
 // Buttons
 // -------------------------
 $btnBackground:                     $white;
-$btnBackgroundHighlight:            darken($white, 10%);
-$btnBorder:                         darken($white, 20%);
+$btnBackgroundHighlight:            darken($white, .1);
+$btnBorder:                         darken($white, .2);
 
 $btnPrimaryBackground:              $linkColor;
-$btnPrimaryBackgroundHighlight:     adjust-hue($btnPrimaryBackground, 15%);
+$btnPrimaryBackgroundHighlight:     adjust-hue($btnPrimaryBackground, .15);
 
 $btnInfoBackground:                 $purple;
 $btnInfoBackgroundHighlight:        #2f96b4;
@@ -136,7 +136,7 @@ $hrBorder:                $grayLighter;
 // -------------------------
 $navbarHeight:                    40px;
 $navbarBackground:                $linkColor;
-$navbarBackgroundHighlight:       lighten($linkColor, 10%);
+$navbarBackgroundHighlight:       lighten($linkColor, .1);
 
 $navbarText:                      $grayLighter;
 $navbarLinkColor:                 $grayLighter;
@@ -145,9 +145,9 @@ $navbarLinkColorActive:           $navbarLinkColorHover;
 $navbarLinkBackgroundHover:       transparent;
 $navbarLinkBackgroundActive:      $navbarBackground;
 
-$navbarSearchBackground:          lighten($navbarBackground, 25%);
+$navbarSearchBackground:          lighten($navbarBackground, .25);
 $navbarSearchBackgroundFocus:     $white;
-$navbarSearchBorder:              darken($navbarSearchBackground, 30%);
+$navbarSearchBorder:              darken($navbarSearchBackground, .3);
 $navbarSearchPlaceholderColor:    $white;
 
 
@@ -160,21 +160,21 @@ $heroUnitLeadColor:               inherit;
 
 // Form states and alerts
 // -------------------------
-$warningText:             darken($linkColor, 20%);
-$warningBackground:       lighten($linkColor, 20%);
-$warningBorder:           darken(adjust-hue($warningBackground, -10), 3%);
+$warningText:             darken($linkColor, .2);
+$warningBackground:       lighten($linkColor, .2);
+$warningBorder:           darken(adjust-hue($warningBackground, -10), .03);
 
-$errorText:               darken(#C45559, 5%);
+$errorText:               darken(#C45559, .05);
 $errorBackground:         #EDDBE3;
-$errorBorder:             darken(adjust-hue($errorBackground, -10), 3%);
+$errorBorder:             darken(adjust-hue($errorBackground, -10), .03);
 
-$successText:             darken($green, 5%);
+$successText:             darken($green, .05);
 $successBackground:       #CDB;
-$successBorder:           darken(adjust-hue($successBackground, -10), 5%);
+$successBorder:           darken(adjust-hue($successBackground, -10), .05);
 
-$infoText:                darken(#908A62, 5%);
+$infoText:                darken(#908A62, .05);
 $infoBackground:          #EDEBE1;
-$infoBorder:              darken(adjust-hue($infoBackground, -10), 7%);
+$infoBorder:              darken(adjust-hue($infoBackground, -10), .07);
 
 
 

data/vendor/assets/stylesheets/bootswatch/cosmo/_bootswatch.scss

@@ -0,0 +1,592 @@
+// Swatch: Cosmo
+// Version: 2.0.2
+// -----------------------------------------------------
+
+
+// TYPOGRAPHY
+// -----------------------------------------------------
+
+@import url('https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700');
+
+body {
+	font-weight: 300;
+}
+
+h1 {
+	font-size: 50px;
+}
+
+h2, h3 {
+	font-size: 26px;
+}
+
+h4 {
+	font-size: 14px;
+}
+
+h5, h6 {
+	font-size: 11px;
+}
+
+blockquote {
+
+	padding: 10px 15px;
+	background-color: $grayLighter;
+	border-left-color: $gray;
+
+	&.pull-right {
+		padding: 10px 15px;
+		border-right-color: $gray;
+	}
+
+	small {
+		color: $gray;
+	}
+}
+
+.muted {
+	color: $gray;
+}
+
+// SCAFFOLDING
+// -----------------------------------------------------
+
+// NAVBAR
+// -----------------------------------------------------
+
+.navbar {
+
+	.navbar-inner {
+		background-image: none;
+        @include box-shadow(none);
+        @include border-radius(0);
+	}
+
+	.brand {
+
+		&:hover {
+			color: $navbarLinkColorHover;
+		}
+	}
+
+	.nav > .active > a,
+	.nav > .active > a:hover,
+	.nav > .active > a:focus {
+        @include box-shadow(none);
+		background-color: $navbarLinkBackgroundHover;
+	}
+
+	.nav li.dropdown.open > .dropdown-toggle,
+	.nav li.dropdown.active > .dropdown-toggle,
+	.nav li.dropdown.open.active > .dropdown-toggle {
+		color: $white;
+
+		&:hover {
+			color: $grayLighter;
+		}
+	}
+
+	.navbar-search .search-query {
+		line-height: normal;
+	}
+
+	.navbar-inverse {
+
+		.brand,
+		.nav > li > a {
+			text-shadow: none;
+		}
+
+		.brand:hover,
+		.nav > .active > a,
+		.nav > .active > a:hover,
+		.nav > .active > a:focus {
+			background-color: $navbarInverseLinkBackgroundHover;
+            @include box-shadow(none);
+			color: $white;
+		}
+
+		.navbar-search .search-query {
+			color: $grayDarker;
+		}
+	}
+}
+
+div.subnav {
+
+	background-color: $grayLight;
+	background-image: none;
+    @include box-shadow(none);
+	border-color: transparent;
+    @include border-radius(0);
+
+	.nav {
+		background-color: transparent;
+	}
+
+	.nav > li > a {
+		border-color: transparent;
+	}
+
+	.nav > .active > a {
+		border-color: transparent;
+		background-color: transparent;
+		// border-left-width: 2px;
+		@include box-shadow(none);
+		color: $grayDarker;
+
+		&:hover {
+			background-color: $black;
+			color: $white;
+		}
+	}
+
+    &.subnav-fixed {
+		top: $navbarHeight;
+	}
+}
+
+// NAV
+// -----------------------------------------------------
+
+.nav {
+
+	.open .dropdown-toggle,
+	& > li.dropdown.open.active > a:hover {
+		color: $blue;
+	}
+
+}
+
+.nav-tabs {
+
+	& > li > a {
+         @include border-radius(0);
+	}
+
+	&.nav-stacked {
+
+		& > li > a:hover {
+			background-color: $blue;
+			color: $white;
+		}
+
+		& > .active > a,
+		& > .active > a:hover {
+			background-color: $white;
+			color: $gray;
+		}
+
+		& > li:first-child > a,
+		& > li:last-child > a {
+			@include border-radius(0);
+		}
+	}
+}
+
+.nav-pills {
+
+	& > li > a {
+		background-color: $grayLight;
+		@include border-radius(0);
+		color: $black;
+
+		&:hover {
+			background-color: $black;
+			color: $white;
+		}
+	}
+
+	& > .disabled > a,
+	& > .disabled > a:hover {
+		background-color: $grayLighter;
+		color: $grayDark;
+	}
+}
+
+.nav-list {
+
+	& > li > a {
+		color: $grayDarker;
+
+		&:hover {
+			background-color: $blue;
+			color: $white;
+			text-shadow: none;
+		}
+	}
+
+	.nav-header {
+		color: $grayDarker;
+	}
+
+	.divider {
+		background-color: $gray;
+		border-bottom: none;
+	}
+}
+
+.pagination {
+
+	ul {
+
+		@include box-shadow(none);
+
+		& > li > a,
+		& > li > span {
+			margin-right: 6px;
+			color: $grayDarker;
+
+			&:hover {
+				background-color: $grayDarker;
+				color: $white;
+			}
+		}
+
+		& > li:last-child > a,
+		& > li:last-child > span {
+			margin-right: 0;
+		}
+
+		& > .active > a,
+		& > .active > span {
+			color: $white;
+		}
+
+		& > .disabled > span,
+		& > .disabled > a,
+		& > .disabled > a:hover {
+			background-color: $grayLighter;
+			color: $grayDark;
+		}
+	}
+}
+
+.pager {
+
+	li > a,
+	li > span {
+		background-color: $grayLight;
+		border: none;
+		@include border-radius(0);
+		color: $grayDarker;
+
+		&:hover {
+			background-color: $grayDarker;
+			color: $white;
+		}
+	}
+
+	.disabled > a,
+	.disabled > a:hover,
+	.disabled > span {
+		background-color: $grayLighter;
+		color: $grayDark;
+	}
+
+}
+
+.breadcrumb {
+	background-color: $grayLight;
+
+	li {
+		text-shadow: none;
+	}
+
+	.divider,
+	.active {
+		color: $grayDarker;
+		text-shadow: none;
+	}
+}
+
+// BUTTONS
+// -----------------------------------------------------
+
+.btn {
+
+	padding: 5px 12px;
+	background-image: none;
+	@include box-shadow(none);
+	border: none;
+    @include border-radius(0);
+	text-shadow: none;
+
+	&.disabled {
+		box-shadow: inset 0 2px 4px rgba(0,0,0,.15),0 1px 2px rgba(0,0,0,.05);
+	}
+
+	&.btn-large {
+		padding: 22px 30px;
+	}
+
+	&.btn-mini {
+		padding: 2px 6px;
+	}
+}
+
+.btn-group {
+
+	& > .btn:first-child,
+	& > .btn:last-child,
+	& > .dropdown-toggle {
+		@include border-radius(0);
+	}
+
+	& > .btn + .dropdown-toggle {
+		@include box-shadow(none);
+	}
+}
+
+// TABLES
+// -----------------------------------------------------
+
+.table {
+
+	tbody tr.success td {
+		color: $white;
+	}
+
+	tbody tr.error td {
+		color: $white;
+	}
+
+	tbody tr.info td {
+		color: $white;
+	}
+
+	&.table-bordered {
+		@include border-radius(0);
+
+		thead:first-child tr:first-child th:first-child,
+		tbody:first-child tr:first-child td:first-child {
+			@include border-radius(0);
+		}
+
+		thead:last-child tr:last-child th:first-child,
+		tbody:last-child tr:last-child td:first-child,
+		tfoot:last-child tr:last-child td:first-child {
+			@include border-radius(0);
+		}
+	}
+}
+
+// FORMS
+// -----------------------------------------------------
+
+select, textarea, input[type="text"], input[type="password"], input[type="datetime"],
+input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"],
+input[type="week"], input[type="number"], input[type="email"], input[type="url"],
+input[type="search"], input[type="tel"], input[type="color"] {
+	color: $grayDarker;
+}
+
+.control-group {
+
+	&.warning {
+
+		& > label,
+		.help-block,
+		.help-inline {
+			color: $orange;
+		}
+
+		input,
+		select,
+		textarea {
+			border-color: $orange;
+			color: $grayDarker;
+		}
+	}
+
+	&.error {
+
+		& > label,
+		.help-block,
+		.help-inline {
+			color: $red;
+		}
+
+		input,
+		select,
+		textarea {
+			border-color: $red;
+			color: $grayDarker;
+		}
+	}
+
+	&.success {
+
+		& > label,
+		.help-block,
+		.help-inline {
+			color: $green;
+		}
+
+		input,
+		select,
+		textarea {
+			border-color: $green;
+			color: $grayDarker;
+		}
+	}
+}
+
+legend {
+	border-bottom: none;
+	color: $grayDarker;
+}
+
+.form-actions {
+	border-top: none;
+	background-color: $grayLighter;
+}
+
+// DROPDOWNS
+// -----------------------------------------------------
+
+.dropdown-menu {
+	@include border-radius(0);
+}
+
+// ALERTS, LABELS, BADGES
+// -----------------------------------------------------
+
+.alert {
+	@include border-radius(0);
+	text-shadow: none;
+
+	&.alert-heading, h1, h2, h3, h4, h5, h6 {
+		color: $white;
+	}
+}
+
+.label {
+	min-width: 80px;
+	min-height: 80px;
+	@include border-radius(0);
+	font-weight: 300;
+	text-shadow: none;
+
+	&.label-success {
+		background-color: $green;
+	}
+
+	&.label-important {
+		background-color: $red;
+	}
+
+	&.label-info {
+		background-color: $purple;
+	}
+
+	&.label-inverse {
+		background-color: $black;
+	}
+}
+
+.badge {
+    @include border-radius(0);
+    font-weight: 300;
+    text-shadow: none;
+    .badge-success {
+        background-color: $green;
+    }
+
+    .badge-important {
+        background-color: $red;
+    }
+
+    .badge-info {
+        background-color: $purple;
+    }
+
+    .badge-inverse {
+        background-color: $black;
+    }
+}
+
+// MISC
+// -----------------------------------------------------
+
+.hero-unit {
+	border: none;
+	@include border-radius(0);
+	@include box-shadow(none);
+}
+
+.well {
+	border: none;
+	@include border-radius(0);
+	@include box-shadow(none);
+}
+
+[class^="icon-"], [class*=" icon-"] {
+	margin: 0 2px;
+	vertical-align: -2px;
+}
+
+a.thumbnail {
+	background-color: $grayLight;
+
+	&:hover {
+		background-color: $gray;
+		border-color: transparent;
+	}
+}
+
+.progress {
+	height: 6px;
+	@include border-radius(0);
+	@include box-shadow(none);
+	background-color: $grayLighter;
+	background-image: none;
+
+	.bar {
+		background-color: $blue;
+		background-image: none;
+	}
+
+	&.progress-info {
+		background-color: $purple;
+	}
+
+	&.progress-success {
+		background-color: $green;
+	}
+
+	&.progress-warning {
+		background-color: $orange;
+	}
+
+	&.progress-danger {
+		background-color: $red;
+	}
+}
+
+.modal {
+	@include border-radius(0);
+
+	&.modal-header {
+		border-bottom: none;
+	}
+
+	&.modal-footer {
+		border-top: none;
+		background-color: transparent;
+	}
+}
+
+.popover {
+	@include border-radius(0);
+	color: $white;
+
+	&.popover-title {
+		border-bottom: none;
+		color: $white;
+	}
+
+}
+
+// MEDIA QUERIES
+// -----------------------------------------------------