Updated todo demo app styles

MGLICH · Sep 2, 2022 · 181e762 · 181e762
1 parent dd51f95
commit 181e762
Show file tree

Hide file tree

Showing 6 changed files with 263 additions and 168 deletions.
diff --git a/demo-to-do/index.html b/demo-to-do/index.html
@@ -1,31 +1,42 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>TODO app</title>
+    <link
+      rel="stylesheet"
+      href="styles/light-theme.css"
+      media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
+    />
+    <link
+      rel="stylesheet"
+      href="styles/dark-theme.css"
+      media="(prefers-color-scheme: dark)"
+    />
+    <link rel="stylesheet" href="styles/base.css" />
+    <link rel="stylesheet" href="styles/to-do-styles.css" />
+    <link
+      rel="icon"
+      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>📋</text></svg>"
+    />
+  </head>
 
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>TODO app</title>
-  <link rel="stylesheet" href="styles/light-theme.css"
-    media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)">
-  <link rel="stylesheet" href="styles/dark-theme.css" media="(prefers-color-scheme: dark)">
-  <link rel="stylesheet" href="styles/base.css">
-  <link rel="stylesheet" href="styles/to-do-styles.css">
-  <link rel="icon"
-    href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>📋</text></svg>">
-</head>
+  <body>
+    <form>
+      <div class="new-task-form" tabindex="0">
+        <label for="new-task">➕ Add a task</label>
+        <input
+          id="new-task"
+          autocomplete="off"
+          type="text"
+          placeholder="Try typing 'Buy milk'"
+        />
+        <input type="submit" value="➡️" />
+      </div>
+      <ul id="tasks"></ul>
+    </form>
 
-<body>
-  <form>
-    <div class="searchbar">
-      <label for="task">Tasks:</label>
-      <input id="task" autocomplete="off" type="text" placeholder="What do you want to do" pattern="[a-z|A-Z|0-9| ]+">
-      <input type="submit" value="send">
-    </div>
-    <ul id="tasks"></ul>
-  </form>
-  <output></output>
-
-  <script src="to-do.js"></script>
-</body>
-
-</html>
+    <script src="to-do.js"></script>
+  </body>
+</html>
diff --git a/demo-to-do/styles/base.css b/demo-to-do/styles/base.css
@@ -1,22 +1,28 @@
-
 body {
-  font-size: calc(1em + 1vw);
-  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  font-size: 14pt;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   background: var(--background);
   color: var(--color);
+  --spacing: .5rem;
+}
+
+ul, li {
+  padding: 0;
+  margin: 0;
+  list-style-type: none;
 }
-ul, form {
-  margin: 1em auto;
-  padding: 20px;
-  max-width: 20em;
+
+* {
+  box-sizing: content-box;
 }
+
 input, button {
   border: none;
   margin:  0;
   padding: 0;
   background: transparent;
   font-family: inherit;
-  font-size: 0.8em;
+  font-size: inherit;
 }
 
 @media print {

diff --git a/demo-to-do/styles/dark-theme.css b/demo-to-do/styles/dark-theme.css
@@ -1,11 +1,8 @@
 :root {
     --background: #222;
-    --color: #fff;
-    --dropshadow: #000;
-    --hoverdone: #369;
-    --hovershadow: #000;
-    --separator: #ccc;
-    --done: #369;
-    --remove: #369;
-    --hovertext: #333;
+    --color: white;
+    --task-background: #333;
+    --task-hover-background: #444;
+    --task-completed-color: #ddd;
+    --delete-color: rgb(235, 73, 73);
 }
diff --git a/demo-to-do/styles/light-theme.css b/demo-to-do/styles/light-theme.css
@@ -1,11 +1,8 @@
 :root {
-    --background: lightblue;
+    --background: #5e72c1;
     --color: black;
-    --dropshadow: #333;
-    --hoverdone: #000;
-    --hovershadow: #999;
-    --separator: #000;
-    --done: #666;
-    --remove: #369;
-    --hovertext: #333;
+    --task-background: #eeeff3;
+    --task-hover-background: #f9fafe;
+    --task-completed-color: #666;
+    --delete-color: firebrick;
 }
diff --git a/demo-to-do/styles/to-do-styles.css b/demo-to-do/styles/to-do-styles.css
@@ -1,102 +1,133 @@
-@media screen and (min-width: 401px) {
-  .searchbar {
-    display: flex;
-    color: #fff;
-    background: black;
-    border-radius: 10px;
-    flex-direction: row;
-    box-shadow: 0 8px 8px var(--dropshadow);
-  } 
-  .searchbar label, .searchbar input {
-      flex-grow: 1;
-      padding: .2em .5em;
-  }
-  .searchbar input[type="submit"] {
-      background: #369;
-      color: #fff;
-      border-radius: 10px;
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-  }
-  .searchbar input[type="text"] {
-      display: block;
-      flex-grow: 3;
-      min-width: 0;
-      background: #fff;
-  }
-}
-@media screen and (max-width: 400px) {
-  .searchbar {
-    display: flex;
-    color: var(--color);
-    flex-direction: column;
-    gap: .5em;
-  } 
-  .searchbar input[type="text"] {
-    background: #fff;
-    padding: 5px;
-    border-radius: 10px;
-  }
-  .searchbar input[type="submit"] {
-    flex: 1;
-    padding: .2em .5em;
-    max-width: 5em;
-    align-self: flex-end;
-    background: #369;
-    color: #fff;
-    border-radius: 10px;
-  }
-}
-
-li {
-  list-style: none;
-  padding: 5px;
-  line-height: 1.3;
-  position: relative;
-  transition: 200ms;
-  border-bottom: 1px solid var(--separator);
-}
-li:hover {
-  background: #eee;
-  box-shadow: 0 2px 6px var(--hovershadow);
-  color: #000;
-}
-input[type=checkbox] {
-    border: 0;
-    clip: rect(0, 0, 0, 0);
-    height: 1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute !important;
-    white-space: nowrap;
-    width: 1px;
-}
-input[type=checkbox] + span {
-  fill: black;
-} 
-li:hover input[type=checkbox]:checked + span {
-  color: var(--hoverdone)
-}
-input[type=checkbox]:checked + span  {
-  color: var(--done);
+body {
+  margin: calc(2 * var(--spacing));
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+  max-width: 50rem;
+  margin: 0 auto;
+  gap: calc(2 * var(--spacing));
+}
+
+.new-task-form {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing);
+  color: var(--color);
+  background: var(--task-background);
+  padding: calc(2 * var(--spacing));
+  border-radius: calc(var(--spacing) / 2);
+  position: fixed;
+  width: calc(100% - 4 * var(--spacing));
+  max-width: 50rem;
+  box-sizing: border-box;
+  box-shadow: 0 calc(-2 * var(--spacing)) 0 calc(3 * var(--spacing)) var(--background);
+}
+
+.new-task-form:hover {
+  background-color: var(--task-hover-background);
+}
+
+.new-task-form label {
+  cursor: text;
+  flex-shrink: 0;
+}
+
+.new-task-form #new-task {
+  padding: var(--spacing);
+  opacity: 0;
+  flex: 1;
+  color: var(--color);
+}
+
+.new-task-form:focus-within {
+  outline: 2px solid var(--color);
+}
+
+.new-task-form:focus-within #new-task {
+  opacity: 1;
+  outline: none;
+}
+
+#tasks {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--spacing) / 2);
+  margin-top: calc(2rem + 7 * var(--spacing));
+}
+
+.task {
+  background: var(--task-background);
+  border-radius: calc(var(--spacing) / 2);
+  display: flex;
+  gap: var(--spacing);
+  align-items: center;
+  padding: calc(2 * var(--spacing));
+}
+
+.task.completed .text {
+  color: var(--task-completed-color);
   text-decoration: line-through;
-} 
-input[type=checkbox]:checked + span + button  {
-  color:var(--remove);
-} 
-input[type=checkbox]:checked + span + button  {
-  color:var(--remove);
-} 
-label:hover button, label:hover input[type=checkbox]:checked + span + button {
-  color: firebrick;
-}
-li label {
-  display: block;
-}
-li button {
-  color: transparent;
+}
+
+.task:hover {
+  background: var(--task-hover-background);
+}
+
+.task label {
+  cursor: pointer;
+  flex: 1;
+  display: flex;
+  gap: var(--spacing);
+  align-items: center;
+}
+
+.task .box {
+  display: none;
+}
+
+.task label::before {
+  content: '';
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+  border: 2px solid var(--color);
+  border-radius: 50%;
+  display: grid;
+  place-content: center;
+  font-size: .9rem;
   font-weight: bold;
-  position: absolute;
-  right: 5px;
-  top: 5px;
+}
+
+.task:hover label::before {
+  content: '✓';
+}
+
+.task.completed label::before {
+  color: var(--task-background);
+  background: var(--color);
+  content: '✓';
+  text-decoration: none;
+}
+
+.task .delete {
+  cursor: pointer;
+  font-weight: bold;
+  font-size: .5rem;
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+  border-radius: 50%;
+  display: grid;
+  place-content: center;
+
+  transition: all .2s;
+  color: transparent;
+  border: 2px solid transparent;
+}
+
+.task:hover .delete {
+  color: var(--delete-color);
+  border-color: var(--delete-color);
 }