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.

484 lines
12 KiB

10 years ago
10 years ago
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. /*-------------------
  57. Background Colors
  58. --------------------*/
  59. /* Used for differentiating neutrals */
  60. /* Used for differentiating layers */
  61. /*-------------------
  62. Grid
  63. --------------------*/
  64. /*-------------------
  65. Breakpoints
  66. --------------------*/
  67. /*******************************
  68. Power-User
  69. *******************************/
  70. /*-------------------
  71. Icons
  72. --------------------*/
  73. /* Maximum Glyph Width of Icon */
  74. /*-------------------
  75. Easing
  76. --------------------*/
  77. /*--- Neutrals ---*/
  78. /*--- Colored Backgrounds ---*/
  79. /*--- Colored Text ---*/
  80. /*--- Colored Headers ---*/
  81. /*-------------------
  82. Emotive Colors
  83. --------------------*/
  84. /* Mood */
  85. /* Status */
  86. /*-------------------
  87. Neutral Text
  88. --------------------*/
  89. /*-------------------
  90. Brand Colors
  91. --------------------*/
  92. /*-------------------
  93. Borders
  94. --------------------*/
  95. /*-------------------
  96. Sizes
  97. --------------------*/
  98. /*-------------------
  99. Transitions
  100. --------------------*/
  101. /*-------------------
  102. Derived Values
  103. --------------------*/
  104. /* Makes sure padded grid can fit at 320px */
  105. /* Used to match floats with text */
  106. /* Positive / Negative Dupes */
  107. /* Header Colors */
  108. /* Responsive */
  109. /* Columns */
  110. /*******************************
  111. States
  112. *******************************/
  113. /*-------------------
  114. Disabled
  115. --------------------*/
  116. /*-------------------
  117. Hover
  118. --------------------*/
  119. /*--- Colors ---*/
  120. /*--- Emotive ---*/
  121. /*--- Neutrals ---*/
  122. /*-------------------
  123. Down (:active)
  124. --------------------*/
  125. /*--- Colors ---*/
  126. /*--- Emotive ---*/
  127. /*--- Neutrals ---*/
  128. /*-------------------
  129. Active
  130. --------------------*/
  131. /*--- Standard ---*/
  132. /*--- Emotive ---*/
  133. /*--- Neutrals ---*/
  134. /*******************************
  135. Divider
  136. *******************************/
  137. /*-------------------
  138. Element
  139. --------------------*/
  140. /* Text */
  141. /*-------------------
  142. Coupling
  143. --------------------*/
  144. /* Icon */
  145. /*******************************
  146. Variations
  147. *******************************/
  148. /* Horizontal / Vertical */
  149. /* Inverted */
  150. /* Section */
  151. /* Sizes */
  152. /*------------------
  153. Load Theme
  154. -------------------*/
  155. /*******************************
  156. Site Settings
  157. *******************************/
  158. /*-------------------
  159. Paths
  160. --------------------*/
  161. /*-------------------
  162. Fonts
  163. --------------------*/
  164. /*-------------------
  165. Site Colors
  166. --------------------*/
  167. /*--- Colors ---*/
  168. /*--- Light Colors ---*/
  169. /*-------------------
  170. Page
  171. --------------------*/
  172. /*-------------------
  173. Background Colors
  174. --------------------*/
  175. /* Used for differentiating neutrals */
  176. /* Used for differentiating layers */
  177. /*-------------------
  178. Grid
  179. --------------------*/
  180. /*-------------------
  181. Breakpoints
  182. --------------------*/
  183. /*******************************
  184. Power-User
  185. *******************************/
  186. /*-------------------
  187. Icons
  188. --------------------*/
  189. /* Maximum Glyph Width of Icon */
  190. /*-------------------
  191. Easing
  192. --------------------*/
  193. /*--- Neutrals ---*/
  194. /*--- Colored Backgrounds ---*/
  195. /*--- Colored Text ---*/
  196. /*--- Colored Headers ---*/
  197. /*-------------------
  198. Emotive Colors
  199. --------------------*/
  200. /* Mood */
  201. /* Status */
  202. /*-------------------
  203. Neutral Text
  204. --------------------*/
  205. /*-------------------
  206. Brand Colors
  207. --------------------*/
  208. /*-------------------
  209. Borders
  210. --------------------*/
  211. /*-------------------
  212. Sizes
  213. --------------------*/
  214. /*-------------------
  215. Transitions
  216. --------------------*/
  217. /*-------------------
  218. Derived Values
  219. --------------------*/
  220. /* Makes sure padded grid can fit at 320px */
  221. /* Used to match floats with text */
  222. /* Positive / Negative Dupes */
  223. /* Header Colors */
  224. /* Responsive */
  225. /* Columns */
  226. /*******************************
  227. States
  228. *******************************/
  229. /*-------------------
  230. Disabled
  231. --------------------*/
  232. /*-------------------
  233. Hover
  234. --------------------*/
  235. /*--- Colors ---*/
  236. /*--- Emotive ---*/
  237. /*--- Neutrals ---*/
  238. /*-------------------
  239. Down (:active)
  240. --------------------*/
  241. /*--- Colors ---*/
  242. /*--- Emotive ---*/
  243. /*--- Neutrals ---*/
  244. /*-------------------
  245. Active
  246. --------------------*/
  247. /*--- Standard ---*/
  248. /*--- Emotive ---*/
  249. /*--- Neutrals ---*/
  250. /*******************************
  251. Divider
  252. *******************************/
  253. /*-------------------
  254. Element
  255. --------------------*/
  256. /* Text */
  257. /*-------------------
  258. Coupling
  259. --------------------*/
  260. /* Icon */
  261. /*******************************
  262. Variations
  263. *******************************/
  264. /* Horizontal / Vertical */
  265. /* Inverted */
  266. /* Section */
  267. /* Sizes */
  268. /*------------------
  269. Load Site
  270. -------------------*/
  271. /*******************************
  272. User Global Variables
  273. *******************************/
  274. /*******************************
  275. User Variable Overrides
  276. *******************************/
  277. /*------------------
  278. Override Loader
  279. -------------------*/
  280. /*******************************
  281. Divider
  282. *******************************/
  283. .ui.divider {
  284. margin: 1rem 0rem;
  285. line-height: 1;
  286. height: 0em;
  287. font-weight: bold;
  288. text-transform: uppercase;
  289. color: rgba(0, 0, 0, 0.85);
  290. -webkit-user-select: none;
  291. -moz-user-select: none;
  292. -ms-user-select: none;
  293. user-select: none;
  294. -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  295. }
  296. /*--------------
  297. Basic
  298. ---------------*/
  299. .ui.divider:not(.vertical):not(.horizontal) {
  300. border-top: 1px solid rgba(0, 0, 0, 0.1);
  301. border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  302. }
  303. /*--------------
  304. Coupling
  305. ---------------*/
  306. .ui.grid > .ui.divider {
  307. font-size: 1rem;
  308. }
  309. /*--------------
  310. Horizontal
  311. ---------------*/
  312. .ui.horizontal.divider {
  313. position: relative;
  314. height: auto;
  315. margin: '';
  316. overflow: hidden;
  317. line-height: 1;
  318. text-align: center;
  319. }
  320. .ui.horizontal.divider:before,
  321. .ui.horizontal.divider:after {
  322. position: absolute;
  323. content: '';
  324. z-index: 3;
  325. width: 50%;
  326. top: 50%;
  327. height: 0px;
  328. border-top: 1px solid rgba(0, 0, 0, 0.1);
  329. border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  330. }
  331. .ui.horizontal.divider:before {
  332. margin-left: -51.5%;
  333. }
  334. .ui.horizontal.divider:after {
  335. margin-left: 1.5%;
  336. }
  337. /*--------------
  338. Vertical
  339. ---------------*/
  340. .ui.vertical.divider {
  341. position: absolute;
  342. z-index: 2;
  343. top: 50%;
  344. left: 50%;
  345. margin: 0rem;
  346. padding: 0em;
  347. width: auto;
  348. height: 50%;
  349. line-height: 0em;
  350. text-align: center;
  351. -webkit-transform: translateX(-50%);
  352. -ms-transform: translateX(-50%);
  353. transform: translateX(-50%);
  354. }
  355. .ui.vertical.divider:before,
  356. .ui.vertical.divider:after {
  357. position: absolute;
  358. left: 50%;
  359. content: '';
  360. z-index: 3;
  361. border-left: 1px solid rgba(0, 0, 0, 0.1);
  362. border-right: 1px solid rgba(255, 255, 255, 0.2);
  363. width: 0%;
  364. height: -webkit-calc(100% - 1rem );
  365. height: calc(100% - 1rem );
  366. }
  367. .ui.vertical.divider:before {
  368. top: -100%;
  369. }
  370. .ui.vertical.divider:after {
  371. top: auto;
  372. bottom: 0px;
  373. }
  374. /* Inside grid */
  375. @media only screen and (max-width: 767px) {
  376. .ui.stackable.grid .ui.vertical.divider,
  377. .ui.grid .stackable.row .ui.vertical.divider {
  378. position: relative;
  379. margin: 1rem 0rem;
  380. left: 0;
  381. height: auto;
  382. overflow: hidden;
  383. line-height: 1;
  384. text-align: center;
  385. }
  386. .ui.stackable.grid .ui.vertical.divider:before,
  387. .ui.grid .stackable.row .ui.vertical.divider:before,
  388. .ui.stackable.grid .ui.vertical.divider:after,
  389. .ui.grid .stackable.row .ui.vertical.divider:after {
  390. position: absolute;
  391. left: auto;
  392. content: '';
  393. z-index: 3;
  394. width: 50%;
  395. top: 50%;
  396. height: 0px;
  397. border-top: 1px solid rgba(0, 0, 0, 0.1);
  398. border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  399. }
  400. .ui.stackable.grid .ui.vertical.divider:before,
  401. .ui.grid .stackable.row .ui.vertical.divider:before {
  402. margin-left: -51.5%;
  403. }
  404. .ui.stackable.grid .ui.vertical.divider:after,
  405. .ui.grid .stackable.row .ui.vertical.divider:after {
  406. margin-left: 1.5%;
  407. }
  408. }
  409. /*--------------
  410. Icon
  411. ---------------*/
  412. .ui.divider > .icon {
  413. margin: 0rem;
  414. font-size: 1rem;
  415. height: 1em;
  416. vertical-align: middle;
  417. }
  418. /*******************************
  419. Variations
  420. *******************************/
  421. /*--------------
  422. Hidden
  423. ---------------*/
  424. .ui.hidden.divider {
  425. border-color: transparent !important;
  426. }
  427. /*--------------
  428. Inverted
  429. ---------------*/
  430. .ui.divider.inverted {
  431. color: #ffffff;
  432. }
  433. .ui.vertical.inverted.divider,
  434. .ui.horizontal.inverted.divider {
  435. color: #ffffff;
  436. }
  437. .ui.divider.inverted,
  438. .ui.divider.inverted:after,
  439. .ui.divider.inverted:before {
  440. border-top-color: rgba(0, 0, 0, 0.15) !important;
  441. border-bottom-color: rgba(255, 255, 255, 0.15) !important;
  442. border-left-color: rgba(0, 0, 0, 0.15) !important;
  443. border-right-color: rgba(255, 255, 255, 0.15) !important;
  444. }
  445. /*--------------
  446. Fitted
  447. ---------------*/
  448. .ui.fitted.divider {
  449. margin: 0em;
  450. }
  451. /*--------------
  452. Clearing
  453. ---------------*/
  454. .ui.clearing.divider {
  455. clear: both;
  456. }
  457. /*--------------
  458. Section
  459. ---------------*/
  460. .ui.section.divider {
  461. margin-top: 2rem;
  462. margin-bottom: 2rem;
  463. }
  464. /*--------------
  465. Sizes
  466. ---------------*/
  467. .ui.divider {
  468. font-size: 1rem;
  469. }
  470. /*******************************
  471. Overrides
  472. *******************************/
  473. /*******************************
  474. Overrides
  475. *******************************/