Travis build: 407
This commit is contained in:
30secondsofcode
@ -18,9 +18,7 @@
|
||||
"js": "",
|
||||
"scopedCss": "@keyframes bouncing-loader {\n to {\n opacity: 0.1;\n transform: translate3d(0, -1rem, 0); } }\n\n[data-scope=\"bouncing-loader\"] .bouncing-loader {\n display: flex;\n justify-content: center; }\n\n[data-scope=\"bouncing-loader\"] .bouncing-loader > div {\n width: 1rem;\n height: 1rem;\n margin: 3rem 0.2rem;\n background: #8385aa;\n border-radius: 50%;\n animation: bouncing-loader 0.6s infinite alternate; }\n\n[data-scope=\"bouncing-loader\"] .bouncing-loader > div:nth-child(2) {\n animation-delay: 0.2s; }\n\n[data-scope=\"bouncing-loader\"] .bouncing-loader > div:nth-child(3) {\n animation-delay: 0.4s; }\n"
|
||||
},
|
||||
"tags": [
|
||||
"animation"
|
||||
]
|
||||
"tags": ["animation"]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "9ddb53b4f0d4d889f585ce69e46dc403ccd12f40dff305134bccf8b8a399bb7a"
|
||||
@ -44,9 +42,7 @@
|
||||
"js": "",
|
||||
"scopedCss": "[data-scope=\"box-sizing-reset\"] html {\n box-sizing: border-box; }\n\n[data-scope=\"box-sizing-reset\"] *,\n[data-scope=\"box-sizing-reset\"] *::before,\n[data-scope=\"box-sizing-reset\"] *::after {\n box-sizing: inherit; }\n\n[data-scope=\"box-sizing-reset\"] .box {\n display: inline-block;\n width: 150px;\n height: 150px;\n padding: 10px;\n background: tomato;\n color: white;\n border: 10px solid red; }\n\n[data-scope=\"box-sizing-reset\"] .content-box {\n box-sizing: content-box; }\n"
|
||||
},
|
||||
"tags": [
|
||||
"layout"
|
||||
]
|
||||
"tags": ["layout"]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "f435b9fcc289760199b4b4781e608438b866887fa91394e94063b42f3841fab7"
|
||||
@ -70,9 +66,7 @@
|
||||
"js": "",
|
||||
"scopedCss": "[data-scope=\"button-border-animation\"] .button {\n background-color: #c47135;\n border: none;\n color: #ffffff;\n outline: none;\n padding: 12px 40px 10px;\n position: relative; }\n\n[data-scope=\"button-border-animation\"] .button:before,\n[data-scope=\"button-border-animation\"] .button:after {\n border: 0 solid transparent;\n transition: all 0.25s;\n content: '';\n height: 24px;\n position: absolute;\n width: 24px; }\n\n[data-scope=\"button-border-animation\"] .button:before {\n border-top: 2px solid #c47135;\n left: 0px;\n top: -5px; }\n\n[data-scope=\"button-border-animation\"] .button:after {\n border-bottom: 2px solid #c47135;\n bottom: -5px;\n right: 0px; }\n\n[data-scope=\"button-border-animation\"] .button:hover {\n background-color: #c47135; }\n\n[data-scope=\"button-border-animation\"] .button:hover:before,\n[data-scope=\"button-border-animation\"] .button:hover:after {\n height: 100%;\n width: 100%; }\n"
|
||||
},
|
||||
"tags": [
|
||||
"animation"
|
||||
]
|
||||
"tags": ["animation"]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "ff6401cc784b92a9672e74968719c029de224c29fcfdc3eaeaa764274108f648"
|
||||
@ -96,9 +90,7 @@
|
||||
"js": "",
|
||||
"scopedCss": "[data-scope=\"calc\"] .box-example {\n height: 280px;\n background: #222 url(\"https://image.ibb.co/fUL9nS/wolf.png\") no-repeat;\n background-position: calc(100% - 20px) calc(100% - 20px); }\n"
|
||||
},
|
||||
"tags": [
|
||||
"other"
|
||||
]
|
||||
"tags": ["other"]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "dc3464c5df00866bdea869d2e02f1a3f040f97301259020828df9951de9ada8c"
|
||||
@ -122,9 +114,7 @@
|
||||
"js": "",
|
||||
"scopedCss": "[data-scope=\"circle\"] .circle {\n border-radius: 50%;\n width: 2rem;\n height: 2rem;\n background: #333; }\n"
|
||||
},
|
||||
"tags": [
|
||||
"visual"
|
||||
]
|
||||
"tags": ["visual"]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "1a068c6a0209bfd1e7155326fb219f7590193e3b81802dfecc6d705e9705adf8"
|
||||
@ -148,9 +138,7 @@
|
||||
"js": "",
|
||||
"scopedCss": "[data-scope=\"clearfix\"] .clearfix::after {\n content: '';\n display: block;\n clear: both; }\n\n[data-scope=\"clearfix\"] .floated {\n float: left; }\n"
|
||||
},
|
||||
"tags": [
|
||||
"layout"
|
||||
]
|
||||
"tags": ["layout"]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "9479dfb4ec61a01045f480c93e21829b08017765585edbc511a653d5791e2f87"
|
||||
@ -174,9 +162,7 @@
|
||||
"js": "",
|
||||
"scopedCss": "[data-scope=\"constant-width-to-height-ratio\"] .constant-width-to-height-ratio {\n background: #333;\n width: 50%; }\n\n[data-scope=\"constant-width-to-height-ratio\"] .constant-width-to-height-ratio::before {\n content: '';\n padding-top: 100%;\n float: left; }\n\n[data-scope=\"constant-width-to-height-ratio\"] .constant-width-to-height-ratio::after {\n content: '';\n display: block;\n clear: both; }\n"
|
||||
},
|
||||
"tags": [
|
||||
"layout"
|
||||
]
|
||||
"tags": ["layout"]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "f94bb8368d8074d3d00ca449841b16d0fd4c4267a4abf373c43f41f2b9b6bcd1"
|
||||
@ -200,10 +186,7 @@
|
||||
"js": "",
|
||||
"scopedCss": "[data-scope=\"counter\"] ul {\n counter-reset: counter; }\n\n[data-scope=\"counter\"] li::before {\n counter-increment: counter;\n content: counters(counter, \".\") \" \"; }\n"
|
||||
},
|
||||
"tags": [
|
||||
"visual",
|
||||
"other"
|
||||
]
|
||||
"tags": ["visual", "other"]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "9d12a06e8dfbe67458098bb9e5fb4041a5ebd7cf5d652940ddbb8ae6f49a58dd"
|
||||
@ -227,9 +210,7 @@
|
||||
"js": "",
|
||||
"scopedCss": "[data-scope=\"custom-scrollbar\"] {\n /* To style the document scrollbar, remove `.custom-scrollbar` */ }\n [data-scope=\"custom-scrollbar\"] .custom-scrollbar {\n height: 70px;\n overflow-y: scroll; }\n [data-scope=\"custom-scrollbar\"] .custom-scrollbar::-webkit-scrollbar {\n width: 8px; }\n [data-scope=\"custom-scrollbar\"] .custom-scrollbar::-webkit-scrollbar-track {\n box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);\n border-radius: 10px; }\n [data-scope=\"custom-scrollbar\"] .custom-scrollbar::-webkit-scrollbar-thumb {\n border-radius: 10px;\n box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5); }\n"
|
||||
},
|
||||
"tags": [
|
||||
"visual"
|
||||
]
|
||||
"tags": ["visual"]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "bf63836daec92d4b85128faff57480f8297c4005a25c70ee93da97bd54eaa7bf"
|
||||
@ -253,9 +234,7 @@
|
||||
"js": "",
|
||||
"scopedCss": "[data-scope=\"custom-text-selection\"] ::selection {\n background: aquamarine;\n color: black; }\n\n[data-scope=\"custom-text-selection\"] .custom-text-selection::selection {\n background: deeppink;\n color: white; }\n"
|
||||
},
|
||||
"tags": [
|
||||
"visual"
|
||||
]
|
||||
"tags": ["visual"]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "7095b8bab3e1b3736bf0b8a8a4e429d905bceaf2aec83983377d6151e9a0f660"
|
||||
@ -279,9 +258,7 @@
|
||||
"js": "",
|
||||
"scopedCss": "[data-scope=\"custom-variables\"] :root {\n /* Place variables within here to use the variables globally. */ }\n\n[data-scope=\"custom-variables\"] .custom-variables {\n --some-color: #da7800;\n --some-keyword: italic;\n --some-size: 1.25em;\n --some-complex-value: 1px 1px 2px whitesmoke, 0 0 1em slategray, 0 0 0.2em slategray;\n color: var(--some-color);\n font-size: var(--some-size);\n font-style: var(--some-keyword);\n text-shadow: var(--some-complex-value); }\n"
|
||||
},
|
||||
"tags": [
|
||||
"other"
|
||||
]
|
||||
"tags": ["other"]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "b07f694e77ae7a8c107c78aa6c4b27d1d1ef0bae5cab96a7a2fe49d48296a8aa"
|
||||
@ -305,9 +282,7 @@
|
||||
"js": "",
|
||||
"scopedCss": "[data-scope=\"disable-selection\"] .unselectable {\n user-select: none; }\n"
|
||||
},
|
||||
"tags": [
|
||||
"interactivity"
|
||||
]
|
||||
"tags": ["interactivity"]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "6b99a98dfec252430da591aed665c0310b013710546c6c2d7bc4259bd7709a4a"
|
||||
@ -331,9 +306,7 @@
|
||||
"js": "",
|
||||
"scopedCss": "[data-scope=\"display-table-centering\"] .container {\n border: 1px solid #333;\n height: 250px;\n width: 250px; }\n\n[data-scope=\"display-table-centering\"] .center {\n display: table;\n height: 100%;\n width: 100%; }\n\n[data-scope=\"display-table-centering\"] .center > span {\n display: table-cell;\n text-align: center;\n vertical-align: middle; }\n"
|
||||
},
|
||||
"tags": [
|
||||
"layout"
|
||||
]
|
||||
"tags": ["layout"]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "08682925f9ae378097e8b3cc1d2a66f9afdcdd4bd052e2f379e03a124a1a613d"
|
||||
@ -357,9 +330,7 @@
|
||||
"js": "",
|
||||
"scopedCss": "@keyframes donut-spin {\n 0% {\n transform: rotate(0deg); }\n 100% {\n transform: rotate(360deg); } }\n\n[data-scope=\"donut-spinner\"] .donut {\n display: inline-block;\n border: 4px solid rgba(0, 0, 0, 0.1);\n border-left-color: #7983ff;\n border-radius: 50%;\n width: 30px;\n height: 30px;\n animation: donut-spin 1.2s linear infinite; }\n"
|
||||
},
|
||||
"tags": [
|
||||
"animation"
|
||||
]
|
||||
"tags": ["animation"]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "b7aa7db9756605dfa39631fd05139fb668b910030b71d5046c4149ac2d152b21"
|
||||
@ -383,9 +354,7 @@
|
||||
"js": "",
|
||||
"scopedCss": "[data-scope=\"dynamic-shadow\"] .dynamic-shadow {\n position: relative;\n width: 10rem;\n height: 10rem;\n background: linear-gradient(75deg, #6d78ff, #00ffb8);\n z-index: 1; }\n\n[data-scope=\"dynamic-shadow\"] .dynamic-shadow::after {\n content: '';\n width: 100%;\n height: 100%;\n position: absolute;\n background: inherit;\n top: 0.5rem;\n filter: blur(0.4rem);\n opacity: 0.7;\n z-index: -1; }\n"
|
||||
},
|
||||
"tags": [
|
||||
"visual"
|
||||
]
|
||||
"tags": ["visual"]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "355f4fabe546f389f59a9cf08b825dca636a471a1413b753d20ea7f1f471428a"
|
||||
@ -409,9 +378,7 @@
|
||||
"js": "",
|
||||
"scopedCss": "[data-scope=\"easing-variables\"] :root {\n /* Place variables in here to use globally */ }\n\n[data-scope=\"easing-variables\"] .easing-variables {\n --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);\n --ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);\n --ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);\n --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);\n --ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);\n --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);\n --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);\n --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);\n --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);\n --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);\n --ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);\n --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);\n --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);\n --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);\n --ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);\n --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);\n --ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);\n display: inline-block;\n width: 75px;\n height: 75px;\n padding: 10px;\n color: white;\n line-height: 50px;\n text-align: center;\n background: #333;\n transition: transform 1s var(--ease-out-quart); }\n\n[data-scope=\"easing-variables\"] .easing-variables:hover {\n transform: rotate(45deg); }\n"
|
||||
},
|
||||
"tags": [
|
||||
"animation"
|
||||
]
|
||||
"tags": ["animation"]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "48d8123982a07c883c2b8a844a1d57c0e1efb5b4f6e3e828b982c54ee8d6b6fa"
|
||||
@ -435,9 +402,7 @@
|
||||
"js": "",
|
||||
"scopedCss": "[data-scope=\"etched-text\"] .etched-text {\n text-shadow: 0 2px white;\n font-size: 1.5rem;\n font-weight: bold;\n color: #b8bec5; }\n"
|
||||
},
|
||||
"tags": [
|
||||
"visual"
|
||||
]
|
||||
"tags": ["visual"]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "e86bdd1cef913538b157fc7fa052d989d6777be0552d9b6e9ebb474f1629d8fe"
|
||||
@ -461,9 +426,7 @@
|
||||
"js": "",
|
||||
"scopedCss": "[data-scope=\"evenly-distributed-children\"] .evenly-distributed-children {\n display: flex;\n justify-content: space-between; }\n"
|
||||
},
|
||||
"tags": [
|
||||
"layout"
|
||||
]
|
||||
"tags": ["layout"]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "1204bc1df035e1c0d0b3808669a3a3d19201d7bc10500d8242c86fdd68a2a4d9"
|
||||
@ -487,10 +450,7 @@
|
||||
"js": "",
|
||||
"scopedCss": "[data-scope=\"fit-image-in-container\"] .image {\n background: #34495e;\n border: 1px solid #34495e;\n width: 200px;\n height: 200px; }\n\n[data-scope=\"fit-image-in-container\"] .image-contain {\n object-fit: contain;\n object-position: center; }\n\n[data-scope=\"fit-image-in-container\"] .image-cover {\n object-fit: cover;\n object-position: right top; }\n"
|
||||
},
|
||||
"tags": [
|
||||
"layout",
|
||||
"visual"
|
||||
]
|
||||
"tags": ["layout", "visual"]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "5d09d5e54b7436f047db61223cff15dce2f17f6cffe5e71e0f9061337de3068e"
|
||||
@ -514,9 +474,7 @@
|
||||
"js": "",
|
||||
"scopedCss": "[data-scope=\"flexbox-centering\"] .flexbox-centering {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100px; }\n"
|
||||
},
|
||||
"tags": [
|
||||
"layout"
|
||||
]
|
||||
"tags": ["layout"]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "9b17338858339d7bb228e85fc7f8609b4728c9ba2107a636c486779c9c696c0c"
|
||||
@ -540,10 +498,7 @@
|
||||
"js": "",
|
||||
"scopedCss": "[data-scope=\"focus-within\"] form {\n border: 3px solid #2d98da;\n color: #000000;\n padding: 4px; }\n\n[data-scope=\"focus-within\"] form:focus-within {\n background: #f7b731;\n color: #000000; }\n"
|
||||
},
|
||||
"tags": [
|
||||
"visual",
|
||||
"interactivity"
|
||||
]
|
||||
"tags": ["visual", "interactivity"]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "6fd9c086b06248408f3934b3d21b513dc751ab023defea1841b03a5a9503fff3"
|
||||
@ -567,9 +522,7 @@
|
||||
"js": "",
|
||||
"scopedCss": "[data-scope=\"fullscreen\"] .container {\n margin: 40px auto;\n max-width: 700px; }\n\n[data-scope=\"fullscreen\"] .element {\n padding: 20px;\n height: 300px;\n width: 100%;\n background-color: skyblue; }\n\n[data-scope=\"fullscreen\"] .element p {\n text-align: center;\n color: white;\n font-size: 3em; }\n\n[data-scope=\"fullscreen\"] .element:-ms-fullscreen p {\n visibility: visible; }\n\n[data-scope=\"fullscreen\"] .element:fullscreen {\n background-color: #e4708a;\n width: 100vw;\n height: 100vh; }\n"
|
||||
},
|
||||
"tags": [
|
||||
"visual"
|
||||
]
|
||||
"tags": ["visual"]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "bc28c8d11259e58cb448d898b3ed31e8fc5b22e9840eee14c392368685755787"
|
||||
@ -593,9 +546,7 @@
|
||||
"js": "",
|
||||
"scopedCss": "[data-scope=\"ghost-trick\"] .ghosting {\n height: 300px;\n background: #0ff; }\n\n[data-scope=\"ghost-trick\"] .ghosting:before {\n content: '';\n display: inline-block;\n height: 100%;\n vertical-align: middle; }\n\n[data-scope=\"ghost-trick\"] p {\n display: inline-block;\n vertical-align: middle; }\n"
|
||||
},
|
||||
"tags": [
|
||||
"layout"
|
||||
]
|
||||
"tags": ["layout"]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "1e9448a7a3fdfda03eb9a43715bd508ea0ce84eaebedf147043fba2f586dc8dc"
|
||||
@ -619,9 +570,7 @@
|
||||
"js": "",
|
||||
"scopedCss": "[data-scope=\"gradient-text\"] .gradient-text {\n background: -webkit-linear-gradient(pink, red);\n -webkit-text-fill-color: transparent;\n -webkit-background-clip: text; }\n"
|
||||
},
|
||||
"tags": [
|
||||
"visual"
|
||||
]
|
||||
"tags": ["visual"]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "974db536cfe1022d46c3a3fbec5f599a961de986a694c21fa9f493c880263f0d"
|
||||
@ -645,9 +594,7 @@
|
||||
"js": "",
|
||||
"scopedCss": "[data-scope=\"grid-centering\"] .grid-centering {\n display: grid;\n justify-content: center;\n align-items: center;\n height: 100px; }\n"
|
||||
},
|
||||
"tags": [
|
||||
"layout"
|
||||
]
|
||||
"tags": ["layout"]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "6435b7dc7a403884583c6ed2062dce4e2a43d144578c5d4f6b3ab0882ca959f4"
|
||||
@ -671,9 +618,7 @@
|
||||
"js": "",
|
||||
"scopedCss": "[data-scope=\"hairline-border\"] .hairline-border {\n box-shadow: 0 0 0 1px; }\n\n@media (min-resolution: 2dppx) {\n [data-scope=\"hairline-border\"] .hairline-border {\n box-shadow: 0 0 0 0.5px; } }\n\n@media (min-resolution: 3dppx) {\n [data-scope=\"hairline-border\"] .hairline-border {\n box-shadow: 0 0 0 0.33333333px; } }\n\n@media (min-resolution: 4dppx) {\n [data-scope=\"hairline-border\"] .hairline-border {\n box-shadow: 0 0 0 0.25px; } }\n"
|
||||
},
|
||||
"tags": [
|
||||
"visual"
|
||||
]
|
||||
"tags": ["visual"]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "89a7003fb239612b9ce94ebfaff95bc6bf88fec6990ab6256fff7b2ddfa6d42f"
|
||||
@ -697,9 +642,7 @@
|
||||
"js": "var el = document.querySelector('.el')\nvar height = el.scrollHeight\nel.style.setProperty('--max-height', height + 'px')",
|
||||
"scopedCss": "[data-scope=\"height-transition\"] .el {\n transition: max-height 0.5s;\n overflow: hidden;\n max-height: 0; }\n\n[data-scope=\"height-transition\"] .trigger:hover > .el {\n max-height: var(--max-height); }\n"
|
||||
},
|
||||
"tags": [
|
||||
"animation"
|
||||
]
|
||||
"tags": ["animation"]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "737b2ca54126cbcb200496d2c61a12ab5e43b9f09a084cfc8cc4f7afa242ad43"
|
||||
@ -723,9 +666,7 @@
|
||||
"js": "",
|
||||
"scopedCss": "[data-scope=\"hover-shadow-box-animation\"] .hover-shadow-box-animation {\n display: inline-block;\n vertical-align: middle;\n transform: perspective(1px) translateZ(0);\n box-shadow: 0 0 1px transparent;\n margin: 10px;\n transition-duration: 0.3s;\n transition-property: box-shadow, transform; }\n\n[data-scope=\"hover-shadow-box-animation\"] .hover-shadow-box-animation:hover,\n[data-scope=\"hover-shadow-box-animation\"] .hover-shadow-box-animation:focus,\n[data-scope=\"hover-shadow-box-animation\"] .hover-shadow-box-animation:active {\n box-shadow: 1px 10px 10px -10px rgba(0, 0, 24, 0.5);\n transform: scale(1.2); }\n"
|
||||
},
|
||||
"tags": [
|
||||
"animation"
|
||||
]
|
||||
"tags": ["animation"]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "b0e6bab9cb552d038d24121cfff46c630e6feeb073b3af6f055e9418c511e63b"
|
||||
@ -749,9 +690,7 @@
|
||||
"js": "",
|
||||
"scopedCss": "[data-scope=\"hover-underline-animation\"] .hover-underline-animation {\n display: inline-block;\n position: relative;\n color: #0087ca; }\n\n[data-scope=\"hover-underline-animation\"] .hover-underline-animation::after {\n content: '';\n position: absolute;\n width: 100%;\n transform: scaleX(0);\n height: 2px;\n bottom: 0;\n left: 0;\n background-color: #0087ca;\n transform-origin: bottom right;\n transition: transform 0.25s ease-out; }\n\n[data-scope=\"hover-underline-animation\"] .hover-underline-animation:hover::after {\n transform: scaleX(1);\n transform-origin: bottom left; }\n"
|
||||
},
|
||||
"tags": [
|
||||
"animation"
|
||||
]
|
||||
"tags": ["animation"]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "9a97ba2c7f2f28ff9047373a3046d95eb7a9ff03de42d23568d669d61f30c6f1"
|
||||
@ -775,9 +714,7 @@
|
||||
"js": "",
|
||||
"scopedCss": "[data-scope=\"last-item-with-remaining-available-height\"] html,\n[data-scope=\"last-item-with-remaining-available-height\"] body {\n height: 100%;\n margin: 0; }\n\n[data-scope=\"last-item-with-remaining-available-height\"] .container {\n height: 100%;\n display: flex;\n flex-direction: column; }\n\n[data-scope=\"last-item-with-remaining-available-height\"] .container > div:last-child {\n background-color: tomato;\n flex: 1; }\n"
|
||||
},
|
||||
"tags": [
|
||||
"layout"
|
||||
]
|
||||
"tags": ["layout"]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "2f925cc190a9744532de97bb4add65e53cc0b2f3833760f4e7263f5df17cfad5"
|
||||
@ -801,10 +738,7 @@
|
||||
"js": "var btn = document.querySelector('.mouse-cursor-gradient-tracking')\nbtn.onmousemove = function(e) {\n var x = e.pageX - btn.offsetLeft - btn.offsetParent.offsetLeft\n var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop\n btn.style.setProperty('--x', x + 'px')\n btn.style.setProperty('--y', y + 'px')\n}",
|
||||
"scopedCss": "[data-scope=\"mouse-cursor-gradient-tracking\"] .mouse-cursor-gradient-tracking {\n position: relative;\n background: #7983ff;\n padding: 0.5rem 1rem;\n font-size: 1.2rem;\n border: none;\n color: white;\n cursor: pointer;\n outline: none;\n overflow: hidden; }\n\n[data-scope=\"mouse-cursor-gradient-tracking\"] .mouse-cursor-gradient-tracking span {\n position: relative; }\n\n[data-scope=\"mouse-cursor-gradient-tracking\"] .mouse-cursor-gradient-tracking::before {\n --size: 0;\n content: '';\n position: absolute;\n left: var(--x);\n top: var(--y);\n width: var(--size);\n height: var(--size);\n background: radial-gradient(circle closest-side, pink, transparent);\n transform: translate(-50%, -50%);\n transition: width 0.2s ease, height 0.2s ease; }\n\n[data-scope=\"mouse-cursor-gradient-tracking\"] .mouse-cursor-gradient-tracking:hover::before {\n --size: 200px; }\n"
|
||||
},
|
||||
"tags": [
|
||||
"visual",
|
||||
"interactivity"
|
||||
]
|
||||
"tags": ["visual", "interactivity"]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "95356deaaa912ba2c168ee418678ad99d1e000163c7b95f725364ba3cbbb5b85"
|
||||
@ -828,9 +762,7 @@
|
||||
"js": "",
|
||||
"scopedCss": "[data-scope=\"not-selector\"] .css-not-selector-shortcut {\n display: flex; }\n\n[data-scope=\"not-selector\"] ul {\n padding-left: 0; }\n\n[data-scope=\"not-selector\"] li {\n list-style-type: none;\n margin: 0;\n padding: 0 0.75rem; }\n\n[data-scope=\"not-selector\"] li:not(:last-child) {\n border-right: 2px solid #d2d5e4; }\n"
|
||||
},
|
||||
"tags": [
|
||||
"visual"
|
||||
]
|
||||
"tags": ["visual"]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "129748a7f6e0ee74a87e4ff4c62df53c40359c57047586c887fad9fc76872c04"
|
||||
@ -854,10 +786,7 @@
|
||||
"js": "",
|
||||
"scopedCss": "[data-scope=\"offscreen\"] .offscreen {\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n width: 1px; }\n"
|
||||
},
|
||||
"tags": [
|
||||
"layout",
|
||||
"visual"
|
||||
]
|
||||
"tags": ["layout", "visual"]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "233e33b59ef7be00766dd0034ab54c6e788af637d761e71efb5c552153a9d163"
|
||||
@ -881,9 +810,7 @@
|
||||
"js": "",
|
||||
"scopedCss": "[data-scope=\"overflow-scroll-gradient\"] .overflow-scroll-gradient {\n position: relative; }\n\n[data-scope=\"overflow-scroll-gradient\"] .overflow-scroll-gradient::after {\n content: '';\n position: absolute;\n bottom: 0;\n width: 240px;\n height: 25px;\n background: linear-gradient(rgba(255, 255, 255, 0.001), white);\n /* transparent keyword is broken in Safari */\n pointer-events: none; }\n\n[data-scope=\"overflow-scroll-gradient\"] .overflow-scroll-gradient__scroller {\n overflow-y: scroll;\n background: white;\n width: 240px;\n height: 200px;\n padding: 15px;\n line-height: 1.2; }\n"
|
||||
},
|
||||
"tags": [
|
||||
"visual"
|
||||
]
|
||||
"tags": ["visual"]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "938536c0407ce1d5edcf443ec9a51bdb22815662175ffdd372f5a7bc1446c865"
|
||||
@ -907,9 +834,7 @@
|
||||
"js": "",
|
||||
"scopedCss": "[data-scope=\"popout-menu\"] .reference {\n position: relative;\n background: tomato;\n width: 100px;\n height: 100px; }\n\n[data-scope=\"popout-menu\"] .popout-menu {\n position: absolute;\n visibility: hidden;\n left: 100%;\n background: #333;\n color: white;\n padding: 15px; }\n\n[data-scope=\"popout-menu\"] .reference:hover > .popout-menu,\n[data-scope=\"popout-menu\"] .reference:focus > .popout-menu,\n[data-scope=\"popout-menu\"] .reference:focus-within > .popout-menu {\n visibility: visible; }\n"
|
||||
},
|
||||
"tags": [
|
||||
"interactivity"
|
||||
]
|
||||
"tags": ["interactivity"]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "c4ac484b5e94d0c326d1ac122ba9d9f98b71cd3ab3cce1cd3077fbd6e1afe4ee"
|
||||
@ -933,9 +858,7 @@
|
||||
"js": "",
|
||||
"scopedCss": "[data-scope=\"pretty-text-underline\"] .pretty-text-underline {\n display: inline;\n text-shadow: 1px 1px #f5f6f9, -1px 1px #f5f6f9, -1px -1px #f5f6f9, 1px -1px #f5f6f9;\n background-image: linear-gradient(90deg, currentColor 100%, transparent 100%);\n background-position: bottom;\n background-repeat: no-repeat;\n background-size: 100% 1px; }\n\n[data-scope=\"pretty-text-underline\"] .pretty-text-underline::-moz-selection {\n background-color: rgba(0, 150, 255, 0.3);\n text-shadow: none; }\n\n[data-scope=\"pretty-text-underline\"] .pretty-text-underline::selection {\n background-color: rgba(0, 150, 255, 0.3);\n text-shadow: none; }\n"
|
||||
},
|
||||
"tags": [
|
||||
"visual"
|
||||
]
|
||||
"tags": ["visual"]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "f91299fbd8d5233de42e09ef7c381a1cce23a83288f9e619f153af22a1275fd2"
|
||||
@ -959,9 +882,7 @@
|
||||
"js": "",
|
||||
"scopedCss": "[data-scope=\"reset-all-styles\"] .reset-all-styles {\n all: initial; }\n"
|
||||
},
|
||||
"tags": [
|
||||
"visual"
|
||||
]
|
||||
"tags": ["visual"]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "1e52c4cc2c03669576b53d4be44357e6fea843cffd671419c881b31c927c9170"
|
||||
@ -985,9 +906,7 @@
|
||||
"js": "",
|
||||
"scopedCss": "[data-scope=\"shape-separator\"] .shape-separator {\n position: relative;\n height: 48px;\n background: #333; }\n\n[data-scope=\"shape-separator\"] .shape-separator::after {\n content: '';\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='m12 0l12 12h-24z' fill='%23fff'/%3E%3C/svg%3E\");\n position: absolute;\n width: 100%;\n height: 12px;\n bottom: 0; }\n"
|
||||
},
|
||||
"tags": [
|
||||
"visual"
|
||||
]
|
||||
"tags": ["visual"]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "75e712c07e184d8dbf34818ba245f5b1a4273dfb491a21262b88042ef9e42d6c"
|
||||
@ -1011,9 +930,7 @@
|
||||
"js": "",
|
||||
"scopedCss": "[data-scope=\"sibling-fade\"] span {\n padding: 0 1rem;\n transition: opacity 0.2s; }\n\n[data-scope=\"sibling-fade\"] .sibling-fade:hover span:not(:hover) {\n opacity: 0.5; }\n"
|
||||
},
|
||||
"tags": [
|
||||
"interactivity"
|
||||
]
|
||||
"tags": ["interactivity"]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "c4b3ad85a5137635283abe843a9f180027bd751c40be9ca465b0b3e3f52b9fe9"
|
||||
@ -1037,9 +954,7 @@
|
||||
"js": "",
|
||||
"scopedCss": "[data-scope=\"system-font-stack\"] .system-font-stack {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif; }\n"
|
||||
},
|
||||
"tags": [
|
||||
"visual"
|
||||
]
|
||||
"tags": ["visual"]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "23cfcc3319fd473b39269b2745abb7f52752a970307fc561159275208d04a554"
|
||||
@ -1063,10 +978,7 @@
|
||||
"js": "",
|
||||
"scopedCss": "[data-scope=\"toggle-switch\"] .switch {\n position: relative;\n display: inline-block;\n width: 40px;\n height: 20px;\n background-color: rgba(0, 0, 0, 0.25);\n border-radius: 20px;\n transition: all 0.3s; }\n\n[data-scope=\"toggle-switch\"] .switch::after {\n content: '';\n position: absolute;\n width: 18px;\n height: 18px;\n border-radius: 18px;\n background-color: white;\n top: 1px;\n left: 1px;\n transition: all 0.3s; }\n\n[data-scope=\"toggle-switch\"] input[type='checkbox']:checked + .switch::after {\n transform: translateX(20px); }\n\n[data-scope=\"toggle-switch\"] input[type='checkbox']:checked + .switch {\n background-color: #7983ff; }\n\n[data-scope=\"toggle-switch\"] .offscreen {\n position: absolute;\n left: -9999px; }\n"
|
||||
},
|
||||
"tags": [
|
||||
"visual",
|
||||
"interactivity"
|
||||
]
|
||||
"tags": ["visual", "interactivity"]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "e29182514bd83550705267a43d21eec8886ed011c6259f2b3efec9862541f90e"
|
||||
@ -1090,9 +1002,7 @@
|
||||
"js": "",
|
||||
"scopedCss": "[data-scope=\"transform-centering\"] .parent {\n border: 1px solid #333;\n height: 250px;\n position: relative;\n width: 250px; }\n\n[data-scope=\"transform-centering\"] .child {\n left: 50%;\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n text-align: center; }\n"
|
||||
},
|
||||
"tags": [
|
||||
"layout"
|
||||
]
|
||||
"tags": ["layout"]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "377d480a141a8890f793ef28212d7ed9d60c9d6831286bcea703ab43daca73ce"
|
||||
@ -1116,9 +1026,7 @@
|
||||
"js": "",
|
||||
"scopedCss": "[data-scope=\"triangle\"] .triangle {\n width: 0;\n height: 0;\n border-top: 20px solid #333;\n border-left: 20px solid transparent;\n border-right: 20px solid transparent; }\n"
|
||||
},
|
||||
"tags": [
|
||||
"visual"
|
||||
]
|
||||
"tags": ["visual"]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "08382966ae74825502676c0bcdb77426abbf6202d813f5dfd6679d864fc1292e"
|
||||
@ -1142,9 +1050,7 @@
|
||||
"js": "",
|
||||
"scopedCss": "[data-scope=\"truncate-text-multiline\"] .truncate-text-multiline {\n overflow: hidden;\n display: block;\n height: 109.2px;\n margin: 0 auto;\n font-size: 26px;\n line-height: 1.4;\n width: 400px;\n position: relative; }\n\n[data-scope=\"truncate-text-multiline\"] .truncate-text-multiline:after {\n content: '';\n position: absolute;\n bottom: 0;\n right: 0;\n width: 150px;\n height: 36.4px;\n background: linear-gradient(to right, rgba(0, 0, 0, 0), #f5f6f9 50%); }\n"
|
||||
},
|
||||
"tags": [
|
||||
"layout"
|
||||
]
|
||||
"tags": ["layout"]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "ab94193bfb305844badfe15bda3594e75c40ac9660c11c06efd750119a916f8e"
|
||||
@ -1168,9 +1074,7 @@
|
||||
"js": "",
|
||||
"scopedCss": "[data-scope=\"truncate-text\"] .truncate-text {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n width: 200px; }\n"
|
||||
},
|
||||
"tags": [
|
||||
"layout"
|
||||
]
|
||||
"tags": ["layout"]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "0fbe2c0df9663735aed522286556ac0383756ab0a1a5f673bb81dcb42f89d4d1"
|
||||
@ -1194,9 +1098,7 @@
|
||||
"js": "",
|
||||
"scopedCss": "[data-scope=\"zebra-striped-list\"] li:nth-child(odd) {\n background-color: #ddd; }\n"
|
||||
},
|
||||
"tags": [
|
||||
"visual"
|
||||
]
|
||||
"tags": ["visual"]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "43bc0cd7776468f3b74791017349ef278921c8ded7ba0bd7788d2b01bdb68c7a"
|
||||
@ -1207,4 +1109,4 @@
|
||||
"specification": "http://jsonapi.org/format/",
|
||||
"type": "snippetArray"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user