b5a399dc55
Add some variables so we can actually compute this height instead of hard coding it. // FREEBIE
61 lines
1.4 KiB
SCSS
61 lines
1.4 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;
|
|
|
|
@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;
|
|
|
|
$unread-badge-size: 21px;
|
|
$loading-height: 16px;
|
|
|
|
$big-avatar-min-width: 900px;
|
|
|
|
$border-radius: 5px;
|
|
|
|
@mixin color-svg($svg, $color) {
|
|
-webkit-mask: url($svg) no-repeat center;
|
|
-webkit-mask-size: 100%;
|
|
background-color: $color;
|
|
}
|
|
@mixin header-icon-white($svg) {
|
|
@include color-svg($svg, rgba(255,255,255, 0.8));
|
|
&:hover {
|
|
@include color-svg($svg, white);
|
|
}
|
|
}
|
|
@mixin header-icon-black($svg) {
|
|
@include color-svg($svg, rgba(0,0,0, 0.5));
|
|
&:hover {
|
|
@include color-svg($svg, black);
|
|
}
|
|
}
|