<commit_before>

//Cards
//
//Cards are used to show a large number of same size content. Providing filters or ways to sort cards is good.
//
//Markup:
//	<div class="card-group">
//		<div class="wfm-card" tabindex="0"><h2>Title</h2></div>
//		<div class="wfm-card wfm-card-disabled" tabindex="0"><h2>Title</h2></div>
//		<div class="wfm-card" tabindex="0"><h2>Title</h2></div>
//		<div class="wfm-card" tabindex="0"><h2>Title</h2></div>
//		<div class="wfm-card" tabindex="0"><h2>Title</h2></div>
//		<div class="wfm-card" tabindex="0"><h2>Title</h2></div>
//		<div class="wfm-card" tabindex="0"><h2>Title</h2></div>
//	</div>
//
//Styleguide 1.18
//
.card-group {
	display: inline-block;
	width: 100%;
	transition: 1s all ease-in-out;
}

 .wfm-card {
	 display: block;
	 width: auto;
	 background:$white;
	 float: left;
	 min-width: 15rem;
	 min-height: 150px;
	 @extend .material-depth-1;
	 margin: 5px;
	 cursor:pointer;
	 padding: 10px;
	 transition:0.2s all ease-in-out;

	 &:hover,&:focus{
	 	box-shadow: 0 8px 17px 0 rgba(0,0,0,.2)!important;
	 }
 }

 .wfm-card-disabled {
	 background-color:$gray026;

	 &:hover{
	 	box-shadow: 0 8px 17px 0 rgba(0,0,0,.2)!important;
		cursor: not-allowed;
	 }
 }

 // Card List<commit_msg>refactor card grids<commit_after>

//Card grid
//
// Cards are used to show a large number of similar content. Providing filters or ways to sort cards is appreciated.
// Card actions should be triggered on click of the whole card.
//
//Markup:
//<div class="wfm-grid">
// <div class="grid-card">
//	 <div class="list-content">
//		 <h2>Card header</h2>
//		 <span>Short card tag line</span>
//	 </div>
// </div>
// <div class="grid-card">
//	 <div class="list-content">
//		 <h2>Card header</h2>
//		 <span>Short card tag line</span>
//	 </div>
// </div>
// <div class="grid-card">
//	 <div class="list-content">
//		 <h2>Card header</h2>
//		 <span>Short card tag line</span>
//	 </div>
// </div>
//</div>
//
//Styleguide 1.18
//

//Mini card grid
//
//Smaller cards that provide more items on screen at once.
//
//Markup:
//<div class="wfm-grid">
// <div class="grid-card-mini">
//	 <div class="list-content">
//		 <h2>Card header</h2>
//		 <span>Short card tag line</span>
//	 </div>
// </div>
// <div class="grid-card-mini">
//	 <div class="list-content">
//		 <h2>Card header</h2>
//		 <span>Short card tag line</span>
//	 </div>
// </div>
// <div class="grid-card-mini">
//	 <div class="list-content">
//		 <h2>Card header</h2>
//		 <span>Short card tag line</span>
//	 </div>
// </div>
// <div class="grid-card-mini">
//	 <div class="list-content">
//		 <h2>Card header</h2>
//		 <span>Short card tag line</span>
//	 </div>
// </div>
// <div class="grid-card-mini">
//	 <div class="list-content">
//		 <h2>Card header</h2>
//		 <span>Short card tag line</span>
//	 </div>
// </div>
// <div class="grid-card-mini">
//	 <div class="list-content">
//		 <h2>Card header</h2>
//		 <span>Short card tag line</span>
//	 </div>
// </div>
//</div>
//
//Styleguide 1.18.1
//

 .wfm-grid {
	display: flex;
	flex-wrap: wrap;

	.grid-card-disabled{
		background: $gray012;
		pointer-events: none;
		cursor: not-allowed!important;
	}

	.grid-card, .grid-card-mini  {
 	 display: flex;
 	 padding: $full-padding;
 	 width: 100%;
  }

	@media all and (min-width: 768px) {
		.grid-card {
			width: 50%;
		}

		.grid-card-mini{
			width:25%;
		}
	}

	@media all and (min-width: 960px) {
		.grid-card {
			width: 33.33%;
		}

		.grid-card-mini{
			width:16.66%;
		}
	}

	.list-content {
		background-color: $white;
		display: flex;
		flex-direction: column;
		padding:$full-padding;
		width: 100%;

		@extend .material-depth-1;
		@extend .raise;
	}

	.list-content span {
		flex: 1 0 auto;
		padding-bottom: $full-padding;
	 }
 }

 .card-group {
	 display: inline-block;
	 width: 100%;
	 transition: 1s all ease-in-out;
 }

 .wfm-card {
	 display: block;
	 width: auto;
	 background:$white;
	 float: left;
	 min-width: 15rem;
	 min-height: 150px;
	 @extend .material-depth-1;
	 margin: 5px;
	 cursor:pointer;
	 padding: 10px;
	 transition:0.2s all ease-in-out;

	 &:hover,&:focus{
	 	box-shadow: 0 8px 17px 0 rgba(0,0,0,.2)!important;
	 }
 }

 .wfm-card-disabled {
	 background-color:$gray026;

	 &:hover{
	 	box-shadow: 0 8px 17px 0 rgba(0,0,0,.2)!important;
		cursor: not-allowed;
	 }
 }

 // Card List
{'fraction_non_alphanumeric': 0.21345975948196114, 'fraction_numerical': 0.0349213691026827, 'mean_word_length': 2.797190517998244, 'pattern_counts': {'":': 0, '<': 109, '<?xml version=': 0, '>': 109, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5954891', 'n_tokens_mistral': 1922, 'n_tokens_neox': 1703, 'n_words': 383}