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.

348 lines
5.7 KiB

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. Theme
  13. *******************************/
  14. /*-------------------
  15. Theme
  16. --------------------*/
  17. /* To override a theme for an individual element
  18. specify theme name below
  19. */
  20. /* Theme to load global Variables */
  21. /* Elements */
  22. /* Collections */
  23. /* Modules */
  24. /* Views */
  25. /* Import */
  26. /*******************************
  27. Global Variables
  28. *******************************/
  29. /*-------------------
  30. Paths
  31. --------------------*/
  32. /*-------------------
  33. Page
  34. --------------------*/
  35. /*-------------------
  36. Fonts
  37. --------------------*/
  38. /*-------------------
  39. Icons
  40. --------------------*/
  41. /* Width of largest icon */
  42. /*******************************
  43. BG Colors
  44. *******************************/
  45. /*******************************
  46. Colors
  47. *******************************/
  48. /*-------------------
  49. Background
  50. --------------------*/
  51. /*--- Colors ---*/
  52. /*--- Emotive ---*/
  53. /*--- Neutrals ---*/
  54. /*-------------------
  55. Text Colors
  56. --------------------*/
  57. /*-------------------
  58. Brand Colors
  59. --------------------*/
  60. /*-------------------
  61. Borders
  62. --------------------*/
  63. /*-------------------
  64. Sizes
  65. --------------------*/
  66. /*-------------------
  67. Transitions
  68. --------------------*/
  69. /*******************************
  70. States
  71. *******************************/
  72. /*-------------------
  73. Disabled
  74. --------------------*/
  75. /*-------------------
  76. Hover
  77. --------------------*/
  78. /*--- Colors ---*/
  79. /*--- Emotive ---*/
  80. /*--- Neutrals ---*/
  81. /*-------------------
  82. Down (:active)
  83. --------------------*/
  84. /*--- Colors ---*/
  85. /*--- Emotive ---*/
  86. /*--- Neutrals ---*/
  87. /*-------------------
  88. Active
  89. --------------------*/
  90. /*--- Standard ---*/
  91. /*--- Emotive ---*/
  92. /*--- Neutrals ---*/
  93. /*******************************
  94. Standard
  95. *******************************/
  96. /*-------------------
  97. Divider
  98. --------------------*/
  99. /*-------------------
  100. Coupling
  101. --------------------*/
  102. /* Icon */
  103. /*******************************
  104. Variations
  105. *******************************/
  106. /* Horizontal / Vertical */
  107. /* Inverted */
  108. /* Section */
  109. /*******************************
  110. User Global Variables
  111. *******************************/
  112. /*******************************
  113. User Variable Overrides
  114. *******************************/
  115. /*******************************
  116. Divider
  117. *******************************/
  118. .ui.divider {
  119. margin: 1rem 0rem;
  120. border-top: 1px solid rgba(0, 0, 0, 0.1);
  121. border-bottom: 1px solid rgba(255, 255, 255, 0.8);
  122. line-height: 1;
  123. height: 0em;
  124. -webkit-box-sizing: border-box;
  125. -moz-box-sizing: border-box;
  126. box-sizing: border-box;
  127. -webkit-user-select: none;
  128. -moz-user-select: none;
  129. -ms-user-select: none;
  130. user-select: none;
  131. -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  132. }
  133. .ui.vertical.divider,
  134. .ui.horizontal.divider {
  135. position: absolute;
  136. border: none;
  137. height: 0em;
  138. margin: 0em;
  139. background-color: transparent;
  140. font-size: 1em;
  141. font-weight: bold;
  142. text-align: center;
  143. text-transform: uppercase;
  144. color: rgba(0, 0, 0, 0.7);
  145. }
  146. /*--------------
  147. Vertical
  148. ---------------*/
  149. .ui.vertical.divider {
  150. position: absolute;
  151. z-index: 2;
  152. top: 50%;
  153. left: 50%;
  154. margin: 0% 0% 0% 3%;
  155. width: 6%;
  156. height: 50%;
  157. line-height: 0;
  158. padding: 0em;
  159. }
  160. .ui.vertical.divider:before,
  161. .ui.vertical.divider:after {
  162. position: absolute;
  163. left: 50%;
  164. content: " ";
  165. z-index: 3;
  166. border-left: 1px solid rgba(0, 0, 0, 0.1);
  167. border-right: 1px solid rgba(255, 255, 255, 0.8);
  168. width: 0%;
  169. height: 80%;
  170. }
  171. .ui.vertical.divider:before {
  172. top: -100%;
  173. }
  174. .ui.vertical.divider:after {
  175. top: auto;
  176. bottom: 0px;
  177. }
  178. /*--------------
  179. Horizontal
  180. ---------------*/
  181. .ui.horizontal.divider {
  182. position: relative;
  183. top: 0%;
  184. left: 0%;
  185. margin: 1rem 1.5rem;
  186. height: auto;
  187. padding: 0em;
  188. line-height: 1;
  189. }
  190. .ui.horizontal.divider:before,
  191. .ui.horizontal.divider:after {
  192. position: absolute;
  193. content: '';
  194. z-index: 3;
  195. width: 50%;
  196. top: 50%;
  197. height: 0%;
  198. border-top: 1px solid rgba(0, 0, 0, 0.1);
  199. border-bottom: 1px solid rgba(255, 255, 255, 0.8);
  200. }
  201. .ui.horizontal.divider:before {
  202. left: 0%;
  203. margin-left: -1.5rem;
  204. }
  205. .ui.horizontal.divider:after {
  206. left: auto;
  207. right: 0%;
  208. margin-right: -1.5rem;
  209. }
  210. /*--------------
  211. Icon
  212. ---------------*/
  213. .ui.divider > .icon {
  214. margin: 0rem;
  215. font-size: 1rem;
  216. vertical-align: middle;
  217. }
  218. /*******************************
  219. Variations
  220. *******************************/
  221. /*--------------
  222. Hidden
  223. ---------------*/
  224. .ui.hidden.divider {
  225. border-color: transparent;
  226. }
  227. /*--------------
  228. Inverted
  229. ---------------*/
  230. .ui.divider.inverted {
  231. color: #ffffff;
  232. }
  233. .ui.vertical.inverted.divider,
  234. .ui.horizontal.inverted.divider {
  235. color: rgba(255, 255, 255, 0.8);
  236. }
  237. .ui.divider.inverted,
  238. .ui.divider.inverted:after,
  239. .ui.divider.inverted:before {
  240. border-top-color: rgba(0, 0, 0, 0.15);
  241. border-bottom-color: rgba(255, 255, 255, 0.15);
  242. border-left-color: rgba(0, 0, 0, 0.15);
  243. border-right-color: rgba(255, 255, 255, 0.15);
  244. }
  245. /*--------------
  246. Fitted
  247. ---------------*/
  248. .ui.fitted.divider {
  249. margin: 0em;
  250. }
  251. /*--------------
  252. Clearing
  253. ---------------*/
  254. .ui.clearing.divider {
  255. clear: both;
  256. }
  257. /*--------------
  258. Section
  259. ---------------*/
  260. .ui.section.divider {
  261. margin-top: 2rem;
  262. margin-bottom: 2rem;
  263. }
  264. /*******************************
  265. Overrides
  266. *******************************/
  267. /*******************************
  268. Overrides
  269. *******************************/