diff --git a/client/scss/components/_button.scss b/client/scss/components/_button.scss index 200f9c7535..0c7659ccfb 100644 --- a/client/scss/components/_button.scss +++ b/client/scss/components/_button.scss @@ -319,3 +319,33 @@ } } } + +.header-main-action-button { + // Temporarily copied from .c-sf-add-button + display: flex; + align-items: center; + justify-content: center; + width: theme('spacing.6'); + height: theme('spacing.6'); + appearance: none; + color: theme('colors.text-button-outline-default'); + padding: 0; + cursor: pointer; + + .icon { + width: theme('spacing.4'); + height: theme('spacing.4'); + padding: theme('spacing.[0.5]'); + border: 1px solid theme('colors.text-button-outline-default'); + border-radius: theme('borderRadius.full'); + transition: transform 0.3s ease; + } + + &:hover, + &:focus-visible { + .icon { + color: theme('colors.surface-page'); + background-color: theme('colors.text-button-outline-default'); + } + } +} diff --git a/wagtail/admin/templates/wagtailadmin/pages/listing/_page_header_buttons.html b/wagtail/admin/templates/wagtailadmin/pages/listing/_page_header_buttons.html index 101a0f32f9..fba289f49e 100644 --- a/wagtail/admin/templates/wagtailadmin/pages/listing/_page_header_buttons.html +++ b/wagtail/admin/templates/wagtailadmin/pages/listing/_page_header_buttons.html @@ -2,7 +2,7 @@ {% trans "Actions" as title %}