Includes (js, css to public)
This commit is contained in:
		
							
								
								
									
										69
									
								
								public/Elementum/scss/elements/_buttons.scss
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										69
									
								
								public/Elementum/scss/elements/_buttons.scss
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,69 @@
 | 
			
		||||
.button{
 | 
			
		||||
	background-color: $secondary-color;
 | 
			
		||||
	border: 0;
 | 
			
		||||
	border-radius: $control-border-radius;
 | 
			
		||||
	color: $base-font-color;
 | 
			
		||||
	padding: $control-padding-y $control-padding-x;
 | 
			
		||||
	transition: background-color .15s;
 | 
			
		||||
	height: 2.5rem;
 | 
			
		||||
	display: inline-block;
 | 
			
		||||
	line-height: 1.5;
 | 
			
		||||
	font-size: 1rem;
 | 
			
		||||
	font-weight: 500;
 | 
			
		||||
	cursor: pointer;
 | 
			
		||||
	text-decoration: none;
 | 
			
		||||
 | 
			
		||||
	&:hover{
 | 
			
		||||
		color: $base-font-color;
 | 
			
		||||
		background-color: $secondary-color-dark;
 | 
			
		||||
	}
 | 
			
		||||
	&:active{
 | 
			
		||||
		background-color: $secondary-color-dark;
 | 
			
		||||
	}
 | 
			
		||||
	&:focus{
 | 
			
		||||
		box-shadow: 0 0 3px $control-focus-color;
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.button.is-small{
 | 
			
		||||
	padding: $control-padding-y $control-padding-x/1.5;
 | 
			
		||||
	height: 2rem;
 | 
			
		||||
	font-size: .875rem;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.button.is-large{
 | 
			
		||||
	height: 3rem;
 | 
			
		||||
	font-size: 1.25rem;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.buttons .button{
 | 
			
		||||
	margin-right: .25rem;
 | 
			
		||||
	margin-bottom: .25rem;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.button.is-primary{
 | 
			
		||||
	background-color: $primary-color;
 | 
			
		||||
	color: white;
 | 
			
		||||
 | 
			
		||||
	&:hover{
 | 
			
		||||
		color: white;
 | 
			
		||||
		background-color: $primary-color-dark;
 | 
			
		||||
	}
 | 
			
		||||
	&:active{
 | 
			
		||||
		background-color: $primary-color-dark;
 | 
			
		||||
	}
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.button.is-danger{
 | 
			
		||||
	background-color: map-get($red-colors , '100');
 | 
			
		||||
	color: map-get($red-colors , '500');
 | 
			
		||||
 | 
			
		||||
	&:hover{
 | 
			
		||||
		background-color: map-get($red-colors , '200');
 | 
			
		||||
		color: map-get($red-colors , '600');
 | 
			
		||||
	}
 | 
			
		||||
	&:active{
 | 
			
		||||
		background-color: map-get($red-colors , '200');
 | 
			
		||||
		color: map-get($red-colors , '600');
 | 
			
		||||
	}
 | 
			
		||||
}
 | 
			
		||||
		Reference in New Issue
	
	Block a user