I am using Bulma and would like to display only the bottom line for the input field. If it is in readonly mode, no line should appear at all.
How can I set this in my .scss so that it works and not for all input fields but only for a specific one?
I found: Input text field with only bottom border But how do I set this in the scss with the help of Bulma?
input {
outline: 0;
border-width: 0 0 2px;
border-color: blue;
}
input:focus {
border-color: green;
}
<input placeholder="Text" type="text" />
Something like:
@charset "utf-8";
// Generally settings
$blue: #4455ff;
$pink: #ffb3b3;
$dark: #151922;
$blue-invert: #fff;
$family-serif: "Montserrat", sans-serif;
$primary: $blue;
$primary-invert: $blue-invert;
$family-primary: $family-serif;
$background-dark: $dark;
@import "../../node_modules/bulma/sass/utilities/derived-variables.sass";
$addColors: (
// here add new input
newInput = input // and now change the color auf newInput
$newInput-focus-border-color: none;
);
$colors: map-merge($colors, $addColors);
@import "../../node_modules/bulma/bulma.sass";
@import "../../node_modules/bulma/sass/utilities/initial-variables.sass";
@import "../../node_modules/bulma/sass/utilities/functions.sass";
newInput {
border: only at the bottom in blue
}
import "bulma";
...
input class="newInput" type="text" value="Type your text here"/>
input class="newInput" type="text" value="Read only modus" readonly />