gojs/projects/floorplanner/FloorPlanner.css

Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams

/********************************************** MAIN CONTENT STYLING ***********************************************/
body {font-family: Arial; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;}
canvas:focus {outline:0;} /*don't outline palette and diagram when they are focused*/
p, h1,h2,h3,h4,h5,h6{cursor: default}
/*Style placeholder text to be black on all browsers*/
::-webkit-input-placeholder { color: black; }
::-moz-placeholder { color: black; }
:-ms-input-placeholder { color: black; }

table {
	width: 100%;
}

input{
	padding: 0px;
	border: 1px solid gray;
}
	.unitsBox{ /*A special input that displays units*/
		text-align: right;
		width: 20px;
		border: 1px solid gray;
		border-left: 0px;
	}

#notesTextarea {
	resize: none;
	font-family: Arial;
}

label{ font-size: 9pt; color: #757575;}

.paletteLabel {
	text-align: center;
	font: bold 12px sans-serif;
	width: 100%;
	margin: 0;
}
#furnitureSearchBar{ width: 100%; border: none; }
	#furnitureSearchBar::-webkit-input-placeholder { color: gray; }
	#furnitureSearchBar::-moz-placeholder { color: gray; }
	#furnitureSearchBar:-ms-input-placeholder { color: gray; }
#furniturePaletteDiv {width: inherit; height: 300px; background: #e2e2e2;}
#wallPartsPaletteDiv {width: inherit; height: 150px; background: #e2e2e2;}

#myPaletteWindow{
	height: inherit;
	top:12%;
	left:.5%;
}

#palettes {
	height: 100%;
	width: 300px;
	padding: 0px;
}

#myFloorplanDiv {
	width: 100%;
	background-color: #DAE4E4;
	border: 1px solid gray;
	height: 85vh;
}

#currentFile {
	background-color: #4b545f;
	color: white;
	text-align: center;
	padding: 5px;
}

#diagramHelpDiv {
	width: 100%;
	text-align: center;
	border: 1px solid gray;
	background-color: #4b545f;
	color: white;
}

/****************************************************************** GENERAL DRAGGABLE WINDOWS STYLING ********************************************************/

.draggable {
	border: 1px solid gray;
	background-color: #e2e2e2;
	position: absolute;
	top: 40%;
	left: 50%;
	width: 300px;
	height: 200px;
	z-index: 10;
	text-align: center;
}

#optionsWindow {
	height: auto;
}

.windowButtons{
	float: right;
	border: none;         
	font: bold 12px sans-serif;
}

.handle {
	background-color: #4b545f;
	text-align: center;
	font: bold 12px sans-serif;
	color: white;
	cursor: move;
	width: 100%;
}

.mySavedFiles {width:75%;}

/*Selection Info Window specific styling*/

#selectionInfoTextDiv p {margin: 0; padding: 0;} /*used only when no node is selected*/
#selectionInfoTextDiv #name {margin: 3px;}
#selectionInfoTextDiv .nameNotesInput {
	width: 80%;
}
#selectionInfoTextDiv .dimensionsInput {width: 85%; border-right: 0px;}
.data {font-size: 10pt;}
.clickable {cursor: pointer;}
.selectedKey {color: dodgerblue;}

/*-- set border box on all elements inside the grid*/
.grid-container * {box-sizing: border-box;}

.row:before, .row::after {
	content: "";
	display: table;
	clear: both;
}

[class*='col-'] {
	float: left;
	min-height: 1px;
	width: 16.66%;
	padding: 0px;
}

.col-1 {width: 100%;}
.col-2 {width: 50%;}
.col-3 {width: 33.33%;}
.col-4 {width: 25%;}
.col-5 {width: 20%;}
.col-6 {width: 16.66%;}
/************************************************************* NAV BAR STYLING *************************************************/

nav {background: linear-gradient(#efefef ,#bbbbbb );}

nav ul { /*file menus and tool menus*/
	list-style: none;
	position: relative;
	display: flex;
	margin: 0; padding: 0;
}

nav ul li { /*menu tabs*/
	float: left;
	transition-property: background;
	transition-duration: 0.3s;
}
	nav ul li:hover {
		transition-delay: 0.1s, 0.1s;
		background: #4f5964;
	}
	
nav ul li a { /*menu tabs text*/
	display: block; 
	padding-left: 25px; padding-right: 25px; padding-top: 2px;
	color: #757575; text-decoration: none;
	transition-property: background, color;
	transition-duration: 0.4s, 0.4s;
}
	nav ul li:hover a {color: #fff;}

nav ul ul { /*drop down menus, general*/
	display: block; 
	z-index: 20; /*in front of everything, even .draggables*/
	visibility: hidden; opacity: 0;   
	transition-property: opacity;
	transition-duration: 0.3s;
	background: #5f6975; padding: 0;
	position: absolute; top: 100%;
   /* width: 220%; /*band aid fix for menu width -- TODO*/
}
	nav ul li:hover > ul { /*drop down menus, visible*/
		visibility: visible; opacity: 1;
		transition-delay: 0.1s;
	}

nav ul ul li { /*drop down menu items*/
	border-top: 1px solid #6b727c;
	border-bottom: 1px solid #575f6a;
	position: relative; float: none;
}
	nav ul ul li a { /*drown down menu items text*/
		padding: 5px;
		transition-property: background;
		transition-duration: 0.1s;
	}	
		nav ul ul li a:hover {
			background: #4b545f;
			transition-delay: 0.1s;
		}

nav ul ul ul { /*drop down submenu (units menu)*/
	left: 100%; top:0; width: 100px;
}

nav p { /* grid input area, wall width area, and 'Tools' all wrapped in <p> tag*/
	float: left;
	margin-bottom: 0px;
	margin-top: 3px;
	padding-left: 25px;
	padding-right: 25px;
	color: #4b545f;
}   
	nav p.shortcut {
		font-size: 9pt;
		float: right;
		color: #efefef;
		padding: 0;
	}

.scaleItems{ /*special styling for the 'Scale' item of the 'View' menu*/
	float: left;
	text-align: center;
	box-sizing: border-box;
	width: 12.5%;
}
	#scaleDisplay{width: 75%;}

#wallThicknessInput, #gridSizeInput {
	width: 50px; 
	float: left;
	border-right: 0px;
}
#gridSizeInput { margin-left: 10%; }
	#wallThicknesshUnitsInput, #gridSizeUnitsInput{float: left;}

#wallThicknessInputLabel{ float: left; }
#setGridButton { padding: 0; }


/* Scaling for small screens, TODO*/
@media screen and (max-device-width: 480px) {
	nav ul li ul li{ font-size: 9pt; }
}

 /*Icons*/

#wallBuildingButton {background: url(icons/wallBuildingTool.png);}
#draggingButton {background: url(icons/selectionTool.png);}
#wallWidthBox { visibility: hidden; display: none;} /*box for setting wall width; invisible when Wall Tool not active*/

/* jQuery UI specific stylings */

.ui-accordion .ui-accordion-content, .ui-accordion .ui-accordion-icons { padding: 0px; } 
.ui-widget * { outline: none; }
.ui-widget-content { border: none; }