From 7145d1e005cfff6f8f927964ec880a9ccbdf5462 Mon Sep 17 00:00:00 2001 From: aman1357 Date: Fri, 14 Jun 2024 23:27:28 +0530 Subject: [PATCH] . --- src/Components/Input.js | 34 ++++++------ src/Styles/Input.css | 64 +++++++++++----------- src/Styles/Input.css.map | 2 +- src/Styles/Input.scss | 109 ++++++++++++++++++-------------------- src/Styles/Output.css | 4 +- src/Styles/Output.css.map | 2 +- src/Styles/Output.scss | 4 +- 7 files changed, 109 insertions(+), 110 deletions(-) diff --git a/src/Components/Input.js b/src/Components/Input.js index 44b7639..1f15c10 100644 --- a/src/Components/Input.js +++ b/src/Components/Input.js @@ -30,23 +30,23 @@ const Input = () => { return ( <> -
-
-
- - - -
-
-
+
+
+
+ + + +
+
+
diff --git a/src/Styles/Input.css b/src/Styles/Input.css index d12d851..af7a147 100644 --- a/src/Styles/Input.css +++ b/src/Styles/Input.css @@ -4,44 +4,48 @@ box-sizing: border-box; } -.form-div { - margin-top: 2em; -} - -.form { - width: 100%; - height: 6em; +.form-container { display: flex; align-items: center; justify-content: center; - flex-direction: row; -} -.form .title-div { - margin-right: 2em; -} -.form div { width: 100%; + margin-top: 4em; } -.form .task-div { - display: flex; - align-items: center; - justify-content: center; -} -.form input { +.form-container .form { width: 80%; - height: 3em; +} + +.task-input { + width: 50%; border: 1px solid rgb(197, 190, 190); border-radius: 1.3em; - padding-left: 10px; + height: 4em; + padding: 1em; + margin: 0.5em; } -.form button { - height: 3em; - width: 5em; - border: none; + +.timer { + width: 20%; + border: 1px solid rgb(197, 190, 190); + border-radius: 1.3em; + height: 4em; + padding: 1em; + margin: 0.5em; +} + +.container::-webkit-scrollbar { + display: none; +} + +.add-button { background-color: black; color: white; - margin-left: 5px; + border: 1px solid rgb(197, 190, 190); border-radius: 1.3em; + height: 4em; + padding: 1em; + margin: 0.5em; + cursor: pointer; } .container { @@ -58,13 +62,11 @@ } .container .task-container { border: 1px solid rgb(197, 190, 190); - width: 70%; + width: 80%; + border-radius: 1em; + margin-left: 1em; } .container .alarm-container { border: 1px solid rgb(197, 190, 190); width: 20%; -} - -.container::-webkit-scrollbar { - display: none; }/*# sourceMappingURL=Input.css.map */ \ No newline at end of file diff --git a/src/Styles/Input.css.map b/src/Styles/Input.css.map index 31faafd..2dd6f39 100644 --- a/src/Styles/Input.css.map +++ b/src/Styles/Input.css.map @@ -1 +1 @@ -{"version":3,"sources":["Input.scss","Input.css"],"names":[],"mappings":"AAAA;EACI,SAAA;EACA,UAAA;EACA,sBAAA;ACCJ;;ADaA;EACI,eAAA;ACVJ;;ADaA;EAEI,WAAA;EACA,WAAA;EAjBA,aAAA;EACA,mBAAA;EACA,uBAAA;EAiBF,mBAAA;ACTF;ADUE;EACE,iBAAA;ACRJ;ADWE;EACE,WAAA;ACTJ;ADYE;EA5BE,aAAA;EACA,mBAAA;EACA,uBAAA;ACmBJ;ADYE;EA3BE,UAAA;EACD,WAAA;EA4BC,oCAAA;EACA,oBAAA;EACA,kBAAA;ACTJ;ADaE;EACE,WAAA;EACA,UAAA;EACA,YAAA;EACA,uBAAA;EACA,YAAA;EACA,gBAAA;EACA,oBAAA;ACXJ;;ADgBA;EACE,WAAA;EACA,YAAA;EACA,aAAA;EACA,uBAAA;EACA,YAAA;EACA,MAAA;EACA,SAAA;EACA,QAAA;EACA,OAAA;EACA,kBAAA;ACbF;ADcG;EACC,oCAAA;EACA,UAAA;ACZJ;ADeG;EACC,oCAAA;EACA,UAAA;ACbJ;;ADgBA;EACE,aAAA;ACbF","file":"Input.css"} \ No newline at end of file +{"version":3,"sources":["Input.scss","Input.css"],"names":[],"mappings":"AAAA;EACI,SAAA;EACA,UAAA;EACA,sBAAA;ACCJ;;ADsBA;EAnBI,aAAA;EACA,mBAAA;EACA,uBAAA;EAmBF,WAAA;EACA,eAAA;ACjBF;ADkBE;EACE,UAAA;AChBJ;;ADoBA;EACE,UAAA;EAjBA,oCAAA;EACA,oBAAA;EACA,WAAA;EACA,YAAA;EACA,aAAA;ACCF;;ADgBA;EACE,UAAA;EAtBA,oCAAA;EACA,oBAAA;EACA,WAAA;EACA,YAAA;EACA,aAAA;ACUF;;ADWA;EACE,aAAA;ACRF;;ADWA;EACE,uBAAA;EACA,YAAA;EA/BA,oCAAA;EACA,oBAAA;EACA,WAAA;EACA,YAAA;EACA,aAAA;EA6BA,eAAA;ACJF;;ADOA;EACI,WAAA;EACA,YAAA;EACA,aAAA;EACA,uBAAA;EACA,YAAA;EACA,MAAA;EACA,SAAA;EACA,QAAA;EACA,OAAA;EACA,kBAAA;ACJJ;ADKK;EACC,oCAAA;EACA,UAAA;EACA,kBAAA;EACA,gBAAA;ACHN;ADKK;EACC,oCAAA;EACA,UAAA;ACHN","file":"Input.css"} \ No newline at end of file diff --git a/src/Styles/Input.scss b/src/Styles/Input.scss index 9d26ad8..2f4ded2 100644 --- a/src/Styles/Input.scss +++ b/src/Styles/Input.scss @@ -13,72 +13,65 @@ @mixin area{ width:80%; height: 3em; -} -.form-div{ - margin-top: 2em; } -.form{ - - width:100%; - height:6em; - @include flex; - flex-direction: row; - .title-div{ - margin-right: 2em; - - } - div{ - width:100%; - } - - .task-div{ - @include flex; - } - +@mixin input { + border: 1px solid rgb(197, 190, 190); + border-radius: 1.3em; + height:4em; + padding: 1em; + margin:0.5em; +} - input{ - @include area; - border: 1px solid rgb(197, 190, 190); - border-radius: 1.3em; - padding-left: 10px; - - } - - button{ - height:3em; - width:5em; - border: none; - background-color: black; - color: white; - margin-left:5px; - border-radius: 1.3em; +.form-container{ + @include flex; + width:100%; + margin-top: 4em; + .form{ + width:80%; } +} +.task-input{ + width:50%; + @include input; } -.container{ - width:100%; - height:27em; - display: flex; - justify-content: center; - margin: auto; - top: 0; - bottom: 0; - right: 0; - left:0; - overflow-y: scroll; - .task-container{ - border: 1px solid rgb(197, 190, 190); - width:70% - - } - .alarm-container{ - border: 1px solid rgb(197, 190, 190); - width:20% - } +.timer{ + width:20%; + @include input; } .container::-webkit-scrollbar{ display:none -} \ No newline at end of file +} + +.add-button{ + background-color: black; + color:white; + @include input; + cursor: pointer; +} + +.container{ + width:100%; + height:27em; + display: flex; + justify-content: center; + margin: auto; + top: 0; + bottom: 0; + right: 0; + left:0; + overflow-y: scroll; + .task-container{ + border: 1px solid rgb(197, 190, 190); + width:80%; + border-radius: 1em; + margin-left: 1em; + } + .alarm-container{ + border: 1px solid rgb(197, 190, 190); + width:20% + } + } \ No newline at end of file diff --git a/src/Styles/Output.css b/src/Styles/Output.css index bf5075a..9b1c90b 100644 --- a/src/Styles/Output.css +++ b/src/Styles/Output.css @@ -6,10 +6,12 @@ .output-task { width: 100%; - height: 2em; + height: auto; flex-direction: row; margin-top: 0.5em; border-bottom: 1px solid rgb(227, 220, 220); + word-wrap: break-word; + overflow-wrap: break-word; display: flex; justify-content: center; align-items: center; diff --git a/src/Styles/Output.css.map b/src/Styles/Output.css.map index 6bdc92c..30e8441 100644 --- a/src/Styles/Output.css.map +++ b/src/Styles/Output.css.map @@ -1 +1 @@ -{"version":3,"sources":["Output.scss","Output.css"],"names":[],"mappings":"AAAA;EACI,SAAA;EACA,UAAA;EACA,sBAAA;ACCJ;;ADQA;EACI,WAAA;EACA,WAAA;EACA,mBAAA;EACA,iBAAA;EACA,2CAAA;EAVA,aAAA;EACA,uBAAA;EACA,mBAAA;ACMJ;ADIC;EACG,UAAA;ACFJ;ADGI;EACI,gBAAA;ACDR;;ADOA;EACI,YAAA;EACA,aAAA;EACA,YAAA;EACA,oBAAA;EACA,uBAAA;EACA,YAAA;ACJJ","file":"Output.css"} \ No newline at end of file +{"version":3,"sources":["Output.scss","Output.css"],"names":[],"mappings":"AAAA;EACI,SAAA;EACA,UAAA;EACA,sBAAA;ACCJ;;ADQA;EACI,WAAA;EACA,YAAA;EACA,mBAAA;EACA,iBAAA;EACA,2CAAA;EACA,qBAAA;EACA,yBAAA;EAZA,aAAA;EACA,uBAAA;EACA,mBAAA;ACQJ;ADIC;EACG,UAAA;ACFJ;ADGI;EACI,gBAAA;ACDR;;ADOA;EACI,YAAA;EACA,aAAA;EACA,YAAA;EACA,oBAAA;EACA,uBAAA;EACA,YAAA;ACJJ","file":"Output.css"} \ No newline at end of file diff --git a/src/Styles/Output.scss b/src/Styles/Output.scss index b949aa6..0ef20c7 100644 --- a/src/Styles/Output.scss +++ b/src/Styles/Output.scss @@ -12,10 +12,12 @@ .output-task{ width:100%; - height:2em; + height:auto; flex-direction: row; margin-top:0.5em; border-bottom: 1px solid rgb(227, 220, 220); + word-wrap: break-word; + overflow-wrap: break-word; @include flex; .task{ width:80%;