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; } }