From 39073e8cf0162c3e67748f0f8c2e87f3a0e46ec0 Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Fri, 25 Mar 2016 13:38:40 +0000 Subject: [PATCH] Add panel, Rename menu --- CHANGELOG.md | 3 ++ bulma/components/card.sass | 23 +++++++- bulma/components/components.sass | 8 +++ bulma/components/menu.sass | 93 +++++++++----------------------- bulma/components/panel.sass | 76 ++++++++++++++++++++++++++ bulma/elements/controls.sass | 32 +++++++---- bulma/elements/elements.sass | 7 --- bulma/layout/header.sass | 13 +++-- bulma/layout/hero.sass | 6 +-- 9 files changed, 167 insertions(+), 94 deletions(-) create mode 100644 CHANGELOG.md create mode 100644 bulma/components/panel.sass diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 00000000..dbb271b4 --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,3 @@ +## 0.0.17 + +* `.control.is-inline` for horizontal forms diff --git a/bulma/components/card.sass b/bulma/components/card.sass index c7595a03..c30b9676 100644 --- a/bulma/components/card.sass +++ b/bulma/components/card.sass @@ -1,3 +1,21 @@ +.card-header + align-items: stretch + box-shadow: 0 1px 2px rgba(black, 0.1) + display: flex + min-height: 36px + +.card-header-title + align-items: center + color: $text-strong + display: flex + flex: 1 + font-weight: bold + padding: 0 10px + +.card-header-icon + +fa(14px, 36px) + cursor: pointer + .card-image display: block position: relative @@ -9,7 +27,10 @@ .card-footer background: $background - display: block + align-items: center + display: flex + font-size: $size-small + justify-content: center padding: 10px .card diff --git a/bulma/components/components.sass b/bulma/components/components.sass index 7a3bb6a8..9d4a1352 100644 --- a/bulma/components/components.sass +++ b/bulma/components/components.sass @@ -7,4 +7,12 @@ @import "tabs" @import "media" @import "menu" +@import "panel" @import "modal" + +.box + @extend .block + background: white + border-radius: 5px + box-shadow: 0 2px 3px rgba(black, 0.1), 0 0 0 1px rgba(black, 0.1) + padding: 20px diff --git a/bulma/components/menu.sass b/bulma/components/menu.sass index 93054028..5c5287ed 100644 --- a/bulma/components/menu.sass +++ b/bulma/components/menu.sass @@ -1,76 +1,31 @@ -.menu-icon - +fa(14px, 16px) - color: $text-light - float: left - margin: 0 4px 0 -2px - .fa - font-size: inherit - line-height: inherit - -.menu-heading - background: $background - border-bottom: 1px solid $border - border-radius: 4px 4px 0 0 - color: $text-strong - font-size: $size-medium - font-weight: 300 - padding: 10px +.menu-nav + a + display: block + padding: 5px 10px .menu-list a + border-radius: 2px color: $text - &:hover - color: $link - -.menu-tabs - display: flex - font-size: $size-small - padding: 5px 10px 0 - justify-content: center - &:not(:last-child) - border-bottom: 1px solid $border - a - border-bottom: 1px solid $border - margin-bottom: -1px - padding: 5px - &.is-active - border-bottom-color: $link-active-border - color: $link-active - -.menu-block - color: $text-strong - display: block - line-height: 16px - padding: 10px - &:not(:last-child) - border-bottom: 1px solid $border - .checkbox - border: 1px solid transparent - border-radius: $radius display: block - padding: 8px - padding-left: 32px - input - left: 9px - top: 9px + padding: 4px 8px &:hover - border-color: $link + background: $background + color: $link + &.is-active + background: $link + color: $link-invert + li ul + border-left: 1px solid $border + margin: 8px + padding-left: 8px -a.menu-block:hover - background: $background - -.menu-checkbox - @extend .checkbox - display: block - padding: 9px 10px 9px 30px - &:not(:last-child) - border-bottom: 1px solid $border - input - left: 8px - top: 10px - -.menu - border: 1px solid $border - border-radius: 5px - &:not(:last-child) - margin-bottom: 20px +.menu-label + color: $text-light + font-size: $size-small + letter-spacing: 1px + margin-bottom: 5px + padding-left: 8px + text-transform: uppercase + &:not(:first-child) + margin-top: 20px diff --git a/bulma/components/panel.sass b/bulma/components/panel.sass new file mode 100644 index 00000000..0d269287 --- /dev/null +++ b/bulma/components/panel.sass @@ -0,0 +1,76 @@ +.panel-icon + +fa(14px, 16px) + color: $text-light + float: left + margin: 0 4px 0 -2px + .fa + font-size: inherit + line-height: inherit + +.panel-heading + background: $background + border-bottom: 1px solid $border + border-radius: 4px 4px 0 0 + color: $text-strong + font-size: $size-medium + font-weight: 300 + padding: 10px + +.panel-list + a + color: $text + &:hover + color: $link + +.panel-tabs + display: flex + font-size: $size-small + padding: 5px 10px 0 + justify-content: center + &:not(:last-child) + border-bottom: 1px solid $border + a + border-bottom: 1px solid $border + margin-bottom: -1px + padding: 5px + &.is-active + border-bottom-color: $link-active-border + color: $link-active + +.panel-block + color: $text-strong + display: block + line-height: 16px + padding: 10px + &:not(:last-child) + border-bottom: 1px solid $border + .checkbox + border: 1px solid transparent + border-radius: $radius + display: block + padding: 8px + padding-left: 32px + input + left: 9px + top: 9px + &:hover + border-color: $link + +a.panel-block:hover + background: $background + +.panel-checkbox + @extend .checkbox + display: block + padding: 9px 10px 9px 30px + &:not(:last-child) + border-bottom: 1px solid $border + input + left: 8px + top: 10px + +.panel + border: 1px solid $border + border-radius: 5px + &:not(:last-child) + margin-bottom: 20px diff --git a/bulma/elements/controls.sass b/bulma/elements/controls.sass index 48743f00..cc9a6bad 100644 --- a/bulma/elements/controls.sass +++ b/bulma/elements/controls.sass @@ -187,6 +187,18 @@ &:not(:last-child) margin-bottom: 5px +.control-label + flex: 1 + margin-right: 20px + padding-top: 7px + text-align: right + +.control-element + display: flex + flex: 5 + .input:not(:last-child) + margin-right: 10px + .control position: relative text-align: left @@ -211,15 +223,6 @@ padding-left: 32px &:focus + .fa color: $control-active - &.is-horizontal - display: flex - & > .button, - & > .input, - & > .select - &:not(:last-child) - margin-right: 10px - & > .input - flex: 1 &.is-grouped display: flex .input, @@ -240,3 +243,14 @@ border-radius: 0 $radius $radius 0 &.is-centered justify-content: center + &.is-horizontal + display: flex + & > .button, + & > .input, + & > .select + &:not(:last-child) + margin-right: 10px + & > .input + flex: 1 + &.is-inline + display: flex diff --git a/bulma/elements/elements.sass b/bulma/elements/elements.sass index 1cb1380a..5b437fe1 100644 --- a/bulma/elements/elements.sass +++ b/bulma/elements/elements.sass @@ -7,13 +7,6 @@ @import "messages" @import "notifications" -.box - @extend .block - background: white - border-radius: 5px - box-shadow: 0 2px 3px rgba(black, 0.1), 0 0 0 1px rgba(black, 0.1) - padding: 20px - .delete +unselectable -moz-appearance: none diff --git a/bulma/layout/header.sass b/bulma/layout/header.sass index fc28c509..256f7d41 100644 --- a/bulma/layout/header.sass +++ b/bulma/layout/header.sass @@ -35,12 +35,7 @@ img max-height: 24px a - color: $text flex: 1 - &:hover - color: $link-hover - &.is-active - color: $link-active .fa font-size: 21px line-height: 24px @@ -49,6 +44,14 @@ +mobile text-align: left +.header-item a, +a.header-item + color: $text + &:hover + color: $link-hover + &.is-active + color: $link-active + .header-icon +fa(14px, 24px) color: $text diff --git a/bulma/layout/hero.sass b/bulma/layout/hero.sass index 6f3dcead..cbe589d7 100644 --- a/bulma/layout/hero.sass +++ b/bulma/layout/hero.sass @@ -64,12 +64,12 @@ .header .container box-shadow: 0 1px 0 rgba($color-invert, 0.2) .header-icon, + a.header-item, .header-item > a:not(.button) - color: $color-invert - opacity: 0.5 + color: rgba($color-invert, 0.5) &:hover, &.is-active - opacity: 1 + color: $color-invert .tabs a color: $color-invert