From: Jeremy Thomas Date: Sun, 8 May 2016 00:35:43 +0000 (+0100) Subject: Add level, Finish nav, Fix hero X-Git-Tag: 0.0.26~2 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=75183ea5c1279ddc4d3e22e32960991e81748804;p=thirdparty%2Fbulma.git Add level, Finish nav, Fix hero --- diff --git a/CHANGELOG.md b/CHANGELOG.md index 3bbb2b912..59677d719 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,11 @@ * Added: `.modal-card` * Added: display responsive utilites +* Added: `.nav-center` +* Added: `.tabs ul` left center right +* Changed: `.navbar` renamed to `.level` +* Changed: `.header` renamed to `.nav` +* Fixed: `.hero` layout ## 0.0.25 diff --git a/sass/components/components.sass b/sass/components/components.sass index 6ed164ba6..9d03779a5 100644 --- a/sass/components/components.sass +++ b/sass/components/components.sass @@ -3,12 +3,12 @@ @import "card" @import "grid" @import "highlight" +@import "level" @import "media" @import "menu" @import "message" @import "modal" @import "nav" -@import "navbar" @import "pagination" @import "panel" @import "tabs" diff --git a/sass/components/level.sass b/sass/components/level.sass new file mode 100644 index 000000000..979603664 --- /dev/null +++ b/sass/components/level.sass @@ -0,0 +1,57 @@ +.level-item + .title, + .subtitle + margin-bottom: 0 + // Responsiveness + +mobile + &:not(:last-child) + margin-bottom: 10px + +.level-left, +.level-right + .level-item + &:not(:last-child) + margin-right: 10px + // Modifiers + &.is-flexible + flex: 1 + +.level-left + // Responsiveness + +mobile + & + .level-right + margin-top: 20px + +tablet + align-items: center + display: flex + +.level-right + // Responsiveness + +tablet + align-items: center + display: flex + justify-content: flex-end + +.level + @extend .block + align-items: center + justify-content: space-between + code + border-radius: $radius + img + display: inline-block + vertical-align: top + // Modifiers + &.is-mobile + display: flex + & > .level-item + &:not(:last-child) + margin-bottom: 0 + &:not(.is-narrow) + flex: 1 + // Responsiveness + +tablet + display: flex + & > .level-item + &:not(.is-narrow) + flex: 1 diff --git a/sass/components/nav.sass b/sass/components/nav.sass index 5f6ea203b..5819374dd 100644 --- a/sass/components/nav.sass +++ b/sass/components/nav.sass @@ -11,12 +11,9 @@ display: flex min-height: $nav-height width: 100% - +tablet - & > .container - & > .nav-left - margin-left: -10px - & > .nav-right - margin-left: -10px + // Modifiers + &.has-shadow + box-shadow: 0 2px 3px rgba($black, 0.1) .nav-toggle @extend .hamburger @@ -54,10 +51,22 @@ a.nav-item // Modifiers &.is-active color: $link-active + &.is-tab + border-bottom: 1px solid transparent + border-top: 1px solid transparent + padding-left: 12px + padding-right: 12px + &:hover + border-bottom: 1px solid $link + border-top: 1px solid transparent + &.is-active + border-bottom: 3px solid $link + border-top: 3px solid transparent + color: $link .nav-tab align-items: center - border-bottom: 1px solid transparent + border: 1px solid transparent color: $text display: block height: $nav-height @@ -85,7 +94,6 @@ a.nav-item .nav-item border-top: 1px solid rgba($border, 0.5) padding: 10px - // Modifiers &.is-active display: block @@ -93,12 +101,20 @@ a.nav-item align-items: stretch display: flex flex: 1 + justify-content: flex-start overflow: hidden overflow-x: auto white-space: nowrap -.nav-right +.nav-center align-items: stretch + display: flex + justify-content: center + +.nav-right // Responsiveness +tablet + align-items: stretch display: flex + flex: 1 + justify-content: flex-end diff --git a/sass/components/tabs.sass b/sass/components/tabs.sass index a9000f2e3..8214924e8 100644 --- a/sass/components/tabs.sass +++ b/sass/components/tabs.sass @@ -69,7 +69,7 @@ a background: $white border-color: $border - border-bottom-color: transparent + border-bottom-color: transparent !important &.is-fullwidth li flex: 1 diff --git a/sass/elements/content.sass b/sass/elements/content.sass index ca83568a8..5c845d937 100644 --- a/sass/elements/content.sass +++ b/sass/elements/content.sass @@ -1,6 +1,9 @@ .content @extend .block // Inline + a + &:visited + color: $link-visited li + li margin-top: 0.25em // Block diff --git a/sass/layout/hero.sass b/sass/layout/hero.sass index c8d08c17e..e8823fcb7 100644 --- a/sass/layout/hero.sass +++ b/sass/layout/hero.sass @@ -55,11 +55,8 @@ justify-content: space-between .nav background: none - & > .container - box-shadow: 0 1px 0 rgba($border, 0.3) + box-shadow: 0 1px 0 rgba($border, 0.3) .tabs - a - border: none ul border-bottom: none // Colors @@ -80,8 +77,10 @@ strong color: $color-invert .nav - & > .container - box-shadow: 0 1px 0 rgba($color-invert, 0.2) + box-shadow: 0 1px 0 rgba($color-invert, 0.2) + .nav-menu + +mobile + background: $color a.nav-item, .nav-item a:not(.button) color: rgba($color-invert, 0.5) @@ -107,6 +106,7 @@ &, &:hover background: $color-invert + border-color: $color-invert color: $color // Modifiers &.is-bold @@ -140,9 +140,11 @@ &.is-fullheight min-height: 100vh .hero-body - align-items: stretch + align-items: center display: flex - flex-direction: column - justify-content: center - padding-bottom: 240px - padding-top: 240px + & > .container + align-items: stretch + display: flex + flex: 1 + flex-direction: column + justify-content: center diff --git a/sass/layout/layout.sass b/sass/layout/layout.sass index bce1c34e8..8792926bf 100644 --- a/sass/layout/layout.sass +++ b/sass/layout/layout.sass @@ -1,6 +1,5 @@ @charset "utf-8" -@import "header" @import "hero" @import "section" @import "footer"