From: Jeremy Thomas Date: Sun, 30 Oct 2016 23:35:30 +0000 (+0000) Subject: Fix panel X-Git-Tag: 0.3.0^2~19 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=db6380b9fb0a93af32db0b60c6fac8d3ec1de35a;p=thirdparty%2Fbulma.git Fix panel --- diff --git a/CHANGELOG.md b/CHANGELOG.md index 7a1e76648..a10ddea49 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 2860326af..6cf1cdf68 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -4226,53 +4226,49 @@ 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 { - background-color: whitesmoke; +.panel-heading, +.panel-tabs, +.panel-block { border-bottom: 1px solid #dbdbdb; - border-radius: 4px 4px 0 0; - color: #363636; - font-size: 1.25rem; - font-weight: 300; - padding: 10px; + border-left: 1px solid #dbdbdb; + border-right: 1px solid #dbdbdb; } -.panel-list a { - color: #4a4a4a; +.panel-heading:first-child, +.panel-tabs:first-child, +.panel-block:first-child { + border-top: 1px solid #dbdbdb; } -.panel-list a:hover { - color: #00d1b2; +.panel-heading { + background-color: whitesmoke; + border-radius: 3px 3px 0 0; + color: #363636; + font-size: 1.25em; + font-weight: 300; + line-height: 1.25; + padding: 0.5em 0.75em; } .panel-tabs { + align-items: flex-end; display: flex; - font-size: 0.75rem; - padding: 5px 10px 0; + font-size: 0.875em; justify-content: center; } .panel-tabs a { border-bottom: 1px solid #dbdbdb; margin-bottom: -1px; - padding: 5px; + padding: 0.5em; } .panel-tabs a.is-active { @@ -4280,32 +4276,66 @@ a.nav-item.is-tab.is-active { color: #363636; } -.panel-tabs:not(:last-child) { - border-bottom: 1px solid #dbdbdb; +.panel-list a { + color: #4a4a4a; +} + +.panel-list a:hover { + color: #00d1b2; } .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; +} + +.panel-block > .control { + flex-grow: 1; + flex-shrink: 1; + width: 100%; +} + +.panel-block.is-active { + border-left-color: #00d1b2; + color: #363636; } -a.panel-block:hover { +.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 0def19fe2..da5656af3 100644 --- a/docs/documentation/components/panel.html +++ b/docs/documentation/components/panel.html @@ -13,91 +13,87 @@ 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 a60949ee0..32d3fd114 100644 --- a/sass/components/panel.sass +++ b/sass/components/panel.sass @@ -1,57 +1,74 @@ -.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 - -.panel-list - a - color: $text - &:hover - color: $link + 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: $size-small - padding: 5px 10px 0 + font-size: 0.875em justify-content: center a border-bottom: 1px solid $border margin-bottom: -1px - padding: 5px + padding: 0.5em // Modifiers &.is-active border-bottom-color: $link-active-border color: $link-active - &:not(:last-child) - border-bottom: 1px solid $border + +.panel-list + a + color: $text + &:hover + color: $link .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