add extjs 6.0.1 sources

[extjs.git] / extjs / modern / theme-mountainview / sass / src / field / Field.scss

/**\r
 * @class Ext.field.Field\r
 */\r
\r
// Private variables\r
$form-clear-size: 2.2em;\r
\r
.x-field {\r
    padding: $form-spacing * 2;\r
    min-height: $form-field-height;\r
\r
    &:last-child {\r
        border-bottom: 0;\r
    }\r
}\r
\r
.x-field-text,\r
.x-field-textarea,\r
.x-field-search,\r
.x-field-select,\r
.x-field-number {\r
    .x-component-outer {\r
        border-bottom: 1px solid $foreground-color;\r
\r
        &:before,\r
        &:after {\r
            content: '';\r
            position: absolute;\r
            left: 0;\r
            right: 0;\r
            bottom: 0;\r
            height: 4px;\r
            background: $foreground-color;\r
        }\r
\r
        &:after {\r
            left: 1px;\r
            right: 1px;\r
            background: $background-color;\r
        }\r
    }\r
\r
    &.x-field-focused {\r
        .x-component-outer {\r
            border-bottom-color: $base-color;\r
\r
            &:before {\r
                background: $base-color;\r
            }\r
\r
            &:after {\r
                left: 2px;\r
                right: 2px;\r
                bottom: 1px;\r
            }\r
        }\r
    }\r
}\r
\r
.x-field-search .x-component-outer .x-field-input {\r
    padding-left: 14px;\r
\r
    &::before {\r
        position: absolute;\r
        content: 's';\r
        top: 0;\r
        bottom: 0;\r
        left: 0;\r
        color: $secondary-text-color;\r
        text-align: left;\r
        // TODO: Use FontAwesome\r
        font-family: 'Pictos';\r
        font-size: 22px;\r
        line-height: 44px;\r
        padding-left: 7px;\r
    }\r
}\r
\r
.x-field-input {\r
    .x-clear-icon {\r
        width: 20px;\r
        height: 20px;\r
        top: 50%;\r
        margin-right: 7px;\r
        margin-top: -10px;\r
        background: transparent;\r
\r
        &::before {\r
            position: absolute;\r
            content: 'D';\r
            top: 0;\r
            right: 0;\r
            bottom: 0;\r
            left: 0;\r
            color: $secondary-text-color;\r
            // TODO: Use FontAwesome\r
            font-family: 'Pictos';\r
            font-size: 22px;\r
        }\r
    }\r
}\r
\r
.x-input-el {\r
  font-size: 16px;\r
  background: transparent;\r
  padding: .4em;\r
  min-height: $form-field-height;\r
  border-width: 0;\r
  -webkit-appearance: none;\r
  color: $primary-text-color;\r
  -webkit-text-fill-color: $primary-text-color !important;\r
}\r
\r
\r
.x-field-search .x-input-el  {\r
  padding: .4em .4em .4em 1em;\r
}\r
\r
.x-ie .x-input-el {\r
  background: transparent;\r
}\r
\r
.x-item-disabled {\r
  .x-form-label,\r
  input,\r
  .x-input-el,\r
  .x-spinner-body,\r
  select,\r
  textarea,\r
  .x-field-clear-container {\r
    color: #b3b3b3;\r
    -webkit-text-fill-color: #b3b3b3 !important;\r
    pointer-events: none;\r
  }\r
}\r
\r
.x-item-disabled ::-webkit-input-placeholder {\r
    color: $foreground-color;\r
}\r
\r
.x-item-disabled .x-form-label {\r
    color: #aaa;\r
}\r
\r
.x-item-disabled .x-form-label:after {\r
    color: #666 !important;\r
}\r
\r
.x-field-text,\r
.x-field-textarea,\r
.x-field-search,\r
.x-field-select,\r
.x-field-number {\r
  &.x-item-disabled {\r
    .x-component-outer {\r
      border-bottom-color: $secondary-color;\r
\r
      &:before {\r
        background: $secondary-color;\r
      }\r
    }\r
  }\r
}\r
\r
.x-toolbar {\r
    .x-field {\r
        padding: 5px;\r
    }\r
}\r
\r
.x-field-select {\r
    .x-component-outer .x-field-input {\r
        overflow: hidden;\r
\r
        &::before {\r
            z-index: 5;\r
            content: '';\r
            position: absolute;\r
            right: -10px;\r
            bottom: -1px;\r
            width: 0;\r
            height: 0;\r
            border-left: 10px solid transparent;\r
            border-right: 10px solid transparent;\r
            border-bottom: 10px solid $foreground-color;\r
        }\r
    }\r
\r
    &.x-item-disabled {\r
        .x-component-outer .x-field-input {\r
            &::before {\r
                border-bottom-color: $secondary-color;\r
            }\r
        }\r
    }\r
}