cesium-city3d/examples/css/sideBar.css

218 lines
4.4 KiB
CSS

.main-sidebar {
position: fixed;
z-index: 900;
height: 100%;
}
.sidebar {
height: 100% !important;
overflow: hidden;
overflow-y: auto;
}
.skin-blue .main-sidebar {
background-color: #3c8dbc;
}
.skin-blue .sidebar-menu > li.treeview:hover > a {
border-left: 3px solid rgba(0, 0, 0, 0.1);
}
.skin-blue .sidebar-menu > li.treeview.active > a {
border-left: 3px solid rgba(0, 0, 0, 0.1);
}
.skin-blue .sidebar .second-menu,
.skin-blue .sidebar .third-menu {
padding-left: 0;
}
.skin-blue .sidebar .third-menu a {
padding-left: 30px;
}
.skin-blue .sidebar a {
color: #000000;
}
/*侧边栏滚动设置 start*/
#sidebar-menu > li:hover .sidebar-title-bar {
position: static;
}
.sidebar-collapse #sidebar-menu > li:hover .sidebar-title-bar {
position: fixed;
}
#sidebar-menu > li:hover > ul {
position: static;
height: auto;
}
.sidebar-collapse #sidebar-menu > li:hover > ul {
position: fixed;
overflow-y: auto;
}
a.sidebar-toggle {
width: 100%;;
height: 36px;
line-height: 36px;
text-align: center;
background-color: #2e658a;
color: white !important;
display: block;
}
.sidebar-collapse a.sidebar-toggle div.fold {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
transition: transform .5s;
}
/*侧边栏滚动设置 end*/
.skin-blue .treeview-menu li > a {
border-left: 3px solid #3c8dbc;
}
.skin-blue .treeview-menu li > a:hover,
.skin-blue .treeview-menu li.active > a {
background-color: rgba(0, 0, 0, 0.1);
border-left-color: rgba(0, 0, 0, 0.3);
}
.skin-blue .treeview-menu > li > a {
color: white;
padding-left: 35px;
padding-right: 26px !important;
}
.skin-blue .sidebar-menu > li > .treeview-menu {
margin: 0;
background: #3c8dbc;
}
.sidebar-menu li.active > .treeview-menu {
background: #3c8dbc;
}
.sidebar-title-bar .fa-angle-left,
.sidebar-title-bar .pull-right-container > .fa-angle-lef {
width: auto;
height: auto;
padding: 0;
margin-right: 10px;
}
/*侧边栏收起后向右展开的边框宽度*/
.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span:not(.pull-right),
.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu {
border-radius: 0;
width: 220px;
}
/*侧边栏收起后向右展开时一级菜单箭头的位置*/
.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > .pull-right-container {
left: 220px !important;
}
.sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu {
padding-top: 0;
padding-bottom: 0;
border-radius: 0;
}
.skin-blue .sidebar-menu > li:hover > a,
.skin-blue .sidebar-menu > li.active > a {
color: #3c8dbc;
background: #3375A1;
}
.skin-blue .treeview-menu > li.active > a,
.skin-blue .treeview-menu > li > a:hover {
color: white;
}
.main-sidebar .iconName {
margin-right: 10px;
color: white
}
.menuTitle a.active {
color: #f8f8f8;
}
.sidebar-menu span {
color: white;
}
li.menuTitle a {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding-right: 20px !important;
}
.main-sidebar .secondMenuTitle {
padding-left: 10px;
color: white;
}
.main-sidebar .thirdMenuTitle {
font-size: 12px;
padding-left: 32px;
color: white;
}
.main-sidebar .pull-right {
color: white
}
@media screen and (max-width: 768px) {
a.sidebar-toggle {
position: absolute;
top: 50%;
width: 26px;
height: 36px;
left: 100%;
}
}
/*侧边栏滚动条*/
.sidebar {
-ms-scroll-chaining: chained;
-ms-overflow-style: none;
-ms-content-zooming: zoom;
-ms-scroll-rails: none;
-ms-content-zoom-limit-min: 100%;
-ms-content-zoom-limit-max: 500%;
-ms-scroll-snap-type: proximity;
-ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
}
.sidebar::-webkit-scrollbar {
width: 0;
background-color: rgba(0, 0, 0, 0);
}
/*侧边栏二级菜单滚动条*/
.scroll-list {
-ms-scroll-chaining: chained;
-ms-overflow-style: none;
-ms-content-zooming: zoom;
-ms-scroll-rails: none;
-ms-content-zoom-limit-min: 100%;
-ms-content-zoom-limit-max: 500%;
-ms-scroll-snap-type: proximity;
-ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
}
.scroll-list::-webkit-scrollbar {
width: 0;
background-color: rgba(0, 0, 0, 0);
}