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.

304 lines
7.4 KiB

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