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;

	.header {
	  background: $spaceblue;
	  color: $white;
	  margin: 0 auto;
	  padding: 0 40px;
	  border-bottom: 1px solid $spaceborder;
	  display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    min-height: 55px;
    transition: all 0.25s;

    &.search {
    	background: linear-gradient(270deg, #868B9F 0%, #333C5E 100%);

    	section {
    		&:nth-child(1) {
    			width: 90%;
    		}
    	}

    	input {
    		background: transparent;
  			outline: none;
  			border: 0;
  			font-size: 20px;
  			line-height: 24px;
  			letter-spacing: 1px;
  			color: $white;
  			width: 100%;
    	}

    	.xIcon svg {
    		width: 25px;
    		height: 25px;
    	}
    }

    section svg {
    	width: 14px;
    	height: 14px;
    	color: $white;
    	opacity: 0.5;
    	cursor: pointer;
  		transition: all 0.25s;

    	&:hover {
    		opacity: 1;
    	}
    }


	  .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;
	height: calc(100vh - 304px);
	overflow-y: auto;
	overflow-x: hidden;
	padding-top: 20px;
	padding-bottom: 20px;

	&.pulldown {
		opacity: 0.15;
	}
}

.activity {
	position: relative;
	padding: 0 60px;
	margin-bottom: 30px;

	h2 {
		color: $white;
		font-size: 10px;
		font-weight: bold;
    border-bottom: 0.2px solid #A0A0A0;
    padding: 10px 0;
	}

	.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;
	}
}