Skip to content

Commit 1641834

Browse files
BipinKalraBipinKalra
committed
modals 1
1 parent 26662b3 commit 1641834

File tree

3 files changed

+119
-5
lines changed

3 files changed

+119
-5
lines changed

‎examples/views/online-cb/eligibility-test-modals.hbs

Lines changed: 115 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<div class="row no-gutters a-ocb">
22
{{!-- First Modal --}}
33
<div class="col-lg-8">
4-
<div class="br-10 overflow-hidden">
4+
<div class="br-10 overflow-hidden border">
55
<div class="bg-gradient-dpink px-md-5 px-4 py-5 position-relative"
66
style="border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;">
77
<div class="row no-gutters align-items-center white">
@@ -58,7 +58,7 @@
5858

5959
{{!-- Test Passed Modal --}}
6060
<div class="col-lg-8 mt-5">
61-
<div class="br-10 overflow-hidden">
61+
<div class="br-10 overflow-hidden border">
6262
<div class="bg-gradient-dpink px-md-5 px-4 py-5 position-relative"
6363
style="border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;">
6464
<div class="row no-gutters align-items-center white">
@@ -105,7 +105,7 @@
105105

106106
{{!-- Test Failed Modal --}}
107107
<div class="col-lg-8 mt-5">
108-
<div class="br-10 overflow-hidden">
108+
<div class="br-10 overflow-hidden border">
109109
<div class="bg-gradient-dpink px-md-5 px-4 py-5 position-relative"
110110
style="border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;">
111111
<div class="row no-gutters align-items-center white">
@@ -254,4 +254,116 @@
254254
</div>
255255
</div>
256256
</div>
257+
258+
{{!-- MCQ TEST Modal --}}
259+
<div class="col-lg-8 mt-5">
260+
<div class="br-10 p-lg-5 p-4 border">
261+
<div class="font-sm mb-5 pb-5 border-bottom">
262+
Skill Assessment Test: Frontend Developement
263+
</div>
264+
<div class="row no-gutters align-items-center justify-content-between mb-5">
265+
<div class="flex-1">
266+
<div class="font-md bold">
267+
Q1. What is the preferred way for adding a background color in HTML?
268+
</div>
269+
</div>
270+
<div class="s-60x60 border b-pink all-center round">
271+
<div class="t-align-c pink">
272+
<h2 class="bold">30</h2>
273+
<div class="font-sm">SEC</div>
274+
</div>
275+
</div>
276+
</div>
277+
<div
278+
class="border-card py-3 px-4 mb-4 hover-grey pointer row no-gutters align-items-center justify-content-between">
279+
<div class="font-md">
280+
some random option
281+
</div>
282+
</div>
283+
<div
284+
class="border-card py-3 px-4 mb-4 hover-grey pointer row no-gutters align-items-center justify-content-between">
285+
<div class="font-md">
286+
some random option
287+
</div>
288+
</div>
289+
<div
290+
class="border-card py-3 px-4 mb-4 hover-grey pointer row no-gutters align-items-center justify-content-between">
291+
<div class="font-md">
292+
some random option
293+
</div>
294+
</div>
295+
<div
296+
class="border-card py-3 px-4 mb-4 hover-grey pointer row no-gutters align-items-center justify-content-between">
297+
<div class="font-md">
298+
some random option
299+
</div>
300+
</div>
301+
302+
<div class="row no-gutters justify-content-between align-items-center mt-5">
303+
<div class="col-8">
304+
<div class="med-grey font-sm">8 Questions Remaining</div>
305+
<div class="mt-4">
306+
<progress value="40" max="100"></progress>
307+
</div>
308+
</div>
309+
<button class="button-solid button-orange">Next Question</button>
310+
</div>
311+
</div>
312+
</div>
313+
314+
{{!-- MCQ TEST Modal - Various Answer States --}}
315+
<div class="col-lg-8 mt-5">
316+
<div class="br-10 p-lg-5 p-4 border">
317+
<div class="font-sm mb-5 pb-5 border-bottom">
318+
Skill Assessment Test: Frontend Developement
319+
</div>
320+
<div class="row no-gutters align-items-center justify-content-between mb-5">
321+
<div class="flex-1">
322+
<div class="font-md bold">
323+
Q1. What is the preferred way for adding a background color in HTML?
324+
</div>
325+
</div>
326+
<div class="s-60x60 border b-pink all-center round">
327+
<div class="t-align-c pink">
328+
<h2 class="bold">30</h2>
329+
<div class="font-sm">SEC</div>
330+
</div>
331+
</div>
332+
</div>
333+
<div
334+
class="border-card py-3 px-4 mb-4 hover-grey pointer row no-gutters align-items-center justify-content-between">
335+
<div class="font-md">
336+
some random option
337+
</div>
338+
</div>
339+
<div
340+
class="border-card py-3 px-4 mb-4 hover-grey pointer row no-gutters align-items-center justify-content-between">
341+
<div class="font-md">
342+
some random option
343+
</div>
344+
</div>
345+
<div
346+
class="border-card py-3 px-4 mb-4 hover-grey pointer row no-gutters align-items-center justify-content-between">
347+
<div class="font-md">
348+
some random option
349+
</div>
350+
</div>
351+
<div
352+
class="border-card py-3 px-4 mb-4 hover-grey pointer row no-gutters align-items-center justify-content-between">
353+
<div class="font-md">
354+
some random option
355+
</div>
356+
</div>
357+
358+
<div class="row no-gutters justify-content-between align-items-center mt-5">
359+
<div class="col-8">
360+
<div class="med-grey font-sm">8 Questions Remaining</div>
361+
<div class="mt-4">
362+
<progress value="40" max="100"></progress>
363+
</div>
364+
</div>
365+
<button class="button-solid button-orange">Next Question</button>
366+
</div>
367+
</div>
368+
</div>
257369
</div>

‎sass/styles/settings/settings.color.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ $grey: #a2a4a8;
3535
$dark-grey: #666;
3636
$border-grey: #2b2f37;
3737
$del-text-grey: #e7dddd;
38+
$pink: #f24f60;
3839

3940
$facebook: #3b5998;
4041
$google: #f4695a;
@@ -210,7 +211,7 @@ $text-color-list: (
210211
"yellow": $yellow,
211212
"grey": $grey,
212213
"purple": $purple,
213-
"pink": $dcb-pink,
214+
"pink": $pink,
214215
"med-grey": $faded-text,
215216
"dark-grey": $dark-grey,
216217
"del-text-grey": $del-text-grey,

‎sass/styles/utilities/border.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,8 @@
2424
('black', $black),
2525
('orange', $orange),
2626
('white', $white),
27-
('orange', $orange) {
27+
('orange', $orange),
28+
('pink', $pink) {
2829
.b-#{$type} {
2930
border-color: $color !important;
3031
}

0 commit comments

Comments
 (0)