mirror of
https://github.com/mattermost/mattermost.git
synced 2025-02-25 18:55:24 -06:00
1eed253fc2
* Channel switcher UI improvements * Reverting mattermost theme * Fixing spacing above the button * Updating switcher button * PLT-6691 - Fixing tablet header
694 lines
15 KiB
SCSS
694 lines
15 KiB
SCSS
@charset 'UTF-8';
|
|
|
|
.app__body {
|
|
|
|
&.browser--ie {
|
|
.modal {
|
|
.modal-dialog {
|
|
@include translateY(0);
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal-body {
|
|
max-height: calc(90vh - 62px);
|
|
overflow: auto;
|
|
padding: 20px 15px;
|
|
}
|
|
|
|
.edit-modal-body {
|
|
overflow: visible;
|
|
|
|
.custom-textarea {
|
|
max-height: 60vh;
|
|
min-height: 8em;
|
|
}
|
|
|
|
.suggestion-list__content {
|
|
max-height: 150px;
|
|
}
|
|
|
|
.edit-post-footer {
|
|
display: inline-block;
|
|
font-size: 13px;
|
|
position: relative;
|
|
|
|
.post-error {
|
|
@include opacity(.55);
|
|
font-size: .85em;
|
|
font-weight: normal;
|
|
margin-bottom: 0;
|
|
position: relative;
|
|
top: 3px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.row--invite {
|
|
.col-sm-6 {
|
|
&:first-child {
|
|
padding-right: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal__hint {
|
|
@include opacity(.8);
|
|
display: block;
|
|
font-size: .9em;
|
|
margin: 0 0 10px;
|
|
}
|
|
|
|
.modal__error {
|
|
color: $red;
|
|
float: left;
|
|
font-size: .95em;
|
|
font-weight: normal;
|
|
margin-top: 6px;
|
|
}
|
|
|
|
.more-table {
|
|
margin: 0;
|
|
table-layout: fixed;
|
|
}
|
|
|
|
.modal {
|
|
color: alpha-color($black, .9);
|
|
width: 100%;
|
|
|
|
.channel-switch-modal {
|
|
.modal-header {
|
|
background: transparent;
|
|
border: none;
|
|
min-height: 0;
|
|
padding: 0;
|
|
|
|
.close {
|
|
top: 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal--overflow {
|
|
.modal-body {
|
|
overflow: visible;
|
|
}
|
|
}
|
|
|
|
&.modal-image {
|
|
.modal-backdrop {
|
|
&.in {
|
|
@include opacity(.7);
|
|
}
|
|
}
|
|
}
|
|
|
|
.alert {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.custom-textarea {
|
|
border-color: $light-gray;
|
|
color: inherit;
|
|
|
|
&:focus {
|
|
border-color: $light-gray;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
.btn {
|
|
font-size: 13px;
|
|
|
|
&.btn-default {
|
|
background: transparent;
|
|
border: none;
|
|
}
|
|
}
|
|
|
|
.info__label {
|
|
@include opacity(.5);
|
|
font-size: .9em;
|
|
font-weight: 600;
|
|
margin-bottom: 3px;
|
|
}
|
|
|
|
.info__value {
|
|
padding-left: 10px;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.team-member-list {
|
|
width: 100%;
|
|
}
|
|
|
|
.remove__member {
|
|
color: inherit;
|
|
float: right;
|
|
font-size: 20px;
|
|
line-height: 0;
|
|
padding: 6px;
|
|
|
|
&:hover {
|
|
color: $red;
|
|
}
|
|
}
|
|
|
|
.modal-dialog {
|
|
margin-bottom: 0;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
max-width: 95%;
|
|
|
|
&.modal-xl {
|
|
width: 800px;
|
|
}
|
|
}
|
|
|
|
.modal-push-down {
|
|
margin-top: 60px;
|
|
}
|
|
|
|
.modal-next-bar {
|
|
height: 100%;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
}
|
|
|
|
.modal-header {
|
|
@include border-radius(0);
|
|
@include clearfix;
|
|
background: $primary-color;
|
|
border: 1px solid $light-gray;
|
|
color: $white;
|
|
min-height: 56px;
|
|
padding: 14px 15px 11px;
|
|
|
|
.modal-title {
|
|
color: $bg--gray;
|
|
float: left;
|
|
font-size: 17px;
|
|
line-height: 27px;
|
|
max-width: calc(100% - 80px);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
|
|
.name {
|
|
color: $white;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
|
|
.modal-action {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.close {
|
|
@include opacity(1);
|
|
@include single-transition(all, .25s, ease-in);
|
|
color: $white;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
position: absolute;
|
|
right: 10px;
|
|
text-shadow: none;
|
|
width: 30px;
|
|
z-index: 5;
|
|
|
|
&:hover {
|
|
@include alpha-property(background, $black, .1);
|
|
}
|
|
|
|
.sr-only {
|
|
display: none;
|
|
}
|
|
|
|
span {
|
|
font-family: 'Open Sans', sans-serif;
|
|
line-height: 10px;
|
|
}
|
|
}
|
|
|
|
.btn {
|
|
&.btn-primary {
|
|
float: right;
|
|
margin: -4px 33px 0 0;
|
|
position: relative;
|
|
|
|
i {
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.no-channel-message {
|
|
padding: 2em 1em;
|
|
text-align: center;
|
|
|
|
.primary-message {
|
|
font-size: 1.25em;
|
|
}
|
|
|
|
.secondary-message {
|
|
@include opacity(.8);
|
|
margin: 1em 0 0;
|
|
}
|
|
}
|
|
|
|
.modal-content {
|
|
@include box-shadow(0 0 10px rgba($black, .5));
|
|
border-radius: $border-rad;
|
|
}
|
|
|
|
.modal-chevron-icon {
|
|
font-size: 120%;
|
|
top: 50%;
|
|
}
|
|
|
|
.modal-prev-bar {
|
|
height: 100%;
|
|
left: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
}
|
|
|
|
.modal-image {
|
|
height: 100%;
|
|
margin: 0 auto;
|
|
max-width: 100%;
|
|
position: relative;
|
|
width: 100%;
|
|
|
|
.modal-body {
|
|
@include clearfix;
|
|
display: table;
|
|
height: 100%;
|
|
max-height: 100%;
|
|
table-layout: fixed;
|
|
width: 100%;
|
|
}
|
|
|
|
.modal-image__content {
|
|
max-height: 85vh;
|
|
max-width: 90vw;
|
|
overflow-x: hidden;
|
|
overflow-y: visible;
|
|
}
|
|
|
|
.post-code__container {
|
|
overflow: auto;
|
|
}
|
|
|
|
.modal-image__wrapper {
|
|
@include border-radius(3px);
|
|
display: table-cell;
|
|
max-width: 90%;
|
|
position: relative;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
width: 100%;
|
|
|
|
&:hover {
|
|
@include border-radius(3px 3px 0 0);
|
|
}
|
|
|
|
&.default {
|
|
height: 80%;
|
|
width: 100%;
|
|
}
|
|
|
|
audio,
|
|
canvas,
|
|
progress,
|
|
video {
|
|
display: block;
|
|
height: auto;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.modal-close {
|
|
@include single-transition(opacity, .6s);
|
|
@include background-size(100% 100%);
|
|
@include opacity(0);
|
|
background-image: url('../images/close.png');
|
|
cursor: pointer;
|
|
height: 37px;
|
|
position: absolute;
|
|
right: -13px;
|
|
top: -13px;
|
|
transition: opacity .6s;
|
|
width: 37px;
|
|
z-index: 9999;
|
|
|
|
&.modal-close--show {
|
|
@include opacity(1);
|
|
}
|
|
}
|
|
|
|
> div {
|
|
display: inline-block;
|
|
min-height: 100px;
|
|
min-width: 320px;
|
|
position: relative;
|
|
}
|
|
|
|
code {
|
|
min-height: 130px;
|
|
min-width: 330px;
|
|
}
|
|
|
|
pre,
|
|
code {
|
|
display: inline-block;
|
|
}
|
|
|
|
.post-body--code {
|
|
max-height: calc(100vh - 80px);
|
|
max-width: calc(100vw - 80px);
|
|
overflow: auto;
|
|
}
|
|
|
|
img {
|
|
max-height: calc(100vh - 200px);
|
|
max-width: 100%;
|
|
}
|
|
|
|
.spinner {
|
|
.file__loading {
|
|
left: 50%;
|
|
margin-left: -16px;
|
|
margin-top: -16px;
|
|
position: absolute;
|
|
top: 50%;
|
|
z-index: 2;
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal-content {
|
|
background: alpha-color($black, 0);
|
|
border: none;
|
|
box-shadow: none;
|
|
height: 100%;
|
|
padding: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.modal-image__body {
|
|
display: table-cell;
|
|
height: 100%;
|
|
overflow: visible;
|
|
padding: 0;
|
|
position: relative;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.image-control {
|
|
background: url('../images/prev.png') left no-repeat;
|
|
float: left;
|
|
height: 45px;
|
|
margin-top: -23px;
|
|
position: relative;
|
|
top: 50%;
|
|
width: 50px;
|
|
|
|
&.image-next {
|
|
background: url('../images/next.png') left no-repeat;
|
|
float: right;
|
|
}
|
|
}
|
|
|
|
.loader-image {
|
|
bottom: 0;
|
|
left: 0;
|
|
margin: auto;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
}
|
|
|
|
.loader-percent {
|
|
bottom: 0;
|
|
color: alpha-color($white, 0.8);
|
|
height: 20px;
|
|
left: 0;
|
|
margin: auto;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 55px;
|
|
}
|
|
|
|
.modal-button-bar {
|
|
@include single-transition(opacity, .6s);
|
|
@include border-radius(0 0 3px 3px);
|
|
@include opacity(0);
|
|
background-color: $black;
|
|
bottom: -40px;
|
|
left: 0;
|
|
line-height: 40px;
|
|
max-width: 90vw;
|
|
padding: 0 10px;
|
|
position: absolute;
|
|
right: 0;
|
|
|
|
&.footer--show {
|
|
@include opacity(1);
|
|
}
|
|
|
|
.image-links {
|
|
a,
|
|
span {
|
|
float: right;
|
|
}
|
|
}
|
|
|
|
.text {
|
|
bottom: 0;
|
|
color: $white;
|
|
margin-left: 5px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.public-link {
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.more-channel__modal {
|
|
.modal-body {
|
|
overflow-x: hidden;
|
|
padding: 10px 0 15px;
|
|
}
|
|
|
|
.channel-count {
|
|
@include opacity(.8);
|
|
float: right;
|
|
margin-top: 5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.more-modal {
|
|
|
|
.user-list {
|
|
margin-top: 10px;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
position: relative;
|
|
}
|
|
|
|
.modal-body {
|
|
overflow-x: hidden;
|
|
padding: 10px 0 15px;
|
|
}
|
|
|
|
.filter-row {
|
|
margin: 5px 0 10px;
|
|
width: 300px;
|
|
|
|
&.filter-row--full {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.member-count {
|
|
@include opacity(.8);
|
|
float: right;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.member-show {
|
|
@include opacity(.8);
|
|
float: right;
|
|
margin-right: 3px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.member-select__container {
|
|
.member-count {
|
|
margin: 12px 0 0 3px;
|
|
}
|
|
|
|
select {
|
|
@include opacity(.8);
|
|
float: right;
|
|
margin: 1px 5px 0 2px;
|
|
width: auto;
|
|
}
|
|
}
|
|
|
|
.more-purpose {
|
|
@include opacity(.7);
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.more-modal__list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.browser--ie & {
|
|
flex: 20;
|
|
}
|
|
|
|
> div {
|
|
min-height: 100%;
|
|
overflow: auto;
|
|
}
|
|
|
|
.popover & {
|
|
font-size: .95em;
|
|
|
|
.more-modal__row {
|
|
padding: 5px 10px;
|
|
}
|
|
|
|
.more-modal__name {
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
|
|
.more-modal__image {
|
|
@include border-radius(60px);
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
margin-top: 2px;
|
|
max-width: none;
|
|
}
|
|
|
|
.more-modal__details {
|
|
flex-grow: 1;
|
|
flex-shrink: 1;
|
|
overflow: hidden;
|
|
padding-left: 10px;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.more-modal__actions {
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
margin: 5px 0;
|
|
padding-left: 20px;
|
|
}
|
|
|
|
.more-modal__name {
|
|
font-size: .95em;
|
|
font-weight: 600;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.more-modal__description {
|
|
@include opacity(.7);
|
|
display: block;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.more-modal__row {
|
|
border-bottom: 1px solid $light-gray;
|
|
display: flex;
|
|
padding: 10px 15px;
|
|
|
|
&.clickable {
|
|
cursor: pointer;
|
|
}
|
|
|
|
&:hover {
|
|
.more-modal__actions--round {
|
|
opacity: .5;
|
|
}
|
|
}
|
|
}
|
|
|
|
.more-modal__placeholder-row {
|
|
padding: 10px 15px;
|
|
}
|
|
|
|
.more-modal__actions--round {
|
|
height: 32px;
|
|
line-height: 32px;
|
|
opacity: 0;
|
|
text-align: center;
|
|
width: 32px;
|
|
}
|
|
|
|
p {
|
|
@include opacity(.8);
|
|
font-size: .9em;
|
|
margin: 5px 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
|
|
.member-select__container {
|
|
position: absolute;
|
|
right: 15px;
|
|
top: 15px;
|
|
}
|
|
|
|
.filtered-user-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: calc(90vh - 120px);
|
|
width: 100%;
|
|
|
|
> div {
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
.more-modal__list {
|
|
flex-grow: 500;
|
|
height: 1px;
|
|
}
|
|
|
|
.filter-button {
|
|
.btn {
|
|
height: 34px;
|
|
}
|
|
}
|
|
|
|
.filter-controls {
|
|
padding: 1em 1.5em 0;
|
|
|
|
.filter-control__next {
|
|
float: right;
|
|
}
|
|
}
|
|
|
|
.filter-button {
|
|
margin-left: 0;
|
|
padding-left: 0;
|
|
}
|
|
}
|