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;
}
.custom-text-selection::selection {
background: red;
background: deeppink;
color: white;
}
</code></pre>
<h4 data-type="Demo">Demo</h4>
<div class="snippet-demo">
<p>Global aquamarine selection color</p>
<p class="snippet-demo__custom-text-selection">Red selection color.</p>
<p class="snippet-demo__custom-text-selection">Select some of this text.</p>
</div>
<style>
::selection {
background: aquamarine;
color: black;
}
::-moz-selection {
background: aquamarine;
color: black;
}
.snippet-demo__custom-text-selection::selection {
background: red;
background: deeppink;
color: white;
}
.snippet-demo__custom-text-selection::-moz-selection {
background: red;
background: deeppink;
color: white;
}
</style>
<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,
to any selectable element.</p>
<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>
<h4 data-type="Browser support">Browser support</h4>
<div>
<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
return newRequire;
})({18:[function(require,module,exports) {
})({13:[function(require,module,exports) {
var bundleURL = null;
function getBundleURLCached() {
if (!bundleURL) {
@ -101,7 +101,7 @@ function getBaseURL(url) {
exports.getBundleURL = getBundleURLCached;
exports.getBaseURL = getBaseURL;
},{}],15:[function(require,module,exports) {
},{}],10:[function(require,module,exports) {
var bundle = require('./bundle-url');
function updateLink(link) {
@ -132,13 +132,13 @@ function 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');
module.hot.dispose(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");
/* **********************************************
@ -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');
module.hot.dispose(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');
module.hot.dispose(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;
if (!e.matches) {
e.matches = e.matchesSelector || e.msMatchesSelector || e.webkitMatchesSelector || e.mozMatchesSelector;
@ -1007,7 +1007,7 @@ if (!e.closest) {
return null;
};
}
},{}],17:[function(require,module,exports) {
},{}],11:[function(require,module,exports) {
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; };
@ -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';
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';
Object.defineProperty(exports, "__esModule", {
@ -1308,7 +1308,7 @@ document.addEventListener('click', function (e) {
});
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';
var _jump = require('../deps/jump');
@ -1330,7 +1330,7 @@ backToTopButton.onclick = function () {
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';
require('normalize.css');
@ -1352,7 +1352,7 @@ var _BackToTopButton = require('./components/BackToTopButton');
var _BackToTopButton2 = _interopRequireDefault(_BackToTopButton);
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 OldModule = module.bundle.Module;
@ -1374,7 +1374,7 @@ var parent = module.bundle.parent;
if ((!parent || !parent.isParcelRequire) && typeof WebSocket !== 'undefined') {
var hostname = '' || location.hostname;
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) {
var data = JSON.parse(event.data);
@ -1475,5 +1475,5 @@ function hmrAccept(bundle, id) {
return hmrAccept(global.require, id);
});
}
},{}]},{},[21,7])
},{}]},{},[16,3])
//# sourceMappingURL=/dist/f06fd0495a34430f242f7611190395d6.map

20
index.html
View File

@ -144,36 +144,26 @@
color: black;
}
.custom-text-selection::selection {
background: red;
background: deeppink;
color: white;
}
</code></pre>
<h4 data-type="Demo">Demo</h4>
<div class="snippet-demo">
<p>Global aquamarine selection color</p>
<p class="snippet-demo__custom-text-selection">Red selection color.</p>
<p class="snippet-demo__custom-text-selection">Select some of this text.</p>
</div>
<style>
::selection {
background: aquamarine;
color: black;
}
::-moz-selection {
background: aquamarine;
color: black;
}
.snippet-demo__custom-text-selection::selection {
background: red;
background: deeppink;
color: white;
}
.snippet-demo__custom-text-selection::-moz-selection {
background: red;
background: deeppink;
color: white;
}
</style>
<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,
to any selectable element.</p>
<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>
<h4 data-type="Browser support">Browser support</h4>
<div>
<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;
}
.custom-text-selection::selection {
background: red;
background: deeppink;
color: white;
}
```
@ -24,32 +24,23 @@ Changes the styling of text selection.
#### Demo
<div class="snippet-demo">
<p>Global aquamarine selection color</p>
<p class="snippet-demo__custom-text-selection">Red selection color.</p>
<p class="snippet-demo__custom-text-selection">Select some of this text.</p>
</div>
<style>
::selection {
background: aquamarine;
color: black;
}
::-moz-selection {
background: aquamarine;
color: black;
}
.snippet-demo__custom-text-selection::selection {
background: red;
background: deeppink;
color: white;
}
.snippet-demo__custom-text-selection::-moz-selection {
background: red;
background: deeppink;
color: white;
}
</style>
#### 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