From a9072370ca1eb9a5cce928b1d487db0f307edea6 Mon Sep 17 00:00:00 2001 From: ivarlovlie Date: Tue, 20 Sep 2022 15:24:27 +0800 Subject: feat: Move old apps into it's own directory --- .../src/styles/custom-style/_buttons.scss | 89 ++++++++++++++++++++++ 1 file changed, 89 insertions(+) create mode 100644 old-apps/web-shared/src/styles/custom-style/_buttons.scss (limited to 'old-apps/web-shared/src/styles/custom-style/_buttons.scss') diff --git a/old-apps/web-shared/src/styles/custom-style/_buttons.scss b/old-apps/web-shared/src/styles/custom-style/_buttons.scss new file mode 100644 index 0000000..2145acc --- /dev/null +++ b/old-apps/web-shared/src/styles/custom-style/_buttons.scss @@ -0,0 +1,89 @@ +@use '../base' as *; + +// -------------------------------- + +// (START) Global editor code https://codyhouse.co/ds/globals/buttons + +// -------------------------------- + +:root { + --btn-font-size: 1rem; + --btn-padding-x: var(--space-xs); + --btn-padding-y: var(--space-xxxs); + --btn-radius: 5px; +} + +.btn { + background: var(--color-bg-dark); + color: var(--color-contrast-higher); + cursor: pointer; + font-family: var(--font-primary); + font-weight: 400; + text-decoration: none; + line-height: 0.8; + @include fontSmooth; + outline: none; + + &:hover { + background: var(--color-bg-darker); + } + + &:focus { + outline: 1px solid var(--color-contrast-lower); + } +} + +// themes +.btn--primary { + background: var(--color-primary); + color: var(--color-white); + + &:hover { + background: var(--color-primary-light); + box-shadow: inset 0px 1px 0px alpha(var(--color-white), 0.15), 0px 1px 2px alpha(var(--color-primary-darker), 0.25), 0px 1px 4px alpha(var(--color-primary-darker), 0.1), 0px 3px 6px -2px alpha(var(--color-primary-darker), 0.25); + } +} + +.btn--subtle { + background: var(--color-bg-lighter); + color: var(--color-contrast-higher); + + &:hover { + background: var(--color-bg-light); + } +} + +.btn--accent { + background: var(--color-accent); + color: var(--color-white); + + &:hover { + background: var(--color-accent-light); + box-shadow: inset 0px 1px 0px alpha(var(--color-white), 0.15), 0px 1px 2px alpha(var(--color-accent-darker), 0.25), 0px 1px 4px alpha(var(--color-accent-darker), 0.1), 0px 3px 6px -2px alpha(var(--color-accent-darker), 0.1); + } +} + +// feedback +.btn--disabled, .btn[disabled], .btn[readonly] { + opacity: 0.6; + cursor: not-allowed; +} + +// size +.btn--sm { + font-size: 0.8rem; +} + +.btn--md { + font-size: 1.2rem; +} + +.btn--lg { + font-size: 1.4rem; +} + +// -------------------------------- + +// (END) Global editor code + +// -------------------------------- \ No newline at end of file -- cgit v1.3