library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2025-01-09 15:44:25 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Create 0.2.1

Browse Source
This commit is contained in:
Jeremy Thomas 2016-09-25 17:44:01 +01:00
parent 9c59780e3c
commit f60b2ca400
22 changed files with 321 additions and 312 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -5,6 +5,7 @@
* Fix: container flex * Fix: container flex
* Fix: nav-item flex * Fix: nav-item flex
* Fix: media-number flex * Fix: media-number flex
* Fix: new brand colors
## 0.2.0 ## 0.2.0

2
bower.json
View File

@ -1,6 +1,6 @@
{ {
"name": "bulma", "name": "bulma",
"version": "0.2.0", "version": "0.2.1",
"homepage": "http://bulma.io", "homepage": "http://bulma.io",
"authors": [ "authors": [
"jgthms <bbxdesign@gmail.com>" "jgthms <bbxdesign@gmail.com>"

292
css/bulma.css vendored
View File

@ -150,7 +150,7 @@ body {
} }
a { a {
color: #11e4c4; color: #00d1b2;
cursor: pointer; cursor: pointer;
text-decoration: none; text-decoration: none;
-webkit-transition: none 86ms ease-out; -webkit-transition: none 86ms ease-out;
@ -163,7 +163,7 @@ a:hover {
code { code {
background-color: whitesmoke; background-color: whitesmoke;
color: #ff0f3f; color: #ff3860;
font-size: 12px; font-size: 12px;
font-weight: normal; font-weight: normal;
padding: 1px 2px 2px; padding: 1px 2px 2px;
@ -619,11 +619,11 @@ table th {
} }
a.box:hover, a.box:focus { a.box:hover, a.box:focus {
box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px #11e4c4; box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px #00d1b2;
} }
a.box:active { a.box:active {
box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2), 0 0 0 1px #11e4c4; box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2), 0 0 0 1px #00d1b2;
} }
@keyframes spin-around { @keyframes spin-around {
@ -680,7 +680,7 @@ a.box:active {
} }
.button:active, .button:focus, .button.is-active { .button:active, .button:focus, .button.is-active {
border-color: #11e4c4; border-color: #00d1b2;
outline: none; outline: none;
} }
@ -891,20 +891,20 @@ a.box:active {
} }
.button.is-primary { .button.is-primary {
background-color: #11e4c4; background-color: #00d1b2;
border-width: 0; border-width: 0;
color: white; color: white;
} }
.button.is-primary:hover, .button.is-primary:focus, .button.is-primary.is-active { .button.is-primary:hover, .button.is-primary:focus, .button.is-primary.is-active {
background-color: #0fccb0; background-color: #00b89c;
border-color: transparent; border-color: transparent;
color: white; color: white;
} }
.button.is-primary.is-inverted { .button.is-primary.is-inverted {
background-color: white; background-color: white;
color: #11e4c4; color: #00d1b2;
} }
.button.is-primary.is-inverted:hover { .button.is-primary.is-inverted:hover {
@ -917,32 +917,32 @@ a.box:active {
.button.is-primary.is-outlined { .button.is-primary.is-outlined {
background-color: transparent; background-color: transparent;
border-color: #11e4c4; border-color: #00d1b2;
border-width: 1px; border-width: 1px;
color: #11e4c4; color: #00d1b2;
} }
.button.is-primary.is-outlined:hover, .button.is-primary.is-outlined:focus { .button.is-primary.is-outlined:hover, .button.is-primary.is-outlined:focus {
background-color: #11e4c4; background-color: #00d1b2;
border-color: #11e4c4; border-color: #00d1b2;
color: white; color: white;
} }
.button.is-info { .button.is-info {
background-color: #0f6bff; background-color: #3273dc;
border-width: 0; border-width: 0;
color: white; color: white;
} }
.button.is-info:hover, .button.is-info:focus, .button.is-info.is-active { .button.is-info:hover, .button.is-info:focus, .button.is-info.is-active {
background-color: #005ef5; background-color: #2366d1;
border-color: transparent; border-color: transparent;
color: white; color: white;
} }
.button.is-info.is-inverted { .button.is-info.is-inverted {
background-color: white; background-color: white;
color: #0f6bff; color: #3273dc;
} }
.button.is-info.is-inverted:hover { .button.is-info.is-inverted:hover {
@ -955,32 +955,32 @@ a.box:active {
.button.is-info.is-outlined { .button.is-info.is-outlined {
background-color: transparent; background-color: transparent;
border-color: #0f6bff; border-color: #3273dc;
border-width: 1px; border-width: 1px;
color: #0f6bff; color: #3273dc;
} }
.button.is-info.is-outlined:hover, .button.is-info.is-outlined:focus { .button.is-info.is-outlined:hover, .button.is-info.is-outlined:focus {
background-color: #0f6bff; background-color: #3273dc;
border-color: #0f6bff; border-color: #3273dc;
color: white; color: white;
} }
.button.is-success { .button.is-success {
background-color: #20ee68; background-color: #23d160;
border-width: 0; border-width: 0;
color: white; color: white;
} }
.button.is-success:hover, .button.is-success:focus, .button.is-success.is-active { .button.is-success:hover, .button.is-success:focus, .button.is-success.is-active {
background-color: #11e45b; background-color: #20bc56;
border-color: transparent; border-color: transparent;
color: white; color: white;
} }
.button.is-success.is-inverted { .button.is-success.is-inverted {
background-color: white; background-color: white;
color: #20ee68; color: #23d160;
} }
.button.is-success.is-inverted:hover { .button.is-success.is-inverted:hover {
@ -993,32 +993,32 @@ a.box:active {
.button.is-success.is-outlined { .button.is-success.is-outlined {
background-color: transparent; background-color: transparent;
border-color: #20ee68; border-color: #23d160;
border-width: 1px; border-width: 1px;
color: #20ee68; color: #23d160;
} }
.button.is-success.is-outlined:hover, .button.is-success.is-outlined:focus { .button.is-success.is-outlined:hover, .button.is-success.is-outlined:focus {
background-color: #20ee68; background-color: #23d160;
border-color: #20ee68; border-color: #23d160;
color: white; color: white;
} }
.button.is-warning { .button.is-warning {
background-color: #ffcf0f; background-color: #ffdd57;
border-width: 0; border-width: 0;
color: rgba(0, 0, 0, 0.7); color: rgba(0, 0, 0, 0.7);
} }
.button.is-warning:hover, .button.is-warning:focus, .button.is-warning.is-active { .button.is-warning:hover, .button.is-warning:focus, .button.is-warning.is-active {
background-color: #f5c400; background-color: #ffd83d;
border-color: transparent; border-color: transparent;
color: rgba(0, 0, 0, 0.7); color: rgba(0, 0, 0, 0.7);
} }
.button.is-warning.is-inverted { .button.is-warning.is-inverted {
background-color: rgba(0, 0, 0, 0.7); background-color: rgba(0, 0, 0, 0.7);
color: #ffcf0f; color: #ffdd57;
} }
.button.is-warning.is-inverted:hover { .button.is-warning.is-inverted:hover {
@ -1031,32 +1031,32 @@ a.box:active {
.button.is-warning.is-outlined { .button.is-warning.is-outlined {
background-color: transparent; background-color: transparent;
border-color: #ffcf0f; border-color: #ffdd57;
border-width: 1px; border-width: 1px;
color: #ffcf0f; color: #ffdd57;
} }
.button.is-warning.is-outlined:hover, .button.is-warning.is-outlined:focus { .button.is-warning.is-outlined:hover, .button.is-warning.is-outlined:focus {
background-color: #ffcf0f; background-color: #ffdd57;
border-color: #ffcf0f; border-color: #ffdd57;
color: rgba(0, 0, 0, 0.7); color: rgba(0, 0, 0, 0.7);
} }
.button.is-danger { .button.is-danger {
background-color: #ff0f3f; background-color: #ff3860;
border-width: 0; border-width: 0;
color: white; color: white;
} }
.button.is-danger:hover, .button.is-danger:focus, .button.is-danger.is-active { .button.is-danger:hover, .button.is-danger:focus, .button.is-danger.is-active {
background-color: #f50031; background-color: #ff1f4b;
border-color: transparent; border-color: transparent;
color: white; color: white;
} }
.button.is-danger.is-inverted { .button.is-danger.is-inverted {
background-color: white; background-color: white;
color: #ff0f3f; color: #ff3860;
} }
.button.is-danger.is-inverted:hover { .button.is-danger.is-inverted:hover {
@ -1069,14 +1069,14 @@ a.box:active {
.button.is-danger.is-outlined { .button.is-danger.is-outlined {
background-color: transparent; background-color: transparent;
border-color: #ff0f3f; border-color: #ff3860;
border-width: 1px; border-width: 1px;
color: #ff0f3f; color: #ff3860;
} }
.button.is-danger.is-outlined:hover, .button.is-danger.is-outlined:focus { .button.is-danger.is-outlined:hover, .button.is-danger.is-outlined:focus {
background-color: #ff0f3f; background-color: #ff3860;
border-color: #ff0f3f; border-color: #ff3860;
color: white; color: white;
} }
@ -1168,7 +1168,7 @@ a.box:active {
} }
.content a:not(.button):hover { .content a:not(.button):hover {
border-bottom-color: #11e4c4; border-bottom-color: #00d1b2;
} }
.content li + li { .content li + li {
@ -1329,7 +1329,7 @@ a.box:active {
.textarea:active, .textarea:active,
.textarea:focus, .textarea:focus,
.textarea.is-active { .textarea.is-active {
border-color: #11e4c4; border-color: #00d1b2;
outline: none; outline: none;
} }
@ -1388,27 +1388,27 @@ a.box:active {
.input.is-primary, .input.is-primary,
.textarea.is-primary { .textarea.is-primary {
border-color: #11e4c4; border-color: #00d1b2;
} }
.input.is-info, .input.is-info,
.textarea.is-info { .textarea.is-info {
border-color: #0f6bff; border-color: #3273dc;
} }
.input.is-success, .input.is-success,
.textarea.is-success { .textarea.is-success {
border-color: #20ee68; border-color: #23d160;
} }
.input.is-warning, .input.is-warning,
.textarea.is-warning { .textarea.is-warning {
border-color: #ffcf0f; border-color: #ffdd57;
} }
.input.is-danger, .input.is-danger,
.textarea.is-danger { .textarea.is-danger {
border-color: #ff0f3f; border-color: #ff3860;
} }
.input[type="search"], .input[type="search"],
@ -1542,7 +1542,7 @@ a.box:active {
} }
.select select:active, .select select:focus, .select select.is-active { .select select:active, .select select:focus, .select select.is-active {
border-color: #11e4c4; border-color: #00d1b2;
outline: none; outline: none;
} }
@ -1586,23 +1586,23 @@ a.box:active {
} }
.select select.is-primary { .select select.is-primary {
border-color: #11e4c4; border-color: #00d1b2;
} }
.select select.is-info { .select select.is-info {
border-color: #0f6bff; border-color: #3273dc;
} }
.select select.is-success { .select select.is-success {
border-color: #20ee68; border-color: #23d160;
} }
.select select.is-warning { .select select.is-warning {
border-color: #ffcf0f; border-color: #ffdd57;
} }
.select select.is-danger { .select select.is-danger {
border-color: #ff0f3f; border-color: #ff3860;
} }
.select select:hover { .select select:hover {
@ -1622,7 +1622,7 @@ a.box:active {
} }
.select:after { .select:after {
border: 1px solid #11e4c4; border: 1px solid #00d1b2;
border-right: 0; border-right: 0;
border-top: 0; border-top: 0;
content: " "; content: " ";
@ -1715,23 +1715,23 @@ a.box:active {
} }
.help.is-primary { .help.is-primary {
color: #11e4c4; color: #00d1b2;
} }
.help.is-info { .help.is-info {
color: #0f6bff; color: #3273dc;
} }
.help.is-success { .help.is-success {
color: #20ee68; color: #23d160;
} }
.help.is-warning { .help.is-warning {
color: #ffcf0f; color: #ffdd57;
} }
.help.is-danger { .help.is-danger {
color: #ff0f3f; color: #ff3860;
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
@ -2168,27 +2168,27 @@ a.box:active {
} }
.notification.is-primary { .notification.is-primary {
background-color: #11e4c4; background-color: #00d1b2;
color: white; color: white;
} }
.notification.is-info { .notification.is-info {
background-color: #0f6bff; background-color: #3273dc;
color: white; color: white;
} }
.notification.is-success { .notification.is-success {
background-color: #20ee68; background-color: #23d160;
color: white; color: white;
} }
.notification.is-warning { .notification.is-warning {
background-color: #ffcf0f; background-color: #ffdd57;
color: rgba(0, 0, 0, 0.7); color: rgba(0, 0, 0, 0.7);
} }
.notification.is-danger { .notification.is-danger {
background-color: #ff0f3f; background-color: #ff3860;
color: white; color: white;
} }
@ -2253,43 +2253,43 @@ a.box:active {
} }
.progress.is-primary::-webkit-progress-value { .progress.is-primary::-webkit-progress-value {
background-color: #11e4c4; background-color: #00d1b2;
} }
.progress.is-primary::-moz-progress-bar { .progress.is-primary::-moz-progress-bar {
background-color: #11e4c4; background-color: #00d1b2;
} }
.progress.is-info::-webkit-progress-value { .progress.is-info::-webkit-progress-value {
background-color: #0f6bff; background-color: #3273dc;
} }
.progress.is-info::-moz-progress-bar { .progress.is-info::-moz-progress-bar {
background-color: #0f6bff; background-color: #3273dc;
} }
.progress.is-success::-webkit-progress-value { .progress.is-success::-webkit-progress-value {
background-color: #20ee68; background-color: #23d160;
} }
.progress.is-success::-moz-progress-bar { .progress.is-success::-moz-progress-bar {
background-color: #20ee68; background-color: #23d160;
} }
.progress.is-warning::-webkit-progress-value { .progress.is-warning::-webkit-progress-value {
background-color: #ffcf0f; background-color: #ffdd57;
} }
.progress.is-warning::-moz-progress-bar { .progress.is-warning::-moz-progress-bar {
background-color: #ffcf0f; background-color: #ffdd57;
} }
.progress.is-danger::-webkit-progress-value { .progress.is-danger::-webkit-progress-value {
background-color: #ff0f3f; background-color: #ff3860;
} }
.progress.is-danger::-moz-progress-bar { .progress.is-danger::-moz-progress-bar {
background-color: #ff0f3f; background-color: #ff3860;
} }
.progress.is-small { .progress.is-small {
@ -2372,7 +2372,7 @@ a.box:active {
.table td.is-link > a:hover, .table td.is-link > a:hover,
.table th.is-link > a:hover { .table th.is-link > a:hover {
background-color: #11e4c4; background-color: #00d1b2;
color: white; color: white;
} }
@ -2907,27 +2907,27 @@ a.box:active {
} }
.tag.is-primary { .tag.is-primary {
background-color: #11e4c4; background-color: #00d1b2;
color: white; color: white;
} }
.tag.is-info { .tag.is-info {
background-color: #0f6bff; background-color: #3273dc;
color: white; color: white;
} }
.tag.is-success { .tag.is-success {
background-color: #20ee68; background-color: #23d160;
color: white; color: white;
} }
.tag.is-warning { .tag.is-warning {
background-color: #ffcf0f; background-color: #ffdd57;
color: rgba(0, 0, 0, 0.7); color: rgba(0, 0, 0, 0.7);
} }
.tag.is-danger { .tag.is-danger {
background-color: #ff0f3f; background-color: #ff3860;
color: white; color: white;
} }
@ -3415,6 +3415,16 @@ a.box:active {
} }
} }
.media-number,
.media-left,
.media-right {
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.media-number { .media-number {
background-color: whitesmoke; background-color: whitesmoke;
border-radius: 290486px; border-radius: 290486px;
@ -3422,24 +3432,13 @@ a.box:active {
font-size: 18px; font-size: 18px;
height: 32px; height: 32px;
line-height: 24px; line-height: 24px;
margin-right: 10px;
min-width: 32px; min-width: 32px;
padding: 4px 8px; padding: 4px 8px;
text-align: center; text-align: center;
vertical-align: top; vertical-align: top;
} }
@media screen and (max-width: 768px) {
.media-number {
margin-bottom: 10px;
}
}
@media screen and (min-width: 769px) {
.media-number {
margin-right: 10px;
}
}
.media-left { .media-left {
margin-right: 10px; margin-right: 10px;
} }
@ -3523,11 +3522,11 @@ a.box:active {
.menu-list a:hover { .menu-list a:hover {
background-color: whitesmoke; background-color: whitesmoke;
color: #11e4c4; color: #00d1b2;
} }
.menu-list a.is-active { .menu-list a.is-active {
background-color: #11e4c4; background-color: #00d1b2;
color: white; color: white;
} }
@ -3641,44 +3640,44 @@ a.box:active {
} }
.message.is-primary { .message.is-primary {
background-color: #ecfefb; background-color: #ebfffc;
} }
.message.is-primary .message-header { .message.is-primary .message-header {
background-color: #11e4c4; background-color: #00d1b2;
color: white; color: white;
} }
.message.is-primary .message-body { .message.is-primary .message-body {
border-color: #11e4c4; border-color: #00d1b2;
color: gray; color: gray;
} }
.message.is-info { .message.is-info {
background-color: #ebf2ff; background-color: #eef3fc;
} }
.message.is-info .message-header { .message.is-info .message-header {
background-color: #0f6bff; background-color: #3273dc;
color: white; color: white;
} }
.message.is-info .message-body { .message.is-info .message-body {
border-color: #0f6bff; border-color: #3273dc;
color: gray; color: gray;
} }
.message.is-success { .message.is-success {
background-color: #ecfef2; background-color: #eefcf3;
} }
.message.is-success .message-header { .message.is-success .message-header {
background-color: #20ee68; background-color: #23d160;
color: white; color: white;
} }
.message.is-success .message-body { .message.is-success .message-body {
border-color: #20ee68; border-color: #23d160;
color: gray; color: gray;
} }
@ -3687,12 +3686,12 @@ a.box:active {
} }
.message.is-warning .message-header { .message.is-warning .message-header {
background-color: #ffcf0f; background-color: #ffdd57;
color: rgba(0, 0, 0, 0.7); color: rgba(0, 0, 0, 0.7);
} }
.message.is-warning .message-body { .message.is-warning .message-body {
border-color: #ffcf0f; border-color: #ffdd57;
color: gray; color: gray;
} }
@ -3701,12 +3700,12 @@ a.box:active {
} }
.message.is-danger .message-header { .message.is-danger .message-header {
background-color: #ff0f3f; background-color: #ff3860;
color: white; color: white;
} }
.message.is-danger .message-body { .message.is-danger .message-body {
border-color: #ff0f3f; border-color: #ff3860;
color: gray; color: gray;
} }
@ -3962,7 +3961,7 @@ a.box:active {
} }
.nav-toggle.is-active span { .nav-toggle.is-active span {
background-color: #11e4c4; background-color: #00d1b2;
} }
.nav-toggle.is-active span:nth-child(1) { .nav-toggle.is-active span:nth-child(1) {
@ -3998,6 +3997,11 @@ a.box:active {
display: -webkit-box; display: -webkit-box;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-pack: center; -webkit-box-pack: center;
-ms-flex-pack: center; -ms-flex-pack: center;
justify-content: center; justify-content: center;
@ -4061,15 +4065,15 @@ a.nav-item.is-tab {
.nav-item a.is-tab:hover, .nav-item a.is-tab:hover,
a.nav-item.is-tab:hover { a.nav-item.is-tab:hover {
border-bottom: 1px solid #11e4c4; border-bottom: 1px solid #00d1b2;
border-top: 1px solid transparent; border-top: 1px solid transparent;
} }
.nav-item a.is-tab.is-active, .nav-item a.is-tab.is-active,
a.nav-item.is-tab.is-active { a.nav-item.is-tab.is-active {
border-bottom: 3px solid #11e4c4; border-bottom: 3px solid #00d1b2;
border-top: 3px solid transparent; border-top: 3px solid transparent;
color: #11e4c4; color: #00d1b2;
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
@ -4338,7 +4342,7 @@ a.nav-item.is-tab.is-active {
} }
.panel-list a:hover { .panel-list a:hover {
color: #11e4c4; color: #00d1b2;
} }
.panel-tabs { .panel-tabs {
@ -4454,8 +4458,8 @@ a.panel-block:hover {
} }
.tabs li.is-active a { .tabs li.is-active a {
border-bottom-color: #11e4c4; border-bottom-color: #00d1b2;
color: #11e4c4; color: #00d1b2;
} }
.tabs ul { .tabs ul {
@ -4571,8 +4575,8 @@ a.panel-block:hover {
} }
.tabs.is-toggle li.is-active a { .tabs.is-toggle li.is-active a {
background-color: #11e4c4; background-color: #00d1b2;
border-color: #11e4c4; border-color: #00d1b2;
color: white; color: white;
z-index: 1; z-index: 1;
} }
@ -6223,7 +6227,7 @@ a.panel-block:hover {
} }
.hero.is-primary { .hero.is-primary {
background-color: #11e4c4; background-color: #00d1b2;
color: white; color: white;
} }
@ -6251,7 +6255,7 @@ a.panel-block:hover {
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.hero.is-primary .nav-menu { .hero.is-primary .nav-menu {
background-color: #11e4c4; background-color: #00d1b2;
} }
} }
@ -6290,12 +6294,12 @@ a.panel-block:hover {
.hero.is-primary .tabs.is-boxed li.is-active a, .hero.is-primary .tabs.is-boxed li.is-active a:hover, .hero.is-primary .tabs.is-toggle li.is-active a, .hero.is-primary .tabs.is-toggle li.is-active a:hover { .hero.is-primary .tabs.is-boxed li.is-active a, .hero.is-primary .tabs.is-boxed li.is-active a:hover, .hero.is-primary .tabs.is-toggle li.is-active a, .hero.is-primary .tabs.is-toggle li.is-active a:hover {
background-color: white; background-color: white;
border-color: white; border-color: white;
color: #11e4c4; color: #00d1b2;
} }
.hero.is-primary.is-bold { .hero.is-primary.is-bold {
background-image: -webkit-linear-gradient(309deg, #04be83 0%, #11e4c4 71%, #1af1f4 100%); background-image: -webkit-linear-gradient(309deg, #009e6c 0%, #00d1b2 71%, #00e7eb 100%);
background-image: linear-gradient(141deg, #04be83 0%, #11e4c4 71%, #1af1f4 100%); background-image: linear-gradient(141deg, #009e6c 0%, #00d1b2 71%, #00e7eb 100%);
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
@ -6314,7 +6318,7 @@ a.panel-block:hover {
} }
.hero.is-info { .hero.is-info {
background-color: #0f6bff; background-color: #3273dc;
color: white; color: white;
} }
@ -6342,7 +6346,7 @@ a.panel-block:hover {
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.hero.is-info .nav-menu { .hero.is-info .nav-menu {
background-color: #0f6bff; background-color: #3273dc;
} }
} }
@ -6381,12 +6385,12 @@ a.panel-block:hover {
.hero.is-info .tabs.is-boxed li.is-active a, .hero.is-info .tabs.is-boxed li.is-active a:hover, .hero.is-info .tabs.is-toggle li.is-active a, .hero.is-info .tabs.is-toggle li.is-active a:hover { .hero.is-info .tabs.is-boxed li.is-active a, .hero.is-info .tabs.is-boxed li.is-active a:hover, .hero.is-info .tabs.is-toggle li.is-active a, .hero.is-info .tabs.is-toggle li.is-active a:hover {
background-color: white; background-color: white;
border-color: white; border-color: white;
color: #0f6bff; color: #3273dc;
} }
.hero.is-info.is-bold { .hero.is-info.is-bold {
background-image: -webkit-linear-gradient(309deg, #0079db 0%, #0f6bff 71%, #2957ff 100%); background-image: -webkit-linear-gradient(309deg, #1577c6 0%, #3273dc 71%, #4366e5 100%);
background-image: linear-gradient(141deg, #0079db 0%, #0f6bff 71%, #2957ff 100%); background-image: linear-gradient(141deg, #1577c6 0%, #3273dc 71%, #4366e5 100%);
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
@ -6405,7 +6409,7 @@ a.panel-block:hover {
} }
.hero.is-success { .hero.is-success {
background-color: #20ee68; background-color: #23d160;
color: white; color: white;
} }
@ -6433,7 +6437,7 @@ a.panel-block:hover {
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.hero.is-success .nav-menu { .hero.is-success .nav-menu {
background-color: #20ee68; background-color: #23d160;
} }
} }
@ -6472,12 +6476,12 @@ a.panel-block:hover {
.hero.is-success .tabs.is-boxed li.is-active a, .hero.is-success .tabs.is-boxed li.is-active a:hover, .hero.is-success .tabs.is-toggle li.is-active a, .hero.is-success .tabs.is-toggle li.is-active a:hover { .hero.is-success .tabs.is-boxed li.is-active a, .hero.is-success .tabs.is-boxed li.is-active a:hover, .hero.is-success .tabs.is-toggle li.is-active a, .hero.is-success .tabs.is-toggle li.is-active a:hover {
background-color: white; background-color: white;
border-color: white; border-color: white;
color: #20ee68; color: #23d160;
} }
.hero.is-success.is-bold { .hero.is-success.is-bold {
background-image: -webkit-linear-gradient(309deg, #04d72b 0%, #20ee68 71%, #32f597 100%); background-image: -webkit-linear-gradient(309deg, #12af2f 0%, #23d160 71%, #2ce28a 100%);
background-image: linear-gradient(141deg, #04d72b 0%, #20ee68 71%, #32f597 100%); background-image: linear-gradient(141deg, #12af2f 0%, #23d160 71%, #2ce28a 100%);
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
@ -6496,7 +6500,7 @@ a.panel-block:hover {
} }
.hero.is-warning { .hero.is-warning {
background-color: #ffcf0f; background-color: #ffdd57;
color: rgba(0, 0, 0, 0.7); color: rgba(0, 0, 0, 0.7);
} }
@ -6524,7 +6528,7 @@ a.panel-block:hover {
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.hero.is-warning .nav-menu { .hero.is-warning .nav-menu {
background-color: #ffcf0f; background-color: #ffdd57;
} }
} }
@ -6563,12 +6567,12 @@ a.panel-block:hover {
.hero.is-warning .tabs.is-boxed li.is-active a, .hero.is-warning .tabs.is-boxed li.is-active a:hover, .hero.is-warning .tabs.is-toggle li.is-active a, .hero.is-warning .tabs.is-toggle li.is-active a:hover { .hero.is-warning .tabs.is-boxed li.is-active a, .hero.is-warning .tabs.is-boxed li.is-active a:hover, .hero.is-warning .tabs.is-toggle li.is-active a, .hero.is-warning .tabs.is-toggle li.is-active a:hover {
background-color: rgba(0, 0, 0, 0.7); background-color: rgba(0, 0, 0, 0.7);
border-color: rgba(0, 0, 0, 0.7); border-color: rgba(0, 0, 0, 0.7);
color: #ffcf0f; color: #ffdd57;
} }
.hero.is-warning.is-bold { .hero.is-warning.is-bold {
background-image: -webkit-linear-gradient(309deg, #db8b00 0%, #ffcf0f 71%, #fff829 100%); background-image: -webkit-linear-gradient(309deg, #ffaf24 0%, #ffdd57 71%, #fffa70 100%);
background-image: linear-gradient(141deg, #db8b00 0%, #ffcf0f 71%, #fff829 100%); background-image: linear-gradient(141deg, #ffaf24 0%, #ffdd57 71%, #fffa70 100%);
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
@ -6587,7 +6591,7 @@ a.panel-block:hover {
} }
.hero.is-danger { .hero.is-danger {
background-color: #ff0f3f; background-color: #ff3860;
color: white; color: white;
} }
@ -6615,7 +6619,7 @@ a.panel-block:hover {
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.hero.is-danger .nav-menu { .hero.is-danger .nav-menu {
background-color: #ff0f3f; background-color: #ff3860;
} }
} }
@ -6654,12 +6658,12 @@ a.panel-block:hover {
.hero.is-danger .tabs.is-boxed li.is-active a, .hero.is-danger .tabs.is-boxed li.is-active a:hover, .hero.is-danger .tabs.is-toggle li.is-active a, .hero.is-danger .tabs.is-toggle li.is-active a:hover { .hero.is-danger .tabs.is-boxed li.is-active a, .hero.is-danger .tabs.is-boxed li.is-active a:hover, .hero.is-danger .tabs.is-toggle li.is-active a, .hero.is-danger .tabs.is-toggle li.is-active a:hover {
background-color: white; background-color: white;
border-color: white; border-color: white;
color: #ff0f3f; color: #ff3860;
} }
.hero.is-danger.is-bold { .hero.is-danger.is-bold {
background-image: -webkit-linear-gradient(309deg, #db0050 0%, #ff0f3f 71%, #ff2930 100%); background-image: -webkit-linear-gradient(309deg, #ff0561 0%, #ff3860 71%, #ff5257 100%);
background-image: linear-gradient(141deg, #db0050 0%, #ff0f3f 71%, #ff2930 100%); background-image: linear-gradient(141deg, #ff0561 0%, #ff3860 71%, #ff5257 100%);
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
@ -6708,8 +6712,8 @@ a.panel-block:hover {
-webkit-box-flex: 1; -webkit-box-flex: 1;
-ms-flex-positive: 1; -ms-flex-positive: 1;
flex-grow: 1; flex-grow: 1;
-ms-flex-negative: 0; -ms-flex-negative: 1;
flex-shrink: 0; flex-shrink: 1;
} }
@keyframes spin-around { @keyframes spin-around {
@ -6755,6 +6759,6 @@ a.panel-block:hover {
} }
.footer a:not(.icon):hover, .footer a:visited:not(.icon):hover { .footer a:not(.icon):hover, .footer a:visited:not(.icon):hover {
border-bottom-color: #11e4c4; border-bottom-color: #00d1b2;
} }
/*# sourceMappingURL=bulma.css.map */ /*# sourceMappingURL=bulma.css.map */

2
css/bulma.css.map
View File

File diff suppressed because one or more lines are too long

4
docs/_config.yml
View File

@ -13,6 +13,6 @@ url: http://bulma.io
baseurl: "" baseurl: ""
documentation: "/documentation/overview/start/" documentation: "/documentation/overview/start/"
download: https://github.com/jgthms/bulma/archive/0.2.0.zip download: https://github.com/jgthms/bulma/archive/0.2.1.zip
github: https://github.com/jgthms/bulma github: https://github.com/jgthms/bulma
version: 0.2.0 version: 0.2.1

2
docs/_includes/footer.html
View File

@ -79,7 +79,7 @@
} }
.title.is-2 a:hover { .title.is-2 a:hover {
color: #11e4c4; color: #00d1b2;
} }
.title.is-2 .icon.is-large { .title.is-2 .icon.is-large {

16
docs/_includes/head.html
View File

@ -28,12 +28,12 @@
<meta name="twitter:image" content="{{site.url}}/images/bulma-banner.png"> <meta name="twitter:image" content="{{site.url}}/images/bulma-banner.png">
<meta name="twitter:description" content="{{site.description}}"> <meta name="twitter:description" content="{{site.description}}">
<link rel="apple-touch-icon" sizes="180x180" href="{{site.url}}/favicons/apple-touch-icon.png?v=201609241700"> <link rel="apple-touch-icon" sizes="180x180" href="{{site.url}}/favicons/apple-touch-icon.png?v=201609251738">
<link rel="icon" type="image/png" href="{{site.url}}/favicons/favicon-32x32.png?v=201609241700" sizes="32x32"> <link rel="icon" type="image/png" href="{{site.url}}/favicons/favicon-32x32.png?v=201609251738" sizes="32x32">
<link rel="icon" type="image/png" href="{{site.url}}/favicons/favicon-16x16.png?v=201609241700" sizes="16x16"> <link rel="icon" type="image/png" href="{{site.url}}/favicons/favicon-16x16.png?v=201609251738" sizes="16x16">
<link rel="manifest" href="{{site.url}}/favicons/manifest.json?v=201609241700"> <link rel="manifest" href="{{site.url}}/favicons/manifest.json?v=201609251738">
<link rel="mask-icon" href="{{site.url}}/favicons/safari-pinned-tab.svg?v=201609241700" color="#11e4c4"> <link rel="mask-icon" href="{{site.url}}/favicons/safari-pinned-tab.svg?v=201609251738" color="#00d1b2">
<link rel="shortcut icon" href="{{site.url}}/favicons/favicon.ico?v=201609241700"> <link rel="shortcut icon" href="{{site.url}}/favicons/favicon.ico?v=201609251738">
<meta name="msapplication-config" content="{{site.url}}/favicons/browserconfig.xml?v=201609241700"> <meta name="msapplication-config" content="{{site.url}}/favicons/browserconfig.xml?v=201609251738">
<meta name="theme-color" content="#11e4c4"> <meta name="theme-color" content="#00d1b2">
</head> </head>

2
docs/_includes/svg/bulma-icon.svg
View File

@ -1,6 +1,6 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="480px" height="480px" viewBox="0 0 480 480" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <svg width="480px" height="480px" viewBox="0 0 480 480" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="#11E4C4" fill-rule="evenodd"> <g stroke="none" stroke-width="1" fill="#00d1b2" fill-rule="evenodd">
<polygon id="Path" points="136 296 156 156 236 76 336 176 276 236 356 316 236 396"></polygon> <polygon id="Path" points="136 296 156 156 236 76 336 176 276 236 356 316 236 396"></polygon>
</g> </g>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 394 B

After

Width:  |  Height:  |  Size: 394 B

284
docs/css/bulma-docs.css
View File

@ -150,7 +150,7 @@ body {
} }
a { a {
color: #11e4c4; color: #00d1b2;
cursor: pointer; cursor: pointer;
text-decoration: none; text-decoration: none;
-webkit-transition: none 86ms ease-out; -webkit-transition: none 86ms ease-out;
@ -163,7 +163,7 @@ a:hover {
code { code {
background-color: whitesmoke; background-color: whitesmoke;
color: #ff0f3f; color: #ff3860;
font-size: 12px; font-size: 12px;
font-weight: normal; font-weight: normal;
padding: 1px 2px 2px; padding: 1px 2px 2px;
@ -619,11 +619,11 @@ table th {
} }
a.box:hover, a.box:focus { a.box:hover, a.box:focus {
box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px #11e4c4; box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px #00d1b2;
} }
a.box:active { a.box:active {
box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2), 0 0 0 1px #11e4c4; box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2), 0 0 0 1px #00d1b2;
} }
@keyframes spin-around { @keyframes spin-around {
@ -680,7 +680,7 @@ a.box:active {
} }
.button:active, .button:focus, .button.is-active { .button:active, .button:focus, .button.is-active {
border-color: #11e4c4; border-color: #00d1b2;
outline: none; outline: none;
} }
@ -891,20 +891,20 @@ a.box:active {
} }
.button.is-primary { .button.is-primary {
background-color: #11e4c4; background-color: #00d1b2;
border-width: 0; border-width: 0;
color: white; color: white;
} }
.button.is-primary:hover, .button.is-primary:focus, .button.is-primary.is-active { .button.is-primary:hover, .button.is-primary:focus, .button.is-primary.is-active {
background-color: #0fccb0; background-color: #00b89c;
border-color: transparent; border-color: transparent;
color: white; color: white;
} }
.button.is-primary.is-inverted { .button.is-primary.is-inverted {
background-color: white; background-color: white;
color: #11e4c4; color: #00d1b2;
} }
.button.is-primary.is-inverted:hover { .button.is-primary.is-inverted:hover {
@ -917,32 +917,32 @@ a.box:active {
.button.is-primary.is-outlined { .button.is-primary.is-outlined {
background-color: transparent; background-color: transparent;
border-color: #11e4c4; border-color: #00d1b2;
border-width: 1px; border-width: 1px;
color: #11e4c4; color: #00d1b2;
} }
.button.is-primary.is-outlined:hover, .button.is-primary.is-outlined:focus { .button.is-primary.is-outlined:hover, .button.is-primary.is-outlined:focus {
background-color: #11e4c4; background-color: #00d1b2;
border-color: #11e4c4; border-color: #00d1b2;
color: white; color: white;
} }
.button.is-info { .button.is-info {
background-color: #0f6bff; background-color: #3273dc;
border-width: 0; border-width: 0;
color: white; color: white;
} }
.button.is-info:hover, .button.is-info:focus, .button.is-info.is-active { .button.is-info:hover, .button.is-info:focus, .button.is-info.is-active {
background-color: #005ef5; background-color: #2366d1;
border-color: transparent; border-color: transparent;
color: white; color: white;
} }
.button.is-info.is-inverted { .button.is-info.is-inverted {
background-color: white; background-color: white;
color: #0f6bff; color: #3273dc;
} }
.button.is-info.is-inverted:hover { .button.is-info.is-inverted:hover {
@ -955,32 +955,32 @@ a.box:active {
.button.is-info.is-outlined { .button.is-info.is-outlined {
background-color: transparent; background-color: transparent;
border-color: #0f6bff; border-color: #3273dc;
border-width: 1px; border-width: 1px;
color: #0f6bff; color: #3273dc;
} }
.button.is-info.is-outlined:hover, .button.is-info.is-outlined:focus { .button.is-info.is-outlined:hover, .button.is-info.is-outlined:focus {
background-color: #0f6bff; background-color: #3273dc;
border-color: #0f6bff; border-color: #3273dc;
color: white; color: white;
} }
.button.is-success { .button.is-success {
background-color: #20ee68; background-color: #23d160;
border-width: 0; border-width: 0;
color: white; color: white;
} }
.button.is-success:hover, .button.is-success:focus, .button.is-success.is-active { .button.is-success:hover, .button.is-success:focus, .button.is-success.is-active {
background-color: #11e45b; background-color: #20bc56;
border-color: transparent; border-color: transparent;
color: white; color: white;
} }
.button.is-success.is-inverted { .button.is-success.is-inverted {
background-color: white; background-color: white;
color: #20ee68; color: #23d160;
} }
.button.is-success.is-inverted:hover { .button.is-success.is-inverted:hover {
@ -993,32 +993,32 @@ a.box:active {
.button.is-success.is-outlined { .button.is-success.is-outlined {
background-color: transparent; background-color: transparent;
border-color: #20ee68; border-color: #23d160;
border-width: 1px; border-width: 1px;
color: #20ee68; color: #23d160;
} }
.button.is-success.is-outlined:hover, .button.is-success.is-outlined:focus { .button.is-success.is-outlined:hover, .button.is-success.is-outlined:focus {
background-color: #20ee68; background-color: #23d160;
border-color: #20ee68; border-color: #23d160;
color: white; color: white;
} }
.button.is-warning { .button.is-warning {
background-color: #ffcf0f; background-color: #ffdd57;
border-width: 0; border-width: 0;
color: rgba(0, 0, 0, 0.7); color: rgba(0, 0, 0, 0.7);
} }
.button.is-warning:hover, .button.is-warning:focus, .button.is-warning.is-active { .button.is-warning:hover, .button.is-warning:focus, .button.is-warning.is-active {
background-color: #f5c400; background-color: #ffd83d;
border-color: transparent; border-color: transparent;
color: rgba(0, 0, 0, 0.7); color: rgba(0, 0, 0, 0.7);
} }
.button.is-warning.is-inverted { .button.is-warning.is-inverted {
background-color: rgba(0, 0, 0, 0.7); background-color: rgba(0, 0, 0, 0.7);
color: #ffcf0f; color: #ffdd57;
} }
.button.is-warning.is-inverted:hover { .button.is-warning.is-inverted:hover {
@ -1031,32 +1031,32 @@ a.box:active {
.button.is-warning.is-outlined { .button.is-warning.is-outlined {
background-color: transparent; background-color: transparent;
border-color: #ffcf0f; border-color: #ffdd57;
border-width: 1px; border-width: 1px;
color: #ffcf0f; color: #ffdd57;
} }
.button.is-warning.is-outlined:hover, .button.is-warning.is-outlined:focus { .button.is-warning.is-outlined:hover, .button.is-warning.is-outlined:focus {
background-color: #ffcf0f; background-color: #ffdd57;
border-color: #ffcf0f; border-color: #ffdd57;
color: rgba(0, 0, 0, 0.7); color: rgba(0, 0, 0, 0.7);
} }
.button.is-danger { .button.is-danger {
background-color: #ff0f3f; background-color: #ff3860;
border-width: 0; border-width: 0;
color: white; color: white;
} }
.button.is-danger:hover, .button.is-danger:focus, .button.is-danger.is-active { .button.is-danger:hover, .button.is-danger:focus, .button.is-danger.is-active {
background-color: #f50031; background-color: #ff1f4b;
border-color: transparent; border-color: transparent;
color: white; color: white;
} }
.button.is-danger.is-inverted { .button.is-danger.is-inverted {
background-color: white; background-color: white;
color: #ff0f3f; color: #ff3860;
} }
.button.is-danger.is-inverted:hover { .button.is-danger.is-inverted:hover {
@ -1069,14 +1069,14 @@ a.box:active {
.button.is-danger.is-outlined { .button.is-danger.is-outlined {
background-color: transparent; background-color: transparent;
border-color: #ff0f3f; border-color: #ff3860;
border-width: 1px; border-width: 1px;
color: #ff0f3f; color: #ff3860;
} }
.button.is-danger.is-outlined:hover, .button.is-danger.is-outlined:focus { .button.is-danger.is-outlined:hover, .button.is-danger.is-outlined:focus {
background-color: #ff0f3f; background-color: #ff3860;
border-color: #ff0f3f; border-color: #ff3860;
color: white; color: white;
} }
@ -1168,7 +1168,7 @@ a.box:active {
} }
.content a:not(.button):hover { .content a:not(.button):hover {
border-bottom-color: #11e4c4; border-bottom-color: #00d1b2;
} }
.content li + li { .content li + li {
@ -1329,7 +1329,7 @@ a.box:active {
.textarea:active, .textarea:active,
.textarea:focus, .textarea:focus,
.textarea.is-active { .textarea.is-active {
border-color: #11e4c4; border-color: #00d1b2;
outline: none; outline: none;
} }
@ -1388,27 +1388,27 @@ a.box:active {
.input.is-primary, .input.is-primary,
.textarea.is-primary { .textarea.is-primary {
border-color: #11e4c4; border-color: #00d1b2;
} }
.input.is-info, .input.is-info,
.textarea.is-info { .textarea.is-info {
border-color: #0f6bff; border-color: #3273dc;
} }
.input.is-success, .input.is-success,
.textarea.is-success { .textarea.is-success {
border-color: #20ee68; border-color: #23d160;
} }
.input.is-warning, .input.is-warning,
.textarea.is-warning { .textarea.is-warning {
border-color: #ffcf0f; border-color: #ffdd57;
} }
.input.is-danger, .input.is-danger,
.textarea.is-danger { .textarea.is-danger {
border-color: #ff0f3f; border-color: #ff3860;
} }
.input[type="search"], .input[type="search"],
@ -1542,7 +1542,7 @@ a.box:active {
} }
.select select:active, .select select:focus, .select select.is-active { .select select:active, .select select:focus, .select select.is-active {
border-color: #11e4c4; border-color: #00d1b2;
outline: none; outline: none;
} }
@ -1586,23 +1586,23 @@ a.box:active {
} }
.select select.is-primary { .select select.is-primary {
border-color: #11e4c4; border-color: #00d1b2;
} }
.select select.is-info { .select select.is-info {
border-color: #0f6bff; border-color: #3273dc;
} }
.select select.is-success { .select select.is-success {
border-color: #20ee68; border-color: #23d160;
} }
.select select.is-warning { .select select.is-warning {
border-color: #ffcf0f; border-color: #ffdd57;
} }
.select select.is-danger { .select select.is-danger {
border-color: #ff0f3f; border-color: #ff3860;
} }
.select select:hover { .select select:hover {
@ -1622,7 +1622,7 @@ a.box:active {
} }
.select:after { .select:after {
border: 1px solid #11e4c4; border: 1px solid #00d1b2;
border-right: 0; border-right: 0;
border-top: 0; border-top: 0;
content: " "; content: " ";
@ -1715,23 +1715,23 @@ a.box:active {
} }
.help.is-primary { .help.is-primary {
color: #11e4c4; color: #00d1b2;
} }
.help.is-info { .help.is-info {
color: #0f6bff; color: #3273dc;
} }
.help.is-success { .help.is-success {
color: #20ee68; color: #23d160;
} }
.help.is-warning { .help.is-warning {
color: #ffcf0f; color: #ffdd57;
} }
.help.is-danger { .help.is-danger {
color: #ff0f3f; color: #ff3860;
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
@ -2168,27 +2168,27 @@ a.box:active {
} }
.notification.is-primary { .notification.is-primary {
background-color: #11e4c4; background-color: #00d1b2;
color: white; color: white;
} }
.notification.is-info { .notification.is-info {
background-color: #0f6bff; background-color: #3273dc;
color: white; color: white;
} }
.notification.is-success { .notification.is-success {
background-color: #20ee68; background-color: #23d160;
color: white; color: white;
} }
.notification.is-warning { .notification.is-warning {
background-color: #ffcf0f; background-color: #ffdd57;
color: rgba(0, 0, 0, 0.7); color: rgba(0, 0, 0, 0.7);
} }
.notification.is-danger { .notification.is-danger {
background-color: #ff0f3f; background-color: #ff3860;
color: white; color: white;
} }
@ -2253,43 +2253,43 @@ a.box:active {
} }
.progress.is-primary::-webkit-progress-value { .progress.is-primary::-webkit-progress-value {
background-color: #11e4c4; background-color: #00d1b2;
} }
.progress.is-primary::-moz-progress-bar { .progress.is-primary::-moz-progress-bar {
background-color: #11e4c4; background-color: #00d1b2;
} }
.progress.is-info::-webkit-progress-value { .progress.is-info::-webkit-progress-value {
background-color: #0f6bff; background-color: #3273dc;
} }
.progress.is-info::-moz-progress-bar { .progress.is-info::-moz-progress-bar {
background-color: #0f6bff; background-color: #3273dc;
} }
.progress.is-success::-webkit-progress-value { .progress.is-success::-webkit-progress-value {
background-color: #20ee68; background-color: #23d160;
} }
.progress.is-success::-moz-progress-bar { .progress.is-success::-moz-progress-bar {
background-color: #20ee68; background-color: #23d160;
} }
.progress.is-warning::-webkit-progress-value { .progress.is-warning::-webkit-progress-value {
background-color: #ffcf0f; background-color: #ffdd57;
} }
.progress.is-warning::-moz-progress-bar { .progress.is-warning::-moz-progress-bar {
background-color: #ffcf0f; background-color: #ffdd57;
} }
.progress.is-danger::-webkit-progress-value { .progress.is-danger::-webkit-progress-value {
background-color: #ff0f3f; background-color: #ff3860;
} }
.progress.is-danger::-moz-progress-bar { .progress.is-danger::-moz-progress-bar {
background-color: #ff0f3f; background-color: #ff3860;
} }
.progress.is-small { .progress.is-small {
@ -2372,7 +2372,7 @@ a.box:active {
.table td.is-link > a:hover, .table td.is-link > a:hover,
.table th.is-link > a:hover { .table th.is-link > a:hover {
background-color: #11e4c4; background-color: #00d1b2;
color: white; color: white;
} }
@ -2907,27 +2907,27 @@ a.box:active {
} }
.tag.is-primary { .tag.is-primary {
background-color: #11e4c4; background-color: #00d1b2;
color: white; color: white;
} }
.tag.is-info { .tag.is-info {
background-color: #0f6bff; background-color: #3273dc;
color: white; color: white;
} }
.tag.is-success { .tag.is-success {
background-color: #20ee68; background-color: #23d160;
color: white; color: white;
} }
.tag.is-warning { .tag.is-warning {
background-color: #ffcf0f; background-color: #ffdd57;
color: rgba(0, 0, 0, 0.7); color: rgba(0, 0, 0, 0.7);
} }
.tag.is-danger { .tag.is-danger {
background-color: #ff0f3f; background-color: #ff3860;
color: white; color: white;
} }
@ -3522,11 +3522,11 @@ a.box:active {
.menu-list a:hover { .menu-list a:hover {
background-color: whitesmoke; background-color: whitesmoke;
color: #11e4c4; color: #00d1b2;
} }
.menu-list a.is-active { .menu-list a.is-active {
background-color: #11e4c4; background-color: #00d1b2;
color: white; color: white;
} }
@ -3640,44 +3640,44 @@ a.box:active {
} }
.message.is-primary { .message.is-primary {
background-color: #ecfefb; background-color: #ebfffc;
} }
.message.is-primary .message-header { .message.is-primary .message-header {
background-color: #11e4c4; background-color: #00d1b2;
color: white; color: white;
} }
.message.is-primary .message-body { .message.is-primary .message-body {
border-color: #11e4c4; border-color: #00d1b2;
color: gray; color: gray;
} }
.message.is-info { .message.is-info {
background-color: #ebf2ff; background-color: #eef3fc;
} }
.message.is-info .message-header { .message.is-info .message-header {
background-color: #0f6bff; background-color: #3273dc;
color: white; color: white;
} }
.message.is-info .message-body { .message.is-info .message-body {
border-color: #0f6bff; border-color: #3273dc;
color: gray; color: gray;
} }
.message.is-success { .message.is-success {
background-color: #ecfef2; background-color: #eefcf3;
} }
.message.is-success .message-header { .message.is-success .message-header {
background-color: #20ee68; background-color: #23d160;
color: white; color: white;
} }
.message.is-success .message-body { .message.is-success .message-body {
border-color: #20ee68; border-color: #23d160;
color: gray; color: gray;
} }
@ -3686,12 +3686,12 @@ a.box:active {
} }
.message.is-warning .message-header { .message.is-warning .message-header {
background-color: #ffcf0f; background-color: #ffdd57;
color: rgba(0, 0, 0, 0.7); color: rgba(0, 0, 0, 0.7);
} }
.message.is-warning .message-body { .message.is-warning .message-body {
border-color: #ffcf0f; border-color: #ffdd57;
color: gray; color: gray;
} }
@ -3700,12 +3700,12 @@ a.box:active {
} }
.message.is-danger .message-header { .message.is-danger .message-header {
background-color: #ff0f3f; background-color: #ff3860;
color: white; color: white;
} }
.message.is-danger .message-body { .message.is-danger .message-body {
border-color: #ff0f3f; border-color: #ff3860;
color: gray; color: gray;
} }
@ -3961,7 +3961,7 @@ a.box:active {
} }
.nav-toggle.is-active span { .nav-toggle.is-active span {
background-color: #11e4c4; background-color: #00d1b2;
} }
.nav-toggle.is-active span:nth-child(1) { .nav-toggle.is-active span:nth-child(1) {
@ -4065,15 +4065,15 @@ a.nav-item.is-tab {
.nav-item a.is-tab:hover, .nav-item a.is-tab:hover,
a.nav-item.is-tab:hover { a.nav-item.is-tab:hover {
border-bottom: 1px solid #11e4c4; border-bottom: 1px solid #00d1b2;
border-top: 1px solid transparent; border-top: 1px solid transparent;
} }
.nav-item a.is-tab.is-active, .nav-item a.is-tab.is-active,
a.nav-item.is-tab.is-active { a.nav-item.is-tab.is-active {
border-bottom: 3px solid #11e4c4; border-bottom: 3px solid #00d1b2;
border-top: 3px solid transparent; border-top: 3px solid transparent;
color: #11e4c4; color: #00d1b2;
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
@ -4342,7 +4342,7 @@ a.nav-item.is-tab.is-active {
} }
.panel-list a:hover { .panel-list a:hover {
color: #11e4c4; color: #00d1b2;
} }
.panel-tabs { .panel-tabs {
@ -4458,8 +4458,8 @@ a.panel-block:hover {
} }
.tabs li.is-active a { .tabs li.is-active a {
border-bottom-color: #11e4c4; border-bottom-color: #00d1b2;
color: #11e4c4; color: #00d1b2;
} }
.tabs ul { .tabs ul {
@ -4575,8 +4575,8 @@ a.panel-block:hover {
} }
.tabs.is-toggle li.is-active a { .tabs.is-toggle li.is-active a {
background-color: #11e4c4; background-color: #00d1b2;
border-color: #11e4c4; border-color: #00d1b2;
color: white; color: white;
z-index: 1; z-index: 1;
} }
@ -6227,7 +6227,7 @@ a.panel-block:hover {
} }
.hero.is-primary { .hero.is-primary {
background-color: #11e4c4; background-color: #00d1b2;
color: white; color: white;
} }
@ -6255,7 +6255,7 @@ a.panel-block:hover {
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.hero.is-primary .nav-menu { .hero.is-primary .nav-menu {
background-color: #11e4c4; background-color: #00d1b2;
} }
} }
@ -6294,12 +6294,12 @@ a.panel-block:hover {
.hero.is-primary .tabs.is-boxed li.is-active a, .hero.is-primary .tabs.is-boxed li.is-active a:hover, .hero.is-primary .tabs.is-toggle li.is-active a, .hero.is-primary .tabs.is-toggle li.is-active a:hover { .hero.is-primary .tabs.is-boxed li.is-active a, .hero.is-primary .tabs.is-boxed li.is-active a:hover, .hero.is-primary .tabs.is-toggle li.is-active a, .hero.is-primary .tabs.is-toggle li.is-active a:hover {
background-color: white; background-color: white;
border-color: white; border-color: white;
color: #11e4c4; color: #00d1b2;
} }
.hero.is-primary.is-bold { .hero.is-primary.is-bold {
background-image: -webkit-linear-gradient(309deg, #04be83 0%, #11e4c4 71%, #1af1f4 100%); background-image: -webkit-linear-gradient(309deg, #009e6c 0%, #00d1b2 71%, #00e7eb 100%);
background-image: linear-gradient(141deg, #04be83 0%, #11e4c4 71%, #1af1f4 100%); background-image: linear-gradient(141deg, #009e6c 0%, #00d1b2 71%, #00e7eb 100%);
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
@ -6318,7 +6318,7 @@ a.panel-block:hover {
} }
.hero.is-info { .hero.is-info {
background-color: #0f6bff; background-color: #3273dc;
color: white; color: white;
} }
@ -6346,7 +6346,7 @@ a.panel-block:hover {
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.hero.is-info .nav-menu { .hero.is-info .nav-menu {
background-color: #0f6bff; background-color: #3273dc;
} }
} }
@ -6385,12 +6385,12 @@ a.panel-block:hover {
.hero.is-info .tabs.is-boxed li.is-active a, .hero.is-info .tabs.is-boxed li.is-active a:hover, .hero.is-info .tabs.is-toggle li.is-active a, .hero.is-info .tabs.is-toggle li.is-active a:hover { .hero.is-info .tabs.is-boxed li.is-active a, .hero.is-info .tabs.is-boxed li.is-active a:hover, .hero.is-info .tabs.is-toggle li.is-active a, .hero.is-info .tabs.is-toggle li.is-active a:hover {
background-color: white; background-color: white;
border-color: white; border-color: white;
color: #0f6bff; color: #3273dc;
} }
.hero.is-info.is-bold { .hero.is-info.is-bold {
background-image: -webkit-linear-gradient(309deg, #0079db 0%, #0f6bff 71%, #2957ff 100%); background-image: -webkit-linear-gradient(309deg, #1577c6 0%, #3273dc 71%, #4366e5 100%);
background-image: linear-gradient(141deg, #0079db 0%, #0f6bff 71%, #2957ff 100%); background-image: linear-gradient(141deg, #1577c6 0%, #3273dc 71%, #4366e5 100%);
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
@ -6409,7 +6409,7 @@ a.panel-block:hover {
} }
.hero.is-success { .hero.is-success {
background-color: #20ee68; background-color: #23d160;
color: white; color: white;
} }
@ -6437,7 +6437,7 @@ a.panel-block:hover {
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.hero.is-success .nav-menu { .hero.is-success .nav-menu {
background-color: #20ee68; background-color: #23d160;
} }
} }
@ -6476,12 +6476,12 @@ a.panel-block:hover {
.hero.is-success .tabs.is-boxed li.is-active a, .hero.is-success .tabs.is-boxed li.is-active a:hover, .hero.is-success .tabs.is-toggle li.is-active a, .hero.is-success .tabs.is-toggle li.is-active a:hover { .hero.is-success .tabs.is-boxed li.is-active a, .hero.is-success .tabs.is-boxed li.is-active a:hover, .hero.is-success .tabs.is-toggle li.is-active a, .hero.is-success .tabs.is-toggle li.is-active a:hover {
background-color: white; background-color: white;
border-color: white; border-color: white;
color: #20ee68; color: #23d160;
} }
.hero.is-success.is-bold { .hero.is-success.is-bold {
background-image: -webkit-linear-gradient(309deg, #04d72b 0%, #20ee68 71%, #32f597 100%); background-image: -webkit-linear-gradient(309deg, #12af2f 0%, #23d160 71%, #2ce28a 100%);
background-image: linear-gradient(141deg, #04d72b 0%, #20ee68 71%, #32f597 100%); background-image: linear-gradient(141deg, #12af2f 0%, #23d160 71%, #2ce28a 100%);
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
@ -6500,7 +6500,7 @@ a.panel-block:hover {
} }
.hero.is-warning { .hero.is-warning {
background-color: #ffcf0f; background-color: #ffdd57;
color: rgba(0, 0, 0, 0.7); color: rgba(0, 0, 0, 0.7);
} }
@ -6528,7 +6528,7 @@ a.panel-block:hover {
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.hero.is-warning .nav-menu { .hero.is-warning .nav-menu {
background-color: #ffcf0f; background-color: #ffdd57;
} }
} }
@ -6567,12 +6567,12 @@ a.panel-block:hover {
.hero.is-warning .tabs.is-boxed li.is-active a, .hero.is-warning .tabs.is-boxed li.is-active a:hover, .hero.is-warning .tabs.is-toggle li.is-active a, .hero.is-warning .tabs.is-toggle li.is-active a:hover { .hero.is-warning .tabs.is-boxed li.is-active a, .hero.is-warning .tabs.is-boxed li.is-active a:hover, .hero.is-warning .tabs.is-toggle li.is-active a, .hero.is-warning .tabs.is-toggle li.is-active a:hover {
background-color: rgba(0, 0, 0, 0.7); background-color: rgba(0, 0, 0, 0.7);
border-color: rgba(0, 0, 0, 0.7); border-color: rgba(0, 0, 0, 0.7);
color: #ffcf0f; color: #ffdd57;
} }
.hero.is-warning.is-bold { .hero.is-warning.is-bold {
background-image: -webkit-linear-gradient(309deg, #db8b00 0%, #ffcf0f 71%, #fff829 100%); background-image: -webkit-linear-gradient(309deg, #ffaf24 0%, #ffdd57 71%, #fffa70 100%);
background-image: linear-gradient(141deg, #db8b00 0%, #ffcf0f 71%, #fff829 100%); background-image: linear-gradient(141deg, #ffaf24 0%, #ffdd57 71%, #fffa70 100%);
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
@ -6591,7 +6591,7 @@ a.panel-block:hover {
} }
.hero.is-danger { .hero.is-danger {
background-color: #ff0f3f; background-color: #ff3860;
color: white; color: white;
} }
@ -6619,7 +6619,7 @@ a.panel-block:hover {
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.hero.is-danger .nav-menu { .hero.is-danger .nav-menu {
background-color: #ff0f3f; background-color: #ff3860;
} }
} }
@ -6658,12 +6658,12 @@ a.panel-block:hover {
.hero.is-danger .tabs.is-boxed li.is-active a, .hero.is-danger .tabs.is-boxed li.is-active a:hover, .hero.is-danger .tabs.is-toggle li.is-active a, .hero.is-danger .tabs.is-toggle li.is-active a:hover { .hero.is-danger .tabs.is-boxed li.is-active a, .hero.is-danger .tabs.is-boxed li.is-active a:hover, .hero.is-danger .tabs.is-toggle li.is-active a, .hero.is-danger .tabs.is-toggle li.is-active a:hover {
background-color: white; background-color: white;
border-color: white; border-color: white;
color: #ff0f3f; color: #ff3860;
} }
.hero.is-danger.is-bold { .hero.is-danger.is-bold {
background-image: -webkit-linear-gradient(309deg, #db0050 0%, #ff0f3f 71%, #ff2930 100%); background-image: -webkit-linear-gradient(309deg, #ff0561 0%, #ff3860 71%, #ff5257 100%);
background-image: linear-gradient(141deg, #db0050 0%, #ff0f3f 71%, #ff2930 100%); background-image: linear-gradient(141deg, #ff0561 0%, #ff3860 71%, #ff5257 100%);
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
@ -6759,7 +6759,7 @@ a.panel-block:hover {
} }
.footer a:not(.icon):hover, .footer a:visited:not(.icon):hover { .footer a:not(.icon):hover, .footer a:visited:not(.icon):hover {
border-bottom-color: #11e4c4; border-bottom-color: #00d1b2;
} }
@keyframes spin-around { @keyframes spin-around {
@ -7090,7 +7090,7 @@ svg {
-webkit-animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1); -webkit-animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1);
animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1); animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1);
fill: none; fill: none;
stroke: #11e4c4; stroke: #00d1b2;
stroke-dasharray: 880; stroke-dasharray: 880;
stroke-width: 2px; stroke-width: 2px;
} }
@ -7109,7 +7109,7 @@ svg {
} }
#b svg:last-child g { #b svg:last-child g {
fill: #11e4c4; fill: #00d1b2;
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
@ -7145,7 +7145,7 @@ svg {
#npm code { #npm code {
border-radius: 3px; border-radius: 3px;
color: #11e4c4; color: #00d1b2;
display: inline-block; display: inline-block;
font-size: 16px; font-size: 16px;
padding: 16px 32px; padding: 16px 32px;
@ -7237,7 +7237,7 @@ html.route-index #carbon {
.example, .example,
.structure { .structure {
border: 1px solid #ffcf0f; border: 1px solid #ffdd57;
border-top-right-radius: 3px; border-top-right-radius: 3px;
color: rgba(0, 0, 0, 0.7); color: rgba(0, 0, 0, 0.7);
padding: 15px 20px; padding: 15px 20px;
@ -7256,7 +7256,7 @@ html.route-index #carbon {
.example:before, .example:before,
.structure:before { .structure:before {
background: #ffcf0f; background: #ffdd57;
border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0;
bottom: 100%; bottom: 100%;
content: "Example"; content: "Example";
@ -7281,7 +7281,7 @@ html.route-index #carbon {
} }
.example + .highlight { .example + .highlight {
border: 1px solid #ffcf0f; border: 1px solid #ffdd57;
border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px;
border-top: none; border-top: none;
margin-top: -20px; margin-top: -20px;
@ -7296,13 +7296,13 @@ html.route-index #carbon {
} }
.structure { .structure {
border-color: #ff0f3f; border-color: #ff3860;
border-radius: 3px; border-radius: 3px;
padding: 20px; padding: 20px;
} }
.structure:before { .structure:before {
background: #ff0f3f; background: #ff3860;
color: white; color: white;
content: "Structure"; content: "Structure";
} }
@ -7386,8 +7386,8 @@ html.route-index #carbon {
.highlight .copy:hover, .highlight .copy:hover,
.highlight .expand:hover { .highlight .expand:hover {
border-color: #ff0f3f; border-color: #ff3860;
color: #ff0f3f; color: #ff3860;
} }
.highlight .expand { .highlight .expand {
@ -7429,11 +7429,11 @@ html.route-index #carbon {
} }
html ::-moz-selection { html ::-moz-selection {
background: #11e4c4; background: #00d1b2;
color: white; color: white;
} }
html ::selection { html ::selection {
background: #11e4c4; background: #00d1b2;
color: white; color: white;
} }

BIN
docs/favicons/android-chrome-192x192.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
docs/favicons/apple-touch-icon.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

4
docs/favicons/browserconfig.xml
View File

@ -2,8 +2,8 @@
<browserconfig> <browserconfig>
<msapplication> <msapplication>
<tile> <tile>
<square150x150logo src="/favicons/mstile-150x150.png?v=201609241700"/> <square150x150logo src="/favicons/mstile-150x150.png?v=201609251738"/>
<TileColor>#11e4c4</TileColor> <TileColor>#00d1b2</TileColor>
</tile> </tile>
</msapplication> </msapplication>
</browserconfig> </browserconfig>

BIN
docs/favicons/favicon-16x16.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 710 B

After

Width:  |  Height:  |  Size: 721 B

BIN
docs/favicons/favicon-32x32.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 917 B

After

Width:  |  Height:  |  Size: 915 B

BIN
docs/favicons/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

6
docs/favicons/manifest.json
View File

@ -1,12 +1,12 @@
{ {
"name": "bulma.io", "name": "Bulma",
"icons": [ "icons": [
{ {
"src": "\/favicons\/android-chrome-192x192.png?v=201609241700", "src": "\/favicons\/android-chrome-192x192.png?v=201609251738",
"sizes": "192x192", "sizes": "192x192",
"type": "image\/png" "type": "image\/png"
} }
], ],
"theme_color": "#11e4c4", "theme_color": "#00d1b2",
"display": "standalone" "display": "standalone"
} }

BIN
docs/favicons/mstile-150x150.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
docs/images/bulma-banner.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 31 KiB

After

Width:  |  Height:  |  Size: 30 KiB

BIN
docs/images/bulma-icon.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.6 KiB

After

Width:  |  Height:  |  Size: 8.6 KiB

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "bulma", "name": "bulma",
"version": "0.2.0", "version": "0.2.1",
"homepage": "http://bulma.io", "homepage": "http://bulma.io",
"author": "Jeremy Thomas <bbxdesign@gmail.com> (http://jgthms.com)", "author": "Jeremy Thomas <bbxdesign@gmail.com> (http://jgthms.com)",
"description": "Modern CSS framework based on Flexbox", "description": "Modern CSS framework based on Flexbox",

6
sass/utilities/functions.sass
View File

@ -22,7 +22,11 @@
@return (map-get($color-rgb, 'red') * .2126) + (map-get($color-rgb, 'green') * .7152) + (map-get($color-rgb, 'blue') * .0722) @return (map-get($color-rgb, 'red') * .2126) + (map-get($color-rgb, 'green') * .7152) + (map-get($color-rgb, 'blue') * .0722)
@function findColorInvert($color) @function findColorInvert($color)
@if (colorLuminance($color) > 0.67) // @if (colorLuminance($color) > 0.67)
// @return rgba(black, 0.7)
@debug #{$color}
@debug colorLuminance($color)
@if (colorLuminance($color) > 0.55)
@return rgba(black, 0.7) @return rgba(black, 0.7)
@else @else
@return white @return white

10
sass/utilities/variables.sass
View File

@ -20,12 +20,12 @@ $white-bis: hsl(0, 0%, 98%) !default
$white: hsl(0, 0%, 100%) !default $white: hsl(0, 0%, 100%) !default
$orange: hsl(14, 100%, 53%) !default $orange: hsl(14, 100%, 53%) !default
$yellow: hsl(48, 100%, 53%) !default $yellow: hsl(48, 100%, 67%) !default
$green: hsl(141, 86%, 53%) !default $green: hsl(141, 71%, 48%) !default
$turquoise: hsl(171, 86%, 48%) !default $turquoise: hsl(171, 100%, 41%) !default
$blue: hsl(217, 100%, 53%) !default $blue: hsl(217, 71%, 53%) !default
$purple: hsl(271, 100%, 71%) !default $purple: hsl(271, 100%, 71%) !default
$red: hsl(348, 100%, 53%) !default $red: hsl(348, 100%, 61%) !default
// Typography // Typography
$family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default $family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default