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-deck-vertical
		@extend .flex-column
		flex-wrap: initial

		.card
			@extend .w-100
			@extend .flex-row
			flex: initial
			max-width: 100%

			.card-img-top
				@extend .rounded-0

			.embed-responsive
				@extend .mr-2
				max-width: 120px

		.card-body
			@extend .overflow-hidden

.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


	$card-progress-height: 5px
	.progress
		height: $card-progress-height
		position: absolute
		top: -$card-progress-height
		width: 100%

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

		i
			opacity: .2

/* Tiny label for cards. e.g. 'WATCHED' on videos. */
.card-label
	background-color: rgba($black, .5)
	border-radius: 3px
	color: $white
	display: block
	font-size: $font-size-xxs
	left: 5px
	top: -27px // enough to be above the progress-bar
	position: absolute
	padding: 1px 5px
	z-index: 1

.card
	&.active
		.card-title
			color: $primary
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
Typo 2018-09-15 05:50:10 +02:00			`&.card-deck-vertical`
Search: Layout and styling 2018-09-12 19:00:16 +02:00			`@extend .flex-column`
			`flex-wrap: initial`

			`.card`
			`@extend .w-100`
			`@extend .flex-row`
			`flex: initial`
			`max-width: 100%`

			`.card-img-top`
			`@extend .rounded-0`

			`.embed-responsive`
			`@extend .mr-2`
			`max-width: 120px`

			`.card-body`
			`@extend .overflow-hidden`
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
Thicker progress bar on cards 2018-09-11 19:45:42 +02:00			`$card-progress-height: 5px`
Layout and styling of asset groups 2018-09-11 15:14:51 +02:00			`.progress`
Thicker progress bar on cards 2018-09-11 19:45:42 +02:00			`height: $card-progress-height`
Layout and styling of asset groups 2018-09-11 15:14:51 +02:00			`position: absolute`
Thicker progress bar on cards 2018-09-11 19:45:42 +02:00			`top: -$card-progress-height`
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
CSS: $primary-accent color and gradient utils 2018-09-15 05:40:29 +02:00			`/* Tiny label for cards. e.g. 'WATCHED' on videos. */`
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`
CSS: $primary-accent color and gradient utils 2018-09-15 05:40:29 +02:00			`top: -27px // enough to be above the progress-bar`
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			`position: absolute`
			`padding: 1px 5px`
			`z-index: 1`
Search: Layout and styling 2018-09-12 19:00:16 +02:00
			`.card`
			`&.active`
			`.card-title`
			`color: $primary`