From 035bde9effe9cb55b2d95e5181c8b9ed615967cc Mon Sep 17 00:00:00 2001 From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com> Date: Mon, 20 Apr 2020 15:00:17 +0200 Subject: [PATCH] Define breakpoints in mixin and refactor --- .../darkswarm/_shop-inputs.css.scss | 16 +++++++------- .../darkswarm/_shop-navigation.css.scss | 19 +++++++++-------- .../darkswarm/_shop-popovers.css.scss | 2 +- .../darkswarm/_shop-product-rows.css.scss | 21 ++++++++++--------- .../darkswarm/_shop-product-thumb.css.scss | 5 +++-- .../darkswarm/_shop-taxon-flag.css.scss | 8 ++++--- .../darkswarm/active_table.css.scss | 6 +++--- .../darkswarm/active_table_search.css.scss | 2 +- .../stylesheets/darkswarm/big-input.scss | 2 +- .../stylesheets/darkswarm/checkout.css.scss | 4 ++-- .../darkswarm/distributor_header.css.scss | 5 +++-- .../darkswarm/embedded_shopfront.css.scss | 5 +++-- .../stylesheets/darkswarm/home_panes.css.scss | 6 +++--- .../stylesheets/darkswarm/hub_node.css.scss | 14 ++++++------- .../stylesheets/darkswarm/images.css.scss | 4 ++-- app/assets/stylesheets/darkswarm/map.css.scss | 3 ++- app/assets/stylesheets/darkswarm/mixins.scss | 17 ++++++++++++++- .../darkswarm/modal-enterprises.css.scss | 4 ++-- .../stylesheets/darkswarm/page_alert.css.scss | 3 ++- .../darkswarm/producer_node.css.scss | 4 ++-- .../stylesheets/darkswarm/shop.css.scss | 16 +++++++------- .../stylesheets/darkswarm/shop_tabs.css.scss | 10 ++++----- .../stylesheets/darkswarm/tabset.css.scss | 12 +++++------ .../stylesheets/darkswarm/taxons.css.scss | 2 +- 24 files changed, 107 insertions(+), 83 deletions(-) diff --git a/app/assets/stylesheets/darkswarm/_shop-inputs.css.scss b/app/assets/stylesheets/darkswarm/_shop-inputs.css.scss index 9126dc56d7..59a3bd0c67 100644 --- a/app/assets/stylesheets/darkswarm/_shop-inputs.css.scss +++ b/app/assets/stylesheets/darkswarm/_shop-inputs.css.scss @@ -23,22 +23,22 @@ border-color: #b3b3b3; text-align: right; - @media all and (max-width: 1024px) { + @include breakpoint(desktop) { width: 8rem; } - @media all and (max-width: 768px) { + @include breakpoint(tablet) { width: 7rem; } - @media all and (max-width: 640px) { + @include breakpoint(phablet) { float: left !important; font-size: 0.75rem; padding-left: 0.25rem; padding-right: 0.25rem; } - @media all and (max-width: 480px) { + @include breakpoint(mobile) { width: 5.8rem; } @@ -62,15 +62,15 @@ input.bulk { width: 5rem; - @media all and (max-width: 1024px) { + @include breakpoint(desktop) { width: 4rem; } - @media all and (max-width: 768px) { + @include breakpoint(tablet) { width: 3.5rem; } - @media all and (max-width: 480px) { + @include breakpoint(mobile) { width: 2.8rem; } } @@ -86,7 +86,7 @@ .bulk-input-container { float: right; - @media all and (max-width: 640px) { + @include breakpoint(phablet) { float: left !important; } diff --git a/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss b/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss index 4d5714eefc..2310e412f0 100644 --- a/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss +++ b/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss @@ -1,3 +1,4 @@ +@import "mixins"; @import "typography"; ordercycle { @@ -17,7 +18,7 @@ ordercycle { margin-right: 0.3rem; } - @media all and (max-width: 1024px) { + @include breakpoint(desktop) { float: none; padding: 0.5em 1em; width: 100%; @@ -33,7 +34,7 @@ ordercycle { } } - @media all and (max-width: 480px) { + @include breakpoint(mobile) { padding: 0.5em 1em 0.75em; } @@ -83,7 +84,7 @@ ordercycle { border-radius: 0 0.25em 0.25em 0; min-width: 13em; - @media all and (max-width: 480px) { + @include breakpoint(mobile) { width: 100%; min-width: 0; } @@ -93,17 +94,17 @@ ordercycle { color: $grey-700; } - @media all and (max-width: 1024px) { + @include breakpoint(desktop) { float: none; margin-right: 1em; } - @media all and (max-width: 768px) { + @include breakpoint(tablet) { float: none; margin-right: 0; } - @media all and (max-width: 480px) { + @include breakpoint(mobile) { display: flex; } } @@ -116,7 +117,7 @@ ordercycle { padding: 0.5em 0; span { - @media all and (max-width: 768px) { + @include breakpoint(tablet) { font-size: 0.875em; } } @@ -150,7 +151,7 @@ shop ordercycle { color: $white; padding: 0 0 12px; - @media all and (max-width: 1024px) { + @include breakpoint(desktop) { float: none; display: inline-block; padding: 0.2em 0 0; @@ -158,7 +159,7 @@ shop ordercycle { margin-right: 1em; } - @media all and (max-width: 768px) { + @include breakpoint(tablet) { float: none; padding: 0 0 10px; } diff --git a/app/assets/stylesheets/darkswarm/_shop-popovers.css.scss b/app/assets/stylesheets/darkswarm/_shop-popovers.css.scss index d233284767..dd5aa5a177 100644 --- a/app/assets/stylesheets/darkswarm/_shop-popovers.css.scss +++ b/app/assets/stylesheets/darkswarm/_shop-popovers.css.scss @@ -114,7 +114,7 @@ button.graph-button { } } - @media all and (max-width: 768px) { + @include breakpoint(tablet) { // Hide for small display: none; } diff --git a/app/assets/stylesheets/darkswarm/_shop-product-rows.css.scss b/app/assets/stylesheets/darkswarm/_shop-product-rows.css.scss index d98457cd73..b0ea1faf39 100644 --- a/app/assets/stylesheets/darkswarm/_shop-product-rows.css.scss +++ b/app/assets/stylesheets/darkswarm/_shop-product-rows.css.scss @@ -1,3 +1,4 @@ +@import "mixins"; @import "branding"; @import "animations"; @@ -14,11 +15,11 @@ // outline: 1px solid red - @media all and (max-width: 768px) { + @include breakpoint(tablet) { font-size: 0.875rem; } - @media all and (max-width: 640px) { + @include breakpoint(phablet) { font-size: 0.75rem; } } @@ -56,13 +57,13 @@ .variant-name { padding-left: 7.9375rem; - @media all and (max-width: 768px) { + @include breakpoint(tablet) { padding-left: 4.9375rem; } } .variant-name { - @media all and (max-width: 640px) { + @include breakpoint(phablet) { background: #333; color: white; padding-left: 0.9375rem; @@ -82,7 +83,7 @@ font-size: 0.875rem; overflow: hidden; - @media all and (max-width: 768px) { + @include breakpoint(tablet) { font-size: 0.75rem; } } @@ -92,7 +93,7 @@ padding-left: 0.25rem; padding-right: 0.25rem; - @media all and (max-width: 640px) { + @include breakpoint(phablet) { text-align: right; } } @@ -106,7 +107,7 @@ color: $med-drk-grey; } - @media all and (max-width: 640px) { + @include breakpoint(phablet) { background: #777; color: $disabled-med; @@ -132,7 +133,7 @@ padding-bottom: 1em; line-height: 1; - @media all and (max-width: 768px) { + @include breakpoint(tablet) { padding-top: 0.65rem; padding-bottom: 0.65rem; } @@ -141,11 +142,11 @@ .summary-header { padding-left: 7.9375rem; - @media all and (max-width: 768px) { + @include breakpoint(tablet) { padding-left: 4.9375rem; } - @media all and (max-width: 640px) { + @include breakpoint(phablet) { padding-left: 0.9375rem; } diff --git a/app/assets/stylesheets/darkswarm/_shop-product-thumb.css.scss b/app/assets/stylesheets/darkswarm/_shop-product-thumb.css.scss index 8a75467c9c..c9f8794295 100644 --- a/app/assets/stylesheets/darkswarm/_shop-product-thumb.css.scss +++ b/app/assets/stylesheets/darkswarm/_shop-product-thumb.css.scss @@ -1,3 +1,4 @@ +@import "mixins"; @import "branding"; @import "animations"; @@ -56,7 +57,7 @@ } } - @media all and (max-width: 768px) { + @include breakpoint(tablet) { top: 2px; width: 4rem; height: 4rem; @@ -70,7 +71,7 @@ } } - @media all and (max-width: 640px) { + @include breakpoint(phablet) { display: none; width: 0rem; height: 0rem; diff --git a/app/assets/stylesheets/darkswarm/_shop-taxon-flag.css.scss b/app/assets/stylesheets/darkswarm/_shop-taxon-flag.css.scss index 6a2c993600..e1b0d8ccbe 100644 --- a/app/assets/stylesheets/darkswarm/_shop-taxon-flag.css.scss +++ b/app/assets/stylesheets/darkswarm/_shop-taxon-flag.css.scss @@ -1,3 +1,5 @@ +@import "mixins"; + .darkswarm { products { product { @@ -10,7 +12,7 @@ padding-top: 0.25rem; z-index: 999999; - @media all and (max-width: 480px) { + @include breakpoint(mobile) { background-size: 28px 32px; min-height: 32px; width: 28px; @@ -27,11 +29,11 @@ } } - @media all and (max-width: 768px) { + @include breakpoint(tablet) { margin-top: -0.85rem; } - @media all and (max-width: 480px) { + @include breakpoint(mobile) { render-svg { svg { width: 18px; diff --git a/app/assets/stylesheets/darkswarm/active_table.css.scss b/app/assets/stylesheets/darkswarm/active_table.css.scss index 66dca7743b..395ad7c876 100644 --- a/app/assets/stylesheets/darkswarm/active_table.css.scss +++ b/app/assets/stylesheets/darkswarm/active_table.css.scss @@ -26,7 +26,7 @@ display: block; border: 0; - @media all and (max-width: 640px) { + @include breakpoint(phablet) { margin-bottom: 1rem; } @@ -45,7 +45,7 @@ } // Generic text resize - @media all and (max-width: 640px) { + @include breakpoint(phablet) { &, & * { font-size: 0.875rem; } @@ -114,7 +114,7 @@ .fat > div { border-top: 1px solid #aaa; - @media all and (max-width: 640px) { + @include breakpoint(phablet) { margin-top: 1em; } diff --git a/app/assets/stylesheets/darkswarm/active_table_search.css.scss b/app/assets/stylesheets/darkswarm/active_table_search.css.scss index b934116cdc..1c26fcb74f 100644 --- a/app/assets/stylesheets/darkswarm/active_table_search.css.scss +++ b/app/assets/stylesheets/darkswarm/active_table_search.css.scss @@ -16,7 +16,7 @@ margin-top: 2px; - @media all and (max-width: 640px) { + @include breakpoint(phablet) { margin-bottom: 1em; } } diff --git a/app/assets/stylesheets/darkswarm/big-input.scss b/app/assets/stylesheets/darkswarm/big-input.scss index 7b9ecdac8d..10336e30c6 100644 --- a/app/assets/stylesheets/darkswarm/big-input.scss +++ b/app/assets/stylesheets/darkswarm/big-input.scss @@ -23,7 +23,7 @@ box-shadow: none; color: $inputactv; - @media all and (max-width: 640px) { + @include breakpoint(phablet) { font-size: 1.25rem; } diff --git a/app/assets/stylesheets/darkswarm/checkout.css.scss b/app/assets/stylesheets/darkswarm/checkout.css.scss index 2e1a2a528c..df51d9de34 100644 --- a/app/assets/stylesheets/darkswarm/checkout.css.scss +++ b/app/assets/stylesheets/darkswarm/checkout.css.scss @@ -13,7 +13,7 @@ checkout { display: block; - @media all and (max-width: 640px) { + @include breakpoint(phablet) { &.row .row { margin-left: 0; margin-right: 0; @@ -24,7 +24,7 @@ checkout { .button, table { width: 100%; } - @media all and (max-width: 640px) { + @include breakpoint(phablet) { form.edit_order { border: 1px solid $disabled-bright; margin-bottom: 2rem; diff --git a/app/assets/stylesheets/darkswarm/distributor_header.css.scss b/app/assets/stylesheets/darkswarm/distributor_header.css.scss index 8e3fdc2a9b..8e9ebf769b 100644 --- a/app/assets/stylesheets/darkswarm/distributor_header.css.scss +++ b/app/assets/stylesheets/darkswarm/distributor_header.css.scss @@ -1,3 +1,4 @@ +@import "mixins"; @import 'typography'; section { @@ -34,7 +35,7 @@ section { @include headingFont; } - @media all and (max-width: 768px) { + @include breakpoint(tablet) { location, location + small { display: block; } @@ -44,7 +45,7 @@ section { margin-top: 0; padding-top: 0.45em; - @media all and (max-width: 768px) { + @include breakpoint(tablet) { margin-bottom: 8px; } } diff --git a/app/assets/stylesheets/darkswarm/embedded_shopfront.css.scss b/app/assets/stylesheets/darkswarm/embedded_shopfront.css.scss index c1206ecc5e..210825a008 100644 --- a/app/assets/stylesheets/darkswarm/embedded_shopfront.css.scss +++ b/app/assets/stylesheets/darkswarm/embedded_shopfront.css.scss @@ -1,3 +1,4 @@ +@import "mixins"; @import "typography"; $large-menu-height: 4.6875rem; @@ -97,7 +98,7 @@ body.embedded { display: none; } - @media all and (max-width: 640px) { + @include breakpoint(phablet) { nav.top-bar { height: 3.4rem; padding: 0.2rem $gutter-width; @@ -141,7 +142,7 @@ body.embedded { } } - @media all and (max-width: 480px) { + @include breakpoint(mobile) { ul.left li.powered-by span { display: none; } diff --git a/app/assets/stylesheets/darkswarm/home_panes.css.scss b/app/assets/stylesheets/darkswarm/home_panes.css.scss index 92053189e2..60f881462d 100644 --- a/app/assets/stylesheets/darkswarm/home_panes.css.scss +++ b/app/assets/stylesheets/darkswarm/home_panes.css.scss @@ -66,7 +66,7 @@ font-weight: 300; } - @media all and (max-width: 768px) { + @include breakpoint(tablet) { h2 { font-size: 52px; } @@ -87,7 +87,7 @@ padding-bottom: 0; } - @media all and (max-width: 640px) { + @include breakpoint(phablet) { .row .row { padding: 0; } @@ -139,7 +139,7 @@ font-weight: 300; color: $brand-colour; - @media all and (max-width: 640px) { + @include breakpoint(phablet) { font-size: 45px; } } diff --git a/app/assets/stylesheets/darkswarm/hub_node.css.scss b/app/assets/stylesheets/darkswarm/hub_node.css.scss index cf0ae9ca46..f7e1ac5686 100644 --- a/app/assets/stylesheets/darkswarm/hub_node.css.scss +++ b/app/assets/stylesheets/darkswarm/hub_node.css.scss @@ -45,7 +45,7 @@ } //Hub Link - @media all and (max-width: 640px) { + @include breakpoint(phablet) { a.hub { display: block; } @@ -67,7 +67,7 @@ .active_table_row { border: 1px solid transparent; - @media all and (max-width: 640px) { + @include breakpoint(phablet) { border-color: $clr-brick-light; } @@ -85,7 +85,7 @@ } &.open, &.closed { - @media all and (max-width: 640px) { + @include breakpoint(phablet) { .active_table_row:first-child .skinny-head { background-color: $clr-brick-light; @@ -164,7 +164,7 @@ } } - @media all and (max-width: 640px) { + @include breakpoint(phablet) { .active_table_row:first-child .skinny-head { background-color: rgba(255, 255, 255, 0.85); } @@ -218,7 +218,7 @@ } // Small devices - @media all and (max-width: 640px) { + @include breakpoint(phablet) { .active_table_row:first-child .skinny-head { background-color: $disabled-bright; } @@ -226,7 +226,7 @@ } // Small devices - @media all and (max-width: 640px) { + @include breakpoint(phablet) { .active_table_row, .active_table_row:first-child, .active_table_row:last-child { border-color: $disabled-bright; background-color: transparent; @@ -253,7 +253,7 @@ cursor: auto; } - @media all and (max-width: 640px) { + @include breakpoint(phablet) { border-color: transparent; } } diff --git a/app/assets/stylesheets/darkswarm/images.css.scss b/app/assets/stylesheets/darkswarm/images.css.scss index 2a9f931f6e..cd939e3b42 100644 --- a/app/assets/stylesheets/darkswarm/images.css.scss +++ b/app/assets/stylesheets/darkswarm/images.css.scss @@ -13,7 +13,7 @@ &.placeholder { opacity: 0.35; - @media all and (max-width: 1024px) { + @include breakpoint(desktop) { display: none; } } @@ -31,7 +31,7 @@ max-height: 260px; overflow: hidden; - @media all and (max-width: 640px) { + @include breakpoint(phablet) { min-height: 68px; } } diff --git a/app/assets/stylesheets/darkswarm/map.css.scss b/app/assets/stylesheets/darkswarm/map.css.scss index d880b3025b..b0df5b66da 100644 --- a/app/assets/stylesheets/darkswarm/map.css.scss +++ b/app/assets/stylesheets/darkswarm/map.css.scss @@ -1,6 +1,7 @@ // Place all the styles related to the map controller here. // They will automatically be included in application.css. // You can use Sass (SCSS) here: http://sass-lang.com/ +@import "mixins"; @import "big-input"; .map-container { @@ -29,7 +30,7 @@ margin-top: 1.2rem; margin-left: 1rem; - @media all and (max-width: 768px) { + @include breakpoint(tablet) { width: 80%; } diff --git a/app/assets/stylesheets/darkswarm/mixins.scss b/app/assets/stylesheets/darkswarm/mixins.scss index 0643294c0c..2b38d89dea 100644 --- a/app/assets/stylesheets/darkswarm/mixins.scss +++ b/app/assets/stylesheets/darkswarm/mixins.scss @@ -16,7 +16,7 @@ padding-top: 100px; padding-bottom: 100px; - @media all and (max-width: 640px) { + @include breakpoint(phablet) { padding-top: 25px; } } @@ -255,3 +255,18 @@ background-repeat: no-repeat; background-size: 922px 922px; } + +@mixin breakpoint($point) { + @if $point == desktop { + @media all and (max-width: 1024px) { @content; } + } + @else if $point == tablet { + @media all and (max-width: 768px) { @content; } + } + @else if $point == phablet { + @media all and (max-width: 640px) { @content; } + } + @else if $point == mobile { + @media all and (max-width: 480px) { @content; } + } +} diff --git a/app/assets/stylesheets/darkswarm/modal-enterprises.css.scss b/app/assets/stylesheets/darkswarm/modal-enterprises.css.scss index 5d356028f8..0f52ab8b79 100644 --- a/app/assets/stylesheets/darkswarm/modal-enterprises.css.scss +++ b/app/assets/stylesheets/darkswarm/modal-enterprises.css.scss @@ -57,7 +57,7 @@ p { line-height: 2.4; - @media all and (max-width: 640px) { + @include breakpoint(phablet) { line-height: 1.4; } } @@ -193,7 +193,7 @@ display: inline-block; border-bottom: 1px solid transparent; - @media all and (max-width: 640px) { + @include breakpoint(phablet) { display: none; } } diff --git a/app/assets/stylesheets/darkswarm/page_alert.css.scss b/app/assets/stylesheets/darkswarm/page_alert.css.scss index 59ccf327d0..4be82c8c2e 100644 --- a/app/assets/stylesheets/darkswarm/page_alert.css.scss +++ b/app/assets/stylesheets/darkswarm/page_alert.css.scss @@ -1,3 +1,4 @@ +@import "mixins"; @import "branding"; @import "animations"; @import "compass/css3/transition"; @@ -19,7 +20,7 @@ $page-alert-height: 55px; margin: 0; h6 { - @media all and (max-width: 480px) { + @include breakpoint(mobile) { font-size: 10px; line-height: 24px; } diff --git a/app/assets/stylesheets/darkswarm/producer_node.css.scss b/app/assets/stylesheets/darkswarm/producer_node.css.scss index 770a76564f..707c5d903b 100644 --- a/app/assets/stylesheets/darkswarm/producer_node.css.scss +++ b/app/assets/stylesheets/darkswarm/producer_node.css.scss @@ -4,7 +4,7 @@ .producers { .active_table .active_table_node { // Header row - @media all and (max-width: 640px) { + @include breakpoint(phablet) { .skinny-head { background-color: $clr-turquoise-light; @@ -137,7 +137,7 @@ .active_table_row.closed { border: 1px solid transparent; - @media all and (max-width: 640px) { + @include breakpoint(phablet) { border-color: $clr-turquoise-light; } diff --git a/app/assets/stylesheets/darkswarm/shop.css.scss b/app/assets/stylesheets/darkswarm/shop.css.scss index 8fd9a455b2..23b6502866 100644 --- a/app/assets/stylesheets/darkswarm/shop.css.scss +++ b/app/assets/stylesheets/darkswarm/shop.css.scss @@ -49,12 +49,12 @@ $sidebar-footer-height: 5em; padding: 0; font-size: 1em; - @media all and (max-width: 480px) { + @include breakpoint(mobile) { margin-left: 0.75em; } } - @media all and (max-width: 480px) { + @include breakpoint(mobile) { font-size: 0.9em; } } @@ -133,14 +133,14 @@ $sidebar-footer-height: 5em; } } - @media all and (max-width: 768px) { + @include breakpoint(tablet) { .sidebar, .sidebar-footer { width: $sidebar-medium-width; margin-right: -$sidebar-medium-width; } } - @media all and (max-width: 480px) { + @include breakpoint(mobile) { .sidebar, .sidebar-footer { width: $sidebar-small-width; margin-right: -$sidebar-small-width; @@ -151,13 +151,13 @@ $sidebar-footer-height: 5em; products { display: block; - @media all and (max-width: 768px) { + @include breakpoint(tablet) { input.button.right { float: left; } } - @media all and (max-width: 480px) { + @include breakpoint(mobile) { .add_to_cart { margin-top: 2rem; } @@ -204,7 +204,7 @@ $sidebar-footer-height: 5em; .bulk-buy { font-size: 0.875rem; - @media all and (max-width: 768px) { + @include breakpoint(tablet) { font-size: 0.75rem; } } @@ -227,7 +227,7 @@ $sidebar-footer-height: 5em; font-size: 0.75em; padding-right: 0.9375rem; - @media all and (max-width: 640px) { + @include breakpoint(phablet) { padding-right: 0.25rem; } } diff --git a/app/assets/stylesheets/darkswarm/shop_tabs.css.scss b/app/assets/stylesheets/darkswarm/shop_tabs.css.scss index 36f8695af8..66bbb8998e 100644 --- a/app/assets/stylesheets/darkswarm/shop_tabs.css.scss +++ b/app/assets/stylesheets/darkswarm/shop_tabs.css.scss @@ -14,12 +14,12 @@ .columns { display: flex; - @media all and (max-width: 1024px) { + @include breakpoint(desktop) { display: table; width: 100%; } - @media all and (max-width: 480px) { + @include breakpoint(mobile) { padding: 0; } } @@ -56,7 +56,7 @@ background: none; } - @media all and (max-width: 640px) { + @include breakpoint(phablet) { padding: 0.35em 0 0.65em 0; } } @@ -69,7 +69,7 @@ } } - @media all and (max-width: 1024px) { + @include breakpoint(desktop) { display: table-cell; width: auto; } @@ -106,7 +106,7 @@ p { max-width: 100%; - @media all and (max-width: 768px) { + @include breakpoint(tablet) { height: auto !important; } } diff --git a/app/assets/stylesheets/darkswarm/tabset.css.scss b/app/assets/stylesheets/darkswarm/tabset.css.scss index c100bff672..4f4ab3c7b9 100644 --- a/app/assets/stylesheets/darkswarm/tabset.css.scss +++ b/app/assets/stylesheets/darkswarm/tabset.css.scss @@ -10,7 +10,7 @@ .tab { text-align: center; - @media all and (max-width: 640px) { + @include breakpoint(phablet) { text-align: left; } @@ -24,7 +24,7 @@ padding: 1em; border: none; - @media all and (max-width: 640px) { + @include breakpoint(phablet) { padding: 0.35em 0 0.65em 0; text-shadow: none; } @@ -37,7 +37,7 @@ border-bottom: 4px solid $clr-brick-bright; cursor: pointer; - @media all and (max-width: 640px) { + @include breakpoint(phablet) { transition: none; color: white; background-color: $clr-brick-bright; @@ -46,7 +46,7 @@ a { color: $clr-brick-bright; - @media all and (max-width: 640px) { + @include breakpoint(phablet) { color: #ffffff; } } @@ -55,14 +55,14 @@ &.selected { border-bottom: 4px solid $clr-brick; - @media all and (max-width: 640px) { + @include breakpoint(phablet) { background-color: $clr-brick; } a { color: $clr-brick; - @media all and (max-width: 640px) { + @include breakpoint(phablet) { color: #ffffff; } } diff --git a/app/assets/stylesheets/darkswarm/taxons.css.scss b/app/assets/stylesheets/darkswarm/taxons.css.scss index a5db89b324..006e15de58 100644 --- a/app/assets/stylesheets/darkswarm/taxons.css.scss +++ b/app/assets/stylesheets/darkswarm/taxons.css.scss @@ -57,7 +57,7 @@ } } - @media all and (max-width: 640px) { + @include breakpoint(phablet) { render-svg { svg { width: 24px;