p5.js-web-editor/styles/components/_preferences.scss

63 lines
1.3 KiB
SCSS
Raw Normal View History

2016-06-17 19:37:29 +02:00
.preferences {
background-color: $light-preferences-background-color;
2016-06-17 19:37:29 +02:00
display: none;
2016-06-20 18:45:15 +02:00
font-family: 'Montserrat', sans-serif;
2016-06-20 20:58:15 +02:00
padding-bottom: #{20 / $base-font-size}rem;
2016-06-17 20:31:33 +02:00
&--selected {
display: flex;
2016-06-20 20:58:15 +02:00
flex-direction: column;
2016-06-17 20:31:33 +02:00
}
2016-06-17 19:37:29 +02:00
}
2016-06-17 20:31:33 +02:00
.preferences__exit-button {
@extend %preferences-button;
2016-06-17 20:31:33 +02:00
margin-left: auto;
background-color: $light-preferences-background-color;
&:hover {
background-color: $light-preferences-background-color;
}
2016-06-17 19:37:29 +02:00
}
2016-06-20 18:45:15 +02:00
2016-06-20 21:23:42 +02:00
.preference__plus-button {
2016-06-20 20:58:15 +02:00
@extend %preferences-button;
margin-right: auto;
}
2016-06-20 21:23:42 +02:00
.preference__minus-button {
2016-06-20 20:58:15 +02:00
@extend %preferences-button;
}
.preferences__heading {
display: flex;
flex-direction: rows;
2016-06-20 18:45:15 +02:00
margin-left: #{20 / $base-font-size}rem;
2016-06-20 20:58:15 +02:00
}
2016-06-20 21:23:42 +02:00
.preferences__title {
2016-06-20 20:58:15 +02:00
margin: 0 0;
font-size: #{$menu-font-size}px;
2016-06-20 19:00:25 +02:00
font-weight: 700;
2016-06-20 18:45:15 +02:00
height: #{44 / $base-font-size}rem;
line-height: #{44 / $base-font-size}rem;
}
2016-06-20 20:58:15 +02:00
.preference {
margin: 0 #{20 / $base-font-size}rem;
}
2016-06-20 21:23:42 +02:00
.preference__title {
2016-06-20 20:58:15 +02:00
margin: 0 0;
font-size: #{$base-font-size}px;
font-weight: 400;
height: #{44 / $base-font-size}rem;
line-height: #{44 / $base-font-size}rem;
}
.preference__value {
@extend %button;
border-radius: 0%;
border: 2px solid $light-preferences-button-color;
line-height: #{44 / $base-font-size}rem;
margin: 0 #{20 / $base-font-size}rem;
}