summaryrefslogtreecommitdiffstats
path: root/web/sass-files/sass/responsive/_mobile.scss
diff options
context:
space:
mode:
Diffstat (limited to 'web/sass-files/sass/responsive/_mobile.scss')
-rw-r--r--web/sass-files/sass/responsive/_mobile.scss901
1 files changed, 901 insertions, 0 deletions
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;
+ }
+ }
+}
generated by cgit v1.2.3-1-g7c22 (git 2.25.1) at 2024-06-09 23:11:05 +0000