From cf9dabd667660fba00590756bdb5914c5e227b64 Mon Sep 17 00:00:00 2001 From: TJ Egan Date: Thu, 27 Feb 2020 13:18:41 +0100 Subject: [PATCH 1/2] fix(checkbox): move padding to label instead of checkbox --- packages/components/src/components/checkbox/_checkbox.scss | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/components/src/components/checkbox/_checkbox.scss b/packages/components/src/components/checkbox/_checkbox.scss index d3a0102f9509..e11ae08b3b1d 100644 --- a/packages/components/src/components/checkbox/_checkbox.scss +++ b/packages/components/src/components/checkbox/_checkbox.scss @@ -53,11 +53,14 @@ position: relative; display: flex; cursor: pointer; - padding-left: rem(26px); //width of checkbox 16px + 10px of padding min-height: rem(24px); user-select: none; } + .#{$prefix}--checkbox-label-text { + padding-left: rem(26px); //width of checkbox 16px + 10px of padding + } + // Required because `$css--reset: true` cannot currently apply to this `::before` and `::after` .#{$prefix}--checkbox-label::before, .#{$prefix}--checkbox-label::after { From 9ea67c9bc5c9b1f00f2226059b368ff530d8c27b Mon Sep 17 00:00:00 2001 From: TJ Egan Date: Fri, 28 Feb 2020 12:36:37 +0100 Subject: [PATCH 2/2] fix(checkbox): split padding --- packages/components/src/components/checkbox/_checkbox.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/components/src/components/checkbox/_checkbox.scss b/packages/components/src/components/checkbox/_checkbox.scss index e11ae08b3b1d..ace2988933b1 100644 --- a/packages/components/src/components/checkbox/_checkbox.scss +++ b/packages/components/src/components/checkbox/_checkbox.scss @@ -55,10 +55,11 @@ cursor: pointer; min-height: rem(24px); user-select: none; + padding-left: rem(20px); } .#{$prefix}--checkbox-label-text { - padding-left: rem(26px); //width of checkbox 16px + 10px of padding + padding-left: rem(6px); // Add extra spacing when label is present } // Required because `$css--reset: true` cannot currently apply to this `::before` and `::after`