app/assets/stylesheets/semantic-ui/elements/_input.scss in semantic-ui-sass-2.2.14 vs app/assets/stylesheets/semantic-ui/elements/_input.scss in semantic-ui-sass-2.3.0.0
- old
+ new
@@ -1,7 +1,7 @@
/*!
- * # Semantic UI 2.2.14 - Input
+ * # Semantic UI 2.3.0 - Input
* http://github.com/semantic-org/semantic-ui/
*
*
* Released under the MIT license
* http://opensource.org/licenses/MIT
@@ -25,11 +25,11 @@
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
color: rgba(0, 0, 0, 0.87);
}
-.ui.input input {
+.ui.input > input {
margin: 0em;
max-width: 100%;
-webkit-box-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
@@ -55,17 +55,17 @@
Placeholder
---------------------*/
/* browsers require these rules separate */
-.ui.input input::-webkit-input-placeholder {
+.ui.input > input::-webkit-input-placeholder {
color: rgba(191, 191, 191, 0.87);
}
-.ui.input input::-moz-placeholder {
+.ui.input > input::-moz-placeholder {
color: rgba(191, 191, 191, 0.87);
}
-.ui.input input:-ms-input-placeholder {
+.ui.input > input:-ms-input-placeholder {
color: rgba(191, 191, 191, 0.87);
}
/*******************************
@@ -79,20 +79,20 @@
.ui.disabled.input,
.ui.input:not(.disabled) input[disabled] {
opacity: 0.45;
}
-.ui.disabled.input input,
+.ui.disabled.input > input,
.ui.input:not(.disabled) input[disabled] {
pointer-events: none;
}
/*--------------------
Active
---------------------*/
-.ui.input input:active,
+.ui.input > input:active,
.ui.input.down input {
border-color: rgba(0, 0, 0, 0.3);
background: #FAFAFA;
color: rgba(0, 0, 0, 0.87);
-webkit-box-shadow: none;
@@ -136,62 +136,62 @@
/*--------------------
Focus
---------------------*/
-.ui.input.focus input,
-.ui.input input:focus {
+.ui.input.focus > input,
+.ui.input > input:focus {
border-color: #85B7D9;
background: #FFFFFF;
color: rgba(0, 0, 0, 0.8);
-webkit-box-shadow: none;
box-shadow: none;
}
-.ui.input.focus input::-webkit-input-placeholder,
-.ui.input input:focus::-webkit-input-placeholder {
+.ui.input.focus > input::-webkit-input-placeholder,
+.ui.input > input:focus::-webkit-input-placeholder {
color: rgba(115, 115, 115, 0.87);
}
-.ui.input.focus input::-moz-placeholder,
-.ui.input input:focus::-moz-placeholder {
+.ui.input.focus > input::-moz-placeholder,
+.ui.input > input:focus::-moz-placeholder {
color: rgba(115, 115, 115, 0.87);
}
-.ui.input.focus input:-ms-input-placeholder,
-.ui.input input:focus:-ms-input-placeholder {
+.ui.input.focus > input:-ms-input-placeholder,
+.ui.input > input:focus:-ms-input-placeholder {
color: rgba(115, 115, 115, 0.87);
}
/*--------------------
Error
---------------------*/
-.ui.input.error input {
+.ui.input.error > input {
background-color: #FFF6F6;
border-color: #E0B4B4;
color: #9F3A38;
-webkit-box-shadow: none;
box-shadow: none;
}
/* Error Placeholder */
-.ui.input.error input::-webkit-input-placeholder {
+.ui.input.error > input::-webkit-input-placeholder {
color: #e7bdbc;
}
-.ui.input.error input::-moz-placeholder {
+.ui.input.error > input::-moz-placeholder {
color: #e7bdbc;
}
-.ui.input.error input:-ms-input-placeholder {
+.ui.input.error > input:-ms-input-placeholder {
color: #e7bdbc !important;
}
/* Focused Error Placeholder */
-.ui.input.error input:focus::-webkit-input-placeholder {
+.ui.input.error > input:focus::-webkit-input-placeholder {
color: #da9796;
}
-.ui.input.error input:focus::-moz-placeholder {
+.ui.input.error > input:focus::-moz-placeholder {
color: #da9796;
}
-.ui.input.error input:focus:-ms-input-placeholder {
+.ui.input.error > input:focus:-ms-input-placeholder {
color: #da9796 !important;
}
/*******************************
@@ -201,11 +201,11 @@
/*--------------------
Transparent
---------------------*/
-.ui.transparent.input input {
+.ui.transparent.input > input {
border-color: transparent !important;
background-color: transparent !important;
padding: 0em !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
@@ -227,20 +227,20 @@
/* Transparent Inverted */
.ui.transparent.inverted.input {
color: #FFFFFF;
}
-.ui.transparent.inverted.input input {
+.ui.transparent.inverted.input > input {
color: inherit;
}
-.ui.transparent.inverted.input input::-webkit-input-placeholder {
+.ui.transparent.inverted.input > input::-webkit-input-placeholder {
color: rgba(255, 255, 255, 0.5);
}
-.ui.transparent.inverted.input input::-moz-placeholder {
+.ui.transparent.inverted.input > input::-moz-placeholder {
color: rgba(255, 255, 255, 0.5);
}
-.ui.transparent.inverted.input input:-ms-input-placeholder {
+.ui.transparent.inverted.input > input:-ms-input-placeholder {
color: rgba(255, 255, 255, 0.5);
}
/*--------------------
Icon
@@ -262,11 +262,11 @@
transition: opacity 0.3s ease;
}
.ui.icon.input > i.icon:not(.link) {
pointer-events: none;
}
-.ui.icon.input input {
+.ui.icon.input > input {
padding-right: 2.67142857em !important;
}
.ui.icon.input > i.icon:before,
.ui.icon.input > i.icon:after {
left: 0;
@@ -335,20 +335,20 @@
.ui.labeled.input:not([class*="corner labeled"]) .label:first-child + input:focus {
border-left-color: #85B7D9;
}
/* Regular Label on Right */
-.ui[class*="right labeled"].input input {
+.ui[class*="right labeled"].input > input {
border-top-right-radius: 0px !important;
border-bottom-right-radius: 0px !important;
border-right-color: transparent !important;
}
-.ui[class*="right labeled"].input input + .label {
+.ui[class*="right labeled"].input > input + .label {
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}
-.ui[class*="right labeled"].input input:focus {
+.ui[class*="right labeled"].input > input:focus {
border-right-color: #85B7D9 !important;
}
/* Corner Label */
.ui.labeled.input .corner.label {
@@ -357,22 +357,22 @@
font-size: 0.64285714em;
border-radius: 0em 0.28571429rem 0em 0em;
}
/* Spacing with corner label */
-.ui[class*="corner labeled"]:not([class*="left corner labeled"]).labeled.input input {
+.ui[class*="corner labeled"]:not([class*="left corner labeled"]).labeled.input > input {
padding-right: 2.5em !important;
}
.ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > input {
padding-right: 3.25em !important;
}
.ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > .icon {
margin-right: 1.25em;
}
/* Left Labeled */
-.ui[class*="left corner labeled"].labeled.input input {
+.ui[class*="left corner labeled"].labeled.input > input {
padding-left: 2.5em !important;
}
.ui[class*="left corner labeled"].icon.input > input {
padding-left: 3.25em !important;
}
@@ -429,11 +429,11 @@
.ui.action.input:not([class*="left action"]) > .buttons:last-child > .button {
border-radius: 0px 0.28571429rem 0.28571429rem 0px;
}
/* Input Focus */
-.ui.action.input:not([class*="left action"]) input:focus {
+.ui.action.input:not([class*="left action"]) > input:focus {
border-right-color: #85B7D9 !important;
}
/* Button on Left */
.ui[class*="left action"].input > input {
@@ -461,10 +461,10 @@
Inverted
---------------------*/
/* Standard */
-.ui.inverted.input input {
+.ui.inverted.input > input {
border: none;
}
/*--------------------
Fluid