LBRYCommunity/components
1
0
Fork 0
Code Issues 1 Pull requests 7 Projects Releases Packages Wiki Activity

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) {
background-color: $lbry-yellow-2;
color: $lbry-black;
background-color: var(--lbry-yellow-2);
color: var(--lbry-black);
[data-mode="dark"] & {
background-color: $lbry-yellow-3;
background-color: var(--lbry-yellow-3);
}
}
.badge--free {
background-color: $lbry-blue-2;
background-color: var(--lbry-blue-2);
[data-mode="dark"] & {
background-color: $lbry-blue-3;
color: $lbry-black;
background-color: var(--lbry-blue-3);
color: var(--lbry-black);
}
}
@ -38,20 +38,20 @@
}
.badge--nsfw {
background-color: $lbry-grape-2;
background-color: var(--lbry-grape-2);
[data-mode="dark"] & {
background-color: $lbry-grape-3;
color: $lbry-black;
background-color: var(--lbry-grape-3);
color: var(--lbry-black);
}
}
.badge--primary {
background-color: $lbry-teal-5;
color: $lbry-white;
background-color: var(--lbry-teal-5);
color: var(--lbry-white);
}
.badge--alert {
background-color: $lbry-red-2;
color: $lbry-white;
background-color: var(--lbry-red-2);
color: var(--lbry-white);
}

35
sass/button/_index.scss
View file

@ -16,7 +16,16 @@
.button--disabled {
opacity: 0.3;
pointer-events: none;
&:not([disabled]) {
pointer-events: none;
&:hover {
background-color: inherit;
color: inherit;
fill: inherit;
}
}
}
.button--icon {
@ -25,7 +34,7 @@
background-repeat: no-repeat;
background-size: 50%;
border-radius: 50%;
color: $lbry-white;
color: var(--lbry-white);
transition: background-color 0.2s;
&:not(:hover) {
@ -33,7 +42,7 @@
}
&:hover {
background-color: $lbry-green-3;
background-color: var(--lbry-green-3);
}
&.button--play {
@ -49,7 +58,7 @@
.button--inverse {
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;
color: inherit;
transition: background-color 0.2s;
@ -63,7 +72,7 @@
}
&:hover {
background-color: $lbry-gray-1;
background-color: var(--lbry-gray-1);
[data-mode="dark"] & {
background-color: rgba($lbry-white, 0.1);
@ -72,19 +81,19 @@
}
.button--link {
color: $lbry-teal-5;
color: var(--lbry-teal-5);
transition: color 0.2s;
word-break: break-all;
[data-mode="dark"] & {
color: $lbry-teal-3;
color: var(--lbry-teal-3);
}
&:hover {
color: $lbry-teal-3;
color: var(--lbry-teal-3);
[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
align-self: center; // fixes buttons next to tall elements inside one with `display: flex`
border-radius: 1rem;
color: $lbry-white;
color: var(--lbry-white);
transition: background-color 0.2s;
&:not(:hover) {
background-color: $lbry-teal-5;
background-color: var(--lbry-teal-5);
}
&:hover {
background-color: $lbry-teal-3;
background-color: var(--lbry-teal-3);
[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="submit"],
.button--primary {
color: $lbry-white;
color: var(--lbry-white);
padding-right: var(--spacing-m);
padding-left: var(--spacing-m);
transition: all 0.2s;
&:not(:hover) {
background-color: $lbry-black;
border-color: $lbry-black;
background-color: var(--lbry-black);
border-color: var(--lbry-black);
}
&:hover {
background-color: $lbry-teal-3;
border-color: $lbry-teal-5;
background-color: var(--lbry-teal-3);
border-color: var(--lbry-teal-5);
}
}
@ -60,7 +60,7 @@ form {
}
fieldset {
border-top: 1px solid $lbry-gray-1;
border-top: 1px solid var(--lbry-gray-1);
margin-bottom: var(--spacing-m);
position: relative;
}
@ -86,7 +86,7 @@ fieldset-section {
}
label {
color: $lbry-gray-4;
color: var(--lbry-gray-4);
display: inline-block;
font-size: smaller;
margin-bottom: var(--spacing-xxs);
@ -99,11 +99,11 @@ fieldset-section {
select,
textarea {
&:not(:focus) {
border-color: $lbry-black;
border-color: var(--lbry-black);
}
&:focus {
border-color: $lbry-teal-5;
border-color: var(--lbry-teal-5);
}
}
@ -115,7 +115,7 @@ fieldset-section {
legend {
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);
pointer-events: none;
}
@ -128,17 +128,17 @@ input-submit {
flex: 1;
&:not(:focus) {
border-top-color: $lbry-black;
border-top-color: var(--lbry-black);
border-right-color: transparent;
border-bottom-color: $lbry-black;
border-left-color: $lbry-black;
border-bottom-color: var(--lbry-black);
border-left-color: var(--lbry-black);
}
&:focus {
border-top-color: $lbry-teal-5;
border-top-color: var(--lbry-teal-5);
border-right-color: transparent;
border-bottom-color: $lbry-teal-5;
border-left-color: $lbry-teal-5;
border-bottom-color: var(--lbry-teal-5);
border-left-color: var(--lbry-teal-5);
}
}
}
@ -149,7 +149,7 @@ checkbox-element {
&:hover {
checkbox-toggle,
.checkbox-toggle {
border-color: $lbry-teal-4;
border-color: var(--lbry-teal-4);
}
}
@ -168,7 +168,7 @@ checkbox-element {
&:checked {
+ label {
color: $lbry-teal-4;
color: var(--lbry-teal-4);
}
}
}
@ -193,7 +193,7 @@ radio-element {
&:hover {
radio-toggle,
.radio-toggle {
border-color: $lbry-teal-4;
border-color: var(--lbry-teal-4);
}
}
@ -211,12 +211,12 @@ radio-element {
&:checked {
+ label {
color: $lbry-teal-4;
color: var(--lbry-teal-4);
}
+ 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(
$element-height: 2rem,
$row-count: 2,
$fade-color: $lbry-white,
$fade-color: var(--lbry-white),
$computed-position: relative
) {
height: $element-height;
@ -127,7 +127,7 @@
animation-name: loading-animation;
animation-timing-function: linear;
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-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 {
background-color: $background-color;
color: $text-color;
@ -192,7 +192,7 @@
&:hover {
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);
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] {
pointer-events: none;
resize: none;
&:hover {
background-color: inherit;
color: inherit;
fill: inherit;
}
}
[readonly] {
@ -136,7 +142,7 @@ button {
hr {
width: 100%; height: 1px;
background-color: $lbry-gray-1;
background-color: var(--lbry-gray-1);
}
input {
@ -180,7 +186,7 @@ textarea {
// Intelligent print styles
pre,
blockquote {
border: 1px solid $lbry-gray-5 !important;
border: 1px solid var(--lbry-gray-5) !important;
page-break-inside: avoid !important;
}
@ -217,7 +223,7 @@ textarea {
* {
background-color: transparent !important;
background-image: none !important;
color: $lbry-black !important;
color: var(--lbry-black) !important;
filter: none !important;
text-shadow: none !important;
}

2
sass/media/_index.scss
View file

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

6
sass/table/_index.scss
View file

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