adjusted selectbox styles

This commit is contained in:
Danny Coates 2018-03-27 23:19:07 -07:00
parent 77e3b5a3e6
commit fb91fd03cc
No known key found for this signature in database
GPG Key ID: 4C442633C62E00CB
3 changed files with 26 additions and 13 deletions

View File

@ -16,7 +16,7 @@ module.exports = function(state, emit) {
return html`
<div id="shareWrapper" class="effect--fadeIn">
<div class="title">${expireInfo(file, state.translate, emit)}</div>
${expireInfo(file, state.translate, emit)}
<div class="sharePage">
<div class="sharePage__copyText">
${state.translate('copyUrlFormLabelWithName', { filename: file.name })}
@ -97,7 +97,7 @@ module.exports = function(state, emit) {
function expireInfo(file, translate, emit) {
const hours = Math.floor(EXPIRE_SECONDS / 60 / 60);
const el = html`<div>${raw(
const el = html`<div class="title">${raw(
translate('expireInfo', {
downloadCount: '<select></select>',
timespan: translate('timespanHours', { num: hours })
@ -107,9 +107,6 @@ function expireInfo(file, translate, emit) {
const options = [1, 2, 3, 4, 5, 20].filter(i => i > (file.dtotal || 0));
const t = num => translate('downloadCount', { num });
const changed = value => emit('changeLimit', { file, value });
select.parentNode.replaceChild(
selectbox(file.dlimit || 1, options, t, changed),
select
);
el.replaceChild(selectbox(file.dlimit || 1, options, t, changed), select);
return el;
}

View File

@ -5,7 +5,7 @@ module.exports = function(selected, options, translate, changed) {
let x = selected;
return html`
<span class="select">
<div class="select">
<select id="${id}" onchange=${choose}>
${options.map(
i =>
@ -14,11 +14,7 @@ module.exports = function(selected, options, translate, changed) {
}>${translate(i)}</option>`
)}
</select>
<svg id="arrow" width="32" height="32">
<polygon points="8 18 17 28 26 18" fill="#0094fb"/>
</svg>
</span>`;
</div>`;
function choose(event) {
const target = event.target;

View File

@ -1,6 +1,25 @@
.select {
background-color: var(--pageBGColor);
overflow: hidden;
padding: 4px 2px 1px 2px;
border: 1px dotted #0094fb88;
border-radius: 4px;
display: inline;
position: relative;
}
.select::after {
color: #0094fb;
content: '\25BC';
position: absolute;
right: 0;
padding: 0 10px;
pointer-events: none;
font-size: 20px;
}
option {
padding: 0;
}
select {
@ -11,10 +30,11 @@ select {
background: #fff;
background-image: none;
font-size: 1em;
font-weight: 200;
margin: 0;
color: #0094fb;
cursor: pointer;
border-color: none;
padding-right: 40px;
}
select:active {