WIP

src/ux-components/radio-service-package/radio-service-package.vue

@@ -1,7 +1,46 @@
 <template>
 <div class="package-wrapper">
   <input type="radio" name="test-radio" id="testradio">
-  <label for="testradio">Economy service</label>
+  <label for="testradio">
+    <div class="package-specs">
+        <p class="m-0">Economy service</p>
+        <ul>
+          <li>New replacement windshield</li>
+          <li>Expert installation</li>
+          <li>Nationwide lifetime warranty</li>
+        </ul>
+    </div>
+  </label>
+</div>
+<div class="package-wrapper">
+  <input type="radio" name="test-radio" id="testradio-2">
+  <label for="testradio-2">
+    <div class="package-specs">
+        <p class="mb-2">Standard service</p>
+        <p class="sub-label m-0">most popular</p>
+        <ul>
+          <li>New replacement windshield</li>
+          <li>Expert installation</li>
+          <li>Nationwide lifetime warranty</li>
+          <li>New wiper blades</li>
+        </ul>
+    </div>
+  </label>
+</div>
+<div class="package-wrapper">
+  <input type="radio" name="test-radio" id="testradio-3">
+  <label for="testradio-3">
+    <div class="package-specs">
+        <p class="mb-2">Premium service</p>
+        <ul>
+          <li>New replacement windshield</li>
+          <li>Expert installation</li>
+          <li>Nationwide lifetime warranty</li>
+          <li>New wiper blades</li>
+          <li>Rain Defense&trade; treatment</li>
+        </ul>
+    </div>
+  </label>
 </div>
 </template>
 
@@ -16,10 +55,12 @@ export default {
   margin: 0.5rem 0;
   input[type="radio"] {
     opacity: 0;
+    position: absolute;
+    left: -9999px;
 
     + label {
       display: flex;
-      align-items: center;
+      align-items: flex-start;
       position: relative;
       cursor: pointer;
       width: 100%;
@@ -27,9 +68,15 @@ export default {
       border: 1px solid $gray-300;
       box-shadow: 0px 4px 8px -4px rgba(0, 0, 0, 0.15), 0px 4px 24px -8px rgba(0, 0, 0, 0.2);
       border-radius: .5rem;
+      overflow: hidden;
+      min-height: 58px;
+      max-height: 0;
+      transition: max-height .5s ease;
 
       &::before {
         content: "";
+        position: relative;
+        top: 3px;
         margin-right: 1rem;
         border-radius: 50%;
         border: 1px solid $blue;
@@ -41,6 +88,7 @@ export default {
         content: "";
         position: absolute;
         left: 20px;
+        top: 23px;
         border-radius: 50%;
         width: 10px;
         height: 10px;
@@ -51,6 +99,7 @@ export default {
       + label {
         background-color: $blue-100;
         border: 1px solid $blue;
+        max-height: 500px;
       }
       + label::after {
         background: $blue;
@@ -63,5 +112,25 @@ export default {
       }
     }
   }
+
+  .package-specs {
+    display: flex;
+    flex-direction: column;
+
+    p {
+      &.sub-label {
+        color: $green;
+        text-transform: uppercase;
+      }
+    }
+  }
+
+  ul {
+    margin: 1rem 0 0 -15px;
+    padding: 0;
+    li {
+      margin-bottom: .5rem;
+    }
+  }
 }
 </style>