diff options
author | Jacob Schatz <jschatz@gitlab.com> | 2016-06-09 23:54:05 +0300 |
---|---|---|
committer | Jacob Schatz <jschatz@gitlab.com> | 2016-06-09 23:54:05 +0300 |
commit | 600078cccf994ad6e4f9d5cd5192ac2b4da89856 (patch) | |
tree | 7e8197ef88cd1b5e9791dff9663b6820997a3252 /app/assets/stylesheets/framework | |
parent | 87c77718a483e372599562d3e5e10b000df74a30 (diff) | |
parent | 7c88141b958c372b8a787c1d724bd8e5bd66f024 (diff) |
Merge branch 'due-date-field-ux-improv' into 'master'
Improved the UX of issue & milestone date picker
## What does this MR do?
Improves the UX of the date picker on issue form & milestone form.
## What are the relevant issue numbers?
Closes #18198
## Screenshots (if relevant)
### Issues
![Screen_Shot_2016-06-06_at_09.28.29](/uploads/d9c192dff0d8076adc3ed6f005ea3790/Screen_Shot_2016-06-06_at_09.28.29.png)
### Project milestones
![Screen_Shot_2016-06-06_at_09.28.18](/uploads/2d03d72791c5fc6badfadb975a85af2b/Screen_Shot_2016-06-06_at_09.28.18.png)
### Group milestones
![Screen_Shot_2016-06-06_at_09.28.05](/uploads/0f28532396a16e6fd48ddea784ca28e3/Screen_Shot_2016-06-06_at_09.28.05.png)
See merge request !4485
Diffstat (limited to 'app/assets/stylesheets/framework')
-rw-r--r-- | app/assets/stylesheets/framework/jquery.scss | 43 |
1 files changed, 30 insertions, 13 deletions
diff --git a/app/assets/stylesheets/framework/jquery.scss b/app/assets/stylesheets/framework/jquery.scss index 525ed81b059..30a5b837d69 100644 --- a/app/assets/stylesheets/framework/jquery.scss +++ b/app/assets/stylesheets/framework/jquery.scss @@ -2,6 +2,7 @@ font-family: $regular_font; font-size: $font-size-base; + &.ui-datepicker, &.ui-datepicker-inline { border: 1px solid #ddd; padding: 10px; @@ -10,6 +11,25 @@ .ui-datepicker-header { background: #fff; border-color: #ddd; + + .ui-datepicker-prev, + .ui-datepicker-next { + top: 4px; + } + + .ui-datepicker-prev { + left: 2px; + } + + .ui-datepicker-next { + right: 2px; + } + + .ui-state-hover { + background: transparent; + border: 0; + cursor: pointer; + } } .ui-datepicker-calendar td a { @@ -36,21 +56,18 @@ } .ui-state-highlight { - border: 1px solid #eee; - background: #eee; + border: 0; + background: transparent; } - .ui-state-active { - border: 1px solid $gl-primary; - background: $gl-primary; - color: #fff; - } - - .ui-state-hover, - .ui-state-focus { - border: 1px solid $row-hover; - background: $row-hover; - color: #333; + .ui-datepicker-calendar { + .ui-state-active, + .ui-state-hover, + .ui-state-focus { + border: 1px solid $gl-primary; + background: $gl-primary; + color: #fff; + } } } |