enrecipes/app/app.scss

632 lines
8.8 KiB
SCSS
Raw Normal View History

2021-04-01 10:55:35 +00:00
$gray0: #f8f9fa;
$gray1: #f1f3f5;
$gray2: #e9ecef;
$gray3: #dee2e6;
$gray4: #ced4da;
$gray5: #adb5bd;
$gray6: #868e96;
$gray7: #495057;
$gray8: #343a40;
$gray9: #212529;
$gray10: #000000;
$orange: #ff5200;
2021-04-01 10:55:35 +00:00
Page {
2021-03-23 06:16:25 +00:00
font-family: "Inter-Medium";
2021-04-01 10:55:35 +00:00
font-size: 14;
2020-09-15 11:10:16 +00:00
}
2021-04-01 10:55:35 +00:00
.ico {
2021-03-21 17:02:04 +00:00
font-family: "enrecipes";
2020-10-14 19:32:32 +00:00
font-size: 24;
2020-11-02 11:36:53 +00:00
vertical-alignment: center;
2021-04-01 10:55:35 +00:00
&.sm {
2020-11-02 11:36:53 +00:00
font-size: 16;
2021-04-12 18:09:48 +00:00
opacity: 0.5;
2020-11-02 11:36:53 +00:00
}
2020-10-14 19:32:32 +00:00
}
2021-04-12 18:09:48 +00:00
.tb {
font-family: "Inter-Bold";
}
2021-04-01 10:55:35 +00:00
.tac {
text-align: center;
2021-01-23 17:20:15 +00:00
}
2021-04-01 10:55:35 +00:00
.tw {
text-wrap: true;
2021-03-21 17:02:04 +00:00
}
2021-04-01 10:55:35 +00:00
.pageTitle {
@extend .tb;
@extend .tw;
font-size: 25;
padding: 16;
}
.Light {
color: $gray9;
background: $gray1;
Page,
2021-04-14 09:27:40 +00:00
.filters,
.sticky {
2020-11-10 18:28:48 +00:00
background: $gray1;
2020-10-14 19:32:32 +00:00
}
2021-03-21 17:02:04 +00:00
TextField,
2021-04-01 10:55:35 +00:00
TextView {
border-color: $gray3;
placeholder-color: $gray5;
2021-03-21 17:02:04 +00:00
}
2021-04-01 10:55:35 +00:00
.modalInput {
2021-01-23 17:20:15 +00:00
border-color: $gray2;
2020-10-14 19:32:32 +00:00
}
2021-04-01 10:55:35 +00:00
.appbar,
2021-04-12 18:09:48 +00:00
.modal {
2021-01-23 17:20:15 +00:00
background: $gray0;
2020-11-28 19:21:57 +00:00
}
2021-03-21 17:02:04 +00:00
.fieldLabel,
2021-01-23 17:20:15 +00:00
.dayName,
2021-04-01 10:55:35 +00:00
.sub {
2021-01-23 17:20:15 +00:00
color: $gray6;
}
2021-04-01 10:55:35 +00:00
.imgHolder {
2021-01-23 17:20:15 +00:00
color: $gray3;
background: $gray2;
2020-10-14 19:32:32 +00:00
}
2021-04-01 10:55:35 +00:00
.snackBar {
2020-11-10 18:28:48 +00:00
color: $gray1;
background: $gray9;
2020-10-14 19:32:32 +00:00
}
2021-04-12 18:09:48 +00:00
.fab {
2021-04-14 09:27:40 +00:00
color: #fff;
2021-01-23 17:20:15 +00:00
}
2020-10-14 19:32:32 +00:00
}
2021-04-01 10:55:35 +00:00
.Dark {
color: $gray1;
background: $gray9;
Page,
2021-04-14 09:27:40 +00:00
.filters,
.sticky {
2020-11-10 18:28:48 +00:00
background: $gray9;
2020-10-14 19:32:32 +00:00
}
2021-03-21 17:02:04 +00:00
TextField,
2021-04-01 10:55:35 +00:00
TextView {
2021-03-21 17:02:04 +00:00
border-color: $gray8;
2021-04-01 10:55:35 +00:00
placeholder-color: $gray6;
2021-03-21 17:02:04 +00:00
}
2021-04-01 10:55:35 +00:00
.modalInput {
border-color: $gray7;
2020-10-14 19:32:32 +00:00
}
2021-04-01 10:55:35 +00:00
.appbar,
2021-04-12 18:09:48 +00:00
.modal {
2021-04-01 10:55:35 +00:00
color: $gray0;
2020-11-10 18:28:48 +00:00
background: $gray8;
2020-10-14 19:32:32 +00:00
}
2021-04-01 10:55:35 +00:00
.fieldLabel,
2021-01-23 17:20:15 +00:00
.dayName,
2021-04-01 10:55:35 +00:00
.sub {
2020-11-10 18:28:48 +00:00
color: $gray5;
2020-10-14 19:32:32 +00:00
}
2021-04-01 10:55:35 +00:00
.imgHolder {
2021-01-23 17:20:15 +00:00
color: $gray9;
background: $gray10;
2020-10-14 19:32:32 +00:00
}
2021-04-01 10:55:35 +00:00
.snackBar {
2020-11-10 18:28:48 +00:00
color: $gray9;
2021-04-01 10:55:35 +00:00
background: $gray1;
2020-11-10 18:28:48 +00:00
}
2021-04-12 18:09:48 +00:00
.fab {
2020-11-10 18:28:48 +00:00
color: $gray9;
2020-10-14 19:32:32 +00:00
}
2021-04-01 10:55:35 +00:00
}
.Black {
color: $gray2;
background: $gray10;
2021-04-12 18:09:48 +00:00
Page,
2021-04-14 09:27:40 +00:00
.filters,
.sticky {
2021-04-01 10:55:35 +00:00
background: $gray10;
}
TextField,
TextView {
border-color: $gray9;
placeholder-color: $gray7;
}
.modalInput {
border-color: $gray8;
}
.appbar,
2021-04-12 18:09:48 +00:00
.modal {
2021-04-01 10:55:35 +00:00
color: $gray1;
background: $gray9;
}
.fieldLabel,
.dayName,
.sub {
2021-01-23 17:20:15 +00:00
color: $gray6;
}
2021-04-01 10:55:35 +00:00
.imgHolder {
color: $gray10;
background: $gray9;
}
.snackBar {
color: $gray10;
background: $gray2;
}
2021-04-12 18:09:48 +00:00
.fab {
2021-04-01 10:55:35 +00:00
color: $gray10;
}
}
TextField.combField,
#searchBar {
border-color: transparent;
2020-10-14 19:32:32 +00:00
}
2020-11-02 11:36:53 +00:00
// -----------------------------
2020-10-14 19:32:32 +00:00
// Elements
TextField,
2021-04-01 10:55:35 +00:00
TextView {
2020-10-21 17:54:45 +00:00
width: 100%;
2021-04-01 10:55:35 +00:00
padding: 14 8;
2021-03-21 17:02:04 +00:00
border-bottom-width: 1;
2020-10-14 19:32:32 +00:00
}
TextView {
2021-04-01 10:55:35 +00:00
line-height: 4;
2020-10-14 19:32:32 +00:00
}
2021-04-01 10:55:35 +00:00
#searchBar {
padding-left: 0;
2021-03-23 09:59:00 +00:00
margin: 0;
2020-10-22 18:36:50 +00:00
}
2020-10-14 19:32:32 +00:00
.inputField {
2021-04-01 10:55:35 +00:00
margin-bottom: 24;
2020-10-14 19:32:32 +00:00
}
.fieldLabel {
2020-11-02 11:36:53 +00:00
font-size: 12;
2020-10-14 19:32:32 +00:00
}
2020-11-10 18:28:48 +00:00
.progressContainer {
2020-11-06 09:07:41 +00:00
width: 100%;
}
2021-04-01 10:55:35 +00:00
Progress {
2021-04-12 18:09:48 +00:00
margin: 16;
background-color: $gray5;
2020-11-10 18:28:48 +00:00
}
2020-12-29 10:35:19 +00:00
Switch {
background-color: $orange;
2021-01-23 17:20:15 +00:00
off-background-color: $gray5;
2020-12-29 10:35:19 +00:00
}
2020-11-02 11:36:53 +00:00
// -----------------------------
2020-10-14 19:32:32 +00:00
// Side Drawer
2021-04-01 10:55:35 +00:00
.segment {
2021-04-12 18:09:48 +00:00
border-radius: 12;
2021-04-01 10:55:35 +00:00
margin: 0 4 0 0;
padding: 0 12;
.value {
padding-left: 8;
vertical-alignment: center;
2020-11-02 11:36:53 +00:00
}
2021-04-01 10:55:35 +00:00
&.select {
2021-01-23 17:20:15 +00:00
color: $orange;
2021-04-01 10:55:35 +00:00
@extend .hl;
2021-01-23 17:20:15 +00:00
}
2021-04-01 10:55:35 +00:00
}
Button {
background-color: transparent;
z-index: 0;
padding: 8;
2021-04-12 18:09:48 +00:00
border-radius: 12;
2021-04-01 10:55:35 +00:00
min-width: 0;
min-height: 0;
&:active {
@extend .fade;
}
2021-04-01 10:55:35 +00:00
&.ico {
padding: 0;
margin: 0;
width: 48;
height: 48;
2020-11-10 18:28:48 +00:00
}
2021-04-01 10:55:35 +00:00
&.text {
@extend .tb;
horizontal-alignment: left;
color: $orange;
2020-10-21 17:54:45 +00:00
}
2021-04-01 10:55:35 +00:00
&.big {
margin-top: 8;
padding: 16 0;
}
2021-04-01 10:55:35 +00:00
&.sm {
font-size: 12;
padding: 12;
2020-12-29 10:35:19 +00:00
}
2021-04-01 10:55:35 +00:00
&.min {
width: 40;
height: 40;
}
&.x {
2021-03-23 06:16:25 +00:00
width: 32;
height: 32;
min-width: 0;
2021-04-01 10:55:35 +00:00
margin: 0 0 0 8;
vertical-alignment: center;
2020-12-29 10:35:19 +00:00
}
2021-04-01 10:55:35 +00:00
&.rate {
margin: 0 4 0 0;
width: 32;
height: 32;
2020-11-10 18:28:48 +00:00
}
2020-10-14 19:32:32 +00:00
}
2020-11-02 11:36:53 +00:00
// -----------------------------
// HOME
2020-11-10 18:28:48 +00:00
.emptyState {
2021-04-01 10:55:35 +00:00
padding: 16 16 8;
Label {
@extend .tw;
2020-11-06 09:07:41 +00:00
}
2020-11-02 11:36:53 +00:00
.title {
2021-04-01 10:55:35 +00:00
@extend .tb;
font-size: 17;
2021-01-13 05:02:48 +00:00
}
}
2020-11-02 11:36:53 +00:00
// -----------------------------
// Recipe Items
2021-04-01 10:55:35 +00:00
.recipeItem {
padding: 8 16;
2020-11-02 11:36:53 +00:00
.recipeInfo {
2021-04-01 10:55:35 +00:00
vertical-alignment: top;
2021-04-12 18:09:48 +00:00
padding: 2 0 2 8;
2021-04-01 10:55:35 +00:00
}
.title {
padding: 0 0 4;
}
.attributes {
padding-top: 2;
.attr {
2020-12-29 10:35:19 +00:00
font-size: 10;
2021-04-01 10:55:35 +00:00
padding: 0 6 1 2;
2021-03-21 17:02:04 +00:00
}
2020-11-02 11:36:53 +00:00
}
}
2021-04-01 10:55:35 +00:00
.simple .recipeInfo {
padding: 8 0;
2021-03-21 17:02:04 +00:00
}
2021-04-01 10:55:35 +00:00
.minimal .title {
2021-01-23 17:20:15 +00:00
padding: 0;
2021-04-01 10:55:35 +00:00
}
.grid {
padding: 8;
2021-01-23 17:20:15 +00:00
.recipeInfo {
2021-04-01 10:55:35 +00:00
padding: 8 8 0;
2021-01-23 17:20:15 +00:00
}
2021-04-01 10:55:35 +00:00
&.odd {
padding: 8 8 8 16;
}
&.even {
padding: 8 16 8 8;
2021-01-23 17:20:15 +00:00
}
2021-03-23 06:16:25 +00:00
}
.lastItem {
2021-04-01 10:55:35 +00:00
margin-bottom: 128;
2021-03-23 06:16:25 +00:00
}
.selected {
2021-04-01 10:55:35 +00:00
@extend .hl;
2021-03-23 06:16:25 +00:00
}
2021-04-01 10:55:35 +00:00
.unselected {
background-color: transparent;
2020-12-29 10:35:19 +00:00
}
2021-04-01 10:55:35 +00:00
.imgHolder {
2021-04-12 18:09:48 +00:00
border-radius: 12;
}
2020-11-02 11:36:53 +00:00
// -----------------------------
// SETTINGS
2020-12-29 10:35:19 +00:00
.group-info {
2021-04-01 10:55:35 +00:00
padding: 16 16 16 72;
line-height: 4;
2020-12-29 10:35:19 +00:00
}
2021-04-01 10:55:35 +00:00
.options-list {
2020-10-14 19:32:32 +00:00
.option {
2021-04-12 18:09:48 +00:00
vertical-align: center;
2021-04-01 10:55:35 +00:00
padding: 14 8;
margin: 0 16;
.ico {
2021-03-21 17:02:04 +00:00
padding: 0;
margin: 0 24 0 16;
2020-10-14 19:32:32 +00:00
}
2021-04-01 10:55:35 +00:00
.info,
.sub {
@extend .tw;
2020-10-14 19:32:32 +00:00
}
2021-04-01 10:55:35 +00:00
.sub {
font-size: 12;
2020-11-10 18:28:48 +00:00
}
2020-10-14 19:32:32 +00:00
}
2021-04-01 10:55:35 +00:00
.listSpace {
height: 72;
}
2020-10-14 19:32:32 +00:00
}
2021-04-01 10:55:35 +00:00
2020-11-02 11:36:53 +00:00
// -----------------------------
// ABOUT
2021-04-01 10:55:35 +00:00
.app-info {
.icon {
margin: 16;
2021-03-21 17:02:04 +00:00
background: $orange;
2021-04-12 18:09:48 +00:00
border-radius: 16;
2021-03-21 17:02:04 +00:00
horizontal-alignment: center;
}
2021-04-01 10:55:35 +00:00
.name {
font-size: 17;
2021-03-21 17:02:04 +00:00
}
2021-04-01 10:55:35 +00:00
.info {
2021-03-21 17:02:04 +00:00
padding: 8 16 24;
2021-04-01 10:55:35 +00:00
line-height: 4;
2020-10-14 19:32:32 +00:00
}
}
2020-11-02 11:36:53 +00:00
// -----------------------------
// VIEW RECIPE
2021-04-01 10:55:35 +00:00
.photo {
2021-04-12 18:09:48 +00:00
border-radius: 12;
2021-04-01 10:55:35 +00:00
margin: 24 16 0 0;
vertical-align: top;
}
2021-04-12 18:09:48 +00:00
.photoviewer {
width: 96;
height: 96;
opacity: 0;
background: #000;
}
2021-04-01 10:55:35 +00:00
.attribute {
margin: 8 16;
2020-11-02 11:36:53 +00:00
.title {
2021-04-01 10:55:35 +00:00
margin-right: 8;
font-size: 12;
2021-01-23 17:20:15 +00:00
}
2021-04-01 10:55:35 +00:00
.value {
@extend .tb;
@extend .tw;
2021-01-23 17:20:15 +00:00
}
2021-04-01 10:55:35 +00:00
.clickable {
2021-01-23 17:20:15 +00:00
color: $orange;
2020-12-29 10:35:19 +00:00
}
2021-04-01 10:55:35 +00:00
}
.ingredient {
padding: 0 16;
.value {
@extend .tw;
vertical-align: center;
padding: 14 0 14 16;
line-height: 4;
2020-11-02 11:36:53 +00:00
}
2021-04-01 10:55:35 +00:00
}
.instruction {
padding: 0 16;
2020-11-02 11:36:53 +00:00
.count {
2021-04-01 10:55:35 +00:00
@extend .tb;
font-size: 17;
2021-01-23 17:20:15 +00:00
}
2021-04-01 10:55:35 +00:00
.value {
@extend .tw;
padding: 14 0 14 16;
line-height: 4;
2020-11-02 11:36:53 +00:00
}
2021-04-01 10:55:35 +00:00
}
.done {
opacity: 0.5;
// @extend .fade;
.value {
text-decoration: line-through;
2020-10-14 19:32:32 +00:00
}
}
2021-04-01 10:55:35 +00:00
.combination {
@extend .tw;
text-align: left;
padding: 16;
line-height: 4;
}
.note {
@extend .tw;
line-height: 4;
padding: 16 0;
}
2021-04-12 18:09:48 +00:00
.dateInfo {
padding: 32 16 16;
font-size: 12;
line-height: 4;
}
2020-11-02 11:36:53 +00:00
// -----------------------------
2021-03-23 09:59:00 +00:00
// APPBAR
.appbar {
2021-04-12 18:09:48 +00:00
z-index: 32;
2021-04-01 10:55:35 +00:00
min-height: 56;
2021-03-23 09:59:00 +00:00
margin: 8;
2021-04-01 10:55:35 +00:00
padding: 4;
2021-04-12 18:09:48 +00:00
border-radius: 16;
2021-03-23 09:59:00 +00:00
.title {
@extend .tb;
2021-04-01 10:55:35 +00:00
@extend .tw;
2021-03-23 09:59:00 +00:00
vertical-align: center;
2021-04-01 10:55:35 +00:00
line-height: 4;
}
.msg {
padding: 14 16;
}
.fab {
margin-left: 4;
2021-03-23 09:59:00 +00:00
}
2020-10-14 19:32:32 +00:00
}
2021-04-01 10:55:35 +00:00
.toolbar {
2021-04-12 18:09:48 +00:00
z-index: 24;
2021-04-01 10:55:35 +00:00
padding: 4;
margin-bottom: 0;
horizontal-alignment: left;
.tool {
padding: 0 12;
Label {
vertical-alignment: center;
}
.ico {
padding-right: 8;
}
}
}
.fab {
width: 48;
height: 48;
margin: 0 4 0 0;
2021-04-12 18:09:48 +00:00
border-radius: 12;
2021-04-01 10:55:35 +00:00
background: $orange;
}
2020-11-02 11:36:53 +00:00
// -----------------------------
// EDIT RECIPE
2020-10-14 19:32:32 +00:00
.sectionTitle {
2021-03-23 06:16:25 +00:00
@extend .tb;
2021-04-01 10:55:35 +00:00
@extend .tw;
font-size: 21;
padding: 0;
margin: 32 0 16;
2020-09-15 11:10:16 +00:00
}
2021-04-14 09:27:40 +00:00
.sticky {
width: 100%;
padding: 0 16 16;
margin: 0;
}
2021-04-01 10:55:35 +00:00
.countdown {
font-size: 17;
color: $orange;
2020-10-21 17:54:45 +00:00
}
2020-11-02 11:36:53 +00:00
// -----------------------------
// MEAL PLANNER
2021-01-23 17:20:15 +00:00
.calendar {
padding: 0 8;
.navBtn {
margin: 0;
}
.monthName {
text-align: center;
vertical-alignment: center;
2021-04-01 10:55:35 +00:00
font-size: 17;
2021-01-23 17:20:15 +00:00
}
.dayName {
2021-04-01 10:55:35 +00:00
margin: 8 0;
2021-01-23 17:20:15 +00:00
font-size: 12;
text-align: center;
}
.day {
2021-04-12 18:09:48 +00:00
border-radius: 12;
2021-04-01 10:55:35 +00:00
}
.hasPlans {
color: $orange;
}
.activeDay {
background-color: rgba($orange, 0.2);
2021-01-23 17:20:15 +00:00
}
}
2020-11-23 09:49:58 +00:00
.dayPlan {
2021-04-01 10:55:35 +00:00
padding: 16 16 80;
width: 100%;
2021-04-01 10:55:35 +00:00
.periodLabel {
font-size: 17;
text-transform: capitalize;
vertical-align: center;
}
.recipeTitle {
@extend .tw;
text-align: left;
padding: 16 0;
line-height: 4;
}
}
// -----------------------------
2020-11-02 11:36:53 +00:00
// DIALOGS
2021-04-01 10:55:35 +00:00
.modal {
max-width: 320;
width: 100%;
2021-04-12 18:09:48 +00:00
border-radius: 12;
2021-04-01 10:55:35 +00:00
margin: 72 0;
.title {
2021-03-23 06:16:25 +00:00
@extend .tb;
2021-04-01 10:55:35 +00:00
@extend .tw;
padding: 16;
font-size: 21;
}
.input {
padding: 0 16 8;
2020-10-22 18:36:50 +00:00
}
2021-04-01 10:55:35 +00:00
.description {
line-height: 4;
padding: 0 16 8;
}
2021-04-01 10:55:35 +00:00
ListPicker {
width: 25%;
height: 160;
2020-10-22 18:36:50 +00:00
}
2021-04-01 10:55:35 +00:00
.listItem {
@extend .tw;
2021-03-21 17:02:04 +00:00
width: 100%;
2020-11-10 18:28:48 +00:00
letter-spacing: 0;
text-transform: none;
2021-04-01 10:55:35 +00:00
line-height: 4;
padding: 13 16;
2020-11-02 11:36:53 +00:00
margin: 0;
2020-12-29 10:35:19 +00:00
background: transparent;
2020-11-02 11:36:53 +00:00
}
2021-01-13 05:02:48 +00:00
.shareItem {
2021-04-12 18:09:48 +00:00
border-radius: 12;
2021-03-21 17:02:04 +00:00
margin: 0 8 8;
2021-01-13 05:02:48 +00:00
text-align: center;
2021-04-01 10:55:35 +00:00
.ico {
2021-01-13 05:02:48 +00:00
padding: 16 0 0;
}
.item {
2021-04-01 10:55:35 +00:00
@extend .tw;
2021-01-13 05:02:48 +00:00
padding: 8 16 16;
}
}
2021-04-01 10:55:35 +00:00
.actions {
padding: 4;
2020-10-22 18:36:50 +00:00
}
2021-04-01 10:55:35 +00:00
.filters {
padding: 8;
margin: 0 0 8;
2020-11-10 18:28:48 +00:00
}
2020-10-22 18:36:50 +00:00
}
2021-04-01 10:55:35 +00:00
.noResInfo {
@extend .tac;
@extend .tw;
padding: 16;
line-height: 4;
}
2020-11-02 11:36:53 +00:00
// -----------------------------
2021-04-01 10:55:35 +00:00
ActivityIndicator {
2020-11-02 11:36:53 +00:00
width: 24;
height: 24;
2021-04-01 10:55:35 +00:00
margin: 12;
color: $orange;
}
2020-11-02 11:36:53 +00:00
// -----------------------------
// Transitions
2021-04-01 10:55:35 +00:00
.hl {
animation-name: hl;
animation-duration: 0.2s;
animation-fill-mode: forwards;
2021-04-01 10:55:35 +00:00
animation-timing-function: ease-out;
}
2021-04-01 10:55:35 +00:00
@keyframes hl {
0% {
2021-04-01 10:55:35 +00:00
opacity: 0.5;
background-color: transparent;
}
2021-04-01 10:55:35 +00:00
100% {
opacity: 1;
2021-04-01 10:55:35 +00:00
background-color: rgba($orange, 0.2);
}
2021-04-01 10:55:35 +00:00
}
.fade {
animation-name: fade;
animation-duration: 0.2s;
animation-fill-mode: forwards;
animation-timing-function: ease-out;
}
@keyframes fade {
0% {
2021-04-12 18:09:48 +00:00
opacity: 1;
}
2021-04-01 10:55:35 +00:00
100% {
opacity: 0.5;
}
}