/* ------------------------------------------------------------------------------ * * # Bootstrap select * * Styles for bootstrap_select.js - custom select boxes plugin * * Version: 1.0 * Latest update: May 25, 2015 * * ---------------------------------------------------------------------------- */ // Core // ------------------------------ .bootstrap-select { width: 100%; // Button > .btn { width: 100%; padding-right: ((@padding-base-horizontal * 2) + 5); &.btn-default { &, &.disabled { background-color: @input-bg; border-color: @input-border; } &:active, .btn-group.open & { border-color: @input-border; } } } // Form control &.form-control { padding: 0; border: 0; &:not([class*="col-"]) { width: 100%; } } // Menu title .popover-title { font-size: @font-size-h6; margin: @list-spacing 0; padding: @padding-base-vertical @padding-base-horizontal; } // Custom border color &[class*=border-] { .btn, .dropdown-menu { border-color: inherit; } } // // Width variations // &:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) { width: 220px; } &.fit-width { width: auto !important; } // // Button group // &.btn-group { &:not(.input-group-btn), &[class*="col-"] { float: none; display: inline-block; margin-left: 0; } // Dropdowns &.dropdown-menu-right, &[class*="col-"].dropdown-menu-right { float: right; } // Disabled > .disabled { cursor: @cursor-disabled; &:focus { outline: 0; } } // Button .btn { // Filter .filter-option { display: inline-block; overflow: hidden; width: 100%; text-align: left; text-overflow: ellipsis; > i { margin-right: @element-horizontal-spacing; } } // Caret .caret { position: absolute; top: 50%; width: @icon-font-size; text-align: right; right: @padding-base-horizontal; margin-top: -(@icon-font-size / 2); } } &[class*="col-"] .btn { width: 100%; } // Button sizes caret .btn-lg > .caret { right: @padding-large-horizontal; } .btn-sm > .caret { right: @padding-small-horizontal; } .btn-xs > .caret { right: @padding-xs-horizontal; } // Dropdown menu .dropdown-menu { min-width: 100%; // Item > li { > a { // Add icon soacing [class*=icon-] { margin-right: @element-horizontal-spacing; } // Check indicator .check-mark { display: none; position: absolute; top: 50%; margin-top: -(@icon-font-size / 2); right: @padding-base-horizontal; margin-right: 0; } // Main text .text { display: inline-block; } // Labels and badges > .label, > .badge { float: none; } // Custom option class &.special-class { &, &:hover { font-weight: 700; color: #fff; background: @brand-danger; } } } // Disabled links &.disabled a { cursor: @cursor-disabled; } // Small inline note small { padding-left: 10px; } } // Active item text > .active > a { small { color: #fff; } } // Inner content &.inner { position: static; border: 0; padding: 0; margin: 0; border-radius: 0; .box-shadow(none); } // Bottom info .notify { position: absolute; bottom: 0; width: 100%; text-align: center; padding: @padding-base-vertical @padding-base-horizontal; background-color: @dropdown-annotation-bg; border-top: 1px solid @dropdown-border; pointer-events: none; } } // Optgroups side spacing .dropdown-header ~ li > a { padding-left: (@padding-base-horizontal * 2); } // If no results .no-results { padding: @padding-base-vertical @padding-base-horizontal; background: @dropdown-annotation-bg; margin-bottom: -(@list-spacing); border-top: 1px solid @dropdown-border; } // Auto width &.fit-width { .btn { .filter-option { position: static; } .caret { position: static; margin-top: -1px; } } } // Show tick &.show-tick .dropdown-menu > li { a .text { margin-right: ((@padding-base-horizontal * 2) + @icon-font-size); } &.active a .check-mark { display: inline-block; } } } } // Error // ------------------------------ .error .bootstrap-select .btn { border: 1px solid @brand-danger; } .control-group.error .bootstrap-select .dropdown-toggle { border-color: @brand-danger; } // Search and action boxes // ------------------------------ // Set paddings .bs-searchbox, .bs-actionsbox { padding: @padding-base-horizontal; padding-top: (@padding-base-horizontal - @list-spacing); } // Search box .bs-searchbox { position: relative; // Add more left space for icon > .form-control { padding-left: @input-height-base; } // Search icon &:after { content: '\e98e'; font-family: 'icomoon'; position: absolute; top: 50%; left: (@padding-base-horizontal * 2); color: inherit; display: block; font-size: @font-size-small; margin-top: ((@padding-base-horizontal / 2) - 2) - ((@font-size-small / 2)) - (@padding-base-horizontal - @list-spacing); line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; .opacity(0.6); } } // Actions box .bs-actionsbox { float: left; width: 100%; position: relative; .btn-group button { width: 50%; } .bs-searchbox + & { padding: 0 @padding-base-horizontal @padding-base-vertical; } } // On mobile .mobile-device { position: absolute; top: 0; left: 0; display: block !important; width: 100%; height: 100% !important; opacity: 0; } select.bs-select-hidden, select.selectpicker { display: none !important; }