# give/4.18.0/src/DonationForms/resources/styles/components/_donation-summary.scss

GiveWP – Donation Plugin and Fundraising Platform, version 4.18.0. 69 lines.

- Page: https://pluginprobe.com/plugins/give/4.18.0/code/src/DonationForms/resources/styles/components/_donation-summary.scss
- Raw: https://pluginprobe.com/plugins/give/4.18.0/raw/src/DonationForms/resources/styles/components/_donation-summary.scss
- Modified: 2023-10-16T17:55:46+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/give/4.18.0/code/src/DonationForms/resources/styles/components/_donation-summary.scss#L10-L20`.

```scss
.givewp-elements-donationSummary {
    display: flex;
    flex-direction: column;
    gap: var(--givewp-spacing-2);
    background-color: var(--givewp-grey-5);
    padding: var(--givewp-spacing-6);

    &__header {
        margin: 0;
        font-size: var(--givewp-font-size-headline-lg);
        font-weight: 600;
    }

    &__list {
        display: flex;
        flex-direction: column;
        gap: var(--givewp-spacing-2);
        list-style-type: none;
        padding: 0;
        margin: 0;

        &__item {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: flex-end;
            padding: var(--givewp-spacing-4) 0;
            margin: 0;

            &__label-container {
                display: flex;
                flex-direction: column;
                gap: var(--givewp-spacing-1);
            }

            &__label {
                font-size: var(--givewp-font-size-headline-md);
                font-weight: 500;
                color: var(--givewp-grey-900);
            }

            &__description {
                font-size: var(--givewp-font-size-headline-sm);
                color: var(--givewp-grey-700);
            }

            &__value {
                text-align: right;
                color: var(--givewp-grey-900);
                font-weight: 500;
                font-size: var(--givewp-font-size-headline-md);
            }

            &--total {
                border-top: solid 1px var(--givewp-grey-100);
                padding: var(--givewp-spacing-5) 0 0 0;
            }

            &--total &__label, &--total &__value {
                font-weight: 600;
            }

            &--total &__value {
                font-size: var(--givewp-font-size-headline-lg);
            }
        }
    }
}

```