5d8e8459b3
Max-width on a message bubble should be about 30em for the good readability. However, when the window isn't wide enough, bubbles must be further limited. The transition should happen around the point that these two rules intersect, but it was kicking in a little late, which caused the bubbles to jump from wider to shorter as you widened the window past a certain point. This change adjusts the threshold for smoother and more consistent bubble resizing. The variable name $big-avatar-min-width is an artifact of a past design and was previously used in multiple places, but it no longer makes sense in this context so it has been discarded. // FREEBIE
84 lines
2.1 KiB
SCSS
84 lines
2.1 KiB
SCSS
// colors
|
|
$blue_l: #a2d2f4;
|
|
$blue: #2090ea;
|
|
$grey_l: #f3f3f3;
|
|
$grey_l2: #d9d9d9; // ~ Equivalent to darken($grey_l, 10%), unreliably compiles
|
|
$grey_l3: darken($grey_l, 20%);
|
|
$grey_l4: darken($grey_l, 40%);
|
|
$grey: #616161;
|
|
$grey_d: #454545;
|
|
$green: #47D647;
|
|
$red: #EF8989;
|
|
|
|
@font-face {
|
|
font-family: 'Roboto-Light';
|
|
src: url('/fonts/Roboto-Light.ttf') format('truetype');
|
|
}
|
|
@font-face {
|
|
font-family: 'Roboto';
|
|
src: url('/fonts/Roboto-Regular.ttf') format('truetype');
|
|
}
|
|
@font-face {
|
|
font-family: 'Roboto';
|
|
src: url('/fonts/Roboto-Italic.ttf') format('truetype');
|
|
font-style: italic;
|
|
}
|
|
@font-face {
|
|
font-family: 'Roboto';
|
|
src: url('/fonts/Roboto-Bold.ttf') format('truetype');
|
|
font-weight: bold;
|
|
}
|
|
$roboto: Roboto, 'Helvetica Neue', Arial, Helvetica, sans-serif;
|
|
$roboto-light: Roboto-Light, 'Helvetica Neue', Arial, Helvetica, sans-serif;
|
|
|
|
$header-height: 64px;
|
|
$button-height: 24px;
|
|
$header-color: $blue;
|
|
|
|
$search-height: 36px;
|
|
$search-padding-right: 10px;
|
|
$search-padding-left: 65px;
|
|
$search-padding-left-ios: 30px;
|
|
$search-x-size: 16px;
|
|
|
|
$unread-badge-size: 21px;
|
|
$loading-height: 16px;
|
|
|
|
$border-radius: 5px;
|
|
|
|
$error-icon-size: 24px;
|
|
|
|
$font-size: 14px;
|
|
$font-size-small: (13/14) + em;
|
|
|
|
$material_red: #EF5350;
|
|
$material_pink: #EC407A;
|
|
$material_purple: #AB47BC;
|
|
$material_deep_purple: #7E57C2;
|
|
$material_indigo: #5C6BC0;
|
|
$material_blue: #2196F3;
|
|
$material_light_blue: #03A9F4;
|
|
$material_cyan: #00BCD4;
|
|
$material_teal: #009688;
|
|
$material_green: #4CAF50;
|
|
$material_light_green: #7CB342;
|
|
$material_orange: #FF9800;
|
|
$material_deep_orange: #FF5722;
|
|
$material_amber: #FFB300;
|
|
$material_blue_grey: #607D8B;
|
|
|
|
$dark_material_red: #D32F2F;
|
|
$dark_material_pink: #C2185B;
|
|
$dark_material_purple: #7B1FA2;
|
|
$dark_material_deep_purple: #512DA8;
|
|
$dark_material_indigo: #303F9F;
|
|
$dark_material_blue: #1976D2;
|
|
$dark_material_light_blue: #0288D1;
|
|
$dark_material_cyan: #0097A7;
|
|
$dark_material_teal: #00796B;
|
|
$dark_material_green: #388E3C;
|
|
$dark_material_light_green: #689F38;
|
|
$dark_material_orange: #F57C00;
|
|
$dark_material_deep_orange: #E64A19;
|
|
$dark_material_amber: #FFA000;
|
|
$dark_material_blue_grey: #455A64;
|