raggedstaff/openfoodnetwork
1
0
Fork 0
mirror of https://github.com/openfoodfoundation/openfoodnetwork synced 2026-01-24 20:36:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Define breakpoints in mixin and refactor

Browse Source
This commit is contained in:
Matt-Yorkley
2020-04-20 15:00:17 +02:00
parent cbd77b4941
commit 035bde9eff
24 changed files with 107 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
app/assets/stylesheets/darkswarm/_shop-inputs.css.scss
View File

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

19
app/assets/stylesheets/darkswarm/_shop-navigation.css.scss
View File

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

2
app/assets/stylesheets/darkswarm/_shop-popovers.css.scss
View File

@@ -114,7 +114,7 @@ button.graph-button {
}
}
@media all and (max-width: 768px) {
@include breakpoint(tablet) {
// Hide for small
display: none;
}

21
app/assets/stylesheets/darkswarm/_shop-product-rows.css.scss
View File

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

5
app/assets/stylesheets/darkswarm/_shop-product-thumb.css.scss
View File

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

8
app/assets/stylesheets/darkswarm/_shop-taxon-flag.css.scss
View File

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

6
app/assets/stylesheets/darkswarm/active_table.css.scss
View File

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

2
app/assets/stylesheets/darkswarm/active_table_search.css.scss
View File

@@ -16,7 +16,7 @@
margin-top: 2px;
@media all and (max-width: 640px) {
@include breakpoint(phablet) {
margin-bottom: 1em;
}
}

2
app/assets/stylesheets/darkswarm/big-input.scss
View File

@@ -23,7 +23,7 @@
box-shadow: none;
color: $inputactv;
@media all and (max-width: 640px) {
@include breakpoint(phablet) {
font-size: 1.25rem;
}

4
app/assets/stylesheets/darkswarm/checkout.css.scss
View File

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

5
app/assets/stylesheets/darkswarm/distributor_header.css.scss
View File

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

5
app/assets/stylesheets/darkswarm/embedded_shopfront.css.scss
View File

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

6
app/assets/stylesheets/darkswarm/home_panes.css.scss
View File

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

14
app/assets/stylesheets/darkswarm/hub_node.css.scss
View File

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

4
app/assets/stylesheets/darkswarm/images.css.scss
View File

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

3
app/assets/stylesheets/darkswarm/map.css.scss
View File

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

17
app/assets/stylesheets/darkswarm/mixins.scss
View File

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

4
app/assets/stylesheets/darkswarm/modal-enterprises.css.scss
View File

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

3
app/assets/stylesheets/darkswarm/page_alert.css.scss
View File

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

4
app/assets/stylesheets/darkswarm/producer_node.css.scss
View File

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

16
app/assets/stylesheets/darkswarm/shop.css.scss
View File

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

10
app/assets/stylesheets/darkswarm/shop_tabs.css.scss
View File

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

12
app/assets/stylesheets/darkswarm/tabset.css.scss
View File

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

2
app/assets/stylesheets/darkswarm/taxons.css.scss
View File

@@ -57,7 +57,7 @@
}
}
@media all and (max-width: 640px) {
@include breakpoint(phablet) {
render-svg {
svg {
width: 24px;