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