MDL-66700 theme: Add form inset capabiity
authorAndrew Nicols <andrew@nicols.co.uk>
Wed, 2 Oct 2019 04:47:46 +0000 (12:47 +0800)
committerMathew May <mathewm@hotmail.co.nz>
Wed, 30 Oct 2019 02:23:40 +0000 (10:23 +0800)
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
theme/boost/scss/moodle/layout.scss
theme/boost/style/moodle.css
theme/classic/style/moodle.css

index 302299c..78724df 100644 (file)
@@ -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;
+            }
+        }
+    }
+}
index b0ba1cb..5f1defa 100644 (file)
@@ -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%;
index 7725575..3ae6190 100644 (file)
@@ -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%;
index a7f3a6b..9567a8f 100644 (file)
@@ -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%;