diff --git a/FrontEnd/src/app/tests/test-details/question-view/single-choice/single-choice.component.css b/FrontEnd/src/app/tests/test-details/question-view/single-choice/single-choice.component.css index 2f54d55..e2d36f6 100644 --- a/FrontEnd/src/app/tests/test-details/question-view/single-choice/single-choice.component.css +++ b/FrontEnd/src/app/tests/test-details/question-view/single-choice/single-choice.component.css @@ -1,6 +1,70 @@ .answers{ display: flex; flex-direction: column; - align-items: flex-start; + align-items: center; justify-content: flex-start; -} \ No newline at end of file + +} + +.pytanie +{ + background-color: white; + color: black; + width: 50%; + margin-left: auto; + margin-right: auto; + border: 10px solid white; + font-size: larger; + +} + + + + +.radio-answer +{ + display: none; +} + +label +{ + clip-path: polygon(0% 50%, 15% 0%, 85% 0%, 100% 50%, 85% 100%, 15% 100%); + background-color: #000080; + width: 300px; + text-align: center; + border: 3px solid #000080; + border-bottom: #000080; + color: white; + cursor: pointer; + margin-top:10px; + font-size: large; +} + +label:hover +{ + background-color: orange; + border-color: orange; +} + +.radio-answer:checked + label +{ + background-color: orange; + border-color: orange; +} + +@media screen and (max-width: 800px) { + label + { + width: 254px; + } + + .pytanie + { + width: 100%; + } + + .alert-grey + { + background-color: #181616; + } +} diff --git a/FrontEnd/src/app/tests/test-details/question-view/single-choice/single-choice.component.html b/FrontEnd/src/app/tests/test-details/question-view/single-choice/single-choice.component.html index ec4810b..eab9c50 100644 --- a/FrontEnd/src/app/tests/test-details/question-view/single-choice/single-choice.component.html +++ b/FrontEnd/src/app/tests/test-details/question-view/single-choice/single-choice.component.html @@ -1,12 +1,15 @@