]> git.ipfire.org Git - thirdparty/bulma.git/commitdiff
Add link color
authorJeremy Thomas <bbxdesign@gmail.com>
Sat, 7 Oct 2017 19:52:39 +0000 (20:52 +0100)
committerJeremy Thomas <bbxdesign@gmail.com>
Tue, 10 Oct 2017 09:50:00 +0000 (10:50 +0100)
docs/css/bulma-docs.css
docs/extensions.html

index 2c725d713bb6d8dbd8d07c58259f60e44b047ed1..cadf2324924e9f6117db03540dde9e525b6ce0bb 100644 (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,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
   }
 }
 
index d5a3ff4c2e23c7ef018d64c9fb18cb92621fc7b6..d5bead57fdc81777c97cb3335bf8e79135b407b1 100644 (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">