- 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%;
}