mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-25 19:14:09 +03:00
Added support for Toastr.
This commit is contained in:
parent
681077edae
commit
56b9e1b68c
|
@ -62,6 +62,15 @@ Remember to use the proper HTML markup to get radio and checkboxes styled correc
|
|||
</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
49
popups.less
Normal 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;
|
||||
}
|
BIN
screenshots/toastr-preview.jpg
Normal file
BIN
screenshots/toastr-preview.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 11 KiB |
Loading…
Reference in New Issue
Block a user