nfg_ui 0.11.18 → 0.12.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (61) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/stylesheets/nfg_ui/network_for_good/admin/color_variations/nfg_theme/_badge.scss +2 -2
  3. data/app/assets/stylesheets/nfg_ui/network_for_good/admin/color_variations/nfg_theme/_buttons.scss +24 -1
  4. data/app/assets/stylesheets/nfg_ui/network_for_good/admin/color_variations/nfg_theme/_custom-forms.scss +8 -2
  5. data/app/assets/stylesheets/nfg_ui/network_for_good/admin/color_variations/nfg_theme/_forms.scss +4 -1
  6. data/app/assets/stylesheets/nfg_ui/network_for_good/admin/color_variations/nfg_theme/_nav.scss +6 -2
  7. data/app/assets/stylesheets/nfg_ui/network_for_good/admin/color_variations/nfg_theme/custom/_nav_step.scss +2 -2
  8. data/app/assets/stylesheets/nfg_ui/network_for_good/admin/color_variations/plugins/_select2.scss +8 -30
  9. data/app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/{_backgrounds.scss → _background.scss} +6 -0
  10. data/app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/_grid.scss +1 -1
  11. data/app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/_nav.scss +21 -16
  12. data/app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/_navbar.scss +69 -109
  13. data/app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_activity_feed.scss +2 -2
  14. data/app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_builder_layout.scss +10 -9
  15. data/app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_gallery.scss +1 -1
  16. data/app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_status_indicator.scss +2 -2
  17. data/app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_tile.scss +1 -0
  18. data/app/assets/stylesheets/nfg_ui/network_for_good/core/_variables.scss +128 -109
  19. data/app/assets/stylesheets/nfg_ui/network_for_good/core/entity_branding/nfg_theme/_badge.scss +2 -3
  20. data/app/assets/stylesheets/nfg_ui/network_for_good/core/entity_branding/nfg_theme/_buttons.scss +10 -5
  21. data/app/assets/stylesheets/nfg_ui/network_for_good/core/entity_branding/nfg_theme/_custom-forms.scss +9 -5
  22. data/app/assets/stylesheets/nfg_ui/network_for_good/core/entity_branding/nfg_theme/_forms.scss +6 -2
  23. data/app/assets/stylesheets/nfg_ui/network_for_good/core/entity_branding/nfg_theme/_nav.scss +6 -3
  24. data/app/assets/stylesheets/nfg_ui/network_for_good/core/entity_branding/nfg_theme/custom/_nav_step.scss +1 -1
  25. data/app/assets/stylesheets/nfg_ui/network_for_good/core/entity_branding/plugins/_select2.scss +8 -11
  26. data/app/assets/stylesheets/nfg_ui/network_for_good/core/legacy_browser_support/_variables.scss +1 -1
  27. data/app/assets/stylesheets/nfg_ui/network_for_good/core/legacy_browser_support/nfg_theme/_modal.scss +1 -1
  28. data/app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_alert.scss +6 -0
  29. data/app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_badge.scss +15 -3
  30. data/app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_button-group.scss +2 -1
  31. data/app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_buttons.scss +38 -4
  32. data/app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_card.scss +1 -1
  33. data/app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_custom-forms.scss +17 -5
  34. data/app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_dropdown.scss +14 -11
  35. data/app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_forms.scss +14 -7
  36. data/app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_modal.scss +3 -0
  37. data/app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_nav.scss +14 -4
  38. data/app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_tooltip.scss +2 -2
  39. data/app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_type.scss +13 -9
  40. data/app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/custom/_avatar.scss +9 -8
  41. data/app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/custom/_device_preview.scss +1 -1
  42. data/app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/custom/_icon.scss +2 -2
  43. data/app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/custom/_illustration.scss +4 -3
  44. data/app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/custom/_nav_step.scss +4 -3
  45. data/app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/custom/_slat.scss +5 -5
  46. data/app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/custom/_social_share.scss +9 -8
  47. data/app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/custom/_ticket.scss +2 -5
  48. data/app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/custom/_tile.scss +10 -11
  49. data/app/assets/stylesheets/nfg_ui/network_for_good/core/plugins/_datetimepicker.scss +20 -23
  50. data/app/assets/stylesheets/nfg_ui/network_for_good/core/plugins/_select2.scss +38 -28
  51. data/app/assets/stylesheets/nfg_ui/network_for_good/core/plugins/_twitter_typeahead.scss +5 -7
  52. data/app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/_nav.scss +16 -3
  53. data/app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/_navbar.scss +6 -6
  54. data/app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/custom/_event.scss +1 -1
  55. data/app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/custom/_everyday_default.scss +1 -1
  56. data/app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/custom/_page_header.scss +4 -8
  57. data/lib/nfg_ui/components/patterns/page_header.rb +2 -2
  58. data/lib/nfg_ui/components/patterns/tile_header.rb +2 -2
  59. data/lib/nfg_ui/components/utilities/disable_withable.rb +1 -1
  60. data/lib/nfg_ui/version.rb +1 -1
  61. metadata +3 -3
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 6053e7ce382a6a56938868c918b2f1330e1ea2aa0663ab45c817d663991e2e3e
4
- data.tar.gz: 89fd65aa48a96901523009489bc83b26b91c7204fcfd8005364802632af63d99
3
+ metadata.gz: 127b92a6cde34aa088a78559d148bde669ca0854dc2e1296c55fc3a7e3894a20
4
+ data.tar.gz: 4eabadc256b09bea511fee7ca6da77b4ed686739945b162d05e1dcdd07c29183
5
5
  SHA512:
6
- metadata.gz: 80a4075a1a0ae9932e546467704a0214636dc95366453e7fd8437ce6b3876b89716e665fb4eb7104c2cbf5e681ceab0ba3bdbfa4250fb5e1047d160189b90a0c
7
- data.tar.gz: 2fcd9b6d7669e68dd979650e3faa1d2dbb2d7687af1a277b3a3cff50fa3226f82a6caf82644844632bb59f5749c38450b3b116f7c52b2da8d9c902bb50c7e5f3
6
+ metadata.gz: 0ef3f757c8f01c7811a393916c3620aa9e4861c3188905d457cbe7702512442acd8ae0f50c54b09438e695d4dca26653c72ef2edd36945c11a8b561beed3e721
7
+ data.tar.gz: a797b99c5065414a80577b33b14308c92048730c00934cf43fda7240306f94431491ac4ee8113cc0a44741fad56a8683a2942f6b00006aa6db0e2274f67eced9
@@ -1,8 +1,8 @@
1
1
  @each $color, $value in $colors {
2
2
  .#{$color} {
3
3
  .badge-primary {
4
- @include badge-variant($value);
5
- color: $white !important;
4
+ background: scale-color($value, $lightness: 80%);
5
+ border-color: $value;
6
6
  }
7
7
  }
8
8
  }
@@ -3,11 +3,34 @@
3
3
  .btn-primary {
4
4
  @include button-variant($value, $value);
5
5
  color: $white !important;
6
+ &:focus,
7
+ &.focus {
8
+ box-shadow: 0 0 0 $input-btn-focus-width transparentize($value, 0.8);
9
+ }
10
+ &:not(:disabled):not(.disabled):active,
11
+ &:not(:disabled):not(.disabled).active,
12
+ .show > &.dropdown-toggle {
13
+ box-shadow: 0 0 0 $input-btn-focus-width transparentize($value, 0.8);
14
+ &:focus { box-shadow: 0 0 0 $input-btn-focus-width transparentize($value, 0.8); }
15
+ }
16
+ }
17
+ .btn-link {
18
+ &:focus,
19
+ &.focus {
20
+ box-shadow: 0 0 0 $input-btn-focus-width transparentize($value, 0.8);
21
+ }
22
+ &:not(:disabled):not(.disabled):active,
23
+ &:not(:disabled):not(.disabled).active,
24
+ .show > &.dropdown-toggle {
25
+ box-shadow: 0 0 0 $input-btn-focus-width transparentize($value, 0.8);
26
+ &:focus { box-shadow: 0 0 0 $input-btn-focus-width transparentize($value, 0.8); }
27
+ }
6
28
  }
7
29
  .show > .btn-primary.dropdown-toggle {
8
30
  background-color: darken($value, 10%);
9
31
  border-color: darken($value, 10%);
32
+ &:focus { box-shadow: 0 0 0 $input-btn-focus-width transparentize($value, 0.8); }
10
33
  }
11
- .btn-outline-secondary, .btn-link { color: $value; }
34
+ .btn-secondary, .btn-outline-secondary, .btn-link { color: $value; }
12
35
  }
13
36
  }
@@ -7,9 +7,13 @@
7
7
  ~ .custom-control-label::before {
8
8
  border-color: $value;
9
9
  background-color: $value;
10
+ box-shadow: 0 0 0 ($spacer * .125) transparentize($value, 0.8);
10
11
  }
11
12
  }
12
13
  }
14
+ &.custom-control-block {
15
+ .custom-control-input:checked ~ .custom-control-label { box-shadow: 0 0 0 ($spacer * .125) transparentize($value, 0.8); }
16
+ }
13
17
  }
14
18
  .custom-switch {
15
19
  .custom-control-input:checked ~ .custom-control-label {
@@ -21,8 +25,10 @@
21
25
  }
22
26
  }
23
27
  .custom-select {
24
- color: $value;
25
- &:focus { border-color: $value; }
28
+ &:active, &:focus {
29
+ border-color: $value;
30
+ box-shadow: 0 0 0 ($spacer * .125) transparentize($value, 0.8);
31
+ }
26
32
  }
27
33
  }
28
34
  }
@@ -1,7 +1,10 @@
1
1
  @each $color, $value in $colors {
2
2
  .#{$color} {
3
3
  .form-control {
4
- &:focus { border-color: $value; }
4
+ &:focus {
5
+ border-color: $value;
6
+ box-shadow: 0 0 0 ($spacer * .125) transparentize($value, 0.8);
7
+ }
5
8
  }
6
9
  }
7
10
  }
@@ -2,7 +2,9 @@
2
2
  .#{$color} {
3
3
  .nav-tabs {
4
4
  .nav-link {
5
- &:hover, &.active { border-color: $value; }
5
+ &:hover, &.active {
6
+ &:after { background: $value; }
7
+ }
6
8
  }
7
9
  }
8
10
  }
@@ -11,7 +13,9 @@
11
13
  .site-nav {
12
14
  .nav-item.#{$color} {
13
15
  .nav-link {
14
- &:hover, &.active, &[aria-expanded="true"] { border-color: $value; }
16
+ &:hover, &.active, &[aria-expanded="true"] {
17
+ &:after { background-color: $value; }
18
+ }
15
19
  }
16
20
  }
17
21
  }
@@ -11,11 +11,11 @@
11
11
  }
12
12
  &.active ~ .visited {
13
13
  .step-indicator {
14
- &::after { box-shadow: 0 0 0 ($spacer * .25) transparentize($value, 0.5); };
14
+ &::after { box-shadow: 0 0 0 ($spacer * .25) transparentize($value, 0.8); };
15
15
  }
16
16
  }
17
17
  .step-indicator {
18
- &::after { box-shadow: 0 0 0 ($spacer * .25) transparentize($value, 0.5); }
18
+ &::after { box-shadow: 0 0 0 ($spacer * .25) transparentize($value, 0.8); }
19
19
  }
20
20
  }
21
21
  }
@@ -1,49 +1,27 @@
1
1
  @each $color, $value in $colors {
2
2
  .#{$color} {
3
3
  .select2-container--default {
4
- .select2-search--dropdown {
5
- .select2-search__field:focus {
6
- border-color: $value;
7
- }
8
- }
9
- &.select2-container--focus .select2-selection--multiple { border-color: $value; }
10
- &.select2-container--open {
11
- .select2-selection--single {
12
- border-color: $value !important;
13
- .select2-selection__rendered { color: $body-color; }
14
- }
15
- }
16
- .select2-selection--single {
17
- &:hover .select2-selection__rendered { color: $body-color; }
18
- .select2-selection__rendered, .select2-selection__placeholder { color: $value !important; }
4
+ .select2-search--dropdown .select2-search__field:focus,
5
+ &.select2-container--focus .select2-selection--multiple,
6
+ &.select2-container--open .select2-selection--single {
7
+ border-color: $value;
8
+ box-shadow: 0 0 0 ($spacer * .125) transparentize($value, 0.8);
19
9
  }
20
10
  .select2-selection--multiple {
21
11
  .select2-selection__rendered {
22
12
  .select2-selection__choice {
23
- color: $value;
24
13
  &:hover, &:active { color: $body-color; }
25
14
  }
26
15
  }
27
16
  .select2-selection__choice__remove { color: $value; }
28
17
  }
29
18
  }
30
- .has-danger {
31
- .select2-container--default {
32
- .select2-selection--single .select2-selection__rendered,
33
- .select2-selection--multiple .select2-selection__rendered {
34
- color: $danger;
35
- }
36
- }
37
- }
38
- .select2-selection__rendered .select2-selection__clear:before { color: $value; }
39
19
  }
40
20
  .#{$color} ~ .select2-container--default { // ~ is needed to style containers and elements outside of .container-main and still adhere to the page's specifc resource_color
41
21
  .select2-search--dropdown {
42
- .select2-search__field:focus { border-color: $value; }
43
- }
44
- .select2-results__option {
45
- &[aria-selected='true'] {
46
- &:after { color: $value; }
22
+ .select2-search__field:focus {
23
+ border-color: $value;
24
+ box-shadow: 0 0 0 ($spacer * .125) transparentize($value, 0.8);
47
25
  }
48
26
  }
49
27
  }
@@ -1,3 +1,9 @@
1
+ // Overrides text-muted default color to account for better contrast for accessibility (also used in _builder_layout.scss for .builder-header)
2
+ .bg-dark {
3
+ background-color: $blue-700 !important;
4
+ .text-muted { color: $blue-200 !important; }
5
+ }
6
+
1
7
  // Clouds
2
8
  .bg-clouds {
3
9
  padding-bottom: 20%;
@@ -10,7 +10,7 @@
10
10
  }
11
11
  }
12
12
  @include media-breakpoint-up(xl) {
13
- padding-top: ($spacer * 2);
13
+ padding-top: ($spacer * 1.75);
14
14
  padding-left: 200px;
15
15
  }
16
16
  }
@@ -1,10 +1,10 @@
1
- // Top navigation bar in DMS
1
+ // Side navigation bar in DMS
2
2
  .site-nav {
3
3
  position: fixed;
4
4
  top: 0;
5
5
  width: 200px;
6
6
  height: 100%;
7
- background-color: #006D9D;
7
+ background-color: $blue-700;
8
8
  overflow-y: auto;
9
9
  -webkit-overflow-scrolling: touch;
10
10
  @include transition(all .2s ease-in-out);
@@ -30,40 +30,45 @@
30
30
  }
31
31
  }
32
32
  .nav-pills {
33
- .nav-item {
34
- font-weight: $font-weight-bold;
35
- line-height: $line-height-sm;
36
- }
37
33
  .nav-link {
34
+ position: relative;
38
35
  padding: ($spacer * .75) ($spacer * .5);
39
- @include border-radius($nav-pills-border-radius);
36
+ border-radius: $nav-pills-border-radius;
40
37
  color: $white;
41
38
  vertical-align: middle;
42
39
  background-color: transparent;
43
- border-left: 4px solid transparent;
44
40
  @include clearfix();
45
- @include transition($btn-transition);
41
+ transition: $btn-transition;
46
42
  &:hover, &.active, &[aria-expanded="true"] {
47
43
  color: $nav-pills-link-active-color;
48
44
  cursor: pointer;
49
45
  background-color: $nav-pills-link-active-bg;
46
+ &:after {
47
+ position: absolute;
48
+ top: 0;
49
+ left: 0;
50
+ bottom: 0;
51
+ width: $nav-tabs-border-width;
52
+ border-radius: ($nav-tabs-border-width / 2);
53
+ background: transparent;
54
+ transition: $btn-transition;
55
+ content: '';
56
+ }
50
57
  }
51
58
  .fa {
52
59
  width: 1em;
53
60
  min-width: 14px;
54
- line-height: 18px;
61
+ &.float-right { line-height: 24px; }
55
62
  }
56
63
  }
57
64
  &.nav-sub-menu {
58
65
  .nav-link {
59
66
  padding-top: ($spacer * .5);
60
67
  padding-bottom: ($spacer * .5);
61
- font-size: ($font-size-base * .75);
62
- line-height: $line-height-base;
63
- background-color: darken(#006D9D, 13%);
64
- &:hover, &:focus, &.active {
65
- background-color: darken(#006D9D, 17%);
66
- }
68
+ font-size: $font-size-sm;
69
+ line-height: $line-height-sm;
70
+ background-color: $blue-900;
71
+ &:hover, &:focus, &.active { background-color: $blue-1000; }
67
72
  }
68
73
  }
69
74
  }
@@ -1,111 +1,67 @@
1
1
  // Styles that replicate the legacy top navs in EVO
2
+ #admin-toolbar {
3
+ font-size: $font-size-sm;
4
+ line-height: 1.714; // specific to achieve height of 56px to match with quick-add button :lg height
5
+ background-color: $white !important;
6
+ .navbar {
7
+ background-color: transparent !important;
8
+ .navbar-brand {
9
+ padding-top: ($spacer * .25);
10
+ padding-bottom: ($spacer * .25);
11
+ font-size: $font-size-sm;
12
+ color: $text-muted;
13
+ }
14
+ .nav-item {
15
+ position: relative;
16
+ text-align: center;
17
+ border-left: $border-width solid $nav-divider-color;
18
+ > .nav-link {
19
+ padding: ($spacer * .5);
20
+ color: $text-muted;
21
+ transition: $transition-base;
22
+ @include hover-focus() {
23
+ color: $body-color;
24
+ background-color: $body-bg;
25
+ }
26
+ @include media-breakpoint-down(sm) { padding: ($spacer * .5); }
27
+ @include media-breakpoint-up(md) { padding: ($spacer * .5) $spacer; }
28
+ }
29
+ #sysadmin_dropdown {
30
+ .dropdown-item { padding: 0; }
31
+ .nav-link {
32
+ padding: $dropdown-item-padding-y $dropdown-item-padding-x;
33
+ color: inherit;
34
+ }
35
+ }
36
+ }
37
+ }
38
+ }
39
+
2
40
  #admin-nav {
3
- background-color: #444444;
41
+ background-color: $blue-700;
4
42
  .navbar {
5
- background: transparent !important;
43
+ background-color: transparent !important;
6
44
  .navbar-nav {
7
45
  .nav-item {
8
- @include media-breakpoint-up(lg) {
9
- + .nav-item { border-left: $border-width solid #4d4d4d; }
10
- }
11
46
  > .nav-link {
12
- padding: $spacer ($spacer * .5);
13
- font-size: $font-size-sm;
14
- font-weight: $font-weight-bold;
15
- &:hover {
16
- color: $navbar-dark-hover-color;
17
- background-color: #414141;
18
- }
19
- > .fa {
20
- color: #626262;
21
- &:first-child { margin-right: ($spacer * .25); }
22
- }
23
- }
24
- &.active {
25
- > .nav-link {
26
- color: $navbar-dark-active-color;
27
- background-color: #4b4b4b;
28
- > .fa { color: $navbar-dark-active-color; }
29
- }
47
+ padding-top: $spacer;
48
+ padding-bottom: $spacer;
49
+ color: $white;
50
+ transition: $transition-base;
51
+ @include hover-focus() { background-color: $blue-800; }
30
52
  }
53
+ &.active > .nav-link { background-color: $blue-800; }
31
54
  }
32
55
  .dropdown-menu {
33
- margin-top: 0;
34
- border-radius: 0 0 $border-radius $border-radius;
35
- background-color: #525252;
36
56
  .dropdown-item {
37
57
  padding: 0;
38
- + .dropdown-item { border-top: none; }
39
- &.active {
40
- background-color: transparent;
41
- .nav-link {
42
- color: #cccccc;
43
- border-left-color: $teal;
44
- }
45
- }
46
- }
47
- .nav-link {
48
- padding: ($spacer * .5);
49
- color: #989797;
50
- border-left: 5px solid transparent;
51
- &:hover {
52
- color: #cccccc;
53
- background-color: #575757;
54
- border-left-color: #616161;
55
- }
58
+ &.active .nav-link, .nav-link { color: inherit; }
56
59
  }
57
60
  }
58
61
  }
59
62
  }
60
63
  }
61
64
 
62
- #admin-toolbar {
63
- padding-top: 2px;
64
- font-size: 12px;
65
- font-weight: $font-weight-bold;
66
- line-height: 1;
67
- background-color: #2b2b2b;
68
- &:before {
69
- position: fixed;
70
- top: 0;
71
- left: 0;
72
- width: 100%;
73
- height: 2px;
74
- background-color: $teal;
75
- z-index: 5;
76
- content: '';
77
- }
78
- .navbar { background: transparent !important; }
79
- .navbar-brand {
80
- font-size: 11px;
81
- font-weight: $font-weight-bold;
82
- line-height: 1;
83
- text-transform: uppercase;
84
- }
85
- .nav-item {
86
- > .nav-link {
87
- padding: ($spacer * .5);
88
- text-transform: uppercase;
89
- color: $teal;
90
- transition: $transition-base;
91
- &:hover { background-color: #515151; }
92
- @include media-breakpoint-down(sm) { font-size: 14px; }
93
- }
94
- &.show {
95
- > .nav-link {
96
- background-color: #fff;
97
- color: $teal;
98
- }
99
- }
100
- .dropdown-menu {
101
- margin-top: 0;
102
- border-radius: 0 0 $border-radius $border-radius;
103
- .dropdown-item, .nav-link { color: $teal; }
104
- .nav-link { padding: 0; }
105
- }
106
- }
107
- }
108
-
109
65
  #cross_product_nav {
110
66
  > .dropdown-menu {
111
67
  > .dropdown-item {
@@ -118,26 +74,23 @@
118
74
  }
119
75
 
120
76
  #p2p-nav {
121
- background-color: $gray-800;
77
+ background-color: $blue-800;
122
78
  .navbar-nav {
123
79
  .nav-link {
124
80
  padding-right: ($nav-link-padding-x * .5);
125
81
  padding-left: ($nav-link-padding-x * .5);
126
- color: $teal;
127
- &:hover {
128
- background-color: $gray-900;
129
- }
82
+ &:hover { background-color: $gray-900; }
130
83
  }
131
84
  }
132
85
  }
133
86
 
134
- // Main navigation bar (left) in DMS
87
+ // Main navigation bar (top) in DMS
135
88
  .site-navbar {
136
89
  position: fixed;
137
90
  right: 0;
138
91
  left: 0;
139
- z-index: $zindex-fixed;
140
92
  @include transition(left .2s ease-in-out);
93
+ z-index: $zindex-fixed;
141
94
  @include media-breakpoint-down(lg) {
142
95
  bottom: 0;
143
96
  width: 100%;
@@ -148,19 +101,24 @@
148
101
  left: 200px;
149
102
  border-bottom: $border-width solid $nav-divider-color;
150
103
  }
104
+ }
105
+ #site_navbar {
106
+ font-size: $font-size-sm;
107
+ line-height: 1.714; // specific to achieve height of 56px to match with quick-add button :lg height
108
+ background-color: $white !important;
151
109
  .navbar-brand {
152
- font-size: ($font-size-base * .75);
110
+ padding-top: ($spacer * .25);
111
+ padding-bottom: ($spacer * .25);
112
+ font-size: $font-size-sm;
113
+ color: $text-muted;
153
114
  @include media-breakpoint-down(lg) { display: none !important; }
154
115
  }
155
116
  .nav {
156
117
  @include media-breakpoint-down(lg) { width: 100%; }
157
118
  .nav-item {
158
119
  position: relative;
159
- font-size: ($font-size-base * .75);
160
- font-weight: $font-weight-bold;
161
- line-height: 1;
162
120
  text-align: center;
163
- border-left: $border-width solid $border-color;
121
+ border-left: $border-width solid $nav-divider-color;
164
122
  @include media-breakpoint-down(lg) {
165
123
  width: 20%;
166
124
  &:first-child { border-left: none; }
@@ -177,12 +135,16 @@
177
135
  &.nav-alert-danger { background-color: $danger; }
178
136
  }
179
137
  .nav-link {
138
+ padding: ($spacer * .5);
180
139
  color: $text-muted;
140
+ transition: $transition-base;
141
+ @include hover-focus() {
142
+ color: $body-color;
143
+ background-color: $body-bg;
144
+ }
181
145
  outline: none !important;
182
- @include transition(background-color .2s ease-in-out);
183
146
  @include media-breakpoint-down(sm) { padding: ($spacer * .5); }
184
- @include media-breakpoint-up(md) { padding: 18px $spacer; }
185
- @include hover() { background-color: $body-bg; }
147
+ @include media-breakpoint-up(md) { padding: ($spacer * .5) $spacer; }
186
148
  &[aria-expanded="true"],
187
149
  &:not(:disabled):not(.disabled).active { background-color: $body-bg; }
188
150
  &.disabled {
@@ -211,9 +173,7 @@
211
173
  }
212
174
  @include media-breakpoint-down(sm) {
213
175
  display: block;
214
- margin-top: 2px;
215
- font-weight: $font-weight-bold;
216
- font-size: 10px;
176
+ font-size: 12px;
217
177
  }
218
178
  @include media-breakpoint-up(md) { margin-left: ($spacer * .25); }
219
179
  @include media-breakpoint-up(xl) { display: none; }