diff options
Diffstat (limited to 'web/sass-files/sass/partials/_responsive.scss')
-rw-r--r-- | web/sass-files/sass/partials/_responsive.scss | 419 |
1 files changed, 157 insertions, 262 deletions
diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss index 339412b45..66aaede8d 100644 --- a/web/sass-files/sass/partials/_responsive.scss +++ b/web/sass-files/sass/partials/_responsive.scss @@ -1,3 +1,5 @@ +@charset "UTF-8"; + @media screen and (max-width: 1800px) { .inner__wrap { &.move--left { @@ -8,95 +10,10 @@ } } } - .post { - &.same--root { - margin-left: 60px; - padding-left: 10px; - border-left: 4px solid #EEE; - div.post-profile-img__container { - .post-profile-img { - display: none; - } - } - .post__content { - width: 825px; - } - .post-body { - width: 736px; - border: none; - margin: 3px 0 0; - } - } - &.post--comment { - &.other--root { - .post-comment { - margin-left: 0; - } - } - &.same--root { - margin-top: 10px; - margin-bottom: 10px; - } - } - .post-body { - float: none; - width: 750px; - margin: 3px 0 0; - } - .post__content { - width: 920px; - } - .post-header { - &.post-header-post { - z-index: inherit; - width: auto; - float: none; - text-align: left; - padding-right: 0; - } - &.post-info { - display: none; - float: none; - } - .post-header-col { - &.post-header__reply { - float: right; - text-align: right; - .reply-link { - margin-right: 0; - } - .dropdown { - margin-left: 10px; - } - } - } - .post-info--hidden { - display: inline; - .post-info { - display: inline; - .tooltip { - margin-top: -25px; - margin-left: 40px; - } - .post-profile-time { - margin: 0; - } - } - } - } - } } } } @media screen and (max-width: 1440px) { - .post-create__container { - .post-create-body { - max-width: 810px; - } - } - .channel-intro { - max-width: 810px; - } .date-separator, .new-separator { &.hovered--comment { &:before, &:after { @@ -104,78 +21,6 @@ } } } - .post { - &.same--root { - margin-left: 60px; - padding-left: 10px; - border-left: 4px solid #EEE; - div.post-profile-img__container { - .post-profile-img { - display: none; - } - } - .post__content { - width: 825px; - } - .post-body { - width: 736px; - border: none; - margin: 3px 0 0; - } - } - &.post--comment { - &.other--root { - .post-comment { - margin-left: 0; - } - } - &.same--root { - margin-top: 5px; - margin-bottom: 5px; - } - } - .post__content { - width: 880px; - } - .post-header { - &.post-header-post { - z-index: inherit; - width: auto; - float: none; - text-align: left; - padding-right: 0; - } - &.post-info { - display: none; - float: none; - } - .post-header-col { - &.post-header__reply { - float: right; - margin: 0; - } - } - .post-info--hidden { - display: inline; - .post-info { - display: inline; - .tooltip { - margin-top: -25px; - margin-left: 40px; - } - .post-profile-time { - width: auto; - margin: 0; - } - } - } - } - .post-body { - margin: 3px 0 0; - float: none; - width: 750px; - } - } } @media screen and (max-width: 1140px) { @@ -204,83 +49,129 @@ } } } - .post { - .post__content { - width: 100%; +} + +@media screen and (max-width: 960px) { + + .sidebar--right { + width: 400px; + z-index: 5; + right: 0; + @include translateX(100%); + + &.move--left { + @include translateX(0); } - .post-header { - .post-header-col { - &.post-header__reply { - .reply-link { - margin-right: 0; - } - .dropdown { - margin-left: 10px; - } - } - } + + } + + .inner__wrap { + + &.move--left { + margin-right: 0; } + } -} -@media screen and (max-width: 960px) { .post { - .post-header .post-header-col.post-header__reply { - .comment-icon__container__hide { - display: none; - } - .dropdown { - @include opacity(1); + + .post-list__content & { + + &:hover { + background: transparent; + + .comment-icon__container { + visibility: hidden; + + &.icon--show { + visibility: visible; + } + + } + } - .comment-icon__container__show { - @include opacity(1); + + } + + .dropdown { + visibility: visible; + } + + .post__dropdown { + line-height: 9px; + text-decoration: none; + width: 20px; + display: inline-block; + text-align: center; + height: 20px; + + &:after { + font-size: 20px; + content: '...'; + top: -3px; } + } + } + +} + +@media screen and (max-width: 768px) { + .signup-team__container { font-size: 1em; } + .post { - .post-header { - .post-header-col { - &.post-header__reply { - text-align: right; - display: inline-block; + + .post__header { + + .col__name { + pointer-events: none; + } + + } + + &.same--root { + + &.same--user { + + .post__time { + display: none; } + + } + + } + + .post__img { + width: 40px; + + img { + width: 32px; + height: 32px; } } - } -} -@media (min-width: 992px){ - .modal-lg { - width: 700px; } -} -@media screen and (min-width: 768px) { - .second-bar { - display: none; + .post-image__column { + width: 200px; + height: 95px; } -} -@media screen and (max-height: 640px) { - .signup-team__container { - padding: 30px 0; - margin-bottom: 30px; - font-size: 0.9em; - .signup-team__name { - font-size: 2em; + .textarea-wrapper { + .textbox-preview-link, .textbox-help-link { + display: none; } } -} -@media screen and (max-width: 768px) { .form-control { &.min-height { min-height: 100px; } } - .gif-div { + .img-div { max-width: 100%; } .tip-div { @@ -352,31 +243,6 @@ } } } - .post { - &.same--root { - margin-left: 25px; - } - &:hover { - background: none; - .post-header .post-header-col.post-header__reply { - .dropdown-toggle:after { - content: '...'; - } - } - } - &.post--comment { - &.other--root { - &:hover { - background: none; - } - } - } - .post-header .post-header-col.post-header__reply { - .dropdown-toggle:after { - content: '...'; - } - } - } .signup-team__container { padding: 30px 0; margin-bottom: 30px; @@ -441,6 +307,9 @@ } } } + .section-min:hover { + background: none; + } .no-padding--left { padding-left: 15px; } @@ -450,7 +319,8 @@ } .modal-header { display: block; - position: fixed; + position: absolute; + top: 0; width: 100%; z-index: 5; } @@ -503,12 +373,23 @@ .post-create__container { .post-right__container & { padding: 0 1em; + .msg-typing { + display: none; + } } form { - padding: 0; + padding: 0.5em 0; + } + .post-create-footer { + padding: 0 1em; + .msg-typing { + display: none; + } + .control-label { + top: 0; + } } .post-create-body { - padding-bottom: 10px; display: table; width: 100%; .post-body__cell { @@ -532,11 +413,9 @@ display: table-cell; } } - .post-create-footer .msg-typing { - display: none; - } } .preview-container { + margin: 5px 0 0; .preview-div { margin-top: 0; } @@ -564,6 +443,7 @@ #navbar { .navbar-default { .navbar-header { + float: none; margin: 0 -15px; .dropdown__icon { background: url("../images/dropdown-icon.png"); @@ -609,7 +489,7 @@ } .search-bar__container { padding: 0; - height: 45px; + @include flex(0 0 44px); background: $primary-color; color: #fff; &.focused { @@ -643,7 +523,8 @@ padding: 0 10px 0 31px; background: rgba(black, 0.2); @include border-radius(3px); - color: inherit; + color: #444; + background: #fff; } } } @@ -668,15 +549,15 @@ &.move--right { @include translate3d(0, 0, 0); } + > div { + padding-bottom: 0; + } .nav-pills__unread-indicator-bottom { bottom: 10px; } .badge { top: 13px; } - > div { - padding-bottom: 65px; - } .team__header { display: none; @include clearfix; @@ -738,6 +619,12 @@ .sidebar--right__close { display: none; } + .sidebar-right__body { + height: calc(100% - 44px); + } + } + .search-items-container { + height: calc(100% - 44px); } .inner__wrap { &.move--right { @@ -774,8 +661,10 @@ .modal { .modal-image { .image-wrapper { - font-size: 12px; - min-width: 250px; + > div { + font-size: 12px; + min-width: 250px; + } .modal-close { @include opacity(1); } @@ -805,24 +694,6 @@ } } - .post { - .post-profile-img__container { - display: none; - } - &.post--comment { - &.other--root { - .post-comment { - margin-left: 11px; - } - } - } - > div { - &.post__content { - padding: 0; - } - } - } - .post-comments { padding: 9px 21px 10px 10px !important; } @@ -903,3 +774,27 @@ } } } + + +@media (min-width: 992px){ + .modal-lg { + width: 700px; + } +} + +@media screen and (min-width: 768px) { + .second-bar { + display: none; + } +} + +@media screen and (max-height: 640px) { + .signup-team__container { + padding: 30px 0; + margin-bottom: 30px; + font-size: 0.9em; + .signup-team__name { + font-size: 2em; + } + } +}
\ No newline at end of file |