MDL-71089 theme_boost: Add styles for different toast types
This commit is contained in:
Mikel Martín
@@ -42,3 +42,4 @@ $breadcrumb-divider-rtl: "◀" !default;
|
||||
@import "moodle/layout";
|
||||
@import "moodle/prefixes";
|
||||
@import "moodle/atto";
|
||||
@import "moodle/toasts";
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
|
||||
|
||||
@@ -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); }
|
||||
|
||||
@@ -19676,6 +19677,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; }
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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); }
|
||||
|
||||
@@ -19859,6 +19860,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; }
|
||||
|
||||
Reference in New Issue
Block a user