Semantic UI Color Example

In this example below you will see how to do a Semantic UI Color Example with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by kloener, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright kloener ©
  • HTML
  • CSS
  • JavaScript
    
<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 */
    

Comments