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

10
js/theme_option.js

@ -25,7 +25,7 @@ $(document).ready(function() @@ -25,7 +25,7 @@ $(document).ready(function()
$('.modal-back').html('');
$('.twister-user-remove').html('');
$('.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('');
$('.promoted-posts-only').detach().appendTo($('.dashboard.left'));
$('.mini-profile-indicators').detach().insertAfter($('.dashboard.left .profile-data'));
@ -47,21 +47,21 @@ $(document).ready(function() @@ -47,21 +47,21 @@ $(document).ready(function()
//active promoted posts tab
$(this).children('.promoted-posts').addClass(promotedPostsOnly ? "active" : "disabled");
$(this).children('.normal-posts').addClass(promotedPostsOnly ? "disabled" : "active");
$('#postboard-top').removeClass(promotedPostsOnly ? "show" : "hide");
//$('#postboard-top').removeClass(promotedPostsOnly ? "show" : "hide");
//active normal posts
$(this).children('.promoted-posts').removeClass(promotedPostsOnly ? "disabled" : "active");
$(this).children('.normal-posts').removeClass(promotedPostsOnly ? "active" : "disabled");
$('#postboard-top').addClass(promotedPostsOnly ? "hide" : "show");
//$('#postboard-top').addClass(promotedPostsOnly ? "hide" : "show");
});
$(".userMenu-search-profiles .follow")
.on("eventToggleFollow", function() {
$(this).text('').attr('title', polyglot.t('Follow'));
$(this).text('+').attr('title', polyglot.t('Follow'));
})
.on("eventToggleUnfollow", function() {
$(this).text('').attr('title', polyglot.t('Unfollow'));
$(this).text('-').attr('title', polyglot.t('Unfollow'));
});
if (/\/options.html$/i.test(document.location))

7
sass/base/_utils.sass

@ -59,3 +59,10 @@ button, a.button @@ -59,3 +59,10 @@ button, a.button
font-weight: 700
font-size: .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 @@ -35,3 +35,9 @@ $main-line-height : 1.4rem
$main-font-family: "Roboto", sans-serif
$symbol-font-family: "fontello"
$serif-font-family: "Droid", serif
/* usefull vars */
$mini-usr-img : 40px
$usr-img : 64px

23
sass/layout/_dm.sass

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

17
sass/layout/_modal.sass

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

10
sass/layout/_postboard.sass

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

13
sass/layout/_profile.sass

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

6
sass/pages/_following.sass

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

79
sass/style.sass

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

Loading…
Cancel
Save