4-row-components edit

wm-row-buttons  edit

uses the base wm button styles and adds row theme modifications; no extra classes

Row button
Copy
Edit
<!-- components/4-row-components/wm-row-buttons.php --> <div class="wm-row__buttons RowName__buttons"> <a class="wm-row__button button RowName__button" href=""> Row button </a> </div>
Cancel
Copy
Copy
Edit
/* scss/4-row-components/_wm-row-buttons.scss */ // Button component including // * base w&m button styles // * theme color styles // * minor overridess .wm-row { &__buttons { width: 100%; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px; } // need extra selector for the buttons in order to overwrite wm button styles: // button, .button, a.button, a.content_button, .content_button > a, .content_button_with_arrow &__buttons &__button { margin: 0 8px 8px 0; color: var(--theme-button-text-color); background: var(--theme-button-background-color); border: 1px solid var(--theme-button-border-color); &:hover, &:focus { color: var(--theme-button-text-color); background-color: var(--theme-button-background-hover-color); border-color: var(--theme-button-border-hover-color); } } // buttons use default content button styles }
Cancel