diff --git a/changes/issue-1255-action-dropdown-styling b/changes/issue-1255-action-dropdown-styling new file mode 100644 index 0000000000..0996a5c40b --- /dev/null +++ b/changes/issue-1255-action-dropdown-styling @@ -0,0 +1,2 @@ +* Actions dropdown matches wireframes +* Fix spacing, arrow, coloring \ No newline at end of file diff --git a/frontend/components/TableContainer/DataTable/DropdownCell/_styles.scss b/frontend/components/TableContainer/DataTable/DropdownCell/_styles.scss index 8d1ac9e319..2a4e4e6d85 100644 --- a/frontend/components/TableContainer/DataTable/DropdownCell/_styles.scss +++ b/frontend/components/TableContainer/DataTable/DropdownCell/_styles.scss @@ -1,4 +1,6 @@ .dropdown-cell { + width: 80px; + .Select { position: unset; @@ -35,6 +37,7 @@ left: unset; top: unset; max-height: 220px; + padding: $pad-small; } &:not(.is-open) { diff --git a/frontend/components/TableContainer/DataTable/_styles.scss b/frontend/components/TableContainer/DataTable/_styles.scss index 8b75724e70..61fdad2a93 100644 --- a/frontend/components/TableContainer/DataTable/_styles.scss +++ b/frontend/components/TableContainer/DataTable/_styles.scss @@ -48,6 +48,7 @@ &:last-child { border-right: none; + width: 180px; } } } @@ -56,7 +57,9 @@ position: absolute; top: -1px; width: 100%; - max-width: calc( 100vw - 2rem - 2rem - 0.125rem - 300px); // same as wrapper page for flex layout + max-width: calc( + 100vw - 2rem - 2rem - 0.125rem - 300px + ); // same as wrapper page for flex layout border: 0; &__container { @@ -81,7 +84,7 @@ margin-right: $pad-medium; } } - + &__inner-left, &__inner-right { display: flex; diff --git a/frontend/components/forms/fields/Dropdown/_styles.scss b/frontend/components/forms/fields/Dropdown/_styles.scss index 3d1c48e42a..a250c29ebc 100644 --- a/frontend/components/forms/fields/Dropdown/_styles.scss +++ b/frontend/components/forms/fields/Dropdown/_styles.scss @@ -118,33 +118,6 @@ margin-top: 8px; margin-left: -4px; border: none; - - &:hover { - content: url("../assets/images/icon-chevron-blue-16x16@2x.png"); - } - } - - &.is-open { - .Select-arrow { - content: url("../assets/images/icon-collapse-black-16x16@2x.png"); - height: 16px; - width: 16px; - margin-top: 14px; - margin-left: -3px; - border: none; - - &:hover { - content: url("../assets/images/icon-collapse-blue-16x16@2x.png"); - } - } - - .Select-arrow-zone { - &:hover { - .Select-arrow { - border-top-color: transparent; - } - } - } } &.is-focused { @@ -159,6 +132,36 @@ } } + &.is-open { + .Select-arrow { + content: url("../assets/images/icon-chevron-blue-16x16@2x.png"); + height: 16px; + width: 16px; + margin-top: 12px; + margin-left: -4px; + border: none; + } + } + :hover { + .Select-arrow { + content: url("../assets/images/icon-chevron-blue-16x16@2x.png"); + height: 16px; + width: 16px; + margin-left: -4px; + border: none; + } + &.is-open { + .Select-arrow { + content: url("../assets/images/icon-chevron-blue-16x16@2x.png"); + height: 16px; + width: 16px; + margin-top: 10px; + margin-left: -4px; + border: none; + } + } + } + &.has-value { > .Select-control, &.is-pseudo-focused > .Select-control { @@ -178,6 +181,7 @@ overflow: hidden; border: 0; margin: 0; + padding: $pad-small; } .Select-noresults { @@ -187,7 +191,7 @@ .Select-option { color: $core-fleet-black; font-size: $x-small; - margin: 6px 0; + margin: 0; padding: 6px $pad-medium; display: block; diff --git a/frontend/pages/admin/TeamManagementPage/_styles.scss b/frontend/pages/admin/TeamManagementPage/_styles.scss index 56614a044d..142684aa2a 100644 --- a/frontend/pages/admin/TeamManagementPage/_styles.scss +++ b/frontend/pages/admin/TeamManagementPage/_styles.scss @@ -5,7 +5,7 @@ @include sticky-settings-description; padding-bottom: $pad-medium; } - + .Select.is-focused:not(.is-open) > .Select-control { border: none; box-shadow: none; @@ -13,7 +13,8 @@ .Select.is-open { .Select-arrow { - margin-top: $pad-xsmall; + margin-top: 6px; + margin-bottom: -2px; } } @@ -30,5 +31,4 @@ margin-top: $pad-xxsmall; padding-left: 0; } - } diff --git a/frontend/pages/admin/UserManagementPage/_styles.scss b/frontend/pages/admin/UserManagementPage/_styles.scss index 8636c818da..b3d07246bd 100644 --- a/frontend/pages/admin/UserManagementPage/_styles.scss +++ b/frontend/pages/admin/UserManagementPage/_styles.scss @@ -43,6 +43,10 @@ padding: 18px 30px; white-space: nowrap; border-radius: 6px 0; + + &:last-child { + min-width: 100px; + } } } @@ -125,10 +129,11 @@ border: none; box-shadow: none; } - + .Select.is-open { .Select-arrow { - margin-top: 4px; + margin-top: 6px; + margin-bottom: -2px; } } @@ -145,5 +150,4 @@ margin-top: 2px; padding-left: 0; } - }