_input.scss in semantic-ui-sass-2.0.4.0

- old
+ new

@@ -1,11 +1,11 @@
 /*!
- * # Semantic UI 1.12.3 - Input
+ * # Semantic UI 2.0.4 - Input
  * http://github.com/semantic-org/semantic-ui/
  *
  *
- * Copyright 2014 Contributors
+ * Copyright 2015 Contributors
  * Released under the MIT license
  * http://opensource.org/licenses/MIT
  *
  */
 
@@ -23,31 +23,31 @@
   position: relative;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  color: rgba(0, 0, 0, 0.8);
+  color: rgba(0, 0, 0, 0.87);
 }
 .ui.input input {
   margin: 0em;
   max-width: 100%;
-  -webkit-box-flex: 0;
-  -webkit-flex: 0 1 auto;
-      -ms-flex: 0 1 auto;
-          flex: 0 1 auto;
+  -webkit-box-flex: 1;
+  -webkit-flex: 1 0 auto;
+      -ms-flex: 1 0 auto;
+          flex: 1 0 auto;
   outline: none;
   -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
   text-align: left;
   line-height: 1.2142em;
   font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
-  padding: 0.67861em 1em;
+  padding: 0.67861429em 1em;
   background: #ffffff;
-  border: 1px solid rgba(0, 0, 0, 0.15);
-  color: rgba(0, 0, 0, 0.8);
-  border-radius: 0.2857rem;
-  -webkit-transition: background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
-          transition: background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+  border: 1px solid rgba(34, 36, 38, 0.15);
+  color: rgba(0, 0, 0, 0.87);
+  border-radius: 0.28571429rem;
+  -webkit-transition: background-color 0.1s ease, box-shadow 0.1s ease, border-color 0.1s ease;
+          transition: background-color 0.1s ease, box-shadow 0.1s ease, border-color 0.1s ease;
   box-shadow: none;
 }
 
 /*--------------------
       Placeholder
@@ -77,11 +77,11 @@
 
 .ui.input input:active,
 .ui.input.down input {
   border-color: rgba(0, 0, 0, 0.3);
   background: #fafafa;
-  color: rgba(0, 0, 0, 0.8);
+  color: rgba(0, 0, 0, 0.87);
   box-shadow: none;
 }
 
 /*--------------------
        Loading
@@ -90,30 +90,30 @@
 .ui.loading.loading.input > i.icon:before {
   position: absolute;
   content: '';
   top: 50%;
   left: 50%;
-  margin: -0.64285em 0em 0em -0.64285em;
-  width: 1.2857em;
-  height: 1.2857em;
+  margin: -0.64285714em 0em 0em -0.64285714em;
+  width: 1.28571429em;
+  height: 1.28571429em;
   border-radius: 500rem;
   border: 0.2em solid rgba(0, 0, 0, 0.1);
 }
 .ui.loading.loading.input > i.icon:after {
   position: absolute;
   content: '';
   top: 50%;
   left: 50%;
-  margin: -0.64285em 0em 0em -0.64285em;
-  width: 1.2857em;
-  height: 1.2857em;
+  margin: -0.64285714em 0em 0em -0.64285714em;
+  width: 1.28571429em;
+  height: 1.28571429em;
   -webkit-animation: button-spin 0.6s linear;
           animation: button-spin 0.6s linear;
   -webkit-animation-iteration-count: infinite;
           animation-iteration-count: infinite;
   border-radius: 500rem;
-  border-color: #aaaaaa transparent transparent;
+  border-color: #767676 transparent transparent;
   border-style: solid;
   border-width: 0.2em;
   box-shadow: 0px 0px 0px 1px transparent;
 }
 
@@ -121,36 +121,36 @@
         Focus
 ---------------------*/
 
 .ui.input.focus input,
 .ui.input input:focus {
-  border-color: rgba(39, 41, 43, 0.3);
+  border-color: rgba(34, 36, 38, 0.35);
   background: #ffffff;
   color: rgba(0, 0, 0, 0.8);
   box-shadow: none;
 }
 .ui.input.focus input::-webkit-input-placeholder,
 .ui.input input:focus input::-webkit-input-placeholder {
-  color: rgba(0, 0, 0, 0.8);
+  color: rgba(0, 0, 0, 0.87);
 }
 .ui.input.focus input::-moz-placeholder,
 .ui.input input:focus input::-moz-placeholder {
-  color: rgba(0, 0, 0, 0.8);
+  color: rgba(0, 0, 0, 0.87);
 }
 .ui.input.focus input::-ms-input-placeholder,
 .ui.input input:focus input::-ms-input-placeholder {
-  color: rgba(0, 0, 0, 0.8);
+  color: rgba(0, 0, 0, 0.87);
 }
 
 /*--------------------
         Error
 ---------------------*/
 
 .ui.input.error input {
-  background-color: #fff0f0;
-  border-color: #dbb1b1;
-  color: #d95c5c;
+  background-color: #fff6f6;
+  border-color: #e0b4b4;
+  color: #db2828;
   box-shadow: none;
 }
 
 /* Error Placeholder */
 .ui.input.error input ::-webkit-input-placeholder {
@@ -191,11 +191,11 @@
   box-shadow: none !important;
 }
 
 /* Transparent Icon */
 .ui.transparent.icon.input > i.icon {
-  width: 1.25em;
+  width: 1.1em;
 }
 .ui.transparent.icon.input > input {
   padding-left: 0em !important;
   padding-right: 2em !important;
 }
@@ -226,23 +226,27 @@
 ---------------------*/
 
 .ui.icon.input > i.icon {
   cursor: default;
   position: absolute;
+  line-height: 1;
   text-align: center;
   top: 0px;
   right: 0px;
   margin: 0em;
   height: 100%;
-  width: 2.82142em;
+  width: 2.67142857em;
   opacity: 0.5;
-  border-radius: 0em 0.2857rem 0.2857rem 0em;
+  border-radius: 0em 0.28571429rem 0.28571429rem 0em;
   -webkit-transition: opacity 0.3s ease;
           transition: opacity 0.3s ease;
 }
+.ui.icon.input > i.icon:not(.link) {
+  pointer-events: none;
+}
 .ui.icon.input input {
-  padding-right: 2.82142em !important;
+  padding-right: 2.67142857em !important;
 }
 .ui.icon.input > i.icon:before,
 .ui.icon.input > i.icon:after {
   left: 0;
   position: absolute;
@@ -261,18 +265,18 @@
 
 /* Left Icon Input */
 .ui[class*="left icon"].input > i.icon {
   right: auto;
   left: 1px;
-  border-radius: 0.2857rem 0em 0em 0.2857rem;
+  border-radius: 0.28571429rem 0em 0em 0.28571429rem;
 }
 .ui[class*="left icon"].input > i.circular.icon {
   right: auto;
   left: 0.5em;
 }
 .ui[class*="left icon"].input > input {
-  padding-left: 2.82142em !important;
+  padding-left: 2.67142857em !important;
   padding-right: 1em !important;
 }
 
 /* Focus */
 .ui.icon.input > input:focus ~ i.icon {
@@ -289,29 +293,29 @@
   -webkit-box-flex: 0;
   -webkit-flex: 0 0 auto;
       -ms-flex: 0 0 auto;
           flex: 0 0 auto;
   margin: 0;
-  font-size: 1rem;
+  font-size: 1em;
 }
 .ui.labeled.input > .label:not(.corner) {
-  padding-top: 0.78571em;
-  padding-bottom: 0.78571em;
+  padding-top: 0.78571429em;
+  padding-bottom: 0.78571429em;
 }
 
-/* Label on Left */
+/* Regular Label on Left */
 .ui.labeled.input:not([class*="corner labeled"]):not([class*="right labeled"]) > input {
   border-left: none;
   border-top-left-radius: 0px;
   border-bottom-left-radius: 0px;
 }
 .ui.labeled.input:not([class*="corner labeled"]):not([class*="right labeled"]) > .label {
   border-top-right-radius: 0px;
   border-bottom-right-radius: 0px;
 }
 
-/* Label on Right */
+/* Regular Label on Right */
 .ui[class*="right labeled"].input > input {
   border-right: none;
   border-top-right-radius: 0px !important;
   border-bottom-right-radius: 0px !important;
 }
@@ -322,25 +326,46 @@
 
 /* Corner Label */
 .ui.labeled.input .corner.label {
   top: 1px;
   right: 1px;
-  font-size: 0.75em;
-  border-radius: 0em 0.2857rem 0em 0em;
+  font-size: 0.64285714em;
+  border-radius: 0em 0.28571429rem 0em 0em;
 }
-.ui.labeled.input input {
-  padding-right: 2.5em !important;
-}
 
 /* Spacing with corner label */
+.ui[class*="corner labeled"]:not(.left).labeled.input input {
+  padding-right: 2.5em !important;
+}
 .ui[class*="corner labeled"].icon.input:not(.left) > input {
   padding-right: 3.25em !important;
 }
 .ui[class*="corner labeled"].icon.input:not(.left) > .icon {
   margin-right: 1.25em;
 }
 
+/* Left Labeled */
+.ui[class*="corner labeled"].left.labeled.input input {
+  padding-left: 2.5em !important;
+}
+.ui[class*="corner labeled"].icon.input.left > input {
+  padding-left: 3.25em !important;
+}
+.ui[class*="corner labeled"].icon.input.left > .icon {
+  margin-left: 1.25em;
+}
+
+/* Corner Label Position  */
+.ui.input > .ui.corner.label {
+  top: 1px;
+  right: 1px;
+}
+.ui.input > .ui.left.corner.label {
+  right: auto;
+  left: 1px;
+}
+
 /*--------------------
         Action
 ---------------------*/
 
 .ui.action.input > .button,
@@ -358,37 +383,47 @@
       -ms-flex: 0 0 auto;
           flex: 0 0 auto;
 }
 .ui.action.input > .button,
 .ui.action.input > .buttons > .button {
-  padding-top: 0.78571em;
-  padding-bottom: 0.78571em;
+  padding-top: 0.78571429em;
+  padding-bottom: 0.78571429em;
   margin: 0;
 }
 
 /* Button on Right */
 .ui.action.input:not([class*="left action"]) > input {
   border-right: none;
   border-top-right-radius: 0px !important;
   border-bottom-right-radius: 0px !important;
 }
+.ui.action.input:not([class*="left action"]) > .dropdown,
 .ui.action.input:not([class*="left action"]) > .button,
 .ui.action.input:not([class*="left action"]) > .buttons > .button {
-  border-top-left-radius: 0px;
-  border-bottom-left-radius: 0px;
+  border-radius: 0px;
 }
+.ui.action.input:not([class*="left action"]) > .dropdown:last-child,
+.ui.action.input:not([class*="left action"]) > .button:last-child,
+.ui.action.input:not([class*="left action"]) > .buttons:last-child > .button {
+  border-radius: 0px 0.28571429rem 0.28571429rem 0px;
+}
 
 /* Button on Left */
+.ui[class*="left action"].input > .dropdown,
 .ui[class*="left action"].input > .button,
 .ui[class*="left action"].input > .buttons > .button {
-  border-top-right-radius: 0px;
-  border-bottom-right-radius: 0px;
+  border-radius: 0px;
 }
+.ui[class*="left action"].input > .dropdown:first-child,
+.ui[class*="left action"].input > .button:first-child,
+.ui[class*="left action"].input > .buttons:first-child > .button {
+  border-radius: 0.28571429rem 0px 0px 0.28571429rem;
+}
 .ui[class*="left action"].input > input {
   border-left: none;
-  border-top-left-radius: 0px;
-  border-bottom-left-radius: 0px;
+  border-top-left-radius: 0px !important;
+  border-bottom-left-radius: 0px !important;
 }
 
 /*--------------------
        Inverted
 ---------------------*/
@@ -408,10 +443,10 @@
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 .ui.fluid.input > input {
-  width: 100% !important;
+  width: 0px !important;
 }
 
 /*--------------------
         Size
 ---------------------*/