1/**
2 * Creates the base structure of trigger field.
3 * @member Ext.form.field.Trigger
4 */
5@mixin extjs-form-triggerfield {
6    .#{$prefix}form-trigger-wrap {
7        vertical-align: top;
8    }
9
10    .#{$prefix}form-trigger {
11        background-image: theme-background-image($theme-name, 'form/trigger.gif');
12		background-position: 0 0;
13
14		width: $form-trigger-width;
15		height: $form-trigger-height - $form-trigger-border-bottom-width;
16
17		border-bottom: $form-trigger-border-bottom;
18
19        cursor: pointer;
20        cursor: hand;
21        overflow: hidden;
22    }
23
24    .#{$prefix}border-box .#{$prefix}form-trigger {
25        height: $form-trigger-height;
26    }
27
28    .#{$prefix}field-default-toolbar .#{$prefix}form-trigger {
29        height: $form-toolbar-trigger-height - $form-trigger-border-bottom-width;
30    }
31
32    .#{$prefix}border-box .#{$prefix}field-default-toolbar .#{$prefix}form-trigger {
33        height: $form-toolbar-trigger-height;
34    }
35
36
37    .#{$prefix}form-trigger-over {
38		background-position: -$form-trigger-width 0;
39
40		border-bottom-color: $form-trigger-border-bottom-color-over;
41    }
42
43    .#{$prefix}form-trigger-wrap-focus .#{$prefix}form-trigger {
44		background-position: -($form-trigger-width * 3) 0;
45
46		border-bottom-color: $form-trigger-border-bottom-color-focus;
47    }
48
49    .#{$prefix}form-trigger-wrap-focus .#{$prefix}form-trigger-over {
50        background-position: -($form-trigger-width * 4) 0;
51
52        @if $form-trigger-border-bottom-color-focus-over {
53            border-bottom-color: $form-trigger-border-bottom-color-focus-over;
54        }
55    }
56
57    .#{$prefix}form-trigger-click,
58    .#{$prefix}form-trigger-wrap-focus .#{$prefix}form-trigger-click {
59		background-position: -($form-trigger-width * 2) 0;
60
61		@if $form-trigger-border-bottom-color-pressed {
62    		border-bottom-color: $form-trigger-border-bottom-color-pressed;
63    	}
64    }
65
66    .#{$prefix}form-trigger-icon {
67        height: $form-trigger-width - $form-trigger-border-bottom-width;
68
69        background-repeat: no-repeat;
70        background-position: $form-trigger-icon-background-position;
71    }
72
73    .#{$prefix}pickerfield-open {
74        .#{$prefix}form-field {
75            @include border-bottom-radius(0);
76        }
77    }
78
79    .#{$prefix}pickerfield-open-above {
80        .#{$prefix}form-field {
81            @include border-bottom-left-radius(3px);
82            @include border-top-radius(0);
83        }
84    }
85
86    .#{$prefix}form-arrow-trigger {
87        .#{$prefix}form-trigger-icon {
88            background-image: theme-background-image($theme-name, 'boundlist/trigger-arrow.png');
89        }
90    }
91
92    .#{$prefix}form-date-trigger {
93        background-image: theme-background-image($theme-name, 'form/date-trigger.gif');
94    }
95
96    $spinner-btn-height: $form-trigger-height / 2;
97    .#{$prefix}form-trigger-wrap {
98        .#{$prefix}form-spinner-up,
99        .#{$prefix}form-spinner-down {
100            background-image: theme-background-image($theme-name, 'form/spinner.gif');
101
102            width: $form-trigger-width !important;
103            height: $spinner-btn-height !important;
104
105            font-size: 0; /*for IE*/
106
107            border-bottom: 0;
108        }
109        .#{$prefix}form-spinner-down {
110            background-position: 0 (-$spinner-btn-height);
111        }
112    }
113    .#{$prefix}form-trigger-wrap-focus .#{$prefix}form-spinner-down {
114        background-position: -($form-trigger-width * 3) (-$spinner-btn-height);
115    }
116    .#{$prefix}form-trigger-wrap .#{$prefix}form-spinner-down-over {
117        background-position: (-$form-trigger-width) (-$spinner-btn-height);
118    }
119    .#{$prefix}form-trigger-wrap-focus .#{$prefix}form-spinner-down-over {
120        background-position: -($form-trigger-width * 4) (-$spinner-btn-height);
121    }
122    .#{$prefix}form-trigger-wrap .#{$prefix}form-spinner-down-click {
123        background-position: -($form-trigger-width * 2) (-$spinner-btn-height);
124    }
125
126
127    .#{$prefix}field-default-toolbar {
128        $spinner-btn-height: $form-toolbar-trigger-height / 2;
129        .#{$prefix}form-trigger-wrap {
130            .#{$prefix}form-spinner-up,
131            .#{$prefix}form-spinner-down {
132               background-image: theme-background-image($theme-name, 'form/spinner-small.gif');
133                height: $spinner-btn-height !important;
134            }
135            .#{$prefix}form-spinner-down {
136                background-position: 0 (-$spinner-btn-height);
137            }
138        }
139        .#{$prefix}form-trigger-wrap-focus .#{$prefix}form-spinner-down {
140            background-position: -($form-trigger-width * 3) (-$spinner-btn-height);
141        }
142        .#{$prefix}form-trigger-wrap .#{$prefix}form-spinner-down-over {
143            background-position: (-$form-trigger-width) (-$spinner-btn-height);
144        }
145        .#{$prefix}form-trigger-wrap-focus .#{$prefix}form-spinner-down-over {
146            background-position: -($form-trigger-width * 4) (-$spinner-btn-height);
147        }
148        .#{$prefix}form-trigger-wrap .#{$prefix}form-spinner-down-click {
149            background-position: -($form-trigger-width * 2) (-$spinner-btn-height);
150        }
151    }
152
153
154    .#{$prefix}trigger-noedit {
155        cursor: pointer;
156        cursor: hand;
157    }
158
159    .#{$prefix}item-disabled {
160        .#{$prefix}trigger-noedit, .#{$prefix}form-trigger {
161          cursor: auto;
162        }
163    }
164
165
166    .#{$prefix}form-clear-trigger {
167        background-image: theme-background-image($theme-name, 'form/clear-trigger.gif');
168    }
169    .#{$prefix}form-search-trigger {
170        background-image: theme-background-image($theme-name, 'form/search-trigger.gif');
171    }
172
173    @if $include-ie {
174        // in IE6 quirks, the table cell enclosing the trigger field's input element does not shrink to fit,
175        // so it is necessary to set the height of the table cell.
176        .#{$prefix}quirks .#{prefix}ie6 {
177            .#{$prefix}form-trigger-input-cell {
178                height: $form-field-height;
179            }
180            .#{$prefix}field-default-toolbar .#{$prefix}form-trigger-input-cell {
181                height: $form-toolbar-field-height;
182            }
183        }
184    }
185}
186