github.com/fanux/shipyard@v0.0.0-20161009071005-6515ce223235/controller/static/semantic/dist/components/sidebar.css (about) 1 /*! 2 * # Semantic UI x.x - Sidebar 3 * http://github.com/semantic-org/semantic-ui/ 4 * 5 * 6 * Copyright 2014 Contributorss 7 * Released under the MIT license 8 * http://opensource.org/licenses/MIT 9 * 10 */ 11 12 13 /******************************* 14 Sidebar 15 *******************************/ 16 17 18 /* Sidebar Menu */ 19 .ui.sidebar { 20 position: fixed; 21 top: 0; 22 left: 0; 23 -webkit-backface-visibility: hidden; 24 backface-visibility: hidden; 25 -webkit-transition: none; 26 transition: none; 27 will-change: transform; 28 -webkit-transform: translate3d(0, 0, 0); 29 transform: translate3d(0, 0, 0); 30 visibility: hidden; 31 -webkit-overflow-scrolling: touch; 32 height: 100% !important; 33 border-radius: 0em !important; 34 margin: 0em !important; 35 overflow-y: auto !important; 36 z-index: 102; 37 } 38 39 /* GPU Layers for Child Elements */ 40 .ui.sidebar > * { 41 -webkit-backface-visibility: hidden; 42 backface-visibility: hidden; 43 -webkit-transform: rotateZ(0deg); 44 transform: rotateZ(0deg); 45 } 46 47 /*-------------- 48 Direction 49 ---------------*/ 50 51 .ui.left.sidebar { 52 right: auto; 53 left: 0px; 54 -webkit-transform: translate3d(-100%, 0, 0); 55 transform: translate3d(-100%, 0, 0); 56 } 57 .ui.right.sidebar { 58 right: 0px !important; 59 left: auto !important; 60 -webkit-transform: translate3d(100%, 0%, 0); 61 transform: translate3d(100%, 0%, 0); 62 } 63 .ui.top.sidebar, 64 .ui.bottom.sidebar { 65 width: 100% !important; 66 height: auto !important; 67 overflow-y: visible !important; 68 } 69 .ui.top.sidebar { 70 top: 0px !important; 71 bottom: auto !important; 72 -webkit-transform: translate3d(0, -100%, 0); 73 transform: translate3d(0, -100%, 0); 74 } 75 .ui.bottom.sidebar { 76 top: auto !important; 77 bottom: 0px !important; 78 -webkit-transform: translate3d(0, 100%, 0); 79 transform: translate3d(0, 100%, 0); 80 } 81 82 /*-------------- 83 Pushable 84 ---------------*/ 85 86 .pushable { 87 height: 100%; 88 overflow-x: hidden; 89 padding: 0em !important; 90 } 91 92 /* Whole Page */ 93 body.pushable { 94 background: #333333 !important; 95 } 96 97 /* Page Context */ 98 .pushable:not(body) { 99 -webkit-transform: translate3d(0, 0, 0); 100 transform: translate3d(0, 0, 0); 101 } 102 .pushable:not(body) > .ui.sidebar, 103 .pushable:not(body) > .fixed, 104 .pushable:not(body) > .pusher:after { 105 position: absolute; 106 } 107 108 /*-------------- 109 Fixed 110 ---------------*/ 111 112 .pushable > .fixed { 113 position: fixed; 114 -webkit-backface-visibility: hidden; 115 backface-visibility: hidden; 116 -webkit-transition: -webkit-transform 500ms ease; 117 transition: transform 500ms ease; 118 will-change: transform; 119 z-index: 101; 120 } 121 122 /*-------------- 123 Page 124 ---------------*/ 125 126 .pushable > .pusher { 127 position: relative; 128 -webkit-backface-visibility: hidden; 129 backface-visibility: hidden; 130 overflow: hidden; 131 min-height: 100%; 132 -webkit-transition: -webkit-transform 500ms ease; 133 transition: transform 500ms ease; 134 z-index: 2; 135 } 136 body.pushable > .pusher { 137 background: #f7f7f7; 138 } 139 .pushable > .pusher { 140 background: inherit; 141 } 142 143 /*-------------- 144 Dimmer 145 ---------------*/ 146 147 .pushable > .pusher:after { 148 position: fixed; 149 top: 0px; 150 right: 0px; 151 content: ''; 152 background-color: rgba(0, 0, 0, 0.4); 153 width: 0px; 154 height: 0px; 155 overflow: hidden; 156 opacity: 0; 157 -webkit-transition: -webkit-transform 500ms, opacity 500ms; 158 transition: transform 500ms, opacity 500ms; 159 will-change: opacity; 160 z-index: 1000; 161 } 162 163 /*-------------- 164 Coupling 165 ---------------*/ 166 167 .ui.sidebar.menu .item { 168 border-radius: 0em !important; 169 } 170 171 172 /******************************* 173 States 174 *******************************/ 175 176 177 /*-------------- 178 Dimmed 179 ---------------*/ 180 181 .pushable > .pusher.dimmed:after { 182 width: 100% !important; 183 height: 100% !important; 184 opacity: 1 !important; 185 } 186 187 /*-------------- 188 Animating 189 ---------------*/ 190 191 .ui.animating.sidebar { 192 visibility: visible; 193 } 194 195 /*-------------- 196 Visible 197 ---------------*/ 198 199 .ui.visible.sidebar { 200 visibility: visible; 201 -webkit-transform: translate3d(0, 0, 0); 202 transform: translate3d(0, 0, 0); 203 } 204 205 /* Shadow Direction */ 206 .ui.left.visible.sidebar, 207 .ui.right.visible.sidebar { 208 box-shadow: 0px 0px 20px rgba(39, 41, 43, 0.15); 209 } 210 .ui.top.visible.sidebar, 211 .ui.bottom.visible.sidebar { 212 box-shadow: 0px 0px 20px rgba(39, 41, 43, 0.15); 213 } 214 215 /* Visible On Load */ 216 .ui.visible.left.sidebar ~ .fixed, 217 .ui.visible.left.sidebar ~ .pusher { 218 -webkit-transform: translate3d(260px, 0, 0); 219 transform: translate3d(260px, 0, 0); 220 } 221 .ui.visible.right.sidebar ~ .fixed, 222 .ui.visible.right.sidebar ~ .pusher { 223 -webkit-transform: translate3d(-260px, 0, 0); 224 transform: translate3d(-260px, 0, 0); 225 } 226 .ui.visible.top.sidebar ~ .fixed, 227 .ui.visible.top.sidebar ~ .pusher { 228 -webkit-transform: translate3d(0, 36px, 0); 229 transform: translate3d(0, 36px, 0); 230 } 231 .ui.visible.bottom.sidebar ~ .fixed, 232 .ui.visible.bottom.sidebar ~ .pusher { 233 -webkit-transform: translate3d(0, -36px, 0); 234 transform: translate3d(0, -36px, 0); 235 } 236 237 /* opposite sides visible forces content overlay */ 238 .ui.visible.left.sidebar ~ .ui.visible.right.sidebar ~ .fixed, 239 .ui.visible.left.sidebar ~ .ui.visible.right.sidebar ~ .pusher, 240 .ui.visible.right.sidebar ~ .ui.visible.left.sidebar ~ .fixed, 241 .ui.visible.right.sidebar ~ .ui.visible.left.sidebar ~ .pusher { 242 -webkit-transform: translate3d(0, 0, 0); 243 transform: translate3d(0, 0, 0); 244 } 245 246 /*-------------- 247 iOS 248 ---------------*/ 249 250 /* 251 iOS incorrectly sizes document when content 252 is presented outside of view with 2Dtranslate 253 */ 254 html.ios { 255 overflow-x: hidden; 256 -webkit-overflow-scrolling: touch; 257 } 258 259 260 /******************************* 261 Variations 262 *******************************/ 263 264 265 /*-------------- 266 Width 267 ---------------*/ 268 269 270 /* Left / Right */ 271 .ui[class*="very thin"].left.sidebar, 272 .ui[class*="very thin"].right.sidebar { 273 width: 60px; 274 } 275 .ui.thin.left.sidebar, 276 .ui.thin.right.sidebar { 277 width: 150px; 278 } 279 .ui.left.sidebar, 280 .ui.right.sidebar { 281 width: 260px; 282 } 283 .ui.wide.left.sidebar, 284 .ui.wide.right.sidebar { 285 width: 350px; 286 } 287 .ui[class*="very wide"].left.sidebar, 288 .ui[class*="very wide"].right.sidebar { 289 width: 475px; 290 } 291 292 /* Left Visible */ 293 .ui.visible[class*="very thin"].left.sidebar ~ .fixed, 294 .ui.visible[class*="very thin"].left.sidebar ~ .pusher { 295 -webkit-transform: translate3d(60px, 0, 0); 296 transform: translate3d(60px, 0, 0); 297 } 298 .ui.visible.thin.left.sidebar ~ .fixed, 299 .ui.visible.thin.left.sidebar ~ .pusher { 300 -webkit-transform: translate3d(150px, 0, 0); 301 transform: translate3d(150px, 0, 0); 302 } 303 .ui.visible.wide.left.sidebar ~ .fixed, 304 .ui.visible.wide.left.sidebar ~ .pusher { 305 -webkit-transform: translate3d(350px, 0, 0); 306 transform: translate3d(350px, 0, 0); 307 } 308 .ui.visible[class*="very wide"].left.sidebar ~ .fixed, 309 .ui.visible[class*="very wide"].left.sidebar ~ .pusher { 310 -webkit-transform: translate3d(475px, 0, 0); 311 transform: translate3d(475px, 0, 0); 312 } 313 314 /* Right Visible */ 315 .ui.visible[class*="very thin"].right.sidebar ~ .fixed, 316 .ui.visible[class*="very thin"].right.sidebar ~ .pusher { 317 -webkit-transform: translate3d(-60px, 0, 0); 318 transform: translate3d(-60px, 0, 0); 319 } 320 .ui.visible.thin.right.sidebar ~ .fixed, 321 .ui.visible.thin.right.sidebar ~ .pusher { 322 -webkit-transform: translate3d(-150px, 0, 0); 323 transform: translate3d(-150px, 0, 0); 324 } 325 .ui.visible.wide.right.sidebar ~ .fixed, 326 .ui.visible.wide.right.sidebar ~ .pusher { 327 -webkit-transform: translate3d(-350px, 0, 0); 328 transform: translate3d(-350px, 0, 0); 329 } 330 .ui.visible[class*="very wide"].right.sidebar ~ .fixed, 331 .ui.visible[class*="very wide"].right.sidebar ~ .pusher { 332 -webkit-transform: translate3d(-475px, 0, 0); 333 transform: translate3d(-475px, 0, 0); 334 } 335 336 337 /******************************* 338 Animations 339 *******************************/ 340 341 342 /*-------------- 343 Overlay 344 ---------------*/ 345 346 347 /* Set-up */ 348 .ui.overlay.sidebar { 349 z-index: 102; 350 } 351 352 /* Initial */ 353 .ui.left.overlay.sidebar { 354 -webkit-transform: translate3d(-100%, 0%, 0); 355 transform: translate3d(-100%, 0%, 0); 356 } 357 .ui.right.overlay.sidebar { 358 -webkit-transform: translate3d(100%, 0%, 0); 359 transform: translate3d(100%, 0%, 0); 360 } 361 .ui.top.overlay.sidebar { 362 -webkit-transform: translate3d(0%, -100%, 0); 363 transform: translate3d(0%, -100%, 0); 364 } 365 .ui.bottom.overlay.sidebar { 366 -webkit-transform: translate3d(0%, 100%, 0); 367 transform: translate3d(0%, 100%, 0); 368 } 369 370 /* Animation */ 371 .animating.ui.overlay.sidebar, 372 .ui.visible.overlay.sidebar { 373 -webkit-transition: -webkit-transform 500ms ease; 374 transition: transform 500ms ease; 375 } 376 377 /* End - Sidebar */ 378 .ui.visible.left.overlay.sidebar { 379 -webkit-transform: translate3d(0%, 0%, 0); 380 transform: translate3d(0%, 0%, 0); 381 } 382 .ui.visible.right.overlay.sidebar { 383 -webkit-transform: translate3d(0%, 0%, 0); 384 transform: translate3d(0%, 0%, 0); 385 } 386 .ui.visible.top.overlay.sidebar { 387 -webkit-transform: translate3d(0%, 0%, 0); 388 transform: translate3d(0%, 0%, 0); 389 } 390 .ui.visible.bottom.overlay.sidebar { 391 -webkit-transform: translate3d(0%, 0%, 0); 392 transform: translate3d(0%, 0%, 0); 393 } 394 395 /* End - Pusher */ 396 .ui.visible.overlay.sidebar ~ .fixed, 397 .ui.visible.overlay.sidebar ~ .pusher { 398 -webkit-transform: none !important; 399 -ms-transform: none !important; 400 transform: none !important; 401 } 402 403 /*-------------- 404 Push 405 ---------------*/ 406 407 408 /* Initial */ 409 .ui.push.sidebar { 410 -webkit-transition: -webkit-transform 500ms ease; 411 transition: transform 500ms ease; 412 z-index: 102; 413 } 414 415 /* Sidebar - Initial */ 416 .ui.left.push.sidebar { 417 -webkit-transform: translate3d(-100%, 0, 0); 418 transform: translate3d(-100%, 0, 0); 419 } 420 .ui.right.push.sidebar { 421 -webkit-transform: translate3d(100%, 0, 0); 422 transform: translate3d(100%, 0, 0); 423 } 424 .ui.top.push.sidebar { 425 -webkit-transform: translate3d(0%, -100%, 0); 426 transform: translate3d(0%, -100%, 0); 427 } 428 .ui.bottom.push.sidebar { 429 -webkit-transform: translate3d(0%, 100%, 0); 430 transform: translate3d(0%, 100%, 0); 431 } 432 433 /* End */ 434 .ui.visible.push.sidebar { 435 -webkit-transform: translate3d(0%, 0, 0); 436 transform: translate3d(0%, 0, 0); 437 } 438 439 /*-------------- 440 Uncover 441 ---------------*/ 442 443 444 /* Initial */ 445 .ui.uncover.sidebar { 446 -webkit-transform: translate3d(0, 0, 0); 447 transform: translate3d(0, 0, 0); 448 z-index: 1; 449 } 450 451 /* End */ 452 .ui.visible.uncover.sidebar { 453 -webkit-transform: translate3d(0, 0, 0); 454 transform: translate3d(0, 0, 0); 455 -webkit-transition: -webkit-transform 500ms ease; 456 transition: transform 500ms ease; 457 } 458 459 /*-------------- 460 Slide Along 461 ---------------*/ 462 463 464 /* Initial */ 465 .ui.slide.along.sidebar { 466 z-index: 1; 467 } 468 469 /* Sidebar - Initial */ 470 .ui.left.slide.along.sidebar { 471 -webkit-transform: translate3d(-50%, 0, 0); 472 transform: translate3d(-50%, 0, 0); 473 } 474 .ui.right.slide.along.sidebar { 475 -webkit-transform: translate3d(50%, 0, 0); 476 transform: translate3d(50%, 0, 0); 477 } 478 .ui.top.slide.along.sidebar { 479 -webkit-transform: translate3d(0, -50%, 0); 480 transform: translate3d(0, -50%, 0); 481 } 482 .ui.bottom.slide.along.sidebar { 483 -webkit-transform: translate3d(0%, 50%, 0); 484 transform: translate3d(0%, 50%, 0); 485 } 486 487 /* Animation */ 488 .ui.animating.slide.along.sidebar { 489 -webkit-transition: -webkit-transform 500ms ease; 490 transition: transform 500ms ease; 491 } 492 493 /* End */ 494 .ui.visible.slide.along.sidebar { 495 -webkit-transform: translate3d(0%, 0, 0); 496 transform: translate3d(0%, 0, 0); 497 } 498 499 /*-------------- 500 Slide Out 501 ---------------*/ 502 503 504 /* Initial */ 505 .ui.slide.out.sidebar { 506 z-index: 1; 507 } 508 509 /* Sidebar - Initial */ 510 .ui.left.slide.out.sidebar { 511 -webkit-transform: translate3d(50%, 0, 0); 512 transform: translate3d(50%, 0, 0); 513 } 514 .ui.right.slide.out.sidebar { 515 -webkit-transform: translate3d(-50%, 0, 0); 516 transform: translate3d(-50%, 0, 0); 517 } 518 .ui.top.slide.out.sidebar { 519 -webkit-transform: translate3d(0%, 50%, 0); 520 transform: translate3d(0%, 50%, 0); 521 } 522 .ui.bottom.slide.out.sidebar { 523 -webkit-transform: translate3d(0%, -50%, 0); 524 transform: translate3d(0%, -50%, 0); 525 } 526 527 /* Animation */ 528 .ui.animating.slide.out.sidebar { 529 -webkit-transition: -webkit-transform 500ms ease; 530 transition: transform 500ms ease; 531 } 532 533 /* End */ 534 .ui.visible.slide.out.sidebar { 535 -webkit-transform: translate3d(0%, 0, 0); 536 transform: translate3d(0%, 0, 0); 537 } 538 539 /*-------------- 540 Scale Down 541 ---------------*/ 542 543 544 /* Initial */ 545 .ui.scale.down.sidebar { 546 -webkit-transition: -webkit-transform 500ms ease; 547 transition: transform 500ms ease; 548 z-index: 102; 549 } 550 551 /* Sidebar - Initial */ 552 .ui.left.scale.down.sidebar { 553 -webkit-transform: translate3d(-100%, 0, 0); 554 transform: translate3d(-100%, 0, 0); 555 } 556 .ui.right.scale.down.sidebar { 557 -webkit-transform: translate3d(100%, 0, 0); 558 transform: translate3d(100%, 0, 0); 559 } 560 .ui.top.scale.down.sidebar { 561 -webkit-transform: translate3d(0%, -100%, 0); 562 transform: translate3d(0%, -100%, 0); 563 } 564 .ui.bottom.scale.down.sidebar { 565 -webkit-transform: translate3d(0%, 100%, 0); 566 transform: translate3d(0%, 100%, 0); 567 } 568 569 /* Pusher - Initial */ 570 .ui.scale.down.left.sidebar ~ .pusher { 571 -webkit-transform-origin: 75% 50%; 572 -ms-transform-origin: 75% 50%; 573 transform-origin: 75% 50%; 574 } 575 .ui.scale.down.right.sidebar ~ .pusher { 576 -webkit-transform-origin: 25% 50%; 577 -ms-transform-origin: 25% 50%; 578 transform-origin: 25% 50%; 579 } 580 .ui.scale.down.top.sidebar ~ .pusher { 581 -webkit-transform-origin: 50% 75%; 582 -ms-transform-origin: 50% 75%; 583 transform-origin: 50% 75%; 584 } 585 .ui.scale.down.bottom.sidebar ~ .pusher { 586 -webkit-transform-origin: 50% 25%; 587 -ms-transform-origin: 50% 25%; 588 transform-origin: 50% 25%; 589 } 590 591 /* Animation */ 592 .ui.animating.scale.down > .visible.ui.sidebar { 593 -webkit-transition: -webkit-transform 500ms ease; 594 transition: transform 500ms ease; 595 } 596 .ui.visible.scale.down.sidebar ~ .pusher, 597 .ui.animating.scale.down.sidebar ~ .pusher { 598 display: block !important; 599 width: 100%; 600 height: 100%; 601 overflow: hidden; 602 } 603 604 /* End */ 605 .ui.visible.scale.down.sidebar { 606 -webkit-transform: translate3d(0, 0, 0); 607 transform: translate3d(0, 0, 0); 608 } 609 .ui.visible.scale.down.sidebar ~ .pusher { 610 -webkit-transform: scale(0.75); 611 -ms-transform: scale(0.75); 612 transform: scale(0.75); 613 } 614 615 616 /******************************* 617 Theme Overrides 618 *******************************/ 619 620 621 622 /******************************* 623 Site Overrides 624 *******************************/ 625