New UI merge in progress

public/ng/less/ui/reset.less

@@ -0,0 +1,376 @@
+@import "var";
+
+* {
+  padding: 0;
+  margin: 0;
+}
+
+html {
+  font-size: @baseFontSize+1;
+  font-family: Helvetica, "Microsoft Yahei", Menlo, Monaco, Consolas, "Courier New", monospace;
+  // make sure min font size
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  line-height: @baseLineHeight;
+
+  color: @baseFontColor;
+  background-color: @baseBgColor;
+
+}
+
+input,
+textarea,
+select,
+option,
+button {
+  font-family: Helvetica, "Microsoft Yahei", Menlo, Monaco, Consolas, "Courier New", monospace;
+}
+
+// html5 block elements
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+main,
+nav,
+section,
+summary,
+.block {
+  display: block;
+}
+
+.inline {
+  display: inline;
+}
+
+.inline-block {
+  display: inline-block;
+}
+
+.dis-table {
+  display: table;
+}
+
+.dis-table-cell {
+  display: table-cell;
+}
+
+.dis-flex {
+  display: flex;
+}
+
+// html5 media elements
+
+audio,
+canvas,
+progress,
+video {
+  display: inline-block;
+  vertical-align: baseline;
+}
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+// display hidden elements
+
+[hidden],
+template
+.hidden {
+  display: none;
+}
+
+.opacity {
+  opacity: 0;
+}
+
+.opacity-half {
+  opacity: .5;
+}
+
+// links element
+
+a,
+.text-link {
+  color: @linkColor;
+  text-decoration: none;
+  &:hover {
+    color: @linkHoverColor;
+    text-decoration: none;
+  }
+  &:focus {
+    outline: none;
+  }
+}
+
+// stylus elements
+
+b,
+strong,
+.text-bold {
+  font-weight: bold;
+}
+
+dfn,
+.text-italic {
+  font-style: italic;
+}
+
+// headers elements
+
+h1,
+.text-h1 {
+  font-size: 2em;
+  margin-bottom: 0.67em;
+}
+
+h2,
+.text-h2 {
+  font-size: 1.6em;
+  margin-bottom: 0.625em;
+}
+
+h3,
+.text-h3 {
+  font: 1.2em;
+  margin-bottom: 0.5em;
+}
+
+h4,
+h5,
+h6,
+.text-h4,
+.text-h5,
+.text-h6 {
+  font-size: 1em;
+  margin-bottom: .3em;
+}
+
+// text elements
+
+small,
+.text-small {
+  font-size: .8em;
+}
+
+sub,
+sup,
+.text-sup,
+.text-sub {
+  font-size: .7em;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sup,
+.text-sup {
+  top: -0.5em;
+}
+
+sub,
+.text-sub {
+  bottom: -0.25em;
+}
+
+.figure,
+.blockquote {
+  margin: 1em 1.5em;
+}
+
+pre {
+  overflow: auto;
+  margin: 0;
+  padding: .4em 1em;
+}
+
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+
+.text-left {
+  text-align: left;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.list-no-style {
+  list-style: none;
+}
+
+// image elements
+
+img {
+  border: none;
+}
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+// form elements
+
+label {
+  font-weight: bold;
+}
+
+input,
+.ipt {
+  padding: .6em;
+  line-height: normal;
+  border: 1px solid @iptBorderColor;
+  &:focus {
+    background-color: @iptFocusColor;
+    outline: none;
+  }
+}
+
+button {
+  overflow: visible;
+  padding: .6em 1.2em;
+}
+
+button,
+select {
+  text-transform: none;
+  &:focus {
+    outline: none;
+  }
+}
+
+button,
+input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  cursor: pointer;
+  background-color: @btnBgColor;
+  color: @btnFontColor;
+  border: none;
+  &:hover {
+    background-color: @btnHoverBgColor;
+    color: @btnHoverFontColor;
+  }
+}
+
+button[disabled],
+html input[disabled] {
+  cursor: default;
+}
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+input[type="checkbox"],
+input[type="radio"] {
+  box-sizing: border-box;
+  padding: 0;
+}
+
+input[type="search"] {
+  -webkit-appearance: textfield;
+  -moz-appearance: textfield;
+  -moz-box-sizing: content-box;
+  -webkit-box-sizing: content-box;
+  box-sizing: content-box;
+}
+
+fieldset {
+  border: 1px solid @iptBorderColor;
+  margin: 0 2px;
+  padding: 0.4em 0.8em 0.8em;
+}
+
+legend {
+  border: 0;
+  padding: 0;
+}
+
+textarea {
+  overflow: auto;
+  border: 1px solid @iptBorderColor;
+  padding: .6em;
+  &:focus {
+    background-color: @iptFocusColor;
+    outline: none;
+  }
+}
+
+optgroup {
+  font-weight: bold;
+}
+
+// table elements
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+td,
+th {
+  padding: 0;
+}
+
+// hr element
+
+hr {
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+  height: 0;
+  border: none;
+  border-bottom: 1px solid @hrColor;
+  margin-bottom: .75em;
+}
+
+// code element
+
+p {
+  code {
+    color: @inlineCodeColor;
+  }
+}
+
+// radius element
+
+.radius {
+  border-radius: .25em;
+}
+
+// truncate element
+
+.text-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: inline-block;
+  vertical-align: top;
+}
+
+// code elements
+
+pre {
+  line-height: 1.6;
+  overflow: auto;
+  padding: 0;
+}