-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathbrowser-logos.scss
88 lines (80 loc) · 4.05 KB
/
browser-logos.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
/*
*
* BROWSER-LOGOS.CSS
*
* Created by: oxmc
* Copyright (c) 2023-2024
*
*/
$cdn: 'https://cdnjs.cloudflare.com/ajax/libs/browser-logos';
$cdn-version: '73.0.0';
$cdn-url: $cdn + "/" + $cdn-version;
$icon-sizes: (16, 24, 32, 48, 64, 128, 256, 512);
// browser icons JSON:
$browser-data: (
"chrome": ("name": "Chrome", "iconpath": "chrome"),
"chrome-dev": ("name": "Chrome (Dev)", "iconpath": "chrome-dev"),
"chrome-beta": ("name": "Chrome (Beta)", "iconpath": "chrome-beta"),
"chrome-canary": ("name": "Chrome (Canary)", "iconpath": "chrome-canary"),
"chromium": ("name": "Chromium", "iconpath": "chromium"),
"android-webview": ("name": "Android WebView", "iconpath": "android-webview"),
"android-webview-dev": ("name": "Android WebView (Dev)", "iconpath": "android-webview-dev"),
"android-webview-beta": ("name": "Android WebView (Beta)", "iconpath": "android-webview-beta"),
"android-webview-canary": ("name": "Android WebView (Canary)", "iconpath": "android-webview-canary"),
"brave": ("name": "Brave", "iconpath": "brave"),
"brave-dev": ("name": "Brave (Dev)", "iconpath": "brave-dev"),
"brave-beta": ("name": "Brave (Beta)", "iconpath": "brave-beta"),
"brave-canary": ("name": "Brave (Canary)", "iconpath": "brave-canary"),
"edge": ("name": "Microsoft Edge", "iconpath": "edge"),
"edge-dev": ("name": "Microsoft Edge (Dev)", "iconpath": "edge-dev"),
"edge-beta": ("name": "Microsoft Edge (Beta)", "iconpath": "edge-beta"),
"edge-canary": ("name": "Microsoft Edge (Canary)", "iconpath": "edge-canary"),
"edge-old": ("name": "Microsoft Edge", "iconpath": "edge"),
"edge-old-tile": ("name": "Microsoft Edge (old, Tile)", "iconpath": "edge-tile", "archive": "true"),
"safari": ("name": "Safari", "iconpath": "safari"),
"safari-new": ("name": "Safari (New)", "iconpath": "safari_8-13", "archive": "true"),
"safari-old": ("name": "Safari (Old)", "iconpath": "safari_1-7", "archive": "true"),
"safari-ios-old": ("name": "Safari (IOS, Old)", "iconpath": "safari-ios_1-6", "archive": "true"),
"firefox": ("name": "Firefox", "iconpath": "firefox"),
"firefox-dev": ("name": "Firefox (Dev)", "iconpath": "firefox-dev"),
"firefox-beta": ("name": "Firefox (Beta)", "iconpath": "firefox-beta"),
"firefox-canary": ("name": "Firefox (Canary)", "iconpath": "firefox-canary"),
"ie": ("name": "Internet Explorer (Old)", "iconpath": "internet-explorer_9-11", "archive": "true"),
"ie-tile": ("name": "Internet Explorer", "iconpath": "internet-explorer-tile_10-11", "archive": "true"),
"netscape-navigator": ("name": "Netscape Navigator", "iconpath": "netscape_4-6", "archive": "true"),
"samsung-internet": ("name": "Samsung Internet", "iconpath": "samsung-internet"),
"opera": ("name": "Opera", "iconpath": "opera"),
"opera-gx": ("name": "Opera (GX)", "iconpath": "opera-gx"),
"opera-dev": ("name": "Opera (Developer)", "iconpath": "opera-developer"),
"opera-neon": ("name": "Opera (Neon)", "iconpath": "opera-neon"),
"opera-mini": ("name": "Opera (Mini)", "iconpath": "opera-mini"),
"opera-mini-beta": ("name": "Opera (Mini Beta)", "iconpath": "opera-mini-beta"),
"opera-mini-touch": ("name": "Opera (Touch)", "iconpath": "opera-touch")
);
@each $browser, $data in $browser-data {
$data: map-get($browser-data, $browser);
$icon-path: map-get($data, "iconpath");
$url-path: "#{$cdn-url}/#{$icon-path}/#{$icon-path}";
@if map-has-key($data, "archive") and map-get($data, "archive") == "true" {
$url-path: "#{$cdn-url}/archive/#{$icon-path}/#{$icon-path}";
}
/*#{$browser}*/
i.browi.#{$browser} {
content: url('#{$url-path}_32x32.png');
vertical-align: middle;
display: absolute;
}
.browi-bg.#{$browser} {
background-image: url('#{$url-path}_256x256.png');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
@each $size in $icon-sizes {
i.browi.#{$browser}-#{$size} {
content: url('#{$url-path}_#{$size}x#{$size}.png');
vertical-align: middle;
display: absolute;
}
}
}