style-editor-content-width.css 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  1. /**
  2. * Varia Editor Content Width Styles
  3. */
  4. /**
  5. * Abstracts
  6. * - Mixins, variables and functions
  7. */
  8. /* Sass Functions go here */
  9. /**
  10. * Map deep get
  11. * @author Hugo Giraudel
  12. * @access public
  13. * @param {Map} $map - Map
  14. * @param {Arglist} $keys - Key chain
  15. * @return {*} - Desired value
  16. *
  17. * Example:
  18. * $m-breakpoint: map-deep-get($__prefix-default-config, "layouts", "M");
  19. */
  20. /**
  21. * Deep set function to set a value in nested maps
  22. * @author Hugo Giraudel
  23. * @access public
  24. * @param {Map} $map - Map
  25. * @param {List} $keys - Key chaine
  26. * @param {*} $value - Value to assign
  27. * @return {Map}
  28. *
  29. * Example:
  30. * $__prefix-default-config: map-deep-set($__prefix-default-config, "layouts" "M", 650px);
  31. */
  32. /**
  33. * jQuery-style extend function
  34. * - Child themes can use this function to `reset` the values in
  35. * config maps without editing the `master` Sass files.
  36. * - src: https://www.sitepoint.com/extra-map-functions-sass/
  37. * - About `map-merge()`:
  38. * - - only takes 2 arguments
  39. * - - is not recursive
  40. * @param {Map} $map - first map
  41. * @param {ArgList} $maps - other maps
  42. * @param {Bool} $deep - recursive mode
  43. * @return {Map}
  44. *
  45. * Examples:
  46. $grid-configuration-default: (
  47. 'columns': 12,
  48. 'layouts': (
  49. 'small': 800px,
  50. 'medium': 1000px,
  51. 'large': 1200px,
  52. ),
  53. );
  54. $grid-configuration-custom: (
  55. 'layouts': (
  56. 'large': 1300px,
  57. 'huge': 1500px
  58. ),
  59. );
  60. $grid-configuration-user: (
  61. 'direction': 'ltr',
  62. 'columns': 16,
  63. 'layouts': (
  64. 'large': 1300px,
  65. 'huge': 1500px
  66. ),
  67. );
  68. // $deep: false
  69. $grid-configuration: map-extend($grid-configuration-default, $grid-configuration-custom, $grid-configuration-user);
  70. // --> ("columns": 16, "layouts": (("large": 1300px, "huge": 1500px)), "direction": "ltr")
  71. // $deep: true
  72. $grid-configuration: map-extend($grid-configuration-default, $grid-configuration-custom, $grid-configuration-user, true);
  73. // --> ("columns": 16, "layouts": (("small": 800px, "medium": 1000px, "large": 1300px, "huge": 1500px)), "direction": "ltr")
  74. */
  75. /**
  76. * Button
  77. */
  78. /**
  79. * Cover
  80. */
  81. /**
  82. * Heading
  83. */
  84. /**
  85. * List
  86. */
  87. /**
  88. * Pullquote
  89. */
  90. /**
  91. * Quote
  92. */
  93. /**
  94. * Separator
  95. */
  96. /**
  97. * Responsive breakpoints
  98. * - breakpoints values are defined in _config-global.scss
  99. */
  100. /**
  101. * Align widths
  102. * - Sets negative margin for .alignwide and .alignfull blocks
  103. */
  104. /**
  105. * Align wide widths
  106. * - Sets negative margin for .alignwide and .alignfull blocks
  107. */
  108. /**
  109. * Align container widths
  110. * - Sets a fixed-width on content within alignwide and alignfull blocks
  111. */
  112. /**
  113. * Crop Text Boundry
  114. * - Sets a fixed-width on content within alignwide and alignfull blocks
  115. */
  116. /**
  117. * Structure
  118. * - Only sets the default width for blocks in the editor
  119. */
  120. /**
  121. * Editor Structure
  122. */
  123. /**
  124. * Content Width
  125. * - Set vertical padding and horizontal margins
  126. */
  127. /* Width of "default" blocks */
  128. .wp-block {
  129. max-width: 780px; }
  130. /* Width of "wide" blocks */
  131. .wp-block[data-align="wide"] {
  132. max-width: 1022px; }