ucsc-xena-client/dist/views/ColCard.module.css

UCSC Xena Client. Functional genomics visualizations.

/**
 * UCSC Xena Client
 * http://xena.ucsc.edu
 *
 * Custom CSS styling of MD cards, displayed after wizard setup is complete and each card contains a visualization.
 */

@value black6 from '../../css/variables.css';
@value black12 from '../../css/variables.css';
@value black38 from '../../css/variables.css';

/* Core styling of column. 'Column' class must not be namespaced as it is used in page-vizualization functionality, as 
   well as the add column hover functionality. */
:global(.Column) {
	cursor: default;
	overflow: visible;
	margin-left: 0;
	margin-right: 0;
	transition: margin 200ms 150ms ease-in-out; /* Match transition of opacity of ColumnAdd, this is for animating the add column hover functionality. */
	user-select: none;
}

:global(.Column:hover .resize-enable .react-resizable-handle) {
	opacity: 1;
}

/* Container around column label (A, B, C etc) and controls */
.headerContainer {
	align-items: center;
	border-bottom: 1px solid black12;
	display: flex;
	line-height: 0;
	justify-content: space-between;
	padding: 8px 16px;
}

/* Wrapper around controls that are passed in as a prop */
.controls > div {
	align-items: center;
	display: flex;
}

/* Icons */
.controls i {
	cursor: pointer;
}

.controls {
	position: relative;
}

/* Using a covering div to hide controls, instead of opacity,
 * because opacity is inherited by a nested menu, which makes the menu wink in
 * and out as the mouse moves. By using a cover, we do not affect the opacity
 * of the menu.
 */
.cover, .headerContainer:hover .cover.showOnHover {
	opacity: 0;
	visibility: hidden;
}

.cover.showOnHover {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	opacity: 1;
	visibility: visible;
	background-color: #ffffff;
	pointer-events: none;
	transition: opacity 200ms 150ms ease-in-out, visibility 200ms 150ms ease-in-out;
}

/* Wrapper around title/subtitle and controls. */
.titleContainer {
	border-bottom: 1px solid black12;
	display: flex;
	height: 61px; /* Includes border */
	margin-bottom: 8px; /* Add additional margin here to prevent visualization from bumping up against title */
	padding: 8px 16px;
}

.title {
	flex: 1;
	padding: 0 !important; /* Using important here to override cardTitle.small from theme. */
}

.title > div {
	width: 100%; /* Force RTB title to be full width */ 
}