From 87d95d9701ee6287a5f0259cb464a663b0adbc92 Mon Sep 17 00:00:00 2001 From: popomore Date: Wed, 10 Apr 2013 15:20:05 +0800 Subject: [PATCH] fix border #1 --- README.md | 2 +- src/nav.css | 122 --------------------------------------------------- src/nav.styl | 38 ++++++++++------ 3 files changed, 26 insertions(+), 136 deletions(-) delete mode 100644 src/nav.css diff --git a/README.md b/README.md index 910cc04..b5f0693 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,7 @@ ## 演示文档 - + ### 默认用法 diff --git a/src/nav.css b/src/nav.css deleted file mode 100644 index 06d4c76..0000000 --- a/src/nav.css +++ /dev/null @@ -1,122 +0,0 @@ -.ui-nav { - position: relative; -} -.ui-nav a { - text-decoration: none; -} -.ui-nav a:hover { - text-decoration: none; -} -.ui-nav ul, -.ui-nav li { - list-style-type: none; -} -.ui-nav-main { - zoom: 1; - margin: 0; - padding-left: 10px; - -webkit-border-radius: 2px 2px 0 0; - border-radius: 2px 2px 0 0; - background: -webkit-linear-gradient(top, #f39100, #f17a00); - background: -moz-linear-gradient(top, #f39100, #f17a00); - filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#f39100, endColorstr=#f17a00); -} -.ui-nav-main:before, -.ui-nav-main:after { - content: ""; - display: table; -} -.ui-nav-main:after { - clear: both; -} -.ui-nav-item { - float: left; - margin: 7px 5px 0 0; -} -.ui-nav-item a { - display: inline-block; - _display: inline; - _zoom: 1; - height: 35px; - padding: 0 15px; - line-height: 35px; - color: #fff; - font-weight: bold; - font-size: 14px; -} -.ui-nav-item a:hover { - background: -webkit-linear-gradient(top, #f49c25, #f49726); - background: -moz-linear-gradient(top, #f49c25, #f49726); - filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#f49c25, endColorstr=#f49726); - -webkit-border-radius: 2px 2px 0 0; - border-radius: 2px 2px 0 0; -} -.ui-nav-item-current a, -.ui-nav-item-current a:hover { - background: #fff; - filter: none; - color: #6d6969; - -webkit-border-radius: 2px 2px 0 0; - border-radius: 2px 2px 0 0; -} -.ui-nav-submain { - display: none; - position: absolute; - left: 10px; - top: 42px; - margin: 0; - padding: 0; -} -.ui-nav-subitem { - float: left; - margin: 5px 10px 0 0; -} -.ui-nav-subitem a { - padding: 0 15px; - height: 24px; - line-height: 26px; - background: transparent; - border: 1px solid transparent; - _border-color: #ff6347; - _filter: chroma(#ff6347); - color: #868686; - font-weight: normal; - font-size: 12px; - -webkit-border-radius: 3px; - border-radius: 3px; -} -.ui-nav-subitem a:hover { - background: transparent; - filter: none; - -webkit-box-shadow: 0px -1px 0px #f6f6f6; - box-shadow: 0px -1px 0px #f6f6f6; - border: 1px solid #cecece; - -webkit-border-radius: 3px; - border-radius: 3px; -} -.ui-nav-subitem-current a, -.ui-nav-subitem-current a:hover { - border-left: 1px solid #dadada; - border-right: 1px solid #dadada; - border-top: 1px solid #bebebe; - border-bottom: 1px solid transparent; - -webkit-box-shadow: inset 0px 1px 0px #dadada; - box-shadow: inset 0px 1px 0px #dadada; - background: #e7e7e7; -} -.ui-nav-subcontainer { - height: 37px; - border-left: 1px solid #ccc; - border-right: 1px solid #ccc; - border-bottom: 1px solid #ccc; - background: -webkit-linear-gradient(top, #fefefe, #f7f7f7); - background: -moz-linear-gradient(top, #fefefe, #f7f7f7); - filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#fefefe, endColorstr=#f7f7f7); -} -.ui-nav-item-current .ui-nav-submain { - display: block; -} -.ui-nav-nosub .ui-nav-subcontainer, -.ui-nav-nosub .ui-nav-subitem { - display: none; -} diff --git a/src/nav.styl b/src/nav.styl index b4d615b..7b17a3f 100644 --- a/src/nav.styl +++ b/src/nav.styl @@ -1,10 +1,16 @@ @import 'nib' // mixin -linear-gradient(from, to) - background -webkit-linear-gradient(top, from, to) - background -moz-linear-gradient(top, from, to) - filter unquote('progid:DXImageTransform.Microsoft.Gradient(startColorstr=' + from + ', endColorstr=' + to + ')') +linearGradient(from, to) + f = unquote('#' + from) + t = unquote('#' + to) + ief = '#FF' + from + iet = '#FF' + to + background: -webkit-linear-gradient(top, f, t) + background: -moz-linear-gradient(top, f, t) + background: -ms-linear-gradient(f, t) + background: -o-linear-gradient(f, t) + filter: unquote('progid:DXImageTransform.Microsoft.gradient(startColorstr=' + ief + ', endColorstr=' + iet + ')') .ui-nav position: relative @@ -23,7 +29,7 @@ linear-gradient(from, to) margin: 0 padding-left: 10px border-radius: 2px 2px 0 0 - linear-gradient(#F39100, #F17A00) + linearGradient(F39100, F17A00) .ui-nav-item float: left @@ -39,8 +45,8 @@ linear-gradient(from, to) font-weight: bold font-size: 14px &:hover - linear-gradient(#F49C25, #F49726) - //background: #F38F26 + color: #fff + linearGradient(F49C25, F49726) border-radius: 2px 2px 0 0 .ui-nav-item-current a, @@ -61,30 +67,36 @@ linear-gradient(from, to) float: left margin: 5px 10px 0 0 a + display: inline-block + *display: inline + zoom: 1 padding: 0 15px - height: 24px + height: 26px line-height: 26px background: transparent - border: 1px solid transparent - _border-color: tomato - _filter:chroma(color=tomato) color: #868686 font-weight: normal font-size: 12px border-radius: 3px &:hover + height: 24px + line-height: 24px + padding: 0 14px background: transparent - filter: none box-shadow: 0px -1px 0px #F6F6F6 border: 1px solid #CECECE border-radius: 3px .ui-nav-subitem-current a, .ui-nav-subitem-current a:hover + height: 24px + line-height: 24px + padding: 0 14px border-left: 1px solid #DADADA border-right: 1px solid #DADADA border-top: 1px solid #BEBEBE border-bottom: 1px solid transparent + _border-bottom: 1px solid #DADADA box-shadow: inset 0px 1px 0px #DADADA background: #E7E7E7 @@ -94,7 +106,7 @@ linear-gradient(from, to) border-left: 1px solid #CCCCCC border-right: 1px solid #CCCCCC border-bottom: 1px solid #CCCCCC - linear-gradient(#FEFEFE, #F7F7F7) + linearGradient(FEFEFE, F7F7F7) // 控制二级导航显隐 .ui-nav-item-current .ui-nav-submain