Skip to content
This repository was archived by the owner on Jan 17, 2025. It is now read-only.

Commit 2643a60

Browse files
author
Rob Myers
committed
CSS fixes. Fix #36 - Make Sure Popup Menu Positions Correctly. Fix #38 - No Button Click Offsets. Fix #37 - Popup Menu Item Background Width. Fix #34 - Don't Inherit Text Properties For Buttons. Fix #35 - No Button Animations.
1 parent 395ed32 commit 2643a60

File tree

2 files changed

+197
-140
lines changed

2 files changed

+197
-140
lines changed

‎css/cc-button.css‎

Lines changed: 195 additions & 137 deletions
Original file line numberDiff line numberDiff line change
@@ -1,158 +1,216 @@
1-
.cc-reset, .cc-attribution-element, .cc-attribution-button, .cc-attribution-button:hover, .cc-attribution-copy-button:hover, .cc-attribution-button:active, .cc-attribution-copy-button:active, .cc-attribution-help-button, .cc-attribution-help-button:hover, .cc-attribution-button-cc, .cc-attribution-button-share, .cc-attribution-help-button:active, .cc-attribution-copy-button, .cc-attribution-format-select, .cc-attribution-popup, .cc-attribution-note, .cc-help-popup, .cc-transient-notice, .cc-dropdown-wrapper, .cc-dropdown-menu, .cc-dropdown-menu-item, .cc-dropdown-menu-item-link {
2-
border: 0;
3-
padding: 0;
4-
margin: 0;
5-
line-height: 1;
6-
font-size: 100%;
7-
font-family: sans-serif;
8-
font-style: normal;
9-
font-weight: normal;
10-
text-transform: none;
11-
/* Upsets cc-attribution alignment vertical-align: middle; */ }
1+
2+
/* The div wrapping everything */
123

134
.cc-license-block {
14-
font-color: #686868;
15-
font-size: 80%;
16-
font-style: italic;
17-
font-weight: normal;
185
}
196

7+
.cc-license-block p {
8+
/* See #36 - without this the height of the attribution button is added in
9+
some themes */
10+
margin-top: 0 !important;
11+
}
12+
13+
/* The div wrapping all our buttony things */
14+
2015
.cc-attribution-element {
21-
height: 31px;
22-
overflow: visible;
23-
vertical-align: middle;
24-
font-size: 100%;
25-
padding: 0;
26-
float:right;
27-
display: inline; }
28-
29-
.cc-attribution-button, .cc-attribution-button:hover, .cc-attribution-copy-button:hover, .cc-attribution-button:active, .cc-attribution-copy-button:active, .cc-attribution-help-button, .cc-attribution-help-button:hover {
30-
height: 31px;
31-
width: auto;
32-
margin: 0;
33-
border: 0;
34-
border-radius: 4px;
35-
/*font-weight: bold;*/ }
36-
37-
.cc-attribution-button {
38-
background-color: #ABB1AA;
39-
}
40-
41-
.cc-attribution-button-cc {
42-
border: 0;
43-
vertical-align: text-bottom; }
44-
45-
.cc-attribution-button-share {
46-
border: 0;
47-
vertical-align: text-bottom; }
48-
49-
.cc-attribution-copy-button, .cc-attribution-copy-button:hover, .cc-attribution-copy-button:active {
50-
padding: 0 2px 0 5px;
51-
border-color: black;
52-
border-style: solid;
53-
border-width: 1px 0px 1px 1px;
54-
border-radius: 4px 0px 0px 4px; }
55-
56-
.cc-attribution-format-select {
57-
background-color: #ABB1AA;
58-
height: 31px;
59-
width: 5em;
60-
margin: 0;
61-
padding: 0 5px 0 0px;
62-
border-color: black;
63-
border-style: solid;
64-
border-width: 1px 1px 1px 0px;
65-
border-radius: 0px 4px 4px 0px; }
16+
height: 31px;
17+
overflow: visible;
18+
vertical-align: middle;
19+
padding: 0;
20+
float:right;
21+
display: inline;
22+
box-shadow: none;
23+
animation: 0s none;
24+
transition: none;
25+
}
6626

67-
.cc-attribution-help-button, .cc-attribution-help-button:hover {
68-
border-color: black;
69-
border-style: solid;
70-
border-width: 1px;
71-
border-radius: 4px 4px 4px 4px;
72-
padding: 0 5px 0 5px;
73-
/*font-weight: bold;*/ }
27+
/* The shared reset / text basics class */
28+
29+
.cc-attribution-button,
30+
.cc-attribution-button:focus,
31+
.cc-attribution-button:hover,
32+
.cc-attribution-button:active,
33+
.cc-attribution-button:visited,
34+
.cc-dropdown-menu-item-link,
35+
.cc-dropdown-menu-item-link:hover,
36+
.cc-dropdown-menu-item-link:active,
37+
.cc-dropdown-menu-item-link:focus,
38+
.cc-dropdown-menu-item-link:visited {
39+
width: auto;
40+
color: #fefefe;
41+
background-color: #ABB1AA;
42+
background-image: none;
43+
line-height: 1;
44+
font-size: 16px; /*100%;*/
45+
font-family: sans-serif;
46+
font-style: normal;
47+
font-weight: normal;
48+
text-transform: none;
49+
text-decoration: none;
50+
text-align: left;
51+
letter-spacing: normal;
52+
margin: 0;
53+
padding: 0;
54+
border: 1px solid black;
55+
border-radius: 0;
56+
box-shadow: none;
57+
animation: 0s none;
58+
transition: none;
59+
}
60+
61+
/* The shared button class */
7462

75-
.cc-attribution-help-button {
76-
background-color: #ABB1AA;
63+
.cc-attribution-button,
64+
.cc-attribution-button:focus,
65+
.cc-attribution-button:hover,
66+
.cc-attribution-button:active,
67+
.cc-attribution-button:visited {
68+
height: 31px;
69+
width: auto;
7770
}
7871

79-
.cc-attribution-help-button:hover {
80-
background-color: rgba(51, 51, 51, 0.7); }
72+
.cc-attribution-button:hover,
73+
.cc-attribution-button:active {
74+
color: #555;
75+
}
8176

82-
.cc-attribution-popup {
83-
display: inline-block;
84-
padding: 12px;
85-
border: 2px solid gray;
86-
border-radius: 12px;
87-
font-family: sans-serif; }
77+
/* Used with cc-attribution-button in the html */
8878

89-
.cc-attribution-note {
90-
margin-top: 5px;
91-
margin-bottom: 3px;
92-
font-size: small; }
79+
.cc-attribution-copy-button,
80+
.cc-attribution-copy-button:focus,
81+
.cc-attribution-copy-button:hover,
82+
.cc-attribution-copy-button:active,
83+
.cc-attribution-copy-button:visited {
84+
padding: 0 2px 0 5px;
85+
border-style: solid;
86+
border-width: 1px 0px 1px 1px;
87+
border-radius: 4px 0px 0px 4px;
88+
}
9389

94-
.cc-help-popup {
95-
background-color: #F8F8F8;
96-
border: 1px solid #666666;
97-
position: fixed;
98-
width: 200px;
99-
height: auto;
100-
bottom: 60%;
101-
left: 50%;
102-
margin-left: -100px;
103-
padding: 6px;
104-
border-radius: 12px;
105-
box-shadow: 0px 0px 24px -1px #3f3f3f; }
90+
.cc-attribution-copy-button-label {
91+
}
10692

107-
.cc-transient-notice {
108-
color: #F5F5F5;
109-
background-color: #444444;
110-
font-size: 20px;
111-
text-align: center;
112-
position: fixed;
113-
width: 200px;
114-
height: auto;
115-
left: 50%;
116-
margin-left: -100px;
117-
bottom: 10px;
118-
padding: 10px;
119-
border-radius: 5px;
120-
box-shadow: 0px 0px 24px -1px #3f3f3f; }
93+
/* Div containing the drop-down menu for the format,
94+
used without other classes */
12195

12296
.cc-dropdown-wrapper {
123-
position: relative;
124-
display: inline-block;
125-
margin-left: -4px;}
97+
position: relative;
98+
display: inline-block;
99+
margin-left: -4px;
100+
border: 0;
101+
padding: 0;
102+
margin: 0;
103+
box-shadow: none;
104+
animation: 0s none;
105+
}
106+
107+
/* Used with cc-attribution-button in the html */
108+
109+
.cc-attribution-format-select,
110+
.cc-attribution-format-select:focus,
111+
.cc-attribution-format-select:hover,
112+
.cc-attribution-format-select:active,
113+
.cc-attribution-format-select:visited {
114+
width: 5em;
115+
padding: 0 4px 0 2px;
116+
border-style: solid;
117+
border-width: 1px 1px 1px 0px;
118+
border-radius: 0px 4px 4px 0px;
119+
}
126120

127121
.cc-dropdown-menu {
128-
position: absolute;
129-
top: 100%;
130-
left: 0;
131-
margin: 0 !important
132-
list-style-type: none;
133-
display: none;
134-
background-color: #E8E8E8;
135-
border: 1px solid gray;
136-
box-shadow: 0px 0px 24px -1px #3f3f3f; }
122+
display: none;
123+
position: absolute;
124+
top: 100%;
125+
left: 0;
126+
width: 5em;
127+
list-style: none;
128+
background-color: #E8E8E8;
129+
border: 1px solid gray;
130+
margin: 0;
131+
/* !important otherwise some themes ignore this, and inset the items */
132+
padding: 0 !important;
133+
box-shadow: 0px 0px 24px -1px #3f3f3f;
134+
}
137135

138136
.cc-dropdown-menu-item {
139-
font-weight: bold;
140-
float: left;
141-
padding: 3px 8px;
142-
/* So we fill the drop-down div, and our background color covers it */
143-
width: 100%;
144-
/*background-color: #FFF;*/
145-
margin: 0 10px 0 0;
146-
list-style: none outside none; }
137+
display: block;
138+
font-weight: bold;
139+
float: left;
140+
padding: 3px 8px;
141+
/* So we fill the drop-down div, and our background color covers it */
142+
width: 100%;
143+
list-style: none outside none;
144+
/* Some styles set these aggressively, make sure we override them... */
145+
margin: 0 !important;
146+
border: 0 !important;
147+
padding: 0 !important;
148+
border-radius: 0;
149+
box-shadow: none;
150+
animation: 0s none;
151+
}
147152

148153
.cc-dropdown-menu-item-selected {
149-
background: #CCCCCC; }
150-
151-
.cc-dropdown-menu-item-link {
152-
font-size: 100%;
153-
display: block;
154-
width: 60px;
155-
text-decoration: none;
156-
/* And to remove the underlining from WordPress's style... */
157-
box-shadow: none !important;
158-
border: none !important; }
154+
background: #CCCCCC;
155+
}
156+
157+
.cc-dropdown-menu-item-link,
158+
.cc-dropdown-menu-item-link:hover,
159+
.cc-dropdown-menu-item-link:active,
160+
.cc-dropdown-menu-item-link:focus,
161+
.cc-dropdown-menu-item-link:visited {
162+
display:inline-block;
163+
width:100%;
164+
height:100%;
165+
background: none;
166+
color: black;
167+
/* And to remove any underlining... */
168+
text-decoration: none !important;
169+
box-shadow: none !important;
170+
border: none !important;
171+
}
172+
173+
/* Used with cc-attribution-button in the html */
174+
175+
.cc-attribution-help-button,
176+
.cc-attribution-help-button:hover,
177+
.cc-attribution-help-button:active,
178+
.cc-attribution-help-button:focus,
179+
.cc-attribution-help-button:visited
180+
{
181+
border-radius: 4px 4px 4px 4px;
182+
padding: 0 5px 0 5px;
183+
}
184+
185+
.cc-help-modal {
186+
}
187+
188+
.cc-help-popup {
189+
background-color: #F8F8F8;
190+
border: 1px solid #666666;
191+
position: fixed;
192+
width: 200px;
193+
height: auto;
194+
bottom: 60%;
195+
left: 50%;
196+
margin-left: -100px;
197+
padding: 6px;
198+
border-radius: 12px;
199+
box-shadow: 0px 0px 24px -1px #3f3f3f;
200+
}
201+
202+
.cc-transient-notice {
203+
color: #F5F5F5;
204+
background-color: #444444;
205+
font-size: 20px;
206+
text-align: center;
207+
position: fixed;
208+
width: 200px;
209+
height: auto;
210+
left: 50%;
211+
margin-left: -100px;
212+
bottom: 10px;
213+
padding: 10px;
214+
border-radius: 5px;
215+
box-shadow: 0px 0px 24px -1px #3f3f3f;
216+
}

‎includes/class-creativecommons-button.php‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,11 @@ class CreativeCommonsButton
66
const CCL_BUTTON_HEAD = '<div class="cc-attribution-element"><button class="cc-attribution-button cc-attribution-copy-button" data-clipboard-action="copy" data-clipboard-text="" ';
77

88
const CCL_BUTTON_TAIL = '"><span class="cc-attribution-copy-button-label" data-l10n-id="Share">Copy credit as</span>'
9-
. '</button>
10-
<div class="cc-dropdown-wrapper"><button class="cc-attribution-format-select">HTML &#x25BC;</button>
9+
. '</button><div class="cc-dropdown-wrapper"><button class="cc-attribution-button cc-attribution-format-select">HTML &#x25BC;</button>
1110
<ul class="cc-dropdown-menu" aria-haspopup="true" aria-expanded="false">
1211
<li class="cc-dropdown-menu-item cc-dropdown-menu-item-selected"><a class="cc-dropdown-menu-item-link cc-format-html-rdfa" data-cc-format="html-rdfa" href="#">HTML</a></li>
1312
<li class="cc-dropdown-menu-item"><a class="cc-dropdown-menu-item-link cc-format-text" data-cc-format="text" href="#">Text</a></li></ul></div>
14-
<button class="cc-attribution-help-button" data-l10n-id="?">?</button></div>';
13+
<button class="cc-attribution-button cc-attribution-help-button" data-l10n-id="?">?</button></div>';
1514

1615

1716
private static $instance = null;

0 commit comments

Comments
 (0)