From: Jeremy Thomas Date: Sun, 30 Oct 2016 17:35:39 +0000 (+0000) Subject: Fix media object X-Git-Tag: 0.3.0^2~25 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=4a40ad0059df47beef274b2d38e580c3c9b8b6d7;p=thirdparty%2Fbulma.git Fix media object --- diff --git a/CHANGELOG.md b/CHANGELOG.md index 80c57a228..eec48ba15 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,6 +12,8 @@ * Add `.content` table * Fix inputs with icons * Input icons require the `.icon` container +* Deprecate `.media-number` +* Fix `.level-item` height ## 0.2.2 diff --git a/docs/bulma-docs.sass b/docs/bulma-docs.sass index 98024b65c..0f9b86dab 100644 --- a/docs/bulma-docs.sass +++ b/docs/bulma-docs.sass @@ -296,7 +296,7 @@ html.route-index #carbon pre max-height: 600px &:not(:last-child) - margin-bottom: 3rem + margin-bottom: 1.5rem $structure: $danger $structure-invert: $danger-invert diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index 5f4092ef1..2dceb2698 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -662,7 +662,7 @@ a.box:active { .button:focus, .button.is-focused { border-color: #00d1b2; - box-shadow: 0 0 0.5em rgba(0, 209, 178, 0.5); + box-shadow: 0 0 0.5em rgba(0, 209, 178, 0.25); color: #363636; } @@ -698,7 +698,7 @@ a.box:active { .button.is-white:focus, .button.is-white.is-focused { border-color: transparent; - box-shadow: 0 0 0.5em rgba(255, 255, 255, 0.5); + box-shadow: 0 0 0.5em rgba(255, 255, 255, 0.25); color: #0a0a0a; } @@ -749,7 +749,7 @@ a.box:active { .button.is-black:focus, .button.is-black.is-focused { border-color: transparent; - box-shadow: 0 0 0.5em rgba(10, 10, 10, 0.5); + box-shadow: 0 0 0.5em rgba(10, 10, 10, 0.25); color: white; } @@ -800,7 +800,7 @@ a.box:active { .button.is-light:focus, .button.is-light.is-focused { border-color: transparent; - box-shadow: 0 0 0.5em rgba(245, 245, 245, 0.5); + box-shadow: 0 0 0.5em rgba(245, 245, 245, 0.25); color: #363636; } @@ -851,7 +851,7 @@ a.box:active { .button.is-dark:focus, .button.is-dark.is-focused { border-color: transparent; - box-shadow: 0 0 0.5em rgba(54, 54, 54, 0.5); + box-shadow: 0 0 0.5em rgba(54, 54, 54, 0.25); color: whitesmoke; } @@ -902,7 +902,7 @@ a.box:active { .button.is-primary:focus, .button.is-primary.is-focused { border-color: transparent; - box-shadow: 0 0 0.5em rgba(0, 209, 178, 0.5); + box-shadow: 0 0 0.5em rgba(0, 209, 178, 0.25); color: #fff; } @@ -953,7 +953,7 @@ a.box:active { .button.is-info:focus, .button.is-info.is-focused { border-color: transparent; - box-shadow: 0 0 0.5em rgba(50, 115, 220, 0.5); + box-shadow: 0 0 0.5em rgba(50, 115, 220, 0.25); color: #fff; } @@ -1004,7 +1004,7 @@ a.box:active { .button.is-success:focus, .button.is-success.is-focused { border-color: transparent; - box-shadow: 0 0 0.5em rgba(35, 209, 96, 0.5); + box-shadow: 0 0 0.5em rgba(35, 209, 96, 0.25); color: #fff; } @@ -1055,7 +1055,7 @@ a.box:active { .button.is-warning:focus, .button.is-warning.is-focused { border-color: transparent; - box-shadow: 0 0 0.5em rgba(255, 221, 87, 0.5); + box-shadow: 0 0 0.5em rgba(255, 221, 87, 0.25); color: rgba(0, 0, 0, 0.7); } @@ -1106,7 +1106,7 @@ a.box:active { .button.is-danger:focus, .button.is-danger.is-focused { border-color: transparent; - box-shadow: 0 0 0.5em rgba(255, 56, 96, 0.5); + box-shadow: 0 0 0.5em rgba(255, 56, 96, 0.25); color: #fff; } @@ -2592,7 +2592,7 @@ a.box:active { } .subtitle + .title { - margin-top: -1.4rem; + margin-top: -1.5rem; } .subtitle.is-1 { @@ -2751,10 +2751,17 @@ a.box:active { } .number { + align-items: center; background-color: whitesmoke; border-radius: 290486px; - display: inline-block; + display: inline-flex; font-size: 1.25rem; + height: 2em; + justify-content: center; + margin-right: 1.5rem; + min-width: 2.5em; + padding: 0.25rem 0.5rem; + text-align: center; vertical-align: top; } @@ -2762,16 +2769,15 @@ a.box:active { align-items: stretch; box-shadow: 0 1px 2px rgba(10, 10, 10, 0.1); display: flex; - min-height: 40px; } .card-header-title { - align-items: flex-start; + align-items: center; color: #363636; display: flex; flex-grow: 1; - font-weight: bold; - padding: 10px; + font-weight: 700; + padding: 0.75rem; } .card-header-icon { @@ -2779,7 +2785,7 @@ a.box:active { cursor: pointer; display: flex; justify-content: center; - width: 40px; + padding: 0.75rem; } .card-image { @@ -2788,11 +2794,11 @@ a.box:active { } .card-content { - padding: 20px; + padding: 1.5rem; } .card-content .title + .subtitle { - margin-top: -20px; + margin-top: -1.5rem; } .card-footer { @@ -2805,8 +2811,9 @@ a.box:active { align-items: center; display: flex; flex-grow: 1; + flex-shrink: 0; justify-content: center; - padding: 10px; + padding: 0.75rem; } .card-footer-item:not(:last-child) { @@ -2819,15 +2826,10 @@ a.box:active { color: #4a4a4a; max-width: 100%; position: relative; - width: 300px; } .card .media:not(:last-child) { - margin-bottom: 10px; -} - -.card.is-fullwidth { - width: 100%; + margin-bottom: 0.75rem; } .card.is-rounded { @@ -3059,6 +3061,12 @@ a.box:active { color: #2aa198; } +.level-item { + align-items: center; + display: flex; + justify-content: center; +} + .level-item .title, .level-item .subtitle { margin-bottom: 0; @@ -3066,13 +3074,13 @@ a.box:active { @media screen and (max-width: 768px) { .level-item:not(:last-child) { - margin-bottom: 10px; + margin-bottom: 0.75rem; } } .level-left .level-item:not(:last-child), .level-right .level-item:not(:last-child) { - margin-right: 10px; + margin-right: 0.75rem; } .level-left .level-item.is-flexible, @@ -3080,24 +3088,31 @@ a.box:active { flex-grow: 1; } +.level-left { + align-items: center; + justify-content: flex-start; +} + @media screen and (max-width: 768px) { .level-left + .level-right { - margin-top: 20px; + margin-top: 1.5rem; } } @media screen and (min-width: 769px) { .level-left { - align-items: center; display: flex; } } +.level-right { + align-items: center; + justify-content: flex-end; +} + @media screen and (min-width: 769px) { .level-right { - align-items: center; display: flex; - justify-content: flex-end; } } @@ -3140,33 +3155,18 @@ a.box:active { } } -.media-number, .media-left, .media-right { flex-grow: 0; flex-shrink: 0; } -.media-number { - background-color: whitesmoke; - border-radius: 290486px; - display: inline-block; - font-size: 1.25rem; - height: 32px; - line-height: 24px; - margin-right: 1rem; - min-width: 32px; - padding: 4px 8px; - text-align: center; - vertical-align: top; -} - .media-left { - margin-right: 1rem; + margin-right: 0.75rem; } .media-right { - margin-left: 1rem; + margin-left: 0.75rem; } .media-content { @@ -3188,7 +3188,7 @@ a.box:active { .media .media { border-top: 1px solid rgba(219, 219, 219, 0.5); display: flex; - padding-top: 10px; + padding-top: 0.75rem; } .media .media .content:not(:last-child), @@ -3211,14 +3211,8 @@ a.box:active { } .media.is-large + .media { - margin-top: 1.4rem; - padding-top: 1.4rem; -} - -@media screen and (min-width: 769px) { - .media.is-large .media-number { - margin-right: 1.4rem; - } + margin-top: 1.5rem; + padding-top: 1.5rem; } .menu-nav a { @@ -6342,7 +6336,7 @@ html.route-index #carbon { } .example + .highlight:not(:last-child) { - margin-bottom: 3rem; + margin-bottom: 1.5rem; } .structure { diff --git a/docs/documentation/components/card.html b/docs/documentation/components/card.html index ca65427f8..070d380c2 100644 --- a/docs/documentation/components/card.html +++ b/docs/documentation/components/card.html @@ -13,37 +13,7 @@ doc-subtab: card
-
-
-
-
-
- -
-
-
-
-
-
- Image -
-
-
-

John Smith

-

@johnsmith

-
-
- -
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris. @bulmaio. #css #responsive -
- 11:09 PM - 1 Jan 2016 -
-
-
-
-
-{% highlight html %} +{% capture card_example %}
@@ -72,51 +42,36 @@ doc-subtab: card
+{% endcapture %} +
+
+{{card_example}} +
+
+{% highlight html %} +{{card_example}} {% endhighlight %} -
-
+
+
-
-
-
-
-

- Component -

- - - -
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris. @bulmaio. #css #responsive -
- 11:09 PM - 1 Jan 2016 -
-
- -
-
-
-{% highlight html %} -
+{% capture card_header_example %} +

Component

- + + +
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris. @bulmaio. #css #responsive + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris. + @bulmaio. #css #responsive
11:09 PM - 1 Jan 2016
@@ -127,8 +82,17 @@ doc-subtab: card Delete
+{% endcapture %} +
+
+{{card_header_example}} +
+
+{% highlight html %} +{{card_header_example}} {% endhighlight %} -
-
+
+
+
diff --git a/docs/documentation/components/level.html b/docs/documentation/components/level.html index d5e638a8f..7e314a4c9 100644 --- a/docs/documentation/components/level.html +++ b/docs/documentation/components/level.html @@ -71,46 +71,7 @@ doc-subtab: level
-
- -
- -{% highlight html %} +{% capture nav_example %} +{% endcapture %} +
+{{nav_example}} +
+{% highlight html %} +{{nav_example}} {% endhighlight %}
-

Centered level

- -
- If you want a centered level, you can use as many level-item as you want, as long as they are direct children of the level container. -
-
- -
- -{% highlight html %} +

Centered level

+
+ If you want a centered level, you can use as many level-item as you want, as long as they are direct children of the level container. +
+{% capture nav_centered_example %} -{% endhighlight %} - -
- -
- -{% highlight html %} +{% endcapture %} +{% capture nav_centered_bis_example %} +{% endcapture %} +
+{{nav_centered_example}} +
+{% highlight html %} +{{nav_centered_example}} +{% endhighlight %} +
+{{nav_centered_bis_example}} +
+{% highlight html %} +{{nav_centered_bis_example}} {% endhighlight %}
-

Mobile level

-
- By default, for space concerns, the level is vertical on mobile. If you want the level to be horizontal on mobile as well, add the is-mobile modifier on the level container. -
-
- -
+

Mobile level

+
+ By default, for space concerns, the level is vertical on mobile. If you want the level to be horizontal on mobile as well, add the is-mobile modifier on the level container. +
+{% capture nav_mobile_example %} + +{% endcapture %} +
+{{nav_mobile_example}} +
+{% highlight html %} +{{nav_mobile_example}} +{% endhighlight %} + diff --git a/docs/documentation/components/media-object.html b/docs/documentation/components/media-object.html index 8f034ef3d..f10ed3ea4 100644 --- a/docs/documentation/components/media-object.html +++ b/docs/documentation/components/media-object.html @@ -52,43 +52,7 @@ doc-subtab: media-object - -
-
-
-

- -

-
-
-
-

- John Smith @johnsmith 31m -
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis. -

-
- -
-
- -
-
-
- -{% highlight html %} +{% capture media_example %}

@@ -121,42 +85,19 @@ doc-subtab: media-object

+{% endcapture %} +
+{{media_example}} +
+{% highlight html %} +{{media_example}} {% endhighlight %}

You can include any other Bulma element, like inputs, textareas, icons, buttons... or even a nav bar.

-
-
-
-

- -

-
-
-

- -

- -
-
-
- -{% highlight html %} +{% capture media_bis_example %}

@@ -183,6 +124,12 @@ doc-subtab: media-object

+{% endcapture %} +
+{{media_bis_example}} +
+{% highlight html %} +{{media_bis_example}} {% endhighlight %}
@@ -191,88 +138,7 @@ doc-subtab: media-object

You can nest media objects up to 3 levels deep.

-
-
-
-

- -

-
-
-
-

- Barbara Middleton -
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis porta eros lacus, nec ultricies elit blandit non. Suspendisse pellentesque mauris sit amet dolor blandit rutrum. Nunc in tempus turpis. -
- Like · Reply · 3 hrs -

-
- -
-
-

- -

-
-
-
-

- Sean Brown -
- Donec sollicitudin urna eget eros malesuada sagittis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam blandit nisl a nulla sagittis, a lobortis leo feugiat. -
- Like · Reply · 2 hrs -

-
- -
- Vivamus quis semper metus, non tincidunt dolor. Vivamus in mi eu lorem cursus ullamcorper sit amet nec massa. -
- -
- Morbi vitae diam et purus tincidunt porttitor vel vitae augue. Praesent malesuada metus sed pharetra euismod. Cras tellus odio, tincidunt iaculis diam non, porta aliquet tortor. -
-
-
- -
-
-

- -

-
-
-
-

- Kayli Eunice -
- Sed convallis scelerisque mauris, non pulvinar nunc mattis vel. Maecenas varius felis sit amet magna vestibulum euismod malesuada cursus libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus lacinia non nisl id feugiat. -
- Like · Reply · 2 hrs -

-
-
-
-
-
-
-
-

- -

-
-
-

- -

-

- -

-
-
-
-{% highlight html %} +{% capture media_nested_example %}

@@ -352,6 +218,12 @@ doc-subtab: media-object

+{% endcapture %} +
+{{media_nested_example}} +
+{% highlight html %} +{{media_nested_example}} {% endhighlight %} diff --git a/sass/components/card.sass b/sass/components/card.sass index d5a980ad4..bdc4d0468 100644 --- a/sass/components/card.sass +++ b/sass/components/card.sass @@ -2,31 +2,30 @@ align-items: stretch box-shadow: 0 1px 2px rgba($black, 0.1) display: flex - min-height: 40px .card-header-title - align-items: flex-start + align-items: center color: $text-strong display: flex flex-grow: 1 - font-weight: bold - padding: 10px + font-weight: $weight-bold + padding: 0.75rem .card-header-icon align-items: center cursor: pointer display: flex justify-content: center - width: 40px + padding: 0.75rem .card-image display: block position: relative .card-content - padding: 20px + padding: 1.5rem .title + .subtitle - margin-top: -20px + margin-top: -1.5rem .card-footer border-top: 1px solid $border @@ -37,8 +36,9 @@ align-items: center display: flex flex-grow: 1 + flex-shrink: 0 justify-content: center - padding: 10px + padding: 0.75rem &:not(:last-child) border-right: 1px solid $border @@ -48,11 +48,8 @@ color: $text max-width: 100% position: relative - width: 300px .media:not(:last-child) - margin-bottom: 10px + margin-bottom: 0.75rem // Modifiers - &.is-fullwidth - width: 100% &.is-rounded border-radius: $radius-large diff --git a/sass/components/level.sass b/sass/components/level.sass index d54f96972..08ba36b87 100644 --- a/sass/components/level.sass +++ b/sass/components/level.sass @@ -1,36 +1,40 @@ .level-item + align-items: center + display: flex + justify-content: center .title, .subtitle margin-bottom: 0 // Responsiveness +mobile &:not(:last-child) - margin-bottom: 10px + margin-bottom: 0.75rem .level-left, .level-right .level-item &:not(:last-child) - margin-right: 10px + margin-right: 0.75rem // Modifiers &.is-flexible flex-grow: 1 .level-left + align-items: center + justify-content: flex-start // Responsiveness +mobile & + .level-right - margin-top: 20px + margin-top: 1.5rem +tablet - align-items: center display: flex .level-right + align-items: center + justify-content: flex-end // Responsiveness +tablet - align-items: center display: flex - justify-content: flex-end .level +block diff --git a/sass/components/media.sass b/sass/components/media.sass index a62b39866..b09f1c82a 100644 --- a/sass/components/media.sass +++ b/sass/components/media.sass @@ -1,27 +1,13 @@ -.media-number, .media-left, .media-right flex-grow: 0 flex-shrink: 0 -.media-number - background-color: $background - border-radius: 290486px - display: inline-block - font-size: $size-medium - height: 32px - line-height: 24px - margin-right: 1rem - min-width: 32px - padding: 4px 8px - text-align: center - vertical-align: top - .media-left - margin-right: 1rem + margin-right: 0.75rem .media-right - margin-left: 1rem + margin-left: 0.75rem .media-content flex-grow: 1 @@ -37,7 +23,7 @@ .media border-top: 1px solid rgba($border, 0.5) display: flex - padding-top: 10px + padding-top: 0.75rem .content:not(:last-child), .control:not(:last-child) margin-bottom: 0.5rem @@ -52,10 +38,5 @@ // Sizes &.is-large & + .media - margin-top: 1.4rem - padding-top: 1.4rem - // Responsiveness - +tablet - &.is-large - .media-number - margin-right: 1.4rem + margin-top: 1.5rem + padding-top: 1.5rem diff --git a/sass/elements/button.sass b/sass/elements/button.sass index ca7761ca3..5769e1fed 100644 --- a/sass/elements/button.sass +++ b/sass/elements/button.sass @@ -89,7 +89,7 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) &:focus, &.is-focused border-color: $button-focus-border - box-shadow: 0 0 0.5em rgba($button-focus-border, 0.5) + box-shadow: 0 0 0.5em rgba($button-focus-border, 0.25) color: $button-focus &:active, &.is-active @@ -125,7 +125,7 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) &:focus, &.is-focused border-color: transparent - box-shadow: 0 0 0.5em rgba($color, 0.5) + box-shadow: 0 0 0.5em rgba($color, 0.25) color: $color-invert &:active, &.is-active diff --git a/sass/elements/other.sass b/sass/elements/other.sass index 4eab64619..0e89c292b 100644 --- a/sass/elements/other.sass +++ b/sass/elements/other.sass @@ -42,8 +42,15 @@ +loader .number + align-items: center background-color: $background border-radius: 290486px - display: inline-block + display: inline-flex font-size: $size-medium + height: 2em + justify-content: center + margin-right: 1.5rem + min-width: 2.5em + padding: 0.25rem 0.5rem + text-align: center vertical-align: top diff --git a/sass/elements/title.sass b/sass/elements/title.sass index b738daa17..0fb62b4e9 100644 --- a/sass/elements/title.sass +++ b/sass/elements/title.sass @@ -48,7 +48,7 @@ $subtitle-weight: $weight-light !default strong color: $subtitle-strong & + .title - margin-top: -1.4rem + margin-top: -1.5rem // Colors @each $size in $sizes $i: index($sizes, $size)