Created
November 7, 2018 22:37
-
-
Save ryanbeymer/f6989d1fa7224b24c00f38b842bb60cd to your computer and use it in GitHub Desktop.
8476d698-8aeb-4ab9-96d9-0aaf173061ce
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
#333333 Black (Very Dark Gray) | |
#999999 Dark Gray | |
#AAAAAA Gray | |
#EEEEEE Light Gray | |
#FFFFFF White | |
#11375D Navy Blue | |
#4080C0 Star Logo Blue | |
#79A6D2 Alt Lighter Star Logo Blue | |
#A1E6E8 Alt Lighter Accent Light Blue | |
#63D6D9 Accent Light Blue | |
#FDCF56 Accent Yellow | |
#F9A451 Accent Orange | |
*/ | |
/* width, color, and font for embed */ | |
html, | |
body, | |
#idonate-embed { | |
width: 100% !important ; | |
max-width: 768px !important ; | |
margin: auto; | |
background: #ffffff; | |
font-family: proxima-nova, 'proxima nova', helvetica, sans-serif, 'sans serif', sansserif; | |
} | |
.container { | |
max-width: 100% !important ; | |
} | |
/* match footer style to web page footer style */ | |
section.container.footer a { | |
font-size: 14px; | |
color: #AAAAAA; | |
font-family: proxima-nova, 'proxima nova', helvetica, sans-serif, 'sans serif', sansserif; | |
} | |
/* remove superfluous hr line in the footer */ | |
section.container.footer div.row div.col-12 hr { | |
border: none !important; | |
background: rgba(255,255,255,0) !important; | |
color: rgba(255,255,255,0) !important; | |
visibility: hidden !important; | |
display: none !important; | |
opacity: 0 !important; | |
} | |
/* rounded border for buttons, inputs and drop-down menus */ | |
button.btn, | |
label.btn { | |
border-radius: 1.5em !important; | |
line-height: 1em; | |
padding: .25em; | |
height: 2em; | |
} | |
/* social login button icon */ | |
button.google::before, | |
button.facebook::before { | |
left: 5px !important; | |
top: 0 !important; | |
border-radius: 50%; | |
} | |
/* giving array styles including rounded border */ | |
label.btn-primary, | |
label.btn-outline-secondary { | |
border-radius: 3em !important; | |
line-height: 3em; | |
padding: .5em; | |
margin-left: 7.5px; | |
margin-right: 7.5px; | |
} | |
/* giving array styles */ | |
.box-group>* { | |
font-weight: 700; | |
height: inherit !important; | |
} | |
.gift-amounts>:last-child { | |
width: initial !important; | |
flex-basis: initial !important; | |
flex: 1 !important; | |
} | |
div.gift-amount, | |
label.gift-amount { | |
flex-basis: initial !important; | |
flex: 1 !important; | |
padding-left: .5em; | |
padding-right: .5em; | |
margin-top: 7.5px; | |
margin-bottom: 7.5px; | |
} | |
/* gift amount left and right margins for each button */ | |
label.gift-amount:nth-child(1) { | |
margin-left: 0 !important; | |
margin-right: 3.25px !important; | |
} | |
label.gift-amount:nth-child(2), | |
label.gift-amount:nth-child(3) { | |
margin-left: 3.25px !important; | |
margin-right: 3.25px !important; | |
} | |
div.gift-amount { | |
margin-left: 3.25px !important; | |
margin-right: 0 !important; | |
min-width: 140px; | |
} | |
/* remove superfluous custom amount border */ | |
.gift-amounts .floating-label-form-group { | |
border-top: 0 !important; | |
} | |
div.input-group.box-group.gift-amounts.form-group { | |
border: none !important; | |
} | |
/* remove superfluous active background */ | |
div.input-group.box-group.gift-amounts.form-group label *:active { | |
background: none !important; | |
} | |
/* don't display giving array amount labels */ | |
label.btn-primary .block.small-label.min-label, | |
label.btn-outline-secondary .block.small-label.min-label { | |
display: none; | |
} | |
/* remove superfluous custom amount input background */ | |
.custom-amount-input.btn-primary .floating-label-form-group-with-value.floating-label-form-group label, | |
.custom-amount-input.btn-primary .floating-label-form-group-with-value.floating-label-form-group input { | |
background: none !important; | |
} | |
/* style custom amount input and label */ | |
label.gift-amount.custom.custom-amount-input .floating-label-form-group-with-value .form-control, | |
.btn-primary .floating-label-form-group-with-value.floating-label-form-group, | |
.btn-primary .floating-label-form-group-with-value.floating-label-form-group label, | |
.btn-primary .floating-label-form-group-with-value.floating-label-form-group input { | |
color: #ffffff !important; | |
font-weight: 700 !important; | |
} | |
.btn-outline-secondary .floating-label-form-group-with-value.floating-label-form-group, | |
.btn-outline-secondary .floating-label-form-group-with-value.floating-label-form-group label, | |
.btn-outline-secondary .floating-label-form-group-with-value.floating-label-form-group input { | |
color: #4080C0 !important; | |
font-weight: 700 !important; | |
} | |
/* custom amount input small rounded border radius */ | |
.gift-amount.floating-label-form-group.btn-outline-secondary, | |
.gift-amount.floating-label-form-group.btn-primary { | |
border-radius: 4px !important; | |
border: #79A6D2 solid 1px !important; | |
} | |
/* custom amount text input cursor */ | |
.gift-amount.floating-label-form-group.btn-outline-secondary, | |
.gift-amount.floating-label-form-group.btn-primary, | |
.gift-amount.floating-label-form-group.btn-outline-secondary label | |
.gift-amount.floating-label-form-group.btn-primary label { | |
cursor: text !important; | |
} | |
.floating-label-form-group .floating-label-form-group-with-value { | |
display:none; | |
} | |
/* custom amount input small rounded border radius */ | |
.gift-amount.floating-label-form-group.btn-outline-secondary:hover { | |
background: #ffffff !important; | |
color: #333333 !important; | |
border: #333333 solid 1px !important; | |
} | |
.gift-amount.floating-label-form-group.btn-primary:hover { | |
background: #11375D !important; | |
} | |
/* custom amount primary bg and small rounded border radius */ | |
.gift-amount.floating-label-form-group.btn-primary, | |
.gift-amount.floating-label-form-group.btn-primary * { | |
border-radius: 4px !important; | |
background: #11375D !important; | |
color: #ffffff !important; | |
} | |
/* custom amount secondary bg none and small rounded border radius */ | |
.gift-amount.floating-label-form-group.btn-outline-secondary, | |
.gift-amount.floating-label-form-group.btn-outline-secondary * { | |
border-radius: 4px !important; | |
background: none !important; | |
color: #4080C0 !important; | |
} | |
/* giving array primary color */ | |
label.btn-primary { | |
background: #11375D !important; | |
color: #ffffff !important; | |
border: #4080C0 solid 1px !important; | |
} | |
/* giving array primary hover color */ | |
label.btn-primary:hover { | |
background: #091C2F !important; | |
color: #ffffff !important; | |
border: #4080C0 solid 1px !important; | |
} | |
/* giving array secondary color */ | |
label.btn-outline-secondary { | |
background: #4080C0 !important; | |
color: #ffffff !important; | |
border: #4080C0 solid 1px !important; | |
} | |
/* secondary button style */ | |
label.btn-outline-secondary { | |
background: #4080C0 !important; | |
color: #ffffff !important; | |
border: #4080C0 solid 1px !important; | |
} | |
/* giving array secondary hover color */ | |
label.btn-outline-secondary:hover { | |
background: #11375D !important; | |
color: #ffffff !important; | |
border: #4080C0 solid 1px !important; | |
} | |
/* secondary button hover style */ | |
.btn-outline-secondary:hover { | |
background: #11375D !important; | |
color: #ffffff !important; | |
border: #4080C0 solid 1px !important; | |
} | |
/* giving array active */ | |
label.btn-primary:active, | |
label.btn-outline-secondary:active { | |
border-radius: 1.55em !important; | |
} | |
/* remove superflous top margin from gift amount label spans */ | |
div.input-group.box-group.gift-amounts.form-group label span.label{ | |
margin-top: 0 !important; | |
} | |
/* change echeck to bank account */ | |
.btn[aria-label~="echeck"] div { | |
text-indent: -9999px; | |
line-height: 0; /* Collapse the original line */ | |
} | |
.btn[aria-label~="echeck"] div:after { | |
content: "Bank Account"; | |
text-indent: 0; | |
display: block; | |
line-height: 0; | |
position: relative; | |
top: -.5em; | |
} | |
/* validation indication */ | |
.validation-failed { | |
border: 2px solid rgba(255, 0, 0, 0.5)!important; | |
background: rgba(255, 0, 0, 0.125); | |
} | |
/* remove superflous border around give submit button */ | |
div.container div.row.continue.border-primary.primary-color-border-half { | |
border: none !important; | |
} | |
/* give submit button style */ | |
div.container div.row.continue.border-primary.primary-color-border-half app-give-button div.col.d-flex.flex-column.text-center { | |
flex-direction: none !important; | |
} | |
div.container div.row.continue.border-primary.primary-color-border-half app-give-button button.my-auto.btn.btn-primary { | |
font-weight: 700; | |
line-height: 1.5em !important; | |
padding: 0 2em !important; | |
height: 3em !important; | |
margin: auto !important; | |
} | |
/* give submit button hover background color */ | |
div.container div.row.continue.border-primary.primary-color-border-half app-give-button button.my-auto.btn.btn-primary:hover { | |
background: #11375D !important; | |
} | |
/* login button padding */ | |
app-login div.container.login button.btn.btn-primary { | |
padding-left: 1em; | |
padding-right: 1em; | |
background: rgba(121, 166, 210, 0.2)!important; | |
border: #79A6D2 solid 1px!important; | |
color: rgba(51, 51, 51, 0.85); | |
} | |
/* login button hover background color */ | |
app-login div.container.login button.btn.btn-primary:hover { | |
background: rgba(121, 166, 210, 0.85)!important; | |
color: rgba(51, 51, 51, 1); | |
} | |
/* selected payment type background color */ | |
label.btn.w-100.btn-primary { | |
background: #11375D !important; | |
} | |
/* selected payment type hover background color */ | |
label.btn.w-100.btn-primary:hover { | |
background: #091C2F !important; | |
} | |
/* bank account payment type line height*/ | |
.payment-type .align-middle.h-100 { | |
line-height: 1em; | |
} | |
/* remove superfluous active background */ | |
.btn-primary :not(:disabled):not(.disabled):active { | |
background: rgba(255,255,255,0) !important; | |
} | |
/* primary button hover state */ | |
.btn-primary:hover { | |
background: #11375D !important; | |
color: #ffffff !important; | |
} | |
/* primary button active state */ | |
.btn-primary:active { | |
background: #333333 !important; | |
color: #ffffff !important; | |
} | |
/* focus select has value style */ | |
.ng-select-focused .ng-select-container.ng-has-value { | |
border: 1px solid #b6b8ba !important; | |
box-shadow: none !important; | |
} | |
/* add another designation link style */ | |
a.add-designation { | |
color: #4080C0 !important; | |
font-size: 16px; | |
font-weight: bold; | |
} | |
a.add-designation:hover { | |
text-decoration: underline !important; | |
} | |
/* add another gift link style */ | |
div.modal-footer div.mx-auto a { | |
color: #4080C0 !important; | |
font-size: 16px; | |
font-weight: bold; | |
} | |
div.modal-footer div.mx-auto a:hover { | |
text-decoration: underline !important; | |
} | |
/* change error block | |
p.error-block.text-center:before { | |
content: "Error processing your donation. Check your payment above. If you continue to have problems, call us at 1-800-366-5521. Returned Message from Card Processor: "; | |
} | |
*/ | |
/* hiding the last custom notes field */ | |
app-custom-notes .container:last-child text-field { | |
display: none; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment