Merge branch 'update/learning-mode-default-spacings' into update/spac…

…ing-course-theme
Automattic · May 2, 2023 · db70fa3 · db70fa3
2 parents 8c7e8e7 + 6567b5a
commit db70fa3
Show file tree

Hide file tree

Showing 46 changed files with 671 additions and 2,557 deletions.
diff --git a/assets/admin/editor-wizard/patterns-list.scss b/assets/admin/editor-wizard/patterns-list.scss
@@ -1,6 +1,6 @@
 $thumbnail-height: 235px;
 $preview-padding: 5px;
-$preview-max-height: $thumbnail-height - $preview-padding * 2;
+$preview-max-height: $thumbnail-height + 5px;
 
 .sensei-patterns-list {
 	@media ( min-width: 600px ) {
@@ -22,14 +22,12 @@ $preview-max-height: $thumbnail-height - $preview-padding * 2;
 			height: $thumbnail-height;
 			overflow: hidden;
 
-			display: flex;
-			justify-content: center;
-			align-items: center;
 			padding-top: $preview-padding;
 			padding-bottom: $preview-padding;
 
 			.block-editor-block-preview__container {
 				max-height: $preview-max-height;
+				margin-top: -17px;
 			}
 		}
 

diff --git a/assets/css/learning-mode-compat.scss b/assets/css/learning-mode-compat.scss
@@ -11,6 +11,7 @@
 	font-size: 100%;
 }
 
+.editor-styles-wrapper .wp-block,
 .sensei-course-theme {
 	--wp--preset--font-family--body-font: -apple-system, BlinkMacSystemFont, Inter, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 	font-family: var(--wp--preset--font-family--body-font);
@@ -22,9 +23,18 @@
 		color: var(--sensei-text-color);
 		font-weight: 300;
 		font-size: clamp(2.25rem, 1.536rem + 1.905vw, 3.25rem);
+		line-height: 1.23;
 	}
 }
 
+/* Header */
+.editor-styles-wrapper .wp-block .wp-block-sensei-lms-exit-course,
+.wp-block-sensei-lms-exit-course {
+	color: var(--sensei-primary-color);
+	font-size: 1rem;
+}
+
+.editor-styles-wrapper .sensei-course-theme__sidebar,
 .sensei-course-theme__sidebar {
 	a, [class*='sensei-'] a, a[class*='sensei-'] {
 		text-decoration: none;
@@ -38,20 +48,40 @@
 .editor-styles-wrapper .wp-block-sensei-lms-course-title,
 .wp-block-sensei-lms-course-title {
 	color: var(--sensei-text-color);
+	font-size: clamp(0.875rem, 0.696rem + 0.476vw, 1.125rem);
+	font-weight: 600;
+	line-height: 1.167;
 	margin: 0;
 	padding: 1px 2px;
 }
 
-.editor-styles-wrapper .wp-block-sensei-lms-course-theme-course-progress-counter,
+.editor-styles-wrapper .sensei-course-theme-course-progress-bar,
+.sensei-course-theme-course-progress-bar {
+	background-color: var(--sensei-course-progress-bar-color);
+}
+
+.sensei-course-theme-course-progress-bar-inner {
+	background-color: var(--sensei-course-progress-bar-inner-color);
+}
+
+.editor-styles-wrapper .wp-block .wp-block-sensei-lms-course-theme-course-progress-counter,
 .wp-block-sensei-lms-course-theme-course-progress-counter {
 	color: var(--sensei-lesson-meta-color);
 	font-size: 1rem;
 	line-height: 1.1875;
 }
 
+/* Content */
+.editor-styles-wrapper .wp-block .wp-block-sensei-lms-course-theme-lesson-module,
+.wp-block-sensei-lms-course-theme-lesson-module {
+	border-color: var(--sensei-module-lesson-color);
+	color: var(--sensei-module-lesson-color);
+}
+
 /* Lesson Actions & Pagination */
 .wp-block-sensei-lms-page-actions .post-page-numbers {
 	color: var(--sensei-pagination-color);
+	line-height: 2.667;
 }
 
 .sensei-course-theme-lesson-actions {
@@ -60,6 +90,7 @@
 }
 
 /* Course Navigation */
+.editor-styles-wrapper .sensei-lms-course-navigation-module__title,
 .sensei-lms-course-navigation-module__title {
 	color: var(--sensei-primary-color);
 
@@ -72,10 +103,16 @@
 	color: var(--sensei-lesson-meta-color);
 }
 
+.editor-styles-wrapper .sensei-lms-course-navigation-lesson__link,
 .sensei-lms-course-navigation-lesson__link {
 	color: var(--sensei-module-lesson-color);
 }
 
+.status-locked .sensei-lms-course-navigation-lesson__link {
+	color: var(--sensei-locked-lesson-color);
+}
+
+.editor-styles-wrapper .sensei-lms-course-navigation-lesson__extra,
 .sensei-lms-course-navigation-lesson__extra {
 	color: var(--sensei-lesson-meta-color);
 }
diff --git a/assets/css/sensei-course-theme/base.scss b/assets/css/sensei-course-theme/base.scss
@@ -1,10 +1,16 @@
 $breakpoint: 783px;
 
-body {
+body,
+.editor-styles-wrapper .wp-block {
 	// Try to pick up global styles, customizer or theme colors.
 	--sensei-background-color: var(--sensei-background-color-global, var(--sensei-course-theme-background-color, var(--wp--preset--color--background, #FFFFFF)));
-	--sensei-button-hover-color: #F0F0F0;
+	--sensei-button-fill-hover-color: #FFFFFF;
+	--sensei-button-outline-hover-color: #F0F0F0;
+	--sensei-button-text-color: #26212E;
+	--sensei-course-progress-bar-color: #DCDCDE;
+	--sensei-course-progress-bar-inner-color: #30968B;
 	--sensei-lesson-meta-color: #787C82;
+	--sensei-locked-lesson-color: #646970;
 	--sensei-module-lesson-color: #101517;
 	--sensei-pagination-color: #191E23;
 	--sensei-primary-color: var(--sensei-primary-color-global, var(--sensei-course-theme-primary-color, var(--wp--preset--color--primary, #155E65)));
@@ -13,8 +19,8 @@ body {
 	--sensei-text-color: var(--sensei-text-color-global, var(--sensei-course-theme-foreground-color, var(--wp--preset--color--text, var(--wp--preset--color--foreground, #1E1E1E))));
 
 	--border-color: rgba(125, 125, 125, 0.3);
-	background-color: var(--sensei-background-color);
-	color: var(--sensei-text-color);
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
 }
 
 .sensei-course-theme__frame {

diff --git a/assets/css/sensei-course-theme/blocks/course-navigation.scss b/assets/css/sensei-course-theme/blocks/course-navigation.scss
@@ -5,23 +5,28 @@
 	&__modules, &__lessons, &-module__lessons {
 
 		margin: 0;
-
 		ol, li {
 			list-style: none;
 			padding: 0;
 		}
 	}
 	&__modules {
 		display: flex;
-		gap:  32px;
+		gap:  24px;
 		flex-direction: column;
 	}
 
 	&__modules + &__lessons {
-		margin-top: 32px;
+		margin-top: 24px;
+	}
+
+	&-module__lessons:not(.sensei-collapsed) {
+		margin-bottom: 12px;
 	}
+
 }
 
+.editor-styles-wrapper .sensei-lms-course-navigation-module,
 .sensei-lms-course-navigation-module {
 	.sensei-collapsible__toggle {
 		align-items: center;
@@ -31,6 +36,7 @@
 		display: flex;
 		padding: 0;
 		width: 100%;
+		gap: 20px;
 
 		&:hover h3 {
 			text-decoration: underline;
@@ -67,12 +73,13 @@
 		overflow: hidden;
 		transition-delay: 150ms;
 		visibility: hidden;
-		margin-top: 4px;
+		margin-top: 0px;
 	}
 
 	&__lessons.sensei-collapsed ~ &__summary {
 		visibility: visible;
 		max-height: 50px;
+		margin-top: 4px;
 	}
 }
 
@@ -91,6 +98,7 @@
 		font-size: 0.875rem;
 		font-weight: 300;
 		padding: 0 8px;
+		line-height: 1.214;
 	}
 
 	&__extra {

diff --git a/assets/css/sensei-course-theme/blocks/course-progress-bar.scss b/assets/css/sensei-course-theme/blocks/course-progress-bar.scss
@@ -1,19 +1,13 @@
 .wp-block-sensei-lms-course-theme-course-progress-bar {
 	height: var(--header-progress-bar-height, 4px);
-	background-color: var(--border-color);
 	margin: 0;
 	width: 100%;
 
 	:first-child {
-		background-color: #30968B;
 		height: var(--header-progress-bar-height, 4px);
 	}
-
-	&.wp-block:not(.has-background) {
-		background-color: var(--border-color);
-	}
 }
 
 body .is-layout-flow > * + .wp-block-sensei-lms-course-theme-course-progress-bar {
-  margin: 0;
+	margin: 0;
 }
diff --git a/assets/css/sensei-course-theme/blocks/course-title.scss b/assets/css/sensei-course-theme/blocks/course-title.scss
@@ -1,8 +1,5 @@
-.editor-styles-wrapper .wp-block-sensei-lms-course-title,
+.editor-styles-wrapper .wp-block .wp-block-sensei-lms-course-title,
 .wp-block-sensei-lms-course-title {
-	font-size: clamp(0.875rem, 0.696rem + 0.476vw, 1.125rem);
-	font-weight: 600;
-	line-height: 1.167;
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;

diff --git a/assets/css/sensei-course-theme/blocks/exit-course.scss b/assets/css/sensei-course-theme/blocks/exit-course.scss
@@ -1,6 +1,5 @@
-.editor-styles-wrapper .wp-block-sensei-lms-exit-course,
+.editor-styles-wrapper .wp-block .wp-block-sensei-lms-exit-course,
 .wp-block-sensei-lms-exit-course {
-	color: var(--sensei-primary-color);
-	font-size: 1rem;
+	line-height: 1.1875;
 	text-decoration: underline;
 }
diff --git a/assets/css/sensei-course-theme/blocks/lesson-actions.scss b/assets/css/sensei-course-theme/blocks/lesson-actions.scss
@@ -1,6 +1,6 @@
 .sensei-course-theme-lesson-actions {
 	display: flex;
-	gap: 12px;
+	gap: 16px;
 	list-style: none;
 	width: 100%;
 

diff --git a/assets/css/sensei-course-theme/blocks/lesson-module.scss b/assets/css/sensei-course-theme/blocks/lesson-module.scss
@@ -1,6 +1,6 @@
+.editor-styles-wrapper .wp-block .wp-block-sensei-lms-course-theme-lesson-module,
 .wp-block-sensei-lms-course-theme-lesson-module {
-	border-left: solid 2px var(--sensei-module-lesson-color);
-	color: var(--sensei-module-lesson-color);
+	border-left: solid 2px;
 	font-size: 0.875rem;
 	font-weight: 400;
 	line-height: 1.2;

diff --git a/assets/css/sensei-course-theme/buttons.scss b/assets/css/sensei-course-theme/buttons.scss
@@ -11,7 +11,7 @@
 	}
 }
 
-.editor-styles-wrapper .wp-block-button .wp-block-button__link.sensei-course-theme__button,
+.editor-styles-wrapper .sensei-course-theme__main-content .wp-block-button,
 .sensei-course-theme .wp-block-button,
 .sensei-course-theme__button,
 .sensei-course-theme__button[type=submit],
@@ -73,16 +73,16 @@
 	&.is-primary,
 	&.wp-block-button:not(.is-style-outline, .is-style-link) {
 		background-color: var(--sensei-secondary-color);
-		color: #26212E;
+		color: var(--sensei-button-text-color);
 
 		&:hover {
-			color: #FFFFFF;
+			color: var(--sensei-button-fill-hover-color);
 			background-color: var(--sensei-primary-color);
 			border-color: var(--sensei-primary-color);
 		}
 
 		&:focus {
-			border: 1px solid #FFFFFF;
+			border: 1px solid var(--sensei-button-fill-hover-color);
 			box-shadow: 0px 0px 0px 1.5px var(--sensei-secondary-color);
 		}
 	}
@@ -94,7 +94,7 @@
 		flex-shrink: 0;
 
 		&:hover {
-			background-color: var(--sensei-button-hover-color);
+			background-color: var(--sensei-button-outline-hover-color);
 			color: var(--sensei-primary-color);
 
 			.wp-block-button__link {
@@ -114,7 +114,7 @@
 		padding: 0.83em 1.11em;
 
 		&:hover {
-			background-color: var(--sensei-button-hover-color);
+			background-color: var(--sensei-button-outline-hover-color);
 			color: var(--sensei-primary-color) !important;
 		}
 

diff --git a/assets/css/sensei-course-theme/content.scss b/assets/css/sensei-course-theme/content.scss
@@ -57,6 +57,8 @@ body {
 	}
 
 	.wp-block-post-content {
+		margin-top: 40px;
+
 		& > *, .wp-block-group__inner-container > * {
 			max-width: var(--content-size) !important;
 			margin-left: auto;

diff --git a/assets/css/sensei-course-theme/editor.scss b/assets/css/sensei-course-theme/editor.scss
@@ -33,10 +33,6 @@
 	padding: 12px 0;
 }
 
-.wp-block-post-title {
-	font-size: 48px !important;
-}
-
 input, textarea {
 	border: none;
 	padding: 0;

diff --git a/assets/css/sensei-course-theme/fixed-sidebar.scss b/assets/css/sensei-course-theme/fixed-sidebar.scss
@@ -18,12 +18,11 @@ $min_desktop_width: 783px;
 			left: 0;
 			width: var(--sensei-lm-sidebar-width);
 			border-right: 1px solid var(--border-color);
-			background-color: var(--sensei-background-color);
 			overflow: auto;
 			overscroll-behavior: contain;
 			display: flex;
 			flex-direction: column;
-			padding: 32px 24px;
+			padding: 32px 24px 40px 24px;
 		}
 
 		&__header ~ &__columns &__sidebar {

diff --git a/assets/css/sensei-course-theme/notices.scss b/assets/css/sensei-course-theme/notices.scss
@@ -9,10 +9,10 @@
 
 .sensei-course-theme-lesson-quiz-notice {
 	display: flex;
-	justify-content: space-between;
 	flex-flow: wrap;
+	font-size: 1.125rem;
 	gap: 15px;
-	font-size: 14px;
+	justify-content: space-between;
 
 	&__content {
 		display: flex;

diff --git a/assets/css/sensei-course-theme/theme-fixes.scss b/assets/css/sensei-course-theme/theme-fixes.scss
@@ -47,11 +47,6 @@
 	}
 }
 
-// Astra
-.wp-block:not(.has-background) {
-	background-color: unset;
-}
-
 // Twenty Fifteen
 .sensei-course-theme::before {
 	width: 0px;

diff --git a/assets/css/sensei-course-theme/ui-blocks.scss b/assets/css/sensei-course-theme/ui-blocks.scss
@@ -33,9 +33,9 @@ body.sensei-course-theme {
 		position: fixed;
 		left: 0;
 		right: 0;
+		background-color: var(--sensei-background-color);
 		height: var(--sensei-lm-header-height);
 		top: var(--top-offset);
-		background-color: var(--sensei-background-color);
 		z-index: 100;
 		display: flex;
 		flex-direction: column;