提交 845f4c43 编写于 作者: C Catouse

* change file structure.

上级 a70124d6
/**
* Zentao UI.
**/
/*! normalize.css v2.1.3 | MIT License | git.io/normalize */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block;
}
audio,
canvas,
video {
display: inline-block;
}
audio:not([controls]) {
display: none;
height: 0;
}
[hidden],
template {
display: none;
}
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
}
a {
background: transparent;
}
a:focus {
outline: thin dotted;
}
a:active,
a:hover {
outline: 0;
}
h1 {
font-size: 2em;
margin: 0.67em 0;
}
abbr[title] {
border-bottom: 1px dotted;
}
b,
strong {
font-weight: bold;
}
dfn {
font-style: italic;
}
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
mark {
background: #ff0;
color: #000;
}
code,
kbd,
pre,
samp {
font-family: monospace, serif;
font-size: 1em;
}
pre {
white-space: pre-wrap;
}
q {
quotes: "\201C" "\201D" "\2018" "\2019";
}
small {
font-size: 80%;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
img {
border: 0;
}
svg:not(:root) {
overflow: hidden;
}
figure {
margin: 0;
}
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
legend {
border: 0;
padding: 0;
}
button,
input,
select,
textarea {
font-family: inherit;
font-size: 100%;
margin: 0;
}
button,
input {
line-height: normal;
}
button,
select {
text-transform: none;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
cursor: pointer;
}
button[disabled],
html input[disabled] {
cursor: default;
}
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box;
padding: 0;
}
input[type="search"] {
-webkit-appearance: textfield;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
textarea {
overflow: auto;
vertical-align: top;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.container {
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}
.container:before,
.container:after {
content: " ";
display: table;
}
.container:after {
clear: both;
}
.row {
margin-left: -15px;
margin-right: -15px;
}
.row:before,
.row:after {
content: " ";
display: table;
}
.row:after {
clear: both;
}
.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11,
.col-xs-12,
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12,
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12 {
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
}
.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11 {
float: left;
}
.col-xs-1 {
width: 8.333333333333332%;
}
.col-xs-2 {
width: 16.666666666666664%;
}
.col-xs-3 {
width: 25%;
}
.col-xs-4 {
width: 33.33333333333333%;
}
.col-xs-5 {
width: 41.66666666666667%;
}
.col-xs-6 {
width: 50%;
}
.col-xs-7 {
width: 58.333333333333336%;
}
.col-xs-8 {
width: 66.66666666666666%;
}
.col-xs-9 {
width: 75%;
}
.col-xs-10 {
width: 83.33333333333334%;
}
.col-xs-11 {
width: 91.66666666666666%;
}
.col-xs-12 {
width: 100%;
}
@media (min-width: 768px) {
.container {
max-width: 750px;
}
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11 {
float: left;
}
.col-sm-1 {
width: 8.333333333333332%;
}
.col-sm-2 {
width: 16.666666666666664%;
}
.col-sm-3 {
width: 25%;
}
.col-sm-4 {
width: 33.33333333333333%;
}
.col-sm-5 {
width: 41.66666666666667%;
}
.col-sm-6 {
width: 50%;
}
.col-sm-7 {
width: 58.333333333333336%;
}
.col-sm-8 {
width: 66.66666666666666%;
}
.col-sm-9 {
width: 75%;
}
.col-sm-10 {
width: 83.33333333333334%;
}
.col-sm-11 {
width: 91.66666666666666%;
}
.col-sm-12 {
width: 100%;
}
.col-sm-push-1 {
left: 8.333333333333332%;
}
.col-sm-push-2 {
left: 16.666666666666664%;
}
.col-sm-push-3 {
left: 25%;
}
.col-sm-push-4 {
left: 33.33333333333333%;
}
.col-sm-push-5 {
left: 41.66666666666667%;
}
.col-sm-push-6 {
left: 50%;
}
.col-sm-push-7 {
left: 58.333333333333336%;
}
.col-sm-push-8 {
left: 66.66666666666666%;
}
.col-sm-push-9 {
left: 75%;
}
.col-sm-push-10 {
left: 83.33333333333334%;
}
.col-sm-push-11 {
left: 91.66666666666666%;
}
.col-sm-pull-1 {
right: 8.333333333333332%;
}
.col-sm-pull-2 {
right: 16.666666666666664%;
}
.col-sm-pull-3 {
right: 25%;
}
.col-sm-pull-4 {
right: 33.33333333333333%;
}
.col-sm-pull-5 {
right: 41.66666666666667%;
}
.col-sm-pull-6 {
right: 50%;
}
.col-sm-pull-7 {
right: 58.333333333333336%;
}
.col-sm-pull-8 {
right: 66.66666666666666%;
}
.col-sm-pull-9 {
right: 75%;
}
.col-sm-pull-10 {
right: 83.33333333333334%;
}
.col-sm-pull-11 {
right: 91.66666666666666%;
}
.col-sm-offset-1 {
margin-left: 8.333333333333332%;
}
.col-sm-offset-2 {
margin-left: 16.666666666666664%;
}
.col-sm-offset-3 {
margin-left: 25%;
}
.col-sm-offset-4 {
margin-left: 33.33333333333333%;
}
.col-sm-offset-5 {
margin-left: 41.66666666666667%;
}
.col-sm-offset-6 {
margin-left: 50%;
}
.col-sm-offset-7 {
margin-left: 58.333333333333336%;
}
.col-sm-offset-8 {
margin-left: 66.66666666666666%;
}
.col-sm-offset-9 {
margin-left: 75%;
}
.col-sm-offset-10 {
margin-left: 83.33333333333334%;
}
.col-sm-offset-11 {
margin-left: 91.66666666666666%;
}
}
@media (min-width: 992px) {
.container {
max-width: 970px;
}
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11 {
float: left;
}
.col-md-1 {
width: 8.333333333333332%;
}
.col-md-2 {
width: 16.666666666666664%;
}
.col-md-3 {
width: 25%;
}
.col-md-4 {
width: 33.33333333333333%;
}
.col-md-5 {
width: 41.66666666666667%;
}
.col-md-6 {
width: 50%;
}
.col-md-7 {
width: 58.333333333333336%;
}
.col-md-8 {
width: 66.66666666666666%;
}
.col-md-9 {
width: 75%;
}
.col-md-10 {
width: 83.33333333333334%;
}
.col-md-11 {
width: 91.66666666666666%;
}
.col-md-12 {
width: 100%;
}
.col-md-push-0 {
left: auto;
}
.col-md-push-1 {
left: 8.333333333333332%;
}
.col-md-push-2 {
left: 16.666666666666664%;
}
.col-md-push-3 {
left: 25%;
}
.col-md-push-4 {
left: 33.33333333333333%;
}
.col-md-push-5 {
left: 41.66666666666667%;
}
.col-md-push-6 {
left: 50%;
}
.col-md-push-7 {
left: 58.333333333333336%;
}
.col-md-push-8 {
left: 66.66666666666666%;
}
.col-md-push-9 {
left: 75%;
}
.col-md-push-10 {
left: 83.33333333333334%;
}
.col-md-push-11 {
left: 91.66666666666666%;
}
.col-md-pull-0 {
right: auto;
}
.col-md-pull-1 {
right: 8.333333333333332%;
}
.col-md-pull-2 {
right: 16.666666666666664%;
}
.col-md-pull-3 {
right: 25%;
}
.col-md-pull-4 {
right: 33.33333333333333%;
}
.col-md-pull-5 {
right: 41.66666666666667%;
}
.col-md-pull-6 {
right: 50%;
}
.col-md-pull-7 {
right: 58.333333333333336%;
}
.col-md-pull-8 {
right: 66.66666666666666%;
}
.col-md-pull-9 {
right: 75%;
}
.col-md-pull-10 {
right: 83.33333333333334%;
}
.col-md-pull-11 {
right: 91.66666666666666%;
}
.col-md-offset-0 {
margin-left: 0;
}
.col-md-offset-1 {
margin-left: 8.333333333333332%;
}
.col-md-offset-2 {
margin-left: 16.666666666666664%;
}
.col-md-offset-3 {
margin-left: 25%;
}
.col-md-offset-4 {
margin-left: 33.33333333333333%;
}
.col-md-offset-5 {
margin-left: 41.66666666666667%;
}
.col-md-offset-6 {
margin-left: 50%;
}
.col-md-offset-7 {
margin-left: 58.333333333333336%;
}
.col-md-offset-8 {
margin-left: 66.66666666666666%;
}
.col-md-offset-9 {
margin-left: 75%;
}
.col-md-offset-10 {
margin-left: 83.33333333333334%;
}
.col-md-offset-11 {
margin-left: 91.66666666666666%;
}
}
@media (min-width: 1200px) {
.container {
max-width: 1170px;
}
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11 {
float: left;
}
.col-lg-1 {
width: 8.333333333333332%;
}
.col-lg-2 {
width: 16.666666666666664%;
}
.col-lg-3 {
width: 25%;
}
.col-lg-4 {
width: 33.33333333333333%;
}
.col-lg-5 {
width: 41.66666666666667%;
}
.col-lg-6 {
width: 50%;
}
.col-lg-7 {
width: 58.333333333333336%;
}
.col-lg-8 {
width: 66.66666666666666%;
}
.col-lg-9 {
width: 75%;
}
.col-lg-10 {
width: 83.33333333333334%;
}
.col-lg-11 {
width: 91.66666666666666%;
}
.col-lg-12 {
width: 100%;
}
.col-lg-push-0 {
left: auto;
}
.col-lg-push-1 {
left: 8.333333333333332%;
}
.col-lg-push-2 {
left: 16.666666666666664%;
}
.col-lg-push-3 {
left: 25%;
}
.col-lg-push-4 {
left: 33.33333333333333%;
}
.col-lg-push-5 {
left: 41.66666666666667%;
}
.col-lg-push-6 {
left: 50%;
}
.col-lg-push-7 {
left: 58.333333333333336%;
}
.col-lg-push-8 {
left: 66.66666666666666%;
}
.col-lg-push-9 {
left: 75%;
}
.col-lg-push-10 {
left: 83.33333333333334%;
}
.col-lg-push-11 {
left: 91.66666666666666%;
}
.col-lg-pull-0 {
right: auto;
}
.col-lg-pull-1 {
right: 8.333333333333332%;
}
.col-lg-pull-2 {
right: 16.666666666666664%;
}
.col-lg-pull-3 {
right: 25%;
}
.col-lg-pull-4 {
right: 33.33333333333333%;
}
.col-lg-pull-5 {
right: 41.66666666666667%;
}
.col-lg-pull-6 {
right: 50%;
}
.col-lg-pull-7 {
right: 58.333333333333336%;
}
.col-lg-pull-8 {
right: 66.66666666666666%;
}
.col-lg-pull-9 {
right: 75%;
}
.col-lg-pull-10 {
right: 83.33333333333334%;
}
.col-lg-pull-11 {
right: 91.66666666666666%;
}
.col-lg-offset-0 {
margin-left: 0;
}
.col-lg-offset-1 {
margin-left: 8.333333333333332%;
}
.col-lg-offset-2 {
margin-left: 16.666666666666664%;
}
.col-lg-offset-3 {
margin-left: 25%;
}
.col-lg-offset-4 {
margin-left: 33.33333333333333%;
}
.col-lg-offset-5 {
margin-left: 41.66666666666667%;
}
.col-lg-offset-6 {
margin-left: 50%;
}
.col-lg-offset-7 {
margin-left: 58.333333333333336%;
}
.col-lg-offset-8 {
margin-left: 66.66666666666666%;
}
.col-lg-offset-9 {
margin-left: 75%;
}
.col-lg-offset-10 {
margin-left: 83.33333333333334%;
}
.col-lg-offset-11 {
margin-left: 91.66666666666666%;
}
}
......@@ -115,7 +115,7 @@ ZUI也提供用来控制打印机的显示与隐藏的辅助类。显示和隐
## 6 配色 ##
ZUI的界面应该简洁,易于识别,让人感觉舒适而不失严谨。ZUI的配色应该尽可能达到该目的。
ZUI的界面应该简洁,易于识别,让人感觉舒适而不失严谨。所使用的配色应该尽可能达到该目的。
ZUI的配色表包含三部分:
......@@ -129,6 +129,5 @@ ZUI的配色表包含三部分:
- 在界面中运用的所有配色尽量使用配色表中已列明的颜色;
- 优先使用主要颜色和灰度颜色,仅在特殊的按钮或消息时才使用额外颜色;
-
下面是ZUI默认使用的配色方案--静谧之湖。
\ No newline at end of file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ZUI</title>
<link rel="stylesheet/less" type="text/css" href="src/less/zui.less" />
<script type="text/javascript"> less = { env: "development", dumpLineNumbers:'mediaquery' }; </script>
<script type="text/javascript" src="assets/js/less.js"></script>
</head>
<body>
<style>
.row { margin-bottom: 20px; }
.row .row { margin-top: 10px; margin-bottom: 0; }
[class*="col-"] {
padding-top: 15px;
padding-bottom: 15px;
background-color: #eee;
border: 1px solid #ddd;
background-color: rgba(86,61,124,.15);
border: 1px solid rgba(86,61,124,.2);
}
</style>
<div class='container'>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<!-- Optional: clear the XS cols if their content doesn't match in height -->
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>
<div class="row">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ZUI</title>
<link rel="stylesheet/less" type="text/css" href="src/less/basic/zui.less" />
<script type="text/javascript"> less = { env: "development", dumpLineNumbers:'mediaquery' }; </script>
<script type="text/javascript" src="assets/js/less.js"></script>
</head>
<body>
<style>
.row { margin-bottom: 20px; }
.row .row { margin-top: 10px; margin-bottom: 0; }
[class*="col-"] {
padding-top: 15px;
padding-bottom: 15px;
background-color: #eee;
border: 1px solid #ddd;
background-color: rgba(86,61,124,.15);
border: 1px solid rgba(86,61,124,.2);
}
</style>
<div class='container'>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<!-- Optional: clear the XS cols if their content doesn't match in height -->
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>
<div class="row">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>
</div>
</body>
</html>
---
layout: default
title: ZUI
base_url: "./"
---
//
// Grid system
// --------------------------------------------------
// Set the container width, and override it for fixed navbars in media queries
.container { .container-fixed(); }
// mobile first defaults
......
//
// Mixins
// ==================================================
.clearfix()
{
&:before, &:after { content: " "; display: table; }
......@@ -12,7 +17,9 @@
box-sizing: @boxmodel;
}
/* Grid System */
//
// BASIC VARIABLES & MIXINS
// --------------------------------------------------
// Centered container element
.container-fixed()
......
//
// Scaffolding
// --------------------------------------------------
*, *:before, *:after { .box-sizing(border-box); }
/**
* The Variables of ZUI.
**/
//
// The Variables of ZUI.
// =================================================
/*--------------- MEDIA QUERIES TYPES -------------*/
//
// MEDIA QUERIES TYPES
// -------------------------------------------------
/* Extra small screen (phone). */
// Extra small screen (phone).
@screen-xs: 480px;
@screen-xs-min: @screen-xs;
@screen-phone: @screen-xs-min;
/* Small screen (tablet). */
// Small screen (tablet).
@screen-sm: 768px;
@screen-sm-min: @screen-sm;
@screen-tablet: @screen-sm-min;
/* Medium screen (desktop). */
// Medium screen (desktop).
@screen-md: 992px;
@screen-md-min: @screen-md;
@screen-desktop: @screen-md-min;
/* Large screen (wide desktop). */
// Large screen (wide desktop).
@screen-lg: 1200px;
@screen-lg-min: @screen-lg;
@screen-lg-desktop: @screen-lg-min;
/* Provide max value for different screens. */
// Provide max value for different screens.
@screen-xs-max: (@screen-sm-min - 1);
@screen-sm-max: (@screen-md-min - 1);
@screen-md-max: (@screen-lg-min - 1);
/*----------------- Grid System ---------------*/
//
// Grid System
// -------------------------------------------------
/* Number of grid columns. */
// Number of grid columns.
@grid-columns: 12;
/* Padding applied on all columns at left and right. */
// Padding applied on all columns at left and right.
@grid-gutter-width: 30px;
@grid-float-breakpoint: @screen-tablet;
......@@ -48,15 +52,17 @@
@container-lg-desktop: ((1140px + @grid-gutter-width));
/*----------------- Typography ---------------*/
//
// Typography
// -------------------------------------------------
/* Font family. */
// Font family.
@font-family-sans-serif: "Helvetica Neue", Helvetica, Tahoma, Arial, sans-serif;
@font-family-serif: Georgia, "Times New Roman", Times, serif;
@font-family-monospace: Monaco, Menlo, Consolas, "Courier New", monospace;
@font-family-base: @font-family-sans-serif;
/* Font size. */
// Font size.
@font-size-base: 14px;
@font-size-large: ceil(@font-size-base * 1.25); // 18px
@font-size-small: ceil(@font-size-base * 0.85); // 12px
......@@ -68,11 +74,11 @@
@font-size-h5: @font-size-base;
@font-size-h6: ceil(@font-size-base * 0.85); // 12px
/* Line height. */
// Line height.
@line-height-base: 1.428571429; // 20/14
@line-height-computed: floor(@font-size-base * @line-height-base); // 20px
/* Headings font. */
// Headings font.
@headings-font-family: @font-family-base;
@headings-font-weight: bold;
@headings-line-height: 1.2;
......
// config and mixins
@import "variables.less";
@import "mixins.less";
@import "normalize.less";
// basic
@import "scaffolding.less";
@import "grid.less";
/**
* The Variables of ZUI.
* Zentao UI.
**/
/*------------ BASIC VARIABLES & MIXINS ----------*/
//
// BASIC VARIABLES & MIXINS
// --------------------------------------------------
/* Variables */
// Variables
@import "basic/variables.less";
/* Reset */
// Mixins
@import "basic/mixins.less";
// Reset
@import "basic/normalize.less";
/* Grid system. */
// Scaffolding
@import "basic/scaffolding.less";
// Grid system
@import "basic/grid.less";
\ No newline at end of file
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册