Travis build: 126 [FORCED]
This commit is contained in:
30secondsofcode
Binary file not shown.
|
Before Width: | Height: | Size: 35 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.6 KiB |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -17,16 +17,16 @@ var e=Element.prototype;e.matches||(e.matches=e.matchesSelector||e.msMatchesSele
|
||||
},{}],"Xw/u":[function(require,module,exports) {
|
||||
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.createEventHub=exports.on=exports.easeOutQuint=exports.scrollY=exports.selectAll=exports.select=void 0;var t=function(t){return(arguments.length>1&&void 0!==arguments[1]?arguments[1]:document).querySelector(t)};exports.select=t;var e=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:document;return[].slice.call(e.querySelectorAll(t))};exports.selectAll=e;var r=function(){return window.scrollY||window.pageYOffset};exports.scrollY=r;var n=function(t,e,r,n){return r*((t=t/n-1)*Math.pow(t,4)+1)+e};exports.easeOutQuint=n;var o=function(t,e,r){var n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{},o=function(t){return t.target.matches(n.target)&&r.call(t.target,t)};if(t.addEventListener(e,n.target?o:r,n.options||!1),n.target)return o};exports.on=o;var a=function(){return{hub:Object.create(null),emit:function(t,e){(this.hub[t]||[]).forEach(function(t){return t(e)})},on:function(t,e){this.hub[t]||(this.hub[t]=[]),this.hub[t].push(e)},off:function(t,e){var r=(this.hub[t]||[]).findIndex(function(t){return t===e});r>-1&&this.hub[t].splice(r,1)}}};exports.createEventHub=a,window.EventHub=a(),/iPhone|iPad|iPod/.test(navigator.platform)&&!window.MSStream&&(document.body.style.cursor="pointer"),/Mac/.test(navigator.platform)&&document.documentElement.classList.add("macOS"),function(){var t=navigator.userAgent,e=/Mac/.test(navigator.platform)&&(t.match(/OS X 10[._](\d{1,2})/)||[])[1]>=11,r=(t.match(/Chrome\/(\d+)\./)||[])[1]<64||(t.match(/Firefox\/(\d+)\./)||[])[1]<58,n=[].slice.call(document.querySelectorAll("*"));e&&r?(document.documentElement.style.letterSpacing="-0.3px",n.forEach(function(t){parseFloat(getComputedStyle(t).fontSize)>=20&&(t.style.letterSpacing="0.3px")})):e&&!r&&n.forEach(function(t){var e=getComputedStyle(t),r=e.fontSize;"italic"===e.fontStyle&&(t.style.letterSpacing=parseFloat(r)>=20?"0.3px":"-0.3px")})}();
|
||||
},{}],"bnBP":[function(require,module,exports) {
|
||||
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var e=s(require("jump.js")),t=require("../deps/utils");function s(e){return e&&e.__esModule?e:{default:e}}var i=(0,t.select)(".hamburger"),n=(0,t.select)(".sidebar__links"),a=(0,t.selectAll)(".sidebar__section"),r="is-active",l=function(){window.innerWidth<=991&&([i,n].forEach(function(e){return e.classList.toggle(r)}),i.setAttribute("aria-expanded",i.classList.contains(r)?"true":"false"))};i.addEventListener("click",l),n.addEventListener("click",function(s){var i=s.target.closest(".sidebar__link");i&&(setTimeout(l,50),(0,e.default)(i.getAttribute("href"),{duration:500,easing:t.easeOutQuint,offset:window.innerWidth<=991?-64:-32}))}),document.addEventListener("click",function(e){e.target.closest(".sidebar__links")||e.target.closest(".hamburger")||!n.classList.contains(r)||l()}),EventHub.on("Tag.click",function(e){a.forEach(function(t){t.style.display="block",t.dataset.type!==e.type&&"all"!==e.type&&(t.style.display="none")})});var c={toggle:l};exports.default=c;
|
||||
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var e=s(require("jump.js")),t=require("../deps/utils");function s(e){return e&&e.__esModule?e:{default:e}}var i=(0,t.select)(".hamburger"),n=(0,t.select)(".sidebar__links"),a=(0,t.selectAll)(".sidebar__section"),r="is-active",l=function(){window.innerWidth<=991&&([i,n].forEach(function(e){return e.classList.toggle(r)}),i.setAttribute("aria-expanded",i.classList.contains(r)?"true":"false"))};i.addEventListener("click",l),n.addEventListener("click",function(s){var i=s.target.closest(".sidebar__link");i&&(setTimeout(l,50),(0,e.default)(i.getAttribute("href"),{duration:500,easing:t.easeOutQuint,offset:window.innerWidth<=991?-64:-32}))}),document.addEventListener("click",function(e){e.target.closest(".sidebar__links")||e.target.closest(".hamburger")||!n.classList.contains(r)||l()}),EventHub.on("Tag.click",function(e){e.type_new=e.type.map(function(e){return e.dataset.type}),a.forEach(function(t){t.style.display="block",e.type_new.includes(t.dataset.type)||e.type_new.includes("all")?t.style.display="":t.style.display="none"})});var c={toggle:l};exports.default=c;
|
||||
},{"jump.js":"NVQN","../deps/utils":"Xw/u"}],"/f8x":[function(require,module,exports) {
|
||||
"use strict";var e=i(require("jump.js")),t=require("../deps/utils");function i(e){return e&&e.__esModule?e:{default:e}}var s=(0,t.select)(".back-to-top-button");window.addEventListener("scroll",function(){s.classList[(0,t.scrollY)()>500?"add":"remove"]("is-visible")}),s.onclick=function(){(0,e.default)(".header",{duration:750,easing:t.easeOutQuint})};
|
||||
},{"jump.js":"NVQN","../deps/utils":"Xw/u"}],"uI+q":[function(require,module,exports) {
|
||||
"use strict";var t=require("../deps/utils"),e=(0,t.selectAll)("button.tags__tag"),i=function(){e.forEach(function(t){return t.classList.remove("is-active")}),this.classList.add("is-active"),EventHub.emit("Tag.click",{type:this.dataset.type})};e.forEach(function(e){return(0,t.on)(e,"click",i)});
|
||||
"use strict";var t=require("../deps/utils");function i(t){return a(t)||e(t)||s()}function s(){throw new TypeError("Invalid attempt to spread non-iterable instance")}function e(t){if(Symbol.iterator in Object(t)||"[object Arguments]"===Object.prototype.toString.call(t))return Array.from(t)}function a(t){if(Array.isArray(t)){for(var i=0,s=new Array(t.length);i<t.length;i++)s[i]=t[i];return s}}var c=(0,t.selectAll)("button.tags__tag"),n=!1,r=function(){n&&"all"===this.dataset.type?(c.forEach(function(t){return t.classList.remove("is-active")}),this.classList.add("is-active")):n?((0,t.select)("button[data-type=all]").classList.remove("is-active"),this.classList.contains("is-active")&&(0,t.selectAll)("button.tags__tag.is-active").length>1?this.classList.remove("is-active"):this.classList.contains("is-active")?(this.classList.remove("is-active"),(0,t.select)("button[data-type=all]").classList.add("is-active")):this.classList.add("is-active")):(c.forEach(function(t){return t.classList.remove("is-active")}),this.classList.add("is-active")),EventHub.emit("Tag.click",{type:i((0,t.selectAll)("button.tags__tag.is-active"))})};onkeydown=function(t){t.shiftKey&&(n=!0)},onkeyup=function(t){"Shift"==t.key&&(n=!1)},c.forEach(function(i){return(0,t.on)(i,"click",r)});
|
||||
},{"../deps/utils":"Xw/u"}],"7KYq":[function(require,module,exports) {
|
||||
"use strict";var t=require("../deps/utils"),e=(0,t.selectAll)(".snippet");EventHub.on("Tag.click",function(l){e.forEach(function(e){(e.style.display="block","all"!==l.type)&&((0,t.selectAll)(".tags__tag",e).some(function(t){return t.dataset.type===l.type})||(e.style.display="none"))})});
|
||||
"use strict";var e=require("../deps/utils"),t=(0,e.selectAll)(".snippet");EventHub.on("Tag.click",function(n){n.type_new=n.type.map(function(e){return e.dataset.type}),t.forEach(function(t){(t.style.display="block",n.type_new.includes("all"))||((0,e.selectAll)(".tags__tag",t).some(function(e){return n.type_new.includes(e.dataset.type)})?t.style.display="":t.style.display="none")})});
|
||||
},{"../deps/utils":"Xw/u"}],"JXhB":[function(require,module,exports) {
|
||||
"use strict";var e=require("../deps/utils"),t=(0,e.selectAll)(".snippet");t.forEach(function(e){var t=document.createElement("form");t.action="https://codepen.io/pen/define",t.method="POST",t.target="_blank";var n=document.createElement("input");n.type="hidden",n.name="data";var r=document.createElement("button");r.classList="btn is-large codepen-btn",r.innerHTML='<i data-feather="edit-2"></i>Edit on Codepen';var o=e.querySelector("pre code.lang-css"),a=e.querySelector("pre code.lang-html"),i=e.querySelector("pre code.lang-js"),l={css:o.textContent,title:e.querySelector("h3 > span").textContent,html:a?a.textContent:"",js:i?i.textContent:""};n.value=JSON.stringify(l),t.appendChild(n),t.appendChild(r),e.insertBefore(t,e.querySelector(".snippet-demo").nextSibling)});
|
||||
},{"../deps/utils":"Xw/u"}],"mahc":[function(require,module,exports) {
|
||||
"use strict";require("focus-visible"),require("normalize.css"),require("prismjs");var e=n(require("feather-icons"));require("../css/deps/prism.css"),require("../css/index.scss"),require("./deps/polyfills");var r=n(require("./components/Sidebar")),s=n(require("./components/BackToTopButton")),i=n(require("./components/Tag")),o=n(require("./components/Snippet")),u=n(require("./components/CodepenCopy"));function n(e){return e&&e.__esModule?e:{default:e}}e.default.replace();
|
||||
},{"focus-visible":"PHYi","normalize.css":"9KIJ","prismjs":"HxJM","feather-icons":"2Os9","../css/deps/prism.css":"9KIJ","../css/index.scss":"9KIJ","./deps/polyfills":"C1Ar","./components/Sidebar":"bnBP","./components/BackToTopButton":"/f8x","./components/Tag":"uI+q","./components/Snippet":"7KYq","./components/CodepenCopy":"JXhB"}]},{},["mahc"], null)
|
||||
//# sourceMappingURL=js.e471b612.map
|
||||
//# sourceMappingURL=js.8bafe4ae.map
|
||||
1
docs/js.8bafe4ae.map
Normal file
1
docs/js.8bafe4ae.map
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
81
index.html
81
index.html
@ -38,7 +38,7 @@
|
||||
</section>
|
||||
<section data-type="animation" class="sidebar__section">
|
||||
<h4 class="sidebar__section-heading">animation</h4>
|
||||
<a class="sidebar__link" href="#bouncing-loader"><span>Bouncing loader</span></a><a class="sidebar__link" href="#donut-spinner"><span>Donut spinner</span></a><a class="sidebar__link" href="#easing-variables"><span>Easing variables</span></a><a class="sidebar__link" href="#height-transition"><span>Height transition</span></a><a class="sidebar__link" href="#hover-underline-animation"><span>Hover underline animation</span></a>
|
||||
<a class="sidebar__link" href="#bouncing-loader"><span>Bouncing loader</span></a><a class="sidebar__link" href="#donut-spinner"><span>Donut spinner</span></a><a class="sidebar__link" href="#easing-variables"><span>Easing variables</span></a><a class="sidebar__link" href="#height-transition"><span>Height transition</span></a><a class="sidebar__link" href="#hover-shadow-box-animation"><span>Hover Shadow Box Animation</span></a><a class="sidebar__link" href="#hover-underline-animation"><span>Hover underline animation</span></a>
|
||||
</section>
|
||||
<section data-type="interactivity" class="sidebar__section">
|
||||
<h4 class="sidebar__section-heading">interactivity</h4>
|
||||
@ -1409,6 +1409,85 @@ el.style.setProperty('--max-height', height + 'px')
|
||||
|
||||
<!-- tags: animation -->
|
||||
</div>
|
||||
<div class="snippet">
|
||||
<h3 id="hover-shadow-box-animation"><span>Hover Shadow Box Animation</span><span class="tags__tag snippet__tag" data-type="animation"><i data-feather="loader"></i>animation</span></h3>
|
||||
<p>Creates a shadow box around the text whern it is hovered.</p>
|
||||
<h4 data-type="HTML">HTML</h4><pre><code class="lang-html"><p class = "hover-shadow-box-animation"> Box it! </p>
|
||||
</code></pre>
|
||||
<h4 data-type="CSS">CSS</h4><pre><code class="lang-css">.hover-shadow-box-animation{
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
transform: perspective(1px) translateZ(0);
|
||||
box-shadow: 0 0 1px transparent;
|
||||
margin: 10px;
|
||||
transition-duration: 0.3s;
|
||||
transition-property: box-shadow, transform;
|
||||
}
|
||||
.hover-shadow-box-animation:hover, .hover-shadow-box-animation:focus, .hover-shadow-box-animation:active{
|
||||
box-shadow: 1px 10px 10px -10px rgba(0,0,24,0.5);
|
||||
transform: scale(1.2);
|
||||
}
|
||||
</code></pre>
|
||||
<h4>Demo</h4>
|
||||
<div class="snippet-demo" data-scope="hover-shadow-box-animation.md">
|
||||
<p class="hover-shadow-box-animation"> Box it! </p>
|
||||
</div>
|
||||
<style>[data-scope="hover-shadow-box-animation.md"] .hover-shadow-box-animation {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
transform: perspective(1px) translateZ(0);
|
||||
box-shadow: 0 0 1px transparent;
|
||||
margin: 10px;
|
||||
transition-duration: 0.3s;
|
||||
transition-property: box-shadow, transform; }
|
||||
[data-scope="hover-shadow-box-animation.md"] .hover-shadow-box-animation:hover, [data-scope="hover-shadow-box-animation.md"] .hover-shadow-box-animation:focus, [data-scope="hover-shadow-box-animation.md"] .hover-shadow-box-animation:active {
|
||||
box-shadow: 1px 10px 10px -10px rgba(0, 0, 24, 0.5);
|
||||
transform: scale(1.2); }
|
||||
</style>
|
||||
<div class="snippet-demo">
|
||||
<p class="snippet-demo_hover-shadow-box-animation"> Box it!
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
.snippet-demo_hover-shadow-box-animation{
|
||||
display: inline-block;
|
||||
color: #0087ca;
|
||||
margin: 10px;
|
||||
vertical-align: middle;
|
||||
transform: perspective(1px) translateZ(0);
|
||||
box-shadow: 0 0 1px transparent;
|
||||
transition-duration: 0.3s;
|
||||
transition-property: box-shadow, transform;
|
||||
}
|
||||
.snippet-demo_hover-shadow-box-animation:hover, .snippet-demo_hover-shadow-box-animation:focus, .snippet-demo_hover-shadow-box-animation:active{
|
||||
box-shadow: 1px 10px 10px -10px rgba(0,0,24,0.1);
|
||||
transform: scale(1.2);
|
||||
}
|
||||
</style>
|
||||
<h4>Explanation</h4>
|
||||
<ol>
|
||||
<li><code>display: inline-block</code> to set width and length for <code>p</code> element thus making it an <code>inline-block</code>.</li>
|
||||
<li>Set <code>transform: perspective(1px)</code> to give element a 3D space by affecting the distance between the Z plane and the user and <code>translate(0)</code> to reposition the <code>p</code> element along z-axis in 3D space.</li>
|
||||
<li><code>box-shadow:</code> to set up the box.</li>
|
||||
<li><code>transparent</code> to make box transparent.</li>
|
||||
<li><code>transition-property</code> to enable transitions for both <code>box-shadow</code> and <code>transform</code>.</li>
|
||||
<li><code>:hover</code> to activate whole css when hovering is done until <code>active</code>.</li>
|
||||
<li><code>transform: scale(1.2)</code> to change the scale, magnifying the text.</li>
|
||||
</ol>
|
||||
<h4>Browser Support</h4>
|
||||
<div>
|
||||
<div class="snippet__browser-support">
|
||||
93.3%
|
||||
</div>
|
||||
</div>
|
||||
<p><span class="snippet__support-note">✅ No caveats.</span></p>
|
||||
<ul>
|
||||
<li><a href="https://caniuse.com/#feat=transforms3d" target="_blank">https://caniuse.com/#feat=transforms3d</a></li>
|
||||
<li><a href="https://caniuse.com/#feat=css-transitions" target="_blank">https://caniuse.com/#feat=css-transitions</a></li>
|
||||
</ul>
|
||||
|
||||
<!-- tags: animation -->
|
||||
</div>
|
||||
<div class="snippet">
|
||||
<h3 id="hover-underline-animation"><span>Hover underline animation</span><span class="tags__tag snippet__tag" data-type="animation"><i data-feather="loader"></i>animation</span></h3>
|
||||
<p>Creates an animated underline effect when the text is hovered over.</p>
|
||||
|
||||
@ -5,13 +5,13 @@ Creates a shadow box around the text whern it is hovered.
|
||||
#### HTML
|
||||
|
||||
```html
|
||||
<p class = "hover-shadow-box-animation"> Box it! </p>
|
||||
<p class="hover-shadow-box-animation">Box it!</p>
|
||||
```
|
||||
|
||||
#### CSS
|
||||
|
||||
```css
|
||||
.hover-shadow-box-animation{
|
||||
.hover-shadow-box-animation {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
transform: perspective(1px) translateZ(0);
|
||||
@ -20,11 +20,14 @@ Creates a shadow box around the text whern it is hovered.
|
||||
transition-duration: 0.3s;
|
||||
transition-property: box-shadow, transform;
|
||||
}
|
||||
.hover-shadow-box-animation:hover, .hover-shadow-box-animation:focus, .hover-shadow-box-animation:active{
|
||||
box-shadow: 1px 10px 10px -10px rgba(0,0,24,0.5);
|
||||
.hover-shadow-box-animation:hover,
|
||||
.hover-shadow-box-animation:focus,
|
||||
.hover-shadow-box-animation:active {
|
||||
box-shadow: 1px 10px 10px -10px rgba(0, 0, 24, 0.5);
|
||||
transform: scale(1.2);
|
||||
}
|
||||
```
|
||||
|
||||
#### Demo
|
||||
|
||||
<div class = "snippet-demo">
|
||||
@ -59,13 +62,11 @@ Creates a shadow box around the text whern it is hovered.
|
||||
6. `:hover` to activate whole css when hovering is done until `active`.
|
||||
7. `transform: scale(1.2)` to change the scale, magnifying the text.
|
||||
|
||||
|
||||
#### Browser Support
|
||||
|
||||
<span class="snippet__support-note">✅ No caveats.</span>
|
||||
|
||||
* https://caniuse.com/#feat=transforms3d
|
||||
* https://caniuse.com/#feat=css-transitions
|
||||
|
||||
- https://caniuse.com/#feat=transforms3d
|
||||
- https://caniuse.com/#feat=css-transitions
|
||||
|
||||
<!-- tags: animation -->
|
||||
|
||||
@ -43,10 +43,9 @@ EventHub.on('Tag.click', data => {
|
||||
sections.forEach(section => {
|
||||
section.style.display = 'block'
|
||||
//console.log(data.type_new.includes('all'))
|
||||
if(!data.type_new.includes(section.dataset.type) && !data.type_new.includes('all')) {
|
||||
if (!data.type_new.includes(section.dataset.type) && !data.type_new.includes('all')) {
|
||||
section.style.display = 'none'
|
||||
}
|
||||
else{
|
||||
} else {
|
||||
section.style.display = ''
|
||||
}
|
||||
})
|
||||
|
||||
@ -9,8 +9,7 @@ EventHub.on('Tag.click', data => {
|
||||
const tags = selectAll('.tags__tag', snippet)
|
||||
if (!tags.some(el => data.type_new.includes(el.dataset.type))) {
|
||||
snippet.style.display = 'none'
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
snippet.style.display = ''
|
||||
}
|
||||
})
|
||||
|
||||
@ -1,42 +1,41 @@
|
||||
import { select, selectAll, on } from '../deps/utils'
|
||||
|
||||
const tagButtons = selectAll('button.tags__tag')
|
||||
var isShiftSelected = false;
|
||||
var isShiftSelected = false
|
||||
const onClick = function() {
|
||||
if(isShiftSelected && this.dataset.type === 'all'){
|
||||
tagButtons.forEach(button => button.classList.remove('is-active'));
|
||||
this.classList.add('is-active');
|
||||
}
|
||||
else if(isShiftSelected) {
|
||||
select('button[data-type=all]').classList.remove('is-active');
|
||||
if(this.classList.contains('is-active') && (selectAll('button.tags__tag.is-active').length > 1)){
|
||||
if (isShiftSelected && this.dataset.type === 'all') {
|
||||
tagButtons.forEach(button => button.classList.remove('is-active'))
|
||||
this.classList.add('is-active')
|
||||
} else if (isShiftSelected) {
|
||||
select('button[data-type=all]').classList.remove('is-active')
|
||||
if (
|
||||
this.classList.contains('is-active') &&
|
||||
selectAll('button.tags__tag.is-active').length > 1
|
||||
) {
|
||||
this.classList.remove('is-active')
|
||||
}
|
||||
else if(this.classList.contains('is-active')){
|
||||
} else if (this.classList.contains('is-active')) {
|
||||
this.classList.remove('is-active')
|
||||
select('button[data-type=all]').classList.add('is-active')
|
||||
} else {
|
||||
this.classList.add('is-active')
|
||||
}
|
||||
else{
|
||||
this.classList.add('is-active');
|
||||
}
|
||||
}
|
||||
else {
|
||||
tagButtons.forEach(button => button.classList.remove('is-active'));
|
||||
this.classList.add('is-active');
|
||||
} else {
|
||||
tagButtons.forEach(button => button.classList.remove('is-active'))
|
||||
this.classList.add('is-active')
|
||||
}
|
||||
EventHub.emit('Tag.click', {
|
||||
type: [...selectAll('button.tags__tag.is-active')]
|
||||
})
|
||||
}
|
||||
onkeydown = e => {
|
||||
if(e.shiftKey){
|
||||
isShiftSelected = true;
|
||||
if (e.shiftKey) {
|
||||
isShiftSelected = true
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
onkeyup = e => {
|
||||
if(e.key == 'Shift'){
|
||||
isShiftSelected = false;
|
||||
if (e.key == 'Shift') {
|
||||
isShiftSelected = false
|
||||
}
|
||||
}
|
||||
};
|
||||
tagButtons.forEach(button => on(button, 'click', onClick))
|
||||
|
||||
Reference in New Issue
Block a user