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

Travis build: 735

Browse Source
This commit is contained in:
30secondsofcode
2020-03-23 06:53:47 +00:00
parent 2214f86ffa
commit 1db0ddafb6
2 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
snippet_data/snippetList.json
View File

@ -12,7 +12,7 @@
] ]
}, },
"meta": { "meta": {
"hash": "f052c85dc45dcf8bf4d38c714acece6c6c7ffbd483b3ba76815564da79313fa4" "hash": "39843a0593e270dacca651f07fe537cb1479218a5be52b6fad3982365c898986"
} }
}, },
{ {

14
snippet_data/snippets.json
View File

@ -7,16 +7,16 @@
"attributes": { "attributes": {
"fileName": "border-with-top-triangle.md", "fileName": "border-with-top-triangle.md",
"text": "Creates a text container with a triangle at the top.\n\n", "text": "Creates a text container with a triangle at the top.\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", "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": { "browserSupport": {
"text": "\n", "text": "\n",
"supportPercentage": 100 "supportPercentage": 100
}, },
"codeBlocks": { "codeBlocks": {
"html": "<div class=\"container\">\n Border with top triangle\n</div>", "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}", "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": "", "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" "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": [ "tags": [
"visual", "visual",
@ -24,11 +24,11 @@
] ]
}, },
"meta": { "meta": {
"hash": "f052c85dc45dcf8bf4d38c714acece6c6c7ffbd483b3ba76815564da79313fa4", "hash": "39843a0593e270dacca651f07fe537cb1479218a5be52b6fad3982365c898986",
"firstSeen": "1547806723", "firstSeen": "1547806723",
"lastUpdated": "1574366685", "lastUpdated": "1584935789",
"updateCount": 4, "updateCount": 5,
"authorCount": 3 "authorCount": 4
} }
}, },
{ {