kmaterialize 2.0.0 → 2.3.3-1.0.0

package/components/timepicker/_timepicker.scss

@@ -0,0 +1,362 @@
+@use '../../sass/variables' as *;
+
+.timepicker-container {
+  display: flex;
+  flex-direction: column;
+  max-width: 325px;
+  padding: 0;
+  background-color: var(--md-sys-color-inverse-on-surface);
+}
+
+.text-primary {
+  color:  var(--md-sys-color-on-primary);
+}
+
+/* Clock Digital Display */
+.timepicker-digital-display {
+  width: auto;
+  flex: 1 auto;
+  // background-color: var(--md-sys-color-surface);
+  padding: 2rem .71rem .67rem .71rem;
+  font-weight: 300;
+}
+
+.timepicker-text-container {
+  display: flex;
+  font-size: 4rem;
+  text-align: left;
+  color: var(--font-on-primary-color-medium);
+  font-weight: 400;
+  /*position: relative;*/
+  user-select: none;
+  padding: 1rem 1rem 1.3rem 1rem;
+
+  input[type=text]{
+    height: 4rem;
+    color: var(--md-sys-color-secondary);
+    border-bottom: 0px;
+    font-size: 4rem;
+    direction: ltr;
+  }
+}
+
+.timepicker-display-column {
+  display: inline-flex;
+}
+
+.timepicker-display-digital-clock {
+  flex-grow: 1;
+  display: inline-flex;
+}
+
+.timepicker-input-hours-wrapper,
+.timepicker-input-minutes-wrapper {
+  width: 6.85rem;
+  height: 5.75rem;
+}
+
+.timepicker-input-hours,
+.timepicker-input-minutes,
+.timepicker-span-am-pm div {
+  cursor: pointer;
+}
+
+input[type=text].timepicker-input-hours,
+input[type=text].timepicker-input-minutes {
+  height: 100%;
+  padding: 1.33rem .8rem;
+  border: 0;
+  text-align: center;
+  color: var(--md-sys-color-on-background);
+  background-color: var(--md-sys-color-surface-variant);
+
+  &:focus {
+    background-color: var(--md-sys-color-primary-container);
+  }
+}
+
+.timepicker-input-divider-wrapper {
+  width: 1.6rem;
+  text-align: center;
+}
+
+/*input[type=text].text-primary {
+  color: var(--md-sys-color-on-background);
+}*/
+
+.timepicker-display-am-pm {
+  font-size: 1.3rem;
+  /*position: absolute;
+  top: 1rem;
+  right: 1rem;*/
+  font-weight: 400;
+}
+
+.timepicker-span-am-pm {
+  height: 5.75rem;
+  max-width: 3.5rem;
+}
+
+.timepicker-container .am-btn,
+.timepicker-container .pm-btn {
+  width: 3.6rem;
+  height: 50%;
+  padding-left: calc(var(--btn-padding) / 1.8);
+  padding-right: calc(var(--btn-padding) / 1.8);
+  line-height: 2rem;
+  vertical-align: middle;
+  text-align: center;
+  // background-color: transparent;
+  border: 1px solid var(--md-sys-color-outline);
+}
+
+.timepicker-container .am-btn {
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.timepicker-container .pm-btn {
+  border-top: 0;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+/* Analog Clock Display */
+.timepicker-analog-display {
+  flex: 2.5 auto;
+  padding: .67rem;
+  // background-color: var(--md-sys-color-surface);
+}
+
+.timepicker-plate {
+  background-color: var(--md-sys-color-surface-variant);
+  border-radius: 50%;
+  width: 260px;
+  height: 260px;
+  overflow: visible;
+  position: relative;
+  margin: 0 1.6rem 1.6rem 1.6rem;
+  user-select: none;
+}
+
+.timepicker-canvas,
+.timepicker-dial {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+
+.timepicker-minutes {
+  visibility: hidden;
+}
+
+.timepicker-tick {
+  border-radius: 50%;
+  color: var(--md-sys-color-on-background);
+  line-height: 40px;
+  text-align: center;
+  width: 40px;
+  height: 40px;
+  position: absolute;
+  cursor: pointer;
+  font-size: 15px;
+}
+
+.timepicker-tick.active,
+.timepicker-tick:hover {
+  background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 6%);
+}
+
+.timepicker-dial {
+  transition: transform 350ms, opacity 350ms;
+}
+
+.timepicker-dial-out {
+  opacity: 0;
+
+  &.timepicker-hours {
+    transform: scale(1.1, 1.1);
+  }
+
+  &.timepicker-minutes {
+    transform: scale(.8, .8);
+  }
+}
+
+.timepicker-canvas {
+  transition: opacity 175ms;
+
+  line {
+    stroke: var(--md-sys-color-primary);
+    stroke-width: 4;
+    stroke-linecap: round;
+  }
+}
+
+.timepicker-canvas-out {
+  opacity: 0.25;
+}
+
+.timepicker-canvas-bearing {
+  stroke: none;
+  fill: var(--md-sys-color-primary);
+}
+
+.timepicker-canvas-bg {
+  stroke: none;
+  fill: var(--md-sys-color-primary);
+}
+
+
+/* Footer */
+.timepicker-footer {
+  margin: 0 auto;
+  padding: 5px 1rem;
+  display: flex;
+  justify-content: space-between;
+}
+
+.timepicker-clear {
+  color: var(--md-sys-color-error);
+}
+
+.timepicker-close {
+  color: var(--md-sys-color-primary);
+}
+
+.timepicker-clear,
+.timepicker-close {
+  padding: 0 20px;
+}
+
+/* Display modes */
+.timepicker-modal {
+  max-width: 326px;
+  max-height: none;
+  background-color: var(--md-sys-color-inverse-on-surface);
+  overflow-x: hidden;
+
+  // Reset margins and paddings since they are defined by the modal instance
+  .timepicker-container {
+    margin-left: calc(-1 * var(--modal-padding));
+    margin-right: calc(-1 * var(--modal-padding));
+  }
+
+  .modal-header + .modal-content {
+    .timepicker-digital-display {
+      padding-top: 0;
+    }
+
+    .timepicker-text-container {
+      padding-top: 4px;
+    }
+  }
+
+  .timepicker-analog-display {
+    padding-bottom: 0;
+  }
+
+  .timepicker-plate {
+    margin-bottom: 0;
+  }
+}
+
+/* Media Queries */
+@media #{$large-and-up} {
+  .timepicker-container {
+    width: auto;
+    max-width: 620px;
+  }
+
+  .timepicker-container {
+    flex-direction: row;
+  }
+
+  .timepicker-digital-display {
+    padding: .67rem;
+  }
+
+  .timepicker-text-container {
+    /*top: 31%;*/
+    flex-direction: column;
+    margin-top: 4.8rem;
+    text-align: center;
+  }
+
+  .timepicker-display-column {
+    padding: 0 3%;
+  }
+
+  .timepicker-display-am-pm {
+    margin-top: 1.1rem;
+  }
+
+  .timepicker-span-am-pm {
+    display: flex;
+    flex-grow: 1;
+    max-width: unset;
+    /*width: 100%;
+    padding: 0 4%;
+    flex-wrap: wrap;
+    flex-direction: row;
+    display: flex;*/
+  }
+
+  .timepicker-container .am-btn,
+  .timepicker-container .pm-btn {
+    flex-grow: 1;
+    /*width: auto;*/
+    padding-left: calc(var(--btn-padding) / .565);
+    padding-right: calc(var(--btn-padding) / .565);
+    border-radius: var(--btn-border-radius);
+    border: 1px solid var(--md-sys-color-outline);
+  }
+
+  .timepicker-container .am-btn {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  .timepicker-container .pm-btn {
+    border-left: 0;
+    border-bottom-left-radius: 0;
+    border-top-left-radius: 0;
+  }
+
+  .timepicker-plate {
+    margin-top: 1.6rem;
+  }
+
+  /* Display modes */
+  .timepicker-modal {
+    width: 65%;
+    max-width: 605px;
+
+    .modal-header + .modal-content {
+      .timepicker-digital-display,
+      .timepicker-analog-display {
+        padding-top: 0;
+      }
+
+      .timepicker-text-container {
+        margin-top: 2.4rem;
+      }
+
+      .timepicker-plate {
+        margin-top: 4px;
+        margin-bottom: 0;
+      }
+    }
+
+    .timepicker-digital-display,
+    .timepicker-analog-display {
+      padding-bottom: 0;
+    }
+
+    .timepicker-plate {
+      margin-bottom: 0;
+    }
+  }
+}