ch4o5/locomotive-boilerplate
Template
1
0
Fork 0
mirror of https://github.com/locomotivemtl/locomotive-boilerplate.git synced 2026-01-15 00:55:08 +08:00
Code Issues Projects Releases Wiki Activity

Import locomotive scroll CSS / Removed unused styles (scroll, scorllbar) / Update DOM Markup / Update doc

Browse Source
This commit is contained in:
Lucas Vallenet
2023-06-12 09:36:14 +02:00
parent 43a5eb1ad3
commit e16ba2ca16
12 changed files with 26 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
assets.json
View File

@@ -1,3 +1,3 @@
{ {
"version": 1686231707933 "version": 1686555331183
} }

38
assets/styles/components/_scrollbar.scss
View File

@@ -1,38 +0,0 @@
// ==========================================================================
// Components / Scrollbar
// ==========================================================================
.c-scrollbar {
position: absolute;
right: 0;
top: 0;
width: 11px;
height: 100vh;
transform-origin: center right;
transition: transform 0.3s, opacity 0.3s;
opacity: 0;
&:hover {
transform: scaleX(1.45);
}
&:hover, .has-scroll-scrolling &, .has-scroll-dragging & {
opacity: 1;
}
}
.c-scrollbar_thumb {
position: absolute;
top: 0;
right: 0;
background-color: color(darkest);
opacity: 0.5;
width: 7px;
border-radius: 10px;
margin: 2px;
cursor: grab;
.has-scroll-dragging & {
cursor: grabbing;
}
}

16
assets/styles/elements/_document.scss
View File

@@ -51,25 +51,9 @@ html {
&.is-loading { &.is-loading {
cursor: wait; cursor: wait;
} }
&.has-scroll-smooth {
overflow: hidden;
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
&.has-scroll-dragging {
user-select: none;
}
} }
body { body {
.has-scroll-smooth & {
overflow: hidden;
}
} }
::selection { ::selection {

10
assets/styles/main.scss
View File

@@ -32,6 +32,10 @@
@import "generic/form"; @import "generic/form";
@import "generic/button"; @import "generic/button";
// Vendors
// ==========================================================================
@import "vendors/locomotive-scroll";
// Elements // Elements
// ========================================================================== // ==========================================================================
@@ -40,7 +44,6 @@
// Objects // Objects
// ========================================================================== // ==========================================================================
@import "objects/scroll";
@import "objects/container"; @import "objects/container";
@import "objects/ratio"; @import "objects/ratio";
@import "objects/icons"; @import "objects/icons";
@@ -48,14 +51,9 @@
// @import "objects/layout"; // @import "objects/layout";
// @import "objects/table"; // @import "objects/table";
// Vendors
// ==========================================================================
// @import "vendors/vendor";
// Components // Components
// ========================================================================== // ==========================================================================
@import "components/scrollbar";
@import "components/heading"; @import "components/heading";
@import "components/button"; @import "components/button";
@import "components/form"; @import "components/form";

6
assets/styles/objects/_scroll.scss → assets/styles/vendors/_locomotive-scroll.scss vendored
View File

@@ -1,7 +1,5 @@
// ========================================================================== // ==========================================================================
// Objects / Scroll // Vendors / Locomotive Scroll
// ========================================================================== // ==========================================================================
.o-scroll { @import "node_modules/locomotive-scroll/bundled/locomotive-scroll";
min-height: 100vh;
}

5
docs/technologies.md
View File

@@ -181,10 +181,7 @@ detection and smooth scrolling with parallax.
```js ```js
import LocomotiveScroll from 'locomotive-scroll'; import LocomotiveScroll from 'locomotive-scroll';
this.scroll = new LocomotiveScroll({ this.scroll = new LocomotiveScroll({})
el: this.el,
smooth: true
});
```` ````
Learn more about [Locomotive Scroll][locomotive-scroll]. Learn more about [Locomotive Scroll][locomotive-scroll].

2
www/assets/styles/main.css
View File

File diff suppressed because one or more lines are too long

2
www/assets/styles/main.css.map
View File

File diff suppressed because one or more lines are too long

8
www/form.html
View File

@@ -18,8 +18,8 @@
</head> </head>
<body data-module-load> <body data-module-load>
<div data-load-container> <div data-load-container>
<div class="o-scroll" data-module-scroll="main"> <div data-module-scroll="main">
<header data-scroll-section> <header>
<a href="/"><h1>Locomotive Boilerplate</h1></a> <a href="/"><h1>Locomotive Boilerplate</h1></a>
<nav> <nav>
<ul> <ul>
@@ -30,7 +30,7 @@
</nav> </nav>
</header> </header>
<main data-scroll-section> <main>
<div class="o-container"> <div class="o-container">
<h1 class="c-heading -h1">Page</h1> <h1 class="c-heading -h1">Page</h1>
@@ -90,7 +90,7 @@
</div> </div>
</main> </main>
<footer data-scroll-section> <footer>
<p>Made with <a href="https://github.com/locomotivemtl/locomotive-boilerplate" title="Locomotive Boilerplate" target="_blank" rel="noopener">🚂</a></p> <p>Made with <a href="https://github.com/locomotivemtl/locomotive-boilerplate" title="Locomotive Boilerplate" target="_blank" rel="noopener">🚂</a></p>
</footer> </footer>
</div> </div>

8
www/grid.html
View File

@@ -34,8 +34,8 @@
<body data-module-load> <body data-module-load>
<div data-load-container> <div data-load-container>
<div class="o-scroll" data-module-scroll="main"> <div data-module-scroll="main">
<header data-scroll-section> <header>
<a href="/"> <a href="/">
<h1>Locomotive Boilerplate</h1> <h1>Locomotive Boilerplate</h1>
</a> </a>
@@ -48,7 +48,7 @@
</nav> </nav>
</header> </header>
<main data-scroll-section> <main>
<div class="o-container"> <div class="o-container">
<h1 class="c-heading -h1">Hello</h1> <h1 class="c-heading -h1">Hello</h1>
@@ -76,7 +76,7 @@
</div> </div>
</main> </main>
<footer data-scroll-section> <footer>
<p>Made with <a href="https://github.com/locomotivemtl/locomotive-boilerplate" <p>Made with <a href="https://github.com/locomotivemtl/locomotive-boilerplate"
title="Locomotive Boilerplate" target="_blank" rel="noopener">🚂</a></p> title="Locomotive Boilerplate" target="_blank" rel="noopener">🚂</a></p>
</footer> </footer>

8
www/images.html
View File

@@ -18,8 +18,8 @@
</head> </head>
<body data-module-load> <body data-module-load>
<div data-load-container> <div data-load-container>
<div class="o-scroll" data-module-scroll="main"> <div data-module-scroll="main">
<header data-scroll-section> <header>
<a href="/"><h1>Locomotive Boilerplate</h1></a> <a href="/"><h1>Locomotive Boilerplate</h1></a>
<nav> <nav>
<ul> <ul>
@@ -30,7 +30,7 @@
</nav> </nav>
</header> </header>
<main data-scroll-section> <main>
<div class="o-container"> <div class="o-container">
<h1 class="c-heading -h1">Images</h1> <h1 class="c-heading -h1">Images</h1>
@@ -116,7 +116,7 @@
</div> </div>
</main> </main>
<footer data-scroll-section> <footer>
<p>Made with <a href="https://github.com/locomotivemtl/locomotive-boilerplate" title="Locomotive Boilerplate" target="_blank" rel="noopener">🚂</a></p> <p>Made with <a href="https://github.com/locomotivemtl/locomotive-boilerplate" title="Locomotive Boilerplate" target="_blank" rel="noopener">🚂</a></p>
</footer> </footer>
</div> </div>

8
www/index.html
View File

@@ -42,8 +42,8 @@
<body data-module-load> <body data-module-load>
<div data-load-container> <div data-load-container>
<div class="o-scroll" data-module-scroll="main"> <div data-module-scroll="main">
<header data-scroll-section> <header>
<a href="/"> <a href="/">
<h1>Locomotive Boilerplate</h1> <h1>Locomotive Boilerplate</h1>
</a> </a>
@@ -56,13 +56,13 @@
</nav> </nav>
</header> </header>
<main data-module-example data-scroll-section> <main data-module-example>
<div class="o-container"> <div class="o-container">
<h1 class="c-heading -h1">Hello</h1> <h1 class="c-heading -h1">Hello</h1>
</div> </div>
</main> </main>
<footer data-scroll-section> <footer>
<p>Made with <a href="https://github.com/locomotivemtl/locomotive-boilerplate" <p>Made with <a href="https://github.com/locomotivemtl/locomotive-boilerplate"
title="Locomotive Boilerplate" target="_blank" rel="noopener">🚂</a></p> title="Locomotive Boilerplate" target="_blank" rel="noopener">🚂</a></p>
</footer> </footer>