Shrink more styles

Shrink font and image size
Shrink converation avatars
Shrink fab
This commit is contained in:
lilia 2015-01-30 11:43:10 -10:00
parent 515a687dca
commit 29bf70b76f
3 changed files with 33 additions and 29 deletions

View file

@ -26,7 +26,7 @@ button {
} }
.timestamp { .timestamp {
font-size: 12px; font-size: smaller;
} }
.entry.delivered .timestamp::after { .entry.delivered .timestamp::after {
@ -138,12 +138,10 @@ button {
max-width: 100%; max-width: 100%;
} }
img.avatar { img.avatar {
height: 54px; height: 44px;
width: 54px; width: 44px;
// delete next 2 lines background: $grey_l;
box-sizing: border-box; border-radius: (44px / 2);
border: (54px / 2) $grey_l solid;
border-radius: (54px / 2);
} }
.timestamp { .timestamp {

View file

@ -46,10 +46,10 @@ input.new-message {
.fab { .fab {
z-index: 1; z-index: 1;
position: fixed; position: fixed;
right: 16px; right: 25px;;
bottom: 22px; bottom: 22px;
height: 60px; height: 50px;
width: 60px; width: 50px;
border: 0; border: 0;
border-radius: (60px / 2); border-radius: (60px / 2);
outline: 0; outline: 0;
@ -66,6 +66,10 @@ input.new-message {
} }
} }
.last-timestamp {
font-size: smaller;
}
.new-contact, .new-contact,
.typeahead { .typeahead {
.last-message, .last-timestamp { .last-message, .last-timestamp {
@ -129,13 +133,13 @@ input.new-message {
.contact-name { .contact-name {
margin: 0; margin: 0;
font-size: 16px; font-size: 1em;
font-weight: 400; font-weight: 400;
} }
.last-message { .last-message {
margin: 6px 0; margin: 6px 0;
font-size: 14px; font-size: small;
font-weight: 300; font-weight: 300;
} }
@ -147,10 +151,10 @@ input.new-message {
} }
img { img {
height: 54px; height: 44px;
width: 54px; width: 44px;
background: $grey_l; background: $grey_l;
border-radius: (54px / 2); border-radius: (44px / 2);
} }
} }

View file

@ -82,10 +82,10 @@ input.new-message {
.fab { .fab {
z-index: 1; z-index: 1;
position: fixed; position: fixed;
right: 16px; right: 25px;
bottom: 22px; bottom: 22px;
height: 60px; height: 50px;
width: 60px; width: 50px;
border: 0; border: 0;
border-radius: 30px; border-radius: 30px;
outline: 0; outline: 0;
@ -99,6 +99,9 @@ input.new-message {
box-shadow: 0 8px 18px -8px rgba(2, 10, 16, 0.9); box-shadow: 0 8px 18px -8px rgba(2, 10, 16, 0.9);
transform: translate3d(0, -1px, 0); } transform: translate3d(0, -1px, 0); }
.last-timestamp {
font-size: smaller; }
.new-contact .last-message, .new-contact .last-timestamp, .new-contact .last-message, .new-contact .last-timestamp,
.typeahead .last-message, .typeahead .last-message,
.typeahead .last-timestamp { .typeahead .last-timestamp {
@ -145,11 +148,11 @@ input.new-message {
margin: 4px 0 0 8px; } margin: 4px 0 0 8px; }
.index .contact-name { .index .contact-name {
margin: 0; margin: 0;
font-size: 16px; font-size: 1em;
font-weight: 400; } font-weight: 400; }
.index .last-message { .index .last-message {
margin: 6px 0; margin: 6px 0;
font-size: 14px; font-size: small;
font-weight: 300; } font-weight: 300; }
.index .timestamp { .index .timestamp {
position: absolute; position: absolute;
@ -157,10 +160,10 @@ input.new-message {
right: 12px; right: 12px;
color: #888; } color: #888; }
.index img { .index img {
height: 54px; height: 44px;
width: 54px; width: 44px;
background: #f3f3f3; background: #f3f3f3;
border-radius: 27px; } border-radius: 22px; }
.settings { .settings {
height: 100%; height: 100%;
@ -190,7 +193,7 @@ button {
cursor: pointer; } cursor: pointer; }
.timestamp { .timestamp {
font-size: 12px; } font-size: smaller; }
.entry.delivered .timestamp::after { .entry.delivered .timestamp::after {
margin-left: 4px; margin-left: 4px;
@ -261,11 +264,10 @@ button {
.message-list .attachments img { .message-list .attachments img {
max-width: 100%; } max-width: 100%; }
.message-list img.avatar { .message-list img.avatar {
height: 54px; height: 44px;
width: 54px; width: 44px;
box-sizing: border-box; background: #f3f3f3;
border: 27px #f3f3f3 solid; border-radius: 22px; }
border-radius: 27px; }
.message-list .timestamp { .message-list .timestamp {
margin-top: 3px; margin-top: 3px;
float: right; } float: right; }