diff --git a/CHANGELOG.md b/CHANGELOG.md index 80c57a22..eec48ba1 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 98024b65..0f9b86da 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 5f4092ef..2dceb269 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 ca65427f..070d380c 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 d5e638a8..7e314a4c 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 8f034ef3..f10ed3ea 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 d5a980ad..bdc4d046 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 d54f9697..08ba36b8 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 a62b3986..b09f1c82 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 ca7761ca..5769e1fe 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 4eab6461..0e89c292 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 b738daa1..0fb62b4e 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)