Created
July 13, 2020 16:11
-
-
Save jawakarD/27a61aa96a79c9366f1108f9453c914d to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import url("https://fonts.googleapis.com/css?family=Montserrat&display=swap"); | |
* { | |
box-sizing: border-box; | |
color: white; | |
} | |
html, | |
body { | |
font-family: monospace; | |
} | |
.App { | |
text-align: center; | |
} | |
.App-logo { | |
height: 100px; | |
pointer-events: none; | |
} | |
@media (prefers-reduced-motion: no-preference) { | |
.App-logo { | |
animation: App-logo-spin infinite 20s linear; | |
} | |
} | |
.App-body { | |
background-color: #202020; | |
min-height: 100vh; | |
display: flex; | |
flex-direction: column; | |
align-items: center; | |
justify-content: center; | |
} | |
.App-link { | |
color: #61dafb; | |
} | |
.menu-box { | |
display: flex; | |
min-width: 500px; | |
min-height: 300px; | |
padding: 20px; | |
border: 2px solid white; | |
flex-wrap: wrap; | |
max-height: 300px; | |
max-width: 500px; | |
overflow: scroll; | |
} | |
.menu-item { | |
display: flex; | |
width: 100%; | |
padding: 10px; | |
border-bottom: 2px solid white; | |
} | |
.name { | |
color: #ff00f6; | |
font-size: 18px; | |
margin-bottom: 10px; | |
font-weight: bold; | |
} | |
.action { | |
margin-left: auto; | |
display: flex; | |
align-items: center; | |
} | |
.item-price { | |
margin-top: 0; | |
font-size: 14px; | |
text-align: left; | |
} | |
button { | |
color: #61dafb; | |
padding: 5px 15px; | |
background: none; | |
border: 2px solid #61dafb; | |
font-size: 14px; | |
cursor: pointer; | |
} | |
.add-form { | |
width: 500px; | |
align-self: normal; | |
margin: 0 auto; | |
display: flex; | |
flex-direction: column; | |
margin-bottom: 20px; | |
} | |
.add-form .form { | |
margin: 20px 0; | |
} | |
.form-group { | |
display: flex; | |
margin-bottom: 20px; | |
} | |
.form-group label { | |
margin-right: 30px; | |
} | |
.form-group input { | |
flex-grow: 1; | |
margin-left: auto; | |
color: black; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment