bulma/sass/components/media.scss
2022-11-23 21:20:16 +00:00

82 lines
1.6 KiB
SCSS

@import "../utilities/mixins";
$media-border-color: bulmaRgba($border, 0.5) !default;
$media-border-size: 1px !default;
$media-spacing: 1rem !default;
$media-spacing-large: 1.5rem !default;
$media-content-spacing: 0.75rem !default;
$media-level-1-spacing: 0.75rem !default;
$media-level-1-content-spacing: 0.5rem !default;
$media-level-2-spacing: 0.5rem !default;
.media {
align-items: flex-start;
display: flex;
text-align: inherit;
.content:not(:last-child) {
margin-bottom: $media-content-spacing;
}
.media {
border-top: $media-border-size solid $media-border-color;
display: flex;
padding-top: $media-level-1-spacing;
.content:not(:last-child),
.control:not(:last-child) {
margin-bottom: $media-level-1-content-spacing;
}
.media {
padding-top: $media-level-2-spacing;
& + .media {
margin-top: $media-level-2-spacing;
}
}
}
& + .media {
border-top: $media-border-size solid $media-border-color;
margin-top: $media-spacing;
padding-top: $media-spacing;
}
// Sizes
&.is-large {
& + .media {
margin-top: $media-spacing-large;
padding-top: $media-spacing-large;
}
}
}
.media-left,
.media-right {
flex-basis: auto;
flex-grow: 0;
flex-shrink: 0;
}
.media-left {
@include ltr-property("margin", $media-spacing);
}
.media-right {
@include ltr-property("margin", $media-spacing, false);
}
.media-content {
flex-basis: auto;
flex-grow: 1;
flex-shrink: 1;
text-align: inherit;
}
@include mobile {
.media-content {
overflow-x: auto;
}
}