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