windowsinboxwhatsappicloudtweetdeckhipchattelegramhangoutsslackgmailskypefacebook-workplaceoutlookemailmicrosoft-teamsdiscordmessengercustom-servicesmacoslinux
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
194 lines
7.8 KiB
194 lines
7.8 KiB
9 years ago
|
/**
|
||
|
|
* Creates a visual theme for "labelable" form items. Provides visual styling for the
|
||
|
|
* Label and error message that can be shared between many types of form fields.
|
||
|
|
*
|
||
|
|
* @param {string} $ui
|
||
|
|
* The name of the UI being created. Can not included spaces or special punctuation
|
||
|
|
* (used in CSS class names).
|
||
|
|
*
|
||
|
|
* @param {color} [$ui-font-color=$form-label-font-color]
|
||
|
|
* The text color the label
|
||
|
|
*
|
||
|
|
* @param {string} [$ui-font-weight=$form-label-font-weight]
|
||
|
|
* The font-weight of the label
|
||
|
|
*
|
||
|
|
* @param {number} [$ui-font-size=$form-label-font-size]
|
||
|
|
* The font-size of the label
|
||
|
|
*
|
||
|
|
* @param {string} [$ui-font-family=$form-label-font-family]
|
||
|
|
* The font-family the label
|
||
|
|
*
|
||
|
|
* @param {number} [$ui-height=$form-field-height]
|
||
|
|
* The height of the label. This should be the same height as the height of fields that
|
||
|
|
* this label ui will be used with. This does not actually set the height of the label
|
||
|
|
* but is used to ensure that the label is centered within the given height.
|
||
|
|
*
|
||
|
|
* @param {number} [$ui-line-height=$form-label-line-height]
|
||
|
|
* The line-height of the label
|
||
|
|
*
|
||
|
|
* @param {number} [$ui-horizontal-spacing=$form-label-horizontal-spacing]
|
||
|
|
* Horizontal space between the label and the field body when the label is left-aligned.
|
||
|
|
*
|
||
|
|
* @param {number} [$ui-vertical-spacing=$form-label-vertical-spacing]
|
||
|
|
* Vertical space between the label and the field body when the label is top-aligned.
|
||
|
|
*
|
||
|
|
* @param {number} [$ui-error-icon-background-image=$form-error-icon-background-image]
|
||
|
|
* The background-image of the error icon
|
||
|
|
*
|
||
|
|
* @param {number} [$ui-error-icon-width=$form-error-icon-width]
|
||
|
|
* The width of the error icon
|
||
|
|
*
|
||
|
|
* @param {number} [$ui-error-icon-height=$form-error-icon-height]
|
||
|
|
* The height of the error icon
|
||
|
|
*
|
||
|
|
* @param {number/list} [$ui-error-icon-side-margin=$form-error-icon-side-margin]
|
||
|
|
* Margin for error icons when aligned to the side of the field
|
||
|
|
*
|
||
|
|
* @param {number} [$ui-error-under-icon-spacing=$form-error-under-icon-spacing]
|
||
|
|
* The space between the icon and the message for errors that display under the field
|
||
|
|
*
|
||
|
|
* @param {number/list} [$ui-error-under-padding=$form-error-under-padding]
|
||
|
|
* The padding on errors that display under the form field
|
||
|
|
*
|
||
|
|
* @param {color} [$ui-error-msg-color=$form-error-msg-color]
|
||
|
|
* The text color of form error messages
|
||
|
|
*
|
||
|
|
* @param {string} [$ui-error-msg-font-weight=$form-error-msg-font-weight]
|
||
|
|
* The font-weight of form error messages
|
||
|
|
*
|
||
|
|
* @param {number} [$ui-error-msg-font-size=$form-error-msg-font-size]
|
||
|
|
* The font-size of form error messages
|
||
|
|
*
|
||
|
|
* @param {string} [$ui-error-msg-font-family=$form-error-msg-font-family]
|
||
|
|
* The font-family of form error messages
|
||
|
|
*
|
||
|
|
* @param {number} [$ui-error-msg-line-height=$form-error-msg-line-height]
|
||
|
|
* The line-height of form error messages
|
||
|
|
*
|
||
|
|
* @param {number} [$ui-disabled-opacity=$form-field-disabled-opacity]
|
||
|
|
* Opacity of disabled form fields
|
||
|
|
*
|
||
|
|
* @member Ext.form.Labelable
|
||
|
|
*/
|
||
|
|
@mixin extjs-label-ui(
|
||
|
|
$ui: null,
|
||
|
|
$ui-font-color: $form-label-font-color,
|
||
|
|
$ui-font-weight: $form-label-font-weight,
|
||
|
|
$ui-font-size: $form-label-font-size,
|
||
|
|
$ui-font-family: $form-label-font-family,
|
||
|
|
$ui-height: $form-field-height,
|
||
|
|
$ui-line-height: $form-label-line-height,
|
||
|
|
$ui-horizontal-spacing: $form-label-horizontal-spacing,
|
||
|
|
$ui-vertical-spacing: $form-label-vertical-spacing,
|
||
|
|
$ui-error-icon-background-image: $form-error-icon-background-image,
|
||
|
|
$ui-error-icon-width: $form-error-icon-width,
|
||
|
|
$ui-error-icon-height: $form-error-icon-height,
|
||
|
|
$ui-error-icon-side-margin: $form-error-icon-side-margin,
|
||
|
|
$ui-error-under-icon-spacing: $form-error-under-icon-spacing,
|
||
|
|
$ui-error-under-padding: $form-error-under-padding,
|
||
|
|
$ui-error-msg-color: $form-error-msg-color,
|
||
|
|
$ui-error-msg-font-weight: $form-error-msg-font-weight,
|
||
|
|
$ui-error-msg-font-size: $form-error-msg-font-size,
|
||
|
|
$ui-error-msg-font-family: $form-error-msg-font-family,
|
||
|
|
$ui-error-msg-line-height: $form-error-msg-line-height,
|
||
|
|
$ui-disabled-opacity: $form-field-disabled-opacity
|
||
|
|
) {
|
||
|
|
$ui-error-wrap-width: $ui-error-icon-width + horizontal($ui-error-icon-side-margin);
|
||
|
|
.#{$prefix}form-item-label-#{$ui} {
|
||
|
|
$padding-top: round(($ui-height - $ui-line-height) / 2);
|
||
|
|
|
||
|
|
color: $ui-font-color;
|
||
|
|
font: $ui-font-weight #{$ui-font-size}/#{$ui-line-height} $ui-font-family;
|
||
|
|
min-height: $ui-height;
|
||
|
|
padding-top: $padding-top;
|
||
|
|
padding-right: $ui-horizontal-spacing;
|
||
|
|
|
||
|
|
@if $include-ie {
|
||
|
|
.#{$prefix}ie8 & {
|
||
|
|
// min-height triggers content-box sizing on IE8, so subtract padding
|
||
|
|
min-height: $ui-height - $padding-top;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.#{$prefix}form-item-label-top {
|
||
|
|
height: 1px;
|
||
|
|
> .#{$prefix}form-item-label-inner {
|
||
|
|
padding-top: round(($ui-height - $ui-line-height) / 2);
|
||
|
|
padding-bottom: $ui-vertical-spacing;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.#{$prefix}form-item-label-top-side-error:after {
|
||
|
|
width: $ui-error-wrap-width;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.#{$prefix}form-item-body-#{$ui} {
|
||
|
|
min-height: $ui-height;
|
||
|
|
}
|
||
|
|
|
||
|
|
.#{$prefix}form-invalid-icon-#{$ui} {
|
||
|
|
width: $ui-error-icon-width;
|
||
|
|
height: $ui-error-icon-height;
|
||
|
|
margin: $ui-error-icon-side-margin;
|
||
|
|
background: theme-background-image($ui-error-icon-background-image) no-repeat;
|
||
|
|
}
|
||
|
|
|
||
|
|
.#{$prefix}form-invalid-under-#{$ui} {
|
||
|
|
padding: top($ui-error-under-padding) right($ui-error-under-padding) bottom($ui-error-under-padding) (left($ui-error-under-padding) + $ui-error-icon-width + $ui-error-under-icon-spacing);
|
||
|
|
color: $ui-error-msg-color;
|
||
|
|
font: $ui-error-msg-font-weight #{$ui-error-msg-font-size}/#{$ui-error-msg-line-height} $ui-error-msg-font-family;
|
||
|
|
background: no-repeat left($ui-error-under-padding) top($ui-error-under-padding);
|
||
|
|
background-image: theme-background-image($ui-error-icon-background-image);
|
||
|
|
}
|
||
|
|
|
||
|
|
.#{$prefix}form-error-wrap-#{$ui}.#{$prefix}form-error-wrap-side {
|
||
|
|
width: $ui-error-wrap-width;
|
||
|
|
}
|
||
|
|
|
||
|
|
@if $ui-disabled-opacity != 1 {
|
||
|
|
.#{$prefix}form-item-#{$ui}.#{$prefix}item-disabled {
|
||
|
|
@include opacity($ui-disabled-opacity);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@if $include-label-default-ui {
|
||
|
|
@include extjs-label-ui(
|
||
|
|
$ui: 'default'
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
@if $include-label-toolbar-ui {
|
||
|
|
@include extjs-label-ui(
|
||
|
|
$ui: 'toolbar',
|
||
|
|
$ui-font-color: $form-toolbar-label-font-color,
|
||
|
|
$ui-font-weight: $form-toolbar-label-font-weight,
|
||
|
|
$ui-font-size: $form-toolbar-label-font-size,
|
||
|
|
$ui-font-family: $form-toolbar-label-font-family,
|
||
|
|
$ui-height: $form-toolbar-field-height,
|
||
|
|
$ui-line-height: $form-toolbar-label-line-height,
|
||
|
|
$ui-horizontal-spacing: $form-toolbar-label-horizontal-spacing,
|
||
|
|
$ui-vertical-spacing: $form-toolbar-label-vertical-spacing,
|
||
|
|
$ui-error-icon-background-image: $form-toolbar-error-icon-background-image,
|
||
|
|
$ui-error-icon-width: $form-toolbar-error-icon-width,
|
||
|
|
$ui-error-icon-height: $form-toolbar-error-icon-height,
|
||
|
|
$ui-error-icon-side-margin: $form-toolbar-error-icon-side-margin,
|
||
|
|
$ui-error-under-icon-spacing: $form-toolbar-error-under-icon-spacing,
|
||
|
|
$ui-error-under-padding: $form-toolbar-error-under-padding,
|
||
|
|
$ui-error-msg-color: $form-toolbar-error-msg-color,
|
||
|
|
$ui-error-msg-font-weight: $form-toolbar-error-msg-font-weight,
|
||
|
|
$ui-error-msg-font-size: $form-toolbar-error-msg-font-size,
|
||
|
|
$ui-error-msg-font-family: $form-toolbar-error-msg-font-family,
|
||
|
|
$ui-error-msg-line-height: $form-toolbar-error-msg-line-height,
|
||
|
|
$ui-disabled-opacity: $form-toolbar-field-disabled-opacity
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
.#{$prefix}autocontainer-form-item,
|
||
|
|
.#{$prefix}anchor-form-item,
|
||
|
|
.#{$prefix}vbox-form-item,
|
||
|
|
.#{$prefix}table-form-item {
|
||
|
|
margin-bottom: $form-item-margin-bottom;
|
||
|
|
}
|