Edit file File name : sidebar.scss Content :/**** SIDEBAR ****/ @import 'variables'; .sidebar { display: block; position: fixed; top: $navbar-height; bottom: 0; left: 0; background-color: $sidebar-bg; overflow-x: hidden; overflow-y: auto; z-index: 1000; .actionMenuSidebar { margin-bottom: 24px; } .actionMenuSidebar_top { display: none; } .actionMenuSidebar .recent_h3 { display: none; } .actionMenuSidebar ul { list-style-type: none; } .actionMenuSidebar li a .side-bar-Create, .actionMenuSidebar li a .side-bar-Add { background-image: url("../../../../themes/SuiteP/images/sidebar/Add.png"); background-image: url("../../../../themes/SuiteP/images/sidebar/Add.svg"); } .actionMenuSidebar li a .side-bar-Create_Contact_Vcard, .actionMenuSidebar li a .side-bar-Create_Lead_Vcard { background-image: url("../../../../themes/SuiteP/images/sidebar/Create_Contact_Vcard.png"); background-image: url("../../../../themes/SuiteP/images/sidebar/Create_Contact_Vcard.svg"); } .actionMenuSidebar li a .side-bar-Create_Group_User { background-image: url("../../../../themes/SuiteP/images/sidebar/Create_Group_User.png"); background-image: url("../../../../themes/SuiteP/images/sidebar/Create_Group_User.svg"); } .actionMenuSidebar li a .side-bar-Create_Person_Form { background-image: url("../../../../themes/SuiteP/images/sidebar/Create_Person_Form.png"); background-image: url("../../../../themes/SuiteP/images/sidebar/Create_Person_Form.svg"); } .actionMenuSidebar li a .side-bar-Create_Security_Group { background-image: url("../../../../themes/SuiteP/images/sidebar/Create_Security_Group.png"); background-image: url("../../../../themes/SuiteP/images/sidebar/Create_Security_Group.svg"); } .actionMenuSidebar li a .side-bar-Import { background-image: url("../../../../themes/SuiteP/images/sidebar/Import.png"); background-image: url("../../../../themes/SuiteP/images/sidebar/Import.svg"); } .actionMenuSidebar li a .side-bar-Import_Line_Item { background-image: url("../../../../themes/SuiteP/images/sidebar/Import_Line_Item.png"); background-image: url("../../../../themes/SuiteP/images/sidebar/Import_Line_Item.svg"); } .actionMenuSidebar li a .side-bar-List_Maps { background-image: url("../../../../themes/SuiteP/images/sidebar/List_Maps.png"); background-image: url("../../../../themes/SuiteP/images/sidebar/List_Maps.svg"); } .actionMenuSidebar li a .side-bar-Quick_Radius_Map { background-image: url("../../../../themes/SuiteP/images/sidebar/Quick_Radius_Map.png"); background-image: url("../../../../themes/SuiteP/images/sidebar/Quick_Radius_Map.svg"); } .actionMenuSidebar li a .side-bar-Resource_Chart { background-image: url("../../../../themes/SuiteP/images/sidebar/Resource_Chart.png"); background-image: url("../../../../themes/SuiteP/images/sidebar/Resource_Chart.svg"); } .actionMenuSidebar li a .side-bar-Role_Management { background-image: url("../../../../themes/SuiteP/images/sidebar/Role_Management.png"); background-image: url("../../../../themes/SuiteP/images/sidebar/Role_Management.svg"); } .actionMenuSidebar li a .side-bar-Schedule_Call { background-image: url("../../../../themes/SuiteP/images/sidebar/Schedule_Call.png"); background-image: url("../../../../themes/SuiteP/images/sidebar/Schedule_Call.svg"); } .actionMenuSidebar li a .side-bar-Schedule_Meeting { background-image: url("../../../../themes/SuiteP/images/sidebar/Schedule_Meeting.png"); background-image: url("../../../../themes/SuiteP/images/sidebar/Schedule_Meeting.svg"); } .actionMenuSidebar li a .side-bar-Security_Groups { background-image: url("../../../../themes/SuiteP/images/sidebar/Security_Groups.png"); background-image: url("../../../../themes/SuiteP/images/sidebar/Security_Groups.svg"); } .actionMenuSidebar li a .side-bar-Security_Suite_Settings { background-image: url("../../../../themes/SuiteP/images/sidebar/Security_Suite_Settings.png"); background-image: url("../../../../themes/SuiteP/images/sidebar/Security_Suite_Settings.svg"); } .actionMenuSidebar li a .side-bar-Setup_Email { background-image: url("../../../../themes/SuiteP/images/sidebar/Setup_Email.png"); background-image: url("../../../../themes/SuiteP/images/sidebar/Setup_Email.svg"); } .actionMenuSidebar li a .side-bar-Today { background-image: url("../../../../themes/SuiteP/images/sidebar/Today.png"); background-image: url("../../../../themes/SuiteP/images/sidebar/Today.svg"); } .actionMenuSidebar li a .side-bar-View_Project_Tasks { background-image: url("../../../../themes/SuiteP/images/sidebar/View_Project_Tasks.png"); background-image: url("../../../../themes/SuiteP/images/sidebar/View_Project_Tasks.svg"); } .actionMenuSidebar li a .side-bar-View_Create_Email_Templates { background-image: url("../../../../themes/SuiteP/images/sidebar/View_Create_Email_Templates.png"); background-image: url("../../../../themes/SuiteP/images/sidebar/View_Create_Email_Templates.svg"); } .actionMenuSidebar li a.side-bar-View, .actionMenuSidebar li a .side-bar-List { background-image: url("../../../../themes/SuiteP/images/sidebar/View.png"); background-image: url("../../../../themes/SuiteP/images/sidebar/View.svg"); } .actionMenuSidebar li a .side-bar-View_Diagnostics { background-image: url("../../../../themes/SuiteP/images/sidebar/View_Diagnostics.png"); background-image: url("../../../../themes/SuiteP/images/sidebar/View_Diagnostics.svg"); } .actionMenuSidebar li a .side-bar-View_Email_Templates { background-image: url("../../../../themes/SuiteP/images/sidebar/View_Email_Templates.png"); background-image: url("../../../../themes/SuiteP/images/sidebar/View_Email_Templates.svg"); } .actionMenuSidebar li a .side-bar-View_Process_Audit { background-image: url("../../../../themes/SuiteP/images/sidebar/View_Process_Audit.png"); background-image: url("../../../../themes/SuiteP/images/sidebar/View_Process_Audit.svg"); } .actionMenuSidebar li a .side-bar-View_Process_Tasks { background-image: url("../../../../themes/SuiteP/images/sidebar/View_Process_Tasks.png"); background-image: url("../../../../themes/SuiteP/images/sidebar/View_Process_Tasks.svg"); } .actionMenuSidebar li a { display: block; font-size: 13px; background-color: $sidebar-btn-bg; color: $sidebar-btn-color; margin: 0 0 1px 0; clear: both; } .actionMenuSidebar ul li a:hover { background-color: $sidebar-btn-bg-hover; color: $sidebar-btn-color; } .actionMenuSidebar li a div { display: block; text-wrap: normal; } .actionMenuSidebar li a .actionmenulink { padding: 16px 8px 16px 0; line-height: 24px; width: 100%; min-height: 48px; } .recentlyViewedSidebar { margin-bottom: 12px; float: left; width: 100%; } .recently_viewed_link_container_sidebar { font-size: 13px; } .side-bar-action-icon { background-position: 0 8px; background-repeat: no-repeat; background-size: 32px; margin-left: 12px; float: left; width: 40px; /* effects link text position */ height: 48px; vertical-align: middle; } .favoritelinks { width: 100%; } .recentlinks { width: 100%; } .favoritelinks img { margin-right: 5px; } .recentlinks img { margin-right: 5px; } } .button-toggle-collapsed { left: 0; } .button-toggle-collapsed { position: fixed; top: 100px; background: $sidebar-bg; background-image: none, url("../../../../themes/SuiteP/images/p_show_sidebar.svg"), url("../../../../themes/SuiteP/images/p_show_sidebar.png"); background-position: center center; background-repeat: no-repeat; border-top-right-radius: 3px; border-bottom-right-radius: 3px; width: 30px; height: 30px; z-index: 1000; } .button-toggle-expanded { position: fixed; top: 100px; background: $sidebar-bg; background-image: none, url("../../../../themes/SuiteP/images/p_hide_sidebar.svg"), url("../../../../themes/SuiteP/images/p_hide_sidebar.png"); background-position: center center; background-repeat: no-repeat; border-top-right-radius: 3px; border-bottom-right-radius: 3px; width: 30px; height: 30px; z-index: 1000; } /* Breakpoints */ @media (max-width: 1200px) { .sidebar { width: 0; visibility: collapse; } .button-toggle-expanded { width: 0; visibility: collapse; } .button-toggle-collapsed { width: 0; visibility: collapse; } .bootstrap-container.col-md-offset-2 { margin-left: 0; } .col-md-10 { width: 100%; } footer.expandedSidebar { width: 100%; } footer.collapsedSidebar { width: 100%; } #userlinks_head { display: none; } } .button-toggle-collapsed { left: 0; } .favoritesSidebar { float: left; width: 100%; } .favoritesSidebar .new { width: 0; height: 0; visibility: collapse; } .favoritesSidebar .new * { width: 0; height: 0; visibility: collapse; } .recentlyViewedSidebar li a { color: $side-bar-header-color; padding-top: 12px; padding-bottom: 12px; } .favoritesSidebar li a { color: $side-bar-header-color; padding-top: 12px; padding-bottom: 12px; } .recentlyViewedSidebar .recent-links-detail { display: inline-block; width: 85%; } .favoritesSidebar .favorite-links-detail { display: inline-block; width: 85%; } .recentlyViewedSidebar .recent-links-edit{ display: inline-block; width: 20px; height: 20px; } .favoritesSidebar .favorite-links-edit { display: inline-block; width: 20px; height: 20px; } .recentlyViewedSidebar li:hover { background-color: $side-bar-link-color-hover; } .favoritesSidebar li:hover { background-color: $side-bar-link-color-hover; } .recentlyViewedSidebar .recent_h3{ font-size: 16px; font-weight: bold; color: $side-bar-header-color; margin: 0 0 5px 0; } .favoritesSidebar .recent_h3 { font-size: 16px; font-weight: bold; color: $side-bar-header-color; margin: 0 0 5px 0; } footer * { box-sizing: content-box; } footer { box-sizing: content-box; bottom: 0; background-color: $footer-btn-bg; margin: 0 0 0 0; border: 1px solid transparent; border-radius: 4px; clear: both; line-height: 48px; width: 100%; } footer.expandedSidebar { float: right; } footer.collapsedSidebar { float: right; } .footer_left { float: left; width: 48%; } /*SIDEBAR BREAK POINTS*/ @media (min-width: 1200px) { .sidebar { width: 20%; } .bootstrap-container.col-md-offset-2 { margin-left: 20%; } .button-toggle-expanded { left: 20%; } .col-md-10 { width: 80%; } footer.expandedSidebar { width: 80%; } footer.collapsedSidebar { width: 100%; } .recentlyViewedSidebar .recent-links-detail { padding: 8px 1% 8px 15%; } .favoritesSidebar .favorite-links-detail { padding: 8px 1% 8px 15%; } .recentlyViewedSidebar .recent_h3 { padding: 0 1% 0 15%; } .favoritesSidebar .recent_h3 { padding: 0 1% 0 15%; } } @media (min-width: 1230px) { .sidebar { width: 18%; } .bootstrap-container.col-md-offset-2 { margin-left: 18%; } .button-toggle-expanded { left: 18%; } .col-md-10 { width: 82%; } footer.expandedSidebar { width: 82%; } } @media (min-width: 1300px) { .sidebar { width: 17%; } .bootstrap-container.col-md-offset-2 { margin-left: 17%; } .button-toggle-expanded { left: 17%; } .col-md-10 { width: 83%; } footer.expandedSidebar { width: 83%; } } @media (min-width: 1400px) { .sidebar { width: 15.8%; } .bootstrap-container.col-md-offset-2 { margin-left: 15.8%; } .button-toggle-expanded { left: 15.8%; } .col-md-10 { width: 84.2%; } footer.expandedSidebar { width: 84.2%; } } @media (min-width: 1500px) { .sidebar { width: 14.8%; } .bootstrap-container.col-md-offset-2 { margin-left: 14.8%; } .button-toggle-expanded { left: 14.8%; } .col-md-10 { width: 85.2%; } footer.expandedSidebar { width: 85.2%; } } @media (min-width: 1600px) { #search { visibility: collapse; } .sidebar { width: 13.8%; } .bootstrap-container.col-md-offset-2 { margin-left: 13.8%; } .button-toggle-expanded { left: 13.8%; } .col-md-10 { width: 86.2%; } footer.expandedSidebar { width: 86.2%; } } @media (min-width: 1800px) { .sidebar { width: 12.8%; } .bootstrap-container.col-md-offset-2 { margin-left: 12.8%; } .button-toggle-expanded { left: 12.8%; } .col-md-10 { width: 87.2%; } footer.expandedSidebar { width: 87.2%; } } @media (min-width: 1900px) { .sidebar { width: 11.8%; } .bootstrap-container.col-md-offset-2 { margin-left: 11.8%; } .button-toggle-expanded { left: 11.8%; } .col-md-10 { width: 88.2%; } footer.expandedSidebar { width: 88.2%; } } @media (min-width: 2100px) { .sidebar { width: 10.8%; } .bootstrap-container.col-md-offset-2 { margin-left: 10.8%; } .button-toggle-expanded { left: 10.8%; } .col-md-10 { width: 89.2%; } footer.expandedSidebar { width: 89.2%; } } @media (min-width: 2300px) { .sidebar { width: 10%; } .bootstrap-container.col-md-offset-2 { margin-left: 10%; } .button-toggle-expanded { left: 10%; } .col-md-10 { width: 90%; } footer.expandedSidebar { width: 90%; } } @media print { .navbar-inverse { display: none; } .sidebar { display: none; } } Save