styled selectbox

This commit is contained in:
Danny Coates 2019-02-13 11:14:53 -08:00
parent e9ee7d022c
commit 1c61915b53
No known key found for this signature in database
GPG Key ID: 4C442633C62E00CB
6 changed files with 38 additions and 10 deletions

View File

@ -231,6 +231,12 @@ progress::-moz-progress-bar {
}
}
select {
background-image: url('../assets/select-arrow.svg');
background-position: calc(100% - 0.75rem);
background-repeat: no-repeat;
}
@screen md {
.header-logo {
background-image: url('../assets/logo.svg');
@ -251,10 +257,6 @@ progress::-moz-progress-bar {
@tailwind utilities;
.word-break-all {
word-break: break-all;
}
@responsive {
.shadow-light {
box-shadow: 0 0 8px 0 rgba(12, 12, 13, 0.1);
@ -265,3 +267,7 @@ progress::-moz-progress-bar {
0 2px 16px 0 rgba(12, 12, 13, 0.05);
}
}
.word-break-all {
word-break: break-all;
}

View File

@ -46,7 +46,7 @@ function password(state) {
id="password-input"
class="${state.archive.password
? ''
: 'invisible'} border rounded-sm focus:border-blue-dark leading-normal my-1 py-1 px-2 h-8"
: 'invisible'} border rounded focus:border-blue-dark leading-normal my-1 py-1 px-2 h-8"
autocomplete="off"
maxlength="${MAX_LENGTH}"
type="password"

View File

@ -14,7 +14,7 @@ module.exports = function(name, url) {
<input
type="text"
id="share-url"
class="w-full my-4 border rounded leading-loose h-12 px-2 py-1"
class="w-full my-4 border rounded-lg leading-loose h-12 px-2 py-1"
value="${url}"
readonly="true"
/>
@ -22,7 +22,7 @@ module.exports = function(name, url) {
${state.translate('copyUrlFormButton')}
</button>
<a
class="text-blue hover:text-blue-dark focus:text-blue-darker my-4 font-medium cursor-pointer"
class="text-blue-dark hover:text-blue-darker focus:text-blue-darker my-4 font-medium cursor-pointer"
onclick="${close}"
>${state.translate('okButton')}</a
>

View File

@ -6,7 +6,7 @@ module.exports = function(selected, options, translate, changed, htmlId) {
return html`
<select
id="${htmlId}"
class="appearance-none cursor-pointer border rounded-sm bg-grey-lightest hover:border-blue-dark focus:border-blue-dark px-2 py-1 my-1 h-8"
class="appearance-none cursor-pointer border rounded bg-grey-lightest hover:border-blue-dark focus:border-blue-dark pl-1 pr-8 py-1 my-1 h-8"
onchange="${choose}"
>
${options.map(

View File

@ -25,7 +25,7 @@ module.exports = function(trigger) {
<input
id="email-input"
type="text"
class="${hidden} border rounded w-full px-2 py-1 h-12 mb-4 text-lg text-grey-darker leading-loose"
class="${hidden} border rounded-lg w-full px-2 py-1 h-12 mb-4 text-lg text-grey-darker leading-loose"
placeholder=${state.translate('emailEntryPlaceholder')} />
<input
class="hidden"
@ -36,7 +36,7 @@ module.exports = function(trigger) {
${state.translate('signInMenuOption')}
</label>
<button
class="my-4 text-blue hover:text-blue-dark focus:text-blue-darker font-medium"
class="my-4 text-blue-dark hover:text-blue-darker focus:text-blue-darker font-medium"
title="${state.translate('deletePopupCancel')}"
onclick=${cancel}>${state.translate('deletePopupCancel')}
</button>

22
assets/select-arrow.svg Normal file
View File

@ -0,0 +1,22 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="8px" height="6px" viewBox="0 0 8 6" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 53 (72520) - https://sketchapp.com -->
<title>37845F0A-2932-4C2D-98E1-89BE1B168092</title>
<desc>Created with sketchtool.</desc>
<defs>
<path d="M6,8.48771202 C5.73480519,8.48765538 5.48049273,8.3822614 5.293,8.19471202 L2.293,5.19471202 C1.91402779,4.80233313 1.91944763,4.17862724 2.30518142,3.79289345 C2.69091522,3.40715965 3.31462111,3.40173981 3.707,3.78071202 L6,6.07371202 L8.293,3.78071202 C8.68537889,3.40173981 9.30908478,3.40715965 9.69481858,3.79289345 C10.0805524,4.17862724 10.0859722,4.80233313 9.707,5.19471202 L6.707,8.19471202 C6.51950727,8.3822614 6.26519481,8.48765538 6,8.48771202 Z" id="path-1"></path>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Components-Sheet" transform="translate(-199.000000, -489.000000)">
<g id="Dropdown-1" transform="translate(52.000000, 475.707031)">
<g id="Arrow-Icon" transform="translate(145.000000, 10.000000)">
<rect id="bouding-box" x="0" y="0" width="12" height="12"></rect>
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="Shape" fill="#0C0C0D" fill-rule="nonzero" opacity="0.599283854" xlink:href="#path-1"></use>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.6 KiB