Permalink
Browse files

Move mozilla-share-cta LESS/CSS into separate file

Bug 1121114
  • Loading branch information...
1 parent ad4c7a5 commit fdeed7419fe37a0500de85ff8ffcccdb704f2e1b @sgarrity sgarrity committed Jan 13, 2015
Showing with 129 additions and 124 deletions.
  1. +3 −0 bedrock/settings/base.py
  2. +126 −0 media/css/base/mozilla-share-cta.less
  3. +0 −124 media/css/firefox/independent-splash.less
@@ -363,6 +363,7 @@ def JINJA_CONFIG():
'firefox_privacy_tour': (
'css/sandstone/sandstone.less',
'css/base/mozilla-modal.less',
+ 'css/base/mozilla-share-cta.less',
'css/firefox/independent-splash.less',
'css/firefox/australis/australis-ui-tour.less',
'css/firefox/privacy_tour/common.less',
@@ -371,6 +372,7 @@ def JINJA_CONFIG():
'firefox_privacy_no_tour': (
'css/sandstone/sandstone.less',
'css/base/mozilla-modal.less',
+ 'css/base/mozilla-share-cta.less',
'css/firefox/independent-splash.less',
'css/firefox/privacy_tour/common.less',
'css/firefox/privacy_tour/no-tour.less',
@@ -430,6 +432,7 @@ def JINJA_CONFIG():
),
'firefox_independent': (
'css/sandstone/sandstone-resp.less',
+ 'css/base/mozilla-share-cta.less',
'css/firefox/independent-splash.less',
'css/firefox/independent.less',
),
@@ -0,0 +1,126 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+@import "../sandstone/lib.less";
+
+// Share button
+.mozilla-share-cta {
+ position: relative;
+ width: 296px;
+ background: #0c99d5;
+ color: #fff;
+ border: 2px solid #9ed6ee;
+ border-radius: 8px;
+ overflow: hidden;
+ .transition(background .2s ease-in-out);
+
+ &:hover,
+ &:focus {
+ background: lighten(#0c99d5, 2%);
+ }
+
+ h3 {
+ display: block;
+ width: 256px;
+ padding: 1em 20px;
+ margin: 0;
+ color: #fff;
+ .font-size(18px);
+ text-transform: uppercase;
+ border: none;
+ background: none;
+ text-align: center;
+ visibility: visible;
+ text-shadow: none;
+ font-family: 'Open Sans', sans-serif;
+ opacity: 1;
+ .transition(opacity .2s ease-in-out);
+
+ &:before {
+ font-family: 'Font Awesome';
+ content: '\f1e0\00A0\00A0';
+ text-shadow: none;
+ }
+ }
+
+ ul {
+ display: table;
+ position: relative;
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ height: 100%;
+ visibility: hidden;
+
+ li {
+ display: table-cell;
+ width: 33.3%;
+ margin: 0;
+ padding: 0;
+ text-align: center;
+ vertical-align: middle;
+ opacity: 0;
+ .transition(opacity .2s ease-in-out);
+
+ a {
+ color: #fff;
+ display: block;
+ margin: 0 10px;
+ .font-size(0);
+
+ &:before {
+ font-family: 'Font Awesome';
+ .font-size(28px);
+ line-height: 56px;
+ opacity: 0.8;
+ padding-top: 1px;
+ text-shadow: none;
+ -webkit-font-smoothing: antialiased;
+ .transition(opacity .2s ease-in-out);
+ }
+
+ &.twitter:before {
+ content: '\f099\00A0';
+ }
+
+ &.facebook:before {
+ content: '\f09a\00A0';
+ }
+
+ &.g-plus:before {
+ content: '\f0d5\00A0';
+ }
+
+ &:hover,
+ &:focus {
+ text-decoration: none;
+ color: #fff;
+
+ &:before {
+ text-shadow: none;
+ opacity: 1;
+ }
+ }
+ }
+ }
+ }
+}
+
+.js .mozilla-share-cta {
+ h3 {
+ position: absolute;
+ top: 0;
+ left: 0;
+
+ &.out {
+ opacity: 0;
+ .transition(opacity .2s ease-in-out);
+ }
+ }
+
+ ul.in li {
+ opacity: 1;
+ }
+}
@@ -381,130 +381,6 @@
}
-
-// Share button
-.mozilla-share-cta {
- position: relative;
- width: 296px;
- background: #0c99d5;
- color: #fff;
- border: 2px solid #9ed6ee;
- border-radius: 8px;
- overflow: hidden;
- .transition(background .2s ease-in-out);
-
- &:hover,
- &:focus {
- background: lighten(#0c99d5, 2%);
- }
-
- h3 {
- display: block;
- width: 256px;
- padding: 1em 20px;
- margin: 0;
- color: #fff;
- .font-size(18px);
- text-transform: uppercase;
- border: none;
- background: none;
- text-align: center;
- visibility: visible;
- text-shadow: none;
- font-family: 'Open Sans', sans-serif;
- opacity: 1;
- .transition(opacity .2s ease-in-out);
-
- &:before {
- font-family: 'Font Awesome';
- content: '\f1e0\00A0\00A0';
- text-shadow: none;
- }
- }
-
- ul {
- display: table;
- position: relative;
- list-style-type: none;
- margin: 0;
- padding: 0;
- width: 100%;
- height: 100%;
- visibility: hidden;
-
- li {
- display: table-cell;
- width: 33.3%;
- margin: 0;
- padding: 0;
- text-align: center;
- vertical-align: middle;
- opacity: 0;
- .transition(opacity .2s ease-in-out);
-
- a {
- color: #fff;
- display: block;
- margin: 0 10px;
- .font-size(0);
-
- &:before {
- font-family: 'Font Awesome';
- .font-size(28px);
- line-height: 56px;
- opacity: 0.8;
- padding-top: 1px;
- text-shadow: none;
- -webkit-font-smoothing: antialiased;
- .transition(opacity .2s ease-in-out);
- }
-
- &.twitter:before {
- content: '\f099\00A0';
- }
-
- &.facebook:before {
- content: '\f09a\00A0';
- }
-
- &.g-plus:before {
- content: '\f0d5\00A0';
- }
-
- &:hover,
- &:focus {
- text-decoration: none;
- color: #fff;
-
- &:before {
- text-shadow: none;
- opacity: 1;
- }
- }
- }
- }
- }
-}
-
-.js .mozilla-share-cta {
- h3 {
- position: absolute;
- top: 0;
- left: 0;
-
- &.out {
- opacity: 0;
- .transition(opacity .2s ease-in-out);
- }
- }
-
- ul.in li {
- opacity: 1;
- }
-}
-
-
-
/*-------------------------------------------------------------------------*/
// @Tablet Layout: 760px
@media only screen and (min-width: @breakTablet) and (max-width: @breakDesktop) {

0 comments on commit fdeed74

Please sign in to comment.