pillar/src/styles/components/_card.sass

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

		.card
			@extend .col-md-4

			+media-lg
				background: green

	&.card-4-columns
		@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-stretch
	.card-body
		@extend .d-flex
		@extend .flex-column

		.card-text
			@extend .mt-auto

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

	&:hover
		.card-img-top
			opacity: 1


.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: 3px
		position: absolute
		top: -3px
		width: 100%

.progress-bar
	background-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.`
			`&.card-3-columns`
Layout and styling of asset groups 2018-09-11 15:14:51 +02:00			`@extend .row`

			`.card`
			`@extend .col-md-4`

			`+media-lg`
			`background: green`

			`&.card-4-columns`
			`@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-stretch`
			`.card-body`
			`@extend .d-flex`
			`@extend .flex-column`

			`.card-text`
			`@extend .mt-auto`

			`.card-image-fade`
			`.card-img-top`
			`opacity: .9`
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`
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			`opacity: 1`
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
			`.progress`
			`height: 3px`
			`position: absolute`
			`top: -3px`
			`width: 100%`

			`.progress-bar`
			`background-color: $primary`