From 57732a1c8e5eb05818f2389bd138bc4e848a969b Mon Sep 17 00:00:00 2001
From: Andrew Nicols <andrew@nicols.co.uk>
Date: Wed, 2 Oct 2019 12:47:46 +0800
Subject: [PATCH] MDL-66700 theme: Add form inset capabiity

Part of MDL-66074

This allows a button to be insert into the left or right of a form
element.
---
 theme/boost/scss/moodle/forms.scss  | 27 +++++++++++++++++++++++++++
 theme/boost/scss/moodle/layout.scss |  2 +-
 theme/boost/style/moodle.css        | 15 +++++++++++----
 theme/classic/style/moodle.css      | 15 +++++++++++----
 4 files changed, 50 insertions(+), 9 deletions(-)

diff --git a/theme/boost/scss/moodle/forms.scss b/theme/boost/scss/moodle/forms.scss
index 302299c57ab..78724df6cfa 100644
--- a/theme/boost/scss/moodle/forms.scss
+++ b/theme/boost/scss/moodle/forms.scss
@@ -464,3 +464,30 @@ textarea[data-auto-rows] {
         background-image: url([[pix:t/collapsed]]);
     }
 }
+
+// Form inset on the left/right.
+// Used to display an icon/button within the form control.
+.input-group {
+    &.form-inset {
+        .form-inset-item {
+            @extend .position-absolute;
+            padding-top: calc(#{$input-padding-y} + #{$input-border-width});
+            z-index: 3;
+        }
+
+        &.form-inset-left {
+            .form-control {
+                @extend .pl-4;
+            }
+        }
+
+        &.form-inset-right {
+            .form-control {
+                @extend .pr-4;
+            }
+            .form-inset-item {
+                right: 0;
+            }
+        }
+    }
+}
diff --git a/theme/boost/scss/moodle/layout.scss b/theme/boost/scss/moodle/layout.scss
index b0ba1cbfcd5..5f1defa2c01 100644
--- a/theme/boost/scss/moodle/layout.scss
+++ b/theme/boost/scss/moodle/layout.scss
@@ -4,7 +4,7 @@
         position: fixed;
         top: 0;
         left: 0;
-        z-index: $zindex-modal;
+        z-index: $zindex-modal-backdrop;
         overflow-x: hidden;
         transition: 0.5s;
         width: 100%;
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index 772557519a2..3ae61902b7c 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -7699,7 +7699,7 @@ button.bg-dark:focus {
 .position-relative {
   position: relative !important; }
 
-.position-absolute {
+.position-absolute, .input-group.form-inset .form-inset-item {
   position: absolute !important; }
 
 .position-fixed {
@@ -8024,7 +8024,7 @@ button.bg-dark:focus {
 .py-4 {
   padding-top: 1.5rem !important; }
 
-.pr-4,
+.pr-4, .input-group.form-inset.form-inset-right .form-control,
 .px-4 {
   padding-right: 1.5rem !important; }
 
@@ -8032,7 +8032,7 @@ button.bg-dark:focus {
 .py-4 {
   padding-bottom: 1.5rem !important; }
 
-.pl-4,
+.pl-4, .input-group.form-inset.form-inset-left .form-control,
 .px-4 {
   padding-left: 1.5rem !important; }
 
@@ -16169,6 +16169,13 @@ textarea[data-auto-rows] {
     /*rtl:remove*/
     background-image: url([[pix:t/collapsed]]); } }
 
+.input-group.form-inset .form-inset-item {
+  padding-top: calc(0.375rem + 1px);
+  z-index: 3; }
+
+.input-group.form-inset.form-inset-right .form-inset-item {
+  right: 0; }
+
 .pagelayout-login .card-title h2 img {
   max-width: 100%;
   max-height: 100px; }
@@ -18220,7 +18227,7 @@ span[data-flexitour="container"][x-placement="right"], span[data-flexitour="cont
   position: fixed;
   top: 0;
   left: 0;
-  z-index: 1050;
+  z-index: 1040;
   overflow-x: hidden;
   transition: 0.5s;
   width: 100%;
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index a7f3a6bbddf..9567a8f02db 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -7946,7 +7946,7 @@ button.bg-dark:focus {
 .position-relative {
   position: relative !important; }
 
-.position-absolute {
+.position-absolute, .input-group.form-inset .form-inset-item {
   position: absolute !important; }
 
 .position-fixed {
@@ -8271,7 +8271,7 @@ button.bg-dark:focus {
 .py-4 {
   padding-top: 1.5rem !important; }
 
-.pr-4,
+.pr-4, .input-group.form-inset.form-inset-right .form-control,
 .px-4 {
   padding-right: 1.5rem !important; }
 
@@ -8279,7 +8279,7 @@ button.bg-dark:focus {
 .py-4 {
   padding-bottom: 1.5rem !important; }
 
-.pl-4,
+.pl-4, .input-group.form-inset.form-inset-left .form-control,
 .px-4 {
   padding-left: 1.5rem !important; }
 
@@ -16441,6 +16441,13 @@ textarea[data-auto-rows] {
     /*rtl:remove*/
     background-image: url([[pix:t/collapsed]]); } }
 
+.input-group.form-inset .form-inset-item {
+  padding-top: calc(0.375rem + 1px);
+  z-index: 3; }
+
+.input-group.form-inset.form-inset-right .form-inset-item {
+  right: 0; }
+
 .pagelayout-login .card-title h2 img {
   max-width: 100%;
   max-height: 100px; }
@@ -18460,7 +18467,7 @@ span[data-flexitour="container"][x-placement="right"], span[data-flexitour="cont
   position: fixed;
   top: 0;
   left: 0;
-  z-index: 1050;
+  z-index: 1040;
   overflow-x: hidden;
   transition: 0.5s;
   width: 100%;