Browse Source

Adds new color values for progress bars #2280

pull/2300/head
jlukic 9 years ago
parent
commit
9d26b8466f
1 changed files with 69 additions and 29 deletions
  1. 98
      src/definitions/modules/progress.less

98
src/definitions/modules/progress.less

@ -358,60 +358,100 @@
Colors Colors
---------------*/ ---------------*/
.ui.black.progress .bar {
background-color: @black;
}
.ui.blue.progress .bar {
background-color: @blue;
/* Red */
.ui.red.progress .bar {
background-color: @red;
} }
.ui.green.progress .bar {
background-color: @green;
.ui.red.inverted.progress .bar {
background-color: @lightRed;
} }
/* Orange */
.ui.orange.progress .bar { .ui.orange.progress .bar {
background-color: @orange; background-color: @orange;
} }
.ui.pink.progress .bar {
background-color: @pink;
.ui.orange.inverted.progress .bar {
background-color: @lightOrange;
} }
.ui.purple.progress .bar {
background-color: @purple;
/* Yellow */
.ui.yellow.progress .bar {
background-color: @yellow;
} }
.ui.red.progress .bar {
background-color: @red;
.ui.yellow.inverted.progress .bar {
background-color: @lightYellow;
}
/* Green */
.ui.green.progress .bar {
background-color: @green;
} }
.ui.green.inverted.progress .bar {
background-color: @lightGreen;
}
/* Teal */
.ui.teal.progress .bar { .ui.teal.progress .bar {
background-color: @teal; background-color: @teal;
} }
.ui.yellow.progress .bar {
background-color: @yellow;
.ui.teal.inverted.progress .bar {
background-color: @lightTeal;
} }
.ui.black.inverted.progress .bar {
background-color: @lightBlack;
/* Blue */
.ui.blue.progress .bar {
background-color: @blue;
} }
.ui.blue.inverted.progress .bar { .ui.blue.inverted.progress .bar {
background-color: @lightBlue; background-color: @lightBlue;
} }
.ui.green.inverted.progress .bar {
background-color: @lightGreen;
/* Violet */
.ui.violet.progress .bar {
background-color: @violet;
} }
.ui.orange.inverted.progress .bar {
background-color: @lightOrange;
.ui.violet.inverted.progress .bar {
background-color: @lightViolet;
} }
.ui.pink.inverted.progress .bar {
background-color: @lightPink;
/* Purple */
.ui.purple.progress .bar {
background-color: @purple;
} }
.ui.purple.inverted.progress .bar { .ui.purple.inverted.progress .bar {
background-color: @lightPurple; background-color: @lightPurple;
} }
.ui.red.inverted.progress .bar {
background-color: @lightRed;
/* Pink */
.ui.pink.progress .bar {
background-color: @pink;
} }
.ui.teal.inverted.progress .bar {
background-color: @lightTeal;
.ui.pink.inverted.progress .bar {
background-color: @lightPink;
} }
.ui.yellow.inverted.progress .bar {
background-color: @lightYellow;
/* Brown */
.ui.brown.progress .bar {
background-color: @brown;
}
.ui.brown.inverted.progress .bar {
background-color: @lightBrown;
}
/* Grey */
.ui.grey.progress .bar {
background-color: @grey;
}
.ui.grey.inverted.progress .bar {
background-color: @lightGrey;
}
/* Black */
.ui.black.progress .bar {
background-color: @black;
}
.ui.black.inverted.progress .bar {
background-color: @lightBlack;
} }
/*-------------- /*--------------

Loading…
Cancel
Save