Cool_Tools/mkdocs-material
1
0
Fork 0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2025-02-17 18:49:21 +01:00
Code Issues Releases Wiki Activity

Refactored all <time> units to use ms instead of s

Browse Source
This commit is contained in:
squidfunk 2020-02-17 10:04:12 +01:00
parent a41037da5f
commit c9d2e7774e
15 changed files with 91 additions and 140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/assets/stylesheets/app-palette.scss
View File

@ -48,8 +48,8 @@ button[data-md-color-accent] {
margin-bottom: px2rem(4px); margin-bottom: px2rem(4px);
padding: px2rem(24px) px2rem(8px) px2rem(4px); padding: px2rem(24px) px2rem(8px) px2rem(4px);
transition: transition:
background-color 0.25s, background-color 250ms,
opacity 0.25s; opacity 250ms;
border-radius: px2rem(2px); border-radius: px2rem(2px);
color: $md-color-white; color: $md-color-white;
font-size: ms(-1); font-size: ms(-1);

2
src/assets/stylesheets/base/_typeset.scss
View File

@ -140,7 +140,7 @@ kbd {
// Also enable color transition on pseudo elements // Also enable color transition on pseudo elements
&, &,
&::before { &::before {
transition: color 0.125s; transition: color 125ms;
} }
// Hovered and active links // Hovered and active links

8
src/assets/stylesheets/extensions/_footnotes.scss
View File

@ -70,7 +70,7 @@
// Footnote // Footnote
li { li {
transition: color 0.25s; transition: color 250ms;
// Darken color for targeted footnote // Darken color for targeted footnote
&:target { &:target {
@ -120,9 +120,9 @@
display: inline-block; display: inline-block;
transform: translateX(px2rem(5px)); transform: translateX(px2rem(5px));
transition: transition:
transform 0.25s 0.125s, transform 250ms 125ms,
color 0.25s, color 250ms,
opacity 0.125s 0.125s; opacity 125ms 125ms;
color: $md-color-black--lighter; color: $md-color-black--lighter;
// Hack: remove Unicode arrow for icon // Hack: remove Unicode arrow for icon
font-size: 0; font-size: 0;

16
src/assets/stylesheets/extensions/_permalinks.scss
View File

@ -33,10 +33,10 @@
margin-left: px2rem(10px); margin-left: px2rem(10px);
transform: translate(0, px2rem(5px)); transform: translate(0, px2rem(5px));
transition: transition:
transform 0.25s 0.25s, transform 250ms 250ms,
color 0.25s, color 250ms,
opacity 0.125s 0.25s, opacity 125ms 250ms,
visibility 0s 0.5s; visibility 0ms 500ms;
opacity: 0; opacity: 0;
// Hack: If we don't set visibility hidden, the text content of the node // 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. // will include the headerlink character, which is why Google indexes them.
@ -90,10 +90,10 @@
& .headerlink:focus { & .headerlink:focus {
transform: translate(0, 0); transform: translate(0, 0);
transition: transition:
transform 0.25s 0.25s, transform 250ms 250ms,
color 0.25s, color 250ms,
opacity 0.125s 0.25s, opacity 125ms 250ms,
visibility 0s; visibility 0ms;
opacity: 1; opacity: 1;
visibility: visible; visibility: visible;
} }

2
src/assets/stylesheets/extensions/pymdown/_tabbed.scss
View File

@ -89,7 +89,7 @@
> label { > label {
width: auto; width: auto;
padding: px2rem(12px); padding: px2rem(12px);
transition: color 0.125s; transition: color 125ms;
font-size: ms(-1); font-size: ms(-1);
cursor: pointer; cursor: pointer;

16
src/assets/stylesheets/layout/_base.scss
View File

@ -142,9 +142,9 @@ hr {
width: 0; width: 0;
height: 0; height: 0;
transition: transition:
width 0s 0.25s, width 0ms 250ms,
height 0s 0.25s, height 0ms 250ms,
opacity 0.25s; opacity 250ms;
background-color: $md-color-black--light; background-color: $md-color-black--light;
opacity: 0; opacity: 0;
z-index: 3; z-index: 3;
@ -157,9 +157,9 @@ hr {
width: 100%; width: 100%;
height: 100%; height: 100%;
transition: transition:
width 0s, width 0ms,
height 0s, height 0ms,
opacity 0.25s; opacity 250ms;
opacity: 1; opacity: 1;
} }
} }
@ -222,8 +222,8 @@ hr {
clip: auto; clip: auto;
transform: translateX(0); transform: translateX(0);
transition: transition:
transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.175s 0.075s; opacity 175ms 75ms;
opacity: 1; opacity: 1;
z-index: 10; z-index: 10;
} }

51
src/assets/stylesheets/layout/_clipboard.scss
View File

@ -31,7 +31,7 @@
right: px2rem(6px); right: px2rem(6px);
width: px2rem(28px); width: px2rem(28px);
height: px2rem(28px); height: px2rem(28px);
transition: color 0.25s; transition: color 250ms;
border-radius: px2rem(2px); border-radius: px2rem(2px);
color: $md-color-black--lightest; color: $md-color-black--lightest;
font-size: px2rem(16px); font-size: px2rem(16px);
@ -58,53 +58,4 @@
.codehilite &:hover { .codehilite &:hover {
color: $md-color-accent; 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: "";
// }
// }
} }

2
src/assets/stylesheets/layout/_footer.scss
View File

@ -48,7 +48,7 @@
&__link { &__link {
padding-top: px2rem(28px); padding-top: px2rem(28px);
padding-bottom: px2rem(8px); padding-bottom: px2rem(8px);
transition: opacity 0.25s; transition: opacity 250ms;
// [tablet +]: Set proportional width // [tablet +]: Set proportional width
@include break-from-device(tablet) { @include break-from-device(tablet) {

20
src/assets/stylesheets/layout/_header.scss
View File

@ -32,8 +32,8 @@
left: 0; left: 0;
height: px2rem(48px); height: px2rem(48px);
transition: transition:
background-color 0.25s, background-color 250ms,
color 0.25s; color 250ms;
background-color: $md-color-primary; background-color: $md-color-primary;
color: $md-color-white; color: $md-color-white;
box-shadow: none; box-shadow: none;
@ -126,8 +126,8 @@
position: absolute; position: absolute;
width: calc(100% - #{px2rem(20px)}); width: calc(100% - #{px2rem(20px)});
transition: transition:
transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1), transform 400ms cubic-bezier(0.1, 0.7, 0.1, 1),
opacity 0.15s; opacity 150ms;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
@ -136,8 +136,8 @@
& + & { & + & {
transform: translateX(px2rem(25px)); transform: translateX(px2rem(25px));
transition: transition:
transform 0.4s cubic-bezier(1, 0.7, 0.1, 0.1), transform 400ms cubic-bezier(1, 0.7, 0.1, 0.1),
opacity 0.15s; opacity 150ms;
opacity: 0; opacity: 0;
z-index: -1; z-index: -1;
pointer-events: none; pointer-events: none;
@ -169,8 +169,8 @@
&[data-md-state="active"] .md-header-nav__topic { &[data-md-state="active"] .md-header-nav__topic {
transform: translateX(px2rem(-25px)); transform: translateX(px2rem(-25px));
transition: transition:
transform 0.4s cubic-bezier(1, 0.7, 0.1, 0.1), transform 400ms cubic-bezier(1, 0.7, 0.1, 0.1),
opacity 0.15s; opacity 150ms;
opacity: 0; opacity: 0;
z-index: -1; z-index: -1;
pointer-events: none; pointer-events: none;
@ -184,8 +184,8 @@
& + .md-header-nav__topic { & + .md-header-nav__topic {
transform: translateX(0); transform: translateX(0);
transition: transition:
transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1), transform 400ms cubic-bezier(0.1, 0.7, 0.1, 1),
opacity 0.15s; opacity 150ms;
opacity: 1; opacity: 1;
z-index: 0; z-index: 0;
pointer-events: initial; pointer-events: initial;

12
src/assets/stylesheets/layout/_hero.scss
View File

@ -26,7 +26,7 @@
// Hero teaser // Hero teaser
.md-hero { .md-hero {
transition: background 0.25s; transition: background 250ms;
background-color: $md-color-primary; background-color: $md-color-primary;
color: $md-color-white; color: $md-color-white;
font-size: ms(1); font-size: ms(1);
@ -37,9 +37,9 @@
margin-top: px2rem(20px); margin-top: px2rem(20px);
padding: px2rem(16px) px2rem(16px) px2rem(8px); padding: px2rem(16px) px2rem(16px) px2rem(8px);
transition: transition:
transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1), transform 400ms cubic-bezier(0.1, 0.7, 0.1, 1),
opacity 0.25s; opacity 250ms;
transition-delay: 0.1s; transition-delay: 100ms;
// [tablet -]: Compensate for missing tabs // [tablet -]: Compensate for missing tabs
@include break-to-device(tablet) { @include break-to-device(tablet) {
@ -52,8 +52,8 @@
pointer-events: none; pointer-events: none;
transform: translateY(px2rem(12.5px)); transform: translateY(px2rem(12.5px));
transition: transition:
transform 0s 0.4s, transform 0ms 400ms,
opacity 0.1s 0s; opacity 100ms 0ms;
opacity: 0; opacity: 0;
} }

14
src/assets/stylesheets/layout/_nav.scss
View File

@ -104,7 +104,7 @@
&__link { &__link {
display: block; display: block;
margin-top: 0.625em; margin-top: 0.625em;
transition: color 0.125s; transition: color 125ms;
text-overflow: ellipsis; text-overflow: ellipsis;
cursor: pointer; cursor: pointer;
overflow: hidden; overflow: hidden;
@ -393,8 +393,8 @@
display: flex; display: flex;
transform: translateX(100%); transform: translateX(100%);
transition: transition:
transform 0.25s cubic-bezier(0.8, 0, 0.6, 1), transform 250ms cubic-bezier(0.8, 0, 0.6, 1),
opacity 0.125s 0.05s; opacity 125ms 50ms;
opacity: 0; opacity: 0;
// Adjust for RTL languages // Adjust for RTL languages
@ -412,8 +412,8 @@
.md-nav__toggle:checked ~ & { .md-nav__toggle:checked ~ & {
transform: translateX(0); transform: translateX(0);
transition: transition:
transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.125s 0.125s; opacity 125ms 125ms;
opacity: 1; opacity: 1;
// Just show navigation, if browser doesn't supports 3D transforms // 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 // Animation is only possible if JavaScript is available, as the max-height
// property must be calculated before transitioning // 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 // Snap to site and table of contents title
.md-nav__title[for="__drawer"], .md-nav__title[for="__drawer"],
@ -506,7 +506,7 @@
// Only animate icon when JavaScript is available, as the height can // Only animate icon when JavaScript is available, as the height can
// not be animated anyway, and better no fun than half the fun // not be animated anyway, and better no fun than half the fun
.js & { .js & {
transition: transform 0.4s; transition: transform 400ms;
} }
} }

54
src/assets/stylesheets/layout/_search.scss
View File

@ -60,8 +60,8 @@ $md-toggle__search--checked:
height: px2rem(36px); height: px2rem(36px);
transform-origin: center; transform-origin: center;
transition: transition:
transform 0.3s 0.1s, transform 300ms 100ms,
opacity 0.2s 0.2s; opacity 200ms 200ms;
border-radius: px2rem(20px); border-radius: px2rem(20px);
background-color: $md-color-white; background-color: $md-color-white;
overflow: hidden; overflow: hidden;
@ -76,8 +76,8 @@ $md-toggle__search--checked:
// Expanded overlay // Expanded overlay
#{$md-toggle__search--checked} & { #{$md-toggle__search--checked} & {
transition: transition:
transform 0.4s, transform 400ms,
opacity 0.1s; opacity 100ms;
opacity: 1; opacity: 1;
} }
} }
@ -109,9 +109,9 @@ $md-toggle__search--checked:
width: 0; width: 0;
height: 0; height: 0;
transition: transition:
width 0s 0.25s, width 0ms 250ms,
height 0s 0.25s, height 0ms 250ms,
opacity 0.25s; opacity 250ms;
background-color: $md-color-black--light; background-color: $md-color-black--light;
cursor: pointer; cursor: pointer;
@ -126,9 +126,9 @@ $md-toggle__search--checked:
width: 100%; width: 100%;
height: 100%; height: 100%;
transition: transition:
width 0s, width 0ms,
height 0s, height 0ms,
opacity 0.25s; opacity 250ms;
opacity: 1; opacity: 1;
} }
} }
@ -146,10 +146,10 @@ $md-toggle__search--checked:
height: 100%; height: 100%;
transform: translateX(5%); transform: translateX(5%);
transition: transition:
right 0s 0.3s, right 0ms 300ms,
left 0s 0.3s, left 0ms 300ms,
transform 0.15s 0.15s cubic-bezier(0.4, 0, 0.2, 1), transform 150ms 150ms cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.15s 0.15s; opacity 150ms 150ms;
opacity: 0; opacity: 0;
z-index: 2; z-index: 2;
@ -158,10 +158,10 @@ $md-toggle__search--checked:
left: 0; left: 0;
transform: translateX(0); transform: translateX(0);
transition: transition:
right 0s 0s, right 0ms 0ms,
left 0s 0s, left 0ms 0ms,
transform 0.15s 0.15s cubic-bezier(0.1, 0.7, 0.1, 1), transform 150ms 150ms cubic-bezier(0.1, 0.7, 0.1, 1),
opacity 0.15s 0.15s; opacity 150ms 150ms;
opacity: 1; opacity: 1;
// Adjust for RTL languages // Adjust for RTL languages
@ -185,7 +185,7 @@ $md-toggle__search--checked:
width: px2rem(234px); width: px2rem(234px);
padding: px2rem(2px) 0; padding: px2rem(2px) 0;
float: right; 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 // Adjust for RTL languages
[dir="rtl"] & { [dir="rtl"] & {
@ -232,7 +232,7 @@ $md-toggle__search--checked:
// Transition on placeholder // Transition on placeholder
&::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 // Placeholder and icon color in active state
@ -259,8 +259,8 @@ $md-toggle__search--checked:
height: px2rem(36px); height: px2rem(36px);
padding-left: px2rem(44px); padding-left: px2rem(44px);
transition: transition:
background-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 0.25s cubic-bezier(0.1, 0.7, 0.1, 1); color 250ms cubic-bezier(0.1, 0.7, 0.1, 1);
border-radius: px2rem(2px); border-radius: px2rem(2px);
background-color: $md-color-black--lighter; background-color: $md-color-black--lighter;
color: inherit; color: inherit;
@ -306,8 +306,8 @@ $md-toggle__search--checked:
&__icon { &__icon {
position: absolute; position: absolute;
transition: transition:
color 0.25s cubic-bezier(0.1, 0.7, 0.1, 1), color 250ms cubic-bezier(0.1, 0.7, 0.1, 1),
opacity 0.25s; opacity 250ms;
font-size: $md-icon-size; font-size: $md-icon-size;
cursor: pointer; cursor: pointer;
z-index: 2; z-index: 2;
@ -357,8 +357,8 @@ $md-toggle__search--checked:
right: px2rem(10px); right: px2rem(10px);
transform: scale(0.125); transform: scale(0.125);
transition: transition:
transform 0.15s cubic-bezier(0.1, 0.7, 0.1, 1), transform 150ms cubic-bezier(0.1, 0.7, 0.1, 1),
opacity 0.15s; opacity 150ms;
opacity: 0; opacity: 0;
// Adjust for RTL languages // Adjust for RTL languages
@ -403,7 +403,7 @@ $md-toggle__search--checked:
// [tablet landscape +]: Header-embedded search // [tablet landscape +]: Header-embedded search
@include break-from-device(tablet landscape) { @include break-from-device(tablet landscape) {
top: px2rem(38px); top: px2rem(38px);
transition: opacity 0.4s; transition: opacity 400ms;
opacity: 0; opacity: 0;
// Show search output in active state // Show search output in active state

4
src/assets/stylesheets/layout/_sidebar.scss
View File

@ -62,8 +62,8 @@ $md-toggle__drawer--checked:
height: 100%; height: 100%;
transform: translateX(0); transform: translateX(0);
transition: transition:
transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.25s; box-shadow 250ms;
background-color: $md-color-white; background-color: $md-color-white;
z-index: 3; z-index: 3;

12
src/assets/stylesheets/layout/_source.scss
View File

@ -60,7 +60,7 @@
.md-source { .md-source {
display: block; display: block;
padding-right: px2rem(12px); padding-right: px2rem(12px);
transition: opacity 0.25s; transition: opacity 250ms;
font-size: px2rem(13px); font-size: px2rem(13px);
line-height: 1.2; line-height: 1.2;
white-space: nowrap; white-space: nowrap;
@ -145,7 +145,7 @@
// Show after the data was loaded // Show after the data was loaded
[data-md-state="done"] & { [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 // Show after the data was loaded
[data-md-state="done"] & { [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 // Middle dot before fact
@ -206,9 +206,9 @@
// styling of text links inside typesetted content // styling of text links inside typesetted content
html & { html & {
transition: transition:
background 0.4s, background 400ms,
color 0.4s, color 400ms,
box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1); box-shadow 400ms cubic-bezier(0.4, 0, 0.2, 1);
// Icon // Icon
&::before { &::before {

14
src/assets/stylesheets/layout/_tabs.scss
View File

@ -27,7 +27,7 @@
// Tabs with outline // Tabs with outline
.md-tabs { .md-tabs {
width: 100%; width: 100%;
transition: background 0.25s; transition: background 250ms;
background-color: $md-color-primary; background-color: $md-color-primary;
color: $md-color-white; color: $md-color-white;
overflow: auto; overflow: auto;
@ -65,8 +65,8 @@
display: block; display: block;
margin-top: px2rem(16px); margin-top: px2rem(16px);
transition: transition:
transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1), transform 400ms cubic-bezier(0.1, 0.7, 0.1, 1),
opacity 0.25s; opacity 250ms;
font-size: px2rem(14px); font-size: px2rem(14px);
opacity: 0.7; opacity: 0.7;
@ -80,7 +80,7 @@
// Delay transitions by a small amount // Delay transitions by a small amount
@for $i from 2 through 16 { @for $i from 2 through 16 {
.md-tabs__item:nth-child(#{$i}) & { .md-tabs__item:nth-child(#{$i}) & {
transition-delay: 0.02s * ($i - 1); transition-delay: 20ms * ($i - 1);
} }
} }
} }
@ -94,9 +94,9 @@
.md-tabs__link { .md-tabs__link {
transform: translateY(50%); transform: translateY(50%);
transition: transition:
color 0.25s, color 250ms,
transform 0s 0.4s, transform 0ms 400ms,
opacity 0.1s; opacity 100ms;
opacity: 0; opacity: 0;
} }
} }