@unifiedsoftware/styles 2.0.1-beta.9 → 2.0.2

package/scss/themes/centurion/components/_index.scss

@@ -0,0 +1,31 @@
+@use 'accordion';
+
+@use 'toolbar';
+
+@use 'icon';
+@use 'badge';
+
+@use 'chip';
+@use 'button';
+
+@use 'drawer';
+@use 'modal';
+
+@use 'input';
+@use 'radio';
+@use 'switch';
+
+@use 'list';
+@use 'menu';
+@use 'swipe';
+@use 'tabs';
+
+@use 'card';
+@use 'descriptions';
+@use 'result';
+
+@use 'nav-rail';
+
+@use 'steps';
+
+@use 'checkbox';

package/scss/themes/centurion/components/_input.scss

@@ -0,0 +1,278 @@
+@use '../../../variables' as *;
+
+$colors-map: (primary, secondary, success, info, warning, danger);
+
+.#{$prefix}theme-centurion {
+	.#{$prefix}input {
+		--#{$prefix}input-font-family: var(--#{$prefix}font-sans);
+
+		&--xs {
+			--#{$prefix}input-height: 24px;
+			--#{$prefix}input-padding-y: 0.282rem;
+			--#{$prefix}input-padding-x: 0.625rem;
+			--#{$prefix}input-font-size: 0.75rem;
+			--#{$prefix}input-border-radius: 6px;
+			--#{$prefix}input-line-height: 1;
+		}
+
+		&--xs .#{$prefix}icon:not(.#{$prefix}button .#{$prefix}icon) {
+			--#{$prefix}icon-font-size-default: 0.75rem;
+		}
+
+		&--sm {
+			--#{$prefix}input-height: 28px;
+			--#{$prefix}input-padding-y: 0.407rem;
+			--#{$prefix}input-padding-x: 0.75rem;
+			--#{$prefix}input-font-size: 0.75rem;
+			--#{$prefix}input-border-radius: 6px;
+			--#{$prefix}input-line-height: 1;
+		}
+
+		&--sm .#{$prefix}icon:not(.#{$prefix}button .#{$prefix}icon) {
+			--#{$prefix}icon-font-size-default: 0.875rem;
+		}
+
+		&--md {
+			--#{$prefix}input-height: 28px;
+			--#{$prefix}input-padding-y: 0.407rem;
+			--#{$prefix}input-padding-x: 0.75rem;
+			--#{$prefix}input-font-size: 0.75rem;
+			--#{$prefix}input-border-radius: 0px;
+			--#{$prefix}input-line-height: 1;
+		}
+
+		&--md .#{$prefix}icon:not(.#{$prefix}button .#{$prefix}icon) {
+			--#{$prefix}icon-font-size-default: 0.875rem;
+		}
+
+		&--lg {
+			--#{$prefix}input-height: 36px;
+			--#{$prefix}input-padding-y: 0.625rem;
+			--#{$prefix}input-padding-x: 1rem;
+			--#{$prefix}input-font-size: 0.875rem;
+			--#{$prefix}input-border-radius: 8px;
+			--#{$prefix}input-line-height: 1;
+		}
+
+		&--lg .#{$prefix}icon:not(.#{$prefix}button .#{$prefix}icon) {
+			--#{$prefix}icon-font-size-default: 1.125rem;
+		}
+
+		&--xl {
+			--#{$prefix}input-height: 40px;
+			--#{$prefix}input-padding-y: 0.75rem;
+			--#{$prefix}input-padding-x: 1.25rem;
+			--#{$prefix}input-font-size: 1rem;
+			--#{$prefix}input-border-radius: 8px;
+			--#{$prefix}input-line-height: 1;
+		}
+
+		&--xl .#{$prefix}icon:not(.#{$prefix}button .#{$prefix}icon) {
+			--#{$prefix}icon-font-size-default: 1.25rem;
+		}
+
+		&--filled {
+			& > .#{$prefix}outline {
+				--#{$prefix}outline-border-width: 1px;
+			}
+
+			& > .#{$prefix}glow {
+				--#{$prefix}glow-opacity: 0;
+			}
+		}
+
+		&--outlined {
+			& > .#{$prefix}overlay {
+				--#{$prefix}overlay-color: inherit;
+				--#{$prefix}overlay-opacity: 0;
+			}
+
+			& > .#{$prefix}outline {
+				--#{$prefix}outline-border-width: 1px;
+			}
+
+			& > .#{$prefix}glow {
+				--#{$prefix}glow-opacity: 0;
+			}
+		}
+
+		&--flat {
+			& > .#{$prefix}outline {
+				--#{$prefix}outline-border-width: 1px;
+			}
+
+			& > .#{$prefix}glow {
+				--#{$prefix}glow-opacity: 0;
+			}
+		}
+
+		&--text {
+			--#{$prefix}input-padding-x: 0;
+
+			& > .#{$prefix}outline {
+				--#{$prefix}outline-border-width: 1px;
+			}
+
+			& > .#{$prefix}glow {
+				--#{$prefix}glow-opacity: 0;
+			}
+		}
+	}
+
+	.#{$prefix}input--filled {
+		--#{$prefix}input-color: rgba(0, 0, 0, 0.87);
+		--#{$prefix}input-placeholder-color: rgba(0, 0, 0, 0.6);
+
+		& > .#{$prefix}overlay {
+			--#{$prefix}overlay-color: #fff;
+			--#{$prefix}overlay-opacity: 1;
+		}
+
+		& > .#{$prefix}outline {
+			--#{$prefix}outline-border-color: transparent;
+			--#{$prefix}outline-focus-opacity: 1;
+		}
+	}
+
+	@each $color in $colors-map {
+		.#{$prefix}input--filled.#{$prefix}input--#{$color} {
+			& > .#{$prefix}outline {
+				--#{$prefix}outline-focus-border-color: var(--#{$prefix}#{$color}-color);
+			}
+		}
+	}
+
+	.#{$prefix}input--filled.#{$prefix}input--light {
+		& > .#{$prefix}overlay {
+			--#{$prefix}overlay-color: #fff;
+			--#{$prefix}overlay-opacity: 0.8;
+			--#{$prefix}_hover-overlay-opacity: 1;
+			--#{$prefix}_focus-overlay-opacity: 1;
+		}
+
+		& > .#{$prefix}outline {
+			--#{$prefix}outline-border-color: transparent;
+			--#{$prefix}outline-focus-border-color: #fff;
+			--#{$prefix}outline-focus-opacity: 1;
+		}
+	}
+
+	.#{$prefix}input--outlined {
+		--#{$prefix}input-color: rgba(0, 0, 0, 0.87);
+		--#{$prefix}input-placeholder-color: rgba(0, 0, 0, 0.6);
+
+		& > .#{$prefix}overlay {
+			--#{$prefix}overlay-color: inherit;
+			--#{$prefix}overlay-opacity: 0;
+		}
+
+		& > .#{$prefix}outline {
+			--#{$prefix}outline-border-color: currentColor;
+			--#{$prefix}outline-opacity: 0.4;
+			--#{$prefix}outline-hover-opacity: 0.6;
+			--#{$prefix}outline-focus-opacity: 1;
+		}
+	}
+
+	@each $color in $colors-map {
+		.#{$prefix}input--outlined.#{$prefix}input--#{$color} {
+			& > .#{$prefix}outline {
+				--#{$prefix}outline-focus-border-color: var(--#{$prefix}#{$color}-color);
+			}
+
+			& > .#{$prefix}glow {
+				--#{$prefix}glow-focus-border-color: var(--#{$prefix}#{$color}-color);
+			}
+		}
+	}
+
+	.#{$prefix}input--outlined.#{$prefix}input--light {
+		--#{$prefix}input-color: #fff;
+		--#{$prefix}input-placeholder-color: rgba(255, 255, 255, 0.6);
+
+		& > .#{$prefix}overlay {
+			--#{$prefix}overlay-color: inherit;
+			--#{$prefix}overlay-opacity: 0;
+		}
+
+		& > .#{$prefix}outline {
+			--#{$prefix}outline-border-color: #fff;
+			--#{$prefix}outline-opacity: 0.24;
+			--#{$prefix}outline-hover-opacity: 0.36;
+			--#{$prefix}outline-focus-border-color: #fff;
+			--#{$prefix}outline-focus-opacity: 1;
+		}
+	}
+
+	.#{$prefix}input--flat {
+		--#{$prefix}input-color: rgba(0, 0, 0, 0.87);
+		--#{$prefix}input-placeholder-color: rgba(0, 0, 0, 0.6);
+
+		& > .#{$prefix}overlay {
+			--#{$prefix}overlay-color: inherit;
+			--#{$prefix}overlay-opacity: 0.08;
+			--#{$prefix}_hover-overlay-opacity: 0.12;
+		}
+
+		& > .#{$prefix}outline {
+			--#{$prefix}outline-border-color: transparent;
+			--#{$prefix}outline-focus-opacity: 1;
+		}
+	}
+
+	@each $color in $colors-map {
+		.#{$prefix}input--flat.#{$prefix}input--#{$color} {
+			& > .#{$prefix}outline {
+				--#{$prefix}outline-focus-border-color: var(--#{$prefix}#{$color}-color);
+			}
+
+			& > .#{$prefix}glow {
+				--#{$prefix}glow-focus-border-color: var(--#{$prefix}#{$color}-color);
+			}
+		}
+	}
+
+	.#{$prefix}input--flat.#{$prefix}input--light {
+		--#{$prefix}input-color: #fff;
+		--#{$prefix}input-placeholder-color: rgba(255, 255, 255, 0.6);
+
+		& > .#{$prefix}overlay {
+			--#{$prefix}overlay-color: #fff;
+			--#{$prefix}overlay-opacity: 0.12;
+			--#{$prefix}_hover-overlay-opacity: 0.16;
+		}
+
+		& > .#{$prefix}outline {
+			--#{$prefix}outline-border-color: transparent;
+			--#{$prefix}outline-focus-border-color: #fff;
+			--#{$prefix}outline-focus-opacity: 1;
+		}
+	}
+
+	.#{$prefix}input--text {
+		--#{$prefix}input-placeholder-color: rgba(0, 0, 0, 0.6);
+
+		& > .#{$prefix}overlay {
+			--#{$prefix}overlay-color: inherit;
+			--#{$prefix}overlay-opacity: 0;
+		}
+
+		& > .#{$prefix}outline {
+			--#{$prefix}outline-border-color: transparent;
+		}
+	}
+
+	.#{$prefix}input--text.#{$prefix}input--light {
+		--#{$prefix}input-color: #fff;
+		--#{$prefix}input-placeholder-color: rgba(255, 255, 255, 0.6);
+
+		& > .#{$prefix}overlay {
+			--#{$prefix}overlay-color: transparent;
+			--#{$prefix}overlay-opacity: 0;
+		}
+
+		& > .#{$prefix}outline {
+			--#{$prefix}outline-border-color: transparent;
+		}
+	}
+}

package/scss/themes/centurion/components/_list.scss

@@ -0,0 +1,118 @@
+@use "../../../variables" as *;
+
+.#{$prefix}theme-centurion {
+    .#{$prefix}list {
+        --#{$prefix}list-padding-y: 0px;
+        --#{$prefix}list-padding-x: 0px;
+        --#{$prefix}list-color: #000;
+        --#{$prefix}list-background: transparent;
+    }
+
+    .#{$prefix}list--divider .#{$prefix}list-item {
+        border-bottom: 1px solid #e0e0e0;
+    }
+
+    .#{$prefix}list--divider .#{$prefix}list-item:last-child {
+        border-bottom: 0px;
+    }
+
+    .#{$prefix}list-item {
+        --#{$prefix}list-item-border-radius: 0px;
+
+        --#{$prefix}list-item-title-font-weight: 400;
+        --#{$prefix}list-item-title-opacity: 1;
+
+        --#{$prefix}list-item-subtitle-font-weight: 400;
+        --#{$prefix}list-item-subtitle-opacity: 0.95;
+
+        & > .#{$prefix}overlay {
+            --#{$prefix}overlay-color: inherit;
+            --#{$prefix}overlay-opacity: 0;
+            --#{$prefix}_hover-overlay-color: inherit;
+            --#{$prefix}_hover-overlay-opacity: 0.04;
+            --#{$prefix}_active-overlay-opacity: 0.08;
+        }
+
+        &--selected {
+            & > .#{$prefix}overlay {
+                --#{$prefix}overlay-color: #aac0ff;
+                --#{$prefix}overlay-opacity: 1;
+                --#{$prefix}_hover-overlay-opacity: 0.76;
+                --#{$prefix}_active-overlay-opacity: 0.66;
+            }
+        }
+    }
+
+    .#{$prefix}list-subheader {
+        --#{$prefix}list-subheader-border-width: 1px;
+        --#{$prefix}list-subheader-border-color: #dee2e6;
+    }
+
+    .#{$prefix}list-group > .#{$prefix}list-item--selected {
+        & > .#{$prefix}overlay {
+            --#{$prefix}overlay-opacity: 0;
+            --#{$prefix}_hover-overlay-opacity: 0;
+            --#{$prefix}_active-overlay-opacity: 0;
+        }
+    }
+
+    .#{$prefix}list--sm .#{$prefix}list-item {
+        --#{$prefix}list-item-min-height: 32px;
+        --#{$prefix}list-item-padding-y: 0.5rem;
+        --#{$prefix}list-item-padding-x: 0.75rem;
+        --#{$prefix}list-item-padding-level: 1.25rem;
+        --#{$prefix}list-item-font-size: 12px;
+        --#{$prefix}list-item-gap: 1rem;
+
+        --#{$prefix}list-item-title-font-size: 12px;
+        --#{$prefix}list-item-title-line-height: 18px;
+
+        --#{$prefix}list-item-subtitle-font-size: 11px;
+        --#{$prefix}list-item-title-line-height: 14px;
+    }
+
+    .#{$prefix}list--sm .#{$prefix}list-item .#{$prefix}icon {
+        --#{$prefix}icon-font-size: 18px;
+    }
+
+    .#{$prefix}list--md .#{$prefix}list-item {
+        --#{$prefix}list-item-min-height: 25px;
+        --#{$prefix}list-item-padding-y: 0;
+        --#{$prefix}list-item-padding-x: 0.5rem;
+        --#{$prefix}list-item-padding-level: 1rem;
+        --#{$prefix}list-item-gap: 0.5rem;
+
+        --#{$prefix}list-item-title-font-size: 11px;
+        --#{$prefix}list-item-title-line-height: 20px;
+
+        --#{$prefix}list-item-subtitle-font-size: 0.75rem;
+        --#{$prefix}list-item-subtitle-line-height: 16px;
+    }
+
+    .#{$prefix}list--md .#{$prefix}list-item .#{$prefix}icon {
+        --#{$prefix}icon-font-size: 18px;
+    }
+
+    .#{$prefix}list--md .#{$prefix}list-item .#{$prefix}checkbox .#{$prefix}icon {
+        --#{$prefix}icon-font-size: 0.625rem;
+    }
+
+    .#{$prefix}list--lg .#{$prefix}list-item {
+        --#{$prefix}list-item-min-height: 2.75rem;
+        --#{$prefix}list-item-padding-y: 0.625rem;
+        --#{$prefix}list-item-padding-x: 1rem;
+        --#{$prefix}list-item-padding-level: 1.25rem;
+        --#{$prefix}list-item-font-size: 0.75rem;
+        --#{$prefix}list-item-gap: 1rem;
+
+        --#{$prefix}list-item-title-font-size: 0.875rem;
+        --#{$prefix}list-item-title-line-height: 24px;
+
+        --#{$prefix}list-item-subtitle-font-size: 0.8125rem;
+        --#{$prefix}list-item-subtitle-line-height: 18px;
+    }
+
+    .#{$prefix}list--lg .#{$prefix}list-item .#{$prefix}icon {
+        --#{$prefix}icon-font-size: 22px;
+    }
+}

package/scss/themes/centurion/components/_menu.scss

@@ -0,0 +1,65 @@
+@use '../../../variables' as *;
+
+.#{$prefix}theme-centurion {
+	.#{$prefix}menu {
+		--#{$prefix}menu-padding-y: 0;
+		--#{$prefix}menu-padding-x: 0;
+		--#{$prefix}menu-color: #343a40;
+		--#{$prefix}menu-background: transparent;
+	}
+
+	.#{$prefix}menu-item {
+		--#{$prefix}menu-item-height: 36px;
+		--#{$prefix}menu-item-padding-y: 0;
+		--#{$prefix}menu-item-padding-x: 1rem;
+		--#{$prefix}menu-item-padding-level: 1.5rem;
+		--#{$prefix}menu-item-font-size: 12px;
+		--#{$prefix}menu-item-font-weight: 500;
+		--#{$prefix}menu-item-border-radius: 0;
+		--#{$prefix}menu-item-gap: 1rem;
+
+		& > .#{$prefix}overlay {
+			--#{$prefix}overlay-color: inherit;
+			--#{$prefix}overlay-opacity: 0;
+			--#{$prefix}_hover-overlay-color: inherit;
+			--#{$prefix}_hover-overlay-opacity: 0.08;
+		}
+
+		.#{$prefix}icon {
+			--#{$prefix}icon-font-size: 16px;
+			--#{$prefix}icon-color: var(--#{$prefix}primary-color);
+		}
+
+		&--selected {
+			--#{$prefix}menu-item-color: var(--#{$prefix}primary-color);
+
+			> .#{$prefix}overlay {
+				--#{$prefix}overlay-color: var(--#{$prefix}primary-color);
+				--#{$prefix}overlay-opacity: 0.08;
+				--#{$prefix}_hover-overlay-opacity: 0.08;
+				--#{$prefix}_active-overlay-opacity: 0.08;
+			}
+		}
+	}
+
+	.#{$prefix}menu-group {
+		--#{$prefix}menu-group-height: 36px;
+		--#{$prefix}menu-group-padding-y: 0;
+		--#{$prefix}menu-group-padding-x: 1rem;
+		--#{$prefix}menu-group-padding-level: 2rem;
+		--#{$prefix}menu-group-font-size: 12px;
+		--#{$prefix}menu-group-font-weight: 700;
+		--#{$prefix}menu-group-border-radius: 0;
+		--#{$prefix}menu-group-gap: 1rem;
+		--#{$prefix}menu-group-border-width: 1px;
+		--#{$prefix}menu-group-border-color: #dee2e6;
+	}
+
+	.#{$prefix}menu-submenu > .#{$prefix}menu-item--selected {
+		& > .#{$prefix}overlay {
+			--#{$prefix}overlay-opacity: 0;
+			--#{$prefix}_hover-overlay-opacity: 0;
+			--#{$prefix}_active-overlay-opacity: 0;
+		}
+	}
+}

package/scss/themes/centurion/components/_modal.scss

@@ -0,0 +1,76 @@
+@use '../../../variables' as *;
+
+.#{$prefix}theme-centurion {
+	.#{$prefix}modal {
+		--#{$prefix}modal-border-width: 1px;
+		--#{$prefix}modal-border-radius: 6px;
+		--#{$prefix}modal-border-color: rgba(9, 30, 66, 0.14);
+		--#{$prefix}modal-background: #fff;
+		background: linear-gradient(to bottom, #cad8e9ff 0%, white 50%, white 100%);
+
+		&-wrapper {
+			--#{$prefix}modal-wrapper-padding: 1rem;
+		}
+
+		&--sm {
+			--#{$prefix}modal-width: 480px;
+		}
+
+		&--md {
+			--#{$prefix}modal-width: 640px;
+		}
+
+		&--lg {
+			--#{$prefix}modal-width: 720px;
+		}
+
+		&--xl {
+			--#{$prefix}modal-width: 1080px;
+		}
+
+		&--full {
+			--#{$prefix}modal-width: 100%;
+		}
+
+		&-header {
+			--#{$prefix}modal-header-border-color: transparent;
+
+			--#{$prefix}modal-header-title-font-weight: 400;
+			--#{$prefix}modal-header-title-color: var(--#{$prefix}title-color);
+
+			--#{$prefix}modal-header-subtitle-font-weight: 400;
+			--#{$prefix}modal-header-subtitle-color: var(--#{$prefix}subtitle-color);
+
+			--#{$prefix}modal-header-min-height: 32px;
+			--#{$prefix}modal-header-padding-y: 0.25rem;
+			--#{$prefix}modal-header-padding-x: 0.625rem;
+			--#{$prefix}modal-header-gap: 0.75rem;
+
+			--#{$prefix}modal-header-title-font-size: 12px;
+			--#{$prefix}modal-header-title-line-height: 20px;
+
+			--#{$prefix}modal-header-subtitle-font-size: 0.75rem;
+			--#{$prefix}modal-header-subtitle-line-height: 16px;
+			background: #f3f3f3;
+		}
+
+		&-body {
+			--#{$prefix}modal-body-padding-y: 0.25rem;
+			--#{$prefix}modal-body-padding-x: 0.625rem;
+		}
+
+		&-footer {
+			--#{$prefix}modal-footer-min-height: 32px;
+			--#{$prefix}modal-footer-padding-y: 0.25rem;
+			--#{$prefix}modal-footer-padding-x: 0.625rem;
+
+			--#{$prefix}modal-footer-border-width: 1px;
+			--#{$prefix}modal-footer-border-color: #777776;
+			background: linear-gradient(#f0f0ee 0%, #b2b2b1 100%);
+		}
+	}
+
+	.#{$prefix}modal-header .#{$prefix}icon:not(.#{$prefix}button .#{$prefix}icon) {
+		--#{$prefix}icon-font-size-default: 18px;
+	}
+}

package/scss/themes/centurion/components/_nav-rail.scss

@@ -0,0 +1,65 @@
+@use '../../../variables' as *;
+
+.#{$prefix}theme-centurion {
+	.#{$prefix}nav-rail {
+		--#{$prefix}nav-rail-border-color: var(--#{$prefix}border-color);
+
+		--#{$prefix}nav-rail-start-content-padding-y: 0.5rem;
+		--#{$prefix}nav-rail-start-content-gap: 0.5rem;
+
+		--#{$prefix}nav-rail-content-padding-y: 0.5rem;
+		--#{$prefix}nav-rail-content-gap: 0.5rem;
+
+		--#{$prefix}nav-rail-end-content-padding-y: 0.5rem;
+		--#{$prefix}nav-rail-end-content-gap: 0.5rem;
+
+		width: 56px;
+
+		& > .#{$prefix}surface {
+			z-index: 0;
+			--#{$prefix}surface-color: #f8f8f8;;
+			--#{$prefix}surface-opacity: 1;
+		}
+
+		&-item {
+			--#{$prefix}nav-rail-item-border-radius: 6px;
+			--#{$prefix}nav-rail-item-gap: 0.75rem;
+
+			--#{$prefix}nav-rail-item-padding-y: 1rem;
+
+			--#{$prefix}nav-rail-item-label-font-size: 11px;
+			--#{$prefix}nav-rail-item-label-font-weight: 500;
+			--#{$prefix}nav-rail-item-label-line-height: 16px;
+
+			--#{$prefix}nav-rail-item-indicator-size: 4px;
+			--#{$prefix}nav-rail-item-indicator-border-radius: 4px;
+			--#{$prefix}nav-rail-item-indicator-color: currentColor;
+
+			--#{$prefix}nav-rail-item-media-width: 48px;
+			--#{$prefix}nav-rail-item-media-height: 48px;
+			--#{$prefix}nav-rail-item-media-border-radius: 1rem;
+
+			--#{$prefix}nav-rail-item-icon-font-size: 1.5rem;
+
+			--#{$prefix}nav-rail-item-color: var(--#{$prefix}secondary-action-color);
+
+			--#{$prefix}_active-nav-rail-item-color: #000;
+			--#{$prefix}_active-nav-rail-item-indicator-color: var(--#{$prefix}primary-color);
+
+			& > .#{$prefix}surface {
+				--#{$prefix}surface-opacity: 0;
+			}
+
+			& > .#{$prefix}overlay {
+				--#{$prefix}overlay-opacity: 0;
+			}
+
+			&__icon,
+			&__media {
+				& > .#{$prefix}overlay {
+					--#{$prefix}overlay-opacity: 0;
+				}
+			}
+		}
+	}
+}