forked/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2026-03-16 20:43:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixed styles for disabled inputs in dark theme

Browse Source
This commit is contained in:
Alejandro Celaya
2021-02-17 11:15:35 +01:00
parent 83791157ce
commit 9703eba6ec
3 changed files with 17 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/index.scss
View File

@@ -129,8 +129,14 @@ body,
border-color: var(--input-border-color); border-color: var(--input-border-color);
} }
.card .form-control, .form-control.disabled,
.card .form-control:hover { .form-control:disabled {
background-color: var(--input-disabled-color);
cursor: not-allowed;
}
.card .form-control:not(:disabled),
.card .form-control:not(:disabled):hover {
background-color: var(--input-color); background-color: var(--input-color);
} }

4
src/theme/theme.scss
View File

@@ -9,6 +9,7 @@ $lightBorderColor: rgba(0, 0, 0, .125);
$lightActiveColor: $lightGrey; $lightActiveColor: $lightGrey;
$lightBrandColor: $mainColor; $lightBrandColor: $mainColor;
$lightInputColor: $lightPrimaryColor; $lightInputColor: $lightPrimaryColor;
$lightDisabledInputColor: $lightColor;
$lightBorderInputColor: rgba(0, 0, 0, .19); $lightBorderInputColor: rgba(0, 0, 0, .19);
// Dark theme colors // Dark theme colors
@@ -20,6 +21,7 @@ $darkBorderColor: rgba(0, 0, 0, .2);
$darkActiveColor: $darkSecondaryColor; $darkActiveColor: $darkSecondaryColor;
$darkBrandColor: #0b2d4e; $darkBrandColor: #0b2d4e;
$darkInputColor: darken($darkPrimaryColor, 2%); $darkInputColor: darken($darkPrimaryColor, 2%);
$darkDisabledInputColor: lighten($darkPrimaryColor, 2%);
$darkBorderInputColor: rgba(0, 0, 0, .3); $darkBorderInputColor: rgba(0, 0, 0, .3);
html:not([data-theme='dark']) { html:not([data-theme='dark']) {
@@ -31,6 +33,7 @@ html:not([data-theme='dark']) {
--active-color: #{$lightActiveColor}; --active-color: #{$lightActiveColor};
--brand-color: #{$lightBrandColor}; --brand-color: #{$lightBrandColor};
--input-color: #{$lightInputColor}; --input-color: #{$lightInputColor};
--input-disabled-color: #{$lightDisabledInputColor};
--input-border-color: #{$lightBorderInputColor}; --input-border-color: #{$lightBorderInputColor};
} }
@@ -43,5 +46,6 @@ html[data-theme='dark'] {
--active-color: #{$darkActiveColor}; --active-color: #{$darkActiveColor};
--brand-color: #{$darkBrandColor}; --brand-color: #{$darkBrandColor};
--input-color: #{$darkInputColor}; --input-color: #{$darkInputColor};
--input-disabled-color: #{$darkDisabledInputColor};
--input-border-color: #{$darkBorderInputColor}; --input-border-color: #{$darkBorderInputColor};
} }

5
src/utils/DropdownBtn.scss
View File

@@ -21,6 +21,11 @@
background-color: var(--input-color); background-color: var(--input-color);
} }
.dropdown-btn__toggle.dropdown-btn__toggle.disabled,
.dropdown-btn__toggle.dropdown-btn__toggle:disabled {
background-color: var(--input-disabled-color);
}
.dropdown-btn__toggle.dropdown-btn__toggle:after { .dropdown-btn__toggle.dropdown-btn__toggle:after {
@include vertical-align(); @include vertical-align();