prettier ui-widgets (dialogs and datepickers)

sass/components/_jquery-ui.scss

@@ -2,6 +2,11 @@
 // Tweaks for jQuery UI
 // --------------------------------------------------
 
+
+/**
+ * Component containers
+ */
+
 .ui-widget {
     &,
     input,
@@ -20,22 +25,101 @@
  */
 
 .ui-widget-content {
-    background: $panel-bg;
-    border-color: $panel-border;
-    border-radius: $panel-border-radius;
-    box-shadow: $panel-shadow;
+    color: $text-color;
+    background: $body-bg;
+    border: 1px solid $panel-border;
+
+    a {
+        color: $text-color;
+    }
+}
+
+.ui-widget-header {
+    color: $header-text;
+    background: $header-bg;
+    border: 0 none;
+    font-weight: bold;
+
+    a,
+    button {
+        &.ui-state-default {
+            color: $header-text;
+            background: $header-bg;
+            border-color: $header-bg;
+        }
+
+        &.ui-state-hover,
+        &.ui-state-focus {
+            background: darken($header-bg, 10%);
+            border-color: darken($header-bg, 12%);
+        }
+
+        .ui-icon {
+            background-image: url("/stylesheets/jquery/images/ui-icons_ffffff_256x240.png");
+        }
+    }
+}
+
+
+/**
+ * Interaction states
+ */
+
+.ui-state-default,
+.ui-widget-content .ui-state-default,
+.ui-widget-header .ui-state-default {
+    font-weight: normal;
+    color: $component-color;
+    background: $component-bg;
+    border: 1px solid $component-border;
+    box-shadow: none;
+}
+
+.ui-state-default a,
+.ui-state-default a:link,
+.ui-state-default a:visited {
+    color: $component-color;
+    text-decoration: none;
 }
 
 .ui-state-hover,
-.ui-state-focus {
-    &,
-    .ui-widget-content &,
-    .ui-widget-header & {
-        color: $component-active-color;
-        background: $component-active-bg;
-        border-color: $component-active-border;
-        font-weight: inherit;
-    }
+.ui-widget-content .ui-state-hover,
+.ui-widget-header .ui-state-hover,
+.ui-state-focus,
+.ui-widget-content .ui-state-focus,
+.ui-widget-header .ui-state-focus {
+    border: 1px solid $component-active-border;
+    background: $component-active-bg;
+    font-weight: normal;
+    color: $component-active-color;
+}
+
+.ui-state-hover a,
+.ui-state-hover a:hover,
+.ui-state-hover a:link,
+.ui-state-hover a:visited,
+.ui-state-focus a,
+.ui-state-focus a:hover,
+.ui-state-focus a:link,
+.ui-state-focus a:visited {
+    color: $component-active-color;
+    text-decoration: none;
+}
+
+.ui-state-active,
+.ui-widget-content .ui-state-active,
+.ui-widget-header .ui-state-active {
+    border: 1px solid $component-active-border;
+    background: $component-active-bg;
+    font-weight: normal;
+    color: $component-active-color;
+}
+
+.ui-state-active a,
+.ui-state-active a:link,
+.ui-state-active a:visited {
+    color: $component-active-color;
+    text-decoration: none;
 }
 
 
@@ -66,8 +150,16 @@
     }
 }
 
-.ui-dialog .ui-dialog-content {
-    padding: $padding-base-horizontal;
+.ui-dialog {
+    &.ui-widget-content {
+        padding: 3px;
+        border: 0 none;
+        box-shadow: $panel-shadow;
+    }
+
+    .ui-dialog-titlebar-close {
+        right: .5em;
+    }
 }
 
 .ui-widget-overlay {
@@ -85,8 +177,78 @@ img.ui-datepicker-trigger {
     margin-left: 4px;
 }
 
-.ui-datepicker-title select {
-    width: 70px !important;
-    margin-top: -2px !important;
-    margin-right: 4px !important;
-}
+.ui-datepicker {
+    padding: 3px;
+    box-shadow: $panel-shadow;
+
+    .ui-datepicker-header {
+        padding: .3em;
+    }
+
+    .ui-datepicker-prev {
+        left: .3em;
+    }
+
+    .ui-datepicker-next {
+        right: .3em;
+    }
+
+    .ui-datepicker-prev,
+    .ui-datepicker-next {
+        top: .3em;
+        border: 0 none;
+        background: transparent;
+    }
+
+    .ui-datepicker-title {
+        margin: 0 (1.8em + .3em);
+    }
+
+    select.ui-datepicker-month,
+    select.ui-datepicker-year {
+        width: 49%;
+        margin: 0;
+        height: 1.8em;
+    }
+
+    select.ui-datepicker-year {
+        margin-left: 1%;
+    }
+
+    .ui-datepicker-calendar {
+        table-layout: fixed;
+
+        td {
+            text-align: right;
+
+            a {
+                padding: .25em .2em .25em 0;
+            }
+
+            &.ui-datepicker-week-col {
+                padding-right: $table-condensed-cell-padding;
+            }
+        }
+    }
+}
+
+.ui-datepicker-today {
+    .ui-state-highlight {
+        color: $component-color;
+        border-color: $component-active-border;
+        background: $component-bg;
+    }
+
+    .ui-state-hover {
+        background: $component-active-bg;
+        color: $component-active-color;
+    }
+}
+
+.ui-datepicker-current-day {
+    .ui-state-active {
+        color: $tooltip-text;
+        background: $tooltip-bg;
+        border-color: $tooltip-border;
+    }
+}