Merge pull request #90 from mendix/feat/popup-menu

Add styles for popup menu

Author: wegiswes

styles/web/sass/core/widgets/_popupmenu.scss

@@ -0,0 +1,105 @@
+//
+// DISCLAIMER:
+// Do not change this file because it is core styling.
+// Customizing core files will make updating Atlas much more difficult in the future.
+// To customize any core styling, copy the part you want to customize to styles/web/sass/app/ so the core styling is overwritten.
+//
+
+/* ==========================================================================
+   Popup Menu
+
+   Default Mendix Popup Menus
+========================================================================== */
+.popupmenu {
+    position: relative;
+    display: inline-flex;
+}
+
+.popupmenu-trigger {
+    cursor: pointer;
+}
+
+.popupmenu-menu {
+    position: absolute;
+    z-index: 999;
+    display: none;
+    flex-direction: column;
+    width: max-content;
+    border: 1px solid $border-color-default;
+    border-radius: 8px;
+    background-color: $bg-color;
+    box-shadow: 0 3px 14px 2px rgba(0, 0, 0, 0.02), 0 8px 10px 1px rgba(0, 0, 0, 0.04),
+    0 5px 5px -3px rgba(0, 0, 0, 0.08);
+
+    &.popupmenu-position-left {
+        top: 0;
+        left: 0;
+        transform: translateX(-100%);
+    }
+
+    &.popupmenu-position-right {
+        top: 0;
+        right: 0;
+        transform: translateX(100%);
+    }
+
+    &.popupmenu-position-top {
+        top: 0;
+        transform: translateY(-100%);
+    }
+
+    &.popupmenu-position-bottom {
+        bottom: 0;
+        transform: translateY(100%);
+    }
+
+    .popupmenu-basic-item:first-child,
+    .popupmenu-custom-item:first-child {
+        border-top-left-radius: 8px;
+        border-top-right-radius: 8px;
+    }
+
+    .popupmenu-basic-item:last-child,
+    .popupmenu-custom-item:last-child {
+        border-bottom-right-radius: 8px;
+        border-bottom-left-radius: 8px;
+    }
+}
+
+.popupmenu-basic-divider {
+    width: 100%;
+    height: 1px;
+    background-color: $brand-default;
+}
+
+.popupmenu-basic-item {
+    padding: 12px 16px;
+    color: $font-color-default;
+    font-size: 14px;
+
+    &:hover,
+    &:focus,
+    &:active {
+        cursor: pointer;
+        border-color: $bg-color-secondary;
+        background-color: $bg-color-secondary;
+    }
+
+    &-primary {
+        color: $brand-default;
+    }
+
+    &-danger {
+        color: $brand-danger;
+    }
+}
+
+.popupmenu-custom-item {
+    &:hover,
+    &:focus,
+    &:active {
+        cursor: pointer;
+        border-color: $bg-color-secondary;
+        background-color: $bg-color-secondary;
+    }
+}

styles/web/sass/main.scss

@@ -52,6 +52,7 @@
 @import 'core/widgets/navigationlist';
 @import 'core/widgets/navigationtree';
 @import 'core/helpers/navigationtree';
+@import 'core/widgets/popupmenu';
 @import 'core/widgets/simplemenubar';
 @import 'core/helpers/simplemenubar';
 @import 'core/widgets/radiobuttons';