<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": null,
  "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.