mirror of
https://gitee.com/dotnetchina/OpenAuth.Net.git
synced 2026-04-24 13:11:46 +08:00
采用ACE界面
This commit is contained in:
yubaolee
337
OpenAuth.Mvc/Content/ace/css/less/items.less
Normal file
337
OpenAuth.Mvc/Content/ace/css/less/items.less
Normal file
@@ -0,0 +1,337 @@
|
||||
.enable_items() when(@enable-items = true) {
|
||||
|
||||
.dialogs {
|
||||
padding:9px;
|
||||
position:relative;
|
||||
}
|
||||
.itemdiv {
|
||||
padding-right:3px;
|
||||
min-height:66px;
|
||||
position:relative;
|
||||
|
||||
> .user {
|
||||
display:inline-block;
|
||||
width:42px;
|
||||
position:absolute;
|
||||
left:0;
|
||||
|
||||
> img, > .img {
|
||||
border-radius:100%;
|
||||
border: 2px solid #5293C4;
|
||||
max-width: 40px;
|
||||
position: relative;
|
||||
}
|
||||
> .img {
|
||||
padding: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
> .body {
|
||||
width:auto;
|
||||
margin-left:50px;
|
||||
margin-right:12px;
|
||||
|
||||
position:relative;
|
||||
|
||||
> .time {
|
||||
display: block;
|
||||
font-size: @font-size-item-time;
|
||||
font-weight: bold;
|
||||
color: #666;
|
||||
|
||||
position: absolute;
|
||||
right: 9px;
|
||||
top: 0;
|
||||
|
||||
.@{icon} {
|
||||
font-size: @font-size-item-time-icon;
|
||||
font-weight: normal;
|
||||
}
|
||||
}// .body > .time
|
||||
|
||||
> .name {
|
||||
display: block;
|
||||
color: #999;
|
||||
> b { color: #777; }
|
||||
}// .body > .name
|
||||
|
||||
> .text {
|
||||
display: block;
|
||||
position: relative;
|
||||
margin-top: 2px;
|
||||
|
||||
padding-bottom: 19px;
|
||||
padding-left: 7px;
|
||||
|
||||
font-size: @font-size-item-text;
|
||||
|
||||
&:after {
|
||||
display: block;
|
||||
content: "";
|
||||
height: 1px;
|
||||
font-size: 0;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
left: 16px;
|
||||
right: -12px;
|
||||
margin-top: 9px;
|
||||
|
||||
border-top: 1px solid #E4ECF3;
|
||||
}
|
||||
|
||||
//> [class*="icon-quote-"]:first-child {
|
||||
//quote icon
|
||||
> .@{icon}:first-child {
|
||||
color: #DCE3ED;
|
||||
margin-right: 4px;
|
||||
}
|
||||
}// .body > .text
|
||||
}
|
||||
&:last-child > .body > .text {
|
||||
border-bottom-width: 0;
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
&.dialogdiv {
|
||||
padding-bottom: 14px;
|
||||
&:before {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: "";
|
||||
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 19px;
|
||||
|
||||
width: 3px;
|
||||
max-width: 3px;
|
||||
|
||||
background-color: #E1E6ED;
|
||||
border: 1px solid #D7DBDD;
|
||||
border-width: 0 1px;
|
||||
}
|
||||
&:last-child {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
&:last-child:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
> .user > img {
|
||||
border-color: #C9D6E5;
|
||||
}
|
||||
> .body {
|
||||
border: 1px solid #DDE4ED;
|
||||
padding: 5px 8px 8px;
|
||||
border-left-width: 2px;
|
||||
margin-right: 1px;
|
||||
|
||||
&:before{
|
||||
content: "";
|
||||
display: block;
|
||||
|
||||
position: absolute;
|
||||
left: -7px;
|
||||
top: 11px;
|
||||
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
|
||||
border: 2px solid #DDE4ED;
|
||||
border-width: 2px 0 0 2px;
|
||||
background-color: #FFF;
|
||||
|
||||
.box-sizing(content-box);
|
||||
|
||||
.rotate(-45deg);
|
||||
}
|
||||
|
||||
> .time {
|
||||
position: static;
|
||||
float: right;
|
||||
}
|
||||
> .text {
|
||||
padding-left: 0;
|
||||
padding-bottom: 0;
|
||||
&:after {display: none;}
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip-inner {
|
||||
word-break: break-all;
|
||||
}
|
||||
}//end of .itemdiv.dialogdiv
|
||||
|
||||
|
||||
|
||||
&.memberdiv {
|
||||
width: 175px;
|
||||
@media (min-width: @grid-float-breakpoint) {
|
||||
& { max-width: 50%; }
|
||||
}
|
||||
@media (max-width: @grid-float-breakpoint-max) {
|
||||
& { min-width: 33.333%; }
|
||||
}
|
||||
|
||||
padding: 2px;
|
||||
margin: 3px 0;
|
||||
float: left;
|
||||
border-bottom: 1px solid #E8E8E8;
|
||||
|
||||
> .user > img {
|
||||
border-color: #DCE3ED;
|
||||
}
|
||||
|
||||
> .body {
|
||||
> .time {
|
||||
position: static;
|
||||
}
|
||||
> .name {
|
||||
line-height: 18px;
|
||||
height: 18px;
|
||||
margin-bottom: 0;
|
||||
> a {
|
||||
display: inline-block;
|
||||
max-width: 100px;
|
||||
max-height: 18px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
}
|
||||
}//.itemdiv.memberdiv
|
||||
|
||||
|
||||
|
||||
.tools {
|
||||
//width:20px;
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
bottom: 10px;
|
||||
display: none;
|
||||
.btn {
|
||||
border-radius: 36px;
|
||||
margin: 1px 0;
|
||||
}
|
||||
}
|
||||
.body .tools {
|
||||
bottom: 4px;
|
||||
}
|
||||
&.commentdiv .tools {
|
||||
right: 9px;
|
||||
}
|
||||
&:hover .tools{
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
.enable_items();
|
||||
|
||||
|
||||
|
||||
//task list
|
||||
.item-list {
|
||||
margin:0;
|
||||
padding:0;
|
||||
list-style:none;
|
||||
|
||||
> li {
|
||||
padding:9px;
|
||||
background-color:#FFF;
|
||||
margin-top:-1px;
|
||||
position:relative;
|
||||
|
||||
&.selected {
|
||||
color:#8090A0;
|
||||
background-color:#F4F9FC;
|
||||
label , .lbl {
|
||||
text-decoration:line-through;
|
||||
color:#8090A0;
|
||||
}
|
||||
}
|
||||
> .checkbox {
|
||||
display:inline-block;
|
||||
}
|
||||
> label.inline {
|
||||
display:inline-block;
|
||||
}
|
||||
label {
|
||||
font-size: @base-font-size;
|
||||
}
|
||||
.percentage {
|
||||
font-size: @base-font-size - 2;
|
||||
font-weight: bold;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
&.ui-sortable-helper {
|
||||
cursor: move;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
li[class*="item-"] {
|
||||
border:1px solid #DDD;
|
||||
border-left-width:3px;
|
||||
}
|
||||
|
||||
.item-list-color(@color) {
|
||||
@item-class:~`"item-@{color}"`;
|
||||
@item-color:~`"item-list-@{color}-border"`;
|
||||
@item-cl:@@item-color;
|
||||
|
||||
li.@{item-class} {
|
||||
border-left-color:@item-cl;
|
||||
}
|
||||
}
|
||||
.item-list-color(~'orange');
|
||||
.item-list-color(~'orange2');
|
||||
.item-list-color(~'red');
|
||||
.item-list-color(~'red2');
|
||||
.item-list-color(~'green');
|
||||
.item-list-color(~'green2');
|
||||
.item-list-color(~'blue');
|
||||
.item-list-color(~'blue2');
|
||||
.item-list-color(~'blue3');
|
||||
.item-list-color(~'pink');
|
||||
.item-list-color(~'purple');
|
||||
.item-list-color(~'black');
|
||||
.item-list-color(~'grey');
|
||||
.item-list-color(~'brown');
|
||||
.item-list-color(~'default');
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//when dragging
|
||||
.ui-sortable-placeholder , .ui-sortable-helper {
|
||||
& , & > a {
|
||||
cursor:move !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@media only screen and (max-width: @screen-xs) {
|
||||
.itemdiv.memberdiv {
|
||||
float: none;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user