diff --git a/modules/system/assets/ui/js/inspector.js b/modules/system/assets/ui/js/inspector.js index ee80228bd..9d090cb41 100644 --- a/modules/system/assets/ui/js/inspector.js +++ b/modules/system/assets/ui/js/inspector.js @@ -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, diff --git a/modules/system/assets/ui/js/select.js b/modules/system/assets/ui/js/select.js index 534ce5161..823304126 100644 --- a/modules/system/assets/ui/js/select.js +++ b/modules/system/assets/ui/js/select.js @@ -1,6 +1,6 @@ /* =require ../vendor/modernizr/modernizr.js -=require ../vendor/select2/select2.js +=require ../vendor/select2/js/select2.full.js */ /* diff --git a/modules/system/assets/ui/less/form.base.less b/modules/system/assets/ui/less/form.base.less index f607b8509..c3401a636 100644 --- a/modules/system/assets/ui/less/form.base.less +++ b/modules/system/assets/ui/less/form.base.less @@ -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); + } } diff --git a/modules/system/assets/ui/less/form.less b/modules/system/assets/ui/less/form.less index 81c546507..f35219722 100644 --- a/modules/system/assets/ui/less/form.less +++ b/modules/system/assets/ui/less/form.less @@ -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; } diff --git a/modules/system/assets/ui/less/form.mixins.less b/modules/system/assets/ui/less/form.mixins.less index a532abb79..8793ccbe9 100644 --- a/modules/system/assets/ui/less/form.mixins.less +++ b/modules/system/assets/ui/less/form.mixins.less @@ -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}"); } } diff --git a/modules/system/assets/ui/less/form.variables.less b/modules/system/assets/ui/less/form.variables.less index b96de3717..16e473f18 100644 --- a/modules/system/assets/ui/less/form.variables.less +++ b/modules/system/assets/ui/less/form.variables.less @@ -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; diff --git a/modules/system/assets/ui/less/inspector.less b/modules/system/assets/ui/less/inspector.less index adffba920..bd6d25595 100644 --- a/modules/system/assets/ui/less/inspector.less +++ b/modules/system/assets/ui/less/inspector.less @@ -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; - } - } } } \ No newline at end of file diff --git a/modules/system/assets/ui/less/select.less b/modules/system/assets/ui/less/select.less index 28c5d93fc..23cb54e6e 100644 --- a/modules/system/assets/ui/less/select.less +++ b/modules/system/assets/ui/less/select.less @@ -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 `