Merge branch 'MDL-69395-master' of git://github.com/bmbrands/moodle i…

…nto master
moodle · Sep 17, 2020 · 6e6a178 · 6e6a178
2 parents ee8f326 + 609d8b3
commit 6e6a178
Show file tree

Hide file tree

Showing 11 changed files with 668 additions and 111 deletions.
diff --git a/lib/outputrenderers.php b/lib/outputrenderers.php
@@ -2696,7 +2696,7 @@ public function render_file_picker(file_picker $fp) {
 EOD;
         if ($options->env != 'url') {
             $html .= <<<EOD
-    <div id="file_info_{$client_id}" class="mdl-left filepicker-filelist border" style="position: relative">
+    <div id="file_info_{$client_id}" class="mdl-left filepicker-filelist" style="position: relative">
     <div class="filepicker-filename">
         <div class="filepicker-container">$currentfile<div class="dndupload-message">$strdndenabled <br/><div class="dndupload-arrow"></div></div></div>
         <div class="dndupload-progressbars"></div>

diff --git a/theme/boost/scss/moodle.scss b/theme/boost/scss/moodle.scss
@@ -41,3 +41,4 @@ $breadcrumb-divider-rtl: "◀" !default;
 @import "moodle/modal";
 @import "moodle/layout";
 @import "moodle/prefixes";
+@import "moodle/atto";
diff --git a/theme/boost/scss/moodle/admin.scss b/theme/boost/scss/moodle/admin.scss
@@ -388,15 +388,15 @@
     }
     .admin_colourpicker .colourdialogue {
         float: left;
-        border: 1px solid $state-info-border;
+        border: 1px solid $input-border-color;
     }
     .admin_colourpicker .previewcolour {
-        border: 1px solid $state-info-border;
+        border: 1px solid $input-border-color;
         margin-left: 301px;
     }
 
     .admin_colourpicker .currentcolour {
-        border: 1px solid $state-info-border;
+        border: 1px solid $input-border-color;
         margin-left: 301px;
         border-top-width: 0;
     }

diff --git a/lib/editor/atto/styles.css → theme/boost/scss/moodle/atto.scss b/lib/editor/atto/styles.css → theme/boost/scss/moodle/atto.scss
@@ -13,8 +13,6 @@
 .editor_atto + textarea {
     width: 100%;
     padding: 0;
-    border: 1px solid #bbb;
-    border-top: none;
 }
 
 .editor_atto + textarea {
@@ -27,7 +25,7 @@ div.editor_atto_toolbar {
     display: block;
     background: #f2f2f2;
     min-height: 35px;
-    border: 1px solid #bbb;
+    border: 1px solid $input-border-color;
     width: 100%;
     padding: 0 0 9px 0;
 }
@@ -201,3 +199,22 @@ div.editor_atto_content:hover .atto_control {
 .editor_atto + textarea {
     box-sizing: border-box;
 }
+
+.editor_atto_content.form-control {
+    width: 100%;
+    border-top: 0;
+}
+
+/** Atto fields do not have form-control because that would break the layout of the editor.
+    So they need these extra styles to highlight the editor when there is a validation error. */
+.has-danger .editor_atto_content.form-control,
+.has-danger .editor_atto_content.form-control-danger {
+    @include form-validation-state('invalid', $form-feedback-invalid-color, $form-feedback-icon-invalid);
+}
+
+.open.atto_menu > .dropdown-menu {
+    display: block;
+}
+div.editor_atto_toolbar button .icon {
+    color: $gray-700;
+}
diff --git a/theme/boost/scss/moodle/core.scss b/theme/boost/scss/moodle/core.scss
@@ -2387,12 +2387,6 @@ $footer-link-color: $bg-inverse-link-color !default;
     }
 }
 
-.open.atto_menu > .dropdown-menu {
-    display: block;
-}
-div.editor_atto_toolbar button .icon {
-    color: $gray-700;
-}
 .w-auto {
     width: auto;
 }

diff --git a/theme/boost/scss/moodle/filemanager.scss b/theme/boost/scss/moodle/filemanager.scss
@@ -36,11 +36,15 @@
     min-height: 520px;
 }
 .file-picker .fp-navbar {
-    border-bottom: 1px solid #e5e5e5;
     min-height: 40px;
     padding: 4px;
 }
 
+.fp-navbar {
+    border-color: $input-border-color;
+    border-bottom: 0;
+}
+
 .file-picker .fp-content {
     border-top: 0;
     background: #fff;
@@ -602,7 +606,7 @@ a.ygtvspacer:hover {
 .filepicker-filelist,
 .filemanager-container {
     min-height: 140px;
-    border-top: 0;
+    border: 1px solid $input-border-color;
 }
 
 .filemanager .fp-content {

diff --git a/theme/boost/scss/moodle/forms.scss b/theme/boost/scss/moodle/forms.scss
@@ -56,10 +56,6 @@
     }
 }
 
-.editor_atto_content.form-control {
-    width: 100%;
-}
-
 #adminsettings .form-control[size] {
     width: auto;
 }
@@ -410,20 +406,6 @@ textarea[data-auto-rows] {
     max-width: 30rem;
 }
 
-/** Atto fields do not have form-control because that would break the layout of the editor.
-    So they need these extra styles to highlight the editor when there is a validation error. */
-/* stylelint-disable function-url-scheme-blacklist */
-$form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23d9534f' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E") !default;
-/* stylelint-enable function-url-scheme-blacklist */
-.has-danger .editor_atto_content.form-control,
-.has-danger .editor_atto_content.form-control-danger {
-    background-image: $form-icon-danger;
-    padding-right: ($input-padding-x * 3);
-    background-repeat: no-repeat;
-    background-position: center right 1rem;
-    background-size: 1.5rem;
-}
-
 // Styles for the JS file types browser provided by the "filetypes" element.
 [data-filetypesbrowserbody] {
     [aria-expanded="false"] > [role="group"],

diff --git a/theme/boost/scss/preset/default.scss b/theme/boost/scss/preset/default.scss
@@ -4,7 +4,7 @@ $gray-100: #f8f9fa !default;
 $gray-200: #e9ecef !default;
 $gray-300: #dee2e6 !default;
 $gray-400: #ced4da !default;
-$gray-500: #adb5bd !default;
+$gray-500: #8f959e !default;
 $gray-600: #6c757d !default;
 $gray-700: #495057 !default;
 $gray-800: #343a40 !default;
@@ -71,6 +71,8 @@ $custom-control-indicator-size: 1.25rem;
 
 $input-btn-focus-color: rgba($primary, .75) !default;
 
+$input-border-color: $gray-500 !default;
+
 // stylelint-disable
 $theme-colors: () !default;
 $theme-colors: map-merge((