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

Travis build: 491

Browse Source
This commit is contained in:
30secondsofcode
2019-09-28 10:57:29 +00:00
parent 54f7a909f7
commit 2e2208acaf
3 changed files with 97 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
snippet_data/snippetList.json
View File

@ -1,5 +1,20 @@
{
"data": [
{
"id": "border-with-top-triangle",
"type": "snippetListing",
"title": "Border with top triangle",
"attributes": {
"text": "Creates a text container with a triangle at the top.\n\n#### HTML\n\n",
"tags": [
"visual",
"beginner"
]
},
"meta": {
"hash": "4fed80c83d37457d5ce111ee5c3272945c203319ccc4f5fe4355c359840f8628"
}
},
{
"id": "bouncing-loader",
"type": "snippetListing",

27
snippet_data/snippets.json
View File

@ -1,5 +1,32 @@
{
"data": [
{
"id": "border-with-top-triangle",
"title": "Border with top triangle",
"type": "snippet",
"attributes": {
"fileName": "border-with-top-triangle.md",
"text": "Creates a text container with a triangle at the top.\n\n#### HTML\n\n",
"explanation": "\n\n- Use the `:before` and `:after` pseudo-elements to create two triangles. \n- The color of the `:before` triangle should be the same as the container's border color. \n- The color of the `:after` triangle should be the same as the container background color.\n- The border width of the `:before` triangle should be `1px` wider than the `:after` triangle, in order to act as the border.\n- The `:after` triangle should be `1px` to the right of the `:before` triangle to allow for its left border to be shown.\n\n",
"browserSupport": {
"text": "\n",
"supportPercentage": 100
},
"codeBlocks": {
"html": "<div class=\"container\">\n Border with top triangle\n</div>",
"css": ".container {\n position: relative;\n background: #ffffff;\n padding: 15px;\n border: 1px solid #dddddd;\n margin-top: 20px;\n}\n\n.container:before, .container:after {\n content: '';\n position: absolute;\n bottom: 100%;\n left: 19px;\n border: 11px solid transparent;\n border-bottom-color: #dddddd;\n}\n\n.container:after {\n left: 20px;\n border: 10px solid transparent;\n border-bottom-color: #ffffff;\n}",
"js": "",
"scopedCss": "[data-scope=\"border-with-top-triangle\"] .container {\n position: relative;\n background: #ffffff;\n padding: 15px;\n border: 1px solid #dddddd;\n margin-top: 20px; }\n\n[data-scope=\"border-with-top-triangle\"] .container:before, [data-scope=\"border-with-top-triangle\"] .container:after {\n content: '';\n position: absolute;\n bottom: 100%;\n left: 19px;\n border: 11px solid transparent;\n border-bottom-color: #dddddd; }\n\n[data-scope=\"border-with-top-triangle\"] .container:after {\n left: 20px;\n border: 10px solid transparent;\n border-bottom-color: #ffffff; }\n"
},
"tags": [
"visual",
"beginner"
]
},
"meta": {
"hash": "4fed80c83d37457d5ce111ee5c3272945c203319ccc4f5fe4355c359840f8628"
}
},
{
"id": "bouncing-loader",
"title": "Bouncing loader",