X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/0494b8d9b9bb03ab6c22b34dae81261e3cd7e3e6..7a654f8d43fdb43d78b63d90528bed6e86b608cc:/resources/themes/stylesheets/ext4/default/widgets/_datepicker.scss

diff --git a/resources/themes/stylesheets/ext4/default/widgets/_datepicker.scss b/resources/themes/stylesheets/ext4/default/widgets/_datepicker.scss
new file mode 100644
index 00000000..adcf3ee6
--- /dev/null
+++ b/resources/themes/stylesheets/ext4/default/widgets/_datepicker.scss
@@ -0,0 +1,390 @@
+@mixin extjs-datepicker {
+    .#{$prefix}datepicker {
+        border: $datepicker-border;
+        
+        background-color: $datepicker-background-color;
+        position: relative;
+        
+        a {
+            -moz-outline: 0 none;
+            outline: 0 none;
+            
+            color: $datepicker-monthpicker-item-color;
+            text-decoration: none;
+            
+            border-width: 0;
+        }
+    }
+    
+    .#{$prefix}datepicker-inner,
+    .#{$prefix}datepicker-inner td,
+    .#{$prefix}datepicker-inner th {
+        border-collapse: separate;
+    }
+        
+    .#{$prefix}datepicker-header {
+        position: relative;
+
+        height: 26px;
+        
+        @if $datepicker-header-background-gradient {
+            @include background-gradient($datepicker-header-background-color, $datepicker-header-background-gradient);
+        } @else {
+            background-color: $datepicker-header-background-color;
+        }
+    }
+         
+    .#{$prefix}datepicker-prev,
+    .#{$prefix}datepicker-next {
+        position: absolute;
+        top: 5px;
+
+        width: 18px;
+        
+        a {
+            display: block;
+            
+            width: 16px;
+            height: 16px;
+            
+            background-position: top;
+            background-repeat: no-repeat;
+            
+            cursor: pointer;
+            
+            text-decoration: none !important;
+            
+            &:hover {
+                @include opacity(1);
+            }
+        }
+    }
+            
+    .#{$prefix}datepicker-next {
+        right: 5px;
+
+        a {
+            background-image: theme-image($theme-name, $datepicker-next-image);
+        }
+    }
+
+    .#{$prefix}datepicker-prev {
+        left: 5px;
+
+        a {
+            background-image: theme-image($theme-name, $datepicker-prev-image);
+        }
+    }      
+            
+    .#{$prefix}item-disabled .#{$prefix}datepicker-prev a:hover,
+    .#{$prefix}item-disabled .#{$prefix}datepicker-next a:hover {
+        @include opacity(.6);
+    }    
+                
+    .#{$prefix}datepicker-month {
+        padding-top: 3px;
+
+        .#{$prefix}btn,
+        button,
+        .#{$prefix}btn-tc,
+        .#{$prefix}btn-tl,
+        .#{$prefix}btn-tr,
+        .#{$prefix}btn-mc,
+        .#{$prefix}btn-ml,
+        .#{$prefix}btn-mr,
+        .#{$prefix}btn-bc,
+        .#{$prefix}btn-bl,
+        .#{$prefix}btn-br {
+            background: transparent !important;
+            border-width: 0 !important;
+        }
+        
+        span {
+            color: #fff !important;
+        }
+        
+        .#{$prefix}btn-split-right {
+            background: theme-image($theme-name, $datepicker-month-arrow-image) no-repeat right center !important;
+            
+            padding-right: 12px;
+        }
+    }
+            
+    .#{$prefix}datepicker-next {
+        text-align: right;
+    }
+
+    .#{$prefix}datepicker-month {
+        //width: 120px;
+        text-align: center;
+        
+        button {
+            color: $datepicker-monthpicker-color !important;
+        }
+    }
+        
+        
+    table.#{$prefix}datepicker-inner {
+        width: 100%;
+        table-layout: fixed;
+        
+        th {
+            width: 25px;
+            height: 19px;
+            
+            padding: 0;
+            
+            color: $datepicker-th-color;
+            font: $datepicker-th-font;
+            text-align: $datepicker-th-text-align;
+            
+            border-bottom: 1px solid $datepicker-th-border-bottom-color;
+            border-collapse: separate;
+            
+            @if $datepicker-th-background-gradient {
+                @include background-gradient($datepicker-th-background-color, $datepicker-th-background-gradient);
+            } @else {
+                background-color: $datepicker-th-background-color;
+            }
+            
+            cursor: default;
+            
+            span {
+                display: block;
+                padding-right: 7px;
+            }
+        }
+        
+        tr {
+            height: 20px;
+        }
+        
+        td {
+            border: $datepicker-border-width $datepicker-border-style;
+            height: $datepicker-td-height;
+            border-color: $datepicker-background-color;
+            text-align: right;
+            padding: 0;
+        }
+        
+        a {
+            padding-right: 4px;
+            
+            display: block;
+            
+            zoom: 1;
+            
+            font: normal ceil($font-size * .9) $font-family;
+            color: $datepicker-item-color;
+            text-decoration: none;
+            text-align: right;
+        }
+        
+        .#{$prefix}datepicker-active {
+            cursor: pointer;
+            color: black;
+        }
+        
+        .#{$prefix}datepicker-selected {
+            a {
+                background: repeat-x left top;
+                background-color: $datepicker-selected-item-background-color;
+                border: 1px solid $datepicker-selected-item-border-color;
+            }
+            
+            span {
+                font-weight: bold;
+            }
+        }
+        
+        .#{$prefix}datepicker-today {
+            a {
+                border: $datepicker-border-width $datepicker-border-style;
+                border-color: $datepicker-today-item-border-color;
+            }
+        }
+        
+        .#{$prefix}datepicker-prevday,
+        .#{$prefix}datepicker-nextday {
+            a {
+                text-decoration: none !important;
+                color: #aaa;
+            }
+        }
+        
+        a:hover,
+        .#{$prefix}datepicker-disabled a:hover {
+            text-decoration: none !important;
+            
+            color: #000;
+            
+            background-color: $datepicker-item-hover-background-color;
+        }
+        
+        .#{$prefix}datepicker-disabled a {
+            cursor: default;
+            background-color: #eee;
+            color: #bbb;
+        }
+    }
+
+    .#{$prefix}datepicker-footer,
+    .#{$prefix}monthpicker-buttons {
+        position: relative;
+        
+        border-top: $datepicker-border-width $datepicker-border-style $datepicker-footer-border-top-color;
+        
+        @if $datepicker-footer-background-gradient {
+            @include background-gradient($datepicker-footer-background-color, $datepicker-footer-background-gradient);
+        } @else {
+            background-color: $datepicker-footer-background-color;
+        }
+        
+        text-align: center;
+        
+        .#{$prefix}btn {
+            position: relative;
+            margin: 4px;
+        } 
+    }
+    
+    .#{$prefix}item-disabled .#{$prefix}datepicker-inner a:hover {
+        background: none;
+    }
+
+    // month picker
+    .#{$prefix}monthpicker {
+        position: absolute;
+        left: 0;
+        top: 0;
+        
+        border: $datepicker-border;
+        //
+        
+        background-color: $datepicker-background-color;
+    }
+
+    .#{$prefix}monthpicker-months,
+    .#{$prefix}monthpicker-years {
+        float: left;
+        
+        height: $datepicker-monthpicker-height;
+        width: 88px;
+    }
+        
+    .#{$prefix}monthpicker-item {
+        float: left;
+        
+        margin: 4px 0 5px 0;
+        
+        font: normal ceil($font-size * .9) $font-family;
+        text-align: center;
+        vertical-align: middle;
+        
+        height: 18px;
+        width: 43px;
+        
+        border: 0 none;
+        
+        a {
+            display: block;
+            
+            margin: 0 5px 0 5px;
+            
+            border: $datepicker-monthpicker-item-border;
+            
+            line-height: 17px;
+            
+            &:hover {
+                background-color: $datepicker-monthpicker-item-hover-background-color;
+            }
+            
+            &.#{$prefix}monthpicker-selected {
+                background-color: $datepicker-monthpicker-item-selected-background-color;
+                border: $datepicker-monthpicker-item-selected-border;
+            }
+        }
+    }
+        
+    .#{$prefix}monthpicker-months {
+        border-right: $datepicker-border;
+        width: 87px;
+    }
+    
+    .#{$prefix}monthpicker-years .#{$prefix}monthpicker-item {
+        width: 44px;
+    }
+    
+    .#{$prefix}monthpicker-yearnav {
+        height: 28px;
+        
+        button {
+            background-image: theme-image($theme-name, $datepicker-tool-sprite-image);
+            height: 15px;
+            width: 15px;
+            padding: 0;
+            margin: 6px 12px 5px 15px;
+            border: none;
+            outline: 0 none;
+            &::-moz-focus-inner {
+                border: 0;
+                padding: 0;
+            }
+        }
+    }
+    
+    .#{$prefix}monthpicker-yearnav-next {
+        background-position: 0 -120px;
+    }
+    
+    .#{$prefix}monthpicker-yearnav-next-over {
+        cursor: pointer;
+        cursor: hand;
+        background-position: -15px -120px;
+    }
+    
+    .#{$prefix}monthpicker-yearnav-prev {
+        background-position: 0 -105px;
+    }
+    
+    .#{$prefix}monthpicker-yearnav-prev-over {
+        cursor: pointer;
+        cursor: hand;
+        background-position: -15px -105px;
+    }
+    
+    @if $include-ie {
+        .#{$prefix}quirks {
+            .#{$prefix}ie7,
+            .#{$prefix}ie8 {
+                .#{$prefix}monthpicker-buttons {
+                    .#{$prefix}btn {
+                        margin-top: 2px;
+                    }
+                }
+            }
+        }
+    }
+
+    //nlg support
+    @if not $supports-gradients or $compile-all {
+        .#{$prefix}nlg {
+            @if $datepicker-header-background-gradient != null {
+                .#{$prefix}datepicker-header {
+                    background-image: theme-image($theme-name, 'datepicker/datepicker-header-bg.gif');
+                    background-repeat: repeat-x;
+                    background-position: top left;
+                }
+            }
+
+            @if $datepicker-footer-background-gradient != null {
+                .#{$prefix}datepicker-footer,
+                .#{$prefix}monthpicker-buttons {
+                    background-image: theme-image($theme-name, 'datepicker/datepicker-footer-bg.gif');
+                    background-repeat: repeat-x;
+                    background-position: top left;
+                }
+            }
+        }
+    }
+}
\ No newline at end of file