nodebb/public/scss/responsive-utilities.scss

//
// Responsive: Utility classes
// --------------------------------------------------

// borders, see https://getbootstrap.com/docs/5.2/utilities/api/#enable-responsive
$utilities: map-merge(
  $utilities, (
    "border": map-merge(
      map-get($utilities, "border"),
      ( responsive: true ),
    ),
	"border-start": map-merge(
      map-get($utilities, "border-start"),
      ( responsive: true ),
    ),
	"border-end": map-merge(
      map-get($utilities, "border-end"),
      ( responsive: true ),
    ),
	"border-top": map-merge(
		map-get($utilities, "border-top"),
		( responsive: true ),
	  ),
	"border-bottom": map-merge(
		map-get($utilities, "border-bottom"),
		( responsive: true ),
	),
  )
);

// ported to scss from bs3 less
@mixin responsive-visibility() {
	display: block !important;
	// TODO: fix for scss
	// table&  { display: table; }
	// tr&     { display: table-row !important; }
	// th&,
	// td&     { display: table-cell !important; }
}

@mixin responsive-invisibility() {
	display: none !important;
}


// Visibility utilities
// Note: Deprecated .visible-xs, .visible-sm, .visible-md, and .visible-lg as of v3.2.0
.visible-xs,
.visible-sm,
.visible-md,
.visible-lg {
	@include responsive-invisibility();
}

.visible-xs-block,
.visible-xs-inline,
.visible-xs-inline-block,
.visible-sm-block,
.visible-sm-inline,
.visible-sm-inline-block,
.visible-md-block,
.visible-md-inline,
.visible-md-inline-block,
.visible-lg-block,
.visible-lg-inline,
.visible-lg-inline-block {
	display: none !important;
}

.visible-xs {
	@include media-breakpoint-down(sm) {
		@include responsive-visibility();
	}
}

.visible-xs-block {
	@include media-breakpoint-down(sm) {
		display: block !important;
	}
}
.visible-xs-inline {
	@include media-breakpoint-down(sm) {
		display: inline !important;
	}
}
.visible-xs-inline-block {
	@include media-breakpoint-down(sm) {
		display: inline-block !important;
	}
}

.visible-sm {
	// @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
	@include media-breakpoint-between(sm, md) {
		@include responsive-visibility();
	}
}
.visible-sm-block {
	// @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
	@include media-breakpoint-between(sm, md) {
		display: block !important;
	}
}
.visible-sm-inline {
	// @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
	@include media-breakpoint-between(sm, md) {
		display: inline !important;
	}
}
.visible-sm-inline-block {
	// @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
	@include media-breakpoint-between(sm, md) {
		display: inline-block !important;
	}
}

.visible-md {
	// @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
	@include media-breakpoint-between(md, lg) {
		@include responsive-visibility();
	}
}
.visible-md-block {
	// @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
	@include media-breakpoint-between(md, lg) {
		display: block !important;
	}
}
.visible-md-inline {
	// @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
	@include media-breakpoint-between(md, lg) {
		display: inline !important;
	}
}
.visible-md-inline-block {
	// @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
	@include media-breakpoint-between(md, lg) {
		display: inline-block !important;
	}
}

.visible-lg {
	// @media (min-width: @screen-lg-min) {
	@include media-breakpoint-up(lg) {
		@include responsive-visibility();
	}
}
.visible-lg-block {
	// @media (min-width: @screen-lg-min) {
	@include media-breakpoint-up(lg) {
		display: block !important;
	}
}
.visible-lg-inline {
	// @media (min-width: @screen-lg-min) {
	@include media-breakpoint-up(lg) {
		display: inline !important;
	}
}
.visible-lg-inline-block {
	// @media (min-width: @screen-lg-min) {
	@include media-breakpoint-up(lg) {
		display: inline-block !important;
	}
}

.hidden-xs {
	@include media-breakpoint-down(sm) {
		@include responsive-invisibility();
	}
}
.hidden-sm {
	@include media-breakpoint-between(sm, md) {
	// @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
		@include responsive-invisibility();
	}
}
.hidden-md {
	@include media-breakpoint-between(md, lg) {
	//@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
		@include responsive-invisibility();
	}
}
.hidden-lg {
	@include media-breakpoint-up(lg) {
	//@media (min-width: @screen-lg-min) {
		@include responsive-invisibility();
	}
}