diff --git a/build/less/elements/icon.less b/build/less/elements/icon.less
index 4de20ff35..cf4041033 100644
--- a/build/less/elements/icon.less
+++ b/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;
diff --git a/build/less/elements/input.less b/build/less/elements/input.less
index f44c29ab5..e62d9f671 100644
--- a/build/less/elements/input.less
+++ b/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;
}
diff --git a/build/minified/modules/modal.min.css b/build/minified/modules/modal.min.css
index 6cb3a6100..9b72600b4 100644
--- a/build/minified/modules/modal.min.css
+++ b/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}
\ No newline at end of file
+.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}
\ No newline at end of file
diff --git a/build/packaged/css/semantic.min.css.REMOVED.git-id b/build/packaged/css/semantic.min.css.REMOVED.git-id
index cab9949aa..f91133a5c 100644
--- a/build/packaged/css/semantic.min.css.REMOVED.git-id
+++ b/build/packaged/css/semantic.min.css.REMOVED.git-id
@@ -1 +1 @@
-ae3e5d3425c02c030c6680a4033fb8dcba10cec5
\ No newline at end of file
+aa4202369115339df4c6fd8f538766e3559c7aaf
\ No newline at end of file
diff --git a/build/uncompressed/elements/icon.css b/build/uncompressed/elements/icon.css
index 75e4462b1..c491ab7dc 100644
--- a/build/uncompressed/elements/icon.css
+++ b/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;
diff --git a/build/uncompressed/elements/input.css b/build/uncompressed/elements/input.css
index 9f6a5d563..31b035038 100644
--- a/build/uncompressed/elements/input.css
+++ b/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;
}
/*--------------------
diff --git a/node/src/documents/elements/input.html b/node/src/documents/elements/input.html
index 2de5230b4..d16ea0640 100755
--- a/node/src/documents/elements/input.html
+++ b/node/src/documents/elements/input.html
@@ -70,13 +70,25 @@ type : 'UI Element'
An input can be formatted with an icon
-
+
+
+
diff --git a/node/src/files/release/less/elements/icon.less b/node/src/files/release/less/elements/icon.less
index 4de20ff35..cf4041033 100644
--- a/node/src/files/release/less/elements/icon.less
+++ b/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;
diff --git a/node/src/files/release/less/elements/input.less b/node/src/files/release/less/elements/input.less
index f44c29ab5..e62d9f671 100644
--- a/node/src/files/release/less/elements/input.less
+++ b/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;
}
diff --git a/node/src/files/release/minified/modules/modal.min.css b/node/src/files/release/minified/modules/modal.min.css
index 6cb3a6100..9b72600b4 100644
--- a/node/src/files/release/minified/modules/modal.min.css
+++ b/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}
\ No newline at end of file
+.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}
\ No newline at end of file
diff --git a/node/src/files/release/packaged/css/semantic.min.css.REMOVED.git-id b/node/src/files/release/packaged/css/semantic.min.css.REMOVED.git-id
index cab9949aa..f91133a5c 100644
--- a/node/src/files/release/packaged/css/semantic.min.css.REMOVED.git-id
+++ b/node/src/files/release/packaged/css/semantic.min.css.REMOVED.git-id
@@ -1 +1 @@
-ae3e5d3425c02c030c6680a4033fb8dcba10cec5
\ No newline at end of file
+aa4202369115339df4c6fd8f538766e3559c7aaf
\ No newline at end of file
diff --git a/node/src/files/release/semantic.zip.REMOVED.git-id b/node/src/files/release/semantic.zip.REMOVED.git-id
index e80c7282a..4fb8c2d78 100644
--- a/node/src/files/release/semantic.zip.REMOVED.git-id
+++ b/node/src/files/release/semantic.zip.REMOVED.git-id
@@ -1 +1 @@
-57d12678e4e97bda365b9e1ff5d4513f9a849318
\ No newline at end of file
+b46786378c772384e0bb4ab502831ae76979882c
\ No newline at end of file
diff --git a/node/src/files/release/uncompressed/elements/icon.css b/node/src/files/release/uncompressed/elements/icon.css
index 75e4462b1..c491ab7dc 100644
--- a/node/src/files/release/uncompressed/elements/icon.css
+++ b/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;
diff --git a/node/src/files/release/uncompressed/elements/input.css b/node/src/files/release/uncompressed/elements/input.css
index 9f6a5d563..31b035038 100644
--- a/node/src/files/release/uncompressed/elements/input.css
+++ b/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;
}
/*--------------------
diff --git a/src/elements/icon.less b/src/elements/icon.less
index 4de20ff35..cf4041033 100755
--- a/src/elements/icon.less
+++ b/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;
diff --git a/src/elements/input.less b/src/elements/input.less
index f44c29ab5..e62d9f671 100755
--- a/src/elements/input.less
+++ b/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;
}