_split.scss 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. ///
  2. /// Hyperspace by HTML5 UP
  3. /// html5up.net | @ajlkn
  4. /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
  5. ///
  6. /* Split */
  7. .split {
  8. @include vendor('display', 'flex');
  9. > * {
  10. width: calc(50% - 2.5em);
  11. }
  12. > :nth-child(2n - 1) {
  13. padding-right: 2.5em;
  14. border-right: solid 1px _palette(border);
  15. }
  16. > :nth-child(2n) {
  17. padding-left: 2.5em;
  18. }
  19. &.style1 {
  20. > :nth-child(2n - 1) {
  21. width: calc(66.66666% - 2.5em);
  22. }
  23. > :nth-child(2n) {
  24. width: calc(33.33333% - 2.5em);
  25. }
  26. }
  27. @include breakpoint(xlarge) {
  28. > * {
  29. width: calc(50% - 2em);
  30. }
  31. > :nth-child(2n - 1) {
  32. padding-right: 2em;
  33. }
  34. > :nth-child(2n) {
  35. padding-left: 2em;
  36. }
  37. &.style1 {
  38. > :nth-child(2n - 1) {
  39. width: calc(66.66666% - 2em);
  40. }
  41. > :nth-child(2n) {
  42. width: calc(33.33333% - 2em);
  43. }
  44. }
  45. }
  46. @include breakpoint(medium) {
  47. display: block;
  48. > * {
  49. border-top: solid 1px _palette(border);
  50. margin: 4em 0 0 0;
  51. padding: 4em 0 0 0;
  52. width: 100% !important;
  53. }
  54. > :nth-child(2n - 1) {
  55. border-right: 0;
  56. padding-right: 0;
  57. }
  58. > :nth-child(2n) {
  59. padding-left: 0;
  60. }
  61. > :first-child {
  62. border-top: 0;
  63. margin-top: 0;
  64. padding-top: 0;
  65. }
  66. }
  67. @include breakpoint(small) {
  68. > * {
  69. margin: 3em 0 0 0;
  70. padding: 3em 0 0 0;
  71. }
  72. }
  73. }