source: pro-violet-viettel/www/deploy/20150304/assets/css/less/thirdparty-jquery-ui.less @ 782

Last change on this file since 782 was 780, checked in by dungnv, 10 years ago
File size: 6.8 KB
Line 
1.ui-datepicker {
2        background-color:#FFF;
3        border:1px solid rgba(0, 0, 0, 0.2);
4        .box-shadow(@dropdown-shadow);
5       
6        .ui-datepicker-prev , .ui-datepicker-next {
7                height: 26px;
8                min-width: 32px;
9                max-width:32px;
10                text-align: center;
11                cursor:pointer;
12                color:transparent;
13                line-height:26px;
14               
15                .box-sizing(content-box);
16               
17                .ui-icon {
18                        color:transparent;
19                        visibility:hidden;
20                }
21               
22                &:hover {
23                        background-color:#EEE;
24                        text-decoration:none;
25                }
26                &:before {
27                        display:inline;
28                        font-family:FontAwesome;
29                        font-size:14px;
30                        content:"\f060";
31                        color:@text-color;
32                }
33                &-hover {
34                        top:2px;
35                }
36        }
37        .ui-datepicker-next:before {
38                content:"\f061";
39        }
40        .ui-datepicker-prev-hover {
41                left: 2px;
42        }
43        .ui-datepicker-next-hover {
44                right: 2px;
45        }
46       
47       
48       
49        td {
50                padding:0;
51                > a , > span {
52                        display:inline-block;
53                        height: 22px;
54                        min-width: 24px;
55                        max-width:24px;
56                        text-align:center;
57                        color:@text-color;
58                        font-size:@baseFontSize;
59                       
60                        .box-sizing(content-box);
61                }
62                > a {
63                        &:hover {
64                                background-color:#EEE;
65                        }
66                        &.ui-state-highlight {
67                                background-color:#D5E5EF;
68                        }
69                        &.ui-state-active{
70                                background-color:@datepicker-active-bg;
71                                color:#FFF;
72                        }
73                        &.ui-priority-secondary{
74                                color:#888;
75                        }
76                }
77                > span  {
78                        color:#999;
79                }
80               
81                .ui-datepicker-title select {
82                        height:24px;
83                        line-height:24px;
84                        padding:2px 3px;
85                }
86               
87                .ui-datepicker-buttonpane {
88                        background-color:#DDD;
89                        height:1px;
90                }
91        }
92}
93
94
95
96
97/* dialog */
98.ui-widget-overlay  {
99  background:rgba(0,0,0,0.25);
100  .opacity(1) !important;
101  z-index: @zindex-modal-background !important;
102}
103.ui-dialog , .ui-jqdialog {
104  z-index: @zindex-modal !important;
105
106  background-color:#FFF;
107  padding:0;
108  border:1px solid #DDD;
109  .box-shadow(~"0 2px 4px rgba(0, 0, 0, 0.2)");
110
111  .ui-dialog-titlebar , .ui-jqdialog-titlebar {
112        background-color:#F1F1F1;
113        font-size:16px;
114        color:@widget-header-color;
115        padding:0;
116 }
117 .ui-dialog-title , .ui-jqdialog-title {
118        float:none;
119        width:auto;
120 }
121 .widget-header {
122        margin:0;
123        border-width:0 0 1px 0;
124  }
125 
126 
127 .ui-dialog-buttonpane , .ui-jqdialog-buttonpane {
128        background-color:@modal-footer-bg;
129        border-top:1px solid @modal-footer-border;
130        button {
131                font-size:14px;
132        }
133 }
134 
135 .ui-dialog-titlebar-close , .ui-jqdialog-titlebar-close {
136        border:none;
137        background:transparent;
138        opacity:0.4;
139        color:@btn-danger;
140        padding:0;
141        top:50%;
142        right:8px !important;
143        text-align:center;
144       
145        &:before {
146                content:"\f00d";
147                display:inline;
148                font-family:FontAwesome;
149                font-size:16px;
150        }
151        &:hover {
152                opacity:1;
153                text-decoration:none;
154                padding:0;
155        }
156       
157        .ui-button-text {
158                text-indent:0;
159                visibility:hidden;
160        }
161 }
162
163 .widget-header .ui-dialog-titlebar-close , .widget-header .ui-jqdialog-titlebar-close {
164        right:10px !important;
165 }
166
167}
168
169
170
171
172/* accordion */
173.ui-accordion {
174        .ui-accordion-header {
175                color:@accordion-header-text;
176                font-weight:normal;
177                background-color:#F9F9F9;
178
179                border:1px solid @accordion-border;
180
181                padding:8px 8px 9px 24px;
182               
183                &:hover {
184                        color:@accordion-header-text-hover;
185                        background-color:@accordion-header-hover-bg;
186                }
187               
188                &.ui-state-active {
189                        color:@tab-hover-color;
190                        background-color:@accordion-active-bg;
191                        position:relative;
192                        font-weight:bold;
193                }
194               
195                .ui-accordion-header-icon {
196                        text-indent:0;
197                        margin-top:0;
198                       
199                        position:absolute;
200                        left:10px; top:7px;
201                       
202                        &:before {
203                                 display:inline;
204                                 font-family:FontAwesome;
205                                 font-size:15px;
206                                 content:"\f0da";
207                        }
208                }
209                &.ui-state-active .ui-accordion-header-icon:before {
210                        content:"\f0d7";
211                        font-weight:normal;
212                }
213        }
214       
215        .ui-accordion-content {
216                border:1px solid @accordion-border;
217                border-top-width:0;
218                padding:11px 16px;
219        }
220}
221
222
223
224
225
226/* tabs */
227.ui-tabs {
228        .ui-tabs-nav {
229                padding:0;
230                border-bottom:1px solid #C5D0DC;
231                li.ui-state-default > a{
232                        background-color: #F9F9F9;
233                        border: 1px solid #C5D0DC;
234                        border-bottom-width:0;
235                       
236                        color: #999;
237                        line-height: 16px;
238                        margin-right: -1px;
239                        position: relative;
240                        z-index: 11;
241                       
242                        padding:8px 12px;
243                       
244                        position:relative; top:2px;     
245                }
246                li > a:focus {
247                        outline:none;
248                }
249               
250                li.ui-tabs-active > a{
251                        background-color:#FFF;
252                       
253                        border:1px solid;
254                        border-color:#4C8FBD #C5D0DC transparent;
255                        border-top-width:2px;
256                       
257                        .box-shadow(~"0 -2px 3px 0 rgba(0, 0, 0, 0.15)");
258                        color:#576373;
259                       
260                        position:relative; top:1px;
261                }
262        }
263       
264        .ui-tabs-panel {
265                border:1px solid #C5D0DC;
266                border-top-width:0;
267                margin:0;
268                left:auto; right:auto;
269                top:auto; bottom:auto;
270        }
271}
272
273
274
275
276
277
278
279/* menu */
280.ui-menu {
281        .box-sizing(content-box);
282
283        width:150px;
284        .box-shadow(@dropdown-shadow);
285        background-color:#FFF;
286        border:1px solid rgba(0, 0, 0, 0.2);
287        padding:3px;
288       
289        .ui-menu-item a {
290                padding:4px 7px 5px;
291                color:#444;
292                cursor:pointer;
293               
294                .box-sizing(inherit);
295               
296                .ui-menu-icon {
297                        float:right;
298                        position:relative;
299                        top:0;
300                        left:auto;
301                        right:auto;
302                        bottom:auto;
303                        text-indent:0;
304
305                        &:before {
306                                content:"\f105";
307                                font-family:FontAwesome;
308                                font-size:14px;
309                                display:inline;
310                        }
311                }
312               
313                &:hover, &.ui-state-focus , &.ui-state-active {
314                        background-color:@dropdown-menu;
315                        color:#FFF;
316                        margin: auto;
317                        font-weight:normal;     
318
319                        .ui-menu-icon {
320                                color:#FFF;
321                        }
322                }
323        }
324        .ui-state-disabled a{
325                color:#999;
326                cursor:default;
327                &:hover, &.ui-state-focus , &.ui-state-active {
328                        background-color:#FFF;
329                        color:#999;
330                }
331        }       
332}
333
334
335
336/* auto complete */
337.ui-autocomplete {
338        background-color:#FFF;
339        border:1px solid rgba(0, 0, 0, 0.2);
340        .box-shadow(@dropdown-shadow);
341}
342.ui-autocomplete-category {
343        padding:6px;
344        position:relative;
345        background-color:@accordion-active-bg;
346        color:@ace-blue;
347        font-weight:bolder;
348        border:1px solid #DAE6ED;
349        border-width:1px 0;
350}
351
352
353
354
355
356
357
358
359
360/* spinner */
361.ui-spinner-button {
362    border-width:0 !important;
363    font-size: 10px;
364    height: 14px;
365    line-height: 14px;
366    padding: 0;
367    width: 18px;
368
369        color: #FFFFFF !important;
370        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25) !important;
371       
372        display:inline-block;
373        position:absolute;
374        text-align:center;
375        padding:0;
376
377         > [class*="icon-"] {
378                width:18px;
379                display:inline-block;
380        }
381}
382.ui-spinner-up {
383        top:0;
384        right:5px;
385}
386.ui-spinner-down {
387        bottom:3px;
388        right:5px;
389}
390
391
392.ui-spinner-input {
393        margin-top:0;
394        padding:5px;
395        max-width:100px;
396        font-size:14px;
397}
398
399
400
401
402
403.ui-tooltip {
404        background-color:#444;
405        color:#FFF;
406}
407
408.ui-progressbar {
409        background-color: @progress-bg;
410        height:22px;
411        .ui-progressbar-value {
412                margin:0;
413               
414                &[class="progress-bar"] {
415                        background-color:@progress-color;
416                }
417        }
418}
419
Note: See TracBrowser for help on using the repository browser.