🚨 Lint styles

This commit is contained in:
Nikolai Kristiansen committed 2021-11-13 11:48:01 +01:00
1 parent cf9c23bf7b
commit 9576becb62
7 files changed
+85 -87

No files matched your search

+2 -2
View File
@@ -1,3 +1,3 @@
.app { .app {
margin: 16px; margin: 16px;
} }
+1 -3
View File
@@ -15,9 +15,7 @@ const App: React.FC = () => (
<Router> <Router>
<ToastProvider> <ToastProvider>
<Header /> <Header />
<div className={styles.app}> <div className={styles.app}></div>
<Routes />
</div>
<Toast /> <Toast />
</ToastProvider> </ToastProvider>
</Router> </Router>
+3 -3
View File
@@ -1,13 +1,13 @@
.logo { .logo {
position: relative;
top: -1px;
display: inline-block; display: inline-block;
width: 24px; width: 24px;
height: 24px; height: 24px;
margin: 0 8px; margin: 0 8px;
position: relative;
top: -1px
} }
.navIcon { .navIcon {
position: relative; position: relative;
top: -2px; top: -2px;
} }
+40 -40
View File
@@ -1,57 +1,57 @@
.product { .product {
display: flex; display: flex;
flex-direction: column; overflow: hidden;
justify-content: center; flex-direction: column;
align-items: center; align-items: center;
background: transparent; justify-content: center;
border: 4px solid transparent; border: 4px solid transparent;
border-radius: 8px; background: transparent;
transition: background-color 0.1s ease-out, border 0.1s ease-out; border-radius: 8px;
overflow: hidden; transition: background-color 0.1s ease-out, border 0.1s ease-out;
} }
.product:hover { .product:hover {
background: rgba(0, 0, 0, 0.1); border-color: rgba(25, 135, 84, 0.6);
border-color: rgba(25, 135, 84, 0.6); background: rgba(0, 0, 0, 0.1);
} }
.active { .active {
background: rgba(25, 135, 84, 0.2); border-color: rgba(25, 135, 84, 0.6);
border-color: rgba(25, 135, 84, 0.6); background: rgba(25, 135, 84, 0.2);
} }
.active:hover { .active:hover {
background: rgba(25, 135, 84, 0.2); background: rgba(25, 135, 84, 0.2);
} }
.productText { .productText {
position: absolute; position: absolute;
background: rgba(0, 0, 0, 0.6); right: 0;
color: white; bottom: 0;
font-weight: bold; left: 0;
padding: 4px; padding: 4px;
bottom: 0; background: rgba(0, 0, 0, 0.6);
left: 0; border-radius: 8px;
right: 0; color: white;
border-radius: 8px; font-weight: bold;
} }
.productImage { .productImage {
width: 140px; width: 140px;
height: 140px; height: 140px;
object-fit: contain; object-fit: contain;
} }
.noProductImage { .noProductImage {
width: 140px; width: 140px;
height: 140px; height: 140px;
} }
.amount { .amount {
font-weight: bold; position: absolute;
font-size: 2rem; top: 0px;
position: absolute; left: 0px;
top: 0px; padding: 4px;
left: 0px; background: rgba(0, 0, 0, 0.6);
background: rgba(0, 0, 0, 0.6); border-radius: 8px;
color: white; color: white;
border-radius: 8px; font-size: 2rem;
padding: 4px; font-weight: bold;
line-height: 1; line-height: 1;
} }
.wrap { .wrap {
position: relative; position: relative;
} }
+2 -2
View File
@@ -1,5 +1,5 @@
.toast { .toast {
position: absolute; position: absolute;
bottom: 32px;
right: 32px; right: 32px;
} bottom: 32px;
}
+21 -21
View File
@@ -1,34 +1,34 @@
.user { .user {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 4px; padding: 4px;
background: transparent; border: 3px solid transparent;
border: 3px solid transparent; background: transparent;
border-radius: 8px; border-radius: 8px;
transition: background-color 0.1s ease-out, border 0.1s ease-out; transition: background-color 0.1s ease-out, border 0.1s ease-out;
} }
.user:hover { .user:hover {
background: rgba(0, 0, 0, 0.1); border-color: rgba(25, 135, 84, 0.6);
border-color: rgba(25, 135, 84, 0.6); background: rgba(0, 0, 0, 0.1);
} }
.active { .active {
background: rgba(25, 135, 84, 0.2); border-color: rgba(25, 135, 84, 0.6);
border-color: rgba(25, 135, 84, 0.6); background: rgba(25, 135, 84, 0.2);
} }
.active:hover { .active:hover {
background: rgba(25, 135, 84, 0.2); background: rgba(25, 135, 84, 0.2);
} }
.avatar { .avatar {
border-radius: 50px; width: 50px;
height: 50px; height: 50px;
width: 50px; border-radius: 50px;
} }
.avatar svg { .avatar svg {
color: #ccc; width: 50px;
height: 50px; height: 50px;
width: 50px; color: #ccc;
} }
.name { .name {
font-weight: bold; font-weight: bold;
} }
@@ -1,28 +1,28 @@
.userList { .userList {
display: grid; display: grid;
grid-template-columns: repeat(12, 128px); grid-template-columns: repeat(12, 128px);
row-gap: 16px; row-gap: 16px;
} }
.productList { .productList {
display: grid; display: grid;
grid-template-columns: repeat(8, 150px); grid-template-columns: repeat(8, 150px);
row-gap: 16px; row-gap: 16px;
} }
.productListSection { .productListSection {
margin-top: 2rem; margin-top: 2rem;
} }
.checkout { .checkout {
margin-top: 32px; margin-top: 32px;
} }
.total { .total {
display: inline-block; display: inline-block;
margin-right: 8px; min-width: 200px;
padding: 4px 8px; padding: 4px 8px;
font-size: 1.8rem; margin-right: 8px;
color: white; background: black;
background: black; color: white;
min-width: 200px; font-size: 1.8rem;
} }