Browse Source

cleaning .sass

nin-v2
Mylene 9 years ago
parent
commit
db0edc0360
  1. 337
      css/style.css
  2. 15
      js/theme_option.js
  3. 141
      sass/layout/_dm.sass
  4. 2
      sass/layout/_menu.sass
  5. 199
      sass/layout/_modal.sass
  6. 41
      sass/layout/_responsive.sass
  7. 3
      sass/pages/_login.sass
  8. 4
      sass/pages/_network.sass
  9. 5
      sass/style.sass

337
css/style.css

@ -107,7 +107,7 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, @@ -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, @@ -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, @@ -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, @@ -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, @@ -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 { @@ -359,7 +359,7 @@ strong, b {
}
img {
background: #222;
background: #f6f6f6;
}
h1 {
@ -418,14 +418,14 @@ h3 .isFollowing:after { @@ -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 { @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 { @@ -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 { @@ -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 { @@ -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 { @@ -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 { @@ -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;
}

15
js/theme_option.js

@ -2,24 +2,25 @@ @@ -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', '');

141
sass/layout/_dm.sass

@ -0,0 +1,141 @@ @@ -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

2
sass/layout/_menu.sass

@ -9,7 +9,7 @@ $menu-font-color: white @@ -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

199
sass/layout/_modal.sass

@ -62,53 +62,31 @@ $header-modal-height : $menu-height @@ -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 @@ -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'

41
sass/layout/_responsive.sass

@ -14,44 +14,3 @@ @@ -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

3
sass/pages/_login.sass

@ -7,8 +7,7 @@ @@ -7,8 +7,7 @@
.module
background: white
@extend .col
@extend .col-6
padding: $space
p

4
sass/pages/_network.sass

@ -9,13 +9,11 @@ @@ -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) )

5
sass/style.sass

@ -210,7 +210,7 @@ ul.userMenu-search-profiles @@ -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 @@ -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

Loading…
Cancel
Save