Melvin Valster
77 lines
1.0 KiB
SCSS
77 lines
1.0 KiB
SCSS
@import "sass/config";
|
|
|
|
body {
|
|
background-color: #111;
|
|
font-family: Verdana;
|
|
}
|
|
|
|
.calculator {
|
|
&__points {
|
|
color: white;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.trees {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.tree {
|
|
position: relative;
|
|
min-width: 300px;
|
|
color: white;
|
|
margin-right: 1em;
|
|
background-color: #111;
|
|
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
|
|
&__header {
|
|
text-align: center;
|
|
|
|
h3 {
|
|
margin-top: .75em;
|
|
margin-bottom: .75em;
|
|
}
|
|
}
|
|
|
|
&__body {
|
|
position: relative;
|
|
height: 520px;
|
|
border: 1px solid black;
|
|
background-size: cover;
|
|
background-position: center;
|
|
}
|
|
}
|
|
|
|
.class-picker {
|
|
display: flex;
|
|
justify-content: center;
|
|
list-style: none;
|
|
margin-top: 2em;
|
|
margin-bottom: 2em;
|
|
|
|
&__class {
|
|
margin-right: 1em;
|
|
opacity: .8;
|
|
transition: all .1s ease-out;
|
|
|
|
&:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
&--active {
|
|
opacity: 1;
|
|
}
|
|
|
|
&--inactive {
|
|
opacity: .4;
|
|
|
|
&:hover {
|
|
opacity: .5;
|
|
}
|
|
}
|
|
}
|
|
} |