mirror of
https://codeberg.org/forgejo/forgejo.git
synced 2025-06-17 11:59:30 +00:00
New UI merge in progress
This commit is contained in:
Unknwon
parent
0a739cf9ac
commit
8dd07c0ddd
199 changed files with 15030 additions and 9325 deletions
7
public/ng/less/gogs.less
Normal file
7
public/ng/less/gogs.less
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
@import "gogs/base";
|
||||
@import "gogs/markdown";
|
||||
@import "gogs/external";
|
||||
@import "gogs/dashboard";
|
||||
@import "gogs/sign";
|
||||
@import "gogs/repository";
|
||||
@import "gogs/settings";
|
||||
10
public/ng/less/ui.less
Normal file
10
public/ng/less/ui.less
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
@import "ui/var";
|
||||
@import "ui/reset";
|
||||
@import "ui/grid";
|
||||
@import "ui/form";
|
||||
@import "ui/menu";
|
||||
@import "ui/panel";
|
||||
@import "ui/label";
|
||||
@import "ui/bread";
|
||||
@import "ui/alert";
|
||||
@import "ui/table";
|
||||
47
public/ng/less/ui/alert.less
Normal file
47
public/ng/less/ui/alert.less
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
@import "var";
|
||||
|
||||
.alert{
|
||||
padding: .6em 1.5em;
|
||||
margin-bottom: 10px;
|
||||
i{
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.alert-radius{
|
||||
border-radius: .25em;
|
||||
}
|
||||
|
||||
.alert-red{
|
||||
color: @alertRedColor;
|
||||
border: 1px solid darken(@alertRedColor,10%);
|
||||
background-color: lighten(@alertRedColor,40%);
|
||||
}
|
||||
|
||||
.alert-blue{
|
||||
color: @alertBlueColor;
|
||||
border: 1px solid darken(@alertBlueColor,10%);
|
||||
background-color: lighten(@alertBlueColor,45%);
|
||||
}
|
||||
|
||||
.alert-green{
|
||||
color: @alertGreenColor;
|
||||
border: 1px solid darken(@alertGreenColor,10%);
|
||||
background-color: lighten(@alertGreenColor,45%);
|
||||
}
|
||||
|
||||
.alert-gray{
|
||||
color: @alertGrayColor;
|
||||
border: 1px solid darken(@alertGrayColor,10%);
|
||||
background-color: lighten(@alertGrayColor,35%);
|
||||
}
|
||||
|
||||
.alert-orange{
|
||||
color: @alertOrangeColor;
|
||||
border: 1px solid darken(@alertOrangeColor,10%);
|
||||
background-color: lighten(@alertOrangeColor,45%);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
18
public/ng/less/ui/bread.less
Normal file
18
public/ng/less/ui/bread.less
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
@import "var";
|
||||
|
||||
.breads {
|
||||
.bread {
|
||||
&:after {
|
||||
content: "/";
|
||||
font-weight: bold;
|
||||
margin: 0 4px 0 7px;
|
||||
color:@breadColor;
|
||||
}
|
||||
}
|
||||
.bread:last-child {
|
||||
&:after {
|
||||
content: "";
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
192
public/ng/less/ui/form.less
Normal file
192
public/ng/less/ui/form.less
Normal file
|
|
@ -0,0 +1,192 @@
|
|||
@import "var";
|
||||
|
||||
// colored buttons
|
||||
.btn {
|
||||
&:hover {
|
||||
}
|
||||
}
|
||||
|
||||
.btn-small {
|
||||
font-size: 0.9*@baseFontSize;
|
||||
padding: .4em .9em;
|
||||
}
|
||||
|
||||
.btn-large {
|
||||
font-size: 1.2*@baseFontSize;
|
||||
}
|
||||
|
||||
.btn-green {
|
||||
background-color: @btnGreenColor;
|
||||
border: 1px solid @btnGreenColor;
|
||||
&:hover {
|
||||
background-color: @btnHoverGreenColor;
|
||||
color: #FFF;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-blue {
|
||||
background-color: @btnBlueColor;
|
||||
border: 1px solid @btnBlueColor;
|
||||
&:hover {
|
||||
background-color: @btnHoverBlueColor;
|
||||
color: #FFF;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-red {
|
||||
background-color: @btnRedColor;
|
||||
border: 1px solid @btnRedColor;
|
||||
&:hover {
|
||||
background-color: @btnHoverRedColor;
|
||||
color: #FFF;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-orange {
|
||||
background-color: @btnOrangeColor;
|
||||
border: 1px solid @btnOrangeColor;
|
||||
&:hover {
|
||||
background-color: @btnHoverOrangeColor;
|
||||
color: #FFF;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-black {
|
||||
background-color: @btnBlackColor;
|
||||
border: 1px solid @btnBlackColor;
|
||||
&:hover {
|
||||
background-color: @btnHoverBlackColor;
|
||||
color: #FFF;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-gray {
|
||||
background-color: @btnGrayColor;
|
||||
color: @baseFontColor;
|
||||
border: 1px solid @btnGrayBorderColor;
|
||||
&:hover {
|
||||
background-color: @btnGrayHoverColor;
|
||||
color: @baseFontColor;
|
||||
}
|
||||
}
|
||||
|
||||
// status buttons
|
||||
|
||||
.btn-active {
|
||||
box-shadow: 0 0 0 1px rgba(0, 0, 0, .1) inset, 0 0 4px rgba(0, 0, 0, .15) inset
|
||||
}
|
||||
|
||||
.btn-radius {
|
||||
border-radius: .25em;
|
||||
}
|
||||
|
||||
.btn-left-radius {
|
||||
border-top-left-radius: .25em;
|
||||
border-bottom-left-radius: .25em;
|
||||
}
|
||||
|
||||
.btn-right-radius {
|
||||
border-top-right-radius: .25em;
|
||||
border-bottom-right-radius: .25em;
|
||||
}
|
||||
|
||||
.btn-block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
box-sizing: content-box;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.btn-disabled {
|
||||
opacity: .6;
|
||||
cursor: not-allowed;
|
||||
box-shadow: none;
|
||||
background-image: none !important;
|
||||
border: none;
|
||||
&:hover {
|
||||
background-image: none !important;
|
||||
color: @btnHoverFontColor;
|
||||
}
|
||||
}
|
||||
|
||||
// input form elements
|
||||
|
||||
.ipt {
|
||||
&:focus {
|
||||
border-color: @iptFocusBorderColor;
|
||||
}
|
||||
}
|
||||
|
||||
.ipt-radius {
|
||||
border-radius: .25em;
|
||||
}
|
||||
|
||||
.ipt-small {
|
||||
font-size: .8*@baseFontSize;
|
||||
}
|
||||
|
||||
.ipt-large {
|
||||
font-size: 1.2*@baseFontSize;
|
||||
}
|
||||
|
||||
.ipt-disabled,
|
||||
input[disabled] {
|
||||
background-color: @iptDisabledColor !important;
|
||||
&:focus {
|
||||
background-color: @iptDisabledColor !important;
|
||||
}
|
||||
color: #888;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.ipt-readonly,
|
||||
input[readonly] {
|
||||
&:focus {
|
||||
background-color: @iptDisabledColor !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ipt-error {
|
||||
border-color: @iptErrorBorderColor !important;
|
||||
background-color: @iptErrorFocusColor !important;
|
||||
}
|
||||
|
||||
.form {
|
||||
label {
|
||||
margin-right: 1em;
|
||||
}
|
||||
.help {
|
||||
color: @formHelpFontColor;
|
||||
padding-top: .6em;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.form-stack {
|
||||
label {
|
||||
display: block;
|
||||
}
|
||||
.field {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.form-align {
|
||||
label,
|
||||
.form-label {
|
||||
display: inline-block;
|
||||
width: 120px;
|
||||
text-align: right;
|
||||
margin-right: 1em;
|
||||
}
|
||||
.field {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
label.req {
|
||||
&:after {
|
||||
content: "*";
|
||||
color: @labelRedColor;
|
||||
}
|
||||
}
|
||||
99
public/ng/less/ui/grid.less
Normal file
99
public/ng/less/ui/grid.less
Normal file
|
|
@ -0,0 +1,99 @@
|
|||
@import "var";
|
||||
@import "reset";
|
||||
|
||||
// float elements
|
||||
|
||||
.left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.clear::after {
|
||||
clear: both;
|
||||
content: " ";
|
||||
width: 0;
|
||||
height: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// 12 based grids
|
||||
|
||||
.grid-1-12 {
|
||||
width: 8.33%;
|
||||
}
|
||||
|
||||
.grid-2-12,
|
||||
.grid-1-6 {
|
||||
width: 16.67%;
|
||||
}
|
||||
|
||||
.grid-3-12,
|
||||
.grid-1-4 {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.grid-4-12,
|
||||
.grid-1-3 {
|
||||
width: 33%;
|
||||
}
|
||||
|
||||
.grid-5-12 {
|
||||
width: 41.67%;
|
||||
}
|
||||
|
||||
.grid-6-12,
|
||||
.grid-1-2 {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.grid-7-12 {
|
||||
width: 58.33%;
|
||||
}
|
||||
|
||||
.grid-8-12,
|
||||
.grid-2-3 {
|
||||
width: 66.67%;
|
||||
}
|
||||
|
||||
.grid-9-12,
|
||||
.grid-3-4 {
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.grid-10-12,
|
||||
.grid-5-6 {
|
||||
width: 83.33%;
|
||||
}
|
||||
|
||||
.grid-11-12 {
|
||||
width: 91.67%;
|
||||
}
|
||||
|
||||
*[class*="grid-"] {
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
// 5 based
|
||||
|
||||
.grid-1-5 {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.grid-2-5 {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.grid-3-5 {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.grid-4-5 {
|
||||
width: 80%;
|
||||
}
|
||||
41
public/ng/less/ui/label.less
Normal file
41
public/ng/less/ui/label.less
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
@import "var";
|
||||
|
||||
.label {
|
||||
padding: 2px 6px;
|
||||
color: @labelFontColor;
|
||||
}
|
||||
|
||||
.label-red {
|
||||
background-color: @labelRedColor;
|
||||
}
|
||||
|
||||
.label-blue {
|
||||
background-color: @labelBlueColor;
|
||||
}
|
||||
|
||||
.label-gray {
|
||||
background-color: @labelGrayColor;
|
||||
}
|
||||
|
||||
.label-green {
|
||||
background-color: @labelGreenColor;
|
||||
}
|
||||
|
||||
.label-orange {
|
||||
background-color: @labelOrangeColor;
|
||||
}
|
||||
|
||||
.label-black {
|
||||
background-color: @labelBlackColor;
|
||||
}
|
||||
|
||||
.label-radius{
|
||||
border-radius: .2em;
|
||||
}
|
||||
|
||||
.label-link{
|
||||
color: @labelFontColor;
|
||||
&:hover{
|
||||
color: @labelFontColor;
|
||||
}
|
||||
}
|
||||
158
public/ng/less/ui/menu.less
Normal file
158
public/ng/less/ui/menu.less
Normal file
|
|
@ -0,0 +1,158 @@
|
|||
@import "var";
|
||||
|
||||
// lined menu
|
||||
|
||||
ul.menu {
|
||||
> li {
|
||||
list-style: none;
|
||||
> a {
|
||||
padding: .8em 1.2em;
|
||||
&:hover {
|
||||
background-color: @lineMenuHoverBgColor;
|
||||
color: @lineMenuHoverFontColor;
|
||||
}
|
||||
}
|
||||
&.current > a,
|
||||
&.hover > a {
|
||||
color: @lineMenuHoverFontColor;
|
||||
}
|
||||
}
|
||||
> li.head {
|
||||
font-weight: bold;
|
||||
padding: .8em 1.2em;
|
||||
}
|
||||
> li.down:hover {
|
||||
> ul.menu-down {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
> li.border-bottom {
|
||||
border-bottom: 1px solid @menuBorderColor;
|
||||
height: 0;
|
||||
margin: .5em 0;
|
||||
}
|
||||
}
|
||||
|
||||
ul.menu-line {
|
||||
> li,
|
||||
> li > a {
|
||||
display: inline-block;
|
||||
}
|
||||
> li.down {
|
||||
position: relative;
|
||||
> a:after {
|
||||
content: "\25BE";
|
||||
margin-left: .4em;
|
||||
}
|
||||
> ul.menu-down {
|
||||
top: 2.1em;
|
||||
width: 150%;
|
||||
}
|
||||
}
|
||||
> li.hover {
|
||||
position: relative;
|
||||
> a:after {
|
||||
position: absolute;
|
||||
content: "\25B4";
|
||||
left: 50%;
|
||||
bottom: -1.1em;
|
||||
margin-left: -4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul.menu-vertical,
|
||||
ul.menu-down {
|
||||
> li > a,
|
||||
> li.head {
|
||||
display: block;
|
||||
padding: .4em 1.2em;
|
||||
}
|
||||
> li.down {
|
||||
position: relative;
|
||||
> a:after {
|
||||
content: "\25B8";
|
||||
position: absolute;
|
||||
right: .6em;
|
||||
}
|
||||
}
|
||||
> li.hover {
|
||||
position: relative;
|
||||
> a:after {
|
||||
content: "\25B8";
|
||||
position: absolute;
|
||||
left: .5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul.menu-border,
|
||||
ul.menu-down {
|
||||
border: 1px solid @menuBorderColor;
|
||||
> li.head {
|
||||
border-bottom: 1px solid @menuBorderColor;
|
||||
}
|
||||
}
|
||||
|
||||
ul.menu-down {
|
||||
position: absolute;
|
||||
display: none;
|
||||
z-index: 99;
|
||||
box-shadow: 0 0 2px @menuShadowColor;
|
||||
background-color: @menuDownBgColor;
|
||||
}
|
||||
|
||||
ul.menu-radius {
|
||||
border-radius: .3em;
|
||||
> li {
|
||||
&:first-child {
|
||||
border-top-left-radius: .3em;
|
||||
border-top-right-radius: .3em;
|
||||
> a {
|
||||
border-top-left-radius: .2em;
|
||||
border-top-right-radius: .2em;
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
border-bottom-left-radius: .3em;
|
||||
border-bottom-right-radius: .3em;
|
||||
> a {
|
||||
border-bottom-left-radius: .2em;
|
||||
border-bottom-right-radius: .2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.drop {
|
||||
position: relative;
|
||||
&:hover {
|
||||
> .drop-down {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 200%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
> .drop-down {
|
||||
display: none;
|
||||
border: 1px solid @dropBorderColor;
|
||||
box-shadow: 0 0 3px @menuShadowColor;
|
||||
background-color: @dropDownBgColor;
|
||||
}
|
||||
}
|
||||
|
||||
.drop-bottom {
|
||||
&:after {
|
||||
content: "\25BE";
|
||||
margin-left: .4em;
|
||||
}
|
||||
}
|
||||
|
||||
.drop-top {
|
||||
&:after {
|
||||
content: "\25B4";
|
||||
margin-left: .4em;
|
||||
}
|
||||
}
|
||||
41
public/ng/less/ui/panel.less
Normal file
41
public/ng/less/ui/panel.less
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
@import "var";
|
||||
.panel {
|
||||
border: 1px solid@panelBorderColor;
|
||||
.panel-header {
|
||||
font-size: 16px;
|
||||
padding: .6em 1.2em;
|
||||
background-color: @panelHeaderBgColor;
|
||||
border-bottom: 1px solid@panelBorderColor;
|
||||
}
|
||||
.panel-body {
|
||||
.panel-desc {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
.panel-content {
|
||||
padding: 1em 1.2em;
|
||||
}
|
||||
.panel-footer {
|
||||
padding: .6em 1.2em;
|
||||
background-color: @panelFooterBgColor;
|
||||
border-top: 1px solid@panelBorderColor;
|
||||
}
|
||||
&.panel-radius {
|
||||
border-radius: .3em;
|
||||
.panel-header {
|
||||
border-top-left-radius: .3em;
|
||||
border-top-right-radius: .3em;
|
||||
}
|
||||
.panel-footer {
|
||||
border-bottom-left-radius: .3em;
|
||||
border-bottom-right-radius: .3em;
|
||||
}
|
||||
}
|
||||
&.panel-warning {
|
||||
border-color: #F0C36D;
|
||||
> .panel-header {
|
||||
background-color: #F9EDBE;
|
||||
border-color: #F0C36D;
|
||||
}
|
||||
}
|
||||
}
|
||||
376
public/ng/less/ui/reset.less
Normal file
376
public/ng/less/ui/reset.less
Normal file
|
|
@ -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;
|
||||
}
|
||||
63
public/ng/less/ui/table.less
Normal file
63
public/ng/less/ui/table.less
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
@import "var";
|
||||
|
||||
table {
|
||||
th,
|
||||
td {
|
||||
padding: .3em .6em;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.table-border {
|
||||
border: 1px solid @tableBorderColor;
|
||||
tr {
|
||||
border-top: 1px solid @tableCellBorderColor;
|
||||
th,
|
||||
td, {
|
||||
border-top: 1px solid @tableCellBorderColor;
|
||||
}
|
||||
&:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
thead {
|
||||
border-bottom: 1px solid @tableBorderColor;
|
||||
}
|
||||
}
|
||||
|
||||
.table-block {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.table-radius {
|
||||
border-collapse: separate !important;
|
||||
border-radius: .3em;
|
||||
thead:first-child {
|
||||
border-top-left-radius: .3em;
|
||||
border-top-right-radius: .3em;
|
||||
tr:first-child {
|
||||
border-top-left-radius: .3em;
|
||||
> th:first-child {
|
||||
border-top-left-radius: .3em;
|
||||
}
|
||||
> th:last-child {
|
||||
border-top-right-radius: .3em;
|
||||
}
|
||||
}
|
||||
}
|
||||
tbody {
|
||||
border-bottom-left-radius: .3em;
|
||||
border-bottom-right-radius: .3em;
|
||||
tr:last-child {
|
||||
border-bottom-left-radius: .3em;
|
||||
border-bottom-right-radius: .3em;
|
||||
> td:first-child {
|
||||
border-bottom-left-radius: .3em;
|
||||
}
|
||||
> td:last-child {
|
||||
border-bottom-right-radius: .3em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
83
public/ng/less/ui/var.less
Normal file
83
public/ng/less/ui/var.less
Normal file
|
|
@ -0,0 +1,83 @@
|
|||
@baseFontSize: 12px;
|
||||
|
||||
@baseLineHeight: 24px;
|
||||
|
||||
@baseBgColor: #FAFAFA;
|
||||
@baseFontColor: #444;
|
||||
|
||||
@linkColor: #428BCA;
|
||||
@linkHoverColor: #399ADE;
|
||||
@linkVisitedColor: #0c172f;
|
||||
|
||||
@iptBorderColor: #BBB;
|
||||
@iptFocusColor: #f2fffc;
|
||||
@iptFocusBorderColor: #428BCA;
|
||||
@iptDisabledColor: #F2F2F2;
|
||||
@iptErrorBorderColor: #b63b2c;
|
||||
@iptErrorFocusColor: #ffF0F0;
|
||||
@formHelpFontColor:#999;
|
||||
|
||||
@hrColor: #DDD;
|
||||
|
||||
@inlineCodeColor: #b63b2c;
|
||||
|
||||
@btnBgColor: #888;
|
||||
@btnFontColor: #FAFAFA;
|
||||
@btnHoverBgColor: #444;
|
||||
@btnHoverFontColor: #FFF;
|
||||
|
||||
@btnGreenColor: #65AD4E;
|
||||
@btnHoverGreenColor: #71BF57;
|
||||
|
||||
@btnBlueColor: #428BCA;
|
||||
@btnHoverBlueColor: #539CDB;
|
||||
|
||||
@btnRedColor: #D9453D;
|
||||
@btnHoverRedColor: #FF635A;
|
||||
|
||||
@btnBlackColor: #444;
|
||||
@btnHoverBlackColor: #383838;
|
||||
|
||||
@btnOrangeColor: #DF7514;
|
||||
@btnHoverOrangeColor: #df8229;
|
||||
|
||||
@btnGrayColor: #F0F0F0;
|
||||
@btnGrayHoverColor: #FAFAFA;
|
||||
@btnGrayBorderColor: #D0D0D0;
|
||||
|
||||
@lineMenuHoverBgColor: #EAEAEA;
|
||||
@lineMenuHoverFontColor: #444;
|
||||
|
||||
@menuBorderColor: #BBB;
|
||||
@dropBorderColor: #BBB;
|
||||
@menuShadowColor: #666;
|
||||
@dropShadowColor: #666;
|
||||
@menuDownBgColor: #FFF;
|
||||
@dropDownBgColor: #FFF;
|
||||
|
||||
@panelBorderColor: #CCC;
|
||||
@panelHeaderBgColor: #EEE;
|
||||
@panelFooterBgColor: #EEE;
|
||||
|
||||
@labelRedColor: #D9453D;
|
||||
@labelBlueColor: #428BCA;
|
||||
@labelGreenColor: #65AD4E;
|
||||
@labelOrangeColor: #DF7514;
|
||||
@labelBlackColor: #444;
|
||||
@labelFontColor: #FFF;
|
||||
@labelGrayColor: #999;
|
||||
|
||||
@breadColor: #444;
|
||||
|
||||
@alertRedColor: #D9453D;
|
||||
@alertBlueColor: #428BCA;
|
||||
@alertGreenColor: #65AD4E;
|
||||
@alertOrangeColor: #DF7514;
|
||||
@alertBlackColor: #444;
|
||||
@alertGrayColor: #999;
|
||||
|
||||
@tableBorderColor:#D6D6D6;
|
||||
@tableCellBorderColor:#EAEAEA;
|
||||
|
||||
@preBgColor:#444;
|
||||
@preFontColor:#FFF;
|
||||
Loading…
Add table
Add a link
Reference in a new issue