版博士V2.0程序
Nie możesz wybrać więcej, niż 25 tematów Tematy muszą się zaczynać od litery lub cyfry, mogą zawierać myślniki ('-') i mogą mieć do 35 znaków.

index.js 4.0 KiB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138
  1. 'use strict';
  2. var createPlugin = function (plugin, config) {
  3. return {
  4. handler: plugin,
  5. config: config,
  6. };
  7. };
  8. createPlugin.withOptions = function (pluginFunction, configFunction) {
  9. if (configFunction === void 0) { configFunction = function () { return ({}); }; }
  10. var optionsFunction = function (options) {
  11. if (options === void 0) { options = {}; }
  12. return {
  13. __options: options,
  14. handler: pluginFunction(options),
  15. config: configFunction(options),
  16. };
  17. };
  18. optionsFunction.__isOptionsFunction = true;
  19. // Expose plugin dependencies so that `object-hash` returns a different
  20. // value if anything here changes, to ensure a rebuild is triggered.
  21. optionsFunction.__pluginFunction = pluginFunction;
  22. optionsFunction.__configFunction = configFunction;
  23. return optionsFunction;
  24. };
  25. var index = createPlugin(function (_a) {
  26. var addUtilities = _a.addUtilities, addDynamic = _a.addDynamic, theme = _a.theme, variants = _a.variants;
  27. addUtilities({
  28. '.aspect-none': {
  29. position: 'static',
  30. paddingBottom: '0',
  31. '> *': {
  32. position: 'static',
  33. height: 'auto',
  34. width: 'auto',
  35. top: 'auto',
  36. right: 'auto',
  37. bottom: 'auto',
  38. left: 'auto',
  39. },
  40. },
  41. }, { layer: 'components' });
  42. addUtilities({
  43. '.aspect-auto': {
  44. 'aspect-ratio': 'auto',
  45. },
  46. }, { layer: 'components' });
  47. addUtilities({
  48. '.aspect-square': {
  49. 'aspect-ratio': '1 / 1',
  50. },
  51. }, { layer: 'components' });
  52. addUtilities({
  53. '.aspect-video': {
  54. 'aspect-ratio': '16 / 9',
  55. },
  56. }, { layer: 'components' });
  57. addDynamic('aspect-w', function (_a) {
  58. var Utility = _a.Utility, Style = _a.Style;
  59. var prop = Utility.handler
  60. .handleStatic(theme('aspectRatio'))
  61. .handleNumber(1, undefined, 'float')
  62. .value;
  63. if (!prop)
  64. return;
  65. return Style.generate(Utility.class, {
  66. '--tw-aspect-w': prop,
  67. position: 'relative',
  68. paddingBottom: 'calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%)',
  69. '> *': {
  70. position: 'absolute',
  71. height: '100%',
  72. width: '100%',
  73. top: '0',
  74. right: '0',
  75. bottom: '0',
  76. left: '0',
  77. },
  78. });
  79. }, {
  80. layer: 'components',
  81. variants: variants('aspectRatio'),
  82. group: 'aspectRatio',
  83. completions: [
  84. 'aspect-w-{float}',
  85. ],
  86. });
  87. addDynamic('aspect-h', function (_a) {
  88. var Utility = _a.Utility;
  89. return Utility.handler
  90. .handleStatic(theme('aspectRatio'))
  91. .handleNumber(1, undefined, 'float')
  92. .createProperty('--tw-aspect-h');
  93. }, {
  94. layer: 'components',
  95. variants: variants('aspectRatio'),
  96. group: 'aspectRatio',
  97. completions: [
  98. 'aspect-h-{float}',
  99. ],
  100. });
  101. addDynamic('aspect', function (_a) {
  102. var Utility = _a.Utility, Style = _a.Style;
  103. // aspect-h/w
  104. var value = Utility.handler.handleFraction().value;
  105. if (value) {
  106. return Style.generate(Utility.class, {
  107. position: 'relative',
  108. paddingBottom: value,
  109. '> *': {
  110. position: 'absolute',
  111. height: '100%',
  112. width: '100%',
  113. top: '0',
  114. right: '0',
  115. bottom: '0',
  116. left: '0',
  117. },
  118. });
  119. }
  120. }, {
  121. layer: 'components',
  122. group: 'aspectRatio',
  123. completions: [
  124. 'aspect-{fraction}',
  125. ],
  126. });
  127. }, {
  128. theme: {
  129. aspectRatio: {},
  130. },
  131. variants: {
  132. aspectRatio: ['responsive'],
  133. },
  134. });
  135. module.exports = index;