LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

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-border-color: rgba(255,255,255, 0.70);
--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-bg: rgba(0,0,0, 0.45);

14
ui/scss/_vars.scss
View file

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

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

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