From 962c9224ad33a797c99d256b3213cd131c3541bc Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Fri, 30 Jun 2017 23:16:22 +0100 Subject: [PATCH] Add dropdown --- docs/_includes/navbar.html | 10 ++-- docs/css/bulma-docs.css | 104 +++++++++++++++++++++++------------- sass/base/generic.sass | 1 + sass/components/navbar.sass | 80 +++++++++++++++++---------- 4 files changed, 127 insertions(+), 68 deletions(-) diff --git a/docs/_includes/navbar.html b/docs/_includes/navbar.html index 70857d87..617a1b16 100644 --- a/docs/_includes/navbar.html +++ b/docs/_includes/navbar.html @@ -1,16 +1,17 @@ +
+
diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index 729102ec..3d5141ab 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -134,6 +134,7 @@ body { font-size: 1rem; font-weight: 400; line-height: 1.5; + overflow-x: hidden; } a { @@ -4380,9 +4381,8 @@ a.nav-item.is-tab.is-active { .navbar-item, .navbar-link { - align-items: center; color: #4a4a4a; - display: flex; + display: block; line-height: 1.5; padding: 0.5rem 1rem; position: relative; @@ -4403,26 +4403,9 @@ a.navbar-item:hover, } .navbar-item.has-dropdown { - align-items: stretch; padding: 0; } -.navbar-item.has-dropdown::after { - border: 1px solid #00d1b2; - border-right: 0; - border-top: 0; - content: " "; - display: block; - height: 0.5em; - pointer-events: none; - position: absolute; - transform: rotate(-45deg); - width: 0.5em; - margin-top: -0.375em; - right: 1.125em; - top: 50%; -} - .navbar-content { flex-grow: 1; flex-shrink: 1; @@ -4433,40 +4416,35 @@ a.navbar-item:hover, } .navbar-dropdown { - background-color: white; - border-bottom-left-radius: 5px; - border-bottom-right-radius: 5px; - box-shadow: 0 8px 8px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1); font-size: 0.875rem; - left: 0; - min-width: 100%; - padding-bottom: 0.25rem; - padding-top: 0.25rem; - position: absolute; - top: 100%; - z-index: 20; + padding-bottom: 0.5rem; + padding-top: 0.5rem; } .navbar-dropdown .navbar-item { - padding: 0.375rem 1rem; + padding-left: 1.5rem; + padding-right: 1.5rem; } .navbar-divider { background-color: #dbdbdb; border: none; - display: block; + display: none; height: 1px; - margin: 0.25rem 0; + margin: 0.5rem 0; } -@media screen and (max-width: 768px) { +@media screen and (max-width: 999px) { + .navbar-brand .navbar-item { + align-items: center; + display: flex; + } .navbar-menu { - background-color: whitesmoke; padding: 0.5rem 0; } } -@media screen and (min-width: 769px), print { +@media screen and (min-width: 1000px) { .navbar, .navbar-menu, .navbar-start, @@ -4474,9 +4452,38 @@ a.navbar-item:hover, align-items: stretch; display: flex; } + .navbar { + height: 3.25rem; + } .navbar-burger { display: none; } + .navbar-item, + .navbar-link { + align-items: center; + display: flex; + } + .navbar-item.has-dropdown { + align-items: stretch; + } + .navbar-item.has-dropdown::after { + border: 1px solid #00d1b2; + border-right: 0; + border-top: 0; + content: " "; + display: block; + height: 0.5em; + pointer-events: none; + position: absolute; + transform: rotate(-45deg); + width: 0.5em; + margin-top: -0.375em; + right: 1.125em; + top: 50%; + } + .navbar-item.has-dropdown:hover .navbar-dropdown { + display: block; + } .navbar-menu { flex-grow: 1; flex-shrink: 0; @@ -4489,6 +4496,31 @@ a.navbar-item:hover, justify-content: flex-end; margin-left: auto; } + .navbar-dropdown { + background-color: white; + border-bottom-left-radius: 5px; + border-bottom-right-radius: 5px; + border-top: 1px solid #dbdbdb; + box-shadow: 0 8px 8px rgba(10, 10, 10, 0.1); + display: none; + font-size: 0.875rem; + left: 0; + min-width: 100%; + position: absolute; + top: 100%; + z-index: 20; + } + .navbar-dropdown .navbar-item { + padding: 0.375rem 1rem; + white-space: nowrap; + } + .navbar-divider { + display: block; + } + .container > .navbar { + margin-left: -1rem; + margin-right: -1rem; + } } .pagination { diff --git a/sass/base/generic.sass b/sass/base/generic.sass index 2972f02f..9358e038 100644 --- a/sass/base/generic.sass +++ b/sass/base/generic.sass @@ -35,6 +35,7 @@ body font-size: 1rem font-weight: $weight-normal line-height: 1.5 + overflow-x: hidden // Inline diff --git a/sass/components/navbar.sass b/sass/components/navbar.sass index 9a14b948..6cf38e46 100644 --- a/sass/components/navbar.sass +++ b/sass/components/navbar.sass @@ -20,9 +20,8 @@ $navbar-height: 3.25rem !default .navbar-item, .navbar-link - align-items: center color: $navbar-color - display: flex + display: block line-height: 1.5 padding: 0.5rem 1rem position: relative @@ -33,19 +32,12 @@ a.navbar-item, background-color: $background .navbar-item - // border-right: 1px solid $border flex-grow: 0 flex-shrink: 0 img max-height: 1.75rem &.has-dropdown - align-items: stretch padding: 0 - &::after - +arrow($input-arrow) - margin-top: -0.375em - right: 1.125em - top: 50% .navbar-content flex-grow: 1 @@ -55,43 +47,54 @@ a.navbar-item, padding-right: 2.5em .navbar-dropdown - background-color: $navbar-dropdown-background - border-bottom-left-radius: $radius-large - border-bottom-right-radius: $radius-large - // border-top: 1px solid $border - box-shadow: 0 8px 8px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) font-size: 0.875rem - left: 0 - min-width: 100% - padding-bottom: 0.25rem - padding-top: 0.25rem - position: absolute - top: 100% - z-index: 20 + padding-bottom: 0.5rem + padding-top: 0.5rem .navbar-item - padding: 0.375rem 1rem + padding-left: 1.5rem + padding-right: 1.5rem .navbar-divider background-color: $border border: none - display: block + display: none height: 1px - margin: 0.25rem 0 + margin: 0.5rem 0 -+mobile ++touch + .navbar-brand + .navbar-item + align-items: center + display: flex .navbar-menu - background-color: $background padding: 0.5rem 0 -+tablet ++desktop .navbar, .navbar-menu, .navbar-start, .navbar-end align-items: stretch display: flex + .navbar + height: $navbar-height .navbar-burger display: none + .navbar-item, + .navbar-link + align-items: center + display: flex + .navbar-item + &.has-dropdown + align-items: stretch + &::after + +arrow($input-arrow) + margin-top: -0.375em + right: 1.125em + top: 50% + &:hover + .navbar-dropdown + display: block .navbar-menu flex-grow: 1 flex-shrink: 0 @@ -100,4 +103,25 @@ a.navbar-item, margin-right: auto .navbar-end justify-content: flex-end - margin-left: auto \ No newline at end of file + margin-left: auto + .navbar-dropdown + background-color: $navbar-dropdown-background + border-bottom-left-radius: $radius-large + border-bottom-right-radius: $radius-large + border-top: 1px solid $border + box-shadow: 0 8px 8px rgba($black, 0.1) + display: none + font-size: 0.875rem + left: 0 + min-width: 100% + position: absolute + top: 100% + z-index: 20 + .navbar-item + padding: 0.375rem 1rem + white-space: nowrap + .navbar-divider + display: block + .container > .navbar + margin-left: -1rem + margin-right: -1rem \ No newline at end of file