andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chore: Fix ::selection demo style and clean description

Browse Source
This commit is contained in:
Mattia Astorino
2018-02-27 23:34:46 +01:00
parent e4a81702e0
commit afe59bd3f9
4 changed files with 30 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
dist/e5eecc0ff495d3dfb2c9cc2b763389dc.html vendored
View File

@ -144,36 +144,26 @@
color: black; color: black;
} }
.custom-text-selection::selection { .custom-text-selection::selection {
background: red; background: deeppink;
color: white; color: white;
} }
</code></pre> </code></pre>
<h4 data-type="Demo">Demo</h4> <h4 data-type="Demo">Demo</h4>
<div class="snippet-demo"> <div class="snippet-demo">
<p>Global aquamarine selection color</p> <p class="snippet-demo__custom-text-selection">Select some of this text.</p>
<p class="snippet-demo__custom-text-selection">Red selection color.</p>
</div> </div>
<style> <style>
::selection {
background: aquamarine;
color: black;
}
::-moz-selection {
background: aquamarine;
color: black;
}
.snippet-demo__custom-text-selection::selection { .snippet-demo__custom-text-selection::selection {
background: red; background: deeppink;
color: white; color: white;
} }
.snippet-demo__custom-text-selection::-moz-selection { .snippet-demo__custom-text-selection::-moz-selection {
background: red; background: deeppink;
color: white; color: white;
} }
</style> </style>
<h4 data-type="Explanation">Explanation</h4> <h4 data-type="Explanation">Explanation</h4>
<p><code>::selection</code> and <code>::-moz-selection</code> defines a pseudo selector on an element to style text within it when selected. Note that if you don't combine any other selector your style will be applied at document root level, <p><code>::selection</code> defines a pseudo selector on an element to style text within it when selected. Note that if you don't combine any other selector your style will be applied at document root level, to any selectable element.</p>
to any selectable element.</p>
<h4 data-type="Browser support">Browser support</h4> <h4 data-type="Browser support">Browser support</h4>
<div> <div>
<div class="snippet__browser-support"> <div class="snippet__browser-support">

30
dist/f06fd0495a34430f242f7611190395d6.js vendored
View File

@ -71,7 +71,7 @@ require = (function (modules, cache, entry) {
// Override the current require with this new one // Override the current require with this new one
return newRequire; return newRequire;
})({18:[function(require,module,exports) { })({13:[function(require,module,exports) {
var bundleURL = null; var bundleURL = null;
function getBundleURLCached() { function getBundleURLCached() {
if (!bundleURL) { if (!bundleURL) {
@ -101,7 +101,7 @@ function getBaseURL(url) {
exports.getBundleURL = getBundleURLCached; exports.getBundleURL = getBundleURLCached;
exports.getBaseURL = getBaseURL; exports.getBaseURL = getBaseURL;
},{}],15:[function(require,module,exports) { },{}],10:[function(require,module,exports) {
var bundle = require('./bundle-url'); var bundle = require('./bundle-url');
function updateLink(link) { function updateLink(link) {
@ -132,13 +132,13 @@ function reloadCSS() {
} }
module.exports = reloadCSS; module.exports = reloadCSS;
},{"./bundle-url":18}],20:[function(require,module,exports) { },{"./bundle-url":13}],14:[function(require,module,exports) {
var reloadCSS = require('_css_loader'); var reloadCSS = require('_css_loader');
module.hot.dispose(reloadCSS); module.hot.dispose(reloadCSS);
module.hot.accept(reloadCSS); module.hot.accept(reloadCSS);
},{"_css_loader":15}],19:[function(require,module,exports) { },{"_css_loader":10}],15:[function(require,module,exports) {
var global = (1,eval)("this"); var global = (1,eval)("this");
/* ********************************************** /* **********************************************
@ -979,19 +979,19 @@ Prism.languages.js = Prism.languages.javascript;
})(); })();
},{}],10:[function(require,module,exports) { },{}],6:[function(require,module,exports) {
var reloadCSS = require('_css_loader'); var reloadCSS = require('_css_loader');
module.hot.dispose(reloadCSS); module.hot.dispose(reloadCSS);
module.hot.accept(reloadCSS); module.hot.accept(reloadCSS);
},{"_css_loader":15}],9:[function(require,module,exports) { },{"_css_loader":10}],5:[function(require,module,exports) {
var reloadCSS = require('_css_loader'); var reloadCSS = require('_css_loader');
module.hot.dispose(reloadCSS); module.hot.dispose(reloadCSS);
module.hot.accept(reloadCSS); module.hot.accept(reloadCSS);
},{"_css_loader":15}],11:[function(require,module,exports) { },{"_css_loader":10}],7:[function(require,module,exports) {
var e = Element.prototype; var e = Element.prototype;
if (!e.matches) { if (!e.matches) {
e.matches = e.matchesSelector || e.msMatchesSelector || e.webkitMatchesSelector || e.mozMatchesSelector; e.matches = e.matchesSelector || e.msMatchesSelector || e.webkitMatchesSelector || e.mozMatchesSelector;
@ -1007,7 +1007,7 @@ if (!e.closest) {
return null; return null;
}; };
} }
},{}],17:[function(require,module,exports) { },{}],11:[function(require,module,exports) {
var global = (1,eval)("this"); var global = (1,eval)("this");
var _typeof2 = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; var _typeof2 = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
@ -1200,7 +1200,7 @@ var _typeof2 = typeof Symbol === "function" && typeof Symbol.iterator === "symbo
}; };
}(); }();
}); });
},{}],16:[function(require,module,exports) { },{}],12:[function(require,module,exports) {
'use strict'; 'use strict';
Object.defineProperty(exports, "__esModule", { Object.defineProperty(exports, "__esModule", {
@ -1262,7 +1262,7 @@ if (/iPhone|iPad|iPod/.test(navigator.platform) && !window.MSStream) {
}); });
} }
})(); })();
},{}],12:[function(require,module,exports) { },{}],8:[function(require,module,exports) {
'use strict'; 'use strict';
Object.defineProperty(exports, "__esModule", { Object.defineProperty(exports, "__esModule", {
@ -1308,7 +1308,7 @@ document.addEventListener('click', function (e) {
}); });
exports.default = { toggle: toggle }; exports.default = { toggle: toggle };
},{"../deps/jump":17,"../deps/utils":16}],13:[function(require,module,exports) { },{"../deps/jump":11,"../deps/utils":12}],9:[function(require,module,exports) {
'use strict'; 'use strict';
var _jump = require('../deps/jump'); var _jump = require('../deps/jump');
@ -1330,7 +1330,7 @@ backToTopButton.onclick = function () {
easing: _utils.easeOutQuint easing: _utils.easeOutQuint
}); });
}; };
},{"../deps/jump":17,"../deps/utils":16}],7:[function(require,module,exports) { },{"../deps/jump":11,"../deps/utils":12}],3:[function(require,module,exports) {
'use strict'; 'use strict';
require('normalize.css'); require('normalize.css');
@ -1352,7 +1352,7 @@ var _BackToTopButton = require('./components/BackToTopButton');
var _BackToTopButton2 = _interopRequireDefault(_BackToTopButton); var _BackToTopButton2 = _interopRequireDefault(_BackToTopButton);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
},{"normalize.css":20,"prismjs":19,"../css/deps/prism.css":10,"../css/index.scss":9,"./deps/polyfills":11,"./components/Menu":12,"./components/BackToTopButton":13}],21:[function(require,module,exports) { },{"normalize.css":14,"prismjs":15,"../css/deps/prism.css":6,"../css/index.scss":5,"./deps/polyfills":7,"./components/Menu":8,"./components/BackToTopButton":9}],16:[function(require,module,exports) {
var global = (1, eval)('this'); var global = (1, eval)('this');
var OldModule = module.bundle.Module; var OldModule = module.bundle.Module;
@ -1374,7 +1374,7 @@ var parent = module.bundle.parent;
if ((!parent || !parent.isParcelRequire) && typeof WebSocket !== 'undefined') { if ((!parent || !parent.isParcelRequire) && typeof WebSocket !== 'undefined') {
var hostname = '' || location.hostname; var hostname = '' || location.hostname;
var protocol = location.protocol === 'https:' ? 'wss' : 'ws'; var protocol = location.protocol === 'https:' ? 'wss' : 'ws';
var ws = new WebSocket(protocol + '://' + hostname + ':' + '57220' + '/'); var ws = new WebSocket(protocol + '://' + hostname + ':' + '58660' + '/');
ws.onmessage = function (event) { ws.onmessage = function (event) {
var data = JSON.parse(event.data); var data = JSON.parse(event.data);
@ -1475,5 +1475,5 @@ function hmrAccept(bundle, id) {
return hmrAccept(global.require, id); return hmrAccept(global.require, id);
}); });
} }
},{}]},{},[21,7]) },{}]},{},[16,3])
//# sourceMappingURL=/dist/f06fd0495a34430f242f7611190395d6.map //# sourceMappingURL=/dist/f06fd0495a34430f242f7611190395d6.map

20
index.html
View File

@ -144,36 +144,26 @@
color: black; color: black;
} }
.custom-text-selection::selection { .custom-text-selection::selection {
background: red; background: deeppink;
color: white; color: white;
} }
</code></pre> </code></pre>
<h4 data-type="Demo">Demo</h4> <h4 data-type="Demo">Demo</h4>
<div class="snippet-demo"> <div class="snippet-demo">
<p>Global aquamarine selection color</p> <p class="snippet-demo__custom-text-selection">Select some of this text.</p>
<p class="snippet-demo__custom-text-selection">Red selection color.</p>
</div> </div>
<style> <style>
::selection {
background: aquamarine;
color: black;
}
::-moz-selection {
background: aquamarine;
color: black;
}
.snippet-demo__custom-text-selection::selection { .snippet-demo__custom-text-selection::selection {
background: red; background: deeppink;
color: white; color: white;
} }
.snippet-demo__custom-text-selection::-moz-selection { .snippet-demo__custom-text-selection::-moz-selection {
background: red; background: deeppink;
color: white; color: white;
} }
</style> </style>
<h4 data-type="Explanation">Explanation</h4> <h4 data-type="Explanation">Explanation</h4>
<p><code>::selection</code> and <code>::-moz-selection</code> defines a pseudo selector on an element to style text within it when selected. Note that if you don't combine any other selector your style will be applied at document root level, <p><code>::selection</code> defines a pseudo selector on an element to style text within it when selected. Note that if you don't combine any other selector your style will be applied at document root level, to any selectable element.</p>
to any selectable element.</p>
<h4 data-type="Browser support">Browser support</h4> <h4 data-type="Browser support">Browser support</h4>
<div> <div>
<div class="snippet__browser-support"> <div class="snippet__browser-support">

19
snippets/custom-text-selection.md
View File

@ -16,7 +16,7 @@ Changes the styling of text selection.
color: black; color: black;
} }
.custom-text-selection::selection { .custom-text-selection::selection {
background: red; background: deeppink;
color: white; color: white;
} }
``` ```
@ -24,32 +24,23 @@ Changes the styling of text selection.
#### Demo #### Demo
<div class="snippet-demo"> <div class="snippet-demo">
<p>Global aquamarine selection color</p> <p class="snippet-demo__custom-text-selection">Select some of this text.</p>
<p class="snippet-demo__custom-text-selection">Red selection color.</p>
</div> </div>
<style> <style>
::selection {
background: aquamarine;
color: black;
}
::-moz-selection {
background: aquamarine;
color: black;
}
.snippet-demo__custom-text-selection::selection { .snippet-demo__custom-text-selection::selection {
background: red; background: deeppink;
color: white; color: white;
} }
.snippet-demo__custom-text-selection::-moz-selection { .snippet-demo__custom-text-selection::-moz-selection {
background: red; background: deeppink;
color: white; color: white;
} }
</style> </style>
#### Explanation #### Explanation
`::selection` and `::-moz-selection` defines a pseudo selector on an element to style text within it when selected. Note that if you don't combine any other selector your style will be applied at document root level, to any selectable element. `::selection` defines a pseudo selector on an element to style text within it when selected. Note that if you don't combine any other selector your style will be applied at document root level, to any selectable element.
#### Browser support #### Browser support