indico/htdocs/sass/custom/_jquery-ui-datepicker.scss

   1 /* This file is part of Indico.
   2  * Copyright (C) 2002 - 2015 European Organization for Nuclear Research (CERN).
   3  *
   4  * Indico is free software; you can redistribute it and/or
   5  * modify it under the terms of the GNU General Public License as
   6  * published by the Free Software Foundation; either version 3 of the
   7  * License, or (at your option) any later version.
   8  *
   9  * Indico is distributed in the hope that it will be useful, but
  10  * WITHOUT ANY WARRANTY; without even the implied warranty of
  11  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
  12  * General Public License for more details.
  13  *
  14  * You should have received a copy of the GNU General Public License
  15  * along with Indico; if not, see <http://www.gnu.org/licenses/>.
  16  */
  17
  18 .ui-datepicker {
  19     @include border-all();
  20     @include single-box-shadow();
  21     background: white;
  22     z-index: 2;
  23
  24     .ui-datepicker-header {
  25         @include border-bottom();
  26         @include border-radius(0);
  27         background-color: $light-gray !important;
  28         color: $dark-blue !important;
  29         margin: -0.2em -0.2em 0;
  30
  31         .ui-datepicker-month,
  32         .ui-datepicker-year {
  33             width: 48%;
  34             margin: 0 1px;
  35         }
  36
  37         .ui-datepicker-prev,
  38         .ui-datepicker-next {
  39             @include transition;
  40             @include transition-property(background, color);
  41             border: none !important;
  42             color: $gray;
  43             margin-top: .1em;
  44             text-align: center;
  45             top: 1px !important;
  46
  47             &:before {
  48                 vertical-align: -30%;
  49             }
  50         }
  51
  52         &.ui-state-disabled {
  53             .ui-datepicker-prev,
  54             .ui-datepicker-next {
  55                 background: none !important;
  56                 cursor: default;
  57             }
  58         }
  59
  60         &:not(.ui-state-disabled) {
  61             .ui-datepicker-prev:hover,
  62             .ui-datepicker-next:hover {
  63                 color: white;
  64                 background: $blue;
  65             }
  66         }
  67
  68         .ui-datepicker-prev {
  69             @include icon-before('icon-prev');
  70             left: 3px !important;
  71         }
  72
  73         .ui-datepicker-next {
  74             @include icon-before('icon-next');
  75             right: 3px !important;
  76         }
  77
  78         .ui-icon {
  79             display: none;
  80         }
  81     }
  82
  83     .ui-datepicker-calendar {
  84         background: white;
  85         padding: 0 .2em;
  86         table-layout: fixed;
  87
  88         th {
  89             cursor: default;
  90         }
  91
  92         td {
  93             padding: 0;
  94
  95             a, span {
  96                 @include single-transition(background);
  97                 border: 1px solid white;
  98                 text-align: center;
  99             }
 100         }
 101
 102         &.ui-state-disabled .ui-datepicker-current-day a {
 103             cursor: default;
 104         }
 105
 106         .ui-state-default {
 107             background: $light-blue;
 108         }
 109
 110         .ui-state-active {
 111             background: $blue;
 112             color: white !important;
 113             font-weight: bold;
 114         }
 115
 116         .ui-state-hover {
 117             background: $blue;
 118             color: white !important;
 119         }
 120     }
 121
 122     .ui-datepicker-buttonpane {
 123         margin: 0;
 124         padding: 0;
 125
 126         button.ui-datepicker-current {
 127             @include transition;
 128             @include transition-property(background, color);
 129             background: $light-blue;
 130             border: none !important;
 131             float: right;
 132             margin-bottom: .2em;
 133             margin-right: 1px;
 134             margin-top: .2em;
 135             opacity: 1;
 136             outline: none;
 137         }
 138
 139         &:not(.ui-state-disabled) button.ui-datepicker-current:hover {
 140             background: $blue;
 141             color: white;
 142         }
 143
 144         &.ui-state-disabled button.ui-datepicker-current {
 145             cursor: default;
 146         }
 147     }
 148 }
 149
 150 .ui-datepicker-trigger {
 151     @include icon-before('icon-calendar');
 152     background: transparent;
 153     border: none;
 154     color: $light-black;
 155     cursor: pointer;
 156     outline: none;
 157     padding: 0;
 158     position: relative;
 159     right: 20px;
 160     top: 2px;
 161
 162     &:hover:before {
 163         color: $blue;
 164     }
 165
 166     &:active:before {
 167         color: $dark-blue;
 168     }
 169 }
 170
 171 input.hasDatepicker {
 172     @include icon-before('icon-calendar');
 173     margin: 0 2px;
 174     padding-right: 22px !important;
 175
 176     &:disabled + button {
 177         pointer-events: none;
 178     }
 179 }