Skip to content

Commit

Permalink
MDL-71089 theme_boost: Add styles for different toast types
Browse files Browse the repository at this point in the history
  • Loading branch information
@roland04
roland04 committed Apr 13, 2021
1 parent 511a87f commit e7fa114
Show file tree
Hide file tree
Showing 6 changed files with 192 additions and 6 deletions.
1 change: 1 addition & 0 deletions theme/boost/scss/moodle.scss
View file
Expand Up @@ -42,3 +42,4 @@ $breadcrumb-divider-rtl: "◀" !default;
@import "moodle/layout";
@import "moodle/prefixes";
@import "moodle/atto";
@import "moodle/toasts";
49 changes: 49 additions & 0 deletions theme/boost/scss/moodle/toasts.scss
View file
@@ -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;
}
}
6 changes: 6 additions & 0 deletions theme/boost/scss/preset/default.scss
View file
Expand Up @@ -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;

Expand Down
68 changes: 65 additions & 3 deletions theme/boost/style/moodle.css
View file
Expand Up @@ -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);
Expand All @@ -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); }

Expand Down Expand Up @@ -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; }
Expand Down
6 changes: 6 additions & 0 deletions theme/classic/scss/preset/default.scss
View file
Expand Up @@ -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;
Expand Down
68 changes: 65 additions & 3 deletions theme/classic/style/moodle.css
View file
Expand Up @@ -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);
Expand All @@ -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); }

Expand Down Expand Up @@ -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; }
Expand Down

0 comments on commit e7fa114

Please sign in to comment.