michael/enrecipes
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

styles cleaned up

Browse source
This commit is contained in:
vishnuraghavb 2021-06-05 23:40:03 +05:30
parent f1cf7c8956
commit a315243af9
1 changed files with 93 additions and 93 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

184
app/app.scss
View file

@ -37,7 +37,7 @@ Page {
@extend .tb; @extend .tb;
@extend .tw; @extend .tw;
font-size: 25; font-size: 25;
padding: 16; padding: 16 16 24;
} }
.Light { .Light {
color: $gray9; color: $gray9;
@ -156,6 +156,7 @@ TextField.combField,
#searchBar { #searchBar {
border-color: transparent; border-color: transparent;
} }
// ----------------------------- // -----------------------------
// Elements // Elements
TextField, TextField,
@ -181,28 +182,15 @@ TextView {
width: 100%; width: 100%;
} }
progress { progress {
margin: 16; color: $orange;
width: 100%;
height: 2;
background-color: $gray5; background-color: $gray5;
} }
Switch { Switch {
background-color: $orange; background-color: $orange;
off-background-color: $gray5; 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 { button {
background-color: transparent; background-color: transparent;
z-index: 0; z-index: 0;
@ -214,14 +202,13 @@ button {
@extend .fade; @extend .fade;
} }
&.ico { &.ico {
padding: 0;
margin: 0;
width: 48; width: 48;
height: 48; height: 48;
padding: 0;
margin: 0;
} }
&.text { &.text {
@extend .tb; @extend .tb;
horizontal-alignment: left;
color: $orange; color: $orange;
} }
&.big { &.big {
@ -235,12 +222,6 @@ button {
&.min { &.min {
width: 40; width: 40;
height: 40; height: 40;
}
&.x {
width: 32;
height: 32;
min-width: 0;
margin: 0 0 0 4;
vertical-alignment: center; vertical-alignment: center;
} }
&.rate { &.rate {
@ -249,8 +230,31 @@ button {
height: 32; height: 32;
} }
} }
ActivityIndicator {
width: 24;
height: 24;
margin: 12;
color: $orange;
}
// ----------------------------- // -----------------------------
// HOME // Home
.segment {
border-radius: 12;
margin: 0 4 0 0;
padding: 0 12;
.value {
padding: 0 0 0 8;
vertical-alignment: center;
&.rtl {
padding: 0 8 0 0;
}
}
&.select {
color: $orange;
@extend .hl;
}
}
.emptyState { .emptyState {
padding: 16 16 8; padding: 16 16 8;
label { label {
@ -261,13 +265,18 @@ button {
font-size: 17; font-size: 17;
} }
} }
// ----------------------------- // -----------------------------
// Recipe Items // Recipe Item
.recipeItem { .recipeItem {
padding: 8 16; padding: 8 16;
.recipeInfo { .recipeInfo {
vertical-alignment: center; vertical-alignment: center;
padding: 0 0 4 8; padding: 0 0 4 8;
&.rtl {
transform: none;
padding: 0 8 4 0;
}
} }
.title { .title {
padding: 0 0 4; padding: 0 0 4;
@ -275,6 +284,9 @@ button {
.attr { .attr {
font-size: 10; font-size: 10;
padding: 0 6 1 2; padding: 0 6 1 2;
&.rtl {
padding: 0 2 1 6;
}
} }
} }
.simple .recipeInfo { .simple .recipeInfo {
@ -283,7 +295,6 @@ button {
.minimal .title { .minimal .title {
padding: 0; padding: 0;
} }
.grid { .grid {
padding: 8; padding: 8;
.recipeInfo { .recipeInfo {
@ -311,39 +322,34 @@ button {
.imgHolder { .imgHolder {
border-radius: 12; border-radius: 12;
} }
// -----------------------------
// COOKING TIMER
.singleTimer { // -----------------------------
padding: 8 16; // CookingTimer
.timer {
padding: 8 16 0;
.info { .info {
margin: 8; margin: 8 8 8 16;
&.r {
margin: 8 16 8 8;
} }
.recipeTitle {
horizontal-alignment: left;
// font-size: 12;
} }
progress { progress {
color: $orange;
width: 100%;
height: 4;
margin: 8 0 0; margin: 8 0 0;
} }
} }
// ----------------------------- // -----------------------------
// SETTINGS // Settings
.group-info { .group-info {
padding: 16 16 16 72; padding: 16 16 16 72;
line-height: 4; line-height: 4;
} }
.options-list { .options {
.option { .option {
vertical-align: center; vertical-align: center;
padding: 14 8; padding: 14 12;
margin: 0 16;
.ico { .ico {
padding: 0; margin: 0 24 0 12;
margin: 0 24 0 16;
} }
.info, .info,
.sub { .sub {
@ -359,7 +365,7 @@ button {
} }
// ----------------------------- // -----------------------------
// ABOUT // About
.app-info { .app-info {
.icon { .icon {
horizontal-alignment: center; horizontal-alignment: center;
@ -372,8 +378,9 @@ button {
line-height: 4; line-height: 4;
} }
} }
// ----------------------------- // -----------------------------
// VIEW RECIPE // ViewRecipe
.photo { .photo {
border-radius: 12; border-radius: 12;
margin: 24 16 0 0; margin: 24 16 0 0;
@ -396,15 +403,12 @@ button {
@extend .tw; @extend .tw;
} }
} }
.clickable {
color: $orange;
}
.ingredient { .ingredient {
padding: 0 16; padding: 0 16;
.value { .value {
@extend .tw; @extend .tw;
vertical-align: center; vertical-align: center;
padding: 14 0 14 16; padding: 14 16;
line-height: 4; line-height: 4;
} }
} }
@ -416,13 +420,12 @@ button {
} }
.value { .value {
@extend .tw; @extend .tw;
padding: 14 0 14 16; padding: 14 16;
line-height: 4; line-height: 4;
} }
} }
.done { .done {
opacity: 0.5; opacity: 0.5;
// @extend .fade;
.value { .value {
text-decoration: line-through; text-decoration: line-through;
} }
@ -443,8 +446,9 @@ button {
font-size: 12; font-size: 12;
line-height: 4; line-height: 4;
} }
// ----------------------------- // -----------------------------
// APPBAR // AppBar
.appbar { .appbar {
z-index: 4; z-index: 4;
min-height: 56; min-height: 56;
@ -461,13 +465,16 @@ button {
padding: 14 16; padding: 14 16;
} }
.fab { .fab {
margin-left: 4; margin-left: 8;
}
&.home {
margin: 8 8 0;
} }
} }
.toolbar { .toolbar {
z-index: 4; z-index: 4;
padding: 4; padding: 4;
margin-bottom: 0; margin: 0 0 52;
horizontal-alignment: left; horizontal-alignment: left;
.tool { .tool {
padding: 0 12; padding: 0 12;
@ -475,19 +482,20 @@ button {
vertical-alignment: center; vertical-alignment: center;
} }
.ico { .ico {
padding-right: 8; padding: 0 8 0 0;
&.rtl {
padding: 0 0 0 8;
}
} }
} }
} }
.fab { .fab {
width: 48;
height: 48;
margin: 0 4 0 0;
border-radius: 12; border-radius: 12;
background: $orange; background: $orange;
} }
// ----------------------------- // -----------------------------
// EDIT RECIPE // EditRecipe
.sectionTitle { .sectionTitle {
@extend .tb; @extend .tb;
@extend .tw; @extend .tw;
@ -504,8 +512,9 @@ button {
font-size: 17; font-size: 17;
color: $orange; color: $orange;
} }
// ----------------------------- // -----------------------------
// MEAL PLANNER // MealPlanner
.calendar { .calendar {
padding: 0 8; padding: 0 8;
.navBtn { .navBtn {
@ -541,13 +550,13 @@ button {
} }
.recipeTitle { .recipeTitle {
@extend .tw; @extend .tw;
text-align: left;
padding: 16 8; padding: 16 8;
line-height: 4; line-height: 4;
} }
} }
// ----------------------------- // -----------------------------
// DIALOGS // Dialogs
.modal { .modal {
max-width: 320; max-width: 320;
width: 100%; width: 100%;
@ -567,13 +576,12 @@ button {
padding: 0 16 8; padding: 0 16 8;
} }
ListPicker { ListPicker {
width: 25%; width: 30%;
height: 128; height: 144;
margin: 16 0; margin: 16 0;
} }
.listItem { .listItem {
@extend .tw; @extend .tw;
width: 100%;
letter-spacing: 0; letter-spacing: 0;
text-transform: none; text-transform: none;
line-height: 4; line-height: 4;
@ -607,32 +615,9 @@ button {
padding: 16; padding: 16;
line-height: 4; line-height: 4;
} }
// -----------------------------
ActivityIndicator {
width: 24;
height: 24;
margin: 12;
color: $orange;
}
// ----------------------------- // -----------------------------
// Transitions // Transitions
.blink {
animation-name: blink;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: ease;
}
@keyframes blink {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.hl { .hl {
animation-name: hl; animation-name: hl;
animation-duration: 0.2s; animation-duration: 0.2s;
@ -661,3 +646,18 @@ ActivityIndicator {
opacity: 0.5; opacity: 0.5;
} }
} }
// -----------------------------
// Helpers
.rtl {
transform: scaleX(-1);
}
.clickable {
color: $orange;
}
.hal {
horizontal-alignment: left;
&.r {
horizontal-alignment: right;
}
}