mirror of https://github.com/twbs/bootstrap.git
				
				
				
			improve navbar toggle and hide code snippets on mobile devices for now
This commit is contained in:
		
							parent
							
								
									2e3ba4afe6
								
							
						
					
					
						commit
						492c249537
					
				|  | @ -3217,7 +3217,7 @@ button.close { | ||||||
|   display: block; |   display: block; | ||||||
|   width: 22px; |   width: 22px; | ||||||
|   height: 2px; |   height: 2px; | ||||||
|   background-color: #fff; |   background-color: #ccc; | ||||||
|   border-radius: 1px; |   border-radius: 1px; | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
|  | @ -3331,6 +3331,10 @@ button.close { | ||||||
|   background-color: #333; |   background-color: #333; | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
|  | .navbar-inverse .navbar-toggle .icon-bar { | ||||||
|  |   background-color: #fff; | ||||||
|  | } | ||||||
|  | 
 | ||||||
| .navbar-inverse .nav > .divider { | .navbar-inverse .nav > .divider { | ||||||
|   background-color: #151515; |   background-color: #151515; | ||||||
|   border-bottom-color: #2f2f2f; |   border-bottom-color: #2f2f2f; | ||||||
|  |  | ||||||
|  | @ -592,6 +592,16 @@ input.focused { | ||||||
| /* Responsive variations | /* Responsive variations | ||||||
| -------------------------------------------------- */ | -------------------------------------------------- */ | ||||||
| 
 | 
 | ||||||
|  | /* Hide code snippets on mobile devices */ | ||||||
|  | @media screen and (max-width: 480px) { | ||||||
|  |   .bs-docs-example { | ||||||
|  |     border-radius: 4px; | ||||||
|  |   } | ||||||
|  |   .highlight { | ||||||
|  |     display: none; | ||||||
|  |   } | ||||||
|  | } | ||||||
|  | 
 | ||||||
| /* Tablets and up */ | /* Tablets and up */ | ||||||
| @media screen and (min-width: 768px) { | @media screen and (min-width: 768px) { | ||||||
| 
 | 
 | ||||||
|  |  | ||||||
|  | @ -2228,7 +2228,7 @@ For example, <code><section></code> should be wrapped as inline. | ||||||
|           </div> |           </div> | ||||||
|           <p class="lead">For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query.</p> |           <p class="lead">For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query.</p> | ||||||
| 
 | 
 | ||||||
|           <table class="table table-bordered table-striped responsive-utilities"> |           <table class="table table-bordered table-striped responsive-utilities hidden-phone"> | ||||||
|             <thead> |             <thead> | ||||||
|               <tr> |               <tr> | ||||||
|                 <th>Class</th> |                 <th>Class</th> | ||||||
|  |  | ||||||
|  | @ -114,7 +114,7 @@ | ||||||
|     display: block; |     display: block; | ||||||
|     width: 22px; |     width: 22px; | ||||||
|     height: 2px; |     height: 2px; | ||||||
|     background-color: #fff; |     background-color: #ccc; | ||||||
|     border-radius: 1px; |     border-radius: 1px; | ||||||
|   } |   } | ||||||
|   .icon-bar + .icon-bar { |   .icon-bar + .icon-bar { | ||||||
|  | @ -230,6 +230,9 @@ | ||||||
|     &:focus { |     &:focus { | ||||||
|       background-color: #333; |       background-color: #333; | ||||||
|     } |     } | ||||||
|  |     .icon-bar { | ||||||
|  |       background-color: #fff; | ||||||
|  |     } | ||||||
|   } |   } | ||||||
| 
 | 
 | ||||||
|   // Darken dividers |   // Darken dividers | ||||||
|  |  | ||||||
		Loading…
	
		Reference in New Issue