@abstraks-dev/ui-library 1.0.1

package/dist/styles/tabs.scss

@@ -0,0 +1,540 @@
+@use 'variables' as *;
+
+/* ==========================================================================
+   Tabs Component Styles
+   ========================================================================== */
+
+/**
+ * Tabs Wrapper
+ * Main container for the entire tabs component
+ */
+.tabs-wrapper {
+	display: flex;
+	flex-direction: column;
+	font-family: $font-family-body;
+	width: 100%;
+
+	/* Orientation variants */
+	&--vertical {
+		flex-direction: row;
+
+		.tabs__list {
+			flex-direction: column;
+			border-right: 1px solid $border-color;
+			border-bottom: none;
+			min-width: 200px;
+		}
+
+		.tabs__panels {
+			flex: 1;
+		}
+	}
+
+	/* Size variants */
+	&--small {
+		font-size: $font-size-sm;
+	}
+
+	&--medium {
+		font-size: $font-size-base;
+	}
+
+	&--large {
+		font-size: $font-size-lg;
+	}
+
+	/* Disabled state */
+	&--disabled {
+		opacity: 0.6;
+		pointer-events: none;
+	}
+}
+
+/**
+ * Tab List
+ * Container for tab buttons
+ */
+.tabs__list {
+	display: flex;
+	border-bottom: 1px solid $border-color;
+	background-color: $background-color;
+	overflow-x: auto;
+	scrollbar-width: thin;
+
+	/* Focus management */
+	&:focus-within {
+		outline: 2px solid $focus-color;
+		outline-offset: 2px;
+	}
+
+	/* Size variants */
+	&--small {
+		min-height: 2rem;
+	}
+
+	&--medium {
+		min-height: 2.5rem;
+	}
+
+	&--large {
+		min-height: 3rem;
+	}
+
+	/* Vertical orientation */
+	&--vertical {
+		flex-direction: column;
+		border-bottom: none;
+		border-right: 1px solid $border-color;
+		overflow-y: auto;
+		overflow-x: hidden;
+	}
+}
+
+/**
+ * Individual Tab Button
+ */
+.tabs__tab {
+	/* Reset and base styles */
+	appearance: none;
+	background-color: transparent;
+	border: none;
+	color: $color-font-body;
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	gap: $spacing-xs;
+	font-family: inherit;
+	font-size: inherit;
+	font-weight: $font-weight-medium;
+	line-height: $line-height-tight;
+	padding: $spacing-sm $spacing-md;
+	position: relative;
+	transition: all 0.2s ease;
+	white-space: nowrap;
+	text-decoration: none;
+
+	/* Hover state */
+	&:hover:not(:disabled):not(.tabs__tab--disabled) {
+		background-color: $gray-100;
+		color: $color-primary;
+	}
+
+	/* Focus state */
+	&:focus {
+		outline: 2px solid $focus-color;
+		outline-offset: -2px;
+		z-index: 1;
+	}
+
+	/* Active state */
+	&--active {
+		background-color: $background-color;
+		color: $color-primary;
+		font-weight: $font-weight-semibold;
+
+		/* Default variant - bottom border */
+		&::after {
+			content: '';
+			position: absolute;
+			bottom: -1px;
+			left: 0;
+			right: 0;
+			height: 2px;
+			background-color: $color-primary;
+		}
+	}
+
+	/* Disabled state */
+	&--disabled,
+	&:disabled {
+		background-color: transparent;
+		color: $gray-500;
+		cursor: not-allowed;
+		opacity: 0.6;
+
+		&:hover {
+			background-color: transparent;
+			color: $gray-500;
+		}
+	}
+
+	/* Size variants */
+	&--small {
+		padding: $spacing-xs $spacing-sm;
+		font-size: $font-size-xs;
+	}
+
+	&--medium {
+		padding: $spacing-sm $spacing-md;
+		font-size: $font-size-sm;
+	}
+
+	&--large {
+		padding: $spacing-md $spacing-lg;
+		font-size: $font-size-base;
+	}
+}
+
+/**
+ * Tab Icon
+ */
+.tabs__tab-icon {
+	display: flex;
+	align-items: center;
+	flex-shrink: 0;
+	font-size: 1em;
+}
+
+/**
+ * Tab Label
+ */
+.tabs__tab-label {
+	flex: 1;
+	text-align: left;
+	min-width: 0; /* Allow text truncation */
+}
+
+/**
+ * Tab Badge
+ */
+.tabs__tab-badge {
+	background-color: $color-error;
+	border-radius: 50%;
+	color: $color-white;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 0.75em;
+	font-weight: $font-weight-bold;
+	min-width: 1.2em;
+	height: 1.2em;
+	padding: 0 0.2em;
+	line-height: 1;
+}
+
+/**
+ * Tab Panels Container
+ */
+.tabs__panels {
+	position: relative;
+	background-color: $background-color;
+	flex: 1;
+}
+
+/**
+ * Individual Tab Panel
+ */
+.tabs__panel {
+	display: none;
+	outline: none;
+
+	/* Active panel */
+	&--active {
+		display: block;
+	}
+
+	/* Focus management */
+	&:focus {
+		outline: 2px solid $focus-color;
+		outline-offset: 2px;
+	}
+
+	/* Size variants */
+	&--small {
+		font-size: $font-size-sm;
+	}
+
+	&--medium {
+		font-size: $font-size-base;
+	}
+
+	&--large {
+		font-size: $font-size-lg;
+	}
+}
+
+/**
+ * Panel Content
+ */
+.tabs__panel-content {
+	padding: $spacing-md;
+	color: $color-font-body;
+	line-height: $line-height-base;
+
+	/* Size variants */
+	.tabs__panel--small & {
+		padding: $spacing-sm;
+	}
+
+	.tabs__panel--large & {
+		padding: $spacing-lg;
+	}
+}
+
+/* ==========================================================================
+   Variant Styles
+   ========================================================================== */
+
+/**
+ * Pills Variant
+ */
+.tabs-wrapper--pills {
+	.tabs__list {
+		border-bottom: none;
+		gap: $spacing-xs;
+		padding: $spacing-xs;
+		background-color: $gray-100;
+		border-radius: $border-radius-md;
+	}
+
+	.tabs__tab {
+		border-radius: $border-radius-sm;
+
+		&--active {
+			background-color: $color-primary;
+			color: $color-white;
+
+			&::after {
+				display: none;
+			}
+
+			&:hover {
+				background-color: $color-primary;
+				color: $color-white;
+			}
+		}
+	}
+}
+
+/**
+ * Underline Variant
+ */
+.tabs-wrapper--underline {
+	.tabs__list {
+		border-bottom: 1px solid $border-color;
+		background-color: transparent;
+	}
+
+	.tabs__tab {
+		border-bottom: 2px solid transparent;
+
+		&--active {
+			background-color: transparent;
+			border-bottom-color: $color-primary;
+
+			&::after {
+				display: none;
+			}
+		}
+	}
+}
+
+/**
+ * Boxed Variant
+ */
+.tabs-wrapper--boxed {
+	.tabs__list {
+		border: 1px solid $border-color;
+		border-radius: $border-radius-md $border-radius-md 0 0;
+		background-color: $gray-100;
+	}
+
+	.tabs__tab {
+		border-right: 1px solid $border-color;
+
+		&:last-child {
+			border-right: none;
+		}
+
+		&--active {
+			background-color: $background-color;
+			border-bottom: 1px solid $background-color;
+			margin-bottom: -1px;
+
+			&::after {
+				display: none;
+			}
+		}
+	}
+
+	.tabs__panels {
+		border: 1px solid $border-color;
+		border-top: none;
+		border-radius: 0 0 $border-radius-md $border-radius-md;
+	}
+}
+
+/* ==========================================================================
+   Responsive Design
+   ========================================================================== */
+
+@media #{$medium} {
+	.tabs__tab {
+		&--small {
+			padding: $spacing-sm $spacing-md;
+			font-size: $font-size-sm;
+		}
+
+		&--medium {
+			padding: $spacing-md $spacing-lg;
+			font-size: $font-size-base;
+		}
+
+		&--large {
+			padding: $spacing-lg $spacing-xl;
+			font-size: $font-size-lg;
+		}
+	}
+
+	.tabs__panel-content {
+		padding: $spacing-lg;
+
+		.tabs__panel--small & {
+			padding: $spacing-md;
+		}
+
+		.tabs__panel--large & {
+			padding: $spacing-xl;
+		}
+	}
+}
+
+@media #{$large} {
+	.tabs__list {
+		overflow-x: visible;
+
+		&--small {
+			min-height: 2.25rem;
+		}
+
+		&--medium {
+			min-height: 2.75rem;
+		}
+
+		&--large {
+			min-height: 3.25rem;
+		}
+	}
+
+	.tabs__tab {
+		&--large {
+			padding: $spacing-lg $spacing-xl;
+			font-size: $font-size-xl;
+		}
+	}
+}
+
+@media #{$xlarge} {
+	.tabs-wrapper--vertical {
+		.tabs__list {
+			min-width: 250px;
+		}
+	}
+
+	.tabs__panel-content {
+		padding: $spacing-xl;
+
+		.tabs__panel--small & {
+			padding: $spacing-lg;
+		}
+
+		.tabs__panel--large & {
+			padding: $spacing-2xl;
+		}
+	}
+}
+
+/* ==========================================================================
+   High Contrast Mode Support
+   ========================================================================== */
+@media (prefers-contrast: high) {
+	.tabs__tab {
+		border: 1px solid transparent;
+		font-weight: $font-weight-semibold;
+
+		&:focus {
+			outline: 3px solid currentColor;
+			outline-offset: 2px;
+		}
+
+		&--active {
+			border-color: currentColor;
+			font-weight: $font-weight-bold;
+
+			&::after {
+				height: 3px;
+			}
+		}
+	}
+
+	.tabs__tab-badge {
+		border: 2px solid currentColor;
+	}
+}
+
+/* ==========================================================================
+   Light Theme Support
+   ========================================================================== */
+@media (prefers-color-scheme: light) {
+	.tabs__list {
+		background-color: $color-white;
+		border-color: $gray-300;
+	}
+
+	.tabs__tab {
+		color: $gray-600;
+
+		&:hover:not(:disabled):not(.tabs__tab--disabled) {
+			background-color: $gray-100;
+			color: $color-primary;
+		}
+
+		&--active {
+			background-color: $color-white;
+			color: $color-primary;
+		}
+
+		&--disabled,
+		&:disabled {
+			color: $gray-500;
+		}
+	}
+
+	.tabs__panels {
+		background-color: $color-white;
+	}
+
+	.tabs__panel-content {
+		color: $gray-600;
+	}
+
+	/* Variant adjustments for light mode */
+	.tabs-wrapper--pills .tabs__list {
+		background-color: $gray-100;
+	}
+
+	.tabs-wrapper--boxed {
+		.tabs__list {
+			background-color: $gray-100;
+			border-color: $gray-300;
+		}
+
+		.tabs__tab--active {
+			background-color: $color-white;
+			border-bottom-color: $color-white;
+		}
+
+		.tabs__panels {
+			border-color: $gray-300;
+		}
+	}
+}
+
+/* ==========================================================================
+   Reduced Motion Support
+   ========================================================================== */
+@media (prefers-reduced-motion: reduce) {
+	.tabs__tab {
+		transition: none;
+	}
+}