From c9abadb09b35ffce1c4342bb2b030e5ce2125310 Mon Sep 17 00:00:00 2001 From: shirly Date: Thu, 19 May 2022 19:38:18 +0300 Subject: [PATCH 1/3] feac: ex1 --- src/ex1/index.html | 19 +++- src/ex1/script.js | 58 ++++++++++ src/ex1/style.css | 268 +++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 341 insertions(+), 4 deletions(-) diff --git a/src/ex1/index.html b/src/ex1/index.html index 4d8c49943..93f519da2 100644 --- a/src/ex1/index.html +++ b/src/ex1/index.html @@ -1,14 +1,25 @@ + +
Exercise 1 - -

Todo list

- - +
+

Todo list

+
+ + +
+
+ +
+
diff --git a/src/ex1/script.js b/src/ex1/script.js index e69de29bb..a5c57bbd6 100644 --- a/src/ex1/script.js +++ b/src/ex1/script.js @@ -0,0 +1,58 @@ +const listToDo = document.querySelector(".listToDo"); +const count = document.querySelector(".count"); +const buttonClearAll = document.querySelector(".buttonClearAll"); +const newToInput = document.querySelector(".newToInput"); +const buttonAdd = document.querySelector(".buttonAdd"); + + +var removeSVG = ''; +count.textContent=0; + +clickButtonClearAll() + +document.addEventListener('keydown', addEnter); +buttonAdd.addEventListener('click',add ); +buttonClearAll.addEventListener('click',deleteListToDo ); + +function addEnter(event) { + if ((event.code === 'Enter')&&(document.querySelector('#newToDo input').value.length!=0)) add() + } + +function deleteListToDo() { + if (confirm("Are you sure??") == true) { + document.querySelector('#listToDo').innerHTML="" + count.textContent=0; + clickButtonClearAll() + } +} + +function clickButtonClearAll() { + if (count.textContent > 0) { + buttonClearAll.classList.add("active"); + } + else { + buttonClearAll.classList.remove("active"); + } +} + +function add () { + if(document.querySelector('#newToDo input').value.length == 0) { + alert("Please Enter new todo"); + } + else { + var div = document.createElement('div'); + div.classList.add('todo'); + var item = document.createElement('span'); + item.innerText = document.querySelector('#newToDo input').value; + var remove = document.createElement('button'); + remove.classList.add('delete'); + remove.innerHTML = removeSVG + remove.addEventListener('click', function(){this.parentNode.style.opacity = '0'; count.textContent--;clickButtonClearAll(); setTimeout(() => this.parentNode.remove()(), 200); }); + div.appendChild(remove); + div.appendChild(item); + listToDo.insertBefore(div, listToDo.childNodes[0]); + document.getElementById('newToInput').value = ""; + count.textContent++; + clickButtonClearAll() + } +} diff --git a/src/ex1/style.css b/src/ex1/style.css index e69de29bb..eae5af249 100644 --- a/src/ex1/style.css +++ b/src/ex1/style.css @@ -0,0 +1,268 @@ +* { + box-sizing: border-box; + font-family: "Lucida Console", "Courier New", monospace; + font-family:"Franklin Gothic Medium"; + } + + + .style { + padding: 45px; + width: 100%; + height: 100vh; + background-image: linear-gradient(120deg, lightblue, rgb(45, 111, 133)); + } + + .h2 { + font-size: 16px; + font-weight: bold; + } + + .hr { + border: 1px solid #f1f1f1; + margin-bottom: 25px; + } + input[type=text] { + padding-left: 15px; + width: 79%; + padding: 15px; + margin: 5px 0 22px 0; + border: none; + background: #f1f1f1; + } + + input[type=text]:focus { + background-color: #ddd; + outline: none; + } + + .footer { + display: inline; + width: 80px; + height: 90px; + } + .footer .h3 { + font-size: 4px; + margin :30px; + } + .footer .buttonClearAll { + background-color: #0095ff; + border: 1px solid transparent; + border-radius: 3px; + box-shadow: rgba(255, 255, 255, .4) 0 1px 0 0 inset; + box-sizing: border-box; + color: #fff; + cursor: pointer; + font-size: 10px; + padding: 6px 18px; + pointer-events: none; + opacity: 0; + display: inline-block; + } + .footer .buttonClearAll:hover, + .footer .buttonClearAll:focus { + background-color: #07c; + pointer-events: auto; + + } + + .footer .buttonClearAll:focus { + box-shadow: 0 0 0 4px rgba(0, 149, 255, .15); + pointer-events: auto; + } + + .footer .buttonClearAll.active { + box-shadow: none; + opacity: 1; + pointer-events: auto; + align-items: left; + margin :10px; + } + .buttonAdd { + background-color: #0095ff; + border: 1px solid transparent; + border-radius: 3px; + box-shadow: rgba(255, 255, 255, .4) 0 1px 0 0 inset; + box-sizing: border-box; + color: #fff; + cursor: pointer; + font-size: 19px; + font-weight: 400; + line-height: 1.15385; + margin: 0; + outline: none; + padding: 10px; + position: relative; + text-align: center; + text-decoration: none; + user-select: none; + -webkit-user-select: none; + touch-action: manipulation; + vertical-align: baseline; + white-space: nowrap; + } + + .buttonAdd:hover, + .buttonAdd:focus { + background-color: #07c; + } + + .buttonAdd:focus { + box-shadow: 0 0 0 4px rgba(0, 149, 255, .15); + } + + + .card { + box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); + transition: 0.3s; + width: 85%; + margin: auto; + width: 30%; + border: 3px solid rgb(0, 62, 128); + padding: 10px; + background-color: rgb(255, 255, 255); + align-items: center; + overflow: clip; + + } + + .card:hover { + box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); + } + + .todo{ + background-color: #c5e1e6; + height: 50px; + margin-bottom: 8px; + padding: 5px 10px; + border-radius: 5px; + align-items: center; + justify-content: space-between; + border: 1px solid #939697; + cursor: pointer; + width: 90%; + opacity: 1; + -webkit-transition: opacity 1000ms linear; + transition: opacity 1000ms linear; + word-break: break-all; + overflow: auto; + overflow: hidden; + animation: slideInRight; + animation-duration: 0.5s; + } + .todo span{ + display: block; + max-width: 2200px; + -ms-word-break: break-all; + word-break: break-all; + word-break: break-word; + opacity: 1; + } + + .todo:hover, + .todo:focus { + background-color: #7cafb8; + opacity: 1; + animation: slideInRight; + animation-duration: 0.5s; + } + + .todo:focus { + box-shadow: 0 0 0 4px rgba(167, 207, 236, 0.15); + } + + .todo:hover .delete{ + opacity: 1; + animation: slideInRight; + animation-duration: 0.5s; + } + + .todo .delete { + background-color: #0095ff; + border: 1px solid transparent; + border-radius: 3px; + box-shadow: rgba(255, 255, 255, .4) 0 1px 0 0 inset; + box-sizing: border-box; + color: #fff; + cursor: pointer; + font-size: 13px; + font-weight: 400; + line-height: 1.15385; + margin: 0; + outline: none; + padding: 10px; + position: relative; + text-align: center; + text-decoration: none; + user-select: none; + -webkit-user-select: none; + touch-action: manipulation; + vertical-align: baseline; + white-space: nowrap; + float: right; + opacity: 0; + } + + .todo .delete:hover, + .delete:focus { + background-color: #07c; + opacity: 1; + } + + .todo .delete:focus { + box-shadow: 0 0 0 4px rgba(0, 149, 255, .15); + opacity: 1; + } + .newToDo { + display: inline-block; + width: 10%; + text-align: center; + } + .button { + background-color: #0095ff; + border: 1px solid transparent; + border-radius: 3px; + box-shadow: rgba(255, 255, 255, .4) 0 1px 0 0 inset; + box-sizing: border-box; + color: #fff; + cursor: pointer; + display: inline-block; + font-family: "Times New Roman", Times, serif; + font-size: 13px; + font-weight: 400; + line-height: 1.15385; + margin: 0; + outline: none; + padding: 10px; + position: relative; + text-align: center; + text-decoration: none; + user-select: none; + -webkit-user-select: none; + touch-action: manipulation; + vertical-align: baseline; + white-space: nowrap; + } + + .button:hover, + .button:focus { + background-color: #07c; + } + + .button:focus { + box-shadow: 0 0 0 4px rgba(0, 149, 255, .15); + } + + @media screen and (max-width: 100px) { + .col-10,.col-90,input[type=submit]{ + width: 30%; + margin-top: 0; + } + } + @media (min-width:100px){ + .style { + margin-right:100px; + width: 100%; + height: 100vh; + background-image: linear-gradient(120deg, lightblue, rgb(45, 111, 133)); + } + } \ No newline at end of file From 1277f811ba6b60103ac92f9041f4adb61b467135 Mon Sep 17 00:00:00 2001 From: Bardugo Date: Mon, 23 May 2022 10:11:35 +0300 Subject: [PATCH 2/3] exc1-template --- src/ex1/index.html | 24 +--- src/ex1/script.js | 58 ---------- src/ex1/style.css | 268 --------------------------------------------- 3 files changed, 5 insertions(+), 345 deletions(-) diff --git a/src/ex1/index.html b/src/ex1/index.html index 93f519da2..7a8cafe01 100644 --- a/src/ex1/index.html +++ b/src/ex1/index.html @@ -1,25 +1,11 @@ - -
- + Exercise 1 - - -
+ +

Todo list

-
- - -
-
- -
- - -
+ + diff --git a/src/ex1/script.js b/src/ex1/script.js index a5c57bbd6..e69de29bb 100644 --- a/src/ex1/script.js +++ b/src/ex1/script.js @@ -1,58 +0,0 @@ -const listToDo = document.querySelector(".listToDo"); -const count = document.querySelector(".count"); -const buttonClearAll = document.querySelector(".buttonClearAll"); -const newToInput = document.querySelector(".newToInput"); -const buttonAdd = document.querySelector(".buttonAdd"); - - -var removeSVG = ''; -count.textContent=0; - -clickButtonClearAll() - -document.addEventListener('keydown', addEnter); -buttonAdd.addEventListener('click',add ); -buttonClearAll.addEventListener('click',deleteListToDo ); - -function addEnter(event) { - if ((event.code === 'Enter')&&(document.querySelector('#newToDo input').value.length!=0)) add() - } - -function deleteListToDo() { - if (confirm("Are you sure??") == true) { - document.querySelector('#listToDo').innerHTML="" - count.textContent=0; - clickButtonClearAll() - } -} - -function clickButtonClearAll() { - if (count.textContent > 0) { - buttonClearAll.classList.add("active"); - } - else { - buttonClearAll.classList.remove("active"); - } -} - -function add () { - if(document.querySelector('#newToDo input').value.length == 0) { - alert("Please Enter new todo"); - } - else { - var div = document.createElement('div'); - div.classList.add('todo'); - var item = document.createElement('span'); - item.innerText = document.querySelector('#newToDo input').value; - var remove = document.createElement('button'); - remove.classList.add('delete'); - remove.innerHTML = removeSVG - remove.addEventListener('click', function(){this.parentNode.style.opacity = '0'; count.textContent--;clickButtonClearAll(); setTimeout(() => this.parentNode.remove()(), 200); }); - div.appendChild(remove); - div.appendChild(item); - listToDo.insertBefore(div, listToDo.childNodes[0]); - document.getElementById('newToInput').value = ""; - count.textContent++; - clickButtonClearAll() - } -} diff --git a/src/ex1/style.css b/src/ex1/style.css index eae5af249..e69de29bb 100644 --- a/src/ex1/style.css +++ b/src/ex1/style.css @@ -1,268 +0,0 @@ -* { - box-sizing: border-box; - font-family: "Lucida Console", "Courier New", monospace; - font-family:"Franklin Gothic Medium"; - } - - - .style { - padding: 45px; - width: 100%; - height: 100vh; - background-image: linear-gradient(120deg, lightblue, rgb(45, 111, 133)); - } - - .h2 { - font-size: 16px; - font-weight: bold; - } - - .hr { - border: 1px solid #f1f1f1; - margin-bottom: 25px; - } - input[type=text] { - padding-left: 15px; - width: 79%; - padding: 15px; - margin: 5px 0 22px 0; - border: none; - background: #f1f1f1; - } - - input[type=text]:focus { - background-color: #ddd; - outline: none; - } - - .footer { - display: inline; - width: 80px; - height: 90px; - } - .footer .h3 { - font-size: 4px; - margin :30px; - } - .footer .buttonClearAll { - background-color: #0095ff; - border: 1px solid transparent; - border-radius: 3px; - box-shadow: rgba(255, 255, 255, .4) 0 1px 0 0 inset; - box-sizing: border-box; - color: #fff; - cursor: pointer; - font-size: 10px; - padding: 6px 18px; - pointer-events: none; - opacity: 0; - display: inline-block; - } - .footer .buttonClearAll:hover, - .footer .buttonClearAll:focus { - background-color: #07c; - pointer-events: auto; - - } - - .footer .buttonClearAll:focus { - box-shadow: 0 0 0 4px rgba(0, 149, 255, .15); - pointer-events: auto; - } - - .footer .buttonClearAll.active { - box-shadow: none; - opacity: 1; - pointer-events: auto; - align-items: left; - margin :10px; - } - .buttonAdd { - background-color: #0095ff; - border: 1px solid transparent; - border-radius: 3px; - box-shadow: rgba(255, 255, 255, .4) 0 1px 0 0 inset; - box-sizing: border-box; - color: #fff; - cursor: pointer; - font-size: 19px; - font-weight: 400; - line-height: 1.15385; - margin: 0; - outline: none; - padding: 10px; - position: relative; - text-align: center; - text-decoration: none; - user-select: none; - -webkit-user-select: none; - touch-action: manipulation; - vertical-align: baseline; - white-space: nowrap; - } - - .buttonAdd:hover, - .buttonAdd:focus { - background-color: #07c; - } - - .buttonAdd:focus { - box-shadow: 0 0 0 4px rgba(0, 149, 255, .15); - } - - - .card { - box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); - transition: 0.3s; - width: 85%; - margin: auto; - width: 30%; - border: 3px solid rgb(0, 62, 128); - padding: 10px; - background-color: rgb(255, 255, 255); - align-items: center; - overflow: clip; - - } - - .card:hover { - box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); - } - - .todo{ - background-color: #c5e1e6; - height: 50px; - margin-bottom: 8px; - padding: 5px 10px; - border-radius: 5px; - align-items: center; - justify-content: space-between; - border: 1px solid #939697; - cursor: pointer; - width: 90%; - opacity: 1; - -webkit-transition: opacity 1000ms linear; - transition: opacity 1000ms linear; - word-break: break-all; - overflow: auto; - overflow: hidden; - animation: slideInRight; - animation-duration: 0.5s; - } - .todo span{ - display: block; - max-width: 2200px; - -ms-word-break: break-all; - word-break: break-all; - word-break: break-word; - opacity: 1; - } - - .todo:hover, - .todo:focus { - background-color: #7cafb8; - opacity: 1; - animation: slideInRight; - animation-duration: 0.5s; - } - - .todo:focus { - box-shadow: 0 0 0 4px rgba(167, 207, 236, 0.15); - } - - .todo:hover .delete{ - opacity: 1; - animation: slideInRight; - animation-duration: 0.5s; - } - - .todo .delete { - background-color: #0095ff; - border: 1px solid transparent; - border-radius: 3px; - box-shadow: rgba(255, 255, 255, .4) 0 1px 0 0 inset; - box-sizing: border-box; - color: #fff; - cursor: pointer; - font-size: 13px; - font-weight: 400; - line-height: 1.15385; - margin: 0; - outline: none; - padding: 10px; - position: relative; - text-align: center; - text-decoration: none; - user-select: none; - -webkit-user-select: none; - touch-action: manipulation; - vertical-align: baseline; - white-space: nowrap; - float: right; - opacity: 0; - } - - .todo .delete:hover, - .delete:focus { - background-color: #07c; - opacity: 1; - } - - .todo .delete:focus { - box-shadow: 0 0 0 4px rgba(0, 149, 255, .15); - opacity: 1; - } - .newToDo { - display: inline-block; - width: 10%; - text-align: center; - } - .button { - background-color: #0095ff; - border: 1px solid transparent; - border-radius: 3px; - box-shadow: rgba(255, 255, 255, .4) 0 1px 0 0 inset; - box-sizing: border-box; - color: #fff; - cursor: pointer; - display: inline-block; - font-family: "Times New Roman", Times, serif; - font-size: 13px; - font-weight: 400; - line-height: 1.15385; - margin: 0; - outline: none; - padding: 10px; - position: relative; - text-align: center; - text-decoration: none; - user-select: none; - -webkit-user-select: none; - touch-action: manipulation; - vertical-align: baseline; - white-space: nowrap; - } - - .button:hover, - .button:focus { - background-color: #07c; - } - - .button:focus { - box-shadow: 0 0 0 4px rgba(0, 149, 255, .15); - } - - @media screen and (max-width: 100px) { - .col-10,.col-90,input[type=submit]{ - width: 30%; - margin-top: 0; - } - } - @media (min-width:100px){ - .style { - margin-right:100px; - width: 100%; - height: 100vh; - background-image: linear-gradient(120deg, lightblue, rgb(45, 111, 133)); - } - } \ No newline at end of file From 8db957e755a2874ec276e8f6c4be67c82c75be17 Mon Sep 17 00:00:00 2001 From: Bardugo Date: Mon, 23 May 2022 16:56:26 +0300 Subject: [PATCH 3/3] exc1 --- src/ex1/index.html | 43 ++++++-- src/ex1/script.js | 64 +++++++++++ src/ex1/style.css | 266 +++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 365 insertions(+), 8 deletions(-) diff --git a/src/ex1/index.html b/src/ex1/index.html index 7a8cafe01..2642ce812 100644 --- a/src/ex1/index.html +++ b/src/ex1/index.html @@ -1,11 +1,38 @@ - - Exercise 1 - - - -

Todo list

- - + +
+ + Exercise 1 + + + +
+

Todo list

+
+ + +
+
+ +
+ + +
diff --git a/src/ex1/script.js b/src/ex1/script.js index e69de29bb..b81f4414b 100644 --- a/src/ex1/script.js +++ b/src/ex1/script.js @@ -0,0 +1,64 @@ +const listToDo = document.querySelector(".listToDo"); +const count = document.querySelector(".count"); +const buttonClearAll = document.querySelector(".buttonClearAll"); +const newToInput = document.querySelector(".newToInput"); +const buttonAdd = document.querySelector(".buttonAdd"); + +var removeSVG = ''; +count.textContent = 0; + +clickButtonClearAll(); + +document.addEventListener("keydown", addEnter); +buttonAdd.addEventListener("click", add); +buttonClearAll.addEventListener("click", deleteListToDo); + +function addEnter(event) { + if ( + event.code === "Enter" && + document.querySelector("#newToDo input").value.length != 0 + ) + add(); +} + +function deleteListToDo() { + if (confirm("Are you sure??") == true) { + document.querySelector("#listToDo").innerHTML = ""; + count.textContent = 0; + clickButtonClearAll(); + } +} + +function clickButtonClearAll() { + if (count.textContent > 0) { + buttonClearAll.classList.add("active"); + } else { + buttonClearAll.classList.remove("active"); + } +} + +function add() { + if (document.querySelector("#newToDo input").value.length == 0) { + alert("Please Enter new todo"); + } else { + var div = document.createElement("div"); + div.classList.add("todo"); + var item = document.createElement("span"); + item.innerText = document.querySelector("#newToDo input").value; + var remove = document.createElement("button"); + remove.classList.add("delete"); + remove.innerHTML = removeSVG; + remove.addEventListener("click", function () { + this.parentNode.style.opacity = "0"; + count.textContent--; + clickButtonClearAll(); + setTimeout(() => this.parentNode.remove()(), 200); + }); + div.appendChild(remove); + div.appendChild(item); + listToDo.insertBefore(div, listToDo.childNodes[0]); + document.getElementById("newToInput").value = ""; + count.textContent++; + clickButtonClearAll(); + } +} diff --git a/src/ex1/style.css b/src/ex1/style.css index e69de29bb..f664720f5 100644 --- a/src/ex1/style.css +++ b/src/ex1/style.css @@ -0,0 +1,266 @@ +* { + box-sizing: border-box; + font-family: "Lucida Console", "Courier New", monospace; + font-family: "Franklin Gothic Medium"; +} + +.style { + padding: 45px; + width: 100%; + height: 100vh; + background-image: linear-gradient(120deg, lightblue, rgb(45, 111, 133)); +} + +.h2 { + font-size: 16px; + font-weight: bold; +} + +.hr { + border: 1px solid #f1f1f1; + margin-bottom: 25px; +} +input[type="text"] { + padding-left: 15px; + width: 79%; + padding: 15px; + margin: 5px 0 22px 0; + border: none; + background: #f1f1f1; +} + +input[type="text"]:focus { + background-color: #ddd; + outline: none; +} + +.footer { + display: inline; + width: 80px; + height: 90px; +} +.footer .h3 { + font-size: 4px; + margin: 30px; +} +.footer .buttonClearAll { + background-color: #0095ff; + border: 1px solid transparent; + border-radius: 3px; + box-shadow: rgba(255, 255, 255, 0.4) 0 1px 0 0 inset; + box-sizing: border-box; + color: #fff; + cursor: pointer; + font-size: 10px; + padding: 6px 18px; + pointer-events: none; + opacity: 0; + display: inline-block; +} +.footer .buttonClearAll:hover, +.footer .buttonClearAll:focus { + background-color: #07c; + pointer-events: auto; +} + +.footer .buttonClearAll:focus { + box-shadow: 0 0 0 4px rgba(0, 149, 255, 0.15); + pointer-events: auto; +} + +.footer .buttonClearAll.active { + box-shadow: none; + opacity: 1; + pointer-events: auto; + align-items: left; + margin: 10px; +} +.buttonAdd { + background-color: #0095ff; + border: 1px solid transparent; + border-radius: 3px; + box-shadow: rgba(255, 255, 255, 0.4) 0 1px 0 0 inset; + box-sizing: border-box; + color: #fff; + cursor: pointer; + font-size: 19px; + font-weight: 400; + line-height: 1.15385; + margin: 0; + outline: none; + padding: 10px; + position: relative; + text-align: center; + text-decoration: none; + user-select: none; + -webkit-user-select: none; + touch-action: manipulation; + vertical-align: baseline; + white-space: nowrap; +} + +.buttonAdd:hover, +.buttonAdd:focus { + background-color: #07c; +} + +.buttonAdd:focus { + box-shadow: 0 0 0 4px rgba(0, 149, 255, 0.15); +} + +.card { + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); + transition: 0.3s; + width: 85%; + margin: auto; + width: 30%; + border: 3px solid rgb(0, 62, 128); + padding: 10px; + background-color: rgb(255, 255, 255); + align-items: center; + overflow: clip; +} + +.card:hover { + box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2); +} + +.todo { + background-color: #c5e1e6; + height: 50px; + margin-bottom: 8px; + padding: 5px 10px; + border-radius: 5px; + align-items: center; + justify-content: space-between; + border: 1px solid #939697; + cursor: pointer; + width: 90%; + opacity: 1; + -webkit-transition: opacity 1000ms linear; + transition: opacity 1000ms linear; + word-break: break-all; + overflow: auto; + overflow: hidden; + animation: slideInRight; + animation-duration: 0.5s; +} +.todo span { + display: block; + max-width: 2200px; + -ms-word-break: break-all; + word-break: break-all; + word-break: break-word; + opacity: 1; +} + +.todo:hover, +.todo:focus { + background-color: #7cafb8; + opacity: 1; + animation: slideInRight; + animation-duration: 0.5s; +} + +.todo:focus { + box-shadow: 0 0 0 4px rgba(167, 207, 236, 0.15); +} + +.todo:hover .delete { + opacity: 1; + animation: slideInRight; + animation-duration: 0.5s; +} + +.todo .delete { + background-color: #0095ff; + border: 1px solid transparent; + border-radius: 3px; + box-shadow: rgba(255, 255, 255, 0.4) 0 1px 0 0 inset; + box-sizing: border-box; + color: #fff; + cursor: pointer; + font-size: 13px; + font-weight: 400; + line-height: 1.15385; + margin: 0; + outline: none; + padding: 10px; + position: relative; + text-align: center; + text-decoration: none; + user-select: none; + -webkit-user-select: none; + touch-action: manipulation; + vertical-align: baseline; + white-space: nowrap; + float: right; + opacity: 0; +} + +.todo .delete:hover, +.delete:focus { + background-color: #07c; + opacity: 1; +} + +.todo .delete:focus { + box-shadow: 0 0 0 4px rgba(0, 149, 255, 0.15); + opacity: 1; +} +.newToDo { + display: inline-block; + width: 10%; + text-align: center; +} +.button { + background-color: #0095ff; + border: 1px solid transparent; + border-radius: 3px; + box-shadow: rgba(255, 255, 255, 0.4) 0 1px 0 0 inset; + box-sizing: border-box; + color: #fff; + cursor: pointer; + display: inline-block; + font-family: "Times New Roman", Times, serif; + font-size: 13px; + font-weight: 400; + line-height: 1.15385; + margin: 0; + outline: none; + padding: 10px; + position: relative; + text-align: center; + text-decoration: none; + user-select: none; + -webkit-user-select: none; + touch-action: manipulation; + vertical-align: baseline; + white-space: nowrap; +} + +.button:hover, +.button:focus { + background-color: #07c; +} + +.button:focus { + box-shadow: 0 0 0 4px rgba(0, 149, 255, 0.15); +} + +@media screen and (max-width: 100px) { + .col-10, + .col-90, + input[type="submit"] { + width: 30%; + margin-top: 0; + } +} +@media (min-width: 100px) { + .style { + margin-right: 100px; + width: 100%; + height: 100vh; + background-image: linear-gradient(120deg, lightblue, rgb(45, 111, 133)); + } +}