From bb566c627715be22714ae65ffc5b2b687ccf7e79 Mon Sep 17 00:00:00 2001 From: 30secondsofcode <30secondsofcode@gmail.com> Date: Tue, 15 Jan 2019 21:19:31 +0000 Subject: [PATCH] Travis build: 143 [cron] --- docs/index.html | 2 +- index.html | 5 +++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/docs/index.html b/docs/index.html index a7280097a..c24ac3e53 100644 --- a/docs/index.html +++ b/docs/index.html @@ -677,7 +677,7 @@ li:not(:last-child) { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif; } -

Demo

This text uses the system font.

Explanation

The browser looks for each successive font, preferring the first one if possible, and falls back to the next if it cannot find the font (on the system or defined in CSS).

  1. -apple-system is San Francisco, used on iOS and macOS (not Chrome however)
  2. BlinkMacSystemFont is San Francisco, used on macOS Chrome
  3. Segoe UI is used on Windows 10
  4. Roboto is used on Android
  5. Oxygen-Sans is used on GNU+Linux
  6. Ubuntu is used on Linux
  7. "Helvetica Neue" and Helvetica is used on macOS 10.10 and below (wrapped in quotes because it has a space)
  8. Arial is a font widely supported by all operating systems
  9. sans-serif is the fallback sans-serif font if none of the other fonts are supported

Browser support

99+%

✅ No caveats.

Toggle switchvisualinteractivity

Creates a toggle switch with CSS only.

HTML

<input type="checkbox" id="toggle" class="offscreen" /> <label for="toggle" class="switch"></label>
+

Demo

This text uses the system font.

Explanation

The browser looks for each successive font, preferring the first one if possible, and falls back to the next if it cannot find the font (on the system or defined in CSS).

  1. -apple-system is San Francisco, used on iOS and macOS (not Chrome however)
  2. BlinkMacSystemFont is San Francisco, used on macOS Chrome
  3. Segoe UI is used on Windows 10
  4. Roboto is used on Android
  5. Oxygen-Sans is used on Linux with KDE
  6. Ubuntu is used on Ubuntu (all variants)
  7. Cantarell is used on Linux with GNOME Shell
  8. "Helvetica Neue" and Helvetica is used on macOS 10.10 and below (wrapped in quotes because it has a space)
  9. Arial is a font widely supported by all operating systems
  10. sans-serif is the fallback sans-serif font if none of the other fonts are supported

Browser support

99+%

✅ No caveats.

Toggle switchvisualinteractivity

Creates a toggle switch with CSS only.

HTML

<input type="checkbox" id="toggle" class="offscreen" /> <label for="toggle" class="switch"></label>

CSS

.switch {
   position: relative;
   display: inline-block;
diff --git a/index.html b/index.html
index 217b0c76b..3cf3ebb29 100644
--- a/index.html
+++ b/index.html
@@ -2538,8 +2538,9 @@ li:not(:last-child) {
               
  • BlinkMacSystemFont is San Francisco, used on macOS Chrome
    • 
               
  • Segoe UI is used on Windows 10
    • 
               
  • Roboto is used on Android
    • 
-              
  • Oxygen-Sans is used on GNU+Linux
    • 
-              
  • Ubuntu is used on Linux
    • 
+              
  • Oxygen-Sans is used on Linux with KDE
    • 
+              
  • Ubuntu is used on Ubuntu (all variants)
    • 
+              
  • Cantarell is used on Linux with GNOME Shell
    • 
               
  • "Helvetica Neue" and Helvetica is used on macOS 10.10 and below (wrapped in quotes because it has a space)
    • 
               
  • Arial is a font widely supported by all operating systems
    • 
               
  • sans-serif is the fallback sans-serif font if none of the other fonts are supported
    •