/**
* Creates the base structure of Ext.form.Panel.
* @member Ext.form.Panel
*/
@mixin extjs-form {
/*misc*/
.#{$prefix}webkit {
* {
&:focus {
outline:none !important;
}
}
}
// form items
.#{$prefix}form-item {
vertical-align: top;
table-layout: fixed;
}
// form items within auto, anchor, vbox checkboxgroup, and table layouts have bottom margin of 5px
.#{$prefix}autocontainer-form-item,
.#{$prefix}anchor-form-item,
.#{$prefix}vbox-form-item,
.#{$prefix}checkboxgroup-form-item,
.#{$prefix}table-form-item {
margin-bottom: 5px;
}
// form items within form layout have 5px margin around them
.#{$prefix}form-layout-table {
border-collapse: separate;
border-spacing: 0 2px;
}
// Allow for positioned child elements, e.g. custom icons
.#{$prefix}form-item-body {
position: relative;
}
.#{$prefix}form-form-item {
td {
border-top: 1px solid transparent;
}
}
// IE6 cannot do border-spacing 0 2px;
// IE6 cannot do border-color: transparent
// So we revert pack to a pad row for IE6
.#{$prefix}ie6 {
.#{$prefix}form-layout-table {
border-collapse: collapse;
border-spacing: 0;
}
.#{$prefix}form-form-item {
td {
border-top-width: 0;
}
}
// Padding row for IE6 when Labelable Fields are in a form layout
td.#{$prefix}form-item-pad {
height: 5px;
}
}
// No padding when inside an Editor
.#{$prefix}editor .#{$prefix}form-item-body {
padding-bottom: 0;
}
.#{$prefix}field-label-cell {
vertical-align: middle;
}
.#{$prefix}form-item-label {
display: block;
font-size: $form-label-font-size + 2;
@include no-select;
}
.#{$prefix}form-item-label-top {
display: block;
zoom: 1;
padding: 0 0 5px 0;
}
.#{$prefix}form-item-label-right {
text-align: right;
}
.#{$prefix}form-invalid-under {
padding: 2px 2px 2px $form-error-icon-width;
color: $form-error-msg-color;
font: $form-error-msg-font;
line-height: $form-error-msg-line-height;
background: no-repeat 0 2px;
background-image: theme-background-image($theme-name, $form-exclamation-icon);
}
.#{$prefix}form-invalid-icon {
width: $form-error-icon-width;
height: 14px;
background: no-repeat center center;
background-image: theme-background-image($theme-name, $form-exclamation-icon);
overflow: hidden;
ul {
display: block;
width: $form-error-icon-width;
li {
/* prevent inner elements from interfering with QuickTip hovering */
display: none;
}
}
// Hide this icon
display: none;
}
// When the label is on top, the right icon cell is taller, so the icon image needs bumping down
.#{$prefix}lbl-top-err-icon {
margin-bottom: 4px;
}
}
|