From ba88fd2eb9d2fc20d31eff4b77eb2b3bf101b3c7 Mon Sep 17 00:00:00 2001 From: Francisco Pessano Date: Thu, 21 Oct 2021 22:26:45 -0300 Subject: [PATCH] Form styles done --- public/css/index.css | 47 +++++++++++++ public/css/index.css.map | 2 +- public/sass/_form.scss | 74 +++++++++++++++++++++ public/sass/index.scss | 3 +- src/components/Admin/Identify/Form/Form.jsx | 6 +- 5 files changed, 127 insertions(+), 5 deletions(-) create mode 100644 public/sass/_form.scss diff --git a/public/css/index.css b/public/css/index.css index 671c5b3..29ccc70 100644 --- a/public/css/index.css +++ b/public/css/index.css @@ -388,4 +388,51 @@ header h2 { color: #ffffff5f; } +.form-container { + font-family: Arial, Helvetica, sans-serif; +} +.form-container .options-container { + display: flex; + height: 10vh; + width: 100%; +} +.form-container .options-container .option { + color: #fff; + background-color: #3670c9; + cursor: pointer; + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + transition: ease-in-out 0.2s; +} +.form-container .options-container .option.active { + cursor: initial; + background-color: #364f75; + transition: ease-in-out 0.4s; +} +.form-container form { + height: 64vh; + display: flex; + flex-direction: column; + align-items: center; + padding-top: 3vh; +} +.form-container form input { + width: 33vw; + height: 5vh; + padding: 0; + box-sizing: content-box; + margin-bottom: 0.5vh; + border: 0; + border-bottom: 1px solid #797979; + outline: none; +} +.form-container form input[type=submit] { + margin-top: 1vh; + border-bottom: 0; + border: 1px solid #797979; +} + /*# sourceMappingURL=index.css.map */ diff --git a/public/css/index.css.map b/public/css/index.css.map index dc88824..db6bd8b 100644 --- a/public/css/index.css.map +++ b/public/css/index.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../sass/index.scss","../sass/_header.scss","../sass/_game-container.scss","../sass/_hangman.scss","../sass/_word.scss","../sass/_current-score.scss","../sass/_categories.scss","../sass/_defeat-victory.scss","../sass/_loading.scss","../sass/_letters-registered.scss","../sass/_letter-input.scss"],"names":[],"mappings":";AAAA;EACI;EACA;;;ACFJ;EACI;EAEA;EAEA;EACA;EACA;EACA;;AAEA;EDHA;EACA;EAIA;EACA;;ACGA;EDTA;EACA;EAIA;EACA;ECMI;EACA;EAEA;;;AAIR;EAIQ;IAEI;IACA;IAEA;IACA;IAEA;;EAEA;IACI;IACA;;;AC1ChB;EAEI;EACA;EAEA;;AAMA;EACI;EACA;EAEA;;;AAIR;EAEI;IAEI;IACA;IACA;;EAEA;IACI;;EAII;IAEI;;EAKZ;IACI;IACA;IAEA;IACA;IACA;;;AAKZ;;AAAA;AClDA;EAEI;;AAEA;EACI;;;ACLR;EJkBI;EACA;EIhBA;EAEA;EACA;EAEA;EAEA;EACA;;AAEA;EACI;EACA;EACA;EAEA;EAEA;EACA;EACA;;AAEA;EACI;;AAIR;EACI;EAEA;EAEA;;;AAIR;EAIQ;IAEI;;EAGJ;IACI;;;AAKZ;EAIQ;IAEI;;;AC3DZ;EAEI;EAEA;ELGA;EACA;EKAA;EAEA;;AAEA;EACI;;;ACbR;EAEI;;AAEA;EAEI;EAEA;EACA;EAEA;EACA;EAEA;EAEA;EAEA;EACA;EACA;EACA;EAEA;;AAKA;EACI;EACA;EAEA;EACA;EAEA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACI;EACA;;AA0BJ;EArBI,OAFuD;EAIvD,kBAoBc;EAnBd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAYZ;EA3BI,OAFuD;EAIvD,kBA0Bc;EAzBd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAkBZ;EAjCI,OAFuD;EAIvD,kBAgCc;EA/Bd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAwBZ;EAvCI,OAyCY;EAvCZ,kBAsCc;EArCd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AA+BZ;EA9CI,OAFuD;EAIvD,kBA6Cc;EA5Cd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAqCZ;EApDI,OAsDY;EApDZ,kBAmDc;EAlDd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AA4CZ;EA3DI,OAFuD;EAIvD,kBA0Dc;EAzDd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAmDhB;EACI;EAEA;EACA;;AAEA;EAEI;;AAIR;EACI;;AAIJ;EACI;EACA;;AAEA;EAEI;;AAGJ;EAEI;;;AAMhB;EAIQ;IACI;;EAEA;IAEI;;;AClKhB;EACI;EACA;EACA;EACA;EAEA;EACA;EAEA;EAEA;EACA;EAEA;EAEA;EAEA;;AAEA;EACI;EACA;;;AAIR;EACI;;;AAGJ;EACI;;;AAGJ;EAEI;IAEI;IACA;;;ACvCR;EACI;EACA;EACA;EAEA;EACA;EAEA;EACA;EAEA;EAEA;EACA;EACA;;AAEA;EACI;EACA;;;ACnBR;EACI;EAEA;EAEA;EAEA;EACA;EACA;EAEA;;AAEA;EACI;;;ACdR;EACI;EAEA;EACA;EACA;;AAEA;EAII,OAFO;EAGP,QAHO;EAKP;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA","file":"index.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../sass/index.scss","../sass/_header.scss","../sass/_game-container.scss","../sass/_hangman.scss","../sass/_word.scss","../sass/_current-score.scss","../sass/_categories.scss","../sass/_defeat-victory.scss","../sass/_loading.scss","../sass/_letters-registered.scss","../sass/_letter-input.scss","../sass/_form.scss"],"names":[],"mappings":";AAAA;EACI;EACA;;;ACFJ;EACI;EAEA;EAEA;EACA;EACA;EACA;;AAEA;EDHA;EACA;EAIA;EACA;;ACGA;EDTA;EACA;EAIA;EACA;ECMI;EACA;EAEA;;;AAIR;EAIQ;IAEI;IACA;IAEA;IACA;IAEA;;EAEA;IACI;IACA;;;AC1ChB;EAEI;EACA;EAEA;;AAMA;EACI;EACA;EAEA;;;AAIR;EAEI;IAEI;IACA;IACA;;EAEA;IACI;;EAII;IAEI;;EAKZ;IACI;IACA;IAEA;IACA;IACA;;;AAKZ;;AAAA;AClDA;EAEI;;AAEA;EACI;;;ACLR;EJkBI;EACA;EIhBA;EAEA;EACA;EAEA;EAEA;EACA;;AAEA;EACI;EACA;EACA;EAEA;EAEA;EACA;EACA;;AAEA;EACI;;AAIR;EACI;EAEA;EAEA;;;AAIR;EAIQ;IAEI;;EAGJ;IACI;;;AAKZ;EAIQ;IAEI;;;AC3DZ;EAEI;EAEA;ELGA;EACA;EKAA;EAEA;;AAEA;EACI;;;ACbR;EAEI;;AAEA;EAEI;EAEA;EACA;EAEA;EACA;EAEA;EAEA;EAEA;EACA;EACA;EACA;EAEA;;AAKA;EACI;EACA;EAEA;EACA;EAEA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACI;EACA;;AA0BJ;EArBI,OAFuD;EAIvD,kBAoBc;EAnBd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAYZ;EA3BI,OAFuD;EAIvD,kBA0Bc;EAzBd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAkBZ;EAjCI,OAFuD;EAIvD,kBAgCc;EA/Bd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAwBZ;EAvCI,OAyCY;EAvCZ,kBAsCc;EArCd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AA+BZ;EA9CI,OAFuD;EAIvD,kBA6Cc;EA5Cd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAqCZ;EApDI,OAsDY;EApDZ,kBAmDc;EAlDd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AA4CZ;EA3DI,OAFuD;EAIvD,kBA0Dc;EAzDd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAmDhB;EACI;EAEA;EACA;;AAEA;EAEI;;AAIR;EACI;;AAIJ;EACI;EACA;;AAEA;EAEI;;AAGJ;EAEI;;;AAMhB;EAIQ;IACI;;EAEA;IAEI;;;AClKhB;EACI;EACA;EACA;EACA;EAEA;EACA;EAEA;EAEA;EACA;EAEA;EAEA;EAEA;;AAEA;EACI;EACA;;;AAIR;EACI;;;AAGJ;EACI;;;AAGJ;EAEI;IAEI;IACA;;;ACvCR;EACI;EACA;EACA;EAEA;EACA;EAEA;EACA;EAEA;EAEA;EACA;EACA;;AAEA;EACI;EACA;;;ACnBR;EACI;EAEA;EAEA;EAEA;EACA;EACA;EAEA;;AAEA;EACI;;;ACdR;EACI;EAEA;EACA;EACA;;AAEA;EAII,OAFO;EAGP,QAHO;EAKP;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;;;ACvBR;EAEI;;AAEA;EAEI;EAGA;EACA;;AAEA;EAGI;EACA,kBAHkB;EAKlB;EAEA;EACA;EAEA;EACA;EACA;EACA;;AAEA;EAEI;EACA;EACA;;AAMZ;EAEI;EAEA;EACA;EAEA;EAEA;;AAEA;EAEI;EACA;EAEA;EACA;EAEA;EAEA;EACA;EAEA;;AAEA;EACI;EAEA;EACA","file":"index.css"} \ No newline at end of file diff --git a/public/sass/_form.scss b/public/sass/_form.scss new file mode 100644 index 0000000..9591c30 --- /dev/null +++ b/public/sass/_form.scss @@ -0,0 +1,74 @@ +.form-container { + + font-family: Arial, Helvetica, sans-serif; + + .options-container { + + display: flex; + + + height: 10vh; + width: 100%; + + .option { + $backgroundColor: rgb(54, 112, 201); + + color: #fff; + background-color: $backgroundColor; + + cursor: pointer; + + width: 100%; + height: 100%; + + display: flex; + justify-content: center; + align-items: center; + transition: ease-in-out 0.2s; + + &.active { + + cursor: initial; + background-color: adjust-color($color: $backgroundColor, $blackness: 33%, $alpha: 1.0); + transition: ease-in-out 0.4s; + } + + } + } + + form { + + height: 64vh; + + display: flex; + flex-direction: column; + + align-items: center; + + padding-top: 3vh; + + input { + + width: 33vw; + height: 5vh; + + padding: 0; + box-sizing: content-box; + + margin-bottom: 0.5vh; + + border: 0; + border-bottom: 1px solid rgb(121, 121, 121); + + outline: none; + + &[type="submit"] { + margin-top: 1vh; + + border-bottom: 0; + border: 1px solid rgb(121, 121, 121); + + } + } + } +} \ No newline at end of file diff --git a/public/sass/index.scss b/public/sass/index.scss index 5494c04..65afeae 100644 --- a/public/sass/index.scss +++ b/public/sass/index.scss @@ -25,4 +25,5 @@ html, body { @import 'defeat-victory'; @import 'loading'; @import 'letters-registered'; -@import 'letter-input' \ No newline at end of file +@import 'letter-input'; +@import 'form'; \ No newline at end of file diff --git a/src/components/Admin/Identify/Form/Form.jsx b/src/components/Admin/Identify/Form/Form.jsx index 9a05847..183423e 100644 --- a/src/components/Admin/Identify/Form/Form.jsx +++ b/src/components/Admin/Identify/Form/Form.jsx @@ -7,10 +7,10 @@ const Form = () => { return (
@@ -33,7 +33,7 @@ const Form = () => { - +