enrecipes/app/app.scss

// NativeScript core theme
// @see https://docs.nativescript.org/ui/theme
@import "~@nativescript/theme/core"; // Override variables here
$gray0: #fff;
$gray1: #f0f0f0;
$gray2: #e0e0e0;
$gray3: #d1d1d1;
$gray4: #c2c2c2;
$gray5: #858585;
$gray6: #575757;
$gray7: #393939;
$gray8: #292929;
$gray9: #1a1a1a;
$gray10: #000;
$orange: #ff5200;
$fabRipple: #ffa94d;
$red: #c92a2a;
$breakfast: #ffa94d;
$lunch: #69db7c;
$dinner: #4dabf7;
$snacks: #9775fa; // Global SCSS styling
// @see https://docs.nativescript.org/ui/styling
.ns-modal,
Page {
  font-family: "Inter-Medium";
}
.tb {
  font-family: "Inter-Bold";
}
.er {
  font-family: "enrecipes";
  font-size: 24;
  vertical-alignment: center;
  &.small {
    padding: 0;
    font-size: 16;
  }
}
.today {
  color: $orange;
}
.ns-modal {
  TextField,
  TextView,
  TimePickerField {
    border-color: $gray2;
    &.ns-dark {
      border-color: $gray8;
    }
  }
}
.ns-light {
  .count,
  ActionBar,
  ListPicker,
  Page,
  TabStripItem,
  Tabs {
    color: $gray9;
    background: $gray1;
  }
  TextField,
  TextView,
  TimePickerField {
    border-color: $gray2;
  }
  .hr {
    border-color: $gray2;
  }
  .sd {
    background: $gray1;
  }
  .combination,
  .hasPlans,
  .overviewItem,
  // .recipeItem,
  .titleContainer {
    background: $gray0;
  }
  .note,
  .tag {
    background: $gray2;
  }
  .combinationToken,
  .fieldLabel,
  .dayName,
  .group-info,
  .option .info {
    color: $gray6;
  }
  .done .count {
    color: $gray0;
  }
  .imageHolder {
    color: $gray3;
    background: $gray2;
  }
  .activeDay {
    color: $gray1;
    background: $gray9;
  }
  .dayContainer,
  .instruction {
    border-color: $gray9;
  }
  MDProgress {
    progress-background-color: $gray4;
  }
  .fab {
    color: $gray0;
  }
  .emptyState .icon {
    color: $gray4;
  }
}
.ns-dark {
  .count,
  ActionBar,
  ListPicker,
  Page,
  TabStripItem,
  Tabs {
    color: $gray2;
    background: $gray9;
  }
  TextField,
  TextView,
  TimePickerField {
    border-color: $gray8;
  }
  .hr {
    border-color: $gray8;
  }
  .sd {
    background: $gray9;
  }
  .combination,
  .hasPlans,
  .overviewItem,
  // .recipeItem,
  .titleContainer {
    background: $gray8;
  }
  .note,
  .tag {
    background: $gray10;
  }
  .combinationToken,
  .dayName,
  .group-info,
  .option .info,
  .fieldLabel {
    color: $gray5;
  }
  .done .count {
    color: $gray10;
  }
  .imageHolder {
    color: $gray9;
    background: $gray10;
  }
  .activeDay {
    color: $gray9;
    background: $gray2;
  }
  .dayContainer,
  .instruction {
    border-color: $gray2;
  }
  MDProgress {
    progress-background-color: $gray5;
  }
  .fab {
    color: $gray9;
  }
  .emptyState .icon {
    color: $gray6;
  }
}
// -----------------------------
// Elements
TextField,
TextView,
TimePickerField {
  width: 100%;
  font-size: 14;
  padding: 12 8;
  margin: 0 0 4;
  border-bottom-width: 1;
  // border-bottom-color: $gray5;
  placeholder-color: $gray5;
}
TextView {
  line-height: 12;
}
ListPicker {
  width: 25%;
}
TextField.searchBar {
  margin: 0;
  border-color: transparent;
}
TabView {
  tab-text-color: $gray5;
}
.inputField {
  margin-bottom: 16;
  TextField {
    horizontal-alignment: left;
  }
}
.fieldLabel {
  font-size: 12;
  // margin-left: 8;
  padding: 0;
}
.progressContainer {
  width: 100%;
}
.hr {
  padding: 0;
}
// .category,
// .group-header,
.text-btn,
MDActivityIndicator {
  color: $orange;
}
MDProgress {
  progress-color: $orange;
}
Switch {
  background-color: $orange;
  off-background-color: $gray5;
}
// -----------------------------
// Side Drawer
.sd {
  padding: 8 0;
}
.sd-item {
  border-radius: 8;
  margin: 0 8;
  height: 48;
  vertical-alignment: center;
  .er {
    font-size: 24;
    margin: 0 24 0 0;
  }
  &.selected .er {
    color: $orange;
  }
  &.selected {
    color: $orange;
    background: rgba($orange, 0.1);
    .mdr {
      ripple-color: transparent;
    }
  }
  Label {
    padding: 0 16 0 0;
    font-size: 14;
    vertical-alignment: center;
    &.er {
      padding: 0 0 0 16;
    }
  }
  .mdr {
    padding: 0 16;
  }
  MDButton.er {
    margin: 0;
  }
  .recipeCount {
    padding: 4;
    font-size: 14;
    margin: 0 8 0 0;
    vertical-alignment: center;
  }
}
.sd-group-header {
  width: 100%;
  padding: 8 8 8 16;
  MDButton.er {
    margin: 0;
    width: 32;
    height: 32;
    min-width: 0;
  }
  .filterPath {
    line-height: 0;
  }
}
.noTags {
  font-size: 14;
  text-align: center;
  margin: 8;
}
.mdr {
  border-radius: 8;
}
MDButton {
  padding: 8;
  min-width: 0;
  min-height: 0;
  &.er {
    padding: 0;
    width: 48;
    height: 48;
    margin: 0 8 0 0;
    border-radius: 99;
  }
}
MDButton,
.mdr {
  ripple-color: rgba($gray5, 0.2);
}
// -----------------------------
// HOME
.emptyStateContainer {
  width: 100%;
  height: 100%;
}
.emptyState {
  line-height: 8;
  padding: 0 32;
  text-align: center;
  font-size: 14;
  horizontal-alignment: center;
  .icon {
    font-size: 64;
    text-align: center;
    margin-bottom: 16;
  }
  .logo {
    width: 64;
    margin-bottom: 16;
  }
  .title {
    font-size: 18;
    text-align: center;
    padding: 0;
    horizontal-alignment: center;
    .er {
      font-size: 24;
      vertical-alignment: center;
    }
  }
  .searchAll {
    font-size: 14;
    width: auto;
    height: auto;
    min-width: 0;
    padding: 12;
    border-radius: 8;
    letter-spacing: 0;
    // text-transform: none;
    margin: 16;
    color: $orange;
    horizontal-alignment: center;
  }
}
// -----------------------------
// Recipe Items
CollectionView {
  font-size: 14;
}
.recipeContainer {
  padding: 0;
}
.layout1 {
  padding: 0;
  margin: 8 16;
  border-radius: 8;
  .imageHolder {
    &.card {
      border-radius: 8;
      Image {
        border-radius: 8;
      }
    }
  }
  .recipeInfo {
    vertical-align: top;
    margin: 0;
    padding: 8;
    .attr,
    .category {
      font-size: 10;
      padding: 0;
      margin: 0;
    }
    .title {
      margin: 0;
      padding: 0;
    }
    .attrContainer {
      padding: 2 0 0;
      .attr {
        padding: 0 8 0 2;
      }
    }
    .tagsContainer {
      margin-top: 4;
    }
  }
}
.layout2 {
  .recipeInfo {
    vertical-alignment: stretch;
    padding: 8;
    .tagsContainer {
      margin-top: 2;
    }
  }
}
.layout3 {
  padding: 0;
  margin: 8;
  border-radius: 8;
  .imageHolder {
    vertical-alignment: center;
    &.card {
      border-radius: 8;
      Image {
        border-radius: 8;
      }
    }
  }
  .recipeInfo {
    margin: 0;
    padding: 8;
    .attr,
    .category {
      font-size: 10;
      padding: 0;
      margin: 0;
    }
    .title {
      margin: 0;
      padding: 0;
    }
  }
  .tagsContainer {
    padding: 4 0 0;
  }
}
.firstItem {
  padding: 8 0 0;
}
.lastItem {
  padding-top: 0;
  padding-right: 0;
  padding-left: 0;
  padding-bottom: 84;
}
.odd {
  padding-left: 8;
}
.even {
  padding-right: 8;
}
.selected {
  background: rgba($orange, 0.1);
}
.tagsContainer {
  padding: 2 0 0;
  .tag {
    font-size: 10;
    padding: 1 6 2;
    margin: 0 4 0 0;
    line-height: 0;
    border-radius: 8;
  }
}
.imageHolder {
  vertical-alignment: center;
  &.card {
    border-radius: 8;
    Image {
      border-radius: 8;
    }
  }
}
// -----------------------------
// SETTINGS
.group-header {
  // text-transform: uppercase;
  padding: 8;
}
.group-info {
  padding: 16 16 16 64;
  line-height: 6;
}

.main-container {
  padding: 8 8 88;
  .option {
    padding: 14 0;
    font-size: 14;
    .er {
      padding: 0;
      margin: 0 24 0 16;
    }
    .info {
      font-size: 12;
      padding-top: 0;
      line-height: 4;
    }
    Label {
      padding: 0;
    }
    StackLayout {
      margin: 0;
      padding: 0;
      // margin: 9 24 9 0;
    }
  }
}
// -----------------------------
// ABOUT
.app-info-container {
  .app-icon {
    margin-top: 16;
    background: $orange;
    border-radius: 99;
    horizontal-alignment: center;
  }
  .app-name {
    font-size: 20;
    padding: 0;
    margin-top: 16;
    horizontal-alignment: center;
  }
  .app-version {
    font-size: 14;
    horizontal-alignment: center;
  }
  .app-info {
    text-align: center;
    padding: 8 16 24;
    line-height: 6;
  }
}
// -----------------------------
// VIEW RECIPE
.viewRecipe {
  .attr,
  .category,
  .ingredient,
  .tag,
  .tagsTitle {
    font-size: 14;
  }
  .attr,
  .category {
    margin: 0 12;
  }
  .small {
    font-size: 10;
  }
  .title {
    font-size: 18;
    line-height: 6;
    padding: 0 12;
  }
  .ratingContainer {
    margin: 16 8 8;
  }
  .rate,
  .rated {
    padding: 0 8 0 0;
  }
  .rate {
    color: $gray5;
  }
  .rated {
    color: $orange;
  }
  .tagsContainer {
    padding: 0;
    margin: 12 12 0;
    .tag {
      padding: 0 6 2;
      margin: 2 8 8 0;
    }
  }
  .overviewContainer {
    margin: 8 8 12;
    .overviewItem {
      border-radius: 8;
      margin: 4;
      // elevation: 1;
      .er {
        padding: 16 0 0 16;
        horizontal-alignment: left;
      }
      .itemCount {
        font-size: 14;
        padding: 8 16 16;
      }
    }
  }
  .count {
    width: 24;
    height: 24;
    margin: 0 0 0 8;
    text-align: center;
    vertical-alignment: top;
    horizontal-alignment: center;
    border-radius: 99;
    border-width: 2;
    border-color: $gray5;
    line-height: 0;
  }
  .instruction {
    font-size: 14;
    line-height: 6;
    padding: 2 0 24 35;
    margin: 0 0 0 19;
    border-width: 0 0 0 2;
    border-color: $gray5;
  }
  .instruction.noBorder {
    border-color: transparent;
  }
  .done .count {
    background: $orange;
    border-color: $orange;
  }
  .done .instruction {
    opacity: 0.4;
    text-decoration: line-through;
  }
  .combination {
    margin: 0 16 8;
    border-radius: 8;
    font-size: 14;
    .combinationTitle {
      padding: 14 16;
      margin: 0;
      line-height: 6;
    }
  }
  .note {
    font-size: 14;
    line-height: 6;
    padding: 14 16;
    margin: 0 0 8;
    border-radius: 8;
  }
}
// -----------------------------
// APPBAR
.appbar {
  z-index: 99;
  height: 56;
  margin: 8;
  padding: 0;
  border-radius: 99;
  background: $gray0;
  elevation: 16;
  android-elevation: 16;
  GridLayout {
    padding: 0;
    margin: 0;
  }
  .er {
    padding: 0;
    margin: 4 4 4 0;
    &.menu {
      margin: 4;
    }
  }
  .fab {
    width: 56;
    height: 56;
    margin: 0;
    background: $orange;
    ripple-color: $fabRipple;
  }
  .title {
    @extend .tb;
    padding: 0 0 0 8;
    text-align: left;
    vertical-align: center;
    font-size: 18;
  }
}
// -----------------------------
// EDIT RECIPE
.sectionTitle {
  @extend .tb;
  font-size: 18;
}
.text-btn {
  font-size: 14;
  horizontal-alignment: left;
  padding: 12;
  margin: 8 0 0;
  min-width: 0;
}
MDButton.x {
  margin: 0 0 5;
  width: 32;
  height: 32;
  min-width: 0;
  vertical-alignment: center;
}
// -----------------------------
// MEAL PLANNER
.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;
  }
}
.dayPlan {
  padding: 0 8 88;
  width: 100%;
  .plansContainer {
    margin: 16 0 0 8;
    padding: 0;
    border-left-width: 8;
    &.breakfast {
      border-left-color: $breakfast;
    }
    &.lunch {
      border-left-color: $lunch;
    }
    &.dinner {
      border-left-color: $dinner;
    }
    &.snacks {
      border-left-color: $snacks;
    }
    .periodLabel {
      text-transform: capitalize;
      vertical-alignment: center;
      font-size: 14;
      padding: 0 0 0 16;
    }
    .recipe {
      margin: 0 8;
      .titleContainer {
        border-radius: 8;
        margin: 0 0 8 8;
      }
      .recipeTitle {
        font-size: 14;
        padding: 14 16;
        line-height: 6;
      }
    }
    .x {
      margin: 8 0 16 8;
      vertical-alignment: center;
    }
  }
}
// -----------------------------
// DIALOGS
.dialogContainer {
  max-width: 480;
  width: 100%;
  color: $gray9;
  background: $gray1;
  border-radius: 8;
  font-size: 14;
  margin: 64 0;
  &.dark {
    color: $gray2;
    background: $gray9;
  }
  .dialogHeader {
    padding: 24;
  }
  .dialogIcon {
    font-size: 24;
    vertical-alignment: center;
  }
  .dialogTitle {
    @extend .tb;
    line-height: 6;
    padding: 0 0 0 18;
    font-size: 18;
    vertical-alignment: center;
  }
  .dialogInput {
    padding: 0 24 16;
  }
  .dialogDescription {
    line-height: 6;
    padding: 0 24 8;
  }
  .actionItem {
    width: 100%;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1;
    padding: 13 24;
    margin: 0;
    border-radius: 1;
    background: transparent;
    // background: red;
  }
  .actionToggle {
    background: $orange;
  }
  .actionsContainer {
    padding: 8;
  }
  .shareItem {
    border-radius: 8;
    margin: 0 8 8;
    // elevation: 1;
    text-align: center;
    .er {
      padding: 16 0 0;
    }
    .item {
      padding: 8 16 16;
    }
  }
  .action {
    font-size: 12;
    padding: 12;
    min-width: 0;
    color: $orange;
  }
  MDButton.actionIcon {
    font-size: 14;
    width: auto;
    height: auto;
    min-width: 0;
    padding: 16 24;
    border-radius: 8;
    letter-spacing: 0;
    text-transform: none;
    margin: 0 16 16;
  }
}
// -----------------------------
MDActivityIndicator {
  width: 24;
  height: 24;
  margin: 16 12;
}
// -----------------------------
// Transitions
.bounce-enter-active {
  animation-name: bounce-in;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
}
.bounce-leave-active {
  transform: scale(0);
  opacity: 0;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  25% {
    transform: scale(1);
    opacity: 1;
  }
  55% {
    transform: scale(0.8);
  }
  80% {
    transform: scale(1);
  }
}