mirror of
https://github.com/frontendnetwork/vegancheck.me
synced 2024-11-13 23:57:09 +00:00
feat(SCSS): Upgraded to newer SCSS version
This commit is contained in:
Philip
parent
27214e7a13
commit
d33932ac9e
25 changed files with 420 additions and 270 deletions
|
|
@ -3,8 +3,8 @@
|
|||
|
||||
// converts several units to em (supports px, pt, pc, in, mm, cm)
|
||||
@function em($size) {
|
||||
@if not unitless($size) {
|
||||
@if unit($size)==em {
|
||||
@if not math.is-unitless($size) {
|
||||
@if math.unit($size)==em {
|
||||
@return $size;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@
|
|||
--body-h1-fontsize: 2.0833rem;
|
||||
--body-h2-fontsize: 1.5rem;
|
||||
--non-vegan: #ee5253;
|
||||
--maybe-vegan: #ff9d00;
|
||||
--vegan: #10ac84;
|
||||
--unknown: #576574;
|
||||
--link-color: #ccc;
|
||||
|
|
@ -82,4 +83,4 @@ html[data-theme="oled"] {
|
|||
--modal-fg: #fff;
|
||||
--modal-full-btn: #3e3e3e;
|
||||
--modal-border: 0.1rem #3e3e3e solid;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,8 +1,7 @@
|
|||
@font-face {
|
||||
font-family: "vegancheckicons";
|
||||
src: url("../font/vegancheckicons.eot?33525214");
|
||||
src: url("../font/vegancheckicons.eot?33525214#iefix")
|
||||
format("embedded-opentype"),
|
||||
src: url("../font/vegancheckicons.eot?33525214#iefix") format("embedded-opentype"),
|
||||
url("../font/vegancheckicons.woff2?33525214") format("woff2"),
|
||||
url("../font/vegancheckicons.woff?33525214") format("woff"),
|
||||
url("../font/vegancheckicons.ttf?33525214") format("truetype"),
|
||||
|
|
@ -15,8 +14,7 @@
|
|||
@font-face {
|
||||
font-family: "additional_icons";
|
||||
src: url("../font/additional_icons.eot?64205737");
|
||||
src: url("../font/additional_icons.eot?64205737#iefix")
|
||||
format("embedded-opentype"),
|
||||
src: url("../font/additional_icons.eot?64205737#iefix") format("embedded-opentype"),
|
||||
url("../font/additional_icons.svg?64205737#additional_icons") format("svg");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
|
|
@ -26,8 +24,7 @@
|
|||
@font-face {
|
||||
font-family: "nutriscore";
|
||||
src: url("../font/nutriscore.eot?4788995906");
|
||||
src: url("../font/nutriscore.eot?4788995906#iefix")
|
||||
format("embedded-opentype"),
|
||||
src: url("../font/nutriscore.eot?4788995906#iefix") format("embedded-opentype"),
|
||||
url("../font/nutriscore.woff2?4788995906") format("woff2"),
|
||||
url("../font/nutriscore.woff?4788995906") format("woff"),
|
||||
url("../font/nutriscore.ttf?4788995906") format("truetype"),
|
||||
|
|
@ -178,6 +175,11 @@
|
|||
content: "\e804";
|
||||
}
|
||||
|
||||
/* '' */
|
||||
.icon-attention-alt:before {
|
||||
content: '\f12a';
|
||||
}
|
||||
|
||||
/* '' */
|
||||
.icon-barcode:before {
|
||||
content: "\e805";
|
||||
|
|
@ -292,4 +294,4 @@
|
|||
.icon-kofi:before {
|
||||
content: "\f097";
|
||||
margin-right: 0.7rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +1,5 @@
|
|||
@use "../_globals/mixins";
|
||||
|
||||
/* Open Shortcuts */
|
||||
#shortcut {
|
||||
cursor: pointer;
|
||||
|
|
@ -13,27 +15,27 @@
|
|||
width: 100%;
|
||||
border-bottom: var(--pwa-border);
|
||||
text-align: left;
|
||||
height: rem(44.8px);
|
||||
height: mixins.rem(44.8px);
|
||||
|
||||
.flex-container {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
writing-mode: horizontal-tb;
|
||||
padding: 0;
|
||||
padding-left: rem(16px);
|
||||
padding-right: rem(16px);
|
||||
padding-left: mixins.rem(16px);
|
||||
padding-right: mixins.rem(16px);
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.flex-item {
|
||||
height: rem(40px);
|
||||
height: mixins.rem(40px);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
padding-top: rem(3.2px);
|
||||
padding-top: mixins.rem(3.2px);
|
||||
|
||||
&:first-child {
|
||||
width: rem(40px);
|
||||
width: mixins.rem(40px);
|
||||
max-width: 20%;
|
||||
}
|
||||
|
||||
|
|
@ -42,7 +44,7 @@
|
|||
}
|
||||
|
||||
&:last-child {
|
||||
margin-top: rem(6.4px);
|
||||
margin-top: mixins.rem(6.4px);
|
||||
margin-left: auto;
|
||||
float: right;
|
||||
max-width: 35%;
|
||||
|
|
@ -51,18 +53,18 @@
|
|||
}
|
||||
|
||||
.heading {
|
||||
font-size: rem(12.8px);
|
||||
font-size: mixins.rem(12.8px);
|
||||
font-family: SF Pro Text, system-ui, -apple-system, BlinkMacSystemFont,
|
||||
Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
color: #fff;
|
||||
|
||||
@include theme(light) {
|
||||
@include mixins.theme(light) {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.subheading {
|
||||
font-size: rem(11.2px);
|
||||
font-size: mixins.rem(11.2px);
|
||||
font-family: SF Pro Text, system-ui, -apple-system, BlinkMacSystemFont,
|
||||
Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
display: block;
|
||||
|
|
@ -72,7 +74,7 @@
|
|||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
|
||||
@include theme(light) {
|
||||
@include mixins.theme(light) {
|
||||
color: #c0c5d5;
|
||||
}
|
||||
}
|
||||
|
|
@ -82,23 +84,23 @@
|
|||
}
|
||||
|
||||
.button {
|
||||
font-size: rem(11.2px);
|
||||
font-size: mixins.rem(11.2px);
|
||||
color: #fff;
|
||||
text-transform: uppercase;
|
||||
background: #007aff;
|
||||
padding: rem(8px);
|
||||
padding-left: rem(24px);
|
||||
padding-right: rem(24px);
|
||||
border-radius: rem(48px);
|
||||
padding: mixins.rem(8px);
|
||||
padding-left: mixins.rem(24px);
|
||||
padding-right: mixins.rem(24px);
|
||||
border-radius: mixins.rem(48px);
|
||||
|
||||
@include theme(light) {
|
||||
@include mixins.theme(light) {
|
||||
background: #fff;
|
||||
color: #7f8fa6;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
width: rem(32px);
|
||||
width: mixins.rem(32px);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -116,10 +118,10 @@
|
|||
overflow: hidden;
|
||||
border-bottom: var(--pwa-border);
|
||||
text-align: left;
|
||||
height: rem(64px);
|
||||
height: mixins.rem(64px);
|
||||
display: none;
|
||||
|
||||
@include mq(s-phone) {
|
||||
@include mixins.mq(s-phone) {
|
||||
height: 3.5rem;
|
||||
}
|
||||
|
||||
|
|
@ -128,38 +130,38 @@
|
|||
flex-flow: row wrap;
|
||||
writing-mode: horizontal-tb;
|
||||
padding: 0;
|
||||
padding-left: rem(16px);
|
||||
padding-right: rem(16px);
|
||||
padding-left: mixins.rem(16px);
|
||||
padding-right: mixins.rem(16px);
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
|
||||
@include mq(s-phone) {
|
||||
@include mixins.mq(s-phone) {
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.flex-item {
|
||||
height: rem(40px);
|
||||
height: mixins.rem(40px);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
padding-top: rem(4.8px);
|
||||
padding-top: mixins.rem(4.8px);
|
||||
|
||||
&:first-child {
|
||||
font-size: rem(24px);
|
||||
padding-top: rem(16px);
|
||||
padding-right: rem(8px);
|
||||
font-size: mixins.rem(24px);
|
||||
padding-top: mixins.rem(16px);
|
||||
padding-right: mixins.rem(8px);
|
||||
font-weight: 100;
|
||||
color: #ccc;
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
padding-top: rem(11.2px);
|
||||
padding-top: mixins.rem(11.2px);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-top: rem(12px);
|
||||
margin-top: mixins.rem(12px);
|
||||
margin-left: auto;
|
||||
float: right;
|
||||
justify-content: flex-end;
|
||||
|
|
@ -167,34 +169,34 @@
|
|||
}
|
||||
|
||||
.heading {
|
||||
font-size: rem(12.8px);
|
||||
font-size: mixins.rem(12.8px);
|
||||
font-family: SF Pro Text, system-ui, -apple-system, BlinkMacSystemFont,
|
||||
Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
|
||||
@include mq(s-phone) {
|
||||
@include mixins.mq(s-phone) {
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
|
||||
@include theme(light) {
|
||||
@include mixins.theme(light) {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.subheading {
|
||||
font-size: rem(11.2px);
|
||||
font-size: mixins.rem(11.2px);
|
||||
font-family: SF Pro Text, system-ui, -apple-system, BlinkMacSystemFont,
|
||||
Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
display: block;
|
||||
color: #ccc;
|
||||
font-weight: 400;
|
||||
|
||||
@include mq(s-phone) {
|
||||
@include mixins.mq(s-phone) {
|
||||
font-size: 0.55rem;
|
||||
}
|
||||
|
||||
@include theme(light) {
|
||||
@include mixins.theme(light) {
|
||||
color: #c0c5d5;
|
||||
}
|
||||
}
|
||||
|
|
@ -204,34 +206,34 @@
|
|||
}
|
||||
|
||||
.button {
|
||||
font-size: rem(11.2px);
|
||||
font-size: mixins.rem(11.2px);
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
text-transform: uppercase;
|
||||
background: #007aff;
|
||||
padding: rem(8px);
|
||||
padding-left: rem(24px);
|
||||
padding-right: rem(24px);
|
||||
border-radius: rem(48px);
|
||||
padding: mixins.rem(8px);
|
||||
padding-left: mixins.rem(24px);
|
||||
padding-right: mixins.rem(24px);
|
||||
border-radius: mixins.rem(48px);
|
||||
|
||||
@include mq(s-phone) {
|
||||
@include mixins.mq(s-phone) {
|
||||
font-size: 0.5rem;
|
||||
}
|
||||
|
||||
@include theme(light) {
|
||||
@include mixins.theme(light) {
|
||||
background: #fff;
|
||||
color: #7f8fa6;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
width: rem(51.2px);
|
||||
border: rem(0.8px) grey solid;
|
||||
border-radius: rem(12px);
|
||||
margin-right: rem(8px);
|
||||
width: mixins.rem(51.2px);
|
||||
border: mixins.rem(0.8px) grey solid;
|
||||
border-radius: mixins.rem(12px);
|
||||
margin-right: mixins.rem(8px);
|
||||
|
||||
@include mq(s-phone) {
|
||||
@include mixins.mq(s-phone) {
|
||||
width: 2.8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +1,5 @@
|
|||
@use "../_globals/mixins";
|
||||
|
||||
/* Buttons */
|
||||
button {
|
||||
width: 10%;
|
||||
|
|
@ -5,21 +7,21 @@ button {
|
|||
cursor: pointer;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
padding: rem(16px);
|
||||
padding: mixins.rem(16px);
|
||||
text-align: center;
|
||||
color: #000;
|
||||
font-weight: var(--body-fontweight);
|
||||
transition: 0.5s;
|
||||
border: rem(0.16px) solid #ccc;
|
||||
border: mixins.rem(0.16px) solid #ccc;
|
||||
height: 4rem;
|
||||
|
||||
@include mq(s-desktop) {
|
||||
@include mixins.mq(s-desktop) {
|
||||
width: 15%;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
@include mq(phone) {
|
||||
@include mixins.mq(phone) {
|
||||
width: 20%;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
|
|
@ -32,23 +34,23 @@ button:focus {
|
|||
}
|
||||
|
||||
.btn-dark {
|
||||
margin-top: rem(12.8px) !important;
|
||||
margin-top: mixins.rem(12.8px) !important;
|
||||
display: inline-block;
|
||||
min-width: auto;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
border: rem(1.008px) solid #424242;
|
||||
border: mixins.rem(1.008px) solid #424242;
|
||||
cursor: pointer;
|
||||
padding: rem(4px) rem(8px);
|
||||
font-size: rem(14px);
|
||||
border-radius: rem(3.2px);
|
||||
padding: mixins.rem(4px) mixins.rem(8px);
|
||||
font-size: mixins.rem(14px);
|
||||
border-radius: mixins.rem(3.2px);
|
||||
color: #fff !important;
|
||||
background-color: #212529;
|
||||
transition: 0.5s;
|
||||
|
||||
@include mq(s-phone) {
|
||||
@include mixins.mq(s-phone) {
|
||||
width: 6.5rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
|
@ -56,7 +58,7 @@ button:focus {
|
|||
&:hover,
|
||||
&:focus {
|
||||
color: #fff;
|
||||
border: rem(1.008px) solid #6b6b6b;
|
||||
border: mixins.rem(1.008px) solid #6b6b6b;
|
||||
}
|
||||
|
||||
&:active {
|
||||
|
|
@ -66,9 +68,9 @@ button:focus {
|
|||
}
|
||||
|
||||
#tweet {
|
||||
margin-right: rem(3.2px);
|
||||
margin-right: mixins.rem(3.2px);
|
||||
}
|
||||
|
||||
.nolink {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,26 +1,28 @@
|
|||
@use "../_globals/mixins";
|
||||
|
||||
/* Main container with border */
|
||||
|
||||
.form {
|
||||
word-wrap: break-word;
|
||||
background: #fff;
|
||||
border: rem(2px) solid #f5f5f5;
|
||||
border-radius: rem(10px);
|
||||
border: mixins.rem(2px) solid #f5f5f5;
|
||||
border-radius: mixins.rem(10px);
|
||||
margin: 0 auto;
|
||||
margin-bottom: rem(24px);
|
||||
padding: rem(64px);
|
||||
line-height: rem(30px);
|
||||
box-shadow: 0 rem(25px) rem(50px) rem(-12px) rgba(0, 0, 0, 0.25);
|
||||
margin-bottom: mixins.rem(24px);
|
||||
padding: mixins.rem(64px);
|
||||
line-height: mixins.rem(30px);
|
||||
box-shadow: 0 mixins.rem(25px) mixins.rem(50px) mixins.rem(-12px) rgba(0, 0, 0, 0.25);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
color: #000;
|
||||
|
||||
@include mq(phone) {
|
||||
@include mixins.mq(phone) {
|
||||
max-width: 80%;
|
||||
padding: 1rem;
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
@include theme(light) {
|
||||
@include mixins.theme(light) {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
|
|
@ -38,14 +40,15 @@
|
|||
li {
|
||||
color: #000;
|
||||
text-align: left;
|
||||
@include theme(light) {
|
||||
|
||||
@include mixins.theme(light) {
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
.small {
|
||||
font-size: rem(11.2px);
|
||||
line-height: rem(16px);
|
||||
font-size: mixins.rem(11.2px);
|
||||
line-height: mixins.rem(16px);
|
||||
}
|
||||
|
||||
.Grid {
|
||||
|
|
@ -54,14 +57,14 @@
|
|||
flex-wrap: wrap;
|
||||
width: 60%;
|
||||
margin: 0 auto;
|
||||
border-top: rem(0.08px) solid #ccc;
|
||||
padding: rem(8px);
|
||||
border-top: mixins.rem(0.08px) solid #ccc;
|
||||
padding: mixins.rem(8px);
|
||||
|
||||
@include mq(s-phone) {
|
||||
@include mixins.mq(s-phone) {
|
||||
width: 80% !important;
|
||||
}
|
||||
|
||||
@include mq(phone) {
|
||||
@include mixins.mq(phone) {
|
||||
width: 70% !important;
|
||||
}
|
||||
|
||||
|
|
@ -78,32 +81,32 @@
|
|||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
outline: none;
|
||||
width: rem(50px);
|
||||
height: rem(30px);
|
||||
width: mixins.rem(50px);
|
||||
height: mixins.rem(30px);
|
||||
background-color: #fff;
|
||||
border: rem(1.008px) solid #d9dadc;
|
||||
border-radius: rem(50px);
|
||||
box-shadow: inset rem(-20px) 0 0 0 #fff;
|
||||
border: mixins.rem(1.008px) solid #d9dadc;
|
||||
border-radius: mixins.rem(50px);
|
||||
box-shadow: inset mixins.rem(-20px) 0 0 0 #fff;
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: rem(1.008px);
|
||||
left: rem(1.008px);
|
||||
top: mixins.rem(1.008px);
|
||||
left: mixins.rem(1.008px);
|
||||
background: transparent;
|
||||
width: rem(26px);
|
||||
height: rem(26px);
|
||||
width: mixins.rem(26px);
|
||||
height: mixins.rem(26px);
|
||||
border-radius: 50%;
|
||||
box-shadow: rem(2px) rem(4px) rem(6px) rgba(0, 0, 0, 0.2);
|
||||
box-shadow: mixins.rem(2px) mixins.rem(4px) mixins.rem(6px) rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
&:checked {
|
||||
box-shadow: inset rem(20px) 0 0 0 var(--button-bg-re);
|
||||
box-shadow: inset mixins.rem(20px) 0 0 0 var(--button-bg-re);
|
||||
border-color: var(--button-bg-re);
|
||||
|
||||
&:after {
|
||||
left: 1.25rem;
|
||||
box-shadow: rem(-2px) rem(4px) rem(3.008px) rgba(0, 0, 0, 0.05);
|
||||
box-shadow: mixins.rem(-2px) mixins.rem(4px) mixins.rem(3.008px) rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -117,11 +120,11 @@
|
|||
.info {
|
||||
display: block;
|
||||
font-weight: 400;
|
||||
font-size: rem(14.4px);
|
||||
font-size: mixins.rem(14.4px);
|
||||
color: #595959;
|
||||
margin-top: 0;
|
||||
padding: 0;
|
||||
line-height: rem(16px);
|
||||
line-height: mixins.rem(16px);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -161,18 +164,18 @@
|
|||
}
|
||||
|
||||
.button {
|
||||
font-size: rem(11.2px);
|
||||
font-size: mixins.rem(11.2px);
|
||||
color: var(--button-fg-re);
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
background: var(--button-bg-re);
|
||||
padding: rem(3.2px);
|
||||
padding-left: rem(16px);
|
||||
padding-right: rem(16px);
|
||||
border-radius: rem(48px);
|
||||
margin-top: rem(12.8px) !important;
|
||||
padding: mixins.rem(3.2px);
|
||||
padding-left: mixins.rem(16px);
|
||||
padding-right: mixins.rem(16px);
|
||||
border-radius: mixins.rem(48px);
|
||||
margin-top: mixins.rem(12.8px) !important;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,9 +1,11 @@
|
|||
@use "../_globals/mixins";
|
||||
|
||||
/* Data Source label */
|
||||
.source {
|
||||
font-weight: 400;
|
||||
font-size: rem(12.8px);
|
||||
padding-top: rem(16px);
|
||||
line-height: rem(22.4px);
|
||||
font-size: mixins.rem(12.8px);
|
||||
padding-top: mixins.rem(16px);
|
||||
line-height: mixins.rem(22.4px);
|
||||
display: block;
|
||||
|
||||
a {
|
||||
|
|
@ -1,13 +1,15 @@
|
|||
@use "../_globals/mixins";
|
||||
|
||||
/* Modals */
|
||||
.source {
|
||||
sup {
|
||||
font-size: 100%;
|
||||
margin-left: rem(4.8px);
|
||||
margin-left: mixins.rem(4.8px);
|
||||
}
|
||||
}
|
||||
|
||||
sup {
|
||||
margin: rem(1.6px);
|
||||
margin: mixins.rem(1.6px);
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -19,8 +21,8 @@ sup {
|
|||
.modal_view {
|
||||
background-color: var(--modal-bg);
|
||||
color: var(--modal-fg) !important;
|
||||
border-top-right-radius: rem(8px);
|
||||
border-top-left-radius: rem(8px);
|
||||
border-top-right-radius: mixins.rem(8px);
|
||||
border-top-left-radius: mixins.rem(8px);
|
||||
position: fixed;
|
||||
bottom: 0%;
|
||||
left: 0;
|
||||
|
|
@ -29,10 +31,10 @@ sup {
|
|||
z-index: 9999999;
|
||||
overflow: overlay;
|
||||
text-align: left;
|
||||
box-shadow: 0 rem(25px) rem(25px) rem(50px) rem(12px) rgba(0, 0, 0, 0.5);
|
||||
padding-bottom: rem(16px);
|
||||
box-shadow: 0 mixins.rem(25px) mixins.rem(25px) mixins.rem(50px) mixins.rem(12px) rgba(0, 0, 0, 0.5);
|
||||
padding-bottom: mixins.rem(16px);
|
||||
|
||||
@include mq(desktop) {
|
||||
@include mixins.mq(desktop) {
|
||||
height: auto;
|
||||
max-width: 40%;
|
||||
max-height: 50%;
|
||||
|
|
@ -44,36 +46,36 @@ sup {
|
|||
|
||||
.heading_img {
|
||||
width: 20%;
|
||||
max-width: rem(48px);
|
||||
margin-top: rem(32px);
|
||||
max-width: mixins.rem(48px);
|
||||
margin-top: mixins.rem(32px);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.pwa-install-prompt__guide__icon {
|
||||
width: rem(16px);
|
||||
padding-right: rem(4.8px);
|
||||
width: mixins.rem(16px);
|
||||
padding-right: mixins.rem(4.8px);
|
||||
}
|
||||
|
||||
h2,
|
||||
h1 {
|
||||
font-weight: 600;
|
||||
font-size: rem(16px);
|
||||
margin-top: rem(24px);
|
||||
padding-left: rem(24px);
|
||||
padding-right: rem(24px);
|
||||
font-size: mixins.rem(16px);
|
||||
margin-top: mixins.rem(24px);
|
||||
padding-left: mixins.rem(24px);
|
||||
padding-right: mixins.rem(24px);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: rem(24px);
|
||||
margin-top: rem(8px);
|
||||
font-size: mixins.rem(24px);
|
||||
margin-top: mixins.rem(8px);
|
||||
color: var(--modal-fg) !important;
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
p {
|
||||
color: var(--modal-fg) !important;
|
||||
padding-left: rem(24px);
|
||||
padding-right: rem(24px);
|
||||
padding-left: mixins.rem(24px);
|
||||
padding-right: mixins.rem(24px);
|
||||
font-size: var(--body-fontsize);
|
||||
}
|
||||
|
||||
|
|
@ -82,15 +84,15 @@ sup {
|
|||
}
|
||||
|
||||
.button {
|
||||
font-size: rem(16px);
|
||||
font-size: mixins.rem(16px);
|
||||
color: var(--button-fg-re) !important;
|
||||
background: var(--button-bg-re);
|
||||
padding: rem(16px);
|
||||
padding-left: rem(16px);
|
||||
padding-right: rem(16px);
|
||||
border-radius: rem(48px);
|
||||
margin-top: rem(12.8px) !important;
|
||||
margin-bottom: rem(16px);
|
||||
padding: mixins.rem(16px);
|
||||
padding-left: mixins.rem(16px);
|
||||
padding-right: mixins.rem(16px);
|
||||
border-radius: mixins.rem(48px);
|
||||
margin-top: mixins.rem(12.8px) !important;
|
||||
margin-bottom: mixins.rem(16px);
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
}
|
||||
|
|
@ -99,11 +101,11 @@ sup {
|
|||
text-align: left;
|
||||
|
||||
.btn-dark {
|
||||
width: rem(32px);
|
||||
height: rem(32px);
|
||||
width: mixins.rem(32px);
|
||||
height: mixins.rem(32px);
|
||||
position: fixed;
|
||||
right: rem(16px);
|
||||
margin-top: rem(12.8px) !important;
|
||||
right: mixins.rem(16px);
|
||||
margin-top: mixins.rem(12.8px) !important;
|
||||
display: inline-block;
|
||||
min-width: auto;
|
||||
font-weight: 400;
|
||||
|
|
@ -116,11 +118,11 @@ sup {
|
|||
border-radius: 60%;
|
||||
color: #000 !important;
|
||||
background-color: rgba(204, 204, 204, 0.6);
|
||||
font-size: rem(20.8px);
|
||||
font-size: mixins.rem(20.8px);
|
||||
z-index: 999999;
|
||||
backdrop-filter: blur(rem(3.2px));
|
||||
backdrop-filter: blur(mixins.rem(3.2px));
|
||||
|
||||
@include mq(desktop) {
|
||||
@include mixins.mq(desktop) {
|
||||
right: 31%;
|
||||
}
|
||||
}
|
||||
|
|
@ -128,14 +130,14 @@ sup {
|
|||
|
||||
.share-btn {
|
||||
background: var(--modal-full-btn);
|
||||
border-radius: rem(8px);
|
||||
padding: rem(16px);
|
||||
margin: rem(16px);
|
||||
border-radius: mixins.rem(8px);
|
||||
padding: mixins.rem(16px);
|
||||
margin: mixins.rem(16px);
|
||||
display: flex;
|
||||
|
||||
.share-text {
|
||||
display: block;
|
||||
font-size: rem(19.2px);
|
||||
font-size: mixins.rem(19.2px);
|
||||
width: 93%;
|
||||
}
|
||||
|
||||
|
|
@ -148,26 +150,26 @@ sup {
|
|||
.option {
|
||||
background: var(--modal-full-btn);
|
||||
border: var(--modal-border);
|
||||
border-radius: rem(8px);
|
||||
padding: rem(16px);
|
||||
margin: rem(16px);
|
||||
border-radius: mixins.rem(8px);
|
||||
padding: mixins.rem(16px);
|
||||
margin: mixins.rem(16px);
|
||||
|
||||
.muted {
|
||||
color: #ccc;
|
||||
display: block;
|
||||
font-size: rem(12.8px);
|
||||
font-size: mixins.rem(12.8px);
|
||||
text-transform: uppercase;
|
||||
padding-bottom: rem(16px);
|
||||
padding-bottom: mixins.rem(16px);
|
||||
}
|
||||
|
||||
.price {
|
||||
display: block;
|
||||
font-size: rem(19.2px);
|
||||
font-size: mixins.rem(19.2px);
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
border: rem(1.6px) #016afe solid;
|
||||
border: mixins.rem(1.6px) #016afe solid;
|
||||
}
|
||||
|
||||
.center {
|
||||
|
|
@ -182,35 +184,35 @@ sup {
|
|||
width: 100%;
|
||||
height: auto;
|
||||
background-color: var(--modal-bg-overlay);
|
||||
backdrop-filter: blur(rem(3.2px));
|
||||
backdrop-filter: blur(mixins.rem(3.2px));
|
||||
|
||||
@include mq(desktop) {
|
||||
@include mixins.mq(desktop) {
|
||||
position: initial;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
color: #9e9e9e;
|
||||
font-size: rem(12.8px);
|
||||
font-size: mixins.rem(12.8px);
|
||||
display: block;
|
||||
margin: rem(16px);
|
||||
margin: mixins.rem(16px);
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.form-check-input {
|
||||
position: absolute;
|
||||
right: rem(32px);
|
||||
right: mixins.rem(32px);
|
||||
transform: scale(1.2);
|
||||
|
||||
@include mq(s-desktop) {
|
||||
@include mixins.mq(s-desktop) {
|
||||
transform: scale(1.5);
|
||||
}
|
||||
|
||||
@include mq(s-phone) {
|
||||
@include mixins.mq(s-phone) {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
@include mq(phone) {
|
||||
@include mixins.mq(phone) {
|
||||
transform: scale(1.5);
|
||||
}
|
||||
}
|
||||
|
|
@ -218,9 +220,9 @@ sup {
|
|||
/* Menu */
|
||||
.menu {
|
||||
background: var(--modal-full-btn);
|
||||
padding: rem(16px);
|
||||
margin-left: rem(16px);
|
||||
margin-right: rem(16px);
|
||||
padding: mixins.rem(16px);
|
||||
margin-left: mixins.rem(16px);
|
||||
margin-right: mixins.rem(16px);
|
||||
border-radius: 0;
|
||||
border-bottom: var(--nav-border);
|
||||
display: flex;
|
||||
|
|
@ -228,7 +230,7 @@ sup {
|
|||
|
||||
.label {
|
||||
display: block;
|
||||
font-size: rem(19.2px);
|
||||
font-size: mixins.rem(19.2px);
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
|
|
@ -239,20 +241,20 @@ sup {
|
|||
}
|
||||
|
||||
.twitter {
|
||||
border-top-right-radius: rem(8px);
|
||||
border-top-left-radius: rem(8px);
|
||||
border-top-right-radius: mixins.rem(8px);
|
||||
border-top-left-radius: mixins.rem(8px);
|
||||
}
|
||||
|
||||
.last {
|
||||
border-bottom-right-radius: rem(8px);
|
||||
border-bottom-left-radius: rem(8px);
|
||||
border-bottom-right-radius: mixins.rem(8px);
|
||||
border-bottom-left-radius: mixins.rem(8px);
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
color: #9e9e9e;
|
||||
font-size: rem(12.8px);
|
||||
font-size: mixins.rem(12.8px);
|
||||
display: block;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
|
@ -267,6 +269,6 @@ sup {
|
|||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
padding: rem(16px);
|
||||
padding: mixins.rem(16px);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
|
@ -1,3 +1,5 @@
|
|||
@use "../_globals/mixins";
|
||||
|
||||
/* Navbar */
|
||||
.nav {
|
||||
cursor: pointer;
|
||||
|
|
@ -6,16 +8,16 @@
|
|||
top: 0%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
backdrop-filter: blur(rem(3.2px));
|
||||
backdrop-filter: blur(mixins.rem(3.2px));
|
||||
background: var(--nav-bg);
|
||||
width: 100%;
|
||||
border-bottom: var(--nav-border);
|
||||
text-align: left;
|
||||
height: rem(67.2px);
|
||||
height: mixins.rem(67.2px);
|
||||
font-family: SF Pro Text, system-ui, -apple-system, BlinkMacSystemFont,
|
||||
Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
|
||||
@include mq(s-desktop) {
|
||||
@include mixins.mq(s-desktop) {
|
||||
bottom: 0%;
|
||||
top: initial;
|
||||
border-top: var(--nav-border);
|
||||
|
|
@ -28,29 +30,30 @@
|
|||
align-items: center;
|
||||
justify-content: space-around;
|
||||
padding: 0;
|
||||
padding-top: rem(8px);
|
||||
padding-left: rem(16px);
|
||||
padding-right: rem(16px);
|
||||
padding-top: mixins.rem(8px);
|
||||
padding-left: mixins.rem(16px);
|
||||
padding-right: mixins.rem(16px);
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.flex-item {
|
||||
height: rem(40px);
|
||||
height: mixins.rem(40px);
|
||||
margin: 0;
|
||||
padding: rem(1.6px);
|
||||
padding: mixins.rem(1.6px);
|
||||
text-align: center;
|
||||
color: #8e8e93;
|
||||
font-size: rem(16px);
|
||||
font-size: mixins.rem(16px);
|
||||
|
||||
@include theme(light) {
|
||||
@include mixins.theme(light) {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.icon {
|
||||
&:before {
|
||||
color: #8e8e93 !important;
|
||||
@include theme(light) {
|
||||
|
||||
@include mixins.theme(light) {
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
|
|
@ -60,14 +63,15 @@
|
|||
.active {
|
||||
color: #fff !important;
|
||||
|
||||
@include theme(light) {
|
||||
@include mixins.theme(light) {
|
||||
color: #007aff !important;
|
||||
}
|
||||
|
||||
.icon {
|
||||
&:before {
|
||||
color: #fff !important;
|
||||
@include theme(light) {
|
||||
|
||||
@include mixins.theme(light) {
|
||||
color: #007aff !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -76,7 +80,7 @@
|
|||
|
||||
.menu-item {
|
||||
display: block;
|
||||
padding-top: rem(4.8px);
|
||||
padding-top: mixins.rem(4.8px);
|
||||
}
|
||||
|
||||
a,
|
||||
|
|
@ -85,4 +89,4 @@
|
|||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,14 +1,16 @@
|
|||
@use "../_globals/mixins";
|
||||
|
||||
.labels {
|
||||
padding: rem(8px) !important;
|
||||
width: rem(64px) !important;
|
||||
padding: mixins.rem(8px) !important;
|
||||
width: mixins.rem(64px) !important;
|
||||
height: auto;
|
||||
|
||||
@include mq(s-phone) {
|
||||
@include mixins.mq(s-phone) {
|
||||
padding: 0.5rem !important;
|
||||
width: 2.5rem !important;
|
||||
}
|
||||
|
||||
@include mq(phone) {
|
||||
@include mixins.mq(phone) {
|
||||
width: 3rem !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -19,6 +21,10 @@
|
|||
color: var(--non-vegan);
|
||||
}
|
||||
|
||||
.maybe-vegan {
|
||||
color: var(--maybe-vegan);
|
||||
}
|
||||
|
||||
.vegan,
|
||||
.icon-ok {
|
||||
color: var(--vegan);
|
||||
|
|
@ -66,8 +72,8 @@
|
|||
}
|
||||
|
||||
.warning {
|
||||
@include mq(phone) {
|
||||
@include mixins.mq(phone) {
|
||||
font-size: 0.6rem !important;
|
||||
line-height: 1rem !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +1,5 @@
|
|||
@use "../_globals/mixins";
|
||||
|
||||
/* Rotate device screen */
|
||||
.rotate {
|
||||
z-index: 99999999999999999999;
|
||||
|
|
@ -12,8 +14,8 @@
|
|||
display: none;
|
||||
|
||||
img {
|
||||
padding-top: rem(80px);
|
||||
height: rem(128px);
|
||||
padding-top: mixins.rem(80px);
|
||||
height: mixins.rem(128px);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -30,6 +32,6 @@
|
|||
height: 100%;
|
||||
|
||||
h3 {
|
||||
padding-top: rem(80px);
|
||||
padding-top: mixins.rem(80px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +1,5 @@
|
|||
@use "../_globals/mixins";
|
||||
|
||||
/* Scanner */
|
||||
.eanscanner {
|
||||
z-index: 999999 !important;
|
||||
|
|
@ -19,7 +21,7 @@
|
|||
color: #fff;
|
||||
left: 50%;
|
||||
|
||||
@include mq(phone) {
|
||||
@include mixins.mq(phone) {
|
||||
width: 101%;
|
||||
}
|
||||
|
||||
|
|
@ -30,16 +32,16 @@
|
|||
justify-content: space-between;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
margin-left: rem(16px);
|
||||
margin-right: rem(16px);
|
||||
margin-left: mixins.rem(16px);
|
||||
margin-right: mixins.rem(16px);
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.flex-item {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
padding-top: rem(3.2px);
|
||||
font-size: rem(20.8px);
|
||||
padding-top: mixins.rem(3.2px);
|
||||
font-size: mixins.rem(20.8px);
|
||||
|
||||
&:last-child {
|
||||
float: right;
|
||||
|
|
@ -48,19 +50,19 @@
|
|||
}
|
||||
|
||||
.middle {
|
||||
font-size: rem(16px);
|
||||
font-size: mixins.rem(16px);
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.button {
|
||||
font-size: rem(11.2px);
|
||||
font-size: mixins.rem(11.2px);
|
||||
color: var(--button-fg);
|
||||
text-transform: uppercase;
|
||||
background: var(--button-bg);
|
||||
padding: rem(8px);
|
||||
padding-left: rem(24px);
|
||||
padding-right: rem(24px);
|
||||
border-radius: rem(48px);
|
||||
padding: mixins.rem(8px);
|
||||
padding-left: mixins.rem(24px);
|
||||
padding-right: mixins.rem(24px);
|
||||
border-radius: mixins.rem(48px);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -68,16 +70,16 @@
|
|||
position: fixed;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: rem(32px);
|
||||
font-size: rem(19.2px);
|
||||
bottom: mixins.rem(32px);
|
||||
font-size: mixins.rem(19.2px);
|
||||
z-index: 99999999999999999;
|
||||
color: var(--button-fg);
|
||||
text-transform: uppercase;
|
||||
background: var(--button-bg);
|
||||
padding: rem(8px);
|
||||
padding-left: rem(24px);
|
||||
padding-right: rem(24px);
|
||||
border-radius: rem(48px);
|
||||
padding: mixins.rem(8px);
|
||||
padding-left: mixins.rem(24px);
|
||||
padding-right: mixins.rem(24px);
|
||||
border-radius: mixins.rem(48px);
|
||||
transition: 0.8s;
|
||||
|
||||
&:hover,
|
||||
|
|
@ -94,14 +96,14 @@
|
|||
top: 30%;
|
||||
left: 50%;
|
||||
opacity: 0.4;
|
||||
font-size: rem(128px);
|
||||
font-size: mixins.rem(128px);
|
||||
-webkit-transform: translateX(-50%);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
/* Scanner Underlay */
|
||||
#background {
|
||||
backdrop-filter: blur(rem(48px));
|
||||
backdrop-filter: blur(mixins.rem(48px));
|
||||
z-index: 999;
|
||||
position: fixed;
|
||||
padding: 0;
|
||||
|
|
@ -114,13 +116,13 @@
|
|||
|
||||
.name {
|
||||
display: block;
|
||||
padding-bottom: rem(16px);
|
||||
padding-bottom: mixins.rem(16px);
|
||||
|
||||
@include mq(s-phone) {
|
||||
@include mixins.mq(s-phone) {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@include mq(phone) {
|
||||
@include mixins.mq(phone) {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +1,5 @@
|
|||
@use "../_globals/mixins";
|
||||
|
||||
.skeleton {
|
||||
display: block;
|
||||
width: fit-content;
|
||||
|
|
@ -10,22 +12,21 @@
|
|||
padding-bottom: 0;
|
||||
cursor: default !important;
|
||||
background: rgba(130, 130, 130, 0.2);
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
rgba(130, 130, 130, 0.2) 8%,
|
||||
rgba(130, 130, 130, 0.3) 18%,
|
||||
rgba(130, 130, 130, 0.2) 33%
|
||||
) !important;
|
||||
background-size: rem(800px) rem(100px) !important;
|
||||
background: linear-gradient(to right,
|
||||
rgba(130, 130, 130, 0.2) 8%,
|
||||
rgba(130, 130, 130, 0.3) 18%,
|
||||
rgba(130, 130, 130, 0.2) 33%) !important;
|
||||
background-size: mixins.rem(800px) mixins.rem(100px) !important;
|
||||
animation: skeleton 2s infinite ease-out;
|
||||
}
|
||||
|
||||
@keyframes skeleton {
|
||||
0% {
|
||||
background-position: rem(-468px) 0;
|
||||
background-position: mixins.rem(-468px) 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: rem(468px) 0;
|
||||
background-position: mixins.rem(468px) 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -35,12 +36,14 @@
|
|||
margin-bottom: 1rem !important;
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.description.skeleton {
|
||||
color: transparent;
|
||||
margin-left: 0;
|
||||
padding: 0;
|
||||
max-width: fit-content;
|
||||
@include mq(s-phone) {
|
||||
|
||||
@include mixins.mq(s-phone) {
|
||||
max-width: 60%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
|
@ -50,6 +53,7 @@
|
|||
margin-right: 0;
|
||||
max-width: 5%;
|
||||
}
|
||||
|
||||
.source.skeleton {
|
||||
margin-top: 1rem;
|
||||
padding-top: 0;
|
||||
|
|
@ -65,7 +69,8 @@
|
|||
width: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.button.skeleton {
|
||||
color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
45
src/styles/_modules/_tooltip.scss
Normal file
45
src/styles/_modules/_tooltip.scss
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
@use "../_globals/mixins";
|
||||
|
||||
.tooltip-wrapper {
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
display: block;
|
||||
|
||||
.Grid:first-child {
|
||||
border-top: .005rem solid #ccc;
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
margin-bottom: 0.3125rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
background-color: #333;
|
||||
color: white;
|
||||
font-size: 0.875rem;
|
||||
border-radius: 0.25rem;
|
||||
z-index: 1000;
|
||||
white-space: wrap;
|
||||
line-height: 1.25rem;
|
||||
pointer-events: none;
|
||||
width: fit-content;
|
||||
|
||||
@include mixins.mq(phone) {
|
||||
width: 90% !important;
|
||||
}
|
||||
|
||||
.tooltip-arrow {
|
||||
position: absolute;
|
||||
bottom: -0.3125rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 0.3125rem solid transparent;
|
||||
border-right: 0.3125rem solid transparent;
|
||||
border-top: 0.3125rem solid #333;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +1,5 @@
|
|||
@use "../_globals/mixins";
|
||||
|
||||
/* Selection color */
|
||||
::-moz-selection {
|
||||
background-color: #353b48;
|
||||
|
|
@ -19,7 +21,7 @@ body {
|
|||
text-align: center;
|
||||
word-wrap: break-word;
|
||||
|
||||
@include theme(light) {
|
||||
@include mixins.theme(light) {
|
||||
background-color: #7f8fa6;
|
||||
}
|
||||
}
|
||||
|
|
@ -40,7 +42,7 @@ body {
|
|||
h1 {
|
||||
color: var(--fg-color);
|
||||
|
||||
@include mq(phone) {
|
||||
@include mixins.mq(phone) {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -76,21 +78,21 @@ input[type="number"] {
|
|||
-moz-appearance: textfield;
|
||||
appearance: textfield;
|
||||
width: 55%;
|
||||
padding: rem(16px);
|
||||
padding-top: rem(15px);
|
||||
padding: mixins.rem(16px);
|
||||
padding-top: mixins.rem(15px);
|
||||
text-align: center;
|
||||
color: #000;
|
||||
font-weight: var(--body-fontweight);
|
||||
flex: 1;
|
||||
border-top: rem(0.16px) solid #ccc;
|
||||
border-bottom: rem(0.16px) solid #ccc;
|
||||
border-top: mixins.rem(0.16px) solid #ccc;
|
||||
border-bottom: mixins.rem(0.16px) solid #ccc;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
border-radius: 0;
|
||||
|
||||
@include mq(phone) {
|
||||
padding-top: rem(14px);
|
||||
padding-bottom: rem(15px);
|
||||
@include mixins.mq(phone) {
|
||||
padding-top: mixins.rem(14px);
|
||||
padding-bottom: mixins.rem(15px);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -101,9 +103,9 @@ textarea {
|
|||
color: #000;
|
||||
font-weight: var(--body-fontweight);
|
||||
flex: 1;
|
||||
border-top: rem(0.16px) solid #ccc;
|
||||
border-bottom: rem(0.16px) solid #ccc;
|
||||
border-left: rem(0.16px) solid #ccc;
|
||||
border-top: mixins.rem(0.16px) solid #ccc;
|
||||
border-bottom: mixins.rem(0.16px) solid #ccc;
|
||||
border-left: mixins.rem(0.16px) solid #ccc;
|
||||
border-right: none;
|
||||
border-radius: 0;
|
||||
resize: vertical;
|
||||
|
|
@ -111,38 +113,40 @@ textarea {
|
|||
|
||||
/* Container */
|
||||
.container {
|
||||
padding-top: rem(150px);
|
||||
padding-top: mixins.rem(150px);
|
||||
/* padding-bottom: rem(50px);*/
|
||||
width: 50%;
|
||||
margin: 0 auto;
|
||||
|
||||
@include mq(phone) {
|
||||
@include mixins.mq(phone) {
|
||||
padding-top: 4rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
img {
|
||||
width: rem(48px);
|
||||
height: rem(48px);
|
||||
width: mixins.rem(48px);
|
||||
height: mixins.rem(48px);
|
||||
}
|
||||
}
|
||||
|
||||
.top {
|
||||
@include mq(phone) {
|
||||
@include mixins.mq(phone) {
|
||||
padding-top: 0.5rem;
|
||||
}
|
||||
@include mq(s-phone) {
|
||||
|
||||
@include mixins.mq(s-phone) {
|
||||
padding-top: 0.5rem;
|
||||
}
|
||||
@include mq(s-desktop) {
|
||||
|
||||
@include mixins.mq(s-desktop) {
|
||||
padding-top: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
padding-bottom: rem(32px);
|
||||
padding-bottom: mixins.rem(32px);
|
||||
|
||||
@include mq(phone) {
|
||||
@include mixins.mq(phone) {
|
||||
padding-bottom: 1rem;
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
|
@ -150,7 +154,7 @@ textarea {
|
|||
|
||||
/* Longpage for Privacy/Imprint */
|
||||
.longpage {
|
||||
padding-top: rem(50px) !important;
|
||||
padding-top: mixins.rem(50px) !important;
|
||||
color: #000;
|
||||
|
||||
a,
|
||||
|
|
@ -166,23 +170,24 @@ p.missing {
|
|||
}
|
||||
|
||||
p {
|
||||
line-height: rem(24px);
|
||||
@include theme(light) {
|
||||
line-height: mixins.rem(24px);
|
||||
|
||||
@include mixins.theme(light) {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
footer {
|
||||
font-size: rem(13.6px);
|
||||
font-size: mixins.rem(13.6px);
|
||||
padding-bottom: 4.8rem;
|
||||
|
||||
@include mq(s-phone) {
|
||||
@include mixins.mq(s-phone) {
|
||||
font-size: 0.6rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
@include mq(phone) {
|
||||
@include mixins.mq(phone) {
|
||||
font-size: 0.7rem;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 1rem;
|
||||
|
|
@ -190,7 +195,7 @@ footer {
|
|||
}
|
||||
|
||||
a {
|
||||
@include theme(light) {
|
||||
@include mixins.theme(light) {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
|
@ -198,7 +203,8 @@ footer {
|
|||
a:hover,
|
||||
a:focus {
|
||||
color: #7f8fa6;
|
||||
@include theme(light) {
|
||||
|
||||
@include mixins.theme(light) {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
|
@ -214,4 +220,4 @@ table {
|
|||
table tbody,
|
||||
thead {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +1,5 @@
|
|||
@use "../_globals/mixins";
|
||||
|
||||
#result {
|
||||
height: auto;
|
||||
-webkit-box-orient: vertical;
|
||||
|
|
@ -9,7 +11,7 @@
|
|||
line-height: 2rem;
|
||||
padding-bottom: 1rem;
|
||||
|
||||
@include mq(phone) {
|
||||
@include mixins.mq(phone) {
|
||||
font-size: 1rem !important;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
|
@ -78,11 +80,11 @@
|
|||
|
||||
/* Make sure mobile functions are not displayed on desktop*/
|
||||
.icon-flipcamera {
|
||||
@include mq(desktop) {
|
||||
@include mixins.mq(desktop) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@include mq(phone) {
|
||||
@include mixins.mq(phone) {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
BIN
src/styles/font/vegancheckicons 2.eot
Normal file
BIN
src/styles/font/vegancheckicons 2.eot
Normal file
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 5.3 KiB After Width: | Height: | Size: 5.8 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -104,6 +104,12 @@
|
|||
"code": 59408,
|
||||
"src": "fontawesome"
|
||||
},
|
||||
{
|
||||
"uid": "00391fac5d419345ffcccd95b6f76263",
|
||||
"css": "attention-alt",
|
||||
"code": 61738,
|
||||
"src": "fontawesome"
|
||||
},
|
||||
{
|
||||
"uid": "98bf291fc304e3f3ab58529eba9bb24d",
|
||||
"css": "vegancheck",
|
||||
|
|
|
|||
|
|
@ -1,8 +1,25 @@
|
|||
/* Import scss structure */
|
||||
@import '_globals/normalize', '_globals/animate', '_globals/vegancheckicons', '_globals/mixins', '_globals/fonts', '_globals/roots';
|
||||
@use '_globals/normalize';
|
||||
@use '_globals/animate';
|
||||
@use '_globals/vegancheckicons';
|
||||
@use '_globals/mixins' as *;
|
||||
@use '_globals/fonts';
|
||||
@use '_globals/roots';
|
||||
|
||||
/* Import scss pages */
|
||||
@import '_pages/body', '_pages/frontpage', '_pages/more';
|
||||
@use '_pages/body';
|
||||
@use '_pages/frontpage';
|
||||
@use '_pages/more';
|
||||
|
||||
/* Import modules */
|
||||
@import '_modules/modals', '_modules/form', '_modules/label', '_modules/scanner', '_modules/overlays', '_modules/buttons', '_modules/banner', '_modules/navbar', '_modules/nutriscore', '_modules/skeleton';
|
||||
@use '_modules/modals';
|
||||
@use '_modules/form';
|
||||
@use '_modules/label';
|
||||
@use '_modules/scanner';
|
||||
@use '_modules/overlays';
|
||||
@use '_modules/buttons';
|
||||
@use '_modules/banner';
|
||||
@use '_modules/navbar';
|
||||
@use '_modules/nutriscore';
|
||||
@use '_modules/skeleton';
|
||||
@use '_modules/tooltip';
|
||||
Loading…
Reference in a new issue