enrecipes/app/app.scss

// NativeScript core theme
// @see https://docs.nativescript.org/ui/theme
@import "~@nativescript/theme/core";

// Override variables here

$grayD4: #212121;
$grayD3: #424242;
$grayD2: #616161;
$grayD1: #757575;
$gray: #9e9e9e;
$grayL1: #e0e0e0;
$grayL2: #eeeeee;
$grayL3: #f5f5f5;
$grayL4: #fafafa;
$orange: #ff5722;

// Global SCSS styling
// @see https://docs.nativescript.org/ui/styling

// * {
//   font-size: 16;
// }
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 {
  Page,
  ActionBar,
  SearchBar,
  TabView,
  ListPicker {
    color: $grayD4;
    background: $grayL4;
  }
  TabView {
    tab-background-color: $grayL4;
    selected-tab-text-color: $grayD4;
  }
  .hr {
    border-color: $grayL2;
  }
  .sd,
  .fieldLabel {
    background: $grayL4;
  }
  .referenceItem,
  .recipeText,
  .overviewItem,
  .recipeItem {
    background: white;
  }
  .option-highlight,
  .selected-sd-item {
    background: $grayL2;
  }
  .sd-item,
  .sd-group-header,
  .time .bx {
    color: $grayD2;
  }
  .fab-button {
    color: white;
    background-color: $orange;
  }
  .option,
  .icon-option {
    .bx,
    .option-info {
      color: $grayD2;
    }
  }
  .imageHolder {
    color: $gray;
    background: $grayL2;
  }
  .count {
    color: $grayL4;
    background: $grayD4;
  }
  .instruction {
    border-color: $grayD4;
  }
}

.ns-dark {
  Page,
  ActionBar,
  SearchBar,
  TabView,
  ListPicker {
    color: $grayL4;
    background: $grayD4;
  }
  TabView {
    tab-background-color: $grayD4;
    selected-tab-text-color: $grayL4;
  }
  .hr {
    border-color: #111;
  }
  .sd,
  .fieldLabel {
    background: $grayD4;
  }
  .referenceItem,
  .recipeText,
  .overviewItem,
  .recipeItem,
  .option-highlight {
    background: $grayD3;
  }
  .sd-item,
  .sd-group-header,
  .time .bx {
    color: $grayL2;
  }
  .selected-sd-item {
    background: #111;
  }
  .fab-button {
    color: #111;
    background: $orange;
  }
  .option,
  .icon-option {
    .bx,
    .option-info {
      color: $gray;
    }
  }
  .imageHolder {
    color: $gray;
    background: #111;
  }
  .count {
    color: $grayD4;
    background: $grayL4;
  }
  .instruction {
    border-color: $grayL4;
  }
}
// -----------------------------
// Elements
TextField,
TextView,
TimePickerField {
  width: 100%;
  border-width: 1;
  font-size: 14;
  padding: 14 14 13;
  margin: 8 0 0 0;
  border-radius: 4;
  border-color: $gray;
  placeholder-color: $gray;
}
TextView {
  line-height: 12;
}
TabView {
  tab-text-color: $gray;
}
.inputField {
  margin-top: 16;
}
.fieldLabel {
  font-size: 12;
  margin-left: 8;
  padding: 0 8;
}
// prettier-ignore
.progressContainer{
  width: 100%;
}
// prettier-ignore
.text-btn,
.group-header,
.category,
ActivityIndicator,
Progress {
  color: $orange;
}
// -----------------------------
// ActionBar
ActionBar {
  margin: 0;
  padding: 0;
  height: 64;
  .bx {
    padding: 16 16 16 4;
    margin: 0;
    vertical-alignment: center;
  }
  .title {
    padding-left: 8;
    text-align: left;
    font-size: 18;
  }
}
// -----------------------------
// Side Drawer
.sd {
  padding: 8;
}
.sd-item {
  border-radius: 4;
  padding: 0 16;
  height: 48;
  vertical-alignment: center;
  .bx {
    font-size: 24;
  }
  &.selected-sd-item {
    color: $orange;
  }
  // prettier-ignore
  Label {
    font-size: 16;
    vertical-alignment: center;
  }
}
.sd-group-header {
  width: 100%;
  padding: 8 8 16;
}
// -----------------------------
// HOME
.emptyState,
.noResult {
  width: 100%;
  height: 100%;
}
.noResult {
  line-height: 8;
  padding: 64 16;
  text-align: center;
  font-size: 16;
  horizontal-alignment: center;
  vertical-alignment: center;
  .icon {
    font-size: 64;
    text-align: center;
    color: $gray;
    margin-bottom: 16;
  }
  .logo {
    width: 64;
    margin-bottom: 16;
  }
  .title {
    font-size: 20;
    text-align: center;
    padding: 0;
    margin: 0;
    horizontal-alignment: center;
    .bx {
      font-size: 24;
      vertical-alignment: center;
    }
  }
}
// -----------------------------
// Recipe Items
RadListView {
  margin: 0 0 128;
  font-size: 16;
}
.recipeItem {
  margin: 8 16;
  border-radius: 4;
  .recipeInfo {
    margin: 4;
    .category,
    .time {
      font-size: 12;
      padding: 0;
      margin: 0;
    }
    .title {
      margin: 0;
      padding: 4 0;
    }
    .timeContainer {
      padding: 0;
      .time {
        padding: 0 0 0 4;
      }
    }
  }
}
.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: #c62828;
  color: #fff;
  height: 128;
  border-radius: 4;
}
// -----------------------------
// SETTINGS
.group-header {
  padding: 8;
}
.main-container {
  padding: 16 8 128;
  .option {
    font-size: 16;
    padding: 16;
    .bx {
      margin: 0 24 0 0;
    }
    .option-info {
      font-size: 12;
      line-height: 4;
    }
  }
}
// -----------------------------
// ABOUT
.appIconContainer {
  background: $orange;
  padding: 16 0;
  width: 100%;
  .appIcon {
    height: 128;
  }
}
// -----------------------------
// VIEW RECIPE
.viewRecipe {
  .category,
  .time,
  .ingredient,
  .ingredient-check {
    font-size: 16;
  }
  .category {
    margin: 0 8;
  }
  .time {
    margin: 0 8;
    .bx {
      vertical-align: top;
    }
  }
  .title {
    font-size: 22;
    line-height: 6;
  }
  .overviewContainer {
    margin-top: 12;
    .overviewItem {
      border-radius: 4;
      padding: 8;
      margin: 8;
      android-elevation: 1;
      .bx {
        color: $gray;
        width: 24;
        horizontal-alignment: left;
      }
      .itemCount {
        font-size: 16;
        padding: 8 4 4;
      }
    }
  }
  .ingredient,
  .ingredient-check {
    line-height: 6;
    padding-bottom: 12;
  }
  .ingredient-check {
    margin-bottom: 12;
  }
  .count {
    width: 24;
    height: 24;
    padding-top: 4%;
    margin: 0 0 0 8;
    text-align: center;
    border-radius: 99;
    &.square {
      clip-path: polygon(
        5% 0,
        95% 0,
        100% 5%,
        100% 65%,
        65% 100%,
        5% 100%,
        0 95%,
        0 5%
      );
    }
  }
  .instruction,
  .note,
  .reference {
    font-size: 16;
    line-height: 6;
    padding: 2 0 14 36;
    margin: 0 0 0 19;
    border-width: 0 0 0 2;
  }
  .instruction.noBorder {
    border-color: transparent;
  }
  .note {
    border-width: 0;
  }
  .referenceItem {
    padding: 14 16;
    margin: 8 16 8;
    border-radius: 4;
    font-size: 16;
    .bx {
      font-size: 24;
    }
    .recipeLink {
      padding: 0 16 0 0;
      margin: 0;
    }
  }
  .recipeText {
    font-size: 16;
    line-height: 6;
    padding: 16;
    margin: 8 16 8;
    border-radius: 4;
  }
}
// -----------------------------
// FAB
#btnFabContainer {
  width: 100%;
  height: 100%;
}
.fab-button {
  height: 56;
  width: 56;
  border-radius: 28;
  padding: 16;
  margin: 16;
  vertical-alignment: center;
  android-elevation: 6;
}
// -----------------------------
// EDIT RECIPE
.sectionTitle {
  font-size: 20;
}
.text-btn {
  font-size: 14;
  horizontal-alignment: left;
  padding: 16;
  margin: 8 0 0 0;
}
.closeBtn {
  padding: 4;
  margin-top: 16;
  vertical-alignment: top;
}
// -----------------------------
// DIALOGS
.dialogContainer {
  width: 100%;
  color: $grayD4;
  background: $grayL4;
  font-size: 16;
  &.dark {
    color: $grayL4;
    background: $grayD4;
  }
  .dialogTitle {
    padding: 24 24 12;
    font-size: 20;
  }
  .dialogInput {
    padding: 0 24 16;
  }
  .dialogDescription {
    line-height: 4;
    padding: 0 24 16;
  }
  .actionItem {
    padding: 8 24;
    margin: 0;
  }
  .actionsContainer {
    padding: 24;
  }
  .action {
    font-size: 12;
    color: #ff7043;
  }
}

// -----------------------------
ActivityIndicator {
  width: 24;
  height: 24;
  margin: 16;
}
// -----------------------------
// 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);
  }
}