github.com/bosssauce/ponzu@v0.11.1-0.20200102001432-9bc41b703131/system/admin/static/editor/sass/components/date_picker/_default.time.scss (about)

     1  /* ==========================================================================
     2     $BASE-TIME-PICKER
     3     ========================================================================== */
     4  /**
     5   * The list of times.
     6   */
     7  .picker__list {
     8    list-style: none;
     9    padding: 0.75em 0 4.2em;
    10    margin: 0;
    11  }
    12  /**
    13   * The times on the clock.
    14   */
    15  .picker__list-item {
    16    border-bottom: 1px solid #dddddd;
    17    border-top: 1px solid #dddddd;
    18    margin-bottom: -1px;
    19    position: relative;
    20    background: #ffffff;
    21    padding: .75em 1.25em;
    22  }
    23  @media (min-height: 46.75em) {
    24    .picker__list-item {
    25      padding: .5em 1em;
    26    }
    27  }
    28  /* Hovered time */
    29  .picker__list-item:hover {
    30    cursor: pointer;
    31    color: #000000;
    32    background: #b1dcfb;
    33    border-color: #0089ec;
    34    z-index: 10;
    35  }
    36  /* Highlighted and hovered/focused time */
    37  .picker__list-item--highlighted {
    38    border-color: #0089ec;
    39    z-index: 10;
    40  }
    41  .picker__list-item--highlighted:hover,
    42  .picker--focused .picker__list-item--highlighted {
    43    cursor: pointer;
    44    color: #000000;
    45    background: #b1dcfb;
    46  }
    47  /* Selected and hovered/focused time */
    48  .picker__list-item--selected,
    49  .picker__list-item--selected:hover,
    50  .picker--focused .picker__list-item--selected {
    51    background: #0089ec;
    52    color: #ffffff;
    53    z-index: 10;
    54  }
    55  /* Disabled time */
    56  .picker__list-item--disabled,
    57  .picker__list-item--disabled:hover,
    58  .picker--focused .picker__list-item--disabled {
    59    background: #f5f5f5;
    60    border-color: #f5f5f5;
    61    color: #dddddd;
    62    cursor: default;
    63    border-color: #dddddd;
    64    z-index: auto;
    65  }
    66  /**
    67   * The clear button
    68   */
    69  .picker--time .picker__button--clear {
    70    display: block;
    71    width: 80%;
    72    margin: 1em auto 0;
    73    padding: 1em 1.25em;
    74    background: none;
    75    border: 0;
    76    font-weight: 500;
    77    font-size: .67em;
    78    text-align: center;
    79    text-transform: uppercase;
    80    color: #666;
    81  }
    82  .picker--time .picker__button--clear:hover,
    83  .picker--time .picker__button--clear:focus {
    84    color: #000000;
    85    background: #b1dcfb;
    86    background: #ee2200;
    87    border-color: #ee2200;
    88    cursor: pointer;
    89    color: #ffffff;
    90    outline: none;
    91  }
    92  .picker--time .picker__button--clear:before {
    93    top: -0.25em;
    94    color: #666;
    95    font-size: 1.25em;
    96    font-weight: bold;
    97  }
    98  .picker--time .picker__button--clear:hover:before,
    99  .picker--time .picker__button--clear:focus:before {
   100    color: #ffffff;
   101  }
   102  
   103  /* ==========================================================================
   104     $DEFAULT-TIME-PICKER
   105     ========================================================================== */
   106  /**
   107   * The frame the bounds the time picker.
   108   */
   109  .picker--time .picker__frame {
   110    min-width: 256px;
   111    max-width: 320px;
   112  }
   113  /**
   114   * The picker box.
   115   */
   116  .picker--time .picker__box {
   117    font-size: 1em;
   118    background: #f2f2f2;
   119    padding: 0;
   120  }
   121  @media (min-height: 40.125em) {
   122    .picker--time .picker__box {
   123      margin-bottom: 5em;
   124    }
   125  }