WordPress.org
Get WordPress

Making WordPress.org


Ignore:
Timestamp:
09/09/2024 06:45:32 PM (2 years 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.