services/self-service/src/main/resources/webapp/src/app/shared/time-picker/time-picker.component.scss

/*!
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */

@import "_variables.scss";

@-webkit-keyframes bounce {
  from {
    opacity: 0;
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
  }

  70% {
    opacity: 1;
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }

  to {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes bounce {
  from {
    opacity: 0;
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
  }

  70% {
    opacity: 1;
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }

  to {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.time-picker {
  .time-select {
    .not-allowed {
      pointer-events: none;
    }
  }

  .button {
    padding: 0;
    margin: 0;
    min-width: 44px;
  }

  mat-icon {
    cursor: pointer;
    color: #757575;
    font-size: 16px;
    margin-right: 3px;
  }
}

.timepicker-dialog.mat-dialog-content {
  margin: -24px;
  padding: 0;
}

.timepicker-dialog .mat-button-ripple.mat-button-ripple-round.mat-ripple {
  border-radius: 50%;
}

.time-cover {
  display: flex;
  flex-direction: column;
  max-height: 100%;
  width: 300px;

  .container {
    min-width: 160px;
    width: 160px;
    padding: 15px;

    &.mat-toolbar-single-row {
      background: $modal-header-color;
      width: 100%;
    }
  }

  .selected-time {
    display: flex;
    font-size: 3.5rem;
    font-weight: 400;

    .active {
      color: #36afd5;
    }
  }

  .selected-meridiem {
    padding-top: 2rem;
    font-size: 1rem;
    line-height: 1.3rem;

    .active {
      color: #36afd5;
    }
  }

  .cover-block {
    width: 100%;
    padding: 6px;

    .actions {
      padding: 10px 10px 30px;
      text-align: center;
    }
  }
}

.selected-time > span,
.selected-meridiem > span {
  outline: 0;
  opacity: 0.5;
}

.selected-time > span:not(.active),
.selected-meridiem > span:not(.active) {
  cursor: pointer;
}

.selected-time > span.active,
.selected-meridiem > span.active {
  opacity: 1;
}

.animation.ng-enter {
  -webkit-transition: all 0.3s cubic-bezier(0.35, 0, 0.25, 1);
  transition: all 0.3s cubic-bezier(0.35, 0, 0.25, 1);
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-name: bounce;
  animation-name: bounce;
}

.ticker-wrap {
  .ticker {
    width: 200px;
    height: 200px;
    padding: 24px;
    margin: 30px auto;
    border-radius: 50%;
    cursor: pointer;
    background: #ededed;

    .ticker-container {
      position: relative;
      display: block;
      width: 100%;
      height: 100%;
    }

    .ticker-center {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      height: 6px;
      width: 6px;
      margin: auto;
      border-radius: 50%;
    }

    .pointer {
      box-shadow: none;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 0;
      width: 1px;
      height: 50%;
      margin: 0 auto;
      padding: 0;
      transform-origin: top center;
      transition: transform 200ms;
      pointer-events: none;
    }

    .ticker-step {
      position: absolute;
      display: block;
      transform: translate(-50%, -50%);
      transition: transform 200ms;

      .mat-mini-fab {
        box-shadow: none;
        background-color: transparent;
        transform: translateX(0);
      }
    }

    .ticker-selected {
      position: absolute;
      bottom: -19px;
      left: -19px;
      min-width: 0;
      min-height: 0;
      pointer-events: none;
      box-shadow: none;
      cursor: none;
      transform: none;
    }
  }
}

.ticker-deg0 {
  top: 0%;
  left: 50%;
}

.ticker-deg15 {
  top: 1.70370869%;
  left: 62.94095226%;
}

.ticker-deg30 {
  top: 6.69872981%;
  left: 75%;
}

.ticker-deg45 {
  top: 14.64466094%;
  left: 85.35533905%;
}

.ticker-deg60 {
  top: 25%;
  left: 93.30127019%;
}

.ticker-deg75 {
  top: 37.05904774%;
  left: 98.29629131%;
}

.ticker-deg90 {
  top: 50%;
  left: 100%;
}

.ticker-deg105 {
  top: 62.94095226%;
  left: 98.29629131%;
}

.ticker-deg120 {
  top: 75%;
  left: 93.30127019%;
}

.ticker-deg135 {
  top: 85.35533906%;
  left: 85.35533906%;
}

.ticker-deg150 {
  top: 93.30127019%;
  left: 75%;
}

.ticker-deg165 {
  top: 98.29629131%;
  left: 62.94095226%;
}

.ticker-deg180 {
  top: 100%;
  left: 51%;
}

.ticker-deg195 {
  top: 98.29629131%;
  left: 37.05904774%;
}

.ticker-deg210 {
  top: 93.30127019%;
  left: 26%;
}

.ticker-deg225 {
  top: 85.35533906%;
  left: 14.64466094%;
}

.ticker-deg240 {
  top: 75%;
  left: 7.69872981%;
}

.ticker-deg255 {
  top: 62.94095226%;
  left: 2.703708686%;
}

.ticker-deg270 {
  top: 50%;
  left: 1%;
}

.ticker-deg285 {
  top: 37.05904774%;
  left: 1.703708686%;
}

.ticker-deg300 {
  top: 25%;
  left: 6.69872981%;
}

.ticker-deg315 {
  top: 14.64466094%;
  left: 14.64466094%;
}

.ticker-deg330 {
  top: 6.69872981%;
  left: 25%;
}

.ticker-deg345 {
  top: 1.703708686%;
  left: 37.05904774%;
}

.ticker-deg360 {
  top: 0%;
  left: 50%;
}