fix popover placement menus (#2305)

apps/docs/src/app/core/component-docs/popover/examples/popover-placement/popover-placement-example.component.scss

@@ -1 +1,79 @@
-@import '../../../../../../../../../node_modules/fundamental-styles/dist/fundamental-styles.css';
+@import '../../../../../../../../../node_modules/fundamental-styles/dist/variables.css';
+@import '../../../../../../../../../node_modules/fundamental-styles/dist/layout.css';
+
+@media (min-width:600px) {
+    .fd-col--2 {
+        float: left;
+        margin-right: 8px;
+        margin-right: 8px;
+        margin-right: var(--fd-width-gutter,16px);
+        width: calc((((100% - 88px)/ 12) * 2) + 8px);
+        width: calc((((100% - (11 * 8px))/ 12) * 2) + (8px * (2 - 1)));
+        width: calc((((100% - (11 * var(--fd-width-gutter,16px)))/ 12) * 2) + (var(--fd-width-gutter,16px) * (2 - 1)))
+    }
+    .fd-col--2:last-child {
+        margin-right: 0
+    }
+    .fd-col--2[dir=rtl],
+    [dir=rtl] .fd-col--2 {
+        float: right;
+        margin-right: 0;
+        margin-left: 8px;
+        margin-left: 8px;
+        margin-left: var(--fd-width-gutter,16px)
+    }
+    .fd-col--2[dir=rtl]:last-child,
+    [dir=rtl] .fd-col--2:last-child {
+        margin-left: 0
+    }
+    .fd-col--shift-2 {
+        margin-left: calc((((100% - 88px)/ 12) * 2) + 16px);
+        margin-left: calc((((100% - (11 * 8px))/ 12) * 2) + (8px * (2)));
+        margin-left: calc((((100% - (11 * var(--fd-width-gutter,16px)))/ 12) * 2) + (var(--fd-width-gutter,16px) * (2)))
+    }
+    .fd-col--shift-2[dir=rtl],
+    [dir=rtl] .fd-col--shift-2 {
+        margin-left: 0;
+        margin-right: calc((((100% - 88px)/ 12) * 2) + 16px);
+        margin-right: calc((((100% - (11 * 8px))/ 12) * 2) + (8px * (2)));
+        margin-right: calc((((100% - (11 * var(--fd-width-gutter,16px)))/ 12) * 2) + (var(--fd-width-gutter,16px) * (2)))
+    }
+    .fd-col--shift-3 {
+        margin-left: calc((((100% - 88px)/ 12) * 3) + 24px);
+        margin-left: calc((((100% - (11 * 8px))/ 12) * 3) + (8px * (3)));
+        margin-left: calc((((100% - (11 * var(--fd-width-gutter,16px)))/ 12) * 3) + (var(--fd-width-gutter,16px) * (3)))
+    }
+    .fd-col--shift-3[dir=rtl],
+    [dir=rtl] .fd-col--shift-3 {
+        margin-left: 0;
+        margin-right: calc((((100% - 88px)/ 12) * 3) + 24px);
+        margin-right: calc((((100% - (11 * 8px))/ 12) * 3) + (8px * (3)));
+        margin-right: calc((((100% - (11 * var(--fd-width-gutter,16px)))/ 12) * 3) + (var(--fd-width-gutter,16px) * (3)))
+    }
+    .fd-col--shift-4 {
+        margin-left: calc((((100% - 88px)/ 12) * 4) + 32px);
+        margin-left: calc((((100% - (11 * 8px))/ 12) * 4) + (8px * (4)));
+        margin-left: calc((((100% - (11 * var(--fd-width-gutter,16px)))/ 12) * 4) + (var(--fd-width-gutter,16px) * (4)))
+    }
+    .fd-col--shift-4[dir=rtl],
+    [dir=rtl] .fd-col--shift-4 {
+        margin-left: 0;
+        margin-right: calc((((100% - 88px)/ 12) * 4) + 32px);
+        margin-right: calc((((100% - (11 * 8px))/ 12) * 4) + (8px * (4)));
+        margin-right: calc((((100% - (11 * var(--fd-width-gutter,16px)))/ 12) * 4) + (var(--fd-width-gutter,16px) * (4)))
+    }
+}
+[class^=fd-col] {
+    -webkit-box-flex: 1;
+    -ms-flex: 1;
+    flex: 1;
+    margin-bottom: 12px
+}
+[class^=fd-col]:last-child {
+    margin-bottom: 0
+}
+@media (min-width:320px) {
+    [class^=fd-col] {
+        margin-bottom: 0
+    }
+}