wcfsetup/install/files/style/ui/datePicker.scss

   1 .inputAddon > .inputDatePicker {
   2         cursor: pointer;
   3         flex: 0 1 200px;
   4         min-width: 200px;
   5 }
   6
   7 .datePicker {
   8         background-color: $wcfDropdownBackground;
   9         border-radius: 2px;
  10         box-shadow: 0 2px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  11         color: $wcfDropdownText;
  12         display: none;
  13         position: absolute;
  14         width: 240px;
  15         z-index: 450;
  16
  17         &.active {
  18                 display: block;
  19         }
  20
  21         &.datePickerTime {
  22                 &.datePickerTimeOnly {
  23                         > header,
  24                         > ul {
  25                                 display: none;
  26                         }
  27
  28                         > footer {
  29                                 border-top-width: 0;
  30                         }
  31                 }
  32
  33                 > footer {
  34                         display: block;
  35                 }
  36         }
  37
  38         > header {
  39                 align-items: center;
  40                 display: flex;
  41
  42                 > a {
  43                         display: block;
  44                         flex: 0 0 auto;
  45                         padding: 10px;
  46
  47                         &:not(.active) {
  48                                 visibility: hidden;
  49                         }
  50                 }
  51
  52                 > span {
  53                         display: block;
  54                         flex: 1 1 auto;
  55                         padding: 10px 0;
  56                         text-align: center;
  57                 }
  58         }
  59
  60         select.year {
  61                 margin-left: 5px;
  62         }
  63
  64         > ul > li {
  65                 border-top: 1px solid $wcfDropdownBorderInner;
  66                 display: flex;
  67
  68                 &.weekdays,
  69                 &.weekdays + li {
  70                         border-top-color: $wcfDropdownBorderInner;
  71                 }
  72
  73                 > a,
  74                 > span {
  75                         display: block;
  76                         flex: 1;
  77                         padding: 5px 0;
  78                         text-align: center;
  79
  80                         &:not(:last-child) {
  81                                 border-right: 1px solid $wcfDropdownBorderInner;
  82                         }
  83                 }
  84
  85                 > a {
  86                         color: $wcfDropdownLink;
  87
  88                         &:hover {
  89                                 text-decoration: none;
  90                         }
  91
  92                         &.active,
  93                         &:not(.otherMonth):hover {
  94                                 background-color: $wcfDropdownBackgroundActive;
  95                                 color: $wcfDropdownLinkActive;
  96                         }
  97
  98                         &.otherMonth {
  99                                 color: $wcfContentDimmedText;
 100                                 cursor: default;
 101                         }
 102                 }
 103
 104                 > span {
 105                         color: $wcfContentDimmedText;
 106                         text-transform: uppercase;
 107
 108                         @include wcfFontSmall;
 109                 }
 110         }
 111
 112         > footer {
 113                 border-top: 1px solid $wcfDropdownBorderInner;
 114                 display: none;
 115                 padding: 10px;
 116                 position: relative;
 117                 text-align: center;
 118         }
 119 }