Merge pull request #194 from hughrun/moonee
fix inline styles for loan periods
This commit is contained in:
commit
4889887e4b
|
@ -439,38 +439,11 @@ Promise.all([boundaries, branchesCsv, ikcCsv, mechanics, nslaBranches, caul])
|
||||||
infoBoxes.loanPeriod.update = function (props) {
|
infoBoxes.loanPeriod.update = function (props) {
|
||||||
this._div.innerHTML = `
|
this._div.innerHTML = `
|
||||||
<section>
|
<section>
|
||||||
<div><div class="circle" style="background:
|
<div><div class="circle two-weeks"></div>2 weeks</div>
|
||||||
radial-gradient(4px 4px at 6px 6px, #3a3a3a 50%, transparent 75%),
|
<div><div class="circle three-weeks"></div>3 weeks</div>
|
||||||
radial-gradient(4px 4px at 16px 6px, #3a3a3a 50%, transparent 75%),
|
<div><div class="circle four-weeks"></div>4 weeks</div>
|
||||||
radial-gradient(4px 4px at 2px 12px, #3a3a3a 50%, transparent 75%),
|
<div><div class="circle six-weeks"></div>6 weeks</div>
|
||||||
radial-gradient(4px 4px at 12px 12px, #3a3a3a 50%, transparent 75%),
|
<div><div class="circle unknown-weeks"></div>Unknown (help me find out!)</div>
|
||||||
radial-gradient(4px 4px at 20px 12px, #3a3a3a 50%, transparent 75%),
|
|
||||||
radial-gradient(4px 4px at 8px 18px, #3a3a3a 50%, transparent 75%);
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
border: 1px solid black;
|
|
||||||
"></div>2 weeks</div>
|
|
||||||
<div><div class="circle" style="background: repeating-linear-gradient(
|
|
||||||
0deg,
|
|
||||||
#3a3a3a,
|
|
||||||
#3a3a3a 2px,
|
|
||||||
#fff 2px,
|
|
||||||
#3a3a3a 4px
|
|
||||||
)"></div>3 weeks</div>
|
|
||||||
<div><div class="circle" style="background: repeating-linear-gradient(
|
|
||||||
45deg,
|
|
||||||
#3a3a3a,
|
|
||||||
#3a3a3a 3px,
|
|
||||||
#fff 1px,
|
|
||||||
#3a3a3a 4px
|
|
||||||
)"></div>4 weeks</div>
|
|
||||||
<div><div class="circle" style="background: repeating-linear-gradient(
|
|
||||||
135deg,
|
|
||||||
#fff,
|
|
||||||
#fff 8px,
|
|
||||||
#3a3a3a 2px,
|
|
||||||
#fff 10px
|
|
||||||
)"></div>6 weeks</div>
|
|
||||||
<div><div class="circle" style="background-color: #bbb"></div>Unknown (help me find out!)</div>
|
|
||||||
</section>
|
</section>
|
||||||
`
|
`
|
||||||
};
|
};
|
||||||
|
|
|
@ -273,6 +273,52 @@ ul#libraries li {
|
||||||
background-color: #bbb
|
background-color: #bbb
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.two-weeks {
|
||||||
|
background:
|
||||||
|
radial-gradient(4px 4px at 6px 6px, #3a3a3a 50%, transparent 75%),
|
||||||
|
radial-gradient(4px 4px at 16px 6px, #3a3a3a 50%, transparent 75%),
|
||||||
|
radial-gradient(4px 4px at 2px 12px, #3a3a3a 50%, transparent 75%),
|
||||||
|
radial-gradient(4px 4px at 12px 12px, #3a3a3a 50%, transparent 75%),
|
||||||
|
radial-gradient(4px 4px at 20px 12px, #3a3a3a 50%, transparent 75%),
|
||||||
|
radial-gradient(4px 4px at 8px 18px, #3a3a3a 50%, transparent 75%);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
border: 1px solid black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.three-weeks {
|
||||||
|
background: repeating-linear-gradient(
|
||||||
|
0deg,
|
||||||
|
#3a3a3a,
|
||||||
|
#3a3a3a 2px,
|
||||||
|
#fff 2px,
|
||||||
|
#3a3a3a 4px
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
.four-weeks {
|
||||||
|
background: repeating-linear-gradient(
|
||||||
|
45deg,
|
||||||
|
#3a3a3a,
|
||||||
|
#3a3a3a 3px,
|
||||||
|
#fff 1px,
|
||||||
|
#3a3a3a 4px
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
.six-weeks {
|
||||||
|
background: repeating-linear-gradient(
|
||||||
|
135deg,
|
||||||
|
#fff,
|
||||||
|
#fff 8px,
|
||||||
|
#3a3a3a 2px,
|
||||||
|
#fff 10px
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
.unknown-weeks {
|
||||||
|
background-color: #bbb;
|
||||||
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: 800px) {
|
@media only screen and (max-width: 800px) {
|
||||||
|
|
||||||
nav ul {
|
nav ul {
|
||||||
|
|
Loading…
Reference in a new issue