85 lines
2.1 KiB
Sass
85 lines
2.1 KiB
Sass
$backgroundSize: 516px // Größe Bild im Kalender
|
|
$bgPosition: -13px // Position Bg und Türen
|
|
$kalenderWidth: 460px // breite des kalenders
|
|
$marginLeftRight: 5px // abstand linker und rechter rand
|
|
$marginTop: 5px
|
|
$marginBetween: 5px // abstand zwischen den Tueren
|
|
$doorBorderSize: 1px
|
|
$doorWidth: ($kalenderWidth - 3.5*$marginLeftRight - 3*$marginBetween)/4
|
|
|
|
/* ********************************
|
|
|
|
.kalender
|
|
display: inline-block
|
|
position: relative
|
|
text-align: center
|
|
width: $kalenderWidth
|
|
height: #{6*($doorWidth+$doorBorderSize+$marginBetween)+2*$marginTop}
|
|
border: 1px solid black
|
|
background: #fff url("../inc/bg/baum2.jpg") no-repeat
|
|
/*background-size: $backgroundWidth
|
|
background-size: $backgroundSize
|
|
background-position: $bgPosition
|
|
|
|
div
|
|
position: absolute
|
|
border: $doorBorderSize solid darkred
|
|
width: $doorWidth
|
|
height: $doorWidth
|
|
overflow: hidden
|
|
background: #fff
|
|
|
|
h3
|
|
padding-top: 1.5rem
|
|
font-weight: bold
|
|
padding: 1rem
|
|
|
|
span
|
|
position: absolute
|
|
display: inline-block
|
|
top: 1rem
|
|
left: 1rem
|
|
font-size: 1rem
|
|
width: 1.2rem
|
|
height: 1.2rem
|
|
color: #FFF
|
|
background: #CD0000
|
|
|
|
.left
|
|
position: absolute
|
|
left: 0
|
|
top: 0
|
|
width: #{$doorWidth+50}
|
|
height: $doorWidth
|
|
display: block
|
|
border: none
|
|
background: #fff url("../inc/bg/baum2.jpg") no-repeat
|
|
/*background-size: $backgroundWidth
|
|
background-size: $backgroundSize
|
|
margin-left: $bgPosition
|
|
a
|
|
&:hover .left, &:focus .left
|
|
left: #{-($doorWidth+60)}
|
|
|
|
.left
|
|
display: block
|
|
position: absolute
|
|
transition: left 0.5s
|
|
|
|
.inactive a
|
|
pointer-events: none
|
|
cursor: default
|
|
|
|
@for $row from 0 through 5
|
|
@for $col from 0 through 3
|
|
$leftCalc: $marginLeftRight+($doorWidth+$marginBetween+2*$doorBorderSize)*$col
|
|
$topCalc: $marginTop+($doorWidth+$marginBetween+2*$doorBorderSize)*$row
|
|
#ak#{$row*4+$col+1}
|
|
left: #{$leftCalc}
|
|
top: #{$topCalc}
|
|
.left
|
|
background-position: #{-($leftCalc+$doorBorderSize)} #{-($topCalc+$doorBorderSize)}
|
|
|
|
#hiddenTuer
|
|
margin: 1rem
|
|
max-height: auto |