mirror of
https://github.com/jgthms/bulma
synced 2026-03-15 10:14:29 -07:00
Fix control variables
This commit is contained in:
Jeremy Thomas
@@ -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>
|
||||
|
||||
@@ -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:active {
|
||||
.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.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,33 +1300,51 @@ 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 {
|
||||
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;
|
||||
}
|
||||
|
||||
.input:hover, .input.is-hovered,
|
||||
.textarea:hover,
|
||||
.textarea.is-hovered {
|
||||
border-color: #b5b5b5;
|
||||
}
|
||||
|
||||
.input:focus, .input.is-focused, .input:active, .input.is-active,
|
||||
.textarea:focus,
|
||||
.textarea.is-focused,
|
||||
.textarea:active,
|
||||
.textarea.is-active {
|
||||
border-color: #00d1b2;
|
||||
}
|
||||
|
||||
.input[disabled], .input.is-disabled,
|
||||
.textarea[disabled],
|
||||
.textarea.is-disabled {
|
||||
background-color: whitesmoke;
|
||||
border-color: whitesmoke;
|
||||
box-shadow: none;
|
||||
color: #7a7a7a;
|
||||
}
|
||||
|
||||
.input[disabled]::-moz-placeholder, .input.is-disabled::-moz-placeholder,
|
||||
.textarea[disabled]::-moz-placeholder,
|
||||
.textarea.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,28 +1535,39 @@ 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 {
|
||||
border-color: #b5b5b5;
|
||||
}
|
||||
|
||||
.select select:active, .select select:focus, .select select.is-active {
|
||||
border-color: #00d1b2;
|
||||
.select select:focus, .select select.is-focused, .select select:active, .select select.is-active {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.select select[disabled], .select select.is-disabled {
|
||||
background-color: whitesmoke;
|
||||
border-color: #dbdbdb;
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.select select:hover, .select select.is-hovered {
|
||||
border-color: #b5b5b5;
|
||||
}
|
||||
|
||||
.select select:focus, .select select.is-focused, .select select:active, .select select.is-active {
|
||||
border-color: #00d1b2;
|
||||
}
|
||||
|
||||
.select select[disabled], .select select.is-disabled {
|
||||
background-color: whitesmoke;
|
||||
border-color: whitesmoke;
|
||||
box-shadow: none;
|
||||
color: #7a7a7a;
|
||||
}
|
||||
|
||||
.select select[disabled]::-moz-placeholder, .select select.is-disabled::-moz-placeholder {
|
||||
color: rgba(54, 54, 54, 0.3);
|
||||
}
|
||||
@@ -1439,42 +1584,6 @@ 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.is-light {
|
||||
border-color: whitesmoke;
|
||||
}
|
||||
|
||||
.select select.is-dark {
|
||||
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 select:hover {
|
||||
border-color: #b5b5b5;
|
||||
}
|
||||
@@ -1483,6 +1592,23 @@ a.box:active {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.select:hover:after {
|
||||
border-color: #363636;
|
||||
}
|
||||
|
||||
.select.is-small {
|
||||
border-radius: 2px;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.select.is-medium {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.select.is-large {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.select.is-fullwidth {
|
||||
width: 100%;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user