@unifiedsoftware/styles 1.1.8 → 2.0.0-alpha.10

package/scss/components/_card.scss

@@ -6,6 +6,15 @@
 	z-index: 0;
 	overflow: hidden;
 	-webkit-tap-highlight-color: transparent;
+	background-color: white;
+
+	&__content {
+		padding-block: var(--#{$prefix}card-padding-y);
+		padding-inline: var(--#{$prefix}card-padding-x);
+		display: flex;
+		flex-direction: column;
+		gap: var(--#{$prefix}card-gap);
+	}
 
 	&:hover {
 		text-decoration: none;
@@ -15,6 +24,10 @@
 		border: var(--#{$prefix}card-border-width) var(--#{$prefix}card-border-style) var(--#{$prefix}card-border-color);
 	}
 
+	&--shadow {
+		box-shadow: var(--#{$prefix}card-box-shadow);
+	}
+
 	&--hoverable,
 	&--selected {
 		cursor: pointer;
@@ -34,6 +47,7 @@
 		min-height: var(--#{$prefix}card-header-min-height);
 		padding-block: var(--#{$prefix}card-header-padding-y);
 		padding-inline: var(--#{$prefix}card-header-padding-x);
+		color: var(--#{$prefix}card-header-color);
 		display: flex;
 		align-items: center;
 		gap: var(--#{$prefix}card-header-gap);
@@ -43,16 +57,36 @@
 			flex-shrink: 0;
 			display: flex;
 			align-items: center;
+			gap: var(--#{$prefix}card-header-content-gap);
 		}
 
 		&__content {
 			flex-grow: 1;
+			overflow: hidden;
 			display: flex;
 			flex-direction: column;
-			gap: var(--#{$prefix}card-header-content-gap);
+			justify-content: center;
 		}
 
-		&__title {
+		&--centered &__start-content,
+		&--centered &__end-content {
+			position: absolute;
+		}
+
+		&--centered &__start-content {
+			left: var(--#{$prefix}card-header-padding-x);
+		}
+
+		&--centered &__end-content {
+			right: var(--#{$prefix}card-header-padding-x);
+		}
+
+		&--centered &__content {
+			align-items: center;
+			text-align: center;
+		}
+
+		& .#{$prefix}card-title {
 			font-size: var(--#{$prefix}card-header-title-font-size);
 			font-weight: var(--#{$prefix}card-header-title-font-weight);
 			line-height: var(--#{$prefix}card-header-title-line-height);
@@ -63,7 +97,7 @@
 			-webkit-line-clamp: 1;
 		}
 
-		&__subtitle {
+		& .#{$prefix}card-subtitle {
 			font-size: var(--#{$prefix}card-header-subtitle-font-size);
 			font-weight: var(--#{$prefix}card-header-subtitle-font-weight);
 			line-height: var(--#{$prefix}card-header-subtitle-line-height);
@@ -75,17 +109,33 @@
 		}
 	}
 
-	&-header:not(&-header--bordered) ~ &-body:not([data-hidden='true']) {
-		padding-top: 0;
+	& &-title:not(&-header &-title) {
+		flex-shrink: 0;
+		padding-block: var(--#{$prefix}card-title-padding-y);
+		padding-inline: var(--#{$prefix}card-title-padding-x);
+		font-size: var(--#{$prefix}card-title-font-size);
+		font-weight: var(--#{$prefix}card-title-font-weight);
+		line-height: var(--#{$prefix}card-title-line-height);
+		color: var(--#{$prefix}card-title-color);
 	}
 
-	&-header--bordered ~ &-body:not([data-hidden='true']) {
-		border-top-width: 1px;
+	& &-title--centered:not(&-header &-title) {
+		text-align: center;
+	}
+
+	& &-subtitle:not(&-header &-subtitle) {
+		flex-shrink: 0;
+		font-size: var(--#{$prefix}card-header-subtitle-font-size);
+		font-weight: var(--#{$prefix}card-header-subtitle-font-weight);
+		line-height: var(--#{$prefix}card-header-subtitle-line-height);
+		overflow: hidden;
+		color: var(--#{$prefix}card-header-subtitle-color);
 	}
 
 	&-body {
-		border-top: 0px solid #ddd;
-		padding: var(--#{$prefix}card-body-padding-y) var(--#{$prefix}card-body-padding-x);
+		position: relative;
+		padding-block: var(--#{$prefix}card-body-padding-y);
+		padding-inline: var(--#{$prefix}card-body-padding-x);
 		font-size: var(--#{$prefix}card-body-font-size);
 		line-height: var(--#{$prefix}card-body-line-height);
 		color: var(--#{$prefix}card-body-color);
@@ -107,11 +157,76 @@
 		gap: 0.5rem;
 	}
 
-	&-body:not([data-hidden='true']) ~ &-footer:not(&-footer--bordered) {
-		padding-top: 0;
+	&-media {
+		position: relative;
+		margin: 8px;
+		border-radius: 8px;
+		aspect-ratio: 1 / 1;
+		overflow: hidden;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		background-color: rgba(0, 0, 0, 0.08);
+
+		&__top-left-content {
+			padding: 4px;
+			position: absolute;
+			top: 0;
+			left: 0;
+		}
+
+		&__top-right-content {
+			padding: 4px;
+			position: absolute;
+			top: 0;
+			right: 0;
+		}
+
+		img {
+			width: 100%;
+			height: 100%;
+			object-fit: cover;
+		}
 	}
 
-	&-footer--bordered {
-		border-top-width: 1px;
+	&--divider &-body {
+		margin-bottom: var(--#{$prefix}card-padding-y);
+		margin-top: var(--#{$prefix}card-padding-y);
+
+		&::before {
+			content: '';
+			position: absolute;
+			left: 0;
+			right: 0;
+			top: 0;
+			border-top: 1px solid var(--#{$prefix}card-border-color);
+		}
+
+		&::after {
+			content: '';
+			position: absolute;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			border-bottom: 1px solid var(--#{$prefix}card-border-color);
+		}
+	}
+
+	&--divider &__content > &-body:first-child,
+	&--divider &__content :not([hidden]):first-child &-body {
+		margin-top: 0;
+
+		&::before {
+			border-top: none;
+		}
+	}
+
+	&--divider &__content > &-body:last-child,
+	&--divider &__content :not([hidden]):last-child &-body {
+		margin-bottom: 0;
+
+		&::after {
+			border-bottom: none;
+		}
 	}
 }

package/scss/components/_descriptions.scss

@@ -0,0 +1,69 @@
+@use '../variables' as *;
+
+.#{$prefix}descriptions {
+	display: grid;
+	grid-template-columns: repeat(12, minmax(0, 1fr));
+	row-gap: var(--#{$prefix}descriptions-gap-y);
+	column-gap: var(--#{$prefix}descriptions-gap-x);
+}
+
+.#{$prefix}description {
+	position: relative;
+	padding-block: var(--#{$prefix}description-padding-y);
+	padding-inline: var(--#{$prefix}description-padding-x);
+
+	&__container {
+		display: grid;
+		grid-template-columns: repeat(12, minmax(0, 1fr));
+		row-gap: var(--#{$prefix}description-gap-y);
+		column-gap: var(--#{$prefix}description-gap-x);
+	}
+
+	&-value {
+		display: flex;
+		align-items: center;
+
+		&__start-content,
+		&__end-content {
+			flex-shrink: 0;
+		}
+
+		&__content {
+			flex-grow: 1;
+		}
+	}
+
+	.#{$prefix}descriptions--row &-label {
+		grid-column: span 6 / span 6;
+	}
+
+	.#{$prefix}descriptions--row &-value {
+		grid-column: span 6 / span 6;
+	}
+
+	.#{$prefix}descriptions--col &-label,
+	.#{$prefix}descriptions--col &-value {
+		grid-column: span 12 / span 12;
+	}
+
+	&-label {
+		font-size: var(--#{$prefix}description-label-font-size);
+		font-weight: var(--#{$prefix}description-label-font-weight);
+		color: var(--#{$prefix}description-label-color);
+		opacity: var(--#{$prefix}description-label-opacity);
+	}
+
+	&-text {
+		display: inline;
+		font-size: var(--#{$prefix}description-text-font-size);
+		font-weight: var(--#{$prefix}description-text-font-weight);
+		color: var(--#{$prefix}description-text-color);
+		opacity: var(--#{$prefix}description-text-opacity);
+	}
+
+	&-empty {
+		opacity: 0.75;
+		user-select: none;
+		cursor: default;
+	}
+}

package/scss/components/_divider.scss

@@ -3,5 +3,5 @@
 .#{$prefix}divider {
 	width: 100%;
 	height: 1px;
-	background: #cac4d0;
+	background: var(--#{$prefix}border-color);
 }

package/scss/components/_icon.scss

@@ -3,7 +3,7 @@
 .#{$prefix}icon {
 	width: 1em;
 	height: 1em;
-	font-size: var(--#{$prefix}icon-font-size);
+	font-size: var(--#{$prefix}icon-font-size, var(--#{$prefix}icon-font-size-default)) !important;
 	color: var(--#{$prefix}icon-color);
 	display: flex;
 	justify-content: center;

package/scss/components/_index.scss

@@ -31,4 +31,7 @@
 @use 'tabs';
 
 @use 'card';
+@use 'descriptions';
 @use 'result';
+
+@use 'nav-rail';

package/scss/components/_input.scss

@@ -36,10 +36,49 @@
 		transform: scale(0.75);
 	}
 
-	&__clearable {
+	&-group {
+		display: flex;
+		align-items: center;
+	}
+
+	&-group & {
+		border-radius: 0px;
+	}
+
+	&-group &:first-of-type {
+		border-top-left-radius: var(--#{$prefix}input-border-radius);
+		border-bottom-left-radius: var(--#{$prefix}input-border-radius);
+	}
+
+	&-group &:last-of-type {
+		border-top-right-radius: var(--#{$prefix}input-border-radius);
+		border-bottom-right-radius: var(--#{$prefix}input-border-radius);
+	}
+
+	&__icon {
+		padding: 0;
 		display: flex;
 		justify-content: center;
 		align-items: center;
+		border: none;
+		outline: none;
+		background-color: transparent;
+	}
+
+	&__icon--opacity {
+		opacity: 0;
+	}
+
+	&__icon--pointer {
+		cursor: pointer;
+	}
+
+	&:hover &__icon--opacity-hoverable {
+		opacity: 0.5;
+
+		&:hover {
+			opacity: 1;
+		}
 	}
 
 	&__content {
@@ -75,7 +114,8 @@
 		}
 	}
 
-	&__search {
+	&__search,
+	&__placeholder {
 		flex: 1;
 		width: 100%;
 		padding-block: var(--#{$prefix}input-padding-y);
@@ -85,9 +125,13 @@
 		line-height: var(--#{$prefix}input-line-height);
 		color: var(--#{$prefix}input-color);
 		overflow: hidden;
-		display: -webkit-box;
-		-webkit-box-orient: vertical;
-		-webkit-line-clamp: 1;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		display: block;
+	}
+
+	&__placeholder {
+		opacity: 0.6;
 	}
 
 	&__chips {
@@ -112,8 +156,13 @@
 	&__start-content,
 	&__end-content {
 		flex-shrink: 0;
+		height: 100%;
 		display: flex;
 		align-items: center;
+		font-size: var(--#{$prefix}input-font-size);
+		font-family: var(--#{$prefix}input-font-family);
+		line-height: var(--#{$prefix}input-line-height);
+		gap: var(--#{$prefix}input-content-gap);
 
 		.#{$prefix}icon {
 			font-size: var(--#{$prefix}input-icon-size);

package/scss/components/_nav-rail.scss

@@ -0,0 +1,183 @@
+@use '../variables' as *;
+
+.#{$prefix}nav-rail {
+	flex-shrink: 0;
+	position: relative;
+	width: 73px;
+	height: 100%;
+	overflow: hidden;
+	display: flex;
+	flex-direction: column;
+
+	&--left {
+		border-right-width: 1px;
+		border-right-color: var(--#{$prefix}nav-rail-border-color);
+		border-right-style: solid;
+	}
+
+	&--right {
+		border-left-width: 1px;
+		border-left-color: var(--#{$prefix}nav-rail-border-color);
+		border-left-style: solid;
+	}
+
+	&__start-content,
+	&__end-content {
+		flex-shrink: 0;
+	}
+
+	&__start-content {
+		padding-block: var(--#{$prefix}nav-rail-start-content-padding-y);
+		padding-inline: var(--#{$prefix}nav-rail-start-content-padding-x);
+		gap: var(--#{$prefix}nav-rail-start-content-gap);
+	}
+
+	&__end-content {
+		padding-block: var(--#{$prefix}nav-rail-end-content-padding-y);
+		padding-inline: var(--#{$prefix}nav-rail-end-content-padding-x);
+		gap: var(--#{$prefix}nav-rail-end-content-gap);
+	}
+
+	&__content {
+		flex-grow: 1;
+		padding-block: var(--#{$prefix}nav-rail-content-padding-y);
+		padding-inline: var(--#{$prefix}nav-rail-content-padding-x);
+		gap: var(--#{$prefix}nav-rail-content-gap);
+	}
+
+	&__start-content,
+	&__end-content,
+	&__content {
+		display: flex;
+		flex-direction: column;
+	}
+
+	&-item {
+		flex-shrink: 0;
+		padding-block: var(--#{$prefix}nav-rail-item-padding-y);
+		padding-inline: var(--#{$prefix}nav-rail-item-padding-x);
+		position: relative;
+		text-decoration: none;
+		opacity: var(--#{$prefix}nav-rail-item-opacity);
+		border-radius: var(--#{$prefix}nav-rail-item-border-radius);
+		cursor: default;
+		color: var(--#{$prefix}nav-rail-item-color);
+		background-color: var(--#{$prefix}nav-rail-item-background);
+		display: flex;
+		user-select: none;
+
+		&__indicator {
+			position: absolute;
+			top: 0;
+			bottom: 0;
+			z-index: 1;
+			width: var(--#{$prefix}nav-rail-item-indicator-size);
+			z-index: 1;
+			background: var(--#{$prefix}nav-rail-item-indicator-color);
+			transform: translateX(calc(var(--#{$prefix}nav-rail-item-indicator-size) * -1));
+			transition:
+				transform 0.125s cubic-bezier(0.17, 0.67, 0.55, 1.09),
+				inset 0.125s cubic-bezier(0.17, 0.67, 0.55, 1.09);
+		}
+
+		&__content {
+			flex-grow: 1;
+			position: relative;
+			padding-block: var(--#{$prefix}nav-rail-item-content-padding-y);
+			padding-inline: var(--#{$prefix}nav-rail-item-content-padding-x);
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			align-items: center;
+			gap: var(--#{$prefix}nav-rail-item-gap);
+		}
+
+		&__media {
+			position: relative;
+			outline-width: var(--#{$prefix}nav-rail-item-media-border-width);
+			outline-style: var(--#{$prefix}nav-rail-item-media-border-style);
+			outline-color: var(--#{$prefix}nav-rail-item-media-border-color);
+			width: var(--#{$prefix}nav-rail-item-media-width);
+			height: var(--#{$prefix}nav-rail-item-media-height);
+			border-radius: var(--#{$prefix}nav-rail-item-media-border-radius);
+			overflow: hidden;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			transition: transform 0.125s cubic-bezier(0.17, 0.67, 0.55, 1.09);
+		}
+
+		&__icon {
+			padding-block: var(--#{$prefix}nav-rail-item-icon-padding-y);
+			padding-inline: var(--#{$prefix}nav-rail-item-icon-padding-x);
+			display: flex;
+			justify-content: center;
+			align-items: center;
+
+			& .#{$prefix}icon {
+				font-size: var(--#{$prefix}nav-rail-item-icon-font-size);
+			}
+		}
+
+		&__label {
+			position: absolute;
+			bottom: calc((var(--#{$prefix}nav-rail-item-label-font-size) + var(--#{$prefix}nav-rail-item-gap, 0)) * -1);
+			left: 50%;
+			transform: translateX(-50%);
+			font-size: var(--#{$prefix}nav-rail-item-label-font-size);
+			font-weight: var(--#{$prefix}nav-rail-item-label-font-weight);
+			line-height: var(--#{$prefix}nav-rail-item-label-line-height);
+			text-wrap: nowrap;
+			overflow: hidden;
+			display: -webkit-box;
+			-webkit-box-orient: vertical;
+			-webkit-line-clamp: 1;
+			transition: opacity 0.125s cubic-bezier(0.17, 0.67, 0.55, 1.09);
+		}
+
+		&--selected {
+			color: var(--#{$prefix}_active-nav-rail-item-color);
+		}
+
+		&--selected &__media {
+			outline-color: var(--#{$prefix}_active-nav-rail-item-media-border-color);
+		}
+
+		&--selected &__icon,
+		&:hover &__icon {
+			transform: scale(1.15);
+		}
+
+		&--selected &__indicator,
+		&--selected:hover &__indicator {
+			color: var(--#{$prefix}_active-nav-rail-item-indicator-color);
+		}
+
+		&--selected &__indicator,
+		&:hover &__indicator {
+			transform: translateX(0px);
+		}
+	}
+
+	&--left &-item__indicator {
+		left: -25%;
+		border-radius: 0px var(--#{$prefix}nav-rail-item-indicator-border-radius)
+			var(--#{$prefix}nav-rail-item-indicator-border-radius) 0px;
+	}
+
+	&--right &-item__indicator {
+		right: -25%;
+		border-radius: var(--#{$prefix}nav-rail-item-indicator-border-radius) 0px 0px
+			var(--#{$prefix}nav-rail-item-indicator-border-radius);
+	}
+
+	&--left &-item--selected &-item__indicator,
+	&--left &-item--selected:hover &-item__indicator {
+		left: 0px;
+	}
+
+	&--right &-item--selected &-item__indicator,
+	&--right &-item--selected:hover &-item__indicator {
+		right: 0px;
+	}
+}

package/scss/components/_swipe.scss

@@ -2,44 +2,44 @@
 
 .#{$prefix}swipe {
 	position: relative;
-	overflow-x: hidden;
-	display: flex;
-	align-items: center;
-	gap: var(--#{$prefix}swipe-gap);
 
-	@media (max-width: 767px) and (hover: none) {
-		overflow: auto;
-	}
-
-	&-wrapper {
+	&__content {
 		position: relative;
+		overflow-x: hidden;
+		display: flex;
+		align-items: center;
+		gap: var(--#{$prefix}swipe-gap);
 
-		&__left,
-		&__right {
-			position: absolute;
-			top: 50%;
-			transform: translateY(-50%);
-			z-index: 1;
+		@media (max-width: 767px) and (hover: none) {
+			overflow-x: auto;
 		}
+	}
 
-		&__left {
-			left: -1.25rem;
-		}
+	&__start-content,
+	&__end-content {
+		position: absolute;
+		top: 50%;
+		transform: translateY(-50%);
+		z-index: 1;
+	}
 
-		&__right {
-			right: -1.25rem;
-		}
+	&__start-content {
+		left: -1.25rem;
+	}
 
-		&--auto-hide &__left,
-		&--auto-hide &__right {
-			transform: translateY(-50%) scale(0);
-			transition: all 0.2s ease-in-out;
-		}
+	&__end-content {
+		right: -1.25rem;
+	}
 
-		&--auto-hide:hover &__left,
-		&--auto-hide:hover &__right {
-			transform: translateY(-50%) scale(1);
-		}
+	&--auto-hide &__start-content,
+	&--auto-hide &__end-content {
+		transform: translateY(-50%) scale(0);
+		transition: all 0.2s ease-in-out;
+	}
+
+	&--auto-hide:hover &__start-content,
+	&--auto-hide:hover &__end-content {
+		transform: translateY(-50%) scale(1);
 	}
 
 	&--start &-item {

package/scss/components/_tabs.scss

@@ -81,7 +81,7 @@
 		inset: auto 0px 0px;
 		opacity: 0;
 		z-index: -1;
-		background: var(--#{$prefix}tab-indicator-color);
+		color: var(--#{$prefix}tab-indicator-color);
 		transform-origin: left bottom;
 	}
 

package/scss/components/_toolbar.scss

@@ -16,13 +16,18 @@
 		margin: 0 auto;
 		display: flex;
 		align-items: center;
-		gap: 0.5rem;
+		gap: var(--#{$prefix}toolbar-gap);
 		z-index: 1;
 	}
 
 	&__start-action,
-	&__end-action {
+	&__start-content,
+	&__end-action,
+	&__end-content {
 		flex-shrink: 0;
+		display: flex;
+		align-items: center;
+		gap: var(--#{$prefix}toolbar-content-gap);
 	}
 
 	&__content {

package/scss/themes/fci/_index.scss

@@ -1,3 +1,5 @@
 @use 'components';
 
+@use 'kendo';
+
 @use 'tokens';