From c10a0b2e80af445f91cc8aecb4b469c171aa10e4 Mon Sep 17 00:00:00 2001
From: Laura Alvarez <laura.alvare@talosdigital.com>
Date: Fri, 19 Oct 2018 09:45:23 -0500
Subject: [PATCH 1/2] html / css updated for checkboxes exercise

---
 src/012-checkbox/example/example.css | 161 ++++++++++++++++++++++-----
 src/012-checkbox/example/index.html  |   6 +-
 2 files changed, 138 insertions(+), 29 deletions(-)

diff --git a/src/012-checkbox/example/example.css b/src/012-checkbox/example/example.css
index 8f18b26..4597783 100644
--- a/src/012-checkbox/example/example.css
+++ b/src/012-checkbox/example/example.css
@@ -13,10 +13,25 @@ html {
 }
 
 .container {
-  margin: 0 30px;
   font-family: sans-serif;
+  padding: 10px;
+  position: relative;
+  margin: 20px auto;
+}
+
+.container input {
+  opacity: 0;
+  display: none;
+  visibility: hidden;
 }
 
+.container input:checked + label {
+  background: #fff;
+  opacity: 1;
+  box-shadow: 1px 0 0 0 rgba(0,0,0,0.3);
+  color: black;
+  border: 2px solid #1babbb;
+}
 /*tabs*/
 
 .tabs {
@@ -27,6 +42,22 @@ html {
   box-shadow: 0 48px 80px -32px rgba(0, 0, 0, 0.3);
 }
 
+.panel1 ,
+.panel2 ,
+.panel3 {
+  visibility: hidden;
+  position: absolute;
+}
+
+#tab-1:checked ~ .panel1,
+#tab-2:checked ~ .panel2,
+#tab-3:checked ~ .panel3 {
+  position: relative;
+  visibility: visible;
+  top: 0;
+  left: 0;
+}
+
 .input {
   position: absolute;
   opacity: 0;
@@ -41,10 +72,14 @@ html {
   font-size: 18px;
   color: #7f7f7f;
   transition: background 0.1s, color 0.1s;
+  text-align: center;
+  opacity: 0.8;
 }
 
 .label:hover {
   background: #d8d8d8;
+  opacity: 1;
+
 }
 
 .label:active {
@@ -63,8 +98,7 @@ html {
   }
 }
 
-.panel {
-  display: none;
+.panel1, .panel2, .panel3 {
   padding: 20px 30px 30px;
   background: #fff;
   box-sizing: border-box;
@@ -72,12 +106,11 @@ html {
 }
 
 @media (min-width: 600px) {
-  .panel {
+  .panel1, .panel2, .panel3 {
     order: 99;
   }
 }
 
-
 /* Checkboxes and Radio Buttons */
 
 .control-group {
@@ -120,50 +153,101 @@ html {
   border-radius: 50%;
 }
 
+.control--radio .control__indicator:after {
+  top: 7px;
+  left: 7px;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #fff;
+}
+
+.control .control--checkbox,
+.control .control--radio {
+  display: block;
+  position: relative;
+  padding-left: 35px;
+  margin-bottom: 12px;
+  cursor: pointer;
+  font-size: 22px;
+}
+
+.control .control--checkbox input,
+.control .control--radio input {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  height: 0;
+  width: 0;
+}
+
+.control__indicator {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 25px;
+ width: 25px;
+ background-color: #eee;
+}
+
+.control__indicator .control-group:nth-child(2){
+  border-radius: 50%
+}
+
+.control--checkbox:hover input ~ .control__indicator,
+.control--radio:hover input ~ .control__indicator {
+  background-color: darkgray;
+  opacity: .6;
+}
+
 .control input:disabled ~ .control__indicator {
   pointer-events: none;
   opacity: .6;
   background: #e6e6e6;
 }
 
+.control--checkbox input:checked ~ .control__indicator,
+.control--radio input:checked ~ .control__indicator {
+  background-color: dodgerblue;
+}
+
 .control__indicator:after {
+  content: "";
   position: absolute;
   display: none;
-  content: '';
 }
 
+.control--checkbox input:checked ~ .control__indicator:after,
+.control--radio input:checked ~ .control__indicator:after {
+  display: block;
+}
 
 .control--checkbox .control__indicator:after {
-  top: 4px;
-  left: 8px;
-  width: 3px;
-  height: 8px;
+  left: 9px;
+  top: 5px;
+  width: 5px;
+  height: 10px;
+  border: solid white;
+  border-width: 0 3px 3px 0;
+  -webkit-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
   transform: rotate(45deg);
-  border: solid #fff;
-  border-width: 0 2px 2px 0;
 }
 
-
 .control--radio .control__indicator:after {
-  top: 7px;
-  left: 7px;
-  width: 6px;
-  height: 6px;
+  top: 8px;
+  left: 8px;
+  width: 10px;
+  height: 10px;
   border-radius: 50%;
-  background: #fff;
+  background: white;
 }
 
-
-
 /*Cards*/
 
-.list-checks {
-  margin: 20px;
-}
-
 .list-checks ul {
   list-style-type: none;
-  width: 500px;
+  padding-left: 0;
 }
 
 h3 {
@@ -175,6 +259,7 @@ h3 {
   margin: 0 15px 0 0;
   width: 100px;
   height: auto;
+  content: url('../resources/user.png');
 }
 
 .list-checks li p {
@@ -184,6 +269,7 @@ h3 {
 .list-checks li {
   padding: 10px;
   overflow: hidden;
+  margin: 0 20px;
 }
 
 .list-checks li:hover {
@@ -200,6 +286,11 @@ h3 {
   padding-right: 10px;
 }
 
+.tabs {
+  width: 100%;
+  margin: auto;
+}
+
 @media (max-width: 600px) {
   .container {
     margin: 0;
@@ -213,6 +304,24 @@ h3 {
   }
 
   .control-group {
-    padding: 30px 0;
+    padding: 30px;
   }
 }
+
+@media (max-width: 425px) {
+  .list-checks li {
+    display: inline-flex;
+    margin: 0;
+  }
+
+  .list-checks li img {
+    width: 50px;
+    height: 50px;
+  }
+
+  .list-checks h3 {
+    margin: 0;
+  }
+}
+
+
diff --git a/src/012-checkbox/example/index.html b/src/012-checkbox/example/index.html
index 19b6642..5147e99 100644
--- a/src/012-checkbox/example/index.html
+++ b/src/012-checkbox/example/index.html
@@ -39,7 +39,7 @@
         <div class="tabs">
           <input name="tabs" type="radio" id="tab-1" checked="checked" class="input"/>
           <label for="tab-1" class="label">Checkboxes</label>
-          <div class="panel">
+          <div class="panel1">
             <h3>Lorem ipsum dolor sit amet</h3>
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus in arcu magna. Pellentesque sit amet
               vestibulum ex, eget placerat metus. Sed vel sagittis massa, eu interdum mauris. Ut congue ipsum ex, eu
@@ -72,7 +72,7 @@ <h3>Checkboxes</h3>
 
           <input name="tabs" type="radio" id="tab-2" class="input"/>
           <label for="tab-2" class="label">Radio Buttons</label>
-          <div class="panel">
+          <div class="panel2">
             <h3>Lorem ipsum dolor sit amet</h3>
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus in arcu magna. Pellentesque sit amet
               vestibulum ex, eget placerat metus. Sed vel sagittis massa, eu interdum mauris. Ut congue ipsum ex, eu
@@ -104,7 +104,7 @@ <h3>Radio Buttons</h3>
 
           <input name="tabs" type="radio" id="tab-3" class="input"/>
           <label for="tab-3" class="label">Cards</label>
-          <div class="panel">
+          <div class="panel3">
             <h3>Lorem ipsum dolor sit amet</h3>
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus in arcu magna. Pellentesque sit amet
               vestibulum ex, eget placerat metus. Sed vel sagittis massa, eu interdum mauris. Ut congue ipsum ex, eu

From 674acf4d7ec197de9db73191722bc8dcf6a583d2 Mon Sep 17 00:00:00 2001
From: Laura Alvarez <laura.alvare@talosdigital.com>
Date: Fri, 19 Oct 2018 09:50:03 -0500
Subject: [PATCH 2/2] opacity updated

---
 src/012-checkbox/example/example.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/012-checkbox/example/example.css b/src/012-checkbox/example/example.css
index 4597783..ff32f1b 100644
--- a/src/012-checkbox/example/example.css
+++ b/src/012-checkbox/example/example.css
@@ -73,7 +73,7 @@ html {
   color: #7f7f7f;
   transition: background 0.1s, color 0.1s;
   text-align: center;
-  opacity: 0.8;
+  opacity: .8;
 }
 
 .label:hover {