Foundation for RapidWeaver utility classes

foundation-utility-classes.scss

// ------------------------------------------
// Utility Classes
// ------------------------------------------
.fn-text-header{ color:$headerColor }
.fn-text-link{ a {color:$linkColor} }
.fn-text-link{ a:hover {color:$linkHoverColor} }
.fn-text-text{ color:$fontColor; p,div{color:$fontColor;}}
.fn-text-accent{ color:$textAccents }
.fn-text-code-text{ color:$codeText }
.fn-text-header-alt{ color:$headerColorAlt }
.fn-text-link-alt{ a {color:$linkColorAlt} }
.fn-text-link-alt{ a:hover {color:$linkHoverColorAlt} }
.fn-text-text-alt{ color:$fontColorAlt; p,div{color:$fontColorAlt;} }
.fn-text-accent-alt{ color:$textAccentsAlt }
.fn-text-primary{ color:$primaryColor }
.fn-text-primary-text{ color:$primaryText; p,div{color:$primaryText;}}
.fn-text-secondary{ color:$secondaryColor }
.fn-text-secondary-text{ color:$secondaryText; p,div{color:$secondaryText;}}
.fn-text-alert{ color:$alertColor }
.fn-text-success{ color:$successColor }
.fn-text-warning{ color:$warningColor }
.fn-text-info{ color:$infoColor }
.fn-text-modal{ color:$modalColor }
.fn-text-modal-close{ color:$closeColor }
.fn-text-modal-text{ color:$modalText; p,div{color:$modalText;}}

.fn-text-sw1c1{ color:$sw1c1; p,div{color:$sw1c1;}}
.fn-text-sw1c2{ color:$sw1c2; p,div{color:$sw1c2;}}
.fn-text-sw2c1{ color:$sw2c1; p,div{color:$sw2c1;}}
.fn-text-sw2c2{ color:$sw2c2; p,div{color:$sw2c2;}}
.fn-text-sw3c1{ color:$sw3c1; p,div{color:$sw3c1;}}
.fn-text-sw3c2{ color:$sw3c2; p,div{color:$sw3c2;}}
.fn-text-sw4c1{ color:$sw4c1; p,div{color:$sw4c1;}}
.fn-text-sw4c2{ color:$sw4c2; p,div{color:$sw4c2;}}
.fn-text-sw5c1{ color:$sw5c1; p,div{color:$sw5c1;}}
.fn-text-sw5c2{ color:$sw5c2; p,div{color:$sw5c2;}}
.fn-text-sw6c1{ color:$sw6c1; p,div{color:$sw6c1;}}
.fn-text-sw6c2{ color:$sw6c2; p,div{color:$sw6c2;}}

.fn-bg-header{ background-color:$headerColor }
.fn-bg-text{ background-color:$fontColor }
.fn-bg-link{ background-color:$linkColor }
.fn-bg-link-hover{ background-color:$linkHoverColor }
.fn-bg-accent{ background-color:$textAccents }
.fn-bg-code-text{ background-color:$codeText }
.fn-bg-modal-text{ background-color:$modalText }
.fn-bg-header-alt{ background-color:$headerColorAlt }
.fn-bg-text-alt{ background-color:$fontColorAlt }
.fn-bg-link-alt{ background-color:$linkColorAlt }
.fn-bg-link-hover-alt{ background-color:$linkHoverColorAlt }
.fn-bg-accent-alt{ background-color:$textAccentsAlt }
.fn-bg-primary{ background-color:$primaryColor }
.fn-bg-primary-text{ background-color:$primaryText }
.fn-bg-secondary{ background-color:$secondaryColor }
.fn-bg-secondary-text{ background-color:$secondaryText }
.fn-bg-alert{ background-color:$alertColor }
.fn-bg-success{ background-color:$successColor }
.fn-bg-warning{ background-color:$warningColor }
.fn-bg-info{ background-color:$infoColor }
.fn-bg-modal{ background-color:$modalColor }
.fn-bg-modal-close{ background-color:$closeColor }

.fn-bg-sw1c1{ background-color:$sw1c1 }
.fn-bg-sw1c2{ background-color:$sw1c2 }
.fn-bg-sw2c1{ background-color:$sw2c1 }
.fn-bg-sw2c2{ background-color:$sw2c2 }
.fn-bg-sw3c1{ background-color:$sw3c1 }
.fn-bg-sw3c2{ background-color:$sw3c2 }
.fn-bg-sw4c1{ background-color:$sw4c1 }
.fn-bg-sw4c2{ background-color:$sw4c2 }
.fn-bg-sw5c1{ background-color:$sw5c1 }
.fn-bg-sw5c2{ background-color:$sw5c2 }
.fn-bg-sw6c1{ background-color:$sw6c1 }
.fn-bg-sw6c2{ background-color:$sw6c2 }

.fn-backdrop{ background-color:$revealBackdrop }
.fn-backdrop-solid{ background-color:$backdropColor }

// ------------------------------------------
// Utility Color Scheme/Classes
// ------------------------------------------
.fn-scheme-primary{
	background-color:$primaryColor;
	color:$primaryText;

	div,p{
		color:$primaryText;
	}
	&.button:hover {
		background-color:$primaryColorHover;
	}
}

.fn-scheme-secondary{
	background-color:$secondaryColor;
	color:$secondaryText;

	div,p{
		color:$secondaryText;
	}
	&.button:hover {
		background-color:$secondaryColorHover;
	}
}

.fn-scheme-modal{
	background-color:$modalColor;
	color:$modalText;

	div,p{
		color:$modalText;
	}
	.close {
		color:$closeColor;
	}
}

.fn-scheme-swatch1{
	background-color:$sw1c1;
	color:$sw1c2;

	div,p{
		color:$sw1c2;
	}
	&.button:hover {
		background-color:$sw1c1Dark;
	}
	&.ghost {
		background-color:transparent;
		border-color:$sw1c1;
		color:$sw1c1;

		&.button:hover{
			color:$sw1c2;
			border-color:$sw1c1Dark;
			background-color:$sw1c1Dark;
		}
	}
}


.fn-scheme-swatch2{
	background-color:$sw2c1;
	color:$sw2c2;

	div,p{
		color:$sw2c2;
	}
	&.button:hover {
		background-color:$sw2c1Dark;
	}
	&.ghost {
		background-color:transparent;
		border-color:$sw2c1;
		color:$sw2c1;

		&.button:hover{
			color:$sw2c2;
			border-color:$sw2c1Dark;
			background-color:$sw2c1Dark;
		}
	}
}


.fn-scheme-swatch3{
	background-color:$sw3c1;
	color:$sw3c2;

	div,p{
		color:$sw3c2;
	}
	&.button:hover {
		background-color:$sw3c1Dark;
	}
	&.ghost {
		background-color:transparent;
		border-color:$sw3c1;
		color:$sw3c1;

		&.button:hover{
			color:$sw3c2;
			border-color:$sw3c1Dark;
			background-color:$sw3c1Dark;
		}
	}
}


.fn-scheme-swatch4{
	background-color:$sw4c1;
	color:$sw4c2;

	div,p{
		color:$sw4c2;
	}
	&.button:hover {
		background-color:$sw4c1Dark;
	}
	&.ghost {
		background-color:transparent;
		border-color:$sw4c1;
		color:$sw4c1;

		&.button:hover{
			color:$sw4c2;
			border-color:$sw4c1Dark;
			background-color:$sw4c1Dark;
		}
	}
}

.fn-scheme-swatch5{
	background-color:$sw5c1;
	color:$sw5c2;

	div,p{
		color:$sw5c2;
	}
	&.button:hover {
		background-color:$sw5c1Dark;
	}
	&.ghost {
		background-color:transparent;
		border-color:$sw5c1;
		color:$sw5c1;

		&.button:hover{
			color:$sw5c2;
			border-color:$sw5c1Dark;
			background-color:$sw5c1Dark;
		}
	}
}

.fn-scheme-swatch6{
	background-color:$sw6c1;
	color:$sw6c2;

	div,p{
		color:$sw6c2;
	}
	&.button:hover {
		background-color:$sw6c1Dark;
	}
	&.ghost {
		background-color:transparent;
		border-color:$sw6c1;
		color:$sw6c1;

		&.button:hover{
			color:$sw6c2;
			border-color:$sw6c1Dark;
			background-color:$sw6c1Dark;
		}
	}
}