User bar

Volunteer Laura Ashley

Representing Ria Mitchell 1

HTML

    <div class="user-bar">
    <div class="user-bar__users">
      <h1 class="volunteer"><span class="label">Volunteer</span> Laura Ashley</h1>
      <h2 class="participant"><span class="label">Representing</span> Ria Mitchell <span class="count">1</span></h2>
    </div>
    <div class="user-bar__menu">
      <div class="user-bar__menu-select">Accounts</div>
      <div class="user-bar__menu-options">
        <div class="user-bar__menu-option volunteer">
          <span class="name">Laura Ashley</span>
          <span class="label">Volunteer</span>
        </div>
        <div class="user-bar__menu-option participant active">
          <span class="name">Ria Mitchell <span class="count">1</span></span>
          <span class="label">Participant </span>
        </div>
        <div class="user-bar__menu-option">
          <span class="add-participant">Add participants</span>
        </div>
      </div>
    </div>
  </div>

SCSS

    .user-bar {
	@include clearfix();
	position: relative;
	height: 100px;
	background: $grey;
	padding: 12px 24px;
	margin: -24px -24px 28px;

	.user-bar__users {
		width: 64%;
		float: left;

		.volunteer {
			@include bold-font;
			color: $white;
			margin: 0 0 16px;

			.label {
				@include base-font;
				color: $white;
			}
		}

		.participant,
		.volunteer-action {
			@include small-font;
			color: $coral;
			margin: 0 0 4px;

			.label {
				font-weight: 400;
				font-size: $small-font-size;
				color: $white;
			}
		}
	}

	.user-bar__action {
		position: absolute;
		top: 28px;
		right: 24px;
	}

	.user-bar__menu {
		@include small-font;
		position: absolute;
		top: 28px;
		right: 24px;
		width: 36%;
		color: $grey;
		background-color: $grey-L52;
		border-bottom: 4px solid $grey-L35;
		z-index: 20;

		&:hover,
		&:focus {
			color: $grey-D10;
			background-color: $grey-L35;
			border-bottom: 4px solid $grey-L20;
		}
	}

	.user-bar__menu-select {
		padding: 8px 16px;

		&:after {
			position: absolute;
			top: 7px;
			right: 16px;
			content: url('/images/arrow-down-grey.svg');
		}

		&.open:after {
			content: url('/images/arrow-up-grey.svg');
		}
	}

	.user-bar__menu-options {
		display: none;
	}

	.user-bar__menu-option {
		color: $grey;
		background-color: $grey-L60;
		padding: 8px 16px;

		.name {
			display: block;
			font-weight: 700;

			&:before {
				display: inline-block;
				content: url('/images/icon-user-avatar-black.svg');
				padding-right: 8px;
			}
		}

		.label {
			display: block;
		}

		.add-participant {
			border-bottom: 0;

			&:before {
				position: relative;
				top: 4px;
				display: inline-block;
				content: url('/images/icon-add.svg');
				padding-right: 8px;
			}
		}

		&:hover,
		&:focus {
			color: $grey-D10;
			background: $grey-L52;
		}

		&.active {
			color: $white;
			background: $coral;

			.name:before {
				content: url('/images/icon-user-avatar-white.svg');
			}

			.add-participant:before {
				content: url('/images/icon-add-white.svg');
			}

			.count {
				color: $coral;
				background-color: $white;
				padding-left: 1px;
			}

			// &:hover,
			// &:focus {
			//   background-color: $coral-D20;
			// }
		}
	}

	.count {
		position: relative;
		top: -2px;
		padding-left: 0;
		font-size: 15px;
		font-weight: 700;
		line-height: 20px;
		display: inline-block;
		color: $white;
		background-color: $coral;
		height: 21px;
		width: 21px;
		border-radius: 50%;
		text-align: center;
	}
}

Connect Dementia Research

Pattern Library

User bar

Volunteer Laura Ashley

Representing Ria Mitchell 1

HTML

SCSS