summaryrefslogtreecommitdiffstats
path: root/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/components/sidebar/sidebar.component.scss
diff options
context:
space:
mode:
Diffstat (limited to 'ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/components/sidebar/sidebar.component.scss')
-rw-r--r--ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/components/sidebar/sidebar.component.scss409
1 files changed, 210 insertions, 199 deletions
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/components/sidebar/sidebar.component.scss b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/components/sidebar/sidebar.component.scss
index 3917b896..02c969cc 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/components/sidebar/sidebar.component.scss
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/components/sidebar/sidebar.component.scss
@@ -35,203 +35,214 @@
*
*
*/
-$topnav-background-color: #f2f2f2;
+ $topnav-background-color: #f2f2f2;
-.siderbar-height-noHeader{
- top: 0px;
-}
-
-.siderbar-height{
- top: 56px;
-}
-
-.sidebar {
- border-radius: 0;
- position: fixed;
- z-index: 1000;
- left: 235px;
- width: 235px;
- margin-left: -235px;
- 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;
- .fa {
- margin-right: 10px;
- color: #000;
- }
- }
- a:hover {
- background: darken($topnav-background-color, 5%);
- color: #fff;
- }
- a.router-link-active {
- background: darken($topnav-background-color, 5%);
- color: #fff;
- }
- .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 {
- position: fixed;
- width: 236px;
- cursor: pointer;
- padding: 12px;
- bottom: 0;
- color: #000;;
- background: #f2f2f2;
- i {
- font-size: 23px;
- }
- &:hover {
- background: darken($topnav-background-color, 5%);
- color: #fff;
- }
- 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;
- }
-}
+ .siderbar-height-noHeader{
+ top: 0px;
+ }
+
+ .siderbar-height{
+ top: 56px;
+ }
+
+ .sidebar-list {
+ border-radius: 0;
+ position: fixed;
+ z-index: 1000;
+ left: 235px;
+ width: 235px;
+ //height: 100%;
+ height: 76%;
+ margin-left: -235px;
+ //margin-bottom: 48px;
+ margin-bottom: 0px;
+ border: none;
+ border-radius: 0;
+ overflow-y: auto;
+ background-color: $topnav-background-color;
+ top: 7.2em;
+ //top: 0em;
+ overflow-x: hidden;
+ //padding-bottom: 40px;
+ padding-bottom: 5em;
+ 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;
+ .fa {
+ margin-right: 10px;
+ color: #000;
+ }
+ }
+ a:hover {
+ background: darken($topnav-background-color, 5%);
+ color: #fff;
+ }
+ a.router-link-active {
+ background: darken($topnav-background-color, 5%);
+ color: #fff;
+ }
+ .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);
+ }
+ .sidebar{
+ position: relative;
+ }
+ .toggle-button {
+ position: fixed;
+ width: 236px;
+ cursor: pointer;
+ padding: 12px;
+ // bottom: 5.5em;
+ top: 3.5em;
+ left: 0;
+ z-index: 1001;
+ color: #000;;
+ background: #f2f2f2;
+ i {
+ font-size: 23px;
+ }
+ &:hover {
+ background: darken($topnav-background-color, 5%);
+ color: #fff;
+ }
+ border-bottom: 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;
+ }
+ }
+ \ No newline at end of file