MDL-71089 theme_boost: Add styles for different toast types

nilo72 · Apr 13, 2021 · e7fa114 · e7fa114
1 parent 511a87f
commit e7fa114
Show file tree

Hide file tree

Showing 6 changed files with 192 additions and 6 deletions.
diff --git a/theme/boost/scss/moodle.scss b/theme/boost/scss/moodle.scss
@@ -42,3 +42,4 @@ $breadcrumb-divider-rtl: "◀" !default;
 @import "moodle/layout";
 @import "moodle/prefixes";
 @import "moodle/atto";
+@import "moodle/toasts";
diff --git a/theme/boost/scss/moodle/toasts.scss b/theme/boost/scss/moodle/toasts.scss
@@ -0,0 +1,49 @@
+@mixin toast-icon($content) {
+    @include fa-icon();
+    margin: 2px 5px 0 0;
+    content: $content;
+}
+
+@mixin toast-variant($color) {
+    background-color: rgba(theme-color-level($color, $alert-bg-level), .95);
+    color: theme-color-level($color, $alert-color-level);
+    .toast-header {
+        color: theme-color-level($color, $alert-color-level);
+    }
+}
+
+.toast {
+    border-radius: $toast-border-radius;
+
+    &.toast-success {
+        @include toast-variant('success');
+        .toast-body:before {
+            @include toast-icon($fa-var-check-circle);
+        }
+    }
+
+    &.toast-danger {
+        @include toast-variant('danger');
+        .toast-body:before {
+            @include toast-icon($fa-var-times-circle);
+        }
+    }
+
+    &.toast-info {
+        @include toast-variant('info');
+        .toast-body:before {
+            @include toast-icon($fa-var-info-circle);
+        }
+    }
+
+    &.toast-warning {
+        @include toast-variant('warning');
+        .toast-body:before {
+            @include toast-icon($fa-var-exclamation-circle);
+        }
+    }
+
+    .close {
+        color: inherit;
+    }
+}
diff --git a/theme/boost/scss/preset/default.scss b/theme/boost/scss/preset/default.scss
@@ -66,6 +66,12 @@ $alert-border-width:                0 !default;
 
 $card-group-margin: .25rem;
 
+// Toasts
+$toast-color:                       $white !default;
+$toast-background-color:            rgba($gray-900, .95) !default;
+$toast-header-color:                $gray-100 !default;
+$toast-header-background-color:     rgba($white, .1) !default;
+
 // Custom control size
 $custom-control-indicator-size: 1.25rem;
 

diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
@@ -6317,7 +6317,8 @@ a.close.disabled {
   max-width: 350px;
   overflow: hidden;
   font-size: 0.875rem;
-  background-color: rgba(255, 255, 255, 0.85);
+  color: #fff;
+  background-color: rgba(33, 37, 41, 0.95);
   background-clip: padding-box;
   border: 1px solid rgba(0, 0, 0, 0.1);
   box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
@@ -6337,8 +6338,8 @@ a.close.disabled {
   display: flex;
   align-items: center;
   padding: 0.25rem 0.75rem;
-  color: #6c757d;
-  background-color: rgba(255, 255, 255, 0.85);
+  color: #f8f9fa;
+  background-color: rgba(255, 255, 255, 0.1);
   background-clip: padding-box;
   border-bottom: 1px solid rgba(0, 0, 0, 0.05); }
 
@@ -19694,6 +19695,67 @@ div.editor_atto_content:hover .atto_control {
 div.editor_atto_toolbar button .icon {
   color: #495057; }
 
+.toast {
+  border-radius: 0.25rem; }
+  .toast.toast-success {
+    background-color: rgba(215, 228, 214, 0.95);
+    color: #1c3f1a; }
+    .toast.toast-success .toast-header {
+      color: #1c3f1a; }
+    .toast.toast-success .toast-body:before {
+      display: inline-block;
+      font: normal normal normal 14px/1 FontAwesome;
+      font-size: inherit;
+      text-rendering: auto;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+      margin: 2px 5px 0 0;
+      content: ""; }
+  .toast.toast-danger {
+    background-color: rgba(244, 214, 210, 0.95);
+    color: #691911; }
+    .toast.toast-danger .toast-header {
+      color: #691911; }
+    .toast.toast-danger .toast-body:before {
+      display: inline-block;
+      font: normal normal normal 14px/1 FontAwesome;
+      font-size: inherit;
+      text-rendering: auto;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+      margin: 2px 5px 0 0;
+      content: ""; }
+  .toast.toast-info {
+    background-color: rgba(204, 230, 234, 0.95);
+    color: #00434e; }
+    .toast.toast-info .toast-header {
+      color: #00434e; }
+    .toast.toast-info .toast-body:before {
+      display: inline-block;
+      font: normal normal normal 14px/1 FontAwesome;
+      font-size: inherit;
+      text-rendering: auto;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+      margin: 2px 5px 0 0;
+      content: ""; }
+  .toast.toast-warning {
+    background-color: rgba(252, 239, 220, 0.95);
+    color: #7d5a29; }
+    .toast.toast-warning .toast-header {
+      color: #7d5a29; }
+    .toast.toast-warning .toast-body:before {
+      display: inline-block;
+      font: normal normal normal 14px/1 FontAwesome;
+      font-size: inherit;
+      text-rendering: auto;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+      margin: 2px 5px 0 0;
+      content: ""; }
+  .toast .close {
+    color: inherit; }
+
 body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale; }

diff --git a/theme/classic/scss/preset/default.scss b/theme/classic/scss/preset/default.scss
@@ -63,6 +63,12 @@ $alert-border-width:                0 !default;
 
 $card-group-margin: .25rem;
 
+// Toasts
+$toast-color:                       $white !default;
+$toast-background-color:            rgba($gray-900, .95) !default;
+$toast-header-color:                $gray-100 !default;
+$toast-header-background-color:     rgba($white, .1) !default;
+
 $input-btn-focus-color: rgba($primary, .75) !default;
 
 $input-border-color: $gray-500 !default;

diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
@@ -6510,7 +6510,8 @@ a.close.disabled {
   max-width: 350px;
   overflow: hidden;
   font-size: 0.875rem;
-  background-color: rgba(255, 255, 255, 0.85);
+  color: #fff;
+  background-color: rgba(33, 37, 41, 0.95);
   background-clip: padding-box;
   border: 1px solid rgba(0, 0, 0, 0.1);
   box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
@@ -6531,8 +6532,8 @@ a.close.disabled {
   display: flex;
   align-items: center;
   padding: 0.25rem 0.75rem;
-  color: #6c757d;
-  background-color: rgba(255, 255, 255, 0.85);
+  color: #f8f9fa;
+  background-color: rgba(255, 255, 255, 0.1);
   background-clip: padding-box;
   border-bottom: 1px solid rgba(0, 0, 0, 0.05); }
 
@@ -19877,6 +19878,67 @@ div.editor_atto_content:hover .atto_control {
 div.editor_atto_toolbar button .icon {
   color: #495057; }
 
+.toast {
+  border-radius: 0.25rem; }
+  .toast.toast-success {
+    background-color: rgba(215, 228, 214, 0.95);
+    color: #1c3f1a; }
+    .toast.toast-success .toast-header {
+      color: #1c3f1a; }
+    .toast.toast-success .toast-body:before {
+      display: inline-block;
+      font: normal normal normal 14px/1 FontAwesome;
+      font-size: inherit;
+      text-rendering: auto;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+      margin: 2px 5px 0 0;
+      content: ""; }
+  .toast.toast-danger {
+    background-color: rgba(244, 214, 210, 0.95);
+    color: #691911; }
+    .toast.toast-danger .toast-header {
+      color: #691911; }
+    .toast.toast-danger .toast-body:before {
+      display: inline-block;
+      font: normal normal normal 14px/1 FontAwesome;
+      font-size: inherit;
+      text-rendering: auto;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+      margin: 2px 5px 0 0;
+      content: ""; }
+  .toast.toast-info {
+    background-color: rgba(204, 230, 234, 0.95);
+    color: #00434e; }
+    .toast.toast-info .toast-header {
+      color: #00434e; }
+    .toast.toast-info .toast-body:before {
+      display: inline-block;
+      font: normal normal normal 14px/1 FontAwesome;
+      font-size: inherit;
+      text-rendering: auto;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+      margin: 2px 5px 0 0;
+      content: ""; }
+  .toast.toast-warning {
+    background-color: rgba(252, 239, 220, 0.95);
+    color: #7d5a29; }
+    .toast.toast-warning .toast-header {
+      color: #7d5a29; }
+    .toast.toast-warning .toast-body:before {
+      display: inline-block;
+      font: normal normal normal 14px/1 FontAwesome;
+      font-size: inherit;
+      text-rendering: auto;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+      margin: 2px 5px 0 0;
+      content: ""; }
+  .toast .close {
+    color: inherit; }
+
 body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale; }