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;
  }
  .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 {
    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 {
    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 {
    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;
  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;
  }
}
// ActionBar
ActionBar {
  width: 100%;
  margin: 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-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-bottom: 128;
}
.recipe-li {
  background: white;
  margin: 8 16;
  border-radius: 6;
  .recipe-info {
    margin: 4 0;
  }
  .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-favorite {
    font-size: 12;
    padding: 14 8 0 0;
  }
  .recipe-cat,
  .recipe-favorite {
    color: $orange;
  }
}

// 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: 14;
  color: #ff7043;
}
.view-other {
  font-size: 14;
}
.view-title {
  font-size: 22;
  line-height: 6;
  margin-bottom: 16;
}
.view-ingredient {
  font-size: 14;
  line-height: 6;
  padding-bottom: 16;
}
.view-favorited {
  color: #ff7043;
}
.activity-indicator {
  background: #ff7043;
}

.view-count {
  font-size: 10;
  width: 20;
  height: 20;
  padding-top: 3%;
  margin: 0 0 0 6;
  text-align: center;
  border-radius: 100;
}

.view-instruction,
.view-note,
.view-reference {
  font-size: 14;
  line-height: 6;
  padding: 0 0 16 24;
  margin: 0 0 0 15;
  border-width: 0 0 0 2;
}
.view-instruction.instructionWOBorder {
  border-color: transparent;
}

.view-note {
  border-width: 0;
}
.view-reference {
  border-width: 0;
}
#btnFabContainer {
  width: 100%;
  height: 100%;
}
// Edit Recipe
.fab-button {
  color: white;
  height: 56;
  width: 56;
  background-color: #ff7043;
  horizontal-align: center;
  vertical-align: center;
  border-radius: 100;
  padding: 16;
  margin: 16;
}
.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 {
  &.light {
    color: $grayD4;
    background: $grayL4;
  }
  &.dark {
    color: $grayL4;
    background: $grayD4;
  }
  .dialogTitle {
    padding: 24 24 12;
    font-size: 20;
  }
  .dialogDescription {
    font-size: 16;
    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;
  }
}