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

Travis build: 517

Browse Source
This commit is contained in:
30secondsofcode
2019-10-11 14:19:38 +00:00
parent 6ff2b7e5a3
commit b76e0d7f28
3 changed files with 112 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
snippet_data/snippetList.json
View File

@ -397,6 +397,21 @@
"hash": "cd26d0cd1831474afdc784b4459b60062243e2d390975e94cd7d51fa776c603f"
}
},
{
"id": "hamburger-button",
"type": "snippetListing",
"title": "Hamburguer Button",
"attributes": {
"text": "This is a way to build simple hamburger button for menu bar.\n\n",
"tags": [
"interactivity",
"beginner"
]
},
"meta": {
"hash": "952fe17aa1f9856b3976d74578db84e409a7439d0ded80195b7d5420ea95d5ae"
}
},
{
"id": "height-transition",
"type": "snippetListing",

27
snippet_data/snippets.json
View File

@ -733,6 +733,33 @@
"hash": "cd26d0cd1831474afdc784b4459b60062243e2d390975e94cd7d51fa776c603f"
}
},
{
"id": "hamburger-button",
"title": "Hamburguer Button",
"type": "snippet",
"attributes": {
"fileName": "hamburger-button.md",
"text": "This is a way to build simple hamburger button for menu bar.\n\n",
"explanation": "\n\n- Use a `<button>` element for the middle bar of the hamburger icon.\n- Use the `::before` and `::after` pseudo-elements to create the top and bottom bars of the icon.\n- Use `position: relative` on the `<button>` and `position: absolute` on the pseudo-elements to place them appropriately.\n- Use the `:hover` pseudo-selector to rotate `:before` to `45deg` and `:after` to `-45deg` and hide the center bar using`:background-color` transparent.\n\n",
"browserSupport": {
"text": "\n",
"supportPercentage": 100
},
"codeBlocks": {
"html": "<button class=\"hb\"></button>",
"css": ".hb,\n.hb:before,\n.hb:after {\n position: relative;\n width: 30px;\n height: 5px;\n border: none;\n outline: none;\n background-color: #333;\n border-radius: 3px;\n transition: 0.5s;\n cursor: pointer;\n}\n\n.hb:before,\n.hb:after {\n content: '';\n position: absolute;\n top: -7.5px;\n left: 0;\n}\n\n.hb:after {\n top: 7.5px;\n}\n\n.hb:hover {\n background-color: transparent;\n}\n\n.hb:hover:before,\n.hb:hover:after {\n top: 0;\n}\n\n.hb:hover::before {\n transform: rotate(45deg);\n}\n\n.hb:hover::after {\n transform: rotate(-45deg);\n}",
"js": "",
"scopedCss": "[data-scope=\"hamburger-button\"] .hb,\n[data-scope=\"hamburger-button\"] .hb:before,\n[data-scope=\"hamburger-button\"] .hb:after {\n position: relative;\n width: 30px;\n height: 5px;\n border: none;\n outline: none;\n background-color: #333;\n border-radius: 3px;\n transition: 0.5s;\n cursor: pointer; }\n\n[data-scope=\"hamburger-button\"] .hb:before,\n[data-scope=\"hamburger-button\"] .hb:after {\n content: '';\n position: absolute;\n top: -7.5px;\n left: 0; }\n\n[data-scope=\"hamburger-button\"] .hb:after {\n top: 7.5px; }\n\n[data-scope=\"hamburger-button\"] .hb:hover {\n background-color: transparent; }\n\n[data-scope=\"hamburger-button\"] .hb:hover:before,\n[data-scope=\"hamburger-button\"] .hb:hover:after {\n top: 0; }\n\n[data-scope=\"hamburger-button\"] .hb:hover::before {\n transform: rotate(45deg); }\n\n[data-scope=\"hamburger-button\"] .hb:hover::after {\n transform: rotate(-45deg); }\n"
},
"tags": [
"interactivity",
"beginner"
]
},
"meta": {
"hash": "952fe17aa1f9856b3976d74578db84e409a7439d0ded80195b7d5420ea95d5ae"
}
},
{
"id": "height-transition",
"title": "Height transition",