SHARE
TWEET

Untitled

a guest May 24th, 2019 111 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /* Include the padding and border in an element's total width and height */
  2. * {
  3.   box-sizing: border-box;
  4. }
  5.  
  6. /* Remove margins and padding from the list */
  7. ul {
  8.   margin: 0;
  9.   padding: 0;
  10. }
  11.  
  12. /* Style the list items */
  13. ul li {
  14.   cursor: pointer;
  15.   position: relative;
  16.   padding: 12px 8px 12px 40px;
  17.   background: #eee;
  18.   font-size: 18px;
  19.   transition: 0.2s;
  20.  
  21.   /* make the list items unselectable */
  22.   -webkit-user-select: none;
  23.   -moz-user-select: none;
  24.   -ms-user-select: none;
  25.   user-select: none;
  26. }
  27.  
  28. /* Set all odd list items to a different color (zebra-stripes) */
  29. ul li:nth-child(odd) {
  30.   background: #f9f9f9;
  31. }
  32.  
  33. /* Darker background-color on hover */
  34. ul li:hover {
  35.   background: #ddd;
  36. }
  37.  
  38. /* When clicked on, add a background color and strike out text */
  39. ul li.checked {
  40.   background: #888;
  41.   color: #fff;
  42.   text-decoration: line-through;
  43. }
  44.  
  45. /* Add a "checked" mark when clicked on */
  46. ul li.checked::before {
  47.   content: '';
  48.   position: absolute;
  49.   border-color: #fff;
  50.   border-style: solid;
  51.   border-width: 0 2px 2px 0;
  52.   top: 10px;
  53.   left: 16px;
  54.   transform: rotate(45deg);
  55.   height: 15px;
  56.   width: 7px;
  57. }
  58.  
  59. /* Style the close button */
  60. .close {
  61.   position: absolute;
  62.   right: 0;
  63.   top: 0;
  64.   padding: 12px 16px 12px 16px;
  65. }
  66.  
  67. .close:hover {
  68.   background-color: #f44336;
  69.   color: white;
  70. }
  71.  
  72. /* Style the header */
  73. .header {
  74.   background-color: #f44336;
  75.   padding: 30px 40px;
  76.   color: white;
  77.   text-align: center;
  78. }
  79.  
  80. /* Clear floats after the header */
  81. .header:after {
  82.   content: "";
  83.   display: table;
  84.   clear: both;
  85. }
  86.  
  87. /* Style the input */
  88. input {
  89.   margin: 0;
  90.   border: none;
  91.   border-radius: 0;
  92.   width: 75%;
  93.   padding: 10px;
  94.   float: left;
  95.   font-size: 16px;
  96. }
  97.  
  98. /* Style the "Add" button */
  99. .addBtn {
  100.   padding: 10px;
  101.   width: 25%;
  102.   background: #d9d9d9;
  103.   color: #555;
  104.   float: left;
  105.   text-align: center;
  106.   font-size: 16px;
  107.   cursor: pointer;
  108.   transition: 0.3s;
  109.   border-radius: 0;
  110. }
  111.  
  112. .addBtn:hover {
  113.   background-color: #bbb;
  114. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top