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

Bug 1121114

bedrock/settings/base.py

@@ -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',
         ),

media/css/base/mozilla-share-cta.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;
+    }
+}

media/css/firefox/independent-splash.less

@@ -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) {