assets/stylesheets/semantic_ui/definitions/collections/form.less in less-rails-semantic_ui-2.0.7.0 vs assets/stylesheets/semantic_ui/definitions/collections/form.less in less-rails-semantic_ui-2.1.4.0
- old
+ new
@@ -97,16 +97,21 @@
.ui.form input[type="password"],
.ui.form input[type="search"],
.ui.form input[type="tel"],
.ui.form input[type="time"],
.ui.form input[type="text"],
-.ui.form input[type="url"],
-.ui.form .ui.input {
- width: 100%;
+.ui.form input[type="url"] {
+ width: @inputWidth;
vertical-align: top;
}
+/* Set max height on unusual input */
+.ui.form ::-webkit-datetime-edit,
+.ui.form ::-webkit-inner-spin-button {
+ height: @inputLineHeight;
+}
+
.ui.form input:not([type]),
.ui.form input[type="date"],
.ui.form input[type="datetime-local"],
.ui.form input[type="email"],
.ui.form input[type="number"],
@@ -132,15 +137,10 @@
border-radius: @inputBorderRadius;
box-shadow: @inputBoxShadow;
transition: @inputTransition;
}
-/* Collapse Flex */
-.ui.form .ui.input > input {
- width: 0px !important;
-}
-
/* Text Area */
.ui.form textarea {
margin: 0em;
-webkit-appearance: none;
tap-highlight-color: rgba(255, 255, 255, 0);
@@ -197,25 +197,67 @@
/*--------------------
Dropdown
---------------------*/
+/* Block */
.ui.form .field > .selection.dropdown {
width: 100%;
}
.ui.form .field > .selection.dropdown > .dropdown.icon {
float: right;
}
+/* Inline */
+.ui.form .inline.fields .field > .selection.dropdown,
.ui.form .inline.field > .selection.dropdown {
width: auto;
}
+.ui.form .inline.fields .field > .selection.dropdown > .dropdown.icon,
.ui.form .inline.field > .selection.dropdown > .dropdown.icon {
float: none;
}
+/*--------------------
+ UI Input
+---------------------*/
+/* Block */
+.ui.form .field .ui.input,
+.ui.form .fields .field .ui.input,
+.ui.form .wide.field .ui.input {
+ width: 100%;
+}
+
+/* Inline */
+.ui.form .inline.fields .field:not(.wide) .ui.input,
+.ui.form .inline.field:not(.wide) .ui.input {
+ width: auto;
+ vertical-align: middle;
+}
+
+/* Auto Input */
+.ui.form .fields .field .ui.input input,
+.ui.form .field .ui.input input {
+ width: auto;
+}
+
+/* Full Width Input */
+.ui.form .ten.fields .ui.input input,
+.ui.form .nine.fields .ui.input input,
+.ui.form .eight.fields .ui.input input,
+.ui.form .seven.fields .ui.input input,
+.ui.form .six.fields .ui.input input,
+.ui.form .five.fields .ui.input input,
+.ui.form .four.fields .ui.input input,
+.ui.form .three.fields .ui.input input,
+.ui.form .two.fields .ui.input input,
+.ui.form .wide.field .ui.input input {
+ flex: 1 0 auto;
+ width: 0px;
+}
+
/*--------------------
Dividers
---------------------*/
.ui.form .divider {
@@ -242,17 +284,23 @@
/*--------------------
Validation Prompt
---------------------*/
.ui.form .field .prompt.label {
- white-space: nowrap;
+ white-space: normal;
+ background: @promptBackground !important;
+ border: @promptBorder !important;
+ color: @promptTextColor !important;
}
+.ui.form .inline.fields .field .prompt,
.ui.form .inline.field .prompt {
- margin: @inlineValidationMargin;
+ vertical-align: top;
+ margin: @inlinePromptMargin;
}
+.ui.form .inline.fields .field .prompt:before,
.ui.form .inline.field .prompt:before {
- margin-top: @inlineValidationArrowOffset;
+ border-width: 0px 0px @inlinePromptBorderWidth @inlinePromptBorderWidth;
bottom: auto;
right: auto;
top: 50%;
left: 0em;
}
@@ -366,38 +414,38 @@
/*--------------------
Success
---------------------*/
/* On Form */
-.ui.form.success .success.message {
+.ui.form.success .success.message:not(:empty) {
display: block;
}
-.ui.form.success .icon.success.message {
+.ui.form.success .icon.success.message:not(:empty) {
display: flex;
}
/*--------------------
- Error
+ Warning
---------------------*/
/* On Form */
-.ui.form.warning .warning.message {
+.ui.form.warning .warning.message:not(:empty) {
display: block;
}
-.ui.form.warning .icon.warning.message {
+.ui.form.warning .icon.warning.message:not(:empty) {
display: flex;
}
/*--------------------
- Warning
+ Error
---------------------*/
/* On Form */
-.ui.form.error .error.message {
+.ui.form.error .error.message:not(:empty) {
display: block;
}
-.ui.form.error .icon.error.message {
+.ui.form.error .icon.error.message:not(:empty) {
display: flex;
}
/* On Field(s) */
.ui.form .fields.error .field label,
@@ -549,19 +597,21 @@
---------------------*/
.ui.form .disabled.fields .field,
.ui.form .disabled.field,
.ui.form .field :disabled {
+ pointer-events: none;
opacity: @disabledOpacity;
}
.ui.form .field.disabled label {
opacity: @disabledLabelOpacity;
}
.ui.form .field.disabled :disabled {
opacity: 1;
}
+
/*--------------
Loading
---------------*/
.ui.loading.form {
@@ -666,10 +716,29 @@
.ui.inverted.form .ui.checkbox label,
.ui.inverted.form .ui.checkbox .box {
color: @invertedLabelColor;
}
+/* Inverted Field */
+.ui.inverted.form input:not([type]),
+.ui.inverted.form input[type="date"],
+.ui.inverted.form input[type="datetime-local"],
+.ui.inverted.form input[type="email"],
+.ui.inverted.form input[type="number"],
+.ui.inverted.form input[type="password"],
+.ui.inverted.form input[type="search"],
+.ui.inverted.form input[type="tel"],
+.ui.inverted.form input[type="time"],
+.ui.inverted.form input[type="text"],
+.ui.inverted.form input[type="url"] {
+ background: @invertedInputBackground;
+ border-color: @invertedInputBorderColor;
+ color: @invertedInputColor;
+ box-shadow: @invertedInputBoxShadow;
+}
+
+
/*--------------------
Field Groups
---------------------*/
/* Grouped Vertically */
@@ -922,25 +991,22 @@
}
/* Inline Input */
.ui.form .inline.fields .field > input,
.ui.form .inline.fields .field > select,
-.ui.form .inline.fields .field > .ui.input,
.ui.form .inline.field > input,
-.ui.form .inline.field > select,
-.ui.form .inline.field > .ui.input {
+.ui.form .inline.field > select {
display: inline-block;
width: auto;
margin-top: 0em;
margin-bottom: 0em;
vertical-align: middle;
font-size: @inlineInputSize;
}
-
/* Label */
.ui.form .inline.fields .field > :first-child,
.ui.form .inline.field > :first-child {
margin: 0em @inlineLabelDistance 0em 0em;
}
@@ -953,11 +1019,10 @@
.ui.form .inline.fields .wide.field {
display: flex;
align-items: center;
}
.ui.form .inline.fields .wide.field > input,
-.ui.form .inline.fields .wide.field > select,
-.ui.form .inline.fields .wide.field > .ui.input {
+.ui.form .inline.fields .wide.field > select {
width: 100%;
}
/*--------------------