Standardize vue-select custom.css styles

This commit is contained in:
Jože Fortun
2023-11-06 17:39:39 +01:00
parent cfd40aa2a7
commit 2f4ef7ecd4
5 changed files with 207 additions and 59 deletions
@@ -78,10 +78,41 @@ th {
}
.v-select {
min-width: auto;
position: relative;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
margin-bottom: 0;
font-size: 0.9rem;
border-radius: 0.25rem;
.vs__selected-options {
// do not allow growing
width: 0;
}
.vs__selected {
display: block;
white-space: nowrap;
text-overflow: ellipsis;
max-width: 100%;
overflow: hidden;
}
.vs__search {
margin-top: 0.375rem;
}
&:not(.vs--open) .vs__selected + .vs__search {
// force this to not use any space
// we still need it to be rendered for the focus
width: 0;
padding: 0;
margin: 0;
border: none;
height: 0;
}
.vs__dropdown-toggle {
padding: 0.375rem;
padding-top: 0;
@@ -60,27 +60,65 @@ th {
}
.v-select {
min-width: 250px;
min-width: auto;
position: relative;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
margin-bottom: 0;
font-size: 0.9rem;
border-radius: 0.25rem;
.vs__search {
margin: 0;
.vs__selected-options {
// do not allow growing
width: 0;
}
}
.vs__dropdown-toggle {
padding: 0.375rem;
border-width: 2px;
border-color: var(--light);
.vs__selected {
display: block;
white-space: nowrap;
text-overflow: ellipsis;
max-width: 100%;
overflow: hidden;
}
.vs__search {
margin-top: 0.375rem;
}
&:not(.vs--open) .vs__selected + .vs__search {
// force this to not use any space
// we still need it to be rendered for the focus
width: 0;
padding: 0;
margin: 0;
border: none;
height: 0;
}
.vs__dropdown-toggle {
padding: 0.375rem;
padding-top: 0;
border-width: 2px;
border-color: var(--light);
.vs__selected {
margin-top: 0.375rem;
}
.vs__actions {
padding-top: 0.375rem;
}
}
.vs__clear,
.vs__open-indicator {
fill: var(--gray-900);
display: inline-flex;
}
}
.vs__clear,
.vs__open-indicator {
fill: var(--gray-900);
display: inline-flex;
.vs__dropdown-menu {
z-index: 1090;
}
.ProseMirror.ProseMirror-focused {
@@ -60,31 +60,65 @@ th {
}
.v-select {
min-width: 250px;
min-width: auto;
position: relative;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
margin-bottom: 0;
font-size: 0.9rem;
border-radius: 0.25rem;
.vs__search {
margin: 0;
&:focus {
margin: 0;
}
.vs__selected-options {
// do not allow growing
width: 0;
}
}
.vs__dropdown-toggle {
padding: 0.375rem;
border-width: 2px;
border-color: var(--light);
.vs__selected {
display: block;
white-space: nowrap;
text-overflow: ellipsis;
max-width: 100%;
overflow: hidden;
}
.vs__search {
margin-top: 0.375rem;
}
&:not(.vs--open) .vs__selected + .vs__search {
// force this to not use any space
// we still need it to be rendered for the focus
width: 0;
padding: 0;
margin: 0;
border: none;
height: 0;
}
.vs__dropdown-toggle {
padding: 0.375rem;
padding-top: 0;
border-width: 2px;
border-color: var(--light);
.vs__selected {
margin-top: 0.375rem;
}
.vs__actions {
padding-top: 0.375rem;
}
}
.vs__clear,
.vs__open-indicator {
fill: var(--gray-900);
display: inline-flex;
}
}
.vs__clear,
.vs__open-indicator {
fill: var(--gray-900);
display: inline-flex;
.vs__dropdown-menu {
z-index: 1090;
}
.ProseMirror.ProseMirror-focused {
@@ -60,33 +60,16 @@ th {
}
.v-select {
min-width: 20vw;
&:not(.vs--open) .vs__selected + .vs__search {
width: 0;
padding: 0;
margin: 0;
border: none;
height: 0;
}
.vs__dropdown-toggle {
height: 100%;
border-color: var(--light);
border-width: 2px;
}
.vs__dropdown-option {
text-overflow: ellipsis;
overflow-x: hidden;
}
.vs__clear,
.vs__open-indicator {
fill: var(--gray-900);
}
min-width: auto;
position: relative;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
margin-bottom: 0;
font-size: 0.9rem;
border-radius: 0.25rem;
.vs__selected-options {
// do not allow growing
width: 0;
}
@@ -97,11 +80,45 @@ th {
max-width: 100%;
overflow: hidden;
}
.vs__search {
margin-top: 0.375rem;
}
&:not(.vs--open) .vs__selected + .vs__search {
// force this to not use any space
// we still need it to be rendered for the focus
width: 0;
padding: 0;
margin: 0;
border: none;
height: 0;
}
.vs__dropdown-toggle {
padding: 0.375rem;
padding-top: 0;
border-width: 2px;
border-color: var(--light);
.vs__selected {
margin-top: 0.375rem;
}
.vs__actions {
padding-top: 0.375rem;
}
}
.vs__clear,
.vs__open-indicator {
fill: var(--gray-900);
display: inline-flex;
}
}
.vs__dropdown-menu {
min-width: 20vw;
z-index: 1090 !important;
z-index: 1090;
}
.ProseMirror.ProseMirror-focused {
@@ -60,18 +60,46 @@ th {
}
.v-select {
min-width: min(100%, 15vw);
min-width: auto;
position: relative;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
margin-bottom: 0;
font-size: 0.9rem;
border-radius: 0.25rem;
.vs__selected-options {
// do not allow growing
width: 0;
}
.vs__selected {
display: block;
white-space: nowrap;
text-overflow: ellipsis;
max-width: 100%;
overflow: hidden;
}
.vs__search {
margin-top: 0.375rem;
}
&:not(.vs--open) .vs__selected + .vs__search {
// force this to not use any space
// we still need it to be rendered for the focus
width: 0;
padding: 0;
margin: 0;
border: none;
height: 0;
}
.vs__dropdown-toggle {
padding: 0.375rem;
padding-top: 0;
border-width: 2px;
border-color: var(--light);
background-color: white;
.vs__selected {
margin-top: 0.375rem;