enrecipes/app/app.scss

434 lines
6.1 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;
}
.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 {
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 {
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 {
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;
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-14 19:32:32 +00:00
// ActionBar
ActionBar {
width: 100%;
margin: 0;
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-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-bottom: 128;
}
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 0;
}
.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-favorite {
2020-10-21 17:54:45 +00:00
font-size: 12;
padding: 14 8 0 0;
2020-10-14 19:32:32 +00:00
}
.recipe-cat,
.recipe-favorite {
color: $orange;
}
}
// 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: 14;
color: #ff7043;
}
.view-other {
font-size: 14;
}
.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: 14;
line-height: 6;
2020-10-21 17:54:45 +00:00
padding-bottom: 16;
2020-10-14 19:32:32 +00:00
}
.view-favorited {
color: #ff7043;
}
2020-10-21 17:54:45 +00:00
.activity-indicator {
background: #ff7043;
}
2020-10-14 19:32:32 +00:00
.view-count {
font-size: 10;
width: 20;
height: 20;
2020-10-21 17:54:45 +00:00
padding-top: 3%;
margin: 0 0 0 6;
2020-10-14 19:32:32 +00:00
text-align: center;
border-radius: 100;
}
.view-instruction,
.view-note,
.view-reference {
font-size: 14;
line-height: 6;
2020-10-21 17:54:45 +00:00
padding: 0 0 16 24;
2020-10-14 19:32:32 +00:00
margin: 0 0 0 15;
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 {
border-width: 0;
}
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: white;
height: 56;
width: 56;
background-color: #ff7043;
horizontal-align: center;
vertical-align: center;
border-radius: 100;
padding: 16;
2020-10-14 19:32:32 +00:00
margin: 16;
}
.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 {
&.light {
color: $grayD4;
background: $grayL4;
}
&.dark {
color: $grayL4;
background: $grayD4;
}
.dialogTitle {
padding: 24 24 12;
font-size: 20;
}
.dialogDescription {
font-size: 16;
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;
}
}