Adds variables for indicating progress bar

fomantic · Oct 8, 2014 · 7976beb · 7976beb
1 parent b13e0ca
commit 7976beb
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 13 deletions.
diff --git a/server/documents/elements/label.html.eco b/server/documents/elements/label.html.eco
@@ -22,7 +22,7 @@ themes      : ['Default']
 
   <div class="example">
     <h4 class="ui header">Label</h4>
-    <p>A basic label</p>
+    <p>A label</p>
     <div class="ui label">
       <i class="mail icon"></i> 23
     </div>
@@ -303,14 +303,20 @@ themes      : ['Default']
       Small
     </div>
     <div class="ui label">
-      Standard
+      Medium
     </div>
     <div class="ui large label">
       Large
     </div>
+    <div class="ui large label">
+      Big
+    </div>
     <div class="ui huge label">
       Huge
     </div>
+    <div class="ui huge label">
+      Massive
+    </div>
   </div>
 
   <h2 class="ui dividing header">Groups</h2>

diff --git a/server/documents/views/card.html.eco b/server/documents/views/card.html.eco
@@ -49,7 +49,7 @@ themes      : ['Default', 'Basic', 'Classic']
   <div class="even example">
     <h4 class="ui header">Cards</h4>
     <p>A group of cards. </p>
-    <div class="ui info message">
+    <div class="ui ignored info message">
       <h3 class="header">Customizing your views</h3>
       <p>Cards are designed to be flexible to your content. Meta content can include custom elements related to your content. Each child element inside the <code>extra content</code> or <code>meta</code> group will be automatically formatted to be spaced appropriately.</p>
       <p>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.</p>
@@ -198,7 +198,7 @@ themes      : ['Default', 'Basic', 'Classic']
   <div class="example">
     <h4 class="ui header">Image</h4>
     <p>A card can contain an image</p>
-    <div class="ui info message">Cards can use <a href="/elements/reveal.html">reveal</a> or <a href="/modules/dimmer.html">dimmers</a> to easily show additional content, or options on hover</div>
+    <div class="ui ignored info message">Cards can use <a href="/elements/reveal.html">reveal</a> or <a href="/modules/dimmer.html">dimmers</a> to easily show additional content, or options on hover</div>
     <div class="ui card">
       <div class="ui slide masked reveal image">
         <img src="/images/avatar/large/jenny.jpg" class="visible content">

diff --git 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
@@ -59,6 +59,18 @@
 @labelTextAlign: center;
 @labelTransition: color 1s @defaultEasing;
 
+/*-------------------
+        Types
+--------------------*/
+
+@indicatingFirstColor: #D95C5C;
+@indicatingSecondColor: #D9A65C;
+@indicatingThirdColor: #E6BB48;
+@indicatingFourthColor: #DDC928;
+@indicatingFifthColor: #B4D95C;
+@indicatingSixthColor: #66DA81;
+
+
 /*-------------------
         States
 --------------------*/