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.

309 lines
7.5 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. /* Max Width of Icon */
  58. /*-------------------
  59. Easing
  60. --------------------*/
  61. /*******************************
  62. BG Colors
  63. *******************************/
  64. /*******************************
  65. Colors
  66. *******************************/
  67. /*--- Colors ---*/
  68. /*--- Neutrals ---*/
  69. /*--- Text Colors ---*/
  70. /* Preserve */
  71. /* Adjust for Legibility */
  72. /*--- Backgrounds ---*/
  73. /*-------------------
  74. Emotive Colors
  75. --------------------*/
  76. /* Positive / Negative */
  77. /* Messages */
  78. /*-------------------
  79. Text Colors
  80. --------------------*/
  81. /*-------------------
  82. Brand Colors
  83. --------------------*/
  84. /*-------------------
  85. Borders
  86. --------------------*/
  87. /*-------------------
  88. Sizes
  89. --------------------*/
  90. /*-------------------
  91. Transitions
  92. --------------------*/
  93. /*******************************
  94. States
  95. *******************************/
  96. /*-------------------
  97. Disabled
  98. --------------------*/
  99. /*-------------------
  100. Hover
  101. --------------------*/
  102. /*--- Colors ---*/
  103. /*--- Emotive ---*/
  104. /*--- Neutrals ---*/
  105. /*-------------------
  106. Down (:active)
  107. --------------------*/
  108. /*--- Colors ---*/
  109. /*--- Emotive ---*/
  110. /*--- Neutrals ---*/
  111. /*-------------------
  112. Active
  113. --------------------*/
  114. /*--- Standard ---*/
  115. /*--- Emotive ---*/
  116. /*--- Neutrals ---*/
  117. /*******************************
  118. Standard
  119. *******************************/
  120. /*-------------------
  121. Divider
  122. --------------------*/
  123. /*-------------------
  124. Coupling
  125. --------------------*/
  126. /* Icon */
  127. /*******************************
  128. Variations
  129. *******************************/
  130. /* Horizontal / Vertical */
  131. /* Inverted */
  132. /* Section */
  133. /*------------------
  134. Load Theme
  135. -------------------*/
  136. /*------------------
  137. Load Site
  138. -------------------*/
  139. /*******************************
  140. User Global Variables
  141. *******************************/
  142. /*******************************
  143. User Variable Overrides
  144. *******************************/
  145. /*------------------
  146. Override Mix-in
  147. -------------------*/
  148. /*******************************
  149. Divider
  150. *******************************/
  151. .ui.divider {
  152. margin: 1rem 0rem;
  153. border-top: 1px solid rgba(0, 0, 0, 0.1);
  154. border-bottom: 1px solid rgba(255, 255, 255, 0.8);
  155. line-height: 1;
  156. height: 0em;
  157. -webkit-box-sizing: border-box;
  158. -moz-box-sizing: border-box;
  159. box-sizing: border-box;
  160. -webkit-user-select: none;
  161. -moz-user-select: none;
  162. -ms-user-select: none;
  163. user-select: none;
  164. -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  165. }
  166. .ui.vertical.divider,
  167. .ui.horizontal.divider {
  168. position: absolute;
  169. border: none;
  170. height: 0em;
  171. margin: 0em;
  172. background-color: transparent;
  173. font-size: 1em;
  174. font-weight: bold;
  175. text-align: center;
  176. text-transform: uppercase;
  177. color: rgba(0, 0, 0, 0.8);
  178. }
  179. /*--------------
  180. Vertical
  181. ---------------*/
  182. .ui.vertical.divider {
  183. position: absolute;
  184. z-index: 2;
  185. top: 50%;
  186. left: 50%;
  187. margin: 0% 0% 0% 3%;
  188. width: 6%;
  189. height: 50%;
  190. line-height: 0;
  191. padding: 0em;
  192. }
  193. .ui.vertical.divider:before,
  194. .ui.vertical.divider:after {
  195. position: absolute;
  196. left: 50%;
  197. content: " ";
  198. z-index: 3;
  199. border-left: 1px solid rgba(0, 0, 0, 0.1);
  200. border-right: 1px solid rgba(255, 255, 255, 0.8);
  201. width: 0%;
  202. height: 80%;
  203. }
  204. .ui.vertical.divider:before {
  205. top: -100%;
  206. }
  207. .ui.vertical.divider:after {
  208. top: auto;
  209. bottom: 0px;
  210. }
  211. /*--------------
  212. Horizontal
  213. ---------------*/
  214. .ui.horizontal.divider {
  215. position: relative;
  216. top: 0%;
  217. left: 0%;
  218. margin: 1rem 0em;
  219. height: auto;
  220. padding: 0em;
  221. line-height: 1;
  222. }
  223. .ui.horizontal.divider:before,
  224. .ui.horizontal.divider:after {
  225. position: absolute;
  226. content: '';
  227. z-index: 3;
  228. width: 40%;
  229. top: 50%;
  230. height: 0%;
  231. border-top: 1px solid rgba(0, 0, 0, 0.1);
  232. border-bottom: 1px solid rgba(255, 255, 255, 0.8);
  233. }
  234. .ui.horizontal.divider:before {
  235. left: 0%;
  236. }
  237. .ui.horizontal.divider:after {
  238. left: auto;
  239. right: 0%;
  240. }
  241. /*--------------
  242. Icon
  243. ---------------*/
  244. .ui.divider > .icon {
  245. margin: 0rem;
  246. font-size: 1rem;
  247. vertical-align: middle;
  248. }
  249. /*******************************
  250. Variations
  251. *******************************/
  252. /*--------------
  253. Hidden
  254. ---------------*/
  255. .ui.hidden.divider {
  256. border-color: transparent;
  257. }
  258. /*--------------
  259. Inverted
  260. ---------------*/
  261. .ui.divider.inverted {
  262. color: #ffffff;
  263. }
  264. .ui.vertical.inverted.divider,
  265. .ui.horizontal.inverted.divider {
  266. color: rgba(255, 255, 255, 0.8);
  267. }
  268. .ui.divider.inverted,
  269. .ui.divider.inverted:after,
  270. .ui.divider.inverted:before {
  271. border-top-color: rgba(0, 0, 0, 0.15);
  272. border-bottom-color: rgba(255, 255, 255, 0.15);
  273. border-left-color: rgba(0, 0, 0, 0.15);
  274. border-right-color: rgba(255, 255, 255, 0.15);
  275. }
  276. /*--------------
  277. Fitted
  278. ---------------*/
  279. .ui.fitted.divider {
  280. margin: 0em;
  281. }
  282. /*--------------
  283. Clearing
  284. ---------------*/
  285. .ui.clearing.divider {
  286. clear: both;
  287. }
  288. /*--------------
  289. Section
  290. ---------------*/
  291. .ui.section.divider {
  292. margin-top: 2rem;
  293. margin-bottom: 2rem;
  294. }
  295. /*******************************
  296. Overrides
  297. *******************************/
  298. /*******************************
  299. Overrides
  300. *******************************/