fix(styles): popover resize handle simplification

SAP · Aug 8, 2023 · e363fb2 · e363fb2
1 parent 44cee03
commit e363fb2
Showing 1 changed file with 29 additions and 26 deletions.
diff --git a/packages/styles/src/popover.scss b/packages/styles/src/popover.scss
@@ -1,5 +1,5 @@
-@import "./new-settings";
-@import "./mixins";
+@import './new-settings';
+@import './mixins';
 
 $block: #{$fd-namespace}-popover;
 $blockBody: #{$fd-namespace}-popover__body;
@@ -9,25 +9,21 @@ $blockBody: #{$fd-namespace}-popover__body;
 
   --fdPopover_Offset: 100%;
   --fdPopover_Center_Offset: 50%;
-  --fdPopover_Resize_Handle_Position_Top: auto;
-  --fdPopover_Resize_Handle_Position_Right: 0;
-  --fdPopover_Resize_Handle_Position_Bottom: 0;
-  --fdPopover_Resize_Handle_Position_Left: auto;
-  --fdPopover_Resize_Handle_Rotate_Angle: 0;
-  --fdPopover_Resize_Handle_Cursor: se-resize;
-  --fdPopover_Resize_Handle_Justify: flex-end;
-  --fdPopover_Resize_Handle_Transform_Scale: 1;
   --fdPopover_Arrow_Size: 0.5rem;
   --fdPopover_Body_Border_Radius: var(--fdPopover_Border_Radius);
   --fdPopover_Body_Box_Shadow: var(--sapContent_Shadow2);
   --fdPopover_Body_Box_Shadow_No_Arrow: var(--sapContent_Shadow1);
 
-  $fd-popover-z-index: map-get($fd-z-index-levels, "top") !default;
+  $fd-popover-z-index: map-get($fd-z-index-levels, 'top') !default;
   $fd-popover-arrow-size: var(--fdPopover_Arrow_Size);
   $fd-popover-arrow-size-inner: calc(var(--fdPopover_Arrow_Size) - var(--fdPopover_Border_Width)) !default;
   $fd-popover-arrow-color: var(--fdPopover_Border_Color) !default;
-  $fd-popover-arrow-offset-y: calc(var(--fdIcon_Button_Height) * 0.5 - var(--fdPopover_Arrow_Size) - var(--fdPopover_Border_Width));
-  $fd-popover-arrow-offset-x: calc(var(--fdIcon_Button_Width) * 0.5 - var(--fdPopover_Arrow_Size) - var(--fdPopover_Border_Width));
+  $fd-popover-arrow-offset-y: calc(
+    var(--fdIcon_Button_Height) * 0.5 - var(--fdPopover_Arrow_Size) - var(--fdPopover_Border_Width)
+  );
+  $fd-popover-arrow-offset-x: calc(
+    var(--fdIcon_Button_Width) * 0.5 - var(--fdPopover_Arrow_Size) - var(--fdPopover_Border_Width)
+  );
 
   @mixin fd-popover-arrow-x-end() {
     &::before {
@@ -97,6 +93,14 @@ $blockBody: #{$fd-namespace}-popover__body;
   &__body {
     --fdIcon_Button_Height: 2.25rem;
     --fdIcon_Button_Width: 2.25rem;
+    --fdPopover_Resize_Handle_Position_Top: auto;
+    --fdPopover_Resize_Handle_Position_Right: 0;
+    --fdPopover_Resize_Handle_Position_Bottom: 0;
+    --fdPopover_Resize_Handle_Position_Left: auto;
+    --fdPopover_Resize_Handle_Rotate_Angle: 0;
+    --fdPopover_Resize_Handle_Cursor: se-resize;
+    --fdPopover_Resize_Handle_Justify: flex-end;
+    --fdPopover_Resize_Handle_Transform_Scale: 1;
 
     @include fd-reset();
 
@@ -112,7 +116,7 @@ $blockBody: #{$fd-namespace}-popover__body;
     visibility: visible;
 
     @include fd-both-pseudo-selectors() {
-      content: "";
+      content: '';
       position: absolute;
     }
 
@@ -357,7 +361,7 @@ $blockBody: #{$fd-namespace}-popover__body;
       --fdPopover_Center_Offset: 0%;
     }
 
-    &[aria-hidden="true"],
+    &[aria-hidden='true'],
     &.is-hidden {
       z-index: -1;
       opacity: 0;
@@ -393,7 +397,7 @@ $blockBody: #{$fd-namespace}-popover__body;
         --fdPopover_Resize_Handle_Justify: flex-start;
       }
 
-      &.#{$blockBody}--right.#{$blockBody}--arrow-x-end {
+      &.#{$blockBody}--right {
         --fdPopover_Resize_Handle_Position_Left: 0;
         --fdPopover_Resize_Handle_Position_Right: auto;
         --fdPopover_Resize_Handle_Cursor: sw-resize;
@@ -407,7 +411,7 @@ $blockBody: #{$fd-namespace}-popover__body;
         }
       }
 
-      &.#{$blockBody}--above.#{$blockBody}--arrow-bottom {
+      &.#{$blockBody}--above {
         --fdPopover_Resize_Handle_Position_Top: 0;
         --fdPopover_Resize_Handle_Position_Bottom: auto;
         --fdPopover_Resize_Handle_Position_Right: 0;
@@ -424,11 +428,12 @@ $blockBody: #{$fd-namespace}-popover__body;
           --fdPopover_Resize_Handle_Rotate_Angle: 180deg;
         }
 
-        &.#{$blockBody}--right.#{$blockBody}--arrow-x-end {
+        &.#{$blockBody}--right {
           --fdPopover_Resize_Handle_Position_Right: auto;
           --fdPopover_Resize_Handle_Position_Left: 0;
           --fdPopover_Resize_Handle_Rotate_Angle: 180deg;
           --fdPopover_Resize_Handle_Cursor: nw-resize;
+          --fdPopover_Resize_Handle_Transform_Scale: 1;
 
           @include fd-rtl() {
             --fdPopover_Resize_Handle_Position_Right: 0;
@@ -439,7 +444,7 @@ $blockBody: #{$fd-namespace}-popover__body;
         }
       }
 
-      &.#{$blockBody}--after.#{$blockBody}--arrow-left {
+      &.#{$blockBody}--after {
         --fdPopover_Resize_Handle_Position_Top: auto;
         --fdPopover_Resize_Handle_Position_Bottom: 0;
         --fdPopover_Resize_Handle_Position_Right: 0;
@@ -450,8 +455,7 @@ $blockBody: #{$fd-namespace}-popover__body;
           --fdPopover_Resize_Handle_Rotate_Angle: -90deg;
         }
 
-        &.#{$blockBody}--bottom.#{$blockBody}--arrow-y-end,
-        &.#{$blockBody}--bottom.#{$blockBody}--arrow-y-bottom {
+        &.#{$blockBody}--bottom {
           --fdPopover_Resize_Handle_Position_Top: 0;
           --fdPopover_Resize_Handle_Position_Bottom: auto;
           --fdPopover_Resize_Handle_Position_Right: 0;
@@ -462,7 +466,7 @@ $blockBody: #{$fd-namespace}-popover__body;
         }
       }
 
-      &.#{$blockBody}--before.#{$blockBody}--arrow-right {
+      &.#{$blockBody}--before {
         --fdPopover_Resize_Handle_Position_Top: auto;
         --fdPopover_Resize_Handle_Position_Bottom: 0;
         --fdPopover_Resize_Handle_Position_Right: auto;
@@ -471,9 +475,8 @@ $blockBody: #{$fd-namespace}-popover__body;
         --fdPopover_Resize_Handle_Rotate_Angle: 0;
         --fdPopover_Resize_Handle_Transform_Scale: -1;
 
-        &.#{$blockBody}--middle.#{$blockBody}--arrow-y-center,
-        &.#{$blockBody}--bottom.#{$blockBody}--arrow-y-end,
-        &.#{$blockBody}--bottom.#{$blockBody}--arrow-y-bottom {
+        &.#{$blockBody}--middle,
+        &.#{$blockBody}--bottom {
           --fdPopover_Resize_Handle_Position_Top: 0;
           --fdPopover_Resize_Handle_Position_Bottom: auto;
           --fdPopover_Resize_Handle_Rotate_Angle: 90deg;
@@ -503,7 +506,7 @@ $blockBody: #{$fd-namespace}-popover__body;
     bottom: var(--fdPopover_Resize_Handle_Position_Bottom);
     transform: rotate(var(--fdPopover_Resize_Handle_Rotate_Angle));
 
-    @include fd-icon("resize-corner", "after") {
+    @include fd-icon('resize-corner', 'after') {
       @include fd-set-width(1rem);
       @include fd-set-height(1rem);