]> git.ipfire.org Git - thirdparty/bulma.git/commitdiff
projects / thirdparty / bulma.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: a2afb61)
Fix control variables
authorJeremy Thomas <bbxdesign@gmail.com>
Sat, 29 Oct 2016 20:51:13 +0000 (21:51 +0100)
committerJeremy Thomas <bbxdesign@gmail.com>
Sat, 29 Oct 2016 20:51:13 +0000 (21:51 +0100)
docs/_layouts/default.html patch | blob | blame | history
docs/css/bulma-docs.css patch | blob | blame | history
docs/documentation/elements/button.html patch | blob | blame | history
docs/documentation/elements/form.html patch | blob | blame | history
sass/elements/button.sass patch | blob | blame | history
sass/elements/form.sass patch | blob | blame | history
sass/utilities/controls.sass patch | blob | blame | history
sass/utilities/mixins.sass patch | blob | blame | history
sass/utilities/variables.sass patch | blob | blame | history

diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
index dc9a5de9d4ffb262a5063b78d171e05b1b700b2b..410384d3e98ad8a278a068775f21c664406c5f22 100644 (file)
--- a/docs/_layouts/default.html
+++ b/docs/_layouts/default.html
@@ -3,6 +3,5 @@
   {% include head.html %}
   <body class="layout-{{ page.layout }}{% if page.doc-tab %} page-{{ page.doc-tab}}{% endif %}">
     {{ content }}
-    {% include footer.html %}
   </body>
 </html>
diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index 2466c0c85daf8f12f9d21c0242153dcf93163df0..ce6e2a03306ac2b228aca15d695f0ab53c3dfc4d 100644 (file)
--- a/docs/css/bulma-docs.css
+++ b/docs/css/bulma-docs.css
@@ -575,13 +575,11 @@ a.box:active {
   -moz-appearance: none;
   -webkit-appearance: none;
   align-items: center;
-  background-color: white;
-  border: 1px solid #dbdbdb;
+  border: none;
   border-radius: 3px;
   box-shadow: none;
-  color: #363636;
   display: inline-flex;
-  font-size: 16px;
+  font-size: 1em;
   height: 2.5em;
   justify-content: flex-start;
   line-height: 1.5;
@@ -602,38 +600,14 @@ a.box:active {
   white-space: nowrap;
 }
 
-.button:hover {
-  border-color: #b5b5b5;
-}
-
-.button:active, .button:focus, .button.is-active {
-  border-color: #00d1b2;
+.button:focus, .button.is-focused, .button:active, .button.is-active {
   outline: none;
 }
 
 .button[disabled], .button.is-disabled {
-  background-color: whitesmoke;
-  border-color: #dbdbdb;
-  cursor: not-allowed;
   pointer-events: none;
 }
 
-.button[disabled]::-moz-placeholder, .button.is-disabled::-moz-placeholder {
-  color: rgba(54, 54, 54, 0.3);
-}
-
-.button[disabled]::-webkit-input-placeholder, .button.is-disabled::-webkit-input-placeholder {
-  color: rgba(54, 54, 54, 0.3);
-}
-
-.button[disabled]:-moz-placeholder, .button.is-disabled:-moz-placeholder {
-  color: rgba(54, 54, 54, 0.3);
-}
-
-.button[disabled]:-ms-input-placeholder, .button.is-disabled:-ms-input-placeholder {
-  color: rgba(54, 54, 54, 0.3);
-}
-
 .button strong {
   color: inherit;
 }
@@ -650,12 +624,33 @@ a.box:active {
   margin-right: -2px;
 }
 
-.button:hover, .button:focus, .button.is-active {
+.button:hover, .button.is-hovered {
+  border-color: #b5b5b5;
+  color: #363636;
+}
+
+.button:focus, .button.is-focused {
+  border-color: #00d1b2;
+  box-shadow: 0 0 0.5em rgba(0, 209, 178, 0.5);
   color: #363636;
 }
 
-.button:active {
+.button:active, .button.is-active {
+  border-color: #4a4a4a;
   box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2);
+  color: #363636;
+}
+
+.button.is-link {
+  background-color: transparent;
+  border-width: 0;
+  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-link:active, .button.is-link.is-active {
+  background-color: whitesmoke;
+  color: #363636;
 }
 
 .button.is-white {
@@ -664,9 +659,22 @@ a.box:active {
   color: #0a0a0a;
 }
 
-.button.is-white:hover, .button.is-white:focus, .button.is-white.is-active {
+.button.is-white:hover, .button.is-white.is-hovered {
+  background-color: #f9f9f9;
+  border-color: transparent;
+  color: #0a0a0a;
+}
+
+.button.is-white:focus, .button.is-white.is-focused {
+  border-color: transparent;
+  box-shadow: 0 0 0.5em rgba(255, 255, 255, 0.5);
+  color: #0a0a0a;
+}
+
+.button.is-white:active, .button.is-white.is-active {
   background-color: #f2f2f2;
   border-color: transparent;
+  box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2);
   color: #0a0a0a;
 }
 
@@ -702,9 +710,22 @@ a.box:active {
   color: white;
 }
 
-.button.is-black:hover, .button.is-black:focus, .button.is-black.is-active {
+.button.is-black:hover, .button.is-black.is-hovered {
+  background-color: #040404;
+  border-color: transparent;
+  color: white;
+}
+
+.button.is-black:focus, .button.is-black.is-focused {
+  border-color: transparent;
+  box-shadow: 0 0 0.5em rgba(10, 10, 10, 0.5);
+  color: white;
+}
+
+.button.is-black:active, .button.is-black.is-active {
   background-color: black;
   border-color: transparent;
+  box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2);
   color: white;
 }
 
@@ -740,9 +761,22 @@ a.box:active {
   color: #363636;
 }
 
-.button.is-light:hover, .button.is-light:focus, .button.is-light.is-active {
+.button.is-light:hover, .button.is-light.is-hovered {
+  background-color: #eeeeee;
+  border-color: transparent;
+  color: #363636;
+}
+
+.button.is-light:focus, .button.is-light.is-focused {
+  border-color: transparent;
+  box-shadow: 0 0 0.5em rgba(245, 245, 245, 0.5);
+  color: #363636;
+}
+
+.button.is-light:active, .button.is-light.is-active {
   background-color: #e8e8e8;
   border-color: transparent;
+  box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2);
   color: #363636;
 }
 
@@ -778,9 +812,22 @@ a.box:active {
   color: whitesmoke;
 }
 
-.button.is-dark:hover, .button.is-dark:focus, .button.is-dark.is-active {
+.button.is-dark:hover, .button.is-dark.is-hovered {
+  background-color: #2f2f2f;
+  border-color: transparent;
+  color: whitesmoke;
+}
+
+.button.is-dark:focus, .button.is-dark.is-focused {
+  border-color: transparent;
+  box-shadow: 0 0 0.5em rgba(54, 54, 54, 0.5);
+  color: whitesmoke;
+}
+
+.button.is-dark:active, .button.is-dark.is-active {
   background-color: #292929;
   border-color: transparent;
+  box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2);
   color: whitesmoke;
 }
 
@@ -816,9 +863,22 @@ a.box:active {
   color: white;
 }
 
-.button.is-primary:hover, .button.is-primary:focus, .button.is-primary.is-active {
+.button.is-primary:hover, .button.is-primary.is-hovered {
+  background-color: #00c4a7;
+  border-color: transparent;
+  color: white;
+}
+
+.button.is-primary:focus, .button.is-primary.is-focused {
+  border-color: transparent;
+  box-shadow: 0 0 0.5em rgba(0, 209, 178, 0.5);
+  color: white;
+}
+
+.button.is-primary:active, .button.is-primary.is-active {
   background-color: #00b89c;
   border-color: transparent;
+  box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2);
   color: white;
 }
 
@@ -854,9 +914,22 @@ a.box:active {
   color: white;
 }
 
-.button.is-info:hover, .button.is-info:focus, .button.is-info.is-active {
+.button.is-info:hover, .button.is-info.is-hovered {
+  background-color: #276cda;
+  border-color: transparent;
+  color: white;
+}
+
+.button.is-info:focus, .button.is-info.is-focused {
+  border-color: transparent;
+  box-shadow: 0 0 0.5em rgba(50, 115, 220, 0.5);
+  color: white;
+}
+
+.button.is-info:active, .button.is-info.is-active {
   background-color: #2366d1;
   border-color: transparent;
+  box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2);
   color: white;
 }
 
@@ -892,9 +965,22 @@ a.box:active {
   color: white;
 }
 
-.button.is-success:hover, .button.is-success:focus, .button.is-success.is-active {
+.button.is-success:hover, .button.is-success.is-hovered {
+  background-color: #22c65b;
+  border-color: transparent;
+  color: white;
+}
+
+.button.is-success:focus, .button.is-success.is-focused {
+  border-color: transparent;
+  box-shadow: 0 0 0.5em rgba(35, 209, 96, 0.5);
+  color: white;
+}
+
+.button.is-success:active, .button.is-success.is-active {
   background-color: #20bc56;
   border-color: transparent;
+  box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2);
   color: white;
 }
 
@@ -930,9 +1016,22 @@ a.box:active {
   color: rgba(0, 0, 0, 0.7);
 }
 
-.button.is-warning:hover, .button.is-warning:focus, .button.is-warning.is-active {
+.button.is-warning:hover, .button.is-warning.is-hovered {
+  background-color: #ffdb4a;
+  border-color: transparent;
+  color: rgba(0, 0, 0, 0.7);
+}
+
+.button.is-warning:focus, .button.is-warning.is-focused {
+  border-color: transparent;
+  box-shadow: 0 0 0.5em rgba(255, 221, 87, 0.5);
+  color: rgba(0, 0, 0, 0.7);
+}
+
+.button.is-warning:active, .button.is-warning.is-active {
   background-color: #ffd83d;
   border-color: transparent;
+  box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2);
   color: rgba(0, 0, 0, 0.7);
 }
 
@@ -968,9 +1067,22 @@ a.box:active {
   color: white;
 }
 
-.button.is-danger:hover, .button.is-danger:focus, .button.is-danger.is-active {
+.button.is-danger:hover, .button.is-danger.is-hovered {
+  background-color: #ff2b56;
+  border-color: transparent;
+  color: white;
+}
+
+.button.is-danger:focus, .button.is-danger.is-focused {
+  border-color: transparent;
+  box-shadow: 0 0 0.5em rgba(255, 56, 96, 0.5);
+  color: white;
+}
+
+.button.is-danger:active, .button.is-danger.is-active {
   background-color: #ff1f4b;
   border-color: transparent;
+  box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2);
   color: white;
 }
 
@@ -1000,18 +1112,6 @@ a.box:active {
   color: white;
 }
 
-.button.is-link {
-  background-color: transparent;
-  border-width: 0;
-  color: #4a4a4a;
-  text-decoration: underline;
-}
-
-.button.is-link:hover, .button.is-link:focus {
-  background-color: whitesmoke;
-  color: #363636;
-}
-
 .button.is-small {
   border-radius: 2px;
   font-size: 0.875rem;
@@ -1047,9 +1147,9 @@ a.box:active {
   border-top-color: transparent;
   content: "";
   display: block;
-  height: 16px;
+  height: 1rem;
   position: relative;
-  width: 16px;
+  width: 1rem;
   left: 50%;
   margin-left: -8px;
   margin-top: -8px;
@@ -1188,13 +1288,11 @@ a.box:active {
   -moz-appearance: none;
   -webkit-appearance: none;
   align-items: center;
-  background-color: white;
-  border: 1px solid #dbdbdb;
+  border: none;
   border-radius: 3px;
   box-shadow: none;
-  color: #363636;
   display: inline-flex;
-  font-size: 16px;
+  font-size: 1em;
   height: 2.5em;
   justify-content: flex-start;
   line-height: 1.5;
@@ -1202,31 +1300,49 @@ a.box:active {
   padding-right: 0.75em;
   position: relative;
   vertical-align: top;
+  background-color: white;
+  border: 1px solid #dbdbdb;
+  color: #363636;
   box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1);
   max-width: 100%;
   width: 100%;
 }
 
-.input:hover,
-.textarea:hover {
+.input:focus, .input.is-focused, .input:active, .input.is-active,
+.textarea:focus,
+.textarea.is-focused,
+.textarea:active,
+.textarea.is-active {
+  outline: none;
+}
+
+.input[disabled], .input.is-disabled,
+.textarea[disabled],
+.textarea.is-disabled {
+  pointer-events: none;
+}
+
+.input:hover, .input.is-hovered,
+.textarea:hover,
+.textarea.is-hovered {
   border-color: #b5b5b5;
 }
 
-.input:active, .input:focus, .input.is-active,
-.textarea:active,
+.input:focus, .input.is-focused, .input:active, .input.is-active,
 .textarea:focus,
+.textarea.is-focused,
+.textarea:active,
 .textarea.is-active {
   border-color: #00d1b2;
-  outline: none;
 }
 
 .input[disabled], .input.is-disabled,
 .textarea[disabled],
 .textarea.is-disabled {
   background-color: whitesmoke;
-  border-color: #dbdbdb;
-  cursor: not-allowed;
-  pointer-events: none;
+  border-color: whitesmoke;
+  box-shadow: none;
+  color: #7a7a7a;
 }
 
 .input[disabled]::-moz-placeholder, .input.is-disabled::-moz-placeholder,
@@ -1253,6 +1369,11 @@ a.box:active {
   color: rgba(54, 54, 54, 0.3);
 }
 
+.input[type="search"],
+.textarea[type="search"] {
+  border-radius: 290486px;
+}
+
 .input.is-white,
 .textarea.is-white {
   border-color: white;
@@ -1298,11 +1419,6 @@ a.box:active {
   border-color: #ff3860;
 }
 
-.input[type="search"],
-.textarea[type="search"] {
-  border-radius: 290486px;
-}
-
 .input.is-small,
 .textarea.is-small {
   border-radius: 2px;
@@ -1333,7 +1449,7 @@ a.box:active {
 
 .textarea {
   display: block;
-  line-height: 1.2;
+  line-height: 1.25;
   max-height: 600px;
   max-width: 100%;
   min-height: 120px;
@@ -1344,9 +1460,11 @@ a.box:active {
 
 .checkbox,
 .radio {
+  align-items: center;
   cursor: pointer;
-  display: inline-block;
-  line-height: 1em;
+  display: inline-flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
   position: relative;
   vertical-align: top;
 }
@@ -1354,6 +1472,7 @@ a.box:active {
 .checkbox input,
 .radio input {
   cursor: pointer;
+  margin-right: 0.5em;
 }
 
 .checkbox:hover,
@@ -1363,7 +1482,7 @@ a.box:active {
 
 .checkbox.is-disabled,
 .radio.is-disabled {
-  color: #dbdbdb;
+  color: #7a7a7a;
   pointer-events: none;
 }
 
@@ -1383,17 +1502,32 @@ a.box:active {
   vertical-align: top;
 }
 
+.select:after {
+  border: 1px solid #00d1b2;
+  border-right: 0;
+  border-top: 0;
+  content: " ";
+  display: block;
+  height: 0.5em;
+  pointer-events: none;
+  position: absolute;
+  transform: rotate(-45deg);
+  width: 0.5em;
+  margin-top: -0.375em;
+  right: 1.125em;
+  top: 50%;
+  z-index: 4;
+}
+
 .select select {
   -moz-appearance: none;
   -webkit-appearance: none;
   align-items: center;
-  background-color: white;
-  border: 1px solid #dbdbdb;
+  border: none;
   border-radius: 3px;
   box-shadow: none;
-  color: #363636;
   display: inline-flex;
-  font-size: 16px;
+  font-size: 1em;
   height: 2.5em;
   justify-content: flex-start;
   line-height: 1.5;
@@ -1401,26 +1535,37 @@ a.box:active {
   padding-right: 0.75em;
   position: relative;
   vertical-align: top;
+  background-color: white;
+  border: 1px solid #dbdbdb;
+  color: #363636;
   cursor: pointer;
   display: block;
+  font-size: 1em;
   outline: none;
   padding-right: 2.5em;
 }
 
-.select select:hover {
+.select select:focus, .select select.is-focused, .select select:active, .select select.is-active {
+  outline: none;
+}
+
+.select select[disabled], .select select.is-disabled {
+  pointer-events: none;
+}
+
+.select select:hover, .select select.is-hovered {
   border-color: #b5b5b5;
 }
 
-.select select:active, .select select:focus, .select select.is-active {
+.select select:focus, .select select.is-focused, .select select:active, .select select.is-active {
   border-color: #00d1b2;
-  outline: none;
 }
 
 .select select[disabled], .select select.is-disabled {
   background-color: whitesmoke;
-  border-color: #dbdbdb;
-  cursor: not-allowed;
-  pointer-events: none;
+  border-color: whitesmoke;
+  box-shadow: none;
+  color: #7a7a7a;
 }
 
 .select select[disabled]::-moz-placeholder, .select select.is-disabled::-moz-placeholder {
@@ -1439,48 +1584,29 @@ a.box:active {
   color: rgba(54, 54, 54, 0.3);
 }
 
-.select select.is-white {
-  border-color: white;
-}
-
-.select select.is-black {
-  border-color: #0a0a0a;
+.select select:hover {
+  border-color: #b5b5b5;
 }
 
-.select select.is-light {
-  border-color: whitesmoke;
+.select select::ms-expand {
+  display: none;
 }
 
-.select select.is-dark {
+.select:hover:after {
   border-color: #363636;
 }
 
-.select select.is-primary {
-  border-color: #00d1b2;
-}
-
-.select select.is-info {
-  border-color: #3273dc;
-}
-
-.select select.is-success {
-  border-color: #23d160;
-}
-
-.select select.is-warning {
-  border-color: #ffdd57;
-}
-
-.select select.is-danger {
-  border-color: #ff3860;
+.select.is-small {
+  border-radius: 2px;
+  font-size: 0.875rem;
 }
 
-.select select:hover {
-  border-color: #b5b5b5;
+.select.is-medium {
+  font-size: 1.25rem;
 }
 
-.select select::ms-expand {
-  display: none;
+.select.is-large {
+  font-size: 1.5rem;
 }
 
 .select.is-fullwidth {
@@ -1491,26 +1617,6 @@ a.box:active {
   width: 100%;
 }
 
-.select:after {
-  border: 1px solid #00d1b2;
-  border-right: 0;
-  border-top: 0;
-  content: " ";
-  display: block;
-  height: 7px;
-  pointer-events: none;
-  position: absolute;
-  transform: rotate(-45deg);
-  width: 7px;
-  margin-top: -4px;
-  right: 16px;
-  top: 50%;
-}
-
-.select:hover:after {
-  border-color: #363636;
-}
-
 .label {
   color: #363636;
   display: block;
@@ -1523,7 +1629,7 @@ a.box:active {
 
 .help {
   display: block;
-  font-size: 0.875rem;
+  font-size: 0.875em;
   margin-top: 5px;
 }
 
@@ -1608,11 +1714,11 @@ a.box:active {
   z-index: 2;
 }
 
-.control.has-addons .button:active, .control.has-addons .button:focus,
-.control.has-addons .input:active,
+.control.has-addons .button:focus, .control.has-addons .button:active,
 .control.has-addons .input:focus,
-.control.has-addons .select:active,
-.control.has-addons .select:focus {
+.control.has-addons .input:active,
+.control.has-addons .select:focus,
+.control.has-addons .select:active {
   z-index: 3;
 }
 
@@ -1647,6 +1753,14 @@ a.box:active {
   flex-shrink: 0;
 }
 
+.control.has-addons .select select:hover {
+  z-index: 2;
+}
+
+.control.has-addons .select select:focus, .control.has-addons .select select:active {
+  z-index: 3;
+}
+
 .control.has-addons.has-addons-centered {
   justify-content: center;
 }
@@ -1803,12 +1917,12 @@ a.box:active {
   border-top-color: transparent;
   content: "";
   display: block;
-  height: 16px;
+  height: 1rem;
   position: relative;
-  width: 16px;
+  width: 1rem;
   position: absolute !important;
-  right: 8px;
-  top: 8px;
+  right: 0.75em;
+  top: 0.75em;
 }
 
 .image {
@@ -2511,9 +2625,9 @@ a.box:active {
   border-top-color: transparent;
   content: "";
   display: block;
-  height: 16px;
+  height: 1rem;
   position: relative;
-  width: 16px;
+  width: 1rem;
 }
 
 .number {
@@ -3783,7 +3897,7 @@ a.nav-item.is-tab.is-active {
 }
 
 .panel-tabs a.is-active {
-  border-bottom-color: #363636;
+  border-bottom-color: #4a4a4a;
   color: #363636;
 }
 
diff --git a/docs/documentation/elements/button.html b/docs/documentation/elements/button.html
index 5d4d45cfac79e094a9b8fc149ab1ae2f7af77d5a..6fce3dcb1ab4561ac839c093b76dc73a831ee2dc 100644 (file)
--- a/docs/documentation/elements/button.html
+++ b/docs/documentation/elements/button.html
@@ -115,25 +115,70 @@ doc-subtab: button
     <hr>
 
     <h3 class="title">States</h3>
-    <h4 class="subtitle">Loading</h4>
+    <h4 class="subtitle">Normal</h4>
 
     <div class="columns">
       <div class="column">
-        <a class="button is-loading">Loading</a>
-        <a class="button is-primary is-loading">Loading</a>
-        <a class="button is-info is-loading">Loading</a>
-        <a class="button is-success is-loading">Loading</a>
-        <a class="button is-warning is-loading">Loading</a>
-        <a class="button is-danger is-loading">Loading</a>
+        <a class="button">Normal</a>
+        <a class="button is-primary">Normal</a>
+        <a class="button is-info">Normal</a>
+        <a class="button is-success">Normal</a>
+        <a class="button is-warning">Normal</a>
+        <a class="button is-danger">Normal</a>
       </div>
       <div class="column">
 {% highlight html %}
-<a class="button is-loading">Loading</a>
-<a class="button is-primary is-loading">Loading</a>
-<a class="button is-info is-loading">Loading</a>
-<a class="button is-success is-loading">Loading</a>
-<a class="button is-warning is-loading">Loading</a>
-<a class="button is-danger is-loading">Loading</a>
+<a class="button">Normal</a>
+<a class="button is-primary">Normal</a>
+<a class="button is-info">Normal</a>
+<a class="button is-success">Normal</a>
+<a class="button is-warning">Normal</a>
+<a class="button is-danger">Normal</a>
+{% endhighlight %}
+      </div>
+    </div>
+    <h4 class="subtitle">Hover</h4>
+
+    <div class="columns">
+      <div class="column">
+        <a class="button is-hovered">Hover</a>
+        <a class="button is-primary is-hovered">Hover</a>
+        <a class="button is-info is-hovered">Hover</a>
+        <a class="button is-success is-hovered">Hover</a>
+        <a class="button is-warning is-hovered">Hover</a>
+        <a class="button is-danger is-hovered">Hover</a>
+      </div>
+      <div class="column">
+{% highlight html %}
+<a class="button is-hovered">Hover</a>
+<a class="button is-primary is-hovered">Hover</a>
+<a class="button is-info is-hovered">Hover</a>
+<a class="button is-success is-hovered">Hover</a>
+<a class="button is-warning is-hovered">Hover</a>
+<a class="button is-danger is-hovered">Hover</a>
+{% endhighlight %}
+      </div>
+    </div>
+
+    <h4 class="subtitle">Focus</h4>
+
+    <div class="columns">
+      <div class="column">
+        <a class="button is-focused">Focus</a>
+        <a class="button is-primary is-focused">Focus</a>
+        <a class="button is-info is-focused">Focus</a>
+        <a class="button is-success is-focused">Focus</a>
+        <a class="button is-warning is-focused">Focus</a>
+        <a class="button is-danger is-focused">Focus</a>
+      </div>
+      <div class="column">
+{% highlight html %}
+<a class="button is-focused">Focus</a>
+<a class="button is-primary is-focused">Focus</a>
+<a class="button is-info is-focused">Focus</a>
+<a class="button is-success is-focused">Focus</a>
+<a class="button is-warning is-focused">Focus</a>
+<a class="button is-danger is-focused">Focus</a>
 {% endhighlight %}
       </div>
     </div>
@@ -161,6 +206,29 @@ doc-subtab: button
       </div>
     </div>
 
+    <h4 class="subtitle">Loading</h4>
+
+    <div class="columns">
+      <div class="column">
+        <a class="button is-loading">Loading</a>
+        <a class="button is-primary is-loading">Loading</a>
+        <a class="button is-info is-loading">Loading</a>
+        <a class="button is-success is-loading">Loading</a>
+        <a class="button is-warning is-loading">Loading</a>
+        <a class="button is-danger is-loading">Loading</a>
+      </div>
+      <div class="column">
+{% highlight html %}
+<a class="button is-loading">Loading</a>
+<a class="button is-primary is-loading">Loading</a>
+<a class="button is-info is-loading">Loading</a>
+<a class="button is-success is-loading">Loading</a>
+<a class="button is-warning is-loading">Loading</a>
+<a class="button is-danger is-loading">Loading</a>
+{% endhighlight %}
+      </div>
+    </div>
+
     <h4 class="subtitle">Disabled</h4>
 
     <div class="columns">
diff --git a/docs/documentation/elements/form.html b/docs/documentation/elements/form.html
index 7b448de204e682080a72394718448e1247eebf44..f344e56a2a468d98684b0ad3acf3017d8dd0b053 100644 (file)
--- a/docs/documentation/elements/form.html
+++ b/docs/documentation/elements/form.html
@@ -250,6 +250,72 @@ doc-subtab: form
     <hr>
 
     <h3 class="title">States</h3>
+    <h4 class="subtitle">Normal</h4>
+    <div class="columns">
+      <div class="column is-half">
+        <p class="control">
+          <input class="input" type="text" placeholder="Normal input">
+        </p>
+        <p class="control">
+          <textarea class="textarea" placeholder="Normal textarea"></textarea>
+        </p>
+      </div>
+      <div class="column is-half">
+{% highlight html %}
+<p class="control">
+  <input class="input" type="text" placeholder="Normal input">
+</p>
+<p class="control">
+  <textarea class="textarea" placeholder="Normal textarea"></textarea>
+</p>
+{% endhighlight %}
+      </div>
+    </div>
+
+    <h4 class="subtitle">Hover</h4>
+    <div class="columns">
+      <div class="column is-half">
+        <p class="control">
+          <input class="input is-hovered" type="text" placeholder="Hovered input">
+        </p>
+        <p class="control">
+          <textarea class="textarea is-hovered" placeholder="Hovered textarea"></textarea>
+        </p>
+      </div>
+      <div class="column is-half">
+{% highlight html %}
+<p class="control">
+  <input class="input is-hovered" type="text" placeholder="Hovered input">
+</p>
+<p class="control">
+  <textarea class="textarea is-hovered" placeholder="Hovered textarea"></textarea>
+</p>
+{% endhighlight %}
+      </div>
+    </div>
+
+    <h4 class="subtitle">Focus</h4>
+    <div class="columns">
+      <div class="column is-half">
+        <p class="control">
+          <input class="input is-focused" type="text" placeholder="Focused input">
+        </p>
+        <p class="control">
+          <textarea class="textarea is-focused" placeholder="Focused textarea"></textarea>
+        </p>
+      </div>
+      <div class="column is-half">
+{% highlight html %}
+<p class="control">
+  <input class="input is-focused" type="text" placeholder="Focused input">
+</p>
+<p class="control">
+  <textarea class="textarea is-focused" placeholder="Focused textarea"></textarea>
+</p>
+{% endhighlight %}
+      </div>
+    </div>
+
     <h4 class="subtitle">Loading</h4>
     <div class="columns">
       <div class="column is-half">
diff --git a/sass/elements/button.sass b/sass/elements/button.sass
index 3926c961028a0fc78907414a2c808785cb5aee1c..8bd6513eb0466d3402938c8260ceb012bade5cf5 100644 (file)
--- a/sass/elements/button.sass
+++ b/sass/elements/button.sass
@@ -1,3 +1,14 @@
+$button-hover: $link-hover !default
+$button-hover-border: $link-hover-border !default
+
+$button-focus: $link-focus !default
+$button-focus-border: $link-focus-border !default
+
+$button-active: $link-active !default
+$button-active-border: $link-active-border !default
+
+$button-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
+
 =button-small
   border-radius: $radius-small
   font-size: $size-small
@@ -25,13 +36,35 @@
     &:last-child
       margin-left: 4px
       margin-right: -2px
+  // States
   &:hover,
+  &.is-hovered
+    border-color: $button-hover-border
+    color: $button-hover
   &:focus,
+  &.is-focused
+    border-color: $button-focus-border
+    box-shadow: 0 0 0.5em rgba($button-focus-border, 0.5)
+    color: $button-focus
+  &:active,
   &.is-active
-    color: $control-hover
-  &:active
-    box-shadow: inset 0 1px 2px rgba($black, 0.2)
+    border-color: $button-active-border
+    box-shadow: $button-shadow-inset
+    color: $button-active
   // Colors
+  &.is-link
+    background-color: transparent
+    border-width: 0
+    color: $text
+    text-decoration: underline
+    &:hover,
+    &.is-hovered,
+    &:focus,
+    &.is-focused,
+    &:active,
+    &.is-active
+      background-color: $background
+      color: $text-strong
   @each $name, $pair in $colors
     $color: nth($pair, 1)
     $color-invert: nth($pair, 2)
@@ -40,10 +73,20 @@
       border-width: 0
       color: $color-invert
       &:hover,
+      &.is-hovered
+        background-color: darken($color, 2.5%)
+        border-color: transparent
+        color: $color-invert
       &:focus,
+      &.is-focused
+        border-color: transparent
+        box-shadow: 0 0 0.5em rgba($color, 0.5)
+        color: $color-invert
+      &:active,
       &.is-active
         background-color: darken($color, 5%)
         border-color: transparent
+        box-shadow: $button-shadow-inset
         color: $color-invert
       &.is-inverted
         background-color: $color-invert
@@ -63,15 +106,6 @@
           background-color: $color
           border-color: $color
           color: $color-invert
-  &.is-link
-    background-color: transparent
-    border-width: 0
-    color: $text
-    text-decoration: underline
-    &:hover,
-    &:focus
-      background-color: $background
-      color: $text-strong
   // Sizes
   &.is-small
     +button-small
diff --git a/sass/elements/form.sass b/sass/elements/form.sass
index a2ad0e0ec816dae765399b3f0fccb953a24d6d58..0d31c0251077d3be5470240122f8efcd20e2fb05 100644 (file)
--- a/sass/elements/form.sass
+++ b/sass/elements/form.sass
@@ -1,18 +1,59 @@
-=form-control
+$input:                     $grey-darker !default
+$input-background:          $white !default
+$input-border:              $grey-lighter !default
+
+$input-hover:               $grey-darker !default
+$input-hover-border:        $grey-light !default
+
+$input-focus:               $grey-darker !default
+$input-focus-border:        $link !default
+
+$input-disabled:            $text-light !default
+$input-disabled-background: $background !default
+$input-disabled-border:     $background !default
+
+$input-arrow:               $link !default
+
+$input-icon:                $grey-lighter !default
+$input-icon-active:         $grey-light !default
+
+$input-radius:              $radius !default
+
+=input
   +control
-  @each $name, $pair in $colors
-    $color: nth($pair, 1)
-    &.is-#{$name}
-      border-color: $color
+  background-color: $input-background
+  border: 1px solid $input-border
+  color: $input
+  &:hover,
+  &.is-hovered
+    border-color: $input-hover-border
+  &:focus,
+  &.is-focused,
+  &:active,
+  &.is-active
+    border-color: $input-focus-border
+  &[disabled],
+  &.is-disabled
+    background-color: $input-disabled-background
+    border-color: $input-disabled-border
+    box-shadow: none
+    color: $input-disabled
+    +placeholder
+      color: rgba($input, 0.3)
 
 .input,
 .textarea
-  +form-control
+  +input
   box-shadow: inset 0 1px 2px rgba($black, 0.1)
   max-width: 100%
   width: 100%
   &[type="search"]
     border-radius: 290486px
+  // Colors
+  @each $name, $pair in $colors
+    $color: nth($pair, 1)
+    &.is-#{$name}
+      border-color: $color
   // Sizes
   &.is-small
     +control-small
@@ -30,7 +71,7 @@
 
 .textarea
   display: block
-  line-height: 1.2
+  line-height: 1.25
   max-height: 600px
   max-width: 100%
   min-height: 120px
@@ -40,17 +81,20 @@
 
 .checkbox,
 .radio
+  align-items: center
   cursor: pointer
-  display: inline-block
-  line-height: 1em
+  display: inline-flex
+  flex-wrap: wrap
+  justify-content: flex-start
   position: relative
   vertical-align: top
   input
     cursor: pointer
+    margin-right: 0.5em
   &:hover
-    color: $control-hover
+    color: $input-hover
   &.is-disabled
-    color: $control-disabled
+    color: $input-disabled
     pointer-events: none
     input
       pointer-events: none
@@ -64,31 +108,42 @@
   height: 2.5em
   position: relative
   vertical-align: top
+  &:after
+    +arrow($input-arrow)
+    margin-top: -0.375em
+    right: 1.125em
+    top: 50%
+    z-index: 4
   select
-    +form-control
+    +input
     cursor: pointer
     display: block
+    font-size: 1em
     outline: none
     padding-right: 2.5em
     &:hover
-      border-color: $control-hover-border
+      border-color: $input-hover-border
     &::ms-expand
       display: none
+  // States
+  &:hover
+    &:after
+      border-color: $input-hover
+  // Sizes
+  &.is-small
+    +control-small
+  &.is-medium
+    +control-medium
+  &.is-large
+    +control-large
+  // Modifiers
   &.is-fullwidth
     width: 100%
     select
       width: 100%
-  &:after
-    +arrow($control-active)
-    margin-top: -4px
-    right: 16px
-    top: 50%
-  &:hover
-    &:after
-      border-color: $control-hover
 
 .label
-  color: $control
+  color: $input
   display: block
   font-weight: bold
   &:not(:last-child)
@@ -96,7 +151,7 @@
 
 .help
   display: block
-  font-size: $control-size-small
+  font-size: 0.875em
   margin-top: 5px
   @each $name, $pair in $colors
     $color: nth($pair, 1)
@@ -133,20 +188,26 @@
       width: auto
       &:hover
         z-index: 2
-      &:active,
-      &:focus
+      &:focus,
+      &:active
         z-index: 3
       &:first-child
-        border-radius: $control-radius 0 0 $control-radius
+        border-radius: $input-radius 0 0 $input-radius
         select
-          border-radius: $control-radius 0 0 $control-radius
+          border-radius: $input-radius 0 0 $input-radius
       &:last-child
-        border-radius: 0 $control-radius $control-radius 0
+        border-radius: 0 $input-radius $input-radius 0
         select
-          border-radius: 0 $control-radius $control-radius 0
+          border-radius: 0 $input-radius $input-radius 0
       &.is-expanded
         flex-grow: 1
         flex-shrink: 0
+    .select select
+      &:hover
+        z-index: 2
+      &:focus,
+      &:active
+        z-index: 3
     &.has-addons-centered
       justify-content: center
     &.has-addons-right
@@ -160,14 +221,14 @@
   &.has-icon
     & > .fa
       +fa(14px, 24px)
-      color: $control-icon
+      color: $input-icon
       pointer-events: none
       position: absolute
       top: 4px
       z-index: 4
     .input
       &:focus + .fa
-        color: $control-icon-active
+        color: $input-icon-active
       &.is-small + .fa
         font-size: 10.5px
         top: 0
@@ -237,5 +298,5 @@
     &:after
       +loader
       position: absolute !important
-      right: 8px
-      top: 8px
+      right: 0.75em
+      top: 0.75em
diff --git a/sass/utilities/controls.sass b/sass/utilities/controls.sass
index 528233b42c714491ecdce7c49fe2d5755972f10d..1cd2b764d5b32a2ebce4a3350eae018ded9d634b 100644 (file)
--- a/sass/utilities/controls.sass
+++ b/sass/utilities/controls.sass
@@ -1,37 +1,15 @@
-$control: $text-strong !default
-$control-background: $text-invert !default
-$control-border: $border !default
-
-$control-hover: $link-hover !default
-$control-hover-border: $border-hover !default
-
-$control-active: $link !default
-$control-active-background: $link !default
-$control-active-background-invert: $link-invert !default
-$control-active-border: $link !default
-
-$control-disabled: $border !default
-$control-disabled-background: $background !default
-
 $control-radius: $radius !default
 $control-radius-small: $radius-small !default
-$control-size: $size-normal !default
-$control-size-small: $size-small !default
-
-$control-icon: $grey-lighter !default
-$control-icon-active: $grey-light !default
 
 =control
   -moz-appearance: none
   -webkit-appearance: none
   align-items: center
-  background-color: $control-background
-  border: 1px solid $control-border
+  border: none
   border-radius: $control-radius
   box-shadow: none
-  color: $control
   display: inline-flex
-  font-size: $control-size
+  font-size: 1em
   height: 2.5em
   justify-content: flex-start
   line-height: 1.5
@@ -39,21 +17,15 @@ $control-icon-active: $grey-light !default
   padding-right: 0.75em
   position: relative
   vertical-align: top
-  &:hover
-    border-color: $control-hover-border
-  &:active,
+  // States
   &:focus,
+  &.is-focused,
+  &:active,
   &.is-active
-    border-color: $control-active-border
     outline: none
   &[disabled],
   &.is-disabled
-    background-color: $control-disabled-background
-    border-color: $control-disabled
-    cursor: not-allowed
     pointer-events: none
-    +placeholder
-      color: rgba($control, 0.3)
 
 =control-small
   border-radius: $control-radius-small
diff --git a/sass/utilities/mixins.sass b/sass/utilities/mixins.sass
index d9737990c76fbc0ce3d3c90568ec95cd17c0aaed..1d9983127cbbe416d661a40f04b56816e1fcbb5c 100644 (file)
--- a/sass/utilities/mixins.sass
+++ b/sass/utilities/mixins.sass
@@ -4,11 +4,11 @@
   border-top: 0
   content: " "
   display: block
-  height: 7px
+  height: 0.5em
   pointer-events: none
   position: absolute
   transform: rotate(-45deg)
-  width: 7px
+  width: 0.5em
 
 =block
   &:not(:last-child)
@@ -133,9 +133,9 @@
   border-top-color: transparent
   content: ""
   display: block
-  height: 16px
+  height: 1rem
   position: relative
-  width: 16px
+  width: 1rem
 
 =overlay($offset: 0)
   bottom: $offset
diff --git a/sass/utilities/variables.sass b/sass/utilities/variables.sass
index 59aafef4573883c802ecbdeaecbd633cc84de0dc..c7934578cbf2dca54b9fbcffa41e14c0b183b556 100644 (file)
--- a/sass/utilities/variables.sass
+++ b/sass/utilities/variables.sass
@@ -104,11 +104,13 @@ $link-invert: $primary-invert !default
 $link-visited: $purple !default
 
 $link-hover: $grey-darker !default
-$link-hover-background: $white-ter !default
-$link-hover-border: $grey-darker !default
+$link-hover-border: $grey-light !default
+
+$link-focus: $grey-darker !default
+$link-focus-border: $primary !default
 
 $link-active: $grey-darker !default
-$link-active-border: $grey-darker !default
+$link-active-border: $grey-dark !default
 
 // Typography
 $family-primary: $family-sans-serif !default
Mirror of https://github.com/jgthms/bulma.git