@patternfly/patternfly 6.5.0-prerelease.5 → 6.5.0-prerelease.50
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/assets/fontawesome/_variables.scss +2 -1
- package/assets/images/RHAiExperienceIcon.svg +27 -0
- package/assets/images/RHAutomationsLogo.svg +96 -0
- package/assets/images/RHServerStackIcon.svg +16 -0
- package/assets/images/compass--hero-bg.png +0 -0
- package/assets/images/compass--rh-wallpaper-dark.png +0 -0
- package/assets/images/compass--rh-wallpaper-light.png +0 -0
- package/assets/images/compass--wallpaper-dark.png +0 -0
- package/assets/images/compass--wallpaper-light.png +0 -0
- package/base/normalize.scss +7 -0
- package/base/patternfly-common.css +50 -0
- package/base/patternfly-common.scss +59 -0
- package/base/patternfly-svg-icons.css +11 -0
- package/base/patternfly-svg-icons.scss +14 -0
- package/base/patternfly-variables.css +345 -14
- package/base/patternfly-variables.scss +40 -0
- package/base/tokens/tokens-dark.scss +51 -3
- package/base/tokens/tokens-default.scss +67 -13
- package/base/tokens/tokens-glass-dark.scss +9 -0
- package/base/tokens/tokens-glass.scss +9 -0
- package/base/tokens/tokens-local.scss +16 -0
- package/base/tokens/tokens-palette.scss +3 -1
- package/base/tokens/tokens-redhat-dark.scss +14 -0
- package/base/tokens/tokens-redhat-glass-dark.scss +16 -0
- package/base/tokens/tokens-redhat-glass.scss +15 -0
- package/base/tokens/tokens-redhat-highcontrast-dark.scss +47 -0
- package/base/tokens/tokens-redhat-highcontrast.scss +127 -0
- package/base/tokens/tokens-redhat.scss +15 -0
- package/components/AboutModalBox/about-modal-box.css +36 -26
- package/components/Accordion/accordion.css +17 -14
- package/components/Accordion/accordion.scss +1 -2
- package/components/ActionList/action-list.css +2 -0
- package/components/ActionList/action-list.scss +2 -0
- package/components/Alert/alert.css +7 -5
- package/components/Alert/alert.scss +2 -1
- package/components/Avatar/avatar.css +12 -4
- package/components/BackgroundImage/background-image.css +6 -3
- package/components/Banner/banner.css +8 -6
- package/components/Brand/brand.css +3 -1
- package/components/Breadcrumb/breadcrumb.css +4 -3
- package/components/Button/button.css +117 -14
- package/components/Button/button.scss +127 -10
- package/components/CalendarMonth/calendar-month.css +4 -3
- package/components/Card/card.css +20 -7
- package/components/Card/card.scss +16 -2
- package/components/ClipboardCopy/clipboard-copy.css +7 -6
- package/components/ClipboardCopy/clipboard-copy.scss +3 -3
- package/components/CodeEditor/code-editor.css +1 -1
- package/components/CodeEditor/code-editor.scss +1 -1
- package/components/Compass/compass.css +320 -0
- package/components/Compass/compass.scss +350 -0
- package/components/DataList/data-list.css +34 -23
- package/components/DataList/data-list.scss +7 -2
- package/components/DescriptionList/description-list-order.scss +5 -1
- package/components/DescriptionList/description-list.css +7 -5
- package/components/DescriptionList/description-list.scss +5 -1
- package/components/Divider/divider.css +7 -5
- package/components/Drawer/drawer.css +110 -56
- package/components/Drawer/drawer.scss +69 -9
- package/components/DualListSelector/dual-list-selector.css +18 -12
- package/components/DualListSelector/dual-list-selector.scss +1 -1
- package/components/ExpandableSection/expandable-section.css +21 -16
- package/components/ExpandableSection/expandable-section.scss +6 -3
- package/components/Form/form.css +2 -2
- package/components/Form/form.scss +2 -2
- package/components/FormControl/form-control.css +3 -3
- package/components/FormControl/form-control.scss +3 -3
- package/components/Hero/hero.css +74 -0
- package/components/Hero/hero.scss +86 -0
- package/components/JumpLinks/jump-links.css +5 -4
- package/components/JumpLinks/jump-links.scss +6 -2
- package/components/Label/label-group.css +2 -2
- package/components/Label/label-group.scss +2 -2
- package/components/Label/label.css +4 -3
- package/components/Login/login.css +51 -37
- package/components/Masthead/masthead.css +70 -16
- package/components/Masthead/masthead.scss +54 -1
- package/components/Menu/menu.css +23 -14
- package/components/MenuToggle/menu-toggle.css +5 -1
- package/components/MenuToggle/menu-toggle.scss +6 -1
- package/components/ModalBox/modal-box.css +9 -7
- package/components/ModalBox/modal-box.scss +2 -2
- package/components/Nav/nav.css +74 -11
- package/components/Nav/nav.scss +77 -5
- package/components/NotificationDrawer/notification-drawer.css +19 -9
- package/components/NotificationDrawer/notification-drawer.scss +14 -5
- package/components/Page/page.css +55 -29
- package/components/Page/page.scss +44 -5
- package/components/Pagination/pagination.scss +5 -1
- package/components/ProgressStepper/progress-stepper.scss +5 -1
- package/components/Sidebar/sidebar.css +1 -1
- package/components/Sidebar/sidebar.scss +7 -3
- package/components/Skeleton/skeleton.css +16 -15
- package/components/Slider/slider.css +32 -18
- package/components/Switch/switch.css +4 -2
- package/components/Switch/switch.scss +1 -1
- package/components/Table/table-grid.css +28 -36
- package/components/Table/table-grid.scss +4 -4
- package/components/Table/table-tree-view.css +4 -2
- package/components/Table/table.css +33 -29
- package/components/Table/table.scss +2 -2
- package/components/Tabs/tabs.css +35 -18
- package/components/Tabs/tabs.scss +35 -7
- package/components/TextInputGroup/text-input-group.css +2 -2
- package/components/TextInputGroup/text-input-group.scss +2 -2
- package/components/ToggleGroup/toggle-group.css +34 -17
- package/components/ToggleGroup/toggle-group.scss +36 -20
- package/components/Toolbar/toolbar.css +47 -15
- package/components/Toolbar/toolbar.scss +34 -6
- package/components/TreeView/tree-view.css +45 -14
- package/components/TreeView/tree-view.scss +32 -1
- package/components/Wizard/wizard.css +21 -17
- package/components/Wizard/wizard.scss +4 -4
- package/components/_index.css +1602 -676
- package/components/_index.scss +3 -1
- package/docs/components/AboutModalBox/examples/AboutModalBox.md +13 -1
- package/docs/components/Accordion/examples/Accordion.md +390 -30
- package/docs/components/ActionList/examples/ActionList.md +143 -11
- package/docs/components/Alert/examples/Alert.md +678 -54
- package/docs/components/Avatar/examples/Avatar.md +4 -4
- package/docs/components/BackToTop/examples/BackToTop.md +13 -1
- package/docs/components/Banner/examples/Banner.md +65 -5
- package/docs/components/Brand/examples/Brand.md +2 -2
- package/docs/components/Breadcrumb/examples/Breadcrumb.md +299 -23
- package/docs/components/Button/examples/Button.md +2217 -241
- package/docs/components/CalendarMonth/examples/CalendarMonth.md +104 -8
- package/docs/components/Card/examples/Card.md +206 -4
- package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +286 -22
- package/docs/components/CodeBlock/examples/CodeBlock.md +104 -8
- package/docs/components/CodeEditor/examples/CodeEditor.md +195 -15
- package/docs/components/Compass/examples/Compass.css +17 -0
- package/docs/components/Compass/examples/Compass.md +119 -0
- package/docs/components/DataList/examples/DataList.md +405 -205
- package/docs/components/DatePicker/examples/DatePicker.md +78 -6
- package/docs/components/DescriptionList/examples/DescriptionList.md +327 -27
- package/docs/components/Divider/examples/Divider.md +2 -2
- package/docs/components/Drawer/examples/Drawer.md +353 -35
- package/docs/components/DualListSelector/examples/DualListSelector.md +1013 -143
- package/docs/components/ExpandableSection/examples/ExpandableSection.md +91 -7
- package/docs/components/Form/examples/Form.md +78 -6
- package/docs/components/Hero/examples/Hero.md +25 -0
- package/docs/components/Icon/examples/Icon.md +92 -8
- package/docs/components/InlineEdit/examples/InlineEdit.md +312 -24
- package/docs/components/InputGroup/examples/InputGroup.md +27 -3
- package/docs/components/JumpLinks/examples/JumpLinks.md +54 -6
- package/docs/components/Label/examples/Label.md +2834 -218
- package/docs/components/Login/examples/Login.md +26 -2
- package/docs/components/Masthead/examples/masthead.md +80 -1
- package/docs/components/Menu/examples/Menu.md +1458 -114
- package/docs/components/MenuToggle/examples/MenuToggle.md +53 -1
- package/docs/components/ModalBox/examples/ModalBox.md +287 -23
- package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +156 -12
- package/docs/components/Nav/examples/Navigation.md +798 -58
- package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +598 -46
- package/docs/components/OverflowMenu/examples/overflow-menu.md +78 -6
- package/docs/components/Page/examples/Page.md +51 -2
- package/docs/components/Pagination/examples/Pagination.md +627 -51
- package/docs/components/Popover/examples/Popover.md +286 -22
- package/docs/components/ProgressStepper/examples/ProgressStepper.md +275 -23
- package/docs/components/Sidebar/examples/Sidebar.md +1 -1
- package/docs/components/Slider/examples/Slider.md +52 -4
- package/docs/components/Table/examples/Table.md +875 -70
- package/docs/components/Tabs/examples/Tabs.md +4127 -320
- package/docs/components/TextInputGroup/examples/TextInputGroup.md +600 -48
- package/docs/components/ToggleGroup/examples/toggle-group.md +195 -15
- package/docs/components/Toolbar/examples/Toolbar.md +490 -42
- package/docs/components/TreeView/examples/TreeView.md +1390 -130
- package/docs/components/Wizard/examples/Wizard.md +492 -72
- package/docs/demos/AboutModal/examples/AboutModal.md +57 -9
- package/docs/demos/Alert/examples/Alert.md +236 -32
- package/docs/demos/BackToTop/examples/BackToTop.md +57 -9
- package/docs/demos/Banner/examples/Banner.md +88 -16
- package/docs/demos/Button/examples/Button.md +13 -1
- package/docs/demos/Card/examples/Card.md +399 -42
- package/docs/demos/CardView/examples/CardView.md +161 -17
- package/docs/demos/Compass/examples/Compass.md +6836 -0
- package/docs/demos/Dashboard/examples/Dashboard.md +173 -26
- package/docs/demos/DataList/examples/DataList.md +566 -65
- package/docs/demos/DescriptionList/examples/DescriptionList.md +156 -27
- package/docs/demos/Drawer/examples/Drawer.md +216 -45
- package/docs/demos/Form/examples/BasicForms.md +273 -21
- package/docs/demos/JumpLinks/examples/JumpLinks.md +272 -59
- package/docs/demos/Masthead/examples/Masthead.md +458 -89
- package/docs/demos/Modal/examples/Modal.md +342 -57
- package/docs/demos/Nav/examples/Nav.md +660 -87
- package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +1088 -140
- package/docs/demos/Page/examples/Page.md +618 -123
- package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -1
- package/docs/demos/PasswordStrength/examples/PasswordStrength.md +52 -4
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +691 -113
- package/docs/demos/Skeleton/examples/Skeleton.md +44 -8
- package/docs/demos/Table/examples/Table.md +3924 -256
- package/docs/demos/Tabs/examples/Tabs.md +407 -65
- package/docs/demos/Toolbar/examples/Toolbar.md +502 -52
- package/docs/demos/Wizard/examples/Wizard.md +796 -130
- package/docs/layouts/Bullseye/examples/Bullseye.css +2 -2
- package/docs/layouts/Bullseye/examples/Bullseye.md +2 -1
- package/docs/layouts/Flex/examples/Flex.css +3 -3
- package/docs/layouts/Flex/examples/Flex.md +3 -2
- package/docs/layouts/Gallery/examples/Gallery.css +2 -2
- package/docs/layouts/Gallery/examples/Gallery.md +4 -3
- package/docs/layouts/Grid/examples/Grid.css +1 -1
- package/docs/layouts/Grid/examples/Grid.md +6 -5
- package/docs/layouts/Level/examples/Level.css +3 -3
- package/docs/layouts/Level/examples/Level.md +2 -1
- package/docs/layouts/Split/examples/Split.css +1 -1
- package/docs/layouts/Split/examples/Split.md +2 -1
- package/docs/layouts/Stack/examples/Stack.css +3 -3
- package/docs/layouts/Stack/examples/Stack.md +2 -1
- package/docs/utilities/Accessibility/examples/Accessibility.md +3 -2
- package/docs/utilities/Alignment/examples/Alignment.css +4 -4
- package/docs/utilities/Alignment/examples/Alignment.md +3 -2
- package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +5 -4
- package/docs/utilities/BoxShadow/examples/box-shadow.css +2 -2
- package/docs/utilities/BoxShadow/examples/box-shadow.md +2 -1
- package/docs/utilities/Display/examples/Display.css +1 -1
- package/docs/utilities/Display/examples/Display.md +3 -2
- package/docs/utilities/Flex/examples/Flex.css +7 -7
- package/docs/utilities/Flex/examples/Flex.md +3 -2
- package/docs/utilities/Float/examples/Float.css +2 -2
- package/docs/utilities/Float/examples/Float.md +3 -2
- package/docs/utilities/Sizing/examples/Sizing.md +8 -7
- package/docs/utilities/Spacing/examples/Spacing.css +2 -2
- package/docs/utilities/Spacing/examples/Spacing.md +3 -2
- package/docs/utilities/Text/examples/Text.md +5 -4
- package/icons/PfIcons/add-circle-o.svg +4 -0
- package/icons/PfIcons/ansible-tower.svg +4 -0
- package/icons/PfIcons/applications.svg +4 -0
- package/icons/PfIcons/arrow.svg +4 -0
- package/icons/PfIcons/asleep.svg +4 -0
- package/icons/PfIcons/attention-bell.svg +4 -0
- package/icons/PfIcons/automation.svg +4 -0
- package/icons/PfIcons/bell.svg +4 -0
- package/icons/PfIcons/blueprint.svg +4 -0
- package/icons/PfIcons/build.svg +4 -0
- package/icons/PfIcons/builder-image.svg +4 -0
- package/icons/PfIcons/bundle.svg +4 -0
- package/icons/PfIcons/catalog.svg +4 -0
- package/icons/PfIcons/chat.svg +4 -0
- package/icons/PfIcons/close.svg +4 -0
- package/icons/PfIcons/cloud-security.svg +4 -0
- package/icons/PfIcons/cloud-tenant.svg +4 -0
- package/icons/PfIcons/cluster.svg +4 -0
- package/icons/PfIcons/connected.svg +4 -0
- package/icons/PfIcons/container-node.svg +4 -0
- package/icons/PfIcons/cpu.svg +4 -0
- package/icons/PfIcons/critical-risk.svg +4 -0
- package/icons/PfIcons/data-processor.svg +4 -0
- package/icons/PfIcons/data-sink.svg +4 -0
- package/icons/PfIcons/data-source.svg +4 -0
- package/icons/PfIcons/degraded.svg +4 -0
- package/icons/PfIcons/disconnected.svg +4 -0
- package/icons/PfIcons/domain.svg +4 -0
- package/icons/PfIcons/edit.svg +4 -0
- package/icons/PfIcons/enhancement.svg +4 -0
- package/icons/PfIcons/enterprise.svg +4 -0
- package/icons/PfIcons/equalizer.svg +4 -0
- package/icons/PfIcons/error-circle-o.svg +4 -0
- package/icons/PfIcons/export.svg +4 -0
- package/icons/PfIcons/filter.svg +4 -0
- package/icons/PfIcons/flavor.svg +4 -0
- package/icons/PfIcons/folder-close.svg +4 -0
- package/icons/PfIcons/folder-open.svg +4 -0
- package/icons/PfIcons/globe-route.svg +4 -0
- package/icons/PfIcons/help.svg +4 -0
- package/icons/PfIcons/history.svg +4 -0
- package/icons/PfIcons/home.svg +4 -0
- package/icons/PfIcons/import.svg +4 -0
- package/icons/PfIcons/in-progress.svg +4 -0
- package/icons/PfIcons/info.svg +4 -0
- package/icons/PfIcons/infrastructure.svg +4 -0
- package/icons/PfIcons/integration.svg +4 -0
- package/icons/PfIcons/key.svg +4 -0
- package/icons/PfIcons/locked.svg +4 -0
- package/icons/PfIcons/maintenance.svg +4 -0
- package/icons/PfIcons/memory.svg +4 -0
- package/icons/PfIcons/messages.svg +4 -0
- package/icons/PfIcons/middleware.svg +4 -0
- package/icons/PfIcons/migration.svg +4 -0
- package/icons/PfIcons/module.svg +4 -0
- package/icons/PfIcons/monitoring.svg +4 -0
- package/icons/PfIcons/multicluster.svg +4 -0
- package/icons/PfIcons/namespaces.svg +4 -0
- package/icons/PfIcons/network.svg +4 -0
- package/icons/PfIcons/new-process.svg +4 -0
- package/icons/PfIcons/not-started.svg +4 -0
- package/icons/PfIcons/off.svg +4 -0
- package/icons/PfIcons/ok.svg +4 -0
- package/icons/PfIcons/on-running.svg +4 -0
- package/icons/PfIcons/on.svg +4 -0
- package/icons/PfIcons/open-drawer-right.svg +4 -0
- package/icons/PfIcons/openshift.svg +4 -0
- package/icons/PfIcons/openstack.svg +4 -0
- package/icons/PfIcons/optimize.svg +4 -0
- package/icons/PfIcons/orders.svg +4 -0
- package/icons/PfIcons/os-image.svg +4 -0
- package/icons/PfIcons/package.svg +4 -0
- package/icons/PfIcons/panel-close.svg +4 -0
- package/icons/PfIcons/panel-open.svg +4 -0
- package/icons/PfIcons/paused.svg +4 -0
- package/icons/PfIcons/pending.svg +4 -0
- package/icons/PfIcons/pficon-dragdrop.svg +4 -0
- package/icons/PfIcons/pficon-history.svg +4 -0
- package/icons/PfIcons/pficon-network-range.svg +4 -0
- package/icons/PfIcons/pficon-satellite.svg +4 -0
- package/icons/PfIcons/pficon-sort-common-asc.svg +4 -0
- package/icons/PfIcons/pficon-sort-common-desc.svg +4 -0
- package/icons/PfIcons/pficon-template.svg +4 -0
- package/icons/PfIcons/pficon-vcenter.svg +4 -0
- package/icons/PfIcons/plugged.svg +4 -0
- package/icons/PfIcons/port.svg +4 -0
- package/icons/PfIcons/print.svg +4 -0
- package/icons/PfIcons/private.svg +4 -0
- package/icons/PfIcons/process-automation.svg +4 -0
- package/icons/PfIcons/project.svg +4 -0
- package/icons/PfIcons/rebalance.svg +4 -0
- package/icons/PfIcons/rebooting.svg +4 -0
- package/icons/PfIcons/regions.svg +4 -0
- package/icons/PfIcons/registry.svg +4 -0
- package/icons/PfIcons/remove2.svg +4 -0
- package/icons/PfIcons/replicator.svg +4 -0
- package/icons/PfIcons/repository.svg +4 -0
- package/icons/PfIcons/resource-pool.svg +4 -0
- package/icons/PfIcons/resources-almost-empty.svg +4 -0
- package/icons/PfIcons/resources-almost-full.svg +4 -0
- package/icons/PfIcons/resources-empty.svg +4 -0
- package/icons/PfIcons/resources-full.svg +4 -0
- package/icons/PfIcons/running.svg +4 -0
- package/icons/PfIcons/save.svg +4 -0
- package/icons/PfIcons/screen.svg +4 -0
- package/icons/PfIcons/security.svg +4 -0
- package/icons/PfIcons/server-group.svg +4 -0
- package/icons/PfIcons/server.svg +4 -0
- package/icons/PfIcons/service-catalog.svg +4 -0
- package/icons/PfIcons/service.svg +4 -0
- package/icons/PfIcons/services.svg +4 -0
- package/icons/PfIcons/severity-critical.svg +4 -0
- package/icons/PfIcons/severity-important.svg +4 -0
- package/icons/PfIcons/severity-minor.svg +4 -0
- package/icons/PfIcons/severity-moderate.svg +4 -0
- package/icons/PfIcons/severity-none.svg +4 -0
- package/icons/PfIcons/severity-undefined.svg +4 -0
- package/icons/PfIcons/spinner.svg +4 -0
- package/icons/PfIcons/spinner2.svg +4 -0
- package/icons/PfIcons/storage-domain.svg +4 -0
- package/icons/PfIcons/task.svg +4 -0
- package/icons/PfIcons/tenant.svg +4 -0
- package/icons/PfIcons/thumb-tack.svg +4 -0
- package/icons/PfIcons/topology.svg +4 -0
- package/icons/PfIcons/treeview.svg +4 -0
- package/icons/PfIcons/trend-down.svg +4 -0
- package/icons/PfIcons/trend-up.svg +4 -0
- package/icons/PfIcons/unknown.svg +4 -0
- package/icons/PfIcons/unlocked.svg +4 -0
- package/icons/PfIcons/unplugged.svg +4 -0
- package/icons/PfIcons/user.svg +4 -0
- package/icons/PfIcons/users.svg +4 -0
- package/icons/PfIcons/virtual-machine.svg +4 -0
- package/icons/PfIcons/volume.svg +4 -0
- package/icons/PfIcons/warning-triangle.svg +4 -0
- package/icons/PfIcons/zone.svg +4 -0
- package/layouts/Flex/flex.scss +83 -19
- package/layouts/Gallery/gallery.css +6 -2
- package/layouts/_index.css +6 -2
- package/package.json +34 -16
- package/patternfly-base-no-globals.css +406 -14
- package/patternfly-base.css +413 -14
- package/patternfly-charts.css +3 -3
- package/patternfly-no-globals.css +1947 -625
- package/patternfly.css +1954 -625
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/sass-utilities/functions.scss +32 -25
- package/sass-utilities/mixins.scss +36 -20
- package/sass-utilities/namespaces-components.scss +6 -0
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
.ws-core-
|
|
2
|
-
.ws-core-
|
|
1
|
+
.ws-core-f-bullseye .pf-v6-l-bullseye,
|
|
2
|
+
.ws-core-f-bullseye .pf-v6-l-bullseye__item {
|
|
3
3
|
padding: var(--pf-t--global--spacer--sm);
|
|
4
4
|
border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
|
|
5
5
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
.ws-core-
|
|
2
|
-
.ws-core-
|
|
3
|
-
.ws-core-
|
|
1
|
+
.ws-core-f-flex-border,
|
|
2
|
+
.ws-core-f-flex .pf-v6-l-flex .pf-v6-l-flex,
|
|
3
|
+
.ws-core-f-flex .pf-v6-l-flex__item {
|
|
4
4
|
padding: var(--pf-t--global--spacer--sm);
|
|
5
5
|
border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
|
|
6
6
|
}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
id: Flex
|
|
3
|
-
section:
|
|
3
|
+
section: foundations-and-styles
|
|
4
|
+
subsection: layouts
|
|
4
5
|
cssPrefix: pf-v6-l-flex
|
|
5
6
|
---import './Flex.css'
|
|
6
7
|
|
|
@@ -20,7 +21,7 @@ The flex layout provides two ways of spacing its direct children.
|
|
|
20
21
|
|
|
21
22
|
### Breakpoints
|
|
22
23
|
|
|
23
|
-
[Breakpoints](/tokens/all-
|
|
24
|
+
[Breakpoints](/foundations-and-styles/design-tokens/all-design-tokens) `-on-sm`, `-on-md`, `-on-lg`, `-on-xl`, and `-on-2xl` are provided.
|
|
24
25
|
|
|
25
26
|
### Usefulness
|
|
26
27
|
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
.ws-core-
|
|
2
|
-
.ws-core-
|
|
1
|
+
.ws-core-f-gallery .pf-v6-l-gallery,
|
|
2
|
+
.ws-core-f-gallery .pf-v6-l-gallery__item {
|
|
3
3
|
padding: var(--pf-t--global--spacer--sm);
|
|
4
4
|
border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
|
|
5
5
|
}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
id: Gallery
|
|
3
|
-
section:
|
|
3
|
+
section: foundations-and-styles
|
|
4
|
+
subsection: layouts
|
|
4
5
|
cssPrefix: pf-v6-l-gallery
|
|
5
6
|
---import './Gallery.css'
|
|
6
7
|
|
|
@@ -174,5 +175,5 @@ The gallery layout is designed so that all of its children are of uniform size,
|
|
|
174
175
|
| `.pf-v6-l-gallery` | `<div>` | Initializes a Gallery layout |
|
|
175
176
|
| `.pf-v6-l-gallery__item` | `<div>` | Explicitly sets the child for the gallery. This class isn't necessary, but it is included to keep inline with BEM convention, and to provide an entity that will later be used for applying modifiers. |
|
|
176
177
|
| `.pf-m-gutter` | `.pf-v6-l-gallery` | Adds space between children by using the globally defined gutter value. |
|
|
177
|
-
| `--pf-v6-l-gallery--GridTemplateColumns--min{-on-[breakpoint]}: {width}` | `.pf-v6-l-gallery` | Modifies the min value of `grid-template-columns` declaration at the optional [breakpoint](/tokens/all-
|
|
178
|
-
| `--pf-v6-l-gallery--GridTemplateColumns--max{-on-[breakpoint]}: {width}` | `.pf-v6-l-gallery` | Modifies the max value of `grid-template-columns` declaration at the optional [breakpoint](/tokens/all-
|
|
178
|
+
| `--pf-v6-l-gallery--GridTemplateColumns--min{-on-[breakpoint]}: {width}` | `.pf-v6-l-gallery` | Modifies the min value of `grid-template-columns` declaration at the optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |
|
|
179
|
+
| `--pf-v6-l-gallery--GridTemplateColumns--max{-on-[breakpoint]}: {width}` | `.pf-v6-l-gallery` | Modifies the max value of `grid-template-columns` declaration at the optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
id: Grid
|
|
3
|
-
section:
|
|
3
|
+
section: foundations-and-styles
|
|
4
|
+
subsection: layouts
|
|
4
5
|
cssPrefix: pf-v6-l-grid
|
|
5
6
|
---import './Grid.css'
|
|
6
7
|
|
|
@@ -318,7 +319,7 @@ The grid layout is based on CSS Grid’s two-dimensional system of columns and r
|
|
|
318
319
|
| `.pf-v6-l-grid` | `<div>` | Initializes the grid layout. |
|
|
319
320
|
| `.pf-v6-l-grid__item` | `<div>` | Explicitly sets a child of the grid. This class isn't necessary, but it is included to keep inline with BEM convention, and to provide an entity that will later be used for applying modifiers. |
|
|
320
321
|
| `.pf-m-gutter` | `.pf-v6-l-grid` | Adds space between children by using the globally defined gutter value. |
|
|
321
|
-
| `.pf-m-all-{1-12}-col{-on-[breakpoint]}` | `.pf-v6-l-grid` | Defines grid item size on grid container at optional [breakpoint](/tokens/all-
|
|
322
|
-
| `.pf-m-{1-12}-col{-on-[breakpoint]}` | `.pf-v6-l-grid__item` | Defines grid item size at optional [breakpoint](/tokens/all-
|
|
323
|
-
| `.pf-m-{2-x}-row{-on-[breakpoint]}` | `.pf-v6-l-grid__item` | Defines grid item row span at optional [breakpoint](/tokens/all-
|
|
324
|
-
| `--pf-v6-l-grid--item--Order{-on-[breakpoint]}: {order}` | `.pf-v6-l-grid > .pf-v6-l-grid`, `.pf-v6-l-grid__item` | Modifies the order of the grid layout element at optional [breakpoint](/tokens/all-
|
|
322
|
+
| `.pf-m-all-{1-12}-col{-on-[breakpoint]}` | `.pf-v6-l-grid` | Defines grid item size on grid container at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |
|
|
323
|
+
| `.pf-m-{1-12}-col{-on-[breakpoint]}` | `.pf-v6-l-grid__item` | Defines grid item size at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). Although not required, they are strongly suggested. If not used, grid item will default to 12 col. |
|
|
324
|
+
| `.pf-m-{2-x}-row{-on-[breakpoint]}` | `.pf-v6-l-grid__item` | Defines grid item row span at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). For row spans to function correctly, the value of of the current row plus the grid items to span must be equal to or less than 12. Example: `.pf-m-8-col.pf-m-2-row` + `.pf-m-4-col` + `.pf-m-4-col`. There is no limit to number of spanned rows. |
|
|
325
|
+
| `--pf-v6-l-grid--item--Order{-on-[breakpoint]}: {order}` | `.pf-v6-l-grid > .pf-v6-l-grid`, `.pf-v6-l-grid__item` | Modifies the order of the grid layout element at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
.ws-core-
|
|
1
|
+
.ws-core-f-level .ws-preview-html {
|
|
2
2
|
display: flex;
|
|
3
3
|
flex-wrap: wrap;
|
|
4
4
|
min-height: 160px;
|
|
5
5
|
}
|
|
6
|
-
.ws-core-
|
|
6
|
+
.ws-core-f-level :is(.pf-v6-l-level, .pf-v6-l-level__item, .pf-v6-l-level > *) {
|
|
7
7
|
padding: var(--pf-t--global--spacer--sm);
|
|
8
8
|
border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
|
|
9
9
|
}
|
|
10
|
-
.ws-core-
|
|
10
|
+
.ws-core-f-level .pf-v6-l-level {
|
|
11
11
|
width: 100%;
|
|
12
12
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
.ws-core-
|
|
1
|
+
.ws-core-f-split :is(.pf-v6-l-split, .pf-v6-l-split__item, .pf-v6-l-split > *) {
|
|
2
2
|
padding: var(--pf-t--global--spacer--sm);
|
|
3
3
|
border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
|
|
4
4
|
}
|
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
.ws-core-
|
|
1
|
+
.ws-core-f-stack :is(.pf-v6-l-stack, .pf-v6-l-stack__item, .pf-v6-l-stack > *) {
|
|
2
2
|
padding: var(--pf-t--global--spacer--sm);
|
|
3
3
|
border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
|
|
4
4
|
}
|
|
5
5
|
|
|
6
|
-
.ws-core-
|
|
6
|
+
.ws-core-f-stack .ws-preview-html {
|
|
7
7
|
display: flex;
|
|
8
8
|
flex-direction: column;
|
|
9
9
|
min-height: 30rem;
|
|
10
10
|
width: 100%;
|
|
11
11
|
}
|
|
12
12
|
|
|
13
|
-
.ws-core-
|
|
13
|
+
.ws-core-f-stack .pf-v6-l-stack {
|
|
14
14
|
flex-grow: 1;
|
|
15
15
|
}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
id: Accessibility
|
|
3
|
-
section:
|
|
3
|
+
section: foundations-and-styles
|
|
4
|
+
subsection: utility-classes
|
|
4
5
|
---## Examples
|
|
5
6
|
|
|
6
7
|
### Screen reader only
|
|
@@ -34,7 +35,7 @@ The text underneath is hidden.
|
|
|
34
35
|
|
|
35
36
|
### Overview
|
|
36
37
|
|
|
37
|
-
[Breakpoints](/tokens/all-
|
|
38
|
+
[Breakpoints](/foundations-and-styles/design-tokens/all-design-tokens) are optional. Breakpoint options include: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. Example: `.pf-v6-u-screen-reader-on-lg`
|
|
38
39
|
|
|
39
40
|
### Usage
|
|
40
41
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
.ws-core-
|
|
2
|
-
.ws-core-
|
|
3
|
-
.ws-core-
|
|
4
|
-
.ws-core-
|
|
1
|
+
.ws-core-f-alignment .pf-v6-u-text-align-start,
|
|
2
|
+
.ws-core-f-alignment .pf-v6-u-text-align-center,
|
|
3
|
+
.ws-core-f-alignment .pf-v6-u-text-align-end,
|
|
4
|
+
.ws-core-f-alignment .pf-v6-u-text-align-justify {
|
|
5
5
|
padding: var(--pf-t--global--spacer--sm);
|
|
6
6
|
border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
|
|
7
7
|
}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
id: Alignment
|
|
3
|
-
section:
|
|
3
|
+
section: foundations-and-styles
|
|
4
|
+
subsection: utility-classes
|
|
4
5
|
---import './Alignment.css'
|
|
5
6
|
|
|
6
7
|
## Examples
|
|
@@ -23,7 +24,7 @@ section: utility-classes
|
|
|
23
24
|
|
|
24
25
|
### Overview
|
|
25
26
|
|
|
26
|
-
[Breakpoints](/tokens/all-
|
|
27
|
+
[Breakpoints](/foundations-and-styles/design-tokens/all-design-tokens) are optional. Breakpoint options include: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. Example: `.pf-v6-u-text-align-start-on-lg`
|
|
27
28
|
|
|
28
29
|
### Usage
|
|
29
30
|
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
id: Background color
|
|
3
|
-
section:
|
|
3
|
+
section: foundations-and-styles
|
|
4
|
+
subsection: utility-classes
|
|
4
5
|
---## Examples
|
|
5
6
|
|
|
6
7
|
### Standard background colors
|
|
@@ -24,11 +25,11 @@ section: utility-classes
|
|
|
24
25
|
|
|
25
26
|
These background color utilities can be used to modify the background color of an element. In most cases, using the components with available modifiers should be sufficient to implement most designs, and should be preferred over customizations using these utilities.
|
|
26
27
|
|
|
27
|
-
Care should be taken especially when applying background colors, as this can have a negative effect on the readability and accessibility of text. Refer to [contrast ratios](/
|
|
28
|
+
Care should be taken especially when applying background colors, as this can have a negative effect on the readability and accessibility of text. Refer to [contrast ratios](/foundations-and-styles/colors#contrast-ratios) for more information.
|
|
28
29
|
|
|
29
|
-
Note that "inverse" background colors are labeled as such to indicate that they are best used with the ["inverse" text colors](/utility-classes/text#inverse-colors).
|
|
30
|
+
Note that "inverse" background colors are labeled as such to indicate that they are best used with the ["inverse" text colors](/foundations-and-styles/utility-classes/text#inverse-colors).
|
|
30
31
|
|
|
31
|
-
[Breakpoints](/tokens/all-
|
|
32
|
+
[Breakpoints](/foundations-and-styles/design-tokens/all-design-tokens) are optional. Breakpoint options include: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. Example: `.pf-v6-u-background-color-disabled-on-lg`
|
|
32
33
|
|
|
33
34
|
### Usage
|
|
34
35
|
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
.ws-core-
|
|
1
|
+
.ws-core-f-box-shadow .ws-preview-html {
|
|
2
2
|
display: flex;
|
|
3
3
|
flex-direction: column;
|
|
4
4
|
gap: var(--pf-t--global--spacer--xl);
|
|
5
5
|
}
|
|
6
6
|
|
|
7
|
-
.ws-core-
|
|
7
|
+
.ws-core-f-box-shadow [class*="pf-v6-u-box-shadow"] {
|
|
8
8
|
padding: var(--pf-t--global--spacer--md);
|
|
9
9
|
}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
id: Display
|
|
3
|
-
section:
|
|
3
|
+
section: foundations-and-styles
|
|
4
|
+
subsection: utility-classes
|
|
4
5
|
---import './Display.css'
|
|
5
6
|
|
|
6
7
|
## Examples
|
|
@@ -83,7 +84,7 @@ section: utility-classes
|
|
|
83
84
|
|
|
84
85
|
### Overview
|
|
85
86
|
|
|
86
|
-
[Breakpoints](/tokens/all-
|
|
87
|
+
[Breakpoints](/foundations-and-styles/design-tokens/all-design-tokens) are optional. Breakpoint options include: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. Example: `.pf-v6-u-display-inline-block-on-lg`
|
|
87
88
|
|
|
88
89
|
### Usage
|
|
89
90
|
|
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
.ws-core-
|
|
2
|
-
.ws-core-
|
|
3
|
-
.ws-core-
|
|
1
|
+
.ws-core-f-flex .pf-v6-u-display-flex,
|
|
2
|
+
.ws-core-f-flex .ws-example-flex-item,
|
|
3
|
+
.ws-core-f-flex .pf-v6-u-display-inline-flex {
|
|
4
4
|
flex-wrap: wrap;
|
|
5
5
|
padding: var(--pf-t--global--spacer--sm);
|
|
6
6
|
border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
|
|
7
7
|
}
|
|
8
8
|
|
|
9
|
-
#ws-core-
|
|
10
|
-
#ws-core-
|
|
11
|
-
#ws-core-
|
|
9
|
+
#ws-core-f-flex-aligned-items .pf-v6-u-display-flex,
|
|
10
|
+
#ws-core-f-flex-aligned-self .pf-v6-u-display-flex,
|
|
11
|
+
#ws-core-f-flex-aligned-content .pf-v6-u-display-flex {
|
|
12
12
|
min-height: 160px;
|
|
13
13
|
}
|
|
14
14
|
|
|
15
|
-
#ws-core-
|
|
15
|
+
#ws-core-f-flex-aligned-content .ws-example-flex-item {
|
|
16
16
|
height: 40px;
|
|
17
17
|
}
|
|
18
18
|
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
id: Flex
|
|
3
|
-
section:
|
|
3
|
+
section: foundations-and-styles
|
|
4
|
+
subsection: utility-classes
|
|
4
5
|
---import './Flex.css'
|
|
5
6
|
|
|
6
7
|
## Examples
|
|
@@ -370,7 +371,7 @@ section: utility-classes
|
|
|
370
371
|
|
|
371
372
|
### Overview
|
|
372
373
|
|
|
373
|
-
For these utilities to have effect, the parent element must be set to `display: flex` or `display: inline-flex`. [Breakpoints](/tokens/all-
|
|
374
|
+
For these utilities to have effect, the parent element must be set to `display: flex` or `display: inline-flex`. [Breakpoints](/foundations-and-styles/design-tokens/all-design-tokens) are optional. Breakpoint options include: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. Example: `.pf-v6-u-flex-row-on-lg`
|
|
374
375
|
|
|
375
376
|
<!-- ## Accessibility
|
|
376
377
|
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
.ws-core-
|
|
2
|
-
.ws-core-
|
|
1
|
+
.ws-core-f-float .pf-v6-u-float-inline-start,
|
|
2
|
+
.ws-core-f-float .pf-v6-u-float-inline-end {
|
|
3
3
|
padding: var(--pf-t--global--spacer--sm);
|
|
4
4
|
border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
|
|
5
5
|
}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
id: Float
|
|
3
|
-
section:
|
|
3
|
+
section: foundations-and-styles
|
|
4
|
+
subsection: utility-classes
|
|
4
5
|
---import './Float.css'
|
|
5
6
|
|
|
6
7
|
## Examples
|
|
@@ -18,7 +19,7 @@ section: utility-classes
|
|
|
18
19
|
|
|
19
20
|
### Overview
|
|
20
21
|
|
|
21
|
-
[Breakpoints](/tokens/all-
|
|
22
|
+
[Breakpoints](/foundations-and-styles/design-tokens/all-design-tokens) are optional. Breakpoint options include: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. Example: `.pf-v6-u-float-inline-start-on-lg`
|
|
22
23
|
|
|
23
24
|
### Usage
|
|
24
25
|
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
id: Sizing
|
|
3
|
-
section:
|
|
3
|
+
section: foundations-and-styles
|
|
4
|
+
subsection: utility-classes
|
|
4
5
|
---import './Sizing.css'
|
|
5
6
|
|
|
6
7
|
## Examples
|
|
@@ -22,7 +23,7 @@ section: utility-classes
|
|
|
22
23
|
|
|
23
24
|
### Usage
|
|
24
25
|
|
|
25
|
-
[Breakpoints](/tokens/all-
|
|
26
|
+
[Breakpoints](/foundations-and-styles/design-tokens/all-design-tokens) are optional. Breakpoint options include: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. Example: `.pf-v6-u-w-initial-on-lg`
|
|
26
27
|
|
|
27
28
|
| Class | Applied to | Outcome |
|
|
28
29
|
| -- | -- | -- |
|
|
@@ -50,7 +51,7 @@ section: utility-classes
|
|
|
50
51
|
|
|
51
52
|
### Usage
|
|
52
53
|
|
|
53
|
-
[Breakpoints](/tokens/all-
|
|
54
|
+
[Breakpoints](/foundations-and-styles/design-tokens/all-design-tokens) are optional. Breakpoint options include: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. Example: `.pf-v6-u-w-25vw-on-lg`
|
|
54
55
|
|
|
55
56
|
| Class | Applied to | Outcome |
|
|
56
57
|
| -- | -- | -- |
|
|
@@ -90,7 +91,7 @@ section: utility-classes
|
|
|
90
91
|
|
|
91
92
|
### Usage
|
|
92
93
|
|
|
93
|
-
[Breakpoints](/tokens/all-
|
|
94
|
+
[Breakpoints](/foundations-and-styles/design-tokens/all-design-tokens) are optional. Breakpoint options include: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. Example: `.pf-v6-u-h-initial-on-lg`
|
|
94
95
|
|
|
95
96
|
| Class | Applied to | Outcome |
|
|
96
97
|
| -- | -- | -- |
|
|
@@ -130,7 +131,7 @@ section: utility-classes
|
|
|
130
131
|
|
|
131
132
|
### Usage
|
|
132
133
|
|
|
133
|
-
[Breakpoints](/tokens/all-
|
|
134
|
+
[Breakpoints](/foundations-and-styles/design-tokens/all-design-tokens) are optional. Breakpoint options include: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. Example: `.pf-v6-u-h-25vh-on-lg`
|
|
134
135
|
|
|
135
136
|
| Class | Applied to | Outcome |
|
|
136
137
|
| -- | -- | -- |
|
|
@@ -188,7 +189,7 @@ section: utility-classes
|
|
|
188
189
|
| `.pf-v6-u-min-width` | `*` | Sets min-width: `var(--pf-v6-u-min-width--MinWidth{-on-[breakpoint]})`. |
|
|
189
190
|
| `.pf-v6-u-max-width` | `*` | Sets min-width: `var(--pf-v6-u-max-width--MaxWidth{-on-[breakpoint]})`. |
|
|
190
191
|
|
|
191
|
-
[Breakpoints](/tokens/all-
|
|
192
|
+
[Breakpoints](/foundations-and-styles/design-tokens/all-design-tokens) are optional. Breakpoint options include: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. Example: `.--pf-v6-u-min-width--MinWidth-on-lg`
|
|
192
193
|
|
|
193
194
|
| Custom property | Applied to | Outcome |
|
|
194
195
|
| -- | -- | -- |
|
|
@@ -242,7 +243,7 @@ section: utility-classes
|
|
|
242
243
|
| `.pf-v6-u-min-height` | `*` | Sets min-height: `var(--pf-v6-u-min-height--MinHeight{-on-[breakpoint]})`. |
|
|
243
244
|
| `.pf-v6-u-max-height` | `*` | Sets max-height: `var(--pf-v6-u-max-height--MaxHeight{-on-[breakpoint]})`. |
|
|
244
245
|
|
|
245
|
-
[Breakpoints](/tokens/all-
|
|
246
|
+
[Breakpoints](/foundations-and-styles/design-tokens/all-design-tokens) are optional. Breakpoint options include: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. Example: `.--pf-v6-u-min-height--MinHeight-on-lg`
|
|
246
247
|
|
|
247
248
|
| Custom property | Applied to | Outcome |
|
|
248
249
|
| -- | -- | -- |
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
.ws-core-
|
|
2
|
-
.ws-core-
|
|
1
|
+
.ws-core-f-spacing .ws-example-flex-item,
|
|
2
|
+
.ws-core-f-spacing .pf-v6-u-display-flex {
|
|
3
3
|
padding: var(--pf-t--global--spacer--sm);
|
|
4
4
|
border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
|
|
5
5
|
}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
id: Spacing
|
|
3
|
-
section:
|
|
3
|
+
section: foundations-and-styles
|
|
4
|
+
subsection: utility-classes
|
|
4
5
|
pf: 'test'
|
|
5
6
|
---import './Spacing.css'
|
|
6
7
|
|
|
@@ -118,7 +119,7 @@ pf: 'test'
|
|
|
118
119
|
|
|
119
120
|
### Overview
|
|
120
121
|
|
|
121
|
-
[Breakpoints](/tokens/all-
|
|
122
|
+
[Breakpoints](/foundations-and-styles/design-tokens/all-design-tokens) are optional. Breakpoint options include: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. Example: `.pf-v6-u-m-sm-on-lg`
|
|
122
123
|
|
|
123
124
|
### Margin properties
|
|
124
125
|
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
id: Text
|
|
3
|
-
section:
|
|
3
|
+
section: foundations-and-styles
|
|
4
|
+
subsection: utility-classes
|
|
4
5
|
---## Examples
|
|
5
6
|
|
|
6
7
|
### Font family
|
|
@@ -47,7 +48,7 @@ section: utility-classes
|
|
|
47
48
|
|
|
48
49
|
### Inverse colors
|
|
49
50
|
|
|
50
|
-
These colors are best used with the ["inverse" background colors](/utility-classes/background-color#inverse-background-colors).
|
|
51
|
+
These colors are best used with the ["inverse" background colors](/foundations-and-styles/utility-classes/background-color#inverse-background-colors).
|
|
51
52
|
|
|
52
53
|
```html
|
|
53
54
|
<div class="pf-v6-u-background-color-inverse">
|
|
@@ -169,9 +170,9 @@ These colors are best used with the ["inverse" background colors](/utility-class
|
|
|
169
170
|
|
|
170
171
|
These text utilities can be used to modify text within the PatternFly framework. In most cases, using the components with available modifiers should be sufficient to implement most designs, and should be preferred over customizations using these utilities.
|
|
171
172
|
|
|
172
|
-
Care should be taken especially when applying text colors, as this can have a negative effect on the readability and accessibility of text. Refer to the information on [contrast ratios](/
|
|
173
|
+
Care should be taken especially when applying text colors, as this can have a negative effect on the readability and accessibility of text. Refer to the information on [contrast ratios](/foundations-and-styles/colors#contrast-ratios) for more information.
|
|
173
174
|
|
|
174
|
-
[Breakpoints](/tokens/all-
|
|
175
|
+
[Breakpoints](/foundations-and-styles/design-tokens/all-design-tokens) are optional. Breakpoint options include: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. Example: `.pf-v6-u-font-size-xl-on-lg`
|
|
175
176
|
|
|
176
177
|
### Usage
|
|
177
178
|
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="utf-8"?>
|
|
2
|
+
<svg fill="currentColor" viewBox="0 0 1024 1024" role="img">
|
|
3
|
+
<path d="M576,303 C576,294.715729 569.284271,288 561,288 L463,288 C454.715729,288 448,294.715729 448,303 L448,448 L303,448 C294.715729,448 288,454.715729 288,463 L288,561 C288,569.284271 294.715729,576 303,576 L448,576 L448,720.9 C447.983373,729.207373 454.6927,735.961429 463,736 L561,736 C569.3073,735.961429 576.016627,729.207373 576,720.9 L576,576 L721,576 C724.969024,576.026638 728.784638,574.468589 731.600595,571.671405 C734.416553,568.87422 736.000031,565.069113 736.000031,561.1 L736.000031,463.1 C736.016627,454.792627 729.3073,448.038571 721,448 L576,448 L576,303 Z M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 Z M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0 Z" />
|
|
4
|
+
</svg>
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="utf-8"?>
|
|
2
|
+
<svg fill="currentColor" viewBox="0 0 1024 1024" role="img">
|
|
3
|
+
<path d="M512,0 C229.26,0 0,229.26 0,512 C0,794.74 229.26,1024 512,1024 C794.74,1024 1024,794.74 1024,512 C1024,229.26 794.74,0 512,0 Z M759.09,730.29 C759.09,751.77 741.71,766.86 721.83,766.86 C711.54,766.86 704,762.97 693.49,754.29 L429,541 L340.57,762.74 L264.23,762.74 L487.77,224.74 C493.49,210.79 506.06,203.25 520.23,203.25 C534.4,203.25 546.06,210.56 551.77,224.74 L755.89,715.2 C758.4,721.14 759.31,726.63 759.09,730.29 Z M520.69,312.69 L653.26,640 L453.26,482.51 L520.69,312.69 Z" />
|
|
4
|
+
</svg>
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="utf-8"?>
|
|
2
|
+
<svg fill="currentColor" viewBox="0 0 1024 1024" role="img">
|
|
3
|
+
<path d="M951.9,320 L832,320 L832,135 C832,94.9 800.7,64 760.5,64 L71.1,64 C30.9,64.1 0,94.9 0,135 L0,696.9 C0,737.1 30.9,768 71.1,768 L192,768 L192,952.2 C192,992.5 223.4,1024 263.7,1024 L952,1024 C992.3,1024 1024,992.5 1024,952.2 L1024,391 C1023.9,350.9 992.1,320 951.9,320 Z M832,384 L896,384 L896,448 L832,448 L832,384 Z M640,128 L704,128 L704,192 L640,192 L640,128 Z M64,704 L64,256 L768,256 L768,704 L64,704 Z M960,960 L256,960 L256,768 L760.5,768 C800.8,768 832,736.5 832,696.3 L832,576 L960,576 L960,960 Z" />
|
|
4
|
+
</svg>
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="utf-8"?>
|
|
2
|
+
<svg fill="currentColor" viewBox="0 0 1070 1024" role="img">
|
|
3
|
+
<path d="M832,768 L832,896 L128,896 L128,256.4 L224,256.4 L352,128 L36.6,128 C14.6,128 0,142.7 0,164.6 L0,987.4 C0,1009.4 14.6,1024 36.6,1024 L930.7,1024 C945.3,1024 960,1009.4 960,987.4 L960,640 L832,768 Z M638.3,219.4 L704.1,219.4 L704.1,0 L1070,329.2 L704.2,658.3 L704.2,438.9 L674.9,438.9 C448.1,453.5 353,651 411.6,775.3 C353.1,731.4 279.9,709.5 265.3,570.5 C243.3,351.1 418.9,219.4 638.3,219.4 Z" />
|
|
4
|
+
</svg>
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="utf-8"?>
|
|
2
|
+
<svg fill="currentColor" viewBox="0 0 1024 1024" role="img">
|
|
3
|
+
<path d="M512,128 C300.2,128 128,300.3 128,512 C128,723.9 300.2,896 512,896 C723.8,896 896,723.8 896,512 C896,300.2 723.7,128 512,128 M512.1,1024 C229.8,1024 0,794.3 0,512 C0,229.7 229.7,0 512.1,0 C794.5,0 1024,229.7 1024,512 C1024,794.3 794.4,1024 512.1,1024 M744.1,619.2 C723.2,664.3 691.733333,700.333333 649.7,727.3 C607.666667,754.266667 561.766667,767.766667 512,767.801349 C477.880448,767.912684 444.106349,760.967204 412.8,747.4 C381.4,733.8 354,715.7 331,692.7 C308,669.7 289.9,642.6 276.3,611.1 C262.774308,579.78407 255.863244,546.011774 255.998009,511.9 C255.891693,478.450317 262.417551,445.311196 275.2,414.4 C288,383.4 305.333333,356.566667 327.2,333.9 C349.066667,311.233333 375.233333,292.966667 405.7,279.1 C436.09495,265.229747 468.913253,257.449838 502.3,256.2 C512,255.8 523.3,262.3 527.1,271.4 C531.1,280.5 531.7,290.8 524.3,297.7 C505.1,315 488.3,335.2 478.2,358.2 C468.1,381.2 460.8,403.2 460.8,428.7 C460.8,461.6 466.7,489.6 482.9,517.4 C498.746034,544.796001 521.503999,567.553966 548.9,583.4 C576.6,599.6 607,607.7 639.9,607.7 C666.146645,607.723074 692.070807,601.916608 715.8,590.7 C724.9,586.7 732.9,588.1 739.8,595 C742.843305,598.084991 744.867601,602.02888 745.6,606.3 C746.409483,610.652973 745.8867,615.148908 744.1,619.2" />
|
|
4
|
+
</svg>
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="utf-8"?>
|
|
2
|
+
<svg fill="currentColor" viewBox="0 0 896 1024" role="img">
|
|
3
|
+
<path d="M448,0 C465.333333,0 480.333333,6.33333333 493,19 C505.666667,31.6666667 512,46.6666667 512,64 L512,106 L514.23,106.45 C587.89,121.39 648.48,157.24 696,214 C744,271.333333 768,338.666667 768,416 C768,500 780,568.666667 804,622 C818.666667,652.666667 841.333333,684 872,716 C873.773676,718.829136 875.780658,721.505113 878,724 C890,737.333333 896,752.333333 896,769 C896,785.666667 890,800.333333 878,813 C866,825.666667 850.666667,832 832,832 L63.3,832 C44.9533333,831.84 29.8533333,825.506667 18,813 C6,800.333333 0,785.666667 0,769 C0,752.333333 6,737.333333 18,724 L24,716 L25.06,714.9 C55.1933333,683.28 77.5066667,652.313333 92,622 C116,568.666667 128,500 128,416 C128,338.666667 152,271.333333 200,214 C248,156.666667 309.333333,120.666667 384,106 L384,63.31 C384.166667,46.27 390.5,31.5 403,19 C415.666667,6.33333333 430.666667,0 448,0 Z M576,896 L576,897.08 C575.74,932.6 563.073333,962.573333 538,987 C512.666667,1011.66667 482.666667,1024 448,1024 C413.333333,1024 383.333333,1011.66667 358,987 C332.666667,962.333333 320,932 320,896 L576,896 Z M475,192 L421,192 C400.565464,192 384,208.565464 384,229 L384,539 C384,559.434536 400.565464,576 421,576 L475,576 C495.434536,576 512,559.434536 512,539 L512,229 C512,208.565464 495.434536,192 475,192 Z M448,640 C412.653776,640 384,668.653776 384,704 C384,739.346224 412.653776,768 448,768 C483.346224,768 512,739.346224 512,704 C512,668.653776 483.346224,640 448,640 Z" />
|
|
4
|
+
</svg>
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="utf-8"?>
|
|
2
|
+
<svg fill="currentColor" viewBox="0 0 1024 1024" role="img">
|
|
3
|
+
<path d="M768,256 L768,257.4 C765.102556,256.827424 762.153196,256.559301 759.2,256.6 C705.189545,255.686899 652.247869,271.702281 607.8,302.4 C591.952568,312.712568 582.951533,330.814358 584.293158,349.674109 C585.634783,368.53386 597.107623,385.179201 614.255294,393.144598 C631.402965,401.109995 651.522926,399.14007 666.8,388 C693.450143,369.582634 725.210685,359.998506 757.6,360.6 C761.083449,360.639748 764.563612,360.372043 768,359.8 L768,360.2 C851.8,360.2 920,428.4 920,512.1 C919.932562,571.254743 885.622089,625.020813 832,650 L832,760.2 C942.4,731.8 1024,631.6 1024,512.3 C1024,370.6 909.4,256 768,256 M746.6,452 C731.4,445.8 718.4,448.4 707.8,459.8 L635.2,531.8 L619.2,547.8 L367.6,292.9 C329,260.9 304.6,256 256,256 C114.6,256 0,371.5 0,512.8 C0,654.1 114.6,768 256,768 C304,768 344.2,750.9 380,722.9 L379.4,722.5 L384.8,718.9 C400.216562,708.213968 408.692351,690.060567 406.986867,671.380284 C405.281384,652.700001 393.658366,636.381592 376.561578,628.663984 C359.46479,620.946375 339.538112,623.023033 324.4,634.1 C301.295896,650.587389 274.106741,660.41146 245.8,662.5 C163.2,661.4 104,595.8 104,512.8 C104,430.4 165.8,363.3 247.6,360.9 L252.2,360.9 C253,361.1 253.8,360.9 254.4,361.1 L254.8,361.1 C269.4,360.9 292.6,366.3 312.6,382.3 L546.6,620.6 L458.8,708.4 C447.4,719.6 444.8,732.2 451,746.8 C457.2,761.6 468.2,768 483.8,768 L732.6,768 C742.2,768 750.6,765.4 757.6,758.4 C764.417003,751.876224 768.25027,742.835499 768.200488,733.4 L768.200488,484.8 C768.200488,469.2 761,458.2 746.6,452" />
|
|
4
|
+
</svg>
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="utf-8"?>
|
|
2
|
+
<svg fill="currentColor" viewBox="0 0 896 1024" role="img">
|
|
3
|
+
<path d="M448,0 C465.333333,0 480.333333,6.33333333 493,19 C505.666667,31.6666667 512,46.6666667 512,64 L512,106 L514.23,106.45 C587.89,121.39 648.48,157.24 696,214 C744,271.333333 768,338.666667 768,416 C768,500 780,568.666667 804,622 C818.666667,652.666667 841.333333,684 872,716 C873.773676,718.829136 875.780658,721.505113 878,724 C890,737.333333 896,752.333333 896,769 C896,785.666667 890,800.333333 878,813 C866,825.666667 850.666667,832 832,832 L63.3,832 C44.9533333,831.84 29.8533333,825.506667 18,813 C6,800.333333 0,785.666667 0,769 C0,752.333333 6,737.333333 18,724 L24,716 L25.06,714.9 C55.1933333,683.28 77.5066667,652.313333 92,622 C116,568.666667 128,500 128,416 C128,338.666667 152,271.333333 200,214 C248,156.666667 309.333333,120.666667 384,106 L384,63.31 C384.166667,46.27 390.5,31.5 403,19 C415.666667,6.33333333 430.666667,0 448,0 Z M576,896 L576,897.08 C575.74,932.6 563.073333,962.573333 538,987 C512.666667,1011.66667 482.666667,1024 448,1024 C413.333333,1024 383.333333,1011.66667 358,987 C332.666667,962.333333 320,932 320,896 L576,896 Z" />
|
|
4
|
+
</svg>
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="utf-8"?>
|
|
2
|
+
<svg fill="currentColor" viewBox="0 0 1024 1024" role="img">
|
|
3
|
+
<path d="M0,767.3 L0,640 L64,640 L64,752.3 C64,760.584271 70.7157288,767.3 79,767.3 L128,768.1 L128,832.1 L64,831.3 C28.6674863,831.266922 0.0330777378,802.632514 0,767.3 Z M64,0 L191.3,0 L191.3,64 L79,64 C70.7157288,64 64,70.7157288 64,79 L64,192 L0,192 L0,64 C0.0330777378,28.6674863 28.6674863,0.0330777378 64,0 Z M0,384 L64,384 L64,256 L0,256 L0,384 Z M0,576 L64,576 L64,448 L0,448 L0,576 Z M832,64.7 L832,128 L768,128 L768,79.7 C768,71.4157288 761.284271,64.7 753,64.7 L640,64.7 L640,0.7 L768,0.7 C803.332514,0.733077738 831.966922,29.3674863 832,64.7 Z M448,64.7 L576,64.7 L576,0.7 L448,0.7 L448,64.7 Z M256,64.7 L384,64.7 L384,0.7 L256,0.7 L256,64.7 Z M960,192 L256,192 C220.667486,192.033078 192.033078,220.667486 192,256 L192,960 C192.033078,995.332514 220.667486,1023.96692 256,1024 L960,1024 C995.332514,1023.96692 1023.96692,995.332514 1024,960 L1024,256 C1023.96692,220.667486 995.332514,192.033078 960,192 Z M960,945 C960,953.284271 953.284271,960 945,960 L271,960 C262.715729,960 256,953.284271 256,945 L256,271 C256,262.715729 262.715729,256 271,256 L945,256 C953.284271,256 960,262.715729 960,271 L960,945 Z" />
|
|
4
|
+
</svg>
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="utf-8"?>
|
|
2
|
+
<svg fill="currentColor" viewBox="0 0 1024 1024" role="img">
|
|
3
|
+
<path d="M996.377115,171.480135 L540.537115,5.18013521 C531.409589,1.76249044 521.743498,0.00809818406 511.997115,6.72397778e-05 C501.871295,-0.0125134433 491.820803,1.74040061 482.297115,5.18013521 L27.6671155,171.370135 C11.0249457,177.434467 -0.0238641555,193.287629 0.046775475,211.000135 L0.046775475,249.000135 C0.195841208,267.102495 11.623122,283.189328 28.6671155,289.290135 L85.2071155,309.500135 C95.0094893,313.010977 105.907101,311.533188 114.420477,305.53861 C122.933853,299.544031 127.998417,289.782269 127.997115,279.370135 L127.997115,234.580135 L511.997115,95.0001352 L895.177115,235.170135 L895.177115,295.370135 C895.178887,302.102977 898.453489,308.414744 903.95698,312.293243 C909.460471,316.171742 916.505874,317.132839 922.847115,314.870135 L995.477115,289.270135 C1012.59546,283.170258 1024.01857,266.9528 1023.99715,248.780135 L1023.99715,210.870135 C1023.97475,193.258354 1012.96683,177.531031 996.427115,171.480135 M533.647115,346.370135 L511.997115,353.370135 L489.587115,348.080135 C479.853994,344.894147 469.183221,346.571799 460.897291,352.59073 C452.611361,358.609661 447.71662,368.238859 447.737051,378.480135 L447.737051,417.580135 C447.725709,431.081528 456.204913,443.131767 468.917115,447.680135 L499.577115,458.180135 C507.177328,460.919505 515.534404,460.669293 522.957115,457.480135 L554.327115,445.870135 C567.027983,441.306886 575.500688,429.265885 575.507257,415.770135 L575.507257,376.770135 C575.537565,366.523106 570.643619,356.885253 562.352331,350.863869 C554.061043,344.842484 543.381903,343.17069 533.647115,346.370135 M351.737115,359.870135 L351.737115,318.770135 C351.726919,304.92777 342.817563,292.661266 329.657115,288.370135 L265.717115,267.480135 C255.985877,264.299431 245.319589,265.977891 237.035494,271.993509 C228.751399,278.009128 223.854266,287.632278 223.86709,297.870135 L223.86709,337.000135 C223.874371,350.47567 232.322855,362.502666 244.997115,367.080135 L308.937115,390.080135 C318.749212,393.583471 329.652547,392.090624 338.161859,386.078784 C346.67117,380.066943 351.720981,370.28887 351.697115,359.870135 M991.217115,442.000135 L856.317115,394.650135 C852.839791,393.339817 849.00444,393.339817 845.527115,394.650135 L798.077115,411.550135 C783.887115,416.550135 783.887115,436.650135 798.077115,441.650135 L913.157115,483.000135 L511.997115,646.780135 L109.477115,482.780135 L223.867115,441.780135 C237.947115,436.690135 237.947115,416.690135 223.867115,411.690135 L176.607115,394.780135 C173.112329,393.58999 169.321902,393.58999 165.827115,394.780135 L33.1571155,442.370135 C13.0440455,449.54441 -0.269196877,468.728185 0.0471154616,490.080135 L0.0471154616,503.080135 C-0.847277689,523.712017 11.059679,542.763147 29.9971155,551.000135 L476.407115,747.280135 C498.111167,756.808317 522.807966,756.840942 544.537115,747.370135 L802.537115,634.470135 L994.287115,549.930135 C1013.05026,541.718274 1024.80919,522.789452 1023.85712,502.330135 L1023.85712,489.430135 C1024.36395,468.22962 1011.19974,449.100375 991.217115,442.000135 M995.527115,672.000135 L915.657115,643.810135 C911.820884,642.433761 907.604002,642.573251 903.867115,644.200135 L861.307115,662.810135 C848.027115,668.610135 848.727115,687.610135 862.307115,692.500135 L910.997115,710.000135 L511.997115,916.170135 L111.277115,709.870135 L152.437115,695.080135 C165.827115,690.280135 166.717115,671.580135 153.837115,665.580135 L112.837115,646.370135 C109.008929,644.580285 104.630262,644.368356 100.647115,645.780135 L27.9971155,671.870135 C11.3473237,677.858232 0.19240487,693.586867 0.0471154616,711.280135 L0.0471154616,730.080135 C0.0632949619,745.406045 8.42616142,759.506405 21.8671155,766.870135 L470.707115,1013.47014 C483.376418,1020.36989 497.570829,1023.98983 511.997115,1024.00014 C526.111827,1023.98457 539.988079,1020.35974 552.307115,1013.47014 L1002.19712,766.870135 C1015.63034,759.501145 1023.98494,745.401803 1023.99712,730.080135 L1023.99712,712.470135 C1023.99712,694.324323 1012.60558,678.131732 995.527115,672.000135 M799.277301,336.480135 L799.277301,297.480135 C799.312025,287.231444 794.419143,277.590499 786.126499,271.568129 C777.833854,265.54576 767.152103,263.875935 757.417115,267.080135 L693.487115,288.000135 C680.330167,292.290121 671.421636,304.551456 671.407115,318.390135 L671.407115,359.390135 C671.416959,369.788712 676.478869,379.534105 684.980399,385.521966 C693.481929,391.509827 704.362857,392.993413 714.157115,389.500135 L778.097115,366.700135 C790.819287,362.10717 799.292115,350.02599 799.277301,336.500135" />
|
|
4
|
+
</svg>
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="utf-8"?>
|
|
2
|
+
<svg fill="currentColor" viewBox="0 0 1024 1024" role="img">
|
|
3
|
+
<path d="M903.7,237.64 L511.5,378.4 L119.9,237.94 L512.2,95 L903.7,237.64 Z M126.8,719.64 L285.1,662.9 L445.6,733.33 L445.6,894.33 L126.8,719.64 Z M96,329.35 L225.2,375.71 L96,422.06 L96,329.35 Z M199.9,625.35 L96,662.73 L96,579.91 L199.9,625.35 Z M445.5,454.73 L445.5,619.37 L111.9,484.2 L319.9,409.57 L445.5,454.73 Z M738.3,662.73 L897,719.57 L573.6,897 L573.6,735.16 L738.3,662.73 Z M798,375.51 L928,329 L928,422.21 L798,375.51 Z M928,579.41 L928,662.83 L823.4,625.36 L928,579.41 Z M703.2,409.47 L911.3,484.1 L573.6,621.17 L573.6,456 L703.2,409.47 Z M1024,239.64 C1023.39305,204.05641 1000.93137,172.522598 967.5,160.32 C825.5,108.573333 683.5,56.8566667 541.5,5.17 C522.437353,-1.72320177 501.562647,-1.72320177 482.5,5.17 L56.5,160.42 C23.1452849,172.665955 0.715338236,204.115519 0,239.64 L0,694.55 L0.1,694.55 C1.2,725.55 18.9,765.18 44.6,779.96 L470.6,1013.44 C496.404128,1027.52063 527.595872,1027.52063 553.4,1013.44 C639.6,966.18 841.7,855.44 979.4,779.96 C1006.1,765.38 1022.9,725.62 1024,694.55 L1024,239.64 Z" />
|
|
4
|
+
</svg>
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="utf-8"?>
|
|
2
|
+
<svg fill="currentColor" viewBox="0 0 1024 1024" role="img">
|
|
3
|
+
<path d="M314.143886,228.505956 L317.553886,510.305956 L650.853886,583.995956 C661.740694,586.3978 673.134531,584.498827 682.653886,578.695956 L831.023886,487.805956 L835.523886,218.105956 C835.891154,196.417205 820.089335,177.831867 798.623886,174.705956 L504.723886,132.305956 L343.423886,187.205956 C325.75695,193.194142 313.934673,209.852622 314.111877,228.505956 L314.143886,228.505956 Z M986.143886,89.605956 L722.343886,57.405956 L577.023886,107.705956 L860.123886,146.905956 C881.738011,149.916157 897.704407,168.58654 897.323886,190.405956 L892.753886,449.995956 L1017.85389,373.395956 L1023.95389,133.495956 C1024.62358,111.281829 1008.22116,92.2324674 986.153886,89.595956 L986.143886,89.605956 Z M317.343886,591.905956 L321.243886,904.805956 L638.743886,1000.10596 C653.190248,1004.42398 668.842707,1000.89934 680.043886,990.805956 L823.843886,860.605956 L828.743886,567.805956 L681.343886,664.205956 C671.460593,670.687909 659.34701,672.821346 647.843886,670.105956 L317.343886,591.905956 Z M272.243886,175.905956 C326.643886,158.005956 381.043886,140.139289 435.443886,122.305956 L199.343886,88.205956 L31.1438863,137.105956 C12.1841324,142.605495 -0.629574671,160.265518 0.0238862761,179.995956 L9.12388628,442.195956 L246.123886,494.595956 L242.523886,217.395956 C242.331797,198.571464 254.343871,181.786918 272.223886,175.895956 L272.243886,175.905956 Z M508.843886,98.205956 C559.143886,81.705956 609.410553,65.205956 659.643886,48.705956 L438.243886,22.305956 C432.507745,21.6175225 426.691666,22.0936928 421.143886,23.705956 L276.023886,65.905956 L508.843886,98.205956 Z M10.7538863,519.405956 L19.9538863,783.905956 C20.5605633,802.39522 32.9246802,818.424271 50.6538863,823.705956 L253.023886,884.405956 L247.723886,575.505956 L10.7538863,519.405956 Z M890.453886,527.505956 L1016.35389,445.205956 L1010.15389,673.905956 C1009.86976,685.691377 1004.73149,696.836362 995.953886,704.705956 L885.553886,804.705956 L890.453886,527.505956 Z" />
|
|
4
|
+
</svg>
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="utf-8"?>
|
|
2
|
+
<svg fill="currentColor" viewBox="0 0 1088 1024" role="img">
|
|
3
|
+
<path d="M576,160 C687.3,88.6 874.6,32 960,32 L960,800 C898.8,783.1 738,760.5 576,864 L576,160 Z M1024,96 C1088,96 1088,162.8 1088,162.8 L1088,928 C1088,992 985.7,989.9 985.7,989.9 C863.1,804.7 576,992 576,992 L576,925.4 C863,728.7 1024,928 1024,928 L1024,96 Z M128,800 L128,32 C212.9,32 400.6,88.3 512,160 L512,864 C352,760.5 189.3,783.2 128,800 Z M512,925.4 L512,992 C512,992 227.9,805.8 102.5,989.9 C102.5,989.9 0,992 0,928 L0,162.8 C0,162.8 0,96 64,96 L64,928 C64,927.9 226,728.7 512,925.4 Z" />
|
|
4
|
+
</svg>
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="utf-8"?>
|
|
2
|
+
<svg fill="currentColor" viewBox="0 0 1024 1024" role="img">
|
|
3
|
+
<path d="M383.8,575.6 C380,761 256,768 256,768 L256,575.9 L128,575.9 L128,192 L768,192 L768,575.9 L383.8,575.6 Z M896,384 L896,123.9 C894.4,76.9 879.7,64 845.2,64 L64,64 C7.7,64 0,69.3 0,123.9 L0,634.6 C0,705.7 0,702.5 64.7,704 L128,704 L128,860.7 C128,884.5 141.6,896 158.8,896 C298.9,896 400.2,894.8 480,704 L511.9,704 L511.9,768 C512.2,832.7 512,832.2 573.8,832 L768,832 C782,906 833,960 895.9,960 L944,960 C952.836556,960 960,952.836556 960,944 L960,832 C1019.3,832.1 1023.5,832.7 1024,768.1 L1024,451.4 C1024,392.9 1023.9,384.5 964.2,384 L896,384 Z" />
|
|
4
|
+
</svg>
|