enrecipes/app/app.scss

$gray0: #f8f9fa;
$gray1: #f1f3f5;
$gray2: #e9ecef;
$gray3: #dee2e6;
$gray4: #ced4da;
$gray5: #adb5bd;
$gray6: #868e96;
$gray7: #495057;
$gray8: #343a40;
$gray9: #212529;
$gray10: #000000;
$orange: #ff5200;

Page {
  font-family: "Inter-Medium";
  font-size: 14;
}
.ico {
  font-family: "enrecipes";
  font-size: 24;
  vertical-alignment: center;
  &.sm {
    font-size: 16;
    opacity: 0.5;
  }
}
.tb {
  font-family: "Inter-Bold";
}
.tac {
  text-align: center;
}
.tw {
  text-wrap: true;
}
.pageTitle {
  @extend .tb;
  @extend .tw;
  font-size: 25;
  padding: 16;
}
.Light {
  color: $gray9;
  background: $gray1;
  Page,
  .filters,
  .sticky {
    background: $gray1;
  }
  TextField,
  TextView {
    border-color: $gray3;
    placeholder-color: $gray5;
  }
  .modalInput {
    border-color: $gray2;
  }
  .appbar,
  .modal {
    background: $gray0;
  }
  .fieldLabel,
  .dayName,
  .sub {
    color: $gray6;
  }
  .imgHolder {
    color: $gray3;
    background: $gray2;
  }
  .snackBar {
    color: $gray1;
    background: $gray9;
  }
  .fab {
    color: #fff;
  }
}
.Dark {
  color: $gray1;
  background: $gray9;
  Page,
  .filters,
  .sticky {
    background: $gray9;
  }
  TextField,
  TextView {
    border-color: $gray8;
    placeholder-color: $gray6;
  }
  .modalInput {
    border-color: $gray7;
  }
  .appbar,
  .modal {
    color: $gray0;
    background: $gray8;
  }
  .fieldLabel,
  .dayName,
  .sub {
    color: $gray5;
  }
  .imgHolder {
    color: $gray9;
    background: $gray10;
  }
  .snackBar {
    color: $gray9;
    background: $gray1;
  }
  .fab {
    color: $gray9;
  }
}
.Black {
  color: $gray2;
  background: $gray10;
  Page,
  .filters,
  .sticky {
    background: $gray10;
  }
  TextField,
  TextView {
    border-color: $gray9;
    placeholder-color: $gray7;
  }
  .modalInput {
    border-color: $gray8;
  }
  .appbar,
  .modal {
    color: $gray1;
    background: $gray9;
  }
  .fieldLabel,
  .dayName,
  .sub {
    color: $gray6;
  }
  .imgHolder {
    color: $gray10;
    background: $gray9;
  }
  .snackBar {
    color: $gray10;
    background: $gray2;
  }
  .fab {
    color: $gray10;
  }
}
TextField.combField,
#searchBar {
  border-color: transparent;
}
// -----------------------------
// Elements
TextField,
TextView {
  width: 100%;
  padding: 14 8;
  border-bottom-width: 1;
}
TextView {
  line-height: 4;
}
#searchBar {
  padding-left: 0;
  margin: 0;
}
.inputField {
  margin-bottom: 24;
}
.fieldLabel {
  font-size: 12;
}
.progressContainer {
  width: 100%;
}
Progress {
  margin: 16;
  background-color: $gray5;
}
Switch {
  background-color: $orange;
  off-background-color: $gray5;
}
// -----------------------------
// Side Drawer
.segment {
  border-radius: 12;
  margin: 0 4 0 0;
  padding: 0 12;
  .value {
    padding-left: 8;
    vertical-alignment: center;
  }
  &.select {
    color: $orange;
    @extend .hl;
  }
}
Button {
  background-color: transparent;
  z-index: 0;
  padding: 8;
  border-radius: 12;
  min-width: 0;
  min-height: 0;
  &:active {
    @extend .fade;
  }
  &.ico {
    padding: 0;
    margin: 0;
    width: 48;
    height: 48;
  }
  &.text {
    @extend .tb;
    horizontal-alignment: left;
    color: $orange;
  }
  &.big {
    margin-top: 8;
    padding: 16 0;
  }
  &.sm {
    font-size: 12;
    padding: 12;
  }
  &.min {
    width: 40;
    height: 40;
  }
  &.x {
    width: 32;
    height: 32;
    min-width: 0;
    margin: 0 0 0 8;
    vertical-alignment: center;
  }
  &.rate {
    margin: 0 4 0 0;
    width: 32;
    height: 32;
  }
}
// -----------------------------
// HOME
.emptyState {
  padding: 16 16 8;
  Label {
    @extend .tw;
  }
  .title {
    @extend .tb;
    font-size: 17;
  }
}
// -----------------------------
// Recipe Items
.recipeItem {
  padding: 8 16;
  .recipeInfo {
    vertical-alignment: center;
    padding: 0 0 4 8;
  }
  .title {
    padding: 0 0 4;
  }
  .attr {
    font-size: 10;
    padding: 0 6 1 2;
  }
}
.simple .recipeInfo {
  padding: 8 0;
}
.minimal .title {
  padding: 0;
}

.grid {
  padding: 8;
  .recipeInfo {
    padding: 8 0 4;
  }
  &.odd {
    padding: 8 8 8 16;
  }
  &.even {
    padding: 8 16 8 8;
  }
}
.photogrid .recipeInfo {
  padding: 8 0 0;
}
.lastItem {
  margin-bottom: 128;
}
.selected {
  @extend .hl;
}
.unselected {
  background-color: transparent;
}
.imgHolder {
  border-radius: 12;
}
// -----------------------------
// SETTINGS
.group-info {
  padding: 16 16 16 72;
  line-height: 4;
}
.options-list {
  .option {
    vertical-align: center;
    padding: 14 8;
    margin: 0 16;
    .ico {
      padding: 0;
      margin: 0 24 0 16;
    }
    .info,
    .sub {
      @extend .tw;
    }
    .sub {
      font-size: 12;
    }
  }
  .listSpace {
    height: 72;
  }
}

// -----------------------------
// ABOUT
.app-info {
  .icon {
    horizontal-alignment: center;
  }
  .name {
    font-size: 21;
  }
  .info {
    padding: 8 16 24;
    line-height: 4;
  }
}
// -----------------------------
// VIEW RECIPE
.photo {
  border-radius: 12;
  margin: 24 16 0 0;
  vertical-align: top;
}
.photoviewer {
  width: 96;
  height: 96;
  opacity: 0;
  background: #000;
}
.attribute {
  margin: 8 16;
  .title {
    margin-right: 8;
    font-size: 12;
  }
  .value {
    @extend .tb;
    @extend .tw;
  }
  .clickable {
    color: $orange;
  }
}
.ingredient {
  padding: 0 16;
  .value {
    @extend .tw;
    vertical-align: center;
    padding: 14 0 14 16;
    line-height: 4;
  }
}
.instruction {
  padding: 0 16;
  .count {
    @extend .tb;
    font-size: 17;
  }
  .value {
    @extend .tw;
    padding: 14 0 14 16;
    line-height: 4;
  }
}
.done {
  opacity: 0.5;
  // @extend .fade;
  .value {
    text-decoration: line-through;
  }
}
.combination {
  @extend .tw;
  text-align: left;
  padding: 16;
  line-height: 4;
}
.note {
  @extend .tw;
  line-height: 4;
  padding: 16 0;
}
.dateInfo {
  padding: 32 16 16;
  font-size: 12;
  line-height: 4;
}
// -----------------------------
// APPBAR
.appbar {
  z-index: 4;
  min-height: 56;
  margin: 8;
  padding: 4;
  border-radius: 16;
  .title {
    @extend .tb;
    @extend .tw;
    vertical-align: center;
    line-height: 4;
  }
  .msg {
    padding: 14 16;
  }
  .fab {
    margin-left: 4;
  }
}
.toolbar {
  z-index: 4;
  padding: 4;
  margin-bottom: 0;
  horizontal-alignment: left;
  .tool {
    padding: 0 12;
    Label {
      vertical-alignment: center;
    }
    .ico {
      padding-right: 8;
    }
  }
}
.fab {
  width: 48;
  height: 48;
  margin: 0 4 0 0;
  border-radius: 12;
  background: $orange;
}
// -----------------------------
// EDIT RECIPE
.sectionTitle {
  @extend .tb;
  @extend .tw;
  font-size: 21;
  padding: 0;
  margin: 32 0 16;
}
.sticky {
  width: 100%;
  padding: 0 16 16;
  margin: 0;
}
.countdown {
  font-size: 17;
  color: $orange;
}
// -----------------------------
// MEAL PLANNER
.calendar {
  padding: 0 8;
  .navBtn {
    margin: 0;
  }
  .monthName {
    text-align: center;
    vertical-alignment: center;
    font-size: 17;
  }
  .dayName {
    margin: 8 0;
    font-size: 12;
    text-align: center;
  }
  .day {
    border-radius: 12;
  }
  .hasPlans {
    color: $orange;
  }
  .activeDay {
    background-color: rgba($orange, 0.2);
  }
}
.dayPlan {
  padding: 16 16 80;
  width: 100%;
  .periodLabel {
    font-size: 17;
    text-transform: capitalize;
    vertical-align: center;
  }
  .recipeTitle {
    @extend .tw;
    text-align: left;
    padding: 16 8;
    line-height: 4;
  }
}
// -----------------------------
// DIALOGS
.modal {
  max-width: 320;
  width: 100%;
  border-radius: 12;
  margin: 72 0;
  .title {
    @extend .tb;
    @extend .tw;
    padding: 16;
    font-size: 21;
  }
  .input {
    padding: 0 16 8;
  }
  .description {
    line-height: 4;
    padding: 0 16 8;
  }
  ListPicker {
    width: 25%;
    height: 160;
  }
  .listItem {
    @extend .tw;
    width: 100%;
    letter-spacing: 0;
    text-transform: none;
    line-height: 4;
    padding: 13 16;
    margin: 0;
    background: transparent;
  }
  .shareItem {
    border-radius: 12;
    margin: 0 8 8;
    text-align: center;
    .ico {
      padding: 16 0 0;
    }
    .item {
      @extend .tw;
      padding: 8 16 16;
    }
  }
  .actions {
    padding: 4;
  }
  .filters {
    padding: 8;
    margin: 0 0 8;
  }
}
.noResInfo {
  @extend .tac;
  @extend .tw;
  padding: 16;
  line-height: 4;
}
// -----------------------------
ActivityIndicator {
  width: 24;
  height: 24;
  margin: 12;
  color: $orange;
}
// -----------------------------
// Transitions
.hl {
  animation-name: hl;
  animation-duration: 0.2s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
}
@keyframes hl {
  0% {
    opacity: 0.5;
    background-color: transparent;
  }
  100% {
    opacity: 1;
    background-color: rgba($orange, 0.2);
  }
}
.fade {
  animation-name: fade;
  animation-duration: 0.2s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
}
@keyframes fade {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.5;
  }
}