michael/enrecipes
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity
enrecipes/app/app.scss
vishnuraghavb 9ea3ec757c started grocery list
2021-01-13 10:32:48 +05:30

805 lines
13 KiB
SCSS
Raw Blame History

// 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;
$gray6: #868e96;
$gray7: #495057;
$gray8: #343a40;
$gray9: #212529;
$orange: #ff5200;
$fabRipple: #ff922b;
$red: #c92a2a;
$breakfast: #ff922b;
$lunch: #94d82d;
$dinner: #339af0;
$snacks: #845ef7; // Global SCSS styling
// @see https://docs.nativescript.org/ui/styling
.ns-modal,
Page {
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 {
ActionBar,
ListPicker,
Page,
SearchBar,
TabStripItem,
Tabs {
color: $gray9;
background: $gray1;
}
MDButton,
MDRipple {
ripple-color: rgba($gray6, 0.2);
}
.hr {
border-color: $gray3;
}
.fieldLabel,
.sd {
background: $gray1;
}
.combination,
.overviewItem,
.recipeItem,
.textCard,
.titleContainer {
background: white;
}
TextField.combinationToken {
background: $gray3;
}
.sd-group-header,
.sd-item,
.tag,
.time .bx {
color: $gray8;
}
.group-info,
.option .bx,
.option .info {
color: $gray7;
}
.imageHolder {
color: $gray4;
background: $gray3;
}
.count,
.marker,
.noteCount {
color: $gray1;
background: $gray9;
}
.dayContainer,
.instruction {
border-color: $gray9;
}
MDProgress {
progress-background-color: $gray4;
}
MDFloatingActionButton {
color: white;
}
.appIconContainer {
background: $orange;
}
}
.ns-dark {
ActionBar,
ListPicker,
Page,
SearchBar,
TabStripItem,
Tabs {
color: $gray1;
background: $gray9;
}
MDButton,
MDRipple {
ripple-color: rgba($gray4, 0.1);
}
.hr {
border-color: #111;
}
.fieldLabel,
.sd {
background: $gray9;
}
.combination,
.overviewItem,
.recipeItem,
.textCard,
.titleContainer,
TextField.combinationToken {
background: $gray8;
}
.sd-group-header,
.sd-item,
.tag,
.time .bx {
color: $gray3;
}
.group-info,
.option .bx,
.option .info {
color: $gray5;
}
.imageHolder {
color: $gray8;
background: #111;
}
.count,
.marker,
.noteCount {
color: $gray9;
background: $gray1;
}
.dayContainer,
.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: 13 12;
margin: 8 0 0;
border-radius: 4;
border-color: $gray6;
placeholder-color: $gray6;
}
TextView {
line-height: 12;
}
ListPicker {
width: 25%;
}
SearchBar {
font-family: 'Orkney-Regular';
font-size: 14;
text-field-hint-color: $gray6;
}
TabView {
tab-text-color: $gray6;
}
.inputField {
margin-bottom: 8;
}
.fieldLabel {
font-size: 12;
margin-left: 8;
padding: 0 4;
}
.progressContainer {
width: 100%;
}
// .category,
// .group-header,
.text-btn,
MDActivityIndicator {
color: $orange;
}
MDProgress {
progress-color: $orange;
}
Switch {
background-color: $orange;
off-background-color: $gray6;
}
// -----------------------------
// ActionBar
ActionBar {
height: 64;
margin: 0;
padding: 0 8;
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;
margin: 0 24 0 0;
}
&.selected-sd-item {
color: $orange;
background: rgba($orange, 0.1);
MDRipple {
ripple-color: transparent;
}
}
// prettier-ignore
Label {
padding: 2 16 0 0;
font-size: 14;
vertical-alignment: center;
&.bx {
padding: 0 0 0 16;
}
}
MDRipple {
padding: 0 16;
}
MDButton.bx {
margin: 0;
}
.recipeCount {
padding: 4;
font-size: 14;
margin: 0 8 0 0;
vertical-alignment: center;
}
}
.sd-group-header {
width: 100%;
padding: 0 0 8 8;
MDButton.bx {
margin: 0;
}
.filterPath {
line-height: 6;
}
}
.noTags {
font-size: 14;
text-align: center;
margin: 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: 14;
horizontal-alignment: center;
.icon {
font-size: 64;
text-align: center;
color: $gray5;
margin-bottom: 16;
}
.logo {
width: 64;
margin-bottom: 16;
}
.title {
font-size: 18;
text-align: center;
padding: 0;
horizontal-alignment: center;
.bx {
font-size: 24;
vertical-alignment: center;
}
}
.searchAll {
font-size: 14;
width: auto;
height: auto;
min-width: 0;
padding: 12;
border-radius: 4;
letter-spacing: 0;
// text-transform: none;
margin: 16;
color: $orange;
horizontal-alignment: center;
}
}
// -----------------------------
// Recipe Items
RadListView {
margin: 0 0 128;
font-size: 14;
}
.recipeItem {
margin: 4 8;
border-radius: 4;
.recipeInfo {
margin: 0;
padding: 8;
.attr,
.category {
font-size: 10;
padding: 0;
margin: 0;
}
.title {
margin: 0;
padding: 2 0;
}
.attrContainer {
padding: 0;
.attr {
padding: 1 8 0 2;
}
}
}
}
.tagsContainer {
padding: 2 0 0;
.collapsedTagsCount {
font-size: 10;
padding: 1 0 0 2;
}
.tag {
font-size: 10;
padding: 0 4;
margin: 0 4 0 0;
line-height: 0;
border-radius: 4;
border-width: 1;
border-color: $gray6;
}
}
.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: 104;
border-radius: 4;
}
// -----------------------------
// SETTINGS
.group-header {
// text-transform: uppercase;
padding: 8;
}
.group-info {
text-align: center;
padding: 16;
line-height: 6;
// margin-top: 8;
border-radius: 4;
}
.main-container {
padding: 8 8 88;
.option {
font-size: 14;
line-height: 6;
.bx {
margin: 11 24 11 16;
}
.info {
font-size: 12;
padding-top: 0;
}
StackLayout {
margin: 9 24 9 0;
}
}
}
// -----------------------------
// ABOUT
.appIconContainer {
background: $orange;
padding: 24 0;
width: 100%;
border-radius: 4;
.appIcon {
height: 104;
}
}
// -----------------------------
// VIEW RECIPE
.viewRecipe {
.attr,
.category,
.ingredient,
.tag,
.tagsTitle {
font-size: 14;
}
.attr,
.category {
margin: 0 12;
}
.small {
font-size: 10;
}
.title {
font-size: 18;
line-height: 6;
padding: 0 12;
}
.ratingContainer {
margin: 14 8 6;
.rating {
margin-right: 8;
color: $orange;
}
}
.subTitle {
font-size: 14;
line-height: 6;
}
.tagsContainer {
padding: 18 12 0;
.tag {
padding: 1 6;
margin: 0 8 8 0;
}
}
.overviewContainer {
margin: 12 0 24;
.overviewItem {
border-radius: 4;
margin: 4;
android-elevation: 1;
.bx {
padding: 16 0 0 16;
color: $gray6;
horizontal-alignment: left;
}
.itemCount {
font-size: 14;
padding: 8 16 16;
}
}
}
.ingredient {
font-family: 'Orkney-Regular';
margin: 0 0 0 4;
color: blue;
}
.red {
color: red;
}
.count {
width: 24;
height: 24;
padding-top: 4%;
margin: 0 0 0 8;
text-align: center;
vertical-alignment: top;
horizontal-alignment: center;
border-radius: 99;
}
.instruction {
font-size: 14;
line-height: 6;
padding: 2 0 24 35;
margin: 0 0 0 19;
border-width: 0 0 0 2;
}
.instruction.noBorder {
border-color: transparent;
}
.combination {
margin: 0 8 8;
border-radius: 4;
font-size: 14;
.combinationTitle {
padding: 14 16;
margin: 0;
line-height: 6;
}
}
.noteCount {
width: 24;
height: 24;
padding-top: 4%;
margin: 0 0 0 8;
text-align: center;
vertical-alignment: top;
horizontal-alignment: center;
clip-path: polygon(4% 12%, 12% 4%, 75% 4%, 96% 25%, 96% 88%, 88% 96%, 12% 96%, 4% 88%,);
}
.note {
font-size: 14;
line-height: 6;
padding: 2 0 24 37;
margin: 0 0 0 19;
}
}
// -----------------------------
// FAB
#btnFabContainer {
z-index: 100;
width: 100%;
height: 100%;
}
MDFloatingActionButton {
width: 56;
height: 56;
margin: 16;
background: $orange;
ripple-color: $fabRipple;
}
// -----------------------------
// EDIT RECIPE
.sectionTitle {
font-size: 18;
}
.text-btn {
font-size: 14;
horizontal-alignment: left;
padding: 12;
margin: 8 0 0;
min-width: 0;
}
MDButton.closeBtn {
margin: 16 0 0;
width: 32;
height: 32;
min-width: 0;
vertical-alignment: top;
}
// -----------------------------
// MEAL PLANNER
.dayPlan {
padding: 0 0 88;
width: 100%;
.plansContainer {
margin: 16 8 0 16;
padding: 0;
border-left-width: 8;
&.breakfast {
border-left-color: $breakfast;
}
&.lunch {
border-left-color: $lunch;
}
&.dinner {
border-left-color: $dinner;
}
&.snacks {
border-left-color: $snacks;
}
.periodLabel {
text-transform: capitalize;
vertical-alignment: center;
font-size: 14;
padding: 0 0 0 16;
}
.recipe {
margin: 0 8;
.titleContainer {
border-radius: 4;
margin: 0 8 8;
}
.recipeTitle {
font-size: 14;
padding: 14 16;
line-height: 6;
}
}
.closeBtn {
margin: 8 0;
vertical-alignment: top;
}
MDButton,
MDRipple {
ripple-color: rgba($gray6, 0.2);
}
}
}
// -----------------------------
// DIALOGS
.dialogContainer {
max-width: 480;
width: 100%;
color: $gray9;
background: $gray1;
font-size: 14;
&.dark {
color: $gray1;
background: $gray9;
}
.dialogIcon {
text-align: center;
padding: 32;
font-size: 48;
&.flip {
transform: scaleX(-1);
}
}
.dialogTitle {
line-height: 6;
padding: 24 24 16;
font-size: 18;
}
.dialogInput {
padding: 0 24 16;
}
.dialogDescription {
line-height: 6;
padding: 0 24 8;
}
.actionItem {
letter-spacing: 0;
text-transform: none;
line-height: 6;
padding: 13 24;
margin: 0;
border-radius: 1;
background: transparent;
}
.actionToggle {
background: $orange;
}
.actionsContainer {
padding: 8;
}
.shareItem {
border-radius: 4;
margin: 0 16 16;
android-elevation: 1;
text-align: center;
.bx {
padding: 16 0 0;
}
.item {
padding: 8 16 16;
}
}
.action {
font-size: 12;
padding: 12;
min-width: 0;
color: $orange;
}
MDButton.actionIcon {
font-size: 14;
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);
}
}
Reference in a new issue View git blame Copy permalink