Skip to content

Commit

Permalink
Merge pull request #6854 from Automattic/update/spacing-course-theme
Browse files Browse the repository at this point in the history 
Adjust course theme spacings and alignments
  • Loading branch information
@gabrielcaires
gabrielcaires committed May 22, 2023
2 parents 06aec10 + 0e3b352 commit 29efe1a
Show file tree
Hide file tree
Showing 8 changed files with 324 additions and 212 deletions.
145 changes: 114 additions & 31 deletions assets/css/3rd-party/themes/course/learning-mode.scss
View file
Original file line number Diff line number Diff line change
@@ -1,33 +1,67 @@
:root, .sensei-course-theme {
--sensei-lm-header-height: 116px;
:root {
--sensei-lm-header-height: 84px;
}

body {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;

.is-layout-flow > * + * {
margin-block-start: 1.5rem;
margin-block-end: 0;
}

.is-layout-flow > * + .sensei-course-theme__main-content {
margin-block-start: 0;
}
}

/* Override theme.json blockGap setting. */
.sensei-course-theme .sensei-course-theme__sidebar,
.sensei-course-theme__sidebar .wp-block-sensei-lms-course-navigation,
.sensei-course-theme .is-layout-constrained > .wp-block-columns.is-layout-flex {
margin-block-start: 0;
.has-global-padding {
padding: 0;
}


.sensei-course-theme {
&__frame {
font-size: 0.8725rem;
}

&__header__info {
gap: 1rem;
}

.wp-block-sensei-lms-course-theme-course-progress-bar {
background-color: var(--border-color);
}
}

.sensei-course-theme__sidebar {
--sensei-lm-sidebar-width: 290px;
--sensei-lm-sidebar-width: 312px;

.wp-block-sensei-lms-course-navigation {
padding-top: 0;
margin-block-start: 0;
}
}

.sensei-course-theme__frame.sensei-course-theme__header {
padding-top: 45px;
/* Override theme.json blockGap setting. */
.sensei-course-theme .sensei-course-theme__sidebar,
.sensei-course-theme__sidebar .wp-block-sensei-lms-course-navigation,
.sensei-course-theme .is-layout-constrained>.wp-block-columns.is-layout-flex {
margin-block-start: 0;
}

/* Course Navigation */
.sensei-lms-course-navigation-module:not(:first-of-type) {
margin-top: 18px;

.sensei-lms-course-navigation {
&__modules,
&__lessons {
padding-inline-start: 0;
}
}

.sensei-lms-course-navigation-module__header{

.sensei-lms-course-navigation-module__header {
padding-top: 0;
}

Expand All @@ -50,6 +84,11 @@ body {
padding-bottom: 0;
}


.sensei-lms-course-navigation-lesson__title {
font-family: var(--wp--preset--font-family--system);
}

.sensei-lms-course-navigation-lesson__link {
align-items: baseline;
}
Expand All @@ -60,10 +99,16 @@ body {
}

/* Lesson Actions */
.wp-block-sensei-button:where(:not(.is-style-link)) a:hover{
.wp-block-sensei-button:where(:not(.is-style-link)) a:hover {
text-decoration: none;
}

@media screen and (min-width: 783px) {
.sensei-course-theme__columns .sensei-course-theme__sidebar~.sensei-course-theme__main-content {
padding-top: 52px;
}
}

.sensei-course-theme-lesson-actions__next-lesson {
letter-spacing: 0.05em;
text-transform: uppercase;
Expand Down Expand Up @@ -94,19 +139,7 @@ body {
margin: -1px;
}

.sensei-course-theme-lesson-actions .sensei-course-theme__button.has-icon,
.sensei-course-theme-lesson-actions .sensei-course-theme__link.has-icon {
display: flex;
gap: 4px;
align-items: center;
}

.sensei-course-theme-lesson-actions .sensei-course-theme__button.has-icon svg,
.sensei-course-theme-lesson-actions .sensei-course-theme__link.has-icon svg {
width: 20px;
height: 20px;
}

// Video Container
.sensei-course-theme .sensei-course-theme__video-container::after {
--sensei-lm-sidebar-width: 290px;
}
Expand All @@ -123,13 +156,13 @@ body {

/* Progress bar in Modern and Video templates. */
.sensei-course-theme__sidebar .sensei-course-theme-course-progress-bar {
background-color: transparent;
border: 1px solid;
border-radius: 6px;
height: auto;
padding: 2px;
}


.sensei-course-theme__sidebar .sensei-course-theme-course-progress-bar-inner {
border-radius: 4px;
height: 8px;
Expand Down Expand Up @@ -166,11 +199,61 @@ body {
max-width: 100%;
}

.sensei-course-theme__header + .sensei-course-theme__columns > div:first-child.sensei-course-theme__sidebar {
.sensei-course-theme__header+.sensei-course-theme__columns > div:first-child.sensei-course-theme__sidebar {
border-radius: 0px;
border-width: 0px 1px 0px 0px;
padding-left: 20px;
padding-right: 20px;
}

.sensei-lms-course-navigation__modules {
padding-inline-start: 0;
}

.wp-block-post-content :is(h2, h3, h4, h5, h6) {
padding-top: 0;
}

.wp-block-post-content.is-layout-flow > * + * {
margin-block-start: 1.5rem;
}

.sensei-course-theme__post-pagination~.sensei-lesson-footer {
margin-block-start: 2rem !important; // The !important is require until we remove the spacing from the block template.
}

.sensei-course-theme .entry-content.wp-block-post-content {
margin-top: 1.5rem;
}

.sensei-course-theme__button.has-icon svg,
.sensei-course-theme__link.has-icon svg {
width: 16px;
height: 16px;
}

// DESKTOP ONLY
@media screen and (min-width: 783px) {
body .is-layout-flow > * + * {
margin-block-start: 2.5rem;
margin-block-end: 0;
}

.sensei-course-theme__columns .sensei-course-theme__sidebar~.sensei-course-theme__main-content {
padding-top: 3.5rem;
}

.wp-block-post-content.is-layout-flow > * + * {
margin-block-start: 2.5rem;
}

.sensei-course-theme__post-pagination~.sensei-lesson-footer {
margin-block-start: 1.25rem !important;
}
}

// Notice
.sensei-course-theme-lesson-quiz-notice {
font-family: var(--wp--preset--font-family--system);
margin: 1.5rem 0;
}

/* Modern Template */
Expand Down
172 changes: 172 additions & 0 deletions assets/css/learning-mode-compat.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
/* This file loads for all themes except Course. */

$breakpoint: 782px;

/*
This style files are only required when the current theme don't provide learning mode customizations.
Block based themes should declare add_theme_support('sensei-learning-mode'); to enable customization via theme.json
Expand Down Expand Up @@ -121,3 +123,173 @@
.sensei-lms-course-navigation-lesson__extra {
color: var(--sensei-lesson-meta-color);
}


.sensei-course-theme {
a, button {
&:focus {
outline: none;
}

&:focus-visible {
transition: none;
outline: dashed 1px var(--sensei-primary-color);
}
}
}

.editor-styles-wrapper .sensei-course-theme__main-content .wp-block-button,
.sensei-course-theme .wp-block-button,
.sensei-course-theme__button {
.wp-block-button__link {
border: none;
font-family: inherit;
font-weight: inherit;
font-size: inherit;
background-color: inherit !important;
color: inherit !important;
text-transform: unset;

&:hover {
background-color: inherit !important;
color: inherit !important;
text-decoration: none !important;
}
}

background: transparent;
border: none;
border-radius: 2px;
cursor: pointer;
font-family: var(--wp--preset--font-family--body-font);
font-size: 1.125rem;
font-weight: 400;
letter-spacing: normal;
margin: 0;
padding: 0;
text-align: center;
text-decoration: none !important;
text-transform: unset;

&.is-primary,
&.is-secondary,
&.is-link,
&.wp-block-button > .wp-block-button__link {
border-radius: 2px;
font-weight: 400;
padding: 0.83em 1.11em;
text-decoration: none;
height: 100%;
width: 100%; // Fix the animation issue.
justify-content: center;

@media screen and (max-width: $breakpoint) {
padding: 0.83em 0.556em;
}
}

&.is-primary,
&.is-secondary,
&.wp-block-button {
border: solid 1px var(--sensei-secondary-color);

&.wp-block-button__link {
border: none;
}
}

&.wp-block-button {
padding: 0;
}

&.is-primary,
&.wp-block-button:not(.is-style-outline, .is-style-link) {
background-color: var(--sensei-secondary-color);
color: var(--sensei-button-text-color);

&:hover {
color: var(--sensei-button-fill-hover-color);
background-color: var(--sensei-primary-color);
border-color: var(--sensei-primary-color);
}

&:focus {
border: 1px solid var(--sensei-button-fill-hover-color);
box-shadow: 0px 0px 0px 1.5px var(--sensei-secondary-color);
}
}

&.is-secondary,
&.wp-block-button.is-style-outline {
--wp--custom--button--border--color: var(--sensei-primary-color);
color: var(--sensei-primary-color);
flex-shrink: 0;

&:hover {
background-color: var(--sensei-button-outline-hover-color);
color: var(--sensei-primary-color);

.wp-block-button__link {
border-color: var(--sensei-primary-color);
}
}

&:focus {
border-width: 1.5px;
}
}

&.is-link {
background: none;
color: var(--sensei-primary-color);
line-height: 1em;
padding: 0.83em 1.11em;

&:hover {
background-color: var(--sensei-button-outline-hover-color);
color: var(--sensei-primary-color) !important;
}

&:focus {
border: solid 1.5px var(--sensei-secondary-color);
}

@media screen and (max-width: $breakpoint) {
padding: 0.83em 0.556em;
}
}

&[aria-disabled='true'],
&:disabled {
opacity: 0.5;
pointer-events: none;
cursor: not-allowed;
}

&.is-completed.is-primary {
opacity: 0.8;
color: var(--bg-color) !important;
background: var(--text-color) !important;
border-color: var(--text-color) !important;
}

&.is-completed.is-secondary {
display: flex;
opacity: 1;
}

&.is-busy {
background-image: linear-gradient(
-45deg,
rgba(255, 255, 255, 0.5) 28%,
rgba(255, 255, 255, 0.1) 28%,
rgba(255, 255, 255, 0.1) 72%,
rgba(255, 255, 255, 0.5) 72%
);
animation: components-button__busy-animation 25000ms infinite linear;

&:disabled {
cursor: not-allowed;
}
}
}
1 change: 1 addition & 0 deletions assets/css/learning-mode.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,3 +8,4 @@
@import 'sensei-course-theme/lesson-complete-transition';
@import 'sensei-course-theme/quiz';
@import 'sensei-course-theme/notices';
@import 'sensei-course-theme/buttons';
Loading

0 comments on commit 29efe1a

Please sign in to comment.