Requisition List styles

Customize the Requisition List drop-in using CSS classes and design tokens. This page covers the Requisition List-specific container classes and customization examples. For comprehensive information about design tokens, responsive breakpoints, and styling best practices, see Styling Drop-In Components.

Version: 0.7.0-beta

Customization example

Add this to the CSS file of the specific commerce block where you’re using the Requisition List drop-in.

For a complete list of available design tokens (colors, spacing, typography, etc.), see the Design tokens reference.

1
.page-size-picker {
2
  gap: var(--spacing-xsmall);
3
  font: var(--type-body-1-default-font);
4
  letter-spacing: var(--type-body-1-default-letter-spacing);
5
  gap: var(--spacing-small);
6
  font: var(--type-body-1-default-font);
7
  letter-spacing: var(--type-body-1-default-letter-spacing);
8
}

Container classes

The Requisition List drop-in uses BEM-style class naming. Use the browser DevTools to inspect elements and find specific class names.

1
/* BatchActions */
2
.requisition-list-view__bulk-actions {}
3
.requisition-list-view__item {}
4
.requisition-list-view__pagination {}
5
.requisition-list-view__pagination-controls {}
6

7
/* EmptyList */
8
.empty-list {}
9

10
/* NotFound */
11
.not-found {}
12

13
/* PageSizePicker */
14
.page-size-picker {}
15
.page-size-picker__label {}
16
.page-size-picker__select {}
17

18
/* ProductListTable */
19
.requisition-list-view-product-list-table-container {}
20
.requisition-list-view-product-list-table-container__submit-container {}
21
.requisition-list-view-product-list-table__checkbox {}
22
.requisition-list-view-product-list-table__discount-container {}
23
.requisition-list-view-product-list-table__index-container {}
24
.requisition-list-view-product-list-table__item-container {}
25
.requisition-list-view-product-list-table__item-details {}
26
.requisition-list-view-product-list-table__product-configurable-name {}
27
.requisition-list-view-product-list-table__product-name {}
28
.requisition-list-view-product-list-table__quantity {}
29
.requisition-list-view-product-list-table__sku {}
30
.requisition-list-view-product-list-table__thumbnail {}
31

32
/* RequisitionListActions */
33
.requisition-list-actions {}
34
.requisition-list-actions--selectable {}
35
.requisition-list-actions__title {}
36

37
/* RequisitionListForm */
38
.requisition-list-form {}
39
.requisition-list-form__actions {}
40
.requisition-list-form__form {}
41
.requisition-list-form__notification {}
42
.requisition-list-form__title {}
43
.requisition-list-form_progress-spinner {}
44

45
/* RequisitionListGridWrapper */
46
.dropin-button--tertiary {}
47
.requisition-list-empty-list {}
48
.requisition-list-grid-wrapper__actions {}
49
.requisition-list-grid-wrapper__add-new {}
50
.requisition-list-grid-wrapper__content {}
51
.requisition-list-grid-wrapper__list-header {}
52
.requisition-list-grid-wrapper__name__description {}
53
.requisition-list-grid-wrapper__name__title {}
54
.requisition-list-grid-wrapper__pagination {}
55
.requisition-list-grid-wrapper__pagination-controls {}
56

57
/* RequisitionListHeader */
58
.requisition-list-header {}
59
.requisition-list-header__action-link {}
60
.requisition-list-header__actions {}
61
.requisition-list-header__back {}
62
.requisition-list-header__back-arrow {}
63
.requisition-list-header__back-link {}
64
.requisition-list-header__description {}
65
.requisition-list-header__main {}
66
.requisition-list-header__title {}
67
.requisition-list-header__title-section {}
68

69
/* RequisitionListModal */
70
.dropin-modal {}
71
.dropin-modal__body--full {}
72
.dropin-modal__body--medium {}
73
.dropin-modal__content {}
74
.dropin-modal__header-title {}
75
.dropin-modal__header-title-content {}
76
.requisition-list-modal {}
77
.requisition-list-modal--overlay {}
78
.requisition-list-modal__buttons {}
79
.requisition-list-modal__spinner {}
80

81
/* RequisitionListSelector */
82
.dropin-card--secondary {}
83
.dropin-card__content {}
84
.requisition-list-actions {}
85
.requisition-list-form__actions {}
86
.requisition-list-modal {}
87
.requisition-list-selector__available-lists {}
88
.requisition-list-selector__form {}
89

90
/* RequisitionListView */
91
.requisition-list-view__container {}
92
.requisition-list-view__loading {}
93
.requisition-list-view__pagination {}
94
.requisition-list-view__pagination-items {}
95
.requisition-list-view__pagination-picker {}

For the source CSS files, see the storefront-requisition-list repository.