Browse Source

modal & search style

nin-v2
myleneb 9 years ago
parent
commit
b98f4069aa
  1. 163
      css/style.css
  2. 10
      js/theme_option.js
  3. 7
      sass/base/_utils.sass
  4. 6
      sass/base/_var.sass
  5. 23
      sass/layout/_dm.sass
  6. 17
      sass/layout/_modal.sass
  7. 10
      sass/layout/_postboard.sass
  8. 13
      sass/layout/_profile.sass
  9. 6
      sass/pages/_following.sass
  10. 79
      sass/style.sass

163
css/style.css

@ -243,6 +243,7 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
/* '' */ /* '' */
/* FONTS */ /* FONTS */
/* usefull vars */
* { * {
outline: none !important; outline: none !important;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
@ -437,6 +438,15 @@ button.small, .modal-wrapper.who-to-follow-modal button, .who-to-follow.module l
font-size: 0.7rem; font-size: 0.7rem;
line-height: 0.7rem; line-height: 0.7rem;
} }
button.light, a.button.light {
background: #eee;
border-color: #e1e1e1;
color: #222;
font-weight: 500;
}
button.light:hover, a.button.light:hover {
border-color: #aeaeae;
}
.userMenu { .userMenu {
width: 100%; width: 100%;
@ -556,6 +566,12 @@ button.small, .modal-wrapper.who-to-follow-modal button, .who-to-follow.module l
right: 0; right: 0;
bottom: 0; bottom: 0;
overflow: hidden; overflow: hidden;
-moz-border-radius: 20px 0 0 0;
-webkit-border-radius: 20px;
border-radius: 20px 0 0 0;
-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;
@ -727,11 +743,23 @@ button.small, .modal-wrapper.who-to-follow-modal button, .who-to-follow.module l
.modal-wrapper.directMessages .post-area-new { .modal-wrapper.directMessages .post-area-new {
display: none; display: none;
z-index: 5; z-index: 5;
background: #222 !important; background: #EBEBEB !important;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
width: 100% !important; width: 100% !important;
padding: 20px !important; padding: 20px !important;
-moz-box-shadow: 0 -8px 13px rgba(17, 17, 17, 0.1);
-webkit-box-shadow: 0 -8px 13px rgba(17, 17, 17, 0.1);
box-shadow: 0 -8px 13px rgba(17, 17, 17, 0.1);
}
.modal-wrapper.directMessages #post-preview {
background: none;
border: none;
padding: 5px;
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;
@ -747,11 +775,10 @@ button.small, .modal-wrapper.who-to-follow-modal button, .who-to-follow.module l
background: #f0f0f0; background: #f0f0f0;
} }
.modal-wrapper.directMessages .post-photo { .modal-wrapper.directMessages .post-photo {
height: 48px; width: 40px;
width: 48px;
} }
.modal-wrapper.directMessages .post-text { .modal-wrapper.directMessages .post-text {
margin-left: 58px; margin-left: 50px;
font-size: 0.9rem; font-size: 0.9rem;
} }
.modal-wrapper.directMessages .post-info-name { .modal-wrapper.directMessages .post-info-name {
@ -796,6 +823,7 @@ button.small, .modal-wrapper.who-to-follow-modal button, .who-to-follow.module l
.direct-messages-list li { .direct-messages-list li {
position: relative; position: relative;
border-bottom: 1px solid #EBEBEB; border-bottom: 1px solid #EBEBEB;
background: #FDFCFA;
} }
.direct-messages-thread { .direct-messages-thread {
@ -852,7 +880,7 @@ button.small, .modal-wrapper.who-to-follow-modal button, .who-to-follow.module l
float: left; float: left;
word-wrap: break-word; word-wrap: break-word;
max-width: 70%; max-width: 70%;
min-height: 48px; min-height: 40px;
} }
.direct-messages-thread .post .post-photo { .direct-messages-thread .post .post-photo {
position: absolute; position: absolute;
@ -914,21 +942,20 @@ button.small, .modal-wrapper.who-to-follow-modal button, .who-to-follow.module l
.mini-following-info { .mini-following-info {
border-bottom: 1px solid #EBEBEB; border-bottom: 1px solid #EBEBEB;
line-height: 45px; line-height: 40px;
} }
.mini-following-info a { .mini-following-info a {
display: block; display: block;
padding: 10px; padding: 10px;
width: 100%; width: 100%;
color: #444; color: #444;
background: #EBEBEB; background: #FDFCFA;
} }
.mini-following-info a:hover { .mini-following-info a:hover {
background: #FDFCFA; background: white;
} }
.mini-following-info .mini-profile-photo { .mini-following-info .mini-profile-photo {
height: 48px; width: 40px;
width: 48px;
line-height: 0; line-height: 0;
margin: 0 1rem 0 0; margin: 0 1rem 0 0;
float: left; float: left;
@ -958,11 +985,12 @@ button.small, .modal-wrapper.who-to-follow-modal button, .who-to-follow.module l
font-size: 0.8rem; font-size: 0.8rem;
line-height: 1rem; line-height: 1rem;
width: 80%; width: 80%;
padding-left: 60px;
} }
.modal-wrapper.who-to-follow-modal button { .modal-wrapper.who-to-follow-modal button {
position: absolute; position: absolute;
right: 0; right: 10px;
top: 5%; top: 10px;
} }
.modal-wrapper.who-to-follow-modal .bio { .modal-wrapper.who-to-follow-modal .bio {
color: rgba(0, 0, 0, 0.6); color: rgba(0, 0, 0, 0.6);
@ -1050,23 +1078,15 @@ button.small, .modal-wrapper.who-to-follow-modal button, .who-to-follow.module l
} }
.profile-card-photo { .profile-card-photo {
height: 70px; height: auto;
width: 70px; width: 64px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
margin: 0 auto; margin: 0 auto;
display: block; display: block;
float: left;
} }
.profile-card-photo.forEdition { .profile-card-photo.forEdition {
-moz-border-radius: 50%; float: none;
-webkit-border-radius: 50%;
border-radius: 50%;
height: 75px;
margin: 0 auto;
display: block;
width: 75px;
} }
.profile-bio { .profile-bio {
@ -1297,7 +1317,7 @@ button.small, .modal-wrapper.who-to-follow-modal button, .who-to-follow.module l
display: inline-block; display: inline-block;
float: left; float: left;
vertical-align: middle; vertical-align: middle;
width: 45px; width: 40px;
} }
.post-photo img { .post-photo img {
width: 100%; width: 100%;
@ -1339,11 +1359,14 @@ button.small, .modal-wrapper.who-to-follow-modal button, .who-to-follow.module l
} }
.post-text { .post-text {
margin: 0 0 0 55px; margin: 0 0 0 50px;
word-wrap: break-word; word-wrap: break-word;
min-height: 25px; min-height: 20px;
padding: 0; padding: 0;
} }
.post-text a:hover {
text-decoration: underline;
}
.post-context { .post-context {
font-size: 11px; font-size: 11px;
@ -1528,7 +1551,8 @@ button.small, .modal-wrapper.who-to-follow-modal button, .who-to-follow.module l
} }
.following { .following {
width: 100%; width: 40%;
margin-left: 30%;
padding: 20px; padding: 20px;
} }
.following h2 { .following h2 {
@ -1558,8 +1582,7 @@ button.small, .modal-wrapper.who-to-follow-modal button, .who-to-follow.module l
color: #444; color: #444;
} }
.following .mini-profile-photo { .following .mini-profile-photo {
height: 48px; width: 40px;
width: 48px;
line-height: 0; line-height: 0;
margin: 0 1rem 0 0; margin: 0 1rem 0 0;
float: left; float: left;
@ -1814,8 +1837,8 @@ button.small, .modal-wrapper.who-to-follow-modal button, .who-to-follow.module l
} }
.promoted-posts-only li { .promoted-posts-only li {
cursor: pointer; cursor: pointer;
display: inline-block; display: block;
margin: 0 0 0 5px; margin: 0;
padding: 5px 15px; padding: 5px 15px;
font-size: 0.9em; font-size: 0.9em;
transition: color 0.1s linear; transition: color 0.1s linear;
@ -1883,9 +1906,9 @@ button.small, .modal-wrapper.who-to-follow-modal button, .who-to-follow.module l
display: none; display: none;
background: #222; background: #222;
position: absolute; position: absolute;
top: 45px; top: 46px;
right: -10px; right: 0;
width: 250px; width: 320px;
overflow: hidden; overflow: hidden;
-moz-box-shadow: 0 8px 33px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 8px 33px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 8px 33px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0 8px 33px rgba(0, 0, 0, 0.3);
@ -1905,23 +1928,42 @@ button.small, .modal-wrapper.who-to-follow-modal button, .who-to-follow.module l
ul.userMenu-search-profiles { ul.userMenu-search-profiles {
width: 100%; width: 100%;
padding: 0; padding: 0;
background: #FDFCFA;
} }
ul.userMenu-search-profiles li { ul.userMenu-search-profiles li {
float: none; float: none;
display: block; display: block;
margin: 0; margin: 0;
cursor: pointer;
background: #FDFCFA;
border-bottom: 1px solid #EBEBEB; border-bottom: 1px solid #EBEBEB;
} }
ul.userMenu-search-profiles .mini-profile-name { ul.userMenu-search-profiles li:hover {
background: white;
}
ul.userMenu-search-profiles li a {
display: block;
width: 100%;
font-size: 12px; font-size: 12px;
font-weight: 400;
line-height: 40px;
display: block; display: block;
margin: 0; margin: 0;
padding: 0; padding: 0;
color: #444;
}
ul.userMenu-search-profiles li a span, ul.userMenu-search-profiles li a b {
display: inline-block;
color: #444;
font-weight: 400;
font-size: 12px;
}
ul.userMenu-search-profiles .mini-screen-name b,
ul.userMenu-search-profiles .mini-screen-name {
font-weight: 500;
} }
ul.userMenu-search-profiles .mini-profile-photo { ul.userMenu-search-profiles .mini-profile-photo {
width: 30px; width: 40px;
height: 30px; height: auto;
margin: 10px; margin: 10px;
float: left; float: left;
} }
@ -1930,24 +1972,25 @@ ul.userMenu-search-profiles .mini-profile-info {
float: none; float: none;
} }
ul.userMenu-search-profiles button { ul.userMenu-search-profiles button {
padding: 3px 5px; font-size: 1.4rem;
line-height: 25px;
height: 30px;
width: 40px;
text-align: center;
font-weight: 500;
padding: 0;
-moz-border-radius: 2px; -moz-border-radius: 2px;
-webkit-border-radius: 2px; -webkit-border-radius: 2px;
border-radius: 2px; border-radius: 2px;
position: absolute; position: absolute;
bottom: 10px; top: 10px;
right: 10px; right: 10px;
} }
ul.userMenu-search-profiles button:after {
content: "";
font-family: "fontello";
font-size: 1.1rem;
}
.userMenu-search input[type="text"] { .userMenu-search input[type="text"] {
float: right; float: right;
padding: 3px 10px; padding: 3px 10px;
margin: 9px 20px 0 0; margin: 10px 20px 0 0;
border: none; border: none;
background: #EBEBEB; background: #EBEBEB;
box-sizing: border-box; box-sizing: border-box;
@ -2052,19 +2095,13 @@ ul.userMenu-search-profiles button:after {
} }
.mini-profile-photo { .mini-profile-photo {
width: 70px; width: 64px;
height: 70px; height: auto;
overflow: hidden;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
display: block; display: block;
margin: auto; margin: auto;
} }
.mini-profile-photo img { .mini-profile-photo img {
min-width: 100%; width: 100%;
min-height: 100%;
border-radius: 50%;
} }
.profile-data { .profile-data {
@ -2149,7 +2186,7 @@ ul.userMenu-search-profiles button:after {
-moz-transition: height 0.3s linear; -moz-transition: height 0.3s linear;
-o-transition: height 0.3s linear; -o-transition: height 0.3s linear;
-ms-transition: height 0.3s linear; -ms-transition: height 0.3s linear;
height: 48px; height: 40px;
border: none; border: none;
background: white; background: white;
border: 1px solid rgba(0, 0, 0, 0.1); border: 1px solid rgba(0, 0, 0, 0.1);
@ -2162,13 +2199,17 @@ ul.userMenu-search-profiles button:after {
#postboard-top { #postboard-top {
clear: both; clear: both;
position: relative; position: fixed;
top: 50px;
width: 30%;
margin-bottom: 1px; margin-bottom: 1px;
left: 0;
transition: height 0.3s linear; transition: height 0.3s linear;
padding: 10px 10px 5px 10px; padding: 10px 10px 5px 10px;
background: white; background: white;
overflow: hidden; overflow: hidden;
display: none; display: none;
z-index: 120;
} }
#postboard-top.hide { #postboard-top.hide {
display: none !important; display: none !important;
@ -2180,9 +2221,7 @@ ul.userMenu-search-profiles button:after {
position: absolute; position: absolute;
top: 10px; top: 10px;
left: 10px; left: 10px;
width: 48px; width: 40px;
height: 48px;
overflow: hidden;
} }
#postboard-top .profile-photo img { #postboard-top .profile-photo img {
width: 100%; width: 100%;
@ -2307,7 +2346,7 @@ img.twister-user-photo {
float: left; float: left;
display: block; display: block;
float: left; float: left;
width: 48px; width: 40px;
height: auto; height: auto;
margin: 0 10px; margin: 0 10px;
background: #EBEBEB; background: #EBEBEB;

10
js/theme_option.js

@ -25,7 +25,7 @@ $(document).ready(function()
$('.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($('.dashboard.left'));
$('.mini-profile-indicators').detach().insertAfter($('.dashboard.left .profile-data')); $('.mini-profile-indicators').detach().insertAfter($('.dashboard.left .profile-data'));
@ -47,21 +47,21 @@ $(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");
}); });
$(".userMenu-search-profiles .follow") $(".userMenu-search-profiles .follow")
.on("eventToggleFollow", function() { .on("eventToggleFollow", function() {
$(this).text('').attr('title', polyglot.t('Follow')); $(this).text('+').attr('title', polyglot.t('Follow'));
}) })
.on("eventToggleUnfollow", function() { .on("eventToggleUnfollow", function() {
$(this).text('').attr('title', polyglot.t('Unfollow')); $(this).text('-').attr('title', polyglot.t('Unfollow'));
}); });
if (/\/options.html$/i.test(document.location)) if (/\/options.html$/i.test(document.location))

7
sass/base/_utils.sass

@ -59,3 +59,10 @@ button, a.button
font-weight: 700 font-weight: 700
font-size: .7rem font-size: .7rem
line-height: .7rem line-height: .7rem
&.light
background: #eee
border-color: darken(#eee, 5%)
color: $main-color-dark
font-weight: 500
&:hover
border-color: darken(#eee, 25%)

6
sass/base/_var.sass

@ -35,3 +35,9 @@ $main-line-height : 1.4rem
$main-font-family: "Roboto", sans-serif $main-font-family: "Roboto", sans-serif
$symbol-font-family: "fontello" $symbol-font-family: "fontello"
$serif-font-family: "Droid", serif $serif-font-family: "Droid", serif
/* usefull vars */
$mini-usr-img : 40px
$usr-img : 64px

23
sass/layout/_dm.sass

@ -2,15 +2,26 @@
.modal-wrapper.directMessages .modal-wrapper.directMessages
.post-area-new .post-area-new
display: none display: none
z-index: 5 z-index: 5
background: $main-color-dark !important background: $bloc-background-color !important
position: absolute position: absolute
bottom: 0 bottom: 0
width: 100% !important width: 100% !important
padding: 20px!important padding: 20px!important
+box-shadow(0 -8px 13px rgba(#111, 0.1))
#post-preview
background: none
border: none
padding: 5px
width: 100%!important
.post-area-extras
span
color: white
.modal-header .modal-header
h3 span h3 span
display: inline-block!important display: inline-block!important
@ -24,10 +35,9 @@
background: #f0f0f0 background: #f0f0f0
.post-photo .post-photo
height: 48px width: $mini-usr-img
width: 48px
.post-text .post-text
margin-left: 58px margin-left: $mini-usr-img + 10px
font-size: .9rem font-size: .9rem
.post-info-name .post-info-name
float: none float: none
@ -65,6 +75,7 @@
li li
position: relative position: relative
border-bottom: 1px solid $main-background-color border-bottom: 1px solid $main-background-color
background: $bloc-light-color
.direct-messages-thread .direct-messages-thread
padding-bottom: 180px padding-bottom: 180px
@ -121,7 +132,7 @@
float: left float: left
word-wrap: break-word word-wrap: break-word
max-width: 70% max-width: 70%
min-height: 48px min-height: $mini-usr-img
.post-photo .post-photo
position: absolute position: absolute

17
sass/layout/_modal.sass

@ -19,7 +19,8 @@ $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(-8px 0 13px rgba(#111, 0.2))
.postboard .postboard
border: none border: none
padding: 0 padding: 0
@ -231,7 +232,7 @@ $header-modal-height : $menu-height
display: none display: none
.mini-following-info .mini-following-info
border-bottom: 1px solid $main-background-color border-bottom: 1px solid $main-background-color
line-height: 45px line-height: $mini-usr-img
a a
display: block display: block
@ -239,12 +240,11 @@ $header-modal-height : $menu-height
width: 100% width: 100%
@extend .clear-fix @extend .clear-fix
color: $defaut-font-color color: $defaut-font-color
background: $bloc-background-color
&:hover
background: $bloc-light-color background: $bloc-light-color
&:hover
background: white
.mini-profile-photo .mini-profile-photo
height: 48px width: $mini-usr-img
width: 48px
line-height: 0 line-height: 0
margin: 0 $space 0 0 margin: 0 $space 0 0
float: left float: left
@ -277,10 +277,11 @@ $header-modal-height : $menu-height
font-size: .8rem font-size: .8rem
line-height: 1rem line-height: 1rem
width: 80% width: 80%
padding-left: $mini-usr-img + 20
button button
position: absolute position: absolute
right: 0 right: 10px
top: 5% top: 10px
@extend .small @extend .small
.bio .bio
color: rgba(0, 0, 0, 0.6) color: rgba(0, 0, 0, 0.6)

10
sass/layout/_postboard.sass

@ -3,7 +3,6 @@
// vars for postboard // vars for postboard
$avatar-width : 45px
.postboard .postboard
@ -80,7 +79,7 @@ $avatar-width : 45px
display: inline-block display: inline-block
float: left float: left
vertical-align: middle vertical-align: middle
width: $avatar-width width: $mini-usr-img
img img
width: 100% width: 100%
height: auto!important height: auto!important
@ -116,11 +115,12 @@ $avatar-width : 45px
color: lighten($dark-grey,5%) color: lighten($dark-grey,5%)
.post-text .post-text
margin: 0 0 0 ($avatar-width +10) margin: 0 0 0 ($mini-usr-img +10)
word-wrap: break-word word-wrap: break-word
min-height: $avatar-width - 20 min-height: $mini-usr-img - 20
padding: 0 padding: 0
a:hover
text-decoration: underline
.post-context .post-context

13
sass/layout/_profile.sass

@ -89,18 +89,13 @@ $modal-postboard-post-height: 100%
z-index: 1 z-index: 1
.profile-card-photo .profile-card-photo
height: 70px height: auto
width: 70px width: $usr-img
+border-radius(50%)
margin: 0 auto margin: 0 auto
display: block display: block
float: left
.profile-card-photo.forEdition .profile-card-photo.forEdition
+border-radius(50%) float: none
height: 75px
margin: 0 auto
display: block
width: 75px
.profile-bio .profile-bio
padding: 10px padding: 10px

6
sass/pages/_following.sass

@ -1,6 +1,7 @@
.following .following
width: 100% width: 40%
margin-left: 30%
padding: 20px padding: 20px
h2 h2
display: none display: none
@ -23,8 +24,7 @@
.mini-profile-photo .mini-profile-photo
height: 48px width: $mini-usr-img
width: 48px
line-height: 0 line-height: 0
margin: 0 $space 0 0 margin: 0 $space 0 0
float: left float: left

79
sass/style.sass

@ -32,8 +32,8 @@
li li
cursor: pointer cursor: pointer
display: inline-block display: block
margin: 0 0 0 5px margin: 0
padding: 5px 15px padding: 5px 15px
font-size: .9em font-size: .9em
transition: color .1s linear transition: color .1s linear
@ -102,9 +102,9 @@
display: none display: none
background: $main-color-dark background: $main-color-dark
position: absolute position: absolute
top: 45px top: $menu-height - 4
right: -10px right: 0
width: 250px width: 320px
overflow: hidden overflow: hidden
+box-shadow(0 8px 33px rgba(#000, .3)) +box-shadow(0 8px 33px rgba(#000, .3))
@ -122,22 +122,41 @@
ul.userMenu-search-profiles ul.userMenu-search-profiles
width: 100% width: 100%
padding: 0 padding: 0
background: $bloc-light-color
li li
float: none float: none
display: block display: block
margin: 0 margin: 0
@extend .clear-fix @extend .clear-fix
cursor: pointer
background: $bloc-light-color
border-bottom: 1px solid $main-background-color border-bottom: 1px solid $main-background-color
.mini-profile-name &:hover
background: white
a
display: block
width: 100%
font-size: 12px font-size: 12px
font-weight: 400
line-height: $mini-usr-img
display: block display: block
margin: 0 margin: 0
padding: 0 padding: 0
color: $defaut-font-color
span, b
display: inline-block
color: $defaut-font-color
font-weight: 400
font-size: 12px
.mini-screen-name b,
.mini-screen-name
font-weight: 500
.mini-profile-photo .mini-profile-photo
width: 30px width: $mini-usr-img
height: 30px height: auto
margin: 10px margin: 10px
float: left float: left
.mini-profile-info .mini-profile-info
@ -145,15 +164,18 @@ ul.userMenu-search-profiles
float: none float: none
button button
padding: 3px 5px font-size: 1.4rem
line-height: $mini-usr-img - 15
height: $mini-usr-img - 10
width: $mini-usr-img
text-align: center
font-weight: 500
padding: 0
+border-radius(2px) +border-radius(2px)
@extend .extend-icon @extend .extend-icon
&:after
content: ''
font-family: $symbol-font-family
font-size: 1.1rem
position: absolute position: absolute
bottom: 10px top: 10px
right: 10px right: 10px
@ -161,7 +183,7 @@ ul.userMenu-search-profiles
.userMenu-search input[type="text"] .userMenu-search input[type="text"]
float: right float: right
padding: 3px 10px padding: 3px 10px
margin: 9px 20px 0 0 margin: 10px 20px 0 0
border: none border: none
background: $bloc-background-color background: $bloc-background-color
box-sizing: border-box box-sizing: border-box
@ -271,16 +293,12 @@ ul.userMenu-search-profiles
.mini-profile-photo .mini-profile-photo
width: 70px width: $usr-img
height: 70px height: auto
overflow: hidden
+border-radius(50%)
display: block display: block
margin: auto margin: auto
img img
min-width: 100% width: 100%
min-height: 100%
border-radius: (50%)
@ -356,7 +374,7 @@ ul.userMenu-search-profiles
-moz-transition: height 0.3s linear -moz-transition: height 0.3s linear
-o-transition: height 0.3s linear -o-transition: height 0.3s linear
-ms-transition: height 0.3s linear -ms-transition: height 0.3s linear
height: 48px height: $mini-usr-img
border: none border: none
background: rgba(255, 255, 255, 1) background: rgba(255, 255, 255, 1)
border: 1px solid rgba(0, 0, 0, 0.1) border: 1px solid rgba(0, 0, 0, 0.1)
@ -367,14 +385,18 @@ ul.userMenu-search-profiles
#postboard-top #postboard-top
clear: both clear: both
position: relative position: fixed
top: $menu-height
width: 30%
@extend .clear-fix @extend .clear-fix
margin-bottom: 1px margin-bottom: 1px
left: 0
transition: height .3s linear transition: height .3s linear
padding: 10px 10px 5px 10px padding: 10px 10px 5px 10px
background: white background: white
overflow: hidden overflow: hidden
display: none display: none
z-index: 120
&.hide &.hide
display: none!important display: none!important
&.show &.show
@ -384,9 +406,7 @@ ul.userMenu-search-profiles
position: absolute position: absolute
top: 10px top: 10px
left: 10px left: 10px
width: 48px width: $mini-usr-img
height: 48px
overflow: hidden
img img
width: 100% width: 100%
.post-area .post-area
@ -497,8 +517,7 @@ img.twister-user-photo
float: left float: left
display: block display: block
float: left float: left
width: $mini-usr-img
width: 48px
height: auto height: auto
margin: 0 10px margin: 0 10px
background: $main-background-color background: $main-background-color

Loading…
Cancel
Save