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

   1 @mixin extjs-form-field {
   2     .#{$prefix}form-field,
   3     .#{$prefix}form-display-field {
   4         float: left;
   5
   6         margin: 0 0 0 0;
   7
   8         font: $form-field-font;
   9         color: $form-field-color;
  10     }
  11
  12     .#{$prefix}form-text,
  13     textarea.#{$prefix}form-field {
  14         padding: $form-field-padding;
  15
  16         background: repeat-x 0 0;
  17         border: $form-field-border-width solid;
  18
  19         background-color: $form-field-background-color;
  20         @if $form-field-background-image {
  21             background-image: theme-image($theme-name, $form-field-background-image);
  22         }
  23
  24         border-color: $form-field-border-color;
  25     }
  26
  27     $form-field-content-height: $form-field-height - top($form-field-padding) - top($form-field-border-width) - bottom($form-field-padding) - bottom($form-field-border-width);
  28
  29     .#{$prefix}form-text {
  30         height: $form-field-content-height;
  31         line-height: $form-field-content-height;
  32         vertical-align: middle;
  33     }
  34
  35     .#{$prefix}ie6,
  36     .#{$prefix}ie7,
  37     .#{$prefix}ie8 {
  38         .#{$prefix}form-text {
  39             line-height: $form-field-content-height - 3px;
  40         }
  41     }
  42
  43     .#{$prefix}border-box .#{$prefix}form-text {
  44         height: $form-field-height;
  45     }
  46
  47     textarea.#{$prefix}form-field {
  48         color: $form-field-color;
  49         overflow: auto;
  50         height: auto;
  51         line-height: normal;
  52         background: repeat-x 0 0;
  53         background-color: $form-field-background-color;
  54         @if $form-field-background-image {
  55             background-image: theme-image($theme-name, $form-field-background-image);
  56         }
  57         resize: none; //Disable browser resizable textarea
  58     }
  59
  60     .#{$prefix}border-box textarea.#{$prefix}form-field {
  61         height: auto;
  62     }
  63
  64     @if $include-safari {
  65         .#{$prefix}safari.#{$prefix}mac textarea.#{$prefix}form-field {
  66             margin-bottom: -2px; // another bogus margin bug, safari/mac only
  67         }
  68     }
  69
  70     .#{$prefix}form-focus,
  71     textarea.#{$prefix}form-focus {
  72                 border-color: $form-field-focus-border-color;
  73     }
  74
  75     .#{$prefix}form-invalid-field,
  76     textarea.#{$prefix}form-invalid-field {
  77         background-color: $form-field-invalid-background-color;
  78         @if $form-field-invalid-background-image {
  79             background-image: theme-image($theme-name, $form-field-invalid-background-image);
  80             background-repeat: $form-field-invalid-background-repeat;
  81             background-position: $form-field-invalid-background-position;
  82         }
  83         border-color: $form-field-invalid-border-color;
  84     }
  85
  86     .#{$prefix}form-item {
  87         font: $form-label-font;
  88     }
  89
  90     .#{$prefix}form-empty-field {
  91         color: $form-field-empty-color;
  92     }
  93
  94     .#{$prefix}webkit {
  95         .#{$prefix}form-empty-field {
  96             line-height: 15px;
  97         }
  98     }
  99
 100     .#{$prefix}form-display-field {
 101         padding-top: 3px;
 102     }
 103
 104     @if $include-ie {
 105         .#{$prefix}ie .#{$prefix}form-file {
 106             height: $form-field-height + 1;
 107
 108             line-height: 18px;
 109
 110             vertical-align: middle;
 111         }
 112     }
 113
 114     .#{$prefix}field-default-toolbar .#{$prefix}form-text {
 115         height: $form-toolbar-field-height - vertical($form-field-padding) - vertical($form-field-border-width);
 116     }
 117
 118     .#{$prefix}border-box .#{$prefix}field-default-toolbar .#{$prefix}form-text {
 119         height: $form-toolbar-field-height;
 120     }
 121
 122     .#{$prefix}field-default-toolbar .#{$prefix}form-item-label-left {
 123         padding-left: 4px;
 124     }
 125 }