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

10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
  1. /*
  2. * # Semantic UI
  3. * git://github.com/Semantic-Org/Semantic-UI.git#1.0
  4. *
  5. *
  6. * Copyright 2014 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.1);
  33. border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  34. }
  35. /*--------------
  36. Coupling
  37. ---------------*/
  38. .ui.grid > .ui.divider {
  39. font-size: 1rem;
  40. }
  41. /*--------------
  42. Horizontal
  43. ---------------*/
  44. .ui.horizontal.divider {
  45. position: relative;
  46. height: auto;
  47. margin: '';
  48. overflow: hidden;
  49. line-height: 1;
  50. text-align: center;
  51. }
  52. .ui.horizontal.divider:before,
  53. .ui.horizontal.divider:after {
  54. position: absolute;
  55. content: '';
  56. z-index: 3;
  57. width: 50%;
  58. top: 50%;
  59. height: 0px;
  60. border-top: 1px solid rgba(0, 0, 0, 0.1);
  61. border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  62. }
  63. .ui.horizontal.divider:before {
  64. margin-left: -webkit-calc(-50% - 1em );
  65. margin-left: calc(-50% - 1em );
  66. }
  67. .ui.horizontal.divider:after {
  68. margin-left: 1em;
  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(0, 0, 0, 0.1);
  95. border-right: 1px solid rgba(255, 255, 255, 0.2);
  96. width: 0%;
  97. height: -webkit-calc(100% - 1rem );
  98. height: calc(100% - 1rem );
  99. }
  100. .ui.vertical.divider:before {
  101. top: -100%;
  102. }
  103. .ui.vertical.divider:after {
  104. top: auto;
  105. bottom: 0px;
  106. }
  107. /* Inside grid */
  108. @media only screen and (max-width: 767px) {
  109. .ui.stackable.grid .ui.vertical.divider,
  110. .ui.grid .stackable.row .ui.vertical.divider {
  111. position: relative;
  112. margin: 1rem 0rem;
  113. left: 50%;
  114. height: auto;
  115. overflow: hidden;
  116. line-height: 1;
  117. text-align: center;
  118. }
  119. .ui.stackable.grid .ui.vertical.divider:before,
  120. .ui.grid .stackable.row .ui.vertical.divider:before,
  121. .ui.stackable.grid .ui.vertical.divider:after,
  122. .ui.grid .stackable.row .ui.vertical.divider:after {
  123. position: absolute;
  124. left: auto;
  125. content: '';
  126. z-index: 3;
  127. width: 50%;
  128. top: 50%;
  129. height: 0px;
  130. border-top: 1px solid rgba(0, 0, 0, 0.1);
  131. border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  132. }
  133. .ui.stackable.grid .ui.vertical.divider:before,
  134. .ui.grid .stackable.row .ui.vertical.divider:before {
  135. margin-left: -51%;
  136. }
  137. .ui.stackable.grid .ui.vertical.divider:after,
  138. .ui.grid .stackable.row .ui.vertical.divider:after {
  139. margin-left: 1em;
  140. }
  141. }
  142. /*--------------
  143. Icon
  144. ---------------*/
  145. .ui.divider > .icon {
  146. margin: 0rem;
  147. font-size: 1rem;
  148. height: 1em;
  149. vertical-align: middle;
  150. }
  151. /*******************************
  152. Variations
  153. *******************************/
  154. /*--------------
  155. Hidden
  156. ---------------*/
  157. .ui.hidden.divider {
  158. border-color: transparent !important;
  159. }
  160. /*--------------
  161. Inverted
  162. ---------------*/
  163. .ui.divider.inverted {
  164. color: #ffffff;
  165. }
  166. .ui.vertical.inverted.divider,
  167. .ui.horizontal.inverted.divider {
  168. color: #ffffff;
  169. }
  170. .ui.divider.inverted,
  171. .ui.divider.inverted:after,
  172. .ui.divider.inverted:before {
  173. border-top-color: rgba(0, 0, 0, 0.15) !important;
  174. border-bottom-color: rgba(255, 255, 255, 0.15) !important;
  175. border-left-color: rgba(0, 0, 0, 0.15) !important;
  176. border-right-color: rgba(255, 255, 255, 0.15) !important;
  177. }
  178. /*--------------
  179. Fitted
  180. ---------------*/
  181. .ui.fitted.divider {
  182. margin: 0em;
  183. }
  184. /*--------------
  185. Clearing
  186. ---------------*/
  187. .ui.clearing.divider {
  188. clear: both;
  189. }
  190. /*--------------
  191. Section
  192. ---------------*/
  193. .ui.section.divider {
  194. margin-top: 2rem;
  195. margin-bottom: 2rem;
  196. }
  197. /*--------------
  198. Sizes
  199. ---------------*/
  200. .ui.divider {
  201. font-size: 1rem;
  202. }
  203. /*******************************
  204. Theme Overrides
  205. *******************************/
  206. /*******************************
  207. Site Overrides
  208. *******************************/