From db0edc036095e3d2051495f5f2ba9de19d7a1318 Mon Sep 17 00:00:00 2001 From: Mylene Date: Mon, 27 Jul 2015 17:11:18 +0200 Subject: [PATCH] cleaning .sass --- css/style.css | 337 ++++++++++------------------------- js/theme_option.js | 15 +- sass/layout/_dm.sass | 141 +++++++++++++++ sass/layout/_menu.sass | 2 +- sass/layout/_modal.sass | 199 +++------------------ sass/layout/_responsive.sass | 41 ----- sass/pages/_login.sass | 3 +- sass/pages/_network.sass | 4 +- sass/style.sass | 5 +- 9 files changed, 274 insertions(+), 473 deletions(-) create mode 100644 sass/layout/_dm.sass diff --git a/css/style.css b/css/style.css index b9dc4c2..204a9e3 100644 --- a/css/style.css +++ b/css/style.css @@ -107,7 +107,7 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, font-weight: normal; font-style: normal; } -[class^="icon-"]:before, [class*=" icon-"]:before, .extend-icon:before, .userMenu li.userMenu-config > a:before, .modal-close:before, .mark-all-as-read:before, .modal-back:before, .post-context span:before, .post-reply:before, .post-propagate:before, .post-favorite:before, .post .show-more:before, .mini-profile-actions span:before, ul.userMenu-search-profiles button:before, .mini-profile-indicators .userMenu-connections a:before, .mini-profile-indicators .userMenu-messages a:before, .mini-profile-indicators .userMenu-user a:before, .twister-user-remove:before, .refresh-toptrends:before, .twistday-reminder .refresh:before, .refresh-users:before, .icon-down-after:after { +[class^="icon-"]:before, [class*=" icon-"]:before, .extend-icon:before, .userMenu li.userMenu-config > a:before, .modal-close:before, .mark-all-as-read:before, .modal-back:before, .post-context span:before, .post-reply:before, .post-propagate:before, .post-favorite:before, .post .show-more:before, ul.userMenu-search-profiles button:before, .mini-profile-indicators .userMenu-connections a:before, .mini-profile-indicators .userMenu-messages a:before, .mini-profile-indicators .userMenu-user a:before, .twister-user-remove:before, .refresh-toptrends:before, .twistday-reminder .refresh:before, .refresh-users:before, .icon-down-after:after { font-family: "fontello"; font-style: normal; font-weight: normal; @@ -163,12 +163,12 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, } /* '' */ -.icon-plus:before, .mini-profile-actions span:before, ul.userMenu-search-profiles button .follow:before, ul.userMenu-search-profiles .mini-profile-actions span .follow:before, .mini-profile-actions ul.userMenu-search-profiles span .follow:before { +.icon-plus:before, ul.userMenu-search-profiles button .follow:before { content: ""; } /* '' */ -.icon-minus:before, ul.userMenu-search-profiles button .unfollow:before, ul.userMenu-search-profiles .mini-profile-actions span .unfollow:before, .mini-profile-actions ul.userMenu-search-profiles span .unfollow:before { +.icon-minus:before, ul.userMenu-search-profiles button .unfollow:before { content: ""; } @@ -242,14 +242,14 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, } /* '' */ -.col, .following, .following-list li, .login .module, .network.singleBlock .module, .twister-user { +.col, .login .module, .network.singleBlock .module, .twister-user { float: left; margin: 0 2.5% 0 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } -.col.last, .following, .following-list li.last, .following-list li.following, .following-list li:nth-child(4n), .following-list .network.singleBlock li.module:nth-child(4n), .network.singleBlock .following-list li.module:nth-child(4n), .login .last.module, .login .module.following, .network.singleBlock .last.module, .network.singleBlock .module.following, .network.singleBlock .module:last-child, .network.singleBlock .module.twister-user:nth-child(4n), .last.twister-user, .twister-user:nth-child(4n) { +.col.last, .login .last.module, .network.singleBlock .last.module, .network.singleBlock .module:last-child, .network.singleBlock .module.twister-user:nth-child(4n), .last.twister-user, .twister-user:nth-child(4n) { margin-right: 0; } @@ -261,7 +261,7 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, width: 6.25%; } -.col-3, .following-list li, .twister-user { +.col-3, .twister-user { width: 10.625%; } @@ -285,7 +285,7 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, width: 32.5%; } -.col-9, .following { +.col-9 { width: 36.875%; } @@ -359,7 +359,7 @@ strong, b { } img { - background: #222; + background: #f6f6f6; } h1 { @@ -418,14 +418,14 @@ h3 .isFollowing:after { box-shadow: 0 8px 13px rgba(51, 51, 51, 0.1); } -.clear-fix:after, .col:after, .following:after, .following-list li:after, .login .module:after, .network.singleBlock .module:after, .twister-user:after, .userMenu ul:after, .modal-content:after, .modal-header:after, .direct-messages-thread .post:after, .mini-following-info a:after, .twister-user-info:after, .forEdition.profile-card:after, .expanded-content:after, .network.singleBlock:after, .options .tab-content:after, .promoted-posts-only:after, ul.userMenu-search-profiles li:after, .mini-profile .post-area:after, .mini-profile-indicators:after, .profile-data:after, #postboard-top:after, #postboard-top .post-area:after, .who-to-follow.module li:after, .who-to-follow ol:after, .twistday-reminder:after { +.clear-fix:after, .col:after, .login .module:after, .network.singleBlock .module:after, .twister-user:after, .userMenu ul:after, .modal-content:after, .modal-header:after, .direct-messages-thread .post:after, .mini-following-info a:after, .twister-user-info:after, .forEdition.profile-card:after, .expanded-content:after, .following .following-list li a:after, .network.singleBlock:after, .options .tab-content:after, .promoted-posts-only:after, ul.userMenu-search-profiles li:after, .mini-profile .post-area:after, .mini-profile-indicators:after, .profile-data:after, #postboard-top:after, #postboard-top .post-area:after, .who-to-follow.module li:after, .who-to-follow ol:after, .twistday-reminder:after { content: ""; display: table; clear: both; } /************** BUTTONS *********** */ -button, .mini-profile-actions span, a.button { +button, a.button { padding: 0.6rem 1rem; display: inline-block; line-height: 0.75rem; @@ -450,39 +450,39 @@ button, .mini-profile-actions span, a.button { font-family: "fontello", "Roboto", sans-serif; cursor: pointer; } -button:hover, .mini-profile-actions span:hover, a.button:hover { +button:hover, a.button:hover { border-color: #d2d2d2; } -button.disabled, .mini-profile-actions span.disabled, a.button.disabled { +button.disabled, a.button.disabled { opacity: 0.5; color: #999; background-color: white; } -button.disabled:hover, .mini-profile-actions span.disabled:hover, a.button.disabled:hover { +button.disabled:hover, a.button.disabled:hover { color: #666; -moz-box-shadow: 1px 1px 0 rgba(68, 68, 68, 0.3); -webkit-box-shadow: 1px 1px 0 rgba(68, 68, 68, 0.3); box-shadow: 1px 1px 0 rgba(68, 68, 68, 0.3); } -button.color-1, .modal-content button.postboard-news, .modal-content .mini-profile-actions span.postboard-news, .mini-profile-actions .modal-content span.postboard-news, button.follow, .mini-profile-actions span.follow, .mini-profile-actions span.color-1, a.button.color-1, .modal-content a.button.postboard-news, a.button.follow { +button.color-1, .modal-content button.postboard-news, button.follow, a.button.color-1, .modal-content a.button.postboard-news, a.button.follow { background: #B4C669; border-color: #abbf57; color: white; font-weight: 500; } -button.color-1:hover, .modal-content button.postboard-news:hover, .modal-content .mini-profile-actions span.postboard-news:hover, .mini-profile-actions .modal-content span.postboard-news:hover, button.follow:hover, .mini-profile-actions span.follow:hover, .mini-profile-actions span.color-1:hover, a.button.color-1:hover, .modal-content a.button.postboard-news:hover, a.button.follow:hover { +button.color-1:hover, .modal-content button.postboard-news:hover, button.follow:hover, a.button.color-1:hover, .modal-content a.button.postboard-news:hover, a.button.follow:hover { border-color: #90a43e; } -button.color-2, button.unfollow, .mini-profile-actions span.unfollow, .mini-profile-actions span.color-2, a.button.color-2, a.button.unfollow { +button.color-2, button.unfollow, a.button.color-2, a.button.unfollow { background: #C3C3C3; border-color: #b6b6b6; color: white; font-weight: 500; } -button.color-2:hover, button.unfollow:hover, .mini-profile-actions span.unfollow:hover, .mini-profile-actions span.color-2:hover, a.button.color-2:hover, a.button.unfollow:hover { +button.color-2:hover, button.unfollow:hover, a.button.color-2:hover, a.button.unfollow:hover { border-color: #9d9d9d; } -button.small, .modal-wrapper.who-to-follow-modal button, .modal-wrapper.who-to-follow-modal .mini-profile-actions span, .mini-profile-actions .modal-wrapper.who-to-follow-modal span, .mini-profile-actions span.small, a.button.small { +button.small, .modal-wrapper.who-to-follow-modal button, a.button.small { padding: 0.3rem 0.5rem; font-weight: 700; font-size: 0.6rem; @@ -738,7 +738,7 @@ button.small, .modal-wrapper.who-to-follow-modal button, .modal-wrapper.who-to-f padding: 10px; text-align: right; } -.prompt-wrapper .modal-buttons button:last-child, .prompt-wrapper .modal-buttons .mini-profile-actions span:last-child, .mini-profile-actions .prompt-wrapper .modal-buttons span:last-child { +.prompt-wrapper .modal-buttons button:last-child { padding: 5px 20px; } @@ -755,6 +755,16 @@ button.small, .modal-wrapper.who-to-follow-modal button, .modal-wrapper.who-to-f } .prompt-wrapper.following-config-modal h2 { text-transform: none; + display: inline-block !important; + font-size: 1rem; + font-weight: 400; + padding: 1rem; +} +.prompt-wrapper.following-config-modal h2 span { + display: inline-block !important; +} +.prompt-wrapper.following-config-modal h2 span b { + font-weight: 400; } /************ RETWIST POSTS MODAL ********* */ @@ -997,7 +1007,7 @@ button.small, .modal-wrapper.who-to-follow-modal button, .modal-wrapper.who-to-f line-height: 1rem; width: 80%; } -.modal-wrapper.who-to-follow-modal button, .modal-wrapper.who-to-follow-modal .mini-profile-actions span, .mini-profile-actions .modal-wrapper.who-to-follow-modal span { +.modal-wrapper.who-to-follow-modal button { position: absolute; right: 0; top: 5%; @@ -1574,236 +1584,77 @@ button.small, .modal-wrapper.who-to-follow-modal button, .modal-wrapper.who-to-f margin-left: 1px; } -.following-list li { - text-align: center; - margin-bottom: 2%; - padding: 50px 0; +.following { + width: 100%; + padding: 20px; } - -.following .mini-profile { - margin-bottom: 10px; +.following h2 { + display: none; } - -.following .mini-profile-info { +.following .following-list li { + border-bottom: 1px solid #dddddd; + line-height: 45px; + background: #f6f6f6; position: relative; + -moz-transition-property: background; + -o-transition-property: background; + -webkit-transition-property: background; + transition-property: background; + -moz-transition-duration: 0.1s; + -o-transition-duration: 0.1s; + -webkit-transition-duration: 0.1s; + transition-duration: 0.1s; } - -.following .mini-profile-photo { - margin: 0 auto 10px auto; +.following .following-list li:hover { + background: white; +} +.following .following-list li a { display: block; - width: 64px; - height: 64px; - overflow: hidden; - background: #dddddd; + padding: 1rem; + width: 100%; + color: #444; } - -.following .mini-profile-view { - display: inline; - color: rgba(0, 0, 0, 0.5); - font-size: 12px; - position: absolute; - top: 32px; - left: 65px; - z-index: 1; +.following .mini-profile-photo { + height: 48px; + width: 48px; + line-height: 0; + margin: 0 1rem 0 0; + float: left; } - .following .mini-profile-name { - font-weight: 900; - font-size: 1em; - line-height: 1em; - padding: 0; - text-decoration: none; + font-size: 1rem; + font-weight: 500; + float: left; display: block; - color: inherit; - display: inline; + line-height: 1rem; + padding: 10px 0; } - .following .mini-screen-name { - color: inherit; display: block; - margin-bottom: 10px; -} - -.following button, .following .mini-profile-actions span, .mini-profile-actions .following span { - display: inline-block; - margin: 5px 0; + float: left; + line-height: 1rem; + font-weight: 400; + font-size: 1rem; + padding: 10px; + color: #666; } -.following button.unfollow, .following .mini-profile-actions span.unfollow, .mini-profile-actions .following span.unfollow { - background-color: #aaa; +.following .mini-screen-name b { + font-weight: 400; + padding: 0; + color: inherit; + font-size: inherit; + line-height: inherit; } -.following button.public-following, .following .mini-profile-actions span.public-following, .mini-profile-actions .following span.public-following { - background-color: #B4C669; +.following .mini-profile-actions { + display: none; } - -.mini-profile-actions { +.following .following-config { position: absolute; - width: auto; top: 0; - right: -16px; - display: inline-block; -} -.mini-profile-actions span { - cursor: pointer !important; - border-top-right-radius: 0 !important; - border-bottom-right-radius: 0 !important; -} -.mini-profile-actions span:before { - margin: 0; - padding: 0; - line-height: 1em; - font-size: 10px; -} -.mini-profile-actions ul { - height: 0; - overflow: hidden; - position: absolute; - top: 2em; - right: -2em; - transition: height 0.4s linear; - transition: padding-top 0.1s linear; - background: #222; - z-index: 3; -} -.mini-profile-actions:hover ul { - padding: 8px; - height: 112px; -} -.mini-profile-actions ul li { - text-align: left; - margin: 0; - background: #222; - white-space: nowrap; - color: #aaa; - font-size: 12px; - line-height: 12px; - cursor: pointer; - display: block; - float: none; - width: auto; - padding: 8px; -} -.mini-profile-actions:hover ul li:hover { - color: #B4C669; -} - -.following .who-follow { - height: auto; - background-color: rgba(69, 71, 77, 0.1); - overflow: hidden; - font-size: 12px; -} - -.following .show-more-followers { - color: #f11; - font-weight: bold; - cursor: pointer; - float: right; -} - -.following .mini-follower-link { - display: inline-block; - margin-right: 10px; -} -.following .mini-follower-link:before { - content: " ‧"; -} - -.following a.open-profile-modal { - display: inline; - text-align: center; - color: #444; -} -.following a.open-profile-modal:hover { - color: #aaa; -} - -.following .post-area-new { - padding-bottom: 4px; -} -.following .post-area-new textarea { - resize: none; - width: 445px; - display: block; - transition: all 0.3s linear; - -webkit-transition: height 0.3s linear; - -moz-transition: height 0.3s linear; - -o-transition: height 0.3s linear; - -ms-transition: height 0.3s linear; - height: 28px; - border-radius: 3px; - border: solid 1px rgba(0, 0, 0, 0.3); - margin-left: 55px; - margin-bottom: 10px; - padding: 4px; - font-size: 13px; -} - -.following .mini-profile .post-area-new { - padding: 9px; -} -.following .mini-profile .post-area-new textarea { - margin-left: 0; - width: 100%; -} - -.following .post-area-new.open textarea, .following .mini-profile .post-area-new textarea, .mini-profile .following .post-area-new textarea, .following #postboard-top .post-area .post-area-new textarea, #postboard-top .post-area .following .post-area-new textarea { - height: 80px; - border: solid 1px rgba(227, 79, 66, 0.5); - box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); -} - -.following textarea.splited-post { - box-shadow: none !important; - height: 28px; -} - -.following .splited-post-counter { - color: rgba(0, 0, 0, 0.3); - font-weight: bold; -} -.following .splited-post-counter:before { - content: "…"; -} - -.following .post-area-extras { - overflow: hidden; - height: 0; - text-align: right; -} - -.following .post-submit { - background: #45474d; - color: rgba(255, 255, 255, 0.8); - border: none; - padding: 5px 10px; - cursor: pointer; - display: inline-block; - margin-top: 4px; -} - -.following .post-area-new.open > .post-area-extras, .following .mini-profile .post-area-new > .post-area-extras, .mini-profile .following .post-area-new > .post-area-extras, .following #postboard-top .post-area .post-area-new > .post-area-extras, #postboard-top .post-area .following .post-area-new > .post-area-extras { - height: 35px; - transition: all 0.6s linear; -} - -.following .post-area-remaining { - font-size: 13px; -} -.following .post-area-remaining.warn { - color: #ff0000; -} - -.following .post .show-more { - font-size: 13px; - font-weight: bold; - margin-left: 60px; - color: rgba(0, 0, 0, 0.5); -} -.following .post .show-more:before { - content: "💭"; + right: 0; + padding: 1rem; } - -.swarm-status { +.following .swarm-status { display: none !important; } @@ -1952,7 +1803,7 @@ button.small, .modal-wrapper.who-to-follow-modal button, .modal-wrapper.who-to-f .options { position: relative; } -.options button, .options .mini-profile-actions span, .mini-profile-actions .options span, .options input, .options select { +.options button, .options input, .options select { font-size: 13px; } .options label { @@ -2114,25 +1965,25 @@ ul.userMenu-search-profiles .mini-profile-info { width: 100%; float: none; } -ul.userMenu-search-profiles button, ul.userMenu-search-profiles .mini-profile-actions span, .mini-profile-actions ul.userMenu-search-profiles span { +ul.userMenu-search-profiles button { padding: 3px; } -ul.userMenu-search-profiles button:after, ul.userMenu-search-profiles .mini-profile-actions span:after, .mini-profile-actions ul.userMenu-search-profiles span:after { +ul.userMenu-search-profiles button:after { content: ""; font-family: "fontello"; } -ul.userMenu-search-profiles button .follow .unfollow, ul.userMenu-search-profiles .mini-profile-actions span .follow .unfollow, .mini-profile-actions ul.userMenu-search-profiles span .follow .unfollow { +ul.userMenu-search-profiles button .follow .unfollow { position: absolute; bottom: 10px; right: 10px; } -ul.userMenu-search-profiles button .follow .unfollow:hover, ul.userMenu-search-profiles .mini-profile-actions span .follow .unfollow:hover, .mini-profile-actions ul.userMenu-search-profiles span .follow .unfollow:hover { +ul.userMenu-search-profiles button .follow .unfollow:hover { background-color: #aaa; } -ul.userMenu-search-profiles button .follow, ul.userMenu-search-profiles .mini-profile-actions span .follow, .mini-profile-actions ul.userMenu-search-profiles span .follow { +ul.userMenu-search-profiles button .follow { background-color: #B4C669; } -ul.userMenu-search-profiles button .unfollow, ul.userMenu-search-profiles .mini-profile-actions span .unfollow, .mini-profile-actions ul.userMenu-search-profiles span .unfollow { +ul.userMenu-search-profiles button .unfollow { background-color: #222; } @@ -2449,7 +2300,7 @@ textarea.splited-post { .who-to-follow.module li:last-child { border: none; } -.who-to-follow.module li button, .who-to-follow.module li .mini-profile-actions span, .mini-profile-actions .who-to-follow.module li span { +.who-to-follow.module li button { position: absolute; right: 0; top: 20%; @@ -2812,7 +2663,7 @@ ul.dropdown-menu li > li > a { margin: 0 2.5% 2.5% 0; } - .col-3, .following-list li, .twister-user { + .col-3, .twister-user { width: 100%; margin: 0 2.5% 2.5% 0; } @@ -2842,7 +2693,7 @@ ul.dropdown-menu li > li > a { margin: 0 2.5% 2.5% 0; } - .col-9, .following { + .col-9 { width: 100%; margin: 0 2.5% 2.5% 0; } @@ -2862,7 +2713,7 @@ ul.dropdown-menu li > li > a { margin: 0 2.5% 2.5% 0; } - .col, .following, .following-list li, .login .module, .network.singleBlock .module, .twister-user { + .col, .login .module, .network.singleBlock .module, .twister-user { float: none; padding: 0 20px; } diff --git a/js/theme_option.js b/js/theme_option.js index aca29b2..f498342 100644 --- a/js/theme_option.js +++ b/js/theme_option.js @@ -2,24 +2,25 @@ $(document).ready(function() { var windowHeight = $(window).height(); - $('.right').css('height', windowHeight - 100); - $('.module.who-to-follow').detach().appendTo($('.dashboard.left')); - $('.module.twistday-reminder').detach().appendTo($('.dashboard.left')); + //$('.right').css('height', windowHeight - 100); + $('.module.who-to-follow').detach().appendTo($('.dashboard.right')); + $('.module.twistday-reminder').detach().appendTo($('.dashboard.right')); }); $(window).resize(function() { var windowHeight = $(window).height(); - $('.right').css('height', windowHeight - 100); - $('.module.who-to-follow').detach().appendTo($('.dashboard.left')); - $('.module.twistday-reminder').detach().appendTo($('.dashboard.left')); + //$('.right').css('height', windowHeight - 100); + $('.module.who-to-follow').detach().appendTo($('.dashboard.right')); + $('.module.twistday-reminder').detach().appendTo($('.dashboard.right')); }); $(function(){ var windowHeight = $(window).height(); $('.modal-close').html(''); - $('.right').css('height', windowHeight - 100); + //$('.right').css('height', windowHeight - 100); + $('.mini-profile .open-following-page').parent('li').detach().appendTo($('.mini-profile-indicators')); $('.modal-back').html(''); $('.twister-user-remove').html(''); $('.profile-card-main').attr('style', ''); diff --git a/sass/layout/_dm.sass b/sass/layout/_dm.sass new file mode 100644 index 0000000..1451d66 --- /dev/null +++ b/sass/layout/_dm.sass @@ -0,0 +1,141 @@ +/****** DIRECT MESSAGES MODAL**********/ + +.modal-wrapper.directMessages + + + .post-area-new + display: none + z-index: 5 + background: $main-background-color + position: absolute + bottom: 0 + width: 100% + padding: 0!important + .modal-header + h3 span + display: inline-block!important + padding-left: 5px + color: white + cursor: default + + .modal-content + +box-sizing(border-box) + width: 100% + + + .post-photo + height: 48px + width: 48px + .post-text + margin-left: 58px + font-size: .9em + .post-info-name + float: none + .post-info-tag + line-height: 1em + padding: 0 + display: inline + font-size: 80% + margin: 0 0 0 1em + .post-info-sent + position: absolute + left: 50% + top: 10px + display: none + +.direct-messages-list .post + padding: 20px + cursor: pointer + &:after + content: "" + font-family: $symbol-font-family + position: absolute + right: 5px + top: 50% + font-size: 1.1em + margin: -6px 0 0 0 + color: rgba(0, 0, 0, 0.4) + display: none + +.direct-messages-list + .post:hover:after + display: block + li + position: relative + border-bottom: 1px solid $main-background-color +.direct-messages-thread + padding-bottom: 150px + li + position: relative + .post + @extend .clear-fix + background: none + left: 0 + margin: 0px 10px 20px 10px + cursor: default + .post-info-time + float: none + display: block + text-align: center + font-size: 10px + margin: 10px 0 + cursor: default + position: static + &:hover + color: $main-color-light + + + + + .post-text:after, .post-text:nth-child(2n):after + content: "" + width: 1px + background: transparent + position: absolute + top: 10px + white-space: normal + + .post-text:after + border-top: solid 7px transparent + border-bottom: solid 7px transparent + border-right: solid 7px white + left: -7px + + .post-text + background: white + margin-right: 60px + margin-left: 60px + position: relative + display: inline-block + max-width: 300px + font-size: .9em + padding: 5px 10px + z-index: 4 + float: left + word-wrap: break-word + max-width: 60% + min-height: 15px + + .post-photo + position: absolute + left: 0 + top: 10px + + + + .post.sent + + .post-text:after + border-top: solid 7px transparent + border-bottom: solid 7px transparent + border-right: none + border-left: solid 7px white + right: -7px + left: auto + .post-text + float: right + .post-photo + position: absolute + right: 0 + left: auto + diff --git a/sass/layout/_menu.sass b/sass/layout/_menu.sass index 6d37530..c1efbcc 100644 --- a/sass/layout/_menu.sass +++ b/sass/layout/_menu.sass @@ -9,7 +9,7 @@ $menu-font-color: white height: $menu-height left: 0 margin: 0 - background-color: lighten($main-color-dark,20%) + background-color: lighten($main-color-dark,10%) //+background-image(radial-gradient(at top , $color-green,$color-blue) ) z-index: 2 diff --git a/sass/layout/_modal.sass b/sass/layout/_modal.sass index 2a6267c..2dcc5ba 100644 --- a/sass/layout/_modal.sass +++ b/sass/layout/_modal.sass @@ -62,53 +62,31 @@ $header-modal-height : $menu-height font-weight: 500 font-size: 1rem color: white + span + @extend .extend-icon + position: absolute + top: 0 + line-height: $header-modal-height + font-size: 1rem + cursor: pointer + color: rgba(white , 0.7) + transition: color .1s linear + &:hover + color: white -.modal-close - @extend .extend-icon - @extend .icon-cancel - position: absolute - right: 10px - top: 0 - font-size: 14px - line-height: $header-modal-height - cursor: pointer - color: rgba(white , 0.7) - &:hover - color: white - b - display: none + b + display: none -.mark-all-as-read - float: right - cursor: pointer - font-size: 1.3em - line-height: $header-modal-height - padding: 0 5px - color: white - transition: all .1s linear - display: none -.modal-back:hover, .mark-all-as-read:hover - color: white - -.mark-all-as-read - @extend .extend-icon - @extend .icon-ok - - -.modal-back - @extend .extend-icon - @extend .icon-left - position: absolute - right: 35px - top: 0 - font-size: 14px - line-height: $header-modal-height - cursor: pointer - color: rgba(white , 0.7) - &:hover - color: white - b - display: none + &.modal-close + @extend .icon-cancel + right: 10px + &.mark-all-as-read + display: none + @extend .icon-ok + right: 70px + &.modal-back + @extend .icon-left + right: 35px @@ -200,136 +178,9 @@ $header-modal-height : $menu-height .post-area padding-bottom: 6px -/****** DIRECT MESSAGES MODAL**********/ - -.modal-wrapper.directMessages - - .post-area-new - display: none - z-index: 5 - background: $main-background-color - position: absolute - bottom: 0 - width: 100% - padding: 0!important - .modal-header - h3 span - display: inline!important - - .modal-content - +box-sizing(border-box) - width: 100% - - .post-photo - height: 48px - width: 48px - .post-text - margin-left: 58px - font-size: .9em - .post-info-name - float: none - .post-info-tag - line-height: 1em - padding: 0 - display: inline - font-size: 80% - margin: 0 0 0 1em - .post-info-sent - position: absolute - left: 50% - top: 10px - display: none - -.direct-messages-list .post - padding: 20px - cursor: pointer - &:after - content: "" - font-family: $symbol-font-family - position: absolute - right: 5px - top: 50% - font-size: 1.1em - margin: -6px 0 0 0 - color: rgba(0, 0, 0, 0.4) - display: none - -.direct-messages-list - .post:hover:after - display: block - -.direct-messages-thread - padding-bottom: 150px - .post - @extend .clear-fix - background: none - left: 0 - margin: 0px 10px 20px 10px - cursor: default - .post-info-time - float: none - display: block - text-align: center - font-size: 10px - margin: 10px 0 - cursor: default - &:hover - color: $main-color-light - - - .post-text:after, .post-text:nth-child(2n):after - content: "" - width: 1px - background: transparent - position: absolute - top: 10px - white-space: normal - - .post-text:after - border-top: solid 7px transparent - border-bottom: solid 7px transparent - border-right: solid 7px white - left: -7px - - .post-text - background: white - margin-right: 60px - margin-left: 60px - position: relative - display: inline-block - max-width: 300px - font-size: .9em - padding: 5px 10px - z-index: 4 - float: left - word-wrap: break-word - max-width: 60% - min-height: 15px - - .post-photo - position: absolute - left: 0 - top: 10px - - - - .post.sent - - .post-text:after - border-top: solid 7px transparent - border-bottom: solid 7px transparent - border-right: none - border-left: solid 7px white - right: -7px - left: auto - .post-text - float: right - .post-photo - position: absolute - right: 0 - left: auto - +/********* DIRECT MESSAGES MODAL ***********/ +@import '_dm' diff --git a/sass/layout/_responsive.sass b/sass/layout/_responsive.sass index 09bc680..6f9985d 100644 --- a/sass/layout/_responsive.sass +++ b/sass/layout/_responsive.sass @@ -14,44 +14,3 @@ @media (max-width: 600px) - @for $i from 1 through $grid_cols - $j: $i - 1 - .#{$class-col}-#{$i} - width: 100% - margin: 0 $grid_gut $grid_gut 0 - - .col - float: none - padding: 0 20px - - .text-right - text-align: left - - .modal-wrapper - width: 100% - z-index: 1200 - .profile-modal - .modal-content - padding: 0 - .profile-card - width: 100% - float: none - margin: 0 auto - position: fixed - height: 100px!important - overflow: hidden - z-index: 5000 - +box-shadow(0 0 20px #000) - .twister-user-info , .who-follow - display: none - .modal-header - z-index: 1200 - .postboard - position: fixed - bottom: 0 - width: 100% - padding: 0 - .dashboard.right - position: absolute - top: 150px - z-index: 12 \ No newline at end of file diff --git a/sass/pages/_login.sass b/sass/pages/_login.sass index 9f17944..fea22ba 100644 --- a/sass/pages/_login.sass +++ b/sass/pages/_login.sass @@ -7,8 +7,7 @@ .module background: white - @extend .col - @extend .col-6 + padding: $space p diff --git a/sass/pages/_network.sass b/sass/pages/_network.sass index 85bd151..de7fb8c 100644 --- a/sass/pages/_network.sass +++ b/sass/pages/_network.sass @@ -9,13 +9,11 @@ .module - @extend .col - @extend .col-6 + background: $bloc-background-color +box-shadow(0 1px 1px rgba(#555, .1)) margin-bottom: 50px &:last-child - @extend .last h2 +background-image(linear-gradient(to right , $color-green, #5E80A2) ) diff --git a/sass/style.sass b/sass/style.sass index 64f4e09..5635a43 100755 --- a/sass/style.sass +++ b/sass/style.sass @@ -210,7 +210,7 @@ ul.userMenu-search-profiles display: block position: relative font-size: .8em - width: 33.3% + width: 25% float: left border-right: 1px solid $main-background-color &:last-child @@ -283,7 +283,8 @@ ul.userMenu-search-profiles padding: 0 0 1em 0 text-align: center background: $bloc-background-color - + .mini-profile & + display: none li display: inline margin: 0 5px