You can not select more than 25 topics
			Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
		
		
		
		
		
			
		
			
				
					
					
						
							297 lines
						
					
					
						
							7.6 KiB
						
					
					
				
			
		
		
		
			
			
			
				
					
				
				
					
				
			
		
		
	
	
							297 lines
						
					
					
						
							7.6 KiB
						
					
					
				| // Embedded icons from Open Iconic. | |
| // Released under MIT and copyright 2014 Waybury. | |
| // https://useiconic.com/open | |
|  | |
| 
 | |
| // Checkboxes and radios | |
| // | |
| // Base class takes care of all the key behavioral aspects. | |
|  | |
| .custom-control { | |
|   position: relative; | |
|   display: block; | |
|   min-height: (1rem * $line-height-base); | |
|   padding-left: $custom-control-gutter; | |
| } | |
| 
 | |
| .custom-control-inline { | |
|   display: inline-flex; | |
|   margin-right: $custom-control-spacer-x; | |
| } | |
| 
 | |
| .custom-control-input { | |
|   position: absolute; | |
|   z-index: -1; // Put the input behind the label so it doesn't overlay text | |
|   opacity: 0; | |
| 
 | |
|   &:checked ~ .custom-control-label::before { | |
|     color: $custom-control-indicator-checked-color; | |
|     @include gradient-bg($custom-control-indicator-checked-bg); | |
|     @include box-shadow($custom-control-indicator-checked-box-shadow); | |
|   } | |
| 
 | |
|   &:focus ~ .custom-control-label::before { | |
|     // the mixin is not used here to make sure there is feedback | |
|     box-shadow: $custom-control-indicator-focus-box-shadow; | |
|   } | |
| 
 | |
|   &:active ~ .custom-control-label::before { | |
|     color: $custom-control-indicator-active-color; | |
|     background-color: $custom-control-indicator-active-bg; | |
|     @include box-shadow($custom-control-indicator-active-box-shadow); | |
|   } | |
| 
 | |
|   &:disabled { | |
|     ~ .custom-control-label { | |
|       color: $custom-control-label-disabled-color; | |
| 
 | |
|       &::before { | |
|         background-color: $custom-control-indicator-disabled-bg; | |
|       } | |
|     } | |
|   } | |
| } | |
| 
 | |
| // Custom control indicators | |
| // | |
| // Build the custom controls out of psuedo-elements. | |
|  | |
| .custom-control-label { | |
|   margin-bottom: 0; | |
| 
 | |
|   // Background-color and (when enabled) gradient | |
|   &::before { | |
|     position: absolute; | |
|     top: (($line-height-base - $custom-control-indicator-size) / 2); | |
|     left: 0; | |
|     display: block; | |
|     width: $custom-control-indicator-size; | |
|     height: $custom-control-indicator-size; | |
|     pointer-events: none; | |
|     content: ""; | |
|     user-select: none; | |
|     background-color: $custom-control-indicator-bg; | |
|     @include box-shadow($custom-control-indicator-box-shadow); | |
|   } | |
| 
 | |
|   // Foreground (icon) | |
|   &::after { | |
|     position: absolute; | |
|     top: (($line-height-base - $custom-control-indicator-size) / 2); | |
|     left: 0; | |
|     display: block; | |
|     width: $custom-control-indicator-size; | |
|     height: $custom-control-indicator-size; | |
|     content: ""; | |
|     background-repeat: no-repeat; | |
|     background-position: center center; | |
|     background-size: $custom-control-indicator-bg-size; | |
|   } | |
| } | |
| 
 | |
| 
 | |
| // Checkboxes | |
| // | |
| // Tweak just a few things for checkboxes. | |
|  | |
| .custom-checkbox { | |
|   .custom-control-label::before { | |
|     @include border-radius($custom-checkbox-indicator-border-radius); | |
|   } | |
| 
 | |
|   .custom-control-input:checked ~ .custom-control-label { | |
|     &::before { | |
|       @include gradient-bg($custom-control-indicator-checked-bg); | |
|     } | |
|     &::after { | |
|       background-image: $custom-checkbox-indicator-icon-checked; | |
|     } | |
|   } | |
| 
 | |
|   .custom-control-input:indeterminate ~ .custom-control-label { | |
|     &::before { | |
|       @include gradient-bg($custom-checkbox-indicator-indeterminate-bg); | |
|       @include box-shadow($custom-checkbox-indicator-indeterminate-box-shadow); | |
|     } | |
|     &::after { | |
|       background-image: $custom-checkbox-indicator-icon-indeterminate; | |
|     } | |
|   } | |
| 
 | |
|   .custom-control-input:disabled { | |
|     &:checked ~ .custom-control-label::before { | |
|       background-color: $custom-control-indicator-checked-disabled-bg; | |
|     } | |
|     &:indeterminate ~ .custom-control-label::before { | |
|       background-color: $custom-control-indicator-checked-disabled-bg; | |
|     } | |
|   } | |
| } | |
| 
 | |
| // Radios | |
| // | |
| // Tweak just a few things for radios. | |
|  | |
| .custom-radio { | |
|   .custom-control-label::before { | |
|     border-radius: $custom-radio-indicator-border-radius; | |
|   } | |
| 
 | |
|   .custom-control-input:checked ~ .custom-control-label { | |
|     &::before { | |
|       @include gradient-bg($custom-control-indicator-checked-bg); | |
|     } | |
|     &::after { | |
|       background-image: $custom-radio-indicator-icon-checked; | |
|     } | |
|   } | |
| 
 | |
|   .custom-control-input:disabled { | |
|     &:checked ~ .custom-control-label::before { | |
|       background-color: $custom-control-indicator-checked-disabled-bg; | |
|     } | |
|   } | |
| } | |
| 
 | |
| 
 | |
| // Select | |
| // | |
| // Replaces the browser default select with a custom one, mostly pulled from | |
| // http://primercss.io. | |
| // | |
|  | |
| .custom-select { | |
|   display: inline-block; | |
|   width: 100%; | |
|   height: $custom-select-height; | |
|   padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x; | |
|   line-height: $custom-select-line-height; | |
|   color: $custom-select-color; | |
|   vertical-align: middle; | |
|   background: $custom-select-bg $custom-select-indicator no-repeat right $custom-select-padding-x center; | |
|   background-size: $custom-select-bg-size; | |
|   border: $custom-select-border-width solid $custom-select-border-color; | |
|   @if $enable-rounded { | |
|     border-radius: $custom-select-border-radius; | |
|   } @else { | |
|     border-radius: 0; | |
|   } | |
|   appearance: none; | |
| 
 | |
|   &:focus { | |
|     border-color: $custom-select-focus-border-color; | |
|     outline: 0; | |
|     box-shadow: $custom-select-focus-box-shadow; | |
| 
 | |
|     &::-ms-value { | |
|       // For visual consistency with other platforms/browsers, | |
|       // suppress the default white text on blue background highlight given to | |
|       // the selected option text when the (still closed) <select> receives focus | |
|       // in IE and (under certain conditions) Edge. | |
|       // See https://github.com/twbs/bootstrap/issues/19398. | |
|       color: $input-color; | |
|       background-color: $input-bg; | |
|     } | |
|   } | |
| 
 | |
|   &[multiple], | |
|   &[size]:not([size="1"]) { | |
|     height: auto; | |
|     padding-right: $custom-select-padding-x; | |
|     background-image: none; | |
|   } | |
| 
 | |
|   &:disabled { | |
|     color: $custom-select-disabled-color; | |
|     background-color: $custom-select-disabled-bg; | |
|   } | |
| 
 | |
|   // Hides the default caret in IE11 | |
|   &::-ms-expand { | |
|     opacity: 0; | |
|   } | |
| } | |
| 
 | |
| .custom-select-sm { | |
|   height: $custom-select-height-sm; | |
|   padding-top: $custom-select-padding-y; | |
|   padding-bottom: $custom-select-padding-y; | |
|   font-size: $custom-select-font-size-sm; | |
| } | |
| 
 | |
| .custom-select-lg { | |
|   height: $custom-select-height-lg; | |
|   padding-top: $custom-select-padding-y; | |
|   padding-bottom: $custom-select-padding-y; | |
|   font-size: $custom-select-font-size-lg; | |
| } | |
| 
 | |
| 
 | |
| // File | |
| // | |
| // Custom file input. | |
|  | |
| .custom-file { | |
|   position: relative; | |
|   display: inline-block; | |
|   width: 100%; | |
|   height: $custom-file-height; | |
|   margin-bottom: 0; | |
| } | |
| 
 | |
| .custom-file-input { | |
|   position: relative; | |
|   z-index: 2; | |
|   width: 100%; | |
|   height: $custom-file-height; | |
|   margin: 0; | |
|   opacity: 0; | |
| 
 | |
|   &:focus ~ .custom-file-control { | |
|     border-color: $custom-file-focus-border-color; | |
|     box-shadow: $custom-file-focus-box-shadow; | |
| 
 | |
|     &::before { | |
|       border-color: $custom-file-focus-border-color; | |
|     } | |
|   } | |
| 
 | |
|   @each $lang, $value in $custom-file-text { | |
|     &:lang(#{$lang}) ~ .custom-file-label::after { | |
|       content: $value; | |
|     } | |
|   } | |
| } | |
| 
 | |
| .custom-file-label { | |
|   position: absolute; | |
|   top: 0; | |
|   right: 0; | |
|   left: 0; | |
|   z-index: 1; | |
|   height: $custom-file-height; | |
|   padding: $custom-file-padding-y $custom-file-padding-x; | |
|   line-height: $custom-file-line-height; | |
|   color: $custom-file-color; | |
|   background-color: $custom-file-bg; | |
|   border: $custom-file-border-width solid $custom-file-border-color; | |
|   @include border-radius($custom-file-border-radius); | |
|   @include box-shadow($custom-file-box-shadow); | |
| 
 | |
|   &::after { | |
|     position: absolute; | |
|     top: 0; | |
|     right: 0; | |
|     bottom: 0; | |
|     z-index: 3; | |
|     display: block; | |
|     height: calc(#{$custom-file-height} - #{$custom-file-border-width} * 2); | |
|     padding: $custom-file-padding-y $custom-file-padding-x; | |
|     line-height: $custom-file-line-height; | |
|     color: $custom-file-button-color; | |
|     content: "Browse"; | |
|     @include gradient-bg($custom-file-button-bg); | |
|     border-left: $custom-file-border-width solid $custom-file-border-color; | |
|     @include border-radius(0 $custom-file-border-radius $custom-file-border-radius 0); | |
|   } | |
| }
 |