1  @import "./colours"
 2  /*
 3  input[type='text'],
 4  input[type='email'],
 5  input[type='password']
 6      color: contentColour
 7      background-color: transparent
 8      border:0
 9      //border-bottom: 3px solid accent1
10      //width:calc(100% - 5px)
11      padding: 5px 1px 5px
12      margin: 10px 0
13  */
14  
15  :focus
16    outline: none
17  
18  .input-container
19    width:calc(100% - 2px);
20    margin: 25px 0 5px;
21    position: relative;
22  
23  input, select, textarea
24    background: transparent
25    width: 100%
26    box-sizing: border-box
27    letter-spacing: 1px
28    z-index:2
29    padding: 0.5em
30  
31  .input-effect
32    // border: 0
33    // border: 1px solid lightGrey
34    // background-color: transparent
35  
36  .input-effect ~ .focus-border
37    position: absolute
38    bottom: 0
39    left: 0
40    width: 100%
41    height: 0
42    background-color: transparent
43    transition: 0.3s;
44  
45  .input-effect:focus ~ .focus-border,
46  .has-content.input-effect ~ .focus-border
47    height: 36px
48    transition: 0.3s
49    // border: 1px solid accent1
50    z-index: 1
51    pointer-events: none
52  
53  .input-effect ~ label
54    position: absolute
55    left: 0
56    width: 100%
57    top: 9px
58    font-style: italic;
59    transition: 0.3s
60    z-index: 1
61    letter-spacing: 0.5px
62    pointer-events: none
63    padding-left: .77em
64  
65  .input-effect:focus ~ label,
66  .has-content.input-effect ~ label
67    top: -20px
68    font-size: 0.7em
69    font-style: normal;
70    font-weight:700;
71    transition: 0.3s
72  
73  textarea
74    background-color:transparent
75    border:1px solid
76    margin-bottom:5px
77  
78  .input-instructions
79    font-size: 0.777em
80    margin-bottom:30px