9.6K views
1.continue-application { 2 --color: #fff; 3 --background: #404660; 4 --background-hover: #3A4059; 5 --background-left: #2B3044; 6 --folder: #F3E9CB; 7 --folder-inner: #BEB393; 8 --paper: #FFFFFF; 9 --paper-lines: #BBC1E1; 10 --paper-behind: #E1E6F9; 11 --pencil-cap: #fff; 12 --pencil-top: #275EFE; 13 --pencil-middle: #fff; 14 --pencil-bottom: #5C86FF; 15 --shadow: rgba(13, 15, 25, .2); 16 border: none; 17 outline: none; 18 cursor: pointer; 19 position: relative; 20 border-radius: 5px; 21 font-size: 14px; 22 font-weight: 500; 23 line-height: 19px; 24 -webkit-appearance: none; 25 -webkit-tap-highlight-color: transparent; 26 padding: 17px 29px 17px 69px; 27 transition: background 0.3s; 28 color: var(--color); 29 background: var(--bg, var(--background)); 30} 31 32.continue-application > div { 33 top: 0; 34 left: 0; 35 bottom: 0; 36 width: 53px; 37 position: absolute; 38 overflow: hidden; 39 border-radius: 5px 0 0 5px; 40 background: var(--background-left); 41} 42 43.continue-application > div .folder { 44 width: 23px; 45 height: 27px; 46 position: absolute; 47 left: 15px; 48 top: 13px; 49} 50 51.continue-application > div .folder .top { 52 left: 0; 53 top: 0; 54 z-index: 2; 55 position: absolute; 56 transform: translateX(var(--fx, 0)); 57 transition: transform 0.4s ease var(--fd, 0.3s); 58} 59 60.continue-application > div .folder .top svg { 61 width: 24px; 62 height: 27px; 63 display: block; 64 fill: var(--folder); 65 transform-origin: 0 50%; 66 transition: transform 0.3s ease var(--fds, 0.45s); 67 transform: perspective(120px) rotateY(var(--fr, 0deg)); 68} 69 70.continue-application > div .folder:before, .continue-application > div .folder:after, 71.continue-application > div .folder .paper { 72 content: ""; 73 position: absolute; 74 left: var(--l, 0); 75 top: var(--t, 0); 76 width: var(--w, 100%); 77 height: var(--h, 100%); 78 border-radius: 1px; 79 background: var(--b, var(--folder-inner)); 80} 81 82.continue-application > div .folder:before { 83 box-shadow: 0 1.5px 3px var(--shadow), 0 2.5px 5px var(--shadow), 0 3.5px 7px var(--shadow); 84 transform: translateX(var(--fx, 0)); 85 transition: transform 0.4s ease var(--fd, 0.3s); 86} 87 88.continue-application > div .folder:after, 89.continue-application > div .folder .paper { 90 --l: 1px; 91 --t: 1px; 92 --w: 21px; 93 --h: 25px; 94 --b: var(--paper-behind); 95} 96 97.continue-application > div .folder:after { 98 transform: translate(var(--pbx, 0), var(--pby, 0)); 99 transition: transform 0.4s ease var(--pbd, 0s); 100} 101 102.continue-application > div .folder .paper { 103 z-index: 1; 104 --b: var(--paper); 105} 106 107.continue-application > div .folder .paper:before, .continue-application > div .folder .paper:after { 108 content: ""; 109 width: var(--wp, 14px); 110 height: 2px; 111 border-radius: 1px; 112 transform: scaleY(0.5); 113 left: 3px; 114 top: var(--tp, 3px); 115 position: absolute; 116 background: var(--paper-lines); 117 box-shadow: 0 12px 0 0 var(--paper-lines), 0 24px 0 0 var(--paper-lines); 118} 119 120.continue-application > div .folder .paper:after { 121 --tp: 6px; 122 --wp: 10px; 123} 124 125.continue-application > div .pencil { 126 height: 2px; 127 width: 3px; 128 border-radius: 1px 1px 0 0; 129 top: 8px; 130 left: 105%; 131 position: absolute; 132 z-index: 3; 133 transform-origin: 50% 19px; 134 background: var(--pencil-cap); 135 transform: translateX(var(--pex, 0)) rotate(35deg); 136 transition: transform 0.4s ease var(--pbd, 0s); 137} 138 139.continue-application > div .pencil:before, .continue-application > div .pencil:after { 140 content: ""; 141 position: absolute; 142 display: block; 143 background: var(--b, linear-gradient(var(--pencil-top) 55%, var(--pencil-middle) 55.1%, var(--pencil-middle) 60%, var(--pencil-bottom) 60.1%)); 144 width: var(--w, 5px); 145 height: var(--h, 20px); 146 border-radius: var(--br, 2px 2px 0 0); 147 top: var(--t, 2px); 148 left: var(--l, -1px); 149} 150 151.continue-application > div .pencil:before { 152 -webkit-clip-path: polygon(0 5%, 5px 5%, 5px 17px, 50% 20px, 0 17px); 153 clip-path: polygon(0 5%, 5px 5%, 5px 17px, 50% 20px, 0 17px); 154} 155 156.continue-application > div .pencil:after { 157 --b: none; 158 --w: 3px; 159 --h: 6px; 160 --br: 0 2px 1px 0; 161 --t: 3px; 162 --l: 3px; 163 border-top: 1px solid var(--pencil-top); 164 border-right: 1px solid var(--pencil-top); 165} 166 167.continue-application:before, .continue-application:after { 168 content: ""; 169 position: absolute; 170 width: 10px; 171 height: 2px; 172 border-radius: 1px; 173 background: var(--color); 174 transform-origin: 9px 1px; 175 transform: translateX(var(--cx, 0)) scale(0.5) rotate(var(--r, -45deg)); 176 top: 26px; 177 right: 16px; 178 transition: transform 0.3s; 179} 180 181.continue-application:after { 182 --r: 45deg; 183} 184 185.continue-application:hover { 186 --cx: 2px; 187 --bg: var(--background-hover); 188 --fx: -40px; 189 --fr: -60deg; 190 --fd: .15s; 191 --fds: 0s; 192 --pbx: 3px; 193 --pby: -3px; 194 --pbd: .15s; 195 --pex: -24px; 196} 197
MIT License