Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
Small Technology Foundation web site
spikes
patronage
Commits
42722599
Verified
Commit
42722599
authored
Aug 04, 2019
by
Aral Balkan
Browse files
Style the buttons
parent
1970f8d5
Changes
2
Hide whitespace changes
Inline
Side-by-side
.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
(
4
n
)
{
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
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment