Sup_File/scss/pro/_scrollspy.scss
2018-05-03 16:15:57 +02:00

116 lines
2.1 KiB
SCSS

// Scrollspy
.nav-pills {
&.default-pills {
.nav-item {
a {
text-align:left;
color: #666;
border-radius:0;
&:hover {
background-color: transparent;
color: map-get($mdb-color, "base");
font-weight: 500;
border-left: 1px solid map-get($mdb-color, "base");
}
&.active {
background-color: transparent;
color: map-get($mdb-color, "base");
border-left: 2px solid map-get($mdb-color, "base");
font-weight: 500;
box-shadow:none;
&:hover,
&:active,
&:focus {
background-color: transparent;
color: map-get($mdb-color, "base");
font-weight: 500;
}
}
}
}
}
}
.nav-pills .nav-item+.nav-item {
margin-left: 0;
}
@media only screen and (max-width: 991px) {
.sticky,
.sticky-placeholder {
display: none;
}
}
#scrollspy {
width: 100%;
}
@media only screen and (max-width: $medium-screen) {
.col-md-4 .sticky, .col-lg-4 .sticky, .col-xl-4 .sticky {
width: 200px;
}
}
@media only screen and (min-width: $medium-screen) {
.col-md-4 .sticky .col-lg-4 .sticky, .col-xl-4 .sticky {
width: 400px;
}
}
@media only screen and (min-width: $large-screen) {
.col-md-4 .sticky {
width: 300px;
}
}
@media only screen and (min-width: $sidenav-breakpoint) {
.col-md-4 .sticky {
width: 350px;
}
}
// Dotted scrollspy
.dotted-scrollspy {
display:block;
position: fixed;
top:50%;
right:0;
transform: translateY(-50%);
background: rgba(0,0,0,.55);
border-radius:2px 0 0 2px;
li {
display:block;
padding:0 16px;
&:first-child {
padding-top:10px;
}
&:last-child {
padding-bottom: 10px;
}
a {
padding:0.5rem;
span {
display:block;
background-color:rgba(255,255,255,.54);
width:8px;
height:8px;
border-radius:50%;
}
&.active {
span {
background:#fff;
}
}
}
}
}
.scrollspy-example {
overflow-y: scroll;
position: relative;
height: 200px;
padding: 1rem;
}