enrecipes/app/app.scss

579 lines
8.5 KiB
SCSS
Raw Normal View History

2020-09-15 11:10:16 +00:00
// NativeScript core theme
// @see https://docs.nativescript.org/ui/theme
2020-10-14 19:32:32 +00:00
@import "~@nativescript/theme/core";
2020-09-15 11:10:16 +00:00
// Override variables here
2020-10-14 19:32:32 +00:00
$grayD4: #212121;
$grayD3: #424242;
$grayD2: #616161;
$grayD1: #757575;
$gray: #9e9e9e;
$grayL1: #e0e0e0;
$grayL2: #eeeeee;
$grayL3: #f5f5f5;
$grayL4: #fafafa;
$orange: #ff7043;
$paleOrange: #fbe9e7;
2020-09-15 11:10:16 +00:00
// Global SCSS styling
// @see https://docs.nativescript.org/ui/styling
Page {
2020-10-14 19:32:32 +00:00
font-family: "Orkney-Regular";
2020-09-15 11:10:16 +00:00
}
.orkm {
2020-10-14 19:32:32 +00:00
font-family: "Orkney-Medium";
2020-09-15 11:10:16 +00:00
}
.orkb {
2020-10-14 19:32:32 +00:00
font-family: "Orkney-Bold";
2020-09-15 11:10:16 +00:00
}
.bx {
2020-10-14 19:32:32 +00:00
font-family: "boxicons";
font-size: 24;
}
.ns-light {
Page,
ActionBar,
2020-10-21 17:54:45 +00:00
SearchBar,
TabView {
2020-10-14 19:32:32 +00:00
color: $grayD4;
2020-10-22 18:36:50 +00:00
background: $grayL4;
2020-10-14 19:32:32 +00:00
}
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;
}
2020-10-14 19:32:32 +00:00
.option-highlight {
2020-10-21 17:54:45 +00:00
background: $grayL2;
}
2020-10-14 19:32:32 +00:00
.sd-item,
.sd-group-header,
.recipe-time {
color: $grayD2;
}
.option,
.icon-option {
.bx,
.option-info {
color: $grayD2;
}
.option-title {
color: $grayD4;
}
}
.view-imageHolder,
.recipeImgContainer {
2020-10-14 19:32:32 +00:00
color: $grayL1;
2020-10-22 18:36:50 +00:00
background: $grayL2;
2020-10-14 19:32:32 +00:00
}
.view-other {
color: $grayD2;
}
.view-count {
color: $grayL4;
background: $grayD4;
}
.view-instruction {
border-color: $grayD4;
}
}
.ns-dark {
Page,
ActionBar,
2020-10-21 17:54:45 +00:00
SearchBar,
TabView {
2020-10-14 19:32:32 +00:00
color: $grayL4;
2020-10-22 18:36:50 +00:00
background: $grayD4;
2020-10-14 19:32:32 +00:00
}
TabView {
tab-background-color: $grayD4;
selected-tab-text-color: $grayL4;
}
.hr {
border-color: #111;
}
2020-10-22 18:36:50 +00:00
2020-10-14 19:32:32 +00:00
.sd,
.fieldLabel {
background: $grayD4;
}
.recipe-li,
.option-highlight,
.view-reference-text,
.view-reference-container {
2020-10-14 19:32:32 +00:00
background: $grayD3;
}
.sd-item,
.sd-group-header,
.recipe-time {
color: $grayL2;
}
2020-10-22 18:36:50 +00:00
2020-10-14 19:32:32 +00:00
.option,
.icon-option {
.bx,
.option-info {
color: $grayL2;
}
.option-title {
color: $grayL4;
}
}
.view-imageHolder,
.recipeImgContainer {
2020-10-14 19:32:32 +00:00
color: $grayD4;
2020-10-22 18:36:50 +00:00
background: #111;
2020-10-14 19:32:32 +00:00
}
.view-other {
color: $grayL2;
}
.view-count {
color: $grayD4;
background: $grayL4;
}
.view-instruction {
border-color: $grayL4;
}
}
// Elements
TextField,
TextView,
TimePickerField {
2020-10-21 17:54:45 +00:00
width: 100%;
2020-10-14 19:32:32 +00:00
border-width: 1;
2020-10-21 17:54:45 +00:00
font-size: 14;
padding: 14 14 13;
2020-10-14 19:32:32 +00:00
margin: 8 0 0 0;
border-radius: 4;
2020-10-22 18:36:50 +00:00
border-color: $gray;
2020-10-14 19:32:32 +00:00
placeholder-color: $gray;
}
TextView {
line-height: 12;
}
2020-10-22 18:36:50 +00:00
TabView {
tab-text-color: $gray;
}
2020-10-14 19:32:32 +00:00
.inputField {
margin-top: 16;
}
.fieldLabel {
font-size: 13;
margin-left: 8;
padding: 0 8;
}
2020-10-22 18:36:50 +00:00
// DateTimePicker
.date-time-picker,
.date-time-picker-spinners {
color: $grayD4;
background: $grayL4;
&.ns-dark {
color: $grayL4;
background: $grayD4;
}
}
2020-10-26 20:49:54 +00:00
.ns-dark .date-time-picker-spinners {
color: $grayL4;
background: $grayD4;
}
2020-10-14 19:32:32 +00:00
// ActionBar
ActionBar {
width: 100%;
margin: 24 0 0 0;
2020-10-14 19:32:32 +00:00
padding: 0;
height: 64;
.bx {
2020-10-21 17:54:45 +00:00
padding: 16 12;
vertical-alignment: center;
2020-10-14 19:32:32 +00:00
}
.leftAction {
padding: 16 16 16 4;
margin: 0;
}
}
.actionBarContainer {
margin: 0;
padding: 0;
}
SearchBar {
2020-10-21 17:54:45 +00:00
width: 100%;
2020-10-14 19:32:32 +00:00
font-size: 16;
}
.title {
padding-left: 8;
text-align: left;
font-size: 18;
}
// Side Drawer
.sd {
margin-top: 24;
}
2020-10-14 19:32:32 +00:00
.sd-item {
border-radius: 4;
2020-10-21 17:54:45 +00:00
padding: 0 16;
height: 48;
font-size: 16;
vertical-alignment: center;
// prettier-ignore
.bx, Label {
vertical-alignment: center;
}
2020-10-22 18:36:50 +00:00
&.selected-sd-item {
background: $paleOrange;
color: $orange;
}
2020-10-14 19:32:32 +00:00
}
.sd-group-header {
2020-10-21 17:54:45 +00:00
width: 100%;
padding: 8 8 16;
2020-10-14 19:32:32 +00:00
font-size: 12;
}
// Home
2020-10-21 17:54:45 +00:00
RadListView {
margin: 8 0 128;
2020-10-21 17:54:45 +00:00
}
2020-10-14 19:32:32 +00:00
.recipe-li {
2020-10-22 18:36:50 +00:00
background: white;
2020-10-14 19:32:32 +00:00
margin: 8 16;
border-radius: 6;
.recipe-info {
margin: 4;
2020-10-14 19:32:32 +00:00
}
.recipe-cat {
2020-10-21 17:54:45 +00:00
font-size: 12;
2020-10-14 19:32:32 +00:00
padding: 0;
margin: 0;
}
.recipe-title {
font-size: 16;
line-height: 4;
margin: 0;
padding: 4 0;
}
.recipe-time {
padding: 0;
}
.recipe-cat {
2020-10-14 19:32:32 +00:00
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;
}
}
2020-10-14 19:32:32 +00:00
// Settings
.group-header {
2020-10-21 17:54:45 +00:00
padding: 8;
2020-10-14 19:32:32 +00:00
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;
2020-10-14 19:32:32 +00:00
color: #ff7043;
}
.view-other {
font-size: 16;
2020-10-14 19:32:32 +00:00
}
.view-title {
font-size: 22;
2020-10-21 17:54:45 +00:00
line-height: 6;
margin-bottom: 16;
2020-10-14 19:32:32 +00:00
}
.view-ingredient {
font-size: 16;
2020-10-14 19:32:32 +00:00
line-height: 6;
padding-bottom: 12;
2020-10-14 19:32:32 +00:00
}
2020-10-21 17:54:45 +00:00
.activity-indicator {
background: #ff7043;
}
2020-10-14 19:32:32 +00:00
.view-count {
font-size: 12;
width: 24;
height: 24;
padding-top: 4%;
margin: 0 0 0 8;
2020-10-14 19:32:32 +00:00
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%
);
}
2020-10-14 19:32:32 +00:00
}
.view-instruction,
.view-note,
.view-reference {
font-size: 16;
2020-10-14 19:32:32 +00:00
line-height: 6;
padding: 2 0 14 36;
margin: 0 0 0 19;
2020-10-14 19:32:32 +00:00
border-width: 0 0 0 2;
}
2020-10-22 18:36:50 +00:00
.view-instruction.instructionWOBorder {
border-color: transparent;
}
2020-10-14 19:32:32 +00:00
.view-note {
border-width: 0;
}
.view-reference-container {
padding: 14 16;
margin: 8 16 8;
border-radius: 6;
}
2020-10-14 19:32:32 +00:00
.view-reference {
padding: 0 16 0 0;
margin: 0;
2020-10-14 19:32:32 +00:00
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;
// }
2020-10-22 18:36:50 +00:00
#btnFabContainer {
width: 100%;
height: 100%;
}
2020-10-14 19:32:32 +00:00
// Edit Recipe
2020-10-22 18:36:50 +00:00
.fab-button {
color: #fff;
2020-10-22 18:36:50 +00:00
height: 56;
width: 56;
background-color: #ff7043;
vertical-alignment: center;
// horizontal-alignment: center;
border-radius: 28;
2020-10-22 18:36:50 +00:00
padding: 16;
2020-10-14 19:32:32 +00:00
margin: 16;
android-elevation: 6;
&.negative {
background-color: #e53935;
}
2020-10-14 19:32:32 +00:00
}
.sectionTitle {
font-size: 20;
}
.sec-btn {
font-size: 14;
color: #ff7043;
text-align: left;
padding: 16;
margin: 8 0 0 0;
2020-09-15 11:10:16 +00:00
}
2020-10-21 17:54:45 +00:00
.closeBtn {
padding: 4;
margin-top: 16;
}
2020-10-22 18:36:50 +00:00
// Dialogs
.dialogContainer {
width: 100%;
2020-10-22 18:36:50 +00:00
&.light {
color: $grayD4;
background: $grayL4;
}
&.dark {
color: $grayL4;
background: $grayD4;
}
.dialogTitle {
padding: 24 24 12;
font-size: 20;
}
.dialogInputField {
padding: 0 24 16;
}
2020-10-22 18:36:50 +00:00
.dialogDescription {
font-size: 16;
line-height: 4;
2020-10-22 18:36:50 +00:00
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);
}
}