From 5cf982e0217a968d5c10ee182c3f02f6edffe567 Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Thu, 7 Apr 2016 23:37:50 +0500 Subject: PLT-2549 - Improvements to theme stuff (#2657) --- webapp/sass/responsive/_mobile.scss | 326 ++++++++++++++++++------------------ 1 file changed, 161 insertions(+), 165 deletions(-) (limited to 'webapp/sass/responsive') diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss index 7ed1e5b3e..e3fac21f7 100644 --- a/webapp/sass/responsive/_mobile.scss +++ b/webapp/sass/responsive/_mobile.scss @@ -251,138 +251,162 @@ } } - .modal { - .info__label { - padding-bottom: 5px; - text-align: left; - } - - .modal-header { - .modal-action { - margin-top: 10px; + .app__body { + .modal { + .info__label { + padding-bottom: 5px; + text-align: left; } - button.close { - font-size: 27px; - font-weight: normal; - } + .modal-image { + .modal-button-bar { + line-height: 30px; + padding: 5px; + } - .modal-title { - float: none; - max-width: 90%; - } + .image-wrapper { + > div { + font-size: 12px; + min-width: 250px; + } - .btn { - &.btn-primary { - display: block; - float: none; - margin: 10px 0 6px; - width: 100%; + .modal-close { + @include opacity(1); + } } - } - } - .settings-modal { - &.display--content { - .modal-header { - display: none; + .modal-button-bar { + @include opacity(1); } + } - .settings-table { - display: block; + .modal-header { + .modal-action { + margin-top: 10px; + } - .settings-content { - &.minimize-settings { - display: block; - } + button.close { + font-size: 27px; + font-weight: normal; + } - .section-min:hover { - background: none; - } + .modal-title { + float: none; + max-width: 90%; + } - .no-padding--left { - padding-left: 15px; - } + .btn { + &.btn-primary { + display: block; + float: none; + margin: 10px 0 6px; + width: 100%; } + } + } - .settings-links { + .settings-modal { + &.display--content { + .modal-header { display: none; } - .modal-header { + .settings-table { display: block; - position: absolute; - top: 0; - width: 100%; - z-index: 5; - .modal-title { - text-align: center; - width: 100%; + .settings-content { + &.minimize-settings { + display: block; + } + + .section-min:hover { + background: none; + } + + .no-padding--left { + padding-left: 15px; + } } - } - .user-settings { - .tab-header { + .settings-links { display: none; } - .divider-dark.first { - display: none; + .modal-header { + display: block; + position: absolute; + top: 0; + width: 100%; + z-index: 5; + + .modal-title { + text-align: center; + width: 100%; + } + } + + .user-settings { + .tab-header { + display: none; + } + + .divider-dark.first { + display: none; + } } } } - } - - .settings-table { - padding: 0; - .nav { - position: relative; - top: auto; - width: 100%; + .settings-table { + padding: 0; - &.position--top { + .nav { + position: relative; top: auto; + width: 100%; + + &.position--top { + top: auto; + } } - } - .settings-content { - .section-edit { - position: absolute; - top: 14px; - right: 0; - padding-right: 0; + .settings-content { + .section-edit { + position: absolute; + top: 14px; + right: 0; + padding-right: 0; - .fa { - display: inline-block; + .fa { + display: inline-block; + } } - } - &.minimize-settings { - padding: 0; - display: none; + &.minimize-settings { + padding: 0; + display: none; - .user-settings { - padding: 70px 20px 30px; + .user-settings { + padding: 70px 20px 30px; + } } - } - .section-min:hover { - background: none !important; + .section-min:hover { + background: none !important; + } } - } - .nav { - > li { - > a { - border-top: 1px solid #dddddd; - font-size: 1.1em; - line-height: 2.7; - color: #555555; - - .glyphicon { - margin-left: 7px; + .nav { + > li { + > a { + border-top: 1px solid #dddddd; + font-size: 1.1em; + line-height: 2.7; + color: #555555; + + .glyphicon { + margin-left: 7px; + } } } } @@ -752,25 +776,6 @@ } } - .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; @@ -798,36 +803,38 @@ } @media screen and (max-width: 640px) { - .modal { - .about-modal { - .about-modal__content { - display: block; - } + .app__body { + .modal { + .about-modal { + .about-modal__content { + display: block; + } - .about-modal__hash { - p { - word-break: break-all; + .about-modal__hash { + p { + word-break: break-all; - &:first-child { - float: none; + &:first-child { + float: none; + } } } - } - .about-modal__logo { - float: none; - padding: 0; - text-align: center; - width: 100%; + .about-modal__logo { + float: none; + padding: 0; + text-align: center; + width: 100%; - svg { - height: 100px; - width: 100px; + svg { + height: 100px; + width: 100px; + } } - } - .about-modal__logo + div { - padding: 2em 0 0; + .about-modal__logo + div { + padding: 2em 0 0; + } } } } @@ -890,15 +897,27 @@ } } - .modal { - .settings-modal { - .settings-table { - .security-links { - display: block; - margin-bottom: 10px; + .app__body { + .modal { + .settings-modal { + &.display--content { + .modal-body { + max-height: 90%; + } + } + + .modal-body { + max-height: 70%; + } - &:last-child { - margin-bottom: 0; + .settings-table { + .security-links { + display: block; + margin-bottom: 10px; + + &:last-child { + margin-bottom: 0; + } } } } @@ -909,20 +928,6 @@ min-height: 350px; } - .modal { - .modal-body { - max-height: 70%; - } - - .settings-modal { - &.display--content { - .modal-body { - max-height: 90%; - } - } - } - } - .member-div { padding: 8px 0; @@ -951,15 +956,6 @@ @include translate3d(260px, 0, 0); } } - - .modal { - .modal-image { - .modal-button-bar { - line-height: 30px; - padding: 5px; - } - } - } } @media screen and (max-height: 640px) { -- cgit v1.2.3-1-g7c22