Mixin to be used with textfields.
@@ -37,10 +37,30 @@ chat-textfield-simple {
@extend .won-button--filled;
}
+ @mixin padToHeight($fontSize, $lineHeightFactor, $borderWidth, $intendedHeight) {
+ font-size: $fontSize;
+ border-width: $borderWidth;
+
+ $heightOfALine: $fontSize * $lineHeightFactor;
+ $verticalPadding: ($intendedHeight - $heightOfALine) / 2 - $borderWidth;
+ padding-top: $verticalPadding;
+ padding-bottom: $verticalPadding;
+ padding: $verticalPadding (0.438 * $fontSize);
+ }
textarea.cts__text {
border-style: solid;
- border-width: $thinBorderWidth;
border-radius: 0.1rem;
+
+ min-width: 0; // so a size is specified and break-word works
+ word-break: break-word;
+
+ @include padToHeight($normalFontSize, 22/16, $thinBorderWidth, $formInputHeight);
+
+
+ &:focus {
+ color: black;
+ }
+
&.valid {
border-color: $won-line-gray;
}
@@ -54,23 +74,6 @@ chat-textfield-simple {
}
}
- textarea.cts__text {
- //$padding: 0.3rem;
- //padding: $padding;
- font-size: $normalFontSize;
-
- $lineHeight: $normalFontSize * 22/16; /* of one line of text */
- $verticalPadding: ($formInputHeight - $lineHeight) / 2 - $thinBorderWidth;
- padding: $verticalPadding 0.438rem;
-
- min-width: 0; // so a size is specified and break-word works
- word-break: break-word;
-
- &:focus {
- color: black;
- }
- }
-
.cts__charcount,
.cts__helptext {
@include fine-print;
