fix: fix box, checkbox, col style def

Author: gregberge

src/Box.js

@@ -33,19 +33,17 @@ const BoxComponent = ({ className, component: Component, ...props }) => (
 
 /** @component */
 const Box = styled(handleRef(BoxComponent))`
-  &.sui-box {
-    display: flex;
+  display: flex;
 
-    ${addProp('flex', 'flex', flex => (flex === true ? 1 : flex))};
-    ${addProp('direction', 'flex-direction')};
-    ${addProp('wrap', 'flex-wrap')};
-    ${addProp('alignItems', 'align-items')};
-    ${addProp('alignContent', 'align-content')};
-    ${addProp('alignSelf', 'align-self')};
-    ${addProp('justifyContent', 'justify-content')};
-    ${addProp('padding')};
-    ${addProp('margin')};
-  }
+  ${addProp('flex', 'flex', flex => (flex === true ? 1 : flex))};
+  ${addProp('direction', 'flex-direction')};
+  ${addProp('wrap', 'flex-wrap')};
+  ${addProp('alignItems', 'align-items')};
+  ${addProp('alignContent', 'align-content')};
+  ${addProp('alignSelf', 'align-self')};
+  ${addProp('justifyContent', 'justify-content')};
+  ${addProp('padding')};
+  ${addProp('margin')};
 `
 
 Box.propTypes = {

src/Checkbox.js

@@ -39,73 +39,71 @@ const CheckboxComponent = ({ className, size, ...props }) => (
 )
 
 const Checkbox = styled(CheckboxComponent)`
-  &.sui-checkbox {
-    display: inline-block;
-    position: relative;
-    width: 1.5rem;
-    height: 1.5rem;
-    z-index: ${props => props.theme.zIndexes.control};
+  display: inline-block;
+  position: relative;
+  width: 1.5rem;
+  height: 1.5rem;
+  z-index: ${props => props.theme.zIndexes.control};
 
-    .sui-checkbox-content {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 1rem;
-      height: 1rem;
-      background-color: ${props => props.theme.colors.white};
-      border-radius: ${props => props.theme.borderRadius.md};
-      border: 1px solid ${props => props.theme.colors.controlBorder};
-      transition: border-color ${props => props.theme.transition.time},
-        background-color ${props => props.theme.transition.time},
-        box-shadow ${props => props.theme.transition.time};
-
-      &.checked {
-        background-color: ${props => props.theme.colors.primary};
-        border-color: transparent;
+  .sui-checkbox-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1rem;
+    height: 1rem;
+    background-color: ${props => props.theme.colors.white};
+    border-radius: ${props => props.theme.borderRadius.md};
+    border: 1px solid ${props => props.theme.colors.controlBorder};
+    transition: border-color ${props => props.theme.transition.time},
+      background-color ${props => props.theme.transition.time},
+      box-shadow ${props => props.theme.transition.time};
 
-        svg {
-          transform: scale(1);
-        }
-      }
+    &.checked {
+      background-color: ${props => props.theme.colors.primary};
+      border-color: transparent;
 
-      &.focused {
-        ${props => props.theme.mixins.controlFocus};
+      svg {
+        transform: scale(1);
       }
+    }
 
-      &.disabled {
-        background-color: ${props => props.theme.colors.disabledControlBg};
-      }
+    &.focused {
+      ${props => props.theme.mixins.controlFocus};
     }
 
-    svg {
-      width: 0.75rem;
-      pointer-events: none;
-      transform: scale(0);
-      transition: transform ${props => props.theme.transition.time};
+    &.disabled {
+      background-color: ${props => props.theme.colors.disabledControlBg};
     }
+  }
 
-    &.sui-checkbox-sm {
-      .sui-checkbox-content {
-        border-radius: ${props => props.theme.borderRadius.sm};
-        width: 0.875rem;
-        height: 0.875rem;
-      }
+  svg {
+    width: 0.75rem;
+    pointer-events: none;
+    transform: scale(0);
+    transition: transform ${props => props.theme.transition.time};
+  }
 
-      svg {
-        width: 0.65rem;
-      }
+  &.sui-checkbox-sm {
+    .sui-checkbox-content {
+      border-radius: ${props => props.theme.borderRadius.sm};
+      width: 0.875rem;
+      height: 0.875rem;
     }
 
-    &.sui-checkbox-lg {
-      .sui-checkbox-content {
-        border-radius: ${props => props.theme.borderRadius.lg};
-        width: 1.25rem;
-        height: 1.25rem;
-      }
+    svg {
+      width: 0.65rem;
+    }
+  }
 
-      svg {
-        width: 0.9375rem;
-      }
+  &.sui-checkbox-lg {
+    .sui-checkbox-content {
+      border-radius: ${props => props.theme.borderRadius.lg};
+      width: 1.25rem;
+      height: 1.25rem;
+    }
+
+    svg {
+      width: 0.9375rem;
     }
   }
 `

src/Col.js

@@ -86,15 +86,13 @@ const ColComponent = ({ className, xs, sm, md, lg, xl, ...props }) => (
 
 /** @component */
 const Col = styled(handleRef(ColComponent))`
-  &.sui-col {
-    display: flex;
+  display: flex;
 
-    ${addProp('alignItems', 'align-items')};
-    ${addProp('alignContent', 'align-content')};
-    ${addProp('alignSelf', 'align-self')};
-    ${addProp('justifyContent', 'justify-content')};
-    ${props => Object.keys(props.theme.breakPoints).map(generateBreakPoint)};
-  }
+  ${addProp('alignItems', 'align-items')};
+  ${addProp('alignContent', 'align-content')};
+  ${addProp('alignSelf', 'align-self')};
+  ${addProp('justifyContent', 'justify-content')};
+  ${props => Object.keys(props.theme.breakPoints).map(generateBreakPoint)};
 `
 
 Col.propTypes = {