Fix multiple select height bug #508

1 files changed, 21 insertions, 19 deletions

diff --git a/docs/dist/spectre.css b/docs/dist/spectre.css
index f873b62..1f80164 100644
--- a/docs/dist/spectre.css
+++ b/docs/dist/spectre.css
@@ -915,6 +915,7 @@ textarea.form-input {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
+  background: #fff; 
   border: .05rem solid #bcc3ce;
   border-radius: .1rem;
   color: inherit;
@@ -927,21 +928,6 @@ textarea.form-input {
   width: 100%;
 }
 
-.form-select[size],
-.form-select[multiple] {
-  height: auto;
-}
-
-.form-select[size] option,
-.form-select[multiple] option {
-  padding: .1rem .2rem;
-}
-
-.form-select:not([multiple]):not([size]) {
-  background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23667189'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E") no-repeat right .35rem center/.4rem .5rem;
-  padding-right: 1.2rem;
-}
-
 .form-select:focus {
   border-color: #5755d9; 
   box-shadow: 0 0 0 .1rem rgba(87, 85, 217, .2);
@@ -963,6 +949,22 @@ textarea.form-input {
   padding: .35rem 1.4rem .35rem .6rem;
 }
 
+.form-select[size],
+.form-select[multiple] {
+  height: auto;
+  padding: .25rem .4rem;
+}
+
+.form-select[size] option,
+.form-select[multiple] option {
+  padding: .1rem .2rem;
+}
+
+.form-select:not([multiple]):not([size]) {
+  background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23667189'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E") no-repeat right .35rem center/.4rem .5rem;
+  padding-right: 1.2rem;
+}
+
 .has-icon-left,
 .has-icon-right {
   position: relative;
@@ -2686,7 +2688,7 @@ summary.accordion-header::-webkit-details-marker {
 .popover:hover .popover-container {
   display: block;
   opacity: 1;
-  transform: translate(-50%, -100%);
+  transform: translate(-50%, -100%) scale(1);
 }
 
 .popover.popover-right .popover-container {
@@ -2696,7 +2698,7 @@ summary.accordion-header::-webkit-details-marker {
 
 .popover.popover-right *:focus + .popover-container,
 .popover.popover-right:hover .popover-container {
-  transform: translate(0, -50%);
+  transform: translate(0, -50%) scale(1);
 }
 
 .popover.popover-bottom .popover-container {
@@ -2706,7 +2708,7 @@ summary.accordion-header::-webkit-details-marker {
 
 .popover.popover-bottom *:focus + .popover-container,
 .popover.popover-bottom:hover .popover-container {
-  transform: translate(-50%, 0);
+  transform: translate(-50%, 0) scale(1);
 }
 
 .popover.popover-left .popover-container {
@@ -2716,7 +2718,7 @@ summary.accordion-header::-webkit-details-marker {
 
 .popover.popover-left *:focus + .popover-container,
 .popover.popover-left:hover .popover-container {
-  transform: translate(-100%, -50%);
+  transform: translate(-100%, -50%) scale(1);
 }
 
 .popover .card {