Add link color
This commit is contained in:
Jeremy Thomas
parent
a592741ab6
commit
e037deec73
9 changed files with 453 additions and 68 deletions
|
|
@ -87,11 +87,12 @@
|
|||
<div class="control"><a class="button is-light">Light</a></div>
|
||||
<div class="control"><a class="button is-dark">Dark</a></div>
|
||||
<div class="control"><a class="button is-black">Black</a></div>
|
||||
<div class="control"><a class="button is-link">Link</a></div>
|
||||
<div class="control"><a class="button is-text">Text</a></div>
|
||||
</div>
|
||||
|
||||
<div class="field is-grouped is-grouped-multiline">
|
||||
<div class="control"><a class="button is-primary">Primary</a></div>
|
||||
<div class="control"><a class="button is-link">Link</a></div>
|
||||
<div class="control"><a class="button is-info">Info</a></div>
|
||||
<div class="control"><a class="button is-success">Success</a></div>
|
||||
<div class="control"><a class="button is-warning">Warning</a></div>
|
||||
|
|
@ -118,6 +119,7 @@
|
|||
<span class="tag is-light">Light</span>
|
||||
<span class="tag is-white">White</span>
|
||||
<span class="tag is-primary">Primary</span>
|
||||
<span class="tag is-link">Link</span>
|
||||
<span class="tag is-info">Info</span>
|
||||
<span class="tag is-success">Success</span>
|
||||
<span class="tag is-warning">Warning</span>
|
||||
|
|
@ -320,7 +322,7 @@
|
|||
Remember me
|
||||
</label>
|
||||
<div class="panel-block">
|
||||
<button class="button is-info is-outlined is-fullwidth">
|
||||
<button class="button is-link is-outlined is-fullwidth">
|
||||
Reset all filters
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@
|
|||
<div class="navbar-item">
|
||||
<div>
|
||||
<p class="is-size-6-desktop">
|
||||
<strong class="has-text-info">{{ site.version }}</strong>
|
||||
<strong>{{ site.version }}</strong>
|
||||
</p>
|
||||
{{#unless site.deprecated}}
|
||||
<small>
|
||||
|
|
@ -81,7 +81,7 @@
|
|||
<a class="navbar-item" href="{{ post.url }}">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">{{ post.date | date_to_string }}</small>
|
||||
<small class="has-text-link">{{ post.date | date_to_string }}</small>
|
||||
</p>
|
||||
<p>{{ post.title }}</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ route: documentation
|
|||
{% include navbar.html id="Documentation" %}
|
||||
</div>
|
||||
|
||||
<section class="hero is-info">
|
||||
<section class="hero is-primary">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<div class="columns is-vcentered">
|
||||
|
|
|
|||
|
|
@ -701,14 +701,22 @@ a.has-text-primary:hover, a.has-text-primary:focus {
|
|||
color: #009e86 !important;
|
||||
}
|
||||
|
||||
.has-text-info {
|
||||
.has-text-link {
|
||||
color: #3273dc !important;
|
||||
}
|
||||
|
||||
a.has-text-info:hover, a.has-text-info:focus {
|
||||
a.has-text-link:hover, a.has-text-link:focus {
|
||||
color: #205bbc !important;
|
||||
}
|
||||
|
||||
.has-text-info {
|
||||
color: #209cee !important;
|
||||
}
|
||||
|
||||
a.has-text-info:hover, a.has-text-info:focus {
|
||||
color: #0f81cc !important;
|
||||
}
|
||||
|
||||
.has-text-success {
|
||||
color: #23d160 !important;
|
||||
}
|
||||
|
|
@ -1263,24 +1271,24 @@ a.box:active {
|
|||
color: #363636;
|
||||
}
|
||||
|
||||
.button.is-link {
|
||||
.button.is-text {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
color: #4a4a4a;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.button.is-link:hover, .button.is-link.is-hovered, .button.is-link:focus, .button.is-link.is-focused {
|
||||
.button.is-text:hover, .button.is-text.is-hovered, .button.is-text:focus, .button.is-text.is-focused {
|
||||
background-color: whitesmoke;
|
||||
color: #363636;
|
||||
}
|
||||
|
||||
.button.is-link:active, .button.is-link.is-active {
|
||||
.button.is-text:active, .button.is-text.is-active {
|
||||
background-color: #e8e8e8;
|
||||
color: #363636;
|
||||
}
|
||||
|
||||
.button.is-link[disabled] {
|
||||
.button.is-text[disabled] {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
box-shadow: none;
|
||||
|
|
@ -1756,42 +1764,136 @@ a.box:active {
|
|||
color: #fff;
|
||||
}
|
||||
|
||||
.button.is-info {
|
||||
.button.is-link {
|
||||
background-color: #3273dc;
|
||||
border-color: transparent;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.button.is-info:hover, .button.is-info.is-hovered {
|
||||
.button.is-link:hover, .button.is-link.is-hovered {
|
||||
background-color: #276cda;
|
||||
border-color: transparent;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.button.is-link:focus, .button.is-link.is-focused {
|
||||
border-color: transparent;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.button.is-link:focus:not(:active), .button.is-link.is-focused:not(:active) {
|
||||
box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25);
|
||||
}
|
||||
|
||||
.button.is-link:active, .button.is-link.is-active {
|
||||
background-color: #2366d1;
|
||||
border-color: transparent;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.button.is-link[disabled] {
|
||||
background-color: #3273dc;
|
||||
border-color: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.button.is-link.is-inverted {
|
||||
background-color: #fff;
|
||||
color: #3273dc;
|
||||
}
|
||||
|
||||
.button.is-link.is-inverted:hover {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
.button.is-link.is-inverted[disabled] {
|
||||
background-color: #fff;
|
||||
border-color: transparent;
|
||||
box-shadow: none;
|
||||
color: #3273dc;
|
||||
}
|
||||
|
||||
.button.is-link.is-loading:after {
|
||||
border-color: transparent transparent #fff #fff !important;
|
||||
}
|
||||
|
||||
.button.is-link.is-outlined {
|
||||
background-color: transparent;
|
||||
border-color: #3273dc;
|
||||
color: #3273dc;
|
||||
}
|
||||
|
||||
.button.is-link.is-outlined:hover, .button.is-link.is-outlined:focus {
|
||||
background-color: #3273dc;
|
||||
border-color: #3273dc;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.button.is-link.is-outlined.is-loading:after {
|
||||
border-color: transparent transparent #3273dc #3273dc !important;
|
||||
}
|
||||
|
||||
.button.is-link.is-outlined[disabled] {
|
||||
background-color: transparent;
|
||||
border-color: #3273dc;
|
||||
box-shadow: none;
|
||||
color: #3273dc;
|
||||
}
|
||||
|
||||
.button.is-link.is-inverted.is-outlined {
|
||||
background-color: transparent;
|
||||
border-color: #fff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.button.is-link.is-inverted.is-outlined:hover, .button.is-link.is-inverted.is-outlined:focus {
|
||||
background-color: #fff;
|
||||
color: #3273dc;
|
||||
}
|
||||
|
||||
.button.is-link.is-inverted.is-outlined[disabled] {
|
||||
background-color: transparent;
|
||||
border-color: #fff;
|
||||
box-shadow: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.button.is-info {
|
||||
background-color: #209cee;
|
||||
border-color: transparent;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.button.is-info:hover, .button.is-info.is-hovered {
|
||||
background-color: #1496ed;
|
||||
border-color: transparent;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.button.is-info:focus, .button.is-info.is-focused {
|
||||
border-color: transparent;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.button.is-info:focus:not(:active), .button.is-info.is-focused:not(:active) {
|
||||
box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25);
|
||||
box-shadow: 0 0 0 0.125em rgba(32, 156, 238, 0.25);
|
||||
}
|
||||
|
||||
.button.is-info:active, .button.is-info.is-active {
|
||||
background-color: #2366d1;
|
||||
background-color: #118fe4;
|
||||
border-color: transparent;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.button.is-info[disabled] {
|
||||
background-color: #3273dc;
|
||||
background-color: #209cee;
|
||||
border-color: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.button.is-info.is-inverted {
|
||||
background-color: #fff;
|
||||
color: #3273dc;
|
||||
color: #209cee;
|
||||
}
|
||||
|
||||
.button.is-info.is-inverted:hover {
|
||||
|
|
@ -1802,7 +1904,7 @@ a.box:active {
|
|||
background-color: #fff;
|
||||
border-color: transparent;
|
||||
box-shadow: none;
|
||||
color: #3273dc;
|
||||
color: #209cee;
|
||||
}
|
||||
|
||||
.button.is-info.is-loading:after {
|
||||
|
|
@ -1811,25 +1913,25 @@ a.box:active {
|
|||
|
||||
.button.is-info.is-outlined {
|
||||
background-color: transparent;
|
||||
border-color: #3273dc;
|
||||
color: #3273dc;
|
||||
border-color: #209cee;
|
||||
color: #209cee;
|
||||
}
|
||||
|
||||
.button.is-info.is-outlined:hover, .button.is-info.is-outlined:focus {
|
||||
background-color: #3273dc;
|
||||
border-color: #3273dc;
|
||||
background-color: #209cee;
|
||||
border-color: #209cee;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.button.is-info.is-outlined.is-loading:after {
|
||||
border-color: transparent transparent #3273dc #3273dc !important;
|
||||
border-color: transparent transparent #209cee #209cee !important;
|
||||
}
|
||||
|
||||
.button.is-info.is-outlined[disabled] {
|
||||
background-color: transparent;
|
||||
border-color: #3273dc;
|
||||
border-color: #209cee;
|
||||
box-shadow: none;
|
||||
color: #3273dc;
|
||||
color: #209cee;
|
||||
}
|
||||
|
||||
.button.is-info.is-inverted.is-outlined {
|
||||
|
|
@ -1840,7 +1942,7 @@ a.box:active {
|
|||
|
||||
.button.is-info.is-inverted.is-outlined:hover, .button.is-info.is-inverted.is-outlined:focus {
|
||||
background-color: #fff;
|
||||
color: #3273dc;
|
||||
color: #209cee;
|
||||
}
|
||||
|
||||
.button.is-info.is-inverted.is-outlined[disabled] {
|
||||
|
|
@ -2598,9 +2700,22 @@ a.box:active {
|
|||
box-shadow: 0 0 0 0.125em rgba(0, 209, 178, 0.25);
|
||||
}
|
||||
|
||||
.input.is-link,
|
||||
.textarea.is-link {
|
||||
border-color: #3273dc;
|
||||
}
|
||||
|
||||
.input.is-link:focus, .input.is-link.is-focused, .input.is-link:active, .input.is-link.is-active,
|
||||
.textarea.is-link:focus,
|
||||
.textarea.is-link.is-focused,
|
||||
.textarea.is-link:active,
|
||||
.textarea.is-link.is-active {
|
||||
box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25);
|
||||
}
|
||||
|
||||
.input.is-info,
|
||||
.textarea.is-info {
|
||||
border-color: #3273dc;
|
||||
border-color: #209cee;
|
||||
}
|
||||
|
||||
.input.is-info:focus, .input.is-info.is-focused, .input.is-info:active, .input.is-info.is-active,
|
||||
|
|
@ -2608,7 +2723,7 @@ a.box:active {
|
|||
.textarea.is-info.is-focused,
|
||||
.textarea.is-info:active,
|
||||
.textarea.is-info.is-active {
|
||||
box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25);
|
||||
box-shadow: 0 0 0 0.125em rgba(32, 156, 238, 0.25);
|
||||
}
|
||||
|
||||
.input.is-success,
|
||||
|
|
@ -2912,14 +3027,22 @@ a.box:active {
|
|||
box-shadow: 0 0 0 0.125em rgba(0, 209, 178, 0.25);
|
||||
}
|
||||
|
||||
.select.is-info select {
|
||||
.select.is-link select {
|
||||
border-color: #3273dc;
|
||||
}
|
||||
|
||||
.select.is-info select:focus, .select.is-info select.is-focused, .select.is-info select:active, .select.is-info select.is-active {
|
||||
.select.is-link select:focus, .select.is-link select.is-focused, .select.is-link select:active, .select.is-link select.is-active {
|
||||
box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25);
|
||||
}
|
||||
|
||||
.select.is-info select {
|
||||
border-color: #209cee;
|
||||
}
|
||||
|
||||
.select.is-info select:focus, .select.is-info select.is-focused, .select.is-info select:active, .select.is-info select.is-active {
|
||||
box-shadow: 0 0 0 0.125em rgba(32, 156, 238, 0.25);
|
||||
}
|
||||
|
||||
.select.is-success select {
|
||||
border-color: #23d160;
|
||||
}
|
||||
|
|
@ -3131,26 +3254,50 @@ a.box:active {
|
|||
color: #fff;
|
||||
}
|
||||
|
||||
.file.is-info .file-cta {
|
||||
.file.is-link .file-cta {
|
||||
background-color: #3273dc;
|
||||
border-color: transparent;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.file.is-info:hover .file-cta, .file.is-info.is-hovered .file-cta {
|
||||
.file.is-link:hover .file-cta, .file.is-link.is-hovered .file-cta {
|
||||
background-color: #276cda;
|
||||
border-color: transparent;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.file.is-link:focus .file-cta, .file.is-link.is-focused .file-cta {
|
||||
border-color: transparent;
|
||||
box-shadow: 0 0 0.5em rgba(50, 115, 220, 0.25);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.file.is-link:active .file-cta, .file.is-link.is-active .file-cta {
|
||||
background-color: #2366d1;
|
||||
border-color: transparent;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.file.is-info .file-cta {
|
||||
background-color: #209cee;
|
||||
border-color: transparent;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.file.is-info:hover .file-cta, .file.is-info.is-hovered .file-cta {
|
||||
background-color: #1496ed;
|
||||
border-color: transparent;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.file.is-info:focus .file-cta, .file.is-info.is-focused .file-cta {
|
||||
border-color: transparent;
|
||||
box-shadow: 0 0 0.5em rgba(50, 115, 220, 0.25);
|
||||
box-shadow: 0 0 0.5em rgba(32, 156, 238, 0.25);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.file.is-info:active .file-cta, .file.is-info.is-active .file-cta {
|
||||
background-color: #2366d1;
|
||||
background-color: #118fe4;
|
||||
border-color: transparent;
|
||||
color: #fff;
|
||||
}
|
||||
|
|
@ -3482,10 +3629,14 @@ a.box:active {
|
|||
color: #00d1b2;
|
||||
}
|
||||
|
||||
.help.is-info {
|
||||
.help.is-link {
|
||||
color: #3273dc;
|
||||
}
|
||||
|
||||
.help.is-info {
|
||||
color: #209cee;
|
||||
}
|
||||
|
||||
.help.is-success {
|
||||
color: #23d160;
|
||||
}
|
||||
|
|
@ -3982,11 +4133,16 @@ a.box:active {
|
|||
color: #fff;
|
||||
}
|
||||
|
||||
.notification.is-info {
|
||||
.notification.is-link {
|
||||
background-color: #3273dc;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.notification.is-info {
|
||||
background-color: #209cee;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.notification.is-success {
|
||||
background-color: #23d160;
|
||||
color: #fff;
|
||||
|
|
@ -4070,14 +4226,22 @@ a.box:active {
|
|||
background-color: #00d1b2;
|
||||
}
|
||||
|
||||
.progress.is-info::-webkit-progress-value {
|
||||
.progress.is-link::-webkit-progress-value {
|
||||
background-color: #3273dc;
|
||||
}
|
||||
|
||||
.progress.is-info::-moz-progress-bar {
|
||||
.progress.is-link::-moz-progress-bar {
|
||||
background-color: #3273dc;
|
||||
}
|
||||
|
||||
.progress.is-info::-webkit-progress-value {
|
||||
background-color: #209cee;
|
||||
}
|
||||
|
||||
.progress.is-info::-moz-progress-bar {
|
||||
background-color: #209cee;
|
||||
}
|
||||
|
||||
.progress.is-success::-webkit-progress-value {
|
||||
background-color: #23d160;
|
||||
}
|
||||
|
|
@ -4163,13 +4327,20 @@ a.box:active {
|
|||
color: #fff;
|
||||
}
|
||||
|
||||
.table td.is-info,
|
||||
.table th.is-info {
|
||||
.table td.is-link,
|
||||
.table th.is-link {
|
||||
background-color: #3273dc;
|
||||
border-color: #3273dc;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.table td.is-info,
|
||||
.table th.is-info {
|
||||
background-color: #209cee;
|
||||
border-color: #209cee;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.table td.is-success,
|
||||
.table th.is-success {
|
||||
background-color: #23d160;
|
||||
|
|
@ -4348,11 +4519,16 @@ a.box:active {
|
|||
color: #fff;
|
||||
}
|
||||
|
||||
.tag:not(body).is-info {
|
||||
.tag:not(body).is-link {
|
||||
background-color: #3273dc;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.tag:not(body).is-info {
|
||||
background-color: #209cee;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.tag:not(body).is-success {
|
||||
background-color: #23d160;
|
||||
color: #fff;
|
||||
|
|
@ -5255,20 +5431,34 @@ a.dropdown-item.is-active {
|
|||
color: #021310;
|
||||
}
|
||||
|
||||
.message.is-info {
|
||||
.message.is-link {
|
||||
background-color: #f6f9fe;
|
||||
}
|
||||
|
||||
.message.is-info .message-header {
|
||||
.message.is-link .message-header {
|
||||
background-color: #3273dc;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.message.is-info .message-body {
|
||||
.message.is-link .message-body {
|
||||
border-color: #3273dc;
|
||||
color: #22509a;
|
||||
}
|
||||
|
||||
.message.is-info {
|
||||
background-color: #f6fbfe;
|
||||
}
|
||||
|
||||
.message.is-info .message-header {
|
||||
background-color: #209cee;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.message.is-info .message-body {
|
||||
border-color: #209cee;
|
||||
color: #12537e;
|
||||
}
|
||||
|
||||
.message.is-success {
|
||||
background-color: #f6fef9;
|
||||
}
|
||||
|
|
@ -6022,11 +6212,64 @@ a.nav-item:not(.button).is-tab.is-active {
|
|||
}
|
||||
}
|
||||
|
||||
.navbar.is-info {
|
||||
.navbar.is-link {
|
||||
background-color: #3273dc;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.navbar.is-link .navbar-brand > .navbar-item,
|
||||
.navbar.is-link .navbar-brand .navbar-link {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.navbar.is-link .navbar-brand > a.navbar-item:hover, .navbar.is-link .navbar-brand > a.navbar-item.is-active,
|
||||
.navbar.is-link .navbar-brand .navbar-link:hover,
|
||||
.navbar.is-link .navbar-brand .navbar-link.is-active {
|
||||
background-color: #2366d1;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.navbar.is-link .navbar-brand .navbar-link::after {
|
||||
border-color: #fff;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1024px) {
|
||||
.navbar.is-link .navbar-start > .navbar-item,
|
||||
.navbar.is-link .navbar-start .navbar-link,
|
||||
.navbar.is-link .navbar-end > .navbar-item,
|
||||
.navbar.is-link .navbar-end .navbar-link {
|
||||
color: #fff;
|
||||
}
|
||||
.navbar.is-link .navbar-start > a.navbar-item:hover, .navbar.is-link .navbar-start > a.navbar-item.is-active,
|
||||
.navbar.is-link .navbar-start .navbar-link:hover,
|
||||
.navbar.is-link .navbar-start .navbar-link.is-active,
|
||||
.navbar.is-link .navbar-end > a.navbar-item:hover,
|
||||
.navbar.is-link .navbar-end > a.navbar-item.is-active,
|
||||
.navbar.is-link .navbar-end .navbar-link:hover,
|
||||
.navbar.is-link .navbar-end .navbar-link.is-active {
|
||||
background-color: #2366d1;
|
||||
color: #fff;
|
||||
}
|
||||
.navbar.is-link .navbar-start .navbar-link::after,
|
||||
.navbar.is-link .navbar-end .navbar-link::after {
|
||||
border-color: #fff;
|
||||
}
|
||||
.navbar.is-link .navbar-item.has-dropdown:hover .navbar-link,
|
||||
.navbar.is-link .navbar-item.has-dropdown.is-active .navbar-link {
|
||||
background-color: #2366d1;
|
||||
color: #fff;
|
||||
}
|
||||
.navbar.is-link .navbar-dropdown a.navbar-item.is-active {
|
||||
background-color: #3273dc;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar.is-info {
|
||||
background-color: #209cee;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.navbar.is-info .navbar-brand > .navbar-item,
|
||||
.navbar.is-info .navbar-brand .navbar-link {
|
||||
color: #fff;
|
||||
|
|
@ -6035,7 +6278,7 @@ a.nav-item:not(.button).is-tab.is-active {
|
|||
.navbar.is-info .navbar-brand > a.navbar-item:hover, .navbar.is-info .navbar-brand > a.navbar-item.is-active,
|
||||
.navbar.is-info .navbar-brand .navbar-link:hover,
|
||||
.navbar.is-info .navbar-brand .navbar-link.is-active {
|
||||
background-color: #2366d1;
|
||||
background-color: #118fe4;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
|
@ -6057,7 +6300,7 @@ a.nav-item:not(.button).is-tab.is-active {
|
|||
.navbar.is-info .navbar-end > a.navbar-item.is-active,
|
||||
.navbar.is-info .navbar-end .navbar-link:hover,
|
||||
.navbar.is-info .navbar-end .navbar-link.is-active {
|
||||
background-color: #2366d1;
|
||||
background-color: #118fe4;
|
||||
color: #fff;
|
||||
}
|
||||
.navbar.is-info .navbar-start .navbar-link::after,
|
||||
|
|
@ -6066,11 +6309,11 @@ a.nav-item:not(.button).is-tab.is-active {
|
|||
}
|
||||
.navbar.is-info .navbar-item.has-dropdown:hover .navbar-link,
|
||||
.navbar.is-info .navbar-item.has-dropdown.is-active .navbar-link {
|
||||
background-color: #2366d1;
|
||||
background-color: #118fe4;
|
||||
color: #fff;
|
||||
}
|
||||
.navbar.is-info .navbar-dropdown a.navbar-item.is-active {
|
||||
background-color: #3273dc;
|
||||
background-color: #209cee;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
|
@ -8622,11 +8865,126 @@ label.panel-block:hover {
|
|||
}
|
||||
}
|
||||
|
||||
<<<<<<< HEAD
|
||||
.hero.is-info {
|
||||
=======
|
||||
@media screen and (max-width: 768px) {
|
||||
.hero.is-primary .nav-toggle span {
|
||||
background-color: #fff;
|
||||
}
|
||||
.hero.is-primary .nav-toggle:hover {
|
||||
background-color: rgba(10, 10, 10, 0.1);
|
||||
}
|
||||
.hero.is-primary .nav-toggle.is-active span {
|
||||
background-color: #fff;
|
||||
}
|
||||
.hero.is-primary .nav-menu .nav-item {
|
||||
border-top-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.hero.is-link {
|
||||
>>>>>>> Add link color
|
||||
background-color: #3273dc;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.hero.is-link a:not(.button),
|
||||
.hero.is-link strong {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.hero.is-link .title {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.hero.is-link .subtitle {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.hero.is-link .subtitle a:not(.button),
|
||||
.hero.is-link .subtitle strong {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.hero.is-link .nav {
|
||||
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.hero.is-link .nav-menu {
|
||||
background-color: #3273dc;
|
||||
}
|
||||
}
|
||||
|
||||
.hero.is-link a.nav-item,
|
||||
.hero.is-link .nav-item a:not(.button) {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.hero.is-link a.nav-item:hover, .hero.is-link a.nav-item.is-active,
|
||||
.hero.is-link .nav-item a:not(.button):hover,
|
||||
.hero.is-link .nav-item a:not(.button).is-active {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.hero.is-link .tabs a {
|
||||
color: #fff;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.hero.is-link .tabs a:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.hero.is-link .tabs li.is-active a {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.hero.is-link .tabs.is-boxed a, .hero.is-link .tabs.is-toggle a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.hero.is-link .tabs.is-boxed a:hover, .hero.is-link .tabs.is-toggle a:hover {
|
||||
background-color: rgba(10, 10, 10, 0.1);
|
||||
}
|
||||
|
||||
.hero.is-link .tabs.is-boxed li.is-active a, .hero.is-link .tabs.is-boxed li.is-active a:hover, .hero.is-link .tabs.is-toggle li.is-active a, .hero.is-link .tabs.is-toggle li.is-active a:hover {
|
||||
background-color: #fff;
|
||||
border-color: #fff;
|
||||
color: #3273dc;
|
||||
}
|
||||
|
||||
.hero.is-link.is-bold {
|
||||
background-image: linear-gradient(141deg, #1577c6 0%, #3273dc 71%, #4366e5 100%);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.hero.is-link.is-bold .nav-menu {
|
||||
background-image: linear-gradient(141deg, #1577c6 0%, #3273dc 71%, #4366e5 100%);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.hero.is-link .nav-toggle span {
|
||||
background-color: #fff;
|
||||
}
|
||||
.hero.is-link .nav-toggle:hover {
|
||||
background-color: rgba(10, 10, 10, 0.1);
|
||||
}
|
||||
.hero.is-link .nav-toggle.is-active span {
|
||||
background-color: #fff;
|
||||
}
|
||||
.hero.is-link .nav-menu .nav-item {
|
||||
border-top-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.hero.is-info {
|
||||
background-color: #209cee;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.hero.is-info a:not(.button),
|
||||
.hero.is-info strong {
|
||||
color: inherit;
|
||||
|
|
@ -8655,8 +9013,12 @@ label.panel-block:hover {
|
|||
|
||||
@media screen and (max-width: 768px) {
|
||||
.hero.is-info .nav-menu {
|
||||
<<<<<<< HEAD
|
||||
>>>>>>> Use link instead of primary
|
||||
background-color: #3273dc;
|
||||
=======
|
||||
background-color: #209cee;
|
||||
>>>>>>> Add link color
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -8696,16 +9058,21 @@ label.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 {
|
||||
background-color: #fff;
|
||||
border-color: #fff;
|
||||
color: #3273dc;
|
||||
color: #209cee;
|
||||
}
|
||||
|
||||
.hero.is-info.is-bold {
|
||||
background-image: linear-gradient(141deg, #1577c6 0%, #3273dc 71%, #4366e5 100%);
|
||||
background-image: linear-gradient(141deg, #04a6d7 0%, #209cee 71%, #3287f5 100%);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
<<<<<<< HEAD
|
||||
.hero.is-info.is-bold .navbar-menu {
|
||||
background-image: linear-gradient(141deg, #1577c6 0%, #3273dc 71%, #4366e5 100%);
|
||||
=======
|
||||
.hero.is-info.is-bold .nav-menu {
|
||||
background-image: linear-gradient(141deg, #04a6d7 0%, #209cee 71%, #3287f5 100%);
|
||||
>>>>>>> Add link color
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -9876,10 +10243,14 @@ html.route-index #carbon {
|
|||
background-color: #00d1b2;
|
||||
}
|
||||
|
||||
.bd-article-image.is-info {
|
||||
.bd-article-image.is-link {
|
||||
background-color: #3273dc;
|
||||
}
|
||||
|
||||
.bd-article-image.is-info {
|
||||
background-color: #209cee;
|
||||
}
|
||||
|
||||
.bd-article-image.is-success {
|
||||
background-color: #23d160;
|
||||
}
|
||||
|
|
@ -10039,11 +10410,16 @@ html.route-index #carbon {
|
|||
color: #fff;
|
||||
}
|
||||
|
||||
.bd-notification.is-info {
|
||||
.bd-notification.is-link {
|
||||
background-color: #3273dc;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.bd-notification.is-info {
|
||||
background-color: #209cee;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.bd-notification.is-success {
|
||||
background-color: #23d160;
|
||||
color: #fff;
|
||||
|
|
@ -10451,11 +10827,16 @@ html.route-index #carbon {
|
|||
color: #fff;
|
||||
}
|
||||
|
||||
.bd-callout.is-info {
|
||||
.bd-callout.is-link {
|
||||
background-color: #3273dc;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.bd-callout.is-info {
|
||||
background-color: #209cee;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.bd-callout.is-success {
|
||||
background-color: #23d160;
|
||||
color: #fff;
|
||||
|
|
|
|||
|
|
@ -89,7 +89,7 @@ extensions:
|
|||
{% include navbar.html id="Extensions" %}
|
||||
</div>
|
||||
|
||||
<section class="hero is-primary">
|
||||
<section class="hero is-info">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<div class="columns is-vcentered">
|
||||
|
|
|
|||
|
|
@ -514,7 +514,7 @@ route: index
|
|||
<div class="container">
|
||||
<p class="title has-text-centered">Get started</p>
|
||||
<div class="hero-buttons">
|
||||
<a class="button is-info is-large" href="{{ site.documentation }}">
|
||||
<a class="button is-link is-large" href="{{ site.documentation }}">
|
||||
<span class="icon">
|
||||
<i class="fa fa-book"></i>
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -13,9 +13,9 @@ $button-focus-box-shadow-color: rgba($link, 0.25) !default
|
|||
$button-active-color: $link-active !default
|
||||
$button-active-border-color: $link-active-border !default
|
||||
|
||||
$button-link-color: $text !default
|
||||
$button-link-hover-background-color: $background !default
|
||||
$button-link-hover-color: $text-strong !default
|
||||
$button-text-color: $text !default
|
||||
$button-text-hover-background-color: $background !default
|
||||
$button-text-hover-color: $text-strong !default
|
||||
|
||||
$button-disabled-background-color: $white !default
|
||||
$button-disabled-border-color: $grey-lighter !default
|
||||
|
|
@ -81,21 +81,21 @@ $button-static-border-color: $grey-lighter !default
|
|||
border-color: $button-active-border-color
|
||||
color: $button-active-color
|
||||
// Colors
|
||||
&.is-link
|
||||
&.is-text
|
||||
background-color: transparent
|
||||
border-color: transparent
|
||||
color: $button-link-color
|
||||
color: $button-text-color
|
||||
text-decoration: underline
|
||||
&:hover,
|
||||
&.is-hovered,
|
||||
&:focus,
|
||||
&.is-focused
|
||||
background-color: $button-link-hover-background-color
|
||||
color: $button-link-hover-color
|
||||
background-color: $button-text-hover-background-color
|
||||
color: $button-text-hover-color
|
||||
&:active,
|
||||
&.is-active
|
||||
background-color: darken($button-link-hover-background-color, 5%)
|
||||
color: $button-link-hover-color
|
||||
background-color: darken($button-text-hover-background-color, 5%)
|
||||
color: $button-text-hover-color
|
||||
&[disabled]
|
||||
background-color: transparent
|
||||
border-color: transparent
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
$primary: $turquoise !default
|
||||
|
||||
$info: $blue !default
|
||||
$info: $cyan !default
|
||||
$success: $green !default
|
||||
$warning: $yellow !default
|
||||
$danger: $red !default
|
||||
|
|
@ -14,12 +14,13 @@ $orange-invert: findColorInvert($orange) !default
|
|||
$yellow-invert: findColorInvert($yellow) !default
|
||||
$green-invert: findColorInvert($green) !default
|
||||
$turquoise-invert: findColorInvert($turquoise) !default
|
||||
$cyan-invert: findColorInvert($cyan) !default
|
||||
$blue-invert: findColorInvert($blue) !default
|
||||
$purple-invert: findColorInvert($purple) !default
|
||||
$red-invert: findColorInvert($red) !default
|
||||
|
||||
$primary-invert: $turquoise-invert !default
|
||||
$info-invert: $blue-invert !default
|
||||
$info-invert: $cyan-invert !default
|
||||
$success-invert: $green-invert !default
|
||||
$warning-invert: $yellow-invert !default
|
||||
$danger-invert: $red-invert !default
|
||||
|
|
@ -75,7 +76,7 @@ $size-large: $size-4 !default
|
|||
|
||||
// Lists and maps
|
||||
|
||||
$colors: ("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert), "info": ($info, $info-invert), "success": ($success, $success-invert), "warning": ($warning, $warning-invert), "danger": ($danger, $danger-invert)) !default
|
||||
$colors: ("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert), "link": ($link, $link-invert), "info": ($info, $info-invert), "success": ($success, $success-invert), "warning": ($warning, $warning-invert), "danger": ($danger, $danger-invert)) !default
|
||||
$shades: ("black-bis": $black-bis, "black-ter": $black-ter, "grey-darker": $grey-darker, "grey-dark": $grey-dark, "grey": $grey, "grey-light": $grey-light, "grey-lighter": $grey-lighter, "white-ter": $white-ter, "white-bis": $white-bis) !default
|
||||
|
||||
$sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7 !default
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@ $orange: hsl(14, 100%, 53%) !default
|
|||
$yellow: hsl(48, 100%, 67%) !default
|
||||
$green: hsl(141, 71%, 48%) !default
|
||||
$turquoise: hsl(171, 100%, 41%) !default
|
||||
$cyan: hsl(204, 86%, 53%) !default
|
||||
$blue: hsl(217, 71%, 53%) !default
|
||||
$purple: hsl(271, 100%, 71%) !default
|
||||
$red: hsl(348, 100%, 61%) !default
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue