| /** |
| * Outputs the selectors and properties for the TextArea component. |
| * |
| * @param {string} $primary-stylename (v-textarea) - the primary style name for the selectors |
| * @param {bool} $include-additional-styles - should the mixin output all the different style variations of the component |
| * |
| * @group textarea |
| */ |
| @mixin valo-textarea ($primary-stylename: v-textarea, $include-additional-styles: contains($v-included-additional-styles, textarea)) { |
| |
| .#{$primary-stylename} { |
| @include valo-textarea-style; |
| width: $v-default-field-width; |
| } |
| |
| .#{$primary-stylename}-readonly { |
| @include valo-textfield-readonly-style; |
| } |
| |
| .#{$primary-stylename}-error { |
| @include valo-textfield-error-style; |
| } |
| |
| |
| @if $include-additional-styles { |
| .#{$primary-stylename}-borderless { |
| @include valo-textfield-borderless-style; |
| } |
| |
| .#{$primary-stylename}-tiny { |
| @include valo-textarea-style($unit-size: $v-unit-size--tiny, $states: normal, $background-color: null, $border: null, $bevel: null, $shadow: null); |
| font-size: $v-font-size--tiny; |
| } |
| |
| .#{$primary-stylename}-small { |
| @include valo-textarea-style($unit-size: $v-unit-size--small, $states: normal, $background-color: null, $border: null, $bevel: null, $shadow: null); |
| font-size: $v-font-size--small; |
| } |
| |
| .#{$primary-stylename}-large { |
| @include valo-textarea-style($unit-size: $v-unit-size--large, $states: normal, $background-color: null, $border: null, $bevel: null, $shadow: null); |
| font-size: $v-font-size--large; |
| } |
| |
| .#{$primary-stylename}-huge { |
| @include valo-textarea-style($unit-size: $v-unit-size--huge, $states: normal, $background-color: null, $border: null, $bevel: null, $shadow: null); |
| font-size: $v-font-size--huge; |
| } |
| |
| .#{$primary-stylename}-align-right { |
| text-align: right; |
| } |
| |
| .#{$primary-stylename}-align-center { |
| text-align: center; |
| } |
| } |
| |
| } |
| |
| |
| /** |
| * Outputs the styles for a text area variant. |
| * |
| * @param {size} $unit-size ($v-unit-size) - The sizing of the text area, which corresponds its height |
| * @param {size | list} $padding (null) - The padding of the text area. Computed from other parameters by default. |
| * @param {color} $font-color (null) - The font color of the text area. Computed from the $background-color by default. |
| * @param {number} $font-weight (max(400, $v-font-weight)) - The font weight of the text area |
| * @param {size} $font-size (null) - The font size of the text area. Inherited from the parent by default. |
| * @param {color} $background-color ($v-textfield-background-color) - The background color of the text area |
| * @param {list} $border ($v-textfield-border) - The border of the text area |
| * @param {size} $border-radius ($v-textfield-border-radius) - The border-radius of the text area |
| * @param {list} $bevel ($v-textfield-bevel) - Box-shadow value according to $v-bevel documentation |
| * @param {list} $shadow ($v-textfield-shadow) - Box-shadow value according to $v-shadow documentation |
| * @param {list} $states (normal focus disabled) - The text area states for which to output corresponding styles |
| * |
| * @group textfield |
| */ |
| @mixin valo-textarea-style ( |
| $unit-size : $v-unit-size, |
| $padding : round($v-unit-size/6), |
| |
| $font-color : null, |
| $font-weight : max(400, $v-font-weight), |
| $font-size : null, |
| |
| $background-color : $v-textfield-background-color, |
| $border : $v-textfield-border, |
| $border-radius : $v-textfield-border-radius, |
| |
| $bevel : $v-textfield-bevel, |
| $shadow : $v-textfield-shadow, |
| |
| $states : (normal, focus, disabled) |
| ) { |
| |
| @include valo-textfield-style($unit-size: $unit-size, $padding: $padding, |
| $font-color: $font-color, |
| $font-weight: $font-weight, |
| $font-size: $font-size, |
| |
| $background-color: $background-color, |
| $border: $border, |
| $border-radius: $border-radius, |
| |
| $bevel: $bevel, |
| $shadow: $shadow, |
| |
| $states: $states); |
| height: auto; |
| resize: none; |
| white-space: pre-wrap; // Restore default, because .v-widget sets it to normal |
| |
| .v-ie8 &, |
| .v-ie9 & { |
| line-height: inherit; |
| padding-top: round($unit-size/9); |
| padding-bottom: round($unit-size/9); |
| } |
| } |