improving dropdown menu button

basetheme_bootstrap/static/css/basetheme_bootstrap4_pasteur.css

@@ -304,13 +304,11 @@ color: #0275e3;
     background-color: #81796a;
     border-color: #81796a;
 }
-.show>.btn-outline-primary.dropdown-toggle,
 .btn-primary {
     color: #fff;
     background-color: #2d96fa;
     border-color: #2d96fa;
 }
-.show>.btn-outline-secondary.dropdown-toggle,
 .btn-secondary {
     color: #fff;
     background-color: #989287;
@@ -334,6 +332,18 @@ color: #0275e3;
     background-color: #81796a;
     border-color: #81796a;
 }
+.show>.btn-outline-secondary.dropdown-toggle,
+.show>.btn-outline-secondary.dropdown-toggle:focus {
+    border-color: #989287;
+    color: #989287;
+    background-color:white;
+}
+.show>.btn-outline-secondary.dropdown-toggle,
+.show>.btn-outline-secondary.dropdown-toggle:focus ,
+.show>.btn-secondary.dropdown-toggle,
+.show>.btn-secondary.dropdown-toggle:focus {
+    box-shadow:none;
+}
 .btn-secondary.dropdown-toggle+.dropdown-menu>.dropdown-item{
     color: #fff;
 }
@@ -364,6 +374,18 @@ color: #0275e3;
     background-color: #0275e3;
     border-color: #0275e3;
 }
+.show>.btn-outline-primary.dropdown-toggle,
+.show>.btn-outline-primary.dropdown-toggle:focus ,
+.show>.btn-primary.dropdown-toggle,
+.show>.btn-primary.dropdown-toggle:focus {
+    box-shadow:none;
+}
+.show>.btn-outline-primary.dropdown-toggle,
+.show>.btn-outline-primary.dropdown-toggle:focus {
+    border-color: #2d96fa;
+    color: #2d96fa;
+    background-color:white;
+}
 .btn-primary.dropdown-toggle+.dropdown-menu>.dropdown-item{
     color: #fff;
 }

test_app_1/templates/test_app_1/mybasePasteur.html

@@ -50,7 +50,8 @@
     <button class="btn btn-secondary full-width" type="submit">Login</button>
     <button class="btn btn-outline-primary full-width" type="submit">Login</button>
     <button class="btn btn-outline-secondary full-width" type="submit">Login</button>
-    <div class="float-right dropleft">
+    <br/>
+    <div class="dropleft">
         <a class="btn btn-outline-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuExport"
            data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
             dropleft
@@ -67,7 +68,8 @@
             </button>
         </div>
     </div>
-    <div class="float-right dropleft">
+    <br/>
+    <div class="dropleft">
         <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuExport"
            data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
             dropleft
@@ -84,6 +86,43 @@
             </button>
         </div>
     </div>
+    <br/>
+    <div class="dropleft">
+        <a class="btn btn-outline-primary dropdown-toggle" href="#" role="button" id="dropdownMenuExport"
+           data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+            dropleft
+        </a>
+        <div class="dropdown-menu" aria-labelledby="dropdownMenuExport" x-placement="bottom-start"
+             style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(1258px, 47px, 0px);">
+            <button class="dropdown-item disabled" disabled="disabled" type="button">
+                <i class="fa fa-clipboard"></i>
+                Copy link into clipboard (recommended)
+            </button>
+            <button class="dropdown-item" type="button" onclick="$('form').submit()">
+                <i class="fa fa-download"></i>
+                Download displayed data in a spreadsheet
+            </button>
+        </div>
+    </div>
+    <br/>
+    <div class="dropleft">
+        <a class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuExport"
+           data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+            dropleft
+        </a>
+        <div class="dropdown-menu" aria-labelledby="dropdownMenuExport" x-placement="bottom-start"
+             style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(1258px, 47px, 0px);">
+            <button class="dropdown-item disabled" disabled="disabled" type="button">
+                <i class="fa fa-clipboard"></i>
+                Copy link into clipboard (recommended)
+            </button>
+            <button class="dropdown-item" type="button" onclick="$('form').submit()">
+                <i class="fa fa-download"></i>
+                Download displayed data in a spreadsheet
+            </button>
+        </div>
+    </div>
+    <br/>
     <div class="">
         <a class="btn btn-outline-primary dropdown-toggle" href="#" role="button" id="dropdownMenuExport2"
            data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
@@ -101,6 +140,7 @@
             </button>
         </div>
     </div>
+    <br/>
     <div class="">
         <a class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuExport2"
            data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
@@ -118,5 +158,41 @@
             </button>
         </div>
     </div>
+    <br/>
+    <div class="">
+        <a class="btn btn-outline-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuExport2"
+           data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+            regular
+        </a>
+        <div class="dropdown-menu" aria-labelledby="dropdownMenuExport2" x-placement="bottom-start"
+             style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(1258px, 47px, 0px);">
+            <button class="dropdown-item" type="button">
+                <i class="fa fa-clipboard"></i>
+                Copy link into clipboard (recommended)
+            </button>
+            <button class="dropdown-item disabled" disabled="disabled" type="button" onclick="$('form').submit()">
+                <i class="fa fa-download"></i>
+                Download displayed data in a spreadsheet
+            </button>
+        </div>
+    </div>
+    <br/>
+    <div class="">
+        <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuExport2"
+           data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+            regular
+        </a>
+        <div class="dropdown-menu" aria-labelledby="dropdownMenuExport2" x-placement="bottom-start"
+             style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(1258px, 47px, 0px);">
+            <button class="dropdown-item" type="button">
+                <i class="fa fa-clipboard"></i>
+                Copy link into clipboard (recommended)
+            </button>
+            <button class="dropdown-item disabled" disabled="disabled" type="button" onclick="$('form').submit()">
+                <i class="fa fa-download"></i>
+                Download displayed data in a spreadsheet
+            </button>
+        </div>
+    </div>
 </div>
 {% endblock %}