@tririga/tri-template/lib/templates/ic-people/ic-people-shared-styles.html

A simple tool for generating IBM TRIRIGA UX view skeletons from available templates.

<!-- IBM Confidential‌ - OCO Source Materials‌ - (C) COPYRIGHT IBM CORP. 2017 - The source code for this program is not published or otherwise‌ divested of its trade secrets, irrespective of what has been‌ deposited with the U.S. Copyright Office. -->

<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">

<dom-module id="ic-person-profile-styles">
	<template>
		<style>
			#previewDialog {
				width: 50%;
				min-width: 400px;
				max-width: 750px;
			}

			#graphicDialog {
				width: 50%;
				height: 50%;
			}

			.action-bar{
				@apply(--layout-horizontal);
				@apply(--layout-justified);
			}

			:host([small-screen]) .action-bar {
				background-color: var(--tri-footer-background-color);
				color: var(--tri-footer-color);
				width: 100%;
				padding: 5px;
				@apply(--layout-fixed-bottom);
				z-index: 102;
			}

			:host([small-screen]) .previewBtn {
				 @apply(--layout-center-center);
			}

			.preview-container {
				line-height: 200%;
				margin-bottom: 50px;
				@apply(--layout-vertical);
			}

			.updateBtn, .cancelBtn {
				width: 150px;
			}

			.info-container {
				@apply(--layout-vertical);
			}	

			.editable-container {
				@apply(--layout-horizontal);
			}

			:host([small-screen]) .editable-container{
				@apply(--layout-vertical);
			}
			
			triplat-image {
				--triplat-image-placeholder-icon: {
					height: 52px;
					width: 52px;
				};
			}

			.image-container {
				padding: 30px;
				@apply(--layout-flex-2);
			}

			.primary-location {
				@apply(--layout-center-center);
				@apply(--layout);
			}

			.location-icon {
				--iron-icon-fill-color: var(--tri-primary-color);
			}

			.editable-fields{
				padding: 30px 5px 5px 10px;
				@apply(--layout-flex-5);
				border-left: 1px solid var(--ibm-gray-10);
			}

			:host([small-screen]) .editable-fields{
				@apply(--layout-vertical);
				@apply(--layout--flex);
				border-left: none;
			}

			:host([small-screen]) paper-input{
				max-width: 100%;
			}

			paper-input {
				max-width: 400px;
			}

			.page-header {
				@apply(--layout-justified);
				@apply(--layout-horizontal);
				@apply(--layout-center);
				padding: 10px;
				font-weight: bold;
				border-bottom: 1px solid var(--ibm-gray-10);
			}

			.action-bar-space {
				height: 51px;
			}

			triplat-graphic { 
			     --triplat-graphic-highlight-2: {
			          fill: yellow;
			          fill-opacity: 1;
			     };
			}
    	</style>
  	</template>
</dom-module>