SASS
$color-clock: #266DD3
$color-background: #CFB3CD
=size($width, $height)
width: percentage($width / 100)
height: percentage($height / 100)
=position($top, $left)
position: absolute
top: percentage($top / 100)
left: percentage($left / 100)
body
padding-top: 10vh
background-color: $color-background
.clock-wrapper
width: 80vw
height: 80vw
position: relative
margin: auto
.clock
+size(12, 12)
+position(44, 44)
border-radius: 50%
background-color: lighten($color-clock, 50%)
box-shadow: inset 0.2vw 0.2vw 0 0.1vw darken($color-clock, 25%)
overflow: hidden
.clock-border
+size(16, 16)
+position(42, 42)
border-radius: 50%
background: linear-gradient(to bottom, darken($color-clock, 15%) 10%, darken($color-clock, 20%) 10%, darken($color-clock, 20%) 90%, darken($color-clock, 25%) 90%)
background-size: 100% 16%
box-shadow: 0.2vw 0.2vw 0 0.1vw darken($color-clock, 25%), inset 0.2vw 0.2vw 0.5vw 0 darken($color-clock, 5%), inset -0.2vw -0.2vw 0.5vw 0 darken($color-clock, 25%)
.clock-glass
+size(100, 100)
background: linear-gradient(to right, rgba($color-clock, 0.2), rgba($color-clock, 0) 40%)
transform: rotate(45deg)
+position(40, 40)
.watchstrap
+size(7, 90)
+position(5, 46.5)
background: linear-gradient(darken($color-clock, 15%) 10%, darken($color-clock, 20%) 10%, darken($color-clock, 20%) 90%, darken($color-clock, 25%) 90%)
background-size: 100% 2.5%
border-radius: 1vw 1vw 2vw 2vw
box-shadow: 0.2vw 0.2vw 0 0 darken($color-clock, 25%)
.point
background-color: $color-background
+size(15, 15 * 7 / 90)
margin-bottom: 2vw
border-radius: 50%
box-shadow: inset 0.2vw 0.2vw 0 0 darken($color-clock, 15%)
@for $n from 1 through 7
&:nth-of-type(#{$n})
+position(59 + 5 * $n, 43.5)
.buckle
+size(8, 4)
border-radius: 0.5vw
background-color: $color-clock
box-shadow: 0.3vw 0.2vw 0 0 darken($color-clock, 10%)
+position(15, 45.9)
.hook-outer
+size(6.5, 6.5)
+position(0, 46.1)
border-width: 2vw 0.7vw 0 0.7vw
border-color: $color-clock
border-style: solid
border-radius: 1vw
.hook-inner
+size(0.8, 6.5)
+position(1, 49.6)
background-color: darken($color-clock, 5%)
border-radius: 0.3vw
.minute-hand
+size(5, 43)
+position(7, 47.5)
background-color: lighten($color-clock, 10%)
transform-origin: bottom
border-radius: 2vw
animation: move-hand 5s linear infinite
.hour-hand
+size(5, 30)
+position(20, 47.5)
background-color: darken($color-clock, 10%)
transform-origin: bottom
border-radius: 2vw
animation: move-hand 60s linear infinite
.ticks
+size(100, 100)
@for $n from 1 through 12
.tick:nth-of-type(#{$n})
@if (($n - 1) % 3) == 0
+size(6, 50)
+position(0, 47)
background-color: darken($color-clock, 25%)
@else
+size(4, 50)
+position(0, 48)
background-color: darken($color-clock, 30%)
transform-origin: bottom
transform: rotate(30deg * ($n - 1))
.clock-inner
+size(80, 80)
+position(10, 10)
border-radius: 50%
background-color: lighten($color-clock, 50%)
.disc
+size(8, 8)
+position(46, 46)
border-radius: 50%
background-color: darken($color-clock, 30%)
.crown
+size(1.5, 3)
+position(48.75, 57.7)
background: linear-gradient(to bottom, darken($color-clock, 30%) 80%, darken($color-clock, 35%) 80%)
background-size: 100% 0.5vw
border-radius: 1vw
@keyframes move-hand
0%
transform: rotate(0deg)
100%
transform: rotate(360deg)
