/
initials-avatar.scss
116 lines (107 loc) · 3.29 KB
/
initials-avatar.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
/*
Sass Initials Avatar
Chris C. Wijnia
https://github.com/ChrisTheButcher/sass-initials-avatar
*/
// README
//
// Example HTML markup:
//
// Two initials without extra sizing classes
// <span class="initials" data-initials="cw" title="Chris C. Wijnia"></span>
//
// One initial with sizing data attribute
// <span class="initial" data-size="xs" data-initials="c" title="Chris C. Wijnia"></span>
//
// One initial with sizing data attribute fluidly
// <span class="initial" data-size="xs fluid" data-initials="c" title="Chris C. Wijnia"></span>
//
//
// Custom config example:
//
// $initials-sizes: (
// xxs: 15px,
// xs: 25px,
// sm: 35px,
// md: 75px,
// lg: 100px,
// xlg: 150px,
// xxlg: 200px);
// DEFAULT CONFIG
$initials-class-name: initials-avatar !default;
$initials-roundness: 50% !default;
$initials-font: Georgia, serif !default;
$initials-weight: bold !default;
$initials-font-size: 0.6 !default; // Scale font size. 1 is base
$initials-line-height: 0.95 !default; // Adjust vertical alignment. 1 is base
$initials-size-base: 50px !default;
$initials-sizes: (
xs: 25px,
sm: 35px,
md: 75px,
lg: 100px) !default;
$initials-sizes-fluid: (
(breakpoint: 400px): 25px,
(breakpoint: 700px): 35px,
(breakpoint: 900px): 75px,
(breakpoint: 1200px): 100px) !default;
$initials-text-color: rgba(white, 0.8) !default;
$initials-color-base: #CDDC39 !default;
$initials-color-variants: (
a: #26A69A, n: #6A1B9A,
b: #00897B, o: #B0BEC5,
c: #FBC02D, p: #90A4AE,
d: #FF8F00, q: #37474F,
e: #66BB6A, r: #6D4C41,
f: #43A047, s: #8D6E63,
g: #FB8C00, t: #F48FB1,
h: #EF6C00, u: #EC407A,
i: #0288D1, v: #e57373,
j: #0D47A1, w: #BDBDBD,
k: #f44336, x: #616161,
l: #c62828, y: #AFB42B,
m: #BA68C8, z: #BF360C) !default;
// Base styling
.#{$initials-class-name} {
// Mixin for easily genarating custom sizes
@mixin generate-size($size: $initials-size-base) {
width: $size;
height: $size;
line-height: $size;
font-size: ($size * $initials-font-size);
line-height: ($size * $initials-line-height);
}
&:after { content: attr(data-initials); }
@include generate-size;
display: inline-block;
overflow: hidden;
text-transform: uppercase;
text-align: center;
border-radius: $initials-roundness;
font-family: $initials-font;
font-weight: $initials-weight;
color: $initials-text-color;
background: $initials-color-base;
// Generate color variants
@each $letter, $color in $initials-color-variants {
$letter-upper: to-upper-case($letter);
&[data-initials^="#{$letter}"],
&[data-initials^="#{$letter-upper}"] {
background: $color;
}
}
// Generate sizes
@each $size-name, $size in $initials-sizes {
&[data-size*="#{$size-name}"] {
@include generate-size($size);
}
}
// Generate fluid sizes
@each $breakpoint, $size in $initials-sizes-fluid {
&[data-size*="fluid"] {
@media screen and (min-width: map-get($breakpoint, breakpoint)) {
@include generate-size($size);
}
}
}
}