Skip to content

Commit fdeed74

Browse files
sgarritysgarrity
committed
Move mozilla-share-cta LESS/CSS into separate file
Bug 1121114
1 parent ad4c7a5 commit fdeed74

File tree

3 files changed

+129
-124
lines changed

3 files changed

+129
-124
lines changed

‎bedrock/settings/base.py‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -363,6 +363,7 @@ def JINJA_CONFIG():
363363
'firefox_privacy_tour': (
364364
'css/sandstone/sandstone.less',
365365
'css/base/mozilla-modal.less',
366+
'css/base/mozilla-share-cta.less',
366367
'css/firefox/independent-splash.less',
367368
'css/firefox/australis/australis-ui-tour.less',
368369
'css/firefox/privacy_tour/common.less',
@@ -371,6 +372,7 @@ def JINJA_CONFIG():
371372
'firefox_privacy_no_tour': (
372373
'css/sandstone/sandstone.less',
373374
'css/base/mozilla-modal.less',
375+
'css/base/mozilla-share-cta.less',
374376
'css/firefox/independent-splash.less',
375377
'css/firefox/privacy_tour/common.less',
376378
'css/firefox/privacy_tour/no-tour.less',
@@ -430,6 +432,7 @@ def JINJA_CONFIG():
430432
),
431433
'firefox_independent': (
432434
'css/sandstone/sandstone-resp.less',
435+
'css/base/mozilla-share-cta.less',
433436
'css/firefox/independent-splash.less',
434437
'css/firefox/independent.less',
435438
),

‎media/css/base/mozilla-share-cta.less‎

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
// This Source Code Form is subject to the terms of the Mozilla Public
2+
// License, v. 2.0. If a copy of the MPL was not distributed with this
3+
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
4+
5+
@import "../sandstone/lib.less";
6+
7+
// Share button
8+
.mozilla-share-cta {
9+
position: relative;
10+
width: 296px;
11+
background: #0c99d5;
12+
color: #fff;
13+
border: 2px solid #9ed6ee;
14+
border-radius: 8px;
15+
overflow: hidden;
16+
.transition(background .2s ease-in-out);
17+
18+
&:hover,
19+
&:focus {
20+
background: lighten(#0c99d5, 2%);
21+
}
22+
23+
h3 {
24+
display: block;
25+
width: 256px;
26+
padding: 1em 20px;
27+
margin: 0;
28+
color: #fff;
29+
.font-size(18px);
30+
text-transform: uppercase;
31+
border: none;
32+
background: none;
33+
text-align: center;
34+
visibility: visible;
35+
text-shadow: none;
36+
font-family: 'Open Sans', sans-serif;
37+
opacity: 1;
38+
.transition(opacity .2s ease-in-out);
39+
40+
&:before {
41+
font-family: 'Font Awesome';
42+
content: '\f1e0\00A0\00A0';
43+
text-shadow: none;
44+
}
45+
}
46+
47+
ul {
48+
display: table;
49+
position: relative;
50+
list-style-type: none;
51+
margin: 0;
52+
padding: 0;
53+
width: 100%;
54+
height: 100%;
55+
visibility: hidden;
56+
57+
li {
58+
display: table-cell;
59+
width: 33.3%;
60+
margin: 0;
61+
padding: 0;
62+
text-align: center;
63+
vertical-align: middle;
64+
opacity: 0;
65+
.transition(opacity .2s ease-in-out);
66+
67+
a {
68+
color: #fff;
69+
display: block;
70+
margin: 0 10px;
71+
.font-size(0);
72+
73+
&:before {
74+
font-family: 'Font Awesome';
75+
.font-size(28px);
76+
line-height: 56px;
77+
opacity: 0.8;
78+
padding-top: 1px;
79+
text-shadow: none;
80+
-webkit-font-smoothing: antialiased;
81+
.transition(opacity .2s ease-in-out);
82+
}
83+
84+
&.twitter:before {
85+
content: '\f099\00A0';
86+
}
87+
88+
&.facebook:before {
89+
content: '\f09a\00A0';
90+
}
91+
92+
&.g-plus:before {
93+
content: '\f0d5\00A0';
94+
}
95+
96+
&:hover,
97+
&:focus {
98+
text-decoration: none;
99+
color: #fff;
100+
101+
&:before {
102+
text-shadow: none;
103+
opacity: 1;
104+
}
105+
}
106+
}
107+
}
108+
}
109+
}
110+
111+
.js .mozilla-share-cta {
112+
h3 {
113+
position: absolute;
114+
top: 0;
115+
left: 0;
116+
117+
&.out {
118+
opacity: 0;
119+
.transition(opacity .2s ease-in-out);
120+
}
121+
}
122+
123+
ul.in li {
124+
opacity: 1;
125+
}
126+
}

‎media/css/firefox/independent-splash.less‎

Lines changed: 0 additions & 124 deletions
Original file line numberDiff line numberDiff line change
@@ -381,130 +381,6 @@
381381
}
382382

383383

384-
385-
// Share button
386-
.mozilla-share-cta {
387-
position: relative;
388-
width: 296px;
389-
background: #0c99d5;
390-
color: #fff;
391-
border: 2px solid #9ed6ee;
392-
border-radius: 8px;
393-
overflow: hidden;
394-
.transition(background .2s ease-in-out);
395-
396-
&:hover,
397-
&:focus {
398-
background: lighten(#0c99d5, 2%);
399-
}
400-
401-
h3 {
402-
display: block;
403-
width: 256px;
404-
padding: 1em 20px;
405-
margin: 0;
406-
color: #fff;
407-
.font-size(18px);
408-
text-transform: uppercase;
409-
border: none;
410-
background: none;
411-
text-align: center;
412-
visibility: visible;
413-
text-shadow: none;
414-
font-family: 'Open Sans', sans-serif;
415-
opacity: 1;
416-
.transition(opacity .2s ease-in-out);
417-
418-
&:before {
419-
font-family: 'Font Awesome';
420-
content: '\f1e0\00A0\00A0';
421-
text-shadow: none;
422-
}
423-
}
424-
425-
ul {
426-
display: table;
427-
position: relative;
428-
list-style-type: none;
429-
margin: 0;
430-
padding: 0;
431-
width: 100%;
432-
height: 100%;
433-
visibility: hidden;
434-
435-
li {
436-
display: table-cell;
437-
width: 33.3%;
438-
margin: 0;
439-
padding: 0;
440-
text-align: center;
441-
vertical-align: middle;
442-
opacity: 0;
443-
.transition(opacity .2s ease-in-out);
444-
445-
a {
446-
color: #fff;
447-
display: block;
448-
margin: 0 10px;
449-
.font-size(0);
450-
451-
&:before {
452-
font-family: 'Font Awesome';
453-
.font-size(28px);
454-
line-height: 56px;
455-
opacity: 0.8;
456-
padding-top: 1px;
457-
text-shadow: none;
458-
-webkit-font-smoothing: antialiased;
459-
.transition(opacity .2s ease-in-out);
460-
}
461-
462-
&.twitter:before {
463-
content: '\f099\00A0';
464-
}
465-
466-
&.facebook:before {
467-
content: '\f09a\00A0';
468-
}
469-
470-
&.g-plus:before {
471-
content: '\f0d5\00A0';
472-
}
473-
474-
&:hover,
475-
&:focus {
476-
text-decoration: none;
477-
color: #fff;
478-
479-
&:before {
480-
text-shadow: none;
481-
opacity: 1;
482-
}
483-
}
484-
}
485-
}
486-
}
487-
}
488-
489-
.js .mozilla-share-cta {
490-
h3 {
491-
position: absolute;
492-
top: 0;
493-
left: 0;
494-
495-
&.out {
496-
opacity: 0;
497-
.transition(opacity .2s ease-in-out);
498-
}
499-
}
500-
501-
ul.in li {
502-
opacity: 1;
503-
}
504-
}
505-
506-
507-
508384
/*-------------------------------------------------------------------------*/
509385
// @Tablet Layout: 760px
510386
@media only screen and (min-width: @breakTablet) and (max-width: @breakDesktop) {

0 commit comments

Comments
 (0)