clockface/src/Components/Form/Form.scss at 09f092096f02704420e1e0770fad1719e59eab65 · influxdata/clockface · GitHub

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
121
122
123
@import '../../Styles/variables';

/*
  Form Styles
  ------------------------------------------------------------------------------
*/

.cf-form--wrapper {
  width: 100%;
}

/*
  Form Elements
  ------------------------------------------------------------------------------
*/
.cf-form--element {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin-bottom: $cf-marg-a;
}

/*
  Form Group Addons
  ------------------------------------------------------------------------------
*/
.cf-form--label,
.cf-form--help-text,
.cf-form--element-error {
  text-align: left;
  display: inline-block;
  font-size: $cf-form-sm-font;
  font-weight: $cf-font-weight--medium;
  padding: 0 ($cf-form-sm-padding + $cf-border);
  @extend %no-user-select;
}

.cf-form--element-error-container {
  position: relative;
  height: 20px;
  width: 100%;
}

.cf-form--label {
  width: 100%;
  color: $cf-label--default;
  margin: 0 0 $cf-marg-a 0;
  display: flex;
  align-items: center;
}

.cf-form--label-text {
  margin-right: $cf-marg-b;

  &:only-child {
    margin-right: 0;
  }
}

.cf-form--help-text {
  font-style: italic;
  line-height: 16px;
  color: $cf-label--default;
  margin: $cf-marg-a 0 0 0;
}

.cf-form--element-error {
  position: absolute;
  line-height: 16px;
  color: $c-dreamsicle;
  margin: $cf-marg-a 0 0 0;
  word-break: break-all;
  word-wrap: break-word;
}

.cf-form--label-required {
  color: $c-curacao;
}

/*
  Form Divider
  ------------------------------------------------------------------------------
*/
.cf-form--divider {
  width: 100%;
  height: $cf-form-sm-height - $cf-marg-b;

  &-line {
    height: $cf-border;
    background-color: $cf-card--border;
    margin: (($cf-form-sm-height - $cf-marg-b) / 2) 0;
    border-radius: $cf-border / 2;
  }
}

/*
  Form Footer
  ------------------------------------------------------------------------------
*/
.cf-form--footer {
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-top: $cf-form-sm-height - $cf-marg-b;
  margin-bottom: 0;

  > * {
    margin: 0 $cf-marg-a;
  }
}

/*
  Form Box
  ------------------------------------------------------------------------------
*/
.cf-form--box {
  width: 100%;
  border-radius: $cf-radius;
  background-color: $cf-card-background--default;
  padding: $cf-marg-b ($cf-marg-b + $cf-marg-a);
  min-height: $cf-form-sm-height;
}