Update input element design

master
mathieucura 2021-01-16 22:32:19 +01:00
parent 71c9c0bf65
commit 0e77103f25
5 changed files with 43 additions and 8 deletions

View File

@ -13,6 +13,13 @@ template.innerHTML = `
bottom: 1px;
right: -4px;
position: relative;
margin-left: 4px;
margin-right: 4px;
color: #fff;
}
elix-input {
background-color: var(--input-color);
border-radius: 3px;
}
</style>
<img src="./images/logo.svg" alt="icon" width="12" height="12" />

View File

@ -4,13 +4,19 @@ import 'elix/define/DropdownList.js';
const template = document.createElement('template');
template.innerHTML = `
<style>
elix-dropdown-list {
margin: 5px;
}
elix-dropdown-list:hover {
background-color: var(--icon-bg-color-hover);
}
::part(popup-toggle) {
display: none;
}
::slotted(*) {
background: #E8E8E8;
padding:0;
/*border: 1px solid #B0B0B0;*/
width:100%;
}
</style>

View File

@ -6,8 +6,10 @@ template.innerHTML = `
<style>
elix-option{
padding:0.25rem 0.125rem !important;
background: #E8E8E8;
border-bottom: 1px solid #B0B0B0;
background-color: var(--icon-bg-color);
}
elix-option:hover{
background-color: var(--icon-bg-color-hover);
}
</style>
<elix-option aria-label="option">

View File

@ -12,10 +12,22 @@ template.innerHTML = `
bottom: 1px;
right: -4px;
position: relative;
margin-left: 4px;
margin-right: 4px;
color: #fff;
}
elix-number-spin-box {
background-color: var(--input-color);
border-radius: 3px;
height: 20px !important;
margin-top: 1px;
}
elix-number-spin-box::part(spin-button) {
padding: 0px;
}
elix-number-spin-box::part(input) {
width: 3em;
}
elix-number-spin-box{
width: 54px;
height: 24px;

View File

@ -7,6 +7,7 @@
--ruler-color: #B2B2B2;
--icon-bg-color: #72797A;
--icon-bg-color-hover: #2B3C45;
--input-color: #B2B2B2;
}
body {
@ -192,6 +193,13 @@ hr {
top: 4px;
left: 5px;
z-index: 5;
color: #fff;
border-radius: 3px;
}
#main_button:hover {
background-color: var(--icon-bg-color-hover);
color: #fff;
}
#main_icon {