/* ------------------------------------------------------------------------------ * * # SelectBoxIt * * Styles for selectbox.js - custom select boxes plugin * * Version: 1.0 * Latest update: May 25, 2015 * * ---------------------------------------------------------------------------- */ /* # Core -------------------------------------------------- */ // SelectBoxIt container .selectboxit-container { position: relative; display: inline-block; vertical-align: middle; width: 100%; border-radius: @input-border-radius; // All children elements * { -webkit-touch-callout: none; outline: 0; white-space: nowrap; .user-select(none); } // Button .selectboxit { width: 100%; cursor: pointer; margin: 0; padding: 0; overflow: hidden; position: relative; height: @input-height-base; padding: @padding-base-vertical @padding-base-horizontal; padding-right: ((@padding-base-horizontal * 2) + 5); &:focus { outline: 0; } } span, .selectboxit-options a { display: block; } // Options list .selectboxit-options { width: 100%; min-width: 200px; max-height: 250px; margin: 0; padding: @list-spacing 1px; list-style: none; position: absolute; overflow-x: hidden; overflow-y: auto; cursor: pointer; display: none; z-index: 999; text-align: left; border-radius: @border-radius-base; } } // Disabled mouse interaction .selectboxit.selectboxit-disabled, .selectboxit-options .selectboxit-disabled { &, &:hover, &:focus { cursor: @cursor-disabled; .box-shadow(none); .opacity(0.65); } } // Hide original select .selectboxit-rendering { display: inline-block !important; visibility: visible !important; position: absolute !important; top: -9999px !important; left: -9999px !important; } // Dropdown menu .selectboxit-list { background-color: @dropdown-bg; border: 1px solid @dropdown-border; // Link .selectboxit-option-anchor { color: @dropdown-link-color; } // Focused link > .selectboxit-focus > .selectboxit-option-anchor { display: block; background-color: @dropdown-link-hover-bg; } // Disabled link > .selectboxit-disabled > .selectboxit-option-anchor { color: @dropdown-link-disabled-color; cursor: @cursor-disabled; } // Custom border color .selectbox-container[class*=border-] > & { border-color: inherit; } // Solid color .selectbox-container[class*=bg-] > & { background-color: inherit; border-color: inherit; .selectboxit-option-anchor { color: #fff; } > .selectboxit-focus .selectboxit-option-anchor { background-color: fade(#000, 10%); } } } // Buttons // ------------------------------ // Button .selectboxit-btn { background-color: @input-bg; border: 1px solid @input-border; color: @input-color; border-radius: @input-border-radius; // When hovered &:hover { .box-shadow(0 0 0 100px fade(#000, 1%) inset); } // When opened &.selectboxit-open, &:focus { .box-shadow(0 0 0 100px fade(#000, 2%) inset); } // Inherit colors if custom bg color .selectboxit-container[class*=bg-] & { background-color: inherit; border-color: inherit; color: inherit; } // Inherit border color if custom bg color .selectboxit-container[class*=border-] & { border-color: inherit; } // Darken on hover and focus &[class*=bg-], .selectboxit-container[class*=bg-] & { &:hover { .box-shadow(0 0 0 100px fade(#000, 5%) inset); } &.selectboxit-open, &:focus { .box-shadow(0 0 0 100px fade(#000, 10%) inset); } } } // Button text .selectboxit-text { display: inline-block; overflow: hidden; text-overflow: ellipsis; float: left; } // Arrow .selectboxit-default-arrow { position: relative; font-style: normal; &:after { content: '\e9c5'; display: block; font-family: 'icomoon'; font-size: @icon-font-size; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .selectboxit-open &:after { content: '\e9c6'; } } // Image .selectboxit-option-icon-url { border-radius: @border-radius-small; background-repeat: no-repeat; background-position: center; display: block; margin-top: 3px; margin-right: 10px; } // Options // ------------------------------ // Individual option .selectboxit-option { margin: 0; list-style-type: none; .selectboxit-option-anchor{ padding: @padding-base-vertical @padding-base-horizontal; } } // Optgroup header .selectboxit-optgroup-header { margin: 0; list-style-type: none; padding: @padding-base-vertical @padding-base-horizontal; font-weight: 700; color: @text-color; font-size: @font-size-mini; line-height: @line-height-mini; text-transform: uppercase; &:hover { cursor: default; } } // Optgroup option .selectboxit-optgroup-option .selectboxit-option-anchor { padding-left: (@padding-base-horizontal * 2); padding-right: (@padding-base-horizontal * 2); } // Dropdown arrow container .selectboxit-arrow-container { position: absolute; top: 50%; width: @icon-font-size; right: @padding-base-horizontal; margin-top: -(@icon-font-size / 2); text-align: right; line-height: 1; .selectboxit-arrow { margin-top: 0; &[class*=icon-] { top: 0; } } } // Dropdown individual option icon positioning .selectboxit-option-icon-container { float: left; // Icon > [class*=icon-] { margin-right: 10px; width: auto; } // Image .selectboxit-option-icon-url { height: @icon-font-size; width: @icon-font-size; background-size: @icon-font-size @icon-font-size; margin-top: 2px; } } // Options border radius .selectboxit-option-first { .border-top-radius(@border-radius-base - 1); } .selectboxit-optgroup-header + .selectboxit-option-first { .border-top-radius(0); } .selectboxit-option-last { .border-bottom-radius(@border-radius-base - 1); } /* # Sizing -------------------------------------------------- */ // Horizontal // ------------------------------ // Fixed width .selectbox-fixed { & + .selectboxit-container, & + .selectboxit-options { width: 250px; } } // Auto width .selectbox-auto { & + .selectboxit-container, & + .selectboxit-options { width: auto; } } // Vertical // ------------------------------ // Large .selectbox-lg + .selectboxit-container .selectboxit { padding: @padding-large-vertical @padding-large-horizontal; padding-right: (@padding-large-horizontal * 2); height: @input-height-large; font-size: @font-size-large; .selectboxit-arrow-container { right: @padding-large-horizontal; } } // Small .selectbox-sm + .selectboxit-container .selectboxit { padding: @padding-small-vertical @padding-small-horizontal; padding-right: (@padding-small-horizontal * 2); height: @input-height-small; .selectboxit-arrow-container { right: @padding-small-horizontal; } } // Mini .selectbox-xs + .selectboxit-container .selectboxit { padding: @padding-xs-vertical @padding-xs-horizontal; padding-right: ((@padding-xs-horizontal * 2) + 5); height: @input-height-mini; font-size: @font-size-small; line-height: @line-height-small; .selectboxit-arrow-container { right: @padding-xs-horizontal; } }