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.

364 lines
8.9 KiB

10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
  1. /*
  2. * # Semantic - Divider
  3. * http://github.com/semantic-org/semantic-ui/
  4. *
  5. *
  6. * Copyright 2014 Contributor
  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 Defaults
  38. -------------------*/
  39. /*******************************
  40. Site Settings
  41. *******************************/
  42. /*-------------------
  43. Paths
  44. --------------------*/
  45. /*-------------------
  46. Fonts
  47. --------------------*/
  48. /*-------------------
  49. Site Colors
  50. --------------------*/
  51. /*--- Colors ---*/
  52. /*--- Light Colors ---*/
  53. /*-------------------
  54. Page
  55. --------------------*/
  56. /* Used to match floats with text */
  57. /*-------------------
  58. Background Colors
  59. --------------------*/
  60. /* Used for differentiating neutrals */
  61. /* Used for differentiating layers */
  62. /*-------------------
  63. Grid
  64. --------------------*/
  65. /*-------------------
  66. Breakpoints
  67. --------------------*/
  68. /*******************************
  69. Power-User
  70. *******************************/
  71. /*-------------------
  72. Icons
  73. --------------------*/
  74. /* Max Width of Icon */
  75. /*-------------------
  76. Easing
  77. --------------------*/
  78. /*--- Neutrals ---*/
  79. /*--- Colored Backgrounds ---*/
  80. /*--- Colored Text ---*/
  81. /*--- Colored Headers ---*/
  82. /*-------------------
  83. Emotive Colors
  84. --------------------*/
  85. /* Mood */
  86. /* Status */
  87. /* Darkened Headers */
  88. /*-------------------
  89. Neutral Text
  90. --------------------*/
  91. /*-------------------
  92. Brand Colors
  93. --------------------*/
  94. /*-------------------
  95. Grid Columns
  96. --------------------*/
  97. /*-------------------
  98. Borders
  99. --------------------*/
  100. /*-------------------
  101. Sizes
  102. --------------------*/
  103. /*-------------------
  104. Transitions
  105. --------------------*/
  106. /*******************************
  107. States
  108. *******************************/
  109. /*-------------------
  110. Disabled
  111. --------------------*/
  112. /*-------------------
  113. Hover
  114. --------------------*/
  115. /*--- Colors ---*/
  116. /*--- Emotive ---*/
  117. /*--- Neutrals ---*/
  118. /*-------------------
  119. Down (:active)
  120. --------------------*/
  121. /*--- Colors ---*/
  122. /*--- Emotive ---*/
  123. /*--- Neutrals ---*/
  124. /*-------------------
  125. Active
  126. --------------------*/
  127. /*--- Standard ---*/
  128. /*--- Emotive ---*/
  129. /*--- Neutrals ---*/
  130. /*******************************
  131. Divider
  132. *******************************/
  133. /*-------------------
  134. Element
  135. --------------------*/
  136. /* Text */
  137. /*-------------------
  138. Coupling
  139. --------------------*/
  140. /* Icon */
  141. /*******************************
  142. Variations
  143. *******************************/
  144. /* Horizontal / Vertical */
  145. /* Inverted */
  146. /* Section */
  147. /* Sizes */
  148. /*------------------
  149. Load Theme
  150. -------------------*/
  151. /*------------------
  152. Load Site
  153. -------------------*/
  154. /*******************************
  155. User Global Variables
  156. *******************************/
  157. /*******************************
  158. User Variable Overrides
  159. *******************************/
  160. /*------------------
  161. Override Loader
  162. -------------------*/
  163. /*******************************
  164. Divider
  165. *******************************/
  166. .ui.divider {
  167. margin: 1rem 0rem;
  168. line-height: 1;
  169. height: 0em;
  170. font-weight: bold;
  171. text-transform: uppercase;
  172. color: rgba(0, 0, 0, 0.85);
  173. -webkit-user-select: none;
  174. -moz-user-select: none;
  175. -ms-user-select: none;
  176. user-select: none;
  177. -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  178. }
  179. /*--------------
  180. Basic
  181. ---------------*/
  182. .ui.divider:not(.vertical):not(.horizontal) {
  183. border-top: 1px solid rgba(0, 0, 0, 0.1);
  184. border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  185. }
  186. /*--------------
  187. Coupling
  188. ---------------*/
  189. .ui.grid > .ui.divider {
  190. font-size: 1rem;
  191. }
  192. /*--------------
  193. Horizontal
  194. ---------------*/
  195. .ui.horizontal.divider {
  196. position: relative;
  197. height: auto;
  198. margin: '';
  199. overflow: hidden;
  200. line-height: 1;
  201. text-align: center;
  202. }
  203. .ui.horizontal.divider:before,
  204. .ui.horizontal.divider:after {
  205. position: absolute;
  206. content: '';
  207. z-index: 3;
  208. width: 50%;
  209. top: 50%;
  210. height: 0px;
  211. border-top: 1px solid rgba(0, 0, 0, 0.1);
  212. border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  213. }
  214. .ui.horizontal.divider:before {
  215. margin-left: -51.5%;
  216. }
  217. .ui.horizontal.divider:after {
  218. margin-left: 1.5%;
  219. }
  220. /*--------------
  221. Vertical
  222. ---------------*/
  223. .ui.vertical.divider {
  224. position: absolute;
  225. z-index: 2;
  226. top: 50%;
  227. left: 50%;
  228. margin: 0rem;
  229. padding: 0em;
  230. width: auto;
  231. height: 50%;
  232. line-height: 0em;
  233. text-align: center;
  234. }
  235. .ui.vertical.divider:before,
  236. .ui.vertical.divider:after {
  237. position: absolute;
  238. left: 50%;
  239. content: '';
  240. z-index: 3;
  241. border-left: 1px solid rgba(0, 0, 0, 0.1);
  242. border-right: 1px solid rgba(255, 255, 255, 0.2);
  243. width: 0%;
  244. height: -webkit-calc(100% - 1rem );
  245. height: calc(100% - 1rem );
  246. }
  247. .ui.vertical.divider:before {
  248. top: -100%;
  249. }
  250. .ui.vertical.divider:after {
  251. top: auto;
  252. bottom: 0px;
  253. }
  254. /* Inside grid */
  255. @media only screen and (max-width: 767px) {
  256. .ui.stackable.grid .ui.vertical.divider,
  257. .ui.grid .stackable.row .ui.vertical.divider {
  258. position: relative;
  259. margin: 1rem 0rem;
  260. left: 0;
  261. height: auto;
  262. overflow: hidden;
  263. line-height: 1;
  264. text-align: center;
  265. }
  266. .ui.stackable.grid .ui.vertical.divider:before,
  267. .ui.grid .stackable.row .ui.vertical.divider:before,
  268. .ui.stackable.grid .ui.vertical.divider:after,
  269. .ui.grid .stackable.row .ui.vertical.divider:after {
  270. position: absolute;
  271. left: auto;
  272. content: '';
  273. z-index: 3;
  274. width: 50%;
  275. top: 50%;
  276. height: 0px;
  277. border-top: 1px solid rgba(0, 0, 0, 0.1);
  278. border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  279. }
  280. .ui.stackable.grid .ui.vertical.divider:before,
  281. .ui.grid .stackable.row .ui.vertical.divider:before {
  282. margin-left: -51.5%;
  283. }
  284. .ui.stackable.grid .ui.vertical.divider:after,
  285. .ui.grid .stackable.row .ui.vertical.divider:after {
  286. margin-left: 1.5%;
  287. }
  288. }
  289. /*--------------
  290. Icon
  291. ---------------*/
  292. .ui.divider > .icon {
  293. margin: 0rem;
  294. font-size: 1rem;
  295. height: 1em;
  296. vertical-align: middle;
  297. }
  298. /*******************************
  299. Variations
  300. *******************************/
  301. /*--------------
  302. Hidden
  303. ---------------*/
  304. .ui.hidden.divider {
  305. border-color: transparent !important;
  306. }
  307. /*--------------
  308. Inverted
  309. ---------------*/
  310. .ui.divider.inverted {
  311. color: #ffffff;
  312. }
  313. .ui.vertical.inverted.divider,
  314. .ui.horizontal.inverted.divider {
  315. color: #ffffff;
  316. }
  317. .ui.divider.inverted,
  318. .ui.divider.inverted:after,
  319. .ui.divider.inverted:before {
  320. border-top-color: rgba(0, 0, 0, 0.15) !important;
  321. border-bottom-color: rgba(255, 255, 255, 0.15) !important;
  322. border-left-color: rgba(0, 0, 0, 0.15) !important;
  323. border-right-color: rgba(255, 255, 255, 0.15) !important;
  324. }
  325. /*--------------
  326. Fitted
  327. ---------------*/
  328. .ui.fitted.divider {
  329. margin: 0em;
  330. }
  331. /*--------------
  332. Clearing
  333. ---------------*/
  334. .ui.clearing.divider {
  335. clear: both;
  336. }
  337. /*--------------
  338. Section
  339. ---------------*/
  340. .ui.section.divider {
  341. margin-top: 2rem;
  342. margin-bottom: 2rem;
  343. }
  344. /*--------------
  345. Sizes
  346. ---------------*/
  347. .ui.divider {
  348. font-size: 1rem;
  349. }
  350. /*******************************
  351. Overrides
  352. *******************************/
  353. /*******************************
  354. Overrides
  355. *******************************/