diff --git a/server/documents/elements/label.html.eco b/server/documents/elements/label.html.eco index 91995193d..53d745352 100755 --- a/server/documents/elements/label.html.eco +++ b/server/documents/elements/label.html.eco @@ -22,7 +22,7 @@ themes : ['Default']

Label

-

A basic label

+

A label

23
@@ -303,14 +303,20 @@ themes : ['Default'] Small
- Standard + Medium
Large
+
+ Big +
Huge
+
+ Massive +

Groups

diff --git a/server/documents/views/card.html.eco b/server/documents/views/card.html.eco index 911383ede..7a6878b74 100755 --- a/server/documents/views/card.html.eco +++ b/server/documents/views/card.html.eco @@ -49,7 +49,7 @@ themes : ['Default', 'Basic', 'Classic']

Cards

A group of cards.

-
+

Customizing your views

Cards are designed to be flexible to your content. Meta content can include custom elements related to your content. Each child element inside the extra content or meta group will be automatically formatted to be spaced appropriately.

This example includes a category group, a sign-up date, and a friend count which are arbitrary class names used to format users as cards.

@@ -198,7 +198,7 @@ themes : ['Default', 'Basic', 'Classic']

Image

A card can contain an image

-
Cards can use reveal or dimmers to easily show additional content, or options on hover
+
Cards can use reveal or dimmers to easily show additional content, or options on hover
diff --git a/src/definitions/modules/progress.less b/src/definitions/modules/progress.less index 0215a4769..187297547 100755 --- a/src/definitions/modules/progress.less +++ b/src/definitions/modules/progress.less @@ -38,26 +38,24 @@ } /* Indicating */ -.ui.indicating.progress .bar[style^="width: 3"]{ - background-color: #D9A65C; +.ui.indicating.progress .bar[style^="width: 3"] { + background-color: @indicatingSecondColor; } .ui.indicating.progress .bar[style^="width: 4"], .ui.indicating.progress .bar[style^="width: 5"] { - background-color: #E6BB48; + background-color: @indicatingThirdColor; } .ui.indicating.progress .bar[style^="width: 6"] { - background-color: #DDC928; + background-color: @indicatingFourthColor; } .ui.indicating.progress .bar[style^="width: 7"], .ui.indicating.progress .bar[style^="width: 8"] { - background-color: #B4D95C; + background-color: @indicatingFifthColor; } .ui.indicating.progress .bar[style^="width: 9"], .ui.indicating.progress .bar[style^="width: 100"] { - background-color: #66DA81; + background-color: @indicatingSixthColor; } - -/* Single Digits Last */ .ui.indicating.progress .bar[style^="width: 1%"], .ui.indicating.progress .bar[style^="width: 2%"], .ui.indicating.progress .bar[style^="width: 3%"], @@ -69,7 +67,40 @@ .ui.indicating.progress .bar[style^="width: 9%"], .ui.indicating.progress .bar[style^="width: 1"], .ui.indicating.progress .bar[style^="width: 2"] { - background-color: #D95C5C; + background-color: @indicatingFirstColor; +} + +/* Single Digits Last */ +.ui.indicating.progress .bar[style^="width: 1%"] + .label, +.ui.indicating.progress .bar[style^="width: 2%"] + .label, +.ui.indicating.progress .bar[style^="width: 3%"] + .label, +.ui.indicating.progress .bar[style^="width: 4%"] + .label, +.ui.indicating.progress .bar[style^="width: 5%"] + .label, +.ui.indicating.progress .bar[style^="width: 6%"] + .label, +.ui.indicating.progress .bar[style^="width: 7%"] + .label, +.ui.indicating.progress .bar[style^="width: 8%"] + .label, +.ui.indicating.progress .bar[style^="width: 9%"] + .label, +.ui.indicating.progress .bar[style^="width: 1"] + .label, +.ui.indicating.progress .bar[style^="width: 2"] + .label { + color: @indicatingFirstColor; +} +.ui.indicating.progress .bar[style^="width: 3"] + .label { + color: @indicatingSecondColor; +} +.ui.indicating.progress .bar[style^="width: 4"] + .label, +.ui.indicating.progress .bar[style^="width: 5"] + .label { + color: @indicatingThirdColor; +} +.ui.indicating.progress .bar[style^="width: 6"] + .label { + color: @indicatingFourthColor; +} +.ui.indicating.progress .bar[style^="width: 7"] + .label, +.ui.indicating.progress .bar[style^="width: 8"] + .label { + color: @indicatingFifthColor; +} +.ui.indicating.progress .bar[style^="width: 9"] + .label, +.ui.indicating.progress .bar[style^="width: 100"] + .label { + color: @indicatingSixthColor; } /******************************* diff --git a/src/themes/packages/default/modules/progress.variables b/src/themes/packages/default/modules/progress.variables index 985fc498d..215e2ef3b 100755 --- a/src/themes/packages/default/modules/progress.variables +++ b/src/themes/packages/default/modules/progress.variables @@ -59,6 +59,18 @@ @labelTextAlign: center; @labelTransition: color 1s @defaultEasing; +/*------------------- + Types +--------------------*/ + +@indicatingFirstColor: #D95C5C; +@indicatingSecondColor: #D9A65C; +@indicatingThirdColor: #E6BB48; +@indicatingFourthColor: #DDC928; +@indicatingFifthColor: #B4D95C; +@indicatingSixthColor: #66DA81; + + /*------------------- States --------------------*/