Cool_Tools/mkdocs-material
1
0
Fork 0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2024-11-24 07:30:12 +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);
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);

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

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

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

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

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

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

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

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

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

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

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

@ -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: "";
// }
// }
}

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

@ -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) {

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

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

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

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

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

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

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

@ -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

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

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

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

@ -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 {

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

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