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.

155 lines
3.1 KiB

11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
  1. /*
  2. * # Dividers
  3. * http://github.com/quirkyinc/semantic
  4. *
  5. *
  6. * Copyright 2013 Contributors
  7. * Released under the MIT license
  8. * http://opensource.org/licenses/MIT
  9. *
  10. * Released: April 17 2013
  11. */
  12. /*******************************
  13. Divider
  14. *******************************/
  15. .ui.divider {
  16. margin: 1rem 0rem;
  17. border-top: 1px solid rgba(0, 0, 0, 0.1);
  18. border-bottom: 1px solid rgba(255, 255, 255, 0.8);
  19. line-height: 1;
  20. height: 0em;
  21. -webkit-box-sizing: border-box;
  22. -moz-box-sizing: border-box;
  23. -ms-box-sizing: border-box;
  24. box-sizing: border-box;
  25. -webkit-user-select: none;
  26. -moz-user-select: none;
  27. -ms-user-select: none;
  28. user-select: none;
  29. -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  30. }
  31. .ui.vertical.divider,
  32. .ui.horizontal.divider {
  33. position: absolute;
  34. border: none;
  35. height: 0em;
  36. margin: 0em;
  37. background-color: transparent;
  38. font-size: 0.875rem;
  39. font-weight: bold;
  40. text-align: center;
  41. text-transform: uppercase;
  42. color: rgba(0, 0, 0, 0.8);
  43. }
  44. /*--------------
  45. Vertical
  46. ---------------*/
  47. .ui.vertical.divider {
  48. position: absolute;
  49. z-index: 2;
  50. top: 50%;
  51. left: 50%;
  52. margin: 0% 0% 0% -3%;
  53. width: 6%;
  54. height: 50%;
  55. line-height: 0;
  56. padding: 0em;
  57. }
  58. .ui.vertical.divider:before,
  59. .ui.vertical.divider:after {
  60. position: absolute;
  61. left: 50%;
  62. content: " ";
  63. z-index: 3;
  64. border-left: 1px solid rgba(0, 0, 0, 0.1);
  65. border-right: 1px solid rgba(255, 255, 255, 0.8);
  66. width: 0%;
  67. height: 80%;
  68. }
  69. .ui.vertical.divider:before {
  70. top: -100%;
  71. }
  72. .ui.vertical.divider:after {
  73. top: auto;
  74. bottom: 0px;
  75. }
  76. /*--------------
  77. Horizontal
  78. ---------------*/
  79. .ui.horizontal.divider {
  80. position: relative;
  81. top: 0%;
  82. left: 0%;
  83. margin: 1rem 1.5rem;
  84. height: auto;
  85. padding: 0em;
  86. line-height: 1;
  87. }
  88. .ui.horizontal.divider:before,
  89. .ui.horizontal.divider:after {
  90. position: absolute;
  91. content: " ";
  92. z-index: 3;
  93. width: 50%;
  94. top: 50%;
  95. height: 0%;
  96. border-top: 1px solid rgba(0, 0, 0, 0.1);
  97. border-bottom: 1px solid rgba(255, 255, 255, 0.8);
  98. }
  99. .ui.horizontal.divider:before {
  100. left: 0%;
  101. margin-left: -1.5rem;
  102. }
  103. .ui.horizontal.divider:after {
  104. left: auto;
  105. right: 0%;
  106. margin-right: -1.5rem;
  107. }
  108. /*--------------
  109. Icon
  110. ---------------*/
  111. .ui.divider > .icon {
  112. margin: 0em;
  113. font-size: 1rem;
  114. vertical-align: middle;
  115. }
  116. /*******************************
  117. Variations
  118. *******************************/
  119. /*--------------
  120. Inverted
  121. ---------------*/
  122. .ui.divider.inverted {
  123. color: #ffffff;
  124. }
  125. .ui.vertical.inverted.divider,
  126. .ui.horizontal.inverted.divider {
  127. color: rgba(255, 255, 255, 0.9);
  128. }
  129. .ui.divider.inverted,
  130. .ui.divider.inverted:after,
  131. .ui.divider.inverted:before {
  132. border-top-color: rgba(0, 0, 0, 0.15);
  133. border-bottom-color: rgba(255, 255, 255, 0.15);
  134. border-left-color: rgba(0, 0, 0, 0.15);
  135. border-right-color: rgba(255, 255, 255, 0.15);
  136. }
  137. /*--------------
  138. Fitted
  139. ---------------*/
  140. .ui.fitted.divider {
  141. margin: 0em;
  142. }
  143. /*--------------
  144. Clearing
  145. ---------------*/
  146. .ui.clearing.divider {
  147. clear: both;
  148. }
  149. /*--------------
  150. Section
  151. ---------------*/
  152. .ui.section.divider {
  153. margin-top: 2rem;
  154. margin-bottom: 2rem;
  155. }