Splitter | Add missing focus-visible style & material extension

primefaces · Jan 4, 2024 · 0d04b3e · 0d04b3e
1 parent 96560a1
commit 0d04b3e
Show file tree

Hide file tree

Showing 48 changed files with 328 additions and 0 deletions.
diff --git a/src/assets/components/themes/arya-blue/theme.css b/src/assets/components/themes/arya-blue/theme.css
@@ -4245,6 +4245,11 @@
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
     background: #383838;
   }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
   .p-splitter .p-splitter-gutter-resizing {
     background: #383838;
   }

diff --git a/src/assets/components/themes/arya-green/theme.css b/src/assets/components/themes/arya-green/theme.css
@@ -4245,6 +4245,11 @@
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
     background: #383838;
   }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
   .p-splitter .p-splitter-gutter-resizing {
     background: #383838;
   }

diff --git a/src/assets/components/themes/arya-orange/theme.css b/src/assets/components/themes/arya-orange/theme.css
@@ -4245,6 +4245,11 @@
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
     background: #383838;
   }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
   .p-splitter .p-splitter-gutter-resizing {
     background: #383838;
   }

diff --git a/src/assets/components/themes/arya-purple/theme.css b/src/assets/components/themes/arya-purple/theme.css
@@ -4245,6 +4245,11 @@
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
     background: #383838;
   }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+  }
   .p-splitter .p-splitter-gutter-resizing {
     background: #383838;
   }

diff --git a/src/assets/components/themes/bootstrap4-dark-blue/theme.css b/src/assets/components/themes/bootstrap4-dark-blue/theme.css
@@ -4257,6 +4257,11 @@
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
     background: #3f4b5b;
   }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e3f3fe;
+  }
   .p-splitter .p-splitter-gutter-resizing {
     background: #3f4b5b;
   }

diff --git a/src/assets/components/themes/bootstrap4-dark-purple/theme.css b/src/assets/components/themes/bootstrap4-dark-purple/theme.css
@@ -4257,6 +4257,11 @@
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
     background: #3f4b5b;
   }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #f0e6f5;
+  }
   .p-splitter .p-splitter-gutter-resizing {
     background: #3f4b5b;
   }

diff --git a/src/assets/components/themes/bootstrap4-light-blue/theme.css b/src/assets/components/themes/bootstrap4-light-blue/theme.css
@@ -4257,6 +4257,11 @@
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
     background: #dee2e6;
   }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  }
   .p-splitter .p-splitter-gutter-resizing {
     background: #dee2e6;
   }

diff --git a/src/assets/components/themes/bootstrap4-light-purple/theme.css b/src/assets/components/themes/bootstrap4-light-purple/theme.css
@@ -4257,6 +4257,11 @@
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
     background: #dee2e6;
   }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
+  }
   .p-splitter .p-splitter-gutter-resizing {
     background: #dee2e6;
   }

diff --git a/src/assets/components/themes/fluent-light/theme.css b/src/assets/components/themes/fluent-light/theme.css
@@ -4221,6 +4221,11 @@
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
     background: #edebe9;
   }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #605e5c;
+  }
   .p-splitter .p-splitter-gutter-resizing {
     background: #edebe9;
   }

diff --git a/src/assets/components/themes/lara-dark-blue/theme.css b/src/assets/components/themes/lara-dark-blue/theme.css
@@ -4238,6 +4238,11 @@
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
     background: #424b57;
   }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2);
+  }
   .p-splitter .p-splitter-gutter-resizing {
     background: #424b57;
   }

diff --git a/src/assets/components/themes/lara-dark-indigo/theme.css b/src/assets/components/themes/lara-dark-indigo/theme.css
@@ -4238,6 +4238,11 @@
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
     background: #424b57;
   }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2);
+  }
   .p-splitter .p-splitter-gutter-resizing {
     background: #424b57;
   }

diff --git a/src/assets/components/themes/lara-dark-purple/theme.css b/src/assets/components/themes/lara-dark-purple/theme.css
@@ -4238,6 +4238,11 @@
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
     background: #424b57;
   }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2);
+  }
   .p-splitter .p-splitter-gutter-resizing {
     background: #424b57;
   }

diff --git a/src/assets/components/themes/lara-dark-teal/theme.css b/src/assets/components/themes/lara-dark-teal/theme.css
@@ -4238,6 +4238,11 @@
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
     background: #424b57;
   }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2);
+  }
   .p-splitter .p-splitter-gutter-resizing {
     background: #424b57;
   }

diff --git a/src/assets/components/themes/lara-light-blue/theme.css b/src/assets/components/themes/lara-light-blue/theme.css
@@ -4238,6 +4238,11 @@
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
     background: #e5e7eb;
   }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #BFDBFE;
+  }
   .p-splitter .p-splitter-gutter-resizing {
     background: #e5e7eb;
   }

diff --git a/src/assets/components/themes/lara-light-indigo/theme.css b/src/assets/components/themes/lara-light-indigo/theme.css
@@ -4238,6 +4238,11 @@
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
     background: #e5e7eb;
   }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #C7D2FE;
+  }
   .p-splitter .p-splitter-gutter-resizing {
     background: #e5e7eb;
   }

diff --git a/src/assets/components/themes/lara-light-purple/theme.css b/src/assets/components/themes/lara-light-purple/theme.css
@@ -4238,6 +4238,11 @@
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
     background: #e5e7eb;
   }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #DDD6FE;
+  }
   .p-splitter .p-splitter-gutter-resizing {
     background: #e5e7eb;
   }

diff --git a/src/assets/components/themes/lara-light-teal/theme.css b/src/assets/components/themes/lara-light-teal/theme.css
@@ -4238,6 +4238,11 @@
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
     background: #e5e7eb;
   }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #99f6e4;
+  }
   .p-splitter .p-splitter-gutter-resizing {
     background: #e5e7eb;
   }

diff --git a/src/assets/components/themes/luna-amber/theme.css b/src/assets/components/themes/luna-amber/theme.css
@@ -4233,6 +4233,11 @@
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
     background: #4b4b4b;
   }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
   .p-splitter .p-splitter-gutter-resizing {
     background: #4b4b4b;
   }

diff --git a/src/assets/components/themes/luna-blue/theme.css b/src/assets/components/themes/luna-blue/theme.css
@@ -4233,6 +4233,11 @@
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
     background: #4b4b4b;
   }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
   .p-splitter .p-splitter-gutter-resizing {
     background: #4b4b4b;
   }

diff --git a/src/assets/components/themes/luna-green/theme.css b/src/assets/components/themes/luna-green/theme.css
@@ -4233,6 +4233,11 @@
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
     background: #4b4b4b;
   }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
   .p-splitter .p-splitter-gutter-resizing {
     background: #4b4b4b;
   }

diff --git a/src/assets/components/themes/luna-pink/theme.css b/src/assets/components/themes/luna-pink/theme.css
@@ -4233,6 +4233,11 @@
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
     background: #4b4b4b;
   }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
   .p-splitter .p-splitter-gutter-resizing {
     background: #4b4b4b;
   }

diff --git a/src/assets/components/themes/md-dark-deeppurple/theme.css b/src/assets/components/themes/md-dark-deeppurple/theme.css
@@ -4268,6 +4268,11 @@
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
     background: rgba(255, 255, 255, 0.12);
   }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
   .p-splitter .p-splitter-gutter-resizing {
     background: rgba(255, 255, 255, 0.12);
   }
@@ -7803,5 +7808,16 @@
   .p-scrollpanel .p-scrollpanel-bar:focus {
     box-shadow: 0 0 1px 4px rgba(165, 214, 167, 0.2);
   }
+
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+    transition: transform 0.2s, box-shadow 0.2s;
+    transform: scale(0.7);
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus {
+    box-shadow: 0 0 1px 6px rgba(165, 214, 167, 0.2);
+  }
+  .p-splitter .p-splitter-gutter.p-splitter-gutter-resizing .p-splitter-gutter-handle {
+    transform: scale(1);
+  }
 }
 /* Customizations to the designer theme should be defined here */
diff --git a/src/assets/components/themes/md-dark-indigo/theme.css b/src/assets/components/themes/md-dark-indigo/theme.css
@@ -4268,6 +4268,11 @@
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
     background: rgba(255, 255, 255, 0.12);
   }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
   .p-splitter .p-splitter-gutter-resizing {
     background: rgba(255, 255, 255, 0.12);
   }
@@ -7803,5 +7808,16 @@
   .p-scrollpanel .p-scrollpanel-bar:focus {
     box-shadow: 0 0 1px 4px rgba(244, 143, 177, 0.2);
   }
+
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+    transition: transform 0.2s, box-shadow 0.2s;
+    transform: scale(0.7);
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus {
+    box-shadow: 0 0 1px 6px rgba(244, 143, 177, 0.2);
+  }
+  .p-splitter .p-splitter-gutter.p-splitter-gutter-resizing .p-splitter-gutter-handle {
+    transform: scale(1);
+  }
 }
 /* Customizations to the designer theme should be defined here */
diff --git a/src/assets/components/themes/md-light-deeppurple/theme.css b/src/assets/components/themes/md-light-deeppurple/theme.css
@@ -4268,6 +4268,11 @@
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
     background: rgba(0, 0, 0, 0.12);
   }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
   .p-splitter .p-splitter-gutter-resizing {
     background: rgba(0, 0, 0, 0.12);
   }
@@ -7803,5 +7808,16 @@
   .p-scrollpanel .p-scrollpanel-bar:focus {
     box-shadow: 0 0 1px 4px rgba(76, 175, 80, 0.2);
   }
+
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+    transition: transform 0.2s, box-shadow 0.2s;
+    transform: scale(0.7);
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus {
+    box-shadow: 0 0 1px 6px rgba(76, 175, 80, 0.2);
+  }
+  .p-splitter .p-splitter-gutter.p-splitter-gutter-resizing .p-splitter-gutter-handle {
+    transform: scale(1);
+  }
 }
 /* Customizations to the designer theme should be defined here */
diff --git a/src/assets/components/themes/md-light-indigo/theme.css b/src/assets/components/themes/md-light-indigo/theme.css
@@ -4268,6 +4268,11 @@
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
     background: rgba(0, 0, 0, 0.12);
   }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
   .p-splitter .p-splitter-gutter-resizing {
     background: rgba(0, 0, 0, 0.12);
   }
@@ -7803,5 +7808,16 @@
   .p-scrollpanel .p-scrollpanel-bar:focus {
     box-shadow: 0 0 1px 4px rgba(255, 64, 129, 0.2);
   }
+
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+    transition: transform 0.2s, box-shadow 0.2s;
+    transform: scale(0.7);
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus {
+    box-shadow: 0 0 1px 6px rgba(255, 64, 129, 0.2);
+  }
+  .p-splitter .p-splitter-gutter.p-splitter-gutter-resizing .p-splitter-gutter-handle {
+    transform: scale(1);
+  }
 }
 /* Customizations to the designer theme should be defined here */
diff --git a/src/assets/components/themes/mdc-dark-deeppurple/theme.css b/src/assets/components/themes/mdc-dark-deeppurple/theme.css
@@ -4268,6 +4268,11 @@
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
     background: rgba(255, 255, 255, 0.12);
   }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
   .p-splitter .p-splitter-gutter-resizing {
     background: rgba(255, 255, 255, 0.12);
   }
@@ -7803,5 +7808,16 @@
   .p-scrollpanel .p-scrollpanel-bar:focus {
     box-shadow: 0 0 1px 4px rgba(165, 214, 167, 0.2);
   }
+
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+    transition: transform 0.2s, box-shadow 0.2s;
+    transform: scale(0.7);
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus {
+    box-shadow: 0 0 1px 6px rgba(165, 214, 167, 0.2);
+  }
+  .p-splitter .p-splitter-gutter.p-splitter-gutter-resizing .p-splitter-gutter-handle {
+    transform: scale(1);
+  }
 }
 /* Customizations to the designer theme should be defined here */