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