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.

241 lines
4.6 KiB

9 years ago
9 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
10 years ago
  1. /*!
  2. * # Semantic UI 1.11.4 - Divider
  3. * http://github.com/semantic-org/semantic-ui/
  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. .ui.vertical.inverted.divider,
  165. .ui.horizontal.inverted.divider {
  166. color: #ffffff;
  167. }
  168. .ui.divider.inverted,
  169. .ui.divider.inverted:after,
  170. .ui.divider.inverted:before {
  171. border-top-color: rgba(0, 0, 0, 0.15) !important;
  172. border-bottom-color: rgba(255, 255, 255, 0.15) !important;
  173. border-left-color: rgba(0, 0, 0, 0.15) !important;
  174. border-right-color: rgba(255, 255, 255, 0.15) !important;
  175. }
  176. /*--------------
  177. Fitted
  178. ---------------*/
  179. .ui.fitted.divider {
  180. margin: 0em;
  181. }
  182. /*--------------
  183. Clearing
  184. ---------------*/
  185. .ui.clearing.divider {
  186. clear: both;
  187. }
  188. /*--------------
  189. Section
  190. ---------------*/
  191. .ui.section.divider {
  192. margin-top: 2rem;
  193. margin-bottom: 2rem;
  194. }
  195. /*--------------
  196. Sizes
  197. ---------------*/
  198. .ui.divider {
  199. font-size: 1rem;
  200. }
  201. /*******************************
  202. Theme Overrides
  203. *******************************/
  204. /*******************************
  205. Site Overrides
  206. *******************************/