From f2e0b848834a2944f84139ba195179bcef348824 Mon Sep 17 00:00:00 2001 From: Gabriel Cavalcante Date: Mon, 3 Jun 2024 17:34:21 -0300 Subject: [PATCH] style: estilos melhorados --- dist/css/style.css | 27 +++++++++++++++++++++- dist/css/style.css.map | 2 +- dist/css/style.min.css | 2 +- index.html | 4 ++-- src/sass/module/app/app-addItem.scss | 8 +++++++ src/sass/module/app/app-addItemButton.scss | 3 ++- src/sass/module/app/app-inputWrapper.scss | 5 ++++ src/sass/module/app/app-item.scss | 1 + src/sass/module/app/app-itemCategory.scss | 7 ++++++ src/sass/style.scss | 3 +++ 10 files changed, 56 insertions(+), 6 deletions(-) create mode 100644 src/sass/module/app/app-addItem.scss create mode 100644 src/sass/module/app/app-inputWrapper.scss create mode 100644 src/sass/module/app/app-itemCategory.scss diff --git a/dist/css/style.css b/dist/css/style.css index 83a1dfb..a5dfa2d 100644 --- a/dist/css/style.css +++ b/dist/css/style.css @@ -73,10 +73,34 @@ html body ul > li { row-gap: 0.5em; } +.app__input-wrapper { + display: flex; + column-gap: 0.5em; + align-items: center; +} + +#app__add-item { + flex: 1; + background-color: transparent; + border: 1px solid white; + padding: 0.5em; + border-radius: 0.5em; + color: white; +} + +#app__item-category { + background-color: transparent; + border: 1px solid white; + padding: 0.5em; + border-radius: 0.5em; + color: white; +} + .app__add-item-button { background-color: #737; + border-radius: 0.7em; color: white; - padding: 0.5em; + padding: 0.7em; transition: background-color 0.3s; } .app__add-item-button:hover { @@ -108,6 +132,7 @@ html body ul > li { display: flex; justify-content: space-between; padding-inline: 0.5em; + border-radius: 0.5em; } .app__check-wrapper { diff --git a/dist/css/style.css.map b/dist/css/style.css.map index 5d1af2c..fc5410f 100644 --- a/dist/css/style.css.map +++ b/dist/css/style.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../../src/sass/base/font.scss","../../src/sass/base/base.scss","../../src/sass/base/generic.scss","../../src/sass/module/app/app-container.scss","../../src/sass/module/app/app-mainTitle.scss","../../src/sass/module/app/app-inputSection.scss","../../src/sass/module/app/app-addItemButton.scss","../../src/sass/module/app/app-section.scss","../../src/sass/module/app/app-secondaryTitle.scss","../../src/sass/module/app/app-items.scss","../../src/sass/module/app/app-item.scss","../../src/sass/module/app/app-checkWrapper.scss","../../src/sass/module/app/app-deleteItem.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;ACTF;EACE;EACA;EACA;;;AAGF;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EAEE;;AAGF;EACE;EACA;;AAEA;EACE;;AAIJ;EACE;;;AClCN;EACE;;;AAGF;EACE;;;ACLF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACTF;EACE;;;ACDF;EACE;EACA;EACA;EACA;;;ACJF;EACE;EACA;EACA;EACA;;AAEA;EACE;;;ACPJ;EACE;EACA;EACA;EACA;;;ACJF;EACE;;;ACDF;EACE;EACA;EACA;EACA;;;ACJF;EACE;EACA;EACA;EACA;EACA;EACA;;;ACNF;EACE;EACA;;;ACFF;EACE;EACA;EACA","file":"style.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../../src/sass/base/font.scss","../../src/sass/base/base.scss","../../src/sass/base/generic.scss","../../src/sass/module/app/app-container.scss","../../src/sass/module/app/app-mainTitle.scss","../../src/sass/module/app/app-inputSection.scss","../../src/sass/module/app/app-inputWrapper.scss","../../src/sass/module/app/app-addItem.scss","../../src/sass/module/app/app-itemCategory.scss","../../src/sass/module/app/app-addItemButton.scss","../../src/sass/module/app/app-section.scss","../../src/sass/module/app/app-secondaryTitle.scss","../../src/sass/module/app/app-items.scss","../../src/sass/module/app/app-item.scss","../../src/sass/module/app/app-checkWrapper.scss","../../src/sass/module/app/app-deleteItem.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;ACTF;EACE;EACA;EACA;;;AAGF;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EAEE;;AAGF;EACE;EACA;;AAEA;EACE;;AAIJ;EACE;;;AClCN;EACE;;;AAGF;EACE;;;ACLF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACTF;EACE;;;ACDF;EACE;EACA;EACA;EACA;;;ACJF;EACE;EACA;EACA;;;ACHF;EACE;EACA;EACA;EACA;EACA;EACA;;;ACNF;EACE;EACA;EACA;EACA;EACA;;;ACLF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;;ACRJ;EACE;EACA;EACA;EACA;;;ACJF;EACE;;;ACDF;EACE;EACA;EACA;EACA;;;ACJF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;ACPF;EACE;EACA;;;ACFF;EACE;EACA;EACA","file":"style.css"} \ No newline at end of file diff --git a/dist/css/style.min.css b/dist/css/style.min.css index 73a73df..6682b7a 100644 --- a/dist/css/style.min.css +++ b/dist/css/style.min.css @@ -1 +1 @@ -@font-face{font-family:"Inter Regular";src:url("/dist/font/inter/inter-regular.ttf") format("truetype");font-display:swap}@font-face{font-family:"Inter Bold";src:url("/dist/font/inter/inter-regular.ttf") format("truetype");font-display:swap}*{box-sizing:border-box;margin:0;padding:0}html{font-size:16px}html body{background-color:white;color:white;font-family:"Inter Regular";font-size:1rem;font-style:normal;font-variant:normal;letter-spacing:0;line-height:1.25}html body h1,html body h2{font:inherit}html body button{border:0;font-family:"Inter Regular"}html body button:hover{cursor:pointer}html body ul>li{list-style-type:none}.bold{font-weight:700 !important}.uppercase{text-transform:uppercase !important}.app__container{align-items:center;background-color:#377;display:flex;flex-direction:column;margin-inline:auto;min-height:100svh;padding:.7em;row-gap:2em;width:clamp(320px,100%,480px)}.app__main-title{font-size:1.5rem}.app__input-section{align-self:stretch;display:flex;flex-direction:column;row-gap:.5em}.app__add-item-button{background-color:#737;color:white;padding:.5em;transition:background-color .3s}.app__add-item-button:hover{background-color:#636}.app__section{align-self:stretch;display:flex;flex-direction:column;row-gap:1em}.app__secondary-title{font-size:1.2rem}.app__items{align-self:stretch;display:flex;flex-direction:column;row-gap:2px}.app__item{align-items:center;align-self:stretch;background-color:#337;display:flex;justify-content:space-between;padding-inline:.5em}.app__check-wrapper{column-gap:.5em;display:flex}.app__delete-item{background-color:transparent;color:white;font-size:2rem} +@font-face{font-family:"Inter Regular";src:url("/dist/font/inter/inter-regular.ttf") format("truetype");font-display:swap}@font-face{font-family:"Inter Bold";src:url("/dist/font/inter/inter-regular.ttf") format("truetype");font-display:swap}*{box-sizing:border-box;margin:0;padding:0}html{font-size:16px}html body{background-color:white;color:white;font-family:"Inter Regular";font-size:1rem;font-style:normal;font-variant:normal;letter-spacing:0;line-height:1.25}html body h1,html body h2{font:inherit}html body button{border:0;font-family:"Inter Regular"}html body button:hover{cursor:pointer}html body ul>li{list-style-type:none}.bold{font-weight:700 !important}.uppercase{text-transform:uppercase !important}.app__container{align-items:center;background-color:#377;display:flex;flex-direction:column;margin-inline:auto;min-height:100svh;padding:.7em;row-gap:2em;width:clamp(320px,100%,480px)}.app__main-title{font-size:1.5rem}.app__input-section{align-self:stretch;display:flex;flex-direction:column;row-gap:.5em}.app__input-wrapper{display:flex;column-gap:.5em;align-items:center}#app__add-item{flex:1;background-color:transparent;border:1px solid white;padding:.5em;border-radius:.5em;color:white}#app__item-category{background-color:transparent;border:1px solid white;padding:.5em;border-radius:.5em;color:white}.app__add-item-button{background-color:#737;border-radius:.7em;color:white;padding:.7em;transition:background-color .3s}.app__add-item-button:hover{background-color:#636}.app__section{align-self:stretch;display:flex;flex-direction:column;row-gap:1em}.app__secondary-title{font-size:1.2rem}.app__items{align-self:stretch;display:flex;flex-direction:column;row-gap:2px}.app__item{align-items:center;align-self:stretch;background-color:#337;display:flex;justify-content:space-between;padding-inline:.5em;border-radius:.5em}.app__check-wrapper{column-gap:.5em;display:flex}.app__delete-item{background-color:transparent;color:white;font-size:2rem} diff --git a/index.html b/index.html index 5614267..1cb5974 100644 --- a/index.html +++ b/index.html @@ -21,11 +21,11 @@

Lista de Compras

-
+
-
+