From 81c83cf18df62743ce59a0f228fde02d15fa59a8 Mon Sep 17 00:00:00 2001 From: jomurgel Date: Fri, 26 Oct 2018 11:40:41 -0600 Subject: [PATCH] updates color variables to use `$color-type-element` or `$color-element` format. --- assets/sass/base/_scaffolding.scss | 18 +++--- assets/sass/base/_typography.scss | 4 +- assets/sass/modules/_buttons.scss | 6 +- assets/sass/modules/_comments.scss | 10 +-- assets/sass/modules/_forms.scss | 6 +- assets/sass/modules/_header.scss | 2 +- assets/sass/modules/_icons.scss | 4 +- assets/sass/modules/_modal.scss | 8 +-- assets/sass/modules/_tables.scss | 6 +- .../navigation/_global-navigation.scss | 2 +- .../navigation/_mobile-navigation.scss | 6 +- .../default-blocks/_wp-block-button.scss | 2 +- .../default-blocks/_wp-block-pullquote.scss | 4 +- .../default-blocks/_wp-block-separator.scss | 2 +- assets/sass/plugins/_gravity-forms.scss | 6 +- .../sass/utilities/variables/_color-var.scss | 62 +++++++++---------- docs/index.html | 2 +- 17 files changed, 75 insertions(+), 75 deletions(-) diff --git a/assets/sass/base/_scaffolding.scss b/assets/sass/base/_scaffolding.scss index d57b952ff..6a2b0a151 100644 --- a/assets/sass/base/_scaffolding.scss +++ b/assets/sass/base/_scaffolding.scss @@ -18,7 +18,7 @@ // The section
&-header { - border-bottom: 1px solid $color-scaffolding-border; + border-bottom: 1px solid $color-border-scaffolding; display: flex; justify-content: space-between; margin-bottom: $gutter; @@ -48,16 +48,16 @@ // The 
 container.
 		pre {
-			background-color: $color-pre-background;
-			border: 1px solid $color-pre-border;
-			color: $color-pre-text;
+			background-color: $color-background-pre;
+			border: 1px solid $color-border-pre;
+			color: $color-text-pre;
 			margin: 0 0 $gutter;
 			padding: $gutter;
 		} // pre
 
 		// The  container.
 		code {
-			background-color: $color-code-background;
+			background-color: $color-background-code;
 			font-size: rem(13);
 			padding: rem(5);
 		} // code
@@ -87,7 +87,7 @@
 
 	// Each swatch.
 	.swatch {
-		border: 1px solid $color-scaffolding-swatch-border;
+		border: 1px solid $color-border-scaffolding-swatch;
 		border-radius: rem(5);
 		flex: 0 1 23.875%;
 		height: rem(125);
@@ -103,7 +103,7 @@
 		// The swatch 

 		& header {
 			align-content: center;
-			color: $color-scaffolding-color;
+			color: $color-scaffolding;
 			display: flex;
 			flex-direction: column;
 			height: calc(100% - 39px);
@@ -114,8 +114,8 @@
 		& footer {
 			@include position(absolute, null null 0 null);
 
-			background-color: $color-scaffolding-background;
-			border-top: 1px solid $color-scaffolding-color;
+			background-color: $color-background-scaffolding;
+			border-top: 1px solid $color-scaffolding;
 			border-bottom-left-radius: rem(4);
 			border-bottom-right-radius: rem(4);
 			font-size: rem(12);
diff --git a/assets/sass/base/_typography.scss b/assets/sass/base/_typography.scss
index f4831a974..98c6e471c 100644
--- a/assets/sass/base/_typography.scss
+++ b/assets/sass/base/_typography.scss
@@ -89,8 +89,8 @@ address {
 } // address
 
 pre {
-	background-color: $color-pre-background;
-	color: $color-pre-text;
+	background-color: $color-background-pre;
+	color: $color-text-pre;
 	font-family: $font-pre;
 	font-size: rem(13);
 	line-height: $line-height-pre;
diff --git a/assets/sass/modules/_buttons.scss b/assets/sass/modules/_buttons.scss
index a4aad9b07..691c7833d 100644
--- a/assets/sass/modules/_buttons.scss
+++ b/assets/sass/modules/_buttons.scss
@@ -8,11 +8,11 @@ input[type='button'],
 input[type='reset'],
 input[type='submit'] {
 	appearance: none;
-	background-color: $color-button-background;
+	background-color: $color-background-button;
 	border: none;
 	border-radius: 0;
 	border-width: 0;
-	color: $color-button-text;
+	color: $color-text-button;
 	line-height: 1.5;
 	margin: 0;
 	padding: $padding-input;
@@ -26,6 +26,6 @@ input[type='submit'] {
 	&:hover,
 	&:active,
 	&:focus {
-		background-color: $color-button-background-hover;
+		background-color: $color-background-button-hover;
 	} // &:active, &:focus
 } // button, input[type="button"], input[type="reset"], input[type="submit"]
diff --git a/assets/sass/modules/_comments.scss b/assets/sass/modules/_comments.scss
index 0cbb60e9e..ba73ea857 100644
--- a/assets/sass/modules/_comments.scss
+++ b/assets/sass/modules/_comments.scss
@@ -6,7 +6,7 @@
 // Comment area scaffolding
 //-----------------------------------------
 .comments-area {
-	border-top: 1px solid $color-comment-border;
+	border-top: 1px solid $color-border-comment;
 	margin: rem(100) 0 rem(151);
 
 	@include media($desktop) {
@@ -64,7 +64,7 @@
 		// Focus + active state.
 		&:focus,
 		&:active {
-			border: 1px solid $color-comment-focus-border;
+			border: 1px solid $color-border-comment-focus;
 		} // &:focus, &:active
 
 		@include media($phone) {
@@ -80,7 +80,7 @@
 		// Focus + active state.
 		&:focus,
 		&:active {
-			border: 1px solid $color-comment-focus-border
+			border: 1px solid $color-border-comment-focus
 		} // &:focus, &:active
 	} // textara
 
@@ -105,7 +105,7 @@
 
 	// Even comments get nice gray background.
 	.even:not(.bypostauthor) > .comment-body {
-		background-color: $color-even-background;
+		background-color: $color-background-even;
 	} // .even > .comment-body
 
 	// Each comment body.
@@ -159,7 +159,7 @@
 
 	// By post author.
 	.bypostauthor {
-		background-color: $color-author-background;
+		background-color: $color-background-author;
 		display: block;
 	} // .bypostauthor
 
diff --git a/assets/sass/modules/_forms.scss b/assets/sass/modules/_forms.scss
index 32516d522..68fbd6ca2 100644
--- a/assets/sass/modules/_forms.scss
+++ b/assets/sass/modules/_forms.scss
@@ -58,14 +58,14 @@ input[type='datetime-local'],
 input[type='color'],
 textarea {
 	appearance: none;
-	border: 1px solid $color-input-border;
+	border: 1px solid $color-border-input;
 	border-radius: 0;
-	color: $color-input-text;
+	color: $color-text-input;
 	line-height: 1.5;
 	padding: $padding-input;
 
 	&:focus {
-		color: $color-input-focus-text;
+		color: $color-focus-text-input;
 	} // &:focus
 } // input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="range"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], textarea
 
diff --git a/assets/sass/modules/_header.scss b/assets/sass/modules/_header.scss
index 8fa8bf9a7..475264a50 100644
--- a/assets/sass/modules/_header.scss
+++ b/assets/sass/modules/_header.scss
@@ -90,7 +90,7 @@
 	// Span the button the full width.
 	.button-link,
 	.cta-button {
-		color: $color-cta-link-color;
+		color: $color-cta-link;
 		display: block;
 		text-align: center;
 		text-decoration: none;
diff --git a/assets/sass/modules/_icons.scss b/assets/sass/modules/_icons.scss
index 02230e0c4..8b48efa4f 100644
--- a/assets/sass/modules/_icons.scss
+++ b/assets/sass/modules/_icons.scss
@@ -46,7 +46,7 @@
 	&::after {
 		@include size(rem(20) rem(3));
 
-		background: $color-icon-close-background;
+		background: $color-background-icon-close;
 		border-radius: $border-radius-thin;
 		content: '';
 		cursor: pointer;
@@ -78,7 +78,7 @@
 	&::after {
 		@include size(rem(10) rem(2));
 
-		background: $color-down-arrow-background;
+		background: $color-background-down-arrow;
 		border-radius: $border-radius-thin;
 		content: '';
 		cursor: pointer;
diff --git a/assets/sass/modules/_modal.scss b/assets/sass/modules/_modal.scss
index ad807ea31..c0ead8fe2 100644
--- a/assets/sass/modules/_modal.scss
+++ b/assets/sass/modules/_modal.scss
@@ -29,7 +29,7 @@
 	// The modal content container.
 	.modal-content {
 		background-clip: padding-box;
-		background-color: $color-modal-background;
+		background-color: $color-background-modal;
 		border-radius: $border-radius-medium;
 		box-shadow: 0 0 rem(10) rem(3) $color-box-shadow;
 		outline: 0;
@@ -46,10 +46,10 @@
 				@include position(absolute, rem(-15) rem(-15) null null);
 				@include size(rem(30) rem(30));
 
-				background: $color-modal-close-background;
-				border: 3px solid $color-modal-close-color;
+				background: $color-background-modal-close;
+				border: 3px solid $color-modal-close;
 				border-radius: 50%;
-				color: $color-modal-close-color;
+				color: $color-modal-close;
 				cursor: pointer;
 				font-size: rem(30);
 				line-height: 0;
diff --git a/assets/sass/modules/_tables.scss b/assets/sass/modules/_tables.scss
index a9fa56266..ba7c36c5a 100644
--- a/assets/sass/modules/_tables.scss
+++ b/assets/sass/modules/_tables.scss
@@ -53,7 +53,7 @@ table {
 
 	// td
 	td {
-		border: 1px solid $color-table-border;
+		border: 1px solid $color-border-table;
 		border-bottom: 0;
 		display: block;
 		font-size: rem(13);
@@ -65,7 +65,7 @@ table {
 
 		// last-child
 		&:last-child {
-			border-bottom: 1px solid $color-table-border;
+			border-bottom: 1px solid $color-border-table;
 		} // &:last-child
 
 		// before
@@ -78,6 +78,6 @@ table {
 	} // td
 
 	@include media($phone) {
-		border: 1px solid $color-table-border;
+		border: 1px solid $color-border-table;
 	}
 } // table
diff --git a/assets/sass/modules/navigation/_global-navigation.scss b/assets/sass/modules/navigation/_global-navigation.scss
index 889f17a67..72b8851ab 100644
--- a/assets/sass/modules/navigation/_global-navigation.scss
+++ b/assets/sass/modules/navigation/_global-navigation.scss
@@ -13,7 +13,7 @@
 		&.sub-menu {
 			@include padding(rem(10));
 
-			background: $color-submenu-background;
+			background: $color-background-submenu;
 
 			li {
 				@include margin(0);
diff --git a/assets/sass/modules/navigation/_mobile-navigation.scss b/assets/sass/modules/navigation/_mobile-navigation.scss
index 7a15c4032..ac5bcf016 100644
--- a/assets/sass/modules/navigation/_mobile-navigation.scss
+++ b/assets/sass/modules/navigation/_mobile-navigation.scss
@@ -142,7 +142,7 @@
 	&::after {
 		@include size(rem(35) rem(5));
 
-		background: $color-hamburger-background;
+		background: $color-background-hamburger;
 		border-radius: $border-radius-thin;
 		content: '';
 		cursor: pointer;
@@ -183,7 +183,7 @@
 		@include size(rem(220) 100%);
 
 		-webkit-overflow-scrolling: touch;
-		background-color: $color-off-canvas-background;
+		background-color: $color-background-off-canvas;
 		overflow-y: auto;
 		transform: translateX(rem(-220));
 		transition: $transition-transform;
@@ -260,7 +260,7 @@
 	&-screen {
 		@include position(fixed, 0);
 
-		background: $color-off-canvas-screen-background;
+		background: $color-background-off-canvas-screen;
 		opacity: 0;
 		transition: $transition-opacity;
 		visibility: hidden;
diff --git a/assets/sass/modules/wp-blocks/default-blocks/_wp-block-button.scss b/assets/sass/modules/wp-blocks/default-blocks/_wp-block-button.scss
index 34de3631b..b725e42af 100644
--- a/assets/sass/modules/wp-blocks/default-blocks/_wp-block-button.scss
+++ b/assets/sass/modules/wp-blocks/default-blocks/_wp-block-button.scss
@@ -7,7 +7,7 @@
 
 	// The class on the .
 	.wp-block-button__link {
-		background: $color-block-button-background;
+		background: $color-background-block-button;
 		border-radius: 0;
 
 		// The hover and focus states.
diff --git a/assets/sass/modules/wp-blocks/default-blocks/_wp-block-pullquote.scss b/assets/sass/modules/wp-blocks/default-blocks/_wp-block-pullquote.scss
index 7edf990eb..1da6feede 100644
--- a/assets/sass/modules/wp-blocks/default-blocks/_wp-block-pullquote.scss
+++ b/assets/sass/modules/wp-blocks/default-blocks/_wp-block-pullquote.scss
@@ -4,6 +4,6 @@
 
 // Pullquote defaults.
 .wp-block-pullquote {
-	border-bottom: 2px solid $color-block-border;
-	border-top: 2px solid $color-block-border;
+	border-bottom: 2px solid $color-border-block;
+	border-top: 2px solid $color-border-block;
 } // .wp-block-pullquote
\ No newline at end of file
diff --git a/assets/sass/modules/wp-blocks/default-blocks/_wp-block-separator.scss b/assets/sass/modules/wp-blocks/default-blocks/_wp-block-separator.scss
index afe7086cf..48e096ae7 100644
--- a/assets/sass/modules/wp-blocks/default-blocks/_wp-block-separator.scss
+++ b/assets/sass/modules/wp-blocks/default-blocks/_wp-block-separator.scss
@@ -4,6 +4,6 @@
 
 // Match the separator with our current default 

 .wp-block-separator {
-	border-bottom: 1px solid $color-block-border;
+	border-bottom: 1px solid $color-border-block;
 	max-width: 100%;
 } // .wp-block-separator.
\ No newline at end of file
diff --git a/assets/sass/plugins/_gravity-forms.scss b/assets/sass/plugins/_gravity-forms.scss
index c5d42dab8..512e17d2b 100644
--- a/assets/sass/plugins/_gravity-forms.scss
+++ b/assets/sass/plugins/_gravity-forms.scss
@@ -32,9 +32,9 @@ $gf-label-font-weight: 700;
 
 // Inputs
 $gf-input-color-background: $color-white;
-$gf-input-color-border: $color-input-border;
-$gf-input-color-text: $color-input-text;
-$gf-input-color-focus-text: $color-input-focus-text;
+$gf-input-color-border: $color-border-input;
+$gf-input-color-text: $color-text-input;
+$gf-input-color-focus-text: $color-focus-text-input;
 $gf-input-padding: $padding-input;
 
 //--------------------------------------------------------------
diff --git a/assets/sass/utilities/variables/_color-var.scss b/assets/sass/utilities/variables/_color-var.scss
index 4f37b5b2f..a2cdd1dca 100644
--- a/assets/sass/utilities/variables/_color-var.scss
+++ b/assets/sass/utilities/variables/_color-var.scss
@@ -81,16 +81,16 @@ $color-background-body: $color-white;
 $color-text-main: $color-cod-gray;
 
 /// Pre Background color.
-$color-pre-background: $color-gallery;
+$color-background-pre: $color-gallery;
 
 /// Pre Border color.
-$color-pre-border: $color-alto;
+$color-border-pre: $color-alto;
 
 /// Pre text color.
-$color-pre-text: $color-cod-gray;
+$color-text-pre: $color-cod-gray;
 
 /// Code background color.
-$color-code-background: $color-alto;
+$color-background-code: $color-alto;
 
 /// Horizontal Rule.
 $color-background-hr: $color-silver;
@@ -138,22 +138,22 @@ $color-link-focus: $color-blue;
 //-----------------------------------------
 
 /// Button background.
-$color-button-background: $color-dove-gray;
+$color-background-button: $color-dove-gray;
 
 /// Button background on hover.
-$color-button-background-hover: $color-mineshaft;
+$color-background-button-hover: $color-mineshaft;
 
 /// Button text.
-$color-button-text: $color-white;
+$color-text-button: $color-white;
 
 /// Input border.
-$color-input-border: $color-silver;
+$color-border-input: $color-silver;
 
 /// Input focused color.
-$color-input-focus-text: $color-cod-gray;
+$color-focus-text-input: $color-cod-gray;
 
 /// Input text.
-$color-input-text: $color-dove-gray;
+$color-text-input: $color-dove-gray;
 
 /// Global input padding.
 $padding-input: rem(6);
@@ -164,7 +164,7 @@ $padding-input: rem(6);
 //-----------------------------------------
 
 /// CTA Link Color.
-$color-cta-link-color: $color-white;
+$color-cta-link: $color-white;
 
 
 //-----------------------------------------
@@ -172,7 +172,7 @@ $color-cta-link-color: $color-white;
 //-----------------------------------------
 
 /// Table borders.
-$color-table-border: $color-silver;
+$color-border-table: $color-silver;
 
 
 //-----------------------------------------
@@ -180,13 +180,13 @@ $color-table-border: $color-silver;
 //-----------------------------------------
 
 /// Modal Content Background.
-$color-modal-background: $color-white;
+$color-background-modal: $color-white;
 
 /// Modal Close Background.
-$color-modal-close-background: $color-black;
+$color-background-modal-close: $color-black;
 
 /// Modal Close Colors.
-$color-modal-close-color: $color-white;
+$color-modal-close: $color-white;
 
 
 //-----------------------------------------
@@ -194,10 +194,10 @@ $color-modal-close-color: $color-white;
 //-----------------------------------------
 
 /// Close Icon Background.
-$color-icon-close-background: $color-white;
+$color-background-icon-close: $color-white;
 
 /// Down Arrow Background Color.
-$color-down-arrow-background: $color-white;
+$color-background-down-arrow: $color-white;
 
 
 //-----------------------------------------
@@ -205,13 +205,13 @@ $color-down-arrow-background: $color-white;
 //-----------------------------------------
 
 /// Comment border.
-$color-comment-border: $color-silver;
+$color-border-comment: $color-silver;
 
 /// Comment focus border.
-$color-comment-focus-border: $color-mineshaft;
+$color-border-comment-focus: $color-mineshaft;
 
 /// Comment even background.
-$color-even-background: $color-gallery;
+$color-background-even: $color-gallery;
 
 /// Comment response background.
 $color-comment-response: $color-white;
@@ -220,7 +220,7 @@ $color-comment-response: $color-white;
 $color-meta-links: $color-tundora;
 
 /// Comment post author background.
-$color-author-background: $color-light-yellow;
+$color-background-author: $color-light-yellow;
 
 
 //-----------------------------------------
@@ -228,10 +228,10 @@ $color-author-background: $color-light-yellow;
 //-----------------------------------------
 
 /// Block button background.
-$color-block-button-background: $color-mineshaft;
+$color-background-block-button: $color-mineshaft;
 
 /// BLock pullquote.
-$color-block-border: $color-silver;
+$color-border-block: $color-silver;
 
 
 //-----------------------------------------
@@ -242,16 +242,16 @@ $color-block-border: $color-silver;
 $color-mobile-menu-link: $color-white;
 
 /// Hamburger background.
-$color-hamburger-background: $color-cod-gray;
+$color-background-hamburger: $color-cod-gray;
 
 /// Off-canvas Container Background.
-$color-off-canvas-background: $color-cod-gray;
+$color-background-off-canvas: $color-cod-gray;
 
 /// Off-canvas Screen Background.
-$color-off-canvas-screen-background: $color-black;
+$color-background-off-canvas-screen: $color-black;
 
 /// Submenu Background.
-$color-submenu-background: $color-white;
+$color-background-submenu: $color-white;
 
 
 //-----------------------------------------
@@ -259,16 +259,16 @@ $color-submenu-background: $color-white;
 //-----------------------------------------
 
 /// Scaffolding header border.
-$color-scaffolding-border: $color-alto;
+$color-border-scaffolding: $color-alto;
 
 /// Scaffolding swatch border.
-$color-scaffolding-swatch-border: $color-alto;
+$color-border-scaffolding-swatch: $color-alto;
 
 /// Scaffolding color.
-$color-scaffolding-color: $color-alto;
+$color-scaffolding: $color-alto;
 
 /// Scaffolding background color.
-$color-scaffolding-background: $color-white;
+$color-background-scaffolding: $color-white;
 
 //-----------------------------------------
 // Sass Map for Theme Colors
diff --git a/docs/index.html b/docs/index.html
index 2f68b15b6..36d6e5d28 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -187,7 +187,7 @@
   <div class="grid-x">
     <div class="cell">100% width no matter what viewport</div>
   </div>
-</div>

variables

variables

desktop-large

$desktop-large: 1800px;

Description

Larger HD Desktops.

Author

  • WebDevStudios

desktop

$desktop: 1200px;

Description

Standard Desktops and Larger Laptops.

Author

  • WebDevStudios

tablet-landscape

$tablet-landscape: 900px;

Description

Smaller Desktops and Standard iPad Tablet.

Author

  • WebDevStudios

wp-admin-bar

$wp-admin-bar: 783px;

Description

Breakpoint for WP Admin Bar.

Author

  • WebDevStudios

tablet-portrait

$tablet-portrait: 600px;

Description

Smaller Tablets and Standard iPad Portrait.

Author

  • WebDevStudios

phone

$phone: 300px;

Description

Phones Smaller Than 500px in Width.

Author

  • WebDevStudios

color-background-body

$color-background-body: $color-white;

Description

Background color.

Author

  • WebDevStudios

color-text-main

$color-text-main: $color-cod-gray;

Description

Main text color.

Author

  • WebDevStudios

color-pre-background

$color-pre-background: $color-gallery;

Description

Pre Background color.

Author

  • WebDevStudios

color-pre-border

$color-pre-border: $color-alto;

Description

Pre Border color.

Author

  • WebDevStudios

color-pre-text

$color-pre-text: $color-cod-gray;

Description

Pre text color.

Author

  • WebDevStudios

color-code-background

$color-code-background: $color-alto;

Description

Code background color.

Author

  • WebDevStudios

color-background-hr

$color-background-hr: $color-silver;

Description

Horizontal Rule.

Author

  • WebDevStudios

color-border-abbr

$color-border-abbr: $color-dove-gray;

Description

Abbreviations.

Author

  • WebDevStudios

color-box-shadow

$color-box-shadow: rgba($color-black, 0.5);

Description

Box shadows.

Author

  • WebDevStudios

color-overlay

$color-overlay: rgba($color-black, 0.3);

Description

Overlays.

Author

  • WebDevStudios

color-background-screen-reader

$color-background-screen-reader: $color-whitesmoke;

Description

Screen reader background color.

Author

  • WebDevStudios

color-text-screen-reader

$color-text-screen-reader: $color-blue;

Description

Screen reader text color.

Author

  • WebDevStudios

color-link

$color-link: $color-blue;

Description

Links.

Author

  • WebDevStudios

color-link-visited

$color-link-visited: $color-blue;

Description

Visited Links.

Author

  • WebDevStudios

color-link-hover

$color-link-hover: $color-blue;

Description

Hovered Links.

Author

  • WebDevStudios

color-link-focus

$color-link-focus: $color-blue;

Description

Focus LInks.

Author

  • WebDevStudios

color-button-background

$color-button-background: $color-dove-gray;

Description

Button background.

Author

  • WebDevStudios

color-button-background-hover

$color-button-background-hover: $color-mineshaft;

Description

Button background on hover.

Author

  • WebDevStudios

color-button-text

$color-button-text: $color-white;

Description

Button text.

Author

  • WebDevStudios

color-input-border

$color-input-border: $color-silver;

Description

Input border.

Author

  • WebDevStudios

color-input-focus-text

$color-input-focus-text: $color-cod-gray;

Description

Input focused color.

Author

  • WebDevStudios

color-input-text

$color-input-text: $color-dove-gray;

Description

Input text.

Author

  • WebDevStudios

padding-input

$padding-input: rem(6);

Description

Global input padding.

Author

  • WebDevStudios

color-cta-link-color

$color-cta-link-color: $color-white;

Description

CTA Link Color.

Author

  • WebDevStudios

color-table-border

$color-table-border: $color-silver;

Description

Table borders.

Author

  • WebDevStudios

color-modal-background

$color-modal-background: $color-white;

Description

Modal Content Background.

Author

  • WebDevStudios

color-modal-close-background

$color-modal-close-background: $color-black;

Description

Modal Close Background.

Author

  • WebDevStudios

color-modal-close-color

$color-modal-close-color: $color-white;

Description

Modal Close Colors.

Author

  • WebDevStudios

color-icon-close-background

$color-icon-close-background: $color-white;

Description

Close Icon Background.

Author

  • WebDevStudios

color-down-arrow-background

$color-down-arrow-background: $color-white;

Description

Down Arrow Background Color.

Author

  • WebDevStudios

color-comment-border

$color-comment-border: $color-silver;

Description

Comment border.

Author

  • WebDevStudios

color-comment-focus-border

$color-comment-focus-border: $color-mineshaft;

Description

Comment focus border.

Author

  • WebDevStudios

color-even-background

$color-even-background: $color-gallery;

Description

Comment even background.

Author

  • WebDevStudios

color-comment-response

$color-comment-response: $color-white;

Description

Comment response background.

Author

  • WebDevStudios

color-meta-links

$color-meta-links: $color-tundora;

Description

Comment meta links.

Author

  • WebDevStudios

color-author-background

$color-author-background: $color-light-yellow;

Description

Comment post author background.

Author

  • WebDevStudios

color-block-button-background

$color-block-button-background: $color-mineshaft;

Description

Block button background.

Author

  • WebDevStudios

color-block-border

$color-block-border: $color-silver;

Description

BLock pullquote.

Author

  • WebDevStudios

color-mobile-menu-link

$color-mobile-menu-link: $color-white;

Description

Mobile menu link.

Author

  • WebDevStudios

color-hamburger-background

$color-hamburger-background: $color-cod-gray;

Description

Hamburger background.

Author

  • WebDevStudios

color-off-canvas-background

$color-off-canvas-background: $color-cod-gray;

Description

Off-canvas Container Background.

Author

  • WebDevStudios

color-off-canvas-screen-background

$color-off-canvas-screen-background: $color-black;

Description

Off-canvas Screen Background.

Author

  • WebDevStudios

color-submenu-background

$color-submenu-background: $color-white;

Description

Submenu Background.

Author

  • WebDevStudios

color-scaffolding-border

$color-scaffolding-border: $color-alto;

Description

Scaffolding header border.

Author

  • WebDevStudios

color-scaffolding-swatch-border

$color-scaffolding-swatch-border: $color-alto;

Description

Scaffolding swatch border.

Author

  • WebDevStudios

color-scaffolding-color

$color-scaffolding-color: $color-alto;

Description

Scaffolding color.

Author

  • WebDevStudios

color-scaffolding-background

$color-scaffolding-background: $color-white;

Description

Scaffolding background color.

Author

  • WebDevStudios

theme-colors

$theme-colors: (
+</div>

variables

variables

desktop-large

$desktop-large: 1800px;

Description

Larger HD Desktops.

Author

  • WebDevStudios

desktop

$desktop: 1200px;

Description

Standard Desktops and Larger Laptops.

Author

  • WebDevStudios

tablet-landscape

$tablet-landscape: 900px;

Description

Smaller Desktops and Standard iPad Tablet.

Author

  • WebDevStudios

wp-admin-bar

$wp-admin-bar: 783px;

Description

Breakpoint for WP Admin Bar.

Author

  • WebDevStudios

tablet-portrait

$tablet-portrait: 600px;

Description

Smaller Tablets and Standard iPad Portrait.

Author

  • WebDevStudios

phone

$phone: 300px;

Description

Phones Smaller Than 500px in Width.

Author

  • WebDevStudios

color-background-body

$color-background-body: $color-white;

Description

Background color.

Author

  • WebDevStudios

color-text-main

$color-text-main: $color-cod-gray;

Description

Main text color.

Author

  • WebDevStudios

color-pre-background

$color-background-pre: $color-gallery;

Description

Pre Background color.

Author

  • WebDevStudios

color-pre-border

$color-border-pre: $color-alto;

Description

Pre Border color.

Author

  • WebDevStudios

color-pre-text

$color-text-pre: $color-cod-gray;

Description

Pre text color.

Author

  • WebDevStudios

color-code-background

$color-background-code: $color-alto;

Description

Code background color.

Author

  • WebDevStudios

color-background-hr

$color-background-hr: $color-silver;

Description

Horizontal Rule.

Author

  • WebDevStudios

color-border-abbr

$color-border-abbr: $color-dove-gray;

Description

Abbreviations.

Author

  • WebDevStudios

color-box-shadow

$color-box-shadow: rgba($color-black, 0.5);

Description

Box shadows.

Author

  • WebDevStudios

color-overlay

$color-overlay: rgba($color-black, 0.3);

Description

Overlays.

Author

  • WebDevStudios

color-background-screen-reader

$color-background-screen-reader: $color-whitesmoke;

Description

Screen reader background color.

Author

  • WebDevStudios

color-text-screen-reader

$color-text-screen-reader: $color-blue;

Description

Screen reader text color.

Author

  • WebDevStudios

color-link

$color-link: $color-blue;

Description

Links.

Author

  • WebDevStudios

color-link-visited

$color-link-visited: $color-blue;

Description

Visited Links.

Author

  • WebDevStudios

color-link-hover

$color-link-hover: $color-blue;

Description

Hovered Links.

Author

  • WebDevStudios

color-link-focus

$color-link-focus: $color-blue;

Description

Focus LInks.

Author

  • WebDevStudios

color-button-background

$color-background-button: $color-dove-gray;

Description

Button background.

Author

  • WebDevStudios

color-button-background-hover

$color-background-button-hover: $color-mineshaft;

Description

Button background on hover.

Author

  • WebDevStudios

color-button-text

$color-text-button: $color-white;

Description

Button text.

Author

  • WebDevStudios

color-input-border

$color-border-input: $color-silver;

Description

Input border.

Author

  • WebDevStudios

color-input-focus-text

$color-focus-text-input: $color-cod-gray;

Description

Input focused color.

Author

  • WebDevStudios

color-input-text

$color-text-input: $color-dove-gray;

Description

Input text.

Author

  • WebDevStudios

padding-input

$padding-input: rem(6);

Description

Global input padding.

Author

  • WebDevStudios

color-cta-link-color

$color-cta-link: $color-white;

Description

CTA Link Color.

Author

  • WebDevStudios

color-table-border

$color-border-table: $color-silver;

Description

Table borders.

Author

  • WebDevStudios

color-modal-background

$color-background-modal: $color-white;

Description

Modal Content Background.

Author

  • WebDevStudios

color-modal-close-background

$color-background-modal-close: $color-black;

Description

Modal Close Background.

Author

  • WebDevStudios

color-modal-close-color

$color-modal-close: $color-white;

Description

Modal Close Colors.

Author

  • WebDevStudios

color-icon-close-background

$color-background-icon-close: $color-white;

Description

Close Icon Background.

Author

  • WebDevStudios

color-down-arrow-background

$color-background-down-arrow: $color-white;

Description

Down Arrow Background Color.

Author

  • WebDevStudios

color-comment-border

$color-border-comment: $color-silver;

Description

Comment border.

Author

  • WebDevStudios

color-comment-focus-border

$color-border-comment-focus: $color-mineshaft;

Description

Comment focus border.

Author

  • WebDevStudios

color-even-background

$color-background-even: $color-gallery;

Description

Comment even background.

Author

  • WebDevStudios

color-comment-response

$color-comment-response: $color-white;

Description

Comment response background.

Author

  • WebDevStudios

color-meta-links

$color-meta-links: $color-tundora;

Description

Comment meta links.

Author

  • WebDevStudios

color-author-background

$color-background-author: $color-light-yellow;

Description

Comment post author background.

Author

  • WebDevStudios

color-block-button-background

$color-background-block-button: $color-mineshaft;

Description

Block button background.

Author

  • WebDevStudios

color-block-border

$color-border-block: $color-silver;

Description

BLock pullquote.

Author

  • WebDevStudios

color-mobile-menu-link

$color-mobile-menu-link: $color-white;

Description

Mobile menu link.

Author

  • WebDevStudios

color-hamburger-background

$color-background-hamburger: $color-cod-gray;

Description

Hamburger background.

Author

  • WebDevStudios

color-off-canvas-background

$color-background-off-canvas: $color-cod-gray;

Description

Off-canvas Container Background.

Author

  • WebDevStudios

color-off-canvas-screen-background

$color-background-off-canvas-screen: $color-black;

Description

Off-canvas Screen Background.

Author

  • WebDevStudios

color-submenu-background

$color-background-submenu: $color-white;

Description

Submenu Background.

Author

  • WebDevStudios

color-scaffolding-border

$color-border-scaffolding: $color-alto;

Description

Scaffolding header border.

Author

  • WebDevStudios

color-scaffolding-swatch-border

$color-border-scaffolding-swatch: $color-alto;

Description

Scaffolding swatch border.

Author

  • WebDevStudios

color-scaffolding-color

$color-scaffolding: $color-alto;

Description

Scaffolding color.

Author

  • WebDevStudios

color-scaffolding-background

$color-background-scaffolding: $color-white;

Description

Scaffolding background color.

Author

  • WebDevStudios

theme-colors

$theme-colors: (
 	alto: $color-alto,
 	black: $color-black,
 	blue: $color-blue,