Skip to content

Instantly share code, notes, and snippets.

@jawakarD

jawakarD/App.css

Created Jul 13, 2020
Embed
What would you like to do?
@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
You can’t perform that action at this time.