diff --git a/README.md b/README.md index bf8be498..1a3d410a 100644 --- a/README.md +++ b/README.md @@ -61,7 +61,16 @@ Remember to use the proper HTML markup to get radio and checkboxes styled correc Option one is this + +# 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 diff --git a/popups.less b/popups.less new file mode 100644 index 00000000..943d3afe --- /dev/null +++ b/popups.less @@ -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; +} diff --git a/screenshots/toastr-preview.jpg b/screenshots/toastr-preview.jpg new file mode 100644 index 00000000..366b8173 Binary files /dev/null and b/screenshots/toastr-preview.jpg differ