enrecipes/app/app.scss
2021-04-14 14:57:40 +05:30

631 lines
8.8 KiB
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: top;
padding: 2 0 2 8;
}
.title {
padding: 0 0 4;
}
.attributes {
padding-top: 2;
.attr {
font-size: 10;
padding: 0 6 1 2;
}
}
}
.simple .recipeInfo {
padding: 8 0;
}
.minimal .title {
padding: 0;
}
.grid {
padding: 8;
.recipeInfo {
padding: 8 8 0;
}
&.odd {
padding: 8 8 8 16;
}
&.even {
padding: 8 16 8 8;
}
}
.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 {
margin: 16;
background: $orange;
border-radius: 16;
horizontal-alignment: center;
}
.name {
font-size: 17;
}
.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: 32;
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: 24;
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 0;
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;
}
}