diff options
Diffstat (limited to 'portal-FE-os/src/app/layout/components/sidebar/sidebar.component.scss')
| -rw-r--r-- | portal-FE-os/src/app/layout/components/sidebar/sidebar.component.scss | 228 |
1 files changed, 228 insertions, 0 deletions
diff --git a/portal-FE-os/src/app/layout/components/sidebar/sidebar.component.scss b/portal-FE-os/src/app/layout/components/sidebar/sidebar.component.scss new file mode 100644 index 00000000..fd114bd1 --- /dev/null +++ b/portal-FE-os/src/app/layout/components/sidebar/sidebar.component.scss @@ -0,0 +1,228 @@ +/* + * ============LICENSE_START========================================== + * ONAP Portal + * =================================================================== + * Copyright � 2019 AT&T Intellectual Property. All rights reserved. + * =================================================================== + * + * Unless otherwise specified, all software contained herein is licensed + * under the Apache License, Version 2.0 (the "License"); + * you may not use this software except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * Unless otherwise specified, all documentation contained herein is licensed + * under the Creative Commons License, Attribution 4.0 Intl. (the "License"); + * you may not use this documentation except in compliance with the License. + * You may obtain a copy of the License at + * + * https://creativecommons.org/licenses/by/4.0/ + * + * Unless required by applicable law or agreed to in writing, documentation + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * ============LICENSE_END============================================ + * + * + */ +$topnav-background-color: #fff; +.sidebar { + border-radius: 0; + position: relative; + z-index: 1000; + //top: 56px; + left: 270px; + width: 270px; + margin-left: -270px; + margin-bottom: 48px; + border: none; + border-radius: 0; + overflow-y: auto; + background-color: $topnav-background-color; + bottom: 0; + overflow-x: hidden; + padding-bottom: 40px; + white-space: nowrap; + -webkit-transition: all 0.2s ease-in-out; + -moz-transition: all 0.2s ease-in-out; + -ms-transition: all 0.2s ease-in-out; + -o-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; + .list-group { + a.list-group-item { + background: $topnav-background-color; + border: 0; + border-top: 1px solid #999; + border-radius: 0; + color: #0568ae; + text-decoration: none; + .icon { + margin-right: 10px; + color: #000; + } + } + a:hover { + background: darken($topnav-background-color, 2%); + color: #000; + } + a.router-link-active { + background: darken($topnav-background-color, 5%); + color: #000; + } + .header-fields { + padding-top: 10px; + + > .list-group-item:first-child { + border-top: 1px solid rgba(255, 255, 255, 0.2); + } + } + } + .sidebar-dropdown { + *:focus { + border-radius: none; + border: none; + } + .panel-title { + font-size: 1rem; + height: 50px; + margin-bottom: 0; + a { + color: #999; + text-decoration: none; + font-weight: 400; + background: $topnav-background-color; + span { + position: relative; + display: block; + padding: 0.75rem 1.5rem; + padding-top: 1rem; + } + } + a:hover, + a:focus { + color: #fff; + outline: none; + outline-offset: -2px; + } + } + .panel-title:hover { + background: darken($topnav-background-color, 5%); + } + .panel-collapse { + border-radious: 0; + border: none; + .panel-body { + .list-group-item { + border-radius: 0; + background-color: $topnav-background-color; + border: 0 solid transparent; + a { + color: #999; + } + a:hover { + color: #fff; + } + } + .list-group-item:hover { + background: darken($topnav-background-color, 5%); + } + } + } + } +} + +.nested-menu { + .list-group-item { + cursor: pointer; + } + .nested { + list-style-type: none; + } + ul.submenu { + display: none; + height: 0; + } + & .expand { + ul.submenu { + display: block; + list-style-type: none; + height: auto; + li { + a { + color: #0568ae; + padding: 10px; + display: block; + } + } + } + } +} +@media screen and (max-width: 992px) { + .sidebar { + top: 54px; + left: 0px; + } +} +@media print { + .sidebar { + display: none !important; + } +} +@media (min-width: 992px) { + .header-fields { + display: none; + } +} + +::-webkit-scrollbar { + width: 8px; +} + +::-webkit-scrollbar-track { + -webkit-box-shadow: inset 0 0 0px rgba(255, 255, 255, 1); + border-radius: 3px; +} + +::-webkit-scrollbar-thumb { + border-radius: 3px; + -webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 1); +} + +.toggle-button { + width: 270px; + cursor: pointer; + padding: 12px; + bottom: 0; + color: #0568ae; + background: #fff; + i { + font-size: 23px; + } + &:hover { + background: darken($topnav-background-color, 2%); + color: #000; + } + border-top: 1px solid #999; + -webkit-transition: all 0.2s ease-in-out; + -moz-transition: all 0.2s ease-in-out; + -ms-transition: all 0.2s ease-in-out; + -o-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; +} + +.collapsed { + width: 60px; + span { + display: none; + } +} |