diff options
| author | John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com> | 2018-03-06 10:21:35 +0100 |
|---|---|---|
| committer | John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com> | 2018-03-07 13:17:37 +0100 |
| commit | 8d986160b899684dd5e76c3996ba04902152df4e (patch) | |
| tree | d4ab0aa3ccb43a51d6335e9bef7a89a57f1396e0 /core | |
| parent | 4e6043fd6b8853a6ea20fab6d9f71e21f35f0825 (diff) | |
| download | nextcloud-server-8d986160b899684dd5e76c3996ba04902152df4e.tar.gz nextcloud-server-8d986160b899684dd5e76c3996ba04902152df4e.zip | |
Improved inline confirm icon with opacity and fixed ext share loading state
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
Diffstat (limited to 'core')
| -rw-r--r-- | core/css/icons.scss | 4 | ||||
| -rw-r--r-- | core/css/inputs.scss | 18 | ||||
| -rw-r--r-- | core/img/actions/confirm-fade.svg | 1 |
3 files changed, 17 insertions, 6 deletions
diff --git a/core/css/icons.scss b/core/css/icons.scss index 3c3dff56c1a..b4505e24e18 100644 --- a/core/css/icons.scss +++ b/core/css/icons.scss @@ -165,6 +165,10 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] { background-image: url('../img/actions/confirm.svg?v=2'); } +.icon-confirm-fade { + background-image: url('../img/actions/confirm-fade.svg?v=2'); +} + .icon-confirm-white { background-image: url('../img/actions/confirm-white.svg?v=2'); } diff --git a/core/css/inputs.scss b/core/css/inputs.scss index 0e2a7483041..caa8209bdbd 100644 --- a/core/css/inputs.scss +++ b/core/css/inputs.scss @@ -149,11 +149,6 @@ input[type='reset'] { cursor: pointer; box-sizing: border-box; background-color: nc-darken($color-main-background, 3%); - &.icon-confirm:not(:empty), - &.icon-confirm[value]:not([value=""]) { - background-position: calc(100% - 6px) center; - padding-right: 30px; - } } /* Buttons */ @@ -223,6 +218,14 @@ input { border-radius: 0 $border-radius $border-radius 0 !important; background-clip: padding-box; /* Avoid background under border */ background-color: $color-main-background !important; + opacity: 1; + width: 16px; + padding: 7px 6px; + cursor: pointer; + &:disabled { + cursor: default; + background-image: url('../img/actions/confirm-fade.svg?v=2') !important; + } } /* only show confirm borders if input is not focused */ &:not(:active):not(:hover):not(:focus){ @@ -230,8 +233,11 @@ input { &:active, &:hover, &:focus { - border-left-color: $color-primary-element !important; + border-color: $color-primary-element !important; border-radius: $border-radius !important; + &:disabled { + border-color: nc-darken($color-main-background, 14%) !important; + } } } } diff --git a/core/img/actions/confirm-fade.svg b/core/img/actions/confirm-fade.svg new file mode 100644 index 00000000000..122af34cd7a --- /dev/null +++ b/core/img/actions/confirm-fade.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 16 16" width="16" version="1.1" height="16"><path opacity=".5" d="m8.5 0.5c-0.8974 0-1.3404 1.0909-0.6973 1.7168l4.7837 4.7832h-11.573c-1.3523-0.019125-1.3523 2.0191 0 2h11.572l-4.7832 4.7832c-0.98163 0.94251 0.47155 2.3957 1.4141 1.4141l6.4911-6.49c0.387-0.3878 0.391-1.0228 0-1.414l-6.4906-6.4903c-0.1883-0.1935-0.4468-0.30268-0.7168-0.3027z"/></svg> |
