diff options
Diffstat (limited to 'components')
| -rw-r--r-- | components/DetailsPage.css | 54 | ||||
| -rw-r--r-- | components/MenuPage.css | 69 | ||||
| -rw-r--r-- | components/OrderPage.css | 115 |
3 files changed, 238 insertions, 0 deletions
diff --git a/components/DetailsPage.css b/components/DetailsPage.css new file mode 100644 index 0000000..37e4ed1 --- /dev/null +++ b/components/DetailsPage.css @@ -0,0 +1,54 @@ +button { + display: block; + background-color: var(--color5); + border: 0; + width: 80%; + margin: 16px 10%; + padding: 12px 0; + border-radius: 40px; + color: var(--color3); + font-size: 16px; +} + +header { + display: flex; + flex-direction: row; +} + +header>a { + display: block; + flex: 1; + text-decoration: none; + color: var(--primaryColor); + padding: 12px 0 12px 8px; + text-align: center; + font-size: 14px; +} + +h2 { + color: var(--secondaryColor); + font-weight: normal; + font-size: 20px; + flex: 5; + margin: 8px; + text-align: center; +} + +img { + width: 96%; + margin: 0 2%; + margin-top: 12px; +} + +.description { + margin: 4px; + padding: 0 12px; + color: var(--primaryColor); + font-size: 13px; +} + +.price { + color: var(--secondaryColor); + padding: 0 24px; +} + diff --git a/components/MenuPage.css b/components/MenuPage.css new file mode 100644 index 0000000..20f3786 --- /dev/null +++ b/components/MenuPage.css @@ -0,0 +1,69 @@ +ul { + list-style: none; + padding: 0; +} + +h3 { + color: var(--color4); + font-weight: normal; + padding-top: 15px; + font-size: 17px; +} + +button { + background-color: var(--color5); + border: 0; + margin: 10px 3%; + padding: 5px 0; + border-radius: 40px; + color: var(--color3); + font-size: 16px; + flex-grow: 1; +} + +article section div { + flex-grow: 2; +} + +ul { + background-color: var(--color6); + margin: 4px 6px; + padding: 0px 12px; + border-radius: 10px; + padding-bottom: 10px; +} + +article { + background-color: white; + margin-bottom: 16px; + padding-bottom: 1px; + border-radius: 5px; +} + +article img { + width: 100%; +} + +article a { + text-decoration: none; + display: block; +} + +article section { + display: flex; +} + + + + +h4 { + margin: 8px 0 0 12px; + color: #333D29; + font-size: 18px; + font-weight: bold; +} + +.price { + margin: 0px 0 0px 12px; + color: #B08968 +}
\ No newline at end of file diff --git a/components/OrderPage.css b/components/OrderPage.css new file mode 100644 index 0000000..6e7b0ca --- /dev/null +++ b/components/OrderPage.css @@ -0,0 +1,115 @@ +ul { + list-style: none; + padding: 0; +} + +h3 { + color: var(--color4); + font-weight: normal; + padding-top: 15px; + font-size: 17px; +} + +button { + display: block; + background-color: var(--color5); + border: 0; + width: 80%; + margin: 16px 10%; + padding: 12px 0; + border-radius: 40px; + color: var(--color3); + font-size: 16px; +} + +h2 { + text-align: center; + color: var(--secondaryColor); + font-weight: normal; + font-size: 20px; + flex: 5; + margin: 8px; + text-align: center; +} + +.empty { + text-align: center; + color: var(--color3) +} + +ul { + background-color: var(--color6); + padding: 16px; + margin: 12px; + border-radius: 5px; + box-shadow: 2px 2px 10px silver; + +} + +li { + display: flex; + border-bottom: 1px solid var(--color5); +} + +li:last-child { + border: 0; +} + +.qty { + color: var(--color4); + flex: 1; +} + +.name { + font-weight: bold; + color: var(--secondaryColor); + flex: 5; +} + +.total { + font-weight: bold; + color: var(--color3); + flex: 5; + text-align: right; + margin-right: 16px; + font-size: 17px; + +} + +.toolbar span { + display: block; + padding: 0 8px; +} + +.price, .price-total { + color: var(--secondaryColor); + flex: 1; + + text-align: right; +} + +.price-total { + font-weight: bold; + font-size: 17px; + flex: 2; + text-align: left; +} + + +a { + text-decoration: none; +} + +label, input { + display: block; + width: 90%; + margin-left: 5%; +} + +input { + background-color: var(--color6); + margin-bottom: 6px; + font-size: large; + border: 1px solid var(--color3); + border-radius: 15px; +}
\ No newline at end of file |