docs/resources/themes/stylesheets/ext4/default/widgets/form/_triggerfield.scss

   1 @mixin extjs-form-triggerfield {
   2         .#{$prefix}form-trigger-wrap {
   3         float: left;
   4     }
   5
   6     .#{$prefix}form-trigger {
   7         background-image: theme-image($theme-name, 'form/trigger.gif');
   8                 background-position: 0 0;
   9
  10                 width: $form-trigger-width;
  11                 height: $form-trigger-height - $form-trigger-border-bottom-width;
  12                 float: left;
  13
  14                 border-bottom: $form-trigger-border-bottom;
  15
  16         cursor: pointer;
  17         cursor: hand;
  18     }
  19
  20     .#{$prefix}border-box .#{$prefix}form-trigger {
  21         height: $form-trigger-height;
  22     }
  23
  24     .#{$prefix}field-default-toolbar .#{$prefix}form-trigger {
  25         height: $form-toolbar-trigger-height - $form-trigger-border-bottom-width;
  26     }
  27
  28     .#{$prefix}border-box .#{$prefix}field-default-toolbar .#{$prefix}form-trigger {
  29         height: $form-toolbar-trigger-height;
  30     }
  31
  32
  33     .#{$prefix}form-trigger-over {
  34                 background-position: -$form-trigger-width 0;
  35
  36                 border-bottom-color: $form-trigger-border-bottom-color-over;
  37     }
  38
  39     .#{$prefix}form-trigger-wrap-focus .#{$prefix}form-trigger {
  40                 background-position: -($form-trigger-width * 3) 0;
  41
  42                 border-bottom-color: $form-trigger-border-bottom-color-focus;
  43     }
  44
  45     .#{$prefix}form-trigger-wrap-focus .#{$prefix}form-trigger-over {
  46         background-position: -($form-trigger-width * 4) 0;
  47
  48         @if $form-trigger-border-bottom-color-focus-over {
  49             border-bottom-color: $form-trigger-border-bottom-color-focus-over;
  50         }
  51     }
  52
  53     .#{$prefix}form-trigger-click,
  54     .#{$prefix}form-trigger-wrap-focus .#{$prefix}form-trigger-click {
  55                 background-position: -($form-trigger-width * 2) 0;
  56
  57                 @if $form-trigger-border-bottom-color-pressed {
  58                 border-bottom-color: $form-trigger-border-bottom-color-pressed;
  59         }
  60     }
  61
  62     .#{$prefix}form-trigger-icon {
  63         height: $form-trigger-width - $form-trigger-border-bottom-width;
  64
  65         background-repeat: no-repeat;
  66         background-position: $form-trigger-icon-background-position;
  67     }
  68
  69     .#{$prefix}pickerfield-open {
  70         .#{$prefix}form-field {
  71             @include border-bottom-radius(0);
  72         }
  73     }
  74
  75     .#{$prefix}pickerfield-open-above {
  76         .#{$prefix}form-field {
  77             @include border-bottom-left-radius(3px);
  78             @include border-top-radius(0);
  79         }
  80     }
  81
  82     .#{$prefix}form-arrow-trigger {
  83         .#{$prefix}form-trigger-icon {
  84             background-image: theme-image($theme-name, 'boundlist/trigger-arrow.png');
  85         }
  86     }
  87
  88     .#{$prefix}form-date-trigger {
  89         background-image: theme-image($theme-name, 'form/date-trigger.gif');
  90     }
  91
  92     $spinner-btn-height: $form-trigger-height / 2;
  93     .#{$prefix}form-trigger-wrap {
  94         .#{$prefix}form-spinner-up,
  95         .#{$prefix}form-spinner-down {
  96             background-image: theme-image($theme-name, 'form/spinner.gif');
  97
  98             width: $form-trigger-width;
  99             height: $spinner-btn-height;
 100
 101             font-size: 0; /*for IE*/
 102
 103             border-bottom: 0;
 104         }
 105         .#{$prefix}form-spinner-down {
 106             background-position: 0 (-$spinner-btn-height);
 107         }
 108     }
 109     .#{$prefix}form-trigger-wrap-focus .#{$prefix}form-spinner-down {
 110         background-position: -($form-trigger-width * 3) (-$spinner-btn-height);
 111     }
 112     .#{$prefix}form-trigger-wrap .#{$prefix}form-spinner-down-over {
 113         background-position: (-$form-trigger-width) (-$spinner-btn-height);
 114     }
 115     .#{$prefix}form-trigger-wrap-focus .#{$prefix}form-spinner-down-over {
 116         background-position: -($form-trigger-width * 4) (-$spinner-btn-height);
 117     }
 118     .#{$prefix}form-trigger-wrap .#{$prefix}form-spinner-down-click {
 119         background-position: -($form-trigger-width * 2) (-$spinner-btn-height);
 120     }
 121
 122
 123     .#{$prefix}field-default-toolbar {
 124         $spinner-btn-height: $form-toolbar-trigger-height / 2;
 125         .#{$prefix}form-trigger-wrap {
 126             .#{$prefix}form-spinner-up,
 127             .#{$prefix}form-spinner-down {
 128                    background-image: theme-image($theme-name, 'form/spinner-small.gif');
 129                 height: $spinner-btn-height;
 130             }
 131             .#{$prefix}form-spinner-down {
 132                 background-position: 0 (-$spinner-btn-height);
 133             }
 134         }
 135         .#{$prefix}form-trigger-wrap-focus .#{$prefix}form-spinner-down {
 136             background-position: -($form-trigger-width * 3) (-$spinner-btn-height);
 137         }
 138         .#{$prefix}form-trigger-wrap .#{$prefix}form-spinner-down-over {
 139             background-position: (-$form-trigger-width) (-$spinner-btn-height);
 140         }
 141         .#{$prefix}form-trigger-wrap-focus .#{$prefix}form-spinner-down-over {
 142             background-position: -($form-trigger-width * 4) (-$spinner-btn-height);
 143         }
 144         .#{$prefix}form-trigger-wrap .#{$prefix}form-spinner-down-click {
 145             background-position: -($form-trigger-width * 2) (-$spinner-btn-height);
 146         }
 147     }
 148
 149
 150     .#{$prefix}trigger-noedit {
 151         cursor: pointer;
 152         cursor: hand;
 153     }
 154
 155
 156     .#{$prefix}form-clear-trigger {
 157         background-image: theme-image($theme-name, 'form/clear-trigger.gif');
 158     }
 159     .#{$prefix}form-search-trigger {
 160         background-image: theme-image($theme-name, 'form/search-trigger.gif');
 161     }
 162 }