v0.2.3

dist/clickables.css

@@ -0,0 +1,21 @@
+/** Anything that is clickable should have a pointer cursor. */
+
+input[type='checkbox' i],
+input[type='radio' i],
+input[type='color' i],
+input[type='submit' i],
+input[type='button' i],
+button,
+input[type='date' i],
+input[type='time' i],
+input[type='datetime-local' i],
+input[type='month' i],
+input[type='week' i],
+input::-webkit-calendar-picker-indicator,
+input::-webkit-file-upload-button,
+input[type='range' i],
+input[type='reset' i],
+input[type='file' i],
+summary {
+	cursor: pointer;
+}

dist/elements/body.css

@@ -0,0 +1,4 @@
+body {
+	font-family: sans-serif;
+	color: #626e84;
+}

dist/elements/button.css

@@ -0,0 +1,61 @@
+@import '../shared/colors.css';
+
+input[type='button' i],
+input[type='reset' i],
+input[type='submit' i],
+input::-webkit-file-upload-button,
+input[type='color' i],
+button {
+	--button-background-color: var(--cornflowerblue);
+	--button-background-color-hover: var(--cornflowerblue-lighter);
+	--button-background-color-focus: var(--button-background-color-hover);
+	--button-background-color-active: var(--cornflowerblue-darker);
+	--button-border-radius: 4px;
+	--button-font-color: var(--inside-font-color);
+}
+
+input[type='button' i],
+input[type='reset' i],
+input[type='submit' i],
+input::-webkit-file-upload-button,
+input[type='color' i],
+button {
+	background-color: rgba(var(--button-background-color), 1);
+	height: 40px;
+	font-size: 16px;
+	border: none;
+	border-radius: var(--button-border-radius);
+	color: var(--button-font-color);
+	padding: 4px 24px;
+	text-decoration: none;
+	margin: 4px 2px; /*TODO perhaps move this out to somewhere for all inputs or other elements. */
+	transition: background-color 100ms;
+}
+
+input[type='button' i]:hover,
+input[type='reset' i]:hover,
+input[type='submit' i]:hover,
+input::-webkit-file-upload-button:hover,
+input[type='color' i]:hover,
+button:hover {
+	background-color: rgba(var(--button-background-color-hover), 1);
+}
+
+input[type='button' i]:focus,
+input[type='reset' i]:focus,
+input[type='submit' i]:focus,
+input::-webkit-file-upload-button:focus,
+input[type='color' i]:focus,
+button:focus {
+	outline: none;
+	background-color: rgba(var(--button-background-color-focus), 1);
+}
+
+input[type='button' i]:active,
+input[type='reset' i]:active,
+input[type='submit' i]:active,
+input::-webkit-file-upload-button:active,
+input[type='color' i]:active,
+button:active {
+	background-color: rgba(var(--button-background-color-active), 1);
+}

dist/elements/index.css

@@ -0,0 +1,3 @@
+@import './body.css';
+@import './button.css';
+@import './input/index.css';

dist/elements/input/index.css

@@ -0,0 +1,3 @@
+@import './input-color.css';
+@import './input-radio.css';
+@import './input-checkbox.css';

dist/elements/input/input-checkbox.css

@@ -0,0 +1,17 @@
+/* Checkboxes and radios share much of the same code. */
+@import './input.shared.css';
+
+input[type='checkbox' i] {
+	/* Checkboxes are boxes with rounded corners. */
+	--checkable-border-radius: 15%;
+}
+
+input[type='checkbox' i]:before {
+	--checkable-transform--: translate(-50%, -62%) rotate(45deg);
+	border-top: none;
+	border-left: none;
+	border-radius: 0;
+	background: none;
+	height: calc(var(--checkable-mark-scale) * 55%);
+	width: calc(var(--checkable-mark-scale) * 28%);
+}

dist/elements/input/input-color.css

@@ -0,0 +1,10 @@
+@import './input.shared.css';
+
+input[type='color' i] {
+	width: auto;
+	padding: 4px 8px;
+}
+
+input[type='color' i]::-webkit-color-swatch-wrapper {
+	min-width: 40px;
+}

dist/elements/input/input-radio.css

@@ -0,0 +1,20 @@
+/* Checkboxes and radios share much of the same code. */
+@import './input.shared.css';
+
+/* The extra "[type]" is needed here to force this to be more specific than the rule imported from input.shared.css. :\ */
+input[type='radio' i] {
+	/* Radios are circles. */
+	--checkable-border-radius: 100%;
+}
+
+input[type='radio' i]:before {
+	--checkable-transform--: translate(-50%, -50%);
+	border-top: calc(var(--checkable-mark-scale) * var(--checkable-mark-stroke-width)) solid
+		rgba(var(--checkable-mark-color), 1);
+	border-left: calc(var(--checkable-mark-scale) * var(--checkable-mark-stroke-width)) solid
+		rgba(var(--checkable-mark-color), 1);
+	border-radius: 100%;
+	background: rgba(var(--checkable-mark-color), 1);
+	height: calc(var(--checkable-mark-scale) * 40%);
+	width: calc(var(--checkable-mark-scale) * 40%);
+}

dist/elements/input/input.shared.css

@@ -0,0 +1,106 @@
+@import '../../shared/colors.css';
+
+/* Various inputs use styling from button. */
+@import '../button.css';
+
+/*
+ * These are default values and styles for checkbox and radio inputs, which
+ * have much of the same implementation, with some variation. These values are
+ * default for checkbox, and radio modifies values.
+ *
+ * The input-checkbox.css and input-radio.css files contain only the small
+ * differences.
+ */
+
+input[type='checkbox' i],
+input[type='radio' i] {
+	--checkable-size: 14px;
+
+	/** The value has to be an RGB number triplet, f.e. `--checkable-color: 20, 30, 40;`. */
+	--checkable-color: var(--cornflowerblue);
+
+	/** The value has to be an RGB number triplet, f.e. `--checkable-mark-color: 20, 30, 40;`. */
+	--checkable-mark-color: var(--checkable-color);
+	--checkable-mark-scale: 1;
+	--checkable-mark-stroke-width: calc(0.1275 * var(--checkable-size));
+
+	/** The value has to be an RGB number triplet, f.e. `--checkable-border-color: 20, 30, 40;`. */
+	--checkable-border-color: var(--checkable-color);
+	--checkable-border-width: calc(0.08 * var(--checkable-size));
+	--checkable-border-radius: 100%;
+
+	/** The value has to be an RGB number triplet, f.e. `--checkable-background-color: 20, 30, 40;`. */
+	--checkable-background-color: var(--checkable-color);
+	--checkable-background-opacity: 0.15;
+}
+
+input[type='checkbox' i],
+input[type='radio' i] {
+	-moz-appearance: none;
+	-webkit-appearance: none;
+	appearance: none;
+
+	font-size: unset;
+	box-sizing: border-box;
+	position: relative;
+	width: var(--checkable-size);
+	height: var(--checkable-size);
+	margin: 3px 4px 0px 3px;
+}
+
+input[type='checkbox' i][disabled],
+input[type='radio' i][disabled] {
+	opacity: 0.5;
+}
+
+input[type='checkbox' i]:focus,
+input[type='radio' i]:focus {
+	outline: none;
+	outline-offset: 0;
+}
+
+input[type='checkbox' i]:before,
+input[type='radio' i]:before {
+	/* vars ending with -- are "private", not intended for end users. */
+	--checkable-transform--: translate(-50%, -50%);
+	content: '';
+	display: block;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transition: 0.1s all;
+	transform: var(--checkable-transform--) scale(0);
+	border-bottom: calc(var(--checkable-mark-scale) * var(--checkable-mark-stroke-width)) solid
+		rgba(var(--checkable-mark-color), 1);
+	border-right: calc(var(--checkable-mark-scale) * var(--checkable-mark-stroke-width)) solid
+		rgba(var(--checkable-mark-color), 1);
+}
+
+input[type='checkbox' i]:checked:before,
+input[type='radio' i]:checked:before {
+	transform: var(--checkable-transform--) scale(1);
+}
+
+input[type='checkbox' i]:after,
+input[type='radio' i]:after {
+	content: '';
+	box-sizing: content-box;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	z-index: -1;
+	width: calc(100% - var(--checkable-border-width));
+	height: calc(100% - var(--checkable-border-width));
+	background: rgba(var(--checkable-background-color), var(--checkable-background-opacity));
+	border: 0 solid rgba(var(--checkable-border-color), 1);
+	border-width: var(--checkable-border-width);
+	border-radius: var(--checkable-border-radius);
+}
+
+input[type='checkbox' i]:focus:after,
+input[type='checkbox' i]:not([disabled]):hover:after,
+input[type='radio' i]:focus:after,
+input[type='radio' i]:not([disabled]):hover:after {
+	border-width: calc(1.5 * var(--checkable-border-width));
+}

dist/elements/label.css

@@ -0,0 +1,4 @@
+label {
+	user-select: none;
+	cursor: pointer;
+}

dist/extra/utils.css

@@ -0,0 +1,7 @@
+[inline] {
+	display: inline;
+}
+
+[inline-block] {
+	display: inline-block;
+}

dist/index.css

@@ -0,0 +1,2 @@
+@import './clickables.css';
+@import './elements/index.css';

dist/shared/colors.css

@@ -0,0 +1,8 @@
+:root {
+	--cornflowerblue: 100, 149, 237;
+	--cornflowerblue-lighter: 114, 159, 243;
+	--cornflowerblue-darker: 67, 128, 241;
+
+	/* Color of text inside things like buttons which have a darker background by default. */
+	--inside-font-color: white;
+}

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@lume/basicss",
-	"version": "0.2.2",
+	"version": "0.2.3",
 	"description": "Better default CSS styling for the browser's builtin elements.",
 	"license": "MIT",
 	"homepage": "http://github.com/lume/basicss#readme",