From: Jeremy Thomas Date: Sat, 7 Oct 2017 19:52:39 +0000 (+0100) Subject: Add link color X-Git-Tag: 0.6.0~22 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=31304595601c007a0a1838ddffb412fcc2404de9;p=thirdparty%2Fbulma.git Add link color --- diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index 2c725d713..cadf23249 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -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,28 +1938,38 @@ 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-info.is-inverted { +.button.is-link.is-inverted { background-color: #fff; color: #209cee; } -.button.is-info.is-inverted:hover { +.button.is-link.is-inverted:hover { background-color: #f2f2f2; } -.button.is-info.is-inverted[disabled] { +.button.is-link.is-inverted[disabled] { background-color: #fff; border-color: transparent; <<<<<<< HEAD @@ -1972,16 +1989,17 @@ a.box:active { >>>>>>> Add show code } -.button.is-info.is-loading:after { +.button.is-link.is-loading:after { border-color: transparent transparent #fff #fff !important; } -.button.is-info.is-outlined { +.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; @@ -1990,9 +2008,19 @@ a.box:active { .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-info.is-outlined[disabled] { +.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; @@ -2005,6 +2033,100 @@ a.box:active { >>>>>>> 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; + color: #fff; +} + +.button.is-info[disabled] { + background-color: #209cee; + border-color: transparent; + box-shadow: none; +} + +.button.is-info.is-inverted { + background-color: #fff; + color: #209cee; +} + +.button.is-info.is-inverted:hover { + background-color: #f2f2f2; +} + +.button.is-info.is-inverted[disabled] { + background-color: #fff; + border-color: transparent; + box-shadow: none; + color: #209cee; +} + +.button.is-info.is-loading:after { + border-color: transparent transparent #fff #fff !important; +} + +.button.is-info.is-outlined { + background-color: transparent; + border-color: #209cee; + color: #209cee; +} + +.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-info.is-outlined[disabled] { + background-color: transparent; + border-color: #209cee; + box-shadow: none; + color: #209cee; +} + .button.is-info.is-inverted.is-outlined { background-color: transparent; border-color: #fff; @@ -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 } } diff --git a/docs/extensions.html b/docs/extensions.html index d5a3ff4c2..d5bead57f 100644 --- a/docs/extensions.html +++ b/docs/extensions.html @@ -89,7 +89,7 @@ extensions: {% include navbar.html id="Extensions" %} -
+