diff --git a/addon/styles/components/es-sidebar.css b/addon/styles/components/es-sidebar.css index 4dc5248e..0911bc1f 100644 --- a/addon/styles/components/es-sidebar.css +++ b/addon/styles/components/es-sidebar.css @@ -13,7 +13,11 @@ border-right: 2px solid var(--color-gray-300); } -@media (max-width: 844px) { +.es-sidebar { + background-color: var(--color-gray-200); +} + +@media (width <= 844px) { .es-sidebar-toggle { position: fixed; z-index: 1; diff --git a/addon/styles/sidebar-container.css b/addon/styles/sidebar-container.css index 02af886e..c5f12d4a 100644 --- a/addon/styles/sidebar-container.css +++ b/addon/styles/sidebar-container.css @@ -1,5 +1,5 @@ :root { - --sidebar-width: 18.5rem; + --sidebar-width: 21rem; } .sidebar-container { @@ -11,6 +11,10 @@ padding: var(--spacing-6) var(--grid-margin); } +.sidebar-container > *:not(.es-sidebar-toggle) { + padding: var(--spacing-4) var(--spacing-2); +} + .sidebar-container > *:not(.es-sidebar):not(.es-sidebar-toggle) { grid-column: 1 / span 2; } diff --git a/tests/integration/components/es-sidebar-test.js b/tests/integration/components/es-sidebar-test.js index 0d5932ed..59812cda 100644 --- a/tests/integration/components/es-sidebar-test.js +++ b/tests/integration/components/es-sidebar-test.js @@ -27,46 +27,4 @@ module('Integration | Component | es-sidebar', function (hooks) { await click('.es-sidebar-close'); assert.dom('.es-sidebar').hasAttribute('aria-expanded', 'false'); }); - - test('it has the correct styles when in a .sidebar-container', async function (assert) { - await render(hbs` - - `); - - assert.dom('.sidebar-container .es-sidebar').hasStyle({ - width: '296px', - }); - - await render(hbs` - - `); - - assert.dom('[data-test-content-left]').hasStyle({ - width: '644px', - }); - assert.dom('.sidebar-container .es-sidebar').hasStyle({ - width: '296px', - margin: '0px', - }); - - await render(hbs` - - `); - - assert.dom('.sidebar-container .es-sidebar').hasStyle({ - width: '296px', - margin: '0px', - }); - assert.dom('[data-test-content-right]').hasStyle({ - width: '644px', - }); - }); });