LBRYCommunity/components
1
0
Fork 0
Code Issues1 Pull requests7 Projects Releases Packages Wiki Activity

app fixes

Browse source
This commit is contained in:
Sean Yesmunt 2019-02-13 12:37:50 -04:00
parent 17f9c27196
commit 06c31d1d03
2 changed files with 26 additions and 11 deletions

9
sass/badge/_index.scss
View file

@ -16,10 +16,10 @@
.badge--cost:not(.badge--large) { .badge--cost:not(.badge--large) {
background-color: $lbry-yellow-2; background-color: $lbry-yellow-2;
color: $lbry-black;
[data-mode="dark"] & { [data-mode="dark"] & {
background-color: $lbry-yellow-3; background-color: $lbry-yellow-3;
color: $lbry-black;
} }
} }
@ -33,7 +33,7 @@
} }
.badge--large { .badge--large {
font-size: 5rem; font-size: 4rem;
line-height: 1; line-height: 1;
} }
@ -50,3 +50,8 @@
background-color: $lbry-teal-5; background-color: $lbry-teal-5;
color: $lbry-white; color: $lbry-white;
} }
.badge--alert {
background-color: $lbry-red-2;
color: $lbry-white;
}

28
sass/form/_index.scss
View file

@ -1,23 +1,33 @@
form { form {
// setting the font size here sizes everything within // 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, input,
select { select {
height: var(--spacing-l); height: var(--spacing-l);
border: 1px solid; border: 1px solid;
} }
select,
radio-element,
checkbox-element {
cursor: pointer;
}
[type="email"], [type="email"],
[type="text"] { [type="text"],
[type="number"],
[type="password"] {
padding-right: var(--spacing-s); padding-right: var(--spacing-s);
padding-left: var(--spacing-s); padding-left: var(--spacing-s);
transition: border 0.2s; transition: border 0.2s;
} }
[type="button"], [type="submit"],
[type="submit"] { .button--primary {
color: $lbry-white; color: $lbry-white;
padding-right: var(--spacing-m); padding-right: var(--spacing-m);
padding-left: var(--spacing-m); padding-left: var(--spacing-m);
@ -139,7 +149,8 @@ checkbox-element {
input { input {
&[type="checkbox"] { &[type="checkbox"] {
width: 0; height: 0; width: 0;
height: 0;
visibility: hidden; visibility: hidden;
&:not(:checked) { &:not(:checked) {
@ -183,7 +194,8 @@ radio-element {
input { input {
&[type="radio"] { &[type="radio"] {
width: 0; height: 0; width: 0;
height: 0;
visibility: hidden; visibility: hidden;
&:not(:checked) { &:not(:checked) {
@ -218,8 +230,6 @@ radio-toggle {
} }
} }
// Custom elements are apparently difficult to use in React, so use classes // Custom elements are apparently difficult to use in React, so use classes
.checkbox-element { .checkbox-element {