Add link color

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

View File

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

View File

@ -89,7 +89,7 @@ extensions:
{% include navbar.html id="Extensions" %} {% include navbar.html id="Extensions" %}
</div> </div>
<section class="hero is-primary"> <section class="hero is-info">
<div class="hero-body"> <div class="hero-body">
<div class="container"> <div class="container">
<div class="columns is-vcentered"> <div class="columns is-vcentered">