Move scrolling from menu to dropdown panel

pull/186/head
Cory LaViska 2020-08-08 15:00:12 -04:00
rodzic d70908ef8d
commit 251e3059a0
5 zmienionych plików z 35 dodań i 7 usunięć

Wyświetl plik

@ -15,6 +15,23 @@ Dropdowns are designed to work well with [menus](/components/menu.md) to provide
<sl-menu-item>Dropdown Item 1</sl-menu-item>
<sl-menu-item>Dropdown Item 2</sl-menu-item>
<sl-menu-item>Dropdown Item 3</sl-menu-item>
<sl-menu-item>Dropdown Item 4</sl-menu-item>
<sl-menu-item>Dropdown Item 5</sl-menu-item>
<sl-menu-item>Dropdown Item 6</sl-menu-item>
<sl-menu-item>Dropdown Item 7</sl-menu-item>
<sl-menu-item>Dropdown Item 8</sl-menu-item>
<sl-menu-item>Dropdown Item 9</sl-menu-item>
<sl-menu-item>Dropdown Item 10</sl-menu-item>
<sl-menu-item>Dropdown Item 11</sl-menu-item>
<sl-menu-item>Dropdown Item 12</sl-menu-item>
<sl-menu-item>Dropdown Item 13</sl-menu-item>
<sl-menu-item>Dropdown Item 14</sl-menu-item>
<sl-menu-item>Dropdown Item 15</sl-menu-item>
<sl-menu-item>Dropdown Item 16</sl-menu-item>
<sl-menu-item>Dropdown Item 17</sl-menu-item>
<sl-menu-item>Dropdown Item 18</sl-menu-item>
<sl-menu-item>Dropdown Item 19</sl-menu-item>
<sl-menu-item>Dropdown Item 20</sl-menu-item>
<sl-menu-divider></sl-menu-divider>
<sl-menu-item checked>Checked</sl-menu-item>
<sl-menu-item disabled>Disabled</sl-menu-item>

Wyświetl plik

@ -9,10 +9,24 @@ Selects allow you to choose one or more items from a dropdown menu.
<sl-menu-item value="option-1">Option 1</sl-menu-item>
<sl-menu-item value="option-2">Option 2</sl-menu-item>
<sl-menu-item value="option-3">Option 3</sl-menu-item>
<sl-menu-divider></sl-menu-divider>
<sl-menu-item value="option-4">Option 4</sl-menu-item>
<sl-menu-item value="option-5">Option 5</sl-menu-item>
<sl-menu-item value="option-6">Option 6</sl-menu-item>
<sl-menu-item value="option-7">Option 7</sl-menu-item>
<sl-menu-item value="option-8">Option 8</sl-menu-item>
<sl-menu-item value="option-9">Option 9</sl-menu-item>
<sl-menu-item value="option-10">Option 10</sl-menu-item>
<sl-menu-divider></sl-menu-divider>
<sl-menu-item value="option-11">Option 11</sl-menu-item>
<sl-menu-item value="option-12">Option 12</sl-menu-item>
<sl-menu-item value="option-13">Option 13</sl-menu-item>
<sl-menu-item value="option-14">Option 14</sl-menu-item>
<sl-menu-item value="option-15">Option 15</sl-menu-item>
<sl-menu-item value="option-16">Option 16</sl-menu-item>
<sl-menu-item value="option-17">Option 17</sl-menu-item>
<sl-menu-item value="option-18">Option 18</sl-menu-item>
<sl-menu-item value="option-19">Option 19</sl-menu-item>
<sl-menu-item value="option-20">Option 20</sl-menu-item>
</sl-select>
```

Wyświetl plik

@ -235,6 +235,7 @@
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
.color-dropdown::part(panel) {
max-height: none;
overflow: visible;
}

Wyświetl plik

@ -15,6 +15,7 @@
.dropdown__panel {
position: absolute;
z-index: var(--sl-z-index-dropdown);
max-height: 50vh;
font-family: var(--sl-font-sans);
font-size: var(--sl-font-size-medium);
font-weight: var(--sl-font-weight-normal);
@ -25,13 +26,10 @@
box-shadow: var(--sl-shadow-large);
opacity: 0;
overflow: auto;
overscroll-behavior: none;
transition: var(--sl-transition-fast) opacity;
&.popover-visible {
opacity: 1;
}
::slotted(sl-menu) {
max-height: 50vh;
}
}

Wyświetl plik

@ -6,8 +6,6 @@
.menu {
padding: var(--sl-spacing-x-small) 0;
overflow-y: auto;
overscroll-behavior: none;
&:focus {
outline: none;