/* ------------------------------------------------------------------------------
*
* # Custom color system
*
* Custom color system styles, includes background, border and text colors
*
* Version: 1.0
* Latest update: May 25, 2015
*
* ---------------------------------------------------------------------------- */
// Import color variables
@import "palette.less";
// Background colors
// ------------------------------
// Basic colors
.bg {
// Primary
&-primary {
background-color: @color-primary-500;
border-color: @color-primary-500;
color: #fff;
&-300 {
background-color: @color-primary-300;
border-color: @color-primary-300;
color: #fff;
}
&-400 {
background-color: @color-primary-400;
border-color: @color-primary-400;
color: #fff;
}
&-600 {
background-color: @color-primary-600;
border-color: @color-primary-600;
color: #fff;
}
&-700 {
background-color: @color-primary-700;
border-color: @color-primary-700;
color: #fff;
}
&-800 {
background-color: @color-primary-800;
border-color: @color-primary-800;
color: #fff;
}
}
// Danger
&-danger {
background-color: @color-danger-500;
border-color: @color-danger-500;
color: #fff;
&-300 {
background-color: @color-danger-300;
border-color: @color-danger-300;
color: #fff;
}
&-400 {
background-color: @color-danger-400;
border-color: @color-danger-400;
color: #fff;
}
&-600 {
background-color: @color-danger-600;
border-color: @color-danger-600;
color: #fff;
}
&-700 {
background-color: @color-danger-700;
border-color: @color-danger-700;
color: #fff;
}
&-800 {
background-color: @color-danger-800;
border-color: @color-danger-800;
color: #fff;
}
}
// Success
&-success {
background-color: @color-success-500;
border-color: @color-success-500;
color: #fff;
&-300 {
background-color: @color-success-300;
border-color: @color-success-300;
color: #fff;
}
&-400 {
background-color: @color-success-400;
border-color: @color-success-400;
color: #fff;
}
&-600 {
background-color: @color-success-600;
border-color: @color-success-600;
color: #fff;
}
&-700 {
background-color: @color-success-700;
border-color: @color-success-700;
color: #fff;
}
&-800 {
background-color: @color-success-800;
border-color: @color-success-800;
color: #fff;
}
}
// Warning
&-warning {
background-color: @color-warning-500;
border-color: @color-warning-500;
color: #fff;
&-300 {
background-color: @color-warning-300;
border-color: @color-warning-300;
color: #fff;
}
&-400 {
background-color: @color-warning-400;
border-color: @color-warning-400;
color: #fff;
}
&-600 {
background-color: @color-warning-600;
border-color: @color-warning-600;
color: #fff;
}
&-700 {
background-color: @color-warning-700;
border-color: @color-warning-700;
color: #fff;
}
&-800 {
background-color: @color-warning-800;
border-color: @color-warning-800;
color: #fff;
}
}
// Info
&-info {
background-color: @color-info-500;
border-color: @color-info-500;
color: #fff;
&-300 {
background-color: @color-info-300;
border-color: @color-info-300;
color: #fff;
}
&-400 {
background-color: @color-info-400;
border-color: @color-info-400;
color: #fff;
}
&-600 {
background-color: @color-info-600;
border-color: @color-info-600;
color: #fff;
}
&-700 {
background-color: @color-info-700;
border-color: @color-info-700;
color: #fff;
}
&-800 {
background-color: @color-info-800;
border-color: @color-info-800;
color: #fff;
}
}
// Pink
&-pink {
background-color: @color-pink-500;
border-color: @color-pink-500;
color: #fff;
&-300 {
background-color: @color-pink-300;
border-color: @color-pink-300;
color: #fff;
}
&-400 {
background-color: @color-pink-400;
border-color: @color-pink-400;
color: #fff;
}
&-600 {
background-color: @color-pink-600;
border-color: @color-pink-600;
color: #fff;
}
&-700 {
background-color: @color-pink-700;
border-color: @color-pink-700;
color: #fff;
}
&-800 {
background-color: @color-pink-800;
border-color: @color-pink-800;
color: #fff;
}
}
// Violet
&-violet {
background-color: @color-violet-500;
border-color: @color-violet-500;
color: #fff;
&-300 {
background-color: @color-violet-300;
border-color: @color-violet-300;
color: #fff;
}
&-400 {
background-color: @color-violet-400;
border-color: @color-violet-400;
color: #fff;
}
&-600 {
background-color: @color-violet-600;
border-color: @color-violet-600;
color: #fff;
}
&-700 {
background-color: @color-violet-700;
border-color: @color-violet-700;
color: #fff;
}
&-800 {
background-color: @color-violet-800;
border-color: @color-violet-800;
color: #fff;
}
}
// Purple
&-purple {
background-color: @color-purple-500;
border-color: @color-purple-500;
color: #fff;
&-300 {
background-color: @color-purple-300;
border-color: @color-purple-300;
color: #fff;
}
&-400 {
background-color: @color-purple-400;
border-color: @color-purple-400;
color: #fff;
}
&-600 {
background-color: @color-purple-600;
border-color: @color-purple-600;
color: #fff;
}
&-700 {
background-color: @color-purple-700;
border-color: @color-purple-700;
color: #fff;
}
&-800 {
background-color: @color-purple-800;
border-color: @color-purple-800;
color: #fff;
}
}
// Indigo
&-indigo {
background-color: @color-indigo-500;
border-color: @color-indigo-500;
color: #fff;
&-300 {
background-color: @color-indigo-300;
border-color: @color-indigo-300;
color: #fff;
}
&-400 {
background-color: @color-indigo-400;
border-color: @color-indigo-400;
color: #fff;
}
&-600 {
background-color: @color-indigo-600;
border-color: @color-indigo-600;
color: #fff;
}
&-700 {
background-color: @color-indigo-700;
border-color: @color-indigo-700;
color: #fff;
}
&-800 {
background-color: @color-indigo-800;
border-color: @color-indigo-800;
color: #fff;
}
}
// Blue
&-blue {
background-color: @color-blue-500;
border-color: @color-blue-500;
color: #fff;
&-300 {
background-color: @color-blue-300;
border-color: @color-blue-300;
color: #fff;
}
&-400 {
background-color: @color-blue-400;
border-color: @color-blue-400;
color: #fff;
}
&-600 {
background-color: @color-blue-600;
border-color: @color-blue-600;
color: #fff;
}
&-700 {
background-color: @color-blue-700;
border-color: @color-blue-700;
color: #fff;
}
&-800 {
background-color: @color-blue-800;
border-color: @color-blue-800;
color: #fff;
}
}
// Teal
&-teal {
background-color: @color-teal-500;
border-color: @color-teal-500;
color: #fff;
&-300 {
background-color: @color-teal-300;
border-color: @color-teal-300;
color: #fff;
}
&-400 {
background-color: @color-teal-400;
border-color: @color-teal-400;
color: #fff;
}
&-600 {
background-color: @color-teal-600;
border-color: @color-teal-600;
color: #fff;
}
&-700 {
background-color: @color-teal-700;
border-color: @color-teal-700;
color: #fff;
}
&-800 {
background-color: @color-teal-800;
border-color: @color-teal-800;
color: #fff;
}
}
// Green
&-green {
background-color: @color-green-500;
border-color: @color-green-500;
color: #fff;
&-300 {
background-color: @color-green-300;
border-color: @color-green-300;
color: #fff;
}
&-400 {
background-color: @color-green-400;
border-color: @color-green-400;
color: #fff;
}
&-600 {
background-color: @color-green-600;
border-color: @color-green-600;
color: #fff;
}
&-700 {
background-color: @color-green-700;
border-color: @color-green-700;
color: #fff;
}
&-800 {
background-color: @color-green-800;
border-color: @color-green-800;
color: #fff;
}
}
// Orange
&-orange {
background-color: @color-orange-500;
border-color: @color-orange-500;
color: #fff;
&-300 {
background-color: @color-orange-300;
border-color: @color-orange-300;
color: #fff;
}
&-400 {
background-color: @color-orange-400;
border-color: @color-orange-400;
color: #fff;
}
&-600 {
background-color: @color-orange-600;
border-color: @color-orange-600;
color: #fff;
}
&-700 {
background-color: @color-orange-700;
border-color: @color-orange-700;
color: #fff;
}
&-800 {
background-color: @color-orange-800;
border-color: @color-orange-800;
color: #fff;
}
}
// Brown
&-brown {
background-color: @color-brown-500;
border-color: @color-brown-500;
color: #fff;
&-300 {
background-color: @color-brown-300;
border-color: @color-brown-300;
color: #fff;
}
&-400 {
background-color: @color-brown-400;
border-color: @color-brown-400;
color: #fff;
}
&-600 {
background-color: @color-brown-600;
border-color: @color-brown-600;
color: #fff;
}
&-700 {
background-color: @color-brown-700;
border-color: @color-brown-700;
color: #fff;
}
&-800 {
background-color: @color-brown-800;
border-color: @color-brown-800;
color: #fff;
}
}
// Grey
&-grey {
background-color: @color-grey-500;
border-color: @color-grey-500;
color: #fff;
&-300 {
background-color: @color-grey-300;
border-color: @color-grey-300;
color: #fff;
}
&-400 {
background-color: @color-grey-400;
border-color: @color-grey-400;
color: #fff;
}
&-600 {
background-color: @color-grey-600;
border-color: @color-grey-600;
color: #fff;
}
&-700 {
background-color: @color-grey-700;
border-color: @color-grey-700;
color: #fff;
}
&-800 {
background-color: @color-grey-800;
border-color: @color-grey-800;
color: #fff;
}
}
// Slate
&-slate {
background-color: @color-slate-500;
border-color: @color-slate-500;
color: #fff;
&-300 {
background-color: @color-slate-300;
border-color: @color-slate-300;
color: #fff;
}
&-400 {
background-color: @color-slate-400;
border-color: @color-slate-400;
color: #fff;
}
&-600 {
background-color: @color-slate-600;
border-color: @color-slate-600;
color: #fff;
}
&-700 {
background-color: @color-slate-700;
border-color: @color-slate-700;
color: #fff;
}
&-800 {
background-color: @color-slate-800;
border-color: @color-slate-800;
color: #fff;
}
}
// White
&-white {
background-color: #fff;
color: @text-color;
}
}
// Alpha colors
.alpha {
// Primary
&-primary {
background-color: @color-primary-50;
border-color: @color-primary-600;
}
// Danger
&-danger {
background-color: @color-danger-50;
border-color: @color-danger-600;
}
// Success
&-success {
background-color: @color-success-50;
border-color: @color-success-600;
}
// Warning
&-warning {
background-color: @color-warning-50;
border-color: @color-warning-600;
}
// Info
&-info {
background-color: @color-info-50;
border-color: @color-info-600;
}
// Pink
&-pink {
background-color: @color-pink-50;
border-color: @color-pink-600;
}
// Violet
&-violet {
background-color: @color-violet-50;
border-color: @color-violet-600;
}
// Purple
&-purple {
background-color: @color-purple-50;
border-color: @color-purple-600;
}
// Indino
&-indigo {
background-color: @color-indigo-50;
border-color: @color-indigo-600;
}
// Blue
&-blue {
background-color: @color-blue-50;
border-color: @color-blue-600;
}
// Teal
&-teal {
background-color: @color-teal-50;
border-color: @color-teal-600;
}
// Green
&-green {
background-color: @color-green-50;
border-color: @color-green-600;
}
// Orange
&-orange {
background-color: @color-orange-50;
border-color: @color-orange-600;
}
// Brown
&-brown {
background-color: @color-brown-50;
border-color: @color-brown-600;
}
// Grey
&-grey {
background-color: @color-grey-50;
border-color: @color-grey-600;
}
// Slate
&-slate {
background-color: @color-slate-50;
border-color: @color-slate-600;
}
}
// Single border colors
// ------------------------------
.border {
// Primary
&-primary {
border-color: @color-primary-500;
&-300 {
border-color: @color-primary-300;
}
&-400 {
border-color: @color-primary-400;
}
&-600 {
border-color: @color-primary-600;
}
&-700 {
border-color: @color-primary-700;
}
&-800 {
border-color: @color-primary-800;
}
}
// Danger
&-danger {
border-color: @color-danger-500;
&-300 {
border-color: @color-danger-300;
}
&-400 {
border-color: @color-danger-400;
}
&-600 {
border-color: @color-danger-600;
}
&-700 {
border-color: @color-danger-700;
}
&-800 {
border-color: @color-danger-800;
}
}
// Success
&-success {
border-color: @color-success-500;
&-300 {
border-color: @color-success-300;
}
&-400 {
border-color: @color-success-400;
}
&-600 {
border-color: @color-success-600;
}
&-700 {
border-color: @color-success-700;
}
&-800 {
border-color: @color-success-800;
}
}
// Warning
&-warning {
border-color: @color-warning-500;
&-300 {
border-color: @color-warning-300;
}
&-400 {
border-color: @color-warning-400;
}
&-600 {
border-color: @color-warning-600;
}
&-700 {
border-color: @color-warning-700;
}
&-800 {
border-color: @color-warning-800;
}
}
// Info
&-info {
border-color: @color-info-500;
&-300 {
border-color: @color-info-300;
}
&-400 {
border-color: @color-info-400;
}
&-600 {
border-color: @color-info-600;
}
&-700 {
border-color: @color-info-700;
}
&-800 {
border-color: @color-info-800;
}
}
// Pink
&-pink {
border-color: @color-pink-500;
&-300 {
border-color: @color-pink-300;
}
&-400 {
border-color: @color-pink-400;
}
&-600 {
border-color: @color-pink-600;
}
&-700 {
border-color: @color-pink-700;
}
&-800 {
border-color: @color-pink-800;
}
}
// Violet
&-violet {
border-color: @color-violet-500;
&-300 {
border-color: @color-violet-300;
}
&-400 {
border-color: @color-violet-400;
}
&-600 {
border-color: @color-violet-600;
}
&-700 {
border-color: @color-violet-700;
}
&-800 {
border-color: @color-violet-800;
}
}
// Purple
&-purple {
border-color: @color-purple-500;
&-300 {
border-color: @color-purple-300;
}
&-400 {
border-color: @color-purple-400;
}
&-600 {
border-color: @color-purple-600;
}
&-700 {
border-color: @color-purple-700;
}
&-800 {
border-color: @color-purple-800;
}
}
// Indino
&-indigo {
border-color: @color-indigo-500;
&-300 {
border-color: @color-indigo-300;
}
&-400 {
border-color: @color-indigo-400;
}
&-600 {
border-color: @color-indigo-600;
}
&-700 {
border-color: @color-indigo-700;
}
&-800 {
border-color: @color-indigo-800;
}
}
// Blue
&-blue {
border-color: @color-blue-500;
&-300 {
border-color: @color-blue-300;
}
&-400 {
border-color: @color-blue-400;
}
&-600 {
border-color: @color-blue-600;
}
&-700 {
border-color: @color-blue-700;
}
&-800 {
border-color: @color-blue-800;
}
}
// Teal
&-teal {
border-color: @color-teal-500;
&-300 {
border-color: @color-teal-300;
}
&-400 {
border-color: @color-teal-400;
}
&-600 {
border-color: @color-teal-600;
}
&-700 {
border-color: @color-teal-700;
}
&-800 {
border-color: @color-teal-800;
}
}
// Green
&-green {
border-color: @color-green-500;
&-300 {
border-color: @color-green-300;
}
&-400 {
border-color: @color-green-400;
}
&-600 {
border-color: @color-green-600;
}
&-700 {
border-color: @color-green-700;
}
&-800 {
border-color: @color-green-800;
}
}
// Orange
&-orange {
border-color: @color-orange-500;
&-300 {
border-color: @color-orange-300;
}
&-400 {
border-color: @color-orange-400;
}
&-600 {
border-color: @color-orange-600;
}
&-700 {
border-color: @color-orange-700;
}
&-800 {
border-color: @color-orange-800;
}
}
// Brown
&-brown {
border-color: @color-brown-500;
&-300 {
border-color: @color-brown-300;
}
&-400 {
border-color: @color-brown-400;
}
&-600 {
border-color: @color-brown-600;
}
&-700 {
border-color: @color-brown-700;
}
&-800 {
border-color: @color-brown-800;
}
}
// Grey
&-grey {
border-color: @color-grey-500;
&-300 {
border-color: @color-grey-300;
}
&-400 {
border-color: @color-grey-400;
}
&-600 {
border-color: @color-grey-600;
}
&-700 {
border-color: @color-grey-700;
}
&-800 {
border-color: @color-grey-800;
}
}
// Slate
&-slate {
border-color: @color-slate-500;
&-300 {
border-color: @color-slate-300;
}
&-400 {
border-color: @color-slate-400;
}
&-600 {
border-color: @color-slate-600;
}
&-700 {
border-color: @color-slate-700;
}
&-800 {
border-color: @color-slate-800;
}
}
// White
&-white {
border-color: #fff;
}
// Default grey
&-default {
border-color: @panel-default-border;
}
}
// Separate border colors
// ------------------------------
// Top
.border-top {
// Primary
&-primary {
border-top-color: @color-primary-500;
&-300 {
border-top-color: @color-primary-300;
}
&-400 {
border-top-color: @color-primary-400;
}
&-600 {
border-top-color: @color-primary-600;
}
&-700 {
border-top-color: @color-primary-700;
}
&-800 {
border-top-color: @color-primary-800;
}
}
// Danger
&-danger {
border-top-color: @color-danger-500;
&-300 {
border-top-color: @color-danger-300;
}
&-400 {
border-top-color: @color-danger-400;
}
&-600 {
border-top-color: @color-danger-600;
}
&-700 {
border-top-color: @color-danger-700;
}
&-800 {
border-top-color: @color-danger-800;
}
}
// Success
&-success {
border-top-color: @color-success-500;
&-300 {
border-top-color: @color-success-300;
}
&-400 {
border-top-color: @color-success-400;
}
&-600 {
border-top-color: @color-success-600;
}
&-700 {
border-top-color: @color-success-700;
}
&-800 {
border-top-color: @color-success-800;
}
}
// Warning
&-warning {
border-top-color: @color-warning-500;
&-300 {
border-top-color: @color-warning-300;
}
&-400 {
border-top-color: @color-warning-400;
}
&-600 {
border-top-color: @color-warning-600;
}
&-700 {
border-top-color: @color-warning-700;
}
&-800 {
border-top-color: @color-warning-800;
}
}
// Info
&-info {
border-top-color: @color-info-500;
&-300 {
border-top-color: @color-info-300;
}
&-400 {
border-top-color: @color-info-400;
}
&-600 {
border-top-color: @color-info-600;
}
&-700 {
border-top-color: @color-info-700;
}
&-800 {
border-top-color: @color-info-800;
}
}
// Pink
&-pink {
border-top-color: @color-pink-500;
&-300 {
border-top-color: @color-pink-300;
}
&-400 {
border-top-color: @color-pink-400;
}
&-600 {
border-top-color: @color-pink-600;
}
&-700 {
border-top-color: @color-pink-700;
}
&-800 {
border-top-color: @color-pink-800;
}
}
// Violet
&-violet {
border-top-color: @color-violet-500;
&-300 {
border-top-color: @color-violet-300;
}
&-400 {
border-top-color: @color-violet-400;
}
&-600 {
border-top-color: @color-violet-600;
}
&-700 {
border-top-color: @color-violet-700;
}
&-800 {
border-top-color: @color-violet-800;
}
}
// Purple
&-purple {
border-top-color: @color-purple-500;
&-300 {
border-top-color: @color-purple-300;
}
&-400 {
border-top-color: @color-purple-400;
}
&-600 {
border-top-color: @color-purple-600;
}
&-700 {
border-top-color: @color-purple-700;
}
&-800 {
border-top-color: @color-purple-800;
}
}
// Indino
&-indigo {
border-top-color: @color-indigo-500;
&-300 {
border-top-color: @color-indigo-300;
}
&-400 {
border-top-color: @color-indigo-400;
}
&-600 {
border-top-color: @color-indigo-600;
}
&-700 {
border-top-color: @color-indigo-700;
}
&-800 {
border-top-color: @color-indigo-800;
}
}
// Blue
&-blue {
border-top-color: @color-blue-500;
&-300 {
border-top-color: @color-blue-300;
}
&-400 {
border-top-color: @color-blue-400;
}
&-600 {
border-top-color: @color-blue-600;
}
&-700 {
border-top-color: @color-blue-700;
}
&-800 {
border-top-color: @color-blue-800;
}
}
// Teal
&-teal {
border-top-color: @color-teal-500;
&-300 {
border-top-color: @color-teal-300;
}
&-400 {
border-top-color: @color-teal-400;
}
&-600 {
border-top-color: @color-teal-600;
}
&-700 {
border-top-color: @color-teal-700;
}
&-800 {
border-top-color: @color-teal-800;
}
}
// Green
&-green {
border-top-color: @color-green-500;
&-300 {
border-top-color: @color-green-300;
}
&-400 {
border-top-color: @color-green-400;
}
&-600 {
border-top-color: @color-green-600;
}
&-700 {
border-top-color: @color-green-700;
}
&-800 {
border-top-color: @color-green-800;
}
}
// Orange
&-orange {
border-top-color: @color-orange-500;
&-300 {
border-top-color: @color-orange-300;
}
&-400 {
border-top-color: @color-orange-400;
}
&-600 {
border-top-color: @color-orange-600;
}
&-700 {
border-top-color: @color-orange-700;
}
&-800 {
border-top-color: @color-orange-800;
}
}
// Brown
&-brown {
border-top-color: @color-brown-500;
&-300 {
border-top-color: @color-brown-300;
}
&-400 {
border-top-color: @color-brown-400;
}
&-600 {
border-top-color: @color-brown-600;
}
&-700 {
border-top-color: @color-brown-700;
}
&-800 {
border-top-color: @color-brown-800;
}
}
// Grey
&-grey {
border-top-color: @color-grey-500;
&-300 {
border-top-color: @color-grey-300;
}
&-400 {
border-top-color: @color-grey-400;
}
&-600 {
border-top-color: @color-grey-600;
}
&-700 {
border-top-color: @color-grey-700;
}
&-800 {
border-top-color: @color-grey-800;
}
}
// Slate
&-slate {
border-top-color: @color-slate-500;
&-300 {
border-top-color: @color-slate-300;
}
&-400 {
border-top-color: @color-slate-400;
}
&-600 {
border-top-color: @color-slate-600;
}
&-700 {
border-top-color: @color-slate-700;
}
&-800 {
border-top-color: @color-slate-800;
}
}
// White
&-white {
border-top-color: #fff;
}
}
// Bottom
.border-bottom {
// Primary
&-primary {
border-bottom-color: @color-primary-500;
&-300 {
border-bottom-color: @color-primary-300;
}
&-400 {
border-bottom-color: @color-primary-400;
}
&-600 {
border-bottom-color: @color-primary-600;
}
&-700 {
border-bottom-color: @color-primary-700;
}
&-800 {
border-bottom-color: @color-primary-800;
}
}
// Danger
&-danger {
border-bottom-color: @color-danger-500;
&-300 {
border-bottom-color: @color-danger-300;
}
&-400 {
border-bottom-color: @color-danger-400;
}
&-600 {
border-bottom-color: @color-danger-600;
}
&-700 {
border-bottom-color: @color-danger-700;
}
&-800 {
border-bottom-color: @color-danger-800;
}
}
// Success
&-success {
border-bottom-color: @color-success-500;
&-300 {
border-bottom-color: @color-success-300;
}
&-400 {
border-bottom-color: @color-success-400;
}
&-600 {
border-bottom-color: @color-success-600;
}
&-700 {
border-bottom-color: @color-success-700;
}
&-800 {
border-bottom-color: @color-success-800;
}
}
// Warning
&-warning {
border-bottom-color: @color-warning-500;
&-300 {
border-bottom-color: @color-warning-300;
}
&-400 {
border-bottom-color: @color-warning-400;
}
&-600 {
border-bottom-color: @color-warning-600;
}
&-700 {
border-bottom-color: @color-warning-700;
}
&-800 {
border-bottom-color: @color-warning-800;
}
}
// Info
&-info {
border-bottom-color: @color-info-500;
&-300 {
border-bottom-color: @color-info-300;
}
&-400 {
border-bottom-color: @color-info-400;
}
&-600 {
border-bottom-color: @color-info-600;
}
&-700 {
border-bottom-color: @color-info-700;
}
&-800 {
border-bottom-color: @color-info-800;
}
}
// Pink
&-pink {
border-bottom-color: @color-pink-500;
&-300 {
border-bottom-color: @color-pink-300;
}
&-400 {
border-bottom-color: @color-pink-400;
}
&-600 {
border-bottom-color: @color-pink-600;
}
&-700 {
border-bottom-color: @color-pink-700;
}
&-800 {
border-bottom-color: @color-pink-800;
}
}
// Violet
&-violet {
border-bottom-color: @color-violet-500;
&-300 {
border-bottom-color: @color-violet-300;
}
&-400 {
border-bottom-color: @color-violet-400;
}
&-600 {
border-bottom-color: @color-violet-600;
}
&-700 {
border-bottom-color: @color-violet-700;
}
&-800 {
border-bottom-color: @color-violet-800;
}
}
// Purple
&-purple {
border-bottom-color: @color-purple-500;
&-300 {
border-bottom-color: @color-purple-300;
}
&-400 {
border-bottom-color: @color-purple-400;
}
&-600 {
border-bottom-color: @color-purple-600;
}
&-700 {
border-bottom-color: @color-purple-700;
}
&-800 {
border-bottom-color: @color-purple-800;
}
}
// Indino
&-indigo {
border-bottom-color: @color-indigo-500;
&-300 {
border-bottom-color: @color-indigo-300;
}
&-400 {
border-bottom-color: @color-indigo-400;
}
&-600 {
border-bottom-color: @color-indigo-600;
}
&-700 {
border-bottom-color: @color-indigo-700;
}
&-800 {
border-bottom-color: @color-indigo-800;
}
}
// Blue
&-blue {
border-bottom-color: @color-blue-500;
&-300 {
border-bottom-color: @color-blue-300;
}
&-400 {
border-bottom-color: @color-blue-400;
}
&-600 {
border-bottom-color: @color-blue-600;
}
&-700 {
border-bottom-color: @color-blue-700;
}
&-800 {
border-bottom-color: @color-blue-800;
}
}
// Teal
&-teal {
border-bottom-color: @color-teal-500;
&-300 {
border-bottom-color: @color-teal-300;
}
&-400 {
border-bottom-color: @color-teal-400;
}
&-600 {
border-bottom-color: @color-teal-600;
}
&-700 {
border-bottom-color: @color-teal-700;
}
&-800 {
border-bottom-color: @color-teal-800;
}
}
// Green
&-green {
border-bottom-color: @color-green-500;
&-300 {
border-bottom-color: @color-green-300;
}
&-400 {
border-bottom-color: @color-green-400;
}
&-600 {
border-bottom-color: @color-green-600;
}
&-700 {
border-bottom-color: @color-green-700;
}
&-800 {
border-bottom-color: @color-green-800;
}
}
// Orange
&-orange {
border-bottom-color: @color-orange-500;
&-300 {
border-bottom-color: @color-orange-300;
}
&-400 {
border-bottom-color: @color-orange-400;
}
&-600 {
border-bottom-color: @color-orange-600;
}
&-700 {
border-bottom-color: @color-orange-700;
}
&-800 {
border-bottom-color: @color-orange-800;
}
}
// Brown
&-brown {
border-bottom-color: @color-brown-500;
&-300 {
border-bottom-color: @color-brown-300;
}
&-400 {
border-bottom-color: @color-brown-400;
}
&-600 {
border-bottom-color: @color-brown-600;
}
&-700 {
border-bottom-color: @color-brown-700;
}
&-800 {
border-bottom-color: @color-brown-800;
}
}
// Grey
&-grey {
border-bottom-color: @color-grey-500;
&-300 {
border-bottom-color: @color-grey-300;
}
&-400 {
border-bottom-color: @color-grey-400;
}
&-600 {
border-bottom-color: @color-grey-600;
}
&-700 {
border-bottom-color: @color-grey-700;
}
&-800 {
border-bottom-color: @color-grey-800;
}
}
// Slate
&-slate {
border-bottom-color: @color-slate-500;
&-300 {
border-bottom-color: @color-slate-300;
}
&-400 {
border-bottom-color: @color-slate-400;
}
&-600 {
border-bottom-color: @color-slate-600;
}
&-700 {
border-bottom-color: @color-slate-700;
}
&-800 {
border-bottom-color: @color-slate-800;
}
}
// White
&-white {
border-bottom-color: #fff;
}
}
// Left
.border-left {
// Primary
&-primary {
border-left-color: @color-primary-500;
&-300 {
border-left-color: @color-primary-300;
}
&-400 {
border-left-color: @color-primary-400;
}
&-600 {
border-left-color: @color-primary-600;
}
&-700 {
border-left-color: @color-primary-700;
}
&-800 {
border-left-color: @color-primary-800;
}
}
// Danger
&-danger {
border-left-color: @color-danger-500;
&-300 {
border-left-color: @color-danger-300;
}
&-400 {
border-left-color: @color-danger-400;
}
&-600 {
border-left-color: @color-danger-600;
}
&-700 {
border-left-color: @color-danger-700;
}
&-800 {
border-left-color: @color-danger-800;
}
}
// Success
&-success {
border-left-color: @color-success-500;
&-300 {
border-left-color: @color-success-300;
}
&-400 {
border-left-color: @color-success-400;
}
&-600 {
border-left-color: @color-success-600;
}
&-700 {
border-left-color: @color-success-700;
}
&-800 {
border-left-color: @color-success-800;
}
}
// Warning
&-warning {
border-left-color: @color-warning-500;
&-300 {
border-left-color: @color-warning-300;
}
&-400 {
border-left-color: @color-warning-400;
}
&-600 {
border-left-color: @color-warning-600;
}
&-700 {
border-left-color: @color-warning-700;
}
&-800 {
border-left-color: @color-warning-800;
}
}
// Info
&-info {
border-left-color: @color-info-500;
&-300 {
border-left-color: @color-info-300;
}
&-400 {
border-left-color: @color-info-400;
}
&-600 {
border-left-color: @color-info-600;
}
&-700 {
border-left-color: @color-info-700;
}
&-800 {
border-left-color: @color-info-800;
}
}
// Pink
&-pink {
border-left-color: @color-pink-500;
&-300 {
border-left-color: @color-pink-300;
}
&-400 {
border-left-color: @color-pink-400;
}
&-600 {
border-left-color: @color-pink-600;
}
&-700 {
border-left-color: @color-pink-700;
}
&-800 {
border-left-color: @color-pink-800;
}
}
// Violet
&-violet {
border-left-color: @color-violet-500;
&-300 {
border-left-color: @color-violet-300;
}
&-400 {
border-left-color: @color-violet-400;
}
&-600 {
border-left-color: @color-violet-600;
}
&-700 {
border-left-color: @color-violet-700;
}
&-800 {
border-left-color: @color-violet-800;
}
}
// Purple
&-purple {
border-left-color: @color-purple-500;
&-300 {
border-left-color: @color-purple-300;
}
&-400 {
border-left-color: @color-purple-400;
}
&-600 {
border-left-color: @color-purple-600;
}
&-700 {
border-left-color: @color-purple-700;
}
&-800 {
border-left-color: @color-purple-800;
}
}
// Indino
&-indigo {
border-left-color: @color-indigo-500;
&-300 {
border-left-color: @color-indigo-300;
}
&-400 {
border-left-color: @color-indigo-400;
}
&-600 {
border-left-color: @color-indigo-600;
}
&-700 {
border-left-color: @color-indigo-700;
}
&-800 {
border-left-color: @color-indigo-800;
}
}
// Blue
&-blue {
border-left-color: @color-blue-500;
&-300 {
border-left-color: @color-blue-300;
}
&-400 {
border-left-color: @color-blue-400;
}
&-600 {
border-left-color: @color-blue-600;
}
&-700 {
border-left-color: @color-blue-700;
}
&-800 {
border-left-color: @color-blue-800;
}
}
// Teal
&-teal {
border-left-color: @color-teal-500;
&-300 {
border-left-color: @color-teal-300;
}
&-400 {
border-left-color: @color-teal-400;
}
&-600 {
border-left-color: @color-teal-600;
}
&-700 {
border-left-color: @color-teal-700;
}
&-800 {
border-left-color: @color-teal-800;
}
}
// Green
&-green {
border-left-color: @color-green-500;
&-300 {
border-left-color: @color-green-300;
}
&-400 {
border-left-color: @color-green-400;
}
&-600 {
border-left-color: @color-green-600;
}
&-700 {
border-left-color: @color-green-700;
}
&-800 {
border-left-color: @color-green-800;
}
}
// Orange
&-orange {
border-left-color: @color-orange-500;
&-300 {
border-left-color: @color-orange-300;
}
&-400 {
border-left-color: @color-orange-400;
}
&-600 {
border-left-color: @color-orange-600;
}
&-700 {
border-left-color: @color-orange-700;
}
&-800 {
border-left-color: @color-orange-800;
}
}
// Brown
&-brown {
border-left-color: @color-brown-500;
&-300 {
border-left-color: @color-brown-300;
}
&-400 {
border-left-color: @color-brown-400;
}
&-600 {
border-left-color: @color-brown-600;
}
&-700 {
border-left-color: @color-brown-700;
}
&-800 {
border-left-color: @color-brown-800;
}
}
// Grey
&-grey {
border-left-color: @color-grey-500;
&-300 {
border-left-color: @color-grey-300;
}
&-400 {
border-left-color: @color-grey-400;
}
&-600 {
border-left-color: @color-grey-600;
}
&-700 {
border-left-color: @color-grey-700;
}
&-800 {
border-left-color: @color-grey-800;
}
}
// Slate
&-slate {
border-left-color: @color-slate-500;
&-300 {
border-left-color: @color-slate-300;
}
&-400 {
border-left-color: @color-slate-400;
}
&-600 {
border-left-color: @color-slate-600;
}
&-700 {
border-left-color: @color-slate-700;
}
&-800 {
border-left-color: @color-slate-800;
}
}
// White
&-white {
border-left-color: #fff;
}
}
// Right
.border-right {
// Primary
&-primary {
border-right-color: @color-primary-500;
&-300 {
border-right-color: @color-primary-300;
}
&-400 {
border-right-color: @color-primary-400;
}
&-600 {
border-right-color: @color-primary-600;
}
&-700 {
border-right-color: @color-primary-700;
}
&-800 {
border-right-color: @color-primary-800;
}
}
// Danger
&-danger {
border-right-color: @color-danger-500;
&-300 {
border-right-color: @color-danger-300;
}
&-400 {
border-right-color: @color-danger-400;
}
&-600 {
border-right-color: @color-danger-600;
}
&-700 {
border-right-color: @color-danger-700;
}
&-800 {
border-right-color: @color-danger-800;
}
}
// Success
&-success {
border-right-color: @color-success-500;
&-300 {
border-right-color: @color-success-300;
}
&-400 {
border-right-color: @color-success-400;
}
&-600 {
border-right-color: @color-success-600;
}
&-700 {
border-right-color: @color-success-700;
}
&-800 {
border-right-color: @color-success-800;
}
}
// Warning
&-warning {
border-right-color: @color-warning-500;
&-300 {
border-right-color: @color-warning-300;
}
&-400 {
border-right-color: @color-warning-400;
}
&-600 {
border-right-color: @color-warning-600;
}
&-700 {
border-right-color: @color-warning-700;
}
&-800 {
border-right-color: @color-warning-800;
}
}
// Info
&-info {
border-right-color: @color-info-500;
&-300 {
border-right-color: @color-info-300;
}
&-400 {
border-right-color: @color-info-400;
}
&-600 {
border-right-color: @color-info-600;
}
&-700 {
border-right-color: @color-info-700;
}
&-800 {
border-right-color: @color-info-800;
}
}
// Pink
&-pink {
border-right-color: @color-pink-500;
&-300 {
border-right-color: @color-pink-300;
}
&-400 {
border-right-color: @color-pink-400;
}
&-600 {
border-right-color: @color-pink-600;
}
&-700 {
border-right-color: @color-pink-700;
}
&-800 {
border-right-color: @color-pink-800;
}
}
// Violet
&-violet {
border-right-color: @color-violet-500;
&-300 {
border-right-color: @color-violet-300;
}
&-400 {
border-right-color: @color-violet-400;
}
&-600 {
border-right-color: @color-violet-600;
}
&-700 {
border-right-color: @color-violet-700;
}
&-800 {
border-right-color: @color-violet-800;
}
}
// Purple
&-purple {
border-right-color: @color-purple-500;
&-300 {
border-right-color: @color-purple-300;
}
&-400 {
border-right-color: @color-purple-400;
}
&-600 {
border-right-color: @color-purple-600;
}
&-700 {
border-right-color: @color-purple-700;
}
&-800 {
border-right-color: @color-purple-800;
}
}
// Indino
&-indigo {
border-right-color: @color-indigo-500;
&-300 {
border-right-color: @color-indigo-300;
}
&-400 {
border-right-color: @color-indigo-400;
}
&-600 {
border-right-color: @color-indigo-600;
}
&-700 {
border-right-color: @color-indigo-700;
}
&-800 {
border-right-color: @color-indigo-800;
}
}
// Blue
&-blue {
border-right-color: @color-blue-500;
&-300 {
border-right-color: @color-blue-300;
}
&-400 {
border-right-color: @color-blue-400;
}
&-600 {
border-right-color: @color-blue-600;
}
&-700 {
border-right-color: @color-blue-700;
}
&-800 {
border-right-color: @color-blue-800;
}
}
// Teal
&-teal {
border-right-color: @color-teal-500;
&-300 {
border-right-color: @color-teal-300;
}
&-400 {
border-right-color: @color-teal-400;
}
&-600 {
border-right-color: @color-teal-600;
}
&-700 {
border-right-color: @color-teal-700;
}
&-800 {
border-right-color: @color-teal-800;
}
}
// Green
&-green {
border-right-color: @color-green-500;
&-300 {
border-right-color: @color-green-300;
}
&-400 {
border-right-color: @color-green-400;
}
&-600 {
border-right-color: @color-green-600;
}
&-700 {
border-right-color: @color-green-700;
}
&-800 {
border-right-color: @color-green-800;
}
}
// Orange
&-orange {
border-right-color: @color-orange-500;
&-300 {
border-right-color: @color-orange-300;
}
&-400 {
border-right-color: @color-orange-400;
}
&-600 {
border-right-color: @color-orange-600;
}
&-700 {
border-right-color: @color-orange-700;
}
&-800 {
border-right-color: @color-orange-800;
}
}
// Brown
&-brown {
border-right-color: @color-brown-500;
&-300 {
border-right-color: @color-brown-300;
}
&-400 {
border-right-color: @color-brown-400;
}
&-600 {
border-right-color: @color-brown-600;
}
&-700 {
border-right-color: @color-brown-700;
}
&-800 {
border-right-color: @color-brown-800;
}
}
// Grey
&-grey {
border-right-color: @color-grey-500;
&-300 {
border-right-color: @color-grey-300;
}
&-400 {
border-right-color: @color-grey-400;
}
&-600 {
border-right-color: @color-grey-600;
}
&-700 {
border-right-color: @color-grey-700;
}
&-800 {
border-right-color: @color-grey-800;
}
}
// Slate
&-slate {
border-right-color: @color-slate-500;
&-300 {
border-right-color: @color-slate-300;
}
&-400 {
border-right-color: @color-slate-400;
}
&-600 {
border-right-color: @color-slate-600;
}
&-700 {
border-right-color: @color-slate-700;
}
&-800 {
border-right-color: @color-slate-800;
}
}
// White
&-white {
border-right-color: #fff;
}
}
// Text colors
// ------------------------------
.text {
// Primary
&-primary {
&,
&:hover,
&:focus {
color: @color-primary-500;
}
&-300 {
&,
&:hover,
&:focus {
color: @color-primary-500;
}
}
&-400 {
&,
&:hover,
&:focus {
color: @color-primary-400;
}
}
&-600 {
&,
&:hover,
&:focus {
color: @color-primary-600;
}
}
&-700 {
&,
&:hover,
&:focus {
color: @color-primary-700;
}
}
&-800 {
&,
&:hover,
&:focus {
color: @color-primary-800;
}
}
}
// Danger
&-danger {
&,
&:hover,
&:focus {
color: @color-danger-500;
}
&-300 {
&,
&:hover,
&:focus {
color: @color-danger-300;
}
}
&-400 {
&,
&:hover,
&:focus {
color: @color-danger-400;
}
}
&-600 {
&,
&:hover,
&:focus {
color: @color-danger-600;
}
}
&-700 {
&,
&:hover,
&:focus {
color: @color-danger-700;
}
}
&-800 {
&,
&:hover,
&:focus {
color: @color-danger-800;
}
}
}
// Success
&-success {
&,
&:hover,
&:focus {
color: @color-success-500;
}
&-300 {
&,
&:hover,
&:focus {
color: @color-success-300;
}
}
&-400 {
&,
&:hover,
&:focus {
color: @color-success-400;
}
}
&-600 {
&,
&:hover,
&:focus {
color: @color-success-600;
}
}
&-700 {
&,
&:hover,
&:focus {
color: @color-success-700;
}
}
&-800 {
&,
&:hover,
&:focus {
color: @color-success-800;
}
}
}
// Warning
&-warning {
&,
&:hover,
&:focus {
color: @color-warning-500;
}
&-300 {
&,
&:hover,
&:focus {
color: @color-warning-300;
}
}
&-400 {
&,
&:hover,
&:focus {
color: @color-warning-400;
}
}
&-600 {
&,
&:hover,
&:focus {
color: @color-warning-600;
}
}
&-700 {
&,
&:hover,
&:focus {
color: @color-warning-700;
}
}
&-800 {
&,
&:hover,
&:focus {
color: @color-warning-800;
}
}
}
// Info
&-info {
&,
&:hover,
&:focus {
color: @color-info-500;
}
&-300 {
&,
&:hover,
&:focus {
color: @color-info-300;
}
}
&-400 {
&,
&:hover,
&:focus {
color: @color-info-400;
}
}
&-600 {
&,
&:hover,
&:focus {
color: @color-info-600;
}
}
&-700 {
&,
&:hover,
&:focus {
color: @color-info-700;
}
}
&-800 {
&,
&:hover,
&:focus {
color: @color-info-800;
}
}
}
// Pink
&-pink {
&,
&:hover,
&:focus {
color: @color-pink-500;
}
&-300 {
&,
&:hover,
&:focus {
color: @color-pink-300;
}
}
&-400 {
&,
&:hover,
&:focus {
color: @color-pink-400;
}
}
&-600 {
&,
&:hover,
&:focus {
color: @color-pink-600;
}
}
&-700 {
&,
&:hover,
&:focus {
color: @color-pink-700;
}
}
&-800 {
&,
&:hover,
&:focus {
color: @color-pink-800;
}
}
}
// Violet
&-violet {
&,
&:hover,
&:focus {
color: @color-violet-500;
}
&-300 {
&,
&:hover,
&:focus {
color: @color-violet-300;
}
}
&-400 {
&,
&:hover,
&:focus {
color: @color-violet-400;
}
}
&-600 {
&,
&:hover,
&:focus {
color: @color-violet-600;
}
}
&-700 {
&,
&:hover,
&:focus {
color: @color-violet-700;
}
}
&-800 {
&,
&:hover,
&:focus {
color: @color-violet-800;
}
}
}
// Purple
&-purple {
&,
&:hover,
&:focus {
color: @color-purple-500;
}
&-300 {
&,
&:hover,
&:focus {
color: @color-purple-300;
}
}
&-400 {
&,
&:hover,
&:focus {
color: @color-purple-400;
}
}
&-600 {
&,
&:hover,
&:focus {
color: @color-purple-600;
}
}
&-700 {
&,
&:hover,
&:focus {
color: @color-purple-700;
}
}
&-800 {
&,
&:hover,
&:focus {
color: @color-purple-800;
}
}
}
// Indino
&-indigo {
&,
&:hover,
&:focus {
color: @color-indigo-500;
}
&-300 {
&,
&:hover,
&:focus {
color: @color-indigo-300;
}
}
&-400 {
&,
&:hover,
&:focus {
color: @color-indigo-400;
}
}
&-600 {
&,
&:hover,
&:focus {
color: @color-indigo-600;
}
}
&-700 {
&,
&:hover,
&:focus {
color: @color-indigo-700;
}
}
&-800 {
&,
&:hover,
&:focus {
color: @color-indigo-800;
}
}
}
// Blue
&-blue {
&,
&:hover,
&:focus {
color: @color-blue-500;
}
&-300 {
&,
&:hover,
&:focus {
color: @color-blue-300;
}
}
&-400 {
&,
&:hover,
&:focus {
color: @color-blue-400;
}
}
&-600 {
&,
&:hover,
&:focus {
color: @color-blue-600;
}
}
&-700 {
&,
&:hover,
&:focus {
color: @color-blue-700;
}
}
&-800 {
&,
&:hover,
&:focus {
color: @color-blue-800;
}
}
}
// Teal
&-teal {
&,
&:hover,
&:focus {
color: @color-teal-500;
}
&-300 {
&,
&:hover,
&:focus {
color: @color-teal-300;
}
}
&-400 {
&,
&:hover,
&:focus {
color: @color-teal-400;
}
}
&-600 {
&,
&:hover,
&:focus {
color: @color-teal-600;
}
}
&-700 {
&,
&:hover,
&:focus {
color: @color-teal-700;
}
}
&-800 {
&,
&:hover,
&:focus {
color: @color-teal-800;
}
}
}
// Green
&-green {
&,
&:hover,
&:focus {
color: @color-green-500;
}
&-300 {
&,
&:hover,
&:focus {
color: @color-green-300;
}
}
&-400 {
&,
&:hover,
&:focus {
color: @color-green-400;
}
}
&-600 {
&,
&:hover,
&:focus {
color: @color-green-600;
}
}
&-700 {
&,
&:hover,
&:focus {
color: @color-green-700;
}
}
&-800 {
&,
&:hover,
&:focus {
color: @color-green-800;
}
}
}
// Orange
&-orange {
&,
&:hover,
&:focus {
color: @color-orange-500;
}
&-300 {
&,
&:hover,
&:focus {
color: @color-orange-300;
}
}
&-400 {
&,
&:hover,
&:focus {
color: @color-orange-400;
}
}
&-600 {
&,
&:hover,
&:focus {
color: @color-orange-600;
}
}
&-700 {
&,
&:hover,
&:focus {
color: @color-orange-700;
}
}
&-800 {
&,
&:hover,
&:focus {
color: @color-orange-800;
}
}
}
// Brown
&-brown {
&,
&:hover,
&:focus {
color: @color-brown-500;
}
&-300 {
&,
&:hover,
&:focus {
color: @color-brown-300;
}
}
&-400 {
&,
&:hover,
&:focus {
color: @color-brown-400;
}
}
&-600 {
&,
&:hover,
&:focus {
color: @color-brown-600;
}
}
&-700 {
&,
&:hover,
&:focus {
color: @color-brown-700;
}
}
&-800 {
&,
&:hover,
&:focus {
color: @color-brown-800;
}
}
}
// Grey
&-grey {
&,
&:hover,
&:focus {
color: @color-grey-500;
}
&-300 {
&,
&:hover,
&:focus {
color: @color-grey-300;
}
}
&-400 {
&,
&:hover,
&:focus {
color: @color-grey-400;
}
}
&-600 {
&,
&:hover,
&:focus {
color: @color-grey-600;
}
}
&-700 {
&,
&:hover,
&:focus {
color: @color-grey-700;
}
}
&-800 {
&,
&:hover,
&:focus {
color: @color-grey-800;
}
}
}
// Slate
&-slate {
&,
&:hover,
&:focus {
color: @color-slate-500;
}
&-300 {
&,
&:hover,
&:focus {
color: @color-slate-300;
}
}
&-400 {
&,
&:hover,
&:focus {
color: @color-slate-400;
}
}
&-600 {
&,
&:hover,
&:focus {
color: @color-slate-600;
}
}
&-700 {
&,
&:hover,
&:focus {
color: @color-slate-700;
}
}
&-800 {
&,
&:hover,
&:focus {
color: @color-slate-800;
}
}
}
// White
&-white {
&,
&:hover,
&:focus {
color: #fff;
}
}
// Default
&-default {
&,
&:hover,
&:focus {
color: @text-color;
}
}
}