twisterarmy
/
theme_nin
mirror of https://github.com/twisterarmy/theme_nin.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

modals views in fixed sidebar

nin-v2
myleneb 9 years ago
parent
35d34708b6
commit
a2d3ce178d
8 changed files with 164 additions and 130 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 146
      css/style.css
  2. 20
      js/theme_option.js
  3. 1
      sass/base/_commons.sass
  4. 6
      sass/layout/_dm.sass
  5. 4
      sass/layout/_menu.sass
  6. 3
      sass/layout/_modal.sass
  7. 7
      sass/layout/_postboard.sass
  8. 101
      sass/style.sass

146
css/style.css
Unescape View File

@ -364,13 +364,13 @@ h3 .isFollowing:after {
display: none; display: none;
} }
.box-shadow, .modal-wrapper, .postboard .post, .dashboard > .module, .mini-profile, ol.toptrends-list a, ul.dropdown-menu { .box-shadow, .modal-wrapper, .postboard .post, .dashboard > .module, .mini-profile, ul.dropdown-menu {
-moz-box-shadow: 0 8px 13px rgba(17, 17, 17, 0); -moz-box-shadow: 0 8px 13px rgba(17, 17, 17, 0);
-webkit-box-shadow: 0 8px 13px rgba(17, 17, 17, 0); -webkit-box-shadow: 0 8px 13px rgba(17, 17, 17, 0);
box-shadow: 0 8px 13px rgba(17, 17, 17, 0); box-shadow: 0 8px 13px rgba(17, 17, 17, 0);
} }
.clear-fix:after, .userMenu > ul:after, .modal-content:after, .modal-header:after, .direct-messages-thread .post:after, .mini-following-info a: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 ol:after, .twister-user:after { .clear-fix:after, .userMenu > ul:after, .modal-content:after, .modal-header:after, .direct-messages-thread .post:after, .mini-following-info a:after, .forEdition.profile-card:after, .expanded-content:after, .following .following-list li a:after, .network.singleBlock:after, .options .tab-content:after, .dashboard > .module: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 ol:after, .twister-user:after {
content: ""; content: "";
display: table; display: table;
clear: both; clear: both;
@ -462,8 +462,10 @@ button.light:hover, a.button.light:hover {
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
max-width: 70%; max-width: 100%;
padding: 0 20px;
margin: 0; margin: 0;
margin: auto;
background: url('../img/logo.png?1437893891') no-repeat 50% 50%; background: url('../img/logo.png?1437893891') no-repeat 50% 50%;
background-size: 20px; background-size: 20px;
} }
@ -566,12 +568,9 @@ button.light:hover, a.button.light:hover {
right: 0; right: 0;
bottom: 0; bottom: 0;
overflow: hidden; overflow: hidden;
-moz-border-radius: 20px 0 0 0; -moz-box-shadow: 0 8px 13px rgba(17, 17, 17, 0.2);
-webkit-border-radius: 20px; -webkit-box-shadow: 0 8px 13px rgba(17, 17, 17, 0.2);
border-radius: 20px 0 0 0; box-shadow: 0 8px 13px rgba(17, 17, 17, 0.2);
-moz-box-shadow: -8px 0 13px rgba(17, 17, 17, 0.2);
-webkit-box-shadow: -8px 0 13px rgba(17, 17, 17, 0.2);
box-shadow: -8px 0 13px rgba(17, 17, 17, 0.2);
} }
.modal-wrapper .postboard { .modal-wrapper .postboard {
border: none; border: none;
@ -743,7 +742,7 @@ button.light:hover, a.button.light:hover {
.modal-wrapper.directMessages .post-area-new { .modal-wrapper.directMessages .post-area-new {
display: none; display: none;
z-index: 5; z-index: 5;
background: #EBEBEB !important; background: #FDFCFA !important;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
width: 100% !important; width: 100% !important;
@ -758,9 +757,6 @@ button.light:hover, a.button.light:hover {
padding: 5px; padding: 5px;
width: 100% !important; width: 100% !important;
} }
.modal-wrapper.directMessages .post-area-extras span {
color: white;
}
.modal-wrapper.directMessages .modal-header h3 span { .modal-wrapper.directMessages .modal-header h3 span {
display: inline-block !important; display: inline-block !important;
padding-left: 5px; padding-left: 5px;
@ -1227,9 +1223,9 @@ button.light:hover, a.button.light:hover {
/************* POST BOARD ************ */ /************* POST BOARD ************ */
.postboard { .postboard {
width: 40%; width: 55%;
margin-left: 30%; margin-left: 15%;
padding: 20px; padding: 7px 20px;
} }
.postboard h2 { .postboard h2 {
display: none; display: none;
@ -1317,6 +1313,7 @@ button.light:hover, a.button.light:hover {
display: inline-block; display: inline-block;
float: left; float: left;
vertical-align: middle; vertical-align: middle;
overflow: hidden;
width: 40px; width: 40px;
} }
.post-photo img { .post-photo img {
@ -1833,27 +1830,29 @@ button.light:hover, a.button.light:hover {
.promoted-posts-only { .promoted-posts-only {
margin: 0 0; margin: 0 0;
float: right;
} }
.promoted-posts-only li { .promoted-posts-only li {
cursor: pointer; cursor: pointer;
display: block; display: block;
margin: 0; margin: 0;
padding: 5px 15px; padding: 5px;
border-bottom: 1px solid #EBEBEB;
text-align: center;
font-size: 0.9em; font-size: 0.9em;
transition: color 0.1s linear; transition: color 0.1s linear;
} }
.promoted-posts-only li.active { .promoted-posts-only li.disabled {
color: #222; background: #F4F3F2;
background: white; }
.promoted-posts-only li.active, .promoted-posts-only li.active span {
color: #444;
cursor: default; cursor: default;
} }
.promoted-posts-only li:hover, .promoted-posts-only li.disabled:hover { .promoted-posts-only li:hover span, .promoted-posts-only li.disabled:hover span {
color: #222; color: #444;
} }
.promoted-posts-only li.disabled { .promoted-posts-only li.disabled span {
color: #aaa; color: rgba(68, 68, 68, 0.3);
background: #C3C3C3;
} }
/* Wrapper and blocks */ /* Wrapper and blocks */
@ -1870,10 +1869,11 @@ button.light:hover, a.button.light:hover {
position: absolute; position: absolute;
top: 50px; top: 50px;
left: 0; left: 0;
width: 30%; width: 15%;
} }
.dashboard.left > .module { .dashboard.left > .module {
float: right; float: right;
width: 128px;
} }
.dashboard.right { .dashboard.right {
position: fixed; position: fixed;
@ -1951,7 +1951,7 @@ ul.userMenu-search-profiles li a {
padding: 0; padding: 0;
color: #444; color: #444;
} }
ul.userMenu-search-profiles li a span, ul.userMenu-search-profiles li a b { ul.userMenu-search-profiles li a span, ul.userMenu-search-profiles li a b, ul.userMenu-search-profiles li a span:hover, ul.userMenu-search-profiles li a b:hover {
display: inline-block; display: inline-block;
color: #444; color: #444;
font-weight: 400; font-weight: 400;
@ -2028,8 +2028,7 @@ ul.userMenu-search-profiles button {
margin: 0; margin: 0;
text-align: center; text-align: center;
border-top: 1px solid #EBEBEB; border-top: 1px solid #EBEBEB;
border-bottom: 1px solid #EBEBEB; background: #F4F3F2;
background: white;
} }
.mini-profile-indicators li { .mini-profile-indicators li {
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
@ -2038,13 +2037,8 @@ ul.userMenu-search-profiles button {
display: block; display: block;
position: relative; position: relative;
font-size: 0.8em; font-size: 0.8em;
width: 25%;
float: left;
text-align: center; text-align: center;
border-right: 1px solid #EBEBEB; border-bottom: 1px solid #EBEBEB;
}
.mini-profile-indicators li:last-child {
border: none;
} }
.mini-profile-indicators li a { .mini-profile-indicators li a {
color: #777777; color: #777777;
@ -2053,6 +2047,7 @@ ul.userMenu-search-profiles button {
} }
.mini-profile-indicators li a:hover { .mini-profile-indicators li a:hover {
color: #444; color: #444;
background: #FDFCFA;
} }
.mini-profile-indicators li a:before { .mini-profile-indicators li a:before {
display: block !important; display: block !important;
@ -2084,24 +2079,22 @@ ul.userMenu-search-profiles button {
.mini-profile-name { .mini-profile-name {
color: #444; color: #444;
font-size: 1.3em; font-size: 1em;
font-weight: 700; font-weight: 500;
padding: 10px 0; padding: 10px 0;
display: block; display: block;
text-align: center;
margin: auto; margin: auto;
} }
.mini-profile-name:hover { .mini-profile-name:hover {
color: #aaa; color: #aaa;
} }
.mini-profile-photo { .mini-profile-photo img {
width: 64px; width: 64px;
height: auto; height: auto;
display: block; display: block;
margin: auto; margin: 32px auto 0 auto;
}
.mini-profile-photo img {
width: 100%;
} }
.profile-data { .profile-data {
@ -2132,6 +2125,16 @@ ul.userMenu-search-profiles button {
padding-right: 5px; padding-right: 5px;
} }
.mini-profile a span.following-count {
display: block;
font-weight: 900;
font-size: 1.2rem;
color: #777777;
}
.mini-profile a:hover span.following-count {
color: #444;
}
.mini-profile-info a:hover { .mini-profile-info a:hover {
text-decoration: none; text-decoration: none;
} }
@ -2197,20 +2200,41 @@ ul.userMenu-search-profiles button {
border-bottom: solid 1px #A1B775; border-bottom: solid 1px #A1B775;
} }
.mini-profile .post-area {
display: none;
}
#postboard-top { #postboard-top {
clear: both; clear: both;
position: fixed; position: relative;
top: 50px; margin-bottom: 10px;
width: 30%;
margin-bottom: 1px;
left: 0;
transition: height 0.3s linear; transition: height 0.3s linear;
padding: 10px 10px 5px 10px; padding: 10px;
background: white; background: white;
overflow: hidden; overflow: hidden;
display: none; background: #FDFCFA;
-moz-box-shadow: 0 0 13px rgba(17, 17, 17, 0);
-webkit-box-shadow: 0 0 13px rgba(17, 17, 17, 0);
box-shadow: 0 0 13px rgba(17, 17, 17, 0);
-moz-transition-property: box-shadow;
-o-transition-property: box-shadow;
-webkit-transition-property: box-shadow;
transition-property: box-shadow;
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
-moz-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
z-index: 120; z-index: 120;
} }
#postboard-top.on, #postboard-top {
-moz-box-shadow: 0 8px 13px rgba(17, 17, 17, 0.2);
-webkit-box-shadow: 0 8px 13px rgba(17, 17, 17, 0.2);
box-shadow: 0 8px 13px rgba(17, 17, 17, 0.2);
}
#postboard-top.hide { #postboard-top.hide {
display: none !important; display: none !important;
} }
@ -2235,6 +2259,7 @@ ul.userMenu-search-profiles button {
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
background: none;
float: right; float: right;
} }
#postboard-top .post-area .post-area-new { #postboard-top .post-area .post-area-new {
@ -2411,8 +2436,7 @@ img.twister-user-photo {
letter-spacing: 0; letter-spacing: 0;
float: right; float: right;
display: block; display: block;
padding: 4px; margin: 5px;
margin: 0 0 0 15px;
position: relative; position: relative;
} }
@ -2425,8 +2449,7 @@ img.twister-user-photo {
letter-spacing: 0; letter-spacing: 0;
float: right; float: right;
display: block; display: block;
padding: 4px; margin: 5px;
margin: 0 0 0 15px;
position: relative; position: relative;
} }
@ -2437,15 +2460,16 @@ img.twister-user-photo {
} }
/***********TOP TRENDS************** */ /***********TOP TRENDS************** */
ol.toptrends-list { .toptrends-list {
margin: 0; margin: 0;
margin-bottom: 10px;
clear: both; clear: both;
border-top: 1px solid #EBEBEB;
padding: 10px;
} }
ol.toptrends-list li { .toptrends-list li {
display: inline-block; display: inline-block;
} }
ol.toptrends-list a { .toptrends-list a {
color: #aaa; color: #aaa;
padding: 3px 8px; padding: 3px 8px;
display: inline-block; display: inline-block;
@ -2454,9 +2478,11 @@ ol.toptrends-list a {
margin: 3px; margin: 3px;
font-weight: 500; font-weight: 500;
background: white; background: white;
-moz-box-shadow: 0 5px 8px rgba(85, 85, 85, 0.2);
-webkit-box-shadow: 0 5px 8px rgba(85, 85, 85, 0.2);
box-shadow: 0 5px 8px rgba(85, 85, 85, 0.2);
} }
ol.toptrends-list a:hover { .toptrends-list a:hover {
background: rgba(255, 255, 255, 0.4);
color: #222; color: #222;
} }

20
js/theme_option.js
Unescape View File

@ -4,30 +4,34 @@
$(window).resize(function() $(window).resize(function()
{ {
$('.module.toptrends').detach().appendTo($('.dashboard.right'));
$('.module.who-to-follow').detach().appendTo($('.dashboard.right')); $('.module.who-to-follow').detach().appendTo($('.dashboard.right'));
$('.module.twistday-reminder').detach().appendTo($('.dashboard.right')); $('.module.twistday-reminder').detach().appendTo($('.dashboard.right'));
}); });
$(document).ready(function() $(document).ready(function()
{ {
$('.module.toptrends').detach().appendTo($('.dashboard.right'));
$('.module.who-to-follow').detach().appendTo($('.dashboard.right')); $('.module.who-to-follow').detach().appendTo($('.dashboard.right'));
$('.module.twistday-reminder').detach().appendTo($('.dashboard.right')); $('.module.twistday-reminder').detach().appendTo($('.dashboard.right'));
$('#postboard-top textarea').on('blur',function(){$('#postboard-top').removeClass('on');});
$('#postboard-top textarea').on('focus',function(){$('#postboard-top').addClass('on');});
var windowHeight = $(window).height(); var windowHeight = $(window).height();
$('.modal-close').html(''); $('.modal-close').html('');
//$('.mini-profile .open-following-page').parent('li').detach().appendTo($('.mini-profile-indicators')); $('.mini-profile .open-following-page').parent('li').detach().appendTo($('.mini-profile-indicators'));
$('.modal-back').html(''); $('.modal-back').html('');
$('.twister-user-remove').html(''); $('.twister-user-remove').html('');
$('.profile-card-main').attr('style', ''); $('.profile-card-main').attr('style', '');
$('.userMenu-search-profiles button').html('+').attr('title',polyglot.t('Follow')); $('.userMenu-search-profiles button').html('+').attr('title',polyglot.t('Follow'));
$('.mini-profile-actions span').html(''); $('.mini-profile-actions span').html('');
$('.promoted-posts-only').detach().appendTo($('.dashboard.left')); $('.promoted-posts-only').detach().appendTo($('.left .mini-profile'));
$('.mini-profile-indicators').detach().insertAfter($('.dashboard.left .profile-data')); $('.mini-profile-indicators').detach().insertAfter($('.dashboard.left .profile-data'));
$('.post-context').each(function(){ $('.post-context').each(function(){
$(this).prependTo($(this).parent()); $(this).prependTo($(this).parent());
@ -47,11 +51,11 @@ $(document).ready(function()
//active promoted posts tab //active promoted posts tab
$(this).children('.promoted-posts').addClass(promotedPostsOnly ? "active" : "disabled"); $(this).children('.promoted-posts').addClass(promotedPostsOnly ? "active" : "disabled");
$(this).children('.normal-posts').addClass(promotedPostsOnly ? "disabled" : "active"); $(this).children('.normal-posts').addClass(promotedPostsOnly ? "disabled" : "active");
//$('#postboard-top').removeClass(promotedPostsOnly ? "show" : "hide"); $('#postboard-top').removeClass(promotedPostsOnly ? "show" : "hide");
//active normal posts //active normal posts
$(this).children('.promoted-posts').removeClass(promotedPostsOnly ? "disabled" : "active"); $(this).children('.promoted-posts').removeClass(promotedPostsOnly ? "disabled" : "active");
$(this).children('.normal-posts').removeClass(promotedPostsOnly ? "active" : "disabled"); $(this).children('.normal-posts').removeClass(promotedPostsOnly ? "active" : "disabled");
//$('#postboard-top').addClass(promotedPostsOnly ? "hide" : "show"); $('#postboard-top').addClass(promotedPostsOnly ? "hide" : "show");
}); });

1
sass/base/_commons.sass
Unescape View File

@ -17,7 +17,6 @@ html
background-color: $main-background-color background-color: $main-background-color
//+background-image(linear-gradient(to top right, #fff, $main-background-color, #fff) ) //+background-image(linear-gradient(to top right, #fff, $main-background-color, #fff) )
background-attachment: fixed background-attachment: fixed
body body
font-size: $main-font-size font-size: $main-font-size
line-height : $main-line-height line-height : $main-line-height

6
sass/layout/_dm.sass
Unescape View File

@ -5,7 +5,7 @@
.post-area-new .post-area-new
display: none display: none
z-index: 5 z-index: 5
background: $bloc-background-color !important background: $bloc-light-color !important
position: absolute position: absolute
bottom: 0 bottom: 0
width: 100% !important width: 100% !important
@ -17,10 +17,6 @@
padding: 5px padding: 5px
width: 100%!important width: 100%!important
.post-area-extras
span
color: white
.modal-header .modal-header
h3 span h3 span

4
sass/layout/_menu.sass
Unescape View File

@ -17,8 +17,10 @@ $menu-font-color: white
@extend .clear-fix @extend .clear-fix
+box-sizing(border-box) +box-sizing(border-box)
width: 100% width: 100%
max-width: 70% max-width: 100%
padding: 0 20px
margin: 0 margin: 0
margin: auto
background: image-url("logo.png") no-repeat 50% 50% background: image-url("logo.png") no-repeat 50% 50%
background-size: 20px background-size: 20px
li li

3
sass/layout/_modal.sass
Unescape View File

@ -19,8 +19,7 @@ $header-modal-height : $menu-height
right: 0 right: 0
bottom: 0 bottom: 0
overflow: hidden overflow: hidden
+border-radius(20px 0 0 0) +box-shadow(0 8px 13px rgba(#111, 0.2))
+box-shadow(-8px 0 13px rgba(#111, 0.2))
.postboard .postboard
border: none border: none
padding: 0 padding: 0

7
sass/layout/_postboard.sass
Unescape View File

@ -6,9 +6,9 @@
.postboard .postboard
width: 40% width: 55%
margin-left: 30% margin-left: 15%
padding: 20px padding: 7px 20px
h2 h2
display: none display: none
.postboard-posts .postboard-posts
@ -79,6 +79,7 @@
display: inline-block display: inline-block
float: left float: left
vertical-align: middle vertical-align: middle
overflow: hidden
width: $mini-usr-img width: $mini-usr-img
img img
width: 100% width: 100%

101
sass/style.sass
Unescape View File

@ -27,25 +27,25 @@
.promoted-posts-only .promoted-posts-only
margin: 0 0 margin: 0 0
@extend .clear-fix
float: right
li li
cursor: pointer cursor: pointer
display: block display: block
margin: 0 margin: 0
padding: 5px 15px padding: 5px
border-bottom: 1px solid $main-background-color
text-align: center
font-size: .9em font-size: .9em
transition: color .1s linear transition: color .1s linear
&.active
color: $main-color-dark
background: white
cursor: default
&:hover, &.disabled:hover
color: $main-color-dark
&.disabled &.disabled
color: $main-color-light background: #F4F3F2
background: $light-grey &.active, &.active span
color: $defaut-font-color
cursor: default
&:hover span, &.disabled:hover span
color: $defaut-font-color
&.disabled span
color: rgba($defaut-font-color, .3)
@ -66,9 +66,10 @@
position: absolute position: absolute
top: $menu-height top: $menu-height
left: 0 left: 0
width: 30% width: 15%
> .module > .module
float: right float: right
width: $usr-img * 2
&.right &.right
position: fixed position: fixed
right: 0 right: 0
@ -82,6 +83,7 @@
background: $bloc-light-color background: $bloc-light-color
width: 100% width: 100%
@extend .box-shadow @extend .box-shadow
@extend .clear-fix
h3 h3
float: left float: left
padding: 20px padding: 20px
@ -145,7 +147,7 @@ ul.userMenu-search-profiles
margin: 0 margin: 0
padding: 0 padding: 0
color: $defaut-font-color color: $defaut-font-color
span, b span, b, span:hover, b:hover
display: inline-block display: inline-block
color: $defaut-font-color color: $defaut-font-color
font-weight: 400 font-weight: 400
@ -203,8 +205,6 @@ ul.userMenu-search-profiles
.mini-profile .mini-profile
@extend .box-shadow @extend .box-shadow
.mini-profile-info
a.button a.button
background: $main-color-light background: $main-color-light
@ -227,20 +227,15 @@ ul.userMenu-search-profiles
text-align: center text-align: center
@extend .clear-fix @extend .clear-fix
border-top: 1px solid $main-background-color border-top: 1px solid $main-background-color
border-bottom: 1px solid $main-background-color background: #F4F3F2
background: white
li li
+box-sizing(border-box) +box-sizing(border-box)
display: block display: block
position: relative position: relative
font-size: .8em font-size: .8em
width: 25%
float: left
text-align: center text-align: center
border-right: 1px solid $main-background-color border-bottom: 1px solid $main-background-color
&:last-child
border: none
a a
color: lighten($dark-grey,20%) color: lighten($dark-grey,20%)
@ -248,6 +243,7 @@ ul.userMenu-search-profiles
padding: 1rem 0 padding: 1rem 0
&:hover &:hover
color: $dark-grey color: $dark-grey
background: $bloc-light-color
&:before &:before
display: block!important display: block!important
width: 100%!important width: 100%!important
@ -283,22 +279,21 @@ ul.userMenu-search-profiles
.mini-profile-name .mini-profile-name
color: $dark-grey color: $dark-grey
font-size: 1.3em font-size: 1em
font-weight: 700 font-weight: 500
padding: 10px 0 padding: 10px 0
display: block display: block
text-align: center
margin: auto margin: auto
&:hover &:hover
color: $main-color-light color: $main-color-light
.mini-profile-photo .mini-profile-photo img
width: $usr-img width: $usr-img
height: auto height: auto
display: block display: block
margin: auto margin: 32px auto 0 auto
img
width: 100%
@ -325,7 +320,15 @@ ul.userMenu-search-profiles
&.posts-count, &.following-count, &.followers-count &.posts-count, &.following-count, &.followers-count
display: inline-block display: inline-block
padding-right: 5px padding-right: 5px
.mini-profile
a
span.following-count
display: block
font-weight: 900
font-size: 1.2rem
color: lighten($dark-grey,20%)
&:hover span.following-count
color: $dark-grey
.mini-profile-info a:hover .mini-profile-info a:hover
text-decoration: none text-decoration: none
@ -364,6 +367,7 @@ ul.userMenu-search-profiles
/***************** POST AREA ***************/ /***************** POST AREA ***************/
.post-area-new .post-area-new
textarea textarea
resize: none resize: none
+box-sizing(border-box) +box-sizing(border-box)
@ -383,19 +387,26 @@ ul.userMenu-search-profiles
&:focus &:focus
border-bottom: solid 1px $main-color-color border-bottom: solid 1px $main-color-color
.mini-profile .post-area
display: none
#postboard-top #postboard-top
clear: both clear: both
position: fixed position: relative
top: $menu-height
width: 30%
@extend .clear-fix @extend .clear-fix
margin-bottom: 1px margin-bottom: 10px
left: 0
transition: height .3s linear transition: height .3s linear
padding: 10px 10px 5px 10px padding: 10px
background: white background: white
overflow: hidden overflow: hidden
display: none background: $bloc-light-color
+box-shadow(0 0 13px rgba(#111, 0))
+transition-property(box-shadow)
+transition-duration(.2s)
+transition-timing-function(ease-out)
@extend .on
&.on
+box-shadow(0 8px 13px rgba(#111, 0.2))
z-index: 120 z-index: 120
&.hide &.hide
display: none!important display: none!important
@ -417,6 +428,7 @@ ul.userMenu-search-profiles
padding-right: 0 padding-right: 0
display: inline display: inline
+box-sizing(border-box) +box-sizing(border-box)
background: none
float: right float: right
.post-area-new .post-area-new
@extend .open @extend .open
@ -580,8 +592,7 @@ img.twister-user-photo
letter-spacing: 0 letter-spacing: 0
float: right float: right
display: block display: block
padding: 4px margin: 5px
margin: 0 0 0 15px
position: relative position: relative
.view-all-users .view-all-users
@ -593,8 +604,7 @@ img.twister-user-photo
letter-spacing: 0 letter-spacing: 0
float: right float: right
display: block display: block
padding: 4px margin: 5px
margin: 0 0 0 15px
position: relative position: relative
.refresh-toptrends:hover, .twistday-reminder .refresh:hover, .refresh-users:hover, .view-all-users:hover .refresh-toptrends:hover, .twistday-reminder .refresh:hover, .refresh-users:hover, .view-all-users:hover
@ -604,13 +614,11 @@ img.twister-user-photo
/***********TOP TRENDS***************/ /***********TOP TRENDS***************/
.toptrends .toptrends-list
ol.toptrends-list
margin: 0 margin: 0
margin-bottom: 10px
clear: both clear: both
border-top: 1px solid $main-background-color
padding: 10px
li li
display: inline-block display: inline-block
@ -624,9 +632,8 @@ ol.toptrends-list
margin: 3px margin: 3px
font-weight: 500 font-weight: 500
background: white background: white
@extend .box-shadow +box-shadow(0 5px 8px rgba(#555, 0.2))
&:hover &:hover
background: rgba(white,.4)
color: $main-color-dark color: $main-color-dark
/********* TWISTDAY REMINDER *******/ /********* TWISTDAY REMINDER *******/

Write Preview
Loading…
Cancel
Save