// Include the variables. @import “../../../partials/utility/variables/*”;
/* ** ******** Side bar is fixed ******** ** */ .not-front .l-region--sidebar-first .block { margin: 0; padding: 0.5em; //background-color: #fafafa; //border: rgba(236,236,236,0.8) solid thin; position: fixed; top: 7.6em; width: 15%; max-width: 13em; overflow-y: auto; height: calc(100vh - 170px); h2 { display: none; } h3 { font-family: $font-regular; font-size: 1rem; font-weight: 700; cursor: pointer; color: #667785; // non-standard color, only used here a { color: inherit; } &.active, a:hover { color: $color-active; font-family: $font-toc-active; font-weight: normal; } } ul { line-height: 1.1em; white-space: normal; font-family: $font-regular; list-style: none; padding: 0; margin-bottom: 0; li { overflow: visible; line-height: 1.3em; padding: 0 0 0.9em 0; } li a { color: #667785; // non-standard color, only used here font-family: $font-regular; font-size: 1rem; } li a.active, li a:hover { color: $color-active; font-family: $font-toc-active; } } .more-link { font-style: italic; font-size: 0.8em; } }
/* *** special Sidebar overrides for PATTERN and COMPONENTS ONLY *** */ .node-type-pattern.not-front, .node-type-component.not-front {
.l-region--sidebar-first .block { top: 6.6em; // just a bit higher for Patterns ul { li { margin-left: 0.66em; a { color: #667785; // non-standard color, only used here font-family: $font-regular; font-size: 0.95em; &:hover, &:active, &.active { font-family: $font-toc-active; } } } } }
}
/* ====== Color Overides +++++ */ .node-type-style {
.l-region--sidebar-first .block { li a.active, li a:hover { color: $color-main-title-style !important; } }
}
.node-type-design, .node-type-news-item {
.l-region--sidebar-first .block { li a.active, li a:hover { color: $color-main-title-design !important; } }
}
.node-type-pattern, .node-type-component {
.l-region--sidebar-first .block { li a.active, li a:hover { color: $color-main-title-pattern !important; } }
}
// Desktops/laptops in a normal window size // @media only screen and (min-width: 860px) and (max-width: 1389px) { // DONT USE THIS QUERY - SIZE IS NOW FIXED Left here for ref
.l-region--sidebar-second { display: inline-block; padding: 0 0 1ex 1ex; position: fixed; right: 0px; background: rgba(255,255,255, 0.9); color: #333; border: #bbb solid thin; top: 140px; overflow-x: hidden; overflow-y: scroll; z-index: 150; } .l-region--sidebar-second h2{ -webkit-transition: all .7s; -mos-transition: all .7s; -ms-transition: all .7s; -o-transition: all .7s; transition: all .7s; } .vertical { display: inline-block; -webkit-transform: rotate(90deg); /* Safari/Chrome */ -moz-transform: rotate(90deg); /* Firefox */ -ms-transform: rotate(90deg); /* IE */ -o-transform: rotate(90deg); /* Opera */ transform: rotate(90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); /* Internet Explorer */ -webkit-transition: all .7s; -mos-transition: all .7s; -ms-transition: all .7s; -o-transition: all .7s; transition: all .7s; } .expand-index .block__content { margin-top: 0; } .collapse-index .block__content { margin-top: -1200px; } .expand-index h2 { border: none; margin: 0; display: inline-block; -webkit-transform: rotate(0deg); /* Safari/Chrome */ -moz-transform: rotate(0deg); /* Firefox */ -ms-transform: rotate(0deg); /* IE */ -o-transform: rotate(0deg); /* Opera */ transform: rotate(0deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0); /* Internet Explorer */ } .collapse-index h2 { border: #bbb solid thin; padding: .2em .2em 0 .2em; display: inline-block; display: inline-block; -webkit-transform: rotate(90deg); /* Safari/Chrome */ -moz-transform: rotate(90deg); /* Firefox */ -ms-transform: rotate(90deg); /* IE */ -o-transform: rotate(90deg); /* Opera */ transform: rotate(90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); /* Internet Explorer */ } .l-region--sidebar-second.expand-index { min-width: 205px; max-width: 250px; width: 250px; height: auto; min-height: 25px; max-height: calc(100% - 142px); border: #bbb solid thin; } .l-region--sidebar-second.collapse-index { min-width: 25px; max-width: 40px; width: 40px; height: 62px; border: none; } #block-quicktabs-nav-index .block__content { -webkit-transition: all .7s; -mos-transition: all .7s; -ms-transition: all .7s; -o-transition: all .7s; transition: all .7s; } #block-quicktabs-nav-index h2:hover { color: white; background-color: #FC6 } #XX.block-quicktabs-nav-index h2:hover~.block__content { width: auto; }
// }
// Desktops/laptops using extra-wide window orientation @media only screen and (min-width: 1390px) {
.l-region--sidebar-second { display: block; min-width: 205px; max-width: 250px; position: fixed; right: calc((100% - 1360px) /2); background: rgba(255,255,255, 0.9); color: #333; border: none; top: 140px; overflow-x: hidden; overflow-y: scroll; z-index: 150; } .l-page { max-width: $max-width; } .l-main { max-width: $max-width; }
}
/* Navigation Index panel */ block-quicktabs-nav-index-NOOP {
width: 250px; max-height: 75%; position: fixed; right: 0px; background: rgba(255,255,255, 0.9); color: #333; border: #bbb solid thin; top: 140px; overflow-x: hidden; overflow-y: scroll; z-index: 150; /*Some cool shadow and glow effect*/ box-shadow: 0 4px 10px 1px rgba(0, 0, 0, 0.6), 0 0 200px 1px rgba(255, 255, 255, 0.5);
} ul.quicktabs-tabs.quicktabs-style-sky li, ul.quicktabs-tabs.quicktabs-style-sky li.active, ul.quicktabs-tabs.quicktabs-style-sky li.active a {
margin-top: 0 !important; height: 2.65em !important; min-height: 2.65em !important; line-height: 2.95em !important; text-indent: .3em;
} .quicktabs_main.quicktabs-style-sky {
border: none;
}
block-quicktabs-nav-index h2 {
z-index: 151;
}
.front .l-region–sidebar-second {
visibility: hidden; display: none;
}
tocSearch {
background: #F6F9FB url(../images/search-icon.png) 3px 3px no-repeat; text-indent: 1.6em; max-width: 170px; width: 170px; margin: 0.6em 0 0.4em 0;; border: 1px solid #aaa; -moz-border-radius: 4px; -moz-outline-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; outline-width: 0;
} tocSearchSubmit {
display: none; cursor: pointer; vertical-align: text-bottom; border-top: #999 solid 1px; height: 13px; border: 1px solid #aaa; -moz-border-radius: 7px; -moz-outline-radius: 7px; -webkit-border-radius: 7px; border-radius: 7px;
} .highlight {
color: blue !important; text-decoration: none !important; text-weight: bold; background-color: $color-highlight; /* #ee4; */ margin-left: -0.3em; padding-left: 0.3em;
}