LBRYFoundation/components
1
0
Fork 0
mirror of https://github.com/LBRYFoundation/components.git synced 2025-08-23 17:47:32 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Styles for disabled buttons and changed all opaque colors to use CSS variables instead

Browse source
This commit is contained in:
ポール ウェッブ 2019-03-11 10:41:27 -05:00
parent b6ab46d999
commit 76950be713
10 changed files with 82 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
dist/index.css vendored
View file

File diff suppressed because one or more lines are too long

2
dist/index.css.map vendored
View file

File diff suppressed because one or more lines are too long

26
sass/badge/_index.scss
View file

@ -15,20 +15,20 @@
} }
.badge--cost:not(.badge--large) { .badge--cost:not(.badge--large) {
background-color: $lbry-yellow-2; background-color: var(--lbry-yellow-2);
color: $lbry-black; color: var(--lbry-black);
[data-mode="dark"] & { [data-mode="dark"] & {
background-color: $lbry-yellow-3; background-color: var(--lbry-yellow-3);
} }
} }
.badge--free { .badge--free {
background-color: $lbry-blue-2; background-color: var(--lbry-blue-2);
[data-mode="dark"] & { [data-mode="dark"] & {
background-color: $lbry-blue-3; background-color: var(--lbry-blue-3);
color: $lbry-black; color: var(--lbry-black);
} }
} }
@ -38,20 +38,20 @@
} }
.badge--nsfw { .badge--nsfw {
background-color: $lbry-grape-2; background-color: var(--lbry-grape-2);
[data-mode="dark"] & { [data-mode="dark"] & {
background-color: $lbry-grape-3; background-color: var(--lbry-grape-3);
color: $lbry-black; color: var(--lbry-black);
} }
} }
.badge--primary { .badge--primary {
background-color: $lbry-teal-5; background-color: var(--lbry-teal-5);
color: $lbry-white; color: var(--lbry-white);
} }
.badge--alert { .badge--alert {
background-color: $lbry-red-2; background-color: var(--lbry-red-2);
color: $lbry-white; color: var(--lbry-white);
} }

33
sass/button/_index.scss
View file

@ -16,7 +16,16 @@
.button--disabled { .button--disabled {
opacity: 0.3; opacity: 0.3;
&:not([disabled]) {
pointer-events: none; pointer-events: none;
&:hover {
background-color: inherit;
color: inherit;
fill: inherit;
}
}
} }
.button--icon { .button--icon {
@ -25,7 +34,7 @@
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 50%; background-size: 50%;
border-radius: 50%; border-radius: 50%;
color: $lbry-white; color: var(--lbry-white);
transition: background-color 0.2s; transition: background-color 0.2s;
&:not(:hover) { &:not(:hover) {
@ -33,7 +42,7 @@
} }
&:hover { &:hover {
background-color: $lbry-green-3; background-color: var(--lbry-green-3);
} }
&.button--play { &.button--play {
@ -49,7 +58,7 @@
.button--inverse { .button--inverse {
padding: var(--spacing-xs) var(--spacing-s); // sass-lint:disable-line shorthand-values padding: var(--spacing-xs) var(--spacing-s); // sass-lint:disable-line shorthand-values
border: 1px solid $lbry-gray-1; border: 1px solid var(--lbry-gray-1);
border-radius: 1rem; border-radius: 1rem;
color: inherit; color: inherit;
transition: background-color 0.2s; transition: background-color 0.2s;
@ -63,7 +72,7 @@
} }
&:hover { &:hover {
background-color: $lbry-gray-1; background-color: var(--lbry-gray-1);
[data-mode="dark"] & { [data-mode="dark"] & {
background-color: rgba($lbry-white, 0.1); background-color: rgba($lbry-white, 0.1);
@ -72,19 +81,19 @@
} }
.button--link { .button--link {
color: $lbry-teal-5; color: var(--lbry-teal-5);
transition: color 0.2s; transition: color 0.2s;
word-break: break-all; word-break: break-all;
[data-mode="dark"] & { [data-mode="dark"] & {
color: $lbry-teal-3; color: var(--lbry-teal-3);
} }
&:hover { &:hover {
color: $lbry-teal-3; color: var(--lbry-teal-3);
[data-mode="dark"] & { [data-mode="dark"] & {
color: $lbry-teal-4; color: var(--lbry-teal-4);
} }
} }
} }
@ -93,18 +102,18 @@
padding: var(--spacing-xs) var(--spacing-s); // sass-lint:disable-line shorthand-values padding: var(--spacing-xs) var(--spacing-s); // sass-lint:disable-line shorthand-values
align-self: center; // fixes buttons next to tall elements inside one with `display: flex` align-self: center; // fixes buttons next to tall elements inside one with `display: flex`
border-radius: 1rem; border-radius: 1rem;
color: $lbry-white; color: var(--lbry-white);
transition: background-color 0.2s; transition: background-color 0.2s;
&:not(:hover) { &:not(:hover) {
background-color: $lbry-teal-5; background-color: var(--lbry-teal-5);
} }
&:hover { &:hover {
background-color: $lbry-teal-3; background-color: var(--lbry-teal-3);
[data-mode="dark"] & { [data-mode="dark"] & {
background-color: $lbry-teal-4; background-color: var(--lbry-teal-4);
} }
} }
} }

42
sass/form/_index.scss
View file

@ -29,19 +29,19 @@ form {
[type="button"]:not(.button--link), [type="button"]:not(.button--link),
[type="submit"], [type="submit"],
.button--primary { .button--primary {
color: $lbry-white; color: var(--lbry-white);
padding-right: var(--spacing-m); padding-right: var(--spacing-m);
padding-left: var(--spacing-m); padding-left: var(--spacing-m);
transition: all 0.2s; transition: all 0.2s;
&:not(:hover) { &:not(:hover) {
background-color: $lbry-black; background-color: var(--lbry-black);
border-color: $lbry-black; border-color: var(--lbry-black);
} }
&:hover { &:hover {
background-color: $lbry-teal-3; background-color: var(--lbry-teal-3);
border-color: $lbry-teal-5; border-color: var(--lbry-teal-5);
} }
} }
@ -60,7 +60,7 @@ form {
} }
fieldset { fieldset {
border-top: 1px solid $lbry-gray-1; border-top: 1px solid var(--lbry-gray-1);
margin-bottom: var(--spacing-m); margin-bottom: var(--spacing-m);
position: relative; position: relative;
} }
@ -86,7 +86,7 @@ fieldset-section {
} }
label { label {
color: $lbry-gray-4; color: var(--lbry-gray-4);
display: inline-block; display: inline-block;
font-size: smaller; font-size: smaller;
margin-bottom: var(--spacing-xxs); margin-bottom: var(--spacing-xxs);
@ -99,11 +99,11 @@ fieldset-section {
select, select,
textarea { textarea {
&:not(:focus) { &:not(:focus) {
border-color: $lbry-black; border-color: var(--lbry-black);
} }
&:focus { &:focus {
border-color: $lbry-teal-5; border-color: var(--lbry-teal-5);
} }
} }
@ -115,7 +115,7 @@ fieldset-section {
legend { legend {
padding: var(--spacing-xs) var(--spacing-s); // sass-lint:disable-line shorthand-values padding: var(--spacing-xs) var(--spacing-s); // sass-lint:disable-line shorthand-values
border: 1px solid $lbry-gray-1; border: 1px solid var(--lbry-gray-1);
margin-bottom: var(--spacing-s); margin-bottom: var(--spacing-s);
pointer-events: none; pointer-events: none;
} }
@ -128,17 +128,17 @@ input-submit {
flex: 1; flex: 1;
&:not(:focus) { &:not(:focus) {
border-top-color: $lbry-black; border-top-color: var(--lbry-black);
border-right-color: transparent; border-right-color: transparent;
border-bottom-color: $lbry-black; border-bottom-color: var(--lbry-black);
border-left-color: $lbry-black; border-left-color: var(--lbry-black);
} }
&:focus { &:focus {
border-top-color: $lbry-teal-5; border-top-color: var(--lbry-teal-5);
border-right-color: transparent; border-right-color: transparent;
border-bottom-color: $lbry-teal-5; border-bottom-color: var(--lbry-teal-5);
border-left-color: $lbry-teal-5; border-left-color: var(--lbry-teal-5);
} }
} }
} }
@ -149,7 +149,7 @@ checkbox-element {
&:hover { &:hover {
checkbox-toggle, checkbox-toggle,
.checkbox-toggle { .checkbox-toggle {
border-color: $lbry-teal-4; border-color: var(--lbry-teal-4);
} }
} }
@ -168,7 +168,7 @@ checkbox-element {
&:checked { &:checked {
+ label { + label {
color: $lbry-teal-4; color: var(--lbry-teal-4);
} }
} }
} }
@ -193,7 +193,7 @@ radio-element {
&:hover { &:hover {
radio-toggle, radio-toggle,
.radio-toggle { .radio-toggle {
border-color: $lbry-teal-4; border-color: var(--lbry-teal-4);
} }
} }
@ -211,12 +211,12 @@ radio-element {
&:checked { &:checked {
+ label { + label {
color: $lbry-teal-4; color: var(--lbry-teal-4);
} }
+ label + radio-toggle::before, + label + radio-toggle::before,
+ label + .radio-toggle::before { + label + .radio-toggle::before {
background-color: $lbry-teal-4; background-color: var(--lbry-teal-4);
} }
} }
} }

10
sass/init/_mixins.scss
View file

@ -92,7 +92,7 @@
@mixin line-clamp( @mixin line-clamp(
$element-height: 2rem, $element-height: 2rem,
$row-count: 2, $row-count: 2,
$fade-color: $lbry-white, $fade-color: var(--lbry-white),
$computed-position: relative $computed-position: relative
) { ) {
height: $element-height; height: $element-height;
@ -127,7 +127,7 @@
animation-name: loading-animation; animation-name: loading-animation;
animation-timing-function: linear; animation-timing-function: linear;
background-color: transparent; background-color: transparent;
background-image: linear-gradient(to right, $lbry-gray-3 10%, transparent 80%, $lbry-gray-3 100%); background-image: linear-gradient(to right, var(--lbry-gray-3) 10%, transparent 80%, var(--lbry-gray-3) 100%);
background-repeat: repeat; background-repeat: repeat;
background-size: 500px; background-size: 500px;
@ -149,7 +149,7 @@
} }
} }
@mixin selection($background-color: $lbry-white, $text-color: $lbry-black) { @mixin selection($background-color: var(--lbry-white), $text-color: var(--lbry-black)) {
&::selection { &::selection {
background-color: $background-color; background-color: $background-color;
color: $text-color; color: $text-color;
@ -192,7 +192,7 @@
&:hover { &:hover {
label { label {
color: $lbry-teal-4; color: var(--lbry-teal-4);
} }
} }
@ -222,7 +222,7 @@
} }
} }
@mixin underline($text-color: $lbry-black, $whitespace-color: $lbry-white) { @mixin underline($text-color: var(--lbry-black), $whitespace-color: var(--lbry-white)) {
@include selection($text-color, $whitespace-color); @include selection($text-color, $whitespace-color);
background-image: linear-gradient($whitespace-color, $whitespace-color), linear-gradient($whitespace-color, $whitespace-color), linear-gradient($text-color, $text-color); background-image: linear-gradient($whitespace-color, $whitespace-color), linear-gradient($whitespace-color, $whitespace-color), linear-gradient($text-color, $text-color);

12
sass/init/_reset.scss
View file

@ -20,6 +20,12 @@ html {
[disabled] { [disabled] {
pointer-events: none; pointer-events: none;
resize: none; resize: none;
&:hover {
background-color: inherit;
color: inherit;
fill: inherit;
}
} }
[readonly] { [readonly] {
@ -136,7 +142,7 @@ button {
hr { hr {
width: 100%; height: 1px; width: 100%; height: 1px;
background-color: $lbry-gray-1; background-color: var(--lbry-gray-1);
} }
input { input {
@ -180,7 +186,7 @@ textarea {
// Intelligent print styles // Intelligent print styles
pre, pre,
blockquote { blockquote {
border: 1px solid $lbry-gray-5 !important; border: 1px solid var(--lbry-gray-5) !important;
page-break-inside: avoid !important; page-break-inside: avoid !important;
} }
@ -217,7 +223,7 @@ textarea {
* { * {
background-color: transparent !important; background-color: transparent !important;
background-image: none !important; background-image: none !important;
color: $lbry-black !important; color: var(--lbry-black) !important;
filter: none !important; filter: none !important;
text-shadow: none !important; text-shadow: none !important;
} }

2
sass/media/_index.scss
View file

@ -178,7 +178,7 @@
.media__text { .media__text {
[data-mode="dark"] & { [data-mode="dark"] & {
color: $lbry-white; color: var(--lbry-white);
} }
} }

12
sass/navigation/_index.scss
View file

@ -38,7 +38,7 @@ drawer-section {
z-index: 3; z-index: 3;
drawer-title::after { drawer-title::after {
background-color: $lbry-teal-4; background-color: var(--lbry-teal-4);
} }
} }
} }
@ -66,8 +66,8 @@ drawer-wrap {
width: 100%; width: 100%;
top: 5rem; left: 0; top: 5rem; left: 0;
background-color: $lbry-white; background-color: var(--lbry-white);
border-top: 1px solid $lbry-gray-1; border-top: 1px solid var(--lbry-gray-1);
padding-top: 2rem; padding-top: 2rem;
padding-bottom: 2rem; padding-bottom: 2rem;
position: absolute; position: absolute;
@ -76,7 +76,7 @@ drawer-wrap {
width: 100vw; height: calc(100vh - 5rem); width: 100vw; height: calc(100vh - 5rem);
top: 5rem; left: 0; top: 5rem; left: 0;
background-color: $lbry-black; background-color: var(--lbry-black);
content: ""; content: "";
opacity: 0.3; opacity: 0.3;
pointer-events: none; pointer-events: none;
@ -101,11 +101,11 @@ drawer-child {
} }
&:hover { &:hover {
border-color: $lbry-gray-1; border-color: var(--lbry-gray-1);
padding-left: var(--spacing-m); padding-left: var(--spacing-m);
> a { > a {
color: $lbry-teal-4; color: var(--lbry-teal-4);
} }
} }

6
sass/table/_index.scss
View file

@ -1,7 +1,7 @@
table { table {
width: 100%; width: 100%;
background-color: $lbry-white; background-color: var(--lbry-white);
position: relative; position: relative;
thead { thead {
@ -21,7 +21,7 @@ table {
tr { tr {
&:not(:last-of-type) { &:not(:last-of-type) {
td { td {
border-bottom: 1px solid $lbry-gray-1; border-bottom: 1px solid var(--lbry-gray-1);
} }
} }
} }
@ -32,7 +32,7 @@ table {
} }
th { th {
border-bottom: 2px solid $lbry-black; border-bottom: 2px solid var(--lbry-black);
letter-spacing: 0.1rem; letter-spacing: 0.1rem;
text-align: left; text-align: left;
text-transform: uppercase; text-transform: uppercase;