/* This is a whole series of overwrites and hacks of the Action Network widget to give it similarity to the rest of the Nurses United website. It uses Tailwind to do so. */ div[id^="can-form"] { // Is not valid CSS but SCSS, but this was me making the spacing look less than shit. @apply mt-16; } #can-fundraising-area-join-nurses-united { .check_radio_field.donate_amount_wrap { // Hidden is shorthand for display: none !important; @apply hidden; } } #can_embed_form .floatlabel-wrapper .floatlabel-label-inactive { // Unset is your friend here in removing stupid paddings and opacities. opacity: unset !important; } #form_col1 { float: unset !important; width: unset !important; } #form_col2 { float: unset !important; width: unset !important; } #can_embed_form label.floatlabel-label { position: unset !important; top: unset !important; left: unset !important; letter-spacing: unset !important; text-transform: unset !important; @apply text-xs #{!important}; @apply mb-2 #{!important}; @apply text-black #{!important}; } label[for="form-first_name"]::before { content: "Personal Details"; display: block; @apply text-s; @apply text-primary; @apply mt-8; @apply mb-8; @apply font-semibold; } label[for="form-card_number"]::before { content: "Payment Details"; display: block; @apply text-s; @apply text-primary; @apply mb-8; @apply font-semibold; } #can_embed_form { #donate_login { @apply hidden; } // Flag at the side of mobile number, illustrating it must be a UK number. .iti__flag.iti__gb { @apply hidden #{!important}; } #form-first_name::before { content: "Personal Details"; } input[type="text"], input[type="password"], input[type="url"], input[type="email"], input[type="tel"], input[type="number"] { @apply border-2 #{!important}; @apply border-grey-light #{!important}; @apply p-3 #{!important}; @apply rounded-sm #{!important}; @apply w-full #{!important}; @apply text-black #{!important}; @apply mb-8 #{!important}; } .select2-container .select2-choice { @apply border-2 #{!important}; @apply border-grey-light #{!important}; @apply rounded-sm #{!important}; @apply w-full #{!important}; @apply text-black #{!important}; @apply mb-8 #{!important}; } .control-label { @apply normal-case #{!important}; @apply text-xs #{!important}; @apply mb-2; @apply mt-2; } .select.can_select, span.can_select { @apply border-2 #{!important}; @apply border-grey-light #{!important}; @apply rounded-sm #{!important}; @apply w-full #{!important}; @apply text-black #{!important}; } #d_sharing, #donate_disclaimer { border-top: none !important; border-bottom: none !important; } .check_radio_field label { @apply text-xs #{!important}; } .check_radio_field.donate_amount_wrap { label { @apply bg-white; @apply border-solid; @apply border-2; @apply border-primary; @apply text-primary; } label.donate_amount-selected { @apply bg-primary; @apply text-white; @apply font-bold; @apply text-xxs; } label:hover { transition: none; @apply bg-primary; @apply text-white; } } #donation_recipient_wrap { display: none; } #action_info { display: none; } #d_sharing { @apply text-xxs; label { @apply text-xxs; } } .donate_recurring { @apply hidden; @apply p-3 #{!important}; .donate_recurring_inner { @apply mb-0; } } } .can_embed #can_embed_form h2.line { display: none; } /* Change the form background color, text color, and typeface */ .can_embed #can_embed_form, .can_embed #donate_auto_modal { @apply bg-white; @apply text-black; @apply font-sans; @apply text-xs; } /* Change link color */ .can_embed #can_embed_form a, .can_embed #donate_auto_modal a { @apply text-primary; } /* Heading colors */ .can_embed #can_embed_form h1, .can_embed #donate_auto_modal h1, .can_embed #can_embed_form h2, .can_embed #donate_auto_modal h2, .can_embed #can_embed_form h3, .can_embed #donate_auto_modal h3, .can_embed #can_embed_form h4, .can_embed #donate_auto_modal h4, .can_embed #can_embed_form h5, .can_embed #donate_auto_modal h5, .can_embed #can_embed_form h6, .can_embed #donate_auto_modal h6 { @apply text-primary; @apply normal-case; @apply tracking-normal; } /* Remove the Action Network Logo */ .can_embed #logo_wrap { display: none !important; } /* Welcome message background color */ .can_embed #can_embed_form #action_welcome_message #action_welcome_message_inner, .can_embed #donate_auto_modal #action_welcome_message #action_welcome_message_inner { @apply bg-white; } /* Button Background Color */ .can_embed .can_button, .can_embed #can_embed_form input[type="submit"], .can_embed #can_embed_form .button, .can_embed #donate_auto_modal input[type="submit"], .can_embed #donate_auto_modal .button { @apply bg-primary; @apply rounded-sm; @apply uppercase; @apply text-xxs; @apply text-white; @apply h-12; @apply font-bold; @apply tracking-normal; @apply w-full; } /* Button Background Color on Hover */ .can_embed .can_button:hover, .can_embed #can_embed_form input[type="submit"]:hover, .can_embed #can_embed_form .button:hover, .can_embed #donate_auto_modal input[type="submit"]:hover, .can_embed #donate_auto_modal .button:hover { @apply bg-primary; } /* Thank You Page Header Background Color */ .can_embed #can_embed_form #can_thank_you, .can_embed #donate_auto_modal #can_thank_you { @apply bg-secondary; } /* Thank You Page Header Text Color */ .can_embed #can_embed_form #can_thank_you, .can_embed #donate_auto_modal #can_thank_you, .can_embed #can_embed_form #can_thank_you h1, .can_embed #donate_auto_modal #can_thank_you h1, .can_embed #can_embed_form #can_thank_you h4, .can_embed #donate_auto_modal #can_thank_you h4, .can_embed #can_embed_form #can_thank_you #action_info .action_info_user, .can_embed #donate_auto_modal #can_thank_you #action_info .action_info_user, .can_embed #can_embed_form #can_thank_you #action_info .action_info_user a, .can_embed #donate_auto_modal #can_thank_you #action_info .action_info_user a { @apply text-black; } /* Thank You Page Divider Line */ .can_embed #can_embed_form #can_thank_you #action_info, .can_embed #donate_auto_modal #can_thank_you #action_info { @apply border-darkGrey; }
Skip to action ↓