1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
|
/**
* 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);
}
}
|
