Add has-icons modifier

This commit is contained in:
Jeremy Thomas
2017-04-15 15:49:38 +01:00
parent 656c7faedd
commit 17de5fb78f
5 changed files with 288 additions and 131 deletions

View File

@@ -2185,6 +2185,18 @@ input[type="submit"].button {
margin-bottom: 0.5em;
}
.label.is-small {
font-size: 0.75rem;
}
.label.is-medium {
font-size: 1.25rem;
}
.label.is-large {
font-size: 1.5rem;
}
.help {
display: block;
font-size: 0.75rem;
@@ -2445,6 +2457,48 @@ input[type="submit"].button {
padding-right: 2.25em;
}
.control.has-icons-left .input:focus ~ .icon, .control.has-icons-right .input:focus ~ .icon {
color: #7a7a7a;
}
.control.has-icons-left .input.is-small ~ .icon, .control.has-icons-right .input.is-small ~ .icon {
font-size: 0.75rem;
}
.control.has-icons-left .input.is-medium ~ .icon, .control.has-icons-right .input.is-medium ~ .icon {
font-size: 1.25rem;
}
.control.has-icons-left .input.is-large ~ .icon, .control.has-icons-right .input.is-large ~ .icon {
font-size: 1.5rem;
}
.control.has-icons-left .icon, .control.has-icons-right .icon {
color: #dbdbdb;
height: 2.25em;
pointer-events: none;
position: absolute;
top: 0;
width: 2.25em;
z-index: 4;
}
.control.has-icons-left .input {
padding-left: 2.25em;
}
.control.has-icons-left .icon.is-left {
left: 0;
}
.control.has-icons-right .input {
padding-right: 2.25em;
}
.control.has-icons-right .icon.is-right {
right: 0;
}
.control.is-loading:after {
animation: spinAround 500ms infinite linear;
border: 2px solid #dbdbdb;
@@ -2852,7 +2906,6 @@ input[type="submit"].button {
line-height: 1.5;
padding-left: 0.875em;
padding-right: 0.875em;
vertical-align: top;
white-space: nowrap;
}