WebSVN – Moodle – Diff – /theme/boost/scss/moodle/core.scss

 $dropzone-border: $gray-900 !default;
 $collapse-list-item-padding-y: 0.5rem !default;
 $collapse-list-item-padding-x: 1rem !default;
-$collapse-list-item-hover-bg: theme-color-level('info', -11) !default;
+$collapse-list-item-hover-bg: shift-color($info, -90%) !default;
-$collapse-list-item-hover-border: theme-color-level('info', -9) !default;
+$collapse-list-item-hover-border: shift-color($info, -70%) !default;
         display: block;
         margin-top: 4px;
+    }
+}
-@include media-breakpoint-down(sm) {
+@include media-breakpoint-down(md) {
     .context-header-settings-menu,
     .region-main-settings-menu {
         display: flex;
         justify-content: flex-end;
 .list-group-item-action,
 input[type="checkbox"],
 input[type="radio"],
 input[type="file"],
 input[type="image"],
-.sr-only-focusable,
+.visually-hidden-focusable,
 a.dropdown-toggle,
 .moodle-dialogue-base .closebutton,
-button.close,
+button.btn-close,
 .form-autocomplete-selection,
 [role="treeitem"]:not([aria-expanded="true"]) {
     &.focus,
     &:focus {
         outline: 0;
     list-style: none;
     margin: 0;
     padding: 0;
+}
-.section li.movehere a {
-    display: block;
-    width: 100%;
-    height: 2rem;
-    border: 2px dashed $gray-800;
-}
-.editing .course-content .hidden.sectionname {
-    visibility: hidden;
-    display: initial;
-}
 .inline,
 .inline-list li {
     display: inline;
     padding: 0;
     background-color: transparent;
     margin-top: -1px;
+}
-@include media-breakpoint-down(sm) {
+@include media-breakpoint-down(md) {
     .pagelayout-mydashboard,
     .pagelayout-login {
         #region-main-box {
             padding-left: 0;
+}
 .no-overflow {
     overflow: auto;
+}
-// Position required for table sizing inside a flex container.
-.no-overflow > .generaltable {
-    margin-bottom: 0;
-}
-.no-overflow,
-.table-responsive {
-    .generaltable {
-        .sr-only,
-        .accesshide {
-            position: relative;
-            display: block;
-        }
-    }
-}
 // Accessibility features
 // Accessibility: text 'seen' by screen readers but not visual users.
 .accesshide {
-    @include sr-only();
+    @include visually-hidden();
+}
     position: fixed;
     top: 50%;
     left: 50%;
+}
-.mod-indent-outer {
-    display: table;
-}
-.mod-indent {
-    display: table-cell;
-}
-.label .mod-indent {
-    float: left;
-    padding-top: 20px;
-}
-.activity.label.modtype_label .mod-indent {
-    float: none;
-}
-@include media-breakpoint-up(sm) {
-    $mod-indent-size: 30px;
-    /* Creates a series of .mod-indent-# rule declarations based on indent size and number of indent levels. */
-    @for $i from 1 through 16 {
-        $width: ($i * $mod-indent-size);
-        .mod-indent-#{$i} {
-            width: $width;
-        }
-    }
-    .mod-indent-huge {
-        width: (16 * $mod-indent-size);
-    }
-}
 /* Audio player size in 'block' mode (can only change width, height is hardcoded in JS) */
 .resourcecontent .mediaplugin_mp3 object {
     height: 25px;
     width: 600px;
     margin-top: -1px;
     padding-top: 1px;
+}
-@include media-breakpoint-down(xs) {
+@include media-breakpoint-down(sm) {
     .jsenabled .choosercontainer #chooseform .alloptions {
         max-width: 100%;
         border-top: 1px solid $gray-300;
         background: $white;
+    }
+}
-@include media-breakpoint-down(xs) {
+@include media-breakpoint-down(sm) {
     .path-course-view .modal-dialog.modal-lg,
     .path-course-view .modal-content,
     .modchooser .modal-body,
     .modchooser .modal-body .carousel,
 .connecting {
     color: map-get($theme-colors, 'warning');
+}
+#page-badges-index #page {
+    .badges-heading {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+    h2 {
+        margin: 0; /* Removes default margins */
+    }
+    #action_bar {
+        margin: 0; /* Removes any default margin that might affect alignment */
+    }
+    .tertiary-navigation.container-fluid {
+        width: auto;
+        height: 50px;
+        padding-top: 0;
+    }
+}
 #page-badges-award .recipienttable tr td {
     vertical-align: top;
             margin-right: 0;
             margin-left: 0;
             left: 0;
             right: auto;
             white-space: nowrap;
+            position: absolute;
+            top: 0;
+            font-size: $font-size-sm;
+            padding: .1em .4em;
+            text-decoration: none;
+            z-index: 9999;
+            border: $alert-border-width solid transparent;
+            width: fit-content;
+            color: shift-color($info, $alert-color-scale);
+            border-color: shift-color($info, $alert-border-scale);
+            @include gradient-bg(shift-color($info, $alert-bg-scale));
+        }
         @include media-breakpoint-up(sm) {
             input {
                 width: 330px;
                 vertical-align: text-bottom;
     &.inplaceeditable-autocomplete {
         display: block;
+    }
+}
-h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
-    margin-top: -20px;
-}
 /** Chart area. */
 .chart-area {
     @include media-breakpoint-up(lg) {
         .chart-image {
     padding-left: 0;
     .nav {
         margin-right: $grid-gutter-width * 0.5;
         background-color: $card-bg;
+    }
-    @include media-breakpoint-down(sm) {
+    @include media-breakpoint-down(md) {
         .nav {
             margin-top: $grid-gutter-width;
             margin-right: 0;
+        }
+    }
             color: $body-color;
+        }
+    }
+}
+.footer-popover {
-.btn-footer-popover {
+    .btn-footer-popover {
-    display: none;
+        display: none;
-    position: fixed;
+        position: fixed;
-    bottom: 2rem;
+        bottom: 2rem;
-    right: 2rem;
+        right: 2rem;
+        @include box-shadow($popover-box-shadow);
     @include box-shadow($popover-box-shadow);
+}
 .btn-footer-communication {
 .hasstickyfooter .btn-footer-communication {
     bottom: calc(4rem + #{$stickyfooter-height});
+}
+.hasstickyfooter .maintenancewarning {
+    bottom: #{$stickyfooter-height};
+}
 .popover.footer {
     .popover-body {
         padding: 0;
     .jsenabled .btn-footer-popover,
     .jsenabled .btn-footer-communication {
         display: block;
         z-index: $zindex-dropdown;
+    }
+    .jsenabled .maintenancewarning,
+    .jsenabled.hasstickyfooter:has(.drawer-right-toggle) .maintenancewarning {
+        right: 5rem;
+    }
+}
 .bg-inverse a {
     color: $bg-inverse-link-color;
     ul {
         padding-left: 1.5rem;
+    }
+}
-.sr-only-focusable {
+.visually-hidden-focusable {
     &:active,
     &:focus {
         z-index: 1031;
         position: fixed;
-        background: $sr-only-active-bg;
+        background: $visually-hidden-active-bg;
         padding: 7px;
         left: 0;
         top: 0;
+    }
         max-width: $h5p-content-maxwidth;
         margin: 0 auto;
+    }
+}
+#page-contentbank-edit fieldset {
+    margin-top: 1em;
+}
 .text-decoration-none {
     text-decoration: none !important; /* stylelint-disable-line declaration-no-important */
+}
 .z-index-1 {
     z-index: 1 !important; /* stylelint-disable-line declaration-no-important */
-}
-// These floats are deprecated in Bootstrap 4.3.1. It is still okay to use them in Moodle.
-.float-left {
-    float: left !important; /* stylelint-disable-line declaration-no-important */
-}
-.float-right {
-    float: right !important; /* stylelint-disable-line declaration-no-important */
+}
 .img-responsive {
     @include img-fluid();
     .emoji-short-name {
         line-height: $picker-row-height * 0.5;
     }
-    @include media-breakpoint-down(xs) {
+    @include media-breakpoint-down(sm) {
         width: $picker-width-xs;
+    }
+}
 .emoji-auto-complete {
     height: $picker-row-height;
-    .btn.btn-link.btn-icon.emoji-button {
+    .btn.btn-icon.emoji-button {
+}
 @each $color, $value in $theme-colors {
     .alert-#{$color} {
         a {
-            color: darken(theme-color-level($color, $alert-color-level), 10%);
+            color: darken(shift-color($value, $alert-color-scale), 10%);
+        }
         // Darken the close button text colour inside notification alerts for better contrast.
-        .close {
+        .btn-close {
-            color: darken(theme-color-level($color, $alert-color-level), 20%);
+            color: darken(shift-color($value, $alert-color-scale), 20%);
             opacity: 0.6;
+        }
+    }
+}
 .breadcrumb:empty {
     padding: 0;
 }
-@include media-breakpoint-down(sm) {
+@include media-breakpoint-down(md) {
     #page-navbar {
         width: 100%;
+    }
     .pagination {
         flex-wrap: wrap;
         justify-content: center;
+    }
-    .custom-select {
-        max-width: 100%;
-    }
     .card .card-body {
         padding: $card-spacer-x * 0.5;
+    }
     #page-header {
         .card {
             .card-body {
                 padding: 0;
+            }
+        }
+    }
+    // Navs and Tabs in small screens.
     .nav-tabs:not(.more-nav),
     .nav-pills {
+        --#{$prefix}nav-tabs-link-active-color: #{$nav-pills-link-active-color};
+        --#{$prefix}nav-tabs-link-active-bg: #{$nav-pills-link-active-bg};
         margin: 0;
         border: 0;
         padding: $spacer * 0.125;
         background-color: $gray-200;
         .nav-item {
             flex: 1 1 auto;
             text-align: center;
+        }
         .nav-link {
-            background: $white;
             border: 0;
             margin: $spacer * 0.125;
-            &.active {
+            &:not(.active) {
-                @include button-outline-variant($gray-600);
-                border-color: $gray-600;
+                background-color: var(--#{$prefix}body-bg);
+            }
+        }
+    }
+}
                 border-width: 0.125rem;
+            }
+        }
+    }
+}
-.core_payment_gateways_modal .custom-control-label::before,
+.core_payment_gateways_modal .form-check-label::before,
-.core_payment_gateways_modal .custom-control-label::after {
+.core_payment_gateways_modal .form-check-label::after {
     top: 45%;
+}
 $scrollbar-thumb: $primary;
             max-height: initial;
             margin-right: 0;
+        }
+    }
-    .dropzone-sr-only-focusable {
+    .dropzone-visually-hidden-focusable {
         &:active,
         &:focus {
             outline: 0;
             box-shadow: $input-btn-focus-box-shadow;
             z-index: $zindex-popover;
             position: relative;
-            background: $sr-only-active-bg;
+            background: $visually-hidden-active-bg;
             padding: 7px;
+        }
+    }
             padding-left: calc(#{$collapse-list-item-padding-x} * 3);
+        }
+    }
+}
-.drawers {
+.page-mycourses {
+    .block_myoverview {
+        .block-cards {
+            border-top: 1px solid $border-color;
+            padding-top: map-get($spacers, 2);
+        }
+    }
+    // Boost theme styling only (drawers not used in classic).
+    .drawers {
-    .block_myoverview {
+        .block_myoverview {
-        border: 0;
+            border: 0;
-        & > .card-body {
+            & > .card-body {
-            padding-top: 0 !important; /* stylelint-disable-line declaration-no-important */
+                padding-top: 0 !important; /* stylelint-disable-line declaration-no-important */
-            padding-left: 0 !important; /* stylelint-disable-line declaration-no-important */
+                padding-left: 0 !important; /* stylelint-disable-line declaration-no-important */
+                padding-right: 0 !important; /* stylelint-disable-line declaration-no-important */
             padding-right: 0 !important; /* stylelint-disable-line declaration-no-important */
+        }
+    }
+}
+#page-my-index .my-action-buttons {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+}
 .dropdown-toggle::after {
-    @extend .fa-solid;
+    font: var(--fa-font-solid);
     content: fa-content($fa-var-chevron-down);
     margin-right: 0;
     margin-left: 4px;
     font-size: 9px;
+    width: 9px;
+    border: 0;
+}
-    width: 9px;
+.listitem-category .dropdown-toggle::after {
+    /* This can be removed when the .dropdown-toggle::after is updated to remove content. */
+    content: none;
     border: 0;
-}
 // TODO: Check if these are still needed.
 .dropleft .dropdown-toggle::before {
     border: 0;
-    @extend .fa-solid;
+    font: var(--fa-font-solid);
     content: fa-content($fa-var-chevron-left);
     content: fa-content($fa-var-chevron-right);
+}
 .dropright .dropdown-toggle::after {
     border: 0;
-    @extend .fa-solid;
+    font: var(--fa-font-solid);
     content: fa-content($fa-var-chevron-right);
+}
 .dir-rtl .dropright .dropdown-toggle::after {
     content: fa-content($fa-var-chevron-left);
+}
 .dropup .dropdown-toggle::after {
     border: 0;
-    @extend .fa-solid;
+    font: var(--fa-font-solid);
+        }
         .dropdown-item {
             padding-left: 2.5rem;
+        }
+    }
+    .dropdown-item {
+        padding: map-get($spacers, 1) map-get($spacers, 4);
-    .dropdown-item[aria-selected="true"] {
+        [aria-selected="true"] {
-        font-weight: bold;
+            font-weight: bold;
+        }
+    }
+}
 [role="listbox"] [role="option"] {
 .page-item {
     &:first-child {
         .page-link {
             .initialbargroups & {
-                @include border-left-radius(0);
+                @include border-start-radius(0);
-                @include border-right-radius(0);
+                @include border-end-radius(0);
+            }
             .initialbargroups .pagination-lg:first-child & {
-                @include border-left-radius($pagination-border-radius-lg);
+                @include border-start-radius($pagination-border-radius-lg);
+            }
             .initialbargroups .pagination-sm:first-child & {
-                @include border-left-radius($pagination-border-radius-sm);
+                @include border-start-radius($pagination-border-radius-sm);
+            }
+        }
+    }
     &:last-child {
         .page-link {
             .initialbargroups & {
-                @include border-left-radius(0);
+                @include border-start-radius(0);
-                @include border-right-radius(0);
+                @include border-end-radius(0);
+            }
             .initialbargroups .pagination-lg:last-child & {
-                @include border-right-radius($pagination-border-radius-lg);
+                @include border-end-radius($pagination-border-radius-lg);
+            }
             .initialbargroups .pagination-sm:last-child & {
-                @include border-right-radius($pagination-border-radius-sm);
+                @include border-end-radius($pagination-border-radius-sm);
+            }
+        }
+    }
+}
 blockquote {
     margin: 0 0.5rem 1rem;
     padding-left: 1rem;
+    color: $gray-700;
+    border-left: 5px solid $gray-500;
+}
+.pagelayout-maintenance,
+.pagelayout-secure {
+    .page-header-headings {
-    color: $gray-700;
+        background-color: $body-bg;
     border-left: 5px solid $gray-400;
+}
+}
 /* Showmore component */
 .showmore-container {
-    &.collapsed {
-        .collapsed-content {
-            display: block;
     &.collapsed {
         .expanded-content {
             display: none;
+        }
+    }
     &:not(.collapsed) {
         .collapsed-content {
             display: none;
-        }
-        .expanded-content {
-            display: block;
+        }
     }
-    button {
+    .showmore-button {
-        float: right;
-        &.btn-link {
+        float: right;
-            text-decoration: none;
         text-decoration: none;
         .icon {
             font-size: $btn-font-size-sm;
             margin: 0;
+        }
 /* Combobox search dropdowns */
 .usersearchdropdown,
 .gradesearchdropdown,
 .groupsearchdropdown {
     &.dropdown-menu {
+        top: 100%;
         width: 350px;
         .searchresultitemscontainer {
             max-height: 170px;
             overflow: auto;
             /* stylelint-disable declaration-no-important */

Proyectos de Subversion Moodle

(root)/theme/boost/scss/moodle/core.scss – Rev 11 → 1441