summaryrefslogtreecommitdiffstats
path: root/web/sass-files/sass/partials/_responsive.scss
diff options
context:
space:
mode:
Diffstat (limited to 'web/sass-files/sass/partials/_responsive.scss')
-rw-r--r--web/sass-files/sass/partials/_responsive.scss419
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