Gabriel_Ferraz_Nogueira/practice-time-shopping-list-gabriel-ferraz
1
0
Fork 0
forked from M3-Academy/practice-time-shopping-list
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Develop/ShoppingList #1

Merged
Gabriel_Ferraz_Nogueira merged 3 commits from Develop/ShoppingList into main 2022-11-08 21:54:58 +00:00
Conversation 0 Commits 3 Files Changed 7 +130 -2
5 changed files with 130 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 187196500e - Show all commits

4
index.html
View File

@ -13,7 +13,7 @@
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Roboto:wght@400;700&display=swap"
rel="stylesheet"/>
<link rel="stylesheet" href="/styles/main.css"/>
</head>
<body>
<main>
@ -29,7 +29,7 @@
<div class="shopping-form-quatity-wrapper">
<button class="shopping-form-quantity-button shopping-form-decrement-button" type="button"></button>
<input type="text" name="item-quantity" value="1" disabled>
<input class="shopping-form-quantity-input" type="text" name="item-quantity" value="1" disabled>
<button class="shopping-form-quantity-button shopping-form-increment-button" type="button"></button>
</div>
</div>

89
styles/form.css Normal file
View File

@ -0,0 +1,89 @@
.shopping-form-inputs{
display: flex;
align-items: flex-end;
margin-bottom: 24px;
}
.shopping-form-item-wrapper{
flex: 1;
max-width: 256px;
}
.shopping-form-label{
display: block;
margin-bottom: 4px;
}
.shopping-form-item-input,
.shopping-form-quantity-input{
width: 100%;
height: 32px;
padding: 0 12px;
border: 1px solid var(--gray-300);
border-radius: 4px;
background: var(--white);
}
.shopping-form-quatity-wrapper{
display: flex;
align-items: center;
margin-left: 24px;
}
.shopping-form-quantity-input{
max-width: 64px;
text-align: center;
margin: 0 4px;
}
.shopping-form-quantity-button{
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: 32px;
height: 32px;
border: 0;
border-radius: 4px;
background: var(--gray-100);
transition: background-color 0.2s linear;
}
.shopping-form-quantity-button:hover{
background: var(--orange-500);
}
.shopping-form-quantity-button:active{
background: var(--orange-300);
}
.shopping-form-quantity-button::before,
.shopping-form-increment-button::after{
content: "";
position: absolute;
width: 16px;
height: 4px;
border-radius: 4px;
background: var(--white);
}
.shopping-form-increment-button::after{
transform: rotate(90deg);
}
.shopping-form-submit-button{
width: 100%;
max-width: 128px;
height: 32px;
border: 0;
border-radius: 4px;
color: var(--white);
font-weight: 700;
background-color: var(--orange-500);
transition: background-color .2s linear;
}
.shopping-form-submit-button:hover{
background-color: var(--orange-300);
}
.shopping-form-submit-button:active{
background-color: var(--orange-500);
}

15
styles/global.css Normal file
View File

@ -0,0 +1,15 @@
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
body,
input,
button{
font-family: 'Roboto', sans-serif;
font-size: 16px;
color: var(--gray-500);
}
button{
cursor: pointer;
}

14
styles/main.css Normal file
View File

@ -0,0 +1,14 @@
@import "/styles/global.css";
@import "/styles/varibles.css";
@import "/styles/form.css";
.shopping-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
.shopping-title{
margin: 32px 0;
font-size: 32px;
}

10
styles/varibles.css Normal file
View File

@ -0,0 +1,10 @@
:root{
--white:#fff;
--gray-100: #e5e5ee;
--gray-300: #bdbdbd;
--gray-500: #333;
--orange-300: #f6ad55;
--orange-500: #ed8936;
}