summaryrefslogtreecommitdiffstats
path: root/webapp/sass/responsive/_mobile.scss
diff options
context:
space:
mode:
Diffstat (limited to 'webapp/sass/responsive/_mobile.scss')
-rw-r--r--webapp/sass/responsive/_mobile.scss1886
1 files changed, 0 insertions, 1886 deletions
diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss
deleted file mode 100644
index b47db42a3..000000000
--- a/webapp/sass/responsive/_mobile.scss
+++ /dev/null
@@ -1,1886 +0,0 @@
-@charset 'UTF-8';
-
-@media screen and (max-width: 768px) {
- .channel-header {
- .channel-header__icon {
- display: none;
- }
- }
-
- .member-role .member-menu,
- .member-drop .member-menu {
- right: 0;
- top: 30px;
- }
-
- .post-code {
- word-wrap: normal;
- }
-
- .table-responsive {
- border: none;
- }
-
- .multi-select__container {
- .btn {
- display: block;
- min-width: 50px;
- }
-
- .Select-value-label {
- max-width: 190px;
- text-overflow: ellipsis;
- }
- }
-
- .more-modal__list {
- .more-modal__actions--round {
- @include opacity(.5);
- }
- }
-
- .post-create__container {
- .post-create-footer {
- padding: 0 10px;
- }
-
- form {
- padding: 0;
- }
-
- .post-create-body {
- padding: 0;
-
- .send-button {
- display: block;
- }
-
- textarea {
- .app-content & {
- border-left: none;
- border-right: none;
- }
- }
- }
-
- .msg-typing {
- display: none;
- }
-
- .emoji-picker__container {
- display: none;
- }
- }
-
- .suggestion-list__content {
- max-height: 145px;
- }
-
- .webrtc__notification--rhs {
- left: auto;
- right: 0;
- top: 47px;
- width: 205px;
- }
-
- .filtered-user-list {
- .filter-button {
- .btn {
- width: 100%;
- }
- }
- }
-
- .settings-modal {
- .modal-body {
- overflow: auto;
- }
- }
-
- #header-popover {
- @include single-transition(all, .35s, ease);
- @include translate3d(0, 100%, 0);
- @include box-shadow(none);
- background: alpha-color($black, .9);
- border: none;
- height: calc(100% - 50px);
- max-width: 100%;
- position: fixed;
- top: 40px !important;
- width: 100%;
-
- &.in {
- @include translate3d(0, 0, 0);
- }
-
- a {
- color: #0091ff;
- }
-
- .arrow {
- display: none;
- }
-
- .popover-content {
- color: $white;
- font-size: 15px;
- padding: 15px 20px 100px;
-
- > div {
- &:first-child {
- -webkit-overflow-scrolling: touch;
- height: calc(100vh - 150px);
- overflow: auto;
- }
- }
- }
-
- .close {
- @include border-radius(50%);
- border: 1px solid $white;
- bottom: 25px;
- color: $white;
- display: block;
- font-family: 'Open Sans', sans-serif;
- font-size: 23px;
- font-weight: 200;
- height: 30px;
- left: 50%;
- line-height: 0;
- margin-left: -15px;
- opacity: 1;
- padding-top: 13px;
- position: fixed;
- text-align: center;
- text-shadow: none;
- width: 30px;
- }
- }
-
- .app__body {
- .edit-modal-body {
- .custom-textarea {
- max-height: 30vh;
- }
- }
- }
-
- .video-div {
- &.embed-responsive-item {
- height: 0;
- padding-bottom: 75%;
-
- iframe {
- height: 100%;
- left: 0;
- position: absolute;
- top: 0;
- width: 100%;
- }
- }
- }
-
- .tutorial-steps__container {
- .tutorial__content {
- .tutorial__steps {
- margin-top: 15%;
- margin-bottom: 15%;
- max-height: 70%;
- padding-bottom: 0;
- }
- }
- }
-
- .prompt {
- .prompt__heading {
- display: block;
-
- > div {
- &:first-child {
- display: block;
- margin: 0 0 1em;
- }
- }
- }
- }
-
- .scrollbar--view {
- margin-right: 0 !important;
- }
-
- .post-code__language {
- @include opacity(.6);
- @include transition(none);
- display: block;
- position: relative;
- }
-
- .post-code {
- &:hover {
- .post-code__language {
- @include opacity(.6);
- }
- }
- }
-
- .backstage-filters {
- display: block;
-
- .backstage-filter__search {
- margin: 10px 0;
- width: 100%;
- }
- }
-
- .compliance-panel,
- .audit-panel {
- .row {
- > .form-group {
- padding-left: 15px;
- }
- }
- }
-
- .user-popover {
- cursor: pointer;
- display: inline-block;
- }
-
- .signup-team__container {
- font-size: 1em;
- }
-
- .sidebar--left .team__header .user__picture,
- .sidebar--menu .team__header .user__picture {
- display: none;
- }
-
- .date-separator.hovered--before:after,
- .date-separator.hovered--after:before,
- .new-separator.hovered--after:before,
- .new-separator.hovered--before:after {
- background: none !important;
- }
-
- .channel-intro {
- margin: 0 0 35px;
- }
-
- .post {
- &:not(.post--compact) {
- .bot-indicator {
- left: 6px;
- position: absolute;
- top: 31px;
- }
- }
-
- .reacticon__container {
- display: none;
- }
-
- .post__dropdown {
- display: inline-block;
- height: 28px;
- line-height: 21px;
- text-align: center;
- text-decoration: none;
- width: 28px;
-
- &:after {
- content: '...';
- font-size: 20px;
- top: -3px;
- }
- }
-
- .post__remove {
- margin-right: 10px;
- visibility: visible;
- }
-
- &.post--compact {
- .post__img {
- padding-top: 0;
- }
-
- &.same--root {
- &.same--user {
- .post__header {
- height: auto;
- }
- }
- }
-
- .status-wrapper {
- &:after {
- bottom: 3px;
-
- .sidebar--right & {
- bottom: 0;
- }
- }
- }
-
- blockquote {
- margin-top: 0;
- }
- }
-
- &.same--root {
- &.same--user {
- .flag-icon__container {
- left: auto;
- position: relative;
- top: 1px;
- }
- }
- }
-
- .post__content {
- padding: 0 10px 0 0;
- }
-
- .post__header {
- margin-bottom: 0;
- padding-right: 70px;
-
- .col__reply {
- top: -3px;
- width: 65px;
- z-index: auto;
- }
-
- .col__name {
- .user-popover {
- max-width: 130px;
- }
- }
- }
-
- .comment-icon__container {
- display: none;
- visibility: visible;
-
- .sidebar--right & {
- display: inline-block;
- }
-
- &.icon--show {
- display: inline-block;
- }
- }
-
- .post-list__content & {
- &:hover {
- background: transparent;
- }
-
- .comment-icon__container {
- visibility: visible;
- }
- }
-
- .dropdown,
- .post__reply {
- visibility: visible;
- }
-
- .post__body {
- width: 100%;
- }
-
- .post__reply {
- float: right;
- margin-right: 20px;
-
- svg {
- top: 1px;
- }
- }
-
- &.post--comment {
- .post__body {
- margin-top: 5px;
- padding: 2px 0 0 7px;
- }
- }
-
- &.other--root {
- &.post--comment {
- .post__header {
- .col__reply {
- top: -3px;
- }
- }
- }
-
- .post__reply {
- &.post__reply--hide {
- visibility: hidden;
- }
- }
- }
-
- &.current--user {
- .post__link {
- margin: 0 0 8px;
- }
- }
-
- .star-icon__container {
- left: auto;
- position: relative;
- top: auto;
-
- &:not(.visible) {
- display: none;
- }
- }
-
- &.same--root {
- .star-icon__container {
- left: auto;
- position: relative;
- top: auto;
- }
-
- &.same--user {
- &.post--compact {
- .status-wrapper {
- &:after {
- bottom: -2px;
- }
- }
- }
-
- .post__img {
- img {
- display: block;
- }
- }
-
- .post__header {
- height: auto;
- margin-top: 5px;
-
- .col__name {
- display: inline-block;
- }
- }
- }
- }
-
- .post__img {
- width: 40px;
-
- img {
- height: 32px;
- width: 32px;
- }
- }
- }
-
- .post-image__column {
- height: 95px;
- width: 200px;
- }
-
- .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 {
- border-bottom: 1px solid #dddddd;
- border-right: none;
- display: block;
- height: 150px;
- width: 100%;
-
- img {
- height: 64px;
- width: 64px;
- }
- }
-
- .file-details {
- height: auto;
- width: 100%;
- }
- }
-
- .search-help-popover {
- left: 55px;
- max-width: calc(100% - 80px);
- }
-
- .modal-direct-channels,
- .more-channel__modal {
- .member-count {
- display: block;
- float: none;
- margin-top: 10px;
- }
- }
-
- .file-overlay {
- font-size: em(18px);
-
- &.center-file-overlay {
- .overlay__indent {
- margin-left: 0;
- }
- }
-
- .overlay__circle {
- height: 300px;
- margin: -150px 0 0 -150px;
- width: 300px;
- }
-
- .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 {
- font-size: .9em;
- margin-bottom: 30px;
- padding: 60px 10px 0;
-
- .signup-team__name {
- font-size: 2em;
- }
-
- .btn.btn-full {
- padding-left: 10px;
- }
-
- .btn {
- .icon,
- .fa {
- margin-right: 6px;
- }
- }
- }
-
- .app__body {
- .row--invite {
- .col-sm-6 {
- &:first-child {
- padding-right: 15px;
- }
- }
- }
-
- .modal {
- .modal--scroll {
- .modal-body {
- max-height: calc(100vh - 62px);
- overflow: auto;
- }
- }
-
- .nav-pills {
- > li {
- &.active {
- a {
- background: transparent;
-
- &:before {
- display: none;
- }
- }
- }
- }
- }
-
- .info__label {
- padding-bottom: 5px;
- text-align: left;
- }
-
- .modal-image {
- .modal-button-bar {
- line-height: 30px;
- padding: 5px;
- }
-
- .modal-image__wrapper {
- > div {
- font-size: 12px;
- min-width: 250px;
- }
-
- .modal-close {
- @include opacity(1);
- }
- }
-
- .modal-button-bar {
- @include opacity(1);
- padding-right: 10px;
- }
- }
-
- .modal-header {
- .modal-action {
- margin-top: 10px;
- }
-
- .close {
- font-size: 27px;
- font-weight: normal;
- margin-top: -2px;
- }
-
- .modal-title {
- float: none;
- max-width: 90%;
- }
-
- .btn {
- &.btn-primary {
- display: block;
- float: none;
- margin: 10px 0 6px;
- width: 100%;
- }
- }
- }
-
- .settings-modal {
- .modal-body {
- min-height: 100%;
- }
-
- .nav-pills {
- > li {
- &:hover {
- a {
- background: transparent !important;
- }
- }
- }
- }
-
- &.display--content {
- .modal-header {
- display: none;
- }
-
- .settings-table {
- display: block;
-
- .settings-content {
- .section-title {
- padding-right: 15px;
- }
-
- .section-edit {
- position: relative;
- right: 0;
- text-align: left;
- top: 0;
- }
-
- .appearance-section {
- .theme-elements {
- .element {
- margin-right: 10px;
-
- &:nth-child(2n) {
- margin-right: 10px;
- }
- }
- }
- }
-
- &.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 {
- max-width: 100%;
- padding: 0 40px;
- text-align: center;
- width: 100%;
-
- > span {
- display: block;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
- }
- }
-
- .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 {
- text-align: left;
-
- .fa {
- display: inline-block;
- }
- }
-
- &.minimize-settings {
- display: none;
- padding: 0;
-
- .user-settings {
- padding: 70px 20px 30px;
- }
- }
-
- .section-min:hover {
- background: none !important;
- }
- }
-
- .nav {
- > li {
- > a {
- border-bottom: 1px solid transparent;
- font-size: 1.1em;
- line-height: 2.7;
-
- .icon {
- margin: 0 7px;
- }
- }
- }
- }
- }
- }
- }
- }
-
- .file-preview__container {
- margin: 10px 0 5px;
- }
-
- .file-preview {
- margin-top: 0;
- }
-
- // Since system console is not responsive we're overriding bootstrap styles for it
- .admin-sidebar {
- .navbar-nav {
- margin-top: 0;
-
- > li {
- float: left;
- }
-
- .dropdown-menu {
- background: $white;
- left: auto;
- position: absolute;
- right: 0;
- }
- }
- }
-
- #navbar {
- .navbar-default {
- .navbar-header {
- float: none;
- margin: 0 -15px;
-
- .dropdown__icon {
- @include background-size(100% 100%);
- display: inline-block;
- height: 16px;
- width: 4px;
- }
- }
-
- .navbar-toggle {
- display: block;
- }
-
- .navbar-brand {
- white-space: nowrap;
-
- .heading {
- font-size: 17px;
- font-weight: 400;
- line-height: 50px;
- position: relative;
- vertical-align: top;
-
- .ios & {
- line-height: 48px;
- }
- }
-
- .header-dropdown__icon {
- font-size: 12px;
- line-height: 50px;
- margin-left: 5px;
- top: 0;
- vertical-align: top;
- }
- }
-
- .dropdown {
- &.open {
- .dropdown-menu {
- @include translate3d(0, 0, 0);
- visibility: visible;
- }
- }
- }
-
- .dropdown-menu {
- @include single-transition(all, .35s, ease);
- @include translate3d(0, 100%, 0);
- background: alpha-color($black, .9);
- display: block;
- height: calc(100% - 48px);
- left: 0;
- overflow: auto;
- padding: 1.4em 0 0;
- position: fixed;
- top: 48px;
- visibility: hidden;
- width: 100%;
-
- .close {
- @include border-radius(50%);
- border: 1px solid $white;
- bottom: 25px;
- color: $white;
- display: block;
- font-family: 'Open Sans', sans-serif;
- font-size: 23px;
- font-weight: 200;
- height: 30px;
- left: 50%;
- line-height: 0;
- margin-left: -15px;
- opacity: 1;
- padding-top: 13px;
- position: fixed;
- text-align: center;
- text-shadow: none;
- width: 30px;
- }
-
- > li {
- > a {
- border-bottom: 1px solid alpha-color($white, .3);
- color: $white;
- font-weight: 600;
- line-height: 35px;
- margin: 0 auto;
- text-align: center;
- width: 90%;
-
- &:hover {
- background: transparent;
- }
- }
- }
- }
-
- .status {
- margin: 0 5px 0 3px;
- top: 2px;
- width: 16px;
-
- svg {
- max-height: 20px;
- width: 16px;
- }
- }
- }
- }
-
- body {
- &.white {
- .inner-wrap {
- > .row.content {
- margin-bottom: -185px;
- }
- }
- }
- }
-
- .footer,
- .footer-pane,
- .footer-push {
- height: 187px;
- }
-
- .footer-pane {
- .footer-link {
- line-height: 1.7;
- padding: 0;
- text-align: right;
- width: 100%;
-
- &.copyright {
- width: 100%;
- }
- }
- }
-
- .search-bar__container {
- @include flex(0 0 50px);
- background: $primary-color;
- padding: 0;
-
- .search-form__container {
- color: $black;
- padding: 0;
- }
-
- .search__form {
- @include single-transition(all, .2s, linear);
- @include translateX(0);
- border: none;
- margin-top: 9px;
- width: 100%;
-
- .fa-spin {
- font-size: 1.1em;
- top: 9px;
- }
-
- .search-bar {
- font-size: 14px;
- height: 32px;
- padding: 0 40px;
- }
-
- .search__icon {
- left: 15px;
- top: 7px;
-
- svg {
- stroke: $black;
- stroke-opacity: .4;
- width: 17px;
- }
- }
-
- .icon--refresh {
- @include opacity(.6);
- right: 16px;
- top: 9px;
- }
-
- .form-control {
- @include border-radius(3px);
- background: $white;
- border: none;
- color: $dark-gray;
- padding: 0 31px;
- }
- }
-
- .channel-header__links {
- display: none;
- }
- }
-
- .sidebar--menu {
- @include single-transition(transform, .35s, ease);
- @include translate3d(290px, 0, 0);
- border: none;
- visibility: hidden;
- width: 290px;
-
- &.visible {
- display: block;
- visibility: visible;
- }
-
- &.move--left,
- &.webrtc--show {
- @include translate3d(0, 0, 0);
- display: block;
- visibility: visible;
- }
- }
-
- .sidebar--left {
- @include single-transition(transform, .35s, ease);
- @include translate3d(-290px, 0, 0);
- border: none;
- width: 290px;
-
- &.sidebar--padded {
- padding-top: 0;
- }
-
- &.move--right {
- @include translate3d(0, 0, 0);
- }
-
- .nav-pills__container {
- height: calc(100% - 55px);
- }
-
- > div {
- padding-bottom: 70px;
- }
-
- .nav-pills__unread-indicator {
- width: 260px;
- }
-
- .badge {
- top: 13px;
- }
-
- .team__header {
- @include clearfix;
- pointer-events: none;
-
- .user__name {
- display: none;
- }
-
- .team__name {
- margin: 10px 0;
- }
-
- .sidebar-header-dropdown {
- display: none;
- }
- }
-
- .search__form {
- display: block;
- }
-
- .nav {
- li {
- &.dropdown.open {
- padding-bottom: 25px;
-
- ul {
- background: $white;
- border-radius: 3px;
- clear: both;
- position: relative;
- top: 5px;
-
- li {
- a {
- line-height: 30px;
- }
- }
- }
- }
-
- h4 {
- margin: 2em 0 1.5em;
- }
-
- > a {
- font-size: 15px;
- line-height: 2.5;
- margin: 0;
-
- &:hover,
- &:focus {
- background: transparent !important;
- }
-
- &.has-close {
- .btn-close {
- @include opacity(.5);
- display: block;
- right: 0;
- text-align: center;
- width: 40px;
- }
- }
- }
- }
- }
- }
-
- .sidebar--right {
- @include translate3d(100%, 0, 0);
- right: 0;
- width: 100%;
-
- .post-create__container {
- form {
- padding: .5em 1em;
- }
-
- .emoji-rhs {
- display: none;
- position: relative;
- right: -1px;
- top: 1px;
- }
-
- .msg-typing:empty {
- display: none;
- }
-
- .post-create-footer {
- padding-top: 10px;
-
- .control-label {
- margin: .5em 0;
- top: 0;
- }
-
- .post-error {
- left: 0;
- top: 0;
- }
- }
- }
-
- .sidebar-collapse__container {
- display: table-cell;
- vertical-align: top;
- }
-
- .sidebar__search-clear {
- color: inherit;
- display: block;
- height: 32px;
- margin-right: 0;
- text-align: center;
- top: 0;
- width: 42px;
-
- &.visible {
- visibility: visible;
- }
- }
-
- .sidebar__search-clear-x {
- font-size: 21px;
- font-weight: 700;
- line-height: 0;
- position: relative;
- top: 9px;
- }
-
- .sidebar--right__close {
- display: none;
- }
-
- .sidebar-right__body {
- height: calc(100% - 56px);
- }
- }
-
- .search-items-container {
- height: calc(100% - 56px);
- }
-
- .inner-wrap {
- @include single-transition(all, .35s, ease);
-
- .app__body & {
- &:before {
- //Some trickery in order for the z-index transition to happen immediately on move-in and delayed on move-out.
- background-color: transparent;
- content: '';
- height: 100%;
- left: -15px;
- position: absolute;
- top: 0;
- transition: background-color .35s ease, z-index 0s ease .35s;
- width: calc(100% + 30px);
- z-index: 0;
- }
- }
-
- &.move--right {
- @include translate3d(0, 0, 0);
-
- &:before {
- @include single-transition(all, .35s, ease);
-
- background-color: rgba(0, 0, 0, .4);
- z-index: 9999;
- }
- }
-
- &.move--left-small {
- @include translate3d(-290px, 0, 0);
-
- &:before {
- @include single-transition(all, .35s, ease);
- background-color: rgba(0, 0, 0, .4);
- z-index: 9999;
- }
- }
-
- &.move--left,
- &.webrtc--show {
- margin: 0;
- @include translate3d(-100%, 0, 0);
- }
- }
-
- .integration-option {
- height: auto;
- margin-left: 0;
- width: 100%;
- }
-
- .app__content {
- margin: 0;
- padding-top: 50px;
-
- .channel__wrap & {
- padding-top: 50px;
- }
-
- #channel-header {
- display: none;
- }
- }
-
- .channel__wrap {
- .row {
- &.header {
- display: block;
- }
- }
- }
-
- .post-comments {
- padding: 9px 21px 10px 10px !important;
- }
-
- .multi-teams {
-
- .app__content {
- margin-left: 0;
- }
-
- .sidebar--left {
- left: 0;
-
- &.move--right {
- left: 65px;
- }
-
- .nav-pills__unread-indicator {
- left: 15px;
- }
- }
-
- .team-sidebar {
- display: none;
-
- &.move--right {
- display: block;
- @include translate3d(0, 0, 0);
- }
- }
- }
-
- .post {
- .attachment {
- .attachment__body__wrap {
- .btn-close {
- height: 30px;
- left: -15px;
- top: 7px;
- visibility: visible;
- width: 30px;
- }
- }
-
- .attachment__image {
- &.attachment__image--openraph {
- max-width: 200px;
- }
- }
- }
- }
-}
-
-@media screen and (max-width: 640px) {
- .filtered-user-list {
- height: calc(100vh - 80px);
- }
-
- .more-modal--action {
- .filtered-user-list {
- height: calc(100vh - 110px);
- }
- }
-
- .app__body {
- .modal {
- .more-modal {
- .modal-body {
- max-height: calc(100vh - 62px);
- padding-bottom: 5px;
- }
- }
- }
-
- .post {
- .open {
- > .dropdown-menu__content {
- display: table;
-
- > .dropdown-menu {
- display: table-cell;
- }
- }
- }
-
- .dropdown-menu__content {
- height: 100%;
- left: 0;
- position: fixed;
- top: 0;
- width: 100%;
- z-index: 9999;
-
- &:before {
- background: alpha-color($black, .3);
- content: '';
- height: 100%;
- left: 0;
- position: fixed;
- top: 0;
- width: 100%;
- }
- }
-
- .dropdown-menu {
- &.bottom {
- bottom: auto;
- top: 0;
- }
-
- background: transparent;
- border: none;
- bottom: auto;
- box-shadow: none;
- float: none;
- height: 100%;
- left: 0;
- margin: 0;
- padding: 0 2em;
- position: relative;
- top: 0;
- vertical-align: middle;
- width: 100%;
- z-index: 9999;
-
- > li {
- &:last-child {
- a {
- border: none;
- }
- }
- }
-
- a {
- border-bottom: 1px solid;
- line-height: 45px;
- position: relative;
- text-align: center;
- }
- }
- }
-
- .modal {
- overflow: hidden;
- padding: 0 !important;
-
- .modal-dialog {
- height: 100%;
- margin: 0;
- max-width: 100%;
-
- .modal-content {
- height: 100%;
- }
- }
-
- .modal-footer {
- bottom: 0;
- position: fixed;
- width: 100%;
- }
-
- .about-modal {
- .about-modal__content {
- display: block;
- }
-
- .about-modal__hash {
- p {
- word-break: break-all;
-
- &:first-child {
- float: none;
- }
- }
- }
-
- .about-modal__logo {
- float: none;
- padding: 0;
- text-align: center;
- width: 100%;
-
- svg {
- height: 100px;
- width: 100px;
- }
- }
-
- .about-modal__logo + div {
- padding: 2em 0 0;
- }
- }
- }
- }
-
- .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 {
- margin-top: 10px;
- text-align: left;
- }
- }
-
- .post {
- .attachment {
- .attachment__image {
- &.attachment__image--openraph {
- max-width: 200px;
- }
- }
- }
- }
-}
-
-@media screen and (max-width: 550px) {
- .app__body {
- .more-modal {
- &.more-system-members {
- .filter-row {
- min-height: 80px;
- width: 100%;
- }
- }
-
- &.more-direct-channels {
- .member-show {
- display: none;
- }
-
- select {
- margin: 0;
- width: 100%;
- }
- }
- }
- }
-
- .member-select__container {
- left: 15px;
- top: 60px;
- width: calc(100% - 30px);
- }
-
- .post {
- .attachment {
- .attachment__image {
- &.attachment__image--openraph {
- max-width: 180px;
- }
- }
- }
- }
-}
-
-@media screen and (max-width: 480px) {
- #user-profile-popover {
- left: 50px !important;
- }
-
- .post {
- .img-div {
- max-width: 100%;
- }
- }
-
- .nav-tabs {
- margin-top: 1em;
-
- > li {
- margin-right: 0;
-
- a {
- font-size: .9em;
- padding: 6px 11px;
- }
- }
- }
-
- .sidebar--right {
- .post {
- &.post--compact {
- .post__header {
- height: auto;
- }
- }
- }
- }
-
- .backstage-header {
- h1 {
- float: none;
- margin-bottom: 15px;
- }
-
- .add-integrations-link {
- float: none;
- }
- }
-
- .backstage-list__item {
- display: block;
-
- .item-actions,
- .actions {
- margin-top: 15px;
- padding: 0;
- }
- }
-
- .app__body {
- .modal {
- .settings-modal {
- &.display--content {
- .modal-body {
- max-height: 90%;
- }
- }
-
- .modal-body {
- max-height: 70%;
- padding-bottom: 0;
- }
-
- .settings-table {
- .security-links {
- display: block;
- margin-bottom: 10px;
-
- &:last-child {
- margin-bottom: 0;
- }
- }
- }
- }
- }
- }
-
- .tip-overlay.tip-overlay--sidebar {
- min-height: 350px;
- }
-
- .member-div {
- padding: 8px 0;
-
- .member-drop,
- .member-role {
- margin: 0 0 0 44px;
- padding: 5px 0;
- position: relative;
- right: 0;
- top: 0;
- }
-
- .open > .dropdown-menu {
- left: 0;
- right: auto;
- }
- }
-
- .sidebar--left {
- @include translate3d(-260px, 0, 0);
- width: 260px;
-
- .nav-pills__unread-indicator {
- width: 230px;
- }
- }
-
- .inner-wrap {
- &.move--right {
- @include translate3d(0, 0, 0);
- }
- }
-
- .integration__icon {
- display: none;
- }
-
- .post {
- .attachment {
- .attachment__image {
- &.attachment__image--openraph {
- max-width: 120px;
- }
- }
- }
- }
-}
-
-@media screen and (max-height: 640px) {
- .signup-team__container {
- font-size: .9em;
- margin-bottom: 30px;
-
- .signup-team__name {
- font-size: 2em;
- }
- }
-}
-
-@media screen and (max-width: 320px) {
- .multi-teams {
- .sidebar--left {
- width: 220px;
-
- .nav-pills__unread-indicator {
- width: 190px;
- }
- }
- }
-
- .post {
- .post__header {
- .col__name {
- .user-popover {
- max-width: 105px;
- }
- }
- }
-
- .attachment {
- .attachment__image {
- &.attachment__image--openraph {
- max-width: 80px;
- }
- }
- }
- }
-
- .tutorial-steps__container {
- left: 0;
- position: fixed;
- top: 0;
- z-index: 9999;
-
- .tutorial__content {
- .tutorial__steps {
- margin-top: 20px;
- min-height: auto;
- padding: 0 20px;
- width: 100%;
-
- h1 {
- font-size: 2em;
- margin: -5px 0 20px;
- }
-
- h3 {
- font-size: 1.5em;
- margin-bottom: 10px;
- }
-
- .tutorial__app-icons {
- margin: 10px 0;
- }
-
- .tutorial__circles {
- bottom: auto;
- margin: 15px 0 20px;
- position: relative;
- }
-
- .tutorial__footer {
- bottom: auto;
- position: relative;
- }
- }
- }
- }
-
- .tip-overlay {
- &.tip-overlay--sidebar {
- min-height: 440px;
- }
- }
-}
-
-@media screen and (max-width: 380px) and (max-height: 580px) {
- #navbar {
- .navbar-default {
- .dropdown-menu {
- padding-top: 1em;
-
- > li {
- > a {
- border: none;
- font-size: 13px;
- line-height: 27px;
- }
- }
- }
- }
- }
-}
-
-
-
-// on iOS, allow clicks within an input's label to actually propagate through to the input itself,
-// but still allow clicks to a elements to go trough
-// http://stackoverflow.com/a/34810294/6325807
-label {
- span {
- pointer-events: none;
- }
-
- span a {
- pointer-events: all;
- }
-}
-
-@media screen and (-webkit-min-device-pixel-ratio: 0) {
- select,
- textarea,
- input {
- font-size: 16px;
- }
-}