From db6380b9fb0a93af32db0b60c6fac8d3ec1de35a Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Sun, 30 Oct 2016 23:35:30 +0000 Subject: [PATCH] Fix panel --- CHANGELOG.md | 1 + docs/css/bulma-docs.css | 132 ++++++++++++++--------- docs/documentation/components/panel.html | 119 ++++++++++---------- sass/components/panel.sass | 97 ++++++++++------- 4 files changed, 201 insertions(+), 148 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7a1e7664..a10ddea4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -23,6 +23,7 @@ * Fix `.nav` * Fix `.pagination` * Fix `.tabs` +* Fix `.panel` ## 0.2.2 diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index 2860326a..6cf1cdf6 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -4226,32 +4226,54 @@ a.nav-item.is-tab.is-active { } } -.panel-icon { - display: inline-block; - font-size: 14px; - height: 16px; - line-height: 16px; - text-align: center; - vertical-align: top; - width: 16px; - color: #7a7a7a; - float: left; - margin: 0 4px 0 -2px; +.panel { + font-size: 1rem; } -.panel-icon .fa { - font-size: inherit; - line-height: inherit; +.panel:not(:last-child) { + margin-bottom: 1.5rem; +} + +.panel-heading, +.panel-tabs, +.panel-block { + border-bottom: 1px solid #dbdbdb; + border-left: 1px solid #dbdbdb; + border-right: 1px solid #dbdbdb; +} + +.panel-heading:first-child, +.panel-tabs:first-child, +.panel-block:first-child { + border-top: 1px solid #dbdbdb; } .panel-heading { background-color: whitesmoke; - border-bottom: 1px solid #dbdbdb; - border-radius: 4px 4px 0 0; + border-radius: 3px 3px 0 0; color: #363636; - font-size: 1.25rem; + font-size: 1.25em; font-weight: 300; - padding: 10px; + line-height: 1.25; + padding: 0.5em 0.75em; +} + +.panel-tabs { + align-items: flex-end; + display: flex; + font-size: 0.875em; + justify-content: center; +} + +.panel-tabs a { + border-bottom: 1px solid #dbdbdb; + margin-bottom: -1px; + padding: 0.5em; +} + +.panel-tabs a.is-active { + border-bottom-color: #4a4a4a; + color: #363636; } .panel-list a { @@ -4262,50 +4284,58 @@ a.nav-item.is-tab.is-active { color: #00d1b2; } -.panel-tabs { - display: flex; - font-size: 0.75rem; - padding: 5px 10px 0; - justify-content: center; -} - -.panel-tabs a { - border-bottom: 1px solid #dbdbdb; - margin-bottom: -1px; - padding: 5px; -} - -.panel-tabs a.is-active { - border-bottom-color: #4a4a4a; - color: #363636; -} - -.panel-tabs:not(:last-child) { - border-bottom: 1px solid #dbdbdb; -} - .panel-block { + align-items: center; color: #363636; - display: block; - line-height: 16px; - padding: 10px; + display: flex; + justify-content: flex-start; + padding: 0.5em 0.75em; } -.panel-block:not(:last-child) { - border-bottom: 1px solid #dbdbdb; +.panel-block input[type="checkbox"] { + margin-right: 0.75em; } -a.panel-block:hover { +.panel-block > .control { + flex-grow: 1; + flex-shrink: 1; + width: 100%; +} + +.panel-block.is-active { + border-left-color: #00d1b2; + color: #363636; +} + +.panel-block.is-active .panel-icon { + color: #00d1b2; +} + +a.panel-block, +label.panel-block { + cursor: pointer; +} + +a.panel-block:hover, +label.panel-block:hover { background-color: whitesmoke; } -.panel { - border: 1px solid #dbdbdb; - border-radius: 5px; +.panel-icon { + display: inline-block; + font-size: 14px; + height: 1em; + line-height: 1em; + text-align: center; + vertical-align: top; + width: 1em; + color: #7a7a7a; + margin-right: 0.75em; } -.panel:not(:last-child) { - margin-bottom: 20px; +.panel-icon .fa { + font-size: inherit; + line-height: inherit; } .tabs { diff --git a/docs/documentation/components/panel.html b/docs/documentation/components/panel.html index 0def19fe..da5656af 100644 --- a/docs/documentation/components/panel.html +++ b/docs/documentation/components/panel.html @@ -13,92 +13,88 @@ doc-subtab: panel
-
-
- -
-
-{% highlight html %} +
+

+ The panel is container for several types: +

+
    +
  • + panel-heading as the first child +
    • +
  • + panel-tabs for navigation +
    • +
  • + panel-block which can contain other elements, like: +
      +
    • control
      • +
    • input
      • +
    • button
      • +
    • panel-icon
      • +
    +
    • +
+

+ The panel-block can be an anchor tag <a> or a label <label> with a checkbox inside. +

+
+ +{% capture panel_example %}
+{% endcapture %} +
+
+{{panel_example}} +
+
+{% highlight html %} +{{panel_example}} {% endhighlight %}
+
diff --git a/sass/components/panel.sass b/sass/components/panel.sass index a60949ee..32d3fd11 100644 --- a/sass/components/panel.sass +++ b/sass/components/panel.sass @@ -1,20 +1,39 @@ -.panel-icon - +fa(14px, 16px) - color: $text-light - float: left - margin: 0 4px 0 -2px - .fa - font-size: inherit - line-height: inherit +.panel + font-size: $size-normal + &:not(:last-child) + margin-bottom: 1.5rem + +.panel-heading, +.panel-tabs, +.panel-block + border-bottom: 1px solid $border + border-left: 1px solid $border + border-right: 1px solid $border + &:first-child + border-top: 1px solid $border .panel-heading background-color: $background - border-bottom: 1px solid $border - border-radius: 4px 4px 0 0 + border-radius: $radius $radius 0 0 color: $text-strong - font-size: $size-medium - font-weight: 300 - padding: 10px + font-size: 1.25em + font-weight: $weight-light + line-height: 1.25 + padding: 0.5em 0.75em + +.panel-tabs + align-items: flex-end + display: flex + font-size: 0.875em + justify-content: center + a + border-bottom: 1px solid $border + margin-bottom: -1px + padding: 0.5em + // Modifiers + &.is-active + border-bottom-color: $link-active-border + color: $link-active .panel-list a @@ -22,36 +41,34 @@ &:hover color: $link -.panel-tabs - display: flex - font-size: $size-small - padding: 5px 10px 0 - justify-content: center - a - border-bottom: 1px solid $border - margin-bottom: -1px - padding: 5px - // Modifiers - &.is-active - border-bottom-color: $link-active-border - color: $link-active - &:not(:last-child) - border-bottom: 1px solid $border - .panel-block + align-items: center color: $text-strong - display: block - line-height: 16px - padding: 10px - &:not(:last-child) - border-bottom: 1px solid $border + display: flex + justify-content: flex-start + padding: 0.5em 0.75em + input[type="checkbox"] + margin-right: 0.75em + & > .control + flex-grow: 1 + flex-shrink: 1 + width: 100% + &.is-active + border-left-color: $link + color: $link-active + .panel-icon + color: $link -a.panel-block +a.panel-block, +label.panel-block + cursor: pointer &:hover background-color: $background -.panel - border: 1px solid $border - border-radius: $radius-large - &:not(:last-child) - margin-bottom: 20px +.panel-icon + +fa(14px, 1em) + color: $text-light + margin-right: 0.75em + .fa + font-size: inherit + line-height: inherit