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.

357 lines
8.8 KiB

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 Default
  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. /* Max 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. /* Solid Background Color */
  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. /*------------------
  148. Load Theme
  149. -------------------*/
  150. /*------------------
  151. Load Site
  152. -------------------*/
  153. /*******************************
  154. User Global Variables
  155. *******************************/
  156. /*******************************
  157. User Variable Overrides
  158. *******************************/
  159. /*------------------
  160. Override Mix-in
  161. -------------------*/
  162. /*******************************
  163. Divider
  164. *******************************/
  165. .ui.divider {
  166. margin: 1rem 0rem;
  167. line-height: 1;
  168. height: 0em;
  169. font-weight: bold;
  170. text-transform: uppercase;
  171. color: rgba(0, 0, 0, 0.85);
  172. -webkit-user-select: none;
  173. -moz-user-select: none;
  174. -ms-user-select: none;
  175. user-select: none;
  176. -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  177. }
  178. /*--------------
  179. Basic
  180. ---------------*/
  181. .ui.divider:not(.vertical):not(.horizontal) {
  182. border-top: 1px solid rgba(0, 0, 0, 0.1);
  183. border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  184. }
  185. /*--------------
  186. Coupling
  187. ---------------*/
  188. .ui.grid > .ui.divider {
  189. font-size: 1rem;
  190. }
  191. /*--------------
  192. Horizontal
  193. ---------------*/
  194. .ui.horizontal.divider {
  195. position: relative;
  196. height: auto;
  197. margin: '';
  198. overflow: hidden;
  199. line-height: 1;
  200. text-align: center;
  201. }
  202. .ui.horizontal.divider:before,
  203. .ui.horizontal.divider:after {
  204. position: absolute;
  205. content: '';
  206. z-index: 3;
  207. width: 50%;
  208. top: 50%;
  209. height: 0px;
  210. border-top: 1px solid rgba(0, 0, 0, 0.1);
  211. border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  212. }
  213. .ui.horizontal.divider:before {
  214. margin-left: -51.5%;
  215. }
  216. .ui.horizontal.divider:after {
  217. margin-left: 1.5%;
  218. }
  219. /*--------------
  220. Vertical
  221. ---------------*/
  222. .ui.vertical.divider {
  223. position: absolute;
  224. z-index: 2;
  225. top: 50%;
  226. left: 50%;
  227. margin: 0rem;
  228. padding: 0em;
  229. width: auto;
  230. height: 50%;
  231. line-height: 0em;
  232. text-align: center;
  233. }
  234. .ui.vertical.divider:before,
  235. .ui.vertical.divider:after {
  236. position: absolute;
  237. left: 50%;
  238. content: '';
  239. z-index: 3;
  240. border-left: 1px solid rgba(0, 0, 0, 0.1);
  241. border-right: 1px solid rgba(255, 255, 255, 0.2);
  242. width: 0%;
  243. height: -webkit-calc(100% - 1rem );
  244. height: calc(100% - 1rem );
  245. }
  246. .ui.vertical.divider:before {
  247. top: -100%;
  248. }
  249. .ui.vertical.divider:after {
  250. top: auto;
  251. bottom: 0px;
  252. }
  253. /* Inside grid */
  254. @media only screen and (max-width: 767px) {
  255. .ui.stackable.grid .ui.vertical.divider,
  256. .ui.grid .stackable.row .ui.vertical.divider {
  257. position: relative;
  258. margin: 1rem 0rem;
  259. left: 0;
  260. height: auto;
  261. overflow: hidden;
  262. line-height: 1;
  263. text-align: center;
  264. }
  265. .ui.stackable.grid .ui.vertical.divider:before,
  266. .ui.grid .stackable.row .ui.vertical.divider:before,
  267. .ui.stackable.grid .ui.vertical.divider:after,
  268. .ui.grid .stackable.row .ui.vertical.divider:after {
  269. position: absolute;
  270. left: auto;
  271. content: '';
  272. z-index: 3;
  273. width: 50%;
  274. top: 50%;
  275. height: 0px;
  276. border-top: 1px solid rgba(0, 0, 0, 0.1);
  277. border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  278. }
  279. .ui.stackable.grid .ui.vertical.divider:before,
  280. .ui.grid .stackable.row .ui.vertical.divider:before {
  281. margin-left: -51.5%;
  282. }
  283. .ui.stackable.grid .ui.vertical.divider:after,
  284. .ui.grid .stackable.row .ui.vertical.divider:after {
  285. margin-left: 1.5%;
  286. }
  287. }
  288. /*--------------
  289. Icon
  290. ---------------*/
  291. .ui.divider > .icon {
  292. margin: 0rem;
  293. font-size: 1rem;
  294. height: 1em;
  295. vertical-align: middle;
  296. }
  297. /*******************************
  298. Variations
  299. *******************************/
  300. /*--------------
  301. Hidden
  302. ---------------*/
  303. .ui.hidden.divider {
  304. border-color: transparent !important;
  305. }
  306. /*--------------
  307. Inverted
  308. ---------------*/
  309. .ui.divider.inverted {
  310. color: #ffffff;
  311. }
  312. .ui.vertical.inverted.divider,
  313. .ui.horizontal.inverted.divider {
  314. color: #ffffff;
  315. }
  316. .ui.divider.inverted,
  317. .ui.divider.inverted:after,
  318. .ui.divider.inverted:before {
  319. border-top-color: rgba(0, 0, 0, 0.15) !important;
  320. border-bottom-color: rgba(255, 255, 255, 0.15) !important;
  321. border-left-color: rgba(0, 0, 0, 0.15) !important;
  322. border-right-color: rgba(255, 255, 255, 0.15) !important;
  323. }
  324. /*--------------
  325. Fitted
  326. ---------------*/
  327. .ui.fitted.divider {
  328. margin: 0em;
  329. }
  330. /*--------------
  331. Clearing
  332. ---------------*/
  333. .ui.clearing.divider {
  334. clear: both;
  335. }
  336. /*--------------
  337. Section
  338. ---------------*/
  339. .ui.section.divider {
  340. margin-top: 2rem;
  341. margin-bottom: 2rem;
  342. }
  343. /*******************************
  344. Overrides
  345. *******************************/
  346. /*******************************
  347. Overrides
  348. *******************************/