summaryrefslogtreecommitdiff
path: root/sass/components/_timepicker.scss
diff options
context:
space:
mode:
authorDaniel Friesel <derf@finalrewind.org>2020-11-21 14:13:41 +0100
committerDaniel Friesel <derf@finalrewind.org>2020-11-21 14:13:41 +0100
commite3fba3dcd493f609e107435867c4a67cb7ee420f (patch)
treecd228574b1d4f4e446fac87e9d6fe3eeffe27b63 /sass/components/_timepicker.scss
parent88d3e67474c518a5c422b5f0e47c58147f31fe6e (diff)
import materialize sass sources instead of relying on npm
Diffstat (limited to 'sass/components/_timepicker.scss')
-rw-r--r--sass/components/_timepicker.scss183
1 files changed, 183 insertions, 0 deletions
diff --git a/sass/components/_timepicker.scss b/sass/components/_timepicker.scss
new file mode 100644
index 0000000..fa602fb
--- /dev/null
+++ b/sass/components/_timepicker.scss
@@ -0,0 +1,183 @@
+/* Timepicker Containers */
+.timepicker-modal {
+ max-width: 325px;
+ max-height: none;
+}
+
+.timepicker-container.modal-content {
+ display: flex;
+ flex-direction: column;
+ padding: 0;
+}
+
+.text-primary {
+ color: rgba(255, 255, 255, 1);
+}
+
+
+/* Clock Digital Display */
+.timepicker-digital-display {
+ flex: 1 auto;
+ background-color: $secondary-color;
+ padding: 10px;
+ font-weight: 300;
+}
+
+.timepicker-text-container {
+ font-size: 4rem;
+ font-weight: bold;
+ text-align: center;
+ color: rgba(255, 255, 255, 0.6);
+ font-weight: 400;
+ position: relative;
+ user-select: none;
+}
+
+.timepicker-span-hours,
+.timepicker-span-minutes,
+.timepicker-span-am-pm div {
+ cursor: pointer;
+}
+
+.timepicker-span-hours {
+ margin-right: 3px;
+}
+
+.timepicker-span-minutes {
+ margin-left: 3px;
+}
+
+.timepicker-display-am-pm {
+ font-size: 1.3rem;
+ position: absolute;
+ right: 1rem;
+ bottom: 1rem;
+ font-weight: 400;
+}
+
+
+/* Analog Clock Display */
+.timepicker-analog-display {
+ flex: 2.5 auto;
+}
+
+.timepicker-plate {
+ background-color: $timepicker-clock-plate-bg;
+ border-radius: 50%;
+ width: 270px;
+ height: 270px;
+ overflow: visible;
+ position: relative;
+ margin: auto;
+ margin-top: 25px;
+ margin-bottom: 5px;
+ 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: $timepicker-clock-color;
+ 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: transparentize($secondary-color, .75);
+}
+.timepicker-dial {
+ transition: transform 350ms, opacity 350ms;
+}
+.timepicker-dial-out {
+ &.timepicker-hours {
+ transform: scale(1.1, 1.1);
+ }
+
+ &.timepicker-minutes {
+ transform: scale(.8, .8);
+ }
+
+ opacity: 0;
+}
+.timepicker-canvas {
+ transition: opacity 175ms;
+
+ line {
+ stroke: $secondary-color;
+ stroke-width: 4;
+ stroke-linecap: round;
+ }
+}
+.timepicker-canvas-out {
+ opacity: 0.25;
+}
+.timepicker-canvas-bearing {
+ stroke: none;
+ fill: $secondary-color;
+}
+.timepicker-canvas-bg {
+ stroke: none;
+ fill: $secondary-color;
+}
+
+
+/* Footer */
+.timepicker-footer {
+ margin: 0 auto;
+ padding: 5px 1rem;
+ display: flex;
+ justify-content: space-between;
+}
+
+.timepicker-clear {
+ color: $error-color;
+}
+
+.timepicker-close {
+ color: $secondary-color;
+}
+
+.timepicker-clear,
+.timepicker-close {
+ padding: 0 20px;
+}
+
+/* Media Queries */
+@media #{$medium-and-up} {
+ .timepicker-modal {
+ max-width: 600px;
+ }
+
+ .timepicker-container.modal-content {
+ flex-direction: row;
+ }
+
+ .timepicker-text-container {
+ top: 32%;
+ }
+
+ .timepicker-display-am-pm {
+ position: relative;
+ right: auto;
+ bottom: auto;
+ text-align: center;
+ margin-top: 1.2rem;
+ }
+}