Nemcio/NodeBB
1
0
Fork 0
mirror of https://github.com/NodeBB/NodeBB.git synced 2025-11-15 10:16:12 +01:00
Code Issues Packages Projects Releases Wiki Activity

closes #3932

Browse Source
This commit is contained in:
Julian Lam
2015-12-16 09:41:46 -05:00
parent 55b75ba502
commit e602d2ad4d
43 changed files with 513 additions and 248 deletions
Download Patch File Download Diff File Expand all files Collapse all files

129
public/less/admin/bootstrap/forms.less
View File

@@ -56,7 +56,6 @@ input[type="checkbox"] {
line-height: normal;
}
// Set the height of file controls to match text inputs
input[type="file"] {
display: block;
}
@@ -123,7 +122,7 @@ output {
background-color: @input-bg;
background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
border: 1px solid @input-border;
border-radius: @input-border-radius;
border-radius: @input-border-radius; // Note: This has no effect on <select>s in some browsers, due to the limited stylability of <select>s in CSS.
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
.transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s");
@@ -133,6 +132,12 @@ output {
// Placeholder
.placeholder();
// Unstyle the caret on `<select>`s in IE10+.
&::-ms-expand {
border: 0;
background-color: transparent;
}
// Disabled and read-only inputs
//
// HTML5 says that controls under a fieldset > legend:first-child won't be
@@ -141,9 +146,13 @@ output {
&[disabled],
&[readonly],
fieldset[disabled] & {
cursor: @cursor-disabled;
background-color: @input-bg-disabled;
opacity: 1; // iOS fix for unreadable disabled content
opacity: 1; // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655
}
&[disabled],
fieldset[disabled] & {
cursor: @cursor-disabled;
}
// Reset height for `textarea`s
@@ -170,26 +179,28 @@ input[type="search"] {
// In Mobile Safari, setting `display: block` on temporal inputs causes the
// text within the input to become vertically misaligned. As a workaround, we
// set a pixel line-height that matches the given height of the input, but only
// for Safari.
// for Safari. See https://bugs.webkit.org/show_bug.cgi?id=139848
//
// Note that as of 8.3, iOS doesn't support `datetime` or `week`.
@media screen and (-webkit-min-device-pixel-ratio: 0) {
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
line-height: @input-height-base;
}
input[type="date"].input-sm,
input[type="time"].input-sm,
input[type="datetime-local"].input-sm,
input[type="month"].input-sm {
line-height: @input-height-small;
}
input[type="date"].input-lg,
input[type="time"].input-lg,
input[type="datetime-local"].input-lg,
input[type="month"].input-lg {
line-height: @input-height-large;
&.form-control {
line-height: @input-height-base;
}
&.input-sm,
.input-group-sm & {
line-height: @input-height-small;
}
&.input-lg,
.input-group-lg & {
line-height: @input-height-large;
}
}
}
@@ -200,7 +211,7 @@ input[type="search"] {
// horizontal forms, use the predefined grid classes.
.form-group {
margin-bottom: 15px;
margin-bottom: @form-group-margin-bottom;
}
@@ -240,6 +251,7 @@ input[type="search"] {
// Radios and checkboxes on same line
.radio-inline,
.checkbox-inline {
position: relative;
display: inline-block;
padding-left: 20px;
margin-bottom: 0;
@@ -296,6 +308,7 @@ input[type="checkbox"] {
padding-bottom: (@padding-base-vertical + 1);
// Remove default margin from `p`
margin-bottom: 0;
min-height: (@line-height-computed + @font-size-base);
&.input-lg,
&.input-sm {
@@ -309,16 +322,65 @@ input[type="checkbox"] {
//
// Build on `.form-control` with modifier classes to decrease or increase the
// height and font-size of form controls.
//
// The `.form-group-* form-control` variations are sadly duplicated to avoid the
// issue documented in https://github.com/twbs/bootstrap/issues/15074.
.input-sm,
.form-group-sm .form-control {
.input-sm {
.input-size(@input-height-small; @padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @input-border-radius-small);
}
.form-group-sm {
.form-control {
height: @input-height-small;
padding: @padding-small-vertical @padding-small-horizontal;
font-size: @font-size-small;
line-height: @line-height-small;
border-radius: @input-border-radius-small;
}
select.form-control {
height: @input-height-small;
line-height: @input-height-small;
}
textarea.form-control,
select[multiple].form-control {
height: auto;
}
.form-control-static {
height: @input-height-small;
min-height: (@line-height-computed + @font-size-small);
padding: (@padding-small-vertical + 1) @padding-small-horizontal;
font-size: @font-size-small;
line-height: @line-height-small;
}
}
.input-lg,
.form-group-lg .form-control {
.input-lg {
.input-size(@input-height-large; @padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @input-border-radius-large);
}
.form-group-lg {
.form-control {
height: @input-height-large;
padding: @padding-large-vertical @padding-large-horizontal;
font-size: @font-size-large;
line-height: @line-height-large;
border-radius: @input-border-radius-large;
}
select.form-control {
height: @input-height-large;
line-height: @input-height-large;
}
textarea.form-control,
select[multiple].form-control {
height: auto;
}
.form-control-static {
height: @input-height-large;
min-height: (@line-height-computed + @font-size-large);
padding: (@padding-large-vertical + 1) @padding-large-horizontal;
font-size: @font-size-large;
line-height: @line-height-large;
}
}
// Form control feedback states
@@ -347,12 +409,16 @@ input[type="checkbox"] {
text-align: center;
pointer-events: none;
}
.input-lg + .form-control-feedback {
.input-lg + .form-control-feedback,
.input-group-lg + .form-control-feedback,
.form-group-lg .form-control + .form-control-feedback {
width: @input-height-large;
height: @input-height-large;
line-height: @input-height-large;
}
.input-sm + .form-control-feedback {
.input-sm + .form-control-feedback,
.input-group-sm + .form-control-feedback,
.form-group-sm .form-control + .form-control-feedback {
width: @input-height-small;
height: @input-height-small;
line-height: @input-height-small;
@@ -373,10 +439,10 @@ input[type="checkbox"] {
.has-feedback label {
& ~ .form-control-feedback {
top: (@line-height-computed + 5); // Height of the `label` and its margin
top: (@line-height-computed + 5); // Height of the `label` and its margin
}
&.sr-only ~ .form-control-feedback {
top: 0;
top: 0;
}
}
@@ -450,8 +516,7 @@ input[type="checkbox"] {
}
// Remove default margin on radios/checkboxes that were used for stacking, and
// then undo the floating of radios and checkboxes to match (which also avoids
// a bug in WebKit: https://github.com/twbs/bootstrap/issues/1969).
// then undo the floating of radios and checkboxes to match.
.radio,
.checkbox {
display: inline-block;
@@ -522,7 +587,7 @@ input[type="checkbox"] {
// Reposition the icon because it's now within a grid column and columns have
// `position: relative;` on them. Also accounts for the grid gutter padding.
.has-feedback .form-control-feedback {
right: (@grid-gutter-width / 2);
right: floor((@grid-gutter-width / 2));
}
// Form group sizes
@@ -532,7 +597,8 @@ input[type="checkbox"] {
.form-group-lg {
@media (min-width: @screen-sm-min) {
.control-label {
padding-top: ((@padding-large-vertical * @line-height-large) + 1);
padding-top: (@padding-large-vertical + 1);
font-size: @font-size-large;
}
}
}
@@ -540,6 +606,7 @@ input[type="checkbox"] {
@media (min-width: @screen-sm-min) {
.control-label {
padding-top: (@padding-small-vertical + 1);
font-size: @font-size-small;
}
}
}