Standardizing bracket syntax
This commit is contained in:
@ -1,5 +1,5 @@
|
||||
|
||||
@include responsive( $bp_medium ){
|
||||
@include responsive($bp_medium){
|
||||
body.context-menu-open {
|
||||
.body {
|
||||
@include blur(10px);
|
||||
@ -51,7 +51,7 @@
|
||||
background: -o-linear-gradient(45deg, rgba(50,181,242,1) 0%, rgba(50,181,242,1) 18%, rgba(5,118,166,1) 100%);
|
||||
background: -ms-linear-gradient(45deg, rgba(50,181,242,1) 0%, rgba(50,181,242,1) 18%, rgba(5,118,166,1) 100%);
|
||||
background: linear-gradient(45deg, rgba(50,181,242,1) 0%, rgba(50,181,242,1) 18%, rgba(5,118,166,1) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#32b5f2', endColorstr='#0576a6', GradientType=1 );
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#32b5f2', endColorstr='#0576a6', GradientType=1 );
|
||||
}
|
||||
}
|
||||
|
||||
@ -214,7 +214,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@include responsive( null, $bp_medium ){
|
||||
@include responsive(null, $bp_medium){
|
||||
.liner {
|
||||
.title {
|
||||
display: none;
|
||||
@ -222,7 +222,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@include responsive( $bp_medium ){
|
||||
@include responsive($bp_medium){
|
||||
top: 0 !important;
|
||||
right: 0 !important;
|
||||
bottom: 0 !important;
|
||||
@ -344,7 +344,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@include responsive( $bp_medium ){
|
||||
@include responsive($bp_medium){
|
||||
.context-menu-trigger {
|
||||
bottom: 8px;
|
||||
right: 43px;
|
||||
|
||||
@ -52,13 +52,13 @@
|
||||
}
|
||||
}
|
||||
|
||||
@include responsive( $bp_medium ){
|
||||
@include responsive($bp_medium){
|
||||
.grid-slider {
|
||||
height: 23vw;
|
||||
}
|
||||
}
|
||||
|
||||
@include responsive( 500px ){
|
||||
@include responsive(500px){
|
||||
.grid-slider {
|
||||
height: 40vw;
|
||||
|
||||
|
||||
@ -64,7 +64,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@include responsive( null, $bp_wide ){
|
||||
@include responsive(null, $bp_wide){
|
||||
.grid-item {
|
||||
.name {
|
||||
font-size: 16px;
|
||||
@ -73,10 +73,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
@include responsive( null, 1900px ){
|
||||
@include responsive(null, 1900px){
|
||||
&.mini {
|
||||
.grid-item {
|
||||
@include grid_item( 3 )
|
||||
@include grid_item(3 )
|
||||
}
|
||||
&.single-row {
|
||||
.grid-item:nth-child(1n+4){
|
||||
@ -86,7 +86,7 @@
|
||||
}
|
||||
&:not(.mini){
|
||||
.grid-item {
|
||||
@include grid_item( 5 )
|
||||
@include grid_item(5 )
|
||||
}
|
||||
&.single-row {
|
||||
.grid-item:nth-child(1n+6){
|
||||
@ -96,10 +96,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
@include responsive( 1899px, 1200px ){
|
||||
@include responsive(1899px, 1200px){
|
||||
&.mini {
|
||||
.grid-item {
|
||||
@include grid_item( 2 )
|
||||
@include grid_item(2 )
|
||||
}
|
||||
&.single-row {
|
||||
.grid-item:nth-child(1n+3){
|
||||
@ -109,7 +109,7 @@
|
||||
}
|
||||
&:not(.mini){
|
||||
.grid-item {
|
||||
@include grid_item( 4 )
|
||||
@include grid_item(4 )
|
||||
}
|
||||
&.single-row {
|
||||
.grid-item:nth-child(1n+5){
|
||||
@ -119,10 +119,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
@include responsive( 1199px, 800px ){
|
||||
@include responsive(1199px, 800px){
|
||||
&.mini {
|
||||
.grid-item {
|
||||
@include grid_item( 2 )
|
||||
@include grid_item(2 )
|
||||
}
|
||||
&.single-row {
|
||||
.grid-item:nth-child(1n+3){
|
||||
@ -132,7 +132,7 @@
|
||||
}
|
||||
&:not(.mini){
|
||||
.grid-item {
|
||||
@include grid_item( 4 )
|
||||
@include grid_item(4 )
|
||||
}
|
||||
&.single-row {
|
||||
.grid-item:nth-child(1n+5){
|
||||
@ -142,10 +142,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
@include responsive( 799px, 500px ){
|
||||
@include responsive(799px, 500px){
|
||||
&.mini{
|
||||
.grid-item {
|
||||
@include grid_item( 6, 2%, 4% )
|
||||
@include grid_item(6, 2%, 4% )
|
||||
}
|
||||
&.single-row {
|
||||
.grid-item:nth-child(1n+7){
|
||||
@ -155,7 +155,7 @@
|
||||
}
|
||||
&:not(.mini){
|
||||
.grid-item {
|
||||
@include grid_item( 3, 2%, 4% )
|
||||
@include grid_item(3, 2%, 4% )
|
||||
}
|
||||
&.single-row {
|
||||
.grid-item:nth-child(1n+4){
|
||||
@ -165,10 +165,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
@include responsive( 499px ){
|
||||
@include responsive(499px){
|
||||
&.mini{
|
||||
.grid-item {
|
||||
@include grid_item( 3, 2%, 4% )
|
||||
@include grid_item(3, 2%, 4% )
|
||||
}
|
||||
&.single-row {
|
||||
.grid-item:nth-child(1n+4){
|
||||
@ -178,7 +178,7 @@
|
||||
}
|
||||
&:not(.mini){
|
||||
.grid-item {
|
||||
@include grid_item( 2, 2%, 4% )
|
||||
@include grid_item(2, 2%, 4% )
|
||||
}
|
||||
&.single-row {
|
||||
.grid-item:nth-child(1n+5){
|
||||
@ -252,21 +252,21 @@
|
||||
}
|
||||
}
|
||||
|
||||
@include responsive( null, $bp_medium ){
|
||||
@include responsive(null, $bp_medium){
|
||||
.tile {
|
||||
@include grid_item( 2 );
|
||||
@include grid_item(2 );
|
||||
}
|
||||
}
|
||||
|
||||
@include responsive( $bp_medium ){
|
||||
@include responsive($bp_medium){
|
||||
padding-bottom: 20px;
|
||||
|
||||
.tile {
|
||||
@include grid_item( 3 );
|
||||
@include grid_item(3 );
|
||||
}
|
||||
}
|
||||
|
||||
@include responsive( $bp_narrow ){
|
||||
@include responsive($bp_narrow){
|
||||
.tile {
|
||||
.text {
|
||||
font-size: 14px;
|
||||
|
||||
@ -60,7 +60,7 @@ main {
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
@include responsive( $bp_medium ){
|
||||
@include responsive($bp_medium){
|
||||
padding: 10px 10px 10px 0;
|
||||
margin-bottom: -20px;
|
||||
|
||||
|
||||
@ -271,7 +271,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@include responsive( $bp_medium ){
|
||||
@include responsive($bp_medium){
|
||||
|
||||
.list-item {
|
||||
padding: 12px !important;
|
||||
|
||||
@ -295,7 +295,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@include responsive( $bp_medium ){
|
||||
@include responsive($bp_medium){
|
||||
|
||||
.content {
|
||||
padding: 100px 10%;
|
||||
|
||||
@ -157,7 +157,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@include responsive( $bp_medium ){
|
||||
@include responsive($bp_medium){
|
||||
bottom: 60px;
|
||||
left: 10px;
|
||||
right: 10px;
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
|
||||
@include responsive( $bp_medium ){
|
||||
@include responsive($bp_medium){
|
||||
display: block;
|
||||
}
|
||||
|
||||
@ -35,7 +35,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.open) {
|
||||
&:not(.open){
|
||||
.close {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -99,7 +99,7 @@ aside{
|
||||
}
|
||||
}
|
||||
|
||||
@include responsive( $bp_medium ){
|
||||
@include responsive($bp_medium){
|
||||
@include animate(0.15s);
|
||||
width: 220px;
|
||||
left: -220px;
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@include responsive( $bp_medium ){
|
||||
@include responsive($bp_medium){
|
||||
.option {
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
@ -70,7 +70,7 @@ body {
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
@include responsive( $bp_medium ){
|
||||
@include responsive($bp_medium){
|
||||
&.context-menu-open {
|
||||
overflow-y: hidden;
|
||||
}
|
||||
@ -81,11 +81,11 @@ main,
|
||||
footer {
|
||||
margin-left: 220px;
|
||||
|
||||
@include responsive( null, null, $bp_shallow ){
|
||||
@include responsive(null, null, $bp_shallow){
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
|
||||
@include responsive( $bp_medium ){
|
||||
@include responsive($bp_medium){
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
@ -115,7 +115,7 @@ main {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
@include responsive( $bp_medium ){
|
||||
@include responsive($bp_medium){
|
||||
|
||||
.content-wrapper {
|
||||
padding: 20px 10px 60px;
|
||||
@ -232,7 +232,7 @@ button.placeholder {
|
||||
margin: 25px 40px;
|
||||
height: 10px;
|
||||
|
||||
@include responsive( $bp_medium ){
|
||||
@include responsive($bp_medium){
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
@ -397,7 +397,7 @@ footer {
|
||||
|
||||
|
||||
|
||||
@include responsive( $bp_medium ){
|
||||
@include responsive($bp_medium){
|
||||
|
||||
h1 {
|
||||
font-size: 1.8rem;
|
||||
|
||||
@ -171,7 +171,7 @@ input[type="submit"] {
|
||||
}
|
||||
}
|
||||
|
||||
@include responsive( $bp_medium ){
|
||||
@include responsive($bp_medium){
|
||||
margin-right: 10px;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
@ -284,7 +284,7 @@ input[type="submit"] {
|
||||
}
|
||||
}
|
||||
|
||||
@include responsive( $bp_medium ){
|
||||
@include responsive($bp_medium){
|
||||
.field {
|
||||
|
||||
.name {
|
||||
|
||||
@ -54,7 +54,7 @@ $bp_shallow: 650px;
|
||||
* General animations
|
||||
**/
|
||||
|
||||
@mixin animate( $duration: 0.2s, $easing: ease-in-out ){
|
||||
@mixin animate($duration: 0.2s, $easing: ease-in-out){
|
||||
-webkit-transition: all $duration $easing;
|
||||
-moz-transition: all $duration $easing;
|
||||
-o-transition: all $duration $easing;
|
||||
@ -73,7 +73,7 @@ $bp_shallow: 650px;
|
||||
to { width: 0%; }
|
||||
}
|
||||
|
||||
@mixin animate_timeout( $duration: 0.2s ){
|
||||
@mixin animate_timeout($duration: 0.2s){
|
||||
animation-name: shrink_from_right;
|
||||
animation-duration: $duration;
|
||||
animation-timing-function: linear;
|
||||
@ -84,7 +84,7 @@ $bp_shallow: 650px;
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@mixin spin( $duration: 0.5s ){
|
||||
@mixin spin($duration: 0.5s){
|
||||
animation-name: spin;
|
||||
animation-duration: $duration;
|
||||
animation-timing-function: linear;
|
||||
@ -97,7 +97,7 @@ $bp_shallow: 650px;
|
||||
100% { opacity: 0; }
|
||||
}
|
||||
|
||||
@mixin pulse( $duration: 0.5s ){
|
||||
@mixin pulse($duration: 0.5s){
|
||||
animation-name: pulse;
|
||||
animation-duration: $duration;
|
||||
animation-timing-function: linear;
|
||||
@ -109,7 +109,7 @@ $bp_shallow: 650px;
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
|
||||
@mixin fadein( $duration: 0.2s ){
|
||||
@mixin fadein($duration: 0.2s){
|
||||
animation-name: fadein;
|
||||
animation-duration: $duration;
|
||||
animation-timing-function: linear;
|
||||
@ -128,17 +128,17 @@ $bp_shallow: 650px;
|
||||
* Produces most album/playlist/artist grids
|
||||
**/
|
||||
|
||||
@mixin grid_item( $cols, $gap: 2%, $bottom_margin: 3% ){
|
||||
width: ( 0% + ( 100 / $cols ) - ( $gap * 2 ) + ( ( $gap * 2 ) / $cols ) );
|
||||
@mixin grid_item($cols, $gap: 2%, $bottom_margin: 3%){
|
||||
width: (0% + (100 / $cols ) - ($gap * 2 ) + (($gap * 2 ) / $cols ) );
|
||||
box-sizing: border-box;
|
||||
margin: 0 $gap $bottom_margin;
|
||||
|
||||
&:nth-child(#{$cols}n-#{$cols}) {
|
||||
&:nth-child(#{$cols}n-#{$cols}){
|
||||
margin-right: 0;
|
||||
@include clearfix;
|
||||
}
|
||||
|
||||
&:nth-child(#{$cols}n-#{$cols - 1}) {
|
||||
&:nth-child(#{$cols}n-#{$cols - 1}){
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
@ -149,37 +149,37 @@ $bp_shallow: 650px;
|
||||
* Creates @media wrappers
|
||||
**/
|
||||
|
||||
@mixin responsive( $max_width: null, $min_width: null, $max_height: null, $min_height: null ){
|
||||
@mixin responsive($max_width: null, $min_width: null, $max_height: null, $min_height: null){
|
||||
@if $max_width and $max_height {
|
||||
@media( max-width: $max_width ), ( max-height: $max_height ){
|
||||
@media(max-width: $max_width ), (max-height: $max_height){
|
||||
@content;
|
||||
}
|
||||
}@else if $max_width and $min_width {
|
||||
@media( max-width: $max_width ) and ( min-width: $min_width ){
|
||||
@media(max-width: $max_width ) and (min-width: $min_width){
|
||||
@content;
|
||||
}
|
||||
}@else if $max_width {
|
||||
@media( max-width: $max_width ){
|
||||
@media(max-width: $max_width){
|
||||
@content;
|
||||
}
|
||||
}@else if $max_height {
|
||||
@media( max-height: $max_height ){
|
||||
@media(max-height: $max_height){
|
||||
@content;
|
||||
}
|
||||
}@else if $min_width {
|
||||
@media( min-width: $min_width ){
|
||||
@media(min-width: $min_width){
|
||||
@content;
|
||||
}
|
||||
}@else if $min_height {
|
||||
@media( min-height: $min_height ){
|
||||
@media(min-height: $min_height){
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin blur( $size: 10px ) {
|
||||
-webkit-filter: blur( $size );
|
||||
filter: blur( $size );
|
||||
@mixin blur($size: 10px ){
|
||||
-webkit-filter: blur($size );
|
||||
filter: blur($size );
|
||||
}
|
||||
|
||||
@mixin feature_font(){
|
||||
|
||||
6
src/scss/vendor/font-awesome/_mixins.scss
vendored
6
src/scss/vendor/font-awesome/_mixins.scss
vendored
@ -1,7 +1,7 @@
|
||||
// Mixins
|
||||
// --------------------------
|
||||
|
||||
@mixin fa-icon() {
|
||||
@mixin fa-icon(){
|
||||
display: inline-block;
|
||||
font: normal normal normal #{$fa-font-size-base}/#{$fa-line-height-base} FontAwesome; // shortening font declaration
|
||||
font-size: inherit; // can't have font-size inherit on line above, so need to override
|
||||
@ -11,14 +11,14 @@
|
||||
|
||||
}
|
||||
|
||||
@mixin fa-icon-rotate($degrees, $rotation) {
|
||||
@mixin fa-icon-rotate($degrees, $rotation){
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation})";
|
||||
-webkit-transform: rotate($degrees);
|
||||
-ms-transform: rotate($degrees);
|
||||
transform: rotate($degrees);
|
||||
}
|
||||
|
||||
@mixin fa-icon-flip($horiz, $vert, $rotation) {
|
||||
@mixin fa-icon-flip($horiz, $vert, $rotation){
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation}, mirror=1)";
|
||||
-webkit-transform: scale($horiz, $vert);
|
||||
-ms-transform: scale($horiz, $vert);
|
||||
|
||||
@ -32,7 +32,7 @@ main .album-view {
|
||||
}
|
||||
}
|
||||
|
||||
@include responsive( $bp_medium ){
|
||||
@include responsive($bp_medium){
|
||||
padding-top: 0;
|
||||
padding-left: 10px;
|
||||
|
||||
@ -63,7 +63,7 @@ main .album-view {
|
||||
}
|
||||
}
|
||||
|
||||
@include responsive( $bp_small ){
|
||||
@include responsive($bp_small){
|
||||
.title {
|
||||
@include clearfix();
|
||||
padding: 20px 20px 10px 40%;
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
|
||||
.artist-view {
|
||||
|
||||
.body-loader:not(.lazy-loader) {
|
||||
.body-loader:not(.lazy-loader){
|
||||
padding: 15vh 0;
|
||||
}
|
||||
|
||||
@ -54,7 +54,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@include responsive( $bp_wide ){
|
||||
@include responsive($bp_wide){
|
||||
.intro {
|
||||
.liner {
|
||||
h1 {
|
||||
@ -65,7 +65,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@include responsive( $bp_medium ){
|
||||
@include responsive($bp_medium){
|
||||
.intro {
|
||||
margin-bottom: 0;
|
||||
|
||||
|
||||
@ -150,7 +150,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@include responsive( $bp_medium ){
|
||||
@include responsive($bp_medium){
|
||||
.intro {
|
||||
padding-top: 50px;
|
||||
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@include responsive( $bp_wide ){
|
||||
@include responsive($bp_wide){
|
||||
|
||||
.albums-detail-subview > .album {
|
||||
.thumbnail {
|
||||
@ -34,7 +34,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@include responsive( 600px ){
|
||||
@include responsive(600px){
|
||||
|
||||
.albums-detail-subview {
|
||||
padding: 20px 0;
|
||||
|
||||
@ -32,7 +32,7 @@ main .playlist-view {
|
||||
}
|
||||
}
|
||||
|
||||
@include responsive( $bp_medium ){
|
||||
@include responsive($bp_medium){
|
||||
padding-top: 0;
|
||||
padding-left: 10px;
|
||||
|
||||
@ -63,7 +63,7 @@ main .playlist-view {
|
||||
}
|
||||
}
|
||||
|
||||
@include responsive( $bp_small ){
|
||||
@include responsive($bp_small){
|
||||
.title {
|
||||
@include clearfix();
|
||||
padding: 20px 20px 10px 40%;
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
border-radius: 0;
|
||||
|
||||
/* handle Safari's ridiculous non-vertical centering */
|
||||
&:not(:root:root) {
|
||||
&:not(:root:root){
|
||||
height: 4rem;
|
||||
margin-top: -1rem;
|
||||
}
|
||||
@ -38,7 +38,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@include responsive( $bp_medium ){
|
||||
@include responsive($bp_medium){
|
||||
|
||||
.search-form {
|
||||
top: 18px;
|
||||
|
||||
@ -106,7 +106,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@include responsive( $bp_medium ){
|
||||
@include responsive($bp_medium){
|
||||
.intro {
|
||||
.liner {
|
||||
padding: 15vh 20px 0;
|
||||
@ -158,7 +158,7 @@
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
@include responsive( $bp_medium ){
|
||||
@include responsive($bp_medium){
|
||||
section {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
@ -38,7 +38,7 @@ main .track-view {
|
||||
}
|
||||
}
|
||||
|
||||
@include responsive( $bp_medium ){
|
||||
@include responsive($bp_medium){
|
||||
padding-top: 0;
|
||||
padding-left: 10px;
|
||||
|
||||
@ -69,7 +69,7 @@ main .track-view {
|
||||
}
|
||||
}
|
||||
|
||||
@include responsive( $bp_small ){
|
||||
@include responsive($bp_small){
|
||||
.title {
|
||||
@include clearfix();
|
||||
padding: 20px 20px 10px 40%;
|
||||
|
||||
@ -30,7 +30,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@include responsive( $bp_medium ){
|
||||
@include responsive($bp_medium){
|
||||
.intro {
|
||||
|
||||
.thumbnail {
|
||||
|
||||
Reference in New Issue
Block a user