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

more fixes for input styles

Browse source
This commit is contained in:
btzr-io 2017-10-14 22:52:32 -06:00
parent f5126fc059
commit c6f75702b1
3 changed files with 44 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
ui/dist/themes/dark.css vendored
View file

@ -24,7 +24,13 @@
--input-bg: transparent; --input-bg: transparent;
--input-border-color: rgba(255,255,255, 0.70); --input-border-color: rgba(255,255,255, 0.70);
--input-hover-border-color: rgba(255, 255, 255, 1); --input-hover-border-color: rgba(255, 255, 255, 1);
--input-placeholder-opacity: 0.5;
/* input:placeholder */
--input-placeholder-color: rgba(255,255,255, 0.5);
/* input:disabled */
--input-disabled-color: rgba(255, 255, 255, 0.50);
--input-disabled-border-color: rgba(255, 255, 255, 0.70);
/* Search */ /* Search */
--search-bg: rgba(0,0,0, 0.45); --search-bg: rgba(0,0,0, 0.45);

14
ui/scss/_vars.scss
View file

@ -58,14 +58,22 @@ $text-color: #000;
/* Input */ /* Input */
--input-bg: transparent; --input-bg: transparent;
--input-active-bg: transparent;
--input-width: 330px; --input-width: 330px;
--input-color: var(--text-color); --input-color: var(--text-color);
--input-border-size: 2px; --input-border-size: 2px;
--input-border-color: rgba(0, 0, 0, 0.42); --input-border-color: rgba(0, 0, 0, 0.42);
/* input:active */
--input-active-bg: transparent;
/* input:disabled */
--input-disabled-border-color: rgba(0, 0, 0, 0.42);
--input-disabled-color: rgba(0, 0, 0, 0.54);
/* input:hover */
--input-hover-border-color: rgba(0, 0, 0, 0.87); --input-hover-border-color: rgba(0, 0, 0, 0.87);
/* input:placeholder */
--input-placeholder-color: var(--text-color); --input-placeholder-color: var(--text-color);
--input-placeholder-opacity: 0.42; --input-placeholder-opacity: 1;
/* Select */ /* Select */
--select-bg: var(--color-bg-alt); --select-bg: var(--color-bg-alt);
@ -80,7 +88,7 @@ $text-color: #000;
--button-height: $spacing-vertical * 1.5; --button-height: $spacing-vertical * 1.5;
--button-intra-margin: $spacing-vertical; --button-intra-margin: $spacing-vertical;
--button-radius: 3px; --button-radius: 3px;
/* Header */ /* Header */
--header-bg: var(--color-bg); --header-bg: var(--color-bg);
--header-color: #666; --header-color: #666;

51
ui/scss/component/_form-field.scss
View file

@ -9,7 +9,7 @@
.form-row__label-row { .form-row__label-row {
margin-top: $spacing-vertical * 5/6; margin-top: $spacing-vertical * 5/6;
margin-bottom: $spacing-vertical * 1/6; margin-bottom: 0px;
line-height: 1; line-height: 1;
font-size:calc( 0.9 * var(--font-size)); font-size:calc( 0.9 * var(--font-size));
} }
@ -18,26 +18,6 @@
margin-right: 5px; margin-right: 5px;
} }
input[type="text"].input-copyable {
background: var(--input-bg);
color: var(--input-color);
line-height: 1;
padding-top: $spacing-vertical * 1/3;
padding-bottom: $spacing-vertical * 1/3;
padding-left: 5px;
padding-right: 5px;
width: 100%;
}
input[readonly] {
border-bottom: 1px dashed var(--input-border-color) !important;
}
input[readonly]:focus {
background: var(--input-bg) !important;
border-bottom: 1px dashed var(--input-border-color !important);
}
.form-field { .form-field {
display: inline-block; display: inline-block;
margin: 8px 0; margin: 8px 0;
@ -60,6 +40,27 @@ input[readonly]:focus {
} }
} }
input[type="text"].input-copyable {
background: var(--input-bg);
color: var(--input-disabled-color);
line-height: 1;
padding-top: $spacing-vertical * 1/3;
padding-bottom: $spacing-vertical * 1/3;
padding-left: 5px;
padding-right: 5px;
width: 100%;
}
input[readonly] {
color: var(--input-disabled-color) !important;
border-bottom: 1px dashed var(--input-disabled-border-color) !important;
}
input[readonly]:focus {
background: var(--input-bg) !important;
border-bottom: 1px dashed var(--input-disabled-border-color) !important;
}
textarea, textarea,
input[type="text"], input[type="text"],
input[type="password"], input[type="password"],
@ -73,22 +74,22 @@ input[readonly]:focus {
color: var(--input-color); color: var(--input-color);
cursor: pointer; cursor: pointer;
line-height: 1; line-height: 1;
padding: $spacing-vertical * 1/3 1px; padding:0 1px 8px 1px;
box-sizing: border-box; box-sizing: border-box;
-webkit-appearance: none; -webkit-appearance: none;
transition: all var(--transition-duration) var(--transition-type); transition: all var(--transition-duration) var(--transition-type);
& ::-webkit-input-placeholder { &::-webkit-input-placeholder {
color: var(--input-placeholder-color); color: var(--input-placeholder-color);
opacity: var(--input-placeholder-opacity) !important; opacity: var(--input-placeholder-opacity) !important;
} }
&:focus { &:focus {
border-color: var(--color-primary) !important; border-color: var(--color-primary);
background: var(--input-active-bg); background: var(--input-active-bg);
} }
&:hover { &:hover:not(:focus){
border-color: var(--input-hover-border-color); border-color: var(--input-hover-border-color);
} }