Skip to content

P
patronage
Commit 42722599 authored by Aral Balkan's avatar Aral Balkan
Browse files
Options

Style the buttons

parent 1970f8d5
Hide whitespace changes
Inline Side-by-side
Showing with 189 additions and 172 deletions
.dynamic/client/patron.css
View file @ 42722599
......@@ -40,6 +40,13 @@ h1 {
color: #82073B;
}
/* The colour overrides, above, also apparently override the :disabled pseudo-class */
#pause-button:disabled, #cancel-button:disabled
{
color: #ccc;
background-color: #eee;
}
input[type='text'] {
font-size: 20px;
}
fund-us/css/index.css
View file @ 42722599
/*
Funding page styles.
Funding page styles.
*/
/* Paul Irish’s box-sizing best practices */
/* ======================================= */
html
{
box-sizing: border-box;
font-family: "Avenir Next", Avenir, 'Helvetica Neue', Helvetica, sans-serif;
box-sizing: border-box;
font-family: "Avenir Next", Avenir, 'Helvetica Neue', Helvetica, sans-serif;
}
*, *:before, *:after
{
box-sizing: inherit;
box-sizing: inherit;
}
/* ======================================= */
/*
Extending the main class to add centering.
Extending the main class to add centering.
Also, including the site footer styles.
This should probably be in the global stylesheet.
Also, including the site footer styles.
This should probably be in the global stylesheet.
TODO: Laura, can you please take a look?
TODO: Laura, can you please take a look?
*/
.main
{
padding-left: 15px;
padding-right: 15px;
max-width: 700px;
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
@media only screen and (min-width: 730px) {
.main
{
padding-left: 0;
padding-right: 0;
}
.main
{
padding-left: 0;
padding-right: 0;
}
}
.displayNone
{
display: none;
display: none;
}
fieldset
{
border: 0;
padding: 0;
margin: 0;
border: 0;
padding: 0;
margin: 0;
}
input[name="donationAmount"]
{
width: 0;
height: 0;
width: 0;
height: 0;
}
#patronageForm, #progressIndicator, #thankYouMessage, #errorMessage
{
margin-left: auto;
margin-right: auto;
max-width: 530px;
margin-left: auto;
margin-right: auto;
max-width: 530px;
/* margin-top: -48px; */
/* margin-top: -48px; */
}
#errorMessage
{
margin-top: -70px;
margin-top: -70px;
/* Make up for the lack of margin between the error message and the donation form. */
margin-bottom: 90px;
/* Make up for the lack of margin between the error message and the donation form. */
margin-bottom: 90px;
}
.patronageForm
{
padding: 10px;
width: 300px;
overflow: hidden;
padding: 10px;
width: 300px;
overflow: hidden;
/*
Using explicitly set max-height to transition as transition height from auto
to a value does not work. Because that’s not what you’d want to do 99% of the
time when you collapse an element. *walks away grumbling* :)
*/
max-height: 338px;
transition: max-height 0.33s, padding-bottom 0.33s;
/*
Using explicitly set max-height to transition as transition height from auto
to a value does not work. Because that’s not what you’d want to do 99% of the
time when you collapse an element. *walks away grumbling* :)
*/
max-height: 338px;
transition: max-height 0.33s, padding-bottom 0.33s;
}
@media only screen and (min-width: 380px) {
.patronageForm {
padding: 10px;
width: 358px;
}
.patronageForm {
padding: 10px;
width: 358px;
}
}
#errorMessage
{
max-height: 0;
overflow: hidden;
padding-bottom: 0;
transition: max-height 0.33s;
max-height: 0;
overflow: hidden;
padding-bottom: 0;
transition: max-height 0.33s;
}
#serverError, #recurringDonationNote
{
font-weight: 600;
font-weight: 600;
}
.noHeight
{
max-height: 0px;
padding-bottom: 0px;
max-height: 0px;
padding-bottom: 0px;
}
.patronageForm label
{
display: inline-block;
border-radius: 6px;
border: 0;
background-color: #eee;
color: #304349;
display: inline-block;
border-radius: 6px;
border: 0;
background-color: #eee;
color: #304349;
}
.donationTypeButtonLabel
{
width: 48%;
height: 34px;
line-height: 30px;
text-align: center;
margin-bottom: 12px;
font-size: 14px;
cursor: pointer;
border: 0;
background-color: #eee;
width: 48%;
height: 34px;
line-height: 30px;
text-align: center;
margin-bottom: 12px;
font-size: 14px;
cursor: pointer;
border: 0;
background-color: #eee;
}
input[name="donationType"] {
display: none;
display: none;
}
label {
position: relative;
position: relative;
}
input[name="donationType"] + label {
border: 2px solid #eee;
border: 2px solid #eee;
}
.selectButton:checked + label:before {
box-sizing: border-box;
position: absolute;
top: 1px;
left: 1px;
right: 1px;
bottom: 1px;
border-radius: 6px;
content:" ";
border: 2px solid #76BCC7;
box-sizing: border-box;
position: absolute;
top: 1px;
left: 1px;
right: 1px;
bottom: 1px;
border-radius: 6px;
content:" ";
border: 2px solid #76BCC7;
}
.selectButton:checked + label {
background-color: #AFE1E8;
color: #154652;
background-color: #AFE1E8;
color: #154652;
}
/* only add right margin to first button
(creating central gutter) */
(creating central gutter) */
.donationTypeButtonLabel:nth-of-type(1)
{
margin-right: 5px;
margin-right: 5px;
}
.donationTierButtonLabel
{
clear: none;
cursor: pointer;
display: block;
float: left;
width: 62px;
height: 89px;
line-height: 85px;
margin-bottom: 10px;
margin-right: 10px;
clear: none;
cursor: pointer;
display: block;
float: left;
width: 62px;
height: 89px;
line-height: 85px;
margin-bottom: 10px;
margin-right: 10px;
font-size: 21px;
text-align: center;
font-size: 21px;
text-align: center;
}
@media only screen and (min-width: 380px) {
.donationTierButtonLabel
{
font-size: 24px;
width: 76px;
}
.donationTierButtonLabel
{
font-size: 24px;
width: 76px;
}
}
/* remove right margin from last button on each row
(creating gutters between buttons) */
(creating gutters between buttons) */
.donationTierButtonLabel:nth-of-type(4n)
{
margin-right: 0;
margin-right: 0;
}
.donationTierButtonLabel > input
{
max-width: 60px;
font-size: 16px;
text-align: center;
max-width: 60px;
font-size: 16px;
text-align: center;
}
input[name="donationAmount"] + label
{
border: 2px solid #eee;
border: 2px solid #eee;
}
#customDonationLabel
{
font-size: 16px;
padding-top: 5px;
line-height: 30px;
font-size: 16px;
padding-top: 5px;
line-height: 30px;
}
#customDonationLabel > input
{
margin-left: 3px;
margin-right: 3px;
width: 54px;
/* ensure styles are consistent with that of other input types */
background: #fff;
border: 1px solid #AFAFAF;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: #4d4d4d;
display: block;
height: 30px;
line-height: 30px;
padding: 0;
-webkit-appearance: none;
opacity: 0.5;
margin-left: 3px;
margin-right: 3px;
width: 54px;
/* ensure styles are consistent with that of other input types */
background: #fff;
border: 1px solid #AFAFAF;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: #4d4d4d;
display: block;
height: 30px;
line-height: 30px;
padding: 0;
-webkit-appearance: none;
opacity: 0.5;
}
@media only screen and (min-width: 380px) {
#customDonationLabel > input
{
margin-left: 7px;
margin-right: 7px;
width: 60px;
}
#customDonationLabel > input
{
margin-left: 7px;
margin-right: 7px;
width: 60px;
}
}
input[type='submit'], button
input[type='text']:disabled {
cursor: not-allowed;
}
button
{
font-size: 16px;
margin-top: 4px;
margin-bottom: 10px;
margin-right: 0;
height: 50px;
border: 0;
border-radius: 5px;
cursor: pointer;
color: #004E48;
background-color: #E3F9A8;
}
input[type='submit']:hover, button:hover
display: block;
font-size: 16px;
margin-top: 4px;
margin-bottom: 10px;
text-align: center;
margin-left: auto;
margin-right: auto;
padding-left: 1em;
padding-right: 1em;
height: 50px;
border: 0;
border-radius: 5px;
cursor: pointer;
color: #004E48;
background-color: #E3F9A8;
width: 100%;
}
button:hover
{
background-color: #CBE89B;
/* border: 2px solid #A4C776; */
background-color: #CBE89B;
}
input[type='submit']:disabled, button:disabled
button:disabled
{
color: #ccc;
background-color: #eee;
/* border: 2px solid #eee; */
color: #ccc;
background-color: #eee;
cursor: not-allowed;
}
@media only screen and (min-width: 380px) {
input[type='submit'], button {
font-size: 20px;
}
button {
font-size: 20px;
width: auto;
}
}
#submitButton {
width: 99%;
width: 99%;
}
.donation-currency {
color: #7d7d7d;
display: block;
font-style: italic;
text-align: center;
color: #7d7d7d;
display: block;
font-style: italic;
text-align: center;
}
/* Accessibly hide elements, as per http://webaim.org/techniques/css/invisiblecontent/ */
.hidden
{
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}
/* Courtesy: https://stackoverflow.com/a/2310809 */
.unselectable {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Like this? Fund us! Your patronage helps keep us independent and going.