You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

617 lines
14 KiB

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