pillar/src/styles/components/_card.sass

.card-deck
	// Custom, as of bootstrap 4.1.3 there is no way to do this.
	&.card-deck-responsive
		@extend .row

		.card
			@extend .col-md-3
			+media-xs
				flex: 1 0 50%
				max-width: 50%

			+media-sm
				flex: 1 0 33%
				max-width: 33%

			+media-md
				flex: 1 0 25%
				max-width: 25%

			+media-lg
				flex: 1 0 20%
				max-width: 20%


.card-padless
	.card
		@extend .border-0

	.card-body
		@extend .px-0


.card-image-fade
	&:hover
		.card-img-top
			opacity: .9


.card.asset
	color: $color-text

	&:hover
		text-decoration: none

	&.free
		overflow: hidden

		&:after
			+ribbon
			content: 'FREE'
			padding: 2px 50px

	.card-body
		position: relative // for placing the progress

		.card-text
			font-size: $font-size-xs

	.card-img-top
		background-color: $color-background
		background-size: cover
		background-position: center


	.progress
		height: 4px
		position: absolute
		top: -4px
		width: 100%

.card-img-top
	&.card-icon
		display: flex
		align-items: center
		justify-content: center
		font-size: 2em

		i
			opacity: .2

.card-label
	background-color: rgba($black, .5)
	border-radius: 3px
	color: $white
	display: block
	font-size: $font-size-xxs
	left: 5px
	top: -25px
	position: absolute
	padding: 1px 5px
	z-index: 1
CSS: Split into modules Don't place pure styling on top-level files (those that don't begin with underscore). Instead, import them as individual files. 2018-08-27 17:01:08 +02:00			`.card-deck`
			`// Custom, as of bootstrap 4.1.3 there is no way to do this.`
Tweaks to asset listing 2018-09-11 17:45:33 +02:00			`&.card-deck-responsive`
Layout and styling of asset groups 2018-09-11 15:14:51 +02:00			`@extend .row`

CSS: Split into modules Don't place pure styling on top-level files (those that don't begin with underscore). Instead, import them as individual files. 2018-08-27 17:01:08 +02:00			`.card`
Layout and styling of asset groups 2018-09-11 15:14:51 +02:00			`@extend .col-md-3`
			`+media-xs`
			`flex: 1 0 50%`
			`max-width: 50%`

			`+media-sm`
			`flex: 1 0 33%`
			`max-width: 33%`

			`+media-md`
			`flex: 1 0 25%`
			`max-width: 25%`

			`+media-lg`
			`flex: 1 0 20%`
			`max-width: 20%`
CSS: Split into modules Don't place pure styling on top-level files (those that don't begin with underscore). Instead, import them as individual files. 2018-08-27 17:01:08 +02:00

			`.card-padless`
			`.card`
Layout and styling of asset groups 2018-09-11 15:14:51 +02:00			`@extend .border-0`
CSS: Split into modules Don't place pure styling on top-level files (those that don't begin with underscore). Instead, import them as individual files. 2018-08-27 17:01:08 +02:00
			`.card-body`
Layout and styling of asset groups 2018-09-11 15:14:51 +02:00			`@extend .px-0`
CSS: Split into modules Don't place pure styling on top-level files (those that don't begin with underscore). Instead, import them as individual files. 2018-08-27 17:01:08 +02:00
Layout and styling of asset groups 2018-09-11 15:14:51 +02:00
			`.card-image-fade`
CSS: Split into modules Don't place pure styling on top-level files (those that don't begin with underscore). Instead, import them as individual files. 2018-08-27 17:01:08 +02:00			`&:hover`
Layout and styling of asset groups 2018-09-11 15:14:51 +02:00			`.card-img-top`
Asset: style and cleanup listing Font pillar aliases for asset icons 2018-09-11 19:37:22 +02:00			`opacity: .9`
Use list-asset() mixin component for project index 2018-09-10 19:02:27 +02:00

			`.card.asset`
			`color: $color-text`

Layout and styling of asset groups 2018-09-11 15:14:51 +02:00			`&:hover`
			`text-decoration: none`

Use list-asset() mixin component for project index 2018-09-10 19:02:27 +02:00			`&.free`
			`overflow: hidden`

			`&:after`
			`+ribbon`
			`content: 'FREE'`
			`padding: 2px 50px`

			`.card-body`
Layout and styling of asset groups 2018-09-11 15:14:51 +02:00			`position: relative // for placing the progress`

			`.card-text`
			`font-size: $font-size-xs`
Use list-asset() mixin component for project index 2018-09-10 19:02:27 +02:00
			`.card-img-top`
Layout and styling of asset groups 2018-09-11 15:14:51 +02:00			`background-color: $color-background`
Use list-asset() mixin component for project index 2018-09-10 19:02:27 +02:00			`background-size: cover`
			`background-position: center`
Layout and styling of asset groups 2018-09-11 15:14:51 +02:00
Asset: style and cleanup listing Font pillar aliases for asset icons 2018-09-11 19:37:22 +02:00
Layout and styling of asset groups 2018-09-11 15:14:51 +02:00			`.progress`
Video: new macro for showing video progress Import video_progress_bar from '_macros/_asset_video_progress.html' and pass it the video and current_user. 2018-09-11 16:11:05 +02:00			`height: 4px`
Layout and styling of asset groups 2018-09-11 15:14:51 +02:00			`position: absolute`
Video: new macro for showing video progress Import video_progress_bar from '_macros/_asset_video_progress.html' and pass it the video and current_user. 2018-09-11 16:11:05 +02:00			`top: -4px`
Layout and styling of asset groups 2018-09-11 15:14:51 +02:00			`width: 100%`

Asset: style and cleanup listing Font pillar aliases for asset icons 2018-09-11 19:37:22 +02:00			`.card-img-top`
			`&.card-icon`
			`display: flex`
			`align-items: center`
			`justify-content: center`
			`font-size: 2em`
Video: new macro for showing video progress Import video_progress_bar from '_macros/_asset_video_progress.html' and pass it the video and current_user. 2018-09-11 16:11:05 +02:00
Asset: style and cleanup listing Font pillar aliases for asset icons 2018-09-11 19:37:22 +02:00			`i`
			`opacity: .2`
Video: new macro for showing video progress Import video_progress_bar from '_macros/_asset_video_progress.html' and pass it the video and current_user. 2018-09-11 16:11:05 +02:00
			`.card-label`
			`background-color: rgba($black, .5)`
			`border-radius: 3px`
			`color: $white`
			`display: block`
			`font-size: $font-size-xxs`
			`left: 5px`
			`top: -25px`
			`position: absolute`
			`padding: 1px 5px`
			`z-index: 1`