dotCMS/core#20566 Add native styles to reorder menu link (#1702)

* Add native styles to reorder menu link * Feedback
dotCMS · Jul 16, 2021 · 6be5b87 · 6be5b87
1 parent 7c51577
commit 6be5b87
Showing 1 changed file with 29 additions and 0 deletions.
diff --git a/...ui/src/app/portlets/dot-edit-page/content/services/html/libraries/iframe-edit-mode.css.ts b/...ui/src/app/portlets/dot-edit-page/content/services/html/libraries/iframe-edit-mode.css.ts
@@ -448,6 +448,35 @@ export const getEditPageCss = (timestampId: string): string => {
         border: 1px solid #53c2f9 !important;
         display: block;
     }
+    
+    ${timestampId} .dotcms__navbar-form {
+        display: inline-block;
+    }
+
+    ${timestampId} .dotcms__navbar-form .reorder-menu-link {
+        background-color: var(--color-main);
+        border-radius: 3px;
+        display: flex;
+        flex-direction: row;
+    }
+
+    ${timestampId} .dotcms__navbar-form .reorder-menu-link .arrow-up {
+        background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CgogPGc+CiAgPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPgogIDxyZWN0IGZpbGw9Im5vbmUiIGlkPSJjYW52YXNfYmFja2dyb3VuZCIgaGVpZ2h0PSI0MDIiIHdpZHRoPSI1ODIiIHk9Ii0xIiB4PSItMSIvPgogPC9nPgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxwYXRoIGZpbGw9IiNmZmZmZmYiIGlkPSJzdmdfMSIgZD0ibTE0LjgzLDMwLjgzbDkuMTcsLTkuMTdsOS4xNyw5LjE3bDIuODMsLTIuODNsLTEyLC0xMmwtMTIsMTJsMi44MywyLjgzeiIvPgogIDxwYXRoIGlkPSJzdmdfMiIgZmlsbD0ibm9uZSIgZD0ibS0zMC42OTQ1NTcsOS40MjU4ODdsNDgsMGwwLDQ4bC00OCwwbDAsLTQ4eiIvPgogPC9nPgo8L3N2Zz4=);
+        background-repeat: no-repeat;
+        background-size: contain;
+        display: block;
+        height: 36px;
+        width: 36px;
+    }
+
+    ${timestampId} .dotcms__navbar-form .reorder-menu-link .arrow-down {
+        background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CgogPGc+CiAgPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPgogIDxyZWN0IGZpbGw9Im5vbmUiIGlkPSJjYW52YXNfYmFja2dyb3VuZCIgaGVpZ2h0PSI0MDIiIHdpZHRoPSI1ODIiIHk9Ii0xIiB4PSItMSIvPgogPC9nPgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxwYXRoIGZpbGw9IiNmZmZmZmYiIGlkPSJzdmdfMSIgZD0ibTE0LjgzLDE2LjQybDkuMTcsOS4xN2w5LjE3LC05LjE3bDIuODMsMi44M2wtMTIsMTJsLTEyLC0xMmwyLjgzLC0yLjgzeiIvPgogIDxwYXRoIGlkPSJzdmdfMiIgZmlsbD0ibm9uZSIgZD0ibS0xOC4zOTk4OTksMTcuMDc4NDczbDQ4LDBsMCw0OGwtNDgsMGwwLC00OHoiLz4KIDwvZz4KPC9zdmc+);
+        background-repeat: no-repeat;
+        background-size: contain;
+        display: block;
+        height: 36px;
+        width: 36px;
+    }
 
     @keyframes load8 {
         0% {