diff --git a/sass/badge/_index.scss b/sass/badge/_index.scss index 6377a45..0218db2 100644 --- a/sass/badge/_index.scss +++ b/sass/badge/_index.scss @@ -16,10 +16,10 @@ .badge--cost:not(.badge--large) { background-color: $lbry-yellow-2; + color: $lbry-black; [data-mode="dark"] & { background-color: $lbry-yellow-3; - color: $lbry-black; } } @@ -33,7 +33,7 @@ } .badge--large { - font-size: 5rem; + font-size: 4rem; line-height: 1; } @@ -50,3 +50,8 @@ background-color: $lbry-teal-5; color: $lbry-white; } + +.badge--alert { + background-color: $lbry-red-2; + color: $lbry-white; +} diff --git a/sass/form/_index.scss b/sass/form/_index.scss index 28e0e8d..f04cd73 100644 --- a/sass/form/_index.scss +++ b/sass/form/_index.scss @@ -1,23 +1,33 @@ form { // setting the font size here sizes everything within - margin-bottom: var(--spacing-s); + &:not(:last-child) { + margin-bottom: var(--spacing-s); + } - button, + button:not(.button--link), input, select { height: var(--spacing-l); border: 1px solid; } + checkbox-element, + radio-element, + select { + cursor: pointer; + } + [type="email"], + [type="number"], + [type="password"] [type="text"] { padding-right: var(--spacing-s); padding-left: var(--spacing-s); transition: border 0.2s; } - [type="button"], - [type="submit"] { + [type="submit"], + .button--primary { color: $lbry-white; padding-right: var(--spacing-m); padding-left: var(--spacing-m); @@ -218,8 +228,6 @@ radio-toggle { } } - - // Custom elements are apparently difficult to use in React, so use classes .checkbox-element {