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: #ff7043;
$paleOrange: #fbe9e7;

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

Page {
  font-family: "Orkney-Regular";
}
.orkm {
  font-family: "Orkney-Medium";
}
.orkb {
  font-family: "Orkney-Bold";
}
.bx {
  font-family: "boxicons";
  font-size: 24;
}

.ns-light {
  Page,
  ActionBar,
  SearchBar,
  TabView {
    color: $grayD4;
    background: $grayL4;
  }
  TabView {
    tab-background-color: $grayL4;
    selected-tab-text-color: $grayD4;
  }
  .hr {
    border-color: $grayL2;
  }
  .sd,
  .fieldLabel {
    background: $grayL4;
  }
  .view-reference-text,
  .view-reference-container {
    background: white;
  }
  .option-highlight {
    background: $grayL2;
  }
  .sd-item,
  .sd-group-header,
  .recipe-time {
    color: $grayD2;
  }
  .option,
  .icon-option {
    .bx,
    .option-info {
      color: $grayD2;
    }
    .option-title {
      color: $grayD4;
    }
  }
  .view-imageHolder,
  .recipeImgContainer {
    color: $grayL1;
    background: $grayL2;
  }
  .view-other {
    color: $grayD2;
  }
  .view-count {
    color: $grayL4;
    background: $grayD4;
  }
  .view-instruction {
    border-color: $grayD4;
  }
}
.ns-dark {
  Page,
  ActionBar,
  SearchBar,
  TabView {
    color: $grayL4;
    background: $grayD4;
  }
  TabView {
    tab-background-color: $grayD4;
    selected-tab-text-color: $grayL4;
  }
  .hr {
    border-color: #111;
  }

  .sd,
  .fieldLabel {
    background: $grayD4;
  }
  .recipe-li,
  .option-highlight,
  .view-reference-text,
  .view-reference-container {
    background: $grayD3;
  }
  .sd-item,
  .sd-group-header,
  .recipe-time {
    color: $grayL2;
  }

  .option,
  .icon-option {
    .bx,
    .option-info {
      color: $grayL2;
    }
    .option-title {
      color: $grayL4;
    }
  }
  .view-imageHolder,
  .recipeImgContainer {
    color: $grayD4;
    background: #111;
  }
  .view-other {
    color: $grayL2;
  }
  .view-count {
    color: $grayD4;
    background: $grayL4;
  }
  .view-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: 13;
  margin-left: 8;
  padding: 0 8;
}
// DateTimePicker
.date-time-picker,
.date-time-picker-spinners {
  color: $grayD4;
  background: $grayL4;
  &.ns-dark {
    color: $grayL4;
    background: $grayD4;
  }
}
.ns-dark .date-time-picker-spinners {
  color: $grayL4;
  background: $grayD4;
}
// ActionBar
ActionBar {
  width: 100%;
  margin: 24 0 0 0;
  padding: 0;
  height: 64;
  .bx {
    padding: 16 12;
    vertical-alignment: center;
  }
  .leftAction {
    padding: 16 16 16 4;
    margin: 0;
  }
}
.actionBarContainer {
  margin: 0;
  padding: 0;
}
SearchBar {
  width: 100%;
  font-size: 16;
}
.title {
  padding-left: 8;
  text-align: left;
  font-size: 18;
}

// Side Drawer
.sd {
  margin-top: 24;
}

.sd-item {
  border-radius: 4;
  padding: 0 16;
  height: 48;
  font-size: 16;
  vertical-alignment: center;
  // prettier-ignore
  .bx, Label {
    vertical-alignment: center;
  }
  &.selected-sd-item {
    background: $paleOrange;
    color: $orange;
  }
}
.sd-group-header {
  width: 100%;
  padding: 8 8 16;
  font-size: 12;
}

// Home
RadListView {
  margin: 8 0 128;
}
.recipe-li {
  background: white;
  margin: 8 16;
  border-radius: 6;
  .recipe-info {
    margin: 4;
  }
  .recipe-cat {
    font-size: 12;
    padding: 0;
    margin: 0;
  }
  .recipe-title {
    font-size: 16;
    line-height: 4;
    margin: 0;
    padding: 4 0;
  }
  .recipe-time {
    padding: 0;
  }
  .recipe-cat {
    color: $orange;
  }
}
.emptyState {
  width: 100%;
  height: 100%;
}
.noResults {
  width: 100%;
  height: 100%;
  font-size: 16;
  line-height: 8;
  padding: 64 16;
  text-align: center;
  horizontal-alignment: center;
  // vertical-alignment: center;
  .title {
    font-size: 20;
    text-align: center;
  }
  .bx {
    font-size: 64;
    text-align: center;
    color: $gray;
    margin-bottom: 16;
  }
}
.swipe-item {
  margin: 0 8;
  background: #c62828;
  color: #fff;
  height: 128;
  border-radius: 6;
}
.recipeImgContainer {
  vertical-alignment: center;
  // prettier-ignore
  Image {
    border-radius: 6 0 0 6;
  }
}

// Settings
.group-header {
  padding: 8;
  color: #ff7043;
}
.main-container {
  padding: 16 8 128;
  .option {
    padding: 16;
    border-radius: 4;
    font-size: 16;
    .bx {
      margin: 0 24 0 0;
    }

    .option-info {
      font-size: 12;
    }
  }
}

// About
.app-icon-container {
  margin: 32 0;
  width: 100%;
  .app-icon {
    width: 56;
    height: 56;
    margin: 0 6 0 0;
    padding: 0;
  }
  .app-name {
    font-size: 24;
  }
}
.icon-option {
  padding: 16;
  border-radius: 4;
  .bx {
    margin: 0 24 0 0;
  }
  .option-title {
    font-size: 16;
  }
}

// View Recipe

.view-cat {
  font-size: 16;
  color: #ff7043;
}
.view-other {
  font-size: 16;
}
.view-title {
  font-size: 22;
  line-height: 6;
  margin-bottom: 16;
}
.view-ingredient {
  font-size: 16;
  line-height: 6;
  padding-bottom: 12;
}
.activity-indicator {
  background: #ff7043;
}

.view-count {
  font-size: 12;
  width: 24;
  height: 24;
  padding-top: 4%;
  margin: 0 0 0 8;
  text-align: center;
  border-radius: 100;
  &.note {
    clip-path: polygon(
      5% 0,
      95% 0,
      100% 5%,
      100% 65%,
      65% 100%,
      5% 100%,
      0 95%,
      0 5%
    );
  }
}
.view-instruction,
.view-note,
.view-reference {
  font-size: 16;
  line-height: 6;
  padding: 2 0 14 36;
  margin: 0 0 0 19;
  border-width: 0 0 0 2;
}
.view-instruction.instructionWOBorder {
  border-color: transparent;
}
.view-note {
  border-width: 0;
}

.view-reference-container {
  padding: 14 16;
  margin: 8 16 8;
  border-radius: 6;
}
.view-reference {
  padding: 0 16 0 0;
  margin: 0;
  border-width: 0;
}
.view-reference-text {
  font-size: 16;
  line-height: 6;
  padding: 16;
  margin: 8 16 8;
  border-radius: 6;
}
// .view-copyReference {
//   color: #ff7043;
// }
#btnFabContainer {
  width: 100%;
  height: 100%;
}
// Edit Recipe
.fab-button {
  color: #fff;
  height: 56;
  width: 56;
  background-color: #ff7043;
  vertical-alignment: center;
  // horizontal-alignment: center;
  border-radius: 28;
  padding: 16;
  margin: 16;
  android-elevation: 6;
  &.negative {
    background-color: #e53935;
  }
}
.sectionTitle {
  font-size: 20;
}
.sec-btn {
  font-size: 14;
  color: #ff7043;
  text-align: left;
  padding: 16;
  margin: 8 0 0 0;
}
.closeBtn {
  padding: 4;
  margin-top: 16;
}

// Dialogs
.dialogContainer {
  width: 100%;
  &.light {
    color: $grayD4;
    background: $grayL4;
  }
  &.dark {
    color: $grayL4;
    background: $grayD4;
  }
  .dialogTitle {
    padding: 24 24 12;
    font-size: 20;
  }
  .dialogInputField {
    padding: 0 24 16;
  }
  .dialogDescription {
    font-size: 16;
    line-height: 4;
    padding: 0 24 16;
  }
  .action {
    padding: 24 24 24 8;
    font-size: 12;
    color: #ff7043;
  }
  .actionItem {
    width: 100%;
    font-size: 16;
    padding: 8 20;
  }
  .cancel {
    padding: 24;
    font-size: 12;
    color: #ff7043;
  }
}
ActivityIndicator {
  color: #ff7043;
  padding: 16 12;
  margin: 16 10 16 8;
}

// Vue Transitions
.bounce-enter-active {
  animation-name: bounce-in;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
}
.bounce-leave-active {
  animation-name: bounce-in;
  animation-duration: 0.1s;
  animation-fill-mode: forwards;
  animation-direction: reverse;
  animation-timing-function: ease-in;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  50% {
    transform: scale(1.2);
    opacity: 1;
  }

  100% {
    transform: scale(1);
  }
}
.dolly-enter-active {
  animation-name: dolly;
  animation-duration: 1s;
  animation-delay: 0.25s;
  animation-fill-mode: forwards;
  animation-timing-function: ease;
}
.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);
  }
}