* `.is-text-*` renamed to `.has-text-*`
* `.is-gapless` renamed to `.has-no-gap`
-* `.is-marginless` renamed to `.has-no-margin`
+* removed `.is-fullwidth` helper
### Added
.is-overlay
+overlay
-// Size
-
-.is-fullwidth
- width: 100%
-
// Text
.has-text-centered
// Other
-.has-no-margin
- margin: 0 !important
-
.is-disabled
pointer-events: none
+.is-marginless
+ margin: 0 !important
+
.is-unselectable
+unselectable
-
width: 300px
.media:not(:last-child)
margin-bottom: 10px
- &.is-rounded
- border-radius: 5px
+ // Modifiers
&.is-fullwidth
width: 100%
+ &.is-rounded
+ border-radius: 5px
padding: 4px 8px
text-align: center
vertical-align: top
+ // Responsiveness
+mobile
margin-bottom: 10px
+tablet
border-top: 1px solid rgba($border, 0.5)
margin-top: 10px
padding-top: 10px
+ // Sizes
&.is-large
& + .media
margin-top: 20px
padding-top: 20px
+ // Responsiveness
+tablet
&.is-large
.media-number
&:hover
background: $background
color: $link
+ // Modifiers
&.is-active
background: $link
color: $link-invert
- li ul
- border-left: 1px solid $border
- margin: 10px
- padding-left: 10px
+ li
+ ul
+ border-left: 1px solid $border
+ margin: 10px
+ padding-left: 10px
.menu-label
color: $text-light
overflow: auto
position: relative
width: 100%
+ // Responsiveness
+tablet
margin: 0 auto
max-height: calc(100vh - 40px)
overflow: hidden
position: fixed
z-index: 1986
+ // Modifiers
&.is-active
display: flex
.title,
.subtitle
margin-bottom: 0
+ // Responsiveness
+mobile
&:not(:last-child)
margin-bottom: 10px
-.navbar
- @extend .block
- code
- border-radius: $radius
- img
- display: inline-block
- vertical-align: top
- +tablet
- align-items: center
- display: flex
- justify-content: space-between
- & > .navbar-item
- &:not(.is-narrow)
- flex: 1
-
.navbar-left,
.navbar-right
.navbar-item
- &.is-flexible
- flex: 1
&:not(:last-child)
margin-right: 10px
+ // Modifiers
+ &.is-flexible
+ flex: 1
.navbar-left
+ // Responsiveness
+mobile
& + .navbar-right
margin-top: 20px
display: flex
.navbar-right
+ // Responsiveness
+tablet
align-items: center
display: flex
justify-content: flex-end
+
+.navbar
+ @extend .block
+ code
+ border-radius: $radius
+ img
+ display: inline-block
+ vertical-align: top
+ // Responsiveness
+ +tablet
+ align-items: center
+ display: flex
+ justify-content: space-between
+ & > .navbar-item
+ &:not(.is-narrow)
+ flex: 1
display: block
min-width: 32px
padding: 3px 8px
+ // Modifiers
&.is-active
background: $link
border-color: $link
display: flex
flex: 1
justify-content: center
+ // Responsiveness
+mobile
flex-wrap: wrap
& > a
font-size: $size-small
padding: 5px 10px 0
justify-content: center
- &:not(:last-child)
- border-bottom: 1px solid $border
a
border-bottom: 1px solid $border
margin-bottom: -1px
padding: 5px
+ // Modifiers
&.is-active
border-bottom-color: $link-active-border
color: $link-active
+ &:not(:last-child)
+ border-bottom: 1px solid $border
.panel-block
color: $text-strong
display: block
line-height: 16px
padding: 10px
+ &:hover
+ background: $background
&:not(:last-child)
border-bottom: 1px solid $border
- .checkbox
- border: 1px solid transparent
- border-radius: $radius
- display: block
- padding: 8px
- padding-left: 32px
- input
- left: 9px
- top: 9px
- &:hover
- border-color: $link
-
-a.panel-block:hover
- background: $background
-
-.panel-checkbox
- @extend .checkbox
- display: block
- padding: 9px 10px 9px 30px
- &:not(:last-child)
- border-bottom: 1px solid $border
- input
- left: 8px
- top: 10px
.panel
border: 1px solid $border
color: $text-strong
margin-bottom: 20px
width: 100%
- th,
- td
+ td,
+ th
border: 1px solid $border
border-width: 0 0 1px
padding: 8px 10px
vertical-align: top
- &.table-narrow
+ // Modifiers
+ &.table-icon
+ padding: 5px
+ text-align: center
white-space: nowrap
width: 1%
+ .fa
+ +fa(21px, 24px)
+ &.table-link
+ padding: 0
+ & > a
+ padding: 5px
&.table-link
padding: 0
& > a
&:hover
background: $link
color: $link-invert
- &.table-icon
- padding: 5px
- text-align: center
+ &.table-narrow
white-space: nowrap
width: 1%
- .fa
- +fa(21px, 24px)
- &.table-link
- padding: 0
- & > a
- padding: 5px
th
color: $text-strong
text-align: left
tr
&:hover
- background: rgba($background, 0.5)
+ background: $background
color: $text-strong
- &:last-child td
- border-bottom-width: 0
thead
- th,
- td
+ td,
+ th
border-width: 0 0 2px
color: $text-light
+ tbody
+ tr
+ &:last-child
+ td,
+ th
+ border-bottom-width: 0
tfoot
- th,
- td
+ td,
+ th
border-width: 2px 0 0
color: $text-light
+ // Modifiers
&.is-bordered
- th,
- td
+ td,
+ th
border-width: 1px
tr
- &:last-child td
- border-bottom-width: 1px
+ &:last-child
+ td,
+ th
+ border-bottom-width: 1px
&.is-narrow
- th,
- td
+ td,
+ th
padding: 5px 10px
- &.table-link
- padding: 0
- & > a
- padding: 5px 10px
+ // Modifiers
&.table-icon
padding: 2px
&.table-link
padding: 0
& > a
padding: 2px
+ &.table-link
+ padding: 0
+ & > a
+ padding: 5px 10px
&.is-striped
tbody
- tr:nth-child(2n)
- background: rgba($background, 0.5)
- &:hover
+ tr
+ &:nth-child(2n)
background: $background
+ &:hover
+ background: $border
overflow: hidden
overflow-x: auto
white-space: nowrap
- .fa
- font-size: 14px
- line-height: 20px
- margin: 2px -2px
- width: 20px
a
border-bottom: 1px solid $border
color: $text
vertical-align: top
& + li
margin-left: 20px
+ // Modifiers
&.is-active
a
border-bottom-color: $link
ul
border-bottom: 1px solid $border
display: flex
- &.is-centered
- a
- padding: 5px 10px
- li
- & + li
- margin-left: 0
- ul
- justify-content: center
- text-align: center
- &.is-right
- ul
- justify-content: flex-end
+ .fa
+ font-size: 14px
+ line-height: 20px
+ margin: 2px -2px
+ width: 20px
+ // Modifiers
&.is-boxed
a
border: 1px solid transparent
li
& + li
margin-left: 5px
+ // Modifiers
&.is-active
a
background: white
border-color: $border
border-bottom-color: transparent
+ // Modifiers
&.is-centered
li
&,
& + li
margin: 0 2px
+ &.is-centered
+ a
+ padding: 5px 10px
+ li
+ & + li
+ margin-left: 0
+ ul
+ justify-content: center
+ text-align: center
+ &.is-fullwidth
+ li
+ flex: 1
+ & + li
+ margin-left: 0
+ ul
+ justify-content: center
+ text-align: center
+ &.is-right
+ ul
+ justify-content: flex-end
&.is-toggle
a
border: 1px solid $border
border-radius: $radius 0 0 $radius
&:last-child a
border-radius: 0 $radius $radius 0
+ // Modifiers
&.is-active
a
background: $primary
z-index: 1
ul
border-bottom: none
- &.is-fullwidth
- li
- flex: 1
- & + li
- margin-left: 0
- ul
- justify-content: center
- text-align: center