Share scss

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

diff --git a/core/css/share.scss b/core/css/share.scss
new file mode 100644 (file)
index 0000000..a72437c
--- /dev/null
+++ b/core/css/share.scss
@@ -0,0 +1,199 @@
+/* Copyright (c) 2011, Jan-Christoph Borchardt, http://jancborchardt.net
+ This file is licensed under the Affero General Public License version 3 or later.
+ See the COPYING-README file. */
+
+#dropdown {
+       background: #eee;
+       border-bottom-left-radius: 3px;
+       border-bottom-right-radius: 3px;
+       box-shadow: 0 2px 3px rgba(50, 50, 50, 0.4);
+       display: block;
+       margin-right: 0;
+       position: absolute;
+       right: 0;
+       width: 420px;
+       z-index: 500;
+       padding: 16px;
+}
+
+@media only screen and (min-width: 768px) and (max-width: 990px) {
+       #dropdown {
+               /* this limits the dropdown to float below the sidebar for mid narrow screens */
+               left: 20px;
+       }
+}
+
+.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;
+       }
+}
+
+.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;
+       }
+}
+
+#shareWithList {
+       list-style-type: none;
+       padding: 8px;
+       li {
+               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: -6px;
+                       top: 40px;
+                       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;
+       }
+       li label {
+               margin-right: 8px;
+       }
+}
+
+.shareTabView {
+       label {
+               font-weight: 400;
+               white-space: nowrap;
+       }
+       input[type='checkbox'] {
+               margin: 0 3px 0 8px;
+               vertical-align: middle;
+       }
+}
+
+a {
+       &.showCruds {
+               display: inline;
+               opacity: .5;
+       }
+       &.unshare {
+               display: inline-block;
+               opacity: .5;
+               padding: 10px;
+       }
+}
+
+#link {
+       border-top: 1px solid #ddd;
+       padding-top: 8px;
+}
+
+.shareTabView {
+       input[type='submit'] {
+               margin-left: 7px;
+       }
+       form {
+               font-size: 100%;
+               margin-left: 0;
+               margin-right: 0;
+       }
+       .error {
+               color: #e9322d;
+               border-color: #e9322d;
+               box-shadow: 0 0 6px #f8b9b7;
+       }
+}
+
+#link #showPassword img {
+       padding-left: 5px;
+       width: 12px;
+}
+
+.reshare, #link label, #expiration label {
+       display: inline-block;
+       padding: 6px 4px;
+}
+
+a {
+       &.showCruds:hover, &.unshare:hover {
+               opacity: 1;
+       }
+}
+
+#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: #999;
+}
+
+.shareTabView .mailView .icon-mail {
+       opacity: 0.5;
+}