diff --git a/src/pivotal-ui/components/buttons/buttons.scss b/src/pivotal-ui/components/buttons/buttons.scss index 5c12f7f30..fb0cc11ee 100644 --- a/src/pivotal-ui/components/buttons/buttons.scss +++ b/src/pivotal-ui/components/buttons/buttons.scss @@ -100,6 +100,12 @@ parent: button btn btn-secondary This button should be used for the secondary action on the page. e.g. the upgrade button in the signup flow + + + + btn btn-tertiary + This button should be used whenever necessary. e.g. the Platform dropdown on the Enterprise install page + @@ -167,6 +173,10 @@ parent: button } } +.btn-tertiary { + @include button-skin($btn-tertiary-color, $btn-tertiary-bg, $btn-tertiary-border, null, $btn-tertiary-border-hover, $btn-tertiary-bg-hover); +} + .btn-link { @include button-skin($btn-link-color, $btn-link-bg); } diff --git a/src/pivotal-ui/components/pui-variables.scss b/src/pivotal-ui/components/pui-variables.scss index e4da61a87..926072fcd 100644 --- a/src/pivotal-ui/components/pui-variables.scss +++ b/src/pivotal-ui/components/pui-variables.scss @@ -503,6 +503,12 @@ $btn-secondary-border: $npm-brand; $btn-secondary-border-hover: darken($npm-brand, 10%); $btn-secondary-gradient-color: rgba(202, 56, 56, 0.15); +$btn-tertiary-color: $npm-brand; +$btn-tertiary-bg: $neutral-11; +$btn-tertiary-bg-hover: lighten($npm-brand, 47%); +$btn-tertiary-border: $npm-brand; +$btn-tertiary-border-hover: darken($npm-brand, 10%); + $btn-link-color: $link-color !default; $btn-link-bg: transparent !default;