library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-11-14 11:14:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

New control height and line height variables

Browse Source
This commit is contained in:
Jeremy Thomas 2018-10-02 07:01:43 +01:00
parent 036945d970
commit 91db8e1af0
5 changed files with 152 additions and 589 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
CHANGELOG.md
View File

@ -11,6 +11,8 @@
* #1764 New `.is-sr-only` helper * #1764 New `.is-sr-only` helper
* #2109 Add and use `$navbar-breakpoint` variable * #2109 Add and use `$navbar-breakpoint` variable
* New variables `$control-height`, `$control-line-height`, `$pagination-min-width`, `$input-height`
### Improvements ### Improvements
* #1964 Allow `.notification` to have a `.dropdown-item` * #1964 Allow `.notification` to have a `.dropdown-item`

710
docs/css/bulma-docs.css
View File

File diff suppressed because it is too large Load Diff

3
sass/components/pagination.sass
View File

@ -1,6 +1,7 @@
$pagination-color: $grey-darker !default $pagination-color: $grey-darker !default
$pagination-border-color: $grey-lighter !default $pagination-border-color: $grey-lighter !default
$pagination-margin: -0.25rem !default $pagination-margin: -0.25rem !default
$pagination-min-width: $control-height !default
$pagination-hover-color: $link-hover !default $pagination-hover-color: $link-hover !default
$pagination-hover-border-color: $link-hover-border !default $pagination-hover-border-color: $link-hover-border !default
@ -67,7 +68,7 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
.pagination-link .pagination-link
border-color: $pagination-border-color border-color: $pagination-border-color
color: $pagination-color color: $pagination-color
min-width: 2.25em min-width: $pagination-min-width
&:hover &:hover
border-color: $pagination-hover-border-color border-color: $pagination-hover-border-color
color: $pagination-hover-color color: $pagination-hover-color

19
sass/elements/form.sass
View File

@ -1,6 +1,7 @@
$input-color: $grey-darker !default $input-color: $grey-darker !default
$input-background-color: $white !default $input-background-color: $white !default
$input-border-color: $grey-lighter !default $input-border-color: $grey-lighter !default
$input-height: $control-height !default
$input-shadow: inset 0 1px 2px rgba($black, 0.1) !default $input-shadow: inset 0 1px 2px rgba($black, 0.1) !default
$input-hover-color: $grey-darker !default $input-hover-color: $grey-darker !default
@ -148,7 +149,7 @@ $help-size: $size-small !default
position: relative position: relative
vertical-align: top vertical-align: top
&:not(.is-multiple) &:not(.is-multiple)
height: 2.25em height: $input-height
&:not(.is-multiple):not(.is-loading) &:not(.is-multiple):not(.is-loading)
&::after &::after
@extend %arrow @extend %arrow
@ -551,11 +552,11 @@ $help-size: $size-small !default
&.has-icon &.has-icon
.icon .icon
color: $input-icon-color color: $input-icon-color
height: 2.25em height: $input-height
pointer-events: none pointer-events: none
position: absolute position: absolute
top: 0 top: 0
width: 2.25em width: $input-height
z-index: 4 z-index: 4
.input .input
&:focus &:focus
@ -574,12 +575,12 @@ $help-size: $size-small !default
.icon .icon
left: 0 left: 0
.input .input
padding-left: 2.25em padding-left: $input-height
&.has-icon-right &.has-icon-right
.icon .icon
right: 0 right: 0
.input .input
padding-right: 2.25em padding-right: $input-height
&.has-icons-left, &.has-icons-left,
&.has-icons-right &.has-icons-right
.input, .input,
@ -595,22 +596,22 @@ $help-size: $size-small !default
font-size: $size-large font-size: $size-large
.icon .icon
color: $input-icon-color color: $input-icon-color
height: 2.25em height: $input-height
pointer-events: none pointer-events: none
position: absolute position: absolute
top: 0 top: 0
width: 2.25em width: $input-height
z-index: 4 z-index: 4
&.has-icons-left &.has-icons-left
.input, .input,
.select select .select select
padding-left: 2.25em padding-left: $input-height
.icon.is-left .icon.is-left
left: 0 left: 0
&.has-icons-right &.has-icons-right
.input, .input,
.select select .select select
padding-right: 2.25em padding-right: $input-height
.icon.is-right .icon.is-right
right: 0 right: 0
&.is-loading &.is-loading

7
sass/utilities/controls.sass
View File

@ -3,6 +3,9 @@ $control-radius-small: $radius-small !default
$control-border-width: 1px !default $control-border-width: 1px !default
$control-height: 2.25em !default
$control-line-height: 1.5 !default
$control-padding-vertical: calc(0.375em - #{$control-border-width}) !default $control-padding-vertical: calc(0.375em - #{$control-border-width}) !default
$control-padding-horizontal: calc(0.625em - #{$control-border-width}) !default $control-padding-horizontal: calc(0.625em - #{$control-border-width}) !default
@ -15,9 +18,9 @@ $control-padding-horizontal: calc(0.625em - #{$control-border-width}) !default
box-shadow: none box-shadow: none
display: inline-flex display: inline-flex
font-size: $size-normal font-size: $size-normal
height: 2.25em height: $control-height
justify-content: flex-start justify-content: flex-start
line-height: 1.5 line-height: $control-line-height
padding-bottom: $control-padding-vertical padding-bottom: $control-padding-vertical
padding-left: $control-padding-horizontal padding-left: $control-padding-horizontal
padding-right: $control-padding-horizontal padding-right: $control-padding-horizontal