1 | // Copyright 2017 Palantir Technologies, Inc. All rights reserved.
|
2 | // Licensed under the Apache License, Version 2.0.
|
3 |
|
4 | @import "../../common/variables";
|
5 | @import "../../common/mixins";
|
6 | @import "common";
|
7 |
|
8 | /*
|
9 | Form groups
|
10 |
|
11 | Markup:
|
12 | <div class="#{$ns}-form-group {{.modifier}}">
|
13 | <label class="#{$ns}-label" for="form-group-input">
|
14 | Label
|
15 | <span class="#{$ns}-text-muted">(required)</span>
|
16 | </label>
|
17 | <div class="#{$ns}-form-content">
|
18 | <div class="#{$ns}-input-group {{.modifier}}">
|
19 | <span class="#{$ns}-icon #{$ns}-icon-calendar"></span>
|
20 | <input id="form-group-input" type="text" {{:modifier}} class="#{$ns}-input"
|
21 | style="width: 200px;" placeholder="Placeholder text" dir="auto" />
|
22 | </div>
|
23 | <div class="#{$ns}-form-helper-text">Please enter a value</div>
|
24 | </div>
|
25 | </div>
|
26 |
|
27 | :disabled - Disable the input.
|
28 | .#{$ns}-disabled - Disabled styles. Input must be disabled separately via attribute.
|
29 | .#{$ns}-inline - Label and content appear side by side.
|
30 | .#{$ns}-intent-primary - Apply intent to form group and input separately.
|
31 |
|
32 | Styleguide form-group
|
33 | */
|
34 |
|
35 | .#{$ns}-form-group {
|
36 | display: flex;
|
37 | flex-direction: column;
|
38 | margin: 0 0 ($pt-grid-size * 1.5);
|
39 |
|
40 | label.#{$ns}-label {
|
41 | margin-bottom: $pt-grid-size / 2;
|
42 | }
|
43 |
|
44 | .#{$ns}-control {
|
45 | margin-top: ($pt-input-height - $control-indicator-size) / 2;
|
46 | }
|
47 |
|
48 | .#{$ns}-form-helper-text {
|
49 | color: $pt-text-color-muted;
|
50 | font-size: $pt-font-size-small;
|
51 | margin-top: $pt-grid-size / 2;
|
52 | }
|
53 |
|
54 | /* stylelint-disable-next-line order/declaration-block-order */
|
55 | @each $intent, $color in $pt-intent-text-colors {
|
56 | &.#{$ns}-intent-#{$intent} {
|
57 | .#{$ns}-form-helper-text {
|
58 | color: $color;
|
59 | }
|
60 | }
|
61 | }
|
62 |
|
63 | &.#{$ns}-inline {
|
64 | align-items: flex-start;
|
65 | flex-direction: row;
|
66 |
|
67 | &.#{$ns}-large label.#{$ns}-label {
|
68 | line-height: $pt-input-height-large;
|
69 | margin: 0 $pt-grid-size 0 0;
|
70 | }
|
71 |
|
72 | label.#{$ns}-label {
|
73 | line-height: $pt-input-height;
|
74 | margin: 0 $pt-grid-size 0 0;
|
75 | }
|
76 | }
|
77 |
|
78 | &.#{$ns}-disabled {
|
79 | .#{$ns}-label,
|
80 | .#{$ns}-text-muted,
|
81 | .#{$ns}-form-helper-text {
|
82 | // disabled state always overrides over styles
|
83 | /* stylelint-disable-next-line declaration-no-important */
|
84 | color: $pt-text-color-disabled ;
|
85 | }
|
86 | }
|
87 |
|
88 | .#{$ns}-dark & {
|
89 | @each $intent, $color in $pt-dark-intent-text-colors {
|
90 | &.#{$ns}-intent-#{$intent} {
|
91 | .#{$ns}-form-helper-text {
|
92 | color: $color;
|
93 | }
|
94 | }
|
95 | }
|
96 |
|
97 | .#{$ns}-form-helper-text {
|
98 | color: $pt-dark-text-color-muted;
|
99 | }
|
100 |
|
101 | &.#{$ns}-disabled {
|
102 | .#{$ns}-label,
|
103 | .#{$ns}-text-muted,
|
104 | .#{$ns}-form-helper-text {
|
105 | // disabled state always overrides over styles
|
106 | /* stylelint-disable-next-line declaration-no-important */
|
107 | color: $pt-dark-text-color-disabled ;
|
108 | }
|
109 | }
|
110 | }
|
111 | }
|