SDK Themes

General Information

Apply both a background color and a border color. Default prefix of 'bg-' and 'text-' are not a hard requirement. Color naming can be done in different ways.

[class*="bg-"], 
[class*="bg-"] > *:not([class*="bg-"]){
	background-color:#999999;
	border-color:#999999;	
}

Starter CSS

/* Color Group */
.bg-color-1,
.bg-color-1 > *:not([class*="bg-"]){
	background-color:#ffffff; 
	border-color:#ffffff;
}

.bg-color-2,
.bg-color-2 > *:not([class*="bg-"]){
	background-color:#ffffff; 
	border-color:#ffffff;
}

.bg-color-3,
.bg-color-3 > *:not([class*="bg-"]){
	background-color:#ffffff; 
	border-color:#ffffff;
}

.bg-color-4,
.bg-color-4 > *:not([class*="bg-"]){
	background-color:#ffffff; 
	border-color:#ffffff;
}

.bg-color-5,
.bg-color-5 > *:not([class*="bg-"]){
	background-color:#ffffff; 
	border-color:#ffffff;
}

/* Red Alert */
.red-alert .bg-color-1,
.red-alert .bg-color-1 > *:not([class*="bg-"]){
	background-color:#ffffff; 
	border-color:#ffffff;
}

.red-alert .bg-color-2,
.red-alert .bg-color-2 > *:not([class*="bg-"]){
	background-color:#ffffff; 
	border-color:#ffffff;
}

.red-alert .bg-color-3,
.red-alert .bg-color-3 > *:not([class*="bg-"]){
	background-color:#ffffff; 
	border-color:#ffffff;
}

.red-alert .bg-color-4,
.red-alert .bg-color-4 > *:not([class*="bg-"]){
	background-color:#ffffff; 
	border-color:#ffffff;
}

.red-alert .bg-color-5,
.red-alert .bg-color-5 > *:not([class*="bg-"]){
	background-color:#ffffff; 
	border-color:#ffffff;
}

/* Blue Alert */
.blue-alert .bg-color-1,
.blue-alert .bg-color-1 > *:not([class*="bg-"]){
	background-color:#ffffff; 
	border-color:#ffffff;
}

.blue-alert .bg-color-2,
.blue-alert .bg-color-2 > *:not([class*="bg-"]){
	background-color:#ffffff; 
	border-color:#ffffff;
}

.blue-alert .bg-color-3,
.blue-alert .bg-color-3 > *:not([class*="bg-"]){
	background-color:#ffffff; 
	border-color:#ffffff;
}

.blue-alert .bg-color-4,
.blue-alert .bg-color-4 > *:not([class*="bg-"]){
	background-color:#ffffff; 
	border-color:#ffffff;
}

.blue-alert .bg-color-5,
.blue-alert .bg-color-5 > *:not([class*="bg-"]){
	background-color:#ffffff; 
	border-color:#ffffff;
}

Text Colors

/* Colors for Text */
.text-color-1{color:#000000;}
.text-color-2{color:#000000;}
.text-color-3{color:#000000;}
.text-color-4{color:#000000;}
.text-color-5{color:#000000;}

.red-alert .text-color-1{color:#000000;}
.red-alert .text-color-2{color:#000000;}
.red-alert .text-color-3{color:#000000;}
.red-alert .text-color-4{color:#000000;}
.red-alert .text-color-5{color:#000000;}

.blue-alert .text-color-1{color:#000000;}
.blue-alert .text-color-2{color:#000000;}
.blue-alert .text-color-3{color:#000000;}
.blue-alert .text-color-4{color:#000000;}
.blue-alert .text-color-5{color:#000000;}