library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-11-14 11:14:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix #3785

Browse Source
This commit is contained in:
Jeremy Thomas 2024-04-17 13:59:25 +01:00
parent a38cd562d9
commit fb1dc09095
4 changed files with 39 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
docs/_sass/home/amis.scss
View File

@ -5,27 +5,35 @@
background-color: cv.getVar("scheme-main"); background-color: cv.getVar("scheme-main");
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
row-gap: 0.5rem; gap: 0;
position: relative; position: relative;
margin: 0 -1rem; margin: 0 -1rem;
justify-content: center; justify-content: center;
} }
.bd-ami { .bd-ami {
background-color: var(--color);
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
border-radius: 0.25rem;
justify-content: center; justify-content: center;
padding: 0.75rem; padding: 0.75rem;
height: 5rem; height: 5rem;
position: relative;
vertical-align: top; vertical-align: top;
mix-blend-mode: luminosity;
transition-duration: cv.getVar("duration"); transition-duration: cv.getVar("duration");
transition-property: background-color, mix-blend-mode; transition-property: background-color, transform;
transform-origin: center;
&:hover { &:hover {
background-color: var(--color); border-radius: 0.5rem;
mix-blend-mode: normal; transform: scale(1.2);
z-index: 1;
box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
}
&:active {
transform: scale(1.15);
box-shadow: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.5);
} }
} }
@ -39,7 +47,6 @@
.bd-ami-footer { .bd-ami-footer {
border-radius: 0.25rem; border-radius: 0.25rem;
height: 4rem; height: 4rem;
mix-blend-mode: normal;
} }
.bd-ami-footer img { .bd-ami-footer img {

20
docs/assets/css/website.css
View File

@ -34429,27 +34429,34 @@ has-background-moon.is-hoverable:active {
background-color: var(--bulma-scheme-main); background-color: var(--bulma-scheme-main);
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
row-gap: 0.5rem; gap: 0;
position: relative; position: relative;
margin: 0 -1rem; margin: 0 -1rem;
justify-content: center; justify-content: center;
} }
.bd-ami { .bd-ami {
background-color: var(--color);
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
border-radius: 0.25rem;
justify-content: center; justify-content: center;
padding: 0.75rem; padding: 0.75rem;
height: 5rem; height: 5rem;
position: relative;
vertical-align: top; vertical-align: top;
mix-blend-mode: luminosity;
transition-duration: var(--bulma-duration); transition-duration: var(--bulma-duration);
transition-property: background-color, mix-blend-mode; transition-property: background-color, transform;
transform-origin: center;
} }
.bd-ami:hover { .bd-ami:hover {
background-color: var(--color); border-radius: 0.5rem;
mix-blend-mode: normal; transform: scale(1.2);
z-index: 1;
box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
}
.bd-ami:active {
transform: scale(1.15);
box-shadow: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.5);
} }
.bd-ami img { .bd-ami img {
@ -34462,7 +34469,6 @@ has-background-moon.is-hoverable:active {
.bd-ami-footer { .bd-ami-footer {
border-radius: 0.25rem; border-radius: 0.25rem;
height: 4rem; height: 4rem;
mix-blend-mode: normal;
} }
.bd-ami-footer img { .bd-ami-footer img {

2
docs/assets/css/website.min.css vendored
View File

File diff suppressed because one or more lines are too long

14
docs/assets/javascript/home.js
View File

@ -52,7 +52,7 @@ document.addEventListener("DOMContentLoaded", () => {
circle: "b", circle: "b",
}, },
skeletons: { skeletons: {
startAngle: 0, startAngle: -300,
circle: "b", circle: "b",
}, },
dark: { dark: {
@ -112,12 +112,20 @@ document.addEventListener("DOMContentLoaded", () => {
}; };
const $dots = document.querySelectorAll(".js-dot"); const $dots = document.querySelectorAll(".js-dot");
const reducedMotion =
window.matchMedia(`(prefers-reduced-motion: reduce)`) === true ||
window.matchMedia(`(prefers-reduced-motion: reduce)`).matches === true;
$dots.forEach(($dot) => { $dots.forEach(($dot) => {
const id = $dot.dataset.id; const id = $dot.dataset.id;
setInterval(() => {
if (reducedMotion) {
animate($dot, id); animate($dot, id);
}, 10); } else {
setInterval(() => {
animate($dot, id);
}, 10);
}
}); });
// Grid // Grid