vuejs-playground/scss/app.scss

@import url(./vendor/normalize.css);

@import '_settings';

h1 {
	margin: .67em;
}


body {
    font-family: $body-font-family;
    background: $light-gray;
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}


div {
    background: #ffffff;
		border-left: 5px solid $primary-color;
    padding: 15px 15px 15px 15px;
    margin: 10px 10px 10px 10px;
    box-shadow: 0 1px 1px 0 rgba(50,50,50,0.15);
}

input {
    display: block;
		margin-bottom: .67em;
		padding-left: .67em;
		padding: 5px;
		font-size: 1rem;
}

select {
	margin-bottom: .67em;
}

.btn {
	padding: 10px 15px 10px 15px;
	background-color: $primary-color;
	border-radius: 3px;
	color: $white;
	border: none;

	&:hover {

		background-color: lighten($primary-color, 20%);
		transition: all 300ms ease-in-out;

		&:active{
			transition: transform 300ms ease;
			transform: scale(1.1);
		}

	}

}