RanchiMall/standard-ui
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Minor improvement

Browse Source
This commit is contained in:
sairaj mote 2023-09-15 03:13:57 +05:30
parent 6a00682595
commit 31b91e3424
2 changed files with 9 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
components/dist/select.js vendored
View File

@ -4,12 +4,9 @@ smSelect.innerHTML = `
*{ *{
padding: 0; padding: 0;
margin: 0; margin: 0;
-webkit-box-sizing: border-box; box-sizing: border-box;
box-sizing: border-box;
} }
:host{ :host{
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
} }
:host([disabled]) .select{ :host([disabled]) .select{
@ -22,12 +19,7 @@ smSelect.innerHTML = `
} }
.select{ .select{
position: relative; position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column; flex-direction: column;
cursor: pointer; cursor: pointer;
width: 100%; width: 100%;
@ -42,30 +34,25 @@ smSelect.innerHTML = `
.selected-option-text{ .selected-option-text{
font-size: inherit; font-size: inherit;
overflow: hidden; overflow: hidden;
-o-text-overflow: ellipsis; text-overflow: ellipsis;
text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
font-weight: 500; font-weight: 500;
} }
.selection{ .selection{
border-radius: var(--select-border-radius,0.5rem); border-radius: var(--select-border-radius,0.5rem);
display: -ms-grid;
display: grid; display: grid;
-ms-grid-columns: 1fr auto;
grid-template-columns: 1fr auto; grid-template-columns: 1fr auto;
grid-template-areas: 'heading heading' '. .'; grid-template-areas: 'heading heading' '. .';
padding: var(--padding,0.6rem 0.8rem); padding: var(--padding,0.6rem 0.8rem);
background: var(--background, rgba(var(--text-color,(17,17,17)), 0.06)); background: var(--background, rgba(var(--text-color,(17,17,17)), 0.06));
-webkit-box-align: center; align-items: center;
-ms-flex-align: center;
align-items: center;
outline: none; outline: none;
z-index: 2; z-index: 2;
height: 100%; height: 100%;
align-content: center;
} }
.selection:focus{ .selection:focus{
-webkit-box-shadow: 0 0 0 0.1rem var(--accent-color, teal) inset; box-shadow: 0 0 0 0.1rem var(--accent-color, teal) inset;
box-shadow: 0 0 0 0.1rem var(--accent-color, teal) inset;
} }
:host([align-select="left"]) .options{ :host([align-select="left"]) .options{
left: 0; left: 0;
@ -80,13 +67,8 @@ smSelect.innerHTML = `
overflow: hidden auto; overflow: hidden auto;
position: absolute; position: absolute;
grid-area: options; grid-area: options;
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
-webkit-box-orient: vertical; flex-direction: column;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
width: var(--options-width, 100%); width: var(--options-width, 100%);
min-width: var(--min-width, auto); min-width: var(--min-width, auto);
max-height: var(--max-height, auto); max-height: var(--max-height, auto);
@ -134,7 +116,7 @@ smSelect.innerHTML = `
} }
</style> </style>
<div class="select"> <div class="select">
<div class="selection"> <div class="selection" part="button">
<div class="selected-option-text"></div> <div class="selected-option-text"></div>
<svg class="icon icon--expand" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 5.83L15.17 9l1.41-1.41L12 3 7.41 7.59 8.83 9 12 5.83zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15 12 18.17z"/></svg> <svg class="icon icon--expand" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 5.83L15.17 9l1.41-1.41L12 3 7.41 7.59 8.83 9 12 5.83zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15 12 18.17z"/></svg>
<svg class="icon icon--collapse" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M24 0v24H0V0h24z" fill="none" opacity=".87"/><path d="M7.41 18.59L8.83 20 12 16.83 15.17 20l1.41-1.41L12 14l-4.59 4.59zm9.18-13.18L15.17 4 12 7.17 8.83 4 7.41 5.41 12 10l4.59-4.59z"/></svg> <svg class="icon icon--collapse" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M24 0v24H0V0h24z" fill="none" opacity=".87"/><path d="M7.41 18.59L8.83 20 12 16.83 15.17 20l1.41-1.41L12 14l-4.59 4.59zm9.18-13.18L15.17 4 12 7.17 8.83 4 7.41 5.41 12 10l4.59-4.59z"/></svg>

2
components/dist/select.min.js vendored
View File

File diff suppressed because one or more lines are too long