Cloud.io - Dashboard

├── .gitignore ├── README.md ├── dribbble-imran-dashboard-cloud-io.png ├── images ├── alert-circle.svg ├── align-justify.svg ├── bell.svg ├── chevron-down.svg ├── clock.svg ├── face1.jpg ├── face10.jpg ├── face11.jpg ├── face12.jpg ├── face2.jpg ├── face3.jpg ├── face4.jpg ├── face5.jpg ├── face6.jpg ├── face7.jpg ├── face8.jpg ├── face9.jpg ├── folder-plus.svg ├── folder.svg ├── grid.svg ├── home.svg ├── icon-docs-lg.png ├── icon-double-folder.png ├── icon-other-lg.png ├── icon-pdf.png ├── icon-photo-lg.png ├── icon-photo.png ├── icon-ps.png ├── icon-single-folder.png ├── icon-video-lg.png ├── icon-zip.png ├── imran.png ├── logo.png ├── more-horizontal.svg ├── more-vertical.svg ├── search.svg ├── settings.svg ├── trash-2.svg ├── upload.svg └── users.svg ├── index.html └── style.css /.gitignore: -------------------------------------------------------------------------------- 1 | .cache 2 | dist/ 3 | .DS_Store 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # CSS Layout Challenge 2 | 3 | We're building this layout by [Imran🏀 on Dribbble](https://dribbble.com/shots/10747116-Cloud-Web-App): 4 | 5 | ![Cloud Dashboard by Imran](dribbble-imran-dashboard-cloud-io.png) 6 | 7 | [Sign up for the challenge here](https://daveceddia.com/css-layout-challenge/) and work through building the solution (get as far as you can) by Wednesday 3/25, and on Wednesday I'll do a livestream working through it together. 8 | 9 | This repo will have a solution posted once the challenge is over, and a link to the livestream. 10 | 11 | We're using [**Issues**](issues) on this repo as our little community forum. Post progress and questions there! 12 | 13 | ## Resources 14 | 15 | Some things I found helpful as I was working through this: 16 | 17 | * [The original design by Imran on Dribbble](https://dribbble.com/shots/10747116-Cloud-Web-App) (note: not my design!) 18 | * [CSS Grid Garden](https://cssgridgarden.com/) because I'm still learning CSS grid 19 | * [CSS Tricks: Complete Guide to CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/) because same 20 | * [This snippet of code for an sr-only class](https://a11y-guidelines.orange.com/web_EN/exemples/masquage/index.html) to make content only visible to screen readers 21 | * [Every Layout](https://every-layout.dev/) with good ideas on how to make resilient CSS layouts 22 | * [Feather Icons](https://feathericons.com/) - free icon set with adjustable color/size/stroke, single-click-to-download icons as needed 23 | * [This CSS filter generator](https://codepen.io/sosuke/pen/Pjoqqp) if you want to recolor an SVG without pasting the SVG itself into the document (or, easier: recolor the icons in Feather before downloading!) 24 | 25 | -------------------------------------------------------------------------------- /dribbble-imran-dashboard-cloud-io.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dceddia/css-layout-challenge/ff92d1f41595db0ddba3dff3e95b137d479e7c8e/dribbble-imran-dashboard-cloud-io.png -------------------------------------------------------------------------------- /images/alert-circle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/align-justify.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/bell.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/chevron-down.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/clock.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/face1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dceddia/css-layout-challenge/ff92d1f41595db0ddba3dff3e95b137d479e7c8e/images/face1.jpg -------------------------------------------------------------------------------- /images/face10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dceddia/css-layout-challenge/ff92d1f41595db0ddba3dff3e95b137d479e7c8e/images/face10.jpg -------------------------------------------------------------------------------- /images/face11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dceddia/css-layout-challenge/ff92d1f41595db0ddba3dff3e95b137d479e7c8e/images/face11.jpg -------------------------------------------------------------------------------- /images/face12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dceddia/css-layout-challenge/ff92d1f41595db0ddba3dff3e95b137d479e7c8e/images/face12.jpg -------------------------------------------------------------------------------- /images/face2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dceddia/css-layout-challenge/ff92d1f41595db0ddba3dff3e95b137d479e7c8e/images/face2.jpg -------------------------------------------------------------------------------- /images/face3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dceddia/css-layout-challenge/ff92d1f41595db0ddba3dff3e95b137d479e7c8e/images/face3.jpg -------------------------------------------------------------------------------- /images/face4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dceddia/css-layout-challenge/ff92d1f41595db0ddba3dff3e95b137d479e7c8e/images/face4.jpg -------------------------------------------------------------------------------- /images/face5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dceddia/css-layout-challenge/ff92d1f41595db0ddba3dff3e95b137d479e7c8e/images/face5.jpg -------------------------------------------------------------------------------- /images/face6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dceddia/css-layout-challenge/ff92d1f41595db0ddba3dff3e95b137d479e7c8e/images/face6.jpg -------------------------------------------------------------------------------- /images/face7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dceddia/css-layout-challenge/ff92d1f41595db0ddba3dff3e95b137d479e7c8e/images/face7.jpg -------------------------------------------------------------------------------- /images/face8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dceddia/css-layout-challenge/ff92d1f41595db0ddba3dff3e95b137d479e7c8e/images/face8.jpg -------------------------------------------------------------------------------- /images/face9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dceddia/css-layout-challenge/ff92d1f41595db0ddba3dff3e95b137d479e7c8e/images/face9.jpg -------------------------------------------------------------------------------- /images/folder-plus.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/folder.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/grid.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/home.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/icon-docs-lg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dceddia/css-layout-challenge/ff92d1f41595db0ddba3dff3e95b137d479e7c8e/images/icon-docs-lg.png -------------------------------------------------------------------------------- /images/icon-double-folder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dceddia/css-layout-challenge/ff92d1f41595db0ddba3dff3e95b137d479e7c8e/images/icon-double-folder.png -------------------------------------------------------------------------------- /images/icon-other-lg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dceddia/css-layout-challenge/ff92d1f41595db0ddba3dff3e95b137d479e7c8e/images/icon-other-lg.png -------------------------------------------------------------------------------- /images/icon-pdf.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dceddia/css-layout-challenge/ff92d1f41595db0ddba3dff3e95b137d479e7c8e/images/icon-pdf.png -------------------------------------------------------------------------------- /images/icon-photo-lg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dceddia/css-layout-challenge/ff92d1f41595db0ddba3dff3e95b137d479e7c8e/images/icon-photo-lg.png -------------------------------------------------------------------------------- /images/icon-photo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dceddia/css-layout-challenge/ff92d1f41595db0ddba3dff3e95b137d479e7c8e/images/icon-photo.png -------------------------------------------------------------------------------- /images/icon-ps.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dceddia/css-layout-challenge/ff92d1f41595db0ddba3dff3e95b137d479e7c8e/images/icon-ps.png -------------------------------------------------------------------------------- /images/icon-single-folder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dceddia/css-layout-challenge/ff92d1f41595db0ddba3dff3e95b137d479e7c8e/images/icon-single-folder.png -------------------------------------------------------------------------------- /images/icon-video-lg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dceddia/css-layout-challenge/ff92d1f41595db0ddba3dff3e95b137d479e7c8e/images/icon-video-lg.png -------------------------------------------------------------------------------- /images/icon-zip.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dceddia/css-layout-challenge/ff92d1f41595db0ddba3dff3e95b137d479e7c8e/images/icon-zip.png -------------------------------------------------------------------------------- /images/imran.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dceddia/css-layout-challenge/ff92d1f41595db0ddba3dff3e95b137d479e7c8e/images/imran.png -------------------------------------------------------------------------------- /images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dceddia/css-layout-challenge/ff92d1f41595db0ddba3dff3e95b137d479e7c8e/images/logo.png -------------------------------------------------------------------------------- /images/more-horizontal.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/more-vertical.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/search.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/settings.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/trash-2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/upload.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/users.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Cloud.io - Dashboard 9 | 10 | 11 |

12 |

13 | 39 |

40 |

41 |

42 | Upload files 43 |

44 |

45 |

46 | Upload folder 47 |

48 |

49 |

50 | New folder 51 |

52 |

53 |

54 | More › 55 |

56 |

57 | 60 |

61 |

62 |

63 | 64 |

65 |

Recently Used

66 |

67 | 71 | 75 |

76 |

77 |

78 |

79 |

84 |

88 | 92 |

App Project

93 |

Created: 20.02.2020

94 |

95 |

96 |

101 |

105 | 109 |

Project: fitbit

110 |

Created: 28.02.2020

111 |

112 |

113 |

118 |

123 | 127 |

Client Documents

128 |

Created: 4.03.2020

129 |

130 |

131 |

132 |

Recent Files

133 |

134 | View All 135 |

136 |

137 |

138 |

Name ↓

139 |

Owners

140 |

Last Modified

141 |

142 | 143 | 144 |

145 |

150 | Travel Landing Page 151 |

152 |

153 | 5 members 154 |

155 |

156 | Mar 8, 2020 157 |

158 |

159 | 163 |

164 | 165 | 166 |

167 |

172 | Tour Photos 173 |

174 |

175 | 12 members 176 |

177 |

178 | Mar 8, 2020 179 |

180 |

181 | 185 |

186 | 187 | 188 |

189 |

194 | Tour Photos 195 |

196 |

197 | 10 members 198 |

199 |

200 | Mar 9, 2020 201 |

202 |

203 | 207 |

208 | 209 | 210 |

211 |

216 | Tour Photos 217 |

218 |

219 | 3 members 220 |

221 |

222 | Mar 10, 2020 223 |

224 |

225 | 229 |

230 |

231 |

232 |

Shared With Me

233 |

234 | View All 235 |

236 |

237 |

238 |

239 |

244 |

248 |

App Project

249 |

12 Files

250 |

251 |

252 |

257 |

261 |

Project: fitbit

262 |

24 Files

263 |

264 |

265 |

270 |

275 |

Client Documents

276 |

6 Files

277 |

278 |

279 |

280 |

281 |

282 |

283 |

284 |

285 |

286 | 287 | Imran 288 |

289 | 290 |

291 |

292 |

293 |

294 |

Storage

295 |

296 | 326 |

327 |

328 | 85% 329 |

330 | Used 331 |

332 |

333 |

420.2GB of 500 GB used

334 |

335 |

336 |

337 |

338 |

Documents

339 |

720 files

340 |

341 |

200 GB

342 |

343 | 344 |

345 |

346 |

347 |

Videos

348 |

124 files

349 |

350 |

125 GB

351 |

352 | 353 |

354 |

355 |

356 |

Images

357 |

1200 files

358 |

359 |

75 GB

360 |

361 | 362 |

363 |

364 |

365 |

Others

366 |

30 files

367 |

368 |

50 GB

369 |

370 |

371 |

372 |

373 | 374 | 375 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | html { 2 | height: 100%; 3 | } 4 | * { 5 | /* show what happens without this, nav bar is too wide */ 6 | box-sizing: border-box; 7 | } 8 | 9 | body, 10 | button, 11 | input { 12 | font-family: 'TT Commons Medium'; 13 | font-size: 14px; 14 | } 15 | 16 | body { 17 | display: grid; 18 | grid-template-columns: 220px 1fr 340px; 19 | grid-gap: 20px; 20 | min-height: 100%; 21 | height: 100%; 22 | margin: 0; 23 | padding: 0; 24 | } 25 | 26 | h2 { 27 | font-size: 1.8rem; 28 | color: #353a52; 29 | } 30 | h3 { 31 | font-size: 1.2rem; 32 | color: #52566b; 33 | } 34 | 35 | ul { 36 | margin: 0; 37 | padding: 0; 38 | } 39 | 40 | li { 41 | list-style: none; 42 | } 43 | 44 | a { 45 | color: #3a3f56; 46 | text-decoration: none; 47 | } 48 | 49 | /* https://a11y-guidelines.orange.com/web_EN/exemples/masquage/index.html */ 50 | .sr-only { 51 | position: absolute; 52 | width: 1px; 53 | height: 1px; 54 | padding: 0; 55 | margin: -1px; 56 | overflow: hidden; 57 | clip: rect(0, 0, 0, 0); 58 | white-space: nowrap; 59 | border: 0; 60 | } 61 | 62 | /**** Sidebar ****/ 63 | 64 | .sidebar { 65 | min-height: 100%; 66 | height: 100%; 67 | display: flex; 68 | flex-direction: column; 69 | background: #343951; 70 | color: #fff; 71 | padding: 40px 0; 72 | } 73 | 74 | .logo { 75 | margin: 0 40px 40px 40px; 76 | align-self: flex-start; 77 | } 78 | 79 | /** Nav **/ 80 | nav { 81 | /* this border won't be the right width if padding is on the .sidebar */ 82 | border-bottom: 1px solid #4e5265; 83 | padding: 0 40px; 84 | margin-bottom: 20px; 85 | } 86 | .nav-item { 87 | position: relative; 88 | height: 60px; 89 | display: flex; 90 | align-items: center; 91 | color: #b2b4bd; 92 | } 93 | .nav-item img { 94 | width: 18px; 95 | height: 18px; 96 | filter: invert(69%) sepia(8%) saturate(211%) hue-rotate(192deg) 97 | brightness(103%) contrast(92%); 98 | margin-right: 25px; 99 | } 100 | .nav-item.active { 101 | color: #fff; 102 | } 103 | .nav-item.active img { 104 | filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(82deg) brightness(105%) 105 | contrast(105%); 106 | } 107 | .nav-item.active:before { 108 | height: 100%; 109 | width: 5px; 110 | border-top-right-radius: 5px; 111 | border-bottom-right-radius: 5px; 112 | content: ' '; 113 | background: #fff; 114 | position: absolute; 115 | left: -40px; 116 | } 117 | 118 | /** Actions **/ 119 | .actions { 120 | background: #464b61; 121 | border-radius: 20px; 122 | width: 150px; 123 | padding: 20px 15px; 124 | margin: auto auto 20px auto; 125 | color: #9ea1ab; 126 | } 127 | .actions-item { 128 | display: flex; 129 | align-items: center; 130 | } 131 | .actions-item + .actions-item { 132 | margin-top: 0.4rem; 133 | } 134 | .actions-item img { 135 | width: 18px; 136 | margin-right: 5px; 137 | height: 18px; 138 | filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(82deg) brightness(105%) 139 | contrast(105%); 140 | } 141 | .create-btn { 142 | display: flex; 143 | border-radius: 6px; 144 | background: #ffa000; 145 | border: none; 146 | padding: 5px; 147 | color: #fff; 148 | font-weight: 600; 149 | margin: 0 auto; 150 | width: 150px; 151 | } 152 | .create-btn .text { 153 | flex: 1; 154 | } 155 | .create-btn:after { 156 | content: '+'; 157 | width: 20px; 158 | height: 20px; 159 | background: #ffb333; 160 | display: inline-block; 161 | border-radius: 3px; 162 | } 163 | 164 | /**** Main Content ****/ 165 | 166 | .content { 167 | background: #f5f6fb; 168 | padding: 20px; 169 | } 170 | 171 | .content section { 172 | margin-bottom: 30px; 173 | } 174 | 175 | /*** Search ***/ 176 | 177 | .search { 178 | display: flex; 179 | align-items: center; 180 | width: 100%; 181 | padding: 10px; 182 | padding-top: 12px; 183 | padding-left: 35px; 184 | border: none; 185 | border-radius: 8px; 186 | background-image: url(images/search.svg); 187 | background-repeat: no-repeat; 188 | background-position: 7px 7px; 189 | } 190 | 191 | /*** Projects ***/ 192 | 193 | .content-header { 194 | display: flex; 195 | justify-content: space-between; 196 | align-items: center; 197 | } 198 | .header-actions button { 199 | border: none; 200 | background: transparent; 201 | display: inline-flex; 202 | align-items: center; 203 | opacity: 0.6; 204 | } 205 | .projects { 206 | display: flex; 207 | } 208 | .project { 209 | position: relative; 210 | background: #fff; 211 | border-radius: 20px; 212 | display: grid; 213 | margin-right: 15px; 214 | padding: 15px; 215 | grid-template-rows: 60px 2rem 2rem; 216 | grid-template-columns: 70px 70px; 217 | grid-template-areas: 218 | 'folder participants' 219 | 'title title' 220 | 'date date'; 221 | box-shadow: 0 6px 25px #eeeff4; 222 | } 223 | .project-icon { 224 | align-self: center; 225 | } 226 | .project-actions { 227 | position: absolute; 228 | top: 10px; 229 | right: 0; 230 | border: none; 231 | background: transparent; 232 | } 233 | .project-actions img { 234 | filter: invert(72%) sepia(21%) saturate(435%) hue-rotate(193deg) 235 | brightness(85%) contrast(84%); 236 | width: 20px; 237 | } 238 | .project-participants { 239 | grid-area: participants; 240 | align-self: center; 241 | } 242 | .project-participants li { 243 | display: inline-block; 244 | margin-left: -10px; 245 | } 246 | .project-participants li:first-child { 247 | margin-left: 0px; 248 | } 249 | .project-participants li.more-participants { 250 | display: inline-flex; 251 | align-items: center; 252 | justify-content: center; 253 | background: #fff; 254 | border-radius: 50%; 255 | padding: 2px; 256 | width: 24px; 257 | height: 24px; 258 | position: relative; 259 | top: -9px; 260 | border: 1px solid #d0d1d7; 261 | } 262 | .project-participants img { 263 | width: 25px; 264 | height: 25px; 265 | border-radius: 50%; 266 | border: 2px solid #fff; 267 | } 268 | .project h3 { 269 | grid-area: title; 270 | align-self: center; 271 | } 272 | .project .created-date { 273 | grid-area: date; 274 | align-self: center; 275 | color: #949bc0; 276 | font-size: 0.9rem; 277 | } 278 | 279 | .recent-files { 280 | display: grid; 281 | grid-row-gap: 10px; 282 | grid-template-columns: 1fr 1fr 1fr 50px; 283 | margin-top: 20px; 284 | } 285 | .recent-files .file-type-img { 286 | margin-right: 10px; 287 | } 288 | .recent-files .heading { 289 | color: #828ab6; 290 | } 291 | .recent-files .cell { 292 | display: flex; 293 | background: #fff; 294 | padding: 10px; 295 | align-items: center; 296 | } 297 | .cell:nth-child(4n + 1) { 298 | border-top-left-radius: 10px; 299 | border-bottom-left-radius: 10px; 300 | } 301 | .cell:nth-child(4n) { 302 | border-top-right-radius: 10px; 303 | border-bottom-right-radius: 10px; 304 | } 305 | .file-actions { 306 | border: none; 307 | background: transparent; 308 | display: flex; 309 | align-items: center; 310 | } 311 | .file-actions img { 312 | filter: invert(72%) sepia(21%) saturate(435%) hue-rotate(193deg) 313 | brightness(85%) contrast(84%); 314 | width: 20px; 315 | } 316 | 317 | /*** Shared With Me ***/ 318 | .shared { 319 | display: flex; 320 | } 321 | .shared-project { 322 | position: relative; 323 | background: #fff; 324 | border-radius: 15px; 325 | display: grid; 326 | margin-right: 15px; 327 | padding: 10px 15px; 328 | grid-template-rows: 40px 1.5rem 1.5rem; 329 | grid-template-columns: 70px 70px; 330 | grid-template-areas: 331 | 'folder participants' 332 | 'title title' 333 | 'date date'; 334 | box-shadow: 0 6px 25px #eeeff4; 335 | } 336 | .shared-icon { 337 | align-self: center; 338 | } 339 | .shared-participants { 340 | grid-area: participants; 341 | align-self: center; 342 | } 343 | .shared-participants li { 344 | display: inline-block; 345 | margin-left: -10px; 346 | } 347 | .shared-participants li:first-child { 348 | margin-left: 0px; 349 | } 350 | .shared-participants li.more-participants { 351 | display: inline-flex; 352 | align-items: center; 353 | justify-content: center; 354 | background: #fff; 355 | border-radius: 50%; 356 | padding: 2px; 357 | width: 24px; 358 | height: 24px; 359 | position: relative; 360 | top: -9px; 361 | border: 1px solid #d0d1d7; 362 | } 363 | .shared-participants img { 364 | width: 25px; 365 | height: 25px; 366 | border-radius: 50%; 367 | border: 2px solid #fff; 368 | } 369 | .shared h3 { 370 | grid-area: title; 371 | align-self: center; 372 | } 373 | .shared .file-count { 374 | grid-area: date; 375 | align-self: center; 376 | color: #949bc0; 377 | font-size: 0.9rem; 378 | } 379 | 380 | /*** Stats (right panel) ***/ 381 | 382 | .stats { 383 | background: #f5f6fb; 384 | } 385 | .stats > * { 386 | padding: 20px 40px; 387 | } 388 | .storage { 389 | display: flex; 390 | flex-direction: column; 391 | align-items: center; 392 | } 393 | .storage h2 { 394 | align-self: flex-start; 395 | } 396 | .usage-graph { 397 | margin-bottom: 40px; 398 | position: relative; 399 | } 400 | .usage-graph .arc { 401 | position: absolute; 402 | width: 190px; 403 | top: -20px; 404 | left: -20px; 405 | fill: transparent; 406 | } 407 | .arc circle { 408 | fill: transparent; 409 | stroke-linecap: round; 410 | stroke-width: 7px; 411 | } 412 | .arc--docs { 413 | stroke-dasharray: 570.8 570.8; 414 | stroke-dashoffset: 371.02; 415 | transform: rotate(-32deg); 416 | transform-origin: center; 417 | stroke: #ffa000; 418 | } 419 | .arc--videos { 420 | stroke-dasharray: 570.8 570.8; 421 | stroke-dashoffset: 439.516; 422 | transform: rotate(176.4deg); 423 | transform-origin: center; 424 | stroke: #689ef8; 425 | } 426 | .arc--images { 427 | stroke-dasharray: 570.8 570.8; 428 | stroke-dashoffset: 492.888; 429 | transform: rotate(269deg); 430 | transform-origin: center; 431 | stroke: #49c39d; 432 | } 433 | .arc--others { 434 | stroke-dasharray: 570.8 570.8; 435 | stroke-dashoffset: 472.056; 436 | transform: rotate(104.4deg); 437 | transform-origin: center; 438 | stroke: #bbbeca; 439 | } 440 | .usage-inner { 441 | background: #fff; 442 | width: 150px; 443 | height: 150px; 444 | border-radius: 50%; 445 | display: flex; 446 | flex-direction: column; 447 | align-items: center; 448 | justify-content: center; 449 | color: #969cc1; 450 | font-size: 1.8rem; 451 | } 452 | .usage-percent { 453 | font-size: 2.5rem; 454 | color: #353a52; 455 | display: flex; 456 | align-items: center; 457 | } 458 | .usage-pct-symbol { 459 | font-size: 0.65em; 460 | padding-left: 5px; 461 | } 462 | .usage-bytes { 463 | color: #828ab6; 464 | margin-bottom: 20px; 465 | } 466 | .usage-list { 467 | width: 100%; 468 | } 469 | .usage-item { 470 | display: flex; 471 | justify-content: space-between; 472 | border-bottom: 1px solid #d0d1d7; 473 | padding-bottom: 10px; 474 | margin-bottom: 10px; 475 | } 476 | .usage-item img { 477 | margin-right: 8px; 478 | } 479 | .usage-item-content { 480 | flex: 1; 481 | color: #353a52; 482 | } 483 | .usage-item-files { 484 | color: #828ab6; 485 | } 486 | .usage-item-bytes { 487 | background: #fff; 488 | align-self: center; 489 | padding: 6px 10px; 490 | border-radius: 3px; 491 | padding-bottom: 3px; 492 | box-shadow: 0 1px 5px rgba(208, 209, 216, 0.5); 493 | } 494 | 495 | /*** User profile & actions (top right) ***/ 496 | 497 | .user-profile { 498 | display: flex; 499 | border-bottom: 1px solid #d0d1d7; 500 | margin-top: 20px; 501 | padding-bottom: 30px; 502 | } 503 | .user-profile > img { 504 | margin-right: 20px; 505 | } 506 | .user-profile .user { 507 | margin-left: auto; 508 | display: flex; 509 | align-items: center; 510 | font-size: 1.1rem; 511 | } 512 | .user-name { 513 | padding-top: 3px; 514 | margin-right: 10px; 515 | color: #363b52; 516 | } 517 | .user-name img { 518 | position: relative; 519 | top: 4px; 520 | left: -2px; 521 | } 522 | .user-avatar { 523 | border-radius: 50%; 524 | box-shadow: 0 1px 5px rgba(208, 209, 216, 0.8); 525 | } 526 | --------------------------------------------------------------------------------