# visualizer/3.3.4/classes/Visualizer/Gutenberg/src/style.scss

Visualizer – Tables & Charts Manager with Built-in AI Generator, version 3.3.4. 260 lines.

- Page: https://pluginprobe.com/plugins/visualizer/3.3.4/code/classes/Visualizer/Gutenberg/src/style.scss
- Raw: https://pluginprobe.com/plugins/visualizer/3.3.4/raw/classes/Visualizer/Gutenberg/src/style.scss
- Modified: 2019-11-15T09:48:48+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/visualizer/3.3.4/code/classes/Visualizer/Gutenberg/src/style.scss#L10-L20`.

```scss
.visualizer-settings {
    background-color: #f8f9f9;
    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;
    font-size: 13px;
	position: relative;

	.visualizer-settings__title {
		margin: 0;
		padding: 1.5rem 0;
		text-align: center;
		border-bottom: 1px solid #e6eaee;

		.dashicon {
			vertical-align: top;
			margin-right: .25em;
		}
	}

	.visualizer-settings__content {
		padding: 2.5em 0;

		.visualizer-settings__content-description {
			margin: 0 0 1.5em 0;
			font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;
			font-size: 18px;
			text-align: center;
		}

		.visualizer-settings__content-option {
			display: -webkit-box;
			display: flex;
			-webkit-box-align: start;
			align-items: flex-start;
			flex-wrap: wrap;
			margin: 0 auto;
			padding: 1.25em 1.5em;
			max-width: 80%;
			background: #fff;
			border-width: 1px 1px 0;
			border-style: solid;
			border-color: #e6eaee;
			cursor: pointer;

			&.locked {
				cursor: default;

				&:hover {
					background: #ffffff;
				}
			}

			&:hover {
				background: #f5f5f5;
			}

			&:last-of-type {
				border-bottom-width: 1px;
			}

			.visualizer-settings__content-option-title {
				max-width: 80%;
				display: block;
				font-size: 1.25em;
			}

			.visualizer-settings__content-option-icon {
				align-self: center;
				margin-left: auto;
				color: #b9bcc2;

				.dashicon {
					height: 25px;
					width: 25px;
				}
			}
		}
	}

	.visualizer-settings__charts {
		text-align: center;
		padding-bottom: 25px;

		.visualizer-settings__charts-grid {
			display: grid;
			grid-template-columns: 50% 50%;
	
			.visualizer-settings__charts-single {
				margin: 25px;
				padding-bottom: 50px;
				background-color: #efefef;
				position: relative;
		
				.visualizer-settings__charts-title  {
					padding: 10px;
					font-weight: bold;
					text-align: center;
				}
		
				.visualizer-settings__charts-controls {
					width: 100%;
					position: absolute;
					bottom: 0;
					padding: 10px;
					font-weight: bold;
					text-align: center;
					cursor: pointer;
				}
			}
		}

		.dataTables_wrapper {
			background: #fff;
			padding: 10px;
		}

		.visualizer-no-charts {
			padding-top: 25px;
		}
	}

	.visualizer-settings__chart {
		text-align: center;

		.dataTables_wrapper {
			background: #fff;
			padding: 10px;
		}
	}

	.visualizer-settings__controls {
		margin: 0;
		padding: 1.5rem 0;
		text-align: center;
		border-top: 1px solid #e6eaee;
	}
}

.visualizer-advanced-panel {
	&.components-panel__body.is-opened {
		> .components-panel__body-title {
			margin-bottom: 0;
		}
	}
}

.visualizer-inner-sections {
	background: #f8f9f9;

	.components-panel__body-toggle {
		&:hover {
			background: #EEEEEE;
		}
	}

	ul {
		&.visualizer-list {
			list-style: disc;
			margin-left: 15px;
		}
	}
}

.components-panel__body-button {
	.components-panel__body-toggle {
		&.components-button {
			.dashicons-admin-tools {
				margin: -2px 6px -2px 0;
			}

			.dashicons-admin-users {
				margin: -2px 6px -2px 0;
			}

			.components-panel__arrow {
				width: 48px;
				height: 48px;
				right: 0;
				border-top: 1px solid #ddd;
				transform: translateY(-50%) rotate(270deg);
			}
		}
	}

	&.visualizer-panel-back {
		.components-panel__body-title {
			background: #f3f3f3;

			&:hover {
				background: #f3f3f3;
			}

			.components-panel__body-toggle {
				margin: 10px 0;
				background: #fff;

				&.components-button {
					padding-left: 60px;

					&:hover {
						.components-panel__arrow {
							background: #f3f3f3;
							border-width: 1px 1px 0 1px;
							border-color: #ddd;
							border-style: solid;
						}
					}
		
					.components-panel__arrow {
						left: 0;
						transform: translateY(-50%) rotate(90deg);
					}
				}
			}
		}
	}
}

.visualizer-chart-editor {
	max-width: 100%;
	margin: 25px 25px 0;

	.htEditor {
		margin-bottom: 20px;

		.htRowHeaders {
			height: auto !important;
			width: auto !important;
		}
		
		.ht_master {
			.wtHolder {
				height: auto !important;
				width: auto !important;
			}
		}
	}
}

.htContextMenu {
	&:not( .htGhostTable ) {
		z-index: 999999;
	}
}

.htDatepickerHolder {
	z-index: 999999 !important;
}

@media ( max-width: 768px ) {
	.visualizer-settings {

		.visualizer-settings__charts {

			.visualizer-settings__charts-grid {
				display: grid;
				grid-template-columns: 100%;
			}
		}
	}
}
```