/
selectize.bootstrap2.less
147 lines (134 loc) · 4.72 KB
/
selectize.bootstrap2.less
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
@import "lib/bootstrap2/variables.less";
@import "lib/bootstrap2/mixins.less";
@import "selectize";
@selectize-font-family: @baseFontFamily;
@selectize-font-size: @baseFontSize;
@selectize-line-height: @baseLineHeight;
@selectize-color-text: @textColor;
@selectize-color-highlight: rgba(255,237,40,0.4);
@selectize-color-input: @inputBackground;
@selectize-color-input-full: @inputBackground;
@selectize-color-disabled: @inputBackground;
@selectize-color-item: @btnBackgroundHighlight;
@selectize-color-item-border: @btnBorder;
@selectize-color-item-active: @dropdownLinkBackgroundHover;
@selectize-color-item-active-text: @dropdownLinkColorHover;
@selectize-color-item-active-border: darken(@selectize-color-item-active, 5%);
@selectize-color-optgroup: @dropdownBackground;
@selectize-color-optgroup-text: @grayLight;
@selectize-color-optgroup-border: @dropdownDividerTop;
@selectize-color-dropdown: @dropdownBackground;
@selectize-color-dropdown-border: @inputBorder;
@selectize-color-dropdown-border-top: @dropdownDividerTop;
@selectize-color-dropdown-item-active: @dropdownLinkBackgroundHover;
@selectize-color-dropdown-item-active-text: @dropdownLinkColorHover;
@selectize-color-dropdown-item-create-active-text: @dropdownLinkColorHover;
@selectize-lighten-disabled-item: 8%;
@selectize-lighten-disabled-item-text: 8%;
@selectize-lighten-disabled-item-border: 8%;
@selectize-opacity-disabled: 0.5;
@selectize-shadow-input: none;
@selectize-shadow-input-focus: inset 0 1px 2px rgba(0,0,0,0.15);
@selectize-border-radius: @inputBorderRadius;
@selectize-padding-x: 10px;
@selectize-padding-y: 7px;
@selectize-padding-dropdown-item-x: @selectize-padding-x;
@selectize-padding-dropdown-item-y: 3px;
@selectize-padding-item-x: 3px;
@selectize-padding-item-y: 1px;
@selectize-margin-item-x: 3px;
@selectize-margin-item-y: 3px;
@selectize-caret-margin: 0;
@selectize-arrow-size: 5px;
@selectize-arrow-color: @black;
@selectize-arrow-offset: @selectize-padding-x + 5px;
@selectize-width-item-border: 1px;
.selectize-dropdown {
margin: 2px 0 0 0;
z-index: @zindexDropdown;
border: 1px solid @dropdownBorder;
border-radius: @baseBorderRadius;
.box-shadow(0 5px 10px rgba(0,0,0,.2));
.optgroup-header {
font-size: 11px;
font-weight: bold;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
text-transform: uppercase;
}
.optgroup:first-child:before {
display: none;
}
.optgroup:before {
content: ' ';
display: block;
.nav-divider();
margin-left: @selectize-padding-dropdown-item-x * -1;
margin-right: @selectize-padding-dropdown-item-x * -1;
}
[data-selectable].active {
#gradient > .vertical(@dropdownLinkBackgroundHover, darken(@dropdownLinkBackgroundHover, 5%));
}
}
.selectize-dropdown-content {
padding: 5px 0;
}
.selectize-dropdown-header {
padding: @selectize-padding-dropdown-item-y * 2 @selectize-padding-dropdown-item-x;
}
.selectize-input {
.transition(~"border linear .2s, box-shadow linear .2s");
&.dropdown-active {
.selectize-border-radius(@selectize-border-radius);
}
&.dropdown-active::before {
display: none;
}
&.input-active, &.input-active:hover, .selectize-control.multi &.focus {
background: @selectize-color-input !important;
border-color: rgba(82,168,236,.8) !important;
outline: 0 !important;
outline: thin dotted \9 !important;
.box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)") !important;
}
}
.selectize-control {
&.single {
.selectize-input {
.buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, 0 1px 1px rgba(255,255,255,.75));
.box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
&:hover {
color: @grayDark;
text-decoration: none;
background-position: 0 -15px;
.transition(background-position .1s linear);
}
&.disabled {
background: @btnBackgroundHighlight !important;
.box-shadow(none);
}
}
}
&.multi {
.selectize-input {
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
&.has-items {
@padding-x: @selectize-padding-x - @selectize-padding-item-x;
padding-left: @padding-x;
padding-right: @padding-x;
}
}
.selectize-input > div {
.gradientBar(@btnBackground, @btnBackgroundHighlight, @selectize-color-item-text, none);
*background-color: @selectize-color-item;
border: @selectize-width-item-border solid @selectize-color-item-border;
.border-radius(@baseBorderRadius);
.box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
&.active {
.box-shadow(~"0 1px 2px rgba(0,0,0,.05)");
.gradientBar(@selectize-color-item-active, @selectize-color-item-active-border, @selectize-color-item-active-text, none);
*background-color: @selectize-color-item-active;
border: @selectize-width-item-border solid @dropdownLinkBackgroundHover;
}
}
}
}