mirror of
https://github.com/jgthms/bulma.git
synced 2025-01-09 15:44:25 +00:00
Write 0.8 blog post
This commit is contained in:
Jeremy Thomas
parent
1a6b00ecd5
commit
c2d785ac56
@ -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.
|
||||
|
||||
@ -71,11 +71,9 @@ breadcrumb:
|
||||
</header>
|
||||
|
||||
<div class="bd-content">
|
||||
<div class="columns">
|
||||
<div class="column is-offset-2 is-8">
|
||||
<div class="bd-post content is-medium">
|
||||
{{ content }}
|
||||
</div>
|
||||
<div class="bd-post-container">
|
||||
<div class="bd-post content is-medium">
|
||||
{{ content }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
146
docs/_posts/2019-10-15-light-dark-colors.md
Normal file
146
docs/_posts/2019-10-15-light-dark-colors.md
Normal file
@ -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:
|
||||
|
||||
<figure>
|
||||
<a href="{{ site.data.links.by_id.elements-button.path }}">
|
||||
<img src="{{ site.url }}/images/blog/v8/light-buttons-bis.png" alt="List Bulma buttons" width="530" height="104">
|
||||
</a>
|
||||
</figure>
|
||||
|
||||
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):
|
||||
|
||||
<div class="bd-post-fullwidth">
|
||||
<a href="{{ site.data.links.by_id.components-message.path }}">
|
||||
<img src="{{ site.url }}/images/blog/v8/messages-before.png" alt="Messages before" width="448" height="1200">
|
||||
<img src="{{ site.url }}/images/blog/v8/messages-after.png" alt="Messages after" width="448" height="1200">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{% include elements/anchor.html name="Better visual look" %}
|
||||
|
||||
Some of the Bulma colors have been updated:
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<th>Color</th>
|
||||
<th>Before</th>
|
||||
<th>After</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>
|
||||
<code>$green</code>
|
||||
</th>
|
||||
<td>
|
||||
{% include elements/color-square.html value="hsl(141, 71%, 48%)" %}
|
||||
</td>
|
||||
<td>
|
||||
{% include elements/color-square.html value="hsl(141, 53%, 53%)" %}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>
|
||||
<code>$cyan</code>
|
||||
</th>
|
||||
<td>
|
||||
{% include elements/color-square.html value="hsl(204, 86%, 53%)" %}
|
||||
</td>
|
||||
<td>
|
||||
{% include elements/color-square.html value="hsl(204, 71%, 53%)" %}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>
|
||||
<code>$red</code>
|
||||
</th>
|
||||
<td>
|
||||
{% include elements/color-square.html value="hsl(348, 100%, 61%)" %}
|
||||
</td>
|
||||
<td>
|
||||
{% include elements/color-square.html value="hsl(348, 86%, 61%)" %}
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
The <strong>shadows</strong> of the <code>box</code> and <code>card</code> have been improved:
|
||||
|
||||
<div class="bd-post-fullwidth">
|
||||
<a href="{{ site.data.links.by_id.components-card.path }}">
|
||||
<img src="{{ site.url }}/images/blog/v8/card-before.png" alt="Card before" width="464" height="236">
|
||||
<img src="{{ site.url }}/images/blog/v8/card-after.png" alt="Card after" width="464" height="236">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="bd-post-fullwidth">
|
||||
<a href="{{ site.data.links.by_id.elements-box.path }}" style="display: block;" class="has-text-centered">
|
||||
<img src="{{ site.url }}/images/blog/v8/box-before.png" alt="Box before" width="464" height="236">
|
||||
<img src="{{ site.url }}/images/blog/v8/box-after.png" alt="Box after" width="464" height="236">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{% include elements/anchor.html name="Panel colors" %}
|
||||
|
||||
<p>
|
||||
The <a href="{{ site.data.links.by_id.components-panel.path }}">panel component</a> is now available in all <strong>colors</strong>:
|
||||
</p>
|
||||
|
||||
<div class="bd-post-fullwidth">
|
||||
<a href="{{ site.data.links.by_id.components-panel.path }}">
|
||||
<img src="{{ site.url }}/images/blog/v8/panel-colors.png" alt="Panel colors" width="768" height="1029">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{% 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.
|
||||
@ -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
|
||||
|
||||
@ -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 */
|
||||
@ -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 %}
|
||||
<nav class="panel">
|
||||
<p class="panel-heading">
|
||||
repositories
|
||||
Repositories
|
||||
</p>
|
||||
<div class="panel-block">
|
||||
<p class="control has-icons-left">
|
||||
<input class="input is-small" type="text" placeholder="search">
|
||||
<span class="icon is-small is-left">
|
||||
<input class="input" type="text" placeholder="Search">
|
||||
<span class="icon is-left">
|
||||
<i class="fas fa-search" aria-hidden="true"></i>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<p class="panel-tabs">
|
||||
<a class="is-active">all</a>
|
||||
<a>public</a>
|
||||
<a>private</a>
|
||||
<a>sources</a>
|
||||
<a>forks</a>
|
||||
<a class="is-active">All</a>
|
||||
<a>Public</a>
|
||||
<a>Private</a>
|
||||
<a>Sources</a>
|
||||
<a>Forks</a>
|
||||
</p>
|
||||
<a class="panel-block is-active">
|
||||
<span class="panel-icon">
|
||||
@ -76,12 +76,61 @@ meta:
|
||||
</label>
|
||||
<div class="panel-block">
|
||||
<button class="button is-link is-outlined is-fullwidth">
|
||||
reset all filters
|
||||
Reset all filters
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture panel_colors_example %}
|
||||
{% for color in site.data.colors.justColors %}
|
||||
<article class="panel is-{{ color }}">
|
||||
<p class="panel-heading">
|
||||
{{ color | capitalize }}
|
||||
</p>
|
||||
<p class="panel-tabs">
|
||||
<a class="is-active">All</a>
|
||||
<a>Public</a>
|
||||
<a>Private</a>
|
||||
<a>Sources</a>
|
||||
<a>Forks</a>
|
||||
</p>
|
||||
<div class="panel-block">
|
||||
<p class="control has-icons-left">
|
||||
<input class="input is-{{ color }}" type="text" placeholder="Search">
|
||||
<span class="icon is-left">
|
||||
<i class="fas fa-search" aria-hidden="true"></i>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<a class="panel-block is-active">
|
||||
<span class="panel-icon">
|
||||
<i class="fas fa-book" aria-hidden="true"></i>
|
||||
</span>
|
||||
bulma
|
||||
</a>
|
||||
<a class="panel-block">
|
||||
<span class="panel-icon">
|
||||
<i class="fas fa-book" aria-hidden="true"></i>
|
||||
</span>
|
||||
marksheet
|
||||
</a>
|
||||
<a class="panel-block">
|
||||
<span class="panel-icon">
|
||||
<i class="fas fa-book" aria-hidden="true"></i>
|
||||
</span>
|
||||
minireset.css
|
||||
</a>
|
||||
<a class="panel-block">
|
||||
<span class="panel-icon">
|
||||
<i class="fas fa-book" aria-hidden="true"></i>
|
||||
</span>
|
||||
jgthms.github.io
|
||||
</a>
|
||||
</article>
|
||||
{% endfor %}
|
||||
{% endcapture %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>panel</code> is container for several types:
|
||||
@ -108,6 +157,21 @@ meta:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% 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" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The panel component is available in all the <strong>different colors</strong> defined by the <a href="{{ site.data.links.by_id.customize-variables.path }}"><code>$colors</code> Sass map</a>. Simply append one of the color modifiers.
|
||||
</p>
|
||||
<p>
|
||||
For example, to use your primary color, use <code>"panel is-primary"</code> as a class.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=panel_colors_example more=true %}
|
||||
|
||||
{% include elements/variables.html type='component' %}
|
||||
|
||||
BIN
docs/images/blog/v8/box-after.png
Normal file
BIN
docs/images/blog/v8/box-after.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
BIN
docs/images/blog/v8/box-before.png
Normal file
BIN
docs/images/blog/v8/box-before.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
BIN
docs/images/blog/v8/card-after.png
Normal file
BIN
docs/images/blog/v8/card-after.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 59 KiB |
BIN
docs/images/blog/v8/card-before.png
Normal file
BIN
docs/images/blog/v8/card-before.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
BIN
docs/images/blog/v8/light-buttons-bis.png
Normal file
BIN
docs/images/blog/v8/light-buttons-bis.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
BIN
docs/images/blog/v8/light-buttons.png
Normal file
BIN
docs/images/blog/v8/light-buttons.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
BIN
docs/images/blog/v8/messages-after.png
Normal file
BIN
docs/images/blog/v8/messages-after.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 372 KiB |
BIN
docs/images/blog/v8/messages-before.png
Normal file
BIN
docs/images/blog/v8/messages-before.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 374 KiB |
BIN
docs/images/blog/v8/panel-colors.png
Normal file
BIN
docs/images/blog/v8/panel-colors.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 218 KiB |
@ -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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user