Skip to content

Fix global button styles for colors and borders #7753

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 3 commits into
base: trunk
Choose a base branch
from
Draft

Fix global button styles for colors and borders #7753

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f293d35
Fix global button styles for colors and borders
donnapep Feb 17, 2025
e7cf660
Move parent styles to top of selector for ease of maintenance
donnapep Feb 22, 2025
e62efc0
Update progress so far
donnapep May 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
129 changes: 73 additions & 56 deletions assets/css/learning-mode-compat.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,37 +139,57 @@ $breakpoint: 782px;
}
}

.editor-styles-wrapper .sensei-course-theme__main-content .wp-block-button,
.sensei-course-theme .wp-block-button,
.sensei-course-theme__button {
.editor-styles-wrapper .sensei-course-theme__main-content .wp-block-button, // Editor styles don't work?
.sensei-course-theme .wp-block-button {
// Is .sensei-course-theme__button needed? Seems to only be set on invisibile lesson action buttons?
// .sensei-course-theme__button {
cursor: pointer;
font-family: var(--wp--preset--font-family--body-font);
font-size: 1.125rem;
font-weight: 400;
letter-spacing: normal;
margin: 0;
text-align: center;
text-decoration: none;
text-transform: unset;

// Fill button style
// Done: Next Lesson + Take Quiz + non-Sensei fill style (default + hover)
// TODO: Quiz buttons + Global styles
.wp-block-button__link {
border: none;
background-color: var(--sensei-secondary-color);
border: solid 1px var(--sensei-secondary-color);
color: var(--sensei-button-text-color);
font-family: inherit;
font-weight: inherit;
font-size: inherit;
background-color: inherit;
color: inherit;
font-weight: inherit;
text-transform: unset;

&:hover {
background-color: inherit !important;
color: inherit !important;
text-decoration: none !important;
background-color: var(--sensei-primary-color); // Should be #155E65
border-color: var(--sensei-primary-color); // Should be #155E65
color: var(--sensei-button-fill-hover-color);
text-decoration: none;
}
}

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;
text-align: center;
text-decoration: none !important;
text-transform: unset;
// Outline button style.
// Done: All LM buttons(Contact Teacher, Complete Lesson, Reset Lesson, Completed) +
// non-Sensei outline style (default + hover)
// TODO: Quiz buttons + Global styles
&.is-style-outline .wp-block-button__link {
background-color: transparent;
border: solid 1px var(--sensei-secondary-color);

&:hover {
background-color: var(--sensei-button-outline-hover-color);
border: solid 1px var(--sensei-secondary-color);
color: var(--sensei-primary-color);
text-decoration: none;
}
}

// TODO: Figure out what to do about all this crap.
&.is-primary,
&.is-secondary,
&.is-link,
Expand All @@ -191,8 +211,6 @@ $breakpoint: 782px;
&.is-primary,
&.is-secondary,
&.wp-block-button {
border: solid 1px var(--sensei-secondary-color);

&.wp-block-button__link {
border: none;
}
Expand All @@ -204,13 +222,10 @@ $breakpoint: 782px;

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

&:not(.sensei-course-theme-quiz-graded-notice__pending-grade):hover {
color: var(--sensei-button-fill-hover-color);
background-color: var(--sensei-primary-color);
border-color: var(--sensei-primary-color);
// color: var(--sensei-button-fill-hover-color);
// background-color: var(--sensei-primary-color);
// border-color: var(--sensei-primary-color);
}

&:focus {
Expand All @@ -222,15 +237,17 @@ $breakpoint: 782px;
&.is-secondary,
&.wp-block-button.is-style-outline {
--wp--custom--button--border--color: var(--sensei-primary-color);
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);
// Removed as hover style is now on .wp-block-button__link element.
// background-color: var(--sensei-button-outline-hover-color);
// color: var(--sensei-primary-color);

.wp-block-button__link {
border-color: var(--sensei-primary-color);
// Breaks border of outline button on hover.
// border-color: var(--sensei-primary-color);
}
}

Expand Down Expand Up @@ -294,29 +311,29 @@ $breakpoint: 782px;
}
}

.sensei-course-theme,
.editor-styles-wrapper {
.wp-block-sensei-lms-lesson-actions {
.wp-block-sensei-button.wp-block-button {
&.is-style-outline,
&.is-style-default {
border: none;

.wp-block-button__link {
border: solid 1px var(--sensei-secondary-color);
}
}
}

.wp-block-sensei-button.wp-block-button.is-style-default {
background-color: unset;

.wp-block-button__link {
background-color: var(--sensei-secondary-color);
}
}
}
}
// .sensei-course-theme,
// .editor-styles-wrapper {
// .wp-block-sensei-lms-lesson-actions {
// .wp-block-sensei-button.wp-block-button {
// // &.is-style-outline, // Not needed for outline style (i.e. Complete Lesson button).
// &.is-style-default {
// border: none;

// .wp-block-button__link {
// border: solid 1px var(--sensei-secondary-color);
// }
// }
// }

// .wp-block-sensei-button.wp-block-button.is-style-default {
// background-color: unset;

// .wp-block-button__link {
// background-color: var(--sensei-secondary-color);
// }
// }
// }
// }

/* Comments */
.sensei-course-theme .wp-block-comments {
Expand Down
Loading