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.

244 lines
4.6 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(0, 0, 0, 0.13);
  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. transform: translateX(-50%);
  86. }
  87. .ui.vertical.divider:before,
  88. .ui.vertical.divider:after {
  89. position: absolute;
  90. left: 50%;
  91. content: '';
  92. z-index: 3;
  93. border-left: 1px solid rgba(0, 0, 0, 0.13);
  94. border-right: 1px solid rgba(255, 255, 255, 0.1);
  95. width: 0%;
  96. height: calc(100% - 1rem );
  97. }
  98. .ui.vertical.divider:before {
  99. top: -100%;
  100. }
  101. .ui.vertical.divider:after {
  102. top: auto;
  103. bottom: 0px;
  104. }
  105. /* Inside grid */
  106. @media only screen and (max-width: 687px) {
  107. .ui.stackable.grid .ui.vertical.divider,
  108. .ui.grid .stackable.row .ui.vertical.divider {
  109. display: table;
  110. white-space: nowrap;
  111. height: auto;
  112. margin: '';
  113. overflow: hidden;
  114. line-height: 1;
  115. text-align: center;
  116. position: static;
  117. top: 0;
  118. left: 0;
  119. -webkit-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. border-right: none;
  130. content: '';
  131. display: table-cell;
  132. position: relative;
  133. top: 50%;
  134. width: 50%;
  135. background-repeat: no-repeat;
  136. }
  137. .ui.stackable.grid .ui.vertical.divider:before,
  138. .ui.grid .stackable.row .ui.vertical.divider:before {
  139. background-position: right 1em top 50%;
  140. }
  141. .ui.stackable.grid .ui.vertical.divider:after,
  142. .ui.grid .stackable.row .ui.vertical.divider:after {
  143. background-position: left 1em top 50%;
  144. }
  145. }
  146. /*--------------
  147. Icon
  148. ---------------*/
  149. .ui.divider > .icon {
  150. margin: 0rem;
  151. font-size: 1rem;
  152. height: 1em;
  153. vertical-align: middle;
  154. }
  155. /*******************************
  156. Variations
  157. *******************************/
  158. /*--------------
  159. Hidden
  160. ---------------*/
  161. .ui.hidden.divider {
  162. border-color: transparent !important;
  163. }
  164. .ui.hidden.divider:before,
  165. .ui.hidden.divider:after {
  166. display: none;
  167. }
  168. /*--------------
  169. Inverted
  170. ---------------*/
  171. .ui.divider.inverted,
  172. .ui.vertical.inverted.divider,
  173. .ui.horizontal.inverted.divider {
  174. color: #FFFFFF;
  175. }
  176. .ui.divider.inverted,
  177. .ui.divider.inverted:after,
  178. .ui.divider.inverted:before {
  179. border-top-color: rgba(0, 0, 0, 0.13) !important;
  180. border-left-color: rgba(0, 0, 0, 0.13) !important;
  181. border-bottom-color: rgba(255, 255, 255, 0.15) !important;
  182. border-right-color: rgba(255, 255, 255, 0.15) !important;
  183. }
  184. /*--------------
  185. Fitted
  186. ---------------*/
  187. .ui.fitted.divider {
  188. margin: 0em;
  189. }
  190. /*--------------
  191. Clearing
  192. ---------------*/
  193. .ui.clearing.divider {
  194. clear: both;
  195. }
  196. /*--------------
  197. Section
  198. ---------------*/
  199. .ui.section.divider {
  200. margin-top: 2rem;
  201. margin-bottom: 2rem;
  202. }
  203. /*--------------
  204. Sizes
  205. ---------------*/
  206. .ui.divider {
  207. font-size: 1rem;
  208. }
  209. /*******************************
  210. Site Overrides
  211. *******************************/