| /* extends .v-textfield */ |
| //// |
| /// @group components/textfield |
| //// |
| |
| |
| |
| /// Basic textfield style. |
| @mixin os-textfield { |
| background-color: $os-textfield-shade; |
| border-top: transparent; |
| border-left: transparent; |
| border-right: transparent; |
| /*position: relative !important;*/ |
| &:focus{ |
| background-color: $os-focus-color; |
| color: valo-font-color($os-focus-color); |
| } |
| &:hover{ |
| border-bottom-color: $v-focus-color; |
| } |
| } |
| |
| /// Basic textfield style, readonly. |
| @mixin os-textfield-readonly { |
| background-color: transparent; |
| } |
| |
| /// Textfield style modifier. |
| @mixin os-textfield-gridview { |
| width: calc(100% + ($v-grid-cell-padding-horizontal*5)); |
| margin-left: $v-grid-cell-padding-horizontal * -1; |
| } |
| |
| /// Textfield style modifier. |
| @mixin os-error-textfield { |
| /*background: repeating-linear-gradient( |
| 135deg, $os-focus-color, $os-focus-color 10px, $os-light-contrast 10px, $os-light-contrast 20px ); |
| border-color: first-color($v-border) !important; |
| */ |
| color: $v-error-indicator-color; |
| border-bottom-style: dashed; |
| } |
| |
| /// Textfield style modifier. |
| @mixin os-textfield-filterspanel { |
| text-align: center; |
| white-space: normal; |
| color: valo-font-color($os-textfield-shade); |
| background-color: $os-textfield-shade; |
| border-right-width: 0px; |
| border-top-width: 0px; |
| border-left: $v-border; |
| border-left-color: $v-app-background-color; |
| |
| /* Erstes Element |
| &:nth-child(1) { |
| border-left-color: transparent; |
| }*/ |
| |
| &:focus, .v-textfield-focus { |
| background-color: $os-focus-color; |
| color: valo-font-color($os-focus-color); |
| border-right-width: 0px; |
| border-top-width: 0px; |
| border-left: $v-border; |
| border-left-color: $v-app-background-color; |
| border-bottom-color: $v-focus-color; |
| } |
| } |
| |
| /// Textfield style modifier. |
| @mixin os-textfield-login { |
| height: $v-unit-size * 1.5; |
| //background-color: $v-app-background-color; |
| background-color: $os-color-contrast; |
| //border: 1px; |
| margin-bottom: ceil($v-unit-size /5); |
| border-radius: floor($v-unit-size/5); |
| &:focus{ |
| background-color: $os-focus-color; |
| } |
| &:hover{ |
| border-color: $v-focus-color; |
| } |
| } |
| |
| |
| /// Textfield style modifier. |
| @mixin os-textfield-cash { |
| font-size: $v-font-size * $os-cash-zoom-factor; |
| height: $v-unit-size * $os-cash-zoom-factor; |
| /* width: $cash-field-width; // set below to differentiate between suggest and normal textfield */ |
| &.v-disabled, &.v-disabled > .v-textfield { |
| @include os-textfield-readonly; |
| opacity: 0.75; |
| } |
| } |
| |
| /// Textfield style modifier. |
| @mixin os-textfield-cash-total { |
| font-size: $v-font-size * ($os-cash-zoom-factor * 1.5) !important; |
| height: $v-unit-size * ($os-cash-zoom-factor * 1.5) !important; |
| text-align: right; |
| /* width: auto; */ |
| } |
| |
| |
| /// Textfield style modifier for arranging vertically aligned textfields (with caption on top) according to their width and spacings. |
| /// @param {integer} field-width-factor |
| @mixin os-textfield-mod ($width-mod: 1, $secondary-stylename: null){ |
| |
| @if $secondary-stylename == null { |
| /* textfield, datefield etc. dimensions according to CONTAINER/LAYOUT stylename */ |
| .v-textfield, .v-datefield, .o-XSuggestBox, .v-filterselect, .v-filterselect-input, .v-filterselect [class*="input"], .l-control>.v-component-group, .l-control>.l-beansearchfield { |
| width: ($cash-field-width * $width-mod) + ($v-layout-spacing-horizontal * ($width-mod - 1)); |
| } |
| .o-XSuggestBox > .v-textfield, .o-XSuggestBox > .v-datefield { |
| width: ($cash-field-width * $width-mod) + ($v-layout-spacing-horizontal * ($width-mod - 1)) - ($v-unit-size * $os-cash-zoom-factor) !important; |
| } |
| } |
| |
| @else { |
| /* textfield, datefield etc. dimensions according to LOCAL/COMPONENT stylename */ |
| .#{$secondary-stylename}.v-textfield, .#{$secondary-stylename}.v-datefield, .#{$secondary-stylename}.o-XSuggestBox, |
| .#{$secondary-stylename}.v-textarea, |
| .#{$secondary-stylename}.v-filterselect, .#{$secondary-stylename}.v-filterselect-input, .#{$secondary-stylename}.v-filterselect [class*="input"], |
| .l-control.#{$secondary-stylename} .v-component-group, .l-control.#{$secondary-stylename} .l-beansearchfield { |
| width: ($cash-field-width * $width-mod) + ($v-layout-spacing-horizontal * ($width-mod - 1)); |
| } |
| .#{$secondary-stylename}.o-XSuggestBox > .v-textfield, .#{$secondary-stylename}.o-XSuggestBox > .v-datefield { |
| width: ($cash-field-width * $width-mod) + ($v-layout-spacing-horizontal * ($width-mod - 1)) - ($v-unit-size * $os-cash-zoom-factor) !important; |
| } |
| } |
| } |
| |
| |
| @mixin os-textarea-mod ($height-mod: 0, $width-mod: 0, $has-caption: false) { |
| @if $height-mod > 0 { |
| @if $has-caption == true { |
| .v-textarea, &.v-textarea { |
| height: $height-mod * $cash-field-height - ($v-unit-size * $os-cash-zoom-factor) + (($height-mod - 1) * $v-layout-spacing-vertical); |
| } |
| } |
| @else { |
| .v-textarea, &.v-textarea { |
| height: $height-mod * $cash-field-height + (($height-mod - 1) * $v-layout-spacing-vertical); |
| } |
| } |
| } |
| @if $width-mod > 0 { |
| .v-textarea, &.v-textarea { |
| width: $width-mod * $cash-field-width + ($v-layout-spacing-horizontal * ($width-mod - 1)); |
| } |
| } |
| } |