Improving select displays, focus box-shadows for paginators, instructions for index url

2 files changed, 34 insertions, 11 deletions

diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index e13e0bff6..eee3db8fc 100644
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -27,7 +27,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
 }
 
 /* rules for dropdowns excepts when in button group, to avoid impacting the dropdown-toggle */
-.dropdown:not(.btn-group) {
+.dropdown:not(.btn-group):not(.dropdown-root):not(.action-dropdown) {
   z-index: z(dropdown) !important;
 
   &.list-overflow-menu,
@@ -37,7 +37,6 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
 }
 
 .dropdown-menu {
-  z-index: z(dropdown) !important;
   border-radius: 3px;
   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
   font-size: 15px;
@@ -76,10 +75,12 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
 
   .modal-dialog {
     text-align: left;
-    vertical-align: middle;
-    min-width: 500px;
-    width: 40vw;
-    max-width: 900px;
+
+    &:not(.modal-lg):not(.modal-xl) {
+      min-width: 500px;
+      width: 40vw;
+      max-width: 900px;
+    }
   }
 }
 
diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index 869532fe9..8444f9357 100644
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -17,6 +17,11 @@ my-button {
   height: max-content;
 }
 
+// focus box-shadow for primeng
+.ui-inputtext:enabled:focus:not(.ui-state-error) {
+  box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest) !important;
+}
+
 // data table customizations
 p-table {
   .ui-table-caption {
@@ -178,6 +183,16 @@ p-table {
       justify-content: center;
       align-items: center;
 
+      .ui-dropdown {
+        position: absolute;
+        left: 0;
+      }
+
+      .ui-paginator-current {
+        position: absolute;
+        right: 0;
+      }
+
       .ui-paginator-first,
       .ui-paginator-prev,
       .ui-paginator-next,
@@ -189,6 +204,11 @@ p-table {
         font-size: 13px;
         top: -1px;
 
+        &.focus-within,
+        &:focus {
+          box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest);
+        }
+
         &.ui-state-disabled:hover {
           background-color: #fff !important;
         }
@@ -217,6 +237,13 @@ p-table {
       .ui-paginator-pages {
         height: auto !important;
 
+        .ui-paginator-page {
+          &.focus-within,
+          &:focus {
+            box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest) !important;
+          } 
+        }
+
         a {
           color: var(--mainForegroundColor) !important;
           font-weight: $font-semibold !important;
@@ -232,11 +259,6 @@ p-table {
               color: #fff !important;
               background-color: var(--mainColor) !important;
             }
-
-            &.focus-within,
-            &:focus {
-              box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest);
-            }
           }
         }
       }