Changeset 13940 for sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-learn-2024/src/style/_sensei.scss

Timestamp:

08/01/2024 07:53:35 PM (22 months ago)

Author:

ryelle

Message:

Learn: Sync with git WordPress/learn@c832cea

File:

• sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-learn-2024/src/style/_sensei.scss (modified) (3 diffs)

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-learn-2024/src/style/_sensei.scss

@@ -70 +70 @@
 
     &.single-lesson {
-        .sensei-lesson-footer .sensei-buttons-container {
-            margin: unset;
-            display: flex;
-            gap: var(--wp--preset--spacing--10);
-
-            > *,
-            .sensei-buttons-container__button-block {
-                padding: unset;
+        .sensei-lesson-footer {
+            .screen-reader-text {
+                display: none;
+            }
+
+            .sensei-buttons-container {
+                margin: unset;
+                display: flex;
+                gap: var(--wp--preset--spacing--10);
+
+                > *,
+                .sensei-buttons-container__button-block {
+                    padding: unset;
+                }
             }
         }
@@ -103 +109 @@
 
     @media screen and (max-width: 782px) {
-        .sensei-lesson-footer .wp-block-sensei-lms-button-lesson-completed {
-            display: flex;
-
-            .wp-block-button__link {
-                flex: 1;
-            }
+        .sensei-lesson-footer .sensei-lesson-actions-nav {
+            width: 100%;
         }
     }
@@ -125 +127 @@
         }
 
+        #sensei-quiz-list fieldset {
+            padding: 0;
+            border: none;
+
+            ul {
+                margin-top: 0;
+            }
+        }
+
         #sensei-quiz-list li ul li input,
         #sensei-quiz-list .sensei-multiple-choice-answer-option-checkbox + label::before {
             flex-shrink: 0;
+        }
+
+        #sensei-quiz-list li ul li input:focus,
+        #sensei-quiz-list .sensei-multiple-choice-answer-option-checkbox:focus + label::before {
+            outline: 1.5px solid var(--wp--preset--color--blueberry-1);
+            outline-offset: 1.5px;
+        }
+
+        #sensei-quiz-list .sensei-multiple-choice-answer-option-checkbox {
+            // Checkboxes need to be displayed, otherwise keyboard nav will not work.
+            // The following code is copied from `screen-reader-text` so that the checkboxes
+            // exist on the page, but are not shown visually. The visual checkboxes are added
+            // by `::before` on the label.
+            display: initial !important;
+            clip: rect(1px, 1px, 1px, 1px);
+            word-wrap: normal !important;
+            border: 0;
+            clip-path: inset(50%);
+            height: 1px;
+            margin: -1px;
+            overflow: hidden;
+            padding: 0;
+            position: absolute;
+            width: 1px;
+
+            + label {
+                margin-left: 0;
+            }
         }
     }