git.iko.soy/bridge
on df0c310 help sign in
bridge/src/views/Invite/Cohort.scss
236 lines 4.7 kB history raw
1@import 'style/shared/variables.scss';
3.cohort {
4 font-size: 14px;
6 .has-invites-header {
7 display: flex;
8 flex-direction: row;
9 justify-content: space-between;
10 align-items: center;
11 width: 100%;
13 .download-csv {
14 padding: 6px 12px;
15 background-color: $washed-gray;
16 border-radius: $medium-border-radius;
17 display: flex;
18 flex-direction: row;
19 justify-content: space-between;
20 align-items: center;
21 cursor: pointer;
23 &:disabled {
24 cursor: not-allowed;
25 color: $light-gray;
27 svg * {
28 fill: $light-gray;
29 }
30 }
32 svg {
33 height: 14px;
34 width: 20px;
35 }
37 div {
38 margin-left: 4px;
39 }
40 }
41 }
43 .number-emphasis {
44 background-color: $light-gray;
45 border-radius: $small-border-radius;
46 margin: 0 4px;
47 }
49 .body-pane {
50 min-height: 212px;
51 justify-content: space-between;
52 font-size: 14px;
54 &.center {
55 justify-content: center;
56 }
58 .content {
59 width: 100%;
60 font-size: 14px;
61 line-height: 24px;
63 &.center {
64 text-align: center;
65 margin-top: 20px;
66 width: 320px;
67 margin: auto;
68 }
70 .timer {
71 font-weight: 800;
72 }
74 .invites {
75 .invite {
76 display: flex;
77 flex-direction: row;
78 justify-content: space-between;
79 align-items: center;
80 margin-top: 12px;
81 }
83 .invite-url {
84 background-color: $washed-gray;
85 border-radius: $medium-border-radius;
86 border: 1px solid $light-gray;
87 width: 390px;
88 padding: 3px 8px;
90 &.shortened {
91 width: 300px;
92 }
93 }
95 .copy-invite,
96 .ticket-loader {
97 background-color: $washed-gray;
98 border-radius: $medium-border-radius;
99 width: 32px;
100 height: 32px;
101 display: flex;
102 flex-direction: column;
103 justify-content: center;
104 align-items: center;
105 }
107 .copy-invite svg {
108 font-size: 16px;
109 margin-top: 6px;
110 margin-right: 4px;
111 }
113 .ticket-loader > svg {
114 width: 16px;
115 height: 16px;
116 }
117 }
119 .paginator {
120 margin-top: 16px;
121 text-align: center;
122 }
123 }
125 .generate-button {
126 margin-bottom: 20px;
127 border-radius: $medium-border-radius;
128 color: white;
129 background-color: black;
130 }
131 }
133 .migrate {
134 color: $dark-gray;
135 text-decoration: underline;
136 cursor: pointer;
137 }
139 &.show-invite-form {
140 .body-pane {
141 .upper,
142 .lower {
143 width: 100%;
144 }
146 .migration-prompt {
147 line-height: 20px;
148 }
150 .points-input {
151 line-height: 28px;
152 margin-bottom: 24px;
154 .input-box {
155 margin: 0 6px;
156 height: 28px;
157 width: 40px;
158 padding: 2px 6px;
159 font-weight: 800;
160 font-family: 'Inter', -apple-system, BlinkMacSystemFont, Roboto,
161 Helvetica, Arial, sans-serif, 'Apple Color Emoji';
162 text-align: center;
164 &.over-quota {
165 color: $warning-red;
166 }
167 }
168 }
170 .ship-or-address {
171 margin: 6px 0;
172 color: $dark-gray;
173 }
175 .dropdown .address {
176 display: flex;
177 flex-direction: row;
178 justify-content: space-between;
179 align-items: center;
180 cursor: pointer;
182 padding: 8px 12px 8px 16px;
183 }
185 .next-roll {
186 width: 100%;
187 display: flex;
188 flex-direction: row;
189 justify-content: space-between;
190 align-items: center;
191 font-weight: 500;
192 }
194 .generate-codes {
195 border-radius: $medium-border-radius;
196 width: 100%;
197 height: 32px;
198 font-size: 14px;
199 background-color: black;
200 color: white;
201 font-family: 'Inter', -apple-system, BlinkMacSystemFont, Roboto,
202 Helvetica, Arial, sans-serif, 'Apple Color Emoji';
203 border: none;
204 margin-top: 8px;
205 padding: 8px;
207 &.disabled {
208 background-color: $dark-gray;
209 }
210 }
211 }
212 }
214 .add-more {
215 border: 1px solid $light-gray;
216 border-radius: $medium-border-radius;
217 margin-top: 16px;
218 padding: 16px;
219 font-size: 14px;
220 font-weight: 600;
222 svg {
223 height: 14px;
224 width: 12px;
225 }
226 }
228 .invite-limit-message {
229 border: 1px solid $light-gray;
230 border-radius: $medium-border-radius;
231 margin-top: 16px;
232 padding: 16px;
233 font-size: 14px;
234 line-height: 1.4em;
235 }