fomantic-ui 2.9.1-beta.2 → 2.9.1-beta.20

package/dist/components/input.css

@@ -1,5 +1,5 @@
 /*!
- * # Fomantic-UI 2.9.1-beta.2+f5a64f3 - Input
+ * # Fomantic-UI 2.9.1-beta.20+d4987bf - Input
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -14,10 +14,9 @@
 *******************************/
 
 
-/*--------------------
+/* --------------------
         Inputs
----------------------*/
-
+--------------------- */
 .ui.input {
   position: relative;
   font-weight: normal;
@@ -60,10 +59,9 @@
   cursor: pointer;
 }
 
-/*--------------------
+/* --------------------
       Placeholder
----------------------*/
-
+--------------------- */
 
 /* browsers require these rules separate */
 .ui.input > input::-webkit-input-placeholder {
@@ -83,10 +81,9 @@
 *******************************/
 
 
-/*--------------------
-          Disabled
-  ---------------------*/
-
+/* --------------------
+            Disabled
+    --------------------- */
 .ui.disabled.input,
 .ui.input:not(.disabled) input[disabled] {
   opacity: 0.45;
@@ -96,10 +93,9 @@
   pointer-events: none;
 }
 
-/*--------------------
+/* --------------------
         Active
----------------------*/
-
+--------------------- */
 .ui.input > input:active,
 .ui.input.down input {
   border-color: rgba(0, 0, 0, 0.3);
@@ -109,10 +105,9 @@
           box-shadow: none;
 }
 
-/*--------------------
-         Loading
-  ---------------------*/
-
+/* --------------------
+           Loading
+    --------------------- */
 .ui.loading.loading.input > i.icon::before {
   position: absolute;
   content: '';
@@ -140,10 +135,9 @@
           box-shadow: 0 0 0 1px transparent;
 }
 
-/*--------------------
+/* --------------------
         Focus
----------------------*/
-
+--------------------- */
 .ui.input.focus > input,
 .ui.input > input:focus {
   border-color: #85B7D9;
@@ -165,10 +159,9 @@
   color: rgba(115, 115, 115, 0.87);
 }
 
-/*--------------------
-          States
-  ---------------------*/
-
+/* --------------------
+            States
+    --------------------- */
 .ui.input.error > input {
   background-color: #FFF6F6;
   border-color: #E0B4B4;
@@ -317,10 +310,9 @@
 *******************************/
 
 
-/*--------------------
-        Transparent
-  ---------------------*/
-
+/* --------------------
+          Transparent
+    --------------------- */
 .ui.transparent.input > textarea,
 .ui.transparent.input > input {
   border-color: transparent !important;
@@ -365,10 +357,9 @@
   color: rgba(255, 255, 255, 0.5);
 }
 
-/*--------------------
-           Icon
-  ---------------------*/
-
+/* --------------------
+             Icon
+    --------------------- */
 .ui.icon.input > i.icon {
   cursor: default;
   position: absolute;
@@ -434,10 +425,9 @@
   opacity: 1;
 }
 
-/*--------------------
-          Labeled
-  ---------------------*/
-
+/* --------------------
+            Labeled
+    --------------------- */
 
 /* Adjacent Label */
 .ui.labeled.input > .label {
@@ -504,7 +494,8 @@
 }
 
 /* Left Labeled */
-.ui[class*="left icon"].input > .ui.dropdown,
+.ui[class*="left icon"].input > .ui.dropdown:first-child,
+.ui[class*="left icon"].input > i.icon + .ui.dropdown,
 .ui[class*="left corner labeled"].input > .ui.dropdown,
 .ui[class*="left corner labeled"].input > textarea,
 .ui[class*="left corner labeled"].input > input {
@@ -515,9 +506,9 @@
 .ui[class*="corner labeled"]:not([class*="left corner labeled"])[class*="left icon"].input > input {
   padding-right: 3.25em;
 }
-.ui[class*="left corner labeled"][class*="left icon"].input > .ui.dropdown,
-.ui[class*="left corner labeled"][class*="left icon"].input > textarea,
-.ui[class*="left corner labeled"][class*="left icon"].input > input {
+.ui.ui[class*="left corner labeled"][class*="left icon"].input > .ui.dropdown,
+.ui.ui[class*="left corner labeled"][class*="left icon"].input > textarea,
+.ui.ui[class*="left corner labeled"][class*="left icon"].input > input {
   padding-left: 4em;
 }
 .ui[class*="left corner labeled"].icon.input > i.icon {
@@ -558,11 +549,19 @@
 .ui[class*="corner labeled"]:not([class*="left corner labeled"]).input > .ui.dropdown > .dropdown.icon {
   padding-right: 2.5em;
 }
-.ui[class*="corner labeled"]:not([class*="left corner labeled"]).icon:not([class*="left icon"]).input > .ui.dropdown > .search {
+@supports selector(:has(.f)) {
+  .ui.icon.input:not([class*="left icon"]) > .ui.dropdown > .dropdown.icon {
+    padding-right: initial;
+  }
+  .ui.icon.input:not([class*="left icon"]):not(:has(.ui.dropdown~input)) > .ui.dropdown > .dropdown.icon {
+    padding-right: 2.5em;
+  }
+}
+.ui.ui[class*="corner labeled"]:not([class*="left corner labeled"]).icon:not([class*="left icon"]).input > .ui.dropdown > .search {
   padding-right: 7.25em;
 }
-.ui[class*="corner labeled"]:not([class*="left corner labeled"]).icon:not([class*="left icon"]).input > .ui.dropdown > .remove.icon,
-.ui[class*="corner labeled"]:not([class*="left corner labeled"]).icon:not([class*="left icon"]).input > .ui.dropdown > .dropdown.icon {
+.ui.ui[class*="corner labeled"]:not([class*="left corner labeled"]).icon:not([class*="left icon"]).input > .ui.dropdown > .remove.icon,
+.ui.ui[class*="corner labeled"]:not([class*="left corner labeled"]).icon:not([class*="left icon"]).input > .ui.dropdown > .dropdown.icon {
   padding-right: 4em;
 }
 .ui.icon.input > .ui.visible.dropdown ~ i.icon,
@@ -682,10 +681,9 @@
   border-left: 1px solid #C9BA9B;
 }
 
-/*--------------------
-          Action
-  ---------------------*/
-
+/* --------------------
+            Action
+    --------------------- */
 .ui.action.input > .button,
 .ui.action.input > .buttons {
   display: -webkit-box;
@@ -705,18 +703,20 @@
   margin: 0;
 }
 
-/* Input when ui Left*/
+/* Input when ui Left */
 .ui[class*="left action"].input > input {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
   border-left-color: transparent;
 }
-/* Input when ui Right*/
+
+/* Input when ui Right */
 .ui.action.input:not([class*="left action"]) > input {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
   border-right-color: transparent;
 }
+
 /* Button and Dropdown */
 .ui.action.input > .dropdown:first-child,
 .ui.action.input > .button:first-child,
@@ -742,20 +742,18 @@
   border-left-color: #85B7D9;
 }
 
-/*--------------------
-         Inverted
-  ---------------------*/
-
+/* --------------------
+           Inverted
+    --------------------- */
 
 /* Standard */
 .ui.inverted.input > input {
   border: none;
 }
 
-/*--------------------
-          Fluid
-  ---------------------*/
-
+/* --------------------
+            Fluid
+    --------------------- */
 .ui.fluid.input {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -765,10 +763,9 @@
   width: 0 !important;
 }
 
-/*--------------------
-          File
-  ---------------------*/
-
+/* --------------------
+            File
+    --------------------- */
 
 /* width hack for chrome/edge */
 .ui.file.input {
@@ -825,9 +822,21 @@
     padding: 0 !important;
   }
 }
+.ui.action.file.input input[type="file"]::-webkit-file-upload-button {
+  display: none;
+}
 .ui.action.file.input input[type="file"]::file-selector-button {
   display: none;
 }
+.ui.form .field input[type="file"]::-webkit-file-upload-button, .ui.file.input input[type="file"]::-webkit-file-upload-button {
+  border: none;
+  cursor: pointer;
+  padding: 0.67857143em 1em;
+  margin-right: 1em;
+  background: #e0e1e2;
+  font-weight: bold;
+  color: rgba(0, 0, 0, 0.6);
+}
 .ui.form .field input[type="file"]::file-selector-button,
 .ui.file.input input[type="file"]::file-selector-button {
   border: none;
@@ -838,6 +847,10 @@
   font-weight: bold;
   color: rgba(0, 0, 0, 0.6);
 }
+.ui.form .field input[type="file"]::-webkit-file-upload-button:hover, .ui.file.input input[type="file"]::-webkit-file-upload-button:hover {
+  background: #cacbcd;
+  color: rgba(0, 0, 0, 0.6);
+}
 .ui.form .field input[type="file"]::file-selector-button:hover,
 .ui.file.input input[type="file"]::file-selector-button:hover {
   background: #cacbcd;
@@ -1018,11 +1031,18 @@ input[type="file"].ui.primary.file.input::-ms-browse:hover,
 .ui.primary.file.input input[type="file"]::-ms-browse:hover {
   background: #1678c2;
 }
+input[type="file"].ui.primary.file.input::-webkit-file-upload-button, .ui.primary.file.input input[type="file"]::-webkit-file-upload-button {
+  background: #2185D0;
+  color: #FFFFFF;
+}
 input[type="file"].ui.primary.file.input::file-selector-button,
 .ui.primary.file.input input[type="file"]::file-selector-button {
   background: #2185D0;
   color: #FFFFFF;
 }
+input[type="file"].ui.primary.file.input::-webkit-file-upload-button:hover, .ui.primary.file.input input[type="file"]::-webkit-file-upload-button:hover {
+  background: #1678c2;
+}
 input[type="file"].ui.primary.file.input::file-selector-button:hover,
 .ui.primary.file.input input[type="file"]::file-selector-button:hover {
   background: #1678c2;
@@ -1045,11 +1065,18 @@ input[type="file"].ui.secondary.file.input::-ms-browse:hover,
 .ui.secondary.file.input input[type="file"]::-ms-browse:hover {
   background: #27292a;
 }
+input[type="file"].ui.secondary.file.input::-webkit-file-upload-button, .ui.secondary.file.input input[type="file"]::-webkit-file-upload-button {
+  background: #1B1C1D;
+  color: #FFFFFF;
+}
 input[type="file"].ui.secondary.file.input::file-selector-button,
 .ui.secondary.file.input input[type="file"]::file-selector-button {
   background: #1B1C1D;
   color: #FFFFFF;
 }
+input[type="file"].ui.secondary.file.input::-webkit-file-upload-button:hover, .ui.secondary.file.input input[type="file"]::-webkit-file-upload-button:hover {
+  background: #27292a;
+}
 input[type="file"].ui.secondary.file.input::file-selector-button:hover,
 .ui.secondary.file.input input[type="file"]::file-selector-button:hover {
   background: #27292a;
@@ -1072,11 +1099,18 @@ input[type="file"].ui.red.file.input::-ms-browse:hover,
 .ui.red.file.input input[type="file"]::-ms-browse:hover {
   background: #d01919;
 }
+input[type="file"].ui.red.file.input::-webkit-file-upload-button, .ui.red.file.input input[type="file"]::-webkit-file-upload-button {
+  background: #DB2828;
+  color: #FFFFFF;
+}
 input[type="file"].ui.red.file.input::file-selector-button,
 .ui.red.file.input input[type="file"]::file-selector-button {
   background: #DB2828;
   color: #FFFFFF;
 }
+input[type="file"].ui.red.file.input::-webkit-file-upload-button:hover, .ui.red.file.input input[type="file"]::-webkit-file-upload-button:hover {
+  background: #d01919;
+}
 input[type="file"].ui.red.file.input::file-selector-button:hover,
 .ui.red.file.input input[type="file"]::file-selector-button:hover {
   background: #d01919;
@@ -1099,11 +1133,18 @@ input[type="file"].ui.orange.file.input::-ms-browse:hover,
 .ui.orange.file.input input[type="file"]::-ms-browse:hover {
   background: #f26202;
 }
+input[type="file"].ui.orange.file.input::-webkit-file-upload-button, .ui.orange.file.input input[type="file"]::-webkit-file-upload-button {
+  background: #F2711C;
+  color: #FFFFFF;
+}
 input[type="file"].ui.orange.file.input::file-selector-button,
 .ui.orange.file.input input[type="file"]::file-selector-button {
   background: #F2711C;
   color: #FFFFFF;
 }
+input[type="file"].ui.orange.file.input::-webkit-file-upload-button:hover, .ui.orange.file.input input[type="file"]::-webkit-file-upload-button:hover {
+  background: #f26202;
+}
 input[type="file"].ui.orange.file.input::file-selector-button:hover,
 .ui.orange.file.input input[type="file"]::file-selector-button:hover {
   background: #f26202;
@@ -1126,11 +1167,18 @@ input[type="file"].ui.yellow.file.input::-ms-browse:hover,
 .ui.yellow.file.input input[type="file"]::-ms-browse:hover {
   background: #eaae00;
 }
+input[type="file"].ui.yellow.file.input::-webkit-file-upload-button, .ui.yellow.file.input input[type="file"]::-webkit-file-upload-button {
+  background: #FBBD08;
+  color: #FFFFFF;
+}
 input[type="file"].ui.yellow.file.input::file-selector-button,
 .ui.yellow.file.input input[type="file"]::file-selector-button {
   background: #FBBD08;
   color: #FFFFFF;
 }
+input[type="file"].ui.yellow.file.input::-webkit-file-upload-button:hover, .ui.yellow.file.input input[type="file"]::-webkit-file-upload-button:hover {
+  background: #eaae00;
+}
 input[type="file"].ui.yellow.file.input::file-selector-button:hover,
 .ui.yellow.file.input input[type="file"]::file-selector-button:hover {
   background: #eaae00;
@@ -1153,11 +1201,18 @@ input[type="file"].ui.olive.file.input::-ms-browse:hover,
 .ui.olive.file.input input[type="file"]::-ms-browse:hover {
   background: #a7bd0d;
 }
+input[type="file"].ui.olive.file.input::-webkit-file-upload-button, .ui.olive.file.input input[type="file"]::-webkit-file-upload-button {
+  background: #B5CC18;
+  color: #FFFFFF;
+}
 input[type="file"].ui.olive.file.input::file-selector-button,
 .ui.olive.file.input input[type="file"]::file-selector-button {
   background: #B5CC18;
   color: #FFFFFF;
 }
+input[type="file"].ui.olive.file.input::-webkit-file-upload-button:hover, .ui.olive.file.input input[type="file"]::-webkit-file-upload-button:hover {
+  background: #a7bd0d;
+}
 input[type="file"].ui.olive.file.input::file-selector-button:hover,
 .ui.olive.file.input input[type="file"]::file-selector-button:hover {
   background: #a7bd0d;
@@ -1180,11 +1235,18 @@ input[type="file"].ui.green.file.input::-ms-browse:hover,
 .ui.green.file.input input[type="file"]::-ms-browse:hover {
   background: #16ab39;
 }
+input[type="file"].ui.green.file.input::-webkit-file-upload-button, .ui.green.file.input input[type="file"]::-webkit-file-upload-button {
+  background: #21BA45;
+  color: #FFFFFF;
+}
 input[type="file"].ui.green.file.input::file-selector-button,
 .ui.green.file.input input[type="file"]::file-selector-button {
   background: #21BA45;
   color: #FFFFFF;
 }
+input[type="file"].ui.green.file.input::-webkit-file-upload-button:hover, .ui.green.file.input input[type="file"]::-webkit-file-upload-button:hover {
+  background: #16ab39;
+}
 input[type="file"].ui.green.file.input::file-selector-button:hover,
 .ui.green.file.input input[type="file"]::file-selector-button:hover {
   background: #16ab39;
@@ -1207,11 +1269,18 @@ input[type="file"].ui.teal.file.input::-ms-browse:hover,
 .ui.teal.file.input input[type="file"]::-ms-browse:hover {
   background: #009c95;
 }
+input[type="file"].ui.teal.file.input::-webkit-file-upload-button, .ui.teal.file.input input[type="file"]::-webkit-file-upload-button {
+  background: #00B5AD;
+  color: #FFFFFF;
+}
 input[type="file"].ui.teal.file.input::file-selector-button,
 .ui.teal.file.input input[type="file"]::file-selector-button {
   background: #00B5AD;
   color: #FFFFFF;
 }
+input[type="file"].ui.teal.file.input::-webkit-file-upload-button:hover, .ui.teal.file.input input[type="file"]::-webkit-file-upload-button:hover {
+  background: #009c95;
+}
 input[type="file"].ui.teal.file.input::file-selector-button:hover,
 .ui.teal.file.input input[type="file"]::file-selector-button:hover {
   background: #009c95;
@@ -1234,11 +1303,18 @@ input[type="file"].ui.blue.file.input::-ms-browse:hover,
 .ui.blue.file.input input[type="file"]::-ms-browse:hover {
   background: #1678c2;
 }
+input[type="file"].ui.blue.file.input::-webkit-file-upload-button, .ui.blue.file.input input[type="file"]::-webkit-file-upload-button {
+  background: #2185D0;
+  color: #FFFFFF;
+}
 input[type="file"].ui.blue.file.input::file-selector-button,
 .ui.blue.file.input input[type="file"]::file-selector-button {
   background: #2185D0;
   color: #FFFFFF;
 }
+input[type="file"].ui.blue.file.input::-webkit-file-upload-button:hover, .ui.blue.file.input input[type="file"]::-webkit-file-upload-button:hover {
+  background: #1678c2;
+}
 input[type="file"].ui.blue.file.input::file-selector-button:hover,
 .ui.blue.file.input input[type="file"]::file-selector-button:hover {
   background: #1678c2;
@@ -1261,11 +1337,18 @@ input[type="file"].ui.violet.file.input::-ms-browse:hover,
 .ui.violet.file.input input[type="file"]::-ms-browse:hover {
   background: #5829bb;
 }
+input[type="file"].ui.violet.file.input::-webkit-file-upload-button, .ui.violet.file.input input[type="file"]::-webkit-file-upload-button {
+  background: #6435C9;
+  color: #FFFFFF;
+}
 input[type="file"].ui.violet.file.input::file-selector-button,
 .ui.violet.file.input input[type="file"]::file-selector-button {
   background: #6435C9;
   color: #FFFFFF;
 }
+input[type="file"].ui.violet.file.input::-webkit-file-upload-button:hover, .ui.violet.file.input input[type="file"]::-webkit-file-upload-button:hover {
+  background: #5829bb;
+}
 input[type="file"].ui.violet.file.input::file-selector-button:hover,
 .ui.violet.file.input input[type="file"]::file-selector-button:hover {
   background: #5829bb;
@@ -1288,11 +1371,18 @@ input[type="file"].ui.purple.file.input::-ms-browse:hover,
 .ui.purple.file.input input[type="file"]::-ms-browse:hover {
   background: #9627ba;
 }
+input[type="file"].ui.purple.file.input::-webkit-file-upload-button, .ui.purple.file.input input[type="file"]::-webkit-file-upload-button {
+  background: #A333C8;
+  color: #FFFFFF;
+}
 input[type="file"].ui.purple.file.input::file-selector-button,
 .ui.purple.file.input input[type="file"]::file-selector-button {
   background: #A333C8;
   color: #FFFFFF;
 }
+input[type="file"].ui.purple.file.input::-webkit-file-upload-button:hover, .ui.purple.file.input input[type="file"]::-webkit-file-upload-button:hover {
+  background: #9627ba;
+}
 input[type="file"].ui.purple.file.input::file-selector-button:hover,
 .ui.purple.file.input input[type="file"]::file-selector-button:hover {
   background: #9627ba;
@@ -1315,11 +1405,18 @@ input[type="file"].ui.pink.file.input::-ms-browse:hover,
 .ui.pink.file.input input[type="file"]::-ms-browse:hover {
   background: #e61a8d;
 }
+input[type="file"].ui.pink.file.input::-webkit-file-upload-button, .ui.pink.file.input input[type="file"]::-webkit-file-upload-button {
+  background: #E03997;
+  color: #FFFFFF;
+}
 input[type="file"].ui.pink.file.input::file-selector-button,
 .ui.pink.file.input input[type="file"]::file-selector-button {
   background: #E03997;
   color: #FFFFFF;
 }
+input[type="file"].ui.pink.file.input::-webkit-file-upload-button:hover, .ui.pink.file.input input[type="file"]::-webkit-file-upload-button:hover {
+  background: #e61a8d;
+}
 input[type="file"].ui.pink.file.input::file-selector-button:hover,
 .ui.pink.file.input input[type="file"]::file-selector-button:hover {
   background: #e61a8d;
@@ -1342,11 +1439,18 @@ input[type="file"].ui.brown.file.input::-ms-browse:hover,
 .ui.brown.file.input input[type="file"]::-ms-browse:hover {
   background: #975b33;
 }
+input[type="file"].ui.brown.file.input::-webkit-file-upload-button, .ui.brown.file.input input[type="file"]::-webkit-file-upload-button {
+  background: #A5673F;
+  color: #FFFFFF;
+}
 input[type="file"].ui.brown.file.input::file-selector-button,
 .ui.brown.file.input input[type="file"]::file-selector-button {
   background: #A5673F;
   color: #FFFFFF;
 }
+input[type="file"].ui.brown.file.input::-webkit-file-upload-button:hover, .ui.brown.file.input input[type="file"]::-webkit-file-upload-button:hover {
+  background: #975b33;
+}
 input[type="file"].ui.brown.file.input::file-selector-button:hover,
 .ui.brown.file.input input[type="file"]::file-selector-button:hover {
   background: #975b33;
@@ -1369,11 +1473,18 @@ input[type="file"].ui.grey.file.input::-ms-browse:hover,
 .ui.grey.file.input input[type="file"]::-ms-browse:hover {
   background: #838383;
 }
+input[type="file"].ui.grey.file.input::-webkit-file-upload-button, .ui.grey.file.input input[type="file"]::-webkit-file-upload-button {
+  background: #767676;
+  color: #FFFFFF;
+}
 input[type="file"].ui.grey.file.input::file-selector-button,
 .ui.grey.file.input input[type="file"]::file-selector-button {
   background: #767676;
   color: #FFFFFF;
 }
+input[type="file"].ui.grey.file.input::-webkit-file-upload-button:hover, .ui.grey.file.input input[type="file"]::-webkit-file-upload-button:hover {
+  background: #838383;
+}
 input[type="file"].ui.grey.file.input::file-selector-button:hover,
 .ui.grey.file.input input[type="file"]::file-selector-button:hover {
   background: #838383;
@@ -1396,20 +1507,26 @@ input[type="file"].ui.black.file.input::-ms-browse:hover,
 .ui.black.file.input input[type="file"]::-ms-browse:hover {
   background: #27292a;
 }
+input[type="file"].ui.black.file.input::-webkit-file-upload-button, .ui.black.file.input input[type="file"]::-webkit-file-upload-button {
+  background: #1B1C1D;
+  color: #FFFFFF;
+}
 input[type="file"].ui.black.file.input::file-selector-button,
 .ui.black.file.input input[type="file"]::file-selector-button {
   background: #1B1C1D;
   color: #FFFFFF;
 }
+input[type="file"].ui.black.file.input::-webkit-file-upload-button:hover, .ui.black.file.input input[type="file"]::-webkit-file-upload-button:hover {
+  background: #27292a;
+}
 input[type="file"].ui.black.file.input::file-selector-button:hover,
 .ui.black.file.input input[type="file"]::file-selector-button:hover {
   background: #27292a;
 }
 
-/*--------------------
+/* --------------------
         Size
----------------------*/
-
+--------------------- */
 .ui.input {
   font-size: 1em;
 }