poc: add RefinementList styles (#6585)

* poc: add `HierarchicalMenu` styles

* poc: add `RefinementList` styles

* refactor: proper encoding

* chore: merge conflicts

* refactor: move to refinement list pr

* feat: use vanilla css reset

Would like to of utilised css nesting but couldn't get Parcel configured correctly.

* poc: merge conflicts

* refactor: add common styles

* chore: reviews considered

* fix: remove browser margin

---------

Co-authored-by: Thomas Britton <[email protected]>

Author: FabienMotte

examples/react/css/src/algolia.css

@@ -6,4 +6,4 @@
 @import url('common.css');
 @import url('searchbox.css');
 @import url('hierarchical-menu.css');
-
+@import url('refinement-list.css');

examples/react/css/src/common.css

@@ -19,9 +19,11 @@ input[class^='ais-']:focus-visible {
   border-radius: var(--ais-radius-xs);
   font-size: 0.9em;
   font-weight: var(--ais-font-weight-medium);
-  color: rgba(var(--ais-button-text-color-rgb), var(--ais-button-text-color-alpha));
-  padding: calc(var(--ais-spacing) * 0.375)
-    calc(var(--ais-spacing) * 0.625);
+  color: rgba(
+    var(--ais-button-text-color-rgb),
+    var(--ais-button-text-color-alpha)
+  );
+  padding: calc(var(--ais-spacing) * 0.375) calc(var(--ais-spacing) * 0.625);
   background-color: rgba(
     var(--ais-primary-color-rgb),
     var(--ais-primary-color-alpha)
@@ -33,9 +35,7 @@ input[class^='ais-']:focus-visible {
 }
 
 @media (hover: hover) {
-  [class^='ais-'][class*='-showMore']:not(
-      [class^='ais-'][disabled]
-    ):hover {
+  [class^='ais-'][class*='-showMore']:not([class^='ais-'][disabled]):hover {
     background-color: rgba(var(--ais-primary-color-rgb), 0.85);
   }
 }
@@ -49,8 +49,7 @@ input[class^='ais-']:focus-visible {
   margin-left: auto;
   color: rgba(var(--ais-text-color-rgb), 0.7);
   border-radius: calc(infinity * 1px);
-  padding: calc(var(--ais-spacing) * 0.125)
-    calc(var(--ais-spacing) * 0.625);
+  padding: calc(var(--ais-spacing) * 0.125) calc(var(--ais-spacing) * 0.625);
   border: 1px solid rgba(var(--ais-muted-color-rgb), 0.3);
   background-color: rgba(
     var(--ais-background-color-rgb),
@@ -59,3 +58,18 @@ input[class^='ais-']:focus-visible {
   white-space: nowrap;
   font-size: 0.75em;
 }
+
+input[class^='ais-'][type='checkbox']:checked {
+  background-image: var(--ais-check-icon);
+  background-repeat: no-repeat;
+  background-size: calc(var(--ais-spacing) * 0.625);
+  background-position: 50%;
+  background-color: rgba(
+    var(--ais-primary-color-rgb),
+    var(--ais-primary-color-alpha)
+  );
+  border-color: rgba(
+    var(--ais-primary-color-rgb),
+    var(--ais-primary-color-alpha)
+  );
+}

examples/react/css/src/refinement-list.css

@@ -0,0 +1,44 @@
+.ais-RefinementList-item {
+  margin-bottom: calc(var(--ais-spacing));
+  color: rgba(var(--ais-text-color-rgb), 0.9);
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.ais-RefinementList-item--selected {
+  color: rgba(var(--ais-primary-color-rgb), var(--ais-primary-color-alpha));
+}
+
+.ais-RefinementList-label {
+  display: flex;
+  align-items: center;
+  transition: color var(--ais-transition-duration)
+    var(--ais-transition-timing-function);
+}
+
+@media (hover: hover) {
+  .ais-RefinementList-label:hover {
+    color: rgba(var(--ais-primary-color-rgb), var(--ais-primary-color-alpha));
+
+    .ais-RefinementList-checkbox {
+      background-color: rgba(var(--ais-primary-color-rgb), 0.1);
+    }
+  }
+}
+
+.ais-RefinementList-checkbox {
+  border-radius: calc(var(--ais-spacing) / 4);
+  background-color: rgba(
+    var(--ais-background-color-rgb),
+    var(--ais-background-color-alpha)
+  );
+  border: 1px solid rgba(var(--ais-border-color-rgb), 0.5);
+  appearance: none;
+  width: var(--ais-spacing);
+  height: var(--ais-spacing);
+  transition: background-color var(--ais-transition-duration)
+    var(--ais-transition-timing-function);
+  margin-right: calc(var(--ais-spacing) * 0.625);
+}

examples/react/css/src/reset.css

@@ -122,3 +122,9 @@ a[class^='ais-'] {
     display: none;
   }
 }
+
+/* Reset checkboxes */
+.ais-RefinementList-checkbox,
+.ais-ToggleRefinement-checkbox {
+  margin: 0;
+}