From b5b4f6cad3e635f035b2d1074639b9f4589ef4e0 Mon Sep 17 00:00:00 2001
From: Vincent Audoire <vincent8992@gmail.com>
Date: Tue, 5 Nov 2019 13:31:25 +0100
Subject: [PATCH] [Input] p-label is now p-label--bordered

---
 scss/components/_input.scss | 32 ++++++++++++++++++++------------
 1 file changed, 20 insertions(+), 12 deletions(-)

diff --git a/scss/components/_input.scss b/scss/components/_input.scss
index d9515c07..cf272379 100644
--- a/scss/components/_input.scss
+++ b/scss/components/_input.scss
@@ -62,7 +62,9 @@
       margin-right: 16px;
 
       width: 16px;
+      min-width: 16px;
       height: 16px;
+      min-height: 16px;
 
       border: 1px solid $popsure-grey-300;
       border-radius: 50%;
@@ -109,7 +111,9 @@
       margin-right: 16px;
 
       width: 16px;
+      min-width: 16px;
       height: 16px;
+      min-height: 16px;
 
       border: 1px solid $popsure-grey-300;
       border-radius: 4px;
@@ -147,29 +151,33 @@
   cursor: pointer;
 
   display: flex;
-  align-items: center;
+  align-items: baseline;
 
   min-height: 48px;
   line-height: 24px;
   color: $popsure-grey-900;
 
-  padding-left: 16px;
-  padding-top: 8px;
-  padding-bottom: 8px;
+  &--bordered {
+    align-items: center;
 
-  border-radius: 8px;
-  border: 1px solid $popsure-grey-300;
-  background-color: white;
+    padding-top: 8px;
+    padding-bottom: 8px;
+    padding-left: 16px;
 
-  transition: 0.3s border-color, 0.3s background-color;
+    border-radius: 8px;
+    border: 1px solid $popsure-grey-300;
+    background-color: white;
 
-  &:hover {
-    border-color: $popsure-purple-500;
+    &:hover {
+      border-color: $popsure-purple-500;
+    }
+
+    transition: 0.3s border-color, 0.3s background-color;
   }
 }
 
-input:checked[type="radio"] + .p-label,
-input:checked[type="checkbox"] + .p-label {
+input:checked[type="radio"] + .p-label--bordered,
+input:checked[type="checkbox"] + .p-label--bordered {
   border-color: $popsure-purple-500;
   background-color: $popsure-purple-100;
 }