@import '../global'; @import 'form-sliders'; /** * @var {color} $form-bg-color * Default background-color for forms. * * @member Ext.form.Panel */ $form-bg-color: #eee !default; /** * @class Ext.field.Field */ /** * @var {color} $form-field-bg-color * Default background-color for form fields. */ $form-field-bg-color: #fff !default; /** * @var {color} $form-light * Light color for form fields, mostly used on field borders. */ $form-light: #ddd !default; /** * @var {color} $form-dark * Dark color for form fields, mostly used on labels/text. */ $form-dark: #333 !default; /** * @var {measurement} $form-label-width * Default width for form labels. */ $form-label-width: 6em !default; /** * @var {color} $form-label-background-color * The default background color for labels */ $form-label-background-color: lighten($form-light, 10%); /** * @var {measurement} $form-field-height * Default height for form fields. */ $form-field-height: 2.5em !default; /** * @var {measurement} $form-spacing * Default spacing for form fields, used for padding, etc. */ $form-spacing: .6em !default; /** * @var {measurement} $form-textarea-height * Default height for form textareas. * * @member Ext.field.TextArea */ $form-textarea-height: 6em !default; /** * @var {measurement} $form-thumb-size * Default size of "thumbs" for form sliders/toggles. * * @member Ext.field.Slider */ $form-thumb-size: 2.2em !default; /** * @var {measurement} $form-toggle-size * Thumb size minus padding for inset thumbs like in a Toggle element. * * @member Ext.field.Toggle */ $form-toggle-size: $form-thumb-size - .35em; /** * @var {measurement} $form-fieldset-radius * Default border-radius for form fieldsets. * * @member Ext.form.FieldSet */ $form-fieldset-radius: .4em !default; /** * @var {measurement} $form-slider-size * Height of the slider "track." * * @member Ext.field.Slider */ $form-slider-size: .8em !default; // Private utility vars & mixins $form-thumb-space: ( $form-thumb-size - $form-toggle-size ) / 2; $form-input-fields: '.x-field-text, .x-input-text, .x-input, .x-input-number, .x-spinner-body, .x-input-radio, .x-input-checkbox, .x-input-email, .x-input-url, .x-input-password, .x-input-slider'; $form-scrollable-fields: '.x-field-slider, .x-field-toggle'; @mixin label { text-shadow: #fff 0 1px 1px; color: $form-dark; } @mixin checkmark($color: #000){ @extend .x-checkmark-base; border-color: $color; } /** * Includes default form styles. * * See {@link Global_CSS#background-gradient background-gradient}. * * @member Ext.form.Panel */ @mixin sencha-form($include-sliders: $include-form-sliders) { // Ext.form.Panel .x-form { .x-scroll-container { background-color: $form-bg-color; > .x-inner { padding: 1em; } } } // Label .x-form-label { @include label; @include bevel-text('light'); padding: $form-spacing; display: none; @include ellipsis; span { font-size: .8em; font-weight: bold; } } // Ext.field.Field .x-field { min-height: $form-field-height; .x-component-outer { -webkit-box-flex: 1; } .x-field-input { position: relative; } .x-field-input, .x-input-el { width: 100%; } &.x-field-labeled { .x-form-label { display: block; } } &:last-child { border-bottom: 0; } } .x-label-align-left { &:first-child { .x-form-label { @if $include-border-radius { @include border-top-left-radius($form-fieldset-radius); } } } &:last-child { .x-form-label { @if $include-border-radius { @include border-bottom-left-radius($form-fieldset-radius); } } } } .x-label-align-right { @include box-direction(reverse); .x-field-input { @include box-direction(normal); } &:first-child { .x-form-label { @if $include-border-radius { @include border-top-right-radius($form-fieldset-radius); } } } &:last-child { border-bottom: 0; .x-form-label { @if $include-border-radius { @include border-bottom-right-radius($form-fieldset-radius); } } } } .x-label-align-top, .x-label-align-bottom { @include box-orient(vertical); .x-form-label { width: 100% !important; } } .x-label-align-top { &:first-child { .x-form-label { @if $include-border-radius { @include border-top-radius($form-fieldset-radius); } } } } .x-label-align-bottom { @include box-direction(reverse); .x-field-input { @include box-direction(normal); } &:last-child { .x-form-label { @if $include-border-radius { @include border-bottom-radius($form-fieldset-radius); } } } } .x-input-el { padding: .4em; min-height: $form-field-height; display: block; border-width: 0; background: transparent; -webkit-appearance: none; } .x-field-mask { @include stretch; } // Required fields .x-field-required { label:after, .x-form-label:after { content: "*"; display: inline; } } .x-item-disabled { label:after, .x-form-label:after { color: #666 !important; } } // Ext.field.TextArea .x-field-textarea { textarea { min-height: $form-textarea-height; padding-top: .5em; } } // Ext.field.Hidden .x-field-hidden { @extend .x-hidden-display; } // Ext.field.Checkbox .x-checkmark-base { @include insertion(.75em, 1.25em, 50%, auto); -webkit-transform: rotate(45deg) skew(5deg); -webkit-transform-origin: 50% 50%; right: ($form-spacing + .5em); border: .35em solid; border-top: none; border-left: none; margin-top: -.75em; } .x-field .x-input-radio, .x-field .x-input-checkbox { position: relative; &:after { @include checkmark($form-light); } &:checked:after { @include checkmark($active-color); } } // Ext.field.Spinner .x-spinner { .x-component-outer { @include display-box; > * { -webkit-box-flex: 1; width: auto; } } .x-field-input { .x-input-el { padding: 0; width: 25px; text-align: center; } //http://stackoverflow.com/questions/3790935/can-i-hide-the-html5-number-inputs-spin-box input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } } &.x-item-disabled { .x-spinner-button { @include toolbar-button(lighten($form-light, 10), matte); color: #aaa !important; } } .x-spinner-button { padding: .65em 0; font-weight: bold; @include toolbar-button($form-light); text-align: center; } .x-spinner-button-down { border: 0 !important; border-right: 1px solid $form-light !important; } .x-spinner-button-up { border: 0 !important; border-left: 1px solid $form-light !important; } } .x-phone .x-select-overlay { min-width: 14em; min-height: 12.5em; } // Ext.field.Select .x-select-overlay { min-width: 18em; min-height: 22em; .x-list-item-label { height: 2.6em; } .x-list-label { @include ellipsis; display: block; } .x-list-item { padding-right: 2.6em; } .x-item-selected { &:before { @include checkmark(lighten(#000, 15%)); margin-top: -.85em; } &:after { @include checkmark($form-light); } } } @if $include-sliders { @include sencha-form-sliders; } //remove browser styling input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; } .x-field-number { input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } } //clear icon $form-clear-size: 1.1em; .x-field-input { @include display-box; @include box-orient(horizontal); @include box-align(center); @include box-pack(center); .x-input-el { @include box-flex(1); } .x-clear-icon { display: none; background: theme_image($theme-name, "clear_icon.png") no-repeat; background-position: center center; background-size: 95% 95%; width: $form-clear-size; height: $form-clear-size; margin: .5em; & .x-desktop { background-size: 100% 100%; } } } .x-field-clearable { .x-clear-icon { display: block; } } .x-field-textarea { .x-field-input { @include box-align(start); } } .x-android .x-input-el { -webkit-text-fill-color: #000; } //disabled fields .x-item-disabled .x-form-label span, .x-item-disabled input, .x-item-disabled .x-spinner-body, .x-item-disabled select, .x-item-disabled textarea, .x-item-disabled .x-field-clear-container { color: lighten($form-dark, 50%); -webkit-text-fill-color: lighten($form-dark, 50%); pointer-events: none; } // Ext.form.FieldSet .x-form-fieldset { margin: 0 0 1.5em; .x-form-label { background-color: $form-label-background-color; border-top: 1px solid lighten($form-light, 20%); } .x-form-fieldset-inner { border: 1px solid $form-light; background: #fff; padding: 0; @if $include-border-radius { @include border-radius($form-fieldset-radius); } overflow: hidden; } //Ext.field.Field .x-field { border-bottom: 1px solid $form-light; &.x-form-fieldset-item-first { @if $include-border-radius { @include border-top-radius($form-fieldset-radius); } } &.x-form-fieldset-item-last { border-bottom: 0; @if $include-border-radius { @include border-bottom-radius($form-fieldset-radius); } } } } .x-form-fieldset-title { @include label; margin: 1em ( $form-spacing + .1em ) .3em; color: $form-dark; font-weight: bold; white-space: nowrap; } .x-form-fieldset-instructions { @include label; color: lighten($form-dark, 30%); margin: 1em ( $form-spacing + .1em ) .3em; font-size: .8em; text-align: center; } // Create the dropdown arrow // for select fields .x-field-select { position: relative; &.x-label-align-top .x-component-outer:after { top: auto; bottom: 0; } .x-component-outer { &:before, &:after { pointer-events: none; position: absolute; display: block; right: 0; } // Tip &:after { @include insertion(0,0,0,auto); margin: 1em; border: .4em solid transparent; border-top-color: $form-light; z-index: 2; } &:before { @include insertion(4em,auto,0,auto); bottom: 0; @if $include-border-radius { @include border-right-radius($form-fieldset-radius); } @if $include-highlights { background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(rgba($form-field-bg-color, 0)), color-stop(.5, rgba($form-field-bg-color, 1))); } z-index: 1; } } .x-form-field { white-space: nowrap; width: 100%; overflow: hidden; text-overflow: ellipsis } .x-form-field-container { margin-right: 40px; } } }