graphicek/client/src/assets/pages/_sensors-page.scss

.sensors-page {
	.sensors-head {
		display: flex;
		align-items: center;
		flex: 1;

		> button {
			margin-left: auto;
		}
	}

	section.content {
		.sensors-list {
			display: grid;
			grid-template-columns: repeat(6, 1fr);
			overflow: auto;
			padding: 1rem;

			@media screen and (max-width: 1500px) {
				grid-template-columns: repeat(4, 1fr);
			}

			@media screen and (max-width: 1200px) {
				grid-template-columns: repeat(3, 1fr);
			}

			@media screen and (max-width: 900px) {
				grid-template-columns: repeat(2, 1fr);
			}

			@media screen and (max-width: 768px) {
				grid-template-columns: repeat(1, 1fr);
			}

			.sensor-item {
				margin: 0.25rem;
				padding: 0.5rem;

				> div {
					flex-grow: 0;
					flex-shrink: 0;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				> .name {
					margin-bottom: 0.5rem;
				}

				> .auth {
					.auth-value {
						display: flex;
						font-size: 85%;
						margin: 0.25rem 0;

						.label {
							width: 2rem;
							background-color: #666;
							padding: 0 0.25rem;
							border-radius: 0.25rem;
							border-top-right-radius: 0;
							border-bottom-right-radius: 0;
							display: flex;
							align-items: center;
						}

						.value {
							flex: 1;
							display: flex;

							input {
								flex: 1;
								border-radius: 0;
							}

							button {
								border-top-left-radius: 0;
								border-bottom-left-radius: 0;
								padding: 0rem 0.5rem;
								flex-grow: 0;
								flex-shrink: 0;
								font-size: 120%;
							}
						}
					}
				}

				> .actions {
					text-align: right;
					margin-top: 0.5rem;

					button {
						margin-left: 0.25rem;
					}
				}
			}
		}
	}
}