diff --git a/src/styles/quiz.scss b/src/styles/quiz.scss index 4739516..4d91f3a 100644 --- a/src/styles/quiz.scss +++ b/src/styles/quiz.scss @@ -36,10 +36,8 @@ .btn { font-weight: unset !important; font-size: unset !important; - border-color: var(--borderColor-muted, var(--color-border-muted)) !important; - border-radius: 6px !important; - margin-right: 0.5em; - margin-left: 0.5em; + @include default-border; + padding: var(--base-size-8, 8px) !important; &:disabled { cursor: not-allowed; opacity: 0.6; @@ -49,25 +47,27 @@ } &:not(.incorrect):not(.correct) { @include default-color(); - background-color: var(--bgColor-default, var(--color-bg-default)) !important; } } - .startQuizBtn { - @include default-color(); - background-color: var(--bgColor-default, var(--color-bg-default)) !important; - } - .answerBtn { + min-width: 52px; width: unset !important; > span { font-size: unset; } } + .correct { + cursor: not-allowed !important; + pointer-events: none; + opacity: 0.6; + @include primer-success-emphasis; + } .incorrect { cursor: not-allowed !important; pointer-events: none; opacity: 0.6; + @include primer-danger-emphasis; } .tag-container { @@ -75,8 +75,7 @@ display: none; } .number-of-selection { - color: var(--fgColor-on-emphasis, var(--color-fg-on-emphasis)) !important; - background-color: var(--bgColor-emphasis, var(--color-accent-emphasis)) !important; + @include primer-open; } } diff --git a/src/styles/utilities.scss b/src/styles/utilities.scss index c857abd..9cdc455 100644 --- a/src/styles/utilities.scss +++ b/src/styles/utilities.scss @@ -157,10 +157,41 @@ textarea { } @mixin default-border { border: var(--borderWidth-thin, 1px) solid var(--borderColor-default, var(--color-border-default)) !important; - border-radius: 6px; + border-radius: 6px !important; } @mixin default-style { @include default-color(); @include default-border(); +} + +@mixin primer-open { + @include default-border(); + color: var(--fgColor-done, var(--color-done-fg)) !important; + background-color: var(--bgColor-done-subtle, var(--color-done-subtle)) !important; + border-color: var(--borderColor-done-muted, var(--color-done-muted)) !important; +} +@mixin primer-success { + @include default-border(); + color: var(--fgColor-success, var(--color-success-fg)) !important; + background-color: var(--bgColor-success-subtle, var(--color-success-subtle)) !important; + border-color: var(--borderColor-success-muted, var(--color-success-muted)) !important; +} +@mixin primer-success-emphasis { + @include default-border(); + color: var(--fgColor-success, var(--color-success-fg)) !important; + background-color: var(--bgColor-success-subtle, var(--color-success-subtle)) !important; + border-color: var(--borderColor-success-emphasis, var(--color-success-emphasis)) !important; +} +@mixin primer-danger { + @include default-border(); + color: var(--fgColor-danger, var(--color-danger-fg)) !important; + background-color: var(--bgColor-danger-subtle, var(--color-danger-subtle)) !important; + border-color: var(--borderColor-danger-muted, var(--color-danger-muted)) !important; +} +@mixin primer-danger-emphasis { + @include default-border(); + color: var(--fgColor-danger, var(--color-danger-fg)) !important; + background-color: var(--bgColor-danger-subtle, var(--color-danger-subtle)) !important; + border-color: var(--borderColor-danger-emphasis, var(--color-danger-emphasis)) !important; } \ No newline at end of file