650 lines
9.9 KiB
SCSS
650 lines
9.9 KiB
SCSS
// NativeScript core theme
|
|
// @see https://docs.nativescript.org/ui/theme
|
|
@import "~@nativescript/theme/core";
|
|
// Override variables here
|
|
$gray1: #f1f3f5;
|
|
$gray2: #e9ecef;
|
|
$gray3: #dee2e6;
|
|
$gray4: #ced4da;
|
|
$gray5: #adb5bd; // rgb(173,181,189)
|
|
$gray6: #868e96;
|
|
$gray7: #495057;
|
|
$gray8: #343a40;
|
|
$gray9: #212529;
|
|
$orange: #ff5200;
|
|
$fabRipple: #ff864d;
|
|
$red: #c92a2a;
|
|
// Global SCSS styling
|
|
// @see https://docs.nativescript.org/ui/styling
|
|
|
|
Page,
|
|
.ns-modal {
|
|
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: $gray9;
|
|
background: $gray1;
|
|
}
|
|
MDRipple,
|
|
MDButton {
|
|
ripple-color: rgba($gray6, 0.2);
|
|
}
|
|
|
|
TabView {
|
|
tab-background-color: $gray1;
|
|
selected-tab-text-color: $gray9;
|
|
}
|
|
.hr {
|
|
border-color: $gray3;
|
|
}
|
|
.sd,
|
|
.fieldLabel {
|
|
background: $gray1;
|
|
}
|
|
.referenceItem,
|
|
.recipeText,
|
|
.overviewItem,
|
|
.recipeItem {
|
|
background: white;
|
|
}
|
|
|
|
.sd-item,
|
|
.sd-group-header,
|
|
.time .bx {
|
|
color: $gray8;
|
|
}
|
|
.option .bx,
|
|
.option .info {
|
|
color: $gray7;
|
|
}
|
|
.imageHolder {
|
|
color: $gray4;
|
|
background: $gray3;
|
|
}
|
|
.count {
|
|
color: $gray1;
|
|
background: $gray9;
|
|
}
|
|
.instruction {
|
|
border-color: $gray9;
|
|
}
|
|
MDProgress {
|
|
progress-background-color: $gray4;
|
|
}
|
|
MDFloatingActionButton {
|
|
color: white;
|
|
}
|
|
.appIconContainer {
|
|
background: $orange;
|
|
}
|
|
}
|
|
|
|
.ns-dark {
|
|
Page,
|
|
ActionBar,
|
|
SearchBar,
|
|
TabView,
|
|
ListPicker {
|
|
color: $gray1;
|
|
background: $gray9;
|
|
}
|
|
TabView {
|
|
tab-background-color: $gray9;
|
|
selected-tab-text-color: $gray1;
|
|
}
|
|
MDRipple,
|
|
MDButton {
|
|
ripple-color: rgba($gray4, 0.1);
|
|
}
|
|
|
|
.hr {
|
|
border-color: #111;
|
|
}
|
|
.sd,
|
|
.fieldLabel {
|
|
background: $gray9;
|
|
}
|
|
.referenceItem,
|
|
.recipeText,
|
|
.overviewItem,
|
|
.recipeItem {
|
|
background: $gray8;
|
|
}
|
|
.sd-item,
|
|
.sd-group-header,
|
|
.time .bx {
|
|
color: $gray3;
|
|
}
|
|
.option .bx,
|
|
.option .info {
|
|
color: $gray5;
|
|
}
|
|
.imageHolder {
|
|
color: $gray8;
|
|
background: #111;
|
|
}
|
|
.count {
|
|
color: $gray9;
|
|
background: $gray1;
|
|
}
|
|
.instruction {
|
|
border-color: $gray1;
|
|
}
|
|
MDProgress {
|
|
progress-background-color: $gray6;
|
|
}
|
|
MDFloatingActionButton {
|
|
color: $gray9;
|
|
}
|
|
.appIconContainer {
|
|
background: $orange;
|
|
}
|
|
}
|
|
// -----------------------------
|
|
// 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: $gray6;
|
|
placeholder-color: $gray6;
|
|
}
|
|
TextView {
|
|
line-height: 12;
|
|
}
|
|
SearchBar {
|
|
font-family: "Orkney-Regular";
|
|
font-size: 16;
|
|
text-field-hint-color: $gray6;
|
|
}
|
|
TabView {
|
|
tab-text-color: $gray6;
|
|
}
|
|
.inputField {
|
|
margin-bottom: 14;
|
|
}
|
|
.fieldLabel {
|
|
font-size: 12;
|
|
margin-left: 12;
|
|
padding: 0 4;
|
|
}
|
|
.progressContainer {
|
|
width: 100%;
|
|
}
|
|
.text-btn,
|
|
.group-header,
|
|
.category,
|
|
MDActivityIndicator {
|
|
color: $orange;
|
|
}
|
|
MDProgress {
|
|
progress-color: $orange;
|
|
}
|
|
// -----------------------------
|
|
// ActionBar
|
|
ActionBar {
|
|
margin: 0;
|
|
padding: 0 8;
|
|
height: 64;
|
|
GridLayout {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
MDButton.bx {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
.title {
|
|
padding-left: 12;
|
|
text-align: left;
|
|
font-size: 18;
|
|
}
|
|
}
|
|
// -----------------------------
|
|
// Side Drawer
|
|
.sd {
|
|
padding: 8;
|
|
}
|
|
.sd-item {
|
|
border-radius: 4;
|
|
height: 48;
|
|
vertical-alignment: center;
|
|
.bx {
|
|
font-size: 24;
|
|
}
|
|
&.selected-sd-item {
|
|
color: $orange;
|
|
background: rgba($orange, 0.1);
|
|
MDRipple {
|
|
ripple-color: transparent;
|
|
}
|
|
}
|
|
// prettier-ignore
|
|
Label {
|
|
padding: 0 16 0 0;
|
|
font-size: 16;
|
|
vertical-alignment: center;
|
|
&.bx{
|
|
padding: 0 0 0 16;
|
|
}
|
|
}
|
|
MDRipple {
|
|
padding: 0 16;
|
|
}
|
|
}
|
|
.sd-group-header {
|
|
width: 100%;
|
|
padding: 8 0 8 8;
|
|
}
|
|
MDRipple {
|
|
border-radius: 4;
|
|
}
|
|
MDButton {
|
|
padding: 8;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
&.bx {
|
|
padding: 0;
|
|
width: 48;
|
|
height: 48;
|
|
margin: 0 8 0 0;
|
|
border-radius: 99;
|
|
}
|
|
}
|
|
// -----------------------------
|
|
// HOME
|
|
.emptyStateContainer {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.emptyState {
|
|
line-height: 8;
|
|
padding: 0 32;
|
|
text-align: center;
|
|
font-size: 16;
|
|
horizontal-alignment: center;
|
|
.icon {
|
|
font-size: 64;
|
|
text-align: center;
|
|
color: $gray5;
|
|
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;
|
|
}
|
|
}
|
|
&.noResult {
|
|
margin-top: 32;
|
|
}
|
|
}
|
|
// -----------------------------
|
|
// 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: $red;
|
|
color: #fff;
|
|
height: 128;
|
|
border-radius: 4;
|
|
}
|
|
// -----------------------------
|
|
// SETTINGS
|
|
.group-header {
|
|
padding: 8;
|
|
}
|
|
.main-container {
|
|
padding: 8 8 128;
|
|
.option {
|
|
font-size: 16;
|
|
.bx {
|
|
margin: 16 24 16 16;
|
|
}
|
|
.info {
|
|
font-size: 12;
|
|
line-height: 4;
|
|
}
|
|
StackLayout {
|
|
margin: 16 24 16 0;
|
|
}
|
|
}
|
|
}
|
|
// -----------------------------
|
|
// ABOUT
|
|
.appIconContainer {
|
|
background: $orange;
|
|
padding: 24 0;
|
|
width: 100%;
|
|
border-radius: 4;
|
|
.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;
|
|
margin: 8;
|
|
android-elevation: 1;
|
|
.bx {
|
|
padding: 12 0 0 12;
|
|
color: $gray6;
|
|
horizontal-alignment: left;
|
|
}
|
|
.itemCount {
|
|
font-size: 16;
|
|
padding: 8 12 12;
|
|
}
|
|
}
|
|
}
|
|
.ingredient,
|
|
.ingredient-check {
|
|
line-height: 6;
|
|
padding-bottom: 12;
|
|
}
|
|
.ingredient-check {
|
|
padding-bottom: 0;
|
|
}
|
|
.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 {
|
|
margin: 8 16;
|
|
border-radius: 4;
|
|
font-size: 16;
|
|
.bx {
|
|
font-size: 24;
|
|
}
|
|
.recipeLink {
|
|
padding: 16;
|
|
margin: 0;
|
|
}
|
|
}
|
|
.recipeText {
|
|
font-size: 16;
|
|
line-height: 6;
|
|
padding: 16;
|
|
margin: 8 16;
|
|
border-radius: 4;
|
|
}
|
|
}
|
|
// -----------------------------
|
|
// FAB
|
|
#btnFabContainer {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
MDFloatingActionButton {
|
|
width: 56;
|
|
height: 56;
|
|
margin: 16;
|
|
background: $orange;
|
|
ripple-color: $fabRipple;
|
|
}
|
|
// -----------------------------
|
|
// EDIT RECIPE
|
|
.sectionTitle {
|
|
font-size: 20;
|
|
}
|
|
.text-btn {
|
|
font-size: 14;
|
|
horizontal-alignment: left;
|
|
padding: 12;
|
|
margin: 8 0 0 0;
|
|
min-width: 0;
|
|
}
|
|
MDButton.closeBtn {
|
|
margin: 16 0 0;
|
|
width: 32;
|
|
height: 32;
|
|
min-width: 0;
|
|
vertical-alignment: top;
|
|
}
|
|
// -----------------------------
|
|
// DIALOGS
|
|
.dialogContainer {
|
|
width: 100%;
|
|
color: $gray9;
|
|
background: $gray1;
|
|
font-size: 16;
|
|
&.dark {
|
|
color: $gray1;
|
|
background: $gray9;
|
|
}
|
|
.dialogTitle {
|
|
padding: 24 24 16;
|
|
font-size: 20;
|
|
}
|
|
.dialogInput {
|
|
padding: 0 24 16;
|
|
}
|
|
.dialogDescription {
|
|
line-height: 6;
|
|
padding: 0 24 8;
|
|
}
|
|
.actionItem {
|
|
letter-spacing: 0;
|
|
text-transform: none;
|
|
padding: 16 24;
|
|
margin: 0;
|
|
}
|
|
.actionsContainer {
|
|
padding: 8;
|
|
}
|
|
.action {
|
|
font-size: 12;
|
|
padding: 12;
|
|
min-width: 0;
|
|
color: #ff7043;
|
|
}
|
|
MDButton.actionIcon {
|
|
width: auto;
|
|
height: auto;
|
|
min-width: 0;
|
|
padding: 16 24;
|
|
border-radius: 4;
|
|
letter-spacing: 0;
|
|
text-transform: none;
|
|
margin: 0 16 16;
|
|
}
|
|
}
|
|
|
|
// -----------------------------
|
|
MDActivityIndicator {
|
|
width: 24;
|
|
height: 24;
|
|
margin: 16 12;
|
|
}
|
|
// -----------------------------
|
|
// 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);
|
|
}
|
|
}
|