zap-desktop/app/routes/activity/components/Activity.scss

@import '../../../variables.scss';

.search {
	height: 55px;
	padding: 2px;
	border-bottom: 1px solid $darkgrey;

	.input {
		display: inline-block;
		vertical-align: top;
		height: 100%;
	}

	.label {
		width: 5%;
		line-height: 50px;
		font-size: 25px;
		text-align: center;
		cursor: pointer;
	}

	.text {
		width: 95%;
		outline: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    height: 50px;
    font-size: 18px;
	}
}

.activities {
	background: $white;
	height: 100%;

	.header {
	  background: $spaceblue;
	  color: $white;
	  margin: 0 auto;
	  padding: 0 40px;
	  border-bottom: 1px solid $spaceborder;


	  .filters {
	  	display: flex;
	  	flex-direction: row;
			user-select: none;

	  	li {
	  		position: relative;
	  		opacity: 0.5;
	  		font-size: 14px;
	  		cursor: pointer;

	  		&.activeFilter {
	  			opacity: 1;
	  		}

	  		&:nth-child(1) {
	  			margin-left: 0;
	  		}

				span {
					display: block;
					position: relative;
					margin: 0 15px;
					padding: 20px 0;
				}
	  	}

	  	.activeBorder {
				left: 15px;
				right: 15px;
				width: auto;
				height: 1px;
				background: white;
				position: absolute;
				bottom: -1px;
	  	}
	  }
	}
}

.activityContainer {
	background: $spaceblue;
	transition: opacity 0.25s;
	padding-bottom: 50px;
	min-height: 100vh;
	height: 100vh;
	overflow-y: scroll;
	padding-top: 20px;

	&.pulldown {
		opacity: 0.15;
	}
}

.activity {
	padding: 0 40px;

	&:hover {
			
	}

	.left, .center, .right {
		display: inline-block;
		vertical-align: top;
	}

	.center, .right {
		width: 10%;
	}

	.left {
		width: 80%;
		color: $black;
	}

	.center {
		text-align: center;
	}

	.right {
		text-align: right;
	}
}