diff --git a/packages/common/utils.js b/packages/common/utils.js index 931a2859891b02f6010021316f33a432031d6b1a..9c8f4e6d41c92d33b16f54c2e9ead48495ce7a6a 100644 --- a/packages/common/utils.js +++ b/packages/common/utils.js @@ -53,6 +53,26 @@ export function getGeneralCSS() { padding-left: calc(.625em - 1px); padding-right: calc(.625em - 1px); padding-top: calc(.375em - 1px); + font-size: inherit; + font-family: inherit; + } + + .control { + box-sizing: border-box; + clear: both; + font-size: 1rem; + position: relative; + text-align: left; + } + + .label { + margin-bottom: .5em; + display: block; + font-weight: 400; + } + + *, ::after, ::before { + box-sizing: inherit; } `; } @@ -125,6 +145,54 @@ export function getNotificationCSS() { `; } +export function getButtonCSS() { + // language=css + return css` + .button { + border-color: transparent; + border-width: 1px; + border-radius: var(--vpu-border-radius); + color: #363636; + cursor: pointer; + justify-content: center; + padding-bottom: calc(0.375em - 1px); + padding-left: 0.75em; + padding-right: 0.75em; + padding-top: calc(0.375em - 1px); + text-align: center; + white-space: nowrap; + font-size: inherit; + font-family: inherit; + } + + .button.is-primary { + background-color: var(--vpu-primary-bg-color); + color: var(--vpu-primary-text-color); + } + + .button.is-info { + background-color: var(--vpu-info-bg-color); + color: var(--vpu-info-text-color); + } + + .button.is-success { + background-color: var(--vpu-success-bg-color); + color: var(--vpu-success-text-color); + } + + .button.is-warning { + background-color: var(--vpu-warning-bg-color); + color: var(--vpu-warning-text-color); + } + + .button.is-danger { + background-color: var(--vpu-danger-bg-color); + color: var(--vpu-danger-text-color); + } + + `; +} + /** * Parses a link header *