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