ff-stream-web

commit 46d8bae768cb2671b05c0a534b63715235cb0285
parent 7f0e7639265e730d6d24d0cba22b490419b3419e
Author: Konstantin Tarkus <hello@tarkus.me>
Date:   Sun, 14 Sep 2014 17:17:59 +0400

Refactor LESS styles organization

Diffstat:
M
src/components/Navbar.jsx
 | 
2
+-
M
src/layouts/Default.jsx
 | 
2
+-
D
src/styles/base.less
 | 
31
-------------------------------
M
src/styles/bootstrap.less
 | 
9
+++------
A
src/styles/mixins.less
 | 
5
+++++
M
src/styles/navbar.less
 | 
30
++++++++++++++++++++++++++++--
A
src/styles/utilities.less
 | 
16
++++++++++++++++
M
src/styles/variables.less
 | 
2
++

8 files changed, 56 insertions(+), 41 deletions(-)
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
@@ -7,7 +7,7 @@ var React = require('react');
 module.exports = React.createClass({
     render: function () {
         return (
-            <div className="navbar navbar-inverse navbar-fixed-top">
+            <div className="navbar-top">
                 <div className="container">
                     <a className="navbar-brand" href="/"><img src="/images/logo-small.png" width="38" height="38" alt="" /> React Seed</a>
                 </div>
diff --git a/src/layouts/Default.jsx b/src/layouts/Default.jsx
@@ -12,7 +12,7 @@ module.exports = React.createClass({
             <div>
                 <Navbar />
                 <this.props.activeRouteHandler />
-                <div className="navbar navbar-fixed-bottom">
+                <div className="footer">
                     <div className="container">
                         <p className="text-muted">&copy; KriaSoft • <Link to="home">Home</Link> • <Link to="privacy">Privacy</Link></p>
                     </div>
diff --git a/src/styles/base.less b/src/styles/base.less
@@ -1,31 +0,0 @@
-/* ==========================================================================
-   Base styles
-   ========================================================================== */
-
-html {
-    padding-top: 48px;
-}
-
-/* ==========================================================================
-   Browse Happy prompt
-   ========================================================================== */
-
-.browsehappy {
-    margin: 0.2em 0;
-    background: #ccc;
-    color: #000;
-    padding: 0.2em 0;
-}
-
-/* ==========================================================================
-   Footer
-   ========================================================================== */
-
-.navbar-fixed-bottom {
-
-    background-color: darken(@body-bg, 2%);
-
-    .text-muted {
-        margin-top: 1em;
-    }
-}
diff --git a/src/styles/bootstrap.less b/src/styles/bootstrap.less
@@ -3,9 +3,8 @@
    ========================================================================== */
 
 // Core variables and mixins
-@import "../../node_modules/bootstrap/less/variables.less";
-@import "../../node_modules/bootstrap/less/mixins.less";
 @import "variables.less";
+@import "mixins.less";
 
 // Reset and dependencies
 @import "../../node_modules/bootstrap/less/normalize.less";
@@ -20,7 +19,6 @@
 @import "../../node_modules/bootstrap/less/tables.less";
 @import "../../node_modules/bootstrap/less/forms.less";
 @import "../../node_modules/bootstrap/less/buttons.less";
-@import "base.less";
 
 // Components
 @import "../../node_modules/bootstrap/less/component-animations.less";
@@ -28,7 +26,7 @@
 @import "../../node_modules/bootstrap/less/button-groups.less";
 @import "../../node_modules/bootstrap/less/input-groups.less";
 @import "../../node_modules/bootstrap/less/navs.less";
-@import "../../node_modules/bootstrap/less/navbar.less";
+@import "navbar.less";
 @import "../../node_modules/bootstrap/less/breadcrumbs.less";
 @import "../../node_modules/bootstrap/less/pagination.less";
 @import "../../node_modules/bootstrap/less/pager.less";
@@ -44,7 +42,6 @@
 @import "../../node_modules/bootstrap/less/responsive-embed.less";
 @import "../../node_modules/bootstrap/less/wells.less";
 @import "../../node_modules/bootstrap/less/close.less";
-@import "navbar.less";
 
 // Components w/ JavaScript
 @import "../../node_modules/bootstrap/less/modals.less";
@@ -53,5 +50,5 @@
 @import "../../node_modules/bootstrap/less/carousel.less";
 
 // Utility classes
-@import "../../node_modules/bootstrap/less/utilities.less";
+@import "utilities.less";
 @import "../../node_modules/bootstrap/less/responsive-utilities.less";
diff --git a/src/styles/mixins.less b/src/styles/mixins.less
@@ -0,0 +1,5 @@
+/* ==========================================================================
+   Mixins
+   ========================================================================== */
+
+@import "../../node_modules/bootstrap/less/mixins.less";
diff --git a/src/styles/navbar.less b/src/styles/navbar.less
@@ -2,9 +2,36 @@
    Navigation Bar
    ========================================================================== */
 
+@import "../../node_modules/bootstrap/less/navbar.less";
+
+html {
+    padding-top: @navbar-height;
+}
+
+.navbar-top {
+    .navbar();
+    .navbar-inverse();
+    .navbar-fixed-top();
+}
+
 .navbar-brand {
     padding-top: 8px;
     padding-bottom: 8px;
     color: #00d8ff !important;
     font-size: 24px;
-}
-\ No newline at end of file
+}
+
+/* ==========================================================================
+   Footer
+   ========================================================================== */
+
+.footer {
+    .navbar();
+    .navbar-fixed-bottom();
+
+    background-color: darken(@body-bg, 2%);
+
+    .text-muted {
+        margin-top: 1em;
+    }
+}
diff --git a/src/styles/utilities.less b/src/styles/utilities.less
@@ -0,0 +1,16 @@
+/* ==========================================================================
+   Utility classes
+   ========================================================================== */
+
+@import "../../node_modules/bootstrap/less/utilities.less";
+
+/* ==========================================================================
+   Browse Happy prompt
+   ========================================================================== */
+
+.browsehappy {
+    margin: 0.2em 0;
+    background: #ccc;
+    color: #000;
+    padding: 0.2em 0;
+}
diff --git a/src/styles/variables.less b/src/styles/variables.less
@@ -2,4 +2,6 @@
    Variables
    ========================================================================== */
 
+@import "../../node_modules/bootstrap/less/variables.less";
+
 @body-bg: #f9f9f9;