mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Fix code styling, Fix helpers
This commit is contained in:
Jeremy Thomas
parent
c22e514a84
commit
560a15eda1
25
CHANGELOG.md
25
CHANGELOG.md
@ -1,5 +1,30 @@
|
||||
# Bulma Changelog
|
||||
|
||||
## 0.0.18
|
||||
|
||||
### BREAKING
|
||||
|
||||
* `.is-text-*` renamed to `.has-text-*`
|
||||
* `.is-gapless` renamed to `.has-no-gap`
|
||||
* `.is-marginless` renamed to `.has-no-margin`
|
||||
|
||||
### Added
|
||||
|
||||
* **small tag**: `.tag.is-small`
|
||||
|
||||
### Fixed
|
||||
|
||||
* disabled input with element
|
||||
|
||||
### Removed
|
||||
|
||||
* removed `box-shadow` from `.tag`
|
||||
* custom checkboxes and radio buttons
|
||||
|
||||
### Updated
|
||||
|
||||
* `.tag` uses `display: inline-flex` now
|
||||
|
||||
## 0.0.17
|
||||
|
||||
### Added
|
||||
|
||||
@ -26,13 +26,13 @@
|
||||
|
||||
// Text
|
||||
|
||||
.is-text-centered
|
||||
.has-text-centered
|
||||
text-align: center
|
||||
|
||||
.is-text-left
|
||||
.has-text-left
|
||||
text-align: left
|
||||
|
||||
.is-text-right
|
||||
.has-text-right
|
||||
text-align: right
|
||||
|
||||
// Visibility
|
||||
@ -55,12 +55,12 @@
|
||||
|
||||
// Other
|
||||
|
||||
.has-no-margin
|
||||
margin: 0 !important
|
||||
|
||||
.is-disabled
|
||||
pointer-events: none
|
||||
|
||||
.is-marginless
|
||||
margin: 0 !important
|
||||
|
||||
.is-unselectable
|
||||
+unselectable
|
||||
|
||||
|
||||
@ -16,4 +16,13 @@
|
||||
background: white
|
||||
border-radius: 5px
|
||||
box-shadow: 0 2px 3px rgba(black, 0.1), 0 0 0 1px rgba(black, 0.1)
|
||||
display: block
|
||||
padding: 20px
|
||||
|
||||
a.box
|
||||
&:hover,
|
||||
&:focus
|
||||
box-shadow: 0 2px 3px rgba(black, 0.1), 0 0 0 1px $link
|
||||
&:active
|
||||
box-shadow: inset 0 1px 2px rgba(black, 0.2), 0 0 0 1px $link
|
||||
|
||||
|
||||
@ -109,7 +109,7 @@
|
||||
justify-content: center
|
||||
&.is-mobile
|
||||
display: flex
|
||||
&.is-gapless
|
||||
&.has-no-gap
|
||||
margin-left: 0
|
||||
margin-right: 0
|
||||
&:not(:last-child)
|
||||
|
||||
@ -90,11 +90,10 @@
|
||||
ul
|
||||
border-bottom: none
|
||||
&.is-fullwidth
|
||||
+tablet
|
||||
li
|
||||
flex: 1
|
||||
& + li
|
||||
margin-left: 0
|
||||
ul
|
||||
justify-content: center
|
||||
text-align: center
|
||||
li
|
||||
flex: 1
|
||||
& + li
|
||||
margin-left: 0
|
||||
ul
|
||||
justify-content: center
|
||||
text-align: center
|
||||
|
||||
@ -27,15 +27,19 @@
|
||||
font-size: $size-small
|
||||
line-height: 1
|
||||
margin-top: 5px
|
||||
.icon
|
||||
.icon,
|
||||
.tag
|
||||
&:first-child
|
||||
margin-left: -2px
|
||||
margin-right: 4px
|
||||
&:last-child
|
||||
margin-left: 4px
|
||||
margin-right: -2px
|
||||
&:hover
|
||||
color: $control-hover
|
||||
&:active
|
||||
box-shadow: inset 0 1px 2px rgba(black, 0.2)
|
||||
// Colors
|
||||
@each $name, $pair in $colors
|
||||
$color: nth($pair, 1)
|
||||
$color-invert: nth($pair, 2)
|
||||
@ -50,14 +54,6 @@
|
||||
color: $color-invert
|
||||
&:active
|
||||
border-color: transparent
|
||||
&.is-outlined
|
||||
background: transparent
|
||||
border-color: $color
|
||||
color: $color
|
||||
&:hover,
|
||||
&:focus
|
||||
border-color: darken($color, 10%)
|
||||
color: darken($color, 10%)
|
||||
&.is-inverted
|
||||
background: $color-invert
|
||||
color: $color
|
||||
@ -69,8 +65,17 @@
|
||||
color: $color-invert
|
||||
&:hover
|
||||
background: rgba(black, 0.05)
|
||||
&.is-loading:after
|
||||
border-color: transparent transparent $color-invert $color-invert !important
|
||||
&.is-loading
|
||||
&:after
|
||||
border-color: transparent transparent $color-invert $color-invert !important
|
||||
&.is-outlined
|
||||
background: transparent
|
||||
border-color: $color
|
||||
color: $color
|
||||
&:hover,
|
||||
&:focus
|
||||
border-color: darken($color, 10%)
|
||||
color: darken($color, 10%)
|
||||
&.is-link
|
||||
border-color: transparent
|
||||
color: $text
|
||||
@ -79,17 +84,22 @@
|
||||
&:focus
|
||||
background: $border
|
||||
color: $text-strong
|
||||
// Sizes
|
||||
&.is-small
|
||||
+button-small
|
||||
&.is-medium
|
||||
+button-medium
|
||||
&.is-large
|
||||
+button-large
|
||||
// Modifiers
|
||||
&[disabled],
|
||||
&.is-disabled
|
||||
opacity: 0.5
|
||||
&.is-flexible
|
||||
height: auto
|
||||
&.is-fullwidth
|
||||
display: block
|
||||
width: 100%
|
||||
&.is-flexible
|
||||
height: auto
|
||||
&.is-loading
|
||||
color: transparent
|
||||
pointer-events: none
|
||||
@ -97,7 +107,3 @@
|
||||
@extend .loader
|
||||
+center(16px)
|
||||
position: absolute !important
|
||||
&.is-disabled,
|
||||
&[disabled]
|
||||
opacity: 0.5
|
||||
pointer-events: none
|
||||
|
||||
@ -19,14 +19,14 @@
|
||||
&:focus
|
||||
border-color: $control-active-border
|
||||
outline: none
|
||||
&[disabled]
|
||||
&,
|
||||
&:hover
|
||||
background: $background
|
||||
border-color: $control-border
|
||||
cursor: not-allowed
|
||||
+placeholder
|
||||
color: rgba($control, 0.3)
|
||||
&[disabled],
|
||||
&.is-disabled
|
||||
background: $background
|
||||
border-color: $control-border
|
||||
cursor: not-allowed
|
||||
pointer-events: none
|
||||
+placeholder
|
||||
color: rgba($control, 0.3)
|
||||
|
||||
=form-control
|
||||
+control
|
||||
@ -60,10 +60,7 @@
|
||||
width: 100%
|
||||
&[type="search"]
|
||||
border-radius: 290486px
|
||||
&.is-flat
|
||||
border: none
|
||||
box-shadow: none
|
||||
padding: 4px 8px
|
||||
// Sizes
|
||||
&.is-small
|
||||
+control-small
|
||||
&.is-flat
|
||||
@ -76,6 +73,11 @@
|
||||
+control-large
|
||||
&.is-flat
|
||||
padding: 4px 12px
|
||||
// Modifiers
|
||||
&.is-flat
|
||||
border: none
|
||||
box-shadow: none
|
||||
padding: 4px 8px
|
||||
&.is-fullwidth
|
||||
display: block
|
||||
width: 100%
|
||||
@ -97,46 +99,17 @@
|
||||
cursor: pointer
|
||||
display: inline-block
|
||||
line-height: 16px
|
||||
padding-left: 18px
|
||||
position: relative
|
||||
vertical-align: top
|
||||
input
|
||||
+form-control
|
||||
border-radius: 1px
|
||||
box-shadow: inset 0 1px 1px rgba(black, 0.1)
|
||||
cursor: pointer
|
||||
float: left
|
||||
height: 14px
|
||||
left: 0
|
||||
outline: none
|
||||
padding: 0
|
||||
position: absolute
|
||||
top: 1px
|
||||
width: 14px
|
||||
&:after
|
||||
+arrow($control-active-background-invert)
|
||||
height: 4px
|
||||
left: 3px
|
||||
opacity: 0
|
||||
position: absolute
|
||||
top: 3px
|
||||
transform: rotate(-45deg) scale(1)
|
||||
&:checked
|
||||
background: $control-active-background
|
||||
border-color: $control-active-background
|
||||
box-shadow: none
|
||||
&:after
|
||||
opacity: 1
|
||||
&:hover
|
||||
color: $control-hover
|
||||
input
|
||||
border-color: $control-hover-border
|
||||
&:checked
|
||||
border-color: $control-active-border
|
||||
&.is-disabled
|
||||
&,
|
||||
&:hover
|
||||
color: $text-light
|
||||
color: $text-light
|
||||
pointer-events: none
|
||||
input
|
||||
pointer-events: none
|
||||
|
||||
.checkbox
|
||||
@extend %control-with-element
|
||||
@ -145,16 +118,6 @@
|
||||
@extend %control-with-element
|
||||
& + .radio
|
||||
margin-left: 10px
|
||||
input
|
||||
border-radius: 8px
|
||||
&:after
|
||||
background: $link-invert
|
||||
border: 0
|
||||
border-radius: 2px
|
||||
left: 4px
|
||||
top: 4px
|
||||
transform: none
|
||||
width: 4px
|
||||
|
||||
.select
|
||||
display: inline-block
|
||||
@ -214,14 +177,34 @@
|
||||
.control
|
||||
position: relative
|
||||
text-align: left
|
||||
&.is-loading
|
||||
&:after
|
||||
@extend .loader
|
||||
position: absolute !important
|
||||
right: 8px
|
||||
top: 8px
|
||||
&:not(:last-child)
|
||||
margin-bottom: 10px
|
||||
// Modifiers
|
||||
&.has-addons
|
||||
display: flex
|
||||
justify-content: flex-start
|
||||
.button,
|
||||
.input,
|
||||
.select
|
||||
border-radius: 0
|
||||
margin-right: -1px
|
||||
&:hover
|
||||
z-index: 2
|
||||
&:active,
|
||||
&:focus
|
||||
z-index: 3
|
||||
&:first-child
|
||||
border-radius: $radius 0 0 $radius
|
||||
select
|
||||
border-radius: $radius 0 0 $radius
|
||||
&:last-child
|
||||
border-radius: 0 $radius $radius 0
|
||||
select
|
||||
border-radius: 0 $radius $radius 0
|
||||
&.has-addons-centered
|
||||
justify-content: center
|
||||
&.has-addons-right
|
||||
justify-content: flex-end
|
||||
&.has-icon
|
||||
& > .fa
|
||||
+fa(14px, 16px)
|
||||
@ -238,33 +221,14 @@
|
||||
left: 8px
|
||||
.input
|
||||
padding-left: 32px
|
||||
&.has-icon-right
|
||||
& > .fa
|
||||
right: 8px
|
||||
.input
|
||||
padding-right: 32px
|
||||
&.has-addons
|
||||
display: flex
|
||||
.input,
|
||||
.button,
|
||||
.select
|
||||
border-radius: 0
|
||||
margin-right: -1px
|
||||
&:hover
|
||||
z-index: 2
|
||||
&:active,
|
||||
&:focus
|
||||
z-index: 3
|
||||
&:first-child
|
||||
border-radius: $radius 0 0 $radius
|
||||
select
|
||||
border-radius: $radius 0 0 $radius
|
||||
&:last-child
|
||||
border-radius: 0 $radius $radius 0
|
||||
&.is-centered
|
||||
justify-content: center
|
||||
&.has-icon-right
|
||||
& > .fa
|
||||
right: 8px
|
||||
.input
|
||||
padding-right: 32px
|
||||
&.is-grouped
|
||||
display: flex
|
||||
justify-content: flex-start
|
||||
& > .button,
|
||||
& > .input,
|
||||
& > .select
|
||||
@ -272,9 +236,19 @@
|
||||
margin-right: 10px
|
||||
& > .input
|
||||
flex: 1
|
||||
&.is-grouped-centered
|
||||
justify-content: center
|
||||
&.is-grouped-right
|
||||
justify-content: flex-end
|
||||
&.is-horizontal
|
||||
+tablet
|
||||
display: flex
|
||||
& > .control
|
||||
display: flex
|
||||
flex: 5
|
||||
&.is-loading
|
||||
&:after
|
||||
@extend .loader
|
||||
position: absolute !important
|
||||
right: 8px
|
||||
top: 8px
|
||||
|
||||
@ -39,6 +39,7 @@
|
||||
transform: rotate(-45deg)
|
||||
&:hover
|
||||
background: $red
|
||||
// Sizes
|
||||
&.is-small
|
||||
height: 16px
|
||||
width: 16px
|
||||
@ -54,6 +55,7 @@
|
||||
.fa
|
||||
font-size: inherit
|
||||
line-height: inherit
|
||||
// Sizes
|
||||
&.is-small
|
||||
+fa(14px, 16px)
|
||||
&.is-medium
|
||||
@ -86,6 +88,7 @@
|
||||
margin-top: 4px
|
||||
&:hover
|
||||
background: $background
|
||||
// Modifers
|
||||
&.is-active
|
||||
span
|
||||
background: $link
|
||||
@ -121,17 +124,6 @@
|
||||
overflow: auto
|
||||
max-width: 100%
|
||||
|
||||
.image
|
||||
display: block
|
||||
position: relative
|
||||
vertical-align: top
|
||||
img
|
||||
+overlay
|
||||
display: block
|
||||
width: 100%
|
||||
&.is-3x2
|
||||
padding-top: 66.6666%
|
||||
|
||||
.loader
|
||||
animation: spin-around 500ms infinite linear
|
||||
border: 2px solid $border
|
||||
@ -152,44 +144,48 @@
|
||||
vertical-align: top
|
||||
|
||||
.tag
|
||||
align-items: center
|
||||
background: $background
|
||||
border-radius: $radius
|
||||
box-shadow: inset 0 -1px 0 rgba(black, 0.1)
|
||||
border-radius: 290486px
|
||||
color: $text
|
||||
display: inline-block
|
||||
display: inline-flex
|
||||
font-size: 12px
|
||||
height: 24px
|
||||
justify-content: center
|
||||
line-height: 16px
|
||||
padding: 4px 10px
|
||||
vertical-align: top
|
||||
white-space: nowrap
|
||||
&.is-dark
|
||||
background: $text
|
||||
color: $text-invert
|
||||
&.is-rounded
|
||||
border-radius: 290486px
|
||||
&.is-medium
|
||||
box-shadow: inset 0 -2px 0 rgba(black, 0.1)
|
||||
font-size: $size-normal
|
||||
height: 32px
|
||||
padding: 7px 14px 9px
|
||||
.delete
|
||||
margin-left: 4px
|
||||
margin-right: -6px
|
||||
&:not(.is-large)
|
||||
.delete
|
||||
@extend .delete.is-small
|
||||
margin-left: 4px
|
||||
margin-right: -6px
|
||||
&.is-large
|
||||
box-shadow: inset 0 -2px 0 rgba(black, 0.1)
|
||||
font-size: $size-5
|
||||
height: 40px
|
||||
line-height: 24px
|
||||
padding: 7px 18px 9px
|
||||
.delete
|
||||
margin-left: 4px
|
||||
margin-right: -8px
|
||||
// Colors
|
||||
@each $name, $pair in $colors
|
||||
$color: nth($pair, 1)
|
||||
$color-invert: nth($pair, 2)
|
||||
&.is-#{$name}
|
||||
background: $color
|
||||
color: $color-invert
|
||||
&.is-dark
|
||||
background: $text
|
||||
color: $text-invert
|
||||
// Sizes
|
||||
&.is-small
|
||||
font-size: $size-small
|
||||
height: 20px
|
||||
padding: 2px 8px
|
||||
&.is-medium
|
||||
font-size: $size-normal
|
||||
height: 32px
|
||||
padding: 8px 14px
|
||||
&.is-large
|
||||
font-size: $size-5
|
||||
height: 40px
|
||||
line-height: 24px
|
||||
padding: 8px 18px
|
||||
.delete
|
||||
margin-left: 4px
|
||||
margin-right: -8px
|
||||
|
||||
@ -5,6 +5,7 @@ $dimensions: 16 24 32 48 64 96 128
|
||||
position: relative
|
||||
img
|
||||
display: block
|
||||
// Ratio
|
||||
&.is-square,
|
||||
&.is-1by1,
|
||||
&.is-4by3,
|
||||
@ -26,6 +27,7 @@ $dimensions: 16 24 32 48 64 96 128
|
||||
padding-top: 56.25%
|
||||
&.is-2by1
|
||||
padding-top: 50%
|
||||
// Sizes
|
||||
@each $dimension in $dimensions
|
||||
&.is-#{$dimension}x#{$dimension}
|
||||
height: $dimension * 1px
|
||||
|
||||
@ -9,11 +9,9 @@
|
||||
background: $text
|
||||
border-radius: $radius $radius 0 0
|
||||
color: $text-invert
|
||||
font-size: 10px
|
||||
font-weight: bold
|
||||
letter-spacing: 1px
|
||||
padding: 3px 8px
|
||||
text-transform: uppercase
|
||||
padding: 7px 10px
|
||||
strong
|
||||
color: inherit
|
||||
& + .message-body
|
||||
border-radius: 0 0 $radius $radius
|
||||
border-top: none
|
||||
@ -22,6 +20,7 @@
|
||||
@extend .block
|
||||
background: $background
|
||||
border-radius: $radius
|
||||
// Colors
|
||||
@each $name, $pair in $colors
|
||||
$color: nth($pair, 1)
|
||||
$color-invert: nth($pair, 2)
|
||||
|
||||
@ -5,14 +5,6 @@
|
||||
border-radius: $radius
|
||||
padding: 16px 20px
|
||||
position: relative
|
||||
.title
|
||||
color: inherit
|
||||
@each $name, $pair in $colors
|
||||
$color: nth($pair, 1)
|
||||
$color-invert: nth($pair, 2)
|
||||
&.is-#{$name}
|
||||
background: $color
|
||||
color: $color-invert
|
||||
.delete
|
||||
background: rgba(black, 0.2)
|
||||
border-radius: 0 $radius
|
||||
@ -20,4 +12,12 @@
|
||||
margin: -16px -20px 0 20px
|
||||
&:hover
|
||||
background: rgba(black, 0.5)
|
||||
|
||||
.title
|
||||
color: inherit
|
||||
// Colors
|
||||
@each $name, $pair in $colors
|
||||
$color: nth($pair, 1)
|
||||
$color-invert: nth($pair, 2)
|
||||
&.is-#{$name}
|
||||
background: $color
|
||||
color: $color-invert
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
.progress
|
||||
@extend .block
|
||||
-moz-appearance: none
|
||||
-webkit-appearance: none
|
||||
@extend .block
|
||||
border: none
|
||||
border-radius: 290486px
|
||||
display: block
|
||||
@ -15,12 +15,7 @@
|
||||
background: $text
|
||||
&::-moz-progress-bar
|
||||
background: $text
|
||||
&.is-small
|
||||
height: 8px
|
||||
&.is-medium
|
||||
height: 16px
|
||||
&.is-large
|
||||
height: 20px
|
||||
// Colors
|
||||
@each $name, $pair in $colors
|
||||
$color: nth($pair, 1)
|
||||
&.is-#{$name}
|
||||
@ -28,3 +23,10 @@
|
||||
background: $color
|
||||
&::-moz-progress-bar
|
||||
background: $color
|
||||
// Sizes
|
||||
&.is-small
|
||||
height: 8px
|
||||
&.is-medium
|
||||
height: 16px
|
||||
&.is-large
|
||||
height: 20px
|
||||
|
||||
@ -5,11 +5,11 @@
|
||||
em,
|
||||
span
|
||||
font-weight: $weight-title-normal
|
||||
strong
|
||||
font-weight: $weight-title-bold
|
||||
a
|
||||
&:hover
|
||||
border-bottom: 1px solid
|
||||
strong
|
||||
font-weight: $weight-title-bold
|
||||
.tag
|
||||
vertical-align: bottom
|
||||
|
||||
@ -17,51 +17,55 @@
|
||||
color: $text-strong
|
||||
font-size: $size-large
|
||||
line-height: 1
|
||||
strong
|
||||
color: inherit
|
||||
code
|
||||
display: inline-block
|
||||
font-size: $size-large
|
||||
& + .subtitle
|
||||
margin-top: -10px
|
||||
strong
|
||||
color: inherit
|
||||
& + .highlight
|
||||
margin-top: -10px
|
||||
&.is-normal
|
||||
font-weight: 400
|
||||
strong
|
||||
font-weight: 700
|
||||
& + .subtitle
|
||||
margin-top: -10px
|
||||
// Colors
|
||||
@each $size in $sizes
|
||||
$i: index($sizes, $size)
|
||||
&.is-#{$i}
|
||||
font-size: $size
|
||||
code
|
||||
font-size: nth($sizes, min($i + 1, 6))
|
||||
// Modifiers
|
||||
&.is-normal
|
||||
font-weight: 400
|
||||
strong
|
||||
font-weight: 700
|
||||
// Responsiveness
|
||||
+tablet
|
||||
& + .subtitle
|
||||
margin-top: -15px
|
||||
|
||||
.subtitle
|
||||
color: $text
|
||||
font-size: $size-medium
|
||||
line-height: 1.125
|
||||
& + .title
|
||||
margin-top: -20px
|
||||
strong
|
||||
color: $text-strong
|
||||
code
|
||||
border-radius: $radius
|
||||
display: inline-block
|
||||
font-size: $size-normal
|
||||
padding: 2px 3px
|
||||
vertical-align: top
|
||||
& + .text
|
||||
margin-top: 20px
|
||||
&.is-normal
|
||||
font-weight: 400
|
||||
strong
|
||||
font-weight: 700
|
||||
strong
|
||||
color: $text-strong
|
||||
& + .title
|
||||
margin-top: -20px
|
||||
// Colors
|
||||
@each $size in $sizes
|
||||
$i: index($sizes, $size)
|
||||
&.is-#{$i}
|
||||
font-size: $size
|
||||
code
|
||||
font-size: nth($sizes, min($i + 1, 6))
|
||||
// Modifiers
|
||||
&.is-normal
|
||||
font-weight: 400
|
||||
strong
|
||||
font-weight: 700
|
||||
|
||||
@ -41,6 +41,11 @@
|
||||
line-height: 24px
|
||||
.button + .button
|
||||
margin-left: 10px
|
||||
.tag
|
||||
&:first-child
|
||||
margin-right: 5px
|
||||
&:last-child
|
||||
margin-left: 5px
|
||||
+mobile
|
||||
text-align: left
|
||||
|
||||
|
||||
@ -33,7 +33,6 @@
|
||||
|
||||
.hero
|
||||
background: white
|
||||
text-align: center
|
||||
.header
|
||||
background: none
|
||||
.container
|
||||
@ -141,7 +140,3 @@
|
||||
flex: 1
|
||||
flex-direction: column
|
||||
justify-content: center
|
||||
&.is-left
|
||||
text-align: left
|
||||
&.is-right
|
||||
text-align: right
|
||||
|
||||
Loading…
Reference in New Issue
Block a user