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.

154 lines
3.0 KiB

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