woodpecker/web/src/screens/repo/screens/secrets/components/form.less

@import '~shared/styles/colors';

.form {
	input {
		border: 1px solid @gray-light;
		box-sizing: border-box;
		display: block;
		margin-bottom: 20px;
		outline: none;
		padding: 10px;
		width: 100%;

		&:focus {
			border: 1px solid @gray-dark;
		}
	}

	textarea {
		border: 1px solid @gray-light;
		box-sizing: border-box;
		display: block;
		height: 100px;
		margin-bottom: 20px;
		outline: none;
		padding: 10px;
		width: 100%;

		&:focus {
			border: 1px solid @gray-dark;
		}
	}

	section {
		display: flex;
		flex: 1 1 auto;
		padding-bottom: 20px;

		&> div {
			flex: 1;
		}

		&:first-child {
			padding-top: 0px;
		}

		&:last-child {
			border-bottom-width: 0px;
		}

		@media (max-width: 600px) {
			display: flex;
			flex-direction: column;

			h2 {
				flex: none;
				margin-bottom: 20px;
			}

			&> :last-child {
				padding-left: 20px;
			}
		}

		h2 {
			flex: 0 0 100px;
			font-size: 15px;
			font-weight: normal;
			line-height: 26px;
			margin: 0px;
			padding: 0px;
		}
	
		label {
			display: block;
			padding: 0px;
	
			span {
				font-size: 15px;
			}
		}
	
		input[type='checkbox'] {
			width: initial;
			display: inline;
			margin: 0px 10px 0px 0px;
		}
	}

	.actions {
		text-align: right;
	}

	button {
		background: @white;
		border: 1px solid @gray-dark;
		border-radius: 2px;
		color: @gray-dark;
		cursor: pointer;
		font-family: 'Roboto';
		font-size: 14px;
		line-height: 28px;
		outline: none;
		padding: 0px 20px;
		text-transform: uppercase;
		user-select: none;
	}

	::-moz-input-placeholder {
		color: @gray;
		font-size: 15px;
		font-weight: 300;
		user-select: none;
	}

	::-webkit-input-placeholder {
		color: @gray;
		font-size: 15px;
		font-weight: 300;
		user-select: none;
	}
}