Contents

@mixin visible-on($size, $display: inherit) {
	@if $size == large {
		&.show-for-large,
		&.hide-for-small { display: $display !important; }
	} @else if $size == small {
		&.show-for-small,
		&.hide-for-large { display: $display !important; }
	}
}

// Elements that need special `display`
@mixin special-display($size) {
	table {
		@include visible-on($size, table);
	}
	thead {
		@include visible-on($size, table-header-group);
	}
	tbody {
		@include visible-on($size, table-row-group);
	}
	tr {
		@include visible-on($size, table-row);
	}
	td, th {
		@include visible-on($size, table-cell);
	}
	span, b, em, strong, .bold, .italic, code {
		@include visible-on($size, inline-block);
	}
}

@if $include-visibility {
	
/* ---------------
EDGE Visibility
--------------- */

/* Above small breakpoint (>#{$small-screen}) */
.show-for-small,
.hide-for-large { display: none !important; }
.show-for-large,
.hide-for-small { display: inherit !important; }
@include special-display(large);

/* Below small breakpoint (<=#{$small-screen}) */
@include small {
	.show-for-large,
	.hide-for-small { display: none !important; }
	.show-for-small,
	.hide-for-large { display: inherit !important; }
	@include special-display(small);
}

}

Version data entries

2 entries across 2 versions & 1 rubygems

Version	Path
edge_framework-0.5.0	assets/sass/edge/components/_visibility.scss
edge_framework-0.3.0	assets/sass/edge/components/_visibility.scss