enrecipes/app/app.scss

// NativeScript core theme
// @see https://docs.nativescript.org/ui/theme
@import "~@nativescript/theme/core"; // Override variables here
$gray1: #f1f3f5;
$gray2: #e9ecef;
$gray3: #dee2e6;
$gray4: #ced4da;
$gray5: #adb5bd;
$gray6: #868e96;
$gray7: #495057;
$gray8: #343a40;
$gray9: #212529;
$orange: #ff5200;
$fabRipple: #ff922b;
$red: #c92a2a;
$breakfast: #ff922b;
$lunch: #94d82d;
$dinner: #339af0;
$snacks: #845ef7; // Global SCSS styling
// @see https://docs.nativescript.org/ui/styling
.ns-modal,
Page {
  font-family: 'Orkney-Regular';
}
.orkm {
  font-family: 'Orkney-Medium';
}
.bx {
  font-family: 'boxicons';
  font-size: 24;
  vertical-alignment: center;
  &.small {
    padding: 0;
    font-size: 16;
  }
}
.ns-light {
  ActionBar,
  ListPicker,
  Page,
  SearchBar,
  TabStripItem,
  Tabs {
    color: $gray9;
    background: $gray1;
  }
  MDButton,
  MDRipple {
    ripple-color: rgba($gray6, 0.2);
  }
  .hr {
    border-color: $gray3;
  }
  .fieldLabel,
  .sd {
    background: $gray1;
  }
  .combination,
  .group-info,
  .overviewItem,
  .recipeItem,
  .textCard {
    background: white;
  }
  TextField.combinationToken {
    background: $gray3;
  }
  .sd-group-header,
  .sd-item,
  .tag,
  .time .bx {
    color: $gray8;
  }
  .option .bx,
  .option .info {
    color: $gray7;
  }
  .imageHolder {
    color: $gray4;
    background: $gray3;
  }
  .count,
  .marker,
  .noteCount {
    color: $gray1;
    background: $gray9;
  }
  .dayContainer,
  .instruction {
    border-color: $gray9;
  }
  MDProgress {
    progress-background-color: $gray4;
  }
  MDFloatingActionButton {
    color: white;
  }
  .appIconContainer {
    background: $orange;
  }
}
.ns-dark {
  ActionBar,
  ListPicker,
  Page,
  SearchBar,
  TabStripItem,
  Tabs {
    color: $gray1;
    background: $gray9;
  }
  // TabView {
  //   tab-background-color: $gray9;
  //   selected-tab-text-color: $gray1;
  // }
  MDButton,
  MDRipple {
    ripple-color: rgba($gray4, 0.1);
  }
  .hr {
    border-color: #111;
  }
  .fieldLabel,
  .sd {
    background: $gray9;
  }
  .combination,
  .overviewItem,
  .recipeItem,
  .textCard,
  TextField.combinationToken {
    background: $gray8;
  }
  .group-info {
    background: #111;
  }
  .sd-group-header,
  .sd-item,
  .tag,
  .time .bx {
    color: $gray3;
  }
  .option .bx,
  .option .info {
    color: $gray5;
  }
  .imageHolder {
    color: $gray8;
    background: #111;
  }
  .count,
  .marker,
  .noteCount {
    color: $gray9;
    background: $gray1;
  }
  .dayContainer,
  .instruction {
    border-color: $gray1;
  }
  MDProgress {
    progress-background-color: $gray6;
  }
  MDFloatingActionButton {
    color: $gray9;
  }
  .appIconContainer {
    background: $orange;
  }
}
// -----------------------------
// Elements
TextField,
TextView,
TimePickerField {
  width: 100%;
  border-width: 1;
  font-size: 14;
  padding: 13 12;
  margin: 8 0 0;
  border-radius: 4;
  border-color: $gray6;
  placeholder-color: $gray6;
}
TextView {
  line-height: 12;
}
ListPicker {
  width: 25%;
}
SearchBar {
  font-family: 'Orkney-Regular';
  font-size: 14;
  text-field-hint-color: $gray6;
}
TabView {
  tab-text-color: $gray6;
}
.inputField {
  margin-bottom: 8;
}
.fieldLabel {
  font-size: 12;
  margin-left: 8;
  padding: 0 4;
}
.progressContainer {
  width: 100%;
}
// .category,
// .group-header,
.text-btn,
MDActivityIndicator {
  color: $orange;
}
MDProgress {
  progress-color: $orange;
}
Switch {
  background-color: $orange;
  off-background-color: $gray6;
}
// -----------------------------
// ActionBar
ActionBar {
  height: 64;
  margin: 0;
  padding: 0 8;
  GridLayout {
    padding: 0;
    margin: 0;
  }
  MDButton.bx {
    padding: 0;
    margin: 0;
    &.flip {
      transform: scaleX(-1);
    }
  }
  .title {
    padding-left: 12;
    text-align: left;
    font-size: 18;
  }
}
// -----------------------------
// Side Drawer
.sd {
  padding: 8;
}
.sd-item {
  border-radius: 4;
  height: 48;
  vertical-alignment: center;
  .bx {
    font-size: 24;
    margin: 0 24 0 0;
  }
  &.selected-sd-item {
    color: $orange;
    background: rgba($orange, 0.1);
    MDRipple {
      ripple-color: transparent;
    }
  }
  // prettier-ignore
  Label {
    padding: 2 16 0 0;
    font-size: 14;
    vertical-alignment: center;
    &.bx {
      padding: 0 0 0 16;
    }
  }
  MDRipple {
    padding: 0 16;
  }
  MDButton.bx {
    margin: 0;
  }
  .recipeCount {
    padding: 4;
    font-size: 14;
    margin: 0 8 0 0;
    vertical-alignment: center;
  }
}
.sd-group-header {
  width: 100%;
  padding: 0 0 8 8;
  MDButton.bx {
    margin: 0;
  }
  .filterPath {
    line-height: 6;
  }
}
.noTags {
  font-size: 14;
  text-align: center;
  margin: 8;
}
MDRipple {
  border-radius: 4;
}
MDButton {
  padding: 8;
  min-width: 0;
  min-height: 0;
  &.bx {
    padding: 0;
    width: 48;
    height: 48;
    margin: 0 8 0 0;
    border-radius: 99;
  }
}
// -----------------------------
// 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;
    color: $gray5;
    margin-bottom: 16;
  }
  .logo {
    width: 64;
    margin-bottom: 16;
  }
  .title {
    font-size: 18;
    text-align: center;
    padding: 0;
    horizontal-alignment: center;
    .bx {
      font-size: 24;
      vertical-alignment: center;
    }
  }
}
// -----------------------------
// Recipe Items
RadListView {
  margin: 0 0 128;
  font-size: 14;
}
.recipeItem {
  margin: 4 8;
  border-radius: 4;
  .recipeInfo {
    margin: 0;
    padding: 8;
    .attr,
    .category {
      font-size: 10;
      padding: 0;
      margin: 0;
    }
    .title {
      margin: 0;
      padding: 2 0;
    }
    .attrContainer {
      padding: 0;
      .attr {
        padding: 1 8 0 2;
      }
    }
  }
}
.tagsContainer {
  padding: 2 0 0;
  .collapsedTagsCount {
    font-size: 10;
    padding: 1 0 0 2;
  }
  .tag {
    font-size: 10;
    padding: 0 4;
    margin: 0 4 0 0;
    line-height: 0;
    border-radius: 4;
    border-width: 1;
    border-color: $gray6;
  }
}
.imageHolder {
  vertical-alignment: center;
  &.card {
    border-radius: 4 0 0 4;
    // prettier-ignore
    Image {
      border-radius: 4 0 0 4;
    }
  }
}
.swipe-item {
  margin: 0 8;
  background: $red;
  color: #fff;
  height: 104;
  border-radius: 4;
}
// -----------------------------
// SETTINGS
.group-header {
  // text-transform: uppercase;
  padding: 8;
}
.group-info {
  text-align: center;
  padding: 16;
  line-height: 6;
  margin-top: 8;
  border-radius: 4;
}
.main-container {
  padding: 8 8 88;
  .option {
    font-size: 14;
    line-height: 6;
    .bx {
      margin: 11 24 11 16;
    }
    .info {
      font-size: 12;
      padding-top: 0;
    }
    StackLayout {
      margin: 9 24 9 0;
    }
  }
}
// -----------------------------
// ABOUT
.appIconContainer {
  background: $orange;
  padding: 24 0;
  width: 100%;
  border-radius: 4;
  .appIcon {
    height: 96;
  }
}
// -----------------------------
// 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: 14 8 6;
    .rating {
      margin-right: 8;
      color: $orange;
    }
  }
  .subTitle {
    font-size: 14;
    line-height: 6;
  }
  .tagsContainer {
    padding: 18 12 0;
    .tag {
      padding: 1 6;
      margin: 0 8 8 0;
    }
  }
  .overviewContainer {
    margin: 12 0 24;
    .overviewItem {
      border-radius: 4;
      margin: 4;
      android-elevation: 1;
      .bx {
        padding: 16 0 0 16;
        color: $gray6;
        horizontal-alignment: left;
      }
      .itemCount {
        font-size: 14;
        padding: 8 16 16;
      }
    }
  }
  .ingredient {
    font-family: 'Orkney-Regular';
    margin: 0 0 0 4;
  }
  .count {
    width: 24;
    height: 24;
    padding-top: 4%;
    margin: 0 0 0 8;
    text-align: center;
    vertical-alignment: top;
    horizontal-alignment: center;
    border-radius: 99;
  }
  .instruction {
    font-size: 14;
    line-height: 6;
    padding: 2 0 24 35;
    margin: 0 0 0 19;
    border-width: 0 0 0 2;
  }
  .instruction.noBorder {
    border-color: transparent;
  }
  .combination {
    margin: 8 8 0;
    border-radius: 4;
    font-size: 14;
    .bx {
      font-size: 24;
      padding: 0 0 0 16;
    }
    .combinationTitle {
      padding: 14 24;
      margin: 0;
      line-height: 6;
    }
  }
  .noteCount {
    width: 24;
    height: 24;
    padding-top: 4%;
    margin: 0 0 0 8;
    text-align: center;
    vertical-alignment: top;
    horizontal-alignment: center;
    clip-path: polygon(4% 12%, 12% 4%, 75% 4%, 96% 25%, 96% 88%, 88% 96%, 12% 96%, 4% 88%,);
  }
  .note {
    font-size: 14;
    line-height: 6;
    padding: 2 0 24 37;
    margin: 0 0 0 19;
  }
}
// -----------------------------
// FAB
#btnFabContainer {
  z-index: 100;
  width: 100%;
  height: 100%;
}
MDFloatingActionButton {
  width: 56;
  height: 56;
  margin: 16;
  background: $orange;
  ripple-color: $fabRipple;
}
// -----------------------------
// EDIT RECIPE
.sectionTitle {
  font-size: 18;
}
.text-btn {
  font-size: 14;
  horizontal-alignment: left;
  padding: 12;
  margin: 8 0 0;
  min-width: 0;
}
MDButton.closeBtn {
  margin: 16 0 0;
  width: 32;
  height: 32;
  min-width: 0;
  vertical-alignment: top;
}
// -----------------------------
// MEAL PLANNER
.dayPlan {
  padding: 0 0 88;
  width: 100%;
  .plansContainer {
    margin: 16 8 0 16;
    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;
    }
    MDRipple {
      background: white;
    }
    .recipes {
      margin: 0 8 8 16;
      .recipeTitle {
        font-size: 14;
        padding: 14 16;
        line-height: 6;
      }
    }
    // .closeBtn {
    //   margin: 0 16 0 4;
    //   vertical-alignment: top;
    // }
    MDButton,
    MDRipple {
      ripple-color: rgba($gray6, 0.2);
    }
  }
}
// -----------------------------
// DIALOGS
.dialogContainer {
  max-width: 480;
  width: 100%;
  color: $gray9;
  background: $gray1;
  font-size: 14;
  &.dark {
    color: $gray1;
    background: $gray9;
  }
  .dialogTitle {
    line-height: 6;
    padding: 24 24 16;
    font-size: 18;
  }
  .dialogInput {
    padding: 0 24 16;
  }
  .dialogDescription {
    line-height: 6;
    padding: 0 24 8;
  }
  .actionItem {
    letter-spacing: 0;
    text-transform: none;
    line-height: 6;
    padding: 13 24;
    margin: 0;
    border-radius: 1;
    background: transparent;
  }
  .actionToggle {
    background: $orange;
  }
  .actionsContainer {
    padding: 8;
  }
  .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: 4;
    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 {
  animation-name: bounce-out;
  animation-duration: 0.25s;
  animation-fill-mode: forwards;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  25% {
    transform: scale(1.2);
    opacity: 1;
  }
  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;
  }
}
.dolly-enter-active {
  animation-name: dolly;
  animation-duration: 1s;
  animation-delay: 0.25s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
}
.dolly-leave-active {
  opacity: 0;
}
@keyframes dolly {
  0% {
    transform: rotate(20deg);
  }
  25% {
    transform: rotate(-20deg);
  }
  50% {
    transform: rotate(10deg);
  }
  75% {
    transform: rotate(-10deg);
  }
  100% {
    transform: rotate(0deg);
  }
}