Correction for inverted circular icons

10 years ago · 5ea6c1cd27
9 changed files with 187 additions and 123 deletions
--- a/NOTES.md
+++ b/NOTES.md
@ -8,7 +8,7 @@
 - **Modal** - Modal ``left`` and ``right`` sections are now replaced with ``image`` and ``description``
 - **Accordion** - Accordions are not unstyled by default allowing for more compatability with other modules without having to override styles. Styled accordions are now included as a variation ``ui styled accordion``
 - **Item** - Items have now been renamed "card" to allow for a more generic item list that does not use a "card" style. Some 'card' view content has been slightly adjusted. Please refer to documentation
- **Header/Icon** - Inverted headers and icons no longer invert background colors, but instead use a lighter version of colors more legible on dark backgrounds
+- **Header / Icon** - Inverted headers and icons no longer invert background colors, but instead use a lighter version of colors more legible on dark backgrounds. Inverted circular icons, still however invert the color of the circle.

 **Enhancements**
 - **Accordion** - Accordion now includes all icons in an embedded font instead of requiring icons
--- a/build/less/definitions/elements/icon.less
+++ b/build/less/definitions/elements/icon.less
@ -248,32 +248,41 @@ i.yellow.icon {
   Inverted Colors
 --------------------*/

-.ui.inverted.black.icon {
-  color: @darkGrey !important;
+i.inverted.black.icon {
+  background-color: @lightBlack !important;
+  color: #FFFFFF !important;
 }
-.ui.inverted.blue.icon {
-  color: @lightBlue !important;
+i.inverted.blue.icon {
+  background-color: @lightBlue !important;
+  color: #FFFFFF !important;
 }
-.ui.inverted.green.icon {
-  color: @lightGreen !important;
+i.inverted.green.icon {
+  background-color: @lightGreen !important;
+  color: #FFFFFF !important;
 }
-.ui.inverted.orange.icon {
-  color: @lightOrange !important;
+i.inverted.orange.icon {
+  background-color: @lightOrange !important;
+  color: #FFFFFF !important;
 }
-.ui.inverted.pink.icon {
-  color: @lightPink !important;
+i.inverted.pink.icon {
+  background-color: @lightPink !important;
+  color: #FFFFFF !important;
 }
-.ui.inverted.purple.icon {
-  color: @lightPurple !important;
+i.inverted.purple.icon {
+  background-color: @lightPurple !important;
+  color: #FFFFFF !important;
 }
-.ui.inverted.red.icon {
-  color: @lightRed !important;
+i.inverted.red.icon {
+  background-color: @lightRed !important;
+  color: #FFFFFF !important;
 }
-.ui.inverted.teal.icon {
-  color: @lightTeal !important;
+i.inverted.teal.icon {
+  background-color: @lightTeal !important;
+  color: #FFFFFF !important;
 }
-.ui.inverted.yellow.icon {
-  color: @lightYellow !important;
+i.inverted.yellow.icon {
+  background-color: @lightYellow !important;
+  color: #FFFFFF !important;
 }

 /*-------------------
--- a/build/minified/definitions/elements/divider.min.css
+++ b/build/minified/definitions/elements/divider.min.css
@ -11,4 +11,4 @@
 * Released: 08/13/2014
 */

-.ui.divider{margin:1rem 0;border-top:1px solid rgba(0,0,0,.1);border-bottom:1px solid rgba(0,0,0,.8);line-height:1;height:0;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.ui.horizontal.divider,.ui.vertical.divider{border:none;background-color:transparent;font-weight:700;text-align:center;text-transform:uppercase;color:rgba(0,0,0,.8)}.ui.vertical.divider{position:absolute;z-index:2;top:50%;left:50%;margin:0 0 0 -3%;width:6%;height:50%;line-height:0;padding:0}.ui.vertical.divider:after,.ui.vertical.divider:before{position:absolute;left:50%;content:" ";z-index:3;border-left:1px solid rgba(0,0,0,.1);border-right:1px solid rgba(0,0,0,.8);width:0;height:80%}.ui.vertical.divider:before{top:-100%}.ui.vertical.divider:after{top:auto;bottom:0}.ui.horizontal.divider{position:relative;top:0;left:0;margin:1rem 0;height:auto;padding:0;line-height:1}.ui.horizontal.divider:after,.ui.horizontal.divider:before{position:absolute;content:'';z-index:3;width:40%;top:50%;height:0;border-top:1px solid rgba(0,0,0,.1);border-bottom:1px solid rgba(0,0,0,.8)}.ui.horizontal.divider:before{left:0}.ui.horizontal.divider:after{left:auto;right:0}.ui.divider>.icon{margin:0;font-size:1rem;height:1em;vertical-align:middle}.ui.hidden.divider{border-color:transparent}.ui.divider.inverted{color:#fff}.ui.horizontal.inverted.divider,.ui.vertical.inverted.divider{color:rgba(255,255,255,.8)}.ui.divider.inverted,.ui.divider.inverted:after,.ui.divider.inverted:before{border-top-color:rgba(0,0,0,.15);border-bottom-color:rgba(255,255,255,.15);border-left-color:rgba(0,0,0,.15);border-right-color:rgba(255,255,255,.15)}.ui.fitted.divider{margin:0}.ui.clearing.divider{clear:both}.ui.section.divider{margin-top:2rem;margin-bottom:2rem}.ui.divider{font-size:1rem}
+.ui.divider{margin:1rem 0;border-top:1px solid rgba(0,0,0,.1);border-bottom:1px solid rgba(255,255,255,.8);line-height:1;height:0;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.ui.horizontal.divider,.ui.vertical.divider{border:none;background-color:transparent;font-weight:700;text-align:center;text-transform:uppercase;color:rgba(0,0,0,.8)}.ui.vertical.divider{position:absolute;z-index:2;top:50%;left:50%;margin:0 0 0 -3%;width:6%;height:50%;line-height:0;padding:0}.ui.vertical.divider:after,.ui.vertical.divider:before{position:absolute;left:50%;content:" ";z-index:3;border-left:1px solid rgba(0,0,0,.1);border-right:1px solid rgba(255,255,255,.8);width:0;height:80%}.ui.vertical.divider:before{top:-100%}.ui.vertical.divider:after{top:auto;bottom:0}.ui.horizontal.divider{position:relative;top:0;left:0;margin:1rem 0;height:auto;padding:0;line-height:1}.ui.horizontal.divider:after,.ui.horizontal.divider:before{position:absolute;content:'';z-index:3;width:40%;top:50%;height:0;border-top:1px solid rgba(0,0,0,.1);border-bottom:1px solid rgba(255,255,255,.8)}.ui.horizontal.divider:before{left:0}.ui.horizontal.divider:after{left:auto;right:0}.ui.divider>.icon{margin:0;font-size:1rem;height:1em;vertical-align:middle}.ui.hidden.divider{border-color:transparent}.ui.divider.inverted{color:#fff}.ui.horizontal.inverted.divider,.ui.vertical.inverted.divider{color:rgba(255,255,255,.8)}.ui.divider.inverted,.ui.divider.inverted:after,.ui.divider.inverted:before{border-top-color:rgba(0,0,0,.15);border-bottom-color:rgba(255,255,255,.15);border-left-color:rgba(0,0,0,.15);border-right-color:rgba(255,255,255,.15)}.ui.fitted.divider{margin:0}.ui.clearing.divider{clear:both}.ui.section.divider{margin-top:2rem;margin-bottom:2rem}.ui.divider{font-size:1rem}
--- a/build/minified/definitions/elements/icon.min.css
+++ b/build/minified/definitions/elements/icon.min.css
--- a/build/packaged/definitions/css/semantic.css
+++ b/build/packaged/definitions/css/semantic.css
@ -7116,25 +7116,6 @@ body > .ui.grid:not(.page) {
 /*------------------
     Load Default
 -------------------*/
-/*******************************
-            Divider
-*******************************/
-/*-------------------
-       Element
--------------------*/
-/*-------------------
-       Coupling
--------------------*/
-/* Icon */
-/*******************************
-         Variations
-*******************************/
-/* Horizontal / Vertical */
-/* Inverted */
-/* Section */
-/*------------------
-     Load Theme
-------------------*/
 /*******************************
         Site Settings
 *******************************/
@ -7226,6 +7207,25 @@ body > .ui.grid:not(.page) {
 /*---  Standard  ---*/
 /*---  Emotive  ---*/
 /*---  Neutrals  ---*/
+/*******************************
+            Divider
+*******************************/
+/*-------------------
+       Element
+--------------------*/
+/*-------------------
+       Coupling
+--------------------*/
+/* Icon */
+/*******************************
+         Variations
+*******************************/
+/* Horizontal / Vertical */
+/* Inverted */
+/* Section */
+/*------------------
+     Load Theme
+-------------------*/
 /*------------------
     Load Site
 -------------------*/
@ -7244,7 +7244,7 @@ body > .ui.grid:not(.page) {
 .ui.divider {
  margin: 1rem 0rem;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.8);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.8);
  line-height: 1;
  height: 0em;
  -webkit-box-sizing: border-box;
@ -7288,7 +7288,7 @@ body > .ui.grid:not(.page) {
  content: " ";
  z-index: 3;
  border-left: 1px solid rgba(0, 0, 0, 0.1);
-  border-right: 1px solid rgba(0, 0, 0, 0.8);
+  border-right: 1px solid rgba(255, 255, 255, 0.8);
  width: 0%;
  height: 80%;
 }
@ -7320,7 +7320,7 @@ body > .ui.grid:not(.page) {
  top: 50%;
  height: 0%;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.8);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.8);
 }
 .ui.horizontal.divider:before {
  left: 0%;
@ -9472,32 +9472,41 @@ i.yellow.icon {
 /*-------------------
   Inverted Colors
 --------------------*/
-.ui.inverted.black.icon {
-  color: #aaaaaa !important;
+i.inverted.black.icon {
+  background-color: #555555 !important;
+  color: #FFFFFF !important;
 }
-.ui.inverted.blue.icon {
-  color: #54c8ff !important;
+i.inverted.blue.icon {
+  background-color: #54c8ff !important;
+  color: #FFFFFF !important;
 }
-.ui.inverted.green.icon {
-  color: #2ecc40 !important;
+i.inverted.green.icon {
+  background-color: #2ecc40 !important;
+  color: #FFFFFF !important;
 }
-.ui.inverted.orange.icon {
-  color: #ff851b !important;
+i.inverted.orange.icon {
+  background-color: #ff851b !important;
+  color: #FFFFFF !important;
 }
-.ui.inverted.pink.icon {
-  color: #ff8edf !important;
+i.inverted.pink.icon {
+  background-color: #ff8edf !important;
+  color: #FFFFFF !important;
 }
-.ui.inverted.purple.icon {
-  color: #cdc6ff !important;
+i.inverted.purple.icon {
+  background-color: #cdc6ff !important;
+  color: #FFFFFF !important;
 }
-.ui.inverted.red.icon {
-  color: #ff695e !important;
+i.inverted.red.icon {
+  background-color: #ff695e !important;
+  color: #FFFFFF !important;
 }
-.ui.inverted.teal.icon {
-  color: #6dffff !important;
+i.inverted.teal.icon {
+  background-color: #6dffff !important;
+  color: #FFFFFF !important;
 }
-.ui.inverted.yellow.icon {
-  color: #ffe21f !important;
+i.inverted.yellow.icon {
+  background-color: #ffe21f !important;
+  color: #FFFFFF !important;
 }
 /*-------------------
        Sizes
--- a/build/packaged/definitions/css/semantic.min.css
+++ b/build/packaged/definitions/css/semantic.min.css
--- a/build/uncompressed/definitions/elements/divider.css
+++ b/build/uncompressed/definitions/elements/divider.css
@ -45,25 +45,6 @@
 /*------------------
     Load Default
 -------------------*/
-/*******************************
-            Divider
-*******************************/
-/*-------------------
-       Element
--------------------*/
-/*-------------------
-       Coupling
--------------------*/
-/* Icon */
-/*******************************
-         Variations
-*******************************/
-/* Horizontal / Vertical */
-/* Inverted */
-/* Section */
-/*------------------
-     Load Theme
-------------------*/
 /*******************************
         Site Settings
 *******************************/
@ -155,6 +136,25 @@
 /*---  Standard  ---*/
 /*---  Emotive  ---*/
 /*---  Neutrals  ---*/
+/*******************************
+            Divider
+*******************************/
+/*-------------------
+       Element
+--------------------*/
+/*-------------------
+       Coupling
+--------------------*/
+/* Icon */
+/*******************************
+         Variations
+*******************************/
+/* Horizontal / Vertical */
+/* Inverted */
+/* Section */
+/*------------------
+     Load Theme
+-------------------*/
 /*------------------
     Load Site
 -------------------*/
@ -173,7 +173,7 @@
 .ui.divider {
  margin: 1rem 0rem;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.8);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.8);
  line-height: 1;
  height: 0em;
  -webkit-box-sizing: border-box;
@ -217,7 +217,7 @@
  content: " ";
  z-index: 3;
  border-left: 1px solid rgba(0, 0, 0, 0.1);
-  border-right: 1px solid rgba(0, 0, 0, 0.8);
+  border-right: 1px solid rgba(255, 255, 255, 0.8);
  width: 0%;
  height: 80%;
 }
@ -249,7 +249,7 @@
  top: 50%;
  height: 0%;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.8);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.8);
 }
 .ui.horizontal.divider:before {
  left: 0%;
--- a/build/uncompressed/definitions/elements/icon.css
+++ b/build/uncompressed/definitions/elements/icon.css
@ -368,32 +368,41 @@ i.yellow.icon {
 /*-------------------
   Inverted Colors
 --------------------*/
-.ui.inverted.black.icon {
-  color: #aaaaaa !important;
+i.inverted.black.icon {
+  background-color: #555555 !important;
+  color: #FFFFFF !important;
 }
-.ui.inverted.blue.icon {
-  color: #54c8ff !important;
+i.inverted.blue.icon {
+  background-color: #54c8ff !important;
+  color: #FFFFFF !important;
 }
-.ui.inverted.green.icon {
-  color: #2ecc40 !important;
+i.inverted.green.icon {
+  background-color: #2ecc40 !important;
+  color: #FFFFFF !important;
 }
-.ui.inverted.orange.icon {
-  color: #ff851b !important;
+i.inverted.orange.icon {
+  background-color: #ff851b !important;
+  color: #FFFFFF !important;
 }
-.ui.inverted.pink.icon {
-  color: #ff8edf !important;
+i.inverted.pink.icon {
+  background-color: #ff8edf !important;
+  color: #FFFFFF !important;
 }
-.ui.inverted.purple.icon {
-  color: #cdc6ff !important;
+i.inverted.purple.icon {
+  background-color: #cdc6ff !important;
+  color: #FFFFFF !important;
 }
-.ui.inverted.red.icon {
-  color: #ff695e !important;
+i.inverted.red.icon {
+  background-color: #ff695e !important;
+  color: #FFFFFF !important;
 }
-.ui.inverted.teal.icon {
-  color: #6dffff !important;
+i.inverted.teal.icon {
+  background-color: #6dffff !important;
+  color: #FFFFFF !important;
 }
-.ui.inverted.yellow.icon {
-  color: #ffe21f !important;
+i.inverted.yellow.icon {
+  background-color: #ffe21f !important;
+  color: #FFFFFF !important;
 }
 /*-------------------
        Sizes
--- a/src/definitions/elements/icon.less
+++ b/src/definitions/elements/icon.less
@ -199,16 +199,6 @@ i.bordered.inverted.icon {
  box-shadow: none;
 }

-
-/*-------------------
-      Inverted
--------------------*/
-
-i.inverted.icon {
-  background-color: #222222;
-  color: #FFFFFF;
-}
-
 /*-------------------
       Colors
 --------------------*/
@ -244,38 +234,85 @@ i.yellow.icon {
  color: @yellow !important;
 }

+
 /*-------------------
-   Inverted Colors
+      Inverted
 --------------------*/

-.ui.inverted.black.icon {
-  color: @darkGrey !important;
+i.inverted.icon {
+  color: @white;
+}
+i.inverted.black.icon {
+  color: @lightBlack !important;
 }
-.ui.inverted.blue.icon {
+i.inverted.blue.icon {
  color: @lightBlue !important;
 }
-.ui.inverted.green.icon {
+i.inverted.green.icon {
  color: @lightGreen !important;
 }
-.ui.inverted.orange.icon {
+i.inverted.orange.icon {
  color: @lightOrange !important;
 }
-.ui.inverted.pink.icon {
+i.inverted.pink.icon {
  color: @lightPink !important;
 }
-.ui.inverted.purple.icon {
+i.inverted.purple.icon {
  color: @lightPurple !important;
 }
-.ui.inverted.red.icon {
+i.inverted.red.icon {
  color: @lightRed !important;
 }
-.ui.inverted.teal.icon {
+i.inverted.teal.icon {
  color: @lightTeal !important;
 }
-.ui.inverted.yellow.icon {
+i.inverted.yellow.icon {
  color: @lightYellow !important;
 }

+/* Inverted Circular */
+i.inverted.circular.icon {
+  background-color: #222222 !important;
+  color: #FFFFFF !important;
+}
+i.inverted.circular.black.icon {
+  background-color: @black !important;
+  color: #FFFFFF !important;
+}
+i.inverted.circular.blue.icon {
+  background-color: @blue !important;
+  color: #FFFFFF !important;
+}
+i.inverted.circular.green.icon {
+  background-color: @green !important;
+  color: #FFFFFF !important;
+}
+i.inverted.circular.orange.icon {
+  background-color: @orange !important;
+  color: #FFFFFF !important;
+}
+i.inverted.circular.pink.icon {
+  background-color: @pink !important;
+  color: #FFFFFF !important;
+}
+i.inverted.circular.purple.icon {
+  background-color: @purple !important;
+  color: #FFFFFF !important;
+}
+i.inverted.circular.red.icon {
+  background-color: @red !important;
+  color: #FFFFFF !important;
+}
+i.inverted.circular.teal.icon {
+  background-color: @teal !important;
+  color: #FFFFFF !important;
+}
+i.inverted.circular.yellow.icon {
+  background-color: @yellow !important;
+  color: #FFFFFF !important;
+}
+
+
 /*-------------------
        Sizes
 --------------------*/