@carbon/charts 1.16.10 → 1.17.0

package/scss/demos.scss

@@ -1,412 +0,0 @@
-@use '@carbon/styles/scss/config' with (
-	$css--font-face: false // Don't load Plex from ~@ibm/plex
-);
-
-@use 'globals'; // Load Carbon Charts global variables
-@use 'index'; // Load Carbon Charts styles
-@use '@carbon/styles';
-@use '@carbon/styles/scss/type';
-@use '@carbon/styles/scss/theme';
-@use '@carbon/colors';
-
-.#{globals.$prefix}--#{globals.$charts-prefix}--chart-wrapper {
-	overflow: visible;
-	font-family: var(--#{globals.$prefix}-charts-font-family-condensed);
-}
-
-html {
-	@include styles.theme(styles.$g100);
-	padding-bottom: 200px;
-}
-
-html[data-carbon-theme='white'] {
-	@include styles.theme(styles.$white);
-}
-
-html[data-carbon-theme='g10'] {
-	@include styles.theme(styles.$g10);
-}
-
-html[data-carbon-theme='g90'] {
-	@include styles.theme(styles.$g90);
-}
-
-html[data-carbon-theme='g100'] {
-	@include styles.theme(styles.$g100);
-}
-
-div.container {
-	color: theme.$text-primary;
-	background-color: theme.$background;
-	font-family: 'IBM Plex Sans', Arial, sans-serif;
-	padding: 30px;
-
-	div#color-palette-picker,
-	div#projection-picker {
-		max-width: 18rem;
-		margin-top: 2rem;
-	}
-
-	#chart-demo {
-		max-width: 700px;
-	}
-
-	.cds--grid {
-		padding: 0;
-
-		.cds--row .chart-demo {
-			margin-bottom: 60px;
-		}
-	}
-
-	h3 {
-		margin: 0;
-		font-weight: 700;
-
-		b.component {
-			margin-right: 10px;
-		}
-
-		span.cds--tag.component-name {
-			font-size: 0.55em;
-			vertical-align: middle;
-			padding: 0.25em 1em;
-			border-radius: 1em;
-			font-weight: 600;
-		}
-	}
-
-	div.theme-picker {
-		margin-top: 15px;
-	}
-
-	p.props {
-		b {
-			font-weight: 700;
-		}
-	}
-
-	// Replace with Carbon .scss imports
-	div.cds--snippet--multi {
-		background-color: black;
-		color: white;
-
-		pre {
-			padding: 2em !important;
-			-moz-tab-size: 4;
-			tab-size: 4;
-			line-height: 1.4;
-		}
-
-		.cds--snippet-container pre::after {
-			display: none;
-		}
-
-		.token.tag {
-			color: #6ea6ff;
-		}
-
-		.token.attr-name {
-			color: #92eeee;
-		}
-
-		.token.attr-value {
-			color: #bb8eff;
-		}
-	}
-
-	.cds--snippet--multi .cds--snippet-container pre code {
-		font-size: 14px;
-	}
-
-	.cds--snippet--multi.cds--snippet--expand .cds--snippet-container,
-	.cds--snippet--multi.cds--snippet--expand .cds--snippet-container pre {
-		padding-bottom: 0;
-	}
-
-	div.demo-desktop-only {
-		@media screen and (max-width: 768px) {
-			position: relative;
-			overflow: hidden;
-
-			&:before {
-				content: ' ';
-				display: block;
-				position: absolute;
-				z-index: 2;
-				top: 0;
-				left: 0;
-				background: #f4f4f4;
-				width: 100%;
-				height: 100%;
-			}
-		}
-
-		div.cp-message {
-			display: none;
-
-			@media screen and (max-width: 768px) {
-				position: absolute;
-				z-index: 2;
-				top: 50%;
-				left: 50%;
-				transform: translate(-50%, -50%);
-				display: block;
-				font-weight: bold;
-				text-align: center;
-			}
-		}
-	}
-
-	&.intro {
-		padding: 0;
-
-		.container-welcome {
-			padding: 0 !important;
-		}
-
-		.welcome__container {
-			width: 100vw;
-			min-height: 100vh;
-			padding: 3rem;
-			padding-bottom: 5rem;
-			background-color: #000;
-
-			@media screen and (max-width: 768px) {
-				&:before {
-					position: absolute;
-					display: block;
-					top: 0;
-					left: 0;
-					width: 100%;
-					height: 100%;
-					background: rgba(0, 0, 0, 0.45);
-					content: ' ';
-					z-index: 1;
-				}
-			}
-		}
-
-		.welcome__content {
-			position: relative;
-			z-index: 2;
-		}
-
-		.welcome__heading {
-			@include type.type-style('productive-heading-07');
-
-			color: #fff; // theme.$text-inverse;
-		}
-
-		.welcome__heading--subtitle {
-			font-weight: 600;
-		}
-
-		.welcome__heading--other {
-			@include type.type-style('productive-heading-04');
-
-			font-weight: 600;
-			color: #4587fd;
-		}
-
-		h5 {
-			margin-top: 2em;
-		}
-
-		span.netlify {
-			position: fixed;
-			left: 0;
-			bottom: 0;
-			padding: 1em 1.5em;
-			padding-left: 3rem;
-			border-top-right-radius: 2em;
-			font-size: 13px;
-			vertical-align: middle;
-			background-color: #292929;
-			color: #bcbcbc;
-
-			a {
-				color: #fff;
-				font-weight: 700;
-			}
-		}
-	}
-
-	.marginTop {
-		margin-top: 10px;
-
-		&-15 {
-			margin-top: 15px;
-		}
-
-		&-30 {
-			margin-top: 30px;
-		}
-
-		&-45 {
-			margin-top: 45px;
-		}
-	}
-
-	hr {
-		margin-bottom: 75px;
-		margin-top: 25px;
-	}
-}
-
-.resource-card-group {
-	display: flex;
-	flex-wrap: wrap;
-	margin-left: 0;
-	margin-right: 0;
-	margin-top: 30px;
-	max-width: 700px;
-
-	.#{globals.$prefix}--col-md-6.#{globals.$prefix}--col-lg-6 {
-		border: 1px solid theme.$background;
-		padding: 0;
-	}
-
-	.#{globals.$prefix}--col-lg-6 {
-		width: 100%;
-	}
-
-	@media (min-width: 42rem) {
-		.#{globals.$prefix}--col-md-6 {
-			display: block;
-			max-width: 75%;
-			flex: 0 0 75%;
-		}
-	}
-
-	@media (min-width: 66rem) {
-		.#{globals.$prefix}--col-lg-6 {
-			display: block;
-			max-width: 50%;
-			flex: 0 0 50%;
-		}
-	}
-}
-
-.#{globals.$prefix}--aspect-ratio--object {
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-}
-
-.#{globals.$prefix}--resource-card .#{globals.$prefix}--tile {
-	background: theme.$layer-01;
-	height: 100%;
-	padding: 1rem 25% 1rem 1rem;
-	position: relative;
-	transition: background 70ms;
-	text-decoration: none;
-}
-
-.#{globals.$prefix}--resource-card .#{globals.$prefix}--tile:hover {
-	background: theme.$background-hover;
-}
-
-.#{globals.$prefix}--resource-card__title {
-	@include type.type-style('productive-heading-03');
-	text-decoration: none;
-	color: theme.$text-primary;
-}
-
-.#{globals.$prefix}--resource-card__subtitle {
-	@include type.type-style('heading-01');
-	font-weight: 400;
-	text-decoration: none;
-	color: theme.$text-primary;
-}
-
-.#{globals.$prefix}--resource-card__icon--img {
-	position: absolute;
-	bottom: 1rem;
-	left: 1rem;
-	min-width: 32px;
-	min-height: 32px;
-	display: flex;
-	align-items: flex-end;
-}
-
-.#{globals.$prefix}--resource-card__icon--img .gatsby-resp-image-wrapper,
-.#{globals.$prefix}--resource-card__icon--img img[src*='gif'],
-.#{globals.$prefix}--resource-card__icon--img img[src*='svg'] {
-	margin-bottom: 0;
-}
-
-.#{globals.$prefix}--resource-card__icon--img .gatsby-resp-image-wrapper {
-	position: static !important; //important needed to override inline style added by Gatsby
-}
-
-.#{globals.$prefix}--resource-card__icon--action {
-	position: absolute;
-	bottom: 1rem;
-	right: 1rem;
-	width: 20px;
-	height: 20px;
-}
-
-.#{globals.$prefix}--resource-card .#{globals.$prefix}--resource-card__icon--action svg {
-	fill: theme.$icon-primary;
-}
-
-// Dark
-.#{globals.$prefix}--resource-card--dark .#{globals.$prefix}--tile {
-	background: colors.$gray-90; //$background for gray 90 theme
-}
-
-.#{globals.$prefix}--resource-card--dark .#{globals.$prefix}--tile:hover {
-	background: colors.$gray-80; //$background-hover for gray 90 theme
-}
-
-.#{globals.$prefix}--resource-card--dark .#{globals.$prefix}--resource-card__title,
-.#{globals.$prefix}--resource-card--dark .#{globals.$prefix}--resource-card__subtitle {
-	color: theme.$text-on-color;
-}
-
-.#{globals.$prefix}--resource-card--dark .#{globals.$prefix}--resource-card__icon--action svg {
-	fill: colors.$gray-10;
-}
-
-// Disabled
-.#{globals.$prefix}--resource-card--disabled .#{globals.$prefix}--tile:hover {
-	background: theme.$layer-01;
-	cursor: not-allowed;
-}
-
-.#{globals.$prefix}--resource-card--disabled .#{globals.$prefix}--resource-card__title,
-.#{globals.$prefix}--resource-card--disabled .#{globals.$prefix}--resource-card__subtitle {
-	color: theme.$icon-on-color-disabled;
-}
-
-.#{globals.$prefix}--resource-card--disabled .#{globals.$prefix}--resource-card__icon--action svg {
-	fill: theme.$icon-disabled;
-}
-
-.#{globals.$prefix}--resource-card--disabled .#{globals.$prefix}--resource-card__icon--img {
-	filter: grayscale(100%);
-	opacity: 0.5;
-}
-
-// Disabled dark
-.#{globals.$prefix}--resource-card--disabled.#{globals.$prefix}--resource-card--dark
-	.#{globals.$prefix}--tile:hover {
-	background: colors.$gray-90; //$background for gray 90 theme
-}
-
-.#{globals.$prefix}--resource-card--disabled.#{globals.$prefix}--resource-card--dark
-	.#{globals.$prefix}--resource-card__title,
-.#{globals.$prefix}--resource-card--disabled.#{globals.$prefix}--resource-card--dark
-	.#{globals.$prefix}--resource-card__subtitle {
-	color: colors.$gray-50; //$icon-on-color-disabled for gray 90
-}
-
-.#{globals.$prefix}--resource-card--disabled.#{globals.$prefix}--resource-card--dark
-	.#{globals.$prefix}--resource-card__icon--action
-	svg {
-	fill: colors.$gray-70; //$disabled-02 for gray 90
-}