Skip to content

Z
zui

易企天创 / zui
11 个月 前同步成功

通知 6
Star 0
Fork 1
Z
zui

体验新版 GitCode，发现更多精彩内容 >>

提交 590790ca 编写于 作者: C Catouse
浏览文件
操作

* ajusted style of navs.

上级 57d046da
展开全部 隐藏空白更改
内联 并排
Showing with 165 addition and 70 deletion
assets/css/doc.css
浏览文件 @ 590790ca
......@@ -121,4 +121,4 @@ body > .container .segment
#navbarNext
{
/*display: none;*/
}
\ No newline at end of file
}
dist/css/zui.chanzhi.css
浏览文件 @ 590790ca
此差异已折叠。
dist/css/zui.css
浏览文件 @ 590790ca
因为 它太大了无法显示 source diff 。你可以改为 查看blob。
examples/navs.html
浏览文件 @ 590790ca
......@@ -30,6 +30,10 @@
<script src="../assets/js/respond.js"></script>
<![endif]-->
<script src="../assets/js/doc.js"></script>
<style>
.segment .nav {margin-bottom: 20px;}
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
......@@ -94,7 +98,7 @@
<h3>主要导航</h3>
<p><code>.nav-primary</code></p>
<div contenteditable="true" spellcheck="false" class="segment">
<div spellcheck="false" class="segment">
<ul class="nav nav-primary">
<li class="active"><a href="###"><i class="icon-home"></i> Home</a></li>
<li><a href="###"><i class="icon-user"></i> Profile <span class="label label-badge label-success">4</span></a></li>
......@@ -104,7 +108,10 @@
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
<li><a href="">Lorem ipsum.</a></li>
<li><a href="">Optio, fuga.</a></li>
<li><a href="">Dicta, vero.</a></li>
<li><a href="">Doloribus, obcaecati.</a></li>
</ul>
</li>
</ul>
......@@ -113,7 +120,7 @@
<h3>次要导航</h3>
<p>通常与主导航一起使用</p>
<p><code>.nav-secondary</code></p>
<div contenteditable="true" spellcheck="false" class="segment">
<div spellcheck="false" class="segment">
<ul class="nav nav-secondary">
<li class="active"><a href="###">Home</a></li>
<li><a href="###">Profile</a></li>
......@@ -123,7 +130,10 @@
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
<li><a href="">Lorem ipsum.</a></li>
<li><a href="">Optio, fuga.</a></li>
<li><a href="">Dicta, vero.</a></li>
<li><a href="">Doloribus, obcaecati.</a></li>
</ul>
</li>
</ul>
......@@ -135,7 +145,7 @@
<h3>标签页导航</h3>
<p><code>.nav-tabs</code></p>
<div contenteditable="true" spellcheck="false" class="segment">
<div spellcheck="false" class="segment">
<ul class="nav nav-tabs">
<li class="active"><a href="###">Home</a></li>
<li><a href="###">Profile</a></li>
......@@ -145,7 +155,10 @@
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
<li><a href="">Lorem ipsum.</a></li>
<li><a href="">Optio, fuga.</a></li>
<li><a href="">Dicta, vero.</a></li>
<li><a href="">Doloribus, obcaecati.</a></li>
</ul>
</li>
</ul>
......@@ -153,7 +166,7 @@
<h3>圆点导航</h3>
<p><code>.nav-pills</code></p>
<div contenteditable="true" spellcheck="false" class="segment">
<div spellcheck="false" class="segment">
<ul class="nav nav-pills">
<li class="active"><a href="###">Home</a></li>
<li><a href="###">Profile</a></li>
......@@ -163,7 +176,10 @@
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
<li><a href="">Lorem ipsum.</a></li>
<li><a href="">Optio, fuga.</a></li>
<li><a href="">Dicta, vero.</a></li>
<li><a href="">Doloribus, obcaecati.</a></li>
</ul>
</li>
</ul>
......@@ -172,7 +188,7 @@
<h2>状态</h2>
<h3>禁用的导航链接</h3>
<p>在禁用的项目上添加<code>.disabled</code></p>
<div contenteditable="true" spellcheck="false" class="segment">
<div spellcheck="false" class="segment">
<ul class="nav nav-tabs">
<li class="active"><a href="###">Home</a></li>
<li><a href="###">Profile</a></li>
......@@ -182,7 +198,10 @@
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
<li><a href="">Lorem ipsum.</a></li>
<li><a href="">Optio, fuga.</a></li>
<li><a href="">Dicta, vero.</a></li>
<li><a href="">Doloribus, obcaecati.</a></li>
</ul>
</li>
</ul>
......@@ -195,7 +214,10 @@
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
<li><a href="">Lorem ipsum.</a></li>
<li><a href="">Optio, fuga.</a></li>
<li><a href="">Dicta, vero.</a></li>
<li><a href="">Doloribus, obcaecati.</a></li>
</ul>
</li>
</ul>
......@@ -208,7 +230,10 @@
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
<li><a href="">Lorem ipsum.</a></li>
<li><a href="">Optio, fuga.</a></li>
<li><a href="">Dicta, vero.</a></li>
<li><a href="">Doloribus, obcaecati.</a></li>
</ul>
</li>
</ul>
......@@ -217,7 +242,7 @@
<h2>参数</h2>
<h3>垂直排列</h3>
<p><code>.nav-stacked</code></p>
<div contenteditable="true" spellcheck="false" class="segment">
<div spellcheck="false" class="segment">
<ul class="nav nav-primary nav-stacked">
<li class="active"><a href="###"><i class="icon-home"></i> Home <i class="icon-heart pull-right"></i></a></li>
<li><a href="###"><i class="icon-user"></i> Profile <span class="label label-badge label-success pull-right">4</span></a></li>
......@@ -227,7 +252,10 @@
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
<li><a href="">Lorem ipsum.</a></li>
<li><a href="">Optio, fuga.</a></li>
<li><a href="">Dicta, vero.</a></li>
<li><a href="">Doloribus, obcaecati.</a></li>
</ul>
</li>
</ul>
......@@ -240,7 +268,10 @@
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
<li><a href="">Lorem ipsum.</a></li>
<li><a href="">Optio, fuga.</a></li>
<li><a href="">Dicta, vero.</a></li>
<li><a href="">Doloribus, obcaecati.</a></li>
</ul>
</li>
</ul>
......@@ -253,7 +284,10 @@
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
<li><a href="">Lorem ipsum.</a></li>
<li><a href="">Optio, fuga.</a></li>
<li><a href="">Dicta, vero.</a></li>
<li><a href="">Doloribus, obcaecati.</a></li>
</ul>
</li>
</ul>
......@@ -262,7 +296,7 @@
<h3>自适应宽度</h3>
<p>自适应宽度不能与垂直排列同时使用</p>
<p><code>.nav-justified</code></p>
<div contenteditable="true" spellcheck="false" class="segment">
<div spellcheck="false" class="segment">
<ul class="nav nav-primary nav-justified">
<li class="active"><a href="###"><i class="icon-home"></i> Home <i class="icon-heart pull-right"></i></a></li>
<li><a href="###"><i class="icon-user"></i> Profile <span class="label label-badge label-success pull-right">4</span></a></li>
......@@ -272,7 +306,10 @@
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
<li><a href="">Lorem ipsum.</a></li>
<li><a href="">Optio, fuga.</a></li>
<li><a href="">Dicta, vero.</a></li>
<li><a href="">Doloribus, obcaecati.</a></li>
</ul>
</li>
</ul>
......@@ -285,7 +322,10 @@
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
<li><a href="">Lorem ipsum.</a></li>
<li><a href="">Optio, fuga.</a></li>
<li><a href="">Dicta, vero.</a></li>
<li><a href="">Doloribus, obcaecati.</a></li>
</ul>
</li>
</ul>
......@@ -298,7 +338,10 @@
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
<li><a href="">Lorem ipsum.</a></li>
<li><a href="">Optio, fuga.</a></li>
<li><a href="">Dicta, vero.</a></li>
<li><a href="">Doloribus, obcaecati.</a></li>
</ul>
</li>
</ul>
......@@ -311,14 +354,17 @@
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
<li><a href="">Lorem ipsum.</a></li>
<li><a href="">Optio, fuga.</a></li>
<li><a href="">Dicta, vero.</a></li>
<li><a href="">Doloribus, obcaecati.</a></li>
</ul>
</li>
</ul>
</div>
<h3>带标题的导航</h3>
<div contenteditable="true" spellcheck="false" class="segment">
<div spellcheck="false" class="segment">
<ul class="nav nav-tabs">
<li class="nav-heading">这是标题</li>
<li class="active"><a href="###">Home</a></li>
......@@ -329,7 +375,10 @@
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
<li><a href="">Lorem ipsum.</a></li>
<li><a href="">Optio, fuga.</a></li>
<li><a href="">Dicta, vero.</a></li>
<li><a href="">Doloribus, obcaecati.</a></li>
</ul>
</li>
</ul>
......@@ -343,7 +392,10 @@
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
<li><a href="">Lorem ipsum.</a></li>
<li><a href="">Optio, fuga.</a></li>
<li><a href="">Dicta, vero.</a></li>
<li><a href="">Doloribus, obcaecati.</a></li>
</ul>
</li>
</ul>
......@@ -357,7 +409,10 @@
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
<li><a href="">Lorem ipsum.</a></li>
<li><a href="">Optio, fuga.</a></li>
<li><a href="">Dicta, vero.</a></li>
<li><a href="">Doloribus, obcaecati.</a></li>
</ul>
</li>
</ul>
......@@ -371,7 +426,10 @@
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
<li><a href="">Lorem ipsum.</a></li>
<li><a href="">Optio, fuga.</a></li>
<li><a href="">Dicta, vero.</a></li>
<li><a href="">Doloribus, obcaecati.</a></li>
</ul>
</li>
</ul>
......@@ -385,7 +443,10 @@
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
<li><a href="">Lorem ipsum.</a></li>
<li><a href="">Optio, fuga.</a></li>
<li><a href="">Dicta, vero.</a></li>
<li><a href="">Doloribus, obcaecati.</a></li>
</ul>
</li>
</ul>
......@@ -399,7 +460,10 @@
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
<li><a href="">Lorem ipsum.</a></li>
<li><a href="">Optio, fuga.</a></li>
<li><a href="">Dicta, vero.</a></li>
<li><a href="">Doloribus, obcaecati.</a></li>
</ul>
</li>
</ul>
......
src/less/basic/variables.less
浏览文件 @ 590790ca
......@@ -195,7 +195,7 @@
@zindex-modal: 1050;
// Tables
// TABLES
// -------------------------
@table-cell-padding: 8px;
......@@ -210,7 +210,7 @@
@table-border-color: @color-gray-light; // table and cell border
// Dropdowns
// DROPDOWNS
// -------------------------
@dropdown-bg: @component-bg;
......@@ -261,7 +261,8 @@
@btn-link-disabled-color: @color-gray-light;
// Progress bars
// PROGRESS BRAS
// -------------------------
@progress-bg: @component-bg-gray;
@progress-bar-color: @color-light;
......@@ -272,7 +273,7 @@
@progress-bar-danger-bg: @color-danger;
@progress-bar-info-bg: @color-info;
// Thumbnails
// THUMBNAILS
// -------------------------
@thumbnail-padding: 4px;
@thumbnail-bg: @body-bg;
......@@ -283,13 +284,14 @@
@thumbnail-caption-padding: 9px;
// Divider
// DIVIDER
// -------------------------
// Hr border color
@hr-border: @color-gray-lighter;
// Labels
// LEBELS
// -------------------------
@label-default-bg: @color-gray;
......@@ -302,7 +304,7 @@
@label-color: @color-light;
@label-link-hover-color: @color-light;
// Badges
// BADGES
// -------------------------
@badge-link-hover-color: @color-light;
@badge-bg: @color-gray-light;
......@@ -314,7 +316,7 @@
@badge-line-height: 1;
@badge-border-radius: 12px;
// Input
// INPUT
@input-bg: @color-light;
@input-bg-disabled: @color-gray-lighter;
......@@ -335,12 +337,14 @@
@input-group-addon-bg: @color-gray-lighter;
@input-group-addon-border-color: @input-border;
// Breadcrumbs
// BREADCUMBS
// -------------------------
@breadcrumb-color: #ccc;
@breadcrumb-active-color: @color-gray-light;
// List group
// LIST GROUP
// -------------------------
@list-group-bg: @color-light;
@list-group-border: @color-gray-light;
......@@ -354,7 +358,8 @@
@list-group-link-color: #555;
@list-group-link-heading-color: #333;
// Panels
// PANELS
// -------------------------
@panel-bg: @color-light;
@panel-inner-border: @color-gray-light;
......@@ -385,7 +390,8 @@
@panel-info-border: @state-info-border;
@panel-info-heading-bg: @state-info-bg;
// Modals
// MODALS
// -------------------------
@modal-inner-padding: 20px;
......@@ -401,7 +407,7 @@
@modal-footer-border-color: @modal-header-border-color;
// Alerts
// ALERTS
// -------------------------
@alert-padding: 15px;
@alert-border-radius: @border-radius-small;
......@@ -427,14 +433,16 @@
@alert-danger-text: @state-danger-text;
@alert-danger-border: @state-danger-border;
// Animation
// ANIMATION
// --------------------------
@animation-speed-normal: 0.5s;
@animation-speed-fast: 0.3s;
@animation-speed-slow: 0.8s;
@animation-type: cubic-bezier(0.175,.885,.32,1);
// Code
// CODE
// ------------------------
@code-color: @color-important;
@code-bg: @color-gray-pale;
......@@ -444,7 +452,8 @@
@pre-border-color: #ccc;
@pre-scrollable-max-height: 340px;
// Type
// TYPE
// ------------------------
@text-muted: @color-gray;
@abbr-border-color: @color-gray-light;
......@@ -454,7 +463,8 @@
@header-dividing-color: @color-gray-lighter;
@headings-block-background: @color-gray-lighter;
// Miscellaneous
// MISCELLANEOUS
// -------------------------
// Hr border color
......@@ -463,7 +473,8 @@
// Horizontal forms & lists
@component-offset-horizontal: 180px;
// Article
// ARTICLE
// -------------------------
@article-padding: 20px;
......@@ -480,21 +491,22 @@
@article-font-size-h6: ceil(@font-size-base * 0.85); // 12px
@article-headings-border-color: @color-gray-light;
// Contents List
// CONTENTS LIST
// -----------------------
@list-padding: 15px;
@list-item-bg-hover: #f5f5f5;
// Cards
// CARDS
// ----------------------
@card-border-color: @color-gray-light;
@card-reveal-bg: @color-gray-pale;
// Pager
// PAGER
// -------------------------
@pager-bg: @color-light;
......@@ -509,7 +521,7 @@
@pager-border-radius: 16px;
// Navbar
// NAVBAR
// -------------------------
// Basics of a navbar
......@@ -570,7 +582,7 @@
@navbar-inverse-toggle-border-color: lighten(@navbar-inverse-bg, 10%);
// Navs
// NAVS
// -------------------------
@nav-link-padding: 10px 15px;
......@@ -601,16 +613,18 @@
@nav-pills-active-link-hover-color: @component-active-color;
// Secondary
@nav-secondary-border-color: @color-gray-lighter;
@nav-secondary-active-border-color: @component-active-bg;
@nav-secondary-active-link-hover-bg: @component-active-bg;
@nav-secondary-active-link-hover-color: @component-active-color;
@nav-secondary-active-link-hover-bg: @component-bg-gray;
@nav-secondary-active-link-hover-color: @component-active-bg;
// Primary
@nav-primary-border-color: @color-gray-light;
@nav-primary-active-link-hover-color: @component-active-color;
@nav-primary-active-border-color: @component-active-bg;
// Carousel
// CAROUSEL
// ------------------------
@carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6);
......@@ -626,14 +640,14 @@
@carousel-caption-color: @color-light;
// Close
// CLOSE
// ------------------------
@close-color: #000;
@close-color: @color-black;
@close-font-weight: bold;
@close-text-shadow: 0 1px 0 @color-light;
// Tooltips
// TOOLTIPS
// -------------------------
@tooltip-max-width: 200px;
@tooltip-color: @color-back;
......@@ -642,7 +656,8 @@
@tooltip-arrow-width: 5px;
@tooltip-arrow-color: @tooltip-bg;
// Popovers
// POPOVER
// -------------------------
@popover-bg: @color-light;
@popover-max-width: 300px;
......@@ -659,10 +674,10 @@
@popover-arrow-outer-fallback-color: #999;
// ICON FONT
// -------------------------
@icon-font-path: "../fonts";
//@FontAwesomePath: "//netdna.bootstrapcdn.com/font-awesome/3.2.1/font"; // for referencing Bootstrap CDN font files directly
@icon-font-version: "3.2.1";
@icon-font-version: "1.0.0";
@icon-border-color: @color-gray-light;
@icon-muted-color: @color-gray-light;
@icon-light-color: @color-light;
......
src/less/components/navs.less
浏览文件 @ 590790ca
......@@ -16,7 +16,7 @@
> .nav-heading
{
padding: @nav-link-padding;
color: @color-gray-dark;
color: @color-gray;
font-weight: @headings-font-weight;
}
......@@ -199,7 +199,7 @@
// Links rendered
> a
{
border-bottom: 2px solid @nav-secondary-active-border-color;
border-bottom: 2px solid @nav-secondary-border-color;
}
+ li
{
......@@ -214,7 +214,7 @@
&:focus
{
color: @nav-secondary-active-link-hover-color;
border-bottom-color: @nav-secondary-active-link-hover-color;
border-bottom-color: @nav-secondary-active-border-color;
.caret
{
......@@ -226,7 +226,7 @@
&.nav-heading
{
border-bottom: 2px solid @nav-secondary-active-border-color;
border-bottom: 2px solid @nav-secondary-border-color;
}
}
}
......@@ -303,6 +303,13 @@
> a
{
border: none;
.border-left-radius(@border-radius-base);
.box-shadow(inset -2px 0 0 @nav-secondary-active-link-hover-bg);
&:hover
{
.box-shadow(inset -2px 0 0 @nav-secondary-border-color);
}
}
+ li
{
......@@ -320,7 +327,7 @@
&:focus
{
background-color: @nav-secondary-active-link-hover-bg;
// .active-mark-right();
.box-shadow(inset -2px 0 0 @nav-secondary-active-border-color);
}
}
&.nav-heading
......
src/less/zui.less
浏览文件 @ 590790ca
......@@ -33,20 +33,29 @@
@import "controls/breadcrumbs.less";
@import "controls/icons.less";
@import "controls/close.less";
@import "controls/image.less";
//
// COMPONENTS
// --------------------------------------------------
@import "components/input-groups.less";
@import "components/input-groups.size.less";
@import "components/button-groups.less";
@import "components/tables.less";
@import "components/tables.colors.less";
@import "components/tables.responsive.less";
@import "components/list-group.less";
@import "components/panels.less";
@import "components/panels.list-group.less";
@import "components/panels.types.less";
@import "components/alerts.less";
@import "components/forms.less";
@import "components/code.less";
@import "components/pager.less";
@import "components/pager.popover.less";
@import "components/pager.size.less";
@import "components/pager.types.less";
@import "components/navs.less";
@import "components/navs.tabs.less";
@import "components/navbars.less";
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或