From e214aae719c10953c4c3a7949c9bd02d6983b045 Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <asaad@spinpunch.com>
Date: Mon, 14 Mar 2016 22:35:57 +0500
Subject: PLT-963 - Improving scss structure

---
 web/sass-files/sass/responsive/_desktop.scss |  65 ++
 web/sass-files/sass/responsive/_mobile.scss  | 901 +++++++++++++++++++++++++++
 web/sass-files/sass/responsive/_module.scss  |   4 +
 web/sass-files/sass/responsive/_tablet.scss  |  35 ++
 4 files changed, 1005 insertions(+)
 create mode 100644 web/sass-files/sass/responsive/_desktop.scss
 create mode 100644 web/sass-files/sass/responsive/_mobile.scss
 create mode 100644 web/sass-files/sass/responsive/_module.scss
 create mode 100644 web/sass-files/sass/responsive/_tablet.scss

(limited to 'web/sass-files/sass/responsive')

diff --git a/web/sass-files/sass/responsive/_desktop.scss b/web/sass-files/sass/responsive/_desktop.scss
new file mode 100644
index 000000000..dcabb807f
--- /dev/null
+++ b/web/sass-files/sass/responsive/_desktop.scss
@@ -0,0 +1,65 @@
+@charset 'UTF-8';
+
+@media screen and (max-width: 1800px) {
+    .inner-wrap {
+        &.move--left {
+            .date-separator,
+            .new-separator {
+                &.hovered--comment {
+                    &:before,
+                    &:after {
+                        background: none;
+                    }
+                }
+            }
+        }
+    }
+}
+
+@media screen and (max-width: 1440px) {
+    .date-separator,
+    .new-separator {
+        &.hovered--comment {
+            &:before,
+            &:after {
+                background: none !important;
+            }
+        }
+    }
+}
+
+@media screen and (max-width: 1140px) {
+    .tip-overlay {
+        &.tip-overlay--chat {
+            margin: -10px 0 0 -10px;
+            .arrow {
+                right: 15px;
+                left: auto;
+            }
+        }
+    }
+    .inner-wrap {
+        &.move--left {
+            .file-overlay {
+                font-size: em(18px);
+
+                .overlay__circle {
+                    width: 300px;
+                    height: 300px;
+                    margin: -150px 0 0 -150px;
+                }
+
+                .overlay__files {
+                    margin: 60px auto 15px;
+                    width: 150px;
+                }
+            }
+        }
+    }
+}
+
+@media (min-width: 992px) {
+    .modal-lg {
+        width: 700px;
+    }
+}
\ No newline at end of file
diff --git a/web/sass-files/sass/responsive/_mobile.scss b/web/sass-files/sass/responsive/_mobile.scss
new file mode 100644
index 000000000..a452cb420
--- /dev/null
+++ b/web/sass-files/sass/responsive/_mobile.scss
@@ -0,0 +1,901 @@
+@charset 'UTF-8';
+
+@media screen and (max-width: 768px) {
+    .signup-team__container {
+        font-size: 1em;
+    }
+
+    .date-separator.hovered--before:after,
+    .date-separator.hovered--after:before,
+    .new-separator.hovered--after:before,
+    .new-separator.hovered--before:after {
+        background: none !important;
+    }
+
+    .post {
+        .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;
+            }
+        }
+
+        .comment-icon__container {
+            visibility: visible;
+            display: none;
+
+            &.icon--show {
+                display: inline-block;
+            }
+        }
+
+        .post-list__content & {
+            &:hover {
+                background: transparent;
+            }
+
+            .comment-icon__container {
+                visibility: visible;
+            }
+        }
+
+        .dropdown,
+        .post__reply {
+            visibility: visible;
+        }
+
+        .post__body {
+            width: calc(100% - 75px);
+        }
+
+        .post__reply {
+            margin-right: 20px;
+            float: right;
+
+            svg {
+                top: 1px;
+            }
+        }
+
+        &.other--root .post__reply {
+            &.post__reply--hide {
+                visibility: hidden;
+            }
+        }
+
+        .post__header {
+            .col__reply {
+                width: 65px;
+            }
+
+            .col__name {
+                pointer-events: none;
+
+                .user-popover {
+                    max-width: 130px;
+                }
+            }
+        }
+
+        &.same--root {
+            &.same--user {
+                .post__time {
+                    display: none;
+                }
+            }
+        }
+
+        .post__img {
+            width: 40px;
+
+            img {
+                width: 32px;
+                height: 32px;
+            }
+        }
+    }
+
+    .post-image__column {
+        width: 200px;
+        height: 95px;
+    }
+
+    .textarea-wrapper {
+        .textbox-preview-link,
+        .textbox-help-link {
+            display: none;
+        }
+    }
+    .form-control {
+        &.min-height {
+            min-height: 100px;
+        }
+    }
+
+    .img-div {
+        max-width: 100%;
+    }
+
+    .tip-div {
+        left: 15px;
+        right: auto;
+    }
+
+    .tip-overlay {
+        &.tip-overlay--chat {
+            margin-left: 10px;
+            .arrow {
+                left: 32px;
+            }
+        }
+    }
+
+    .file-details__container {
+        display: block;
+
+        .file-details__preview {
+            display: block;
+            width: 100%;
+            height: 150px;
+            border-right: none;
+            border-bottom: 1px solid #ddd;
+            img {
+                width: 64px;
+                height: 64px;
+            }
+        }
+
+        .file-details {
+            width: 100%;
+            height: auto;
+        }
+    }
+
+    .search-help-popover.visible {
+        visibility: hidden;
+    }
+
+    .modal-direct-channels {
+        .member-count {
+            float: none;
+            margin-top: 10px;
+            display: block;
+        }
+    }
+
+    .file-overlay {
+        font-size: em(18px);
+
+        &.center-file-overlay {
+            .overlay__indent {
+                margin-left: 0;
+            }
+        }
+
+        .overlay__circle {
+            width: 300px;
+            height: 300px;
+            margin: -150px 0 0 -150px;
+        }
+
+        .overlay__files {
+            margin: 60px auto 15px;
+            width: 150px;
+        }
+    }
+
+    .date-separator,
+    .new-separator {
+        &.hovered--after {
+            &:before {
+                background: none;
+            }
+        }
+
+        &.hovered--before {
+            &:after {
+                background: none;
+            }
+        }
+    }
+
+    .post-list__timestamp {
+        display: block;
+    }
+
+    .signup-team__container {
+        padding: 30px 0;
+        margin-bottom: 30px;
+        font-size: .9em;
+
+        .signup-team__name {
+            font-size: 2em;
+        }
+
+        .btn.btn-full {
+            padding-left: 10px;
+        }
+
+        .btn {
+            .icon,
+            .fa {
+                margin-right: 6px;
+            }
+        }
+    }
+
+    .row--invite {
+        .col-sm-6 {
+            padding: 0;
+        }
+    }
+
+    .modal {
+        .info__label {
+            text-align: left;
+            padding-bottom: 5px;
+        }
+
+        .modal-header {
+            .modal-action {
+                margin-top: 10px;
+            }
+
+            button.close {
+                font-weight: normal;
+                font-size: 27px;
+            }
+
+            .modal-title {
+                float: none;
+                max-width: 90%;
+            }
+
+            .btn {
+                &.btn-primary {
+                    display: block;
+                    margin: 10px 0 6px;
+                    width: 100%;
+                    float: none;
+                }
+            }
+        }
+
+        .settings-modal {
+            &.display--content {
+                .modal-header {
+                    display: none;
+                }
+
+                .settings-table {
+                    display: block;
+
+                    .settings-content {
+                        &.minimize-settings {
+                            display: block;
+                        }
+
+                        .section-min:hover {
+                            background: none;
+                        }
+
+                        .no-padding--left {
+                            padding-left: 15px;
+                        }
+                    }
+
+                    .settings-links {
+                        display: none;
+                    }
+
+                    .modal-header {
+                        display: block;
+                        position: absolute;
+                        top: 0;
+                        width: 100%;
+                        z-index: 5;
+
+                        .modal-title {
+                            width: 100%;
+                            text-align: center;
+                        }
+                    }
+
+                    .user-settings {
+                        .tab-header {
+                            display: none;
+                        }
+
+                        .divider-dark.first {
+                            display: none;
+                        }
+                    }
+                }
+            }
+
+            .settings-table {
+                padding: 0;
+                .nav {
+                    position: relative;
+                    top: auto;
+                    width: 100%;
+
+                    &.position--top {
+                        top: auto;
+                    }
+                }
+
+                .settings-content {
+                    .section-edit {
+                        position: absolute;
+                        top: 14px;
+                        right: 0;
+                        padding-right: 0;
+                        .fa {
+                            display: inline-block;
+                        }
+                    }
+
+                    &.minimize-settings {
+                        padding: 0;
+                        display: none;
+                        .user-settings {
+                            padding: 70px 20px 30px;
+                        }
+                    }
+
+                    .section-min:hover {
+                        background: none !important;
+                    }
+                }
+
+                .nav {
+                    > li {
+                        > a {
+                            border-top: 1px solid #ddd;
+                            font-size: 1.1em;
+                            line-height: 2.7;
+                            color: #555;
+
+                            .glyphicon {
+                                margin-left: 7px;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .post-create__container {
+        .post-right__container & {
+            padding: 0 1em;
+
+            .msg-typing {
+                display: none;
+            }
+        }
+
+        form {
+            padding: .5em 0;
+        }
+
+        .post-create-footer {
+            padding: 0 1em;
+
+            .msg-typing {
+                display: none;
+            }
+
+            .control-label {
+                top: 0;
+            }
+        }
+
+        .post-create-body {
+            display: table;
+            width: 100%;
+
+            .post-body__cell {
+                display: table-cell;
+                padding-left: 45px;
+                .sidebar--right & {
+                    padding-left: 0;
+                }
+            }
+
+            .app__content & {
+                .btn-file {
+                    width: 45px;
+                    padding: 0;
+                    line-height: 36px;
+                    bottom: -2px;
+                    left: 0;
+                    top: auto;
+                }
+            }
+
+            .send-button {
+                display: table-cell;
+            }
+        }
+    }
+
+    .file-preview__container {
+        margin: 5px 0 0;
+    }
+
+    .file-preview {
+        margin-top: 0;
+    }
+
+    .file-preview__remove {
+        width: 28px;
+        height: 28px;
+        left: auto;
+        right: 0;
+        top: 0;
+        background: #444;
+        background: rgba(#000, .5);
+        text-align: center;
+
+        &:after {
+            display: none;
+        }
+
+        i {
+            line-height: 29px;
+            top: auto;
+            right: auto;
+            position: relative;
+            font-size: 16px;
+        }
+    }
+
+    #navbar {
+        .navbar-default {
+            .navbar-header {
+                float: none;
+                margin: 0 -15px;
+
+                .dropdown__icon {
+                    background: url('../images/dropdown-icon.png');
+                    width: 4px;
+                    height: 16px;
+                    @include background-size(100% 100%);
+                    display: inline-block;
+                }
+            }
+
+            .navbar-toggle {
+                display: block;
+            }
+
+            .navbar-brand {
+                white-space: nowrap;
+            }
+        }
+    }
+
+    body {
+        &.white {
+            .inner-wrap {
+                > .row.content {
+                    margin-bottom: -185px;
+                }
+            }
+        }
+    }
+
+    .footer,
+    .footer-pane,
+    .footer-push {
+        height: 187px;
+    }
+
+    .footer-pane {
+        .footer-link {
+            padding: 0;
+            width: 100%;
+            text-align: right;
+            line-height: 1.7;
+            &.copyright {
+                width: 100%;
+            }
+        }
+    }
+
+    .search__clear {
+        display: block;
+    }
+
+    .search-bar__container {
+        padding: 0;
+        @include flex(0 0 44px);
+        background: $color--primary;
+        color: #fff;
+
+        &.focused {
+            .sidebar__collapse {
+                @include translateX(-45px);
+            }
+
+            .search__form {
+                @include translateX(-45px);
+                padding-left: 55px;
+                padding-right: 24px;
+            }
+
+            .search__clear {
+                @include translateX(0px);
+            }
+        }
+        .search__form {
+            border: none;
+            @include translateX(0px);
+            padding: 7px 20px 0 49px;
+            height: 45px;
+            position: relative;
+            @include single-transition(all, .2s, linear);
+
+            .glyphicon-refresh-animate {
+                right: 33px;
+                top: 15px;
+                color: #fff;
+                color: rgba(255,255,255,.5);
+            }
+
+            .form-control {
+                border: none;
+                padding: 0 10px 0 31px;
+                background: rgba(black, .2);
+                @include border-radius(3px);
+                color: #444;
+                background: #fff;
+            }
+        }
+    }
+    .sidebar--menu {
+        @include single-transition(transform, .5s, ease);
+        @include translate3d(290px, 0, 0);
+        width: 290px;
+        border: none;
+        display: block;
+
+        &.move--left {
+            @include translate3d(0, 0, 0);
+        }
+    }
+
+    .sidebar--left {
+        @include single-transition(transform, .5s, ease);
+        @include translate3d(-290px, 0, 0);
+        width: 290px;
+        border: none;
+        &.sidebar--padded {
+            padding-top: 0;
+        }
+
+        &.move--right {
+            @include translate3d(0, 0, 0);
+        }
+
+        > div {
+            padding-bottom: 70px;
+        }
+
+        .nav-pills__unread-indicator-bottom {
+            bottom: 10px;
+        }
+
+        .badge {
+            top: 13px;
+        }
+
+        .team__header {
+            @include clearfix;
+            pointer-events: none;
+
+            .user__name {
+                display: none;
+            }
+
+            .team__name {
+                margin: 10px 0;
+            }
+
+            .navbar-right {
+                display: none;
+            }
+        }
+
+        .search__form {
+            display: block;
+        }
+
+        .nav {
+            li {
+                &.dropdown.open {
+                    padding-bottom: 25px;
+
+                    ul {
+                        clear: both;
+                        background: #fff;
+                        border-radius: 3px;
+                        top: 5px;
+                        position: relative;
+
+                        li {
+                            a {
+                                line-height: 30px;
+                            }
+                        }
+                    }
+                }
+
+                h4 {
+                    margin: 16px 0 8px;
+                }
+
+                > a {
+                    font-size: 15px;
+                    margin: 0;
+                    line-height: 2.5;
+
+                    &:hover,
+                    &:focus {
+                        background: transparent;
+                    }
+
+                    &.has-close {
+                        .btn-close {
+                            width: 40px;
+                            text-align: center;
+                            right: 0;
+                            display: block;
+                            @include opacity(.5);
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .sidebar--right {
+        width: 100%;
+        right: 0;
+        @include translate3d(100%, 0, 0);
+        z-index: 5;
+
+        &.move--left {
+            @include translate3d(0, 0, 0);
+        }
+
+        .sidebar__collapse,
+        .sidebar__search-icon {
+            display: block;
+        }
+
+        .sidebar--right__close {
+            display: none;
+        }
+
+        .sidebar-right__body {
+            height: calc(100% - 44px);
+        }
+    }
+
+    .search-items-container {
+        height: calc(100% - 44px);
+    }
+
+    .inner-wrap {
+        @include single-transition(all, .5s, ease);
+
+        &.move--right {
+            @include translate3d(290px, 0, 0);
+
+            &:before {
+                z-index: 9999;
+                content: '';
+                width: 100%;
+                height: 100%;
+                left: -15px;
+                top: 0;
+                position: absolute;
+                background: rgba(0, 0, 0, .4);
+            }
+        }
+
+        &.move--left-small {
+            @include translate3d(-290px, 0, 0);
+            &:before {
+                z-index: 9999;
+                content: '';
+                width: 100%;
+                height: 100%;
+                right: -15px;
+                top: 0;
+                position: absolute;
+                background: rgba(0, 0, 0, .4);
+            }
+        }
+
+        &.move--left {
+            margin: 0;
+            @include translate3d(-100%, 0, 0);
+        }
+    }
+
+    .modal {
+        .modal-image {
+            .image-wrapper {
+                > div {
+                    font-size: 12px;
+                    min-width: 250px;
+                }
+
+                .modal-close {
+                    @include opacity(1);
+                }
+            }
+
+            .modal-button-bar {
+                @include opacity(1);
+            }
+        }
+    }
+
+    .app__content {
+        padding-top: 45px;
+        margin: 0;
+        .channel__wrap & {
+            padding-top: 45px;
+        }
+        #channel-header {
+            display: none;
+        }
+    }
+
+    .channel__wrap {
+        .row {
+            &.header {
+                display: block;
+            }
+        }
+    }
+
+    .post-comments {
+        padding: 9px 21px 10px 10px !important;
+    }
+
+    .post-image__column .post-image .file-playback__controls.stop,
+    .image-wrapper > a .file-playback__controls.stop {
+        @include opacity(1);
+    }
+}
+
+@media screen and (max-width: 640px) {
+    .access-history__table {
+        > div {
+            display: block;
+        }
+
+        .access__report {
+            margin: 0 0 15px 15px;
+        }
+
+        .access__date {
+            div {
+                margin-bottom: 15px;
+            }
+        }
+    }
+    .activity-log__table {
+        > div {
+            display: block;
+        }
+
+        .activity-log__report {
+            width: 100%;
+        }
+
+        .activity-log__action {
+            text-align: left;
+            margin-top: 10px;
+        }
+    }
+}
+
+@media screen and (max-width: 480px) {
+    .modal {
+        .settings-modal {
+            .settings-table {
+                .security-links {
+                    margin-bottom: 10px;
+                    display: block;
+
+                    &:last-child {
+                        margin-bottom: 0;
+                    }
+                }
+            }
+        }
+    }
+
+    .tip-overlay.tip-overlay--sidebar {
+        min-height: 350px;
+    }
+
+    .modal {
+        .modal-body {
+            max-height: 70%;
+        }
+
+        .settings-modal {
+            &.display--content {
+                .modal-body {
+                    max-height: 90%;
+                }
+            }
+        }
+    }
+
+    .member-div {
+        padding: 8px 0;
+
+        .member-drop,
+        .member-role {
+            position: relative;
+            margin: 0px 0 0 44px;
+            padding: 5px 0;
+            top: 0;
+            right: 0;
+        }
+
+        .open > .dropdown-menu {
+            left: 0;
+            right: auto;
+        }
+    }
+
+    .sidebar--left {
+        @include translate3d(-260px, 0, 0);
+        width: 260px;
+    }
+
+    .inner-wrap {
+        &.move--right {
+            @include translate3d(260px, 0, 0);
+        }
+    }
+
+    .modal {
+        .modal-image {
+            .modal-button-bar {
+                line-height: 30px;
+                padding: 5px;
+            }
+        }
+    }
+}
+
+@media screen and (max-height: 640px) {
+    .signup-team__container {
+        padding: 30px 0;
+        margin-bottom: 30px;
+        font-size: .9em;
+
+        .signup-team__name {
+            font-size: 2em;
+        }
+    }
+}
diff --git a/web/sass-files/sass/responsive/_module.scss b/web/sass-files/sass/responsive/_module.scss
new file mode 100644
index 000000000..a799c145e
--- /dev/null
+++ b/web/sass-files/sass/responsive/_module.scss
@@ -0,0 +1,4 @@
+@charset 'UTF-8';
+@import 'desktop';
+@import 'tablet';
+@import 'mobile';
diff --git a/web/sass-files/sass/responsive/_tablet.scss b/web/sass-files/sass/responsive/_tablet.scss
new file mode 100644
index 000000000..14641cfa5
--- /dev/null
+++ b/web/sass-files/sass/responsive/_tablet.scss
@@ -0,0 +1,35 @@
+@charset 'UTF-8';
+
+@media screen and (max-width: 960px) {
+    .sidebar--right {
+        z-index: 5;
+        @include translateX(100%);
+        @include single-transition(all, .5s, ease);
+
+        &.move--left {
+            @include translateX(0);
+
+            .search-bar__container {
+                padding-right: 8px;
+            }
+        }
+    }
+
+    .inner-wrap {
+        &.move--left {
+            margin-right: 0;
+
+            .channel-header__links {
+                position: relative;
+                right: auto;
+                top: auto;
+            }
+        }
+    }
+}
+
+@media screen and (min-width: 768px) {
+    .second-bar {
+        display: none;
+    }
+}
\ No newline at end of file
-- 
cgit v1.2.3-1-g7c22