Update UI controls to support Select2 v4.0 - Refs #1160
This commit is contained in:
Samuel Georges
parent
9776d81228
commit
220bd2ae40
|
|
@ -990,7 +990,10 @@
|
|||
InspectorEditorDropdown.prototype.dispose = function() {
|
||||
$(document).off('change', this.selector, this.proxy(this.applyValue))
|
||||
|
||||
$(this.selector).select2('destroy')
|
||||
var $element = $(this.selector)
|
||||
if ($element.data('select2') != null) {
|
||||
$element.select2('destroy')
|
||||
}
|
||||
|
||||
this.inspector = null
|
||||
this.fieldDef = null
|
||||
|
|
@ -1005,7 +1008,7 @@
|
|||
}
|
||||
|
||||
InspectorEditorDropdown.prototype.renderEditor = function() {
|
||||
var
|
||||
var
|
||||
self = this,
|
||||
data = {
|
||||
id: this.editorId,
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
/*
|
||||
=require ../vendor/modernizr/modernizr.js
|
||||
=require ../vendor/select2/select2.js
|
||||
=require ../vendor/select2/js/select2.full.js
|
||||
*/
|
||||
|
||||
/*
|
||||
|
|
|
|||
|
|
@ -8,31 +8,32 @@
|
|||
// Restyle and baseline non-control form elements.
|
||||
|
||||
fieldset {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
// Chrome and Firefox set a `min-width: -webkit-min-content;` on fieldsets,
|
||||
// so we reset that to ensure it behaves more like a standard block element.
|
||||
// See https://github.com/twbs/bootstrap/issues/12359.
|
||||
min-width: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
// Chrome and Firefox set a `min-width: -webkit-min-content;` on fieldsets,
|
||||
// so we reset that to ensure it behaves more like a standard block element.
|
||||
// See https://github.com/twbs/bootstrap/issues/12359.
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
legend {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin-bottom: @line-height-computed;
|
||||
font-size: (@font-size-base * 1.5);
|
||||
line-height: inherit;
|
||||
color: @legend-color;
|
||||
border: 0;
|
||||
border-bottom: 1px solid @legend-border-color;
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin-bottom: @line-height-computed;
|
||||
font-size: (@font-size-base * 1.5);
|
||||
line-height: inherit;
|
||||
color: @legend-color;
|
||||
border: 0;
|
||||
border-bottom: 1px solid @legend-border-color;
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
margin-bottom: 5px;
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
margin-bottom: 5px;
|
||||
font-weight: 600;
|
||||
font-size: @label-font-size;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -44,48 +45,48 @@ label {
|
|||
|
||||
// Override content-box in Normalize (* isn't specific enough)
|
||||
input[type="search"] {
|
||||
.box-sizing(border-box);
|
||||
.box-sizing(border-box);
|
||||
}
|
||||
|
||||
// Position radios and checkboxes better
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
margin: 4px 0 0;
|
||||
margin-top: 1px \9; /* IE8-9 */
|
||||
line-height: normal;
|
||||
margin: 4px 0 0;
|
||||
margin-top: 1px \9; /* IE8-9 */
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
// Set the height of file controls to match text inputs
|
||||
input[type="file"] {
|
||||
display: block;
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Make range inputs behave like textual form controls
|
||||
input[type="range"] {
|
||||
display: block;
|
||||
width: 100%;
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Make multiple select elements height not fixed
|
||||
select[multiple],
|
||||
select[size] {
|
||||
height: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
// Focus for file, radio, and checkbox
|
||||
input[type="file"]:focus,
|
||||
input[type="radio"]:focus,
|
||||
input[type="checkbox"]:focus {
|
||||
.tab-focus();
|
||||
.tab-focus();
|
||||
}
|
||||
|
||||
// Adjust output element
|
||||
output {
|
||||
display: block;
|
||||
padding-top: (@padding-base-vertical + 1);
|
||||
font-size: @font-size-base;
|
||||
line-height: @line-height-base;
|
||||
color: @input-color;
|
||||
display: block;
|
||||
padding-top: (@padding-base-vertical + 1);
|
||||
font-size: @font-size-base;
|
||||
line-height: @line-height-base;
|
||||
color: @input-color;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -112,43 +113,46 @@ output {
|
|||
// input[type="color"]
|
||||
|
||||
.form-control {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: @input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
|
||||
padding: @padding-base-vertical @padding-base-horizontal;
|
||||
font-size: @font-size-base;
|
||||
line-height: @line-height-base;
|
||||
color: @input-color;
|
||||
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;
|
||||
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
|
||||
.transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s");
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: @input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
|
||||
padding: @padding-base-vertical @padding-base-horizontal;
|
||||
font-size: @input-font-size;
|
||||
line-height: @line-height-base;
|
||||
color: @input-color;
|
||||
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;
|
||||
.transition(@input-transition);
|
||||
|
||||
// Customize the `:focus` state to imitate native WebKit styles.
|
||||
.form-control-focus();
|
||||
// Customize the `:focus` state to imitate native WebKit styles.
|
||||
.form-control-focus();
|
||||
|
||||
// Placeholder
|
||||
.placeholder();
|
||||
// Placeholder
|
||||
.placeholder();
|
||||
|
||||
// Disabled and read-only inputs
|
||||
//
|
||||
// HTML5 says that controls under a fieldset > legend:first-child won't be
|
||||
// disabled if the fieldset is disabled. Due to implementation difficulty, we
|
||||
// don't honor that edge case; we style them as disabled anyway.
|
||||
&[disabled],
|
||||
&[readonly],
|
||||
fieldset[disabled] & {
|
||||
cursor: not-allowed;
|
||||
background-color: @input-bg-disabled;
|
||||
opacity: 1; // iOS fix for unreadable disabled content
|
||||
}
|
||||
// Disabled and read-only inputs
|
||||
//
|
||||
// HTML5 says that controls under a fieldset > legend:first-child won't be
|
||||
// disabled if the fieldset is disabled. Due to implementation difficulty, we
|
||||
// don't honor that edge case; we style them as disabled anyway.
|
||||
&[disabled],
|
||||
&[readonly],
|
||||
fieldset[disabled] & {
|
||||
cursor: not-allowed;
|
||||
background-color: @input-bg-disabled;
|
||||
opacity: 1; // iOS fix for unreadable disabled content
|
||||
}
|
||||
|
||||
// Reset height for `textarea`s
|
||||
textarea& {
|
||||
height: auto;
|
||||
}
|
||||
// Reset height for `textarea`s
|
||||
textarea& {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
&.align-right {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -160,7 +164,7 @@ output {
|
|||
// https://github.com/twbs/bootstrap/issues/11586.
|
||||
|
||||
input[type="search"] {
|
||||
-webkit-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -170,7 +174,7 @@ input[type="search"] {
|
|||
// given height of the input.
|
||||
|
||||
input[type="date"] {
|
||||
line-height: @input-height-base;
|
||||
line-height: @input-height-base;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -180,7 +184,7 @@ input[type="date"] {
|
|||
// horizontal forms, use the predefined grid classes.
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 15px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -190,43 +194,43 @@ input[type="date"] {
|
|||
|
||||
.radio,
|
||||
.checkbox {
|
||||
display: block;
|
||||
min-height: @line-height-computed; // clear the floating input if there is no label text
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
padding-left: 20px;
|
||||
label {
|
||||
display: inline;
|
||||
font-weight: normal;
|
||||
cursor: pointer;
|
||||
}
|
||||
display: block;
|
||||
min-height: @line-height-computed; // clear the floating input if there is no label text
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
padding-left: 20px;
|
||||
label {
|
||||
display: inline;
|
||||
font-weight: normal;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.radio input[type="radio"],
|
||||
.radio-inline input[type="radio"],
|
||||
.checkbox input[type="checkbox"],
|
||||
.checkbox-inline input[type="checkbox"] {
|
||||
float: left;
|
||||
margin-left: -20px;
|
||||
float: left;
|
||||
margin-left: -20px;
|
||||
}
|
||||
.radio + .radio,
|
||||
.checkbox + .checkbox {
|
||||
margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing
|
||||
margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing
|
||||
}
|
||||
|
||||
// Radios and checkboxes on same line
|
||||
.radio-inline,
|
||||
.checkbox-inline {
|
||||
display: inline-block;
|
||||
padding-left: 20px;
|
||||
margin-bottom: 0;
|
||||
vertical-align: middle;
|
||||
font-weight: normal;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
padding-left: 20px;
|
||||
margin-bottom: 0;
|
||||
vertical-align: middle;
|
||||
font-weight: normal;
|
||||
cursor: pointer;
|
||||
}
|
||||
.radio-inline + .radio-inline,
|
||||
.checkbox-inline + .checkbox-inline {
|
||||
margin-top: 0;
|
||||
margin-left: 10px; // space out consecutive inline controls
|
||||
margin-top: 0;
|
||||
margin-left: 10px; // space out consecutive inline controls
|
||||
}
|
||||
|
||||
// Apply same disabled cursor tweak as for inputs
|
||||
|
|
@ -238,10 +242,10 @@ input[type="checkbox"],
|
|||
.radio-inline,
|
||||
.checkbox,
|
||||
.checkbox-inline {
|
||||
&[disabled],
|
||||
fieldset[disabled] & {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
&[disabled],
|
||||
fieldset[disabled] & {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -251,11 +255,11 @@ input[type="checkbox"],
|
|||
// height and font-size of form controls.
|
||||
|
||||
.input-sm {
|
||||
.input-size(@input-height-small; @padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small);
|
||||
.input-size(@input-height-small; @padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small);
|
||||
}
|
||||
|
||||
.input-lg {
|
||||
.input-size(@input-height-large; @padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large);
|
||||
.input-size(@input-height-large; @padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large);
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -264,36 +268,36 @@ input[type="checkbox"],
|
|||
// Apply contextual and semantic states to individual form controls.
|
||||
|
||||
.has-feedback {
|
||||
// Enable absolute positioning
|
||||
position: relative;
|
||||
// Enable absolute positioning
|
||||
position: relative;
|
||||
|
||||
// Ensure icons don't overlap text
|
||||
.form-control {
|
||||
padding-right: (@input-height-base * 1.25);
|
||||
}
|
||||
// Ensure icons don't overlap text
|
||||
.form-control {
|
||||
padding-right: (@input-height-base * 1.25);
|
||||
}
|
||||
|
||||
// Feedback icon (requires .glyphicon classes)
|
||||
.form-control-feedback {
|
||||
position: absolute;
|
||||
top: (@line-height-computed + 5); // Height of the `label` and its margin
|
||||
right: 0;
|
||||
display: block;
|
||||
width: @input-height-base;
|
||||
height: @input-height-base;
|
||||
line-height: @input-height-base;
|
||||
text-align: center;
|
||||
}
|
||||
// Feedback icon (requires .glyphicon classes)
|
||||
.form-control-feedback {
|
||||
position: absolute;
|
||||
top: (@line-height-computed + 5); // Height of the `label` and its margin
|
||||
right: 0;
|
||||
display: block;
|
||||
width: @input-height-base;
|
||||
height: @input-height-base;
|
||||
line-height: @input-height-base;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
// Feedback states
|
||||
.has-success {
|
||||
.form-control-validation(@state-success-text; @state-success-text; @state-success-bg);
|
||||
.form-control-validation(@state-success-text; @state-success-text; @state-success-bg);
|
||||
}
|
||||
.has-warning {
|
||||
.form-control-validation(@state-warning-text; @state-warning-text; @state-warning-bg);
|
||||
.form-control-validation(@state-warning-text; @state-warning-text; @state-warning-bg);
|
||||
}
|
||||
.has-error {
|
||||
.form-control-validation(@state-danger-text; @state-danger-text; @state-danger-bg);
|
||||
.form-control-validation(@state-danger-text; @state-danger-text; @state-danger-bg);
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -303,7 +307,7 @@ input[type="checkbox"],
|
|||
// a horizontal form layout.
|
||||
|
||||
.form-control-static {
|
||||
margin-bottom: 0; // Remove default margin from `p`
|
||||
margin-bottom: 0; // Remove default margin from `p`
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -313,14 +317,12 @@ input[type="checkbox"],
|
|||
// below a form control. Use for general help, formatting, or instructional text.
|
||||
|
||||
.help-block {
|
||||
display: block; // account for any element using help-block
|
||||
margin-top: 5px;
|
||||
margin-bottom: 10px;
|
||||
color: lighten(@text-color, 25%); // lighten the text some for contrast
|
||||
display: block; // account for any element using help-block
|
||||
margin-top: 5px;
|
||||
margin-bottom: 10px;
|
||||
color: lighten(@text-color, 25%); // lighten the text some for contrast
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Inline forms
|
||||
//
|
||||
// Make forms appear inline(-block) by adding the `.form-inline` class. Inline
|
||||
|
|
@ -334,56 +336,56 @@ input[type="checkbox"],
|
|||
|
||||
.form-inline {
|
||||
|
||||
// Kick in the inline
|
||||
@media (min-width: @screen-sm-min) {
|
||||
// Inline-block all the things for "inline"
|
||||
.form-group {
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
// Kick in the inline
|
||||
@media (min-width: @screen-sm-min) {
|
||||
// Inline-block all the things for "inline"
|
||||
.form-group {
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
// In navbar-form, allow folks to *not* use `.form-group`
|
||||
.form-control {
|
||||
display: inline-block;
|
||||
width: auto; // Prevent labels from stacking above inputs in `.form-group`
|
||||
vertical-align: middle;
|
||||
}
|
||||
// Input groups need that 100% width though
|
||||
.input-group > .form-control {
|
||||
width: 100%;
|
||||
}
|
||||
// In navbar-form, allow folks to *not* use `.form-group`
|
||||
.form-control {
|
||||
display: inline-block;
|
||||
width: auto; // Prevent labels from stacking above inputs in `.form-group`
|
||||
vertical-align: middle;
|
||||
}
|
||||
// Input groups need that 100% width though
|
||||
.input-group > .form-control {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.control-label {
|
||||
margin-bottom: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.control-label {
|
||||
margin-bottom: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
// 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).
|
||||
.radio,
|
||||
.checkbox {
|
||||
display: inline-block;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
padding-left: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.radio input[type="radio"],
|
||||
.checkbox input[type="checkbox"] {
|
||||
float: none;
|
||||
margin-left: 0;
|
||||
}
|
||||
// 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).
|
||||
.radio,
|
||||
.checkbox {
|
||||
display: inline-block;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
padding-left: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.radio input[type="radio"],
|
||||
.checkbox input[type="checkbox"] {
|
||||
float: none;
|
||||
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.
|
||||
.has-feedback .form-control-feedback {
|
||||
top: 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.
|
||||
.has-feedback .form-control-feedback {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -394,45 +396,45 @@ input[type="checkbox"],
|
|||
|
||||
.form-horizontal {
|
||||
|
||||
// Consistent vertical alignment of labels, radios, and checkboxes
|
||||
.control-label,
|
||||
.radio,
|
||||
.checkbox,
|
||||
.radio-inline,
|
||||
.checkbox-inline {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
padding-top: (@padding-base-vertical + 1); // Default padding plus a border
|
||||
}
|
||||
// Account for padding we're adding to ensure the alignment and of help text
|
||||
// and other content below items
|
||||
.radio,
|
||||
.checkbox {
|
||||
min-height: (@line-height-computed + (@padding-base-vertical + 1));
|
||||
}
|
||||
|
||||
// Make form groups behave like rows
|
||||
.form-group {
|
||||
.make-row();
|
||||
}
|
||||
|
||||
.form-control-static {
|
||||
padding-top: (@padding-base-vertical + 1);
|
||||
}
|
||||
|
||||
// Only right align form labels here when the columns stop stacking
|
||||
@media (min-width: @screen-sm-min) {
|
||||
.control-label {
|
||||
text-align: right;
|
||||
// Consistent vertical alignment of labels, radios, and checkboxes
|
||||
.control-label,
|
||||
.radio,
|
||||
.checkbox,
|
||||
.radio-inline,
|
||||
.checkbox-inline {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
padding-top: (@padding-base-vertical + 1); // Default padding plus a border
|
||||
}
|
||||
// Account for padding we're adding to ensure the alignment and of help text
|
||||
// and other content below items
|
||||
.radio,
|
||||
.checkbox {
|
||||
min-height: (@line-height-computed + (@padding-base-vertical + 1));
|
||||
}
|
||||
}
|
||||
|
||||
// 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.
|
||||
.has-feedback .form-control-feedback {
|
||||
top: 0;
|
||||
right: (@grid-gutter-width / 2);
|
||||
}
|
||||
// Make form groups behave like rows
|
||||
.form-group {
|
||||
.make-row();
|
||||
}
|
||||
|
||||
.form-control-static {
|
||||
padding-top: (@padding-base-vertical + 1);
|
||||
}
|
||||
|
||||
// Only right align form labels here when the columns stop stacking
|
||||
@media (min-width: @screen-sm-min) {
|
||||
.control-label {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
// 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.
|
||||
.has-feedback .form-control-feedback {
|
||||
top: 0;
|
||||
right: (@grid-gutter-width / 2);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,27 +21,6 @@
|
|||
@import "select.less";
|
||||
@import "checkbox.less";
|
||||
|
||||
//
|
||||
// Resets to bootstrap
|
||||
//
|
||||
|
||||
label {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
.transition(none);
|
||||
.box-shadow(none);
|
||||
.border-radius(3px);
|
||||
&:focus {
|
||||
.box-shadow(none);
|
||||
}
|
||||
|
||||
&.align-right {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Form containers
|
||||
//
|
||||
|
|
@ -71,15 +50,9 @@ label {
|
|||
.clearfix();
|
||||
}
|
||||
|
||||
label {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
border: 1px solid @color-form-field-border;
|
||||
position: relative;
|
||||
-webkit-appearance: none;
|
||||
font-size: 13px;
|
||||
|
||||
&:focus {
|
||||
border: 1px solid @color-form-field-border-focus;
|
||||
|
|
@ -436,7 +409,7 @@ body.slim-container {
|
|||
width: auto;
|
||||
height: 36px;
|
||||
|
||||
.select2-choice {
|
||||
.select2-selection {
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,11 +17,8 @@
|
|||
// Set the border and box shadow on specific inputs to match
|
||||
.form-control {
|
||||
border-color: @border-color;
|
||||
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
|
||||
&:focus {
|
||||
border-color: darken(@border-color, 10%);
|
||||
@shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@border-color, 20%);
|
||||
.box-shadow(@shadow);
|
||||
}
|
||||
}
|
||||
// Set validation states also for addons
|
||||
|
|
@ -54,7 +51,6 @@
|
|||
&:focus {
|
||||
border-color: @color;
|
||||
outline: 0;
|
||||
.box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}");
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -7,9 +7,9 @@
|
|||
@input-bg-disabled: @gray-lighter;
|
||||
|
||||
@input-color: @gray;
|
||||
@input-border: #ccc;
|
||||
@input-border-radius: @border-radius-base;
|
||||
@input-border-focus: #66afe9;
|
||||
@input-border: #e0e0e0;
|
||||
@input-border-focus: #808c8d;
|
||||
@input-border-radius: 3px;
|
||||
|
||||
@input-color-placeholder: @gray-light;
|
||||
|
||||
|
|
@ -23,14 +23,18 @@
|
|||
@input-group-addon-bg: @gray-lighter;
|
||||
@input-group-addon-border-color: @input-border;
|
||||
|
||||
@label-font-size: 12px;
|
||||
@input-font-size: 13px;
|
||||
|
||||
@input-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
|
||||
|
||||
@form-breakpoint-min: 770px;
|
||||
@form-breakpoint-max: (@form-breakpoint-min - 1);
|
||||
|
||||
@color-input-sidebar-control: #C4C4C4;
|
||||
|
||||
@color-form-field-border: #e0e0e0;
|
||||
@color-form-field-border-focus: #808c8d;
|
||||
@color-form-field-border: @input-border;
|
||||
@color-form-field-border-focus: @input-border-focus;
|
||||
@color-form-required-asterisk: #ff0000;
|
||||
@color-form-sidebar: #ecf0f1;
|
||||
@color-form-field-preview: #f6f6f6;
|
||||
|
|
@ -39,4 +43,4 @@
|
|||
|
||||
@color-form-field-recordfinder-btn: #333333;
|
||||
|
||||
@color-form-checkboxlist-border: #e2e2e2;
|
||||
@color-form-checkboxlist-border: #e2e2e2;
|
||||
|
|
|
|||
|
|
@ -35,6 +35,7 @@
|
|||
font-size: 12px;
|
||||
width: 50%;
|
||||
border-bottom: 1px solid @color-inspector-grid;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
tr:last-child {
|
||||
|
|
@ -288,35 +289,35 @@
|
|||
}
|
||||
}
|
||||
|
||||
div.custom-select {
|
||||
width: 100%;
|
||||
.select2-container {
|
||||
width: 100% !important;
|
||||
|
||||
&.select2-container {
|
||||
.select2-choice {
|
||||
background: transparent;
|
||||
height: 30px;
|
||||
line-height: 29px;
|
||||
padding-left: 12px;
|
||||
padding-right: 3px;
|
||||
.border-radius(0) !important;
|
||||
.select2-selection {
|
||||
background: transparent;
|
||||
height: 30px;
|
||||
line-height: 29px;
|
||||
padding: 0 3px 0 12px;
|
||||
.border-radius(0) !important;
|
||||
border: none !important;
|
||||
font-size: 12px;
|
||||
|
||||
&.select2-default {
|
||||
font-weight: normal !important;
|
||||
}
|
||||
&.select2-default {
|
||||
font-weight: normal !important;
|
||||
}
|
||||
}
|
||||
|
||||
.loading-indicator {
|
||||
> span {
|
||||
top: 15px;
|
||||
}
|
||||
.loading-indicator {
|
||||
> span {
|
||||
top: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
&.select2-dropdown-open {
|
||||
.border-radius(0) !important;
|
||||
&.select2-container--open {
|
||||
.border-radius(0) !important;
|
||||
border: none !important;
|
||||
|
||||
.select2-choice {
|
||||
background: white;
|
||||
}
|
||||
.select2-selection {
|
||||
background: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -328,7 +329,7 @@
|
|||
font-weight: 600;
|
||||
}
|
||||
|
||||
div.custom-select.select2-container .select2-choice {
|
||||
.select2-container .select2-selection {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
|
@ -361,7 +362,7 @@ div.control-popover {
|
|||
font-weight: 400!important;
|
||||
}
|
||||
|
||||
div.custom-select.select2-container .select2-choice {
|
||||
div.custom-select.select2-container .select2-selection {
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
}
|
||||
|
|
@ -369,13 +370,16 @@ div.control-popover {
|
|||
}
|
||||
}
|
||||
|
||||
.select2-drop {
|
||||
.select2-dropdown {
|
||||
&.ocInspectorDropdown {
|
||||
font-size: 12px;
|
||||
.border-radius(0)!important;
|
||||
border: none!important;
|
||||
.border-radius(0) !important;
|
||||
border: none !important;
|
||||
|
||||
> .select2-results {
|
||||
> .select2-results__options {
|
||||
font-size: 12px;
|
||||
}
|
||||
> li > div {
|
||||
padding: 5px 12px 5px;
|
||||
}
|
||||
|
|
@ -392,23 +396,17 @@ div.control-popover {
|
|||
&:after {
|
||||
position: absolute;
|
||||
.icon(@search);
|
||||
right: 8px;
|
||||
top: 5px;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
color: #95a5a6;
|
||||
}
|
||||
|
||||
input.select2-input {
|
||||
min-height: 26px;
|
||||
background: transparent!important;
|
||||
background: transparent !important;
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&.select2-drop-above {
|
||||
.select2-search:after {
|
||||
top: 7px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -5,238 +5,570 @@
|
|||
@import "global.less";
|
||||
@import "icon.less";
|
||||
@import "loader.less";
|
||||
|
||||
@import "../vendor/select2/select2.less";
|
||||
@import "form.variables.less";
|
||||
@import "../vendor/select2/css/select2.less";
|
||||
|
||||
//
|
||||
// Select
|
||||
// --------------------------------------------------
|
||||
|
||||
@color-select-icon: #666666;
|
||||
@color-select-border: #b2b9be;
|
||||
@color-select-border-focus: #808c8d;
|
||||
@color-select-bg: #f6f6f6;
|
||||
@color-select-bg-hover: #4da7e8;
|
||||
@import "select.mixins.less";
|
||||
@import "select.variables.less";
|
||||
|
||||
.select2-container {
|
||||
.loading-indicator {
|
||||
background: transparent;
|
||||
|
||||
//
|
||||
// Select
|
||||
// --------------------------------------------------
|
||||
|
||||
//
|
||||
// Nice Dropdowns
|
||||
//
|
||||
|
||||
.custom-select {
|
||||
|
||||
//
|
||||
// Allows Select2 to work with Bootstrap
|
||||
//
|
||||
|
||||
.select2-choice {
|
||||
border: 0;
|
||||
border-radius: @border-radius-base;
|
||||
.select2-arrow {
|
||||
border-radius: 0 @border-radius-base @border-radius-base 0;
|
||||
> span {
|
||||
background-image: url('@{loader-image-path}/loader-transparent.svg');
|
||||
left: auto;
|
||||
right: 10px;
|
||||
top: 19px;
|
||||
background-size: 17px 17px;
|
||||
}
|
||||
}
|
||||
|
||||
&.select2-container {
|
||||
padding: 0px;
|
||||
.select2-choices {
|
||||
border: 0 !important;
|
||||
border-radius: @border-radius-base;
|
||||
}
|
||||
|
||||
.loading-indicator {
|
||||
background: transparent;
|
||||
|
||||
> span {
|
||||
background-image: url('@{loader-image-path}/loader-transparent.svg');
|
||||
left: auto;
|
||||
right: 10px;
|
||||
top: 19px;
|
||||
background-size: 17px 17px;
|
||||
}
|
||||
}
|
||||
|
||||
&.in-progress {
|
||||
.select2-choice .select2-arrow {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.select2-container.select2-dropdown-open {
|
||||
border-color: @color-select-border-focus;
|
||||
&,.select2-choices {
|
||||
border-radius: @border-radius-base @border-radius-base 0 0;
|
||||
}
|
||||
|
||||
&.select2-drop-above {
|
||||
border-radius: 0 0 @border-radius-base @border-radius-base;
|
||||
}
|
||||
}
|
||||
|
||||
&.select2-container-active {
|
||||
border-color: @color-select-border-focus;
|
||||
}
|
||||
|
||||
//
|
||||
// Restyle Select2
|
||||
//
|
||||
|
||||
&.select2-container {
|
||||
.select2-choice {
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
padding: 0 0 0 15px;
|
||||
border: none;
|
||||
background: #FFFFFF;
|
||||
|
||||
.select2-arrow {
|
||||
width: 38px;
|
||||
background: none;
|
||||
background: transparent;
|
||||
border-left: none;
|
||||
b {
|
||||
background: none !important;
|
||||
text-align: center;
|
||||
color: @color-select-icon;
|
||||
&:before { .icon(@angle-down); }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.select2-container-disabled {
|
||||
background-color: #f4f4f4;
|
||||
.select2-choice {
|
||||
background-color: #f4f4f4;
|
||||
.select2-arrow b { .opacity(.5); }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.select2-container.select2-container-active {
|
||||
.select2-choice,
|
||||
.select2-choices {
|
||||
.box-shadow(none);
|
||||
}
|
||||
}
|
||||
|
||||
&.select2-container.select2-dropdown-open,
|
||||
&.select2-container.select2-dropdown-open.select2-drop-above {
|
||||
.select2-choice {
|
||||
background: @color-select-bg;
|
||||
.select2-arrow {
|
||||
border-left-color: transparent;
|
||||
b {
|
||||
&:before { .icon(@angle-up); }
|
||||
}
|
||||
}
|
||||
&.in-progress {
|
||||
.select2-selection .select2-selection__arrow b {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Multi select
|
||||
//
|
||||
.select2-container--default {
|
||||
display: block;
|
||||
|
||||
.select2-container-multi {
|
||||
&.form-control {
|
||||
height: auto;
|
||||
.select2-selection {
|
||||
.select-input-defaults();
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.select2-choices {
|
||||
min-height: 28px;
|
||||
line-height: 28px;
|
||||
padding-left: 10px;
|
||||
background: none;
|
||||
.select2-search--dropdown {
|
||||
position: relative;
|
||||
|
||||
.select2-search-choice {
|
||||
background: none;
|
||||
padding: 8px 15px;
|
||||
margin: 4px 0 4px 5px;
|
||||
&:after {
|
||||
position: absolute;
|
||||
.icon(@search);
|
||||
right: 10px;
|
||||
top: 7px;
|
||||
color: #95a5a6;
|
||||
}
|
||||
|
||||
.select2-search__field {
|
||||
.select-input-defaults();
|
||||
}
|
||||
}
|
||||
|
||||
.select2-search__field {
|
||||
outline: 0;
|
||||
|
||||
&::-webkit-input-placeholder {
|
||||
color: @input-color-placeholder;
|
||||
}
|
||||
|
||||
&:-moz-placeholder {
|
||||
color: @input-color-placeholder;
|
||||
}
|
||||
|
||||
&::-moz-placeholder {
|
||||
color: @input-color-placeholder;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:-ms-input-placeholder {
|
||||
color: @input-color-placeholder;
|
||||
}
|
||||
}
|
||||
|
||||
.select2-results__option {
|
||||
|
||||
&[role=group] {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&[aria-disabled=true] {
|
||||
color: @color-select-link-disabled;
|
||||
cursor: @select-cursor-disabled;
|
||||
}
|
||||
|
||||
&[aria-selected=true] {
|
||||
background-color: @color-select-hover-bg;
|
||||
color: @color-select-hover;
|
||||
}
|
||||
|
||||
&--highlighted[aria-selected] {
|
||||
background-color: @color-select-active-bg;
|
||||
color: @color-select-active;
|
||||
}
|
||||
|
||||
.select2-results__option {
|
||||
padding: @padding-base-vertical @padding-base-horizontal;
|
||||
|
||||
.select2-results__group {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.select2-results__option {
|
||||
margin-left: -@padding-base-horizontal;
|
||||
padding-left: @padding-base-horizontal*2;
|
||||
|
||||
.select2-results__option {
|
||||
margin-left: -@padding-base-horizontal*2;
|
||||
padding-left: @padding-base-horizontal*3;
|
||||
|
||||
.select2-results__option {
|
||||
margin-left: -@padding-base-horizontal*3;
|
||||
padding-left: @padding-base-horizontal*4;
|
||||
|
||||
.select2-results__option {
|
||||
margin-left: -@padding-base-horizontal*4;
|
||||
padding-left: @padding-base-horizontal*5;
|
||||
|
||||
.select2-results__option {
|
||||
margin-left: -@padding-base-horizontal*5;
|
||||
padding-left: @padding-base-horizontal*6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select2-results__group {
|
||||
color: @color-select-header;
|
||||
display: block;
|
||||
padding: @padding-base-vertical @padding-base-horizontal;
|
||||
font-size: @font-size-small;
|
||||
line-height: @line-height-base;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&.select2-container--focus,
|
||||
&.select2-container--open {
|
||||
.select2-selection {
|
||||
.transition(@input-transition);
|
||||
border-color: @input-border-focus;
|
||||
}
|
||||
}
|
||||
|
||||
&.select2-container--open {
|
||||
//
|
||||
// Make the dropdown arrow point up while the dropdown is visible.
|
||||
//
|
||||
.select2-selection .select2-selection__arrow b {
|
||||
border-color: transparent transparent @color-select-icon transparent;
|
||||
border-width: 0 @caret-width-base @caret-width-base @caret-width-base;
|
||||
}
|
||||
|
||||
//
|
||||
// Handle border radii of the container when the dropdown is showing.
|
||||
//
|
||||
&.select2-container--below {
|
||||
.select2-selection {
|
||||
.border-bottom-radius(0);
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&.select2-container--above {
|
||||
.select2-selection {
|
||||
.border-top-radius(0);
|
||||
border-top-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select2-selection__clear {
|
||||
color: @color-select-icon;
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
font-weight: bold;
|
||||
margin-right: 10px;
|
||||
|
||||
&:hover {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
&.select2-container--disabled {
|
||||
|
||||
.select2-selection {
|
||||
border-color: @input-border;
|
||||
.box-shadow(none);
|
||||
.transition(.25s linear);
|
||||
}
|
||||
|
||||
.select2-selection,
|
||||
.select2-search__field {
|
||||
cursor: @select-cursor-disabled;
|
||||
}
|
||||
|
||||
.select2-selection,
|
||||
.select2-selection--multiple .select2-selection__choice {
|
||||
background-color: @input-bg-disabled;
|
||||
}
|
||||
|
||||
.select2-selection__clear,
|
||||
.select2-selection--multiple .select2-selection__choice__remove {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Dropdown
|
||||
//------------------------------------
|
||||
|
||||
.select2-dropdown {
|
||||
.box-shadow(@select-box-shadow);
|
||||
border-color: @input-border-focus;
|
||||
overflow-x: hidden;
|
||||
margin-top: -1px;
|
||||
&--above {
|
||||
margin-top: 1px;
|
||||
.box-shadow(@select-box-shadow-above);
|
||||
}
|
||||
}
|
||||
|
||||
.select2-results > .select2-results__options {
|
||||
font-size: @input-font-size;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
// Single select
|
||||
//------------------------------------
|
||||
|
||||
.select2-selection--single {
|
||||
height: @input-height-base;
|
||||
line-height: @line-height-base;
|
||||
padding: @padding-base-vertical @padding-base-horizontal + @caret-width-base*3 @padding-base-vertical @padding-base-horizontal;
|
||||
|
||||
//
|
||||
// Adjust the single Select2's dropdown arrow button appearance.
|
||||
//
|
||||
.select2-selection__arrow {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: @padding-base-horizontal;
|
||||
top: 0;
|
||||
width: @caret-width-base;
|
||||
|
||||
b {
|
||||
border-color: @color-select-icon transparent transparent transparent;
|
||||
border-style: solid;
|
||||
border-width: @caret-width-base @caret-width-base 0 @caret-width-base;
|
||||
height: 0;
|
||||
left: 0;
|
||||
margin-left: -@caret-width-base;
|
||||
margin-top: -@caret-width-base/2;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.select2-selection__rendered {
|
||||
color: @input-color;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.select2-selection__placeholder {
|
||||
color: @input-color-placeholder;
|
||||
}
|
||||
}
|
||||
|
||||
// Multiple select
|
||||
//------------------------------------
|
||||
|
||||
.select2-selection--multiple {
|
||||
min-height: @input-height-base;
|
||||
|
||||
.select2-selection__rendered {
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
line-height: @line-height-base;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.select2-selection__placeholder {
|
||||
color: @input-color-placeholder;
|
||||
float: left;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
//
|
||||
// Make Multi Select2's choices match default button styles.
|
||||
//
|
||||
.select2-selection__choice {
|
||||
color: @input-color;
|
||||
background: @color-select-choice-bg;
|
||||
border: 1px solid @color-select-choice-border;
|
||||
border-radius: 4px;
|
||||
cursor: default;
|
||||
float: left;
|
||||
margin: (@padding-base-vertical - 1) 0 0 @padding-base-horizontal/2;
|
||||
padding: 0 @padding-base-vertical;
|
||||
}
|
||||
|
||||
//
|
||||
// Minus 2px borders.
|
||||
//
|
||||
.select2-search--inline {
|
||||
.select2-search__field {
|
||||
background: transparent;
|
||||
padding: 0 @padding-base-horizontal;
|
||||
height: @input-height-base - 2;
|
||||
line-height: @line-height-base;
|
||||
margin-top: 0;
|
||||
min-width: 5em;
|
||||
}
|
||||
}
|
||||
|
||||
.select2-selection__choice__remove {
|
||||
color: #999;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
margin-right: @padding-base-vertical / 2;
|
||||
|
||||
&:hover {
|
||||
padding: 8px 7px 8px 23px;
|
||||
.select2-search-choice-close {
|
||||
opacity: 1;
|
||||
}
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.select2-selection__clear {
|
||||
margin-top: @padding-base-vertical;
|
||||
}
|
||||
}
|
||||
|
||||
// Control sizing
|
||||
//------------------------------------
|
||||
|
||||
/* 1 */
|
||||
&.input-sm,
|
||||
&.input-lg {
|
||||
border-radius: 0;
|
||||
font-size: 12px;
|
||||
height: auto;
|
||||
line-height: 1;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&.input-sm,
|
||||
.input-group-sm &,
|
||||
.form-group-sm & {
|
||||
.select2-selection--single {
|
||||
border-radius: @border-radius-small;
|
||||
font-size: @font-size-small;
|
||||
height: @input-height-small;
|
||||
line-height: @line-height-small;
|
||||
padding: @padding-small-vertical @padding-small-horizontal + @caret-width-base*3 @padding-small-vertical @padding-small-horizontal;
|
||||
|
||||
/* 2 */
|
||||
.select2-selection__arrow b {
|
||||
margin-left: -@padding-small-vertical;
|
||||
}
|
||||
}
|
||||
|
||||
.select2-selection--multiple {
|
||||
min-height: @input-height-small;
|
||||
|
||||
.select2-selection__choice {
|
||||
font-size: @font-size-small;
|
||||
line-height: @line-height-small;
|
||||
margin: (@padding-small-vertical - 1) 0 0 @padding-small-horizontal/2;
|
||||
padding: 0 @padding-small-vertical;
|
||||
}
|
||||
|
||||
.select2-search--inline .select2-search__field {
|
||||
padding: 0 @padding-small-horizontal;
|
||||
font-size: @font-size-small;
|
||||
height: @input-height-small - 2;
|
||||
line-height: @line-height-small;
|
||||
}
|
||||
|
||||
.select2-selection__clear {
|
||||
margin-top: @padding-small-vertical;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select2-search-choice-close {
|
||||
.transition(.25s linear);
|
||||
opacity: 0;
|
||||
left: 7px;
|
||||
&.input-lg,
|
||||
.input-group-lg &,
|
||||
.form-group-lg & {
|
||||
.select2-selection--single {
|
||||
border-radius: @border-radius-large;
|
||||
font-size: @font-size-large;
|
||||
height: @input-height-large;
|
||||
line-height: @line-height-large;
|
||||
padding: @padding-large-vertical @padding-large-horizontal + @caret-width-large*3 @padding-large-vertical @padding-large-horizontal;
|
||||
|
||||
/* 1 */
|
||||
.select2-selection__arrow {
|
||||
width: @caret-width-large;
|
||||
|
||||
b {
|
||||
border-width: @caret-width-large @caret-width-large 0 @caret-width-large;
|
||||
margin-left: -@caret-width-large;
|
||||
margin-left: -@padding-large-vertical;
|
||||
margin-top: -@caret-width-large/2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select2-selection--multiple {
|
||||
min-height: @input-height-large;
|
||||
|
||||
.select2-selection__choice {
|
||||
font-size: @font-size-large;
|
||||
line-height: @line-height-large;
|
||||
border-radius: 4px;
|
||||
margin: (@padding-large-vertical - 1) 0 0 @padding-large-horizontal/2;
|
||||
padding: 0 @padding-large-vertical;
|
||||
}
|
||||
|
||||
.select2-search--inline .select2-search__field {
|
||||
padding: 0 @padding-large-horizontal;
|
||||
font-size: @font-size-large;
|
||||
height: @input-height-large - 2;
|
||||
line-height: @line-height-large;
|
||||
}
|
||||
|
||||
.select2-selection__clear {
|
||||
margin-top: @padding-large-vertical;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.input-lg.select2-container--open {
|
||||
.dropdown-arrow;
|
||||
}
|
||||
|
||||
.input-group-lg & {
|
||||
&.select2-container--open {
|
||||
.dropdown-arrow;
|
||||
}
|
||||
}
|
||||
|
||||
// RTL Support
|
||||
//------------------------------------
|
||||
|
||||
&[dir="rtl"] {
|
||||
|
||||
.select2-selection--single {
|
||||
padding-left: @padding-base-horizontal + @caret-width-base*3;
|
||||
padding-right: @padding-base-horizontal;
|
||||
.select2-selection__rendered {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
text-align: right; /* 1 */
|
||||
}
|
||||
|
||||
.select2-selection__clear {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.select2-selection__arrow {
|
||||
left: @padding-base-horizontal;
|
||||
right: auto;
|
||||
|
||||
b {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select2-selection--multiple {
|
||||
.select2-selection__choice,
|
||||
.select2-selection__placeholder {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.select2-selection__choice {
|
||||
margin-left: 0;
|
||||
margin-right: @padding-base-horizontal/2;
|
||||
}
|
||||
|
||||
.select2-selection__choice__remove {
|
||||
margin-left: 2px;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select2-drop-multi {
|
||||
.select2-no-results {
|
||||
padding: 7px;
|
||||
// Validation
|
||||
//------------------------------------
|
||||
|
||||
.has-warning {
|
||||
.validation-state-focus(@state-warning-text);
|
||||
}
|
||||
|
||||
.has-error {
|
||||
.validation-state-focus(@state-danger-text);
|
||||
}
|
||||
|
||||
.has-success {
|
||||
.validation-state-focus(@state-success-text);
|
||||
}
|
||||
|
||||
// Input groups
|
||||
//------------------------------------
|
||||
|
||||
.input-group .select2-container--default {
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
float: left;
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.input-group.select2-default-prepend .select2-container--default {
|
||||
.select2-selection {
|
||||
.border-left-radius(0);
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Outside Select2 container
|
||||
//
|
||||
|
||||
.select2-drop {
|
||||
.box-shadow(none);
|
||||
border: 1px solid @color-select-border;
|
||||
border-top: none;
|
||||
|
||||
&.select2-drop-above {
|
||||
.box-shadow(none);
|
||||
border: 1px solid @color-select-border;
|
||||
border-bottom: none;
|
||||
.input-group.select2-default-append .select2-container--default {
|
||||
.select2-selection {
|
||||
.border-right-radius(0);
|
||||
}
|
||||
}
|
||||
|
||||
&.select2-drop-active {
|
||||
.border-bottom-radius(@border-radius-base);
|
||||
.select2-default-append,
|
||||
.select2-default-prepend {
|
||||
.select2-container--default,
|
||||
.input-group-btn,
|
||||
.input-group-btn .btn {
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
&.select2-drop-above.select2-drop-active {
|
||||
border-top: 1px solid @color-select-border;
|
||||
.border-bottom-radius(0);
|
||||
}
|
||||
/**
|
||||
* Temporary fix for https://github.com/select2/select2-default-theme/issues/9
|
||||
*
|
||||
* Provides `!important` for certain properties of the class applied to the
|
||||
* original `<select>` element to hide it.
|
||||
*
|
||||
* @see https://github.com/select2/select2/pull/3301
|
||||
* @see https://github.com/fk/select2/commit/31830c7b32cb3d8e1b12d5b434dee40a6e753ada
|
||||
*/
|
||||
|
||||
.select2-search {
|
||||
padding: 0;
|
||||
min-height: 36px;
|
||||
input {
|
||||
min-height: 36px;
|
||||
border: none;
|
||||
border-bottom: 1px solid @color-select-border;
|
||||
background: transparent url('../images/bitmap-icons.png') no-repeat 100% -84px !important;
|
||||
}
|
||||
}
|
||||
.form-control.select2-hidden-accessible {
|
||||
position: absolute !important;
|
||||
width: 1px !important;
|
||||
}
|
||||
|
||||
.select2-results {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
.select2-no-results,
|
||||
.select2-searching,
|
||||
.select2-selection-limit {
|
||||
background: #FFFFFF;
|
||||
}
|
||||
// Inline
|
||||
//------------------------------------
|
||||
|
||||
.select2-no-results {
|
||||
padding: 7px!important;
|
||||
}
|
||||
|
||||
.select2-highlighted {
|
||||
background: @color-select-bg-hover;
|
||||
}
|
||||
|
||||
> li > div {
|
||||
padding: 5px 7px 5px;
|
||||
}
|
||||
}
|
||||
.form-inline .select2-container--default {
|
||||
display: inline-block;
|
||||
}
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
//
|
||||
// Mixins
|
||||
// --------------------------------------------------
|
||||
|
||||
.select-input-defaults() {
|
||||
background-color: @input-bg;
|
||||
border: 1px solid @input-border;
|
||||
border-radius: @input-border-radius;
|
||||
color: @input-color;
|
||||
font-family: @font-family-base;
|
||||
font-size: @input-font-size;
|
||||
}
|
||||
|
||||
.validation-state-focus(@color) {
|
||||
.select2-dropdown,
|
||||
.select2-selection {
|
||||
border-color: @color;
|
||||
}
|
||||
|
||||
.select2-container--focus .select2-selection,
|
||||
.select2-container--open .select2-selection {
|
||||
border-color: darken(@color, 10%);
|
||||
}
|
||||
|
||||
&.select2-drop-active {
|
||||
border-color: darken(@color, 10%);
|
||||
|
||||
&.select2-drop.select2-drop-above {
|
||||
border-top-color: darken(@color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// dropdown arrow when dropdown is open
|
||||
.dropdown-arrow() {
|
||||
.select2-selection--single {
|
||||
//
|
||||
// Make the dropdown arrow point up while the dropdown is visible.
|
||||
//
|
||||
.select2-selection__arrow b {
|
||||
border-color: transparent transparent @color-select-icon transparent;
|
||||
border-width: 0 @caret-width-large @caret-width-large @caret-width-large;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
//
|
||||
// Variables
|
||||
// --------------------------------------------------
|
||||
|
||||
@color-select-icon: #666666;
|
||||
@color-select-border: #b2b9be;
|
||||
@color-select-border-focus: #808c8d;
|
||||
@color-select-bg: #f6f6f6;
|
||||
@color-select-hover-bg: #f5f5f5;
|
||||
@color-select-hover: darken(@gray-dark, 5%);
|
||||
@color-select-active: #fff;
|
||||
@color-select-active-bg: #4da7e8;
|
||||
@color-select-header: @gray-light;
|
||||
@color-select-link-disabled: @gray-light;
|
||||
@color-select-choice-bg: #fff;
|
||||
@color-select-choice-border: #ccc;
|
||||
|
||||
@select-box-shadow: 0 3px 6px rgba(0,0,0,.075);
|
||||
@select-box-shadow-above: 0 -3px 6px rgba(0,0,0,.075);
|
||||
@select-cursor-disabled: not-allowed;
|
||||
Loading…
Reference in New Issue