git.roojs.org Git - bootswatch/blob - material-kit/sass/material-kit/plugins/_plugin-datepicker.scss

   1 /*!
   2  * Datepicker for Bootstrap
   3  *
   4  * Copyright 2012 Stefan Petre
   5  * Licensed under the Apache License v2.0
   6  * http://www.apache.org/licenses/LICENSE-2.0
   7  *
   8  */
   9
  10 /*
  11  *
  12  *   SCSS by Creative Tim
  13  *   http://www.creative-tim.com
  14  *
  15  */
  16
  17 .datepicker {
  18     top: 0;
  19     left: 0;
  20     padding: 4px;
  21     margin-top: 1px;
  22     -webkit-border-radius: 4px;
  23     -moz-border-radius: 4px;
  24     border-radius: 4px;
  25
  26     > div {
  27       display: none;
  28     }
  29
  30     table {
  31          width: 100%;
  32          margin: 0;
  33     }
  34
  35     td,
  36     th {
  37         text-align: center;
  38         width: 20px;
  39         height: 20px;
  40         -webkit-border-radius: 4px;
  41         -moz-border-radius: 4px;
  42         border-radius: 4px;
  43     }
  44
  45     td{
  46         text-align: center;
  47         p{
  48             font-size: $font-size-h6;
  49             font-weight: $font-weight-default;
  50             border-radius: 50%;
  51             height: 29px;
  52             line-height: 29px;
  53             margin: 3px 0 8px;
  54             width: 29px;
  55         }
  56         :hover{
  57             cursor: pointer;
  58         }
  59     }
  60
  61     th{
  62          font-weight: $font-weight-bold;
  63
  64          &.switch-datepicker{
  65              font-size: $font-size-h6;
  66         }
  67     }
  68
  69     .prev p,
  70     .next p{
  71         font-size: $font-size-h3;
  72     }
  73
  74     p:hover{
  75          background: #eeeeee;
  76     }
  77
  78     .day.disabled {
  79          color: #eeeeee;
  80     }
  81
  82     td.old,
  83     td.new {
  84         color: #999999;
  85         border-top: 0;
  86     }
  87
  88     td.active p,
  89     td.active:hover p{
  90         @include shadow-4dp();
  91         color: #ffffff;
  92         background-color: $brand-primary;
  93     }
  94
  95     td.primary p,
  96     td.primary:hover p{
  97       background-color: $brand-primary;
  98     }
  99     td.info p,
 100     td.info:hover p{
 101       background-color: $brand-info;
 102     }
 103     td.success p,
 104     td.success:hover p{
 105       background-color: $brand-success;
 106     }
 107     td.warning p,
 108     td.warning:hover p{
 109       background-color: $brand-warning;
 110     }
 111     td.danger p,
 112     td.danger:hover p{
 113       background-color: $brand-danger;
 114     }
 115
 116     span {
 117         display: block;
 118         width: 55px;
 119         height: 54px;
 120         line-height: 54px;
 121         float: left;
 122         margin: 2px;
 123         cursor: pointer;
 124         -webkit-border-radius: 4px;
 125         -moz-border-radius: 4px;
 126         border-radius: 4px;
 127
 128         &.old {
 129             color: #999999;
 130         }
 131     }
 132     span{
 133         &.active{
 134             &,
 135             &:focus,
 136             &:hover,
 137             &:active{
 138                 background-color: $brand-primary;
 139                 @include shadow-4dp();
 140             }
 141         }
 142
 143         &.active{
 144             color: $white-color;
 145         }
 146     }
 147
 148     span:hover {
 149         background-color: #EEEEEE;
 150     }
 151     span.primary,
 152     span.primary:hover{
 153         background-color: $brand-primary;
 154     }
 155     span.info,
 156     span.info:hover{
 157         background-color: $brand-info;
 158     }
 159     span.success,
 160     span.success:hover{
 161         background-color: $brand-success;
 162     }
 163     span.warning,
 164     span.warning:hover{
 165         background-color: $brand-warning;
 166     }
 167     span.danger,
 168     span.danger:hover{
 169         background-color: $brand-danger;
 170     }
 171     th.switch-datepicker {
 172       width: 145px;
 173     }
 174     th.next,
 175     th.prev {
 176       font-size: 21px;
 177     }
 178     thead tr:first-child th {
 179       cursor: pointer;
 180     }
 181     thead tr:first-child th:hover {
 182       background: #eeeeee;
 183     }
 184
 185     &.dropdown-menu{
 186         border-radius: $border-radius-base;
 187         @include shadow-big();
 188         @include transition($fast-transition-time, $transition-linear);
 189         margin-top: -20px;
 190         opacity: 0;
 191         visibility: hidden;
 192     }
 193
 194     &.dropdown-menu.open{
 195         opacity: 1;
 196         visibility: visible;
 197         margin-top: 1px;
 198     }
 199
 200     .table-condensed > tbody > tr > td{
 201         padding: 2px;
 202     }
 203
 204     .table-condensed > thead > tr > th{
 205         padding: 0;
 206     }
 207 }
 208
 209 .input-append.date .add-on i,
 210 .input-prepend.date .add-on i {
 211   display: block;
 212   cursor: pointer;
 213   width: 16px;
 214   height: 16px;
 215 }
 216
 217 .datepicker-months thead{
 218     padding: 0 0 3px;
 219     display: block;
 220 }