_field.scss (4464B)
1 /** 2 * Creates the base structure of form field. 3 * @member Ext.form.field.Base 4 */ 5 @mixin extjs-form-field { 6 .#{$prefix}form-field, 7 .#{$prefix}form-display-field { 8 margin: 0 0 0 0; 9 10 font: $form-field-font; 11 color: $form-field-color; 12 } 13 14 .#{$prefix}form-item-hidden { 15 margin: 0; 16 } 17 18 .#{$prefix}form-text, 19 textarea.#{$prefix}form-field { 20 padding: $form-field-padding; 21 22 background: repeat-x 0 0; 23 border: $form-field-border-width solid; 24 25 background-color: $form-field-background-color; 26 @if $form-field-background-image { 27 background-image: theme-background-image($theme-name, $form-field-background-image); 28 } 29 30 border-color: $form-field-border-color; 31 } 32 33 $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); 34 $form-field-line-height: $form-field-content-height - 3px; 35 36 .#{$prefix}form-text { 37 height: $form-field-content-height; 38 line-height: $form-field-line-height; 39 vertical-align: top; 40 border-radius: 5px; 41 } 42 43 .#{$prefix}ie8m { 44 .#{$prefix}form-text { 45 line-height: $form-field-line-height; 46 } 47 } 48 49 .#{$prefix}border-box .#{$prefix}form-text { 50 height: $form-field-height; 51 } 52 53 textarea.#{$prefix}form-field { 54 color: $form-field-color; 55 overflow: auto; 56 height: auto; 57 line-height: normal; 58 background: repeat-x 0 0; 59 background-color: $form-field-background-color; 60 @if $form-field-background-image { 61 background-image: theme-background-image($theme-name, $form-field-background-image); 62 } 63 resize: none; //Disable browser resizable textarea 64 } 65 66 .#{$prefix}border-box textarea.#{$prefix}form-field { 67 height: auto; 68 } 69 70 @if $include-safari { 71 .#{$prefix}safari.#{$prefix}mac textarea.#{$prefix}form-field { 72 margin-bottom: -2px; // another bogus margin bug, safari/mac only 73 } 74 } 75 76 .#{$prefix}form-focus, 77 textarea.#{$prefix}form-focus { 78 border-color: $form-field-focus-border-color; 79 } 80 81 .#{$prefix}form-invalid-field, 82 textarea.#{$prefix}form-invalid-field { 83 background-color: $form-field-invalid-background-color; 84 @if $form-field-invalid-background-image { 85 background-image: theme-background-image($theme-name, $form-field-invalid-background-image); 86 background-repeat: $form-field-invalid-background-repeat; 87 background-position: $form-field-invalid-background-position; 88 } 89 border-color: $form-field-invalid-border-color; 90 } 91 92 .#{$prefix}form-item { 93 font: $form-label-font; 94 } 95 96 .#{$prefix}form-empty-field, textarea.#{$prefix}form-empty-field { 97 color: $form-field-empty-color; 98 } 99 100 .#{$prefix}webkit { 101 .#{$prefix}form-empty-field { 102 line-height: $form-field-line-height; 103 } 104 } 105 106 .#{$prefix}form-display-field { 107 padding-top: 3px; 108 } 109 110 @if $include-ie { 111 /* 112 In oldIE, text inputs get a mysterious extra pixel of spacing above and below. 113 This is targeted at IE6-IE7 (all modes) and IE9+ Quirks mode. 114 115 IE8 quirks on Windows 7 requires this fix, but on 116 IE8 quirks on Windows XP, this is breaks the layout. 117 TODO: Check field input heights in IE8 quirks on Windows Vista. 118 119 Since we can't specifically target a specific version of Windows via CSS, we default to fixing it the XP way, for now. 120 */ 121 .#{$prefix}quirks .#{$prefix}ie9p .#{$prefix}form-text, 122 .#{$prefix}ie7m .#{$prefix}form-text { 123 margin-top: -1px; 124 margin-bottom: -1px; 125 } 126 127 .#{$prefix}ie .#{$prefix}form-file { 128 height: $form-field-height + 1; 129 130 line-height: 18px; 131 132 vertical-align: middle; 133 } 134 } 135 136 .#{$prefix}field-default-toolbar .#{$prefix}form-text { 137 height: $form-toolbar-field-height - vertical($form-field-padding) - vertical($form-field-border-width); 138 } 139 140 .#{$prefix}border-box .#{$prefix}field-default-toolbar .#{$prefix}form-text { 141 height: $form-toolbar-field-height; 142 } 143 144 .#{$prefix}field-default-toolbar .#{$prefix}form-item-label-left { 145 padding-left: 4px; 146 } 147 }