mirror of
https://github.com/jgthms/bulma.git
synced 2025-01-09 15:44:25 +00:00
Fix control variables
This commit is contained in:
Jeremy Thomas
parent
a2afb61ffe
commit
2e7e1d7c75
@ -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">
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user