diff --git a/assets/css/3rd-party/themes/course/quiz.scss b/assets/css/3rd-party/themes/course/quiz.scss index 958c8ca766..8d64a9be64 100644 --- a/assets/css/3rd-party/themes/course/quiz.scss +++ b/assets/css/3rd-party/themes/course/quiz.scss @@ -1,7 +1,24 @@ .sensei-course-theme__quiz { + &__main-content { .wp-block-post-title { margin-bottom: 3.75rem; } } + &__footer { + .sensei-quiz-actions { + .sensei-quiz-action { + button { + padding: 1rem 32px; + } + } + .sensei-quiz-actions-secondary { + .sensei-quiz-action { + button { + font-family: var( --wp--preset--font-family--body ); + } + } + } + } + } } diff --git a/assets/css/frontend.scss b/assets/css/frontend.scss index 42d14b0831..c000db3fbe 100644 --- a/assets/css/frontend.scss +++ b/assets/css/frontend.scss @@ -495,20 +495,17 @@ div.sensei-quiz-actions { display: flex; flex-direction: column; align-items: center; - gap: 1.5em; + row-gap: 32px; @media only screen and (min-width: $tablet-breakpoint) { flex-direction: row; margin-left: auto; + justify-content: space-between; } .sensei-quiz-action { margin: 0; padding: 0; - - .button { - padding: 8px 11px; - } } .sensei-quiz-actions-primary { @@ -518,21 +515,17 @@ div.sensei-quiz-actions { .sensei-quiz-actions-secondary { display: flex; - order: 1; + column-gap: 56px; + flex-direction: column; + row-gap: 32px; + align-items: center; @media only screen and (min-width: $tablet-breakpoint) { order: 0; + flex-direction: row; } .sensei-quiz-action { - display: flex; - - &:not(:first-child) { - margin-left: 0.5em; - padding-left: 0.5em; - border-left: 2px solid; - } - .button, button { @include button-link; } diff --git a/assets/css/sensei-course-theme/buttons.scss b/assets/css/sensei-course-theme/buttons.scss index e35abc92f6..e6e793287c 100644 --- a/assets/css/sensei-course-theme/buttons.scss +++ b/assets/css/sensei-course-theme/buttons.scss @@ -6,19 +6,17 @@ $breakpoint: 782px; gap: 12px; } + .sensei-course-theme__button, -.sensei-course-theme__link { +.sensei-course-theme__link, +.sensei-course-theme .wp-block-button.is-style-outline > .wp-block-button__link { align-items: center; height: 100%; justify-content: center; white-space: nowrap; width: 100%; - - @media screen and (max-width: $breakpoint) { - padding: 20px; - line-height: 100%; - letter-spacing: -0.14px; - } + padding: 1rem 32px; + line-height: 100%; &.has-icon { display: flex; diff --git a/assets/css/sensei-course-theme/quiz.scss b/assets/css/sensei-course-theme/quiz.scss index 652210fa24..43572eba23 100644 --- a/assets/css/sensei-course-theme/quiz.scss +++ b/assets/css/sensei-course-theme/quiz.scss @@ -1,16 +1,18 @@ -/** - * Variables - */ -$tablet-breakpoint: 768px; - @import '~@wordpress/base-styles/breakpoints'; @import '../../shared/blocks/progress-bar/progress-bar'; +$vertical-spacing: 60px; +$vertical-spacing-desktop: 80px; + .sensei-course-theme__quiz { &__main-content { - margin-bottom: 100px !important; + margin-bottom: $vertical-spacing; padding-top: clamp(2.5rem, 1.346rem + 3.846vw, 3.75rem); + @media (min-width: $break-medium) { + margin-bottom: $vertical-spacing-desktop; + } + .wp-block-post-title { margin-top: clamp(1.688rem, 0.534rem + 3.846vw, 2.938rem); } @@ -41,31 +43,24 @@ $tablet-breakpoint: 768px; } } - &__header, &__footer { - padding: 24px; - - margin: 0 auto; - max-width: 1200px; - - display: flex; - align-items: center; - justify-content: space-between; - gap: 24px; - - } - &__footer { + align-items: center; display: flex; flex-direction: row; + gap: 24px; justify-content: flex-end; - align-items: center; - max-width: var(--content-size); margin: 0 auto; - padding: 24px 0; + max-width: var(--content-size); &__wrapper { - margin: 0 !important; display: block; + margin: 0 !important; + /* Using padding instead of margin as some themes have a non-white body background color. */ + padding-bottom: $vertical-spacing; + + @media (min-width: $break-medium) { + padding-bottom: $vertical-spacing-desktop; + } } .wp-block-group__inner-container { @@ -75,8 +70,18 @@ $tablet-breakpoint: 768px; .sensei-quiz-actions { width: 100%; - flex-direction: column; - gap: 2rem; + + .sensei-quiz-actions-secondary { + + .sensei-quiz-action { + .button, button { + text-decoration: none; + &:hover { + text-decoration: underline; + } + } + } + } } .sensei-quiz-pagination { @@ -100,26 +105,23 @@ $tablet-breakpoint: 768px; } } -@media only screen and (min-width: $tablet-breakpoint) { +@media only screen and (min-width: $break-medium) { .sensei-course-theme__quiz { &__footer { &__wrapper { - position: fixed; - bottom: 0; - left: 0; - right: 0; - z-index: 100; background-color: var(--sensei-background-color); - box-shadow: 2px 10px 30px 5px rgba(0, 0, 0, 0.1); } .sensei-quiz-actions { - width: auto; - flex-direction: row-reverse; + flex-direction: row; .sensei-quiz-action { flex: unset; } + + .sensei-quiz-actions-secondary { + flex-direction: row; + } } .sensei-quiz-pagination { diff --git a/changelog/add-footer-style-update-lm-quiz b/changelog/add-footer-style-update-lm-quiz new file mode 100644 index 0000000000..a5b27d34ae --- /dev/null +++ b/changelog/add-footer-style-update-lm-quiz @@ -0,0 +1,4 @@ +Significance: minor +Type: changed + +Changed the footer styles of Quiz template diff --git a/includes/class-sensei-quiz.php b/includes/class-sensei-quiz.php index ab87254611..743a6b9976 100755 --- a/includes/class-sensei-quiz.php +++ b/includes/class-sensei-quiz.php @@ -1842,6 +1842,12 @@ public static function action_buttons() { $is_reset_allowed = self::is_reset_allowed( $lesson_id ); $has_actions = $is_reset_allowed || ! $is_quiz_completed; + $wrapper_attributes = get_block_wrapper_attributes( + [ + 'class' => 'sensei-quiz-actions', + ] + ); + if ( ! $has_actions ) { return; } @@ -1851,7 +1857,13 @@ public static function action_buttons() { wp_enqueue_script( 'sensei-stop-double-submission' ); ?> -