github/directus
1
0
Fork 0
mirror of https://github.com/directus/directus.git synced 2026-02-19 08:44:23 -05:00
Code Issues Packages Projects Releases Wiki Activity

Various style tweaks (#378)

Browse Source 
* public button width and color

* improve menu arrow styling

* menu arrow placement

* define project chooser border

* adjustable min width for menus

Co-authored-by: Rijk van Zanten <rijkvanzanten@me.com>
This commit is contained in:
Ben Haynes
2020-04-10 17:06:41 -04:00
committed by GitHub
parent 311404f092
commit 58a0337582
7 changed files with 71 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/components/v-menu/v-menu.vue
View File

@@ -148,6 +148,8 @@ export default defineComponent({
<style lang="scss" scoped>
.v-menu {
--v-menu-min-width: 100px;
display: contents;
}
@@ -168,6 +170,7 @@ export default defineComponent({
position: absolute;
left: -999px;
z-index: 5;
min-width: var(--v-menu-min-width);
transform: translateY(2px);
pointer-events: none;
@@ -176,15 +179,18 @@ export default defineComponent({
}
.arrow,
.arrow::before {
.arrow::before,
.arrow::after {
position: absolute;
z-index: -1;
z-index: 1;
width: 8px;
height: 8px;
border-radius: 2px;
}
.arrow {
&::before {
&::before,
&::after {
background: var(--border-normal);
transform: rotate(45deg) scale(0);
transition: transform var(--fast) var(--transition-out);
@@ -192,26 +198,47 @@ export default defineComponent({
content: '';
}
&.active::before {
&.active::before,
&.active::after {
transform: rotate(45deg) scale(1);
transition: transform var(--medium) var(--transition-in);
}
&::after {
background: var(--background-subdued);
}
}
&[data-placement^='top'] .arrow {
bottom: -4px;
&::after {
bottom: 3px;
}
}
&[data-placement^='bottom'] .arrow {
top: -4px;
&::after {
top: 3px;
}
}
&[data-placement^='right'] .arrow {
left: -4px;
&::after {
left: 3px;
}
}
&[data-placement^='left'] .arrow {
right: -4px;
&::after {
right: 3px;
}
}
.v-menu-content {