diff options
| author | John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com> | 2018-03-05 17:17:10 +0100 |
|---|---|---|
| committer | John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com> | 2018-03-07 13:17:37 +0100 |
| commit | 955c2ee1a7d4936aa5fc4168cb1c8bff41f7ad8b (patch) | |
| tree | ce398d7a0f64cea623066db98cc4813e77ed7879 | |
| parent | a7a36402241ef98a3e1403c85e32a2170c6b2ca0 (diff) | |
| download | nextcloud-server-955c2ee1a7d4936aa5fc4168cb1c8bff41f7ad8b.tar.gz nextcloud-server-955c2ee1a7d4936aa5fc4168cb1c8bff41f7ad8b.zip | |
PoC inline icon-confirm with inputs
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
| -rw-r--r-- | apps/files/js/newfilemenu.js | 2 | ||||
| -rw-r--r-- | core/css/inputs.scss | 35 |
2 files changed, 36 insertions, 1 deletions
diff --git a/apps/files/js/newfilemenu.js b/apps/files/js/newfilemenu.js index 09420328f29..0b28e158fe0 100644 --- a/apps/files/js/newfilemenu.js +++ b/apps/files/js/newfilemenu.js @@ -28,7 +28,7 @@ '<form class="filenameform">' + '<label class="hidden-visually" for="{{cid}}-input-{{fileType}}">{{fileName}}</label>' + '<input id="{{cid}}-input-{{fileType}}" type="text" value="{{fileName}}" autocomplete="off" autocapitalize="off">' + - '<input type="submit" value=" " class="primary icon-checkmark-white" />' + '<input type="submit" value=" " class="icon-confirm" />' '</form>'; /** diff --git a/core/css/inputs.scss b/core/css/inputs.scss index 7b74d645481..91f74fbf1fa 100644 --- a/core/css/inputs.scss +++ b/core/css/inputs.scss @@ -212,6 +212,41 @@ select { padding-right: 24px !important; } +/* Confirm inputs */ +input { + &[type='text'], + &[type='password'], + &[type='email'] { + + .icon-confirm { + margin-left: -8px !important; + border-left-color: transparent !important; + border-radius: 0 $border-radius $border-radius 0 !important; + background-clip: padding-box; /* Avoid background under border */ + } + /* only show confirm borders if input is not focused */ + &:not(:active):not(:hover):not(:focus){ + + .icon-confirm { + &:active, + &:hover, + &:focus { + border-left-color: $color-primary-element !important; + border-radius: $border-radius !important; + } + } + } + &:active, + &:hover, + &:focus { + + .icon-confirm { + border-color: $color-primary-element !important; + border-left-color: transparent !important; + } + } + } + +} + + /* Various Fixes */ button img, .button img { |