44 lines
1.3 KiB
Sass
44 lines
1.3 KiB
Sass
|
@import compass/css3
|
||
|
|
@import mixins
|
||
|
|
@import url("//fonts.googleapis.com/css?family=Rye")
|
||
|
|
|
||
|
|
$themeName: "odometer-theme-slot-machine"
|
||
|
|
$spacing: .15em
|
||
|
|
$borderRadius: .2em
|
||
|
|
|
||
|
|
+spinning-odometer($themeName)
|
||
|
|
|
||
|
|
.odometer.odometer-auto-theme, .odometer#{"." + $themeName}
|
||
|
|
+border-radius(.34em)
|
||
|
|
+background-image(linear-gradient(#ff0, #ffa500))
|
||
|
|
background-color: #fc0
|
||
|
|
font-family: "Rye", monospace
|
||
|
|
padding: $spacing
|
||
|
|
color: #f80000
|
||
|
|
line-height: 1.35em
|
||
|
|
border: .03em solid #000
|
||
|
|
-webkit-text-stroke: .05em #000
|
||
|
|
|
||
|
|
.odometer-digit
|
||
|
|
+box-shadow(inset 0 0 .1em rgba(0, 0, 0, 0.5), 0 0 0 .03em #fff, 0 0 0 .05em rgba(0, 0, 0, 0.2))
|
||
|
|
+border-radius(.2em)
|
||
|
|
+background-image(linear-gradient(top, #ccc 0%, #fff 20%, #fff 80%, #ccc 100%))
|
||
|
|
border: .03em solid #444
|
||
|
|
padding: .1em $spacing 0
|
||
|
|
|
||
|
|
&:first-child
|
||
|
|
+box-shadow(inset .05em 0 .1em rgba(0, 0, 0, 0.5), 0 0 0 .03em #fff, 0 0 0 .05em rgba(0, 0, 0, 0.2))
|
||
|
|
|
||
|
|
&:last-child
|
||
|
|
+box-shadow(inset -.05em 0 .1em rgba(0, 0, 0, 0.5), 0 0 0 .03em #fff, 0 0 0 .05em rgba(0, 0, 0, 0.2))
|
||
|
|
|
||
|
|
+ .odometer-digit
|
||
|
|
margin-left: $spacing
|
||
|
|
|
||
|
|
.odometer-digit-inner
|
||
|
|
padding-top: .08em
|
||
|
|
|
||
|
|
.odometer-digit-inner, .odometer-value.odometer-last-value
|
||
|
|
left: 0
|
||
|
|
right: 0
|
||
|
|
text-align: center
|