poc: addHitsPerPage styles (#6592)

Co-authored-by: Fabien Motte <[email protected]>

Author: sarahdayan

examples/react/css/src/algolia.css

@@ -10,3 +10,4 @@
 @import url('refinement-list.css');
 @import url('panel.css');
 @import url('pagination.css');
+@import url('hits-per-page.css');

examples/react/css/src/common.css

@@ -8,7 +8,8 @@
 /* Focus outline */
 a[class^='ais-']:focus-visible,
 button[class^='ais-']:focus-visible,
-input[class^='ais-']:focus-visible {
+input[class^='ais-']:focus-visible,
+select[class^='ais-']:focus-visible {
   outline: 2px solid
     rgba(var(--ais-primary-color-rgb), var(--ais-primary-color-alpha));
   outline-offset: 2px;

examples/react/css/src/hits-per-page.css

@@ -0,0 +1,27 @@
+.ais-HitsPerPage {
+  &:after {
+    transition: transform var(--ais-transition-duration)
+      var(--ais-transition-timing-function);
+    background-image: var(--ais-chevron-icon);
+    background-repeat: no-repeat;
+    content: '';
+    display: inline-block;
+    height: 1rem;
+    margin-left: calc(var(--ais-spacing) * -1 - 1rem);
+    transform: translateY(0.2rem);
+    user-select: none;
+    width: 1rem;
+  }
+  .ais-HitsPerPage-select {
+    color: rgba(var(--ais-text-color-rgb), var(--ais-text-color-alpha));
+    font: inherit;
+    padding: calc(var(--ais-spacing) / 2) calc(var(--ais-spacing) * 2 + 0.5rem)
+      calc(var(--ais-spacing) / 2) var(--ais-spacing);
+    border-radius: var(--ais-radius-xs);
+    border: 1px solid
+      rgba(var(--ais-border-color-rgb), var(--ais-border-color-alpha));
+    &:focus-visible {
+      outline-offset: -1px;
+    }
+  }
+}

examples/react/css/src/reset.css

@@ -6,6 +6,11 @@ a[class^='ais-'] {
   text-decoration: none;
 }
 
+select[class^='ais-'] {
+  appearance: none;
+  background: none;
+}
+
 /* Reset all lists */
 .ais-Breadcrumb-list,
 .ais-Carousel-list,