CREEC Salsa CSS

forms.css

/**
 * Import Google fonts used on website 
 */
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville&family=Montserrat:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/**
 * Set default font, font size and line height to match website 
 */
html body,
body p,
html body .sli-element,
html body #sli .sli-element,
html body formtemplate[class][ignite-show-content] .sli-element {
    font-family: Montserrat, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 18px;
    line-height: 1.618;
}

/**
 * Set font, color, and weight for headings 
 */
body .sli-widget h1,
body .sli-widget h2,
body .sli-widget h3,
body .sli-widget h4,
body .sli-widget h5, 
body .sli-widget h6 {
    color: #690101;
    font-family: 'Libre Baskerville', Georgia, Times, 'Times New Roman', serif;
    font-weight: normal;
}

/**
 * Set padding on top of donation amounts to make focus indicator visible 
 */
body .sli-donationAmounts {
    padding-top: 1px;
}

/** 
 * Add focus indicator to donation amounts 
 */
body ul.sli-style-button input[type='radio']:focus + label {
    outline: 2px dotted black;
}

/**
 * Add focus indicator to checkbox
 */
body .sli-form .sli-input[type='checkbox']:focus {
    outline: 2px dotted black;
}

/**
 * Remove bottom positioning from checkboxes and radios
 */
.sli-widget input[type='checkbox'],
.sli-widget input[type='radio']{
    bottom: 0;
}

/**
 * Style text inputs
 */
html body #sli .sli-input:not([type]),
html body #sli .sli-input[type='text'],
html body #sli .sli-input[type='email'],
html body formtemplate[class][ignite-show-content] .sli-input:not([type]),
html body formtemplate[class][ignite-show-content] .sli-input[type='text'],
html body formtemplate[class][ignite-show-content] .sli-input[type='email']{
    background: #f6f4f0 !important;
    border: 2px solid transparent !important;
    border-bottom: 2px solid #9e875a !important;
    border-radius: 3px 3px 0 0;
    box-shadow: none;
}
html body #sli .sli-input:not([type]):focus,
html body #sli .sli-input[type='text']:focus,
html body #sli .sli-input[type='email']:focus,
html body formtemplate[class][ignite-show-content] .sli-input:not([type]):focus,
html body formtemplate[class][ignite-show-content] .sli-input[type='text']:focus,
html body formtemplate[class][ignite-show-content] .sli-input[type='email']:focus {
    background: white !important;
    border: 2px solid #9e875a !important;
}

/** 
 * Add focus style to buttons
 */
.sli-button.sli-expand:focus,
.sli-button.sli-small {
    outline: 2px dotted black;
    outline-offset: 1px;
}

/**
 * Add focus style to social media buttons
 */
.sli-social-icons-element .sli-social-icons-list .sli-social-icons-item a:focus {
    outline: 2px dotted black;
    outline-offset: 1px;
}

/** 
 * Style links
 */
body .sli-element a:not(.sli-button),
html body #sli .sli-element a:not(.sli-button),
html body formtemplate[class][ignite-show-content] .sli-element a:not(.sli-button) {
    color: #690101;
    text-decoration: underline;
}
body .sli-element a:not(.sli-button):hover,
body .sli-element a:not(.sli-button):focus,
html body #sli .sli-element a:not(.sli-button):hover,
html body #sli .sli-element a:not(.sli-button):focus,
html body formtemplate[class][ignite-show-content] .sli-element a:not(.sli-button):hover,
html body formtemplate[class][ignite-show-content] .sli-element a:not(.sli-button):focus {
    text-decoration: none;
}
body .sli-element a:not(.sli-button):focus,
html body #sli .sli-element a:not(.sli-button):focus,
html body formtemplate[class][ignite-show-content] .sli-element a:not(.sli-button):focus {
    outline: 2px dotted black;
    outline-offset: 1px;
}