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.

264 lines
7.7 KiB

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