<div class="box red">a Box in red color.</div>
<div class="box orange">a Box in orange color.</div>
<div class="box yellow">a Box in yellow color.</div>
<div class="box olive">a Box in olive color.</div>
<div class="box green">a Box in green color.</div>
<div class="box teal">a Box in teal color.</div>
<div class="box blue">a Box in blue color.</div>
<div class="box violet">a Box in violet color.</div>
<div class="box purple">a Box in purple color.</div>
<div class="box pink">a Box in pink color.</div>
<div class="box brown">a Box in brown color.</div>
<hr>
<div class="box positive">a Box in a positive color</div>
<div class="box negative">a Box in a negative color</div>
<div class="box info">a Box in a info color</div>
<div class="box warning">a Box in a warning color</div>
/*Downloaded from https://www.codeseek.co/kloener/semantic-ui-color-example-RpLXmE */
@backgroundTint: 90%;
@borderTint: 70%;
@textColorShade: 40%;
@red : #DB2828;
@orange : #F2711C;
@yellow : #FBBD08;
@olive : #B5CC18;
@green : #21BA45;
@teal : #00B5AD;
@blue : #2185D0;
@violet : #6435C9;
@purple : #A333C8;
@pink : #E03997;
@brown : #A5673F;
@grey : #767676;
@black : #1B1C1D;
@redBackground : tint(@red, @backgroundTint);
@orangeBackground : tint(@orange, @backgroundTint);
@yellowBackground : tint(@yellow, @backgroundTint);
@oliveBackground : tint(@olive, @backgroundTint);
@greenBackground : tint(@green, @backgroundTint);
@tealBackground : tint(@teal, @backgroundTint);
@blueBackground : tint(@blue, @backgroundTint);
@violetBackground : tint(@violet, @backgroundTint);
@purpleBackground : tint(@purple, @backgroundTint);
@pinkBackground : tint(@pink, @backgroundTint);
@brownBackground : tint(@brown, @backgroundTint);
@redBorderColor : tint(@red, @borderTint);
@orangeBorderColor : tint(@orange, @borderTint);
@yellowBorderColor : tint(@yellow, @borderTint);
@oliveBorderColor : tint(@olive, @borderTint);
@greenBorderColor : tint(@green, @borderTint);
@tealBorderColor : tint(@teal, @borderTint);
@blueBorderColor : tint(@blue, @borderTint);
@violetBorderColor : tint(@violet, @borderTint);
@purpleBorderColor : tint(@purple, @borderTint);
@pinkBorderColor : tint(@pink, @borderTint);
@brownBorderColor : tint(@brown, @borderTint);
@redTextColor: shade(@red, @textColorShade);
@orangeTextColor: shade(@orange, @textColorShade);
@yellowTextColor: shade(@yellow, @textColorShade);
@oliveTextColor: shade(@olive, @textColorShade);
@greenTextColor: shade(@green, @textColorShade);
@tealTextColor: shade(@teal, @textColorShade);
@blueTextColor: shade(@blue, @textColorShade);
@violetTextColor: shade(@violet, @textColorShade);
@purpleTextColor: shade(@purple, @textColorShade);
@pinkTextColor: shade(@pink, @textColorShade);
@brownTextColor: shade(@brown, @textColorShade);
/*-------------------
Emotive Colors
--------------------*/
/* Positive */
@positiveColor : tint(@green, 20%);
@positiveBackgroundColor : tint(@positiveColor, @backgroundTint);
@positiveBorderColor : tint(@positiveColor, @borderTint);
@positiveTextColor : shade(@positiveColor, @textColorShade);
/* Negative */
@negativeColor : @red;
@negativeBackgroundColor : tint(@negativeColor, @backgroundTint);
@negativeBorderColor : tint(@negativeColor, @borderTint);
@negativeTextColor : shade(@negativeColor, @textColorShade);
/* Info */
@infoColor : tint(@blue, 40%);
@infoBackgroundColor : tint(@infoColor, @backgroundTint);
@infoBorderColor : tint(@infoColor, @borderTint);
@infoTextColor : shade(@infoColor, @textColorShade);
/* Warning */
@warningColor : tint(@orange, 25%);
@warningBackgroundColor : tint(@warningColor, @backgroundTint);
@warningBorderColor : tint(@warningColor, @borderTint);
@warningTextColor : shade(@warningColor, @textColorShade);
body {
font-size: 16px;
font-weight: normal;
font-family: sans-serif;
letter-spacing: 0.085rem;
}
.box {
padding: 1.5rem;
margin-bottom: 1.5rem;
display: inline-block;
&:last-child {
margin-bottom: 0;
}
&.red {
color: @redTextColor;
background-color: @redBackground;
border: 1px solid @redBorderColor;
}
&.orange {
color: @orangeTextColor;
background-color: @orangeBackground;
border: 1px solid @orangeBorderColor;
}
&.yellow {
color: @yellowTextColor;
background-color: @yellowBackground;
border: 1px solid @yellowBorderColor;
}
&.olive {
color: @oliveTextColor;
background-color: @oliveBackground;
border: 1px solid @oliveBorderColor;
}
&.green {
color: @greenTextColor;
background-color: @greenBackground;
border: 1px solid @greenBorderColor;
}
&.teal {
color: @tealTextColor;
background-color: @tealBackground;
border: 1px solid @tealBorderColor;
}
&.blue {
color: @blueTextColor;
background-color: @blueBackground;
border: 1px solid @blueBorderColor;
}
&.violet {
color: @violetTextColor;
background-color: @violetBackground;
border: 1px solid @violetBorderColor;
}
&.purple {
color: @purpleTextColor;
background-color: @purpleBackground;
border: 1px solid @purpleBorderColor;
}
&.pink {
color: @pinkTextColor;
background-color: @pinkBackground;
border: 1px solid @pinkBorderColor;
}
&.brown {
color: @brownTextColor;
background-color: @brownBackground;
border: 1px solid @brownBorderColor;
}
&.positive {
color: @positiveTextColor;
background-color: @positiveBackgroundColor;
border: 1px solid @positiveBorderColor
}
&.negative {
color: @negativeTextColor;
background-color: @negativeBackgroundColor;
border: 1px solid @negativeBorderColor
}
&.info {
color: @infoTextColor;
background-color: @infoBackgroundColor;
border: 1px solid @infoBorderColor
}
&.warning {
color: @warningTextColor;
background-color: @warningBackgroundColor;
border: 1px solid @warningBorderColor
}
}
/*Downloaded from https://www.codeseek.co/kloener/semantic-ui-color-example-RpLXmE */