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 %}
|
{% include head.html %}
|
||||||
<body class="layout-{{ page.layout }}{% if page.doc-tab %} page-{{ page.doc-tab}}{% endif %}">
|
<body class="layout-{{ page.layout }}{% if page.doc-tab %} page-{{ page.doc-tab}}{% endif %}">
|
||||||
{{ content }}
|
{{ content }}
|
||||||
{% include footer.html %}
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -575,13 +575,11 @@ a.box:active {
|
|||||||
-moz-appearance: none;
|
-moz-appearance: none;
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background-color: white;
|
border: none;
|
||||||
border: 1px solid #dbdbdb;
|
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
color: #363636;
|
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
font-size: 16px;
|
font-size: 1em;
|
||||||
height: 2.5em;
|
height: 2.5em;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
@ -602,38 +600,14 @@ a.box:active {
|
|||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button:hover {
|
.button:focus, .button.is-focused, .button:active, .button.is-active {
|
||||||
border-color: #b5b5b5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button:active, .button:focus, .button.is-active {
|
|
||||||
border-color: #00d1b2;
|
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button[disabled], .button.is-disabled {
|
.button[disabled], .button.is-disabled {
|
||||||
background-color: whitesmoke;
|
|
||||||
border-color: #dbdbdb;
|
|
||||||
cursor: not-allowed;
|
|
||||||
pointer-events: none;
|
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 {
|
.button strong {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
}
|
}
|
||||||
@ -650,12 +624,33 @@ a.box:active {
|
|||||||
margin-right: -2px;
|
margin-right: -2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button:hover, .button:focus, .button.is-active {
|
.button:hover, .button.is-hovered {
|
||||||
|
border-color: #b5b5b5;
|
||||||
color: #363636;
|
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);
|
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 {
|
.button.is-white {
|
||||||
@ -664,9 +659,22 @@ a.box:active {
|
|||||||
color: #0a0a0a;
|
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;
|
background-color: #f2f2f2;
|
||||||
border-color: transparent;
|
border-color: transparent;
|
||||||
|
box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2);
|
||||||
color: #0a0a0a;
|
color: #0a0a0a;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -702,9 +710,22 @@ a.box:active {
|
|||||||
color: white;
|
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;
|
background-color: black;
|
||||||
border-color: transparent;
|
border-color: transparent;
|
||||||
|
box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2);
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -740,9 +761,22 @@ a.box:active {
|
|||||||
color: #363636;
|
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;
|
background-color: #e8e8e8;
|
||||||
border-color: transparent;
|
border-color: transparent;
|
||||||
|
box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2);
|
||||||
color: #363636;
|
color: #363636;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -778,9 +812,22 @@ a.box:active {
|
|||||||
color: whitesmoke;
|
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;
|
background-color: #292929;
|
||||||
border-color: transparent;
|
border-color: transparent;
|
||||||
|
box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2);
|
||||||
color: whitesmoke;
|
color: whitesmoke;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -816,9 +863,22 @@ a.box:active {
|
|||||||
color: white;
|
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;
|
background-color: #00b89c;
|
||||||
border-color: transparent;
|
border-color: transparent;
|
||||||
|
box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2);
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -854,9 +914,22 @@ a.box:active {
|
|||||||
color: white;
|
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;
|
background-color: #2366d1;
|
||||||
border-color: transparent;
|
border-color: transparent;
|
||||||
|
box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2);
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -892,9 +965,22 @@ a.box:active {
|
|||||||
color: white;
|
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;
|
background-color: #20bc56;
|
||||||
border-color: transparent;
|
border-color: transparent;
|
||||||
|
box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2);
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -930,9 +1016,22 @@ a.box:active {
|
|||||||
color: rgba(0, 0, 0, 0.7);
|
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;
|
background-color: #ffd83d;
|
||||||
border-color: transparent;
|
border-color: transparent;
|
||||||
|
box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2);
|
||||||
color: rgba(0, 0, 0, 0.7);
|
color: rgba(0, 0, 0, 0.7);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -968,9 +1067,22 @@ a.box:active {
|
|||||||
color: white;
|
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;
|
background-color: #ff1f4b;
|
||||||
border-color: transparent;
|
border-color: transparent;
|
||||||
|
box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2);
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1000,18 +1112,6 @@ a.box:active {
|
|||||||
color: white;
|
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 {
|
.button.is-small {
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
font-size: 0.875rem;
|
font-size: 0.875rem;
|
||||||
@ -1047,9 +1147,9 @@ a.box:active {
|
|||||||
border-top-color: transparent;
|
border-top-color: transparent;
|
||||||
content: "";
|
content: "";
|
||||||
display: block;
|
display: block;
|
||||||
height: 16px;
|
height: 1rem;
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 16px;
|
width: 1rem;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
margin-left: -8px;
|
margin-left: -8px;
|
||||||
margin-top: -8px;
|
margin-top: -8px;
|
||||||
@ -1188,13 +1288,11 @@ a.box:active {
|
|||||||
-moz-appearance: none;
|
-moz-appearance: none;
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background-color: white;
|
border: none;
|
||||||
border: 1px solid #dbdbdb;
|
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
color: #363636;
|
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
font-size: 16px;
|
font-size: 1em;
|
||||||
height: 2.5em;
|
height: 2.5em;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
@ -1202,33 +1300,51 @@ a.box:active {
|
|||||||
padding-right: 0.75em;
|
padding-right: 0.75em;
|
||||||
position: relative;
|
position: relative;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
|
background-color: white;
|
||||||
|
border: 1px solid #dbdbdb;
|
||||||
|
color: #363636;
|
||||||
box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1);
|
box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1);
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.input:hover,
|
.input:focus, .input.is-focused, .input:active, .input.is-active,
|
||||||
.textarea:hover {
|
|
||||||
border-color: #b5b5b5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input:active, .input:focus, .input.is-active,
|
|
||||||
.textarea:active,
|
|
||||||
.textarea:focus,
|
.textarea:focus,
|
||||||
|
.textarea.is-focused,
|
||||||
|
.textarea:active,
|
||||||
.textarea.is-active {
|
.textarea.is-active {
|
||||||
border-color: #00d1b2;
|
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.input[disabled], .input.is-disabled,
|
.input[disabled], .input.is-disabled,
|
||||||
.textarea[disabled],
|
.textarea[disabled],
|
||||||
.textarea.is-disabled {
|
.textarea.is-disabled {
|
||||||
background-color: whitesmoke;
|
|
||||||
border-color: #dbdbdb;
|
|
||||||
cursor: not-allowed;
|
|
||||||
pointer-events: none;
|
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,
|
.input[disabled]::-moz-placeholder, .input.is-disabled::-moz-placeholder,
|
||||||
.textarea[disabled]::-moz-placeholder,
|
.textarea[disabled]::-moz-placeholder,
|
||||||
.textarea.is-disabled::-moz-placeholder {
|
.textarea.is-disabled::-moz-placeholder {
|
||||||
@ -1253,6 +1369,11 @@ a.box:active {
|
|||||||
color: rgba(54, 54, 54, 0.3);
|
color: rgba(54, 54, 54, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.input[type="search"],
|
||||||
|
.textarea[type="search"] {
|
||||||
|
border-radius: 290486px;
|
||||||
|
}
|
||||||
|
|
||||||
.input.is-white,
|
.input.is-white,
|
||||||
.textarea.is-white {
|
.textarea.is-white {
|
||||||
border-color: white;
|
border-color: white;
|
||||||
@ -1298,11 +1419,6 @@ a.box:active {
|
|||||||
border-color: #ff3860;
|
border-color: #ff3860;
|
||||||
}
|
}
|
||||||
|
|
||||||
.input[type="search"],
|
|
||||||
.textarea[type="search"] {
|
|
||||||
border-radius: 290486px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input.is-small,
|
.input.is-small,
|
||||||
.textarea.is-small {
|
.textarea.is-small {
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
@ -1333,7 +1449,7 @@ a.box:active {
|
|||||||
|
|
||||||
.textarea {
|
.textarea {
|
||||||
display: block;
|
display: block;
|
||||||
line-height: 1.2;
|
line-height: 1.25;
|
||||||
max-height: 600px;
|
max-height: 600px;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
min-height: 120px;
|
min-height: 120px;
|
||||||
@ -1344,9 +1460,11 @@ a.box:active {
|
|||||||
|
|
||||||
.checkbox,
|
.checkbox,
|
||||||
.radio {
|
.radio {
|
||||||
|
align-items: center;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: inline-block;
|
display: inline-flex;
|
||||||
line-height: 1em;
|
flex-wrap: wrap;
|
||||||
|
justify-content: flex-start;
|
||||||
position: relative;
|
position: relative;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
}
|
}
|
||||||
@ -1354,6 +1472,7 @@ a.box:active {
|
|||||||
.checkbox input,
|
.checkbox input,
|
||||||
.radio input {
|
.radio input {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
margin-right: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.checkbox:hover,
|
.checkbox:hover,
|
||||||
@ -1363,7 +1482,7 @@ a.box:active {
|
|||||||
|
|
||||||
.checkbox.is-disabled,
|
.checkbox.is-disabled,
|
||||||
.radio.is-disabled {
|
.radio.is-disabled {
|
||||||
color: #dbdbdb;
|
color: #7a7a7a;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1383,17 +1502,32 @@ a.box:active {
|
|||||||
vertical-align: top;
|
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 {
|
.select select {
|
||||||
-moz-appearance: none;
|
-moz-appearance: none;
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background-color: white;
|
border: none;
|
||||||
border: 1px solid #dbdbdb;
|
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
color: #363636;
|
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
font-size: 16px;
|
font-size: 1em;
|
||||||
height: 2.5em;
|
height: 2.5em;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
@ -1401,28 +1535,39 @@ a.box:active {
|
|||||||
padding-right: 0.75em;
|
padding-right: 0.75em;
|
||||||
position: relative;
|
position: relative;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
|
background-color: white;
|
||||||
|
border: 1px solid #dbdbdb;
|
||||||
|
color: #363636;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: block;
|
display: block;
|
||||||
|
font-size: 1em;
|
||||||
outline: none;
|
outline: none;
|
||||||
padding-right: 2.5em;
|
padding-right: 2.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.select select:hover {
|
.select select:focus, .select select.is-focused, .select select:active, .select select.is-active {
|
||||||
border-color: #b5b5b5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.select select:active, .select select:focus, .select select.is-active {
|
|
||||||
border-color: #00d1b2;
|
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.select select[disabled], .select select.is-disabled {
|
.select select[disabled], .select select.is-disabled {
|
||||||
background-color: whitesmoke;
|
|
||||||
border-color: #dbdbdb;
|
|
||||||
cursor: not-allowed;
|
|
||||||
pointer-events: none;
|
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 {
|
.select select[disabled]::-moz-placeholder, .select select.is-disabled::-moz-placeholder {
|
||||||
color: rgba(54, 54, 54, 0.3);
|
color: rgba(54, 54, 54, 0.3);
|
||||||
}
|
}
|
||||||
@ -1439,42 +1584,6 @@ a.box:active {
|
|||||||
color: rgba(54, 54, 54, 0.3);
|
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 {
|
.select select:hover {
|
||||||
border-color: #b5b5b5;
|
border-color: #b5b5b5;
|
||||||
}
|
}
|
||||||
@ -1483,6 +1592,23 @@ a.box:active {
|
|||||||
display: none;
|
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 {
|
.select.is-fullwidth {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
@ -1491,26 +1617,6 @@ a.box:active {
|
|||||||
width: 100%;
|
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 {
|
.label {
|
||||||
color: #363636;
|
color: #363636;
|
||||||
display: block;
|
display: block;
|
||||||
@ -1523,7 +1629,7 @@ a.box:active {
|
|||||||
|
|
||||||
.help {
|
.help {
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 0.875rem;
|
font-size: 0.875em;
|
||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1608,11 +1714,11 @@ a.box:active {
|
|||||||
z-index: 2;
|
z-index: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.control.has-addons .button:active, .control.has-addons .button:focus,
|
.control.has-addons .button:focus, .control.has-addons .button:active,
|
||||||
.control.has-addons .input:active,
|
|
||||||
.control.has-addons .input:focus,
|
.control.has-addons .input:focus,
|
||||||
.control.has-addons .select:active,
|
.control.has-addons .input:active,
|
||||||
.control.has-addons .select:focus {
|
.control.has-addons .select:focus,
|
||||||
|
.control.has-addons .select:active {
|
||||||
z-index: 3;
|
z-index: 3;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1647,6 +1753,14 @@ a.box:active {
|
|||||||
flex-shrink: 0;
|
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 {
|
.control.has-addons.has-addons-centered {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
@ -1803,12 +1917,12 @@ a.box:active {
|
|||||||
border-top-color: transparent;
|
border-top-color: transparent;
|
||||||
content: "";
|
content: "";
|
||||||
display: block;
|
display: block;
|
||||||
height: 16px;
|
height: 1rem;
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 16px;
|
width: 1rem;
|
||||||
position: absolute !important;
|
position: absolute !important;
|
||||||
right: 8px;
|
right: 0.75em;
|
||||||
top: 8px;
|
top: 0.75em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.image {
|
.image {
|
||||||
@ -2511,9 +2625,9 @@ a.box:active {
|
|||||||
border-top-color: transparent;
|
border-top-color: transparent;
|
||||||
content: "";
|
content: "";
|
||||||
display: block;
|
display: block;
|
||||||
height: 16px;
|
height: 1rem;
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 16px;
|
width: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.number {
|
.number {
|
||||||
@ -3783,7 +3897,7 @@ a.nav-item.is-tab.is-active {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.panel-tabs a.is-active {
|
.panel-tabs a.is-active {
|
||||||
border-bottom-color: #363636;
|
border-bottom-color: #4a4a4a;
|
||||||
color: #363636;
|
color: #363636;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -115,25 +115,70 @@ doc-subtab: button
|
|||||||
<hr>
|
<hr>
|
||||||
|
|
||||||
<h3 class="title">States</h3>
|
<h3 class="title">States</h3>
|
||||||
<h4 class="subtitle">Loading</h4>
|
<h4 class="subtitle">Normal</h4>
|
||||||
|
|
||||||
<div class="columns">
|
<div class="columns">
|
||||||
<div class="column">
|
<div class="column">
|
||||||
<a class="button is-loading">Loading</a>
|
<a class="button">Normal</a>
|
||||||
<a class="button is-primary is-loading">Loading</a>
|
<a class="button is-primary">Normal</a>
|
||||||
<a class="button is-info is-loading">Loading</a>
|
<a class="button is-info">Normal</a>
|
||||||
<a class="button is-success is-loading">Loading</a>
|
<a class="button is-success">Normal</a>
|
||||||
<a class="button is-warning is-loading">Loading</a>
|
<a class="button is-warning">Normal</a>
|
||||||
<a class="button is-danger is-loading">Loading</a>
|
<a class="button is-danger">Normal</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="column">
|
<div class="column">
|
||||||
{% highlight html %}
|
{% highlight html %}
|
||||||
<a class="button is-loading">Loading</a>
|
<a class="button">Normal</a>
|
||||||
<a class="button is-primary is-loading">Loading</a>
|
<a class="button is-primary">Normal</a>
|
||||||
<a class="button is-info is-loading">Loading</a>
|
<a class="button is-info">Normal</a>
|
||||||
<a class="button is-success is-loading">Loading</a>
|
<a class="button is-success">Normal</a>
|
||||||
<a class="button is-warning is-loading">Loading</a>
|
<a class="button is-warning">Normal</a>
|
||||||
<a class="button is-danger is-loading">Loading</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 %}
|
{% endhighlight %}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -161,6 +206,29 @@ doc-subtab: button
|
|||||||
</div>
|
</div>
|
||||||
</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>
|
<h4 class="subtitle">Disabled</h4>
|
||||||
|
|
||||||
<div class="columns">
|
<div class="columns">
|
||||||
|
|||||||
@ -250,6 +250,72 @@ doc-subtab: form
|
|||||||
<hr>
|
<hr>
|
||||||
|
|
||||||
<h3 class="title">States</h3>
|
<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>
|
<h4 class="subtitle">Loading</h4>
|
||||||
<div class="columns">
|
<div class="columns">
|
||||||
<div class="column is-half">
|
<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
|
=button-small
|
||||||
border-radius: $radius-small
|
border-radius: $radius-small
|
||||||
font-size: $size-small
|
font-size: $size-small
|
||||||
@ -25,13 +36,35 @@
|
|||||||
&:last-child
|
&:last-child
|
||||||
margin-left: 4px
|
margin-left: 4px
|
||||||
margin-right: -2px
|
margin-right: -2px
|
||||||
|
// States
|
||||||
&:hover,
|
&:hover,
|
||||||
|
&.is-hovered
|
||||||
|
border-color: $button-hover-border
|
||||||
|
color: $button-hover
|
||||||
&:focus,
|
&: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
|
&.is-active
|
||||||
color: $control-hover
|
border-color: $button-active-border
|
||||||
&:active
|
box-shadow: $button-shadow-inset
|
||||||
box-shadow: inset 0 1px 2px rgba($black, 0.2)
|
color: $button-active
|
||||||
// Colors
|
// 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
|
@each $name, $pair in $colors
|
||||||
$color: nth($pair, 1)
|
$color: nth($pair, 1)
|
||||||
$color-invert: nth($pair, 2)
|
$color-invert: nth($pair, 2)
|
||||||
@ -40,10 +73,20 @@
|
|||||||
border-width: 0
|
border-width: 0
|
||||||
color: $color-invert
|
color: $color-invert
|
||||||
&:hover,
|
&:hover,
|
||||||
|
&.is-hovered
|
||||||
|
background-color: darken($color, 2.5%)
|
||||||
|
border-color: transparent
|
||||||
|
color: $color-invert
|
||||||
&:focus,
|
&:focus,
|
||||||
|
&.is-focused
|
||||||
|
border-color: transparent
|
||||||
|
box-shadow: 0 0 0.5em rgba($color, 0.5)
|
||||||
|
color: $color-invert
|
||||||
|
&:active,
|
||||||
&.is-active
|
&.is-active
|
||||||
background-color: darken($color, 5%)
|
background-color: darken($color, 5%)
|
||||||
border-color: transparent
|
border-color: transparent
|
||||||
|
box-shadow: $button-shadow-inset
|
||||||
color: $color-invert
|
color: $color-invert
|
||||||
&.is-inverted
|
&.is-inverted
|
||||||
background-color: $color-invert
|
background-color: $color-invert
|
||||||
@ -63,15 +106,6 @@
|
|||||||
background-color: $color
|
background-color: $color
|
||||||
border-color: $color
|
border-color: $color
|
||||||
color: $color-invert
|
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
|
// Sizes
|
||||||
&.is-small
|
&.is-small
|
||||||
+button-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
|
+control
|
||||||
@each $name, $pair in $colors
|
background-color: $input-background
|
||||||
$color: nth($pair, 1)
|
border: 1px solid $input-border
|
||||||
&.is-#{$name}
|
color: $input
|
||||||
border-color: $color
|
&: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,
|
.input,
|
||||||
.textarea
|
.textarea
|
||||||
+form-control
|
+input
|
||||||
box-shadow: inset 0 1px 2px rgba($black, 0.1)
|
box-shadow: inset 0 1px 2px rgba($black, 0.1)
|
||||||
max-width: 100%
|
max-width: 100%
|
||||||
width: 100%
|
width: 100%
|
||||||
&[type="search"]
|
&[type="search"]
|
||||||
border-radius: 290486px
|
border-radius: 290486px
|
||||||
|
// Colors
|
||||||
|
@each $name, $pair in $colors
|
||||||
|
$color: nth($pair, 1)
|
||||||
|
&.is-#{$name}
|
||||||
|
border-color: $color
|
||||||
// Sizes
|
// Sizes
|
||||||
&.is-small
|
&.is-small
|
||||||
+control-small
|
+control-small
|
||||||
@ -30,7 +71,7 @@
|
|||||||
|
|
||||||
.textarea
|
.textarea
|
||||||
display: block
|
display: block
|
||||||
line-height: 1.2
|
line-height: 1.25
|
||||||
max-height: 600px
|
max-height: 600px
|
||||||
max-width: 100%
|
max-width: 100%
|
||||||
min-height: 120px
|
min-height: 120px
|
||||||
@ -40,17 +81,20 @@
|
|||||||
|
|
||||||
.checkbox,
|
.checkbox,
|
||||||
.radio
|
.radio
|
||||||
|
align-items: center
|
||||||
cursor: pointer
|
cursor: pointer
|
||||||
display: inline-block
|
display: inline-flex
|
||||||
line-height: 1em
|
flex-wrap: wrap
|
||||||
|
justify-content: flex-start
|
||||||
position: relative
|
position: relative
|
||||||
vertical-align: top
|
vertical-align: top
|
||||||
input
|
input
|
||||||
cursor: pointer
|
cursor: pointer
|
||||||
|
margin-right: 0.5em
|
||||||
&:hover
|
&:hover
|
||||||
color: $control-hover
|
color: $input-hover
|
||||||
&.is-disabled
|
&.is-disabled
|
||||||
color: $control-disabled
|
color: $input-disabled
|
||||||
pointer-events: none
|
pointer-events: none
|
||||||
input
|
input
|
||||||
pointer-events: none
|
pointer-events: none
|
||||||
@ -64,31 +108,42 @@
|
|||||||
height: 2.5em
|
height: 2.5em
|
||||||
position: relative
|
position: relative
|
||||||
vertical-align: top
|
vertical-align: top
|
||||||
|
&:after
|
||||||
|
+arrow($input-arrow)
|
||||||
|
margin-top: -0.375em
|
||||||
|
right: 1.125em
|
||||||
|
top: 50%
|
||||||
|
z-index: 4
|
||||||
select
|
select
|
||||||
+form-control
|
+input
|
||||||
cursor: pointer
|
cursor: pointer
|
||||||
display: block
|
display: block
|
||||||
|
font-size: 1em
|
||||||
outline: none
|
outline: none
|
||||||
padding-right: 2.5em
|
padding-right: 2.5em
|
||||||
&:hover
|
&:hover
|
||||||
border-color: $control-hover-border
|
border-color: $input-hover-border
|
||||||
&::ms-expand
|
&::ms-expand
|
||||||
display: none
|
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
|
&.is-fullwidth
|
||||||
width: 100%
|
width: 100%
|
||||||
select
|
select
|
||||||
width: 100%
|
width: 100%
|
||||||
&:after
|
|
||||||
+arrow($control-active)
|
|
||||||
margin-top: -4px
|
|
||||||
right: 16px
|
|
||||||
top: 50%
|
|
||||||
&:hover
|
|
||||||
&:after
|
|
||||||
border-color: $control-hover
|
|
||||||
|
|
||||||
.label
|
.label
|
||||||
color: $control
|
color: $input
|
||||||
display: block
|
display: block
|
||||||
font-weight: bold
|
font-weight: bold
|
||||||
&:not(:last-child)
|
&:not(:last-child)
|
||||||
@ -96,7 +151,7 @@
|
|||||||
|
|
||||||
.help
|
.help
|
||||||
display: block
|
display: block
|
||||||
font-size: $control-size-small
|
font-size: 0.875em
|
||||||
margin-top: 5px
|
margin-top: 5px
|
||||||
@each $name, $pair in $colors
|
@each $name, $pair in $colors
|
||||||
$color: nth($pair, 1)
|
$color: nth($pair, 1)
|
||||||
@ -133,20 +188,26 @@
|
|||||||
width: auto
|
width: auto
|
||||||
&:hover
|
&:hover
|
||||||
z-index: 2
|
z-index: 2
|
||||||
&:active,
|
&:focus,
|
||||||
&:focus
|
&:active
|
||||||
z-index: 3
|
z-index: 3
|
||||||
&:first-child
|
&:first-child
|
||||||
border-radius: $control-radius 0 0 $control-radius
|
border-radius: $input-radius 0 0 $input-radius
|
||||||
select
|
select
|
||||||
border-radius: $control-radius 0 0 $control-radius
|
border-radius: $input-radius 0 0 $input-radius
|
||||||
&:last-child
|
&:last-child
|
||||||
border-radius: 0 $control-radius $control-radius 0
|
border-radius: 0 $input-radius $input-radius 0
|
||||||
select
|
select
|
||||||
border-radius: 0 $control-radius $control-radius 0
|
border-radius: 0 $input-radius $input-radius 0
|
||||||
&.is-expanded
|
&.is-expanded
|
||||||
flex-grow: 1
|
flex-grow: 1
|
||||||
flex-shrink: 0
|
flex-shrink: 0
|
||||||
|
.select select
|
||||||
|
&:hover
|
||||||
|
z-index: 2
|
||||||
|
&:focus,
|
||||||
|
&:active
|
||||||
|
z-index: 3
|
||||||
&.has-addons-centered
|
&.has-addons-centered
|
||||||
justify-content: center
|
justify-content: center
|
||||||
&.has-addons-right
|
&.has-addons-right
|
||||||
@ -160,14 +221,14 @@
|
|||||||
&.has-icon
|
&.has-icon
|
||||||
& > .fa
|
& > .fa
|
||||||
+fa(14px, 24px)
|
+fa(14px, 24px)
|
||||||
color: $control-icon
|
color: $input-icon
|
||||||
pointer-events: none
|
pointer-events: none
|
||||||
position: absolute
|
position: absolute
|
||||||
top: 4px
|
top: 4px
|
||||||
z-index: 4
|
z-index: 4
|
||||||
.input
|
.input
|
||||||
&:focus + .fa
|
&:focus + .fa
|
||||||
color: $control-icon-active
|
color: $input-icon-active
|
||||||
&.is-small + .fa
|
&.is-small + .fa
|
||||||
font-size: 10.5px
|
font-size: 10.5px
|
||||||
top: 0
|
top: 0
|
||||||
@ -237,5 +298,5 @@
|
|||||||
&:after
|
&:after
|
||||||
+loader
|
+loader
|
||||||
position: absolute !important
|
position: absolute !important
|
||||||
right: 8px
|
right: 0.75em
|
||||||
top: 8px
|
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: $radius !default
|
||||||
$control-radius-small: $radius-small !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
|
=control
|
||||||
-moz-appearance: none
|
-moz-appearance: none
|
||||||
-webkit-appearance: none
|
-webkit-appearance: none
|
||||||
align-items: center
|
align-items: center
|
||||||
background-color: $control-background
|
border: none
|
||||||
border: 1px solid $control-border
|
|
||||||
border-radius: $control-radius
|
border-radius: $control-radius
|
||||||
box-shadow: none
|
box-shadow: none
|
||||||
color: $control
|
|
||||||
display: inline-flex
|
display: inline-flex
|
||||||
font-size: $control-size
|
font-size: 1em
|
||||||
height: 2.5em
|
height: 2.5em
|
||||||
justify-content: flex-start
|
justify-content: flex-start
|
||||||
line-height: 1.5
|
line-height: 1.5
|
||||||
@ -39,21 +17,15 @@ $control-icon-active: $grey-light !default
|
|||||||
padding-right: 0.75em
|
padding-right: 0.75em
|
||||||
position: relative
|
position: relative
|
||||||
vertical-align: top
|
vertical-align: top
|
||||||
&:hover
|
// States
|
||||||
border-color: $control-hover-border
|
|
||||||
&:active,
|
|
||||||
&:focus,
|
&:focus,
|
||||||
|
&.is-focused,
|
||||||
|
&:active,
|
||||||
&.is-active
|
&.is-active
|
||||||
border-color: $control-active-border
|
|
||||||
outline: none
|
outline: none
|
||||||
&[disabled],
|
&[disabled],
|
||||||
&.is-disabled
|
&.is-disabled
|
||||||
background-color: $control-disabled-background
|
|
||||||
border-color: $control-disabled
|
|
||||||
cursor: not-allowed
|
|
||||||
pointer-events: none
|
pointer-events: none
|
||||||
+placeholder
|
|
||||||
color: rgba($control, 0.3)
|
|
||||||
|
|
||||||
=control-small
|
=control-small
|
||||||
border-radius: $control-radius-small
|
border-radius: $control-radius-small
|
||||||
|
|||||||
@ -4,11 +4,11 @@
|
|||||||
border-top: 0
|
border-top: 0
|
||||||
content: " "
|
content: " "
|
||||||
display: block
|
display: block
|
||||||
height: 7px
|
height: 0.5em
|
||||||
pointer-events: none
|
pointer-events: none
|
||||||
position: absolute
|
position: absolute
|
||||||
transform: rotate(-45deg)
|
transform: rotate(-45deg)
|
||||||
width: 7px
|
width: 0.5em
|
||||||
|
|
||||||
=block
|
=block
|
||||||
&:not(:last-child)
|
&:not(:last-child)
|
||||||
@ -133,9 +133,9 @@
|
|||||||
border-top-color: transparent
|
border-top-color: transparent
|
||||||
content: ""
|
content: ""
|
||||||
display: block
|
display: block
|
||||||
height: 16px
|
height: 1rem
|
||||||
position: relative
|
position: relative
|
||||||
width: 16px
|
width: 1rem
|
||||||
|
|
||||||
=overlay($offset: 0)
|
=overlay($offset: 0)
|
||||||
bottom: $offset
|
bottom: $offset
|
||||||
|
|||||||
@ -104,11 +104,13 @@ $link-invert: $primary-invert !default
|
|||||||
$link-visited: $purple !default
|
$link-visited: $purple !default
|
||||||
|
|
||||||
$link-hover: $grey-darker !default
|
$link-hover: $grey-darker !default
|
||||||
$link-hover-background: $white-ter !default
|
$link-hover-border: $grey-light !default
|
||||||
$link-hover-border: $grey-darker !default
|
|
||||||
|
$link-focus: $grey-darker !default
|
||||||
|
$link-focus-border: $primary !default
|
||||||
|
|
||||||
$link-active: $grey-darker !default
|
$link-active: $grey-darker !default
|
||||||
$link-active-border: $grey-darker !default
|
$link-active-border: $grey-dark !default
|
||||||
|
|
||||||
// Typography
|
// Typography
|
||||||
$family-primary: $family-sans-serif !default
|
$family-primary: $family-sans-serif !default
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user