#e8e8e8
1/* The design is inspired from the mockapi.io */ 2 3.popup { 4 --burger-line-width: 1.125em; 5 --burger-line-height: 0.125em; 6 --burger-offset: 0.625em; 7 --burger-bg: rgba(0, 0, 0, .15); 8 --burger-color: #333; 9 --burger-line-border-radius: 0.1875em; 10 --burger-diameter: 2.125em; 11 --burger-btn-border-radius: calc(var(--burger-diameter) / 2); 12 --burger-line-transition: .3s; 13 --burger-transition: all .1s ease-in-out; 14 --burger-hover-scale: 1.1; 15 --burger-active-scale: .95; 16 --burger-enable-outline-color: var(--burger-bg); 17 --burger-enable-outline-width: 0.125em; 18 --burger-enable-outline-offset: var(--burger-enable-outline-width); 19 /* nav */ 20 --nav-padding-x: 0.25em; 21 --nav-padding-y: 0.625em; 22 --nav-border-radius: 0.375em; 23 --nav-border-color: #ccc; 24 --nav-border-width: 0.0625em; 25 --nav-shadow-color: rgba(0, 0, 0, .2); 26 --nav-shadow-width: 0 1px 5px; 27 --nav-bg: #eee; 28 --nav-font-family: Menlo, Roboto Mono, monospace; 29 --nav-default-scale: .8; 30 --nav-active-scale: 1; 31 --nav-position-left: 0; 32 --nav-position-right: unset; 33 /* if you want to change sides just switch one property */ 34 /* from properties to "unset" and the other to 0 */ 35 /* title */ 36 --nav-title-size: 0.625em; 37 --nav-title-color: #777; 38 --nav-title-padding-x: 1rem; 39 --nav-title-padding-y: 0.25em; 40 /* nav button */ 41 --nav-button-padding-x: 1rem; 42 --nav-button-padding-y: 0.375em; 43 --nav-button-border-radius: 0.375em; 44 --nav-button-font-size: 12px; 45 --nav-button-hover-bg: #6495ed; 46 --nav-button-hover-text-color: #fff; 47 --nav-button-distance: 0.875em; 48 /* underline */ 49 --underline-border-width: 0.0625em; 50 --underline-border-color: #ccc; 51 --underline-margin-y: 0.3125em; 52} 53 54/* popup settings ๐ */ 55 56.popup { 57 display: inline-block; 58 text-rendering: optimizeLegibility; 59 position: relative; 60} 61 62.popup input { 63 display: none; 64} 65 66.burger { 67 display: flex; 68 position: relative; 69 align-items: center; 70 justify-content: center; 71 background: var(--burger-bg); 72 width: var(--burger-diameter); 73 height: var(--burger-diameter); 74 border-radius: var(--burger-btn-border-radius); 75 border: none; 76 cursor: pointer; 77 overflow: hidden; 78 transition: var(--burger-transition); 79 outline: var(--burger-enable-outline-width) solid transparent; 80 outline-offset: 0; 81} 82 83.burger span { 84 height: var(--burger-line-height); 85 width: var(--burger-line-width); 86 background: var(--burger-color); 87 border-radius: var(--burger-line-border-radius); 88 position: absolute; 89 transition: var(--burger-line-transition); 90} 91 92.burger span:nth-child(1) { 93 top: var(--burger-offset); 94} 95 96.burger span:nth-child(2) { 97 bottom: var(--burger-offset); 98} 99 100.burger span:nth-child(3) { 101 top: 50%; 102 transform: translateY(-50%); 103} 104 105.popup-window { 106 transform: scale(var(--nav-default-scale)); 107 visibility: hidden; 108 opacity: 0; 109 position: absolute; 110 padding: var(--nav-padding-y) var(--nav-padding-x); 111 background: var(--nav-bg); 112 font-family: var(--nav-font-family); 113 color: var(--nav-text-color); 114 border-radius: var(--nav-border-radius); 115 box-shadow: var(--nav-shadow-width) var(--nav-shadow-color); 116 border: var(--nav-border-width) solid var(--nav-border-color); 117 top: calc(var(--burger-diameter) + var(--burger-enable-outline-width) + var(--burger-enable-outline-offset)); 118 left: var(--nav-position-left); 119 right: var(--nav-position-right); 120 transition: var(--burger-transition); 121} 122 123.popup-window legend { 124 padding: var(--nav-title-padding-y) var(--nav-title-padding-x); 125 margin: 0; 126 color: var(--nav-title-color); 127 font-size: var(--nav-title-size); 128 text-transform: uppercase; 129} 130 131.popup-window ul { 132 margin: 0; 133 padding: 0; 134 list-style-type: none; 135} 136 137.popup-window ul button { 138 outline: none; 139 width: 100%; 140 border: none; 141 background: none; 142 display: flex; 143 align-items: center; 144 color: var(--burger-color); 145 font-size: var(--nav-button-font-size); 146 padding: var(--nav-button-padding-y) var(--nav-button-padding-x); 147 white-space: nowrap; 148 border-radius: var(--nav-button-border-radius); 149 cursor: pointer; 150 column-gap: var(--nav-button-distance); 151} 152 153.popup-window ul li:nth-child(1) svg, 154.popup-window ul li:nth-child(2) svg { 155 color: cornflowerblue; 156} 157 158.popup-window ul li:nth-child(4) svg, 159.popup-window ul li:nth-child(5) svg { 160 color: rgb(153, 153, 153); 161} 162 163.popup-window ul li:nth-child(7) svg { 164 color: red; 165} 166 167.popup-window hr { 168 margin: var(--underline-margin-y) 0; 169 border: none; 170 border-bottom: var(--underline-border-width) solid var(--underline-border-color); 171} 172 173/* actions */ 174 175.popup-window ul button:hover, 176.popup-window ul button:focus-visible, 177.popup-window ul button:hover svg, 178.popup-window ul button:focus-visible svg { 179 color: var(--nav-button-hover-text-color); 180 background: var(--nav-button-hover-bg); 181} 182 183.burger:hover { 184 transform: scale(var(--burger-hover-scale)); 185} 186 187.burger:active { 188 transform: scale(var(--burger-active-scale)); 189} 190 191.burger:focus:not(:hover) { 192 outline-color: var(--burger-enable-outline-color); 193 outline-offset: var(--burger-enable-outline-offset); 194} 195 196.popup input:checked+.burger span:nth-child(1) { 197 top: 50%; 198 transform: translateY(-50%) rotate(45deg); 199} 200 201.popup input:checked+.burger span:nth-child(2) { 202 bottom: 50%; 203 transform: translateY(50%) rotate(-45deg); 204} 205 206.popup input:checked+.burger span:nth-child(3) { 207 transform: translateX(calc(var(--burger-diameter) * -1 - var(--burger-line-width))); 208} 209 210.popup input:checked~nav { 211 transform: scale(var(--nav-active-scale)); 212 visibility: visible; 213 opacity: 1; 214}
ย
2.4K views
2.4K views
Comments
MIT License