102 lines
2.6 KiB
Sass
102 lines
2.6 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: #90C145
|
|
/*background-size: $backgroundWidth
|
|
background-size: $backgroundSize
|
|
background-position: $bgPosition
|
|
//padding: 0 0 10vh 0
|
|
|
|
div
|
|
position: absolute
|
|
border: $doorBorderSize solid darkred
|
|
width: $doorWidth
|
|
height: $doorWidth
|
|
overflow: hidden
|
|
background: hsla(0, 0%, 100%, 0.5)
|
|
|
|
h3
|
|
padding-top: 1.5rem
|
|
//font-weight: bold
|
|
padding: 1rem
|
|
color: #E8690F
|
|
|
|
a
|
|
text-decoration: none
|
|
|
|
#hiddenTuer
|
|
margin: 1rem
|
|
max-height: auto
|
|
text-decoration: none
|
|
|
|
span
|
|
position: absolute
|
|
display: inline-block
|
|
top: 0.5rem
|
|
left: 1.1rem
|
|
font-size: 1rem
|
|
width: 6rem
|
|
height: 6rem
|
|
color: darkred
|
|
background-size: cover
|
|
text-align: left
|
|
text-shadow: 1px 1px 1px #fff, 1px -1px 1px #fff, -1px 1px 1px #fff, -1px -1px 1px #fff
|
|
//text-shadow: 0px 0px 2px darkred
|
|
//background-position: 2.4rem
|
|
//padding-right: 3rem
|
|
//background-origin: padding-box
|
|
//background: no-repeat
|
|
|
|
.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 6
|
|
@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)}
|
|
|
|
#türPlus
|
|
display: none |