App.less 5.15 KB
Newer Older
Christopher Guindon's avatar
Christopher Guindon committed
1
2
/*
 * Copyright (c) 2021 Eclipse Foundation, Inc.
3
 *
Christopher Guindon's avatar
Christopher Guindon committed
4
5
6
 * This program and the accompanying materials are made available under the
 * terms of the Eclipse Public License v. 2.0 which is available at
 * http://www.eclipse.org/legal/epl-2.0.
7
 *
Christopher Guindon's avatar
Christopher Guindon committed
8
9
 * Contributors:
 *   Christopher Guindon <chris.guindon@eclipse-foundation.org>
10
 *
Christopher Guindon's avatar
Christopher Guindon committed
11
12
13
14
15
16
17
 * SPDX-License-Identifier: EPL-2.0
*/

//==  Background color for `<body>`.
@body-bg: #f9f9f9;

//== Colors
18
19
20
21
22
@brand-primary: #f7941e; // Orange
@brand-secondary: #404040; // Gray
@brand-tertiary: #3f7b96; // Blue
@brand-quaternary: #efefef; // Light Gray
@brand-quinary: @brand-quaternary; // Light Gray (Breadcrumbs)
Christopher Guindon's avatar
Christopher Guindon committed
23

24
25
26
@brand-info: @brand-tertiary;
@brand-info-light: lighten(@brand-info, 20%);
@brand-warning: @brand-primary;
Christopher Guindon's avatar
Christopher Guindon committed
27
28
29
30
31

//== Links
//** Global textual link color.
@link-color: @brand-tertiary;
//** Link hover color set via `darken()` function.
32
@link-hover-color: darken(@link-color, 10%);
Christopher Guindon's avatar
Christopher Guindon committed
33
34
35
36
37
38
39
//** Link hover decoration.
@link-hover-decoration: underline;
//** Link visited color
@link-visited-color: #af6e3d;

//== Static colors
// Only use when really necessary
40
41
42
43
44
45
46
47
48
49
50
51
52
53
@orange: #f7941e;
@purple: #2c2255;
@blue: rgb(0, 0, 255);
@blue-dark: #2c2255;
@blue-light: #afbbdc;
@blue-lighter: #dfe2ed;
@green-dark: #5a6700;
@green-light: #c0d050;
@green-lighter: #faffd4;
@gray-mid-light: #ccc;
@gray: #2f2f2f;
@white: #fff;
@black: #000000;
@red: #ff0000;
Christopher Guindon's avatar
Christopher Guindon committed
54
55
56

@eclipse-light-grey: #e8e8e8;
@eclipse-highlight-grey: #ececec;
Martin Lowe's avatar
Martin Lowe committed
57

58
59
60
//== Everything related to sizes
@border-radius: 5px;

61
62
63
64
html {
  font-size: 14px;
}

65
66
67
68
69
70
71
72
73
74
.dropdown-menu {
  li:last-child {
    cursor: pointer;
    span {
      color: #4c4d4e;
      padding: 3px 20px;
    }
  }
}

Zhou Fang's avatar
Zhou Fang committed
75
76
.toolbar-no-login {
  a {
77
78
79
80
    margin-left: 13px;
  }
}

81
.eclipsefdn-membership-webform {
Christopher Guindon's avatar
Christopher Guindon committed
82
83
84
  .input-group .form-control {
    z-index: unset;
  }
85
  .error {
86
    color: @red;
87
  }
88

89
  .orange-star {
Christopher Guindon's avatar
Christopher Guindon committed
90
    color: @brand-primary;
91
92
93
    font-weight: bold;
    font-size: larger;
  }
94

95
96
97
98
  .display-center {
    display: flex;
    align-items: center;
    justify-content: center;
99
100
101
  }

  .loadingIcon {
102
103
    margin-top: 5rem;
    margin-bottom: 3rem;
104
105
106
  }

  .form-control {
107
    border-radius: @border-radius;
108
109
110
111
112
113
114
115
116
    box-shadow: none;
    height: 36px;
  }

  label {
    font-weight: unset;
  }

  .form-border-error {
117
    border-color: @red;
118
119
120
  }

  .btn {
121
    margin: 10px;
122
    border-radius: @border-radius;
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
  }

  .button-container {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  label#effective-date-label {
    display: none;
  }

  select.form-control {
    width: 50%;
  }

  .align-center {
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
  }

145
  input[type='checkbox'] {
146
147
148
149
    display: inline-block;
    width: 30px;
    height: 30px;
    border: 1px solid hsl(0, 0%, 80%);
150
    border-radius: @border-radius;
151
152
153
    margin-top: 0;
    margin-right: 15px;
  }
154

155
  input[type='checkbox']:checked {
156
    background-color: @brand-primary;
157
158
159
160
161
162
  }

  .verical-center {
    display: flex;
    align-items: center;
  }
163
  input[type='checkbox']:focus {
164
165
166
167
168
169
170
171
172
173
174
175
176
177
    outline: none !important;
  }

  /* Stepper */
  .stepper {
    display: flex;
    flex-wrap: wrap;
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
  }

  .step {
178
179
180
181
182
183
184
    & {
      width: calc(100% / 3);
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
      padding-top: 30px;
185
      cursor: pointer;
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
    }
    a {
      text-decoration: none;
      color: inherit;
    }
    a:visited {
      color: inherit;
    }
  }

  .btn {
    a {
      text-decoration: none;
      color: inherit;
    }
    a:visited {
      color: inherit;
    }
204
205
206
207
208
  }

  .step-span {
    width: 50px;
    height: 50px;
Christopher Guindon's avatar
Christopher Guindon committed
209
    background: @brand-primary;
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
  }

  .step-span-index {
    font-size: xx-large;
    font-weight: 600;
    padding-left: 15px;
  }

  .step-title {
    padding: 10px;
    font-weight: 600;
  }

  .step-title-container {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 60px;
    min-width: 100px;
    background-color: #e2e2e2;
    position: relative;
    top: 15px;
    left: 15px;
  }

236
  .step-title-container-active:extend(.eclipsefdn-membership-webform .step-title-container) {
237
    // &:extend(.step-title-container);
Christopher Guindon's avatar
Christopher Guindon committed
238
239
    background: @brand-secondary 50% no-repeat;
    color: @white;
240
241
  }

242
243
244
245
246
247
248
249
250
251
  .button-container {
    a {
      text-decoration: none;
    }
    button {
      width: 80px;
      margin: 0 14px;
    }
  }

252
253
  .msg-popup {
    & {
254
255
      z-index: 1000;
      position: fixed;
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
      top: -70px;
      left: calc(50vw - 200px);
      width: 400px;
      height: 60px;
      background-color: white;
      border-radius: @border-radius;
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 1px 1px 14px rgba(0, 0, 0, 0.15);
      transition: all 0.35s ease-in;
    }
    svg {
      margin: 0 0.5rem;
    }
    span {
      margin: 0 0.5rem;
    }
  }

  .msg-popup-show {
    top: 25px;
    transition: all 0.35s ease-out;
  }

281
282
283
284
285
  // Mobile First
  @media (min-width: 992px) {
    .step {
      width: calc(100% / 6);
      padding-top: 10px;
286
    }
287
288
  }
}
Zhou Fang's avatar
Zhou Fang committed
289
290
291
292

.scrollup {
  cursor: pointer;
}
293
294

// ********** Portal ********** //