diff --git a/CHANGELOG.md b/CHANGELOG.md index 716c9938..369d9eb6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -25,6 +25,10 @@ Each main color (`"primary"`, `"info"`, `"success"`, `"warning"`, `"danger"`) no The light colors are used by the `button` element, while the light and dark colors are used by the `message` component. +#### Panel colors + +The `panel` component is now available in all the different colors. + #### 4-value color map The `$colors` Sass map now accepts, for each of its values, a map of up to **4** values. For example: the key `"info"` now has the `($info, $info-invert, $info-light, $info-dark)` map. diff --git a/docs/_layouts/post.html b/docs/_layouts/post.html index d7f75f8e..0b2c7a23 100644 --- a/docs/_layouts/post.html +++ b/docs/_layouts/post.html @@ -71,11 +71,9 @@ breadcrumb:
-
-
-
- {{ content }} -
+
+
+ {{ content }}
diff --git a/docs/_posts/2019-10-15-light-dark-colors.md b/docs/_posts/2019-10-15-light-dark-colors.md new file mode 100644 index 00000000..909f4b1c --- /dev/null +++ b/docs/_posts/2019-10-15-light-dark-colors.md @@ -0,0 +1,146 @@ +--- +title: "Light and Dark colors, better look, larger buttons, panel colors, and more" +layout: post +introduction: "A big update for more colors and flexibility" +color: "primary" +name: "Light/Dark colors, better look, larger controls" +icon: "sun" +published: false +--- + +The new version **[Bulma 0.8.0](#)** is out! It comes with several bug fixes and a lot of nice new features: + +* [Light/Dark colors](#light-dark-colors) +* [Better visual look](#better-visual-look) +* [Panel colors](#panel-colors) +* [4-value color map](#4-value-color-map) +* [Scheme variables](#scheme-variables) + +More in the [Changelog](#). + +{% include elements/anchor.html name="Light/Dark colors" %} + +Each main color (`"primary"`, `"info"`, `"success"`, `"warning"`, `"danger"`) now comes with a `*-light` and a `*-dark` version. They are calculated using 2 new color functions: + +* `findLightColor()` which finds the light version of a color +* `findDarkolor()` which finds the dark version of a color + +The **light** colors are used by the `button` element: + +
+ + List Bulma buttons + +
+ +The **light** and **dark** colors are used by the `message` component, which generates much prettier colored versions. See the difference between before (left) and after (right): + +
+ + Messages before + Messages after + +
+ +{% include elements/anchor.html name="Better visual look" %} + +Some of the Bulma colors have been updated: + + + + + + + + + + + + + + + + + + + + + + +
ColorBeforeAfter
+ $green + + {% include elements/color-square.html value="hsl(141, 71%, 48%)" %} + + {% include elements/color-square.html value="hsl(141, 53%, 53%)" %} +
+ $cyan + + {% include elements/color-square.html value="hsl(204, 86%, 53%)" %} + + {% include elements/color-square.html value="hsl(204, 71%, 53%)" %} +
+ $red + + {% include elements/color-square.html value="hsl(348, 100%, 61%)" %} + + {% include elements/color-square.html value="hsl(348, 86%, 61%)" %} +
+ +The shadows of the box and card have been improved: + +
+ + Card before + Card after + +
+ +
+ + Box before + Box after + +
+ +{% include elements/anchor.html name="Panel colors" %} + +

+ The panel component is now available in all colors: +

+ +
+ + Panel colors + +
+ +{% include elements/anchor.html name="4-value color map" %} + +The `$colors` Sass map now accepts, for each of its values, a map of up to **4** values. For example: the key `"info"` now has the `($info, $info-invert, $info-light, $info-dark)` map. + +If you provide a `$custom-colors` map, you can decide to provide a map of 1, 2, 3 or 4 values for each value. If fewer than 4 are provided, Bulma will calculate the remaining ones: + +```scss +$custom-colors: ( + "lime": (lime), + "tomato": (tomato, white), + "orange": ($orange, $orange-invert, $orange-light), + "lavender": ($lavender, $lavender-invert, $lavender-light, $lavender-dark) +); +``` + +This is processed by the updated `mergeColorMaps()` Sass function. + +{% include elements/anchor.html name="Scheme variables" %} + +There are 6 new `$scheme` derived variables: `$scheme-main` `$scheme-main-bis` `$scheme-main-ter` `$scheme-invert` `$scheme-invert-bis` `$scheme-invert-ter` +They replace the `$white` and `$black` occurences in the codebase. This makes it easy to create a "Dark mode" simply by swapping the values: + +```sass +$scheme-main: $black +$scheme-invert: $white +// etc. +``` + +That is also why most of the codebase now references **derived** variables (`$text`, `$background`, `$border` etc.) instead of **initial** ones (`$grey`, `$grey-lighter`, `$grey-darker` etc.): updating the derived variables will affect all elements and components directly. diff --git a/docs/_sass/specific.sass b/docs/_sass/specific.sass index 8676e735..62d705df 100644 --- a/docs/_sass/specific.sass +++ b/docs/_sass/specific.sass @@ -2,6 +2,18 @@ background-color: $primary color: $primary-invert +.bd-post-container + margin: 0 auto + max-width: 56rem + +.bd-post-fullwidth + text-align: center + ++from(60rem) + .bd-post-fullwidth + margin-left: calc(28rem - 50vw) + margin-right: calc(28rem - 50vw) + .bd-post .table font-size: 1rem diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index b0ff2912..1ec909a3 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -1,13 +1,5 @@ @charset "UTF-8"; /*! bulma.io v0.7.5 | MIT License | github.com/jgthms/bulma */ -@-webkit-keyframes spinAround { - from { - transform: rotate(0deg); - } - to { - transform: rotate(359deg); - } -} @keyframes spinAround { from { transform: rotate(0deg); @@ -46,7 +38,7 @@ } .box:not(:last-child), .content:not(:last-child), .notification:not(:last-child), .progress:not(:last-child), .table:not(:last-child), .table-container:not(:last-child), .title:not(:last-child), -.subtitle:not(:last-child), .block:not(:last-child), .highlight:not(:last-child), .breadcrumb:not(:last-child), .level:not(:last-child), .list:not(:last-child), .message:not(:last-child), .tabs:not(:last-child) { +.subtitle:not(:last-child), .block:not(:last-child), .highlight:not(:last-child), .breadcrumb:not(:last-child), .level:not(:last-child), .list:not(:last-child), .message:not(:last-child), .pagination:not(:last-child), .tabs:not(:last-child) { margin-bottom: 1.5rem; } @@ -130,8 +122,7 @@ } .button.is-loading::after, .loader, .select.is-loading::after, .control.is-loading::after { - -webkit-animation: spinAround 500ms infinite linear; - animation: spinAround 500ms infinite linear; + animation: spinAround 500ms infinite linear; border: 2px solid #dbdbdb; border-radius: 290486px; border-right-color: transparent; @@ -321,10 +312,7 @@ html { overflow-x: hidden; overflow-y: scroll; text-rendering: optimizeLegibility; - -webkit-text-size-adjust: 100%; - -moz-text-size-adjust: 100%; - -ms-text-size-adjust: 100%; - text-size-adjust: 100%; + text-size-adjust: 100%; } article, @@ -3644,14 +3632,10 @@ fieldset[disabled] .button { } .progress:indeterminate { - -webkit-animation-duration: 1.5s; - animation-duration: 1.5s; - -webkit-animation-iteration-count: infinite; - animation-iteration-count: infinite; - -webkit-animation-name: moveIndeterminate; - animation-name: moveIndeterminate; - -webkit-animation-timing-function: linear; - animation-timing-function: linear; + animation-duration: 1.5s; + animation-iteration-count: infinite; + animation-name: moveIndeterminate; + animation-timing-function: linear; background-color: #ededed; background-image: linear-gradient(to right, #4a4a4a 30%, #ededed 30%); background-position: top left; @@ -3679,15 +3663,6 @@ fieldset[disabled] .button { height: 1.5rem; } -@-webkit-keyframes moveIndeterminate { - from { - background-position: 200% 0; - } - to { - background-position: -200% 0; - } -} - @keyframes moveIndeterminate { from { background-position: 200% 0; @@ -6122,7 +6097,6 @@ a.list-item { .message.is-white .message-body { border-color: white; - color: #4d4d4d; } .message.is-black { @@ -6136,7 +6110,6 @@ a.list-item { .message.is-black .message-body { border-color: #0a0a0a; - color: #090909; } .message.is-light { @@ -6150,7 +6123,6 @@ a.list-item { .message.is-light .message-body { border-color: whitesmoke; - color: #505050; } .message.is-dark { @@ -6164,7 +6136,6 @@ a.list-item { .message.is-dark .message-body { border-color: #363636; - color: #2a2a2a; } .message.is-primary { @@ -7642,13 +7613,143 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i margin-bottom: 1.5rem; } +.panel.is-white .panel-heading { + background-color: white; + color: #0a0a0a; +} + +.panel.is-white .panel-tabs a.is-active { + border-bottom-color: white; +} + +.panel.is-white .panel-block.is-active .panel-icon { + color: white; +} + +.panel.is-black .panel-heading { + background-color: #0a0a0a; + color: white; +} + +.panel.is-black .panel-tabs a.is-active { + border-bottom-color: #0a0a0a; +} + +.panel.is-black .panel-block.is-active .panel-icon { + color: #0a0a0a; +} + +.panel.is-light .panel-heading { + background-color: whitesmoke; + color: rgba(0, 0, 0, 0.7); +} + +.panel.is-light .panel-tabs a.is-active { + border-bottom-color: whitesmoke; +} + +.panel.is-light .panel-block.is-active .panel-icon { + color: whitesmoke; +} + +.panel.is-dark .panel-heading { + background-color: #363636; + color: #fff; +} + +.panel.is-dark .panel-tabs a.is-active { + border-bottom-color: #363636; +} + +.panel.is-dark .panel-block.is-active .panel-icon { + color: #363636; +} + +.panel.is-primary .panel-heading { + background-color: #00d1b2; + color: #fff; +} + +.panel.is-primary .panel-tabs a.is-active { + border-bottom-color: #00d1b2; +} + +.panel.is-primary .panel-block.is-active .panel-icon { + color: #00d1b2; +} + +.panel.is-link .panel-heading { + background-color: #3273dc; + color: #fff; +} + +.panel.is-link .panel-tabs a.is-active { + border-bottom-color: #3273dc; +} + +.panel.is-link .panel-block.is-active .panel-icon { + color: #3273dc; +} + +.panel.is-info .panel-heading { + background-color: #3298dc; + color: #fff; +} + +.panel.is-info .panel-tabs a.is-active { + border-bottom-color: #3298dc; +} + +.panel.is-info .panel-block.is-active .panel-icon { + color: #3298dc; +} + +.panel.is-success .panel-heading { + background-color: #48c774; + color: #fff; +} + +.panel.is-success .panel-tabs a.is-active { + border-bottom-color: #48c774; +} + +.panel.is-success .panel-block.is-active .panel-icon { + color: #48c774; +} + +.panel.is-warning .panel-heading { + background-color: #ffdd57; + color: rgba(0, 0, 0, 0.7); +} + +.panel.is-warning .panel-tabs a.is-active { + border-bottom-color: #ffdd57; +} + +.panel.is-warning .panel-block.is-active .panel-icon { + color: #ffdd57; +} + +.panel.is-danger .panel-heading { + background-color: #f14668; + color: #fff; +} + +.panel.is-danger .panel-tabs a.is-active { + border-bottom-color: #f14668; +} + +.panel.is-danger .panel-block.is-active .panel-icon { + color: #f14668; +} + .panel-tabs:not(:last-child), .panel-block:not(:last-child) { border-bottom: 1px solid #ededed; } .panel-heading { - background-color: whitesmoke; + background-color: #ededed; border-radius: 6px 6px 0 0; color: #363636; font-size: 1.25em; @@ -9708,8 +9809,6 @@ label.panel-block:hover { flex-basis: 0; flex-grow: 1; flex-shrink: 1; - min-height: -webkit-min-content; - min-height: -moz-min-content; min-height: min-content; } @@ -12040,17 +12139,6 @@ svg { opacity: 1; } -@-webkit-keyframes introSpinner { - from { - opacity: 0; - transform: scale(1.14); - } - to { - opacity: 1; - transform: scale(1); - } -} - @keyframes introSpinner { from { opacity: 0; @@ -12064,11 +12152,9 @@ svg { .intro-spinner, .intro-shadow { - -webkit-animation-duration: 500ms; - animation-duration: 500ms; + animation-duration: 500ms; animation-easing-function: ease-out; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; + animation-fill-mode: both; transform-origin: center; } @@ -12078,13 +12164,11 @@ svg { position: absolute; right: 0; top: 0; - -webkit-animation-name: introSpinner; - animation-name: introSpinner; + animation-name: introSpinner; } .intro-spinner::before { - -webkit-animation: spinAround 500ms infinite linear; - animation: spinAround 500ms infinite linear; + animation: spinAround 500ms infinite linear; border: 2px solid #dbdbdb; border-radius: 290486px; border-right-color: transparent; @@ -12103,17 +12187,6 @@ svg { width: 1.5em; } -@-webkit-keyframes introShadow { - from { - opacity: 0; - transform: scale(0.86); - } - to { - opacity: 1; - transform: scale(1); - } -} - @keyframes introShadow { from { opacity: 0; @@ -12136,8 +12209,7 @@ svg { background-repeat: no-repeat; background-size: cover; box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.2); - -webkit-animation-name: introShadow; - animation-name: introShadow; + animation-name: introShadow; } .intro-iframe { @@ -12583,6 +12655,22 @@ svg { color: #fff; } +.bd-post-container { + margin: 0 auto; + max-width: 56rem; +} + +.bd-post-fullwidth { + text-align: center; +} + +@media screen and (min-width: 60rem) { + .bd-post-fullwidth { + margin-left: calc(28rem - 50vw); + margin-right: calc(28rem - 50vw); + } +} + .bd-post .table { font-size: 1rem; } @@ -13921,8 +14009,7 @@ svg { } .bd-rainbow { - -webkit-animation: rainbow 8s ease infinite; - animation: rainbow 8s ease infinite; + animation: rainbow 8s ease infinite; background-image: linear-gradient(124deg, #ff470f, #f14668, #b86bff, #3273dc); background-size: 800% 800%; } @@ -13932,18 +14019,6 @@ svg { color: white; } -@-webkit-keyframes rainbow { - 0% { - background-position: 1% 80%; - } - 50% { - background-position: 99% 20%; - } - 100% { - background-position: 1% 80%; - } -} - @keyframes rainbow { 0% { background-position: 1% 80%; @@ -14433,15 +14508,6 @@ svg { } } -@-webkit-keyframes fadeIn { - from { - opacity: 0; - } - to { - opacity: 1; - } -} - @keyframes fadeIn { from { opacity: 0; @@ -14451,15 +14517,6 @@ svg { } } -@-webkit-keyframes zoomIn { - from { - transform: scale(0.8); - } - to { - transform: scale(1); - } -} - @keyframes zoomIn { from { transform: scale(0.8); @@ -14604,21 +14661,17 @@ svg { .bd-book-modal .bd-book-modal-background, .bd-book-modal .modal-content { - -webkit-animation-duration: 250ms; - animation-duration: 250ms; + animation-duration: 250ms; animation-easing-function: ease-out; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; + animation-fill-mode: both; } .bd-book-modal .bd-book-modal-background { - -webkit-animation-name: fadeIn; - animation-name: fadeIn; + animation-name: fadeIn; } .bd-book-modal .modal-content { - -webkit-animation-name: zoomIn; - animation-name: zoomIn; + animation-name: zoomIn; transform-origin: center; } @@ -14809,15 +14862,6 @@ svg { } } -@-webkit-keyframes bdGrow { - from { - transform: scale(0); - } - to { - transform: scale(1); - } -} - @keyframes bdGrow { from { transform: scale(0); @@ -14827,17 +14871,6 @@ svg { } } -@-webkit-keyframes bdSlideDown { - from { - opacity: 0; - transform: translateY(-1rem); - } - to { - opacity: 1; - transform: translateY(0); - } -} - @keyframes bdSlideDown { from { opacity: 0; @@ -14849,17 +14882,6 @@ svg { } } -@-webkit-keyframes bdSlideUp { - from { - opacity: 0; - transform: translateY(1rem); - } - to { - opacity: 1; - transform: translateY(0); - } -} - @keyframes bdSlideUp { from { opacity: 0; @@ -14873,132 +14895,95 @@ svg { .intro-title, .intro-ghbtns, .intro-author, .intro-npm, .intro-buttons .button, .bd-focus-item .title, .bd-focus-item .subtitle, .bd-focus-mobile, .bd-focus-tablet, .bd-focus-desktop, .bd-focus-cube-1, .bd-focus-cube-2, .bd-focus-cube-3, .bd-focus-css3, .bd-focus-github { - -webkit-animation-duration: 500ms; - animation-duration: 500ms; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; - -webkit-animation-timing-function: cubic-bezier(0.14, 0.71, 0.29, 0.86); - animation-timing-function: cubic-bezier(0.14, 0.71, 0.29, 0.86); + animation-duration: 500ms; + animation-fill-mode: both; + animation-timing-function: cubic-bezier(0.14, 0.71, 0.29, 0.86); transform-origin: center center; } .intro-title { - -webkit-animation-name: bdSlideDown; - animation-name: bdSlideDown; + animation-name: bdSlideDown; } .intro-ghbtns, .intro-author { - -webkit-animation-delay: 1s; - animation-delay: 1s; - -webkit-animation-duration: 1000ms; - animation-duration: 1000ms; - -webkit-animation-name: bdFadeIn; - animation-name: bdFadeIn; + animation-delay: 1s; + animation-duration: 1000ms; + animation-name: bdFadeIn; } .intro-npm { - -webkit-animation-delay: 250ms; - animation-delay: 250ms; - -webkit-animation-name: bdSlowIn; - animation-name: bdSlowIn; + animation-delay: 250ms; + animation-name: bdSlowIn; } .intro-buttons .button { - -webkit-animation-name: bdSlowIn; - animation-name: bdSlowIn; + animation-name: bdSlowIn; } .intro-buttons .button:first-child { - -webkit-animation-delay: 500ms; - animation-delay: 500ms; + animation-delay: 500ms; } .intro-buttons .button:last-child { - -webkit-animation-delay: 750ms; - animation-delay: 750ms; + animation-delay: 750ms; } .bd-focus-item .title { - -webkit-animation-name: bdSlideDown; - animation-name: bdSlideDown; + animation-name: bdSlideDown; } .bd-focus-item .subtitle { - -webkit-animation-name: bdSlideUp; - animation-name: bdSlideUp; + animation-name: bdSlideUp; } .bd-focus-item:nth-child(1) .title { - -webkit-animation-delay: 1s; - animation-delay: 1s; + animation-delay: 1s; } .bd-focus-item:nth-child(1) .subtitle { - -webkit-animation-delay: 1.125s; - animation-delay: 1.125s; + animation-delay: 1.125s; } .bd-focus-item:nth-child(2) .title { - -webkit-animation-delay: 1.5s; - animation-delay: 1.5s; + animation-delay: 1.5s; } .bd-focus-item:nth-child(2) .subtitle { - -webkit-animation-delay: 1.625s; - animation-delay: 1.625s; + animation-delay: 1.625s; } .bd-focus-item:nth-child(3) .title { - -webkit-animation-delay: 2s; - animation-delay: 2s; + animation-delay: 2s; } .bd-focus-item:nth-child(3) .subtitle { - -webkit-animation-delay: 2.125s; - animation-delay: 2.125s; + animation-delay: 2.125s; } .bd-focus-item:nth-child(4) .title { - -webkit-animation-delay: 2.5s; - animation-delay: 2.5s; + animation-delay: 2.5s; } .bd-focus-item:nth-child(4) .subtitle { - -webkit-animation-delay: 2.625s; - animation-delay: 2.625s; + animation-delay: 2.625s; } .bd-focus-mobile, .bd-focus-tablet, .bd-focus-desktop { - -webkit-animation-name: bdGrow; - animation-name: bdGrow; + animation-name: bdGrow; transform-origin: bottom center; } .bd-focus-mobile { - -webkit-animation-delay: 1s; - animation-delay: 1s; + animation-delay: 1s; } .bd-focus-tablet { - -webkit-animation-delay: 1.25s; - animation-delay: 1.25s; + animation-delay: 1.25s; } .bd-focus-desktop { - -webkit-animation-delay: 1.5s; - animation-delay: 1.5s; -} - -@-webkit-keyframes bdCube1 { - 0% { - transform: translate3d(0, -50px, 0); - opacity: 0; - } - 25%, 100% { - transform: translate3d(0, 0, 0); - opacity: 1; - } + animation-delay: 1.5s; } @keyframes bdCube1 { @@ -15012,17 +14997,6 @@ svg { } } -@-webkit-keyframes bdCube2 { - 0% { - transform: translate3d(-40px, 30px, 0); - opacity: 0; - } - 25%, 100% { - transform: translate3d(0, 0, 0); - opacity: 1; - } -} - @keyframes bdCube2 { 0% { transform: translate3d(-40px, 30px, 0); @@ -15034,17 +15008,6 @@ svg { } } -@-webkit-keyframes bdCube3 { - 0% { - transform: translate3d(40px, 30px, 0); - opacity: 0; - } - 25%, 100% { - transform: translate3d(0, 0, 0); - opacity: 1; - } -} - @keyframes bdCube3 { 0% { transform: translate3d(40px, 30px, 0); @@ -15057,42 +15020,24 @@ svg { } .bd-focus-cube-1, .bd-focus-cube-2, .bd-focus-cube-3 { - -webkit-animation-direction: alternate; - animation-direction: alternate; - -webkit-animation-duration: 2000ms; - animation-duration: 2000ms; - -webkit-animation-iteration-count: infinite; - animation-iteration-count: infinite; + animation-direction: alternate; + animation-duration: 2000ms; + animation-iteration-count: infinite; } .bd-focus-cube-1 { - -webkit-animation-delay: 1.5s; - animation-delay: 1.5s; - -webkit-animation-name: bdCube1; - animation-name: bdCube1; + animation-delay: 1.5s; + animation-name: bdCube1; } .bd-focus-cube-2 { - -webkit-animation-name: bdCube2; - animation-name: bdCube2; - -webkit-animation-delay: 1.75s; - animation-delay: 1.75s; + animation-name: bdCube2; + animation-delay: 1.75s; } .bd-focus-cube-3 { - -webkit-animation-name: bdCube3; - animation-name: bdCube3; - -webkit-animation-delay: 2s; - animation-delay: 2s; -} - -@-webkit-keyframes bdFadeIn { - from { - opacity: 0; - } - to { - opacity: 1; - } + animation-name: bdCube3; + animation-delay: 2s; } @keyframes bdFadeIn { @@ -15104,17 +15049,6 @@ svg { } } -@-webkit-keyframes bdSlowIn { - from { - opacity: 0; - transform: scale(0.9); - } - to { - opacity: 1; - transform: scale(1); - } -} - @keyframes bdSlowIn { from { opacity: 0; @@ -15126,17 +15060,6 @@ svg { } } -@-webkit-keyframes bdScaleIn { - from { - opacity: 0; - transform: scale(0); - } - to { - opacity: 1; - transform: scale(1); - } -} - @keyframes bdScaleIn { from { opacity: 0; @@ -15149,103 +15072,14 @@ svg { } .bd-focus-css3 { - -webkit-animation-delay: 2s; - animation-delay: 2s; - -webkit-animation-name: bdScaleIn; - animation-name: bdScaleIn; + animation-delay: 2s; + animation-name: bdScaleIn; } .bd-focus-github { - -webkit-animation-delay: 2.5s; - animation-delay: 2.5s; - -webkit-animation-duration: 1500ms; - animation-duration: 1500ms; - -webkit-animation-name: bdJellyPop; - animation-name: bdJellyPop; -} - -@-webkit-keyframes bdJellyPop { - 0% { - opacity: 0; - transform: matrix3d(0.1, 0, 0, 0, 0, 0.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 3.4% { - opacity: 1; - transform: matrix3d(0.384, 0, 0, 0, 0, 0.466, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 4.7% { - transform: matrix3d(0.505, 0, 0, 0, 0, 0.639, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 6.81% { - transform: matrix3d(0.693, 0, 0, 0, 0, 0.904, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 9.41% { - transform: matrix3d(0.895, 0, 0, 0, 0, 1.151, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 10.21% { - transform: matrix3d(0.947, 0, 0, 0, 0, 1.204, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 13.61% { - transform: matrix3d(1.111, 0, 0, 0, 0, 1.299, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 14.11% { - transform: matrix3d(1.127, 0, 0, 0, 0, 1.298, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 17.52% { - transform: matrix3d(1.187, 0, 0, 0, 0, 1.216, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 18.72% { - transform: matrix3d(1.191, 0, 0, 0, 0, 1.169, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 21.32% { - transform: matrix3d(1.177, 0, 0, 0, 0, 1.062, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 24.32% { - transform: matrix3d(1.135, 0, 0, 0, 0, 0.964, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 25.23% { - transform: matrix3d(1.121, 0, 0, 0, 0, 0.944, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 29.03% { - transform: matrix3d(1.057, 0, 0, 0, 0, 0.907, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 29.93% { - transform: matrix3d(1.043, 0, 0, 0, 0, 0.909, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 35.54% { - transform: matrix3d(0.981, 0, 0, 0, 0, 0.966, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 36.74% { - transform: matrix3d(0.974, 0, 0, 0, 0, 0.981, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 41.04% { - transform: matrix3d(0.965, 0, 0, 0, 0, 1.02, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 44.44% { - transform: matrix3d(0.969, 0, 0, 0, 0, 1.029, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 52.15% { - transform: matrix3d(0.992, 0, 0, 0, 0, 1.006, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 59.86% { - transform: matrix3d(1.005, 0, 0, 0, 0, 0.991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 63.26% { - transform: matrix3d(1.007, 0, 0, 0, 0, 0.993, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 75.28% { - transform: matrix3d(1.001, 0, 0, 0, 0, 1.003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 85.49% { - transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 90.69% { - transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 100% { - opacity: 1; - transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } + animation-delay: 2.5s; + animation-duration: 1500ms; + animation-name: bdJellyPop; } @keyframes bdJellyPop { @@ -15331,5 +15165,3 @@ svg { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } } - -/*# sourceMappingURL=bulma-docs.css.map */ \ No newline at end of file diff --git a/docs/documentation/components/panel.html b/docs/documentation/components/panel.html index 9d5b94f4..7f679fe8 100644 --- a/docs/documentation/components/panel.html +++ b/docs/documentation/components/panel.html @@ -9,7 +9,7 @@ breadcrumb: - components - components-panel meta: - colors: false + colors: true sizes: false variables: true --- @@ -17,22 +17,22 @@ meta: {% capture panel_example %} {% endcapture %} +{% capture panel_colors_example %} +{% for color in site.data.colors.justColors %} + +{% endfor %} +{% endcapture %} +

The panel is container for several types: @@ -108,6 +157,21 @@ meta:

-{% include elements/snippet.html content=panel_example %} +{% include elements/snippet.html content=panel_example more=true %} + +{% include elements/anchor.html name="Colors" %} + +{% include elements/new-tag.html version="0.8.0" %} + +
+

+ The panel component is available in all the different colors defined by the $colors Sass map. Simply append one of the color modifiers. +

+

+ For example, to use your primary color, use "panel is-primary" as a class. +

+
+ +{% include elements/snippet.html content=panel_colors_example more=true %} {% include elements/variables.html type='component' %} diff --git a/docs/images/blog/v8/box-after.png b/docs/images/blog/v8/box-after.png new file mode 100644 index 00000000..0ebe7009 Binary files /dev/null and b/docs/images/blog/v8/box-after.png differ diff --git a/docs/images/blog/v8/box-before.png b/docs/images/blog/v8/box-before.png new file mode 100644 index 00000000..5170c6cf Binary files /dev/null and b/docs/images/blog/v8/box-before.png differ diff --git a/docs/images/blog/v8/card-after.png b/docs/images/blog/v8/card-after.png new file mode 100644 index 00000000..7416e0ba Binary files /dev/null and b/docs/images/blog/v8/card-after.png differ diff --git a/docs/images/blog/v8/card-before.png b/docs/images/blog/v8/card-before.png new file mode 100644 index 00000000..a7faf5bd Binary files /dev/null and b/docs/images/blog/v8/card-before.png differ diff --git a/docs/images/blog/v8/light-buttons-bis.png b/docs/images/blog/v8/light-buttons-bis.png new file mode 100644 index 00000000..0ce52e41 Binary files /dev/null and b/docs/images/blog/v8/light-buttons-bis.png differ diff --git a/docs/images/blog/v8/light-buttons.png b/docs/images/blog/v8/light-buttons.png new file mode 100644 index 00000000..ebb4069d Binary files /dev/null and b/docs/images/blog/v8/light-buttons.png differ diff --git a/docs/images/blog/v8/messages-after.png b/docs/images/blog/v8/messages-after.png new file mode 100644 index 00000000..2023fd47 Binary files /dev/null and b/docs/images/blog/v8/messages-after.png differ diff --git a/docs/images/blog/v8/messages-before.png b/docs/images/blog/v8/messages-before.png new file mode 100644 index 00000000..d27ec61c Binary files /dev/null and b/docs/images/blog/v8/messages-before.png differ diff --git a/docs/images/blog/v8/panel-colors.png b/docs/images/blog/v8/panel-colors.png new file mode 100644 index 00000000..8098280c Binary files /dev/null and b/docs/images/blog/v8/panel-colors.png differ diff --git a/sass/components/panel.sass b/sass/components/panel.sass index af945d38..3c32be60 100644 --- a/sass/components/panel.sass +++ b/sass/components/panel.sass @@ -3,7 +3,7 @@ $panel-item-border: 1px solid $border-light !default $panel-radius: $radius-large !default $panel-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default -$panel-heading-background-color: $background !default +$panel-heading-background-color: $border-light !default $panel-heading-color: $text-strong !default $panel-heading-line-height: 1.25 !default $panel-heading-padding: 0.75em 1em !default @@ -33,6 +33,18 @@ $panel-icon-color: $text-light !default font-size: $size-normal &:not(:last-child) margin-bottom: $panel-margin + // Colors + @each $name, $components in $message-colors + $color: nth($components, 1) + $color-invert: nth($components, 2) + &.is-#{$name} + .panel-heading + background-color: $color + color: $color-invert + .panel-tabs a.is-active + border-bottom-color: $color + .panel-block.is-active .panel-icon + color: $color .panel-tabs, .panel-block