After CR - added tooltip-variant mixin

ibexa · Feb 7, 2025 · 1a9d2d5 · 1a9d2d5
1 parent 0b8cc63
commit 1a9d2d5
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 130 deletions.
diff --git a/src/bundle/Resources/public/scss/_custom.tooltip.scss b/src/bundle/Resources/public/scss/_custom.tooltip.scss
@@ -63,146 +63,20 @@
     }
 
     &--dark {
-        .ibexa-tooltip {
-            &__inner {
-                color: $ibexa-color-white;
-                background-color: $ibexa-color-dark;
-                border-color: transparent;
-            }
-        }
-
-        &.ibexa-tooltip {
-            &.bs-tooltip-top,
-            &[data-popper-placement='top'] {
-                .ibexa-tooltip__arrow {
-                    &::before {
-                        border-top-color: $ibexa-color-dark;
-                    }
-                }
-            }
-
-            &.bs-tooltip-end,
-            &[data-popper-placement='right'] {
-                .ibexa-tooltip__arrow {
-                    &::before {
-                        border-right-color: $ibexa-color-dark;
-                    }
-                }
-            }
-
-            &.bs-tooltip-bottom,
-            &[data-popper-placement='bottom'] {
-                .ibexa-tooltip__arrow {
-                    &::before {
-                        border-bottom-color: $ibexa-color-dark;
-                    }
-                }
-            }
-
-            &.bs-tooltip-start,
-            &[data-popper-placement='left'] {
-                .ibexa-tooltip__arrow {
-                    &::before {
-                        border-left-color: $ibexa-color-dark;
-                    }
-                }
-            }
-        }
+        @include tooltip-variant($ibexa-color-white, $ibexa-color-dark);
     }
 
     &--ground-dark {
-        .ibexa-tooltip {
-            &__inner {
-                color: $ibexa-color-white;
-                background-color: $ibexa-color-complementary-strong;
-            }
-        }
-
-        &.ibexa-tooltip {
-            &.bs-tooltip-top,
-            &[data-popper-placement='top'] {
-                .ibexa-tooltip__arrow {
-                    &::before {
-                        border-top-color: $ibexa-color-complementary-strong;
-                    }
-                }
-            }
-
-            &.bs-tooltip-end,
-            &[data-popper-placement='right'] {
-                .ibexa-tooltip__arrow {
-                    &::before {
-                        border-right-color: $ibexa-color-complementary-strong;
-                    }
-                }
-            }
-
-            &.bs-tooltip-bottom,
-            &[data-popper-placement='bottom'] {
-                .ibexa-tooltip__arrow {
-                    &::before {
-                        border-bottom-color: $ibexa-color-complementary-strong;
-                    }
-                }
-            }
-
-            &.bs-tooltip-start,
-            &[data-popper-placement='left'] {
-                .ibexa-tooltip__arrow {
-                    &::before {
-                        border-left-color: $ibexa-color-complementary-strong;
-                    }
-                }
-            }
-        }
+        @include tooltip-variant($ibexa-color-white, $ibexa-color-complementary-strong);
     }
 
     &--navigation {
+        @include tooltip-variant($ibexa-color-dark, $ibexa-color-complementary-primary-400);
+
         .ibexa-tooltip {
             &__inner {
-                color: $ibexa-color-dark;
-                background-color: $ibexa-color-complementary-primary-400;
-                border-color: transparent;
                 box-shadow: 0 calculateRem(2px) calculateRem(8px) rgba($ibexa-color-dark, 0.15);
             }
         }
-
-        &.ibexa-tooltip {
-            &.bs-tooltip-top,
-            &[data-popper-placement='top'] {
-                .ibexa-tooltip__arrow {
-                    &::before {
-                        border-top-color: $ibexa-color-complementary-primary-400;
-                    }
-                }
-            }
-
-            &.bs-tooltip-end,
-            &[data-popper-placement='right'] {
-                .ibexa-tooltip__arrow {
-                    &::before {
-                        border-right-color: $ibexa-color-complementary-primary-400;
-                    }
-                }
-            }
-
-            &.bs-tooltip-bottom,
-            &[data-popper-placement='bottom'] {
-                .ibexa-tooltip__arrow {
-                    &::before {
-                        border-bottom-color: $ibexa-color-complementary-primary-400;
-                    }
-                }
-            }
-
-            &.bs-tooltip-start,
-            &[data-popper-placement='left'] {
-                .ibexa-tooltip__arrow {
-                    &::before {
-                        border-left-color: $ibexa-color-complementary-primary-400;
-                    }
-                }
-            }
-        }
     }
 }
diff --git a/src/bundle/Resources/public/scss/_mixins.scss b/src/bundle/Resources/public/scss/_mixins.scss
@@ -13,6 +13,7 @@
 @import 'mixins/drag-and-drop';
 @import 'mixins/spinner';
 @import 'mixins/tab-selector';
+@import 'mixins/tooltips';
 
 @mixin datetime-field() {
     &.is-invalid {

diff --git a/src/bundle/Resources/public/scss/mixins/_tooltips.scss b/src/bundle/Resources/public/scss/mixins/_tooltips.scss
@@ -0,0 +1,47 @@
+@mixin tooltip-variant($color, $background-color) {
+    .ibexa-tooltip {
+        &__inner {
+            color: $color;
+            background-color: $background-color;
+            border-color: $ibexa-color-dark;
+        }
+    }
+
+    &.ibexa-tooltip {
+        &.bs-tooltip-top,
+        &[data-popper-placement='top'] {
+            .ibexa-tooltip__arrow {
+                &::before {
+                    border-top-color: $background-color;
+                }
+            }
+        }
+
+        &.bs-tooltip-end,
+        &[data-popper-placement='right'] {
+            .ibexa-tooltip__arrow {
+                &::before {
+                    border-right-color: $background-color;
+                }
+            }
+        }
+
+        &.bs-tooltip-bottom,
+        &[data-popper-placement='bottom'] {
+            .ibexa-tooltip__arrow {
+                &::before {
+                    border-bottom-color: $background-color;
+                }
+            }
+        }
+
+        &.bs-tooltip-start,
+        &[data-popper-placement='left'] {
+            .ibexa-tooltip__arrow {
+                &::before {
+                    border-left-color: $background-color;
+                }
+            }
+        }
+    }
+}