diff --git a/src/app/calendar/calendar.component.html b/src/app/calendar/calendar.component.html index cd12a67..08cd9b6 100644 --- a/src/app/calendar/calendar.component.html +++ b/src/app/calendar/calendar.component.html @@ -4,8 +4,8 @@ diff --git a/src/app/tabs/courses/quiz/quiz.component.html b/src/app/tabs/courses/quiz/quiz.component.html index b13fd13..733b464 100644 --- a/src/app/tabs/courses/quiz/quiz.component.html +++ b/src/app/tabs/courses/quiz/quiz.component.html @@ -10,75 +10,100 @@
-
- - - - -
-
- - - - -
-
- - - - -
-
- - - - -
-
- - - - -
-
- - - - -
-
- - - - -
+
+
+ + + + +
+
+ + + + +
+
+ + + + +
+
+ + + + +
+
+ + + + +
+
+ + + + +
+
+ + + + +
-
- - - - -
+
+ + + + +
+ +
+ + + + +
+ +
+ + + + +
-
- - - - -
-
- - - - +
+ + + + +
+ + +
+ + + + +
+ +
+ + + + +

- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto obcaecati perferendis suscipit consequuntur labore voluptatibus vitae totam minima, tempore excepturi, cum at qui voluptas rerum nostrum odio minus, voluptatem dolores. ? + Architecto obcaecati perferendis suscipit consequuntur labore voluptatibus vitae totam minima, tempore excepturi, cum at qui voluptas rerum nostrum odio minus, voluptatem dolores. ?

diff --git a/src/app/tabs/courses/quiz/quiz.component.scss b/src/app/tabs/courses/quiz/quiz.component.scss index fbde56b..7092929 100644 --- a/src/app/tabs/courses/quiz/quiz.component.scss +++ b/src/app/tabs/courses/quiz/quiz.component.scss @@ -47,22 +47,54 @@ .question-status { background-color: var(--ash-black); - padding: 10px 5% 5px; - display: inline-block; - white-space: nowrap; + padding: 10px 0% 5px; + display: block; width: 100%; overflow: auto; margin-bottom: -10px; + position: relative; + + .container { + width: 100%; + padding: 0 5%; + white-space: nowrap; + display: inline-block; + overflow: auto; + } + + &::before { + content: ''; + position: absolute; + left: 0; + top: 0; + width: 10px; + height: 100%; + box-shadow: 10px 0px 10px 10px var(--ash-black); + opacity: 0.8; + background-color: var(--ash-black); + } + + &::after { + content: ''; + position: absolute; + right: 0; + top: 0; + width: 10px; + height: 100%; + box-shadow: -10px 0px 10px 10px var(--ash-black); + opacity: 0.8; + background-color: var(--ash-black); + } .question-number { - width: 20px; - height: 20px; + width: 17px; + height: 17px; background-color: var(--dark-grey); color: white; align-items: center; justify-content: center; display: inline-block; - margin-right: 15px; + margin-right: 10px; border-radius: 50%; overflow: hidden; border: 1px solid var(--dark-grey); @@ -87,6 +119,26 @@ display: none; } + &.current { + border-color: var(--light-grey); + background-color: var(--black); + + &.wrong { + background-color: var(--black); + .icon { + fill: var(--danger-dark) !important; + } + } + + &.correct { + background-color: var(--green); + + .icon { + fill: var(--black) !important; + } + } + } + &.correct { border-color: var(--green); background-color: white; @@ -111,15 +163,11 @@ .icon { fill: white; - width: 10px; - height: 10px; + width: 7px; + height: 7px; display: block; } } - - &.current { - border-color: var(--light-grey); - } } } @@ -127,9 +175,9 @@ ngx-siema-slide { display: block; .question { - line-height: 1.6; + line-height: 1.5; color: white; - font-size: 14px; + font-size: 13px; background-color: var(--ash-black); padding: 15px 5%; }