profileTypeForm.scss 2.84 KB
Newer Older
Yoan VALLET's avatar
Yoan VALLET committed
1
2
3
4
5
@import '../../styles/base/color';
@import '../../styles/base/breakpoint';

.profile-form-container {
  color: $white;
HAUTBOIS Aurelie's avatar
HAUTBOIS Aurelie committed
6
  margin: 1rem 1rem 3.5rem;
7
  width: 100%;
Yoan VALLET's avatar
Yoan VALLET committed
8
  max-width: 53rem;
HAUTBOIS Aurelie's avatar
HAUTBOIS Aurelie committed
9
  @media (min-width: $width-tablet) {
HAUTBOIS Aurelie's avatar
HAUTBOIS Aurelie committed
10
11
    margin: 1rem 1rem 0;
  }
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
  .text,
  .number {
    font-size: 1.25rem;
    input {
      margin: 0.5rem;
      background: $dark-light-2;
      color: $white;
      border: 1px solid $gold-shadow;
      max-width: 5rem;
      height: 2.5rem;
      text-align: center;
      &:focus {
        outline: $gold-shadow 1px;
      }
      &:disabled {
        -webkit-text-fill-color: $white;
        opacity: 1;
      }
    }
  }
Yoan VALLET's avatar
Yoan VALLET committed
32
33
34
}
.profile-question-label {
  font-weight: bold;
Yoan VALLET's avatar
Yoan VALLET committed
35
  font-size: 1.375rem;
Yoan VALLET's avatar
Yoan VALLET committed
36
  line-height: 150%;
Yoan VALLET's avatar
Yoan VALLET committed
37
  padding: 1rem 0;
Yoan VALLET's avatar
Yoan VALLET committed
38
}
39
40
41
42
43
44
45
.profile-question-hint {
  font-size: 1rem;
  color: $grey-bright;
  display: block;
  margin-bottom: 1rem;
  font-style: italic;
}
Yoan VALLET's avatar
Yoan VALLET committed
46
47
48
.profile-question-answers {
  display: flex;
}
49
.profile-question-answers-radio-long {
Yoan VALLET's avatar
Yoan VALLET committed
50
51
52
53
54
55
  flex-wrap: wrap;
}

.profile-question-answers-other {
  flex-direction: column;
}
56
57
58
59
.radio_short,
.radio_long,
.checkbox {
  background: linear-gradient(180deg, #323339 0%, #25262b 100%);
Yoan VALLET's avatar
Yoan VALLET committed
60
  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);
Yoan VALLET's avatar
Yoan VALLET committed
61
  margin: 0.5rem 0;
Yoan VALLET's avatar
Yoan VALLET committed
62
63
64
65
  display: flex;
  align-items: center;
  font-weight: bold;
  input {
Yoan VALLET's avatar
Yoan VALLET committed
66
    margin: 0.5rem 1rem 0.5rem 0.5rem;
Yoan VALLET's avatar
Yoan VALLET committed
67
68
69
70
71
72
73
74
75
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    background: $dark-background;
    position: relative;

Hugo's avatar
Hugo committed
76
77
78
    // &:focus {
    //   outline: none;
    // }
Yoan VALLET's avatar
Yoan VALLET committed
79
80
81
82
83
84
85
  }
}
.checkbox {
  input {
    border-radius: 1px;
  }
}
86
87
88
89
.radio_short,
.checkbox {
  padding: 1.2rem;
  border-radius: 4px;
Yoan VALLET's avatar
Yoan VALLET committed
90
91
}
.radio_long {
92
  padding: 0.5rem 1rem;
Guilhem CARRON's avatar
Guilhem CARRON committed
93
  border-radius: 4px;
Yoan VALLET's avatar
Yoan VALLET committed
94
95
96
  text-align: center;
}
.answer-checked {
97
98
99
100
101
102
  background: radial-gradient(
      105.25% 64.58% at 49.68% 70.83%,
      rgba(226, 137, 4, 0.5) 0%,
      rgba(255, 255, 255, 0) 100%
    ),
    #f1c017;
Yoan VALLET's avatar
Yoan VALLET committed
103
104
  color: $dark-light-2;
  input {
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
    &:before,
    &:after {
      content: '';
      position: absolute;
      display: inline-block;
      background: $gold-shadow;
      border-radius: 0.5rem;
    }
    &:before {
      width: 3px;
      height: 12px;
      left: 10px;
      top: 4px;
      transform: rotate(41deg);
    }
    &:after {
      width: 3px;
      height: 6px;
      left: 5px;
      top: 8px;
      transform: rotate(133deg);
    }
Yoan VALLET's avatar
Yoan VALLET committed
127
128
129
130
  }
}
.number-container {
  display: flex;
Yoan VALLET's avatar
Yoan VALLET committed
131
132
  justify-content: left;
  align-items: center;
Yoan VALLET's avatar
Yoan VALLET committed
133
134
135
136
137
138
}
.btn-profile-number {
  background: $grey-linear-gradient-background;
  background-color: transparent;
  border: none;
  border-radius: 2px;
Yoan VALLET's avatar
Yoan VALLET committed
139
140
141
  width: 2.5rem;
  height: 2.5rem;
  font-size: 2rem;
Yoan VALLET's avatar
Yoan VALLET committed
142
  color: $white;
Yoan VALLET's avatar
Yoan VALLET committed
143
144
145
146
147
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.5rem;

Hugo's avatar
Hugo committed
148
149
150
  // &:focus {
  //   outline: none;
  // }
Yoan VALLET's avatar
Yoan VALLET committed
151
152
153
}
button:disabled {
  opacity: 0.5;
154
}