From c95eb1c888b453607d5c7a565d0d89ac84147f3e Mon Sep 17 00:00:00 2001
From: zuiidea <zuiiidea@gmail.com>
Date: Fri, 14 Oct 2016 22:03:30 +0800
Subject: [PATCH] sider menu color

---
 src/components/layout/main.jsx  |   2 +-
 src/components/layout/main.less |  35 +++
 src/components/layout/vars.less | 173 ++++++++++++
 src/utils/utility.less          | 470 --------------------------------
 4 files changed, 209 insertions(+), 471 deletions(-)
 create mode 100644 src/components/layout/vars.less
 delete mode 100644 src/utils/utility.less

diff --git a/src/components/layout/main.jsx b/src/components/layout/main.jsx
index e605cbb..f9ea642 100644
--- a/src/components/layout/main.jsx
+++ b/src/components/layout/main.jsx
@@ -1,10 +1,10 @@
 import React, { PropTypes } from 'react'
-import styles from './main.less'
 import classnames from 'classnames'
 import Header from './header'
 import Bread from './bread'
 import Footer from './footer'
 import Sider from './sider'
+import styles from './main.less'
 import './common.less'
 
 function Main({ children, location }) {
diff --git a/src/components/layout/main.less b/src/components/layout/main.less
index 75135fe..4628678 100644
--- a/src/components/layout/main.less
+++ b/src/components/layout/main.less
@@ -1,3 +1,5 @@
+@import "./vars.less";
+
 .layout {
   position: relative;
   height: 100vh;
@@ -75,3 +77,36 @@
     width: 100%;
   }
 }
+
+:global .ant-menu-dark {
+  .ant-menu-submenu-title:hover,
+  .ant-menu-submenu:hover{
+    color: @primary-color;
+  }
+  .ant-menu-submenu-selected{
+    color: @primary-color;
+    &:not(.ant-menu-submenu-open){
+      background-color: rgba(255,255,255,0.05);
+    }
+  }
+
+  .ant-menu-item {
+    &:hover > a {
+      color: @primary-color;
+    }
+  }
+
+  &.ant-menu-inline {
+    .ant-menu-item-selected {
+      background-color: rgba(255,255,255,0.05);
+
+      & > a {
+        color: @primary-color;
+      }
+    }
+  }
+
+  .ant-menu-item-selected {
+    color: @primary-color;
+  }
+}
diff --git a/src/components/layout/vars.less b/src/components/layout/vars.less
new file mode 100644
index 0000000..7140eea
--- /dev/null
+++ b/src/components/layout/vars.less
@@ -0,0 +1,173 @@
+@import "../../../node_modules/antd/lib/style/themes/default.less";
+// // Prefix
+// @ant-prefix             : ant;
+//
+// // Color
+// @primary-color          : #2db7f5;
+// @info-color             : #2db7f5;
+// @success-color          : #87d068;
+// @error-color            : #f50;
+// @warning-color          : #fa0;
+// @normal-color           : #d9d9d9;
+//
+// // ------ Base & Require ------
+// @body-background        : #fff;
+// @font-family            : -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimSun, sans-serif;
+// @code-family            : Consolas,Menlo,Courier,monospace;
+// @text-color             : #666;
+// @heading-color          : #404040;
+// @font-size-base         : 12px;
+// @line-height-base       : 1.5;
+// @line-height-computed   : floor((@font-size-base * @line-height-base));
+// @border-radius-base     : 6px;
+// @border-radius-sm       : 4px;
+//
+// // ICONFONT
+// @iconfont-css-prefix    : anticon;
+// @icon-url               : "https://at.alicdn.com/t/font_1473840929_824008";
+//
+// // LINK
+// @link-color             : #2db7f5;
+// @link-hover-color       : tint(@link-color, 20%);
+// @link-active-color      : shade(@link-color, 5%);
+// @link-hover-decoration  : none;
+//
+// // Disabled cursor for form controls and buttons.
+// @cursor-disabled        : not-allowed;
+//
+// // Animation
+// @ease-out            : cubic-bezier(0.215, 0.61, 0.355, 1);
+// @ease-in             : cubic-bezier(0.55, 0.055, 0.675, 0.19);
+// @ease-in-out         : cubic-bezier(0.645, 0.045, 0.355, 1);
+// @ease-out-back       : cubic-bezier(0.12, 0.4, 0.29, 1.46);
+// @ease-in-back        : cubic-bezier(0.71, -0.46, 0.88, 0.6);
+// @ease-in-out-back    : cubic-bezier(0.71, -0.46, 0.29, 1.46);
+// @ease-out-circ       : cubic-bezier(0.08, 0.82, 0.17, 1);
+// @ease-in-circ        : cubic-bezier(0.6, 0.04, 0.98, 0.34);
+// @ease-in-out-circ    : cubic-bezier(0.78, 0.14, 0.15, 0.86);
+// @ease-out-quint      : cubic-bezier(0.23, 1, 0.32, 1);
+// @ease-in-quint       : cubic-bezier(0.755, 0.05, 0.855, 0.06);
+// @ease-in-out-quint   : cubic-bezier(0.86, 0, 0.07, 1);
+//
+// // Border color
+// @border-color-base      : #d9d9d9;        // base border outline a component
+// @border-color-split     : #e9e9e9;        // split border inside a component
+//
+// // Outline
+// @outline-blur-size      : 0;
+// @outline-width          : 2px;
+// @outline-color          : @primary-color;
+//
+// // Background color
+// @background-color-base  : #f7f7f7;        // basic gray background
+//
+// // Shadow
+// @shadow-color           : rgba(100, 100, 100, .2);
+// @box-shadow-base        : @shadow-1-down;
+// @shadow-1-up            : 0 -1px 6px @shadow-color;
+// @shadow-1-down          : 0 1px 6px @shadow-color;
+// @shadow-1-left          : -1px 0 6px @shadow-color;
+// @shadow-1-right         : 1px 0 6px @shadow-color;
+// @shadow-2               : 0 1px 8px @shadow-color;
+//
+// // Buttons
+// @btn-font-weight        : 500;
+// @btn-border-radius-base : @border-radius-base;
+// @btn-border-radius-sm   : @border-radius-sm;
+//
+// @btn-primary-color      : #fff;
+// @btn-primary-bg         : @primary-color;
+// @btn-group-border       : shade(@primary-color, 5%);
+//
+// @btn-default-color      : @text-color;
+// @btn-default-bg         : @background-color-base;
+// @btn-default-border     : @border-color-base;
+//
+// @btn-ghost-color        : @text-color;
+// @btn-ghost-bg           : transparent;
+// @btn-ghost-border       : @border-color-base;
+//
+// @btn-disable-color      : #ccc;
+// @btn-disable-bg         : @background-color-base;
+// @btn-disable-border     : @border-color-base;
+//
+// @btn-padding-base       : 4px 15px;
+//
+// @btn-font-size-lg       : 14px;
+// @btn-padding-lg         : 4px 15px 5px 15px;
+//
+// @btn-padding-sm         : 1px 7px;
+//
+// @btn-circle-size        : 28px;
+// @btn-circle-size-lg     : 32px;
+// @btn-circle-size-sm     : 22px;
+//
+// // Media queries breakpoints
+// // Extra small screen / phone
+// @screen-xs              : 480px;
+// @screen-xs-min          : @screen-xs;
+// @screen-xs-max          : (@screen-xs-min - 1);
+//
+// // Small screen / tablet
+// @screen-sm              : 768px;
+// @screen-sm-min          : @screen-sm;
+// @screen-sm-max          : (@screen-sm-min - 1);
+//
+// // Medium screen / desktop
+// @screen-md              : 992px;
+// @screen-md-min          : @screen-md;
+// @screen-md-max          : (@screen-md-min - 1);
+//
+// // Large screen / wide desktop
+// @screen-lg              : 1200px;
+// @screen-lg-min          : @screen-lg;
+// @screen-lg-max          : (@screen-lg-min - 1);
+//
+// // Layout and Grid system
+// @grid-columns           : 24;
+// @grid-gutter-width      : 0;
+//
+// // Container sizes
+// @container-sm           : (720px + @grid-gutter-width);
+// @container-md           : (940px + @grid-gutter-width);
+// @container-lg           : (1140px + @grid-gutter-width);
+//
+// // z-index list
+// @zindex-affix           : 10;
+// @zindex-back-top        : 10;
+// @zindex-modal-mask      : 1000;
+// @zindex-modal           : 1000;
+// @zindex-notification    : 1010;
+// @zindex-message         : 1010;
+// @zindex-popover         : 1030;
+// @zindex-picker          : 1050;
+// @zindex-dropdown        : 1050;
+// @zindex-tooltip         : 1060;
+//
+// // Form
+// // --------------------------------
+// // Legend
+// @legend-color                : #999;
+// @legend-border-color         : @border-color-base;
+// // Label
+// @label-required-color        : #f50;
+// @label-color                 : @text-color;
+// // Input
+// @input-height-base: 28px;
+// @input-height-lg: 32px;
+// @input-height-sm: 22px;
+//
+// @input-padding-horizontal    : 7px;
+// @input-padding-vertical-base : 4px;
+// @input-padding-vertical-sm   : 1px;
+// @input-padding-vertical-lg   : 6px;
+//
+// @input-placeholder-color     : #ccc;
+// @input-color                 : @text-color;
+// @input-border-color          : @border-color-base;
+// @input-bg                    : #fff;
+//
+// @input-hover-border-color    : @primary-color;
+// @input-disabled-bg           : @background-color-base;
+//
+// @form-item-margin-bottom     : 24px;
diff --git a/src/utils/utility.less b/src/utils/utility.less
deleted file mode 100644
index 9582885..0000000
--- a/src/utils/utility.less
+++ /dev/null
@@ -1,470 +0,0 @@
-
-/* ==========================================================================
-   Component: Utility
- ============================================================================ */
-.scrollable-horizontal {
-  width: 100%;
-  overflow-y: hidden;
-  overflow-x: auto;
-  -ms-overflow-style: -ms-autohiding-scrollbar;
-  -webkit-overflow-scrolling: touch;
-}
-.scrollable-vertical {
-  height: 240px;
-  overflow-y: scroll;
-  -webkit-overflow-scrolling: touch;
-  resize: vertical;
-}
-/* Border-radius*/
-.square {
-  border-radius: 0;
-}
-.radius {
-  border-radius: 2px;
-}
-.round {
-  border-radius: 1000px;
-}
-.circle {
-  border-radius: 50%;
-}
-/* Float blocks*/
-.cf:before,
-.cf:after {
-  content: " ";
-  display: table;
-}
-.cf:after {
-  clear: both;
-}
-.fl {
-  float: left;
-}
-.fr {
-  float: right;
-}
-.nbfc {
-  overflow: hidden;
-}
-.center {
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
-}
-/* Display */
-.block {
-  display: block !important;
-}
-.inline {
-  display: inline !important;
-}
-.inline-block {
-  display: inline-block !important;
-}
-.hide {
-  display: none !important;
-  visibility: hidden !important;
-}
-/*
-* Remove whitespace between child elements when using `inline-block`
-*/
-.vertical-align {
-  font-size: 0.001px;
-}
-/*
-* The `vertical-align` container needs a specific height
-*/
-.vertical-align:before {
-  content: '';
-  display: inline-block;
-  height: 100%;
-  vertical-align: middle;
-}
-/*
-* Sub-object which can have any height
-* 1. Reset whitespace hack
-*/
-.vertical-align-middle,
-.vertical-align-bottom {
-  display: inline-block;
-  font-size: 1.6rem;
-  /* 1 */
-  max-width: 100%;
-}
-.vertical-align-middle {
-  vertical-align: middle;
-}
-.vertical-align-bottom {
-  vertical-align: bottom;
-}
-.responsive-width {
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-  max-width: 100%;
-  height: auto;
-}
-/* Margin helpers */
-.mg {
-  margin: 1.6rem;
-}
-.mg-0 {
-  margin: 0!important;
-}
-.mg-xs {
-  margin: 0.5rem;
-}
-.mg-sm {
-  margin: 1rem;
-}
-.mg-lg {
-  margin: 2.4rem;
-}
-.mg-xl {
-  margin: 3.2rem;
-}
-.m-x {
-  margin-left: 1.6rem;
-  margin-right: 1.6rem;
-}
-.m-x-0 {
-  margin-left: 0!important;
-  margin-right: 0!important;
-}
-.m-x-xs {
-  margin-left: 0.5rem;
-  margin-right: 0.5rem;
-}
-.m-x-sm {
-  margin-left: 1rem;
-  margin-right: 1rem;
-}
-.m-x-lg {
-  margin-left: 2.4rem;
-  margin-right: 2.4rem;
-}
-.m-x-xl {
-  margin-left: 3.2rem;
-  margin-right: 3.2rem;
-}
-.m-y {
-  margin-top: 1.6rem;
-  margin-bottom: 1.6rem;
-}
-.m-y-0 {
-  margin-top: 0!important;
-  margin-bottom: 0!important;
-}
-.m-y-xs {
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
-}
-.m-y-sm {
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-}
-.m-y-lg {
-  margin-top: 2.4rem;
-  margin-bottom: 2.4rem;
-}
-.m-y-xl {
-  margin-top: 3.2rem;
-  margin-bottom: 3.2rem;
-}
-.mt {
-  margin-top: 1.6rem;
-}
-.mt-0 {
-  margin-top: 0!important;
-}
-.mt-xs {
-  margin-top: 0.5rem;
-}
-.mt-sm {
-  margin-top: 1rem;
-}
-.mt-lg {
-  margin-top: 2.4rem;
-}
-.mt-xl {
-  margin-top: 3.2rem;
-}
-.mb {
-  margin-bottom: 1.6rem;
-}
-.mb-0 {
-  margin-bottom: 0!important;
-}
-.mb-xs {
-  margin-bottom: 0.5rem;
-}
-.mb-sm {
-  margin-bottom: 1rem;
-}
-.mb-lg {
-  margin-bottom: 2.4rem;
-}
-.mb-xl {
-  margin-bottom: 3.2rem;
-}
-.ml {
-  margin-left: 1.6rem;
-}
-.ml-0 {
-  margin-left: 0!important;
-}
-.ml-xs {
-  margin-left: 0.5rem;
-}
-.ml-sm {
-  margin-left: 1rem;
-}
-.ml-lg {
-  margin-left: 2.4rem;
-}
-.ml-xl {
-  margin-left: 3.2rem;
-}
-.mr {
-  margin-right: 1.6rem;
-}
-.mr-0 {
-  margin-right: 0!important;
-}
-.mr-xs {
-  margin-right: 0.5rem;
-}
-.mr-sm {
-  margin-right: 1rem;
-}
-.mr-lg {
-  margin-right: 2.4rem;
-}
-.mr-xl {
-  margin-right: 3.2rem;
-}
-/* Padding helpers */
-.pd {
-  padding: 1.6rem;
-}
-.pd-0 {
-  padding: 0!important;
-}
-.pd-xs {
-  padding: 0.5rem;
-}
-.pd-sm {
-  padding: 1rem;
-}
-.pd-lg {
-  padding: 2.4rem;
-}
-.pd-xl {
-  padding: 3.2rem;
-}
-.p-x {
-  padding-left: 1.6rem;
-  padding-right: 1.6rem;
-}
-.p-x-0 {
-  padding-left: 0!important;
-  padding-right: 0!important;
-}
-.p-x-xs {
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-}
-.p-x-sm {
-  padding-left: 1rem;
-  padding-right: 1rem;
-}
-.p-x-lg {
-  padding-left: 2.4rem;
-  padding-right: 2.4rem;
-}
-.p-x-xl {
-  padding-left: 3.2rem;
-  padding-right: 3.2rem;
-}
-.p-y {
-  padding-top: 1.6rem;
-  padding-bottom: 1.6rem;
-}
-.p-y-0 {
-  padding-top: 0!important;
-  padding-bottom: 0!important;
-}
-.p-y-xs {
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-}
-.p-y-sm {
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-}
-.p-y-lg {
-  padding-top: 2.4rem;
-  padding-bottom: 2.4rem;
-}
-.p-y-xl {
-  padding-top: 3.2rem;
-  padding-bottom: 3.2rem;
-}
-.pt {
-  padding-top: 1.6rem;
-}
-.pt-0 {
-  padding-top: 0!important;
-}
-.pt-xs {
-  padding-top: 0.5rem;
-}
-.pt-sm {
-  padding-top: 1rem;
-}
-.pt-lg {
-  padding-top: 2.4rem;
-}
-.pt-xl {
-  padding-top: 3.2rem;
-}
-.pb {
-  padding-bottom: 1.6rem;
-}
-.pb-0 {
-  padding-bottom: 0!important;
-}
-.pb-xs {
-  padding-bottom: 0.5rem;
-}
-.pb-sm {
-  padding-bottom: 1rem;
-}
-.pb-lg {
-  padding-bottom: 2.4rem;
-}
-.pb-xl {
-  padding-bottom: 3.2rem;
-}
-.pl {
-  padding-left: 1.6rem;
-}
-.pl-0 {
-  padding-left: 0!important;
-}
-.pl-xs {
-  padding-left: 0.5rem;
-}
-.pl-sm {
-  padding-left: 1rem;
-}
-.pl-lg {
-  padding-left: 2.4rem;
-}
-.pl-xl {
-  padding-left: 3.2rem;
-}
-.pr {
-  padding-right: 1.6rem;
-}
-.pr-0 {
-  padding-right: 0!important;
-}
-.pr-xs {
-  padding-right: 0.5rem;
-}
-.pr-sm {
-  padding-right: 1rem;
-}
-.pr-lg {
-  padding-right: 2.4rem;
-}
-.pr-xl {
-  padding-right: 3.2rem;
-}
-
-.text-primary {
-  color: #0e90d2;
-}
-.text-secondary {
-  color: #3bb4f2;
-}
-.text-success {
-  color: #5eb95e;
-}
-.text-warning {
-  color: #F37B1D;
-}
-.text-danger {
-  color: #dd514c;
-}
-.link-muted {
-  color: #666;
-}
-.link-muted a {
-  color: #666;
-}
-.link-muted:hover,
-.link-muted a:hover {
-  color: #555;
-}
-.text-default {
-  font-size: 1.6rem;
-}
-
-.text-xs {
-  font-size: 1.2rem;
-}
-.text-sm {
-  font-size: 1.4rem;
-}
-.text-lg {
-  font-size: 1.8rem;
-}
-.text-xl {
-  font-size: 2.4rem;
-}
-.text-xxl {
-  font-size: 3.2rem;
-}
-.text-xxxl {
-  font-size: 4.2rem;
-}
-.ellipsis,
-.text-truncate {
-  word-wrap: normal;
-  /* for IE */
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}
-.text-break {
-  word-wrap: break-word;
-  -webkit-hyphens: auto;
-  -ms-hyphens: auto;
-  -moz-hyphens: auto;
-  hyphens: auto;
-}
-.text-nowrap {
-  white-space: nowrap;
-}
-/** Only display content to screen readers
- * See: http://a11yproject.com/posts/how-to-hide-content/
- */
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  padding: 0;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  border: 0;
-}
-/* Text Image Replacement */
-.text-ir {
-  font: 0/0 a;
-  color: transparent;
-  text-shadow: none;
-  background-color: transparent;
-  border: 0;
-}