@schukai/monster/source/components/style/data-grid.css

Monster is a simple library for creating fast, robust and lightweight websites.

/** generated from data-grid.pcss **/
.monster-data-grid-container {
	background-color: var(--monster-bg-color-primary-2);
	box-sizing: border-box;
	color: var(--monster-color-primary-2);
	display: block;
	overflow-x: auto;
	padding: 20px;
	width: 100%;
}
.monster-data-grid-container > div {
	display: grid;
}
.monster-data-grid-container .col-1 {
	grid-column: 1;
}
.monster-data-grid-container .col-1,
.monster-data-grid-container .col-2 {
	background-color: var(--monster-bg-color-primary-1);
	border: none;
	color: var(--monster-color-primary-1);
	display: flex;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.6;
	padding: .4rem;
}
.monster-data-grid-container .col-2 {
	grid-column: 2;
}
.monster-data-grid-container .col-3 {
	grid-column: 3;
}
.monster-data-grid-container .col-3,
.monster-data-grid-container .col-4 {
	background-color: var(--monster-bg-color-primary-1);
	border: none;
	color: var(--monster-color-primary-1);
	display: flex;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.6;
	padding: .4rem;
}
.monster-data-grid-container .col-4 {
	grid-column: 4;
}
.monster-data-grid-container .col-5 {
	grid-column: 5;
}
.monster-data-grid-container .col-5,
.monster-data-grid-container .col-6 {
	background-color: var(--monster-bg-color-primary-1);
	border: none;
	color: var(--monster-color-primary-1);
	display: flex;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.6;
	padding: .4rem;
}
.monster-data-grid-container .col-6 {
	grid-column: 6;
}
.monster-data-grid-container .col-7 {
	grid-column: 7;
}
.monster-data-grid-container .col-7,
.monster-data-grid-container .col-8 {
	background-color: var(--monster-bg-color-primary-1);
	border: none;
	color: var(--monster-color-primary-1);
	display: flex;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.6;
	padding: .4rem;
}
.monster-data-grid-container .col-8 {
	grid-column: 8;
}
.monster-data-grid-container .col-9 {
	grid-column: 9;
}
.monster-data-grid-container .col-10,
.monster-data-grid-container .col-9 {
	background-color: var(--monster-bg-color-primary-1);
	border: none;
	color: var(--monster-color-primary-1);
	display: flex;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.6;
	padding: .4rem;
}
.monster-data-grid-container .col-10 {
	grid-column: 10;
}
.monster-data-grid-container .col-11 {
	grid-column: 11;
}
.monster-data-grid-container .col-11,
.monster-data-grid-container .col-12 {
	background-color: var(--monster-bg-color-primary-1);
	border: none;
	color: var(--monster-color-primary-1);
	display: flex;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.6;
	padding: .4rem;
}
.monster-data-grid-container .col-12 {
	grid-column: 12;
}
.monster-data-grid-container .col-13 {
	grid-column: 13;
}
.monster-data-grid-container .col-13,
.monster-data-grid-container .col-14 {
	background-color: var(--monster-bg-color-primary-1);
	border: none;
	color: var(--monster-color-primary-1);
	display: flex;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.6;
	padding: .4rem;
}
.monster-data-grid-container .col-14 {
	grid-column: 14;
}
.monster-data-grid-container .col-15 {
	grid-column: 15;
}
.monster-data-grid-container .col-15,
.monster-data-grid-container .col-16 {
	background-color: var(--monster-bg-color-primary-1);
	border: none;
	color: var(--monster-color-primary-1);
	display: flex;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.6;
	padding: .4rem;
}
.monster-data-grid-container .col-16 {
	grid-column: 16;
}
.monster-data-grid-container .col-17 {
	grid-column: 17;
}
.monster-data-grid-container .col-17,
.monster-data-grid-container .col-18 {
	background-color: var(--monster-bg-color-primary-1);
	border: none;
	color: var(--monster-color-primary-1);
	display: flex;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.6;
	padding: .4rem;
}
.monster-data-grid-container .col-18 {
	grid-column: 18;
}
.monster-data-grid-container .col-19 {
	grid-column: 19;
}
.monster-data-grid-container .col-19,
.monster-data-grid-container .col-20 {
	background-color: var(--monster-bg-color-primary-1);
	border: none;
	color: var(--monster-color-primary-1);
	display: flex;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.6;
	padding: .4rem;
}
.monster-data-grid-container .col-20 {
	grid-column: 20;
}
.monster-data-grid-container .col-21 {
	grid-column: 21;
}
.monster-data-grid-container .col-21,
.monster-data-grid-container .col-22 {
	background-color: var(--monster-bg-color-primary-1);
	border: none;
	color: var(--monster-color-primary-1);
	display: flex;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.6;
	padding: .4rem;
}
.monster-data-grid-container .col-22 {
	grid-column: 22;
}
.monster-data-grid-container .col-23 {
	grid-column: 23;
}
.monster-data-grid-container .col-23,
.monster-data-grid-container .col-24 {
	background-color: var(--monster-bg-color-primary-1);
	border: none;
	color: var(--monster-color-primary-1);
	display: flex;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.6;
	padding: .4rem;
}
.monster-data-grid-container .col-24 {
	grid-column: 24;
}
.monster-data-grid-container .col-25 {
	grid-column: 25;
}
.monster-data-grid-container .col-25,
.monster-data-grid-container .col-26 {
	background-color: var(--monster-bg-color-primary-1);
	border: none;
	color: var(--monster-color-primary-1);
	display: flex;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.6;
	padding: .4rem;
}
.monster-data-grid-container .col-26 {
	grid-column: 26;
}
.monster-data-grid-container .col-27 {
	grid-column: 27;
}
.monster-data-grid-container .col-27,
.monster-data-grid-container .col-28 {
	background-color: var(--monster-bg-color-primary-1);
	border: none;
	color: var(--monster-color-primary-1);
	display: flex;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.6;
	padding: .4rem;
}
.monster-data-grid-container .col-28 {
	grid-column: 28;
}
.monster-data-grid-container .col-29 {
	grid-column: 29;
}
.monster-data-grid-container .col-29,
.monster-data-grid-container .col-30 {
	background-color: var(--monster-bg-color-primary-1);
	border: none;
	color: var(--monster-color-primary-1);
	display: flex;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.6;
	padding: .4rem;
}
.monster-data-grid-container .col-30 {
	grid-column: 30;
}
.monster-data-grid-container .col-31 {
	grid-column: 31;
}
.monster-data-grid-container .col-31,
.monster-data-grid-container .col-32 {
	background-color: var(--monster-bg-color-primary-1);
	border: none;
	color: var(--monster-color-primary-1);
	display: flex;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.6;
	padding: .4rem;
}
.monster-data-grid-container .col-32 {
	grid-column: 32;
}
.monster-data-grid-container .col-33 {
	grid-column: 33;
}
.monster-data-grid-container .col-33,
.monster-data-grid-container .col-34 {
	background-color: var(--monster-bg-color-primary-1);
	border: none;
	color: var(--monster-color-primary-1);
	display: flex;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.6;
	padding: .4rem;
}
.monster-data-grid-container .col-34 {
	grid-column: 34;
}
.monster-data-grid-container .col-35 {
	grid-column: 35;
}
.monster-data-grid-container .col-35,
.monster-data-grid-container .col-36 {
	background-color: var(--monster-bg-color-primary-1);
	border: none;
	color: var(--monster-color-primary-1);
	display: flex;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.6;
	padding: .4rem;
}
.monster-data-grid-container .col-36 {
	grid-column: 36;
}
.monster-data-grid-container .col-37 {
	grid-column: 37;
}
.monster-data-grid-container .col-37,
.monster-data-grid-container .col-38 {
	background-color: var(--monster-bg-color-primary-1);
	border: none;
	color: var(--monster-color-primary-1);
	display: flex;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.6;
	padding: .4rem;
}
.monster-data-grid-container .col-38 {
	grid-column: 38;
}
.monster-data-grid-container .col-39 {
	grid-column: 39;
}
.monster-data-grid-container .col-39,
.monster-data-grid-container .col-40 {
	background-color: var(--monster-bg-color-primary-1);
	border: none;
	color: var(--monster-color-primary-1);
	display: flex;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.6;
	padding: .4rem;
}
.monster-data-grid-container .col-40 {
	grid-column: 40;
}
.monster-data-grid-container .col-41 {
	grid-column: 41;
}
.monster-data-grid-container .col-41,
.monster-data-grid-container .col-42 {
	background-color: var(--monster-bg-color-primary-1);
	border: none;
	color: var(--monster-color-primary-1);
	display: flex;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.6;
	padding: .4rem;
}
.monster-data-grid-container .col-42 {
	grid-column: 42;
}
.monster-data-grid-container .col-43 {
	grid-column: 43;
}
.monster-data-grid-container .col-43,
.monster-data-grid-container .col-44 {
	background-color: var(--monster-bg-color-primary-1);
	border: none;
	color: var(--monster-color-primary-1);
	display: flex;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.6;
	padding: .4rem;
}
.monster-data-grid-container .col-44 {
	grid-column: 44;
}
.monster-data-grid-container .col-45 {
	grid-column: 45;
}
.monster-data-grid-container .col-45,
.monster-data-grid-container .col-46 {
	background-color: var(--monster-bg-color-primary-1);
	border: none;
	color: var(--monster-color-primary-1);
	display: flex;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.6;
	padding: .4rem;
}
.monster-data-grid-container .col-46 {
	grid-column: 46;
}
.monster-data-grid-container .col-47 {
	grid-column: 47;
}
.monster-data-grid-container .col-47,
.monster-data-grid-container .col-48 {
	background-color: var(--monster-bg-color-primary-1);
	border: none;
	color: var(--monster-color-primary-1);
	display: flex;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.6;
	padding: .4rem;
}
.monster-data-grid-container .col-48 {
	grid-column: 48;
}
.monster-data-grid-container .col-49 {
	grid-column: 49;
}
.monster-data-grid-container .col-49,
.monster-data-grid-container .col-50 {
	background-color: var(--monster-bg-color-primary-1);
	border: none;
	color: var(--monster-color-primary-1);
	display: flex;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.6;
	padding: .4rem;
}
.monster-data-grid-container .col-50 {
	grid-column: 50;
}
.monster-data-grid-container .col-start-end {
	grid-column: 1 / -1;
}
.monster-data-grid-container .header {
	font-size: 1rem;
	font-weight: 600;
	font-weight: 400;
	line-height: 1.6;
	margin-bottom: .4rem;
}