bookwyrm/bookwyrm/static/css/vendor/bulma/sass/components/level.sass
Mouse Reeve 6daaffeaa7
Compiles css framework from sass (#1956)
* Compiles css framework from sass

* Adds watch commands

* Copies existing css to sass file

* Moves sass out of static path

* Removes global linter

I wasn't sure how to customize this, and it's not providing a lot of
additional value on top of the domain-specific linters

* Reverts invalid change to dockerfile

* Changes stylelint path

* Remove unused bulma files

* Properly minifies generated css

* Fixes regression in thread display

* rgba function only works with percents for whatever reason

* Hush stylelint

* Removes trailing zeros

* Compile sass in Django

Co-authored-by: Joachim <joachim.robert@protonmail.com>

* Python formatting

* Updates linter

* Updates commands

* Adds css-config file

Co-authored-by: Joachim <joachim.robert@protonmail.com>

* Stylelint fix

* Removes unused compiled bulma files

Co-authored-by: Joachim <joachim.robert@protonmail.com>
2022-02-19 15:29:47 -08:00

80 lines
1.5 KiB
Sass

@import "../utilities/mixins"
$level-item-spacing: ($block-spacing * 0.5) !default
.level
@extend %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
+ltr-property("margin", $level-item-spacing)
&:not(.is-narrow)
flex-grow: 1
// 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: $level-item-spacing
.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)
+ltr-property("margin", $level-item-spacing)
.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