WordPress.org
Get WordPress

Making WordPress.org


Ignore:
Timestamp:
09/09/2024 06:45:32 PM (7 months ago)
Author:
renyot
Message:

Learn: Sync with git WordPress/learn@e017fb7

File:
1 edited

Legend:

Unmodified
Added
Removed

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

    r14027 r14032  
    1313    --sensei-lesson-meta-color: var(--wp--preset--color--charcoal-4);
    1414    --sensei-module-lesson-color: var(--wp--preset--color--charcoal-1);
     15    --sensei-lm-mobile-header-height: 60px;
     16
     17    .wp-block-sensei-lms-course-theme-notices:empty {
     18        display: none;
     19    }
    1520
    1621    .sensei-course-theme-header-content {
    … …  
    2328        }
    2429
    25         .sensei-course-theme-course-progress::after {
    26             content: "";
    27             display: inline-block;
    28             height: 100%;
    29             border-right: 1px solid var(--sensei-course-progress-bar-color);
    30             position: absolute;
    31             margin-left: 30px;
    32             top: 0;
    33         }
    34 
    3530        .wp-block-sensei-lms-exit-course {
    3631            margin-left: var(--wp--preset--spacing--30);
     32
     33            &::before {
     34                content: "";
     35                display: inline-block;
     36                height: 100%;
     37                border-right: 1px solid var(--sensei-course-progress-bar-color);
     38                position: absolute;
     39                margin-left: -30px;
     40                top: 0;
     41            }
    3742        }
    3843    }
    … …  
    4752            border-bottom-right-radius: 5px !important;
    4853            height: 4px !important;
     54            z-index: 1;
    4955        }
    5056    }
    … …  
    8591            .wp-block-sensei-lms-course-theme-notices {
    8692                margin-block-end: 39px;
    87                 margin-block-start: 0;
    88 
    89                 &:empty {
    90                     display: none;
    91                 }
     93                margin-block-start: var(--wp--preset--spacing--40);
    9294            }
    9395        }
    … …  
    106108            .sensei-lms-course-navigation-lesson__status {
    107109                margin-top: 6px;
    108             }
     110
     111                &[aria-label="Preview"] {
     112                    display: none;
     113
     114                    + .sensei-lms-course-navigation-lesson__title {
     115                        padding-left: 0;
     116                        margin-left: 18px;
     117                        text-decoration: none;
     118                        display: list-item;
     119                        list-style-type: disc;
     120                        list-style-position: outside;
     121                    }
     122                }
     123            }
     124        }
     125
     126        .sensei-lms-course-navigation-lesson__extra[aria-label^="Preview"] {
     127            display: none;
    109128        }
    110129    }
    … …  
    202221        .wp-block-sensei-lms-button-view-quiz,
    203222        .wp-block-sensei-lms-button-complete-lesson {
    204             background-color: var(--wp--custom--color--green-50) !important;
    205             border-color: transparent;
    206 
    207             &:hover {
    208                 opacity: 0.9;
    209             }
    210 
    211223            > button {
    212224                font-weight: 600 !important;
    213225                line-height: 1;
    214 
     226            }
     227        }
     228
     229        .wp-block-sensei-lms-button-view-quiz {
     230            &:hover {
     231                background-color: var(--wp--preset--color--deep-blueberry) !important;
     232            }
     233        }
     234
     235        .wp-block-sensei-lms-button-complete-lesson {
     236            background-color: var(--wp--custom--color--green-50) !important;
     237            border-color: transparent;
     238
     239            &:hover {
     240                background-color: var(--wp--custom--color--green-60) !important;
     241            }
     242
     243            > button {
    215244                &:focus,
    216245                &:focus-visible {
    … …  
    228257
    229258    &.quiz {
    230         #sensei-quiz-list .question-title {
    231             font-size: var(--wp--preset--font-size--heading-4);
    232         }
    233 
    234         .wp-block-sensei-lms-quiz .wp-block-sensei-lms-quiz-question {
    235             margin-top: var(--wp--preset--spacing--40);
    236         }
    237 
    238         .wp-block-sensei-lms-quiz .sensei-lms-question-block__header {
    239             margin-bottom: var(--wp--preset--spacing--20);
    240         }
    241 
    242         #sensei-quiz-list fieldset {
    243             padding: 0;
    244             border: none;
    245 
    246             ul {
    247                 margin-top: 0;
    248             }
    249         }
    250 
    251         #sensei-quiz-list li ul li input,
    252         #sensei-quiz-list .sensei-multiple-choice-answer-option-checkbox + label::before {
    253             flex-shrink: 0;
    254         }
    255 
    256         #sensei-quiz-list li ul li input:focus,
    257         #sensei-quiz-list .sensei-multiple-choice-answer-option-checkbox:focus + label::before {
    258             outline: 1.5px solid var(--wp--preset--color--blueberry-1);
    259             outline-offset: 1.5px;
    260         }
    261 
    262         #sensei-quiz-list .sensei-multiple-choice-answer-option-checkbox {
    263             // Checkboxes need to be displayed, otherwise keyboard nav will not work.
    264             // The following code is copied from `screen-reader-text` so that the checkboxes
    265             // exist on the page, but are not shown visually. The visual checkboxes are added
    266             // by `::before` on the label.
    267             display: initial !important;
    268             clip: rect(1px, 1px, 1px, 1px);
    269             word-wrap: normal !important;
    270             border: 0;
    271             clip-path: inset(50%);
    272             height: 1px;
    273             margin: -1px;
    274             overflow: hidden;
    275             padding: 0;
    276             position: absolute;
    277             width: 1px;
    278 
    279             + label {
    280                 margin-left: 0;
     259        .wp-block-sensei-lms-course-theme-notices {
     260            margin-block-start: 0;
     261
     262            .sensei-course-theme-quiz-graded-notice {
     263                padding: 40px;
     264                margin-bottom: var(--wp--preset--spacing--40);
     265
     266                .sensei-course-theme-quiz-graded-notice__title {
     267                    font-size: var(--wp--preset--font-size--heading-5);
     268                    font-weight: 600;
     269                    margin-block-start: 0;
     270                }
     271
     272                .sensei-course-theme-quiz-graded-notice__text {
     273                    font-size: var(--wp--preset--font-size--normal);
     274                }
     275
     276                .sensei-course-theme-quiz-graded-notice__actions {
     277                    gap: var(--wp--preset--spacing--20);
     278
     279                    .wp-block-button {
     280
     281                        @media screen and (max-width: 782px) {
     282                            width: 100%;
     283                        }
     284
     285                        > a {
     286                            font-size: var(--wp--preset--font-size--normal);
     287                            font-weight: 600;
     288                            width: 100%;
     289
     290                            &:focus,
     291                            &:focus-visible {
     292                                border: none;
     293                                outline-offset: 3.5px;
     294                                outline: 1.5px solid var(--wp--preset--color--blueberry-1);
     295                            }
     296
     297                            &:hover {
     298                                background-color: var(--wp--preset--color--deep-blueberry) !important;
     299                            }
     300                        }
     301                    }
     302
     303                    .sensei-course-theme-quiz-graded-notice__reset-quiz-form {
     304                        margin-left: 0;
     305
     306                        @media screen and (max-width: 782px) {
     307                            width: 100%;
     308                        }
     309
     310                        > button {
     311                            font-size: var(--wp--preset--font-size--normal);
     312                            font-weight: 600;
     313                            border: 1px solid var(--wp--preset--color--blueberry-1);
     314                            width: 100%;
     315
     316                            &:focus,
     317                            &:focus-visible {
     318                                outline-offset: 2.5px;
     319                                outline: 1.5px solid var(--wp--preset--color--blueberry-1);
     320                                color: var(--wp--preset--color--white);
     321                                background-color: var(--wp--preset--color--blueberry-1);
     322
     323                                &:hover {
     324                                    background-color: var(--sensei-button-outline-hover-color) !important;
     325                                    outline: none;
     326                                }
     327                            }
     328                        }
     329                    }
     330                }
     331            }
     332        }
     333
     334
     335        .entry-content {
     336            margin-top: 0;
     337
     338            #sensei-quiz-list {
     339                margin-block-end: 0;
     340
     341                .wp-block-sensei-lms-quiz-question {
     342                    margin-top: 0;
     343
     344                    &:not(:first-of-type) {
     345                        margin-top: var(--wp--preset--spacing--40);
     346                    }
     347                }
     348
     349                .sensei-lms-question-block__header {
     350                    margin-bottom: var(--wp--preset--spacing--20);
     351
     352                    .question-title {
     353                        font-size: var(--wp--preset--font-size--heading-6);
     354                        font-family: var(--wp--preset--font-family--inter);
     355                        font-weight: 600;
     356                    }
     357                }
     358
     359                fieldset {
     360                    padding: 0;
     361                    border: none;
     362
     363                    .answers {
     364                        margin-top: 0;
     365
     366                        li > label {
     367                            font-family: var(--wp--preset--font-family--inter);
     368                            font-size: 16px;
     369                            font-weight: 400;
     370                        }
     371
     372                        li > input,
     373                        .sensei-multiple-choice-answer-option-checkbox + label::before {
     374                            flex-shrink: 0;
     375                        }
     376
     377                        li > input:focus,
     378                        .sensei-multiple-choice-answer-option-checkbox:focus + label::before {
     379                            outline: 1.5px solid var(--wp--preset--color--blueberry-1);
     380                            outline-offset: 1.5px;
     381                        }
     382
     383                        .sensei-multiple-choice-answer-option-checkbox {
     384                            // Checkboxes need to be displayed, otherwise keyboard nav will not work.
     385                            // The following code is copied from `screen-reader-text` so that the checkboxes
     386                            // exist on the page, but are not shown visually. The visual checkboxes are added
     387                            // by `::before` on the label.
     388                            display: initial !important;
     389                            clip: rect(1px, 1px, 1px, 1px);
     390                            word-wrap: normal !important;
     391                            border: 0;
     392                            clip-path: inset(50%);
     393                            height: 1px;
     394                            margin: -1px;
     395                            overflow: hidden;
     396                            padding: 0;
     397                            position: absolute;
     398                            width: 1px;
     399
     400                            + label {
     401                                margin-left: 0;
     402                            }
     403                        }
     404                    }
     405
     406                    .sensei-lms-question__answer-feedback {
     407                        margin-bottom: 0;
     408                        font-size: var(--wp--preset--font-size--small);
     409                    }
     410                }
     411            }
     412        }
     413
     414
     415        .sensei-course-theme__quiz__footer__wrapper {
     416            padding-bottom: var(--wp--preset--spacing--50);
     417
     418            a,
     419            button {
     420                font-weight: 600 !important;
     421                line-height: 1;
     422                font-size: var(--wp--preset--font-size--normal);
     423                padding: 17px 32px !important;
     424            }
     425
     426            .wp-block-sensei-lms-quiz-actions {
     427
     428                @media screen and (max-width: 782px) {
     429                    flex-direction: column;
     430                    gap: var(--wp--preset--spacing--20);
     431                }
     432
     433                .wp-block-button {
     434
     435                    @media screen and (max-width: 782px) {
     436                        width: 100%;
     437                    }
     438
     439                    > a {
     440                        width: 100%;
     441
     442                        &:focus,
     443                        &:focus-visible {
     444                            outline-offset: 4.5px;
     445                            outline: 1.5px solid var(--wp--preset--color--blueberry-1);
     446                            color: var(--wp--preset--color--white);
     447                            background-color: var(--wp--preset--color--blueberry-1);
     448                            border: none;
     449                        }
     450
     451                        &:hover {
     452                            background-color: var(--wp--preset--color--deep-blueberry) !important;
     453                        }
     454                    }
     455                }
     456
     457                .sensei-quiz-actions-primary {
     458
     459                    @media screen and (max-width: 782px) {
     460                        width: 100%;
     461                    }
     462
     463                    .sensei-quiz-action {
     464                        background-color: var(--wp--custom--color--green-50);
     465                        border-color: transparent !important;
     466
     467                        &:hover {
     468                            background-color: var(--wp--custom--color--green-60);
     469                        }
     470
     471                        > button {
     472                            &:focus,
     473                            &:focus-visible {
     474                                outline: var(--wp--custom--color--green-50);
     475                            }
     476                        }
     477                    }
     478                }
     479
     480                .sensei-quiz-actions-secondary {
     481
     482                    @media screen and (max-width: 782px) {
     483                        flex-direction: column;
     484                        width: 100%;
     485                    }
     486                    gap: var(--wp--preset--spacing--20);
     487
     488                    .sensei-quiz-action {
     489                        border: solid 1px var(--sensei-secondary-color);
     490                        border-radius: 2px;
     491                        text-align: center;
     492
     493                        @media screen and (max-width: 782px) {
     494                            width: 100%;
     495                        }
     496
     497                        &:hover {
     498                            background-color: var(--sensei-button-outline-hover-color);
     499                        }
     500
     501                        > button {
     502                            color: var(--sensei-primary-color);
     503                            text-decoration: none !important;
     504                            width: 100%;
     505
     506                            &:focus,
     507                            &:focus-visible {
     508                                background-color: var(--wp--custom--button--outline--focus--color--background);
     509                                color: var(--wp--custom--button--outline--hover--color--text);
     510                                box-shadow: inset 0 0 0 3px var(--wp--preset--color--white);
     511
     512                                &:hover {
     513                                    background-color: var(--sensei-button-outline-hover-color);
     514                                    color: var(--sensei-primary-color);
     515                                }
     516                            }
     517                        }
     518                    }
     519                }
    281520            }
    282521        }
    … …  
    455694        .sensei-course-theme-header-content {
    456695            border-bottom: 1px solid var(--wp--custom--color--border);
     696
     697            div:nth-of-type(2)::before {
     698                content: "";
     699                display: inline-block;
     700                height: 100%;
     701                border-right: 1px solid var(--sensei-course-progress-bar-color);
     702                position: absolute;
     703                margin-left: -30px;
     704                top: 0;
     705            }
    457706        }
    458707
Note: See TracChangeset for help on using the changeset viewer.