sidebar.css 15 KB

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