nextcloud/core/css/share.scss

/**
 * @copyright Copyright (c) 2016, John Molakvoæ <skjnldsv@protonmail.com>
 * @copyright Copyright (c) 2016, Morris Jobke <hey@morrisjobke.de>
 * @copyright Copyright (c) 2016, Julia Bode <julia.bode@lulisaur.us>
 * @copyright Copyright (c) 2016, Christoph Wurst <christoph@winzerhof-wurst.at>
 * @copyright Copyright (c) 2015, Hendrik Leppelsack <hendrik@leppelsack.de>
 * @copyright Copyright (c) 2015, Jan-Christoph Borchardt <hey@jancborchardt.net>
 * @copyright Copyright (c) 2015, Vincent Petry <pvince81@owncloud.com>
 * @copyright Copyright (c) 2015, Arthur Schiwon <blizzz@owncloud.com>
 * @copyright Copyright (c) 2015, Roeland Jago Douma <roeland@famdouma.nl>
 * @copyright Copyright (c) 2015, Morris Jobke <hey@morrisjobke.de>
 *
 * @license GNU AGPL version 3 or any later version
 *
 */

/* SHARE TAB STYLING -------------------------------------------------------- */
.shareTabView {
	.unshare.icon-loading-small {
		margin-top: 1px;
	}
	.shareWithLoading, .linkShare .icon-loading-small {
		display: inline-block !important;
		padding-left: 10px;
	}
	.shareWithLoading {
		position: relative;
		right: 70px;
		top: 2px;
	}
	.icon-loading-small.hidden {
		display: none !important;
	}
	.avatar {
		margin-right: 8px;
		display: inline-block;
		overflow: hidden;
		vertical-align: middle;
		width: 32px;
		height: 32px;
	}
	label {
		font-weight: 400;
		white-space: nowrap;
	}
	input[type='radio'].radio + label {
		margin-left: -1px;
	}
	input[type='checkbox'] {
		margin: 0 3px 0 8px;
		vertical-align: middle;
	}
	input[type='submit'] {
		margin-left: 7px;
	}
	form {
		font-size: 100%;
		margin-left: 0;
		margin-right: 0;
	}
	.error {
		color: $color-error;
		border-color: $color-error;
		box-shadow: 0 0 6px rgba($color-error, 0.35);
	}
	.mailView .icon-mail {
		opacity: 0.5;
	}
}

.share-autocomplete-item {
	display: flex;
	.autocomplete-item-text {
		margin-left: 10px;
		margin-right: 10px;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		line-height: 32px;
		vertical-align: middle;
	}
}

.ui-autocomplete .autocomplete-note {
	padding: 5px 10px;
	color: rgba(0, 0, 0, .3);
}

#shareWithList {
	list-style-type: none;
	padding: 8px;
	> li {
		position: relative;
		padding-top: 10px;
		padding-bottom: 10px;
		font-weight: bold;
		line-height: 21px;
		white-space: normal;
		width: 100%;
	}
	.sharingOptionsGroup {
		flex-shrink: 0;
		position: relative;
		.popovermenu {
			right: -11px;
			top: 35px;
			padding: 3px 6px;
		}
	}

	.shareOption {
		white-space: nowrap;
		display: inline-block;
	}
	.unshare img,
	.showCruds img {
		vertical-align: text-bottom;
		/* properly align icons */
	}
	label input[type=checkbox] {
		margin-left: 0;
		position: relative;
	}
	.username {
		padding-right: 8px;
		white-space: nowrap;
		text-overflow: ellipsis;
		display: inline-block;
		overflow: hidden;
		vertical-align: middle;
		flex-grow: 5;
	}
}

a {
	&.showCruds {
		display: inline;
		opacity: .5;
	}
	&.unshare {
		display: inline-block;
		opacity: .5;
		padding: 10px;
	}
	&.showCruds:hover,
	&.unshare:hover {
		opacity: 1;
	}
}

#link {
	border-top: 1px solid nc-darken($color-main-background, 14%);
	padding-top: 8px;
	#showPassword img {
		padding-left: 5px;
		width: 12px;
	}
}

.reshare,
#link label,
#expiration label {
	display: inline-block;
	padding: 6px 4px;
}

.resharerInfoView.subView {
	position: relative;
}

#defaultExpireMessage, .reshare {
	/* fix shared by text going out of box */
	white-space: normal;
}

#defaultExpireMessage {
	/* show message on new line */
	display: block;
	padding-left: 4px;
	/* TODO: style the dropdown in a proper way - border-box, etc. */
	width: 90%;
}

.ui-autocomplete {
	/* limit dropdown height to 4 1/2 entries */
	max-height: 200px;
	overflow-y: auto;
	overflow-x: hidden;
}

.notCreatable {
	padding-left: 12px;
	padding-top: 12px;
	color: rgba($color-main-text, .4);
}

.contactsmenu-popover {
	left: -8px;
	right: auto;
	padding: 3px 6px;
	li.hidden {
		display: none !important;
	}
	&:after {
		left: 8px;
		right: auto;
	}
}

.popovermenu .datepicker {
    margin-left: 35px;
}

.popovermenu .passwordField {
	margin-left: 35px;
	width: inherit !important;
}

.ui-datepicker {
	z-index: 1111 !important;
}