Bulma File Variables

Bulma is a free, open-source CSS framework based on Flexbox. It is component rich, compatible, and well documented. It is highly responsive in nature. It uses classes to implement its design.  

The file element is used to upload custom file input. The ‘file’ component comprises several sub-elements that we have to add exclusively to design our content well. 

These elements are listed below.

• file-label: It is the actual interactive and clickable part of the file element.
• file-input: It is the native file input, hidden for styling purposes.
• file-cta: It is the upload call-to-action.
• file-icon: It is an optional upload icon.
• file-label:  It is the “Choose a file…” text
• file-name: It is the container for the chosen file name.

Variable Used:

Example 1: In the below code, we will make use of the above variable to modify the file.

SCSS Code:

$file-cta-background-color:green;
.container {
 background-color:$file-cta-background-color;
}

Compiled CSS Code:

.container {
 background-color: green; 
}

Output:

Example 2: In the below code, we will make use of the above variable to modify the file.

SCSS Code:

$file-name-border-width:5px solid green;
.container {
 border:$file-name-border-width;
}

Compiled CSS Code:

.container {
 border: 5px solid green;
}

Output:

Reference: https://bulma.io/documentation/form/file/