Opt-in mechanism for CSS on form inputs and buttons

[simonw]

I think I need to introduce an opt-in mechanism to Datasette core classes, maybe a class of core - which can be used directly on the button or can be put on a wrapper element, such as a form.

Originally posted by @simonw in datasette/datasette-acl#24 (comment)

[simonw]

Here's the problem this can help solve, found while attempting to integrate https://github.com/Choices-js/Choices into datasette-acl:

Those look weird because the Datasette default CSS targets form button[type="button"] with a bunch of styles that don't work with Choices.

[simonw]

Here's the CSS causing the problem:

datasette/datasette/static/app.css

Lines 531 to 577 in 92c4d41

	form input[type=text],
	form input[type=search] {
	border: 1px solid #ccc;
	border-radius: 3px;
	width: 60%;
	padding: 9px 4px;
	display: inline-block;
	font-size: 1em;
	font-family: Helvetica, sans-serif;
	}
	/* Stop Webkit from styling search boxes in an inconsistent way */
	/* https://css-tricks.com/webkit-html5-search-inputs/ comments */
	input[type=search] {
	-webkit-appearance: textfield;
	}
	input[type="search"]::-webkit-search-decoration,
	input[type="search"]::-webkit-search-cancel-button,
	input[type="search"]::-webkit-search-results-button,
	input[type="search"]::-webkit-search-results-decoration {
	display: none;
	}
	form input[type=submit], form button[type=button] {
	font-weight: 400;
	cursor: pointer;
	text-align: center;
	vertical-align: middle;
	border-width: 1px;
	border-style: solid;
	padding: .5em 0.8em;
	font-size: 0.9rem;
	line-height: 1;
	border-radius: .25rem;
	}
	form input[type=submit] {
	color: #fff;
	background: linear-gradient(180deg, #007bff 0%, #4E79C7 100%);
	border-color: #007bff;
	-webkit-appearance: button;
	}
	form button[type=button] {
	color: #007bff;
	background-color: #fff;
	border-color: #007bff;
	}

I'm going to change it so you need to add class="core" either to the inputs and buttons directly or to a containing element to get those styles.

This will be a frustrating change because it will break the display of buttons in a bunch of plugins, so best to get it done before 1.0!

[simonw]

This is the kind of thing that breaks in Datasette core itself - will have to go through a bunch of these:

[simonw]

Using <form class="core"> is a quick way to fix these.

[simonw]

Documentation:

• https://docs.datasette.io/en/latest/custom_templates.html#writing-custom-css
• https://docs.datasette.io/en/latest/writing_plugins.html#static-assets

[simonw]

Need to update a whole bunch of plugins.