86 lines
		
	
	
		
			1.8 KiB
		
	
	
	
		
			SCSS
		
	
	
	
	
	
			
		
		
	
	
			86 lines
		
	
	
		
			1.8 KiB
		
	
	
	
		
			SCSS
		
	
	
	
	
	
| ///
 | |
| /// Phantom by HTML5 UP
 | |
| /// html5up.net | @ajlkn
 | |
| /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
 | |
| ///
 | |
| 
 | |
| /* Button */
 | |
| 
 | |
| 	input[type="submit"],
 | |
| 	input[type="reset"],
 | |
| 	input[type="button"],
 | |
| 	button,
 | |
| 	.button {
 | |
| 		@include vendor('appearance', 'none');
 | |
| 		@include vendor('transition', (
 | |
| 			'background-color #{_duration(transition)} ease-in-out',
 | |
| 			'color #{_duration(transition)} ease-in-out',
 | |
| 			'box-shadow #{_duration(transition)} ease-in-out'
 | |
| 		));
 | |
| 		background-color: transparent;
 | |
| 		border-radius: _size(border-radius);
 | |
| 		border: 0;
 | |
| 		box-shadow: inset 0 0 0 (_size(border-width) * 2) _palette(fg);
 | |
| 		color: _palette(fg) !important;
 | |
| 		cursor: pointer;
 | |
| 		display: inline-block;
 | |
| 		font-size: 0.8em;
 | |
| 		font-weight: _font(weight-bold);
 | |
| 		height: 3.5em;
 | |
| 		letter-spacing: _font(letter-spacing);
 | |
| 		line-height: 3.45em;
 | |
| 		overflow: hidden;
 | |
| 		padding: 0 1.25em 0 #{1.25em + _font(letter-spacing)};
 | |
| 		text-align: center;
 | |
| 		text-decoration: none;
 | |
| 		text-overflow: ellipsis;
 | |
| 		text-transform: uppercase;
 | |
| 		white-space: nowrap;
 | |
| 
 | |
| 		&.icon {
 | |
| 			&:before {
 | |
| 				margin-right: 0.5em;
 | |
| 			}
 | |
| 		}
 | |
| 
 | |
| 		&.fit {
 | |
| 			width: 100%;
 | |
| 		}
 | |
| 
 | |
| 		&:hover {
 | |
| 			color: _palette(accent1) !important;
 | |
| 			box-shadow: inset 0 0 0 (_size(border-width) * 2) _palette(accent1);
 | |
| 		}
 | |
| 
 | |
| 		&:active {
 | |
| 			background-color: transparentize(_palette(accent1), 0.9);
 | |
| 		}
 | |
| 
 | |
| 		&.small {
 | |
| 			font-size: 0.6em;
 | |
| 		}
 | |
| 
 | |
| 		&.large {
 | |
| 			font-size: 1em;
 | |
| 		}
 | |
| 
 | |
| 		&.primary {
 | |
| 			box-shadow: none;
 | |
| 			background-color: _palette(fg);
 | |
| 			color: _palette(bg) !important;
 | |
| 
 | |
| 			&:hover {
 | |
| 				background-color: _palette(accent1);
 | |
| 			}
 | |
| 
 | |
| 			&:active {
 | |
| 				background-color: darken(_palette(accent1), 8);
 | |
| 			}
 | |
| 		}
 | |
| 
 | |
| 		&.disabled,
 | |
| 		&:disabled {
 | |
| 			@include vendor('pointer-events', 'none');
 | |
| 			opacity: 0.25;
 | |
| 		}
 | |
| 	} |