mirror of
https://github.com/medialab-prado/datamad2017.git
synced 2025-06-08 14:31:28 +02:00
v.0.5.1
This commit is contained in:
Oleh Zasadnyy
parent
261527905b
commit
554378b49b
65 changed files with 824 additions and 715 deletions
128
_sass/vendor/bootstrap/_forms.scss
vendored
128
_sass/vendor/bootstrap/_forms.scss
vendored
|
|
@ -77,7 +77,7 @@ select[size] {
|
|||
input[type="file"]:focus,
|
||||
input[type="radio"]:focus,
|
||||
input[type="checkbox"]:focus {
|
||||
@include tab-focus();
|
||||
@include tab-focus;
|
||||
}
|
||||
|
||||
// Adjust output element
|
||||
|
|
@ -123,15 +123,15 @@ 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.
|
||||
@include box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
|
||||
@include transition(border-color ease-in-out .15s, box-shadow ease-in-out .15s);
|
||||
|
||||
// Customize the `:focus` state to imitate native WebKit styles.
|
||||
@include form-control-focus();
|
||||
@include form-control-focus;
|
||||
|
||||
// Placeholder
|
||||
@include placeholder();
|
||||
@include placeholder;
|
||||
|
||||
// Disabled and read-only inputs
|
||||
//
|
||||
|
|
@ -141,9 +141,9 @@ output {
|
|||
&[disabled],
|
||||
&[readonly],
|
||||
fieldset[disabled] & {
|
||||
cursor: not-allowed;
|
||||
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
|
||||
}
|
||||
|
||||
// [converter] extracted textarea& to textarea.form-control
|
||||
|
|
@ -170,24 +170,26 @@ input[type="search"] {
|
|||
// Special styles for iOS temporal inputs
|
||||
//
|
||||
// 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. Since this fucks up everything else, we have to
|
||||
// appropriately reset it for Internet Explorer and the size variations.
|
||||
// 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. See https://bugs.webkit.org/show_bug.cgi?id=139848
|
||||
|
||||
input[type="date"],
|
||||
input[type="time"],
|
||||
input[type="datetime-local"],
|
||||
input[type="month"] {
|
||||
line-height: $input-height-base;
|
||||
// IE8+ misaligns the text within date inputs, so we reset
|
||||
line-height: $line-height-base #{\0};
|
||||
@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-sm {
|
||||
line-height: $input-height-small;
|
||||
}
|
||||
&.input-lg {
|
||||
line-height: $input-height-large;
|
||||
&.input-sm,
|
||||
.input-group-sm & {
|
||||
line-height: $input-height-small;
|
||||
}
|
||||
|
||||
&.input-lg,
|
||||
.input-group-lg & {
|
||||
line-height: $input-height-large;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -210,11 +212,11 @@ input[type="month"] {
|
|||
.checkbox {
|
||||
position: relative;
|
||||
display: block;
|
||||
min-height: $line-height-computed; // clear the floating input if there is no label text
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
label {
|
||||
min-height: $line-height-computed; // Ensure the input doesn't jump when there is no text
|
||||
padding-left: 20px;
|
||||
margin-bottom: 0;
|
||||
font-weight: normal;
|
||||
|
|
@ -260,7 +262,7 @@ input[type="checkbox"] {
|
|||
&[disabled],
|
||||
&.disabled,
|
||||
fieldset[disabled] & {
|
||||
cursor: not-allowed;
|
||||
cursor: $cursor-disabled;
|
||||
}
|
||||
}
|
||||
// These classes are used directly on <label>s
|
||||
|
|
@ -268,7 +270,7 @@ input[type="checkbox"] {
|
|||
.checkbox-inline {
|
||||
&.disabled,
|
||||
fieldset[disabled] & {
|
||||
cursor: not-allowed;
|
||||
cursor: $cursor-disabled;
|
||||
}
|
||||
}
|
||||
// These classes are used on elements with <label> descendants
|
||||
|
|
@ -277,7 +279,7 @@ input[type="checkbox"] {
|
|||
&.disabled,
|
||||
fieldset[disabled] & {
|
||||
label {
|
||||
cursor: not-allowed;
|
||||
cursor: $cursor-disabled;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -307,10 +309,35 @@ 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.
|
||||
|
||||
@include input-size('.input-sm', $input-height-small, $padding-small-vertical, $padding-small-horizontal, $font-size-small, $line-height-small, $border-radius-small);
|
||||
@include input-size('.input-sm', $input-height-small, $padding-small-vertical, $padding-small-horizontal, $font-size-small, $line-height-small, $input-border-radius-small);
|
||||
.form-group-sm {
|
||||
|
||||
@include input-size('.input-lg', $input-height-large, $padding-large-vertical, $padding-large-horizontal, $font-size-large, $line-height-large, $border-radius-large);
|
||||
@include input-size('.form-control', $input-height-small, $padding-small-vertical, $padding-small-horizontal, $font-size-small, $line-height-small, $input-border-radius-small);
|
||||
|
||||
.form-control-static {
|
||||
height: $input-height-small;
|
||||
padding: $padding-small-vertical $padding-small-horizontal;
|
||||
font-size: $font-size-small;
|
||||
line-height: $line-height-small;
|
||||
}
|
||||
}
|
||||
|
||||
@include input-size('.input-lg', $input-height-large, $padding-large-vertical, $padding-large-horizontal, $font-size-large, $line-height-large, $input-border-radius-large);
|
||||
.form-group-lg {
|
||||
|
||||
@include input-size('.form-control', $input-height-large, $padding-large-vertical, $padding-large-horizontal, $font-size-large, $line-height-large, $input-border-radius-large);
|
||||
|
||||
.form-control-static {
|
||||
height: $input-height-large;
|
||||
padding: $padding-large-vertical $padding-large-horizontal;
|
||||
font-size: $font-size-large;
|
||||
line-height: $line-height-large;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Form control feedback states
|
||||
|
|
@ -329,7 +356,7 @@ input[type="checkbox"] {
|
|||
// Feedback icon (requires .glyphicon classes)
|
||||
.form-control-feedback {
|
||||
position: absolute;
|
||||
top: ($line-height-computed + 5); // Height of the `label` and its margin
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 2; // Ensure icon is above input groups
|
||||
display: block;
|
||||
|
|
@ -337,6 +364,7 @@ input[type="checkbox"] {
|
|||
height: $input-height-base;
|
||||
line-height: $input-height-base;
|
||||
text-align: center;
|
||||
pointer-events: none;
|
||||
}
|
||||
.input-lg + .form-control-feedback {
|
||||
width: $input-height-large;
|
||||
|
|
@ -360,10 +388,15 @@ input[type="checkbox"] {
|
|||
@include form-control-validation($state-danger-text, $state-danger-text, $state-danger-bg);
|
||||
}
|
||||
|
||||
// Reposition feedback icon if input has visible label above
|
||||
.has-feedback label {
|
||||
|
||||
// Reposition feedback icon if label is hidden with "screenreader only" state
|
||||
.has-feedback label.sr-only ~ .form-control-feedback {
|
||||
top: 0;
|
||||
& ~ .form-control-feedback {
|
||||
top: ($line-height-computed + 5); // Height of the `label` and its margin
|
||||
}
|
||||
&.sr-only ~ .form-control-feedback {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -380,7 +413,6 @@ input[type="checkbox"] {
|
|||
}
|
||||
|
||||
|
||||
|
||||
// Inline forms
|
||||
//
|
||||
// Make forms appear inline(-block) by adding the `.form-inline` class. Inline
|
||||
|
|
@ -392,7 +424,8 @@ input[type="checkbox"] {
|
|||
//
|
||||
// Heads up! This is mixin-ed into `.navbar-form` in navbars.less.
|
||||
|
||||
.form-inline {
|
||||
// [converter] extracted from `.form-inline` for libsass compatibility
|
||||
@mixin form-inline {
|
||||
|
||||
// Kick in the inline
|
||||
@media (min-width: $screen-sm-min) {
|
||||
|
|
@ -410,6 +443,11 @@ input[type="checkbox"] {
|
|||
vertical-align: middle;
|
||||
}
|
||||
|
||||
// Make static controls behave like regular ones
|
||||
.form-control-static {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
display: inline-table;
|
||||
vertical-align: middle;
|
||||
|
|
@ -432,8 +470,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;
|
||||
|
|
@ -451,15 +488,17 @@ input[type="checkbox"] {
|
|||
margin-left: 0;
|
||||
}
|
||||
|
||||
// Validation states
|
||||
//
|
||||
// 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.
|
||||
// Re-override the feedback icon.
|
||||
.has-feedback .form-control-feedback {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
// [converter] extracted as `@mixin form-inline` for libsass compatibility
|
||||
.form-inline {
|
||||
@include form-inline;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Horizontal forms
|
||||
|
|
@ -489,7 +528,7 @@ input[type="checkbox"] {
|
|||
|
||||
// Make form groups behave like rows
|
||||
.form-group {
|
||||
@include make-row();
|
||||
@include make-row;
|
||||
}
|
||||
|
||||
// Reset spacing and right align labels, but scope to media queries so that
|
||||
|
|
@ -507,7 +546,6 @@ 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 {
|
||||
top: 0;
|
||||
right: ($grid-gutter-width / 2);
|
||||
}
|
||||
|
||||
|
|
@ -521,9 +559,6 @@ input[type="checkbox"] {
|
|||
padding-top: (($padding-large-vertical * $line-height-large) + 1);
|
||||
}
|
||||
}
|
||||
.form-control {
|
||||
@extend .input-lg;
|
||||
}
|
||||
}
|
||||
.form-group-sm {
|
||||
@media (min-width: $screen-sm-min) {
|
||||
|
|
@ -531,8 +566,5 @@ input[type="checkbox"] {
|
|||
padding-top: ($padding-small-vertical + 1);
|
||||
}
|
||||
}
|
||||
.form-control {
|
||||
@extend .input-sm;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue