mirror of
https://gitee.com/dotnetchina/OpenAuth.Net.git
synced 2026-04-24 21:18:02 +08:00
采用ACE界面
This commit is contained in:
yubaolee
304
OpenAuth.Mvc/Content/ace/css/less/scroll.less
Normal file
304
OpenAuth.Mvc/Content/ace/css/less/scroll.less
Normal file
@@ -0,0 +1,304 @@
|
||||
@scroll-bar-width: 8px;
|
||||
@scroll-thin-width: 6px;
|
||||
|
||||
|
||||
|
||||
.ace-scroll {
|
||||
overflow: hidden;
|
||||
}
|
||||
.scroll-content {
|
||||
position: static;
|
||||
overflow: hidden;
|
||||
}
|
||||
.scroll-disabled.ace-scroll {
|
||||
&, & .scroll-content {
|
||||
overflow: visible;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.scroll-track {
|
||||
position: absolute;
|
||||
top: auto;
|
||||
bottom: auto;
|
||||
right: 0;
|
||||
|
||||
//width: @scroll-bar-width;
|
||||
height: auto;// will be determined at runtime
|
||||
background-color: #E7E7E7;
|
||||
|
||||
z-index: 99;//to appear above content
|
||||
|
||||
width: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
.scroll-bar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: inherit;
|
||||
background-color: #ACE;
|
||||
|
||||
background: saturate(darken(#CFDFEA , 5%), 5%);
|
||||
}
|
||||
|
||||
|
||||
.scroll-track.scroll-hz {
|
||||
top: auto;
|
||||
left: auto;
|
||||
right: auto;
|
||||
bottom: 0;
|
||||
|
||||
height: @scroll-bar-width;
|
||||
width: auto;// will be determined at runtime
|
||||
}
|
||||
.scroll-hz .scroll-bar {
|
||||
height: inherit;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.scroll-track.scroll-active {
|
||||
.transition(~"width 0.25s ease 0.75s, opacity 0.25s ease 0.75s");
|
||||
}
|
||||
|
||||
.ace-scroll:hover .scroll-active,
|
||||
.scroll-active.scroll-track:hover,
|
||||
.scroll-active.scroll-track.scroll-hover,
|
||||
.scroll-active.scroll-track.active,
|
||||
.scroll-active.scroll-track:active
|
||||
{
|
||||
width: @scroll-bar-width;
|
||||
opacity: 1;
|
||||
|
||||
.transition-duration(0.15s);
|
||||
.transition-delay(0s);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.scroll-track.active > .scroll-bar {
|
||||
transition-property: none !important;
|
||||
transition-duration: 0s !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//optional styling classes
|
||||
.scroll-track.scroll-margin {
|
||||
margin-left: -1px;
|
||||
}
|
||||
.scroll-track.scroll-left {
|
||||
right: auto;
|
||||
left: 0;
|
||||
&.scroll-margin {
|
||||
margin-left: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
//for horizontal
|
||||
.scroll-track.scroll-top {
|
||||
bottom: auto;
|
||||
top: 0;
|
||||
|
||||
&.scroll-margin {
|
||||
top: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-dark {
|
||||
.scroll-bar {
|
||||
background-color: transparent;
|
||||
background-color: rgba(0,0,0,0.25);
|
||||
filter: ~"progid:DXImageTransform.Microsoft.gradient( startColorstr='#40000000', endColorstr='#40000000',GradientType=0 )";
|
||||
}
|
||||
.scroll-track& {
|
||||
background-color: transparent;
|
||||
background-color: rgba(0,0,0,0.15);
|
||||
filter: ~"progid:DXImageTransform.Microsoft.gradient( startColorstr='#26000000', endColorstr='#26000000',GradientType=0 )";
|
||||
}
|
||||
}
|
||||
.scroll-light {
|
||||
.scroll-bar {
|
||||
background-color: transparent;
|
||||
background-color: rgba(0,0,0,0.14);
|
||||
filter: ~"progid:DXImageTransform.Microsoft.gradient( startColorstr='#24000000', endColorstr='#24000000',GradientType=0 )";
|
||||
}
|
||||
.scroll-track& {
|
||||
background-color: transparent;
|
||||
background-color: rgba(0,0,0,0.07);
|
||||
filter: ~"progid:DXImageTransform.Microsoft.gradient( startColorstr='#12000000', endColorstr='#12000000',GradientType=0 )";
|
||||
}
|
||||
}
|
||||
.scroll-white {
|
||||
.scroll-bar {
|
||||
background-color: transparent;
|
||||
background-color: rgba(255,255,255,0.33);
|
||||
filter: ~"progid:DXImageTransform.Microsoft.gradient( startColorstr='#55FFFFFF', endColorstr='#55FFFFFF',GradientType=0 )";
|
||||
}
|
||||
.scroll-track& {
|
||||
background-color: transparent;
|
||||
background-color: rgba(255,255,255,0.2);
|
||||
filter: ~"progid:DXImageTransform.Microsoft.gradient( startColorstr='#33FFFFFF', endColorstr='#33FFFFFF',GradientType=0 )";
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.no-track.scroll-track {
|
||||
background-color: transparent;
|
||||
filter: ~"progid:DXImageTransform.Microsoft.gradient( enabled=false )";
|
||||
}
|
||||
|
||||
|
||||
.scroll-visible {
|
||||
.scroll-track& {
|
||||
opacity: 1;
|
||||
width: @scroll-bar-width;
|
||||
}
|
||||
.scroll-hz& {
|
||||
height: @scroll-bar-width;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.scroll-thin.scroll-track {
|
||||
&:hover, &.scroll-hover, &:active, &.active, &.scroll-visible {
|
||||
width: @scroll-thin-width;
|
||||
}
|
||||
}
|
||||
.ace-scroll:hover .scroll-thin.scroll-track {
|
||||
width: @scroll-thin-width;
|
||||
}
|
||||
|
||||
//horizontal
|
||||
.scroll-thin.scroll-hz {
|
||||
&:hover, &.scroll-hover, &:active, &.active, &.scroll-visible {
|
||||
width: auto;
|
||||
height: @scroll-thin-width;
|
||||
}
|
||||
}
|
||||
.ace-scroll:hover .scroll-thin.scroll-hz {
|
||||
width: auto;
|
||||
height: @scroll-thin-width;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
//style like latest version of Chrome
|
||||
.scroll-chrome.scroll-active {
|
||||
.scroll-bar {
|
||||
background-color: transparent;
|
||||
width: 11px;
|
||||
|
||||
&:before {
|
||||
display: block;
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
bottom: 3px;
|
||||
left: 1px;
|
||||
right: 1px;
|
||||
|
||||
background-color: #D9D9D9;
|
||||
border:1px solid #BBB;
|
||||
border-radius: 1px;
|
||||
}
|
||||
}
|
||||
.scroll-track {
|
||||
width: 12px;
|
||||
background-color: #F2F2F2;
|
||||
border: 1px solid;
|
||||
border-width: 1px 0 1px 1px;
|
||||
border-color: #E6E6E6 transparent #E6E6E6 #DBDBDB;
|
||||
|
||||
&:hover {
|
||||
.scroll-bar:before {
|
||||
background-color: #C0C0C0;
|
||||
border-color: #A6A6A6;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
.scroll-bar:before {
|
||||
background-color: #A9A9A9;
|
||||
border-color: #8B8B8B;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.scroll-active.scroll-track.idle-hide {
|
||||
opacity: 0;
|
||||
filter: ~"alpha(opacity=0)";
|
||||
width: @scroll-bar-width;//to make it hoverable
|
||||
|
||||
&.not-idle {
|
||||
width: @scroll-bar-width;
|
||||
opacity: 1;
|
||||
filter: ~"alpha(opacity=100)";
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-active.scroll-thin.scroll-track.idle-hide {
|
||||
width: @scroll-thin-width;
|
||||
}
|
||||
.scroll-active.scroll-chrome .scroll-track.idle-hide {
|
||||
width: 12px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
//special nav-list scroller case
|
||||
.nav-wrap + .scroll-active .scroll-track {
|
||||
width: @scroll-bar-width;
|
||||
}
|
||||
|
||||
.nav-scroll.scroll-active .scroll-track
|
||||
{
|
||||
width: @scroll-bar-width;
|
||||
right: 0;
|
||||
}
|
||||
.nav-wrap:hover + .scroll-active .scroll-track ,
|
||||
.nav-scroll.scroll-active:hover .scroll-track
|
||||
{
|
||||
width: @scroll-bar-width;
|
||||
opacity: 1;
|
||||
|
||||
.transition-duration(0.15s);
|
||||
.transition-delay(0s);
|
||||
}
|
||||
.nav-scroll.scroll-active:hover .scroll-track {
|
||||
width: @scroll-bar-width;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.nav-scroll.ace-scroll {
|
||||
& , & .scroll-content {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
.nav-scroll.ace-scroll.scroll-disabled {
|
||||
& , & .scroll-content {
|
||||
overflow: visible;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.scroll-track.scroll-detached {
|
||||
position: absolute;
|
||||
z-index: @zindex-navbar-fixed - 1;
|
||||
bottom: auto;
|
||||
right: auto;
|
||||
}
|
||||
Reference in New Issue
Block a user