/** * UI Pattern: Vertical navigation. * Version: 1.0.0 */ .lst-vnav { list-style: none; padding: 0; position: relative; } .lst-vnav-item { padding: 0; margin: 0; } .lst-vnav-sep { border-bottom: 1px solid #E8E8E8; padding: 0; margin: 0; padding-bottom: 5px; margin-bottom: 5px; } .lst-vnav-item h3 { width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 5px 5px; margin: 0; height: 22px; line-height: 22px; font-size: 15px; color: #0074A2; cursor: pointer; position: relative; z-index: 2; font-weight: normal; border: 1px solid transparent; } .lst-vnav-item h3:hover { color: #2EA2CC; } .lst-vnav-item.active h3 { color: #333; background-color: #FDFDFD; border: 1px solid #DEDEDE; border-right-color: #FDFDFD; } .lst-vnav-item > .data { display: none; margin: 0; border: 1px solid #DEDEDE; padding: 10px; top: 0; right: 0; left: 191px; position: absolute; background-color: #FDFDFD; } .lst-vnav-item.active > .data { display: block; z-index: 1; } .lst-vnav-item .form-table tbody > tr:first-child > th, .lst-vnav-item .form-table tbody > tr:first-child > td { padding-top: 0; } .lst-vnav-item .form-table tbody > tr:last-child > th, .lst-vnav-item .form-table tbody > tr:last-child > td { padding-bottom: 0; } .lst-vnav-item .widefat thead > tr > th, .lst-vnav-item .widefat thead > tr > td, .lst-vnav-item .widefat tfoot > tr > th, .lst-vnav-item .widefat tfoot > tr > td { padding: 8px 10px; } /* Condense the tabs/setting-headers on small screens */ @media screen and (max-width: 1024px) { .lst-vnav-item h3 { width: 150px; } .lst-vnav-item > .data { left: 161px; padding: 5px; } .lst-vnav-item .form-table th { width: 170px; } } /* Change vertical nav to accordeon style on mobile screens */ @media screen and (max-width: 782px) { .lst-vnav { margin-bottom: 40px; } .lst-vnav-item h3 { width: auto; background-color: #F8F8F8; display: none; font-weight: bold; } .lst-vnav-item.active h3 { display: block; background-color: #F1F1F1; border-bottom-color: transparent; border-right-color: #DEDEDE; } .lst-vnav.open .lst-vnav-item h3 { display: block; border-top-style: none; border-bottom-style: none; border-left-color: #999; border-right-color: #999; } .lst-vnav.open .lst-vnav-item:first-child h3 { border-top: 1px solid #999; } .lst-vnav.open .lst-vnav-item:last-child h3 { border-bottom: 1px solid #999; } .lst-vnav-item > .data { left: 0; top: 30px; border-top-style: none; min-height: 0 !important; } .lst-vnav-item .form-table th { width: auto; } .lst-vnav-item .form-table td { padding-left: 16px; } } /* */