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.
- index.html
HTML
<!DOCTYPE html> < html lang = "en" > < head > < link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css" /> < script src = "https://use.fontawesome.com/releases/v5.15.4/js/all.js" > </ script > < link rel = "stylesheet" href = "gfgstyles.css" > </ head > < body class = "content container has-text-centered" > < div > < p class = "title is-1 text-success" > GeekforBeginner </ 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 > |
- gfgstyles.scss
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 ; } } |
- gfgstyles.css
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.
- index.html
HTML
<!DOCTYPE html> < html lang = "en" > < head > < link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css" /> < script src = "https://use.fontawesome.com/releases/v5.15.4/js/all.js" > </ script > < link rel = "stylesheet" href = "gfgstyles.css" > </ head > < body class = "content container has-text-centered" > < div > < p class = "title is-1 text-success" > GeekforBeginner </ 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 > |
- gfgstyles.scss
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 ; } } |
- gfgstyles.css
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: