75 lines
1.4 KiB
SCSS
75 lines
1.4 KiB
SCSS
.nes-input,
|
|
.nes-textarea {
|
|
@mixin border-style($border, $outline) {
|
|
@include compact-border-image($border);
|
|
|
|
outline-color: $outline;
|
|
}
|
|
|
|
@include compact-rounded-corners();
|
|
|
|
width: calc(100% - #{2 * $border-size});
|
|
padding: 0.5rem 1rem;
|
|
margin: 4px;
|
|
background-clip: padding-box;
|
|
|
|
&.is-dark {
|
|
@include border-style(map-get($default-colors, "normal"), map-get($default-colors, "hover"));
|
|
|
|
color: $background-color;
|
|
background-color: $base-color;
|
|
}
|
|
&.is-success {
|
|
@include border-style(map-get($success-colors, "normal"), map-get($success-colors, "hover"));
|
|
}
|
|
&.is-warning {
|
|
@include border-style(map-get($warning-colors, "normal"), map-get($warning-colors, "hover"));
|
|
}
|
|
&.is-error {
|
|
@include border-style(map-get($error-colors, "normal"), map-get($error-colors, "hover"));
|
|
}
|
|
}
|
|
|
|
.nes-field {
|
|
> label {
|
|
display: block;
|
|
}
|
|
.nes-input,
|
|
.nes-textarea {
|
|
display: block;
|
|
}
|
|
|
|
&.is-inline {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
> label {
|
|
flex-basis: 0;
|
|
flex-grow: 1;
|
|
margin: 0;
|
|
margin-right: 1.5rem;
|
|
text-align: right;
|
|
}
|
|
|
|
.nes-input,
|
|
.nes-textarea {
|
|
flex-basis: 0;
|
|
flex-grow: 5;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 768px) {
|
|
.nes-field.is-inline {
|
|
display: block;
|
|
|
|
> label {
|
|
margin-bottom: 0.5rem; // reboot.css:label
|
|
text-align: left;
|
|
}
|
|
|
|
.nes-input {
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
}
|