IRMA

Site Header 

<header class="site-header js-no-modal" style="background-color: ; color: ">
    <div class="header-left">
        <div class="header-logo">
            <img src="/img/logo.png" />
        </div>

        <div class="header-text">
            <div class="header-title">Thirst University</div>

            <div class="header-environment">Production Version 0.125</div>
        </div>
    </div>

    <div class="user">
        <button class="btn btn-user js-btn-modal js-user" data-total="2" data-modal="user">
			<div class="user-avatar">
			</div>
	
			<div class="user-info">
				<h4 class="user-name">Stephen Aaron-Gerlach</h4>
				<div>
					<a href="/my-account" class="user-profile link">My Account</a>
				</div>
			</div>
	
			<div class="svg-wrap arrow">
				<svg class="svg" viewBox="0 0 25 25">
					<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-arrow-down"></use>
				</svg>
			</div>
		</button>

        <div class="user-modal js-modal tooltip" data-modal="user" data-tab="user">
            <div class="user-modal-inner tooltip-content"></div>
        </div>
    </div>
    <div class="notifications">
        <button class="btn btn-notifications js-btn-modal js-notifications" data-total="" data-modal="notifications">
			<div class="svg-wrap">
				<svg class="svg" viewBox="0 0 25 25">
					<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-bell"></use>
				</svg>
			</div>
		</button>

        <div class="notifications-modal js-modal" data-modal="notifications" data-index="0">
            <div class="notifications-modal-inner modal-panel">
                <div class="notifications-header">
                    <div class="tab">
                        <div class="text">Approvals</div>
                    </div>
                </div>

                <div class="approvals-container"></div>
            </div>
        </div>
    </div>
</header>
 
<header class="site-header js-no-modal"
	style="background-color: {{ headerBg }}; color: {{ headerText }}">
	<div class="header-left">
		{{#if logo }}
		<div class="header-logo">
			<img src="{{ logo }}" />
		</div>
		{{/if}}

		<div class="header-text">
			<div class="header-title">{{ orgName }}</div>

			<div class="header-environment">{{ env }}</div>
		</div>
	</div>

	{{> @user }}

	{{> @notifications }}
</header>
 
{
  "orgName": "Thirst University",
  "userId": "21652145",
  "headerBg": "",
  "color": "#27ABE2",
  "env": "Production Version 0.125",
  "logo": "/img/logo.png",
  "user": {
    "name": "Stephen Aaron-Gerlach"
  }
}
  • Content: 
    .site-header {
	position: fixed;
	left: 0;
	transform: translate3d(0, 0, 0);
	z-index: 20;

	width: 100%;
	height: 20rem;

	background: $color-irma-navy;
	color: #27ABE2;
	filter: drop-shadow(0 0 10px rgba(black, 0.14));

	// .site-logo {
	// 	position: relative;
	// 	top: 50%;
	// 	left: 26px;
	// 	transform: translateY(-50%);

	// 	width: 154px;
	// }

	.header-left {
		display: flex;
		height: 100%;
	}

	.header-logo {
		display: flex;
		align-items: center;
		padding-left: 5rem;

		img {
			max-width: 12rem;
			max-height: 15rem; 
		}
	}

	.header-text {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding-left: 5rem;
		height: 100%;
	}

	.header-title {
		color: white;

		@include font-primary-regular;
		@include font-size-other(20px);
	}

	.header-environment {
		margin-top: 0.5rem;

		@include font-size-small;
	}

	.notifications {
		position: absolute;
		right: 0;
		top: 0;
		z-index: 10;
	}

	.user {
		position: absolute;
		right: 20rem;
		top: 0;
		z-index: 10;
	}
}
  • URL: /components/raw/site-header/_site-header.scss
  • Filesystem Path: components/02-sections/site-header/_site-header.scss
  • Size: 1 KB

There are no notes for this item.