36f55b5867
Before, the icon appeared below the text input for the password. Now, it appears inside the text input, to the right end. The CSS was adjusted based on other icons shown in that position for other text inputs in the Share tab view, like the information icon or the clipboard icon. Fixes #4135 Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
161 lines
3.2 KiB
SCSS
161 lines
3.2 KiB
SCSS
.app-files .shareTabView {
|
|
min-height: 100px;
|
|
}
|
|
|
|
.shareTabView .oneline {
|
|
white-space: nowrap;
|
|
position: relative;
|
|
}
|
|
|
|
.shareTabView .shareWithLoading {
|
|
padding-left: 10px;
|
|
right: 35px;
|
|
top: 0px;
|
|
}
|
|
|
|
.shareTabView .shareWithRemoteInfo,
|
|
.shareTabView .clipboardButton,
|
|
.shareTabView .linkPass .icon-loading-small {
|
|
position: absolute;
|
|
right: -7px;
|
|
top: -4px;
|
|
padding: 14px;
|
|
}
|
|
|
|
.shareTabView .linkMore {
|
|
position: absolute;
|
|
right: -7px;
|
|
top: -4px;
|
|
padding: 14px;
|
|
}
|
|
|
|
/* fix the popup menu because the button is shifted and then the menu is not aligned */
|
|
.shareTabView .popovermenu.socialSharingMenu {
|
|
right: -7px;
|
|
}
|
|
|
|
.shareTabView .popovermenu .clipboardButton {
|
|
position: relative;
|
|
top: initial;
|
|
right: initial;
|
|
padding: 18px 0 18px 36px;
|
|
}
|
|
|
|
/* fix clickable area because in the share tab popover the label is inside the actual menu item*/
|
|
#shareWithList .popovermenu .shareOption {
|
|
padding-right: 0 !important;
|
|
}
|
|
/* fix clickable area because in the share tab popover the label is inside the actual menu item*/
|
|
.shareTabView .popovermenu label {
|
|
width: 100%;
|
|
display: inline-block;
|
|
padding: 0 10px 0 0 !important;
|
|
}
|
|
|
|
.shareTabView label {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.shareTabView input[type="checkbox"] {
|
|
margin: 0 3px 0 8px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.shareTabView input[type="text"].shareWithField,
|
|
.shareTabView input[type="text"].emailField,
|
|
.shareTabView input[type="text"].linkText,
|
|
.shareTabView input[type="password"] {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding-right: 32px;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.shareTabView form {
|
|
font-size: 100%;
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
}
|
|
|
|
#shareWithList {
|
|
list-style-type: none;
|
|
padding: 0 0 16px;
|
|
}
|
|
|
|
#shareWithList > li {
|
|
padding-top: 5px;
|
|
padding-bottom: 5px;
|
|
white-space: normal;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
}
|
|
|
|
#shareWithList .unshare img, #shareWithList .showCruds img {
|
|
vertical-align: text-bottom; /* properly align icons */
|
|
}
|
|
|
|
#shareWithList .sharingOptionsGroup .icon-more {
|
|
padding: 7px;
|
|
vertical-align: middle;
|
|
opacity: .5;
|
|
}
|
|
|
|
#shareWithList .shareOption.menuitem > label:before {
|
|
/* Checkboxes positionning */
|
|
margin: 0 12px !important;
|
|
}
|
|
|
|
#shareWithList .unshare {
|
|
padding: 1px 6px;
|
|
vertical-align: text-bottom;
|
|
}
|
|
#shareWithList .unshare .icon {
|
|
vertical-align: text-top;
|
|
}
|
|
|
|
#shareWithList .sharingOptionsGroup .popovermenu:after {
|
|
right: 3px;
|
|
}
|
|
|
|
#shareWithList label input[type=checkbox] {
|
|
margin-left: 0;
|
|
position: relative;
|
|
}
|
|
#shareWithList .username {
|
|
padding-right: 8px;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
display: inline-block;
|
|
overflow: hidden;
|
|
vertical-align: middle;
|
|
}
|
|
#shareWithList li .sharingOptionsGroup > .shareOption > label {
|
|
padding: 6px;
|
|
margin-right: 8px;
|
|
vertical-align: text-top;
|
|
}
|
|
|
|
.shareTabView .icon-loading-small {
|
|
display: inline-block;
|
|
z-index: 1;
|
|
margin-right: 4px;
|
|
vertical-align: text-top;
|
|
}
|
|
|
|
.shareTabView .shareWithList .icon-loading-small:not(.hidden) + span,
|
|
.shareTabView .linkShareView .icon-loading-small:not(.hidden) + input + label:before {
|
|
/* Hide if loader is visible */
|
|
display: none !important;
|
|
}
|
|
|
|
.linkShareView {
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.shareTabView .linkPass .icon-loading-small {
|
|
margin-right: 0px;
|
|
}
|
|
|
|
.shareTabView .icon {
|
|
background-size: 16px 16px;
|
|
}
|