Commit d6462284 authored by Asaad Mahmood's avatar Asaad Mahmood Committed by sudheer
Browse files

MM-13226 - Updating inactive tab styling in modal (#2107)

parent 9688cc06
......@@ -589,34 +589,43 @@
}
}
.modal-tabs .nav-tabs > li {
background: white;
margin-right: 0px;
width: 50%;
text-align: center;
border: none;
border-bottom: 2px $light-gray solid;
}
.modal-tabs {
.nav-tabs {
margin: 0 0 16px;
> li {
margin-right: 0px;
width: 50%;
text-align: center;
border: none;
border-bottom: 2px $light-gray solid;
.modal-tabs .nav-tabs > li.active {
border-bottom: 2px $primary-color solid;
}
&.active {
border-bottom: 2px $primary-color solid;
.modal-tabs .nav-tabs > li > a {
background: white;
color: $light-gray;
height: 56px;
outline: none;
border: none;
display: flex;
font-weight: 900;
justify-content: center;
align-items: center;
}
a {
opacity: 1;
}
}
.modal-tabs .nav-tabs > li > a:active {
color: $primary-color;
> a {
opacity: .5;
color: inherit;
height: 40px;
padding-bottom: 12px;
outline: none;
border: none;
display: flex;
font-weight: 900;
justify-content: center;
align-items: center;
&:active {
opacity: 1;
}
}
}
}
}
}
......
......@@ -500,7 +500,6 @@ export function applyTheme(theme) {
changeCss('body.app__body', 'scrollbar-face-color:' + theme.sidebarBg);
changeCss('@media(max-width: 768px){.app__body .modal .settings-modal:not(.settings-modal--tabless):not(.display--content) .modal-content', 'background:' + theme.sidebarBg);
changeCss('.app__body .modal-tabs .nav-tabs > li.active', `border-bottom-color:${theme.sidebarBg}`);
changeCss('.app__body .modal-tabs .nav-tabs > li > a:active', `color:${theme.sidebarBg}`);
}
if (theme.sidebarText) {
......@@ -679,7 +678,7 @@ export function applyTheme(theme) {
changeCss('.app__body .bg-text-200', 'background:' + changeOpacity(theme.centerChannelColor, 0.2));
changeCss('.app__body .svg-text-color', 'fill:' + theme.centerChannelColor);
changeCss('.app__body .mentions__name .status.status--group, .app__body .multi-select__note', 'background:' + changeOpacity(theme.centerChannelColor, 0.12));
changeCss('.app__body .form-control, .app__body .system-notice, .app__body .file-view--single .file__image .image-loaded, .app__body .post .dropdown .dropdown-menu button, .app__body .member-list__popover .more-modal__body, .app__body .alert.alert-transparent, .app__body .channel-header .channel-header__icon, .app__body .search-bar__container .search__form, .app__body .table > thead > tr > th, .app__body .table > tbody > tr > td', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.12));
changeCss('.app__body .modal-tabs .nav-tabs > li, .app__body .form-control, .app__body .system-notice, .app__body .file-view--single .file__image .image-loaded, .app__body .post .dropdown .dropdown-menu button, .app__body .member-list__popover .more-modal__body, .app__body .alert.alert-transparent, .app__body .channel-header .channel-header__icon, .app__body .search-bar__container .search__form, .app__body .table > thead > tr > th, .app__body .table > tbody > tr > td', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.12));
changeCss('.app__body .post-list__arrows, .app__body .post .flag-icon__container', 'fill:' + changeOpacity(theme.centerChannelColor, 0.3));
changeCss('@media(min-width: 768px){.app__body .search__icon svg', 'stroke:' + changeOpacity(theme.centerChannelColor, 0.4));
changeCss('.app__body .post-image__details .post-image__download svg', 'stroke:' + changeOpacity(theme.centerChannelColor, 0.4));
......@@ -928,7 +927,7 @@ export function applyTheme(theme) {
changeCss('.app__body .channel-header .channel-header__icon:hover .icon--stroke svg', 'stroke:' + theme.linkColor);
changeCss('.app__body .post-reaction.post-reaction--current-user, .app__body .post-reaction:hover', 'background:' + changeOpacity(theme.linkColor, 0.1));
changeCss('.app__body .post-add-reaction:hover .post-reaction, .app__body .post-reaction.post-reaction--current-user', 'border-color:' + changeOpacity(theme.linkColor, 0.4));
changeCss('.app__body .channel-header .channel-header_plugin-dropdown a:hover, .app__body .member-list__popover .more-modal__list .more-modal__row:hover, .app__body .channel-header .channel-header__icon:hover, .app__body .channel-header .channel-header__icon.active, .app__body .search-bar__container .search__form.focused, .app__body .search-bar__container .search__form:hover', 'border-color:' + theme.linkColor);
changeCss('.app__body .modal-tabs .nav-tabs > li.active, .app__body .channel-header .channel-header_plugin-dropdown a:hover, .app__body .member-list__popover .more-modal__list .more-modal__row:hover, .app__body .channel-header .channel-header__icon:hover, .app__body .channel-header .channel-header__icon.active, .app__body .search-bar__container .search__form.focused, .app__body .search-bar__container .search__form:hover', 'border-color:' + theme.linkColor);
changeCss('.app__body .channel-header .channel-header_plugin-dropdown a:hover svg', 'fill:' + theme.linkColor);
changeCss('.app__body .post-reaction.post-reaction--current-user, .app__body .post-reaction:hover', 'color:' + theme.linkColor);
changeCss('.app__body .channel-header .dropdown-toggle:hover .heading, .app__body .channel-header .dropdown-toggle:hover .header-dropdown__icon, .app__body .channel-header__title .open .heading, .app__body .channel-header__info .channel-header__title .open .header-dropdown__icon, .app__body .channel-header__title .open .heading, .app__body .channel-header__info .channel-header__title .open .heading', 'color:' + theme.linkColor);
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment