sidebar.css 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628
  1. /*!
  2. * # Semantic UI 2.4.2 - 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. -webkit-box-shadow: 0px 0px 20px rgba(34, 36, 38, 0.15);
  180. box-shadow: 0px 0px 20px rgba(34, 36, 38, 0.15);
  181. }
  182. .ui.top.visible.sidebar,
  183. .ui.bottom.visible.sidebar {
  184. -webkit-box-shadow: 0px 0px 20px rgba(34, 36, 38, 0.15);
  185. box-shadow: 0px 0px 20px rgba(34, 36, 38, 0.15);
  186. }
  187. /* Visible On Load */
  188. .ui.visible.left.sidebar ~ .fixed,
  189. .ui.visible.left.sidebar ~ .pusher {
  190. -webkit-transform: translate3d(260px, 0, 0);
  191. transform: translate3d(260px, 0, 0);
  192. }
  193. .ui.visible.right.sidebar ~ .fixed,
  194. .ui.visible.right.sidebar ~ .pusher {
  195. -webkit-transform: translate3d(-260px, 0, 0);
  196. transform: translate3d(-260px, 0, 0);
  197. }
  198. .ui.visible.top.sidebar ~ .fixed,
  199. .ui.visible.top.sidebar ~ .pusher {
  200. -webkit-transform: translate3d(0, 36px, 0);
  201. transform: translate3d(0, 36px, 0);
  202. }
  203. .ui.visible.bottom.sidebar ~ .fixed,
  204. .ui.visible.bottom.sidebar ~ .pusher {
  205. -webkit-transform: translate3d(0, -36px, 0);
  206. transform: translate3d(0, -36px, 0);
  207. }
  208. /* opposite sides visible forces content overlay */
  209. .ui.visible.left.sidebar ~ .ui.visible.right.sidebar ~ .fixed,
  210. .ui.visible.left.sidebar ~ .ui.visible.right.sidebar ~ .pusher,
  211. .ui.visible.right.sidebar ~ .ui.visible.left.sidebar ~ .fixed,
  212. .ui.visible.right.sidebar ~ .ui.visible.left.sidebar ~ .pusher {
  213. -webkit-transform: translate3d(0, 0, 0);
  214. transform: translate3d(0, 0, 0);
  215. }
  216. /*--------------
  217. iOS
  218. ---------------*/
  219. /*******************************
  220. Variations
  221. *******************************/
  222. /*--------------
  223. Width
  224. ---------------*/
  225. /* Left / Right */
  226. .ui.thin.left.sidebar,
  227. .ui.thin.right.sidebar {
  228. width: 150px;
  229. }
  230. .ui[class*="very thin"].left.sidebar,
  231. .ui[class*="very thin"].right.sidebar {
  232. width: 60px;
  233. }
  234. .ui.left.sidebar,
  235. .ui.right.sidebar {
  236. width: 260px;
  237. }
  238. .ui.wide.left.sidebar,
  239. .ui.wide.right.sidebar {
  240. width: 350px;
  241. }
  242. .ui[class*="very wide"].left.sidebar,
  243. .ui[class*="very wide"].right.sidebar {
  244. width: 475px;
  245. }
  246. /* Left Visible */
  247. .ui.visible.thin.left.sidebar ~ .fixed,
  248. .ui.visible.thin.left.sidebar ~ .pusher {
  249. -webkit-transform: translate3d(150px, 0, 0);
  250. transform: translate3d(150px, 0, 0);
  251. }
  252. .ui.visible[class*="very thin"].left.sidebar ~ .fixed,
  253. .ui.visible[class*="very thin"].left.sidebar ~ .pusher {
  254. -webkit-transform: translate3d(60px, 0, 0);
  255. transform: translate3d(60px, 0, 0);
  256. }
  257. .ui.visible.wide.left.sidebar ~ .fixed,
  258. .ui.visible.wide.left.sidebar ~ .pusher {
  259. -webkit-transform: translate3d(350px, 0, 0);
  260. transform: translate3d(350px, 0, 0);
  261. }
  262. .ui.visible[class*="very wide"].left.sidebar ~ .fixed,
  263. .ui.visible[class*="very wide"].left.sidebar ~ .pusher {
  264. -webkit-transform: translate3d(475px, 0, 0);
  265. transform: translate3d(475px, 0, 0);
  266. }
  267. /* Right Visible */
  268. .ui.visible.thin.right.sidebar ~ .fixed,
  269. .ui.visible.thin.right.sidebar ~ .pusher {
  270. -webkit-transform: translate3d(-150px, 0, 0);
  271. transform: translate3d(-150px, 0, 0);
  272. }
  273. .ui.visible[class*="very thin"].right.sidebar ~ .fixed,
  274. .ui.visible[class*="very thin"].right.sidebar ~ .pusher {
  275. -webkit-transform: translate3d(-60px, 0, 0);
  276. transform: translate3d(-60px, 0, 0);
  277. }
  278. .ui.visible.wide.right.sidebar ~ .fixed,
  279. .ui.visible.wide.right.sidebar ~ .pusher {
  280. -webkit-transform: translate3d(-350px, 0, 0);
  281. transform: translate3d(-350px, 0, 0);
  282. }
  283. .ui.visible[class*="very wide"].right.sidebar ~ .fixed,
  284. .ui.visible[class*="very wide"].right.sidebar ~ .pusher {
  285. -webkit-transform: translate3d(-475px, 0, 0);
  286. transform: translate3d(-475px, 0, 0);
  287. }
  288. /*******************************
  289. Animations
  290. *******************************/
  291. /*--------------
  292. Overlay
  293. ---------------*/
  294. /* Set-up */
  295. .ui.overlay.sidebar {
  296. z-index: 102;
  297. }
  298. /* Initial */
  299. .ui.left.overlay.sidebar {
  300. -webkit-transform: translate3d(-100%, 0%, 0);
  301. transform: translate3d(-100%, 0%, 0);
  302. }
  303. .ui.right.overlay.sidebar {
  304. -webkit-transform: translate3d(100%, 0%, 0);
  305. transform: translate3d(100%, 0%, 0);
  306. }
  307. .ui.top.overlay.sidebar {
  308. -webkit-transform: translate3d(0%, -100%, 0);
  309. transform: translate3d(0%, -100%, 0);
  310. }
  311. .ui.bottom.overlay.sidebar {
  312. -webkit-transform: translate3d(0%, 100%, 0);
  313. transform: translate3d(0%, 100%, 0);
  314. }
  315. /* Animation */
  316. .animating.ui.overlay.sidebar,
  317. .ui.visible.overlay.sidebar {
  318. -webkit-transition: -webkit-transform 500ms ease;
  319. transition: -webkit-transform 500ms ease;
  320. transition: transform 500ms ease;
  321. transition: transform 500ms ease, -webkit-transform 500ms ease;
  322. }
  323. /* End - Sidebar */
  324. .ui.visible.left.overlay.sidebar {
  325. -webkit-transform: translate3d(0%, 0%, 0);
  326. transform: translate3d(0%, 0%, 0);
  327. }
  328. .ui.visible.right.overlay.sidebar {
  329. -webkit-transform: translate3d(0%, 0%, 0);
  330. transform: translate3d(0%, 0%, 0);
  331. }
  332. .ui.visible.top.overlay.sidebar {
  333. -webkit-transform: translate3d(0%, 0%, 0);
  334. transform: translate3d(0%, 0%, 0);
  335. }
  336. .ui.visible.bottom.overlay.sidebar {
  337. -webkit-transform: translate3d(0%, 0%, 0);
  338. transform: translate3d(0%, 0%, 0);
  339. }
  340. /* End - Pusher */
  341. .ui.visible.overlay.sidebar ~ .fixed,
  342. .ui.visible.overlay.sidebar ~ .pusher {
  343. -webkit-transform: none !important;
  344. transform: none !important;
  345. }
  346. /*--------------
  347. Push
  348. ---------------*/
  349. /* Initial */
  350. .ui.push.sidebar {
  351. -webkit-transition: -webkit-transform 500ms ease;
  352. transition: -webkit-transform 500ms ease;
  353. transition: transform 500ms ease;
  354. transition: transform 500ms ease, -webkit-transform 500ms ease;
  355. z-index: 102;
  356. }
  357. /* Sidebar - Initial */
  358. .ui.left.push.sidebar {
  359. -webkit-transform: translate3d(-100%, 0, 0);
  360. transform: translate3d(-100%, 0, 0);
  361. }
  362. .ui.right.push.sidebar {
  363. -webkit-transform: translate3d(100%, 0, 0);
  364. transform: translate3d(100%, 0, 0);
  365. }
  366. .ui.top.push.sidebar {
  367. -webkit-transform: translate3d(0%, -100%, 0);
  368. transform: translate3d(0%, -100%, 0);
  369. }
  370. .ui.bottom.push.sidebar {
  371. -webkit-transform: translate3d(0%, 100%, 0);
  372. transform: translate3d(0%, 100%, 0);
  373. }
  374. /* End */
  375. .ui.visible.push.sidebar {
  376. -webkit-transform: translate3d(0%, 0, 0);
  377. transform: translate3d(0%, 0, 0);
  378. }
  379. /*--------------
  380. Uncover
  381. ---------------*/
  382. /* Initial */
  383. .ui.uncover.sidebar {
  384. -webkit-transform: translate3d(0, 0, 0);
  385. transform: translate3d(0, 0, 0);
  386. z-index: 1;
  387. }
  388. /* End */
  389. .ui.visible.uncover.sidebar {
  390. -webkit-transform: translate3d(0, 0, 0);
  391. transform: translate3d(0, 0, 0);
  392. -webkit-transition: -webkit-transform 500ms ease;
  393. transition: -webkit-transform 500ms ease;
  394. transition: transform 500ms ease;
  395. transition: transform 500ms ease, -webkit-transform 500ms ease;
  396. }
  397. /*--------------
  398. Slide Along
  399. ---------------*/
  400. /* Initial */
  401. .ui.slide.along.sidebar {
  402. z-index: 1;
  403. }
  404. /* Sidebar - Initial */
  405. .ui.left.slide.along.sidebar {
  406. -webkit-transform: translate3d(-50%, 0, 0);
  407. transform: translate3d(-50%, 0, 0);
  408. }
  409. .ui.right.slide.along.sidebar {
  410. -webkit-transform: translate3d(50%, 0, 0);
  411. transform: translate3d(50%, 0, 0);
  412. }
  413. .ui.top.slide.along.sidebar {
  414. -webkit-transform: translate3d(0, -50%, 0);
  415. transform: translate3d(0, -50%, 0);
  416. }
  417. .ui.bottom.slide.along.sidebar {
  418. -webkit-transform: translate3d(0%, 50%, 0);
  419. transform: translate3d(0%, 50%, 0);
  420. }
  421. /* Animation */
  422. .ui.animating.slide.along.sidebar {
  423. -webkit-transition: -webkit-transform 500ms ease;
  424. transition: -webkit-transform 500ms ease;
  425. transition: transform 500ms ease;
  426. transition: transform 500ms ease, -webkit-transform 500ms ease;
  427. }
  428. /* End */
  429. .ui.visible.slide.along.sidebar {
  430. -webkit-transform: translate3d(0%, 0, 0);
  431. transform: translate3d(0%, 0, 0);
  432. }
  433. /*--------------
  434. Slide Out
  435. ---------------*/
  436. /* Initial */
  437. .ui.slide.out.sidebar {
  438. z-index: 1;
  439. }
  440. /* Sidebar - Initial */
  441. .ui.left.slide.out.sidebar {
  442. -webkit-transform: translate3d(50%, 0, 0);
  443. transform: translate3d(50%, 0, 0);
  444. }
  445. .ui.right.slide.out.sidebar {
  446. -webkit-transform: translate3d(-50%, 0, 0);
  447. transform: translate3d(-50%, 0, 0);
  448. }
  449. .ui.top.slide.out.sidebar {
  450. -webkit-transform: translate3d(0%, 50%, 0);
  451. transform: translate3d(0%, 50%, 0);
  452. }
  453. .ui.bottom.slide.out.sidebar {
  454. -webkit-transform: translate3d(0%, -50%, 0);
  455. transform: translate3d(0%, -50%, 0);
  456. }
  457. /* Animation */
  458. .ui.animating.slide.out.sidebar {
  459. -webkit-transition: -webkit-transform 500ms ease;
  460. transition: -webkit-transform 500ms ease;
  461. transition: transform 500ms ease;
  462. transition: transform 500ms ease, -webkit-transform 500ms ease;
  463. }
  464. /* End */
  465. .ui.visible.slide.out.sidebar {
  466. -webkit-transform: translate3d(0%, 0, 0);
  467. transform: translate3d(0%, 0, 0);
  468. }
  469. /*--------------
  470. Scale Down
  471. ---------------*/
  472. /* Initial */
  473. .ui.scale.down.sidebar {
  474. -webkit-transition: -webkit-transform 500ms ease;
  475. transition: -webkit-transform 500ms ease;
  476. transition: transform 500ms ease;
  477. transition: transform 500ms ease, -webkit-transform 500ms ease;
  478. z-index: 102;
  479. }
  480. /* Sidebar - Initial */
  481. .ui.left.scale.down.sidebar {
  482. -webkit-transform: translate3d(-100%, 0, 0);
  483. transform: translate3d(-100%, 0, 0);
  484. }
  485. .ui.right.scale.down.sidebar {
  486. -webkit-transform: translate3d(100%, 0, 0);
  487. transform: translate3d(100%, 0, 0);
  488. }
  489. .ui.top.scale.down.sidebar {
  490. -webkit-transform: translate3d(0%, -100%, 0);
  491. transform: translate3d(0%, -100%, 0);
  492. }
  493. .ui.bottom.scale.down.sidebar {
  494. -webkit-transform: translate3d(0%, 100%, 0);
  495. transform: translate3d(0%, 100%, 0);
  496. }
  497. /* Pusher - Initial */
  498. .ui.scale.down.left.sidebar ~ .pusher {
  499. -webkit-transform-origin: 75% 50%;
  500. transform-origin: 75% 50%;
  501. }
  502. .ui.scale.down.right.sidebar ~ .pusher {
  503. -webkit-transform-origin: 25% 50%;
  504. transform-origin: 25% 50%;
  505. }
  506. .ui.scale.down.top.sidebar ~ .pusher {
  507. -webkit-transform-origin: 50% 75%;
  508. transform-origin: 50% 75%;
  509. }
  510. .ui.scale.down.bottom.sidebar ~ .pusher {
  511. -webkit-transform-origin: 50% 25%;
  512. transform-origin: 50% 25%;
  513. }
  514. /* Animation */
  515. .ui.animating.scale.down > .visible.ui.sidebar {
  516. -webkit-transition: -webkit-transform 500ms ease;
  517. transition: -webkit-transform 500ms ease;
  518. transition: transform 500ms ease;
  519. transition: transform 500ms ease, -webkit-transform 500ms ease;
  520. }
  521. .ui.visible.scale.down.sidebar ~ .pusher,
  522. .ui.animating.scale.down.sidebar ~ .pusher {
  523. display: block !important;
  524. width: 100%;
  525. height: 100%;
  526. overflow: hidden !important;
  527. }
  528. /* End */
  529. .ui.visible.scale.down.sidebar {
  530. -webkit-transform: translate3d(0, 0, 0);
  531. transform: translate3d(0, 0, 0);
  532. }
  533. .ui.visible.scale.down.sidebar ~ .pusher {
  534. -webkit-transform: scale(0.75);
  535. transform: scale(0.75);
  536. }
  537. /*******************************
  538. Theme Overrides
  539. *******************************/
  540. /*******************************
  541. Site Overrides
  542. *******************************/