1 $group
2 . form-control
3 background-color var(--color-input-bg)
4 background-position right 8px center
5 background-repeat no-repeat
6 border 1px solid var(--color-input-border)
7 border-radius 6px
8 box-shadow var(--color-shadow-inset)
9 color var(--color-text-primary)
10 font-size 14px
11 line-height 20px
12 outline none
13 padding 5px 12px
14 vertical-align middle
15 # ==========================================================================
16 # Form
17 # ==========================================================================
18 . form-card
19 padding 30px
20 border 1px solid #ebebeb
21 . form-title
22 font-size 30px
23 font-weight 700
24 margin-bottom 20px
25 # ==========================================================================
26 # Control
27 # ==========================================================================
28 . control-group
29 width 100%
30 padding 10px
31 margin-bottom 5px
32 . single-control
33 width 100%
34 margin-bottom 5px
35 . control-label
36 font-weight bold
37 margin-bottom 7px
38 . control-error
39 font-size 12px
40 color red
41 # ==========================================================================
42 # Label
43 # ==========================================================================
44 < label.required
45 position relative
46 < label.required:after
47 content '*'
48 margin-left 2px
49 color #b90000
50 # ==========================================================================
51 # GRID
52 # ==========================================================================
53 . grid-row-2
54 display grid
55 grid-template-columns 1fr 1fr
56 . grid-row-3
57 display grid
58 grid-template-columns 1fr 1fr 1fr
59 . input-group
60 position relative
61 width 100%
62 margin-bottom 1px
63 padding-bottom 4px
64 # ==========================================================================
65 # BUTTON
66 # ==========================================================================
67 . btn
68 line-height 40px
69 display inline-block
70 padding 0 25px
71 cursor pointer
72 color #fff
73 font-family "Roboto", "Arial", "Helvetica Neue", sans-serif
74 transition all 0.4s ease
75 font-size 14px
76 font-weight 700
77 . btn--radius
78 border-radius 3px
79 . btn--green
80 background #57b846
81 . btn--green:hover
82 background #4dae3c
83 # ==========================================================================
84 # Input
85 # ==========================================================================
86 < input
87 box-sizing border-box
88 border 1px solid #ebebeb
89 padding 14px 20px
90 border-radius 5px
91 font-size 14px
92 font-family inherit
93 < input:focus
94 border 1px solid #009e00
95 < input.error
96 border 1px solid #c70000
97 . input-icon
98 position absolute
99 font-size 18px
100 color #ccc
101 right 8px
102 top 50%
103 transform translateY(-50%)
104 cursor pointer
105 . input--style-2
106 color #666
107 font-size 16px
108 font-weight 500
109 . input--style-2::-webkit-input-placeholder
110 color #808080
111 opacity .4
112 . input--style-2:-moz-placeholder
113 color #808080
114 opacity .4
115 . input--style-2::-moz-placeholder
116 color #808080
117 opacity .4
118 . input--style-2:-ms-input-placeholder
119 color #808080
120 opacity .4
121 . input--style-2:-ms-input-placeholder
122 color #808080
123 opacity .4
124 # ==========================================================================
125 # Object condition
126 # ==========================================================================
127 . object-condition
128 border 1px solid #cbcbcb
129 padding 5px
130 background-color #efefef
131 . object-condition-checkbox
132 background-color #fff