WIP

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

@@ -3,7 +3,7 @@
   <input type="radio" name="test-radio" id="testradio">
   <label for="testradio">
     <div class="package-specs">
-        <p class="m-0">Economy service</p>
+        <p class="m-0">Economy service <span>As little as $0.00</span></p>
         <ul>
           <li>New replacement windshield</li>
           <li>Expert installation</li>
@@ -16,7 +16,7 @@
   <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="mb-2">Standard service <span>As little as 59.97</span></p>
         <p class="sub-label m-0">most popular</p>
         <ul>
           <li>New replacement windshield</li>
@@ -31,7 +31,7 @@
   <input type="radio" name="test-radio" id="testradio-3">
   <label for="testradio-3">
     <div class="package-specs">
-        <p class="mb-2">Premium service</p>
+        <p class="mb-2">Premium service <span>As little as $94.97</span></p>
         <ul>
           <li>New replacement windshield</li>
           <li>Expert installation</li>
@@ -71,27 +71,38 @@ export default {
       overflow: hidden;
       min-height: 58px;
       max-height: 0;
-      transition: max-height .5s ease;
+      transition: all .75s ease;
 
-      &::before {
+      &:before {
         content: "";
         position: relative;
-        top: 3px;
+        top: 5px;
         margin-right: 1rem;
         border-radius: 50%;
-        border: 1px solid $blue;
-        width: 18px;
-        height: 18px;
+        border: 1px solid $gray-500;
+        width: 16px;
+        height: 16px;
+        min-width: 16px;
       }
 
-      &::after {
+      &:after {
         content: "";
         position: absolute;
-        left: 20px;
-        top: 23px;
+        left: 19px;
+        top: 24px;
         border-radius: 50%;
         width: 10px;
         height: 10px;
+        min-width: 10px;
+      }
+    }
+
+    &:hover {
+      + label {
+        &:before {
+          border: 1px solid #8E9292;
+          box-shadow: 0px 0px 0px 4px #9FCEE6, 0px 1px 4px rgba(0, 0, 0, 0.2);
+        }
       }
     }
 
@@ -101,14 +112,23 @@ export default {
         border: 1px solid $blue;
         max-height: 500px;
       }
-      + label::after {
-        background: $blue;
+      + label {
+        &:before {
+          box-shadow: 0px 0px 0px 1px $blue;
+        }
+      }
+      + label {
+        &:after {
+          background: $blue;
+        }
       }
     }
 
     &:focus {
-      + label::before {
-        border: 2px solid $blue;
+      + label {
+        &:before {
+          border: 2px solid $blue;
+        }
       }
     }
   }
@@ -116,20 +136,26 @@ export default {
   .package-specs {
     display: flex;
     flex-direction: column;
+    width: 100%;
 
     p {
+      font-weight: 500;
+      display: flex;
+      justify-content: space-between;
+      span {
+        color: $green;
+      }
       &.sub-label {
         color: $green;
         text-transform: uppercase;
       }
     }
-  }
-
-  ul {
-    margin: 1rem 0 0 -15px;
-    padding: 0;
-    li {
-      margin-bottom: .5rem;
+    ul {
+      margin: 1rem 0 0 -15px;
+      padding: 0;
+      li {
+        margin-bottom: .5rem;
+      }
     }
   }
 }