277 lines
3.6 KiB
SCSS
Executable File
277 lines
3.6 KiB
SCSS
Executable File
|
|
.discover-view {
|
|
|
|
.intro {
|
|
padding: 90px 40px 40px;
|
|
position: relative;
|
|
z-index: 96;
|
|
|
|
&__liner {
|
|
z-index: 2;
|
|
position: relative;
|
|
color: colour(white);
|
|
|
|
h1 {
|
|
font-size: 3rem;
|
|
line-height: 3rem;
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
h2 {
|
|
padding-bottom: 8px;
|
|
color: colour(mid_grey);
|
|
}
|
|
}
|
|
|
|
&__parameters {
|
|
@include clearfix();
|
|
padding-top: 40px;
|
|
|
|
.seeds,
|
|
.tunabilities {
|
|
float: left;
|
|
}
|
|
}
|
|
|
|
&__actions {
|
|
padding-top: 20px;
|
|
|
|
.autocomplete-field {
|
|
width: 250px;
|
|
display: inline-block;
|
|
vertical-align: bottom;
|
|
padding: 0;
|
|
margin-right: 1px;
|
|
|
|
.input {
|
|
float: none;
|
|
margin: 0 10px 10px 0;
|
|
|
|
input {
|
|
background: rgba(100,100,100,0.5);
|
|
color: colour(white);
|
|
padding: 15px 13px 10px;
|
|
font-size: 16px;
|
|
border: 1px solid transparent;
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
|
|
&:focus,
|
|
&:active {
|
|
border-color: colour(blue);
|
|
}
|
|
|
|
&:not(*:root){
|
|
padding-top: 16px;
|
|
padding-bottom: 11px;
|
|
}
|
|
}
|
|
|
|
&:after {
|
|
background: colour(blue);
|
|
}
|
|
}
|
|
|
|
.results {
|
|
top: 49px;
|
|
}
|
|
}
|
|
|
|
.dropdown-field {
|
|
.button {
|
|
background: rgba(100,100,100,0.5);
|
|
color: colour(white);
|
|
padding: 16px 20px 14px 20px;
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
}
|
|
|
|
.options {
|
|
top: 50px;
|
|
right: 20px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.seeds {
|
|
.seed {
|
|
color: colour(white);
|
|
padding: 0 30px 30px 0;
|
|
float: left;
|
|
|
|
.thumbnail-wrapper {
|
|
float: left;
|
|
width: 44px;
|
|
border: 0 !important;
|
|
}
|
|
|
|
.label {
|
|
.remove {
|
|
@include animate();
|
|
cursor: pointer;
|
|
font-size: 10px;
|
|
padding: 4px;
|
|
margin-left: 4px;
|
|
|
|
&:hover {
|
|
color: colour(red);
|
|
}
|
|
}
|
|
}
|
|
|
|
.name {
|
|
font-size: 16px;
|
|
padding-top: 3px;
|
|
}
|
|
|
|
&.has-thumbnail {
|
|
.label,
|
|
.name {
|
|
padding-left: 52px;
|
|
}
|
|
}
|
|
|
|
.light-theme & {
|
|
color: colour(darkest_grey);
|
|
}
|
|
}
|
|
}
|
|
|
|
.tunabilities {
|
|
@include clearfix();
|
|
|
|
.tunability {
|
|
width: 200px;
|
|
float: left;
|
|
box-sizing: border-box;
|
|
padding: 0 30px 30px 0;
|
|
position: relative;
|
|
|
|
.input {
|
|
float: none;
|
|
width: 100%;
|
|
padding-top: 4px;
|
|
}
|
|
|
|
.input-range {
|
|
.input-range__label-container {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.remove {
|
|
@include animate();
|
|
cursor: pointer;
|
|
font-size: 10px;
|
|
padding: 4px;
|
|
margin-left: 4px;
|
|
|
|
&:hover {
|
|
color: colour(red);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
section {
|
|
.grid {
|
|
padding-bottom: 20px;
|
|
}
|
|
|
|
&.tracks {
|
|
h4 {
|
|
@include clearfix();
|
|
}
|
|
|
|
.pull-right {
|
|
.button,
|
|
button {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include responsive($bp_medium){
|
|
|
|
.intro {
|
|
padding: 40px 20px;
|
|
|
|
&__parameters {
|
|
padding-top: 10px;
|
|
|
|
.seeds {
|
|
padding-top: 20px;
|
|
float: none;
|
|
|
|
.seed {
|
|
float: none;
|
|
}
|
|
}
|
|
|
|
.tunabilities {
|
|
float: none;
|
|
|
|
.tunability {
|
|
width: 100%;
|
|
float: none;
|
|
}
|
|
}
|
|
|
|
.add {
|
|
.add-properties {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__actions {
|
|
padding-top: 0;
|
|
|
|
.add-seed-field {
|
|
width: 69%;
|
|
}
|
|
|
|
.add-properties {
|
|
width: 30%;
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.col {
|
|
&.tracks {
|
|
width: 100%;
|
|
}
|
|
|
|
&.others,
|
|
&.w5 {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.discover-featured-view,
|
|
.discover-new-releases-view {
|
|
.intro {
|
|
position: relative;
|
|
padding-top: 100px;
|
|
|
|
header {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.parallax {
|
|
height: 30vh;
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
@include responsive($bp_medium){
|
|
.intro {
|
|
padding-top: 50px;
|
|
}
|
|
}
|
|
} |