Open-ILS/src/eg2/src/app/staff/nav.component.css

   1 /* remove dropdown caret for icon-based entries */
   2 #staff-navbar .no-caret::after {
   3     display: none;
   4 }
   5
   6 #staff-navbar {
   7     background: -webkit-linear-gradient(#00593d, #007a54);
   8     background-color: #007a54;
   9     color: #fff;
  10     font-size: 0.88rem;
  11     padding: 0 0.5rem;
  12 }
  13
  14 #staff-navbar .navbar-nav,
  15 #staff-navbar .navbar-admin .dropdown-item {
  16     padding: 4px 0;
  17     margin: 0 1px;
  18 }
  19
  20 #staff-navbar .dropdown-toggle,
  21 #staff-navbar .nav-link-home {
  22     color: #fff;
  23 }
  24
  25 #staff-navbar button.dropdown-toggle {
  26     background: none;
  27     border: none;
  28     border-bottom: 2px solid transparent;
  29 }
  30
  31 /* align top of dropdown w/ bottom of nav */
  32 #staff-navbar .dropdown-menu {
  33     background-color: #fff;
  34     border-top: 0;
  35     border-top-left-radius: 0;
  36     border-top-right-radius: 0;
  37     color: #333;
  38     margin-top: 4px;
  39 }
  40
  41 #staff-navbar .navbar-collapse.collapse.show .dropdown-menu {
  42     background-color: #007a54;
  43     color: #fff;
  44 }
  45
  46 #staff-navbar .dropdown-item .material-icons {
  47     padding-right: 0.5rem;
  48 }
  49
  50 #staff-navbar .dropdown-item {
  51     color: #333;
  52     font-size: 0.88rem;
  53     font-weight: 400;
  54     margin: 0;
  55     padding: 1px .5rem;
  56 }
  57
  58 #staff-navbar .navbar-collapse.collapse.show .dropdown-item {
  59     color: #fff;
  60 }
  61
  62 #staff-navbar .dropdown-item:hover,
  63 #staff-navbar .dropdown-item:focus {
  64     background-color: #f5f5f5;
  65     color: #333;
  66 }
  67
  68 #staff-navbar .navbar-collapse.collapse.show .dropdown-item:hover,
  69 #staff-navbar .navbar-collapse.collapse.show .dropdown-item:focus {
  70     background-color: #007a54;
  71     color: #ffd;
  72 }
  73
  74 #staff-navbar .dropdown-divider {
  75     border-top: 1px solid #e5e5e5;
  76 }
  77
  78 #staff-navbar .navbar-collapse.collapse.show .dropdown-divider {
  79     border-top: 1px solid #00593D;
  80 }
  81
  82 #staff-navbar .dropdown-item .material-icons {
  83     font-size: 1.125rem;
  84 }
  85
  86 #staff-navbar .dropdown-menu .nav-link {
  87     padding-top: 1px;
  88     padding-bottom: 1px;
  89 }
  90
  91 #staff-navbar .nav-link-home {
  92     margin-right: 0;
  93     padding: .5rem;
  94 }
  95
  96 #staff-navbar .nav-link:hover,
  97 #staff-navbar .nav-link:focus,
  98 #staff-navbar>.open .nav-link,
  99 #staff-navbar>.open>a,
 100 #staff-navbar>.open>a:focus,
 101 #staff-navbar>.open>a:hover {
 102     background-color: rgba(223, 240, 216, 0.1);
 103     border-bottom: 2px solid rgba(223, 240, 216, 0.4);
 104     border-radius: .3em;
 105     cursor: pointer;
 106 }
 107
 108 /* Mobile view: align admin menu items with main nav items */
 109 #staff-navbar>.open .navbar-admin .dropdown-item {
 110     padding: 0.5rem 0;
 111 }
 112
 113 #staff-navbar>.open .navbar-admin .dropdown-item .material-icons {
 114     display: none;
 115 }
 116
 117 /* restore outline focus removed by Bootstrap */
 118 /* blend Evergreen green with #ffc for highlight */
 119 #staff-navbar .nav-link.dropdown-toggle:focus,
 120 #staff-navbar .nav-link.dropdown-item:focus,
 121 #staff-navbar .nav-link-home:focus {
 122     outline: 2px solid rgba(255, 255, 204, 0.75);
 123 }
 124
 125 #staff-navbar .dropdown-item.active,
 126 #staff-navbar .dropdown-item:active {
 127     background-color: rgba(var(--bs-green-rgb), 0.15);
 128 }
 129
 130 #staff-navbar>.open .nav-link {
 131     border-bottom: 0;
 132     border-top: 2px solid rgba(223, 240, 216, 0.4);
 133 }
 134
 135 #staff-navbar .navbar-nav>.dropdown>a .caret {
 136     border-top-color: #fff;
 137     border-bottom-color: #fff;
 138 }
 139
 140 #staff-navbar .navbar-nav>.dropdown>a:hover .caret {
 141     border-top-color: #ddd;
 142     border-bottom-color: #ddd;
 143 }
 144
 145 /* Align material-icons with sibling text; otherwise they float up */
 146 #staff-navbar .with-material-icon,
 147 #staff-navbar .dropdown-item {
 148     display: inline-flex;
 149     vertical-align: middle;
 150     align-items: center;
 151 }
 152
 153 /* Hide the username@workstation if the screen is too narrow.
 154 Based on the hidden-sm class selector in Bootstrap. */
 155 @media (max-width: 991px) {
 156     .navbar-user {
 157         display: none !important
 158     }
 159 }