Skip to content

Instantly share code, notes, and snippets.

@lewismcarey

lewismcarey/Analogue time Scss.scss

Last active August 29, 2015 14:14
Show Gist options
  • Save lewismcarey/1ead6f27c1d2a6655256 to your computer and use it in GitHub Desktop.
Save lewismcarey/1ead6f27c1d2a6655256 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
Analogue time css.css
[datetime^="T00"]:before {
transform: rotate(0deg);
}
[datetime$=":00"]:after {
transform: rotate(0deg);
}
[datetime^="T01"]:before {
transform: rotate(30deg);
}
[datetime$=":01"]:after {
transform: rotate(6deg);
}
[datetime^="T02"]:before {
transform: rotate(60deg);
}
[datetime$=":02"]:after {
transform: rotate(12deg);
}
[datetime^="T03"]:before {
transform: rotate(90deg);
}
[datetime$=":03"]:after {
transform: rotate(18deg);
}
[datetime^="T04"]:before {
transform: rotate(120deg);
}
[datetime$=":04"]:after {
transform: rotate(24deg);
}
[datetime^="T05"]:before {
transform: rotate(150deg);
}
[datetime$=":05"]:after {
transform: rotate(30deg);
}
[datetime^="T06"]:before {
transform: rotate(180deg);
}
[datetime$=":06"]:after {
transform: rotate(36deg);
}
[datetime^="T07"]:before {
transform: rotate(210deg);
}
[datetime$=":07"]:after {
transform: rotate(42deg);
}
[datetime^="T08"]:before {
transform: rotate(240deg);
}
[datetime$=":08"]:after {
transform: rotate(48deg);
}
[datetime^="T09"]:before {
transform: rotate(270deg);
}
[datetime$=":09"]:after {
transform: rotate(54deg);
}
[datetime^="T10"]:before {
transform: rotate(300deg);
}
[datetime$=":10"]:after {
transform: rotate(60deg);
}
[datetime^="T11"]:before {
transform: rotate(330deg);
}
[datetime$=":11"]:after {
transform: rotate(66deg);
}
[datetime^="T12"]:before {
transform: rotate(360deg);
}
[datetime$=":12"]:after {
transform: rotate(72deg);
}
[datetime$=":13"]:after {
transform: rotate(78deg);
}
[datetime$=":14"]:after {
transform: rotate(84deg);
}
[datetime$=":15"]:after {
transform: rotate(90deg);
}
[datetime$=":16"]:after {
transform: rotate(96deg);
}
[datetime$=":17"]:after {
transform: rotate(102deg);
}
[datetime$=":18"]:after {
transform: rotate(108deg);
}
[datetime$=":19"]:after {
transform: rotate(114deg);
}
[datetime$=":20"]:after {
transform: rotate(120deg);
}
[datetime$=":21"]:after {
transform: rotate(126deg);
}
[datetime$=":22"]:after {
transform: rotate(132deg);
}
[datetime$=":23"]:after {
transform: rotate(138deg);
}
[datetime$=":24"]:after {
transform: rotate(144deg);
}
[datetime$=":25"]:after {
transform: rotate(150deg);
}
[datetime$=":26"]:after {
transform: rotate(156deg);
}
[datetime$=":27"]:after {
transform: rotate(162deg);
}
[datetime$=":28"]:after {
transform: rotate(168deg);
}
[datetime$=":29"]:after {
transform: rotate(174deg);
}
[datetime$=":30"]:after {
transform: rotate(180deg);
}
[datetime$=":31"]:after {
transform: rotate(186deg);
}
[datetime$=":32"]:after {
transform: rotate(192deg);
}
[datetime$=":33"]:after {
transform: rotate(198deg);
}
[datetime$=":34"]:after {
transform: rotate(204deg);
}
[datetime$=":35"]:after {
transform: rotate(210deg);
}
[datetime$=":36"]:after {
transform: rotate(216deg);
}
[datetime$=":37"]:after {
transform: rotate(222deg);
}
[datetime$=":38"]:after {
transform: rotate(228deg);
}
[datetime$=":39"]:after {
transform: rotate(234deg);
}
[datetime$=":40"]:after {
transform: rotate(240deg);
}
[datetime$=":41"]:after {
transform: rotate(246deg);
}
[datetime$=":42"]:after {
transform: rotate(252deg);
}
[datetime$=":43"]:after {
transform: rotate(258deg);
}
[datetime$=":44"]:after {
transform: rotate(264deg);
}
[datetime$=":45"]:after {
transform: rotate(270deg);
}
[datetime$=":46"]:after {
transform: rotate(276deg);
}
[datetime$=":47"]:after {
transform: rotate(282deg);
}
[datetime$=":48"]:after {
transform: rotate(288deg);
}
[datetime$=":49"]:after {
transform: rotate(294deg);
}
[datetime$=":50"]:after {
transform: rotate(300deg);
}
[datetime$=":51"]:after {
transform: rotate(306deg);
}
[datetime$=":52"]:after {
transform: rotate(312deg);
}
[datetime$=":53"]:after {
transform: rotate(318deg);
}
[datetime$=":54"]:after {
transform: rotate(324deg);
}
[datetime$=":55"]:after {
transform: rotate(330deg);
}
[datetime$=":56"]:after {
transform: rotate(336deg);
}
[datetime$=":57"]:after {
transform: rotate(342deg);
}
[datetime$=":58"]:after {
transform: rotate(348deg);
}
[datetime$=":59"]:after {
transform: rotate(354deg);
}
body {
background-color: gray;
}
time {
background-color: white;
position: relative;
display: inline-block;
width: 100px;
height: 100px;
border-radius: 50%;
background-image: radial-gradient(circle, #000000 6px, rgba(0, 0, 0, 0) 6px);
background-position: center center;
margin: 20px;
}
time:before {
content: "";
display: block;
position: absolute;
width: 0;
height: 0;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
border-bottom: 30px solid black;
background-color: transparent;
top: 20px;
left: 48px;
transform-origin: center bottom;
}
time:after {
content: "";
display: block;
position: absolute;
width: 0;
height: 0;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
border-bottom: 40px solid black;
background-color: transparent;
top: 10px;
left: 48px;
transform-origin: center bottom;
}
Raw
Analogue time element.html
<time datetime="T08:00"></time>
<time datetime="T03:18"></time>
<time datetime="T11:48"></time>
<time datetime="T01:24"></time>
Raw
Analogue time Scss.scss
// ----
// Sass (v3.4.11)
// Compass (v1.0.3)
// ----
@for $i from 0 through 59 {
$degmin : $i * 6;
$deghour : $i * 30;
@if $i < 10 {
[datetime^="T0#{$i}"]:before { transform: rotate(#{$deghour}deg) }
[datetime$=":0#{$i}"]:after { transform: rotate(#{$degmin}deg) }
}
@if $i >= 10 {
@if $i <= 12 {
[datetime^="T#{$i}"]:before { transform: rotate(#{$deghour}deg) }
}
[datetime$=":#{$i}"]:after { transform: rotate(#{$degmin}deg) }
}
}
body {
background-color: gray;
}
time {
background-color: white;
position: relative;
display: inline-block;
width: 100px;
height: 100px;
border-radius: 50%;
background-image: radial-gradient(circle, black 6px, transparent 6px );
background-position: center center;
margin: 20px;
&:before {
content: "";
display: block;
position: absolute;
width: 0;
height: 0;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
border-bottom: 30px solid black;
background-color: transparent;
top: 20px;
left: 48px;
transform-origin: center bottom;
}
&:after {
content: "";
display: block;
position: absolute;
width: 0;
height: 0;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
border-bottom: 40px solid black;
background-color: transparent;
top: 10px;
left: 48px;
transform-origin: center bottom;
}
}
Raw
SassMeister-rendered.html
<time datetime="T08:00"></time>
<time datetime="T03:18"></time>
<time datetime="T11:48"></time>
<time datetime="T01:24"></time>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment