mirror of
				https://github.com/mdbootstrap/mdb-ui-kit.git
				synced 2025-11-04 09:57:36 +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.
 | 
			
		||||
 | 
			
		||||

 | 
			
		||||
 | 
			
		||||
# 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