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.

312 lines
7.6 KiB

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