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.

260 lines
7.6 KiB

  1. /*!
  2. * # Semantic UI 2.0.0 - 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. .ui.grid > .ui.divider {
  39. font-size: 1rem;
  40. }
  41. /*--------------
  42. Horizontal
  43. ---------------*/
  44. .ui.horizontal.divider {
  45. display: table;
  46. white-space: nowrap;
  47. height: auto;
  48. margin: '';
  49. overflow: hidden;
  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: 0rem;
  77. padding: 0em;
  78. width: auto;
  79. height: 50%;
  80. line-height: 0em;
  81. text-align: center;
  82. -webkit-transform: translateX(-50%);
  83. -ms-transform: translateX(-50%);
  84. transform: translateX(-50%);
  85. }
  86. .ui.vertical.divider:before,
  87. .ui.vertical.divider:after {
  88. position: absolute;
  89. left: 50%;
  90. content: '';
  91. z-index: 3;
  92. border-left: 1px solid rgba(34, 36, 38, 0.15);
  93. border-right: 1px solid rgba(255, 255, 255, 0.1);
  94. width: 0%;
  95. height: calc(100% - 1rem );
  96. }
  97. .ui.vertical.divider:before {
  98. top: -100%;
  99. }
  100. .ui.vertical.divider:after {
  101. top: auto;
  102. bottom: 0px;
  103. }
  104. /* Inside grid */
  105. @media only screen and (max-width: 767px) {
  106. .ui.stackable.grid .ui.vertical.divider,
  107. .ui.grid .stackable.row .ui.vertical.divider {
  108. display: table;
  109. white-space: nowrap;
  110. height: auto;
  111. margin: '';
  112. overflow: hidden;
  113. line-height: 1;
  114. text-align: center;
  115. position: static;
  116. top: 0;
  117. left: 0;
  118. -webkit-transform: none;
  119. -ms-transform: none;
  120. transform: none;
  121. }
  122. .ui.stackable.grid .ui.vertical.divider:before,
  123. .ui.grid .stackable.row .ui.vertical.divider:before,
  124. .ui.stackable.grid .ui.vertical.divider:after,
  125. .ui.grid .stackable.row .ui.vertical.divider:after {
  126. position: static;
  127. left: 0;
  128. border-left: none;
  129. content: '';
  130. display: table-cell;
  131. position: relative;
  132. top: 50%;
  133. width: 50%;
  134. background-repeat: no-repeat;
  135. }
  136. .ui.stackable.grid .ui.vertical.divider:before,
  137. .ui.grid .stackable.row .ui.vertical.divider:before {
  138. background-position: right 1em top 50%;
  139. }
  140. .ui.stackable.grid .ui.vertical.divider:after,
  141. .ui.grid .stackable.row .ui.vertical.divider:after {
  142. background-position: left 1em top 50%;
  143. }
  144. }
  145. /*--------------
  146. Icon
  147. ---------------*/
  148. .ui.divider > .icon {
  149. margin: 0rem;
  150. font-size: 1rem;
  151. height: 1em;
  152. vertical-align: middle;
  153. }
  154. /*******************************
  155. Variations
  156. *******************************/
  157. /*--------------
  158. Hidden
  159. ---------------*/
  160. .ui.hidden.divider {
  161. border-color: transparent !important;
  162. }
  163. .ui.hidden.divider:before,
  164. .ui.hidden.divider:after {
  165. display: none;
  166. }
  167. /*--------------
  168. Inverted
  169. ---------------*/
  170. .ui.divider.inverted,
  171. .ui.vertical.inverted.divider,
  172. .ui.horizontal.inverted.divider {
  173. color: #ffffff;
  174. }
  175. .ui.divider.inverted,
  176. .ui.divider.inverted:after,
  177. .ui.divider.inverted:before {
  178. border-top-color: rgba(34, 36, 38, 0.15) !important;
  179. border-left-color: rgba(34, 36, 38, 0.15) !important;
  180. border-bottom-color: rgba(255, 255, 255, 0.15) !important;
  181. border-right-color: rgba(255, 255, 255, 0.15) !important;
  182. }
  183. /*--------------
  184. Fitted
  185. ---------------*/
  186. .ui.fitted.divider {
  187. margin: 0em;
  188. }
  189. /*--------------
  190. Clearing
  191. ---------------*/
  192. .ui.clearing.divider {
  193. clear: both;
  194. }
  195. /*--------------
  196. Section
  197. ---------------*/
  198. .ui.section.divider {
  199. margin-top: 2rem;
  200. margin-bottom: 2rem;
  201. }
  202. /*--------------
  203. Sizes
  204. ---------------*/
  205. .ui.divider {
  206. font-size: 1rem;
  207. }
  208. /*******************************
  209. Theme Overrides
  210. *******************************/
  211. .ui.horizontal.divider:before,
  212. .ui.horizontal.divider:after {
  213. background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABaAAAAACCAYAAACuTHuKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1OThBRDY4OUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1OThBRDY4QUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjU5OEFENjg3Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjU5OEFENjg4Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+VU513gAAADVJREFUeNrs0DENACAQBDBIWLGBJQby/mUcJn5sJXQmOQMAAAAAAJqt+2prAAAAAACg2xdgANk6BEVuJgyMAAAAAElFTkSuQmCC');
  214. }
  215. @media only screen and (max-width: 767px) {
  216. .ui.stackable.grid .ui.vertical.divider:before,
  217. .ui.grid .stackable.row .ui.vertical.divider:before,
  218. .ui.stackable.grid .ui.vertical.divider:after,
  219. .ui.grid .stackable.row .ui.vertical.divider:after {
  220. background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABaAAAAACCAYAAACuTHuKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1OThBRDY4OUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1OThBRDY4QUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjU5OEFENjg3Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjU5OEFENjg4Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+VU513gAAADVJREFUeNrs0DENACAQBDBIWLGBJQby/mUcJn5sJXQmOQMAAAAAAJqt+2prAAAAAACg2xdgANk6BEVuJgyMAAAAAElFTkSuQmCC');
  221. }
  222. }
  223. /*******************************
  224. Site Overrides
  225. *******************************/