+ add 'code.less'.

1174f01b · Catouse · 03eaa5ea · 1174f01b · 1174f01b · 1174f01b
6 changed file
--- a/dist/css/zui.css
+++ b/dist/css/zui.css
@@ -2422,6 +2422,92 @@ a.list-group-item:focus {
 .alert-danger .alert-link {
  color: #a82824;
 }
+code,
+kdb,
+pre,
+samp {
+  font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
+}
+code {
+  padding: 2px 4px;
+  font-size: 90%;
+  color: #c7254e;
+  background-color: #f9f2f4;
+  white-space: nowrap;
+  border-radius: 2px;
+}
+pre {
+  display: block;
+  padding: 9.5px;
+  margin: 0 0 10px;
+  font-size: 13px;
+  line-height: 1.428571429;
+  word-break: break-all;
+  word-wrap: break-word;
+  color: #707070;
+  background-color: #f5f5f5;
+  border: 1px solid #cccccc;
+  border-radius: 2px;
+}
+pre code {
+  padding: 0;
+  font-size: inherit;
+  color: inherit;
+  white-space: pre-wrap;
+  background-color: transparent;
+  border: 0;
+}
+.pre-scrollable {
+  max-height: 340px;
+  overflow-y: scroll;
+}
+.com {
+  color: #93a1a1;
+}
+.lit {
+  color: #195f91;
+}
+.pun,
+.opn,
+.clo {
+  color: #93a1a1;
+}
+.fun {
+  color: #dc322f;
+}
+.str,
+.atv {
+  color: #D14;
+}
+.kwd,
+.prettyprint .tag {
+  color: #1e347b;
+}
+.typ,
+.atn,
+.dec,
+.var {
+  color: teal;
+}
+.pln {
+  color: #48484c;
+}
+.prettyprint {
+  padding: 8px;
+  background-color: #f7f7f9;
+}
+.prettyprint.linenums {
+  -webkit-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
+  -moz-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
+  box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
+}
+/* Specify class=linenums on a pre to get line numbering */
+ol.linenums li {
+  padding-left: 12px;
+  color: #bebec5;
+  line-height: 20px;
+  text-shadow: 0 1px 0 #fff;
+}
 /*!
 *  Font Awesome 3.2.1
 *  the iconic font designed for Bootstrap

--- a/examples/code.html
+++ b/examples/code.html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="ZUI，一个简单吸引人的前端框架。">
+  <meta name="author" content="Zentao">
+
+  <title>ZUI</title>
+
+  <link href="../dist/css/zui.css" rel="stylesheet">
+  <link href="../assets/css/doc.css" rel="stylesheet">
+  <script src="../assets/js/google-code-prettify/prettify.js"></script>
+</head>
+
+<body onload="prettyPrint()">
+  <article>
+    <section id="buttons" class="page-section">
+    <h1 class="header-dividing">代码</h1>
+    <h2>类型</h2>
+    <h3>内联代码</h3>
+    <div class="segment">
+      <p>通过<code>&lt;code&gt;</code>标签内嵌一小段代码。</p>
+    </div>
+    <h3>基本代码块</h3>
+    <div class="segment">
+      <pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>
+    </div>
+    <p>还可以使用<code>.pre-scrollable</code> class，其作用是设置max-height为350px，并在垂直方向展示滚动条。</p>
+    </section>
+
+    <h3>代码高亮</h3>
+    <p>代码高亮是通过根据代码语言语法给代码中的单词、字符标记为不同颜色来显示的方法。代码高亮能大大提高代码的查阅体验。在web界面加上代码高亮非常容易，在产品中如需要向用户展现代码应该使用代码高亮。</p>
+    <p>这里推荐的方案是<a href="https://code.google.com/p/google-code-prettify/" target="_blank">Google Code Prettify</a>实现代码高亮。</p>
+    <p>下面是一个php文件的示例：</p>
+    <div class="segment">
+      <pre class="prettyprint linenums"><code>&lt;!doctype html&gt;&#10;&lt;html lang="en"&gt;&#10;  &lt;head&gt;&#10;    &lt;title&gt;Zentao Design Guidelines&lt;/title&gt;&#10;  &lt;/head&gt;&#10;  &lt;body&gt;&#10;  &lt;?php&#10;    echo "hello, world!";&#10;  ?&gt;&#10;  &lt;/body&gt;&#10;&lt;/html&gt;</code></pre>
+
+    </div>
+  </article>
+
+</body>
+</html>
\ No newline at end of file
--- a/examples/header.html
+++ b/examples/header.html
@@ -16,9 +16,7 @@
 <body>
  <article>
    <section id="buttons" class="page-section">
-      <div class="page-header">
-        <h1>Headers</h1>
-      </div>
+      <h1 class="header-dividing">Headers</h1>

      <h2>类型</h2>


--- a/src/less/basic/variables.less
+++ b/src/less/basic/variables.less
@@ -403,4 +403,15 @@
 @animation-speed-fast:               0.1s;
 @animation-speed-slow:               0.5s;

-@animation-type:                     ease-in;
\ No newline at end of file
+@animation-type:                     ease-in;
+
+
+// Code
+// ------------------------
+@code-color:                  #c7254e;
+@code-bg:                     #f9f2f4;
+
+@pre-bg:                      #f5f5f5;
+@pre-color:                   @gray-dark;
+@pre-border-color:            #ccc;
+@pre-scrollable-max-height:   340px;
\ No newline at end of file
--- a/src/less/components/code.less
+++ b/src/less/components/code.less
+//
+// Code (inline and blocK)
+// --------------------------------------------------
+
+
+// Inline and block code styles
+code,
+kdb,
+pre,
+samp 
+{
+  font-family: @font-family-monospace;
+}
+
+// Inline code
+code
+{
+  padding: 2px 4px;
+  font-size: 90%;
+  color: @code-color;
+  background-color: @code-bg;
+  white-space: nowrap;
+  border-radius: @border-radius-base;
+}
+
+// Blocks of code
+pre
+{
+  display: block;
+  padding: ((@line-height-computed - 1) / 2);
+  margin: 0 0 (@line-height-computed / 2);
+  font-size: (@font-size-base - 1); // 14px to 13px
+  line-height: @line-height-base;
+  word-break: break-all;
+  word-wrap: break-word;
+  color: @pre-color;
+  background-color: @pre-bg;
+  border: 1px solid @pre-border-color;
+  border-radius: @border-radius-base;
+
+  // Account for some code outputs that place code tags in pre tags
+  code
+  {
+    padding: 0;
+    font-size: inherit;
+    color: inherit;
+    white-space: pre-wrap;
+    background-color: transparent;
+    border: 0;
+  }
+}
+
+// Enable scrollable blocks of code
+.pre-scrollable
+{
+  max-height: @pre-scrollable-max-height;
+  overflow-y: scroll;
+}
+
+
+// prettify.css
+// ----------------------
+.com { color: #93a1a1; }
+.lit { color: #195f91; }
+.pun, .opn, .clo { color: #93a1a1; }
+.fun { color: #dc322f; }
+.str, .atv { color: #D14; }
+.kwd, .prettyprint .tag { color: #1e347b; }
+.typ, .atn, .dec, .var { color: teal; }
+.pln { color: #48484c; }
+
+.prettyprint
+{
+  padding: 8px;
+  background-color: #f7f7f9;
+}
+.prettyprint.linenums
+{
+  -webkit-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
+     -moz-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
+          box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
+}
+
+/* Specify class=linenums on a pre to get line numbering */
+// ol.linenums
+// {
+//   margin: 0 0 0 33px; /* IE indents via margin-left */
+// }
+ol.linenums li
+{
+  padding-left: 12px;
+  color: #bebec5;
+  line-height: 20px;
+  text-shadow: 0 1px 0 #fff;
+}
\ No newline at end of file
--- a/src/less/zui.less
+++ b/src/less/zui.less
@@ -46,6 +46,7 @@
 @import "components/list-group.less";
 @import "components/panels.less";
 @import "components/alerts.less";
+@import "components/code.less";


 //