typeahead.less (4072B)
- /*
- * typehead.js-bootstrap3.less
- * @version 0.2.3
- * https://github.com/hyspace/typeahead.js-bootstrap3.less
- *
- * Licensed under the MIT license:
- * http://www.opensource.org/licenses/MIT
- */
- //custom mixin for .form-control-validation
- .typeahead-form-control(@border-color: #ccc;) {
- 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);
- }
- }
- //main styles for control
- .tt-input,
- .tt-hint {
- .twitter-typeahead &{
- //validation states
- .has-warning &{
- .typeahead-form-control(@state-warning-text);
- }
- .has-error &{
- .typeahead-form-control(@state-danger-text);
- }
- .has-success &{
- .typeahead-form-control(@state-success-text);
- }
- }
- //border
- .input-group .twitter-typeahead:first-child &{
- .border-left-radius(@border-radius-base);
- }
- .input-group .twitter-typeahead:last-child &{
- .border-right-radius(@border-radius-base);
- }
- //sizing - small:size and border
- .input-group.input-group-sm .twitter-typeahead &{
- .input-size(@input-height-small; @padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small);
- }
- .input-group.input-group-sm .twitter-typeahead:not(:first-child):not(:last-child) &{
- border-radius: 0;
- }
- .input-group.input-group-sm .twitter-typeahead:first-child &{
- .border-left-radius(@border-radius-small);
- .border-right-radius(0);
- }
- .input-group.input-group-sm .twitter-typeahead:last-child &{
- .border-left-radius(0);
- .border-right-radius(@border-radius-small);
- }
- //sizing - large:size and border
- .input-group.input-group-lg .twitter-typeahead &{
- .input-size(@input-height-large; @padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large);
- }
- .input-group.input-group-lg .twitter-typeahead:not(:first-child):not(:last-child) &{
- border-radius: 0;
- }
- .input-group.input-group-lg .twitter-typeahead:first-child &{
- .border-left-radius(@border-radius-large);
- .border-right-radius(0);
- }
- .input-group.input-group-lg .twitter-typeahead:last-child &{
- .border-left-radius(0);
- .border-right-radius(@border-radius-large);
- }
- }
- //for wrapper
- .twitter-typeahead {
- width: 100%;
- .input-group &{
- //overwrite `display:inline-block` style
- display: table-cell!important;
- float: left;
- }
- }
- //particular style for each other
- .twitter-typeahead .tt-hint {
- color: @text-muted;//color - hint
- }
- .twitter-typeahead .tt-input {
- z-index: 2;
- //disabled status
- //overwrite inline styles of .tt-query
- &[disabled],
- &[readonly],
- fieldset[disabled] & {
- cursor: not-allowed;
- //overwirte inline style
- background-color: @input-bg-disabled!important;
- }
- }
- //dropdown styles
- .tt-dropdown-menu {
- //dropdown menu
- position: absolute;
- top: 100%;
- left: 0;
- z-index: @zindex-dropdown;
- min-width: 160px;
- width: 100%;
- padding: 5px 0;
- margin: 2px 0 0;
- list-style: none;
- font-size: @font-size-base;
- background-color: @dropdown-bg;
- border: 1px solid @dropdown-fallback-border;
- border: 1px solid @dropdown-border;
- border-radius: @border-radius-base;
- .box-shadow(0 6px 12px rgba(0,0,0,.175));
- background-clip: padding-box;
- *border-right-width: 2px;
- *border-bottom-width: 2px;
- .tt-suggestion {
- //item
- display: block;
- padding: 3px 20px;
- clear: both;
- font-weight: normal;
- line-height: @line-height-base;
- color: @dropdown-link-color;
- white-space: nowrap;
- text-align: left;
- cursor: pointer !important;
- &.tt-cursor {
- //item selected
- text-decoration: none;
- outline: 0;
- background-color: @dropdown-link-hover-bg;
- color: @dropdown-link-hover-color;
- a {
- //link in item selected
- color: @dropdown-link-hover-color;
- }
- }
- p {
- margin: 0;
- }
- }
- }