library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-11-28 12:24:23 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add link color

Browse Source
This commit is contained in:
Jeremy Thomas 2017-10-07 20:52:39 +01:00
parent 896113ca9c
commit 3130459560
2 changed files with 296 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1816,6 +1816,7 @@ a.box:active {
}
.button.is-link:focus, .button.is-link.is-focused {
<<<<<<< HEAD
border-color: transparent;
color: #fff;
}
@ -1910,16 +1911,22 @@ a.box:active {
}
.button.is-info:focus, .button.is-info.is-focused {
=======
>>>>>>> Add link color
border-color: transparent;
color: #fff;
}
<<<<<<< HEAD
.button.is-info:focus:not(:active), .button.is-info.is-focused:not(:active) {
<<<<<<< HEAD
<<<<<<< HEAD
<<<<<<< HEAD
box-shadow: 0 0 0 0.125em rgba(32, 156, 238, 0.25);
=======
=======
.button.is-link:focus:not(:active), .button.is-link.is-focused:not(:active) {
>>>>>>> Add link color
box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25);
>>>>>>> Add show code
=======
@ -1931,6 +1938,140 @@ a.box:active {
>>>>>>> Use link instead of primary
}
<<<<<<< HEAD
.button.is-info:active, .button.is-info.is-active {
background-color: #118fe4;
=======
.button.is-link:active, .button.is-link.is-active {
background-color: #2366d1;
>>>>>>> Add link color
border-color: transparent;
color: #fff;
}
<<<<<<< HEAD
.button.is-info[disabled] {
background-color: #209cee;
=======
.button.is-link[disabled] {
background-color: #3273dc;
>>>>>>> Add link color
border-color: transparent;
box-shadow: none;
}
.button.is-link.is-inverted {
background-color: #fff;
color: #209cee;
}
.button.is-link.is-inverted:hover {
background-color: #f2f2f2;
}
.button.is-link.is-inverted[disabled] {
background-color: #fff;
border-color: transparent;
<<<<<<< HEAD
<<<<<<< HEAD
box-shadow: none;
<<<<<<< HEAD
color: #209cee;
=======
=======
-webkit-box-shadow: none;
box-shadow: none;
>>>>>>> Improve snippet
=======
box-shadow: none;
>>>>>>> Use link instead of primary
color: #3273dc;
>>>>>>> Add show code
}
.button.is-link.is-loading:after {
border-color: transparent transparent #fff #fff !important;
}
.button.is-link.is-outlined {
background-color: transparent;
border-color: #209cee;
color: #209cee;
}
<<<<<<< HEAD
.button.is-info.is-outlined:hover, .button.is-info.is-outlined:focus {
background-color: #209cee;
border-color: #209cee;
color: #fff;
}
.button.is-info.is-outlined.is-loading:after {
border-color: transparent transparent #209cee #209cee !important;
=======
.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;
>>>>>>> Add link color
}
.button.is-link.is-outlined[disabled] {
background-color: transparent;
<<<<<<< HEAD
border-color: #209cee;
box-shadow: none;
color: #209cee;
=======
border-color: #3273dc;
box-shadow: none;
color: #3273dc;
>>>>>>> Add show code
}
.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(32, 156, 238, 0.25);
}
.button.is-info:active, .button.is-info.is-active {
background-color: #118fe4;
border-color: transparent;
@ -1955,21 +2096,8 @@ a.box:active {
.button.is-info.is-inverted[disabled] {
background-color: #fff;
border-color: transparent;
<<<<<<< HEAD
<<<<<<< HEAD
box-shadow: none;
<<<<<<< HEAD
color: #209cee;
=======
=======
-webkit-box-shadow: none;
box-shadow: none;
>>>>>>> Improve snippet
=======
box-shadow: none;
>>>>>>> Use link instead of primary
color: #3273dc;
>>>>>>> Add show code
}
.button.is-info.is-loading:after {
@ -1994,15 +2122,9 @@ a.box:active {
.button.is-info.is-outlined[disabled] {
background-color: transparent;
<<<<<<< HEAD
border-color: #209cee;
box-shadow: none;
color: #209cee;
=======
border-color: #3273dc;
box-shadow: none;
color: #3273dc;
>>>>>>> Add show code
}
.button.is-info.is-inverted.is-outlined {
@ -2811,6 +2933,19 @@ a.box:active {
>>>>>>> Use link instead of primary
}
.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: #209cee;
@ -2823,6 +2958,7 @@ a.box:active {
.textarea.is-info.is-active {
<<<<<<< HEAD
<<<<<<< HEAD
<<<<<<< HEAD
<<<<<<< HEAD
box-shadow: 0 0 0 0.125em rgba(32, 156, 238, 0.25);
=======
@ -2835,6 +2971,9 @@ a.box:active {
=======
box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25);
>>>>>>> Use link instead of primary
=======
box-shadow: 0 0 0 0.125em rgba(32, 156, 238, 0.25);
>>>>>>> Add link color
}
.input.is-success,
@ -3158,6 +3297,7 @@ a.box:active {
}
.select.is-link select:focus, .select.is-link select.is-focused, .select.is-link select:active, .select.is-link select.is-active {
<<<<<<< HEAD
box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25);
}
@ -3178,10 +3318,20 @@ a.box:active {
box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25);
>>>>>>> Improve snippet
=======
=======
>>>>>>> Add link color
box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25);
>>>>>>> Use link instead of primary
}
.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;
}
@ -3406,6 +3556,7 @@ a.box:active {
}
.file.is-link:focus .file-cta, .file.is-link.is-focused .file-cta {
<<<<<<< HEAD
border-color: transparent;
box-shadow: 0 0 0.5em rgba(50, 115, 220, 0.25);
color: #fff;
@ -3430,6 +3581,8 @@ a.box:active {
}
.file.is-info:focus .file-cta, .file.is-info.is-focused .file-cta {
=======
>>>>>>> Add link color
border-color: transparent;
<<<<<<< HEAD
<<<<<<< HEAD
@ -3448,6 +3601,35 @@ a.box:active {
color: #fff;
}
<<<<<<< HEAD
.file.is-info:active .file-cta, .file.is-info.is-active .file-cta {
background-color: #118fe4;
=======
.file.is-link:active .file-cta, .file.is-link.is-active .file-cta {
background-color: #2366d1;
>>>>>>> Add link color
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(32, 156, 238, 0.25);
color: #fff;
}
.file.is-info:active .file-cta, .file.is-info.is-active .file-cta {
background-color: #118fe4;
border-color: transparent;
@ -9224,6 +9406,7 @@ label.panel-block:hover {
<<<<<<< HEAD
<<<<<<< HEAD
<<<<<<< HEAD
<<<<<<< HEAD
.hero.is-info {
=======
@media screen and (max-width: 768px) {
@ -9246,11 +9429,37 @@ label.panel-block:hover {
.hero.is-link {
>>>>>>> Add link color
=======
=======
>>>>>>> Add link color
.hero.is-link {
=======
.hero.is-info {
>>>>>>> Add show code
<<<<<<< HEAD
>>>>>>> Add show code
=======
=======
.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
>>>>>>> Add link color
>>>>>>> Add link color
background-color: #3273dc;
color: #fff;
}
@ -9273,6 +9482,7 @@ label.panel-block:hover {
color: #fff;
}
<<<<<<< HEAD
@media screen and (max-width: 1023px) {
<<<<<<< HEAD
.hero.is-link .navbar-menu {
@ -9303,6 +9513,26 @@ label.panel-block:hover {
.hero.is-info .navbar-link.is-active {
>>>>>>> Add show code
background-color: #2366d1;
=======
.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 {
>>>>>>> Add link color
color: #fff;
}
@ -9338,16 +9568,38 @@ label.panel-block:hover {
}
@media screen and (max-width: 768px) {
<<<<<<< HEAD
<<<<<<< HEAD
.hero.is-link.is-bold .navbar-menu {
=======
.hero.is-info.is-bold .navbar-menu {
>>>>>>> Add show code
=======
.hero.is-link.is-bold .nav-menu {
>>>>>>> Add link color
background-image: linear-gradient(141deg, #1577c6 0%, #3273dc 71%, #4366e5 100%);
}
}
<<<<<<< HEAD
<<<<<<< HEAD
=======
@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);
}
}
>>>>>>> Add link color
.hero.is-info {
background-color: #209cee;
color: #fff;
@ -9424,10 +9676,20 @@ label.panel-block:hover {
@media screen and (max-width: 768px) {
.hero.is-info .nav-menu {
<<<<<<< HEAD
>>>>>>> Use link instead of primary
background-color: #3273dc;
<<<<<<< HEAD
>>>>>>> Use link instead of primary
<<<<<<< HEAD
>>>>>>> Use link instead of primary
=======
=======
=======
background-color: #209cee;
>>>>>>> Add link color
>>>>>>> Add link color
>>>>>>> Add link color
}
}
@ -9480,6 +9742,7 @@ label.panel-block:hover {
@media screen and (max-width: 768px) {
<<<<<<< HEAD
<<<<<<< HEAD
<<<<<<< HEAD
.hero.is-info.is-bold .navbar-menu {
background-image: linear-gradient(141deg, #1577c6 0%, #3273dc 71%, #4366e5 100%);
@ -9488,9 +9751,22 @@ label.panel-block:hover {
background-image: linear-gradient(141deg, #04a6d7 0%, #209cee 71%, #3287f5 100%);
>>>>>>> Add link color
=======
=======
>>>>>>> Add link color
.hero.is-info.is-bold .navbar-menu {
<<<<<<< HEAD
background-image: linear-gradient(141deg, #04a6d7 0%, #209cee 71%, #3287f5 100%);
=======
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%);
<<<<<<< HEAD
>>>>>>> Add show code
=======
>>>>>>> Add link color
>>>>>>> Add link color
>>>>>>> Add link color
}
}

2
docs/extensions.html
View File

@ -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">