diff --git a/src/js/views/Search.js b/src/js/views/Search.js index ce4e9696..244ce02b 100755 --- a/src/js/views/Search.js +++ b/src/js/views/Search.js @@ -183,7 +183,7 @@ class Search extends React.Component{
-

Tracks

+

Tracks

this.loadMore('tracks') }/>
diff --git a/src/scss/components/_sidebar.scss b/src/scss/components/_sidebar.scss index 9fad7dd0..73cfd64d 100755 --- a/src/scss/components/_sidebar.scss +++ b/src/scss/components/_sidebar.scss @@ -71,14 +71,16 @@ aside{ padding-top: 8px; a { - @include animate(); @include feature_font(); + @include gradient_overlay(); font-weight: 800; font-size: 15px; - color: $black; + color: $darkest_grey; text-decoration: none; display: block; - padding: 6px 25px; + padding: 8px 10px 6px; + margin: 0 15px; + border-radius: 3px; .icon { height: 14px; @@ -88,11 +90,16 @@ aside{ } &.active { - color: $turquoise; + background: $turquoise; + color: $white; opacity: 1 !important; - .icon { + &:before { + opacity: 0.15; + } + .icon { + @include invert(); } } @@ -101,8 +108,10 @@ aside{ cursor: not-allowed; } - &:hover:not([disabled]) { - opacity: 0.65; + &:hover:not([disabled]){ + &:before { + opacity: 0.15; + } } } diff --git a/src/scss/global/_core.scss b/src/scss/global/_core.scss index 5fef261e..fd1a643c 100755 --- a/src/scss/global/_core.scss +++ b/src/scss/global/_core.scss @@ -65,11 +65,6 @@ main { @include responsive( $bp_medium ){ - section.grid-wrapper, - section.text-wrapper { - padding: 20px; - } - section.list-wrapper { padding: 10px 0; } diff --git a/src/scss/global/_forms.scss b/src/scss/global/_forms.scss index a7070b32..17356136 100755 --- a/src/scss/global/_forms.scss +++ b/src/scss/global/_forms.scss @@ -45,6 +45,7 @@ input[type="button"], input[type="submit"] { @include animate(); @include feature_font(); + @include gradient_overlay(); display: inline-block; padding: 9px 30px 7px; margin: 0 20px 10px 0; @@ -57,23 +58,6 @@ input[type="submit"] { position: relative; border: 0 !important; - &:before { - @include animate(); - content: ''; - display: block; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - opacity: 0; - z-index: 9; - background: -webkit-linear-gradient(to bottom right, rgba(255,255,255,1), rgba(0,0,0,0.5)); - background: -moz-linear-gradient(to bottom right, rgba(255,255,255,1), rgba(0,0,0,0.5)); - background: -o-linear-gradient(to bottom right, rgba(255,255,255,1), rgba(0,0,0,0.5)); - background: linear-gradient(to bottom right, rgba(255,255,255,1), rgba(0,0,0,0.5)); - } - &:hover{ cursor: pointer; box-shadow: 1px 2px 6px rgba(0,0,0,0.2); diff --git a/src/scss/global/_variables.scss b/src/scss/global/_variables.scss index 5bc33e20..5e41b514 100755 --- a/src/scss/global/_variables.scss +++ b/src/scss/global/_variables.scss @@ -113,11 +113,6 @@ $bp_shallow: 650px; animation-iteration-count: 1; } -@mixin blur( $size: 10px ) { - -webkit-filter: blur( $size ); - filter: blur( $size ); -} - @keyframes slideloader { 0% { left: 0%; right: 100%; } 50% { left: 0%; right: 0%; } @@ -179,8 +174,39 @@ $bp_shallow: 650px; } } +@mixin blur( $size: 10px ) { + -webkit-filter: blur( $size ); + filter: blur( $size ); +} + @mixin feature_font(){ font-family: "Overpass"; letter-spacing: -0.04em; font-weight: 600; } + +@mixin invert(){ + -webkit-filter: invert(1); + filter: invert(1); +} + +@mixin gradient_overlay(){ + position: relative; + + &:before { + @include animate(); + content: ''; + display: block; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + opacity: 0; + z-index: 9; + background: -webkit-linear-gradient(to bottom right, rgba(255,255,255,1), rgba(0,0,0,0.5)); + background: -moz-linear-gradient(to bottom right, rgba(255,255,255,1), rgba(0,0,0,0.5)); + background: -o-linear-gradient(to bottom right, rgba(255,255,255,1), rgba(0,0,0,0.5)); + background: linear-gradient(to bottom right, rgba(255,255,255,1), rgba(0,0,0,0.5)); + } +} diff --git a/src/scss/views/_discover.scss b/src/scss/views/_discover.scss index 9c3c39b3..e09f9650 100755 --- a/src/scss/views/_discover.scss +++ b/src/scss/views/_discover.scss @@ -3,7 +3,7 @@ .intro { position: relative; - padding: 100px 40px 60px 40px; + padding: 160px 40px 80px 40px; z-index: 1; .parallax { @@ -50,6 +50,7 @@ position: relative; vertical-align: top; margin: 0 10px 10px 0; + border-radius: 3px; .type { display: inline-block; diff --git a/src/scss/views/_search.scss b/src/scss/views/_search.scss index f8ab368e..2d25069d 100755 --- a/src/scss/views/_search.scss +++ b/src/scss/views/_search.scss @@ -2,11 +2,8 @@ .search-view { .search-result-sections { - padding: 20px 20px 0; - section { .inner { - padding: 10px 20px 0 20px; } } }