enrecipes/app/app.scss

845 lines
13 KiB
SCSS
Raw Normal View History

2020-09-15 11:10:16 +00:00
// NativeScript core theme
// @see https://docs.nativescript.org/ui/theme
@import "~@nativescript/theme/core"; // Override variables here
2021-01-23 17:20:15 +00:00
$gray0: #fff;
$gray1: #f0f0f0;
$gray2: #e0e0e0;
$gray3: #d1d1d1;
$gray4: #c2c2c2;
$gray5: #858585;
$gray6: #575757;
$gray7: #393939;
$gray8: #292929;
$gray9: #1A1A1A;
$gray10: #000;
$orange: #ff5200;
2021-01-23 17:20:15 +00:00
$fabRipple: #ffa94d;
2020-11-10 18:28:48 +00:00
$red: #c92a2a;
2021-01-23 17:20:15 +00:00
$breakfast: #ffa94d;
$lunch: #69db7c;
$dinner: #4dabf7;
$snacks: #9775fa; // Global SCSS styling
2020-09-15 11:10:16 +00:00
// @see https://docs.nativescript.org/ui/styling
.ns-modal,
Page {
font-family: 'Orkney-Regular';
2020-09-15 11:10:16 +00:00
}
.orkm {
font-family: 'Orkney-Medium';
2020-09-15 11:10:16 +00:00
}
2021-01-23 17:20:15 +00:00
.er {
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;
&.small {
padding: 0;
font-size: 16;
}
2020-10-14 19:32:32 +00:00
}
2021-01-23 17:20:15 +00:00
.today {
color: $orange;
}
2020-10-14 19:32:32 +00:00
.ns-light {
2021-01-23 17:20:15 +00:00
.count,
2020-10-14 19:32:32 +00:00
ActionBar,
ListPicker,
Page,
2020-10-21 17:54:45 +00:00
SearchBar,
2020-11-28 19:21:57 +00:00
TabStripItem,
Tabs {
2020-11-10 18:28:48 +00:00
color: $gray9;
background: $gray1;
2020-10-14 19:32:32 +00:00
}
.hr {
2021-01-23 17:20:15 +00:00
border-color: $gray2;
2020-10-14 19:32:32 +00:00
}
.fieldLabel,
.sd {
2020-11-10 18:28:48 +00:00
background: $gray1;
2020-10-14 19:32:32 +00:00
}
2020-12-29 10:35:19 +00:00
.combination,
2021-01-23 17:20:15 +00:00
.hasPlans,
2020-11-02 11:36:53 +00:00
.overviewItem,
.recipeItem,
2021-01-13 05:02:48 +00:00
.titleContainer {
2021-01-23 17:20:15 +00:00
background: $gray0;
2020-11-28 19:21:57 +00:00
}
2021-01-23 17:20:15 +00:00
.combinationToken,
.note,
.tag {
background: $gray2;
2020-10-14 19:32:32 +00:00
}
2021-01-23 17:20:15 +00:00
.dayName,
2021-01-13 05:02:48 +00:00
.group-info,
2020-11-10 18:28:48 +00:00
.option .info {
2021-01-23 17:20:15 +00:00
color: $gray6;
}
.done .count {
color: $gray0;
2020-10-14 19:32:32 +00:00
}
2020-11-02 11:36:53 +00:00
.imageHolder {
2021-01-23 17:20:15 +00:00
color: $gray3;
background: $gray2;
2020-10-14 19:32:32 +00:00
}
2021-01-23 17:20:15 +00:00
.selected {
background: $gray2;
}
.activeDay {
2020-11-10 18:28:48 +00:00
color: $gray1;
background: $gray9;
2020-10-14 19:32:32 +00:00
}
.dayContainer,
.instruction {
2020-11-10 18:28:48 +00:00
border-color: $gray9;
}
MDProgress {
progress-background-color: $gray4;
}
MDFloatingActionButton {
2021-01-23 17:20:15 +00:00
color: $gray0;
2020-11-02 11:36:53 +00:00
}
2020-11-12 12:06:17 +00:00
.appIconContainer {
background: $orange;
}
2021-01-23 17:20:15 +00:00
.emptyState .icon {
color: $gray4;
}
2020-10-14 19:32:32 +00:00
}
.ns-dark {
2021-01-23 17:20:15 +00:00
.count,
2020-10-14 19:32:32 +00:00
ActionBar,
ListPicker,
Page,
2020-10-21 17:54:45 +00:00
SearchBar,
2020-11-28 19:21:57 +00:00
TabStripItem,
Tabs {
2021-01-23 17:20:15 +00:00
color: $gray2;
2020-11-10 18:28:48 +00:00
background: $gray9;
2020-10-14 19:32:32 +00:00
}
.hr {
2021-01-23 17:20:15 +00:00
border-color: $gray8;
2020-10-14 19:32:32 +00:00
}
.fieldLabel,
.sd {
2020-11-10 18:28:48 +00:00
background: $gray9;
2020-10-14 19:32:32 +00:00
}
2020-12-29 10:35:19 +00:00
.combination,
2021-01-23 17:20:15 +00:00
.hasPlans,
2020-11-02 11:36:53 +00:00
.overviewItem,
2020-11-15 21:13:06 +00:00
.recipeItem,
2021-01-23 17:20:15 +00:00
.titleContainer {
2020-11-10 18:28:48 +00:00
background: $gray8;
2020-10-14 19:32:32 +00:00
}
2021-01-23 17:20:15 +00:00
.combinationToken,
.note,
.tag {
background: $gray10;
2020-11-02 11:36:53 +00:00
}
2021-01-23 17:20:15 +00:00
.dayName,
2021-01-13 05:02:48 +00:00
.group-info,
2020-11-10 18:28:48 +00:00
.option .info {
color: $gray5;
2020-10-14 19:32:32 +00:00
}
2021-01-23 17:20:15 +00:00
.done .count {
color: $gray10;
}
2020-11-02 11:36:53 +00:00
.imageHolder {
2021-01-23 17:20:15 +00:00
color: $gray9;
background: $gray10;
2020-10-14 19:32:32 +00:00
}
2021-01-23 17:20:15 +00:00
.selected {
background: $gray6;
}
.activeDay {
2020-11-10 18:28:48 +00:00
color: $gray9;
2021-01-23 17:20:15 +00:00
background: $gray2;
2020-10-14 19:32:32 +00:00
}
.dayContainer,
.instruction {
2021-01-23 17:20:15 +00:00
border-color: $gray2;
2020-11-10 18:28:48 +00:00
}
MDProgress {
2021-01-23 17:20:15 +00:00
progress-background-color: $gray5;
2020-11-10 18:28:48 +00:00
}
MDFloatingActionButton {
color: $gray9;
2020-10-14 19:32:32 +00:00
}
2020-11-12 12:06:17 +00:00
.appIconContainer {
background: $orange;
}
2021-01-23 17:20:15 +00:00
.emptyState .icon {
color: $gray6;
}
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,
TextView,
TimePickerField {
2020-10-21 17:54:45 +00:00
width: 100%;
2020-10-14 19:32:32 +00:00
border-width: 1;
2020-10-21 17:54:45 +00:00
font-size: 14;
2020-12-29 10:35:19 +00:00
padding: 13 12;
margin: 8 0 0;
2020-10-14 19:32:32 +00:00
border-radius: 4;
2021-01-23 17:20:15 +00:00
border-color: $gray5;
placeholder-color: $gray5;
2020-10-14 19:32:32 +00:00
}
TextView {
line-height: 12;
}
ListPicker {
width: 25%;
}
2020-11-10 18:28:48 +00:00
SearchBar {
font-family: 'Orkney-Regular';
2020-12-29 10:35:19 +00:00
font-size: 14;
2021-01-23 17:20:15 +00:00
text-field-hint-color: $gray5;
2020-11-10 18:28:48 +00:00
}
2020-10-22 18:36:50 +00:00
TabView {
2021-01-23 17:20:15 +00:00
tab-text-color: $gray5;
2020-10-22 18:36:50 +00:00
}
2020-10-14 19:32:32 +00:00
.inputField {
2020-12-29 10:35:19 +00:00
margin-bottom: 8;
2020-10-14 19:32:32 +00:00
}
.fieldLabel {
2020-11-02 11:36:53 +00:00
font-size: 12;
2020-12-29 10:35:19 +00:00
margin-left: 8;
2020-11-10 18:28:48 +00:00
padding: 0 4;
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-01-23 17:20:15 +00:00
.hr {
padding: 0;
}
2020-12-29 10:35:19 +00:00
// .category,
// .group-header,
.text-btn,
2020-11-10 18:28:48 +00:00
MDActivityIndicator {
color: $orange;
}
2020-11-10 18:28:48 +00:00
MDProgress {
progress-color: $orange;
}
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
// ActionBar
ActionBar {
2020-12-29 10:35:19 +00:00
height: 64;
margin: 0;
2020-12-29 10:35:19 +00:00
padding: 0 8;
2020-11-10 18:28:48 +00:00
GridLayout {
padding: 0;
margin: 0;
}
2021-01-23 17:20:15 +00:00
MDButton.er {
2020-11-10 18:28:48 +00:00
padding: 0;
2020-10-14 19:32:32 +00:00
margin: 0;
2020-11-02 11:36:53 +00:00
}
.title {
2020-11-10 18:28:48 +00:00
padding-left: 12;
2020-11-02 11:36:53 +00:00
text-align: left;
font-size: 18;
2020-10-14 19:32:32 +00:00
}
}
2020-11-02 11:36:53 +00:00
// -----------------------------
2020-10-14 19:32:32 +00:00
// Side Drawer
.sd {
padding: 8;
}
2020-10-14 19:32:32 +00:00
.sd-item {
border-radius: 4;
2020-10-21 17:54:45 +00:00
height: 48;
vertical-alignment: center;
2021-01-23 17:20:15 +00:00
.er {
2020-11-02 11:36:53 +00:00
font-size: 24;
2020-12-29 10:35:19 +00:00
margin: 0 24 0 0;
2020-11-02 11:36:53 +00:00
}
2021-01-23 17:20:15 +00:00
&.selected .er {
color: $orange;
}
&.selected {
color: $orange;
2020-11-10 18:28:48 +00:00
background: rgba($orange, 0.1);
MDRipple {
ripple-color: transparent;
}
}
2020-10-21 17:54:45 +00:00
// prettier-ignore
2020-11-02 11:36:53 +00:00
Label {
2020-11-23 09:49:58 +00:00
padding: 2 16 0 0;
2020-12-29 10:35:19 +00:00
font-size: 14;
2020-10-21 17:54:45 +00:00
vertical-alignment: center;
2021-01-23 17:20:15 +00:00
&.er {
2020-11-10 18:28:48 +00:00
padding: 0 0 0 16;
}
}
MDRipple {
padding: 0 16;
2020-10-21 17:54:45 +00:00
}
2021-01-23 17:20:15 +00:00
MDButton.er {
margin: 0;
}
2020-12-29 10:35:19 +00:00
.recipeCount {
padding: 4;
font-size: 14;
margin: 0 8 0 0;
vertical-alignment: center;
}
2020-10-14 19:32:32 +00:00
}
.sd-group-header {
2020-10-21 17:54:45 +00:00
width: 100%;
2021-01-23 17:20:15 +00:00
padding: 0 0 0 8;
MDButton.er {
2020-12-29 10:35:19 +00:00
margin: 0;
}
.filterPath {
line-height: 6;
}
}
.noTags {
font-size: 14;
text-align: center;
margin: 8;
2020-11-10 18:28:48 +00:00
}
MDRipple {
border-radius: 4;
}
MDButton {
padding: 8;
min-width: 0;
min-height: 0;
2021-01-23 17:20:15 +00:00
&.er {
2020-11-10 18:28:48 +00:00
padding: 0;
width: 48;
height: 48;
margin: 0 8 0 0;
border-radius: 99;
}
2020-10-14 19:32:32 +00:00
}
2021-01-23 17:20:15 +00:00
MDButton,
MDRipple {
ripple-color: rgba($gray5, 0.2);
}
2020-11-02 11:36:53 +00:00
// -----------------------------
// HOME
2020-11-10 18:28:48 +00:00
.emptyStateContainer {
width: 100%;
height: 100%;
}
2020-11-10 18:28:48 +00:00
.emptyState {
line-height: 8;
padding: 0 32;
text-align: center;
2020-12-29 10:35:19 +00:00
font-size: 14;
horizontal-alignment: center;
2020-11-02 11:36:53 +00:00
.icon {
font-size: 64;
text-align: center;
margin-bottom: 16;
}
2020-11-06 09:07:41 +00:00
.logo {
width: 64;
margin-bottom: 16;
}
2020-11-02 11:36:53 +00:00
.title {
2020-12-29 10:35:19 +00:00
font-size: 18;
2020-11-02 11:36:53 +00:00
text-align: center;
padding: 0;
horizontal-alignment: center;
2021-01-23 17:20:15 +00:00
.er {
2020-11-02 11:36:53 +00:00
font-size: 24;
vertical-alignment: center;
}
}
2021-01-13 05:02:48 +00:00
.searchAll {
font-size: 14;
width: auto;
height: auto;
min-width: 0;
padding: 12;
border-radius: 4;
letter-spacing: 0;
// text-transform: none;
margin: 16;
color: $orange;
horizontal-alignment: center;
}
}
2020-11-02 11:36:53 +00:00
// -----------------------------
// Recipe Items
2021-01-23 17:20:15 +00:00
ListView {
2020-12-29 10:35:19 +00:00
font-size: 14;
2020-11-02 11:36:53 +00:00
}
2021-01-23 17:20:15 +00:00
.recipeContainer {
padding: 0;
}
.firstItem {
padding: 12 0 0;
}
.lastItem {
padding: 0 0 84;
}
.layout1 {
padding: 0;
margin: 4 16;
2020-11-06 09:07:41 +00:00
border-radius: 4;
2020-11-02 11:36:53 +00:00
.recipeInfo {
2020-12-29 10:35:19 +00:00
margin: 0;
padding: 8;
.attr,
.category {
font-size: 10;
2020-11-02 11:36:53 +00:00
padding: 0;
margin: 0;
}
.title {
margin: 0;
2020-12-29 10:35:19 +00:00
padding: 2 0;
2020-11-02 11:36:53 +00:00
}
2020-12-29 10:35:19 +00:00
.attrContainer {
2020-11-02 11:36:53 +00:00
padding: 0;
2020-12-29 10:35:19 +00:00
.attr {
padding: 1 8 0 2;
2020-11-02 11:36:53 +00:00
}
}
}
}
2021-01-23 17:20:15 +00:00
.layout2 {
padding: 0;
margin: 4;
border-radius: 4;
.imageHolder {
vertical-alignment: center;
&.card {
border-radius: 4 4 0 0;
// prettier-ignore
Image {
border-radius: 4 4 0 0;
}
}
}
.recipeInfo {
margin: 0;
padding: 8;
.attr,
.category {
font-size: 10;
padding: 0;
margin: 0;
}
.title {
margin: 0;
padding: 2 0;
}
}
.tagsContainer {
padding: 4 0 0;
}
}
2020-12-29 10:35:19 +00:00
.tagsContainer {
padding: 2 0 0;
.tag {
font-size: 10;
2021-01-23 17:20:15 +00:00
padding: 1 4;
2020-12-29 10:35:19 +00:00
margin: 0 4 0 0;
line-height: 0;
2021-01-23 17:20:15 +00:00
border-radius: 2;
2020-12-29 10:35:19 +00:00
}
}
2020-11-02 11:36:53 +00:00
.imageHolder {
vertical-alignment: center;
&.card {
2020-11-06 09:07:41 +00:00
border-radius: 4 0 0 4;
// prettier-ignore
Image {
border-radius: 4 0 0 4;
}
}
}
2020-11-02 11:36:53 +00:00
.swipe-item {
margin: 0 8;
2020-11-10 18:28:48 +00:00
background: $red;
2020-11-02 11:36:53 +00:00
color: #fff;
2020-12-29 10:35:19 +00:00
height: 104;
2020-11-06 09:07:41 +00:00
border-radius: 4;
2020-11-02 11:36:53 +00:00
}
// -----------------------------
// SETTINGS
2020-10-14 19:32:32 +00:00
.group-header {
2020-12-29 10:35:19 +00:00
// text-transform: uppercase;
2020-10-21 17:54:45 +00:00
padding: 8;
2020-10-14 19:32:32 +00:00
}
2020-12-29 10:35:19 +00:00
.group-info {
text-align: center;
padding: 16;
line-height: 6;
2021-01-13 05:02:48 +00:00
// margin-top: 8;
2020-12-29 10:35:19 +00:00
border-radius: 4;
}
2020-10-14 19:32:32 +00:00
.main-container {
2020-11-28 19:21:57 +00:00
padding: 8 8 88;
2020-10-14 19:32:32 +00:00
.option {
2020-12-29 10:35:19 +00:00
font-size: 14;
line-height: 6;
2021-01-23 17:20:15 +00:00
.er {
2020-11-28 19:21:57 +00:00
margin: 11 24 11 16;
2020-10-14 19:32:32 +00:00
}
2020-11-10 18:28:48 +00:00
.info {
2020-10-14 19:32:32 +00:00
font-size: 12;
2020-12-29 10:35:19 +00:00
padding-top: 0;
2020-10-14 19:32:32 +00:00
}
2020-11-10 18:28:48 +00:00
StackLayout {
2020-11-28 19:21:57 +00:00
margin: 9 24 9 0;
2020-11-10 18:28:48 +00:00
}
2020-10-14 19:32:32 +00:00
}
}
2020-11-02 11:36:53 +00:00
// -----------------------------
// ABOUT
.appIconContainer {
2020-11-06 09:07:41 +00:00
background: $orange;
padding: 24 0;
2020-10-14 19:32:32 +00:00
width: 100%;
border-radius: 4;
2020-11-02 11:36:53 +00:00
.appIcon {
2021-01-13 05:02:48 +00:00
height: 104;
2020-10-14 19:32:32 +00:00
}
}
2020-11-02 11:36:53 +00:00
// -----------------------------
// VIEW RECIPE
.viewRecipe {
2020-12-29 10:35:19 +00:00
.attr,
2020-11-02 11:36:53 +00:00
.category,
.ingredient,
2020-12-29 10:35:19 +00:00
.tag,
.tagsTitle {
font-size: 14;
2020-11-02 11:36:53 +00:00
}
2020-12-29 10:35:19 +00:00
.attr,
2020-11-02 11:36:53 +00:00
.category {
2020-12-29 10:35:19 +00:00
margin: 0 12;
2020-11-02 11:36:53 +00:00
}
2020-12-29 10:35:19 +00:00
.small {
font-size: 10;
2020-11-02 11:36:53 +00:00
}
.title {
2020-12-29 10:35:19 +00:00
font-size: 18;
2020-11-02 11:36:53 +00:00
line-height: 6;
2020-12-29 10:35:19 +00:00
padding: 0 12;
}
.ratingContainer {
2021-01-23 17:20:15 +00:00
margin: 16 8 8;
2020-11-02 11:36:53 +00:00
}
2021-01-23 17:20:15 +00:00
.rate,
.rated {
padding: 0 8 0 0;
}
.rate {
color: $gray5;
}
.rated {
color: $orange;
2020-12-29 10:35:19 +00:00
}
.tagsContainer {
2021-01-23 17:20:15 +00:00
padding: 0;
margin: 12 12 0;
2020-12-29 10:35:19 +00:00
.tag {
2021-01-23 17:20:15 +00:00
padding: 2 6;
2020-12-29 10:35:19 +00:00
margin: 0 8 8 0;
}
}
2020-11-02 11:36:53 +00:00
.overviewContainer {
2021-01-23 17:20:15 +00:00
margin: 8 8 12;
2020-11-02 11:36:53 +00:00
.overviewItem {
2020-11-06 09:07:41 +00:00
border-radius: 4;
2020-12-29 10:35:19 +00:00
margin: 4;
2020-11-02 11:36:53 +00:00
android-elevation: 1;
2021-01-23 17:20:15 +00:00
.er {
2020-12-29 10:35:19 +00:00
padding: 16 0 0 16;
2020-11-02 11:36:53 +00:00
horizontal-alignment: left;
}
.itemCount {
2020-12-29 10:35:19 +00:00
font-size: 14;
padding: 8 16 16;
2020-11-02 11:36:53 +00:00
}
}
}
.count {
width: 24;
height: 24;
margin: 0 0 0 8;
text-align: center;
2020-12-29 10:35:19 +00:00
vertical-alignment: top;
horizontal-alignment: center;
2020-11-06 09:07:41 +00:00
border-radius: 99;
2021-01-23 17:20:15 +00:00
border-width: 2;
border-color: $gray5;
2020-11-02 11:36:53 +00:00
}
2020-11-28 19:21:57 +00:00
.instruction {
2020-12-29 10:35:19 +00:00
font-size: 14;
2020-11-02 11:36:53 +00:00
line-height: 6;
2020-12-29 10:35:19 +00:00
padding: 2 0 24 35;
2020-11-02 11:36:53 +00:00
margin: 0 0 0 19;
border-width: 0 0 0 2;
2021-01-23 17:20:15 +00:00
border-color: $gray5;
2020-11-02 11:36:53 +00:00
}
.instruction.noBorder {
border-color: transparent;
}
2021-01-23 17:20:15 +00:00
.done .count {
background: $orange;
border-color: $orange;
}
.done .instruction {
opacity: 0.4;
text-decoration: line-through;
}
2020-12-29 10:35:19 +00:00
.combination {
2021-01-23 17:20:15 +00:00
margin: 0 16 8;
2020-11-06 09:07:41 +00:00
border-radius: 4;
2020-12-29 10:35:19 +00:00
font-size: 14;
.combinationTitle {
2021-01-13 05:02:48 +00:00
padding: 14 16;
2020-11-02 11:36:53 +00:00
margin: 0;
2020-11-15 10:51:10 +00:00
line-height: 6;
2020-11-02 11:36:53 +00:00
}
}
2020-12-29 10:35:19 +00:00
.note {
font-size: 14;
2020-11-02 11:36:53 +00:00
line-height: 6;
2021-01-23 17:20:15 +00:00
padding: 14 16;
margin: 0 0 8;
border-radius: 4;
2020-10-14 19:32:32 +00:00
}
}
2020-11-02 11:36:53 +00:00
// -----------------------------
// FAB
2020-10-22 18:36:50 +00:00
#btnFabContainer {
2020-11-28 19:21:57 +00:00
z-index: 100;
2020-10-22 18:36:50 +00:00
width: 100%;
height: 100%;
}
2020-11-10 18:28:48 +00:00
MDFloatingActionButton {
2020-11-11 15:49:06 +00:00
width: 56;
height: 56;
2020-10-14 19:32:32 +00:00
margin: 16;
2020-11-10 18:28:48 +00:00
background: $orange;
ripple-color: $fabRipple;
2020-10-14 19:32:32 +00:00
}
2020-11-02 11:36:53 +00:00
// -----------------------------
// EDIT RECIPE
2020-10-14 19:32:32 +00:00
.sectionTitle {
2020-12-29 10:35:19 +00:00
font-size: 18;
2020-10-14 19:32:32 +00:00
}
2020-11-02 11:36:53 +00:00
.text-btn {
2020-10-14 19:32:32 +00:00
font-size: 14;
2020-11-02 11:36:53 +00:00
horizontal-alignment: left;
2020-11-10 18:28:48 +00:00
padding: 12;
margin: 8 0 0;
2020-11-10 18:28:48 +00:00
min-width: 0;
2020-09-15 11:10:16 +00:00
}
2021-01-23 17:20:15 +00:00
MDButton.x {
margin: 8 0 0;
2020-11-11 13:50:33 +00:00
width: 32;
height: 32;
2020-11-10 18:28:48 +00:00
min-width: 0;
2021-01-23 17:20:15 +00:00
vertical-alignment: center;
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 {
horizontal-alignment: center;
margin: 0;
}
.monthName {
text-align: center;
vertical-alignment: center;
font-size: 18;
padding: 24 0;
}
.dayName {
padding: 8 4;
font-size: 12;
text-align: center;
}
.day {
font-size: 14;
margin: 4;
width: 32;
height: 32;
// horizontal-alignment: center;
border-radius: 99;
text-align: center;
}
}
2020-11-23 09:49:58 +00:00
.dayPlan {
2021-01-23 17:20:15 +00:00
padding: 0 8 88;
width: 100%;
2020-11-23 09:49:58 +00:00
.plansContainer {
2021-01-23 17:20:15 +00:00
margin: 16 0 0 8;
2020-12-29 10:35:19 +00:00
padding: 0;
border-left-width: 8;
&.breakfast {
2020-12-29 10:35:19 +00:00
border-left-color: $breakfast;
}
&.lunch {
2020-12-29 10:35:19 +00:00
border-left-color: $lunch;
}
&.dinner {
2020-12-29 10:35:19 +00:00
border-left-color: $dinner;
}
&.snacks {
2020-12-29 10:35:19 +00:00
border-left-color: $snacks;
}
.periodLabel {
2020-12-29 10:35:19 +00:00
text-transform: capitalize;
vertical-alignment: center;
2020-11-23 09:49:58 +00:00
font-size: 14;
padding: 0 0 0 16;
}
2021-01-13 05:02:48 +00:00
.recipe {
margin: 0 8;
.titleContainer {
border-radius: 4;
2021-01-23 17:20:15 +00:00
margin: 0 0 8 8;
2021-01-13 05:02:48 +00:00
}
.recipeTitle {
font-size: 14;
2020-12-29 10:35:19 +00:00
padding: 14 16;
line-height: 6;
}
}
2021-01-23 17:20:15 +00:00
.x {
margin: 8 0 16 8;
vertical-alignment: center;
}
}
}
// -----------------------------
2020-11-02 11:36:53 +00:00
// DIALOGS
2020-10-22 18:36:50 +00:00
.dialogContainer {
2020-11-23 09:49:58 +00:00
max-width: 480;
width: 100%;
2020-11-10 18:28:48 +00:00
color: $gray9;
background: $gray1;
2020-12-29 10:35:19 +00:00
font-size: 14;
2020-10-22 18:36:50 +00:00
&.dark {
2021-01-23 17:20:15 +00:00
color: $gray2;
2020-11-10 18:28:48 +00:00
background: $gray9;
2020-10-22 18:36:50 +00:00
}
2021-01-13 05:02:48 +00:00
.dialogIcon {
text-align: center;
padding: 32;
font-size: 48;
}
2020-10-22 18:36:50 +00:00
.dialogTitle {
2020-11-23 09:49:58 +00:00
line-height: 6;
2020-11-10 18:28:48 +00:00
padding: 24 24 16;
2020-12-29 10:35:19 +00:00
font-size: 18;
2020-10-22 18:36:50 +00:00
}
2020-11-02 11:36:53 +00:00
.dialogInput {
padding: 0 24 16;
}
2020-10-22 18:36:50 +00:00
.dialogDescription {
2020-11-10 18:28:48 +00:00
line-height: 6;
padding: 0 24 8;
2020-10-22 18:36:50 +00:00
}
.actionItem {
2020-11-10 18:28:48 +00:00
letter-spacing: 0;
text-transform: none;
2020-11-15 10:51:10 +00:00
line-height: 6;
2020-11-28 19:21:57 +00:00
padding: 13 24;
2020-11-02 11:36:53 +00:00
margin: 0;
2020-12-29 10:35:19 +00:00
border-radius: 1;
background: transparent;
}
.actionToggle {
background: $orange;
2020-10-22 18:36:50 +00:00
}
2020-11-02 11:36:53 +00:00
.actionsContainer {
2020-11-10 18:28:48 +00:00
padding: 8;
2020-11-02 11:36:53 +00:00
}
2021-01-13 05:02:48 +00:00
.shareItem {
border-radius: 4;
margin: 0 16 16;
android-elevation: 1;
text-align: center;
2021-01-23 17:20:15 +00:00
.er {
2021-01-13 05:02:48 +00:00
padding: 16 0 0;
}
.item {
padding: 8 16 16;
}
}
2020-11-02 11:36:53 +00:00
.action {
2020-10-22 18:36:50 +00:00
font-size: 12;
2020-11-10 18:28:48 +00:00
padding: 12;
min-width: 0;
2020-12-29 10:35:19 +00:00
color: $orange;
2020-10-22 18:36:50 +00:00
}
2020-11-10 18:28:48 +00:00
MDButton.actionIcon {
2020-12-29 10:35:19 +00:00
font-size: 14;
2020-11-10 18:28:48 +00:00
width: auto;
height: auto;
min-width: 0;
padding: 16 24;
border-radius: 4;
letter-spacing: 0;
text-transform: none;
margin: 0 16 16;
}
2020-10-22 18:36:50 +00:00
}
2020-11-02 11:36:53 +00:00
// -----------------------------
2020-11-10 18:28:48 +00:00
MDActivityIndicator {
2020-11-02 11:36:53 +00:00
width: 24;
height: 24;
2020-11-11 15:49:06 +00:00
margin: 16 12;
}
2020-11-02 11:36:53 +00:00
// -----------------------------
// Transitions
.bounce-enter-active {
animation-name: bounce-in;
2020-11-02 11:36:53 +00:00
animation-duration: 1s;
animation-fill-mode: forwards;
2020-11-02 11:36:53 +00:00
animation-timing-function: ease-in-out;
}
.bounce-leave-active {
animation-name: bounce-out;
animation-duration: 0.25s;
animation-fill-mode: forwards;
}
@keyframes bounce-in {
0% {
transform: scale(0);
opacity: 0;
}
2020-11-02 11:36:53 +00:00
25% {
transform: scale(1.2);
opacity: 1;
}
2020-11-02 11:36:53 +00:00
50% {
transform: scale(0.9);
}
75% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
@keyframes bounce-out {
0% {
transform: scale(1);
}
100% {
transform: scale(0);
opacity: 0;
}
}