refactor: 💡 Improve spacing feature

phun-ky · Aug 23, 2024 · 95e7bae · 95e7bae
1 parent c89f435
commit 95e7bae
Show file tree

Hide file tree

Showing 6 changed files with 171 additions and 148 deletions.
diff --git a/README.md b/README.md
@@ -520,18 +520,17 @@ Allthough the styling works nicely with dark mode, you can use the provided CSS
   --ph-speccer-color-fuchsiaBlue: #7e60c5;
   --ph-speccer-base-color: var(--ph-speccer-color-artificialStrawberry);
   --ph-speccer-spacing-color: var(--ph-speccer-base-color);
-  --ph-speccer-spacing-color-padding: rgb(
+  --ph-speccer-spacing-padding-color: var(--ph-speccer-color-carbon);
+  --ph-speccer-spacing-padding-color-background: rgb(
     from var(--ph-speccer-color-venusSlipperOrchid) r g b /
       var(--ph-speccer-opacity-40)
   );
-  --ph-speccer-spacing-color-padding-hover: var(
-    --ph-speccer-color-venusSlipperOrchid
-  );
-  --ph-speccer-spacing-color-margin: rgb(
+  --ph-speccer-spacing-margin-color: var(--ph-speccer-color-red);
+  --ph-speccer-spacing-margin-color-background: rgb(
     from var(--ph-speccer-color-superBanana) r g b /
       var(--ph-speccer-opacity-40)
   );
-  --ph-speccer-spacing-color-margin-hover: var(--ph-speccer-color-superBanana);
+  --ph-speccer-spacing-line-width: var(--ph-speccer-line-width);
   --ph-speccer-typography-background-color: var(--ph-speccer-color-white);
   --ph-speccer-typography-color-property: var(--ph-speccer-color-niuZaiSeDenim);
   --ph-speccer-typography-color-text: var(--ph-speccer-base-color);

diff --git a/src/features/spacing/styles/index.styl b/src/features/spacing/styles/index.styl
@@ -1,129 +1,9 @@
 .ph-speccer.speccer.spacing
-  pointer-events auto
+  pointer-events none
   transition none
-  border var(--ph-speccer-line-width) solid transparent
-  &:hover
-    border var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark)
+  white-space nowrap
 
-.ph-speccer.speccer.spacing
-  &.margin
-    background-color var(--ph-speccer-spacing-color-margin)
-    color var(--ph-speccer-color-text-dark)
-
-.ph-speccer.speccer.spacing
-  &.padding
-    background-color var(--ph-speccer-spacing-color-padding)
-    color var(--ph-speccer-spacing-color)
-
-.ph-speccer.speccer.spacing
-  &.margin
-    &.bottom,
-    &.top
-      &::after
-        transition none
-        content ""
-        position absolute
-        height 100%
-        border-top var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark)
-        border-bottom var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark)
-        width 9px
-        left 40%
-
-.ph-speccer.speccer.spacing
-  &.margin
-    &.bottom,
-    &.top
-      &::before
-        transition none
-        content ""
-        position absolute
-        height 100%
-        border-left var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark)
-        margin-left 4px
-        width 0
-        left 40%
-
-.ph-speccer.speccer.spacing
-  &.margin
-    &.left,
-    &.right
-      &::after
-        transition none
-        content ""
-        position absolute
-        height 9px
-        border-right var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark)
-        border-left var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark)
-        width 100%
-        top 10%
 
-.ph-speccer.speccer.spacing
-  &.margin
-    &.left,
-    &.right
-      &::before
-        transition none
-        content ""
-        position absolute
-        height 0
-        border-top var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark)
-        margin-top 4px
-        width 100%
-        top 10%
-
-.ph-speccer.speccer.spacing
-  &.padding
-    &.bottom,
-    &.top
-      &::after
-        transition none
-        content ""
-        position absolute
-        height 100%
-        border-top var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color)
-        border-bottom var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color)
-        width 9px
-        left 40%
-
-.ph-speccer.speccer.spacing
-  &.padding
-    &.bottom,
-    &.top
-      &::before
-        transition none
-        content ""
-        position absolute
-        height 100%
-        border-left var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color)
-        margin-left 4px
-        width 0
-        left 40%
-
-.ph-speccer.speccer.spacing
-  &.padding
-    &.left,
-    &.right
-      &::after
-        transition none
-        content ""
-        position absolute
-        height 9px
-        border-right var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color)
-        border-left var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color)
-        width 100%
-        top 10%
-
-.ph-speccer.speccer.spacing
-  &.padding
-    &.left,
-    &.right
-      &::before
-        transition none
-        content ""
-        position absolute
-        height 0
-        border-top var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color)
-        margin-top 4px
-        width 100%
-        top 10%
 
+@require './padding.styl'
+@require './margin.styl'
diff --git a/src/features/spacing/styles/margin.styl b/src/features/spacing/styles/margin.styl
@@ -0,0 +1,71 @@
+.ph-speccer.speccer.spacing
+  &.margin
+    background-color var(--ph-speccer-spacing-margin-color-background)
+    color var(--ph-speccer-spacing-margin-color)
+
+.ph-speccer.speccer.spacing
+  &.margin
+    &.bottom,
+    &.top
+      display: flex;
+      justify-content: flex-start;
+      padding-left: 4px;
+
+.ph-speccer.speccer.spacing
+  &.margin
+    &.right,
+    &.left
+      display: flex;
+      justify-content: flex-end;
+      flex-direction: column;
+      padding-bottom: 4px;
+
+.ph-speccer.speccer.spacing
+  &.margin
+    &::after,
+    &::before
+      transition none
+      content ""
+      position absolute
+
+.ph-speccer.speccer.spacing
+  &.margin
+    &.bottom,
+    &.top
+      &::after
+        left calc(6ch - 5px)
+        height 100%
+        width 10px
+        border-top var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-margin-color)
+        border-bottom var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-margin-color)
+
+.ph-speccer.speccer.spacing
+  &.margin
+    &.bottom,
+    &.top
+      &::before
+        left 6ch
+        height 100%
+        border-left var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-margin-color)
+        width 0
+
+.ph-speccer.speccer.spacing
+  &.margin
+    &.left,
+    &.right
+      &::after
+        height 10px
+        border-right var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-margin-color)
+        border-left var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-margin-color)
+        width 100%
+        top calc(100% - 24px - 10px)
+
+.ph-speccer.speccer.spacing
+  &.margin
+    &.left,
+    &.right
+      &::before
+        height 0
+        border-top var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-margin-color)
+        width 100%
+        top calc(100% - 24px - 5px)
diff --git a/src/features/spacing/styles/padding.styl b/src/features/spacing/styles/padding.styl
@@ -0,0 +1,72 @@
+.ph-speccer.speccer.spacing
+  &.padding
+    background-color var(--ph-speccer-spacing-padding-color-background)
+    color var(--ph-speccer-spacing-padding-color)
+
+.ph-speccer.speccer.spacing
+  &.padding
+    &::after,
+    &::before
+      transition none
+      content ""
+      position absolute
+
+.ph-speccer.speccer.spacing
+  &.padding
+    &.bottom,
+    &.top
+      display: flex;
+      justify-content: flex-start;
+      padding-left: 4px;
+
+.ph-speccer.speccer.spacing
+  &.padding
+    &.bottom,
+    &.top
+      &::after
+        left calc(6ch - 5px)
+        height 100%
+        width 10px
+        border-top var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-padding-color)
+        border-bottom var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-padding-color)
+
+.ph-speccer.speccer.spacing
+  &.padding
+    &.bottom,
+    &.top
+      &::before
+        left 6ch
+        height 100%
+        border-left var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-padding-color)
+        width 0
+
+.ph-speccer.speccer.spacing
+  &.padding
+    &.left,
+    &.right
+      display: flex;
+      justify-content: flex-end;
+      flex-direction: column;
+      padding-bottom: 4px;
+
+.ph-speccer.speccer.spacing
+  &.padding
+    &.left,
+    &.right
+      &::after
+        top calc(100% - 24px - 10px)
+        height 10px
+        width 100%
+        border-right var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-padding-color)
+        border-left var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-padding-color)
+
+.ph-speccer.speccer.spacing
+  &.padding
+    &.left,
+    &.right
+      &::before
+        top calc(100% - 24px - 5px)
+        height 0
+        border-top var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-padding-color)
+        width 100%
+
diff --git a/src/features/spacing/utils/position.ts b/src/features/spacing/utils/position.ts
@@ -32,30 +32,30 @@ export const position = async (
   if (property === 'marginTop')
     addStyles(spacingElement, {
       height: `${value}px`,
-      width: _target_rect.width + 'px',
-      left: _target_offset.left + 'px',
+      width: _target_rect.width + 96 + 'px',
+      left: _target_offset.left - 96+ 'px',
       top: _target_offset.top - value + 'px'
     });
 
   if (property === 'marginRight')
     addStyles(spacingElement, {
-      height: _target_rect.height + 'px',
+      height: _target_rect.height +48+ 'px',
       width: `${value}px`,
       left: _target_offset.left + parseInt(_target_rect.width + '', 10) + 'px',
-      top: _target_offset.top + 'px'
+      top: _target_offset.top+ 'px'
     });
 
   if (property === 'marginBottom')
     addStyles(spacingElement, {
       height: `${value}px`,
-      width: _target_rect.width + 'px',
-      left: _target_offset.left + 'px',
+      width: _target_rect.width + 96 + 'px',
+      left: _target_offset.left - 96+ 'px',
       top: _target_offset.top + parseInt(_target_rect.height + '', 10) + 'px'
     });
 
   if (property === 'marginLeft')
     addStyles(spacingElement, {
-      height: _target_rect.height + 'px',
+      height: _target_rect.height +48+ 'px',
       width: `${value}px`,
       left: _target_offset.left - value + 'px',
       top: _target_offset.top + 'px'
@@ -64,16 +64,16 @@ export const position = async (
   if (property === 'paddingTop')
     addStyles(spacingElement, {
       height: `${value}px`,
-      width: _target_rect.width + 'px',
-      left: _target_offset.left + 'px',
+      width: _target_rect.width + 96 + 'px',
+      left: _target_offset.left - 96+ 'px',
       top: _target_offset.top + 'px'
     });
 
   if (property === 'paddingBottom')
     addStyles(spacingElement, {
       height: `${value}px`,
-      width: _target_rect.width + 'px',
-      left: _target_offset.left + 'px',
+      width: _target_rect.width + 96 + 'px',
+      left: _target_offset.left - 96+ 'px',
       top:
         _target_offset.top +
         (parseInt(_target_rect.height + '', 10) - value) +
@@ -82,7 +82,7 @@ export const position = async (
 
   if (property === 'paddingRight')
     addStyles(spacingElement, {
-      height: _target_rect.height + 'px',
+      height: _target_rect.height +48 + 'px',
       width: `${value}px`,
       left:
         _target_offset.left +
@@ -93,9 +93,9 @@ export const position = async (
 
   if (property === 'paddingLeft')
     addStyles(spacingElement, {
-      height: _target_rect.height + 'px',
+      height: _target_rect.height + 48 + 'px',
       width: `${value}px`,
       left: _target_offset.left + 'px',
-      top: _target_offset.top + 'px'
+      top: _target_offset.top  +'px'
     });
 };
diff --git a/src/styles/variables.styl b/src/styles/variables.styl
@@ -14,10 +14,11 @@
   .ph-speccer.speccer{
     --ph-speccer-base-color: var(--ph-speccer-color-artificialStrawberry);
     --ph-speccer-spacing-color: var(--ph-speccer-base-color);
-    --ph-speccer-spacing-color-padding: rgb(from var(--ph-speccer-color-venusSlipperOrchid) r g b / var(--ph-speccer-opacity-40));
-    --ph-speccer-spacing-color-padding-hover: var(--ph-speccer-color-venusSlipperOrchid);
-    --ph-speccer-spacing-color-margin: rgb(from var(--ph-speccer-color-superBanana) r g b / var(--ph-speccer-opacity-40));
-    --ph-speccer-spacing-color-margin-hover: var(--ph-speccer-color-superBanana);
+    --ph-speccer-spacing-padding-color: var(--ph-speccer-color-carbon);
+    --ph-speccer-spacing-padding-color-background: rgb(from var(--ph-speccer-color-venusSlipperOrchid) r g b / var(--ph-speccer-opacity-40));
+    --ph-speccer-spacing-margin-color: var(--ph-speccer-color-red);
+    --ph-speccer-spacing-margin-color-background: rgb(from var(--ph-speccer-color-superBanana) r g b / var(--ph-speccer-opacity-40));
+    --ph-speccer-spacing-line-width: var(--ph-speccer-line-width);
     --ph-speccer-typography-background-color: var(--ph-speccer-color-white);
     --ph-speccer-typography-color-property: var(--ph-speccer-color-niuZaiSeDenim);
     --ph-speccer-typography-color-text: var(--ph-speccer-base-color);