diff --git a/ui-v2/app/styles/components/action-group/layout.scss b/ui-v2/app/styles/components/action-group/layout.scss index 06a47fb2abf8..b5f054932152 100644 --- a/ui-v2/app/styles/components/action-group/layout.scss +++ b/ui-v2/app/styles/components/action-group/layout.scss @@ -1,6 +1,14 @@ %action-group label span { display: none; } +%action-group-action { + width: 170px; + padding: 10px 10px; + text-align: left; +} +%action-group li > * { + @extend %action-group-action; +} %action-group::before { margin-left: -1px; } @@ -59,10 +67,6 @@ position: relative; z-index: 1; } -%action-group li a { - width: 170px; - padding: 10px 10px; -} %action-group input[type='radio'], %action-group input[type='radio'] ~ ul, %action-group input[type='radio'] ~ .with-confirmation > ul { diff --git a/ui-v2/app/styles/components/action-group/skin.scss b/ui-v2/app/styles/components/action-group/skin.scss index 73e72a2a9cfe..7ef8d43773e4 100644 --- a/ui-v2/app/styles/components/action-group/skin.scss +++ b/ui-v2/app/styles/components/action-group/skin.scss @@ -5,7 +5,8 @@ /* frame-gray */ background-color: $gray-050; } -%action-group label { +%action-group label, +%action-group-action { cursor: pointer; } %action-group label::after, @@ -26,7 +27,10 @@ %action-group ul::before { border-color: $color-action; } -%action-group li a:hover { +%action-group-action { + background-color: $white; +} +%action-group-action:hover { @extend %frame-blue-800; } %action-group ul, diff --git a/ui-v2/app/styles/components/buttons.scss b/ui-v2/app/styles/components/buttons.scss index 977dc0897e77..9047a583dbbc 100644 --- a/ui-v2/app/styles/components/buttons.scss +++ b/ui-v2/app/styles/components/buttons.scss @@ -3,12 +3,13 @@ button[type='submit'], a.type-create { @extend %primary-button; } +// the :not(li)'s here avoid styling action-group buttons button[type='reset'], -button[type='button']:not(.copy-btn):not(.type-delete), +:not(li) > button[type='button']:not(.copy-btn):not(.type-delete), html.template-error div > a { @extend %secondary-button; } -button.type-delete { +:not(li) > button.type-delete { @extend %dangerous-button; } button.copy-btn { diff --git a/ui-v2/app/styles/core/typography.scss b/ui-v2/app/styles/core/typography.scss index 4107ebf9f223..2331c49c901c 100644 --- a/ui-v2/app/styles/core/typography.scss +++ b/ui-v2/app/styles/core/typography.scss @@ -52,7 +52,7 @@ caption { } th, %breadcrumbs a, -%action-group a, +%action-group-action, %tab-nav, %tooltip-bubble { font-weight: $typo-weight-medium; @@ -80,6 +80,7 @@ h2, font-size: $typo-size-500; } body, +%action-group-action, pre code, input, textarea, diff --git a/ui-v2/app/templates/dc/acls/index.hbs b/ui-v2/app/templates/dc/acls/index.hbs index 57f94c8946b7..3617db3c931c 100644 --- a/ui-v2/app/templates/dc/acls/index.hbs +++ b/ui-v2/app/templates/dc/acls/index.hbs @@ -43,28 +43,28 @@ {{#block-slot 'action' as |confirm|}} {{#action-group index=index onchange=(action change) checked=(if (eq checked index) 'checked')}}