Merge pull request #28 from efflore/v0.8.5-docs

docs: examples for inputs and code-block

Author: estherbrunner

docs/assets/css/components.css

@@ -263,8 +263,7 @@ accordion-panel {
 
 input-button {
 	display: inline-block;
-	flex-grow: 0;
-	flex-shrink: 0;
+	flex: 0;
 
 	& button {
 		height: var(--input-height);
@@ -274,14 +273,26 @@ input-button {
 		background-color: var(--color-secondary);
 		color: var(--color-text);
 		padding: 0 var(--space-s);
-		cursor: pointer;
 		font-size: var(--font-size-s);
 		line-height: var(--line-height-s);
 		opacity: var(--opacity-dimmed);
 		transition: all var(--transition-shorter) var(--easing-inout);
 
-		&:not(:disabled):active {
-			background-color: var(--color-secondary-active);
+		&:disabled {
+			opacity: var(--opacity-translucent);
+		}
+
+		&:not(:disabled) {
+			cursor: pointer;
+			opacity: var(--opacity-solid);
+
+			&:hover {
+				background-color: var(--color-secondary-hover);
+			}
+
+			&:active {
+				background-color: var(--color-secondary-active);
+			}
 		}
 
 		&.primary {
@@ -290,8 +301,15 @@ input-button {
 			border-color: var(--color-primary-active);
 			opacity: var(--opacity-solid);
 
-			&:not(:disabled):active {
-				background-color: var(--color-primary-active);
+			&:not(:disabled) {
+
+				&:hover {
+					background-color: var(--color-primary-hover);
+				}
+
+				&:active {
+					background-color: var(--color-primary-active);
+				}
 			}
 		}
 
@@ -301,8 +319,15 @@ input-button {
 			border-color: var(--color-error-active);
 			opacity: var(--opacity-solid);
 
-			&:not(:disabled):active {
-				background-color: var(--color-error-active);
+			&:not(:disabled) {
+				
+				&:hover {
+					background-color: var(--color-error-hover);
+				}
+
+				&:active {
+					background-color: var(--color-error-active);
+				}
 			}
 		}
 
@@ -312,8 +337,15 @@ input-button {
 			border-color: var(--color-success-active);
 			opacity: var(--opacity-solid);
 
-			&:not(:disabled):active {
-				background-color: var(--color-success-active);
+			&:not(:disabled) {
+				
+				&:hover {
+					background-color: var(--color-success-hover);
+				}
+
+				&:active {
+					background-color: var(--color-success-active);
+				}
 			}
 		}
 
@@ -328,34 +360,6 @@ input-button {
 			font-size: var(--font-size-m);
 			padding-inline: var(--space-m);
 		}
-
-		&:disabled {
-			cursor: revert;
-			opacity: var(--opacity-translucent);
-		}
-	}
-}
-
-@media (hover: hover) {
-
-	input-button {
-
-		& button:not(:disabled):hover {
-			background-color: var(--color-secondary-hover);
-			opacity: var(--opacity-solid);
-		}
-
-		& button.primary:not(:disabled):hover {
-			background-color: var(--color-primary-hover);
-		}
-
-		& button.error:not(:disabled):hover {
-			background-color: var(--color-error-hover);
-		}
-
-		& button.success:not(:disabled):hover {
-			background-color: var(--color-success-hover);
-		}
 	}
 }
 
@@ -366,6 +370,15 @@ input-field {
 		color: color-mix(in srgb, var(--color-text) 50%, transparent);
 	}
 
+	&:hover button {
+		opacity: var(--opacity-translucent);
+
+		&:not(:disabled) {
+			opacity: var(--opacity-solid);
+			cursor: pointer;
+		}
+	}
+
 	&:focus-within {
 
 		& label,
@@ -500,14 +513,21 @@ input-field {
 		transition: opacity var(--transition-short) var(--easing-inout);
 		user-select: none;
 
-		&:active {
-			background-color: var(--color-secondary-active);
-		}
-
 		&:disabled {
 			cursor: revert;
 			background-color: var(--color-background);
 		}
+
+		&:not(:disabled) {
+
+			&:hover {
+				background-color: var(--color-secondary-hover);
+			}
+
+			&:active {
+				background-color: var(--color-secondary-active);
+			}
+		}
 	}
 
 	.decrement {
@@ -539,26 +559,6 @@ input-field {
 	}
 }
 
-@media (hover: hover) {
-
-	input-field {
-
-		&:hover button {
-			opacity: var(--opacity-translucent);
-
-			&:not(:disabled) {
-				opacity: var(--opacity-solid);
-				cursor: pointer;
-			}
-		}
-
-		& button:not(:disabled):hover {
-			background-color: var(--color-secondary-hover);
-		}
-	}
-
-}
-
 input-checkbox {
 	flex-grow: 1;
 
@@ -585,6 +585,11 @@ input-checkbox {
 			background-color: var(--color-secondary);
 		}
 
+		&:hover::before {
+			background-color: var(--color-secondary-hover);
+			opacity: var(--opacity-solid);
+		}
+
 		&:active::before {
 			background-color: var(--color-secondary-active);
 		}
@@ -605,23 +610,12 @@ input-checkbox {
 			content: '✓';
 		}
 
-		&:active::before {
-			background-color: var(--color-success-active);
-		}
-	}
-}
-
-@media (hover: hover) {
-
-	input-checkbox.todo {
-
-		& label:hover::before {
-			background-color: var(--color-secondary-hover);
-			opacity: var(--opacity-solid);
+		&:hover::before {
+			background-color: var(--color-success-hover);
 		}
 
-		&[checked] label:hover::before {
-			background-color: var(--color-success-hover);
+		&:active::before {
+			background-color: var(--color-success-active);
 		}
 	}
 }
@@ -663,6 +657,11 @@ input-radiogroup {
 			line-height: var(--line-height-s);
 			opacity: var(--opacity-dimmed);
 			transition: opacity var(--transition-short) var(--easing-inout);
+
+			&:hover {
+				background-color: var(--color-secondary-hover);
+                opacity: var(--opacity-solid);
+			}
 
 			&:active {
 				background-color: var(--color-secondary-active);
@@ -672,6 +671,10 @@ input-radiogroup {
 				color: var(--color-text-inverted);
 				background-color: var(--color-primary);
 				border-color: var(--color-primary-active);
+
+				&:hover {
+                    background-color: var(--color-primary-hover);
+                }
 
 				&:active {
 					background-color: var(--color-primary-active);
@@ -690,18 +693,6 @@ input-radiogroup {
 	}
 }
 
-
-@media (hover: hover) {
-    todo-filter.split-button label:hover {
-		background-color: var(--color-secondary-hover);
-		opacity: var(--opacity-solid);
-
-		&.selected {
-			background-color: var(--color-primary-hover);
-		}
-    }
-}
-
 todo-form {
 	display: block;
 	container-type: inline-size;