1
0

divider.css 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260
  1. /*!
  2. * # Semantic UI 2.3.3 - Divider
  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. Divider
  12. *******************************/
  13. .ui.divider {
  14. margin: 1rem 0rem;
  15. line-height: 1;
  16. height: 0em;
  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: 0rem;
  77. padding: 0em;
  78. width: auto;
  79. height: 50%;
  80. line-height: 0em;
  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: 0px;
  102. }
  103. /* Inside grid */
  104. @media only screen and (max-width: 767px) {
  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. position: static;
  125. left: 0;
  126. border-left: none;
  127. border-right: none;
  128. content: '';
  129. display: table-cell;
  130. position: relative;
  131. top: 50%;
  132. width: 50%;
  133. background-repeat: no-repeat;
  134. }
  135. .ui.stackable.grid .ui.vertical.divider:before,
  136. .ui.grid .stackable.row .ui.vertical.divider:before {
  137. background-position: right 1em top 50%;
  138. }
  139. .ui.stackable.grid .ui.vertical.divider:after,
  140. .ui.grid .stackable.row .ui.vertical.divider:after {
  141. background-position: left 1em top 50%;
  142. }
  143. }
  144. /*--------------
  145. Icon
  146. ---------------*/
  147. .ui.divider > .icon {
  148. margin: 0rem;
  149. font-size: 1rem;
  150. height: 1em;
  151. vertical-align: middle;
  152. }
  153. /*******************************
  154. Variations
  155. *******************************/
  156. /*--------------
  157. Hidden
  158. ---------------*/
  159. .ui.hidden.divider {
  160. border-color: transparent !important;
  161. }
  162. .ui.hidden.divider:before,
  163. .ui.hidden.divider:after {
  164. display: none;
  165. }
  166. /*--------------
  167. Inverted
  168. ---------------*/
  169. .ui.divider.inverted,
  170. .ui.vertical.inverted.divider,
  171. .ui.horizontal.inverted.divider {
  172. color: #FFFFFF;
  173. }
  174. .ui.divider.inverted,
  175. .ui.divider.inverted:after,
  176. .ui.divider.inverted:before {
  177. border-top-color: rgba(34, 36, 38, 0.15) !important;
  178. border-left-color: rgba(34, 36, 38, 0.15) !important;
  179. border-bottom-color: rgba(255, 255, 255, 0.15) !important;
  180. border-right-color: rgba(255, 255, 255, 0.15) !important;
  181. }
  182. /*--------------
  183. Fitted
  184. ---------------*/
  185. .ui.fitted.divider {
  186. margin: 0em;
  187. }
  188. /*--------------
  189. Clearing
  190. ---------------*/
  191. .ui.clearing.divider {
  192. clear: both;
  193. }
  194. /*--------------
  195. Section
  196. ---------------*/
  197. .ui.section.divider {
  198. margin-top: 2rem;
  199. margin-bottom: 2rem;
  200. }
  201. /*--------------
  202. Sizes
  203. ---------------*/
  204. .ui.divider {
  205. font-size: 1rem;
  206. }
  207. /*******************************
  208. Theme Overrides
  209. *******************************/
  210. .ui.horizontal.divider:before,
  211. .ui.horizontal.divider:after {
  212. background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABaAAAAACCAYAAACuTHuKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1OThBRDY4OUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1OThBRDY4QUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjU5OEFENjg3Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjU5OEFENjg4Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+VU513gAAADVJREFUeNrs0DENACAQBDBIWLGBJQby/mUcJn5sJXQmOQMAAAAAAJqt+2prAAAAAACg2xdgANk6BEVuJgyMAAAAAElFTkSuQmCC');
  213. }
  214. @media only screen and (max-width: 767px) {
  215. .ui.stackable.grid .ui.vertical.divider:before,
  216. .ui.grid .stackable.row .ui.vertical.divider:before,
  217. .ui.stackable.grid .ui.vertical.divider:after,
  218. .ui.grid .stackable.row .ui.vertical.divider:after {
  219. background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABaAAAAACCAYAAACuTHuKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1OThBRDY4OUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1OThBRDY4QUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjU5OEFENjg3Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjU5OEFENjg4Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+VU513gAAADVJREFUeNrs0DENACAQBDBIWLGBJQby/mUcJn5sJXQmOQMAAAAAAJqt+2prAAAAAACg2xdgANk6BEVuJgyMAAAAAElFTkSuQmCC');
  220. }
  221. }
  222. /*******************************
  223. Site Overrides
  224. *******************************/