From c9d2e7774e6e255f810265b83ee7f383b8119b8d Mon Sep 17 00:00:00 2001
From: squidfunk <martin.donath@squidfunk.com>
Date: Mon, 17 Feb 2020 10:04:12 +0100
Subject: [PATCH] Refactored all <time> units to use ms instead of s

---
 src/assets/stylesheets/app-palette.scss       |  4 +-
 src/assets/stylesheets/base/_typeset.scss     |  2 +-
 .../stylesheets/extensions/_footnotes.scss    |  8 +--
 .../stylesheets/extensions/_permalinks.scss   | 16 +++---
 .../extensions/pymdown/_tabbed.scss           |  2 +-
 src/assets/stylesheets/layout/_base.scss      | 16 +++---
 src/assets/stylesheets/layout/_clipboard.scss | 51 +-----------------
 src/assets/stylesheets/layout/_footer.scss    |  2 +-
 src/assets/stylesheets/layout/_header.scss    | 20 +++----
 src/assets/stylesheets/layout/_hero.scss      | 12 ++---
 src/assets/stylesheets/layout/_nav.scss       | 14 ++---
 src/assets/stylesheets/layout/_search.scss    | 54 +++++++++----------
 src/assets/stylesheets/layout/_sidebar.scss   |  4 +-
 src/assets/stylesheets/layout/_source.scss    | 12 ++---
 src/assets/stylesheets/layout/_tabs.scss      | 14 ++---
 15 files changed, 91 insertions(+), 140 deletions(-)

diff --git a/src/assets/stylesheets/app-palette.scss b/src/assets/stylesheets/app-palette.scss
index e7ef0cd61..52afeb5e2 100644
--- a/src/assets/stylesheets/app-palette.scss
+++ b/src/assets/stylesheets/app-palette.scss
@@ -48,8 +48,8 @@ button[data-md-color-accent] {
   margin-bottom: px2rem(4px);
   padding: px2rem(24px) px2rem(8px) px2rem(4px);
   transition:
-    background-color 0.25s,
-    opacity          0.25s;
+    background-color 250ms,
+    opacity          250ms;
   border-radius: px2rem(2px);
   color: $md-color-white;
   font-size: ms(-1);
diff --git a/src/assets/stylesheets/base/_typeset.scss b/src/assets/stylesheets/base/_typeset.scss
index b85461a5e..cefc81aa2 100644
--- a/src/assets/stylesheets/base/_typeset.scss
+++ b/src/assets/stylesheets/base/_typeset.scss
@@ -140,7 +140,7 @@ kbd {
     // Also enable color transition on pseudo elements
     &,
     &::before {
-      transition: color 0.125s;
+      transition: color 125ms;
     }
 
     // Hovered and active links
diff --git a/src/assets/stylesheets/extensions/_footnotes.scss b/src/assets/stylesheets/extensions/_footnotes.scss
index a995de1f3..79bd6f9b1 100644
--- a/src/assets/stylesheets/extensions/_footnotes.scss
+++ b/src/assets/stylesheets/extensions/_footnotes.scss
@@ -70,7 +70,7 @@
 
     // Footnote
     li {
-      transition: color 0.25s;
+      transition: color 250ms;
 
       // Darken color for targeted footnote
       &:target {
@@ -120,9 +120,9 @@
     display: inline-block;
     transform: translateX(px2rem(5px));
     transition:
-      transform 0.25s  0.125s,
-      color     0.25s,
-      opacity   0.125s 0.125s;
+      transform 250ms 125ms,
+      color     250ms,
+      opacity   125ms 125ms;
     color: $md-color-black--lighter;
     // Hack: remove Unicode arrow for icon
     font-size: 0;
diff --git a/src/assets/stylesheets/extensions/_permalinks.scss b/src/assets/stylesheets/extensions/_permalinks.scss
index f66064dd6..083259249 100644
--- a/src/assets/stylesheets/extensions/_permalinks.scss
+++ b/src/assets/stylesheets/extensions/_permalinks.scss
@@ -33,10 +33,10 @@
     margin-left: px2rem(10px);
     transform: translate(0, px2rem(5px));
     transition:
-      transform  0.25s  0.25s,
-      color      0.25s,
-      opacity    0.125s 0.25s,
-      visibility 0s     0.5s;
+      transform  250ms 250ms,
+      color      250ms,
+      opacity    125ms 250ms,
+      visibility   0ms 500ms;
     opacity: 0;
     // Hack: If we don't set visibility hidden, the text content of the node
     // will include the headerlink character, which is why Google indexes them.
@@ -90,10 +90,10 @@
       & .headerlink:focus {
         transform: translate(0, 0);
         transition:
-          transform  0.25s  0.25s,
-          color      0.25s,
-          opacity    0.125s 0.25s,
-          visibility 0s;
+          transform  250ms 250ms,
+          color      250ms,
+          opacity    125ms 250ms,
+          visibility   0ms;
         opacity: 1;
         visibility: visible;
       }
diff --git a/src/assets/stylesheets/extensions/pymdown/_tabbed.scss b/src/assets/stylesheets/extensions/pymdown/_tabbed.scss
index a3f449a82..43a132fe8 100644
--- a/src/assets/stylesheets/extensions/pymdown/_tabbed.scss
+++ b/src/assets/stylesheets/extensions/pymdown/_tabbed.scss
@@ -89,7 +89,7 @@
     > label {
       width: auto;
       padding: px2rem(12px);
-      transition: color 0.125s;
+      transition: color 125ms;
       font-size: ms(-1);
       cursor: pointer;
 
diff --git a/src/assets/stylesheets/layout/_base.scss b/src/assets/stylesheets/layout/_base.scss
index 0bf2fac08..87e775c9c 100644
--- a/src/assets/stylesheets/layout/_base.scss
+++ b/src/assets/stylesheets/layout/_base.scss
@@ -142,9 +142,9 @@ hr {
   width: 0;
   height: 0;
   transition:
-    width   0s 0.25s,
-    height  0s 0.25s,
-    opacity 0.25s;
+    width     0ms 250ms,
+    height    0ms 250ms,
+    opacity 250ms;
   background-color: $md-color-black--light;
   opacity: 0;
   z-index: 3;
@@ -157,9 +157,9 @@ hr {
       width: 100%;
       height: 100%;
       transition:
-        width   0s,
-        height  0s,
-        opacity 0.25s;
+        width     0ms,
+        height    0ms,
+        opacity 250ms;
       opacity: 1;
     }
   }
@@ -222,8 +222,8 @@ hr {
     clip: auto;
     transform: translateX(0);
     transition:
-      transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
-      opacity   0.175s 0.075s;
+      transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
+      opacity   175ms 75ms;
     opacity: 1;
     z-index: 10;
   }
diff --git a/src/assets/stylesheets/layout/_clipboard.scss b/src/assets/stylesheets/layout/_clipboard.scss
index 78c70088d..a982b085c 100644
--- a/src/assets/stylesheets/layout/_clipboard.scss
+++ b/src/assets/stylesheets/layout/_clipboard.scss
@@ -31,7 +31,7 @@
   right: px2rem(6px);
   width: px2rem(28px);
   height: px2rem(28px);
-  transition: color 0.25s;
+  transition: color 250ms;
   border-radius: px2rem(2px);
   color: $md-color-black--lightest;
   font-size: px2rem(16px);
@@ -58,53 +58,4 @@
   .codehilite &:hover {
     color: $md-color-accent;
   }
-
-  // // Message
-  // &__message {
-  //   display: block;
-  //   position: absolute;
-  //   top: 0;
-  //   right: px2rem(34px);
-  //   padding: px2rem(6px) px2rem(10px);
-  //   transform: translateX(px2rem(8px));
-  //   transition:
-  //     transform 0.25s cubic-bezier(0.9, 0.1, 0.9, 0),
-  //     opacity   0.175s;
-  //   border-radius: px2rem(2px);
-  //   background-color: $md-color-black--light;
-  //   color: $md-color-white;
-  //   font-size: ms(-1);
-  //   white-space: nowrap;
-  //   opacity: 0;
-  //   pointer-events: none;
-
-  //   // Active message
-  //   &--active {
-  //     transform: translateX(0);
-  //     transition:
-  //       transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
-  //       opacity   0.175s 0.075s;
-  //     opacity: 1;
-  //     pointer-events: initial;
-  //   }
-
-  //   // Inject content from ARIA label
-  //   &::before {
-  //     content: attr(aria-label);
-  //   }
-
-  //   // Paint a nice speech bubble
-  //   &::after {
-  //     display: block;
-  //     position: absolute;
-  //     top: 50%;
-  //     right: px2rem(-4px);
-  //     width: 0;
-  //     margin-top: px2rem(-4px);
-  //     border-width: px2rem(4px) 0 px2rem(4px) px2rem(4px);
-  //     border-style: solid;
-  //     border-color: transparent $md-color-black--light;
-  //     content: "";
-  //   }
-  // }
 }
diff --git a/src/assets/stylesheets/layout/_footer.scss b/src/assets/stylesheets/layout/_footer.scss
index e700f189f..3c11129ba 100644
--- a/src/assets/stylesheets/layout/_footer.scss
+++ b/src/assets/stylesheets/layout/_footer.scss
@@ -48,7 +48,7 @@
   &__link {
     padding-top: px2rem(28px);
     padding-bottom: px2rem(8px);
-    transition: opacity 0.25s;
+    transition: opacity 250ms;
 
     // [tablet +]: Set proportional width
     @include break-from-device(tablet) {
diff --git a/src/assets/stylesheets/layout/_header.scss b/src/assets/stylesheets/layout/_header.scss
index e47c99aad..1ddf0c8cc 100644
--- a/src/assets/stylesheets/layout/_header.scss
+++ b/src/assets/stylesheets/layout/_header.scss
@@ -32,8 +32,8 @@
   left: 0;
   height: px2rem(48px);
   transition:
-    background-color 0.25s,
-    color 0.25s;
+    background-color 250ms,
+    color            250ms;
   background-color: $md-color-primary;
   color: $md-color-white;
   box-shadow: none;
@@ -126,8 +126,8 @@
     position: absolute;
     width: calc(100% - #{px2rem(20px)});
     transition:
-      transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1),
-      opacity   0.15s;
+      transform 400ms cubic-bezier(0.1, 0.7, 0.1, 1),
+      opacity   150ms;
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
@@ -136,8 +136,8 @@
     & + & {
       transform: translateX(px2rem(25px));
       transition:
-        transform 0.4s cubic-bezier(1, 0.7, 0.1, 0.1),
-        opacity   0.15s;
+        transform 400ms cubic-bezier(1, 0.7, 0.1, 0.1),
+        opacity   150ms;
       opacity: 0;
       z-index: -1;
       pointer-events: none;
@@ -169,8 +169,8 @@
     &[data-md-state="active"] .md-header-nav__topic {
       transform: translateX(px2rem(-25px));
       transition:
-        transform 0.4s cubic-bezier(1, 0.7, 0.1, 0.1),
-        opacity   0.15s;
+        transform 400ms cubic-bezier(1, 0.7, 0.1, 0.1),
+        opacity   150ms;
       opacity: 0;
       z-index: -1;
       pointer-events: none;
@@ -184,8 +184,8 @@
       & + .md-header-nav__topic {
         transform: translateX(0);
         transition:
-          transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1),
-          opacity   0.15s;
+          transform 400ms cubic-bezier(0.1, 0.7, 0.1, 1),
+          opacity   150ms;
         opacity: 1;
         z-index: 0;
         pointer-events: initial;
diff --git a/src/assets/stylesheets/layout/_hero.scss b/src/assets/stylesheets/layout/_hero.scss
index e7e8bb074..85b5e6cbe 100644
--- a/src/assets/stylesheets/layout/_hero.scss
+++ b/src/assets/stylesheets/layout/_hero.scss
@@ -26,7 +26,7 @@
 
 // Hero teaser
 .md-hero {
-  transition: background 0.25s;
+  transition: background 250ms;
   background-color: $md-color-primary;
   color: $md-color-white;
   font-size: ms(1);
@@ -37,9 +37,9 @@
     margin-top: px2rem(20px);
     padding: px2rem(16px) px2rem(16px) px2rem(8px);
     transition:
-      transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1),
-      opacity   0.25s;
-    transition-delay: 0.1s;
+      transform 400ms cubic-bezier(0.1, 0.7, 0.1, 1),
+      opacity   250ms;
+    transition-delay: 100ms;
 
     // [tablet -]: Compensate for missing tabs
     @include break-to-device(tablet) {
@@ -52,8 +52,8 @@
       pointer-events: none;
       transform: translateY(px2rem(12.5px));
       transition:
-        transform 0s   0.4s,
-        opacity   0.1s 0s;
+        transform   0ms 400ms,
+        opacity   100ms   0ms;
       opacity: 0;
     }
 
diff --git a/src/assets/stylesheets/layout/_nav.scss b/src/assets/stylesheets/layout/_nav.scss
index fdf89b960..8aeb765d3 100644
--- a/src/assets/stylesheets/layout/_nav.scss
+++ b/src/assets/stylesheets/layout/_nav.scss
@@ -104,7 +104,7 @@
   &__link {
     display: block;
     margin-top: 0.625em;
-    transition: color 0.125s;
+    transition: color 125ms;
     text-overflow: ellipsis;
     cursor: pointer;
     overflow: hidden;
@@ -393,8 +393,8 @@
       display: flex;
       transform: translateX(100%);
       transition:
-        transform 0.25s cubic-bezier(0.8, 0, 0.6, 1),
-        opacity   0.125s 0.05s;
+        transform 250ms cubic-bezier(0.8, 0, 0.6, 1),
+        opacity   125ms 50ms;
       opacity: 0;
 
       // Adjust for RTL languages
@@ -412,8 +412,8 @@
     .md-nav__toggle:checked ~ & {
       transform: translateX(0);
       transition:
-        transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
-        opacity   0.125s 0.125s;
+        transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
+        opacity   125ms 125ms;
       opacity: 1;
 
       // Just show navigation, if browser doesn't supports 3D transforms
@@ -469,7 +469,7 @@
 
     // Animation is only possible if JavaScript is available, as the max-height
     // property must be calculated before transitioning
-    transition: max-height 0.25s cubic-bezier(0.86, 0, 0.07, 1);
+    transition: max-height 250ms cubic-bezier(0.86, 0, 0.07, 1);
 
     // Snap to site and table of contents title
     .md-nav__title[for="__drawer"],
@@ -506,7 +506,7 @@
         // Only animate icon when JavaScript is available, as the height can
         // not be animated anyway, and better no fun than half the fun
         .js & {
-          transition: transform 0.4s;
+          transition: transform 400ms;
         }
       }
 
diff --git a/src/assets/stylesheets/layout/_search.scss b/src/assets/stylesheets/layout/_search.scss
index a9445583e..e90dde7ab 100644
--- a/src/assets/stylesheets/layout/_search.scss
+++ b/src/assets/stylesheets/layout/_search.scss
@@ -60,8 +60,8 @@ $md-toggle__search--checked:
       height: px2rem(36px);
       transform-origin: center;
       transition:
-        transform 0.3s 0.1s,
-        opacity   0.2s 0.2s;
+        transform 300ms 100ms,
+        opacity   200ms 200ms;
       border-radius: px2rem(20px);
       background-color: $md-color-white;
       overflow: hidden;
@@ -76,8 +76,8 @@ $md-toggle__search--checked:
       // Expanded overlay
       #{$md-toggle__search--checked} & {
         transition:
-          transform 0.4s,
-          opacity   0.1s;
+          transform 400ms,
+          opacity   100ms;
         opacity: 1;
       }
     }
@@ -109,9 +109,9 @@ $md-toggle__search--checked:
       width: 0;
       height: 0;
       transition:
-        width   0s 0.25s,
-        height  0s 0.25s,
-        opacity 0.25s;
+        width     0ms 250ms,
+        height    0ms 250ms,
+        opacity 250ms;
       background-color: $md-color-black--light;
       cursor: pointer;
 
@@ -126,9 +126,9 @@ $md-toggle__search--checked:
         width: 100%;
         height: 100%;
         transition:
-          width   0s,
-          height  0s,
-          opacity 0.25s;
+          width     0ms,
+          height    0ms,
+          opacity 250ms;
         opacity: 1;
       }
     }
@@ -146,10 +146,10 @@ $md-toggle__search--checked:
       height: 100%;
       transform: translateX(5%);
       transition:
-        right     0s    0.3s,
-        left      0s    0.3s,
-        transform 0.15s 0.15s cubic-bezier(0.4, 0, 0.2, 1),
-        opacity   0.15s 0.15s;
+        right       0ms 300ms,
+        left        0ms 300ms,
+        transform 150ms 150ms cubic-bezier(0.4, 0, 0.2, 1),
+        opacity   150ms 150ms;
       opacity: 0;
       z-index: 2;
 
@@ -158,10 +158,10 @@ $md-toggle__search--checked:
         left: 0;
         transform: translateX(0);
         transition:
-          right     0s    0s,
-          left      0s    0s,
-          transform 0.15s 0.15s cubic-bezier(0.1, 0.7, 0.1, 1),
-          opacity   0.15s 0.15s;
+          right       0ms   0ms,
+          left        0ms   0ms,
+          transform 150ms 150ms cubic-bezier(0.1, 0.7, 0.1, 1),
+          opacity   150ms 150ms;
         opacity: 1;
 
         // Adjust for RTL languages
@@ -185,7 +185,7 @@ $md-toggle__search--checked:
       width: px2rem(234px);
       padding: px2rem(2px) 0;
       float: right;
-      transition: width 0.25s cubic-bezier(0.1, 0.7, 0.1, 1);
+      transition: width 250ms cubic-bezier(0.1, 0.7, 0.1, 1);
 
       // Adjust for RTL languages
       [dir="rtl"] & {
@@ -232,7 +232,7 @@ $md-toggle__search--checked:
 
     // Transition on placeholder
     &::placeholder {
-      transition: color 0.25s cubic-bezier(0.1, 0.7, 0.1, 1);
+      transition: color 250ms cubic-bezier(0.1, 0.7, 0.1, 1);
     }
 
     // Placeholder and icon color in active state
@@ -259,8 +259,8 @@ $md-toggle__search--checked:
       height: px2rem(36px);
       padding-left: px2rem(44px);
       transition:
-        background-color 0.25s cubic-bezier(0.1, 0.7, 0.1, 1),
-        color            0.25s cubic-bezier(0.1, 0.7, 0.1, 1);
+        background-color 250ms cubic-bezier(0.1, 0.7, 0.1, 1),
+        color            250ms cubic-bezier(0.1, 0.7, 0.1, 1);
       border-radius: px2rem(2px);
       background-color: $md-color-black--lighter;
       color: inherit;
@@ -306,8 +306,8 @@ $md-toggle__search--checked:
   &__icon {
     position: absolute;
     transition:
-      color   0.25s cubic-bezier(0.1, 0.7, 0.1, 1),
-      opacity 0.25s;
+      color   250ms cubic-bezier(0.1, 0.7, 0.1, 1),
+      opacity 250ms;
     font-size: $md-icon-size;
     cursor: pointer;
     z-index: 2;
@@ -357,8 +357,8 @@ $md-toggle__search--checked:
       right: px2rem(10px);
       transform: scale(0.125);
       transition:
-        transform 0.15s cubic-bezier(0.1, 0.7, 0.1, 1),
-        opacity   0.15s;
+        transform 150ms cubic-bezier(0.1, 0.7, 0.1, 1),
+        opacity   150ms;
       opacity: 0;
 
       // Adjust for RTL languages
@@ -403,7 +403,7 @@ $md-toggle__search--checked:
     // [tablet landscape +]: Header-embedded search
     @include break-from-device(tablet landscape) {
       top: px2rem(38px);
-      transition: opacity 0.4s;
+      transition: opacity 400ms;
       opacity: 0;
 
       // Show search output in active state
diff --git a/src/assets/stylesheets/layout/_sidebar.scss b/src/assets/stylesheets/layout/_sidebar.scss
index f3bb086fc..9918dbf32 100644
--- a/src/assets/stylesheets/layout/_sidebar.scss
+++ b/src/assets/stylesheets/layout/_sidebar.scss
@@ -62,8 +62,8 @@ $md-toggle__drawer--checked:
       height: 100%;
       transform: translateX(0);
       transition:
-        transform  0.25s cubic-bezier(0.4, 0, 0.2, 1),
-        box-shadow 0.25s;
+        transform  250ms cubic-bezier(0.4, 0, 0.2, 1),
+        box-shadow 250ms;
       background-color: $md-color-white;
       z-index: 3;
 
diff --git a/src/assets/stylesheets/layout/_source.scss b/src/assets/stylesheets/layout/_source.scss
index cb4a367ac..9c83b25ee 100644
--- a/src/assets/stylesheets/layout/_source.scss
+++ b/src/assets/stylesheets/layout/_source.scss
@@ -60,7 +60,7 @@
 .md-source {
   display: block;
   padding-right: px2rem(12px);
-  transition: opacity 0.25s;
+  transition: opacity 250ms;
   font-size: px2rem(13px);
   line-height: 1.2;
   white-space: nowrap;
@@ -145,7 +145,7 @@
 
     // Show after the data was loaded
     [data-md-state="done"] & {
-      animation: md-source__facts--done 0.25s ease-in;
+      animation: md-source__facts--done 250ms ease-in;
     }
   }
 
@@ -160,7 +160,7 @@
 
     // Show after the data was loaded
     [data-md-state="done"] & {
-      animation: md-source__fact--done 0.4s ease-out;
+      animation: md-source__fact--done 400ms ease-out;
     }
 
     // Middle dot before fact
@@ -206,9 +206,9 @@
   // styling of text links inside typesetted content
   html & {
     transition:
-      background 0.4s,
-      color      0.4s,
-      box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+      background 400ms,
+      color      400ms,
+      box-shadow 400ms cubic-bezier(0.4, 0, 0.2, 1);
 
     // Icon
     &::before {
diff --git a/src/assets/stylesheets/layout/_tabs.scss b/src/assets/stylesheets/layout/_tabs.scss
index d50c26bb7..35dbfc387 100644
--- a/src/assets/stylesheets/layout/_tabs.scss
+++ b/src/assets/stylesheets/layout/_tabs.scss
@@ -27,7 +27,7 @@
 // Tabs with outline
 .md-tabs {
   width: 100%;
-  transition: background 0.25s;
+  transition: background 250ms;
   background-color: $md-color-primary;
   color: $md-color-white;
   overflow: auto;
@@ -65,8 +65,8 @@
     display: block;
     margin-top: px2rem(16px);
     transition:
-      transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1),
-      opacity   0.25s;
+      transform 400ms cubic-bezier(0.1, 0.7, 0.1, 1),
+      opacity   250ms;
     font-size: px2rem(14px);
     opacity: 0.7;
 
@@ -80,7 +80,7 @@
     // Delay transitions by a small amount
     @for $i from 2 through 16 {
       .md-tabs__item:nth-child(#{$i}) & {
-        transition-delay: 0.02s * ($i - 1);
+        transition-delay: 20ms * ($i - 1);
       }
     }
   }
@@ -94,9 +94,9 @@
     .md-tabs__link {
       transform: translateY(50%);
       transition:
-        color     0.25s,
-        transform 0s 0.4s,
-        opacity   0.1s;
+        color     250ms,
+        transform   0ms 400ms,
+        opacity   100ms;
       opacity: 0;
     }
   }