Bulma Form Control mixins sizes
In this article, we will see the Bulma Form Control mixins sizes. The form control mixin size is a mixin that is used to create buttons and form controls in Bulma. Controls also have 3 more sizes other than normal size and they are as follows small, medium, and large.
Bulma Form Control mixins sizes Class: For creating a mixin, no specific class is provided by Bulma, instead we can create our class and then style the element with the help of SASS mixins.
Syntax:
<div class="bulma-control-mixin is-{size}">
//statement
</div>
.bulma-control-mixin
{
&.is-{size}
{
@include control-{size};
}
}
Where {size} denotes {small, medium, large}.
Parameter: This mixin does not accept any parameter.
Note: You must know the implementation of SASS mixins for the below examples. Please see the pre-requisite given on the link and then implement the below code.
Example 1: Below example illustrates the Bulma Form Control mixins in small, and large sizes.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< link rel = "stylesheet"
href =
< script src =
</ script >
< link rel = "stylesheet" href = "gfgstyles.css" >
</ head >
< body class = "content container has-text-centered" >
< div >
< p class = "title is-1 text-success" >
GeekforGeeks
</ p >
< p class = "subtitle is-3" >
Bulma Form Control Mixins Sizes
</ p >
</ div >
< div >
< button class = "bulma-control-mixin is-small" >
Form Control Small
</ button >
< button class = "bulma-control-mixin is-large" >
Form Control Large
</ button >
</ div >
</ body >
</ html >
|
CSS
.text-success {
color : darkgreen;
}
@mixin control- small () {
border-radius: 7px ;
font-size : 14px ;
background : green ;
color : white ;
}
@mixin control- large () {
font-size : 28px ;
border-radius: 7px ;
background : green ;
color : white ;
}
.bulma-control-mixin {
&.is- small {
@include control- small ;
}
&.is- large {
@include control- large ;
}
}
|
CSS
.text-success {
color : darkgreen;
}
.bulma-control-mixin.is- small {
border-radius: 7px ;
font-size : 14px ;
background : green ;
color : white ;
}
.bulma-control-mixin.is- large {
font-size : 28px ;
border-radius: 7px ;
background : green ;
color : white ;
}
|
Output:
Example 2: Below example illustrates the Bulma Form Control mixins sizes mixin – All sizes.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< link rel = "stylesheet"
href =
< script src =
</ script >
< link rel = "stylesheet" href = "gfgstyles.css" >
</ head >
< body class = "content container has-text-centered" >
< div >
< p class = "title is-1 text-success" >
GeekforGeeks
</ p >
< p class = "subtitle is-3" >
Bulma Form Control Mixins Sizes
</ p >
</ div >
< div >
< button class = "bulma-control-mixin is-small" >
Form Control Small
</ button >
< button class = "bulma-control-mixin" >
Form Control Normal
</ button >
< button class = "bulma-control-mixin is-medium" >
Form Control Medium
</ button >
< button class = "bulma-control-mixin is-large" >
Form Control Large
</ button >
</ div >
</ body >
</ html >
|
CSS
.text-success {
color : darkgreen;
}
$control-radius: 10px ;
$control- border-width : 1px ;
$control- height : 2.5em ;
$control- line-height : 1.5 ;
$control-padding-vertical: calc( 0.5em - #{$control-border-width});
$control-padding-horizontal: calc( 0.75em - #{$control-border-width});
@mixin control() {
-moz-appearance: none ;
-webkit-appearance: none ;
align-items: center ;
border : $control-border-width solid transparent ;
border-radius: $control-radius;
box-shadow: none ;
display : inline-flex;
font-size : 18px ;
height : $control-height;
justify- content : flex-start;
line-height : $control-line-height;
padding-bottom : $control-padding-vertical;
padding-left : $control-padding-horizontal;
padding-right : $control-padding-horizontal;
padding-top : $control-padding-vertical;
position : relative ;
vertical-align : top ;
margin : 10px ;
}
@mixin control- small () {
border-radius: 7px ;
font-size : 14px ;
}
@mixin control- medium () {
font-size : 22px ;
}
@mixin control- large () {
font-size : 28px ;
}
.bulma-control-mixin {
@include control;
background : darkgreen;
color : white ;
}
.bulma-control-mixin {
&.is- small {
@include control- small ;
}
&.is- medium {
@include control- medium ;
}
&.is- large {
@include control- large ;
}
}
|
CSS
.text-success {
color : darkgreen;
}
.bulma-control-mixin {
-moz-appearance: none ;
-webkit-appearance: none ;
align-items: center ;
border : 1px solid transparent ;
border-radius: 10px ;
box-shadow: none ;
display : inline-flex;
font-size : 18px ;
height : 2.5em ;
justify- content : flex-start;
line-height : 1.5 ;
padding-bottom : calc( 0.5em - 1px );
padding-left : calc( 0.75em - 1px );
padding-right : calc( 0.75em - 1px );
padding-top : calc( 0.5em - 1px );
position : relative ;
vertical-align : top ;
margin : 10px ;
background : darkgreen;
color : white ;
}
.bulma-control-mixin.is- small {
border-radius: 7px ;
font-size : 14px ;
}
.bulma-control-mixin.is- medium {
font-size : 22px ;
}
.bulma-control-mixin.is- large {
font-size : 28px ;
}
|
Output:
Reference: https://bulma.io/documentation/utilities/control-mixins/#sizes
Last Updated :
18 Oct, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...