sider menu color

This commit is contained in:
zuiidea
2016-10-14 22:03:30 +08:00
parent 2a750ea65b
commit c95eb1c888
4 changed files with 209 additions and 471 deletions
+1 -1
View File
@@ -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 }) {
+35
View File
@@ -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;
}
}
+173
View File
@@ -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;
-470
View File
@@ -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;
}