bulma/sass/components/level.sass

.level
  +block
  align-items: center
  justify-content: space-between
  code
    border-radius: $radius
  img
    display: inline-block
    vertical-align: top
  // Modifiers
  &.is-mobile
    display: flex
    .level-left,
    .level-right
      display: flex
    .level-left + .level-right
      margin-top: 0
    .level-item
      &:not(:last-child)
        margin-bottom: 0
      &:not(.is-narrow)
        flex-grow: 1
      margin-right: 0.75rem
  // Responsiveness
  +tablet
    display: flex
    & > .level-item
      &:not(.is-narrow)
        flex-grow: 1

.level-item
  align-items: center
  display: flex
  flex-basis: auto
  flex-grow: 0
  flex-shrink: 0
  justify-content: center
  .title,
  .subtitle
    margin-bottom: 0
  // Responsiveness
  +mobile
    &:not(:last-child)
      margin-bottom: 0.75rem

.level-left,
.level-right
  flex-basis: auto
  flex-grow: 0
  flex-shrink: 0
  .level-item
    // Modifiers
    &.is-flexible
      flex-grow: 1
    // Responsiveness
    +tablet
      &:not(:last-child)
        margin-right: 0.75rem

.level-left
  align-items: center
  justify-content: flex-start
  // Responsiveness
  +mobile
    & + .level-right
      margin-top: 1.5rem
  +tablet
    display: flex

.level-right
  align-items: center
  justify-content: flex-end
  // Responsiveness
  +tablet
    display: flex
Add customisation variables 2017-07-28 20:05:15 +00:00			`.level`
			`+block`
			`align-items: center`
			`justify-content: space-between`
			`code`
			`border-radius: $radius`
			`img`
			`display: inline-block`
			`vertical-align: top`
			`// Modifiers`
			`&.is-mobile`
			`display: flex`
			`.level-left,`
			`.level-right`
			`display: flex`
			`.level-left + .level-right`
			`margin-top: 0`
			`.level-item`
			`&:not(:last-child)`
			`margin-bottom: 0`
			`&:not(.is-narrow)`
			`flex-grow: 1`
Update level.sass to fix issue with icons (#1193) * Update level.sass Removing `margin-right: 0.75rem` from the `level is-mobile` in #1153 changed the spacing of icons used in the `level-items`. This pr restores the margin-right for the icon class only to restore the behavior as before while keeping changes made in #1153. * Update level.sass the margin for icons should be only for level is-mobile. * Update level.sass * add margin-right to level-item * add margin to .level.is-mobile .level-item made suggested changes 2017-10-08 15:02:27 +00:00			`margin-right: 0.75rem`
Add customisation variables 2017-07-28 20:05:15 +00:00			`// Responsiveness`
			`+tablet`
			`display: flex`
			`& > .level-item`
			`&:not(.is-narrow)`
			`flex-grow: 1`

Add level, Finish nav, Fix hero 2016-05-08 00:35:43 +00:00			`.level-item`
Fix media object 2016-10-30 17:35:39 +00:00			`align-items: center`
			`display: flex`
Fix media object 2016-12-22 19:37:38 +00:00			`flex-basis: auto`
			`flex-grow: 0`
			`flex-shrink: 0`
Fix media object 2016-10-30 17:35:39 +00:00			`justify-content: center`
Add level, Finish nav, Fix hero 2016-05-08 00:35:43 +00:00			`.title,`
			`.subtitle`
			`margin-bottom: 0`
			`// Responsiveness`
			`+mobile`
			`&:not(:last-child)`
Fix media object 2016-10-30 17:35:39 +00:00			`margin-bottom: 0.75rem`
Remove trailing whitespaces (#1505) 2017-12-06 23:48:35 +00:00
Add level, Finish nav, Fix hero 2016-05-08 00:35:43 +00:00			`.level-left,`
			`.level-right`
Fix media object 2016-12-22 19:37:38 +00:00			`flex-basis: auto`
			`flex-grow: 0`
			`flex-shrink: 0`
Add level, Finish nav, Fix hero 2016-05-08 00:35:43 +00:00			`.level-item`
			`// Modifiers`
			`&.is-flexible`
Remove flex shorthand 2016-07-31 10:45:56 +00:00			`flex-grow: 1`
remove unwanted margin-right on .level-item at mobile breakpoint (#1153) 2017-09-04 10:55:20 +00:00			`// Responsiveness`
			`+tablet`
			`&:not(:last-child)`
			`margin-right: 0.75rem`
Add level, Finish nav, Fix hero 2016-05-08 00:35:43 +00:00
			`.level-left`
Fix media object 2016-10-30 17:35:39 +00:00			`align-items: center`
			`justify-content: flex-start`
Add level, Finish nav, Fix hero 2016-05-08 00:35:43 +00:00			`// Responsiveness`
			`+mobile`
			`& + .level-right`
Fix media object 2016-10-30 17:35:39 +00:00			`margin-top: 1.5rem`
Add level, Finish nav, Fix hero 2016-05-08 00:35:43 +00:00			`+tablet`
			`display: flex`

			`.level-right`
Fix media object 2016-10-30 17:35:39 +00:00			`align-items: center`
			`justify-content: flex-end`
Add level, Finish nav, Fix hero 2016-05-08 00:35:43 +00:00			`// Responsiveness`
			`+tablet`
			`display: flex`