diff --git a/changes/issue-1350-improve-firefox-dropdown-styling b/changes/issue-1350-improve-firefox-dropdown-styling new file mode 100644 index 0000000000..6676e5872c --- /dev/null +++ b/changes/issue-1350-improve-firefox-dropdown-styling @@ -0,0 +1,2 @@ +* Dropdown CSS compatible with firefox +* Correct row heights rendering in Firefox tables \ No newline at end of file diff --git a/frontend/components/forms/fields/Dropdown/_styles.scss b/frontend/components/forms/fields/Dropdown/_styles.scss index c7915e4067..3d1c48e42a 100644 --- a/frontend/components/forms/fields/Dropdown/_styles.scss +++ b/frontend/components/forms/fields/Dropdown/_styles.scss @@ -54,6 +54,10 @@ border-radius: 4px; background-color: $ui-off-white; border: solid 1px $core-dark-blue-grey; + + &.is-focused { + border: 1px solid $core-vibrant-blue; + } } } @@ -97,9 +101,12 @@ &--single { > .Select-control { .Select-value { - line-height: 38px; - margin-top: 4px; + line-height: 40px; border: none; + top: 1px; + right: 1px; + left: 1px; + bottom: 1px; } } } @@ -140,21 +147,17 @@ } } - // .Select-arrow { - // border-top-color: $core-vibrant-blue; - // } + &.is-focused { + .Select-control { + border: 1px solid $core-vibrant-blue; + } - // &.is-focused { - // .Select-control { - // border: 1px solid $core-vibrant-blue; - // } - - // &:not(.is-open) { - // .Select-control { - // box-shadow: none; - // } - // } - // } + &:not(.is-open) { + .Select-control { + box-shadow: none; + } + } + } &.has-value { > .Select-control, @@ -169,12 +172,12 @@ } .Select-menu-outer { - margin-top: $pad-xsmall; box-shadow: 0 4px 10px rgba(52, 59, 96, 0.15); - border-radius: $border-radius; + border-radius: 0 0 $border-radius $border-radius; z-index: 6; overflow: hidden; border: 0; + margin: 0; } .Select-noresults { @@ -196,6 +199,11 @@ } } + &:last-child { + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + } + &.is-disabled { color: $ui-gray; @@ -248,10 +256,6 @@ } } - .Select-value { - margin-top: 4px; - } - .Select-value-label { padding: 0 0 0 10px; } diff --git a/frontend/components/packs/PacksList/_styles.scss b/frontend/components/packs/PacksList/_styles.scss index 7819ab2ce6..e12fdaeedc 100644 --- a/frontend/components/packs/PacksList/_styles.scss +++ b/frontend/components/packs/PacksList/_styles.scss @@ -25,7 +25,7 @@ &:nth-child(1) { border-top-left-radius: 3px; - width: 20px; + width: 30px; } &:nth-child(2) { diff --git a/frontend/components/queries/QueriesList/_styles.scss b/frontend/components/queries/QueriesList/_styles.scss index 38c3178223..f42d69acf1 100644 --- a/frontend/components/queries/QueriesList/_styles.scss +++ b/frontend/components/queries/QueriesList/_styles.scss @@ -38,7 +38,7 @@ padding: $pad-medium $pad-large; &:nth-child(1) { - width: 20px; + width: 30px; } }