Form Control Mixins
Mixins for Bulma’s buttons and form controls
In Bulma, the form controls are an essential part of the framework. They comprise the following elements:
.button
.input
.select
.file-cta
.file-name
.pagination-previous
.pagination-next
.pagination-link
.pagination-ellipsis
The control() mixin ensures consistency by providing a set of styles that are shared between all these form controls. You can use it to create additional controls:
.bulma-control-mixin {
@include control;
background: deeppink;
color: white;
}示例
HTML
<button class="bulma-control-mixin">
My control
</button>
Controls have a default font size of $size-normal and also come in 3 additional sizes, which can be accessed via 3 additional mixins:
@include control-small;$size-small
@include control-medium;$size-medium
@include control-large;$size-large
.bulma-control-mixin {
&.is-small {
@include control-small;
}
&.is-medium {
@include control-medium;
}
&.is-large {
@include control-large;
}
}示例
HTML
<button class="bulma-control-mixin is-small">
Small
</button>
<button class="bulma-control-mixin">
Normal
</button>
<button class="bulma-control-mixin is-medium">
Medium
</button>
<button class="bulma-control-mixin is-large">
Large
</button>
The control() mixin also exists as Sass placeholder %control
.bulma-control-extend {
@extend %control;
background: mediumblue;
color: white;
}示例
HTML
<button class="bulma-control-extend">
My control
</button>
此页面为开放源码页面。
发现排版问题？或者表达模糊？
在 GitHub 改进该页内容
