@oardi/css-utils 0.55.0 → 0.57.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@oardi/css-utils",
-	"version": "0.55.0",
+	"version": "0.57.0",
 	"author": "Ardian Shala",
 	"homepage": "https://css-utils.oardi.com",
 	"description": "Powerful set of semantic css classes with support for breakpoints, directions and spacings",

package/scss/components/form.scss

@@ -87,6 +87,95 @@
 	}
 }
 
+@layer components {
+	.form-select {
+		--form-select-bg-color: var(--bg-surface);
+		--form-select-border-width: var(--border-width);
+		--form-select-border-color: var(--border-color);
+		--form-select-border-radius: var(--border-radius);
+
+		--form-select-padding-y: var(--spacer-2);
+		--form-select-padding-x: var(--spacer-3);
+		--form-select-indicator-padding: var(--spacer-5);
+
+		--form-select-font-size: var(--font-size);
+		--form-select-font-weight: 400;
+
+		--form-select-disabled-text-color: var(--disabled-text-color);
+		--form-select-disabled-bg-color: var(--disabled-bg-color);
+		--form-select-disabled-border-color: var(--disabled-border-color);
+
+		--form-select-focus-border-color: var(--primary-hover);
+		--form-select-focus-outline-width: var(--focus-outline-width);
+		--form-select-focus-outline-style: var(--focus-outline-style);
+		--form-select-focus-outline-color: var(--focus-outline-color);
+		--form-select-focus-outline-offset: var(--focus-offset);
+
+		--form-select-transition-duration: var(--transition-duration);
+		--form-select-transition-easing: var(--transition-easing);
+
+		display: block;
+		width: 100%;
+		max-width: 100%;
+		padding: var(--form-select-padding-y) var(--form-select-indicator-padding) var(--form-select-padding-y)
+			var(--form-select-padding-x);
+		font-size: var(--form-select-font-size);
+		font-weight: var(--form-select-font-weight);
+		line-height: var(--line-height);
+		color: var(--text-color);
+		background-color: var(--form-select-bg-color);
+		background-image:
+			linear-gradient(45deg, transparent 50%, currentColor 50%),
+			linear-gradient(135deg, currentColor 50%, transparent 50%);
+		background-position:
+			calc(100% - 1rem) 50%,
+			calc(100% - 0.75rem) 50%;
+		background-size:
+			0.25rem 0.25rem,
+			0.25rem 0.25rem;
+		background-repeat: no-repeat;
+		border: var(--form-select-border-width) solid var(--form-select-border-color);
+		border-radius: var(--form-select-border-radius);
+		appearance: none;
+
+		transition:
+			color var(--form-select-transition-duration) var(--form-select-transition-easing),
+			background-color var(--form-select-transition-duration) var(--form-select-transition-easing),
+			box-shadow var(--form-select-transition-duration) var(--form-select-transition-easing),
+			border-color var(--form-select-transition-duration) var(--form-select-transition-easing),
+			outline-offset var(--form-select-transition-duration) var(--form-select-transition-easing);
+
+		&:focus {
+			border-color: var(--form-select-focus-border-color);
+			outline: var(--form-select-focus-outline-width) var(--form-select-focus-outline-style)
+				var(--form-select-focus-outline-color);
+			outline-offset: var(--form-select-focus-outline-offset);
+		}
+
+		&.is-invalid {
+			color: var(--error);
+			border-color: var(--error);
+
+			&:focus {
+				outline: var(--focus-outline-error);
+				outline-offset: var(--form-select-focus-outline-offset);
+			}
+		}
+
+		&:disabled,
+		&[disabled] {
+			opacity: 1;
+			cursor: not-allowed;
+			pointer-events: none;
+			box-shadow: none;
+			outline: 0;
+			color: var(--form-select-disabled-text-color);
+			background-color: var(--form-select-disabled-bg-color);
+			border-color: var(--form-select-disabled-border-color);
+		}
+	}
+}
+
 @layer components {
 	.form-check {
 		--form-check-gap: var(--spacer-2);
@@ -133,7 +222,7 @@
 				border-color: var(--form-check-input-checked-border-color);
 			}
 
-			&:checked::after {
+			&[type='checkbox']:checked::after {
 				content: '';
 				position: absolute;
 				inset-inline-start: 0.25rem;
@@ -145,6 +234,23 @@
 				transform: rotate(45deg);
 			}
 
+			&[type='radio'] {
+				border-radius: 9999px;
+			}
+
+			&[type='radio']:checked::after {
+				content: '';
+				position: absolute;
+				inset-block-start: 50%;
+				inset-inline-start: 50%;
+				width: 0.5rem;
+				height: 0.5rem;
+				background-color: var(--form-check-input-checked-color);
+				border: 0;
+				border-radius: 9999px;
+				transform: translate(-50%, -50%);
+			}
+
 			&:focus-visible {
 				border-color: var(--primary-hover);
 				outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
@@ -202,3 +308,122 @@
 		color: var(--error);
 	}
 }
+
+@layer components {
+	.form-switch {
+		--form-switch-gap: var(--spacer-2);
+
+		--form-switch-input-width: 2.5rem;
+		--form-switch-input-height: 1.25rem;
+		--form-switch-input-padding: 0.125rem;
+
+		--form-switch-input-bg-color: var(--bg-highlight);
+		--form-switch-input-border-width: var(--border-width);
+		--form-switch-input-border-color: var(--border-color);
+		--form-switch-input-border-radius: 9999px;
+
+		--form-switch-input-checked-bg-color: var(--primary);
+		--form-switch-input-checked-border-color: var(--primary);
+
+		--form-switch-thumb-size: 1rem;
+		--form-switch-thumb-bg-color: var(--bg-surface);
+		--form-switch-thumb-box-shadow: var(--shadow-sm);
+
+		--form-switch-disabled-bg-color: var(--disabled-bg-color);
+		--form-switch-disabled-border-color: var(--disabled-border-color);
+		--form-switch-disabled-thumb-bg-color: var(--disabled-text-color);
+
+		--form-switch-focus-outline-width: var(--focus-outline-width);
+		--form-switch-focus-outline-style: var(--focus-outline-style);
+		--form-switch-focus-outline-color: var(--focus-outline-color);
+		--form-switch-focus-outline-offset: var(--focus-offset);
+
+		--form-switch-transition-duration: var(--transition-duration);
+		--form-switch-transition-easing: var(--transition-easing);
+
+		display: flex;
+		align-items: center;
+		gap: var(--form-switch-gap);
+
+		.form-switch-input {
+			box-sizing: border-box;
+			display: inline-flex;
+			align-items: center;
+			flex-shrink: 0;
+			width: var(--form-switch-input-width);
+			height: var(--form-switch-input-height);
+			margin: 0;
+			padding: var(--form-switch-input-padding);
+			appearance: none;
+			cursor: pointer;
+			background-color: var(--form-switch-input-bg-color);
+			border: var(--form-switch-input-border-width) solid var(--form-switch-input-border-color);
+			border-radius: var(--form-switch-input-border-radius);
+
+			transition:
+				background-color var(--form-switch-transition-duration) var(--form-switch-transition-easing),
+				border-color var(--form-switch-transition-duration) var(--form-switch-transition-easing),
+				box-shadow var(--form-switch-transition-duration) var(--form-switch-transition-easing);
+
+			&::after {
+				content: '';
+				display: block;
+				flex: 0 0 var(--form-switch-thumb-size);
+				width: var(--form-switch-thumb-size);
+				height: var(--form-switch-thumb-size);
+				background-color: var(--form-switch-thumb-bg-color);
+				border-radius: 9999px;
+				box-shadow: var(--form-switch-thumb-box-shadow);
+				transform: translateX(0);
+
+				transition:
+					transform var(--form-switch-transition-duration) var(--form-switch-transition-easing),
+					background-color var(--form-switch-transition-duration) var(--form-switch-transition-easing);
+			}
+
+			&:checked {
+				background-color: var(--form-switch-input-checked-bg-color);
+				border-color: var(--form-switch-input-checked-border-color);
+
+				&::after {
+					transform: translateX(
+						calc(
+							var(--form-switch-input-width) - var(--form-switch-thumb-size) -
+								(var(--form-switch-input-padding) * 2) - (var(--form-switch-input-border-width) * 2)
+						)
+					);
+				}
+			}
+
+			&:focus-visible {
+				outline: var(--form-switch-focus-outline-width) var(--form-switch-focus-outline-style)
+					var(--form-switch-focus-outline-color);
+				outline-offset: var(--form-switch-focus-outline-offset);
+			}
+
+			&.is-invalid {
+				border-color: var(--error);
+
+				&:focus-visible {
+					outline: var(--focus-outline-error);
+					outline-offset: var(--form-switch-focus-outline-offset);
+				}
+			}
+
+			&:disabled,
+			&[disabled] {
+				cursor: not-allowed;
+				background-color: var(--form-switch-disabled-bg-color);
+				border-color: var(--form-switch-disabled-border-color);
+
+				&::after {
+					background-color: var(--form-switch-disabled-thumb-bg-color);
+				}
+			}
+		}
+
+		.form-label {
+			margin-bottom: 0;
+		}
+	}
+}

package/scss/flex.scss

@@ -114,40 +114,6 @@
 	.flex-nowrap {
 		flex-wrap: nowrap;
 	}
-
-	// order
-	.order-0 {
-		order: 0;
-	}
-
-	.order-1 {
-		order: 1;
-	}
-
-	.order-2 {
-		order: 2;
-	}
-
-	.order-3 {
-		order: 3;
-	}
-
-	.order-4 {
-		order: 4;
-	}
-
-	.order-5 {
-		order: 5;
-	}
-
-	.order-first {
-		order: -1;
-	}
-
-	.order-last {
-		order: 6;
-	}
-
 	// align-content
 	// TODO
 }

package/scss/index.scss

@@ -18,6 +18,9 @@
 @forward './gap.scss';
 @forward './gap-responsive.scss';
 
+@forward './order.scss';
+@forward './order-responsive.scss';
+
 @forward './borders.scss';
 
 @forward './components/alert.scss';

package/scss/order-responsive.scss

@@ -0,0 +1,42 @@
+@use 'sass:map';
+@use './theme.scss' as theme;
+
+// Order utilities work with flex and grid items.
+
+@layer utilities {
+	@each $bp, $bp-value in map.get(theme.$theme, breakpoints) {
+		@media (min-width: #{$bp-value}) {
+			.order-#{$bp}-0 {
+				order: 0;
+			}
+
+			.order-#{$bp}-1 {
+				order: 1;
+			}
+
+			.order-#{$bp}-2 {
+				order: 2;
+			}
+
+			.order-#{$bp}-3 {
+				order: 3;
+			}
+
+			.order-#{$bp}-4 {
+				order: 4;
+			}
+
+			.order-#{$bp}-5 {
+				order: 5;
+			}
+
+			.order-#{$bp}-first {
+				order: -1;
+			}
+
+			.order-#{$bp}-last {
+				order: 6;
+			}
+		}
+	}
+}

package/scss/order.scss

@@ -0,0 +1,35 @@
+// Order utilities work with flex and grid items.
+
+@layer utilities {
+	.order-0 {
+		order: 0;
+	}
+
+	.order-1 {
+		order: 1;
+	}
+
+	.order-2 {
+		order: 2;
+	}
+
+	.order-3 {
+		order: 3;
+	}
+
+	.order-4 {
+		order: 4;
+	}
+
+	.order-5 {
+		order: 5;
+	}
+
+	.order-first {
+		order: -1;
+	}
+
+	.order-last {
+		order: 6;
+	}
+}