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: 14px;
  11     padding: 0 0.5rem;
  12 }
  13
  14 #staff-navbar .navbar-nav {
  15     padding: 4px 0;
  16     margin: 0 1px;
  17 }
  18
  19 #staff-navbar .dropdown-toggle,
  20 #staff-navbar .nav-link-home {
  21     color: #fff;
  22 }
  23
  24 #staff-navbar button.dropdown-toggle {
  25     background: none;
  26     border: none;
  27     border-bottom: 2px solid transparent;
  28 }
  29
  30 /* align top of dropdown w/ bottom of nav */
  31 #staff-navbar .dropdown-menu {
  32     background-color: #fff;
  33     border-top: 0;
  34     border-top-left-radius: 0;
  35     border-top-right-radius: 0;
  36     color: #333;
  37     margin-top: 4px;
  38 }
  39
  40 #staff-navbar .material-icons {
  41     padding-right: 3px;
  42 }
  43
  44 #staff-navbar .dropdown-item {
  45     color: #333;
  46     font-size: 14px;
  47     font-weight: 400;
  48     margin: 0;
  49     padding: 1px .5rem;
  50 }
  51
  52 #staff-navbar .dropdown-item:hover,
  53 #staff-navbar .dropdown-item:focus {
  54     background-color: #f5f5f5;
  55     color: #333;
  56 }
  57
  58 #staff-navbar .dropdown-divider {
  59     border-top: 1px solid #e5e5e5;
  60 }
  61
  62 #staff-navbar .dropdown-item .material-icons {
  63     font-size: 18px;
  64 }
  65
  66 #staff-navbar .dropdown-menu .nav-link {
  67     padding-top: 1px;
  68     padding-bottom: 1px;
  69 }
  70
  71 #staff-navbar .nav-link-home {
  72     margin-left: .5rem;
  73     padding: .5rem;
  74 }
  75
  76 #staff-navbar .nav-link:hover,
  77 #staff-navbar .nav-link:focus,
  78 #staff-navbar>.open .nav-link,
  79 #staff-navbar>.open>a,
  80 #staff-navbar>.open>a:focus,
  81 #staff-navbar>.open>a:hover {
  82     background-color: rgba(223, 240, 216, 0.1);
  83     border-bottom: 2px solid rgba(223, 240, 216, 0.4);
  84     border-radius: .3em;
  85     cursor: pointer;
  86 }
  87
  88 /* restore outline focus removed by Bootstrap */
  89 .dropdown-toggle:focus,
  90 .dropdown-item:focus {
  91     /* Firefox */
  92     outline: 2px auto highlight;
  93     /* Safari/Chromium */
  94     outline: 2px auto -webkit-focus-ring-color;
  95 }
  96
  97 #staff-navbar>.open .nav-link {
  98     border-bottom: 0;
  99     border-top: 2px solid rgba(223, 240, 216, 0.4);
 100 }
 101
 102 #staff-navbar .navbar-nav>.dropdown>a .caret {
 103     border-top-color: #fff;
 104     border-bottom-color: #fff;
 105 }
 106
 107 #staff-navbar .navbar-nav>.dropdown>a:hover .caret {
 108     border-top-color: #ddd;
 109     border-bottom-color: #ddd;
 110 }
 111
 112 /* Align material-icons with sibling text; otherwise they float up */
 113 #staff-navbar .with-material-icon,
 114 #staff-navbar .dropdown-item {
 115     display: inline-flex;
 116     vertical-align: middle;
 117     align-items: center;
 118 }
 119
 120 /* Hide the username@workstation if the screen is too narrow.
 121 Based on the hidden-sm class selector in Bootstrap. */
 122 @media (max-width: 991px) {
 123     .navbar-user {
 124         display: none !important
 125     }
 126 }