adds circular icons to inputs, fixes circular inheritance. fixes #51

build/less/elements/icon.less

@@ -300,11 +300,11 @@ i.link.icon {
 --------------------*/
 
 i.circular.icon {
-  -webkit-border-radius: 500px;
-  -moz-border-radius: 500px;
-  border-radius: 500px;
+  -webkit-border-radius: 500px !important;
+  -moz-border-radius: 500px !important;
+  border-radius: 500px !important;
 
-  padding: 0.5em 0.35em !important;
+  padding: 0.5em !important;
 
   -webkit-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
   -moz-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
@@ -314,9 +314,6 @@ i.circular.icon {
   width: 2em !important;
   height: 2em !important;
 }
-i.circular.icon:before {
-  vertical-align: middle;
-}
 i.circular.inverted.icon {
   border: none;
   -webkit-box-shadow: none;

build/less/elements/input.less

@@ -181,20 +181,20 @@
 .ui.icon.input > .icon {
   position: absolute;
   opacity: 0.5;
-  top: 1px;
-  right: 1px;
+  top: 0px;
+  right: 0px;
 
   margin: 0em;
 
-  width: 2.5em;
-  height: 2.5em;
+  width: 2.6em;
+  height: 2.6em;
   padding-top: 0.75em;
 
   text-align: center;
 
-  -webkit-border-radius: 0.2em 0em 0em 0.2em;
-  -moz-border-radius: 0.2em 0em 0em 0.2em;
-  border-radius: 0.2em 0em 0em 0.2em;
+  -webkit-border-radius: 0em 0.2em 0.2em 0em;
+  -moz-border-radius: 0em 0.2em 0.2em 0em;
+  border-radius: 0em 0.2em 0.2em 0em;
 
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
@@ -210,18 +210,31 @@
 .ui.icon.input input {
   padding-right: 3em !important;
 }
+.ui.icon.input > .circular.icon {
+  top: 0.35em;
+  right: 0.5em;
+}
 
-.ui.left.icon.input .icon {
+/* Left Side */
+.ui.left.icon.input > .icon {
   right: auto;
   left: 1px;
+
+  -webkit-border-radius: 0.2em 0em 0em 0.2em;
+  -moz-border-radius: 0.2em 0em 0em 0.2em;
+  border-radius: 0.2em 0em 0em 0.2em;
+}
+.ui.left.icon.input > .circular.icon {
+  right: auto;
+  left: 0.5em;
 }
-.ui.left.icon.input input {
+.ui.left.icon.input > input {
   padding-left: 3em !important;
   padding-right: 1.2em !important;
 }
 
 /* Focus */
-.ui.icon.input input:focus ~ .icon {
+.ui.icon.input > input:focus ~ .icon {
   opacity: 1;
 }
 

build/minified/modules/modal.min.css

@@ -1 +1 @@
-.ui.modal{display:none;position:fixed;z-index:1001;top:50%;left:50%;text-align:left;width:800px;margin-left:-400px;background-color:#FFF;border:1px solid #DDD;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}.ui.modal>.close{cursor:pointer;position:absolute;opacity:.8;font-size:1.25em;top:-1.75em;right:-1.75em;color:#FFF}.ui.modal>.close:hover{opacity:1}.ui.modal>.header{border-bottom:1px solid rgba(0,0,0,.1);margin:0;padding:1.5rem 2rem;font-size:1.6em;font-weight:700;-webkit-border-radius:.325em .325em 0 0;-moz-border-radius:.325em .325em 0 0;border-radius:.325em .325em 0 0}.ui.modal>.content{display:table;position:relative;padding:2em;background-color:#F4F4F4}.ui.modal>.content>.left{display:table-cell;padding-right:5%}.ui.modal>.content>.right{display:table-cell;padding-left:5%;vertical-align:middle;box-shadow:-1px 0 0 0 rgba(0,0,0,.1)}.ui.modal>.content p{line-height:1.6}.ui.modal .actions{border-top:1px solid rgba(0,0,0,.1);padding:1rem 2rem;text-align:right}.ui.modal .actions>.button{margin-left:.75em}.ui.basic.modal{background-color:transparent;border:0;color:#FFF}.ui.basic.modal .content{background-color:transparent}.ui.modal.scrolling{position:absolute;margin-top:100px}.ui.active.modal{display:block}
+.ui.modal{display:none;position:fixed;z-index:1001;top:50%;left:50%;text-align:left;width:800px;margin-left:-400px;background-color:#FFF;border:1px solid #DDD;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}.ui.modal>.close{cursor:pointer;position:absolute;opacity:.8;font-size:1.25em;top:-1.75em;right:-1.75em;color:#FFF}.ui.modal>.close:hover{opacity:1}.ui.modal>.header{border-bottom:1px solid rgba(0,0,0,.1);margin:0;padding:1.5rem 2rem;font-size:1.6em;font-weight:700;-webkit-border-radius:.325em .325em 0 0;-moz-border-radius:.325em .325em 0 0;border-radius:.325em .325em 0 0}.ui.modal>.content{display:table;width:100%;position:relative;padding:2em;background-color:#F4F4F4;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.ui.modal>.content>.left{display:table-cell;padding-right:5%}.ui.modal>.content>.right{display:table-cell;padding-left:5%;vertical-align:middle;box-shadow:-1px 0 0 0 rgba(0,0,0,.1)}.ui.modal>.content p{line-height:1.6}.ui.modal .actions{border-top:1px solid rgba(0,0,0,.1);padding:1rem 2rem;text-align:right}.ui.modal .actions>.button{margin-left:.75em}.ui.basic.modal{background-color:transparent;border:0;color:#FFF}.ui.basic.modal .content{background-color:transparent}.ui.modal.scrolling{position:absolute;margin-top:100px}.ui.active.modal{display:block}

build/uncompressed/elements/icon.css

@@ -651,10 +651,10 @@ i.link.icon {
       Circular
 --------------------*/
 i.circular.icon {
-  -webkit-border-radius: 500px;
-  -moz-border-radius: 500px;
-  border-radius: 500px;
-  padding: 0.5em 0.35em !important;
+  -webkit-border-radius: 500px !important;
+  -moz-border-radius: 500px !important;
+  border-radius: 500px !important;
+  padding: 0.5em !important;
   -webkit-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
   -moz-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
   box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
@@ -662,9 +662,6 @@ i.circular.icon {
   width: 2em !important;
   height: 2em !important;
 }
-i.circular.icon:before {
-  vertical-align: middle;
-}
 i.circular.inverted.icon {
   border: none;
   -webkit-box-shadow: none;

build/uncompressed/elements/input.css

@@ -127,16 +127,16 @@
 .ui.icon.input > .icon {
   position: absolute;
   opacity: 0.5;
-  top: 1px;
-  right: 1px;
+  top: 0px;
+  right: 0px;
   margin: 0em;
-  width: 2.5em;
-  height: 2.5em;
+  width: 2.6em;
+  height: 2.6em;
   padding-top: 0.75em;
   text-align: center;
-  -webkit-border-radius: 0.2em 0em 0em 0.2em;
-  -moz-border-radius: 0.2em 0em 0em 0.2em;
-  border-radius: 0.2em 0em 0em 0.2em;
+  -webkit-border-radius: 0em 0.2em 0.2em 0em;
+  -moz-border-radius: 0em 0.2em 0.2em 0em;
+  border-radius: 0em 0.2em 0.2em 0em;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   -ms-box-sizing: border-box;
@@ -150,16 +150,28 @@
 .ui.icon.input input {
   padding-right: 3em !important;
 }
-.ui.left.icon.input .icon {
+.ui.icon.input > .circular.icon {
+  top: 0.35em;
+  right: 0.5em;
+}
+/* Left Side */
+.ui.left.icon.input > .icon {
   right: auto;
   left: 1px;
+  -webkit-border-radius: 0.2em 0em 0em 0.2em;
+  -moz-border-radius: 0.2em 0em 0em 0.2em;
+  border-radius: 0.2em 0em 0em 0.2em;
+}
+.ui.left.icon.input > .circular.icon {
+  right: auto;
+  left: 0.5em;
 }
-.ui.left.icon.input input {
+.ui.left.icon.input > input {
   padding-left: 3em !important;
   padding-right: 1.2em !important;
 }
 /* Focus */
-.ui.icon.input input:focus ~ .icon {
+.ui.icon.input > input:focus ~ .icon {
   opacity: 1;
 }
 /*--------------------

node/src/documents/elements/input.html

@@ -70,13 +70,25 @@ type        : 'UI Element'
     <p>An input can be formatted with an icon</p>
     <div class="ui icon input">
       <input type="text" placeholder="Search...">
-      <i class="icon search"></i>
+      <i class="search icon"></i>
     </div>
   </div>
   <div class="another example">
     <div class="ui left icon input">
       <input type="text" placeholder="Search users...">
-      <i class="icon users"></i>
+      <i class="users icon"></i>
+    </div>
+  </div>
+  <div class="another example">
+    <div class="ui icon input">
+      <input type="text" placeholder="Search...">
+      <i class="circular search icon"></i>
+    </div>
+  </div>
+  <div class="another example">
+    <div class="ui icon input">
+      <input type="text" placeholder="Search...">
+      <i class="inverted search icon"></i>
     </div>
   </div>
 

node/src/files/release/less/elements/icon.less

@@ -300,11 +300,11 @@ i.link.icon {
 --------------------*/
 
 i.circular.icon {
-  -webkit-border-radius: 500px;
-  -moz-border-radius: 500px;
-  border-radius: 500px;
+  -webkit-border-radius: 500px !important;
+  -moz-border-radius: 500px !important;
+  border-radius: 500px !important;
 
-  padding: 0.5em 0.35em !important;
+  padding: 0.5em !important;
 
   -webkit-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
   -moz-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
@@ -314,9 +314,6 @@ i.circular.icon {
   width: 2em !important;
   height: 2em !important;
 }
-i.circular.icon:before {
-  vertical-align: middle;
-}
 i.circular.inverted.icon {
   border: none;
   -webkit-box-shadow: none;

node/src/files/release/less/elements/input.less

@@ -181,20 +181,20 @@
 .ui.icon.input > .icon {
   position: absolute;
   opacity: 0.5;
-  top: 1px;
-  right: 1px;
+  top: 0px;
+  right: 0px;
 
   margin: 0em;
 
-  width: 2.5em;
-  height: 2.5em;
+  width: 2.6em;
+  height: 2.6em;
   padding-top: 0.75em;
 
   text-align: center;
 
-  -webkit-border-radius: 0.2em 0em 0em 0.2em;
-  -moz-border-radius: 0.2em 0em 0em 0.2em;
-  border-radius: 0.2em 0em 0em 0.2em;
+  -webkit-border-radius: 0em 0.2em 0.2em 0em;
+  -moz-border-radius: 0em 0.2em 0.2em 0em;
+  border-radius: 0em 0.2em 0.2em 0em;
 
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
@@ -210,18 +210,31 @@
 .ui.icon.input input {
   padding-right: 3em !important;
 }
+.ui.icon.input > .circular.icon {
+  top: 0.35em;
+  right: 0.5em;
+}
 
-.ui.left.icon.input .icon {
+/* Left Side */
+.ui.left.icon.input > .icon {
   right: auto;
   left: 1px;
+
+  -webkit-border-radius: 0.2em 0em 0em 0.2em;
+  -moz-border-radius: 0.2em 0em 0em 0.2em;
+  border-radius: 0.2em 0em 0em 0.2em;
+}
+.ui.left.icon.input > .circular.icon {
+  right: auto;
+  left: 0.5em;
 }
-.ui.left.icon.input input {
+.ui.left.icon.input > input {
   padding-left: 3em !important;
   padding-right: 1.2em !important;
 }
 
 /* Focus */
-.ui.icon.input input:focus ~ .icon {
+.ui.icon.input > input:focus ~ .icon {
   opacity: 1;
 }
 

node/src/files/release/minified/modules/modal.min.css

@@ -1 +1 @@
-.ui.modal{display:none;position:fixed;z-index:1001;top:50%;left:50%;text-align:left;width:800px;margin-left:-400px;background-color:#FFF;border:1px solid #DDD;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}.ui.modal>.close{cursor:pointer;position:absolute;opacity:.8;font-size:1.25em;top:-1.75em;right:-1.75em;color:#FFF}.ui.modal>.close:hover{opacity:1}.ui.modal>.header{border-bottom:1px solid rgba(0,0,0,.1);margin:0;padding:1.5rem 2rem;font-size:1.6em;font-weight:700;-webkit-border-radius:.325em .325em 0 0;-moz-border-radius:.325em .325em 0 0;border-radius:.325em .325em 0 0}.ui.modal>.content{display:table;position:relative;padding:2em;background-color:#F4F4F4}.ui.modal>.content>.left{display:table-cell;padding-right:5%}.ui.modal>.content>.right{display:table-cell;padding-left:5%;vertical-align:middle;box-shadow:-1px 0 0 0 rgba(0,0,0,.1)}.ui.modal>.content p{line-height:1.6}.ui.modal .actions{border-top:1px solid rgba(0,0,0,.1);padding:1rem 2rem;text-align:right}.ui.modal .actions>.button{margin-left:.75em}.ui.basic.modal{background-color:transparent;border:0;color:#FFF}.ui.basic.modal .content{background-color:transparent}.ui.modal.scrolling{position:absolute;margin-top:100px}.ui.active.modal{display:block}
+.ui.modal{display:none;position:fixed;z-index:1001;top:50%;left:50%;text-align:left;width:800px;margin-left:-400px;background-color:#FFF;border:1px solid #DDD;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}.ui.modal>.close{cursor:pointer;position:absolute;opacity:.8;font-size:1.25em;top:-1.75em;right:-1.75em;color:#FFF}.ui.modal>.close:hover{opacity:1}.ui.modal>.header{border-bottom:1px solid rgba(0,0,0,.1);margin:0;padding:1.5rem 2rem;font-size:1.6em;font-weight:700;-webkit-border-radius:.325em .325em 0 0;-moz-border-radius:.325em .325em 0 0;border-radius:.325em .325em 0 0}.ui.modal>.content{display:table;width:100%;position:relative;padding:2em;background-color:#F4F4F4;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.ui.modal>.content>.left{display:table-cell;padding-right:5%}.ui.modal>.content>.right{display:table-cell;padding-left:5%;vertical-align:middle;box-shadow:-1px 0 0 0 rgba(0,0,0,.1)}.ui.modal>.content p{line-height:1.6}.ui.modal .actions{border-top:1px solid rgba(0,0,0,.1);padding:1rem 2rem;text-align:right}.ui.modal .actions>.button{margin-left:.75em}.ui.basic.modal{background-color:transparent;border:0;color:#FFF}.ui.basic.modal .content{background-color:transparent}.ui.modal.scrolling{position:absolute;margin-top:100px}.ui.active.modal{display:block}

node/src/files/release/uncompressed/elements/icon.css

@@ -651,10 +651,10 @@ i.link.icon {
       Circular
 --------------------*/
 i.circular.icon {
-  -webkit-border-radius: 500px;
-  -moz-border-radius: 500px;
-  border-radius: 500px;
-  padding: 0.5em 0.35em !important;
+  -webkit-border-radius: 500px !important;
+  -moz-border-radius: 500px !important;
+  border-radius: 500px !important;
+  padding: 0.5em !important;
   -webkit-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
   -moz-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
   box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
@@ -662,9 +662,6 @@ i.circular.icon {
   width: 2em !important;
   height: 2em !important;
 }
-i.circular.icon:before {
-  vertical-align: middle;
-}
 i.circular.inverted.icon {
   border: none;
   -webkit-box-shadow: none;

node/src/files/release/uncompressed/elements/input.css

@@ -127,16 +127,16 @@
 .ui.icon.input > .icon {
   position: absolute;
   opacity: 0.5;
-  top: 1px;
-  right: 1px;
+  top: 0px;
+  right: 0px;
   margin: 0em;
-  width: 2.5em;
-  height: 2.5em;
+  width: 2.6em;
+  height: 2.6em;
   padding-top: 0.75em;
   text-align: center;
-  -webkit-border-radius: 0.2em 0em 0em 0.2em;
-  -moz-border-radius: 0.2em 0em 0em 0.2em;
-  border-radius: 0.2em 0em 0em 0.2em;
+  -webkit-border-radius: 0em 0.2em 0.2em 0em;
+  -moz-border-radius: 0em 0.2em 0.2em 0em;
+  border-radius: 0em 0.2em 0.2em 0em;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   -ms-box-sizing: border-box;
@@ -150,16 +150,28 @@
 .ui.icon.input input {
   padding-right: 3em !important;
 }
-.ui.left.icon.input .icon {
+.ui.icon.input > .circular.icon {
+  top: 0.35em;
+  right: 0.5em;
+}
+/* Left Side */
+.ui.left.icon.input > .icon {
   right: auto;
   left: 1px;
+  -webkit-border-radius: 0.2em 0em 0em 0.2em;
+  -moz-border-radius: 0.2em 0em 0em 0.2em;
+  border-radius: 0.2em 0em 0em 0.2em;
+}
+.ui.left.icon.input > .circular.icon {
+  right: auto;
+  left: 0.5em;
 }
-.ui.left.icon.input input {
+.ui.left.icon.input > input {
   padding-left: 3em !important;
   padding-right: 1.2em !important;
 }
 /* Focus */
-.ui.icon.input input:focus ~ .icon {
+.ui.icon.input > input:focus ~ .icon {
   opacity: 1;
 }
 /*--------------------

src/elements/icon.less

@@ -300,11 +300,11 @@ i.link.icon {
 --------------------*/
 
 i.circular.icon {
-  -webkit-border-radius: 500px;
-  -moz-border-radius: 500px;
-  border-radius: 500px;
+  -webkit-border-radius: 500px !important;
+  -moz-border-radius: 500px !important;
+  border-radius: 500px !important;
 
-  padding: 0.5em 0.35em !important;
+  padding: 0.5em !important;
 
   -webkit-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
   -moz-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
@@ -314,9 +314,6 @@ i.circular.icon {
   width: 2em !important;
   height: 2em !important;
 }
-i.circular.icon:before {
-  vertical-align: middle;
-}
 i.circular.inverted.icon {
   border: none;
   -webkit-box-shadow: none;

src/elements/input.less

@@ -181,20 +181,20 @@
 .ui.icon.input > .icon {
   position: absolute;
   opacity: 0.5;
-  top: 1px;
-  right: 1px;
+  top: 0px;
+  right: 0px;
 
   margin: 0em;
 
-  width: 2.5em;
-  height: 2.5em;
+  width: 2.6em;
+  height: 2.6em;
   padding-top: 0.75em;
 
   text-align: center;
 
-  -webkit-border-radius: 0.2em 0em 0em 0.2em;
-  -moz-border-radius: 0.2em 0em 0em 0.2em;
-  border-radius: 0.2em 0em 0em 0.2em;
+  -webkit-border-radius: 0em 0.2em 0.2em 0em;
+  -moz-border-radius: 0em 0.2em 0.2em 0em;
+  border-radius: 0em 0.2em 0.2em 0em;
 
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
@@ -210,18 +210,31 @@
 .ui.icon.input input {
   padding-right: 3em !important;
 }
+.ui.icon.input > .circular.icon {
+  top: 0.35em;
+  right: 0.5em;
+}
 
-.ui.left.icon.input .icon {
+/* Left Side */
+.ui.left.icon.input > .icon {
   right: auto;
   left: 1px;
+
+  -webkit-border-radius: 0.2em 0em 0em 0.2em;
+  -moz-border-radius: 0.2em 0em 0em 0.2em;
+  border-radius: 0.2em 0em 0em 0.2em;
+}
+.ui.left.icon.input > .circular.icon {
+  right: auto;
+  left: 0.5em;
 }
-.ui.left.icon.input input {
+.ui.left.icon.input > input {
   padding-left: 3em !important;
   padding-right: 1.2em !important;
 }
 
 /* Focus */
-.ui.icon.input input:focus ~ .icon {
+.ui.icon.input > input:focus ~ .icon {
   opacity: 1;
 }