MM-16367 - Updating mobile view sidebar styling (mattermost#3053)

Revanth47 · Jul 5, 2019 · 2009444 · 2009444
1 parent 8c5986e
commit 2009444
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 43 deletions.
diff --git a/sass/layout/_headers.scss b/sass/layout/_headers.scss
@@ -376,7 +376,7 @@
  }
 
  &.light {
- @include opacity(.8);
+ @include opacity(.6);
  color: inherit;
  overflow: visible;
 

diff --git a/sass/responsive/_mobile.scss b/sass/responsive/_mobile.scss
@@ -7,6 +7,7 @@
  max-height: 100%;
  max-width: 100%;
  }
+
  &.mobile-channel-header-dropdown-enter {
  transform: translateY(100%);
  }
@@ -15,6 +16,7 @@
  transform: translateY(0%);
  transition: transform .35s ease-in;
  }
+
  &.mobile-channel-header-dropdown-enter-done {
  transform: translateY(0%);
  }
@@ -26,6 +28,47 @@
  }
  }
 
+ .mobile-main-menu {
+ .Menu {
+ &.dropdown-menu {
+ width: 100%;
+ position: relative;
+ background: transparent;
+ padding-left: 0;
+ list-style: none;
+ margin-bottom: 0;
+ max-height: inherit;
+ max-width: inherit;
+ border: 0px;
+ padding-top: 0px;
+ box-shadow: none;
+
+ button,
+ a,
+ a:hover {
+ opacity: .8;
+ }
+
+ .MenuItem {
+ > button,
+ > a {
+ padding: 3px 16px;
+ font-size: 15px;
+ line-height: 32px;
+ width: 100%;
+ text-align: left;
+ }
+ }
+
+ .MenuGroup {
+ &.menu-divider {
+ background: $white;
+ }
+ }
+ }
+ }
+ }
+
  .post__header {
  .dropdown-menu {
  >li {
@@ -76,6 +119,7 @@
  .MenuItem {
  z-index: 9999;
  background: $white;
+
  &:last-child button {
  border-bottom: 0px;
  }
@@ -740,6 +784,7 @@
  }
 
  .btn {
+
  .icon,
  .fa {
  margin-right: 6px;
@@ -1078,6 +1123,7 @@
  }
 
  >li {
+
  >a,
  >button {
  color: $white;
@@ -1224,6 +1270,7 @@
  display: block;
  visibility: visible;
  }
+
  .mentions {
  font-size: 17px;
  font-weight: bold;
@@ -1642,6 +1689,7 @@
  .modal-body {
  max-height: 100%;
  }
+
  .about-modal__content {
  display: block;
  }
@@ -1936,7 +1984,7 @@
  border-radius: 0;
  z-index: 1070;
 
- > ul {
+ >ul {
  margin-top: 66px;
  }
 
@@ -1984,6 +2032,7 @@
  font-size: 14px;
  padding-top: 8px;
  }
+
  .emoji-picker__item {
  margin: 0;
  padding: 0;
@@ -2222,42 +2271,4 @@ label {
  input {
  font-size: 16px;
  }
-}
-
-.mobile-main-menu {
- .Menu {
- &.dropdown-menu {
- width: 100%;
- position: relative;
- background: transparent;
- padding-left: 0;
- list-style: none;
- margin-bottom: 0;
- max-height: inherit;
- max-width: inherit;
- border: 0px;
- padding-top: 0px;
- box-shadow: none;
-
- button,
- a,
- a:hover {
- color: $white;
- opacity: .8;
- }
- .MenuItem {
- >button,
- >a {
- padding: 3px 16px;
- font-size: 15px;
- line-height: 32px;
- }
- }
- .MenuGroup {
- &.menu-divider {
- background: $white;
- }
- }
- }
- }
-}
+}
diff --git a/utils/utils.jsx b/utils/utils.jsx
@@ -694,7 +694,7 @@ export function applyTheme(theme) {
  changeCss('.app__body .channel-header .heading', 'color:' + theme.centerChannelColor);
  changeCss('.app__body .col__reply > button:hover, .app__body .col__reply > a:hover, .app__body .col__reply > div:hover, .app__body .markdown__table tbody tr:nth-child(2n)', 'background:' + changeOpacity(theme.centerChannelColor, 0.07));
  changeCss('.app__body .channel-header__info .header-dropdown__icon', 'color:' + changeOpacity(theme.centerChannelColor, 0.8));
- changeCss('.app__body .post-create__container .post-create-body .send-button.disabled i, .app__body .channel-header', 'color:' + changeOpacity(theme.centerChannelColor, 0.4));
+ changeCss('.app__body .post-create__container .post-create-body .send-button.disabled i', 'color:' + changeOpacity(theme.centerChannelColor, 0.4));
  changeCss('.app__body .channel-header .pinned-posts-button svg', 'fill:' + changeOpacity(theme.centerChannelColor, 0.6));
  changeCss('.app__body .channel-header .channel-header_plugin-dropdown svg', 'fill:' + changeOpacity(theme.centerChannelColor, 0.6));
  changeCss('.app__body .custom-textarea, .app__body .custom-textarea:focus, .app__body .file-preview, .app__body .post-image__details, .app__body .sidebar--right .sidebar-right__body, .app__body .markdown__table th, .app__body .markdown__table td, .app__body .suggestion-list__content, .app__body .modal .modal-content, .app__body .modal .settings-modal .settings-table .settings-content .divider-light, .app__body .webhooks__container, .app__body .dropdown-menu, .app__body .modal .modal-header', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2));
@@ -714,7 +714,7 @@ export function applyTheme(theme) {
  changeCss('@media(min-width: 768px){.app__body .search-bar__container .search__form .search-bar, .app__body .form-control', 'color:' + theme.centerChannelColor);
  changeCss('.app__body .input-group-addon, .app__body .post-create__container .post-body__actions > span, .app__body .post-create__container .post-body__actions > a', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.1));
  changeCss('@media(min-width: 768px){.app__body .post-list__table .post-list__content .dropdown-menu a:hover, .dropdown-menu > li > button:hover', 'background:' + changeOpacity(theme.centerChannelColor, 0.1));
- changeCss('.app__body .MenuWrapper .MenuItem > button:hover, .app__body .MenuWrapper .MenuItem > button:focus, .app__body .MenuWrapper .MenuItem > a:hover, .app__body .dropdown-menu div > a:focus, .app__body .dropdown-menu div > a:hover, .dropdown-menu li > a:focus, .app__body .dropdown-menu li > a:hover', 'background:' + changeOpacity(theme.centerChannelColor, 0.1));
+ changeCss('.app__body .MenuWrapper .MenuItem > button:hover, .app__body .Menu .MenuItem > button:hover, .app__body .MenuWrapper .MenuItem > button:focus, .app__body .MenuWrapper .MenuItem > a:hover, .app__body .dropdown-menu div > a:focus, .app__body .dropdown-menu div > a:hover, .dropdown-menu li > a:focus, .app__body .dropdown-menu li > a:hover', 'background:' + changeOpacity(theme.centerChannelColor, 0.1));
  changeCss('.app__body .attachment .attachment__content, .app__body .attachment-actions button', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.3));
  changeCss('.app__body .attachment-actions button:focus, .app__body .attachment-actions button:hover', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.5));
  changeCss('.app__body .attachment-actions button:focus, .app__body .attachment-actions button:hover', 'background:' + changeOpacity(theme.centerChannelColor, 0.03));