Added support for Toastr.

This commit is contained in:
Federico Zivolo 2014-08-20 14:57:38 +02:00
parent 89058f385b
commit 0561821390
3 changed files with 58 additions and 0 deletions

View File

@ -61,7 +61,16 @@ Remember to use the proper HTML markup to get radio and checkboxes styled correc
Option one is this
</label>
</div>
# Plugins
Material Design for Bootstrap comes with styling support for various Bootstrap plugins, at the moment only one plugin is supported but others will come:
### Toastr
Create snackbars and toasts with Toastr plugin, the default toast style is the squared one (snackbar style), if you like to use the rounded style (toast style) please add the `rounded` class to the `positionClass` option of Toastr.
![toastr](screenshots/toastr-preview.jpg)
# Compatibility

49
popups.less Normal file
View File

@ -0,0 +1,49 @@
// main: material.less
.popover, .tooltip-inner {
background: #323232;
color: #FFF;
border-radius: 2px;
}
.tooltip, .tooltip.in {
opacity: 1;
}
.popover, .tooltip {
&.left .arrow:after, &.left .tooltip-arrow {
border-left-color: #323232;
}
&.right .arrow:after, &.right .tooltip-arrow {
border-right-color: #323232;
}
&.top .arrow:after, &.top .tooltip-arrow {
border-top-color: #323232;
}
&.bottom .arrow:after, &.bottom .tooltip-arrow {
border-bottom-color: #323232;
}
}
// Support for toastr plugin (in material they are snackbars)
// http://codeseven.github.io/toastr/
#toast-container > div {
background-color: #323232;
.shadow-z-1;
border-radius: 2px;
opacity: 1;
color: @darkbg-text;
}
.toast-close-button:hover, .toast-close-button:focus {
color: @darkbg-text;
opacity: 1;
}
#toast-container.toast-top-full-width > div, #toast-container.toast-bottom-full-width > div {
width: 100%;
border-radius: 0;
}
#toast-container.rounded > div {
border-radius: 200px;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB