Standardizing bracket syntax

This commit is contained in:
James Barnsley
2017-10-10 13:05:28 +13:00
parent 0ca37b0f62
commit 2ffa337ffa
116 changed files with 7451 additions and 3246 deletions

View File

@ -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;

View File

@ -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;

View File

@ -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;

View File

@ -60,7 +60,7 @@ main {
z-index: 99;
}
@include responsive( $bp_medium ){
@include responsive($bp_medium){
padding: 10px 10px 10px 0;
margin-bottom: -20px;

View File

@ -271,7 +271,7 @@
}
}
@include responsive( $bp_medium ){
@include responsive($bp_medium){
.list-item {
padding: 12px !important;

View File

@ -295,7 +295,7 @@
}
}
@include responsive( $bp_medium ){
@include responsive($bp_medium){
.content {
padding: 100px 10%;

View File

@ -157,7 +157,7 @@
}
}
@include responsive( $bp_medium ){
@include responsive($bp_medium){
bottom: 60px;
left: 10px;
right: 10px;

View File

@ -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;
}

View File

@ -99,7 +99,7 @@ aside{
}
}
@include responsive( $bp_medium ){
@include responsive($bp_medium){
@include animate(0.15s);
width: 220px;
left: -220px;

View File

@ -23,7 +23,7 @@
}
}
@include responsive( $bp_medium ){
@include responsive($bp_medium){
.option {
margin-right: 15px;
}

View File

@ -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;

View File

@ -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 {

View File

@ -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(){

View File

@ -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);

View File

@ -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%;

View File

@ -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;

View File

@ -150,7 +150,7 @@
}
}
@include responsive( $bp_medium ){
@include responsive($bp_medium){
.intro {
padding-top: 50px;

View File

@ -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;

View File

@ -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%;

View File

@ -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;

View File

@ -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;
}

View File

@ -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%;

View File

@ -30,7 +30,7 @@
}
}
@include responsive( $bp_medium ){
@include responsive($bp_medium){
.intro {
.thumbnail {