diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 415c23f9e..822e4cd4c 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -10,4 +10,5 @@ @import "c3"; @import "annotator.min"; @import "annotator_overrides"; -@import "jquery-ui/datepicker"; \ No newline at end of file +@import "jquery-ui/datepicker"; +@import "datepicker_overrides"; \ No newline at end of file diff --git a/app/assets/stylesheets/datepicker_overrides.scss b/app/assets/stylesheets/datepicker_overrides.scss new file mode 100644 index 000000000..abab720e0 --- /dev/null +++ b/app/assets/stylesheets/datepicker_overrides.scss @@ -0,0 +1,94 @@ +// Overrides styles of jquery-ui/datepicker +// + +.ui-datepicker-header { + background: $brand; + color: white; + font-weight: bold; +} + +.ui-datepicker-calendar { + + .ui-state-default { + background: $highlight; + color: $text; + } + + .ui-state-hover, .ui-state-active { + background: $brand; + color: white; + } +} + +.ui-datepicker { + padding: 0; + z-index: 4 !important; + + .ui-datepicker-prev { + left: 12px; + } + + .ui-datepicker-next { + right: 12px; + } + + .ui-datepicker-prev, .ui-datepicker-next { + color: white; + cursor: pointer; + font-weight: normal; + font-size: $small-font-size; + line-height: $line-height; + top: 0; + } + + table { + border: 1px solid $border; + border-top: 0; + + thead { + background: $dark; + border-left: 1px solid $dark; + border-right: 1px solid $dark; + + tr th { + color: white; + } + } + + tr { + border-bottom: 1px solid $border; + + &:last-child { + border-bottom: 0px; + } + + &:nth-child(odd) { + background: none; + } + } + + td { + padding: 0; + border-right: 1px solid $border; + + &:last-child { + border-right: 0px; + } + + span, a { + text-align: center; + line-height: $line-height; + color: $text; + } + + &.ui-datepicker-unselectable.ui-state-disabled { + background: white; + + .ui-state-default { + background: $input-bg; + color: $text-medium; + } + } + } + } +} diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index 749c009b0..26aeebfcc 100644 --- a/app/assets/stylesheets/layout.scss +++ b/app/assets/stylesheets/layout.scss @@ -482,6 +482,7 @@ header { @media (min-width: $small-breakpoint) { background: white; + min-height: rem-calc(50); } a { diff --git a/app/views/shared/_advanced_search.html.erb b/app/views/shared/_advanced_search.html.erb index 68cf1441d..03c1a4319 100644 --- a/app/views/shared/_advanced_search.html.erb +++ b/app/views/shared/_advanced_search.html.erb @@ -29,12 +29,14 @@ <%= text_field_tag 'advanced_search[date_min]', params[:advanced_search].try(:[], :date_min), + placeholder: t("shared.advanced_search.date_placeholder"), class: 'js-calendar' %>