browser-logos.scss

/*
*
*  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;
    }
    
    @each $size in $icon-sizes {
        i.browi.#{$browser}-#{$size} {
            content: url('#{$url-path}_#{$size}x#{$size}.png');
            vertical-align: middle;
            display: absolute;
        }
    }
}