API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Oct 22nd, 2016
52
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.96 KB | None | 0 0
raw download clone embed print report
  1. /* -----------------------------------------------------------------------------
  2.  
  3. Paragraph Section CSS.
  4.  
  5. The following classes are available if the different Paragraph types
  6. need their own individual styling.
  7.  
  8. .paragraph.paragraph--type--blank {}
  9. .paragraph.paragraph--type--carousel {} -- Is used below
  10. .paragraph.paragraph--type--columns {} -- Is used below
  11. .paragraph.paragraph--type--contact {}
  12. .paragraph.paragraph--type--image {}
  13. .paragraph.paragraph--type--simple {}
  14. .paragraph.paragraph--type--view {}
  15.  
  16. ----------------------------------------------------------------------------- */
  17. /* -------------------------------------------------------------------------- */
  18. /* Base Paragraph Styling. */
  19. /* -------------------------------------------------------------------------- */
  20. .paragraph {
  21. margin-left: -15px;
  22. margin-right: -15px;
  23. margin-left: 0;
  24. margin-right: 0;
  25. }
  26. .paragraph > section {
  27. padding-top: 30px;
  28. }
  29. .paragraph:last-of-type {
  30. padding-bottom: 30px;
  31. }
  32. /* -------------------------------------------------------------------------- */
  33. /* Here we add Widths. */
  34. /* -------------------------------------------------------------------------- */
  35. /* Adds Width Element -- Tiny. */
  36. .paragraph.paragraph--width--tiny > section {
  37. position: relative;
  38. min-height: 1px;
  39. padding-left: 15px;
  40. padding-right: 15px;
  41. }
  42. @media (min-width: 768px) {
  43. .paragraph.paragraph--width--tiny > section {
  44. float: left;
  45. width: 33.33333333%;
  46. }
  47. }
  48. @media (min-width: 768px) {
  49. .paragraph.paragraph--width--tiny > section {
  50. margin-left: 33.33333333%;
  51. }
  52. }
  53. @media (min-width: 992px) {
  54. .paragraph.paragraph--width--tiny > section {
  55. float: left;
  56. width: 33.33333333%;
  57. }
  58. }
  59. @media (min-width: 992px) {
  60. .paragraph.paragraph--width--tiny > section {
  61. margin-left: 33.33333333%;
  62. }
  63. }
  64. @media (min-width: 1200px) {
  65. .paragraph.paragraph--width--tiny > section {
  66. float: left;
  67. width: 33.33333333%;
  68. }
  69. }
  70. @media (min-width: 1200px) {
  71. .paragraph.paragraph--width--tiny > section {
  72. margin-left: 33.33333333%;
  73. }
  74. }
  75. /* Adds Width Element -- Narrow. */
  76. .paragraph.paragraph--width--narrow > section {
  77. position: relative;
  78. min-height: 1px;
  79. padding-left: 15px;
  80. padding-right: 15px;
  81. }
  82. @media (min-width: 768px) {
  83. .paragraph.paragraph--width--narrow > section {
  84. float: left;
  85. width: 50%;
  86. }
  87. }
  88. @media (min-width: 768px) {
  89. .paragraph.paragraph--width--narrow > section {
  90. margin-left: 25%;
  91. }
  92. }
  93. @media (min-width: 992px) {
  94. .paragraph.paragraph--width--narrow > section {
  95. float: left;
  96. width: 50%;
  97. }
  98. }
  99. @media (min-width: 992px) {
  100. .paragraph.paragraph--width--narrow > section {
  101. margin-left: 25%;
  102. }
  103. }
  104. @media (min-width: 1200px) {
  105. .paragraph.paragraph--width--narrow > section {
  106. float: left;
  107. width: 50%;
  108. }
  109. }
  110. @media (min-width: 1200px) {
  111. .paragraph.paragraph--width--narrow > section {
  112. margin-left: 25%;
  113. }
  114. }
  115. /* Adds Width Element -- Medium. */
  116. .paragraph.paragraph--width--medium > section {
  117. position: relative;
  118. min-height: 1px;
  119. padding-left: 15px;
  120. padding-right: 15px;
  121. }
  122. @media (min-width: 768px) {
  123. .paragraph.paragraph--width--medium > section {
  124. float: left;
  125. width: 66.66666667%;
  126. }
  127. }
  128. @media (min-width: 768px) {
  129. .paragraph.paragraph--width--medium > section {
  130. margin-left: 16.66666667%;
  131. }
  132. }
  133. @media (min-width: 992px) {
  134. .paragraph.paragraph--width--medium > section {
  135. float: left;
  136. width: 66.66666667%;
  137. }
  138. }
  139. @media (min-width: 992px) {
  140. .paragraph.paragraph--width--medium > section {
  141. margin-left: 16.66666667%;
  142. }
  143. }
  144. @media (min-width: 1200px) {
  145. .paragraph.paragraph--width--medium > section {
  146. float: left;
  147. width: 66.66666667%;
  148. }
  149. }
  150. @media (min-width: 1200px) {
  151. .paragraph.paragraph--width--medium > section {
  152. margin-left: 16.66666667%;
  153. }
  154. }
  155. /* Adds Width Element -- Wide. */
  156. .paragraph.paragraph--width--wide > section {
  157. position: relative;
  158. min-height: 1px;
  159. padding-left: 15px;
  160. padding-right: 15px;
  161. }
  162. @media (min-width: 768px) {
  163. .paragraph.paragraph--width--wide > section {
  164. float: left;
  165. width: 83.33333333%;
  166. }
  167. }
  168. @media (min-width: 768px) {
  169. .paragraph.paragraph--width--wide > section {
  170. margin-left: 8.33333333%;
  171. }
  172. }
  173. @media (min-width: 992px) {
  174. .paragraph.paragraph--width--wide > section {
  175. float: left;
  176. width: 83.33333333%;
  177. }
  178. }
  179. @media (min-width: 992px) {
  180. .paragraph.paragraph--width--wide > section {
  181. margin-left: 8.33333333%;
  182. }
  183. }
  184. @media (min-width: 1200px) {
  185. .paragraph.paragraph--width--wide > section {
  186. float: left;
  187. width: 83.33333333%;
  188. }
  189. }
  190. @media (min-width: 1200px) {
  191. .paragraph.paragraph--width--wide > section {
  192. margin-left: 8.33333333%;
  193. }
  194. }
  195. /* Adds Width Element -- Full. */
  196. .paragraph.paragraph--width--full > section {
  197. position: relative;
  198. min-height: 1px;
  199. padding-left: 15px;
  200. padding-right: 15px;
  201. }
  202. @media (min-width: 768px) {
  203. .paragraph.paragraph--width--full > section {
  204. float: left;
  205. width: 100%;
  206. }
  207. }
  208. @media (min-width: 992px) {
  209. .paragraph.paragraph--width--full > section {
  210. float: left;
  211. width: 100%;
  212. }
  213. }
  214. @media (min-width: 1200px) {
  215. .paragraph.paragraph--width--full > section {
  216. float: left;
  217. width: 100%;
  218. }
  219. }
  220. /* -------------------------------------------------------------------------- */
  221. /* Here we add Colors. */
  222. /* -------------------------------------------------------------------------- */
  223. /* Add display so color shows */
  224. .paragraph.paragraph--color {
  225. display: inline-block;
  226. }
  227.  
  228. /* Adds bottom padding to fill in color. */
  229. .paragraph.paragraph--color section {
  230. padding-bottom: 30px;
  231. }
  232. /* -------------------------------------------------------------------------- */
  233. /* Lets Nest paragraphs in Columns and Slideshows. */
  234. /* -------------------------------------------------------------------------- */
  235. /* Resets Base Paragraph Styling for Nested Paragraphs. */
  236. .paragraph .paragraph,
  237. .paragraph .paragraph .paragraph {
  238. margin-left: 0;
  239. margin-right: 0;
  240. }
  241. .paragraph > section .paragraph > section,
  242. .paragraph > section .paragraph > section .paragraph > section {
  243. float: none;
  244. margin-left: 0;
  245. padding: 0;
  246. width: auto;
  247. }
  248. /* -------------------------------------------------------------------------- */
  249. /* Here we can customize the different types of Paragraphs. */
  250. /* -------------------------------------------------------------------------- */
  251. /* Columns Paragraph. */
  252. /* .paragraph.paragraph--type--columns */
  253. /* Removes Padding on Columns (Padding is on columns inside). */
  254. .paragraph.paragraph--type--columns > section {
  255. padding-left: 0;
  256. padding-right: 0;
  257. }
  258. /* Columns Modifiers inside of Columns Element */
  259. .paragraph--type--columns__6col,
  260. .paragraph--type--columns__5col {
  261. position: relative;
  262. min-height: 1px;
  263. padding-left: 15px;
  264. padding-right: 15px;
  265. }
  266. @media (min-width: 768px) {
  267. .paragraph--type--columns__6col,
  268. .paragraph--type--columns__5col {
  269. float: left;
  270. width: 16.66666667%;
  271. }
  272. }
  273. .paragraph--type--columns__4col {
  274. position: relative;
  275. min-height: 1px;
  276. padding-left: 15px;
  277. padding-right: 15px;
  278. }
  279. @media (min-width: 768px) {
  280. .paragraph--type--columns__4col {
  281. float: left;
  282. width: 25%;
  283. }
  284. }
  285. .paragraph--type--columns__3col {
  286. position: relative;
  287. min-height: 1px;
  288. padding-left: 15px;
  289. padding-right: 15px;
  290. }
  291. @media (min-width: 768px) {
  292. .paragraph--type--columns__3col {
  293. float: left;
  294. width: 33.33333333%;
  295. }
  296. }
  297. .paragraph--type--columns__2col {
  298. position: relative;
  299. min-height: 1px;
  300. padding-left: 15px;
  301. padding-right: 15px;
  302. }
  303. @media (min-width: 768px) {
  304. .paragraph--type--columns__2col {
  305. float: left;
  306. width: 50%;
  307. }
  308. }
  309. .paragraph--type--columns__1col {
  310. position: relative;
  311. min-height: 1px;
  312. padding-left: 15px;
  313. padding-right: 15px;
  314. }
  315. @media (min-width: 768px) {
  316. .paragraph--type--columns__1col {
  317. float: left;
  318. width: 100%;
  319. }
  320. }
  321. /* These allow us to change the width on a single paragraph in a Multicolumn. */
  322. .paragraph--type--columns__1col .paragraph.paragraph--width--tiny > section {
  323. position: relative;
  324. min-height: 1px;
  325. padding-left: 15px;
  326. padding-right: 15px;
  327. }
  328. @media (min-width: 768px) {
  329. .paragraph--type--columns__1col .paragraph.paragraph--width--tiny > section {
  330. float: left;
  331. width: 33.33333333%;
  332. }
  333. }
  334. @media (min-width: 768px) {
  335. .paragraph--type--columns__1col .paragraph.paragraph--width--tiny > section {
  336. margin-left: 33.33333333%;
  337. }
  338. }
  339. @media (min-width: 992px) {
  340. .paragraph--type--columns__1col .paragraph.paragraph--width--tiny > section {
  341. float: left;
  342. width: 33.33333333%;
  343. }
  344. }
  345. @media (min-width: 992px) {
  346. .paragraph--type--columns__1col .paragraph.paragraph--width--tiny > section {
  347. margin-left: 33.33333333%;
  348. }
  349. }
  350. @media (min-width: 1200px) {
  351. .paragraph--type--columns__1col .paragraph.paragraph--width--tiny > section {
  352. float: left;
  353. width: 33.33333333%;
  354. }
  355. }
  356. @media (min-width: 1200px) {
  357. .paragraph--type--columns__1col .paragraph.paragraph--width--tiny > section {
  358. margin-left: 33.33333333%;
  359. }
  360. }
  361. .paragraph--type--columns__1col .paragraph.paragraph--width--narrow > section {
  362. position: relative;
  363. min-height: 1px;
  364. padding-left: 15px;
  365. padding-right: 15px;
  366. }
  367. @media (min-width: 768px) {
  368. .paragraph--type--columns__1col .paragraph.paragraph--width--narrow > section {
  369. float: left;
  370. width: 50%;
  371. }
  372. }
  373. @media (min-width: 768px) {
  374. .paragraph--type--columns__1col .paragraph.paragraph--width--narrow > section {
  375. margin-left: 25%;
  376. }
  377. }
  378. @media (min-width: 992px) {
  379. .paragraph--type--columns__1col .paragraph.paragraph--width--narrow > section {
  380. float: left;
  381. width: 50%;
  382. }
  383. }
  384. @media (min-width: 992px) {
  385. .paragraph--type--columns__1col .paragraph.paragraph--width--narrow > section {
  386. margin-left: 25%;
  387. }
  388. }
  389. @media (min-width: 1200px) {
  390. .paragraph--type--columns__1col .paragraph.paragraph--width--narrow > section {
  391. float: left;
  392. width: 50%;
  393. }
  394. }
  395. @media (min-width: 1200px) {
  396. .paragraph--type--columns__1col .paragraph.paragraph--width--narrow > section {
  397. margin-left: 25%;
  398. }
  399. }
  400. .paragraph--type--columns__1col .paragraph.paragraph--width--medium > section {
  401. position: relative;
  402. min-height: 1px;
  403. padding-left: 15px;
  404. padding-right: 15px;
  405. }
  406. @media (min-width: 768px) {
  407. .paragraph--type--columns__1col .paragraph.paragraph--width--medium > section {
  408. float: left;
  409. width: 66.66666667%;
  410. }
  411. }
  412. @media (min-width: 768px) {
  413. .paragraph--type--columns__1col .paragraph.paragraph--width--medium > section {
  414. margin-left: 16.66666667%;
  415. }
  416. }
  417. @media (min-width: 992px) {
  418. .paragraph--type--columns__1col .paragraph.paragraph--width--medium > section {
  419. float: left;
  420. width: 66.66666667%;
  421. }
  422. }
  423. @media (min-width: 992px) {
  424. .paragraph--type--columns__1col .paragraph.paragraph--width--medium > section {
  425. margin-left: 16.66666667%;
  426. }
  427. }
  428. @media (min-width: 1200px) {
  429. .paragraph--type--columns__1col .paragraph.paragraph--width--medium > section {
  430. float: left;
  431. width: 66.66666667%;
  432. }
  433. }
  434. @media (min-width: 1200px) {
  435. .paragraph--type--columns__1col .paragraph.paragraph--width--medium > section {
  436. margin-left: 16.66666667%;
  437. }
  438. }
  439. .paragraph--type--columns__1col .paragraph.paragraph--width--wide > section {
  440. position: relative;
  441. min-height: 1px;
  442. padding-left: 15px;
  443. padding-right: 15px;
  444. }
  445. @media (min-width: 768px) {
  446. .paragraph--type--columns__1col .paragraph.paragraph--width--wide > section {
  447. float: left;
  448. width: 83.33333333%;
  449. }
  450. }
  451. @media (min-width: 768px) {
  452. .paragraph--type--columns__1col .paragraph.paragraph--width--wide > section {
  453. margin-left: 8.33333333%;
  454. }
  455. }
  456. @media (min-width: 992px) {
  457. .paragraph--type--columns__1col .paragraph.paragraph--width--wide > section {
  458. float: left;
  459. width: 83.33333333%;
  460. }
  461. }
  462. @media (min-width: 992px) {
  463. .paragraph--type--columns__1col .paragraph.paragraph--width--wide > section {
  464. margin-left: 8.33333333%;
  465. }
  466. }
  467. @media (min-width: 1200px) {
  468. .paragraph--type--columns__1col .paragraph.paragraph--width--wide > section {
  469. float: left;
  470. width: 83.33333333%;
  471. }
  472. }
  473. @media (min-width: 1200px) {
  474. .paragraph--type--columns__1col .paragraph.paragraph--width--wide > section {
  475. margin-left: 8.33333333%;
  476. }
  477. }
  478. .paragraph--type--columns__1col .paragraph.paragraph--width--full > section {
  479. position: relative;
  480. min-height: 1px;
  481. padding-left: 15px;
  482. padding-right: 15px;
  483. }
  484. @media (min-width: 768px) {
  485. .paragraph--type--columns__1col .paragraph.paragraph--width--full > section {
  486. float: left;
  487. width: 100%;
  488. }
  489. }
  490. @media (min-width: 992px) {
  491. .paragraph--type--columns__1col .paragraph.paragraph--width--full > section {
  492. float: left;
  493. width: 100%;
  494. }
  495. }
  496. @media (min-width: 1200px) {
  497. .paragraph--type--columns__1col .paragraph.paragraph--width--full > section {
  498. float: left;
  499. width: 100%;
  500. }
  501. }
  502. /* Columns Paragraph. */
  503. /* .paragraph.paragraph--type--carousel */
  504. /* Adds minimum height and top padding on a paragraph in a carousel */
  505. .paragraph.paragraph--type--carousel > .carousel-inner > .item > .paragraph > section {
  506. min-height: 420px;
  507. padding-top: 30px;
  508. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!