divider.css 8.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297
  1. /*!
  2. * # Fomantic-UI - Divider
  3. * http://github.com/fomantic/Fomantic-UI/
  4. *
  5. *
  6. * Released under the MIT license
  7. * http://opensource.org/licenses/MIT
  8. *
  9. */
  10. /*******************************
  11. Divider
  12. *******************************/
  13. .ui.divider {
  14. margin: 1rem 0;
  15. line-height: 1;
  16. height: 0;
  17. font-weight: bold;
  18. text-transform: uppercase;
  19. letter-spacing: 0.05em;
  20. color: rgba(0, 0, 0, 0.85);
  21. -webkit-user-select: none;
  22. -moz-user-select: none;
  23. -ms-user-select: none;
  24. user-select: none;
  25. -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  26. }
  27. /*--------------
  28. Basic
  29. ---------------*/
  30. .ui.divider:not(.vertical):not(.horizontal) {
  31. border-top: 1px solid rgba(34, 36, 38, 0.15);
  32. border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  33. }
  34. /*--------------
  35. Coupling
  36. ---------------*/
  37. /* Allow divider between each column row */
  38. .ui.grid > .column + .divider,
  39. .ui.grid > .row > .column + .divider {
  40. left: auto;
  41. }
  42. /*--------------
  43. Horizontal
  44. ---------------*/
  45. .ui.horizontal.divider {
  46. display: table;
  47. white-space: nowrap;
  48. height: auto;
  49. margin: '';
  50. line-height: 1;
  51. text-align: center;
  52. }
  53. .ui.horizontal.divider:before,
  54. .ui.horizontal.divider:after {
  55. content: '';
  56. display: table-cell;
  57. position: relative;
  58. top: 50%;
  59. width: 50%;
  60. background-repeat: no-repeat;
  61. }
  62. .ui.horizontal.divider:before {
  63. background-position: right 1em top 50%;
  64. }
  65. .ui.horizontal.divider:after {
  66. background-position: left 1em top 50%;
  67. }
  68. /*--------------
  69. Vertical
  70. ---------------*/
  71. .ui.vertical.divider {
  72. position: absolute;
  73. z-index: 2;
  74. top: 50%;
  75. left: 50%;
  76. margin: 0;
  77. padding: 0;
  78. width: auto;
  79. height: 50%;
  80. line-height: 0;
  81. text-align: center;
  82. -webkit-transform: translateX(-50%);
  83. transform: translateX(-50%);
  84. }
  85. .ui.vertical.divider:before,
  86. .ui.vertical.divider:after {
  87. position: absolute;
  88. left: 50%;
  89. content: '';
  90. z-index: 3;
  91. border-left: 1px solid rgba(34, 36, 38, 0.15);
  92. border-right: 1px solid rgba(255, 255, 255, 0.1);
  93. width: 0;
  94. height: calc(100% - 1rem);
  95. }
  96. .ui.vertical.divider:before {
  97. top: -100%;
  98. }
  99. .ui.vertical.divider:after {
  100. top: auto;
  101. bottom: 0;
  102. }
  103. /* Inside grid */
  104. @media only screen and (max-width: 767.98px) {
  105. .ui.stackable.grid .ui.vertical.divider,
  106. .ui.grid .stackable.row .ui.vertical.divider {
  107. display: table;
  108. white-space: nowrap;
  109. height: auto;
  110. margin: '';
  111. overflow: hidden;
  112. line-height: 1;
  113. text-align: center;
  114. position: static;
  115. top: 0;
  116. left: 0;
  117. -webkit-transform: none;
  118. transform: none;
  119. }
  120. .ui.stackable.grid .ui.vertical.divider:before,
  121. .ui.grid .stackable.row .ui.vertical.divider:before,
  122. .ui.stackable.grid .ui.vertical.divider:after,
  123. .ui.grid .stackable.row .ui.vertical.divider:after {
  124. left: 0;
  125. border-left: none;
  126. border-right: none;
  127. content: '';
  128. display: table-cell;
  129. position: relative;
  130. top: 50%;
  131. width: 50%;
  132. background-repeat: no-repeat;
  133. }
  134. .ui.stackable.grid .ui.vertical.divider:before,
  135. .ui.grid .stackable.row .ui.vertical.divider:before {
  136. background-position: right 1em top 50%;
  137. }
  138. .ui.stackable.grid .ui.vertical.divider:after,
  139. .ui.grid .stackable.row .ui.vertical.divider:after {
  140. background-position: left 1em top 50%;
  141. }
  142. }
  143. /*--------------
  144. Icon
  145. ---------------*/
  146. .ui.divider > .icon {
  147. margin: 0;
  148. font-size: 1rem;
  149. height: 1em;
  150. vertical-align: middle;
  151. }
  152. /*--------------
  153. Header
  154. ---------------*/
  155. .ui.horizontal.divider[class*="left aligned"]:before {
  156. display: none;
  157. }
  158. .ui.horizontal.divider[class*="left aligned"]:after {
  159. width: 100%;
  160. }
  161. .ui.horizontal.divider[class*="right aligned"]:before {
  162. width: 100%;
  163. }
  164. .ui.horizontal.divider[class*="right aligned"]:after {
  165. display: none;
  166. }
  167. /*******************************
  168. Variations
  169. *******************************/
  170. /*--------------
  171. Hidden
  172. ---------------*/
  173. .ui.hidden.divider {
  174. border-color: transparent !important;
  175. }
  176. .ui.hidden.divider:before,
  177. .ui.hidden.divider:after {
  178. display: none;
  179. }
  180. /*--------------
  181. Inverted
  182. ---------------*/
  183. .ui.divider.inverted,
  184. .ui.vertical.inverted.divider,
  185. .ui.horizontal.inverted.divider {
  186. color: #FFFFFF;
  187. }
  188. .ui.divider.inverted,
  189. .ui.divider.inverted:after,
  190. .ui.divider.inverted:before {
  191. border-top-color: rgba(34, 36, 38, 0.15) !important;
  192. border-left-color: rgba(34, 36, 38, 0.15) !important;
  193. border-bottom-color: rgba(255, 255, 255, 0.15) !important;
  194. border-right-color: rgba(255, 255, 255, 0.15) !important;
  195. }
  196. /*--------------
  197. Fitted
  198. ---------------*/
  199. .ui.fitted.divider {
  200. margin: 0;
  201. }
  202. /*--------------
  203. Clearing
  204. ---------------*/
  205. .ui.clearing.divider {
  206. clear: both;
  207. }
  208. /*--------------
  209. Section
  210. ---------------*/
  211. .ui.section.divider {
  212. margin-top: 2rem;
  213. margin-bottom: 2rem;
  214. }
  215. /*--------------
  216. Sizes
  217. ---------------*/
  218. .ui.divider {
  219. font-size: 1rem;
  220. }
  221. .ui.mini.divider {
  222. font-size: 0.78571429rem;
  223. }
  224. .ui.tiny.divider {
  225. font-size: 0.85714286rem;
  226. }
  227. .ui.small.divider {
  228. font-size: 0.92857143rem;
  229. }
  230. .ui.large.divider {
  231. font-size: 1.14285714rem;
  232. }
  233. .ui.big.divider {
  234. font-size: 1.28571429rem;
  235. }
  236. .ui.huge.divider {
  237. font-size: 1.42857143rem;
  238. }
  239. .ui.massive.divider {
  240. font-size: 1.71428571rem;
  241. }
  242. /*******************************
  243. Theme Overrides
  244. *******************************/
  245. .ui.horizontal.divider:before,
  246. .ui.horizontal.divider:after {
  247. background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABaAAAAACCAYAAACuTHuKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1OThBRDY4OUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1OThBRDY4QUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjU5OEFENjg3Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjU5OEFENjg4Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+VU513gAAADVJREFUeNrs0DENACAQBDBIWLGBJQby/mUcJn5sJXQmOQMAAAAAAJqt+2prAAAAAACg2xdgANk6BEVuJgyMAAAAAElFTkSuQmCC');
  248. }
  249. @media only screen and (max-width: 767px) {
  250. .ui.stackable.grid .ui.vertical.divider:before,
  251. .ui.grid .stackable.row .ui.vertical.divider:before,
  252. .ui.stackable.grid .ui.vertical.divider:after,
  253. .ui.grid .stackable.row .ui.vertical.divider:after {
  254. background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABaAAAAACCAYAAACuTHuKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1OThBRDY4OUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1OThBRDY4QUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjU5OEFENjg3Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjU5OEFENjg4Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+VU513gAAADVJREFUeNrs0DENACAQBDBIWLGBJQby/mUcJn5sJXQmOQMAAAAAAJqt+2prAAAAAACg2xdgANk6BEVuJgyMAAAAAElFTkSuQmCC');
  255. }
  256. }
  257. /*******************************
  258. Site Overrides
  259. *******************************/