diff options
Diffstat (limited to 'web/sass-files/sass/components/_modal.scss')
-rw-r--r-- | web/sass-files/sass/components/_modal.scss | 508 |
1 files changed, 508 insertions, 0 deletions
diff --git a/web/sass-files/sass/components/_modal.scss b/web/sass-files/sass/components/_modal.scss new file mode 100644 index 000000000..a8e8a99f7 --- /dev/null +++ b/web/sass-files/sass/components/_modal.scss @@ -0,0 +1,508 @@ +@charset 'UTF-8'; + +#channel_members_modal .modal-body { + min-height: 110px; +} + +.modal-body { + padding: 20px 15px; + overflow: auto; +} + +.more-table { + margin: 0; + table-layout: fixed; +} + +.modal { + width: 100%; + color: #333; + + body.browser--IE & { + .modal-dialog { + @include translateY(0); + } + } + + &.image_modal { + .modal-backdrop.in { + @include opacity(.7); + } + } + + .custom-textarea { + color: inherit; + border-color: #ccc; + + &:focus { + border-color: #ccc; + box-shadow: none; + } + } + + .btn { + font-size: 13px; + + &.btn-default { + border: none; + background: transparent; + } + } + + .info__label { + font-weight: 600; + text-align: right; + padding-right: 0; + } + + .team-member-list { + width: 100%; + } + + .remove__member { + float: right; + color: #999; + font-size: 20px; + line-height: 0; + padding: 6px; + + &:hover { + color: #e56565; + } + } + + .modal-dialog { + max-width: 95%; + margin-left: auto; + margin-right: auto; + } + + .modal-push-down { + margin-top: 5%; + } + + .modal-next-bar { + position: absolute; + top: 0px; + right: 0; + height: 100%; + } + + .modal-header { + border-radius: 0; + background: $color--primary; + color: #fff; + padding: 15px 15px 11px; + border: 1px solid #ddd; + min-height: 56px; + @include clearfix; + + .modal-title { + float: left; + font-size: 17px; + line-height: 27px; + color: #f4f4f4; + + .name { + font-weight: 600; + color: #fff; + } + } + + .modal-action { + padding: 0; + margin: 0; + } + + button.close { + color: #fff; + @include opacity(1); + z-index: 5; + width: 30px; + height: 30px; + line-height: 30px; + @include single-transition(all, .25s, ease-in); + position: absolute; + right: 10px; + + &:hover { + background: rgba(0, 0, 0, .1); + } + + span { + font-family: 'Open Sans', sans-serif; + line-height: 10px; + } + } + + .btn { + &.btn-primary { + float: right; + margin: -4px 25px 0 0; + position: relative; + + i { + margin-right: 5px; + } + } + } + } + + .no-channel-message { + text-align: center; + padding: 2em 1em; + + .primary-message { + font-size: 1.25em; + } + + .secondary-message { + @include opacity(.8); + margin: 1em 0 0; + } + } + + .modal-content { + border-radius: 0; + box-shadow: none; + } + + .modal-chevron-icon { + top: 50%; + font-size: 120%; + } + + .modal-prev-bar { + position: absolute; + top: 0px; + left: 0; + height: 100%; + } + + &#more_channels { + .modal-body { + padding: 0; + } + } + + .modal-image { + position: relative; + width: 100%; + height: 100%; + margin: 0 auto; + max-width: 100%; + + .modal-body { + @include clearfix; + height: 100%; + display: table; + table-layout: fixed; + width: 100%; + max-height: 100%; + } + + .image-wrapper { + position: relative; + max-width: 90%; + @include border-radius(3px); + display: table-cell; + vertical-align: middle; + text-align: center; + width: 100%; + + &:hover { + @include border-radius(3px 3px 0 0); + } + + &.default { + width: 100%; + height: 80%; + } + + audio, + canvas, + progress, + video { + max-width: 100%; + height: auto; + display: block; + } + + .modal-close { + background: url('../images/close.png') no-repeat; + @include background-size(100% 100%); + width: 37px; + height: 37px; + position: absolute; + right: -13px; + top: -13px; + @include opacity(0); + -webkit-transition: opacity .6s; + -moz-transition: opacity .6s; + -o-transition: opacity .6s; + transition: opacity .6s; + cursor: pointer; + z-index: 9999; + + &.modal-close--show { + @include opacity(1); + } + } + + > div { + min-height: 100px; + min-width: 320px; + background: #fff; + display: inline-block; + position: relative; + + &:hover .file-playback__controls.stop { + @include opacity(1); + } + } + + img { + max-width: 100%; + max-height: 100%; + } + + .spinner.file__loading { + z-index: 2; + position: absolute; + left: 50%; + margin-left: -16px; + top: 50%; + margin-top: -16px; + } + } + + .modal-content { + box-shadow: none; + background: rgba(0, 0, 0, 0); + width: 100%; + height: 100%; + padding: 0; + border: none; + } + + .image-body { + vertical-align: middle; + display: table-cell; + text-align: center; + height: 100%; + padding: 0; + position: relative; + overflow: visible; + } + + .image-control { + width: 50px; + height: 45px; + float: left; + background: url(../images/prev.png) left no-repeat; + top: 50%; + position: relative; + margin-top: -23px; + &.image-next { + float: right; + background: url(../images/next.png) left no-repeat; + } + } + + .loader-image { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + + .loader-percent { + position: absolute; + top: 55px; + bottom: 0; + left: 0; + right: 0; + margin: auto; + color: grey; + height: 20px; + } + + .modal-button-bar { + position: absolute; + bottom: -40px; + left: 0px; + right: 0px; + background-color: #222; + @include border-radius(0 0 3px 3px); + @include opacity(0); + -webkit-transition: opacity .6s; + -moz-transition: opacity .6s; + -o-transition: opacity .6s; + transition: opacity .6s; + line-height: 40px; + padding: 0 10px; + + &.footer--show { + @include opacity(1); + } + + .image-links { + a, + span { + float: right; + } + } + + .text { + vertical-align: middle; + bottom: 0; + color: white; + margin-left: 5px; + } + + .public-link { + margin-right: 5px; + } + } + } +} + + +// Invite New Member +.invite { + margin-right: 40px; +} + +.row--invite { + margin-right: 40px; + @include clearfix; + + .col-sm-6 { + padding: 0 0 0 15px; + &:first-child { + padding-left: 0; + } + } +} + +.more-modal { + .user-list { + overflow-y: auto; + overflow-x: hidden; + margin-top: 10px; + position: relative; + } + + .modal-body { + padding: 10px 0 20px; + overflow-x: hidden; + } + + .filter-row { + margin: 10px 0; + @include clearfix; + } + + .member-count { + margin-top: 5px; + float: right; + @include opacity(.8); + } + + .more-purpose { + @include opacity(.7); + } +} + +.modal-body.edit-modal-body { + overflow: visible; + + .suggestion-list__content { + max-height: 150px; + } +} + +.more-modal__list { + overflow: auto; + display: flex; + flex-direction: column; + + .popover & { + font-size: 0.95em; + + .more-modal__row { + padding: 5px 10px; + } + + .more-modal__name { + font-weight: normal; + } + } + + .more-modal__image { + flex-grow: 0; + flex-shrink: 0; + @include border-radius(60px); + margin-right: 8px; + } + + .more-modal__details { + flex-grow: 1; + flex-shrink: 1; + overflow: hidden; + text-overflow: ellipsis; + } + + .more-modal__actions { + flex-grow: 0; + flex-shrink: 0; + padding-left: 20px; + } + + .more-modal__name { + font-weight: 600; + font-size: .95em; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .more-modal__description { + @include opacity(.7); + display: block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .more-modal__row { + display: flex; + padding: 8px 15px; + border-bottom: 1px solid; + } + + p { + font-size: .9em; + overflow: hidden; + text-overflow: ellipsis; + @include opacity(.8); + margin: 5px 0; + } +} + +.filtered-user-list { + display: flex; + flex-direction: column; + + .filter-row { + flex-grow: 0; + flex-shrink: 0; + } + + .user-list { + flex-grow: 1; + flex-shrink: 1; + } +} |