mirror of
				https://github.com/mdbootstrap/mdb-ui-kit.git
				synced 2025-10-31 16:07:53 +03:00 
			
		
		
		
	reuse mdb-toggle-color all in one place
This commit is contained in:
		
							parent
							
								
									0a489cf35d
								
							
						
					
					
						commit
						d80aee2371
					
				|  | @ -6,8 +6,6 @@ label.checkbox-inline, | |||
|   padding-left: 0; // Reset for Bootstrap rule | ||||
|   cursor: pointer; | ||||
| 
 | ||||
|   @include mdb-label-color-inner-focus(); | ||||
| 
 | ||||
|   // Hide native checkbox | ||||
|   input[type=checkbox] { | ||||
|     position: absolute; | ||||
|  |  | |||
|  | @ -71,6 +71,7 @@ form { | |||
| // ----- | ||||
| // State coloring: default, success, info, warning, danger | ||||
| // | ||||
| @include mdb-toggle-color(); | ||||
| @include mdb-form-color($mdb-label-color, $mdb-label-color-focus, $input-border-color); | ||||
| 
 | ||||
| .has-success { | ||||
|  | @ -160,10 +161,7 @@ select { | |||
| //  z-index: 100; | ||||
| //} | ||||
| 
 | ||||
| //  I don't think this was in use... | ||||
| //legend { | ||||
| //  border-bottom: 0; | ||||
| //} | ||||
| 
 | ||||
| // | ||||
| // | ||||
| //.form-horizontal { | ||||
|  |  | |||
|  | @ -20,8 +20,6 @@ label.radio-inline, | |||
|   position: relative; | ||||
|   padding-left: 45px; | ||||
| 
 | ||||
|   @include mdb-label-color-inner-focus(); | ||||
| 
 | ||||
|   cursor: pointer; | ||||
| 
 | ||||
|   span { | ||||
|  |  | |||
|  | @ -5,7 +5,6 @@ | |||
|   } | ||||
|   label { | ||||
|     cursor: pointer; | ||||
|     @include mdb-label-color-inner-focus(); | ||||
| 
 | ||||
|     // Hide original checkbox | ||||
|     input[type=checkbox] { | ||||
|  |  | |||
|  | @ -1,3 +1,29 @@ | |||
| @mixin mdb-toggle-color() { | ||||
|   .radio label, | ||||
|   .checkbox label, | ||||
|   .switch label { | ||||
| 
 | ||||
|     // override bootstrap focus and keep all the standard color (could be multiple radios in the form group) | ||||
|     color: $mdb-label-color; | ||||
| 
 | ||||
|     .is-focused & { | ||||
|       // form-group focus could change multiple checkboxes/radios, disable that change by using the same color as non-form-group is-focused | ||||
|       color: $mdb-label-color; | ||||
| 
 | ||||
|       // on focus just darken the specific labels, do not turn them to the brand-primary | ||||
|       &:hover, | ||||
|       &:focus { | ||||
|         color: $mdb-label-color-inner-focus; | ||||
|       } | ||||
| 
 | ||||
|       // correct the above focus color for disabled items | ||||
|       fieldset[disabled] & { | ||||
|         color: $mdb-label-color; | ||||
|       } | ||||
|     } | ||||
|   } | ||||
| } | ||||
| 
 | ||||
| @mixin mdb-form-color($label-color, $label-color-focus, $border-color) { | ||||
| 
 | ||||
|   [class^='mdb-label'], | ||||
|  | @ -132,23 +158,3 @@ | |||
|     font-size: $help-font-size; | ||||
|   } | ||||
| } | ||||
| 
 | ||||
| @mixin mdb-label-color-inner-focus() { | ||||
|   // override bootstrap focus and keep all the standard color (could be multiple radios in the form group) | ||||
|   .mdb-form-group.is-focused & { | ||||
|     color: $mdb-label-color; | ||||
| 
 | ||||
|     // on focus just darken the specific labels, do not turn them to the brand-primary | ||||
|     &:hover, | ||||
|     &:focus { | ||||
|       color: $mdb-label-color-inner-focus; | ||||
|     } | ||||
| 
 | ||||
|     // correct the above focus color for disabled items | ||||
|     fieldset[disabled] & { | ||||
|       color: $mdb-label-color; | ||||
|     } | ||||
|   } | ||||
| } | ||||
| 
 | ||||
| 
 | ||||
|  |  | |||
		Loading…
	
		Reference in New Issue
	
	Block a user