@orangesix/react 1.0.11 → 1.1.0

package/style/scss/components/panel/_panel.scss

@@ -0,0 +1,47 @@
+.p-panel {
+    .p-panel-header {
+        border: $panelHeaderBorder;
+        padding: $panelHeaderPadding;
+        background: $panelHeaderBg;
+        color: $panelHeaderTextColor;
+        border-top-right-radius: $borderRadius;
+        border-top-left-radius: $borderRadius;
+
+        .p-panel-title {
+            font-weight: $panelHeaderFontWeight;
+        }
+
+        .p-panel-header-icon {
+            @include action-icon();
+        }
+    }
+
+    &.p-panel-toggleable {
+        .p-panel-header {
+            padding: $panelToggleableHeaderPadding;
+        }
+    }
+
+    &:has(> .p-panel-footer) .p-panel-content {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+
+    .p-panel-content {
+        padding: $panelContentPadding;
+        border: $panelContentBorder;
+        background: $panelContentBg;
+        color: $panelContentTextColor;
+        border-bottom-right-radius: $borderRadius;
+        border-bottom-left-radius: $borderRadius;
+        border-top: 0 none;
+    }
+
+    .p-panel-footer {
+        padding: $panelFooterPadding;
+        border: $panelFooterBorder;
+        background: $panelFooterBg;
+        color: $panelFooterTextColor;
+        border-top: 0 none;
+    }
+}

package/style/scss/components/panel/_scrollpanel.scss

@@ -0,0 +1,10 @@
+.p-scrollpanel {
+	.p-scrollpanel-bar {
+		background: $scrollPanelTrackBg;
+		border: $scrollPanelTrackBorder;
+
+		&:focus-visible {
+			@include focused();
+		}
+	}
+}

package/style/scss/components/panel/_splitter.scss

@@ -0,0 +1,23 @@
+.p-splitter {
+	border: $panelContentBorder;
+	background: $panelContentBg;
+	border-radius: $borderRadius;
+	color: $panelContentTextColor;
+
+	.p-splitter-gutter {
+		transition: $actionIconTransition;
+		background: $splitterGutterBg;
+
+		.p-splitter-gutter-handle {
+			background: $splitterGutterHandleBg;
+
+			&:focus-visible {
+				@include focused();
+			}
+		}
+	}
+
+	.p-splitter-gutter-resizing {
+		background: $splitterGutterHandleBg;
+	}
+}

package/style/scss/components/panel/_stepper.scss

@@ -0,0 +1,136 @@
+@use "sass:math";
+
+//theme
+.p-stepper {
+  .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+
+  .p-stepper-header {
+    padding: $inlineSpacing;
+
+    .p-stepper-action {
+      transition: $listItemTransition;
+      border-radius: $borderRadius;
+      background: $stepsItemBg;
+      outline-color: transparent;
+
+      .p-stepper-number {
+        color: $stepsItemNumberColor;
+        border: $stepsItemBorder;
+        border-width: 2px;
+        background: $stepsItemBg;
+        min-width: $stepsItemNumberWidth;
+        height: $stepsItemNumberHeight;
+        line-height: $stepsItemNumberHeight;
+        font-size: $stepsItemNumberFontSize;
+        border-radius: $stepsItemNumberBorderRadius;
+        transition: $actionIconTransition;
+      }
+
+      .p-stepper-title {
+        margin-left: $inlineSpacing;
+        color: $stepsItemTextColor;
+        font-weight: $stepsItemActiveFontWeight;
+        transition: $actionIconTransition;
+      }
+
+      &:not(.p-disabled):focus-visible {
+        @include focused();
+      }
+    }
+
+    &.p-highlight {
+      .p-stepper-number {
+        background: $highlightBg;
+        color: $highlightTextColor;
+      }
+
+      .p-stepper-title {
+        color: $textColor;
+      }
+    }
+
+    &:not(.p-disabled):focus-visible {
+      @include focused();
+    }
+
+    &:has(~ .p-highlight) {
+      @if variable-exists(primaryColor) {
+        .p-stepper-separator {
+          background-color: $primaryColor;
+        }
+      }
+    }
+  }
+
+  .p-stepper-panels {
+    background: $tabviewContentBg;
+    padding: $tabviewContentPadding;
+    color: $tabviewContentTextColor;
+  }
+
+  .p-stepper-separator {
+    background-color: $timelineEventColor;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: calc($inlineSpacing * 2);
+    transition: $listItemTransition;
+  }
+
+  &.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+
+    .p-stepper-toggleable-content {
+      display: flex;
+      flex: 1 1 auto;
+      background: $tabviewContentBg;
+      color: $tabviewContentTextColor;
+    }
+
+    .p-stepper-panel {
+      display: flex;
+      flex-direction: column;
+      flex: initial;
+
+      &.p-stepper-panel-active {
+        flex: 1 1 auto;
+      }
+
+      .p-stepper-header {
+        flex: initial;
+      }
+
+      .p-stepper-content {
+        width: 100%;
+        padding-left: calc($inlineSpacing * 2);
+      }
+
+      .p-stepper-separator {
+        flex: 0 0 auto;
+        width: 2px;
+        height: auto;
+        margin-inline-start: calc($inlineSpacing * 7 / 2 + 2px);
+      }
+
+      &:has(~ .p-stepper-panel-active) {
+        @if variable-exists(primaryColor) {
+          .p-stepper-separator {
+            background-color: $primaryColor;
+          }
+        }
+      }
+
+      &:last-of-type {
+        .p-stepper-content {
+          padding-left: calc($inlineSpacing * 6);
+        }
+      }
+    }
+  }
+}

package/style/scss/components/panel/_tabview.scss

@@ -0,0 +1,148 @@
+//core
+.p-tabview-nav-container {
+  position: relative;
+}
+
+.p-tabview-scrollable .p-tabview-nav-container {
+  overflow: hidden;
+}
+
+.p-tabview-nav-content {
+  overflow-x: auto;
+  overflow-y: hidden;
+  scroll-behavior: smooth;
+  scrollbar-width: none;
+  overscroll-behavior: contain auto;
+  position: relative;
+}
+
+.p-tabview-nav {
+  display: flex;
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+  flex: 1 1 auto;
+}
+
+.p-tabview-nav-link {
+  cursor: pointer;
+  user-select: none;
+  display: flex;
+  align-items: center;
+  position: relative;
+  text-decoration: none;
+  overflow: hidden;
+}
+
+.p-tabview-ink-bar {
+  display: none;
+  z-index: 1;
+}
+
+.p-tabview-nav-link:focus {
+  z-index: 1;
+}
+
+.p-tabview-close {
+  z-index: 1;
+}
+
+.p-tabview-title {
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.p-tabview-nav-btn {
+  position: absolute;
+  top: 0;
+  z-index: 2;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.p-tabview-nav-prev {
+  left: 0;
+}
+
+.p-tabview-nav-next {
+  right: 0;
+}
+
+.p-tabview-nav-content::-webkit-scrollbar {
+  display: none;
+}
+
+//theme
+.p-tabview {
+  .p-tabview-nav {
+    background: $tabviewNavBg;
+    border: $tabviewNavBorder;
+    border-width: $tabviewNavBorderWidth;
+
+    li {
+      margin-right: $tabviewHeaderSpacing;
+
+      .p-tabview-nav-link {
+        border: $tabviewHeaderBorder;
+        border-width: $tabviewHeaderBorderWidth;
+        border-color: $tabviewHeaderBorderColor;
+        background: $tabviewHeaderBg;
+        color: $tabviewHeaderTextColor !important;
+        padding: $tabviewHeaderPadding;
+        font-weight: $tabviewHeaderFontWeight;
+        border-top-right-radius: $borderRadius;
+        border-top-left-radius: $borderRadius;
+        transition: $listItemTransition;
+        margin: $tabviewHeaderMargin;
+
+        &:not(.p-disabled):focus-visible {
+          @include focused-inset();
+        }
+      }
+
+      &:not(.p-highlight):not(.p-disabled):hover {
+        .p-tabview-nav-link {
+          background: $tabviewHeaderHoverBg;
+          border-color: $tabviewHeaderHoverBorderColor;
+          color: $tabviewHeaderTextHoverColor;
+        }
+      }
+
+      &.p-highlight {
+        .p-tabview-nav-link {
+          background: $tabviewHeaderActiveBg;
+          border-color: $tabviewHeaderActiveBorderColor;
+          color: $tabviewHeaderTextActiveColor;
+        }
+      }
+    }
+  }
+
+  .p-tabview-close {
+    margin-left: $inlineSpacing;
+  }
+
+  .p-tabview-nav-btn.p-link {
+    background: $tabviewHeaderActiveBg;
+    color: $tabviewHeaderTextActiveColor;
+    width: $buttonIconOnlyWidth;
+    box-shadow: $raisedButtonShadow;
+    border-radius: 0;
+
+    &:focus-visible {
+      @include focused-inset();
+    }
+  }
+
+  .p-tabview-panels {
+    background: $tabviewContentBg;
+    padding: $tabviewContentPadding;
+    border: $tabviewContentBorder;
+    color: $tabviewContentTextColor;
+    border-bottom-right-radius: $borderRadius;
+    border-bottom-left-radius: $borderRadius;
+    font-size: $tabviewContentFontSize !important;
+  }
+}

package/style/scss/components/panel/_toolbar.scss

@@ -0,0 +1,11 @@
+.p-toolbar {
+    background: $panelHeaderBg;
+    border: $panelHeaderBorder;
+    padding: $panelHeaderPadding;
+    border-radius: $borderRadius;
+    gap: $inlineSpacing;
+
+    .p-toolbar-separator {
+        margin: 0 $inlineSpacing;
+    }
+}

package/style/scss/core/_colors.scss

@@ -0,0 +1,18 @@
+:root {
+    @if variable-exists(colors) {
+        @each $name, $color in $colors {
+            @for $i from 0 through 5 {
+                @if ($i == 0) {
+                    --#{$name}-50:#{tint($color, (5 - $i) * 19%)};
+                }
+                @else {
+                    --#{$name}-#{$i * 100}:#{tint($color, (5 - $i) * 19%)};
+                }
+            }
+
+            @for $i from 1 through 4 {
+                --#{$name}-#{($i + 5) * 100}:#{shade($color, $i * 15%)};
+            }
+        }
+    }
+}

package/style/scss/core/_extensions.scss

@@ -0,0 +1,27 @@
+@layer primereact {
+    .p-carousel {
+        .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+            background-color: $primaryColor;
+        }
+    }
+    
+    .p-galleria {
+        .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+            background-color: $primaryColor;
+        }
+    }
+    
+    .p-datatable {
+        .p-datatable-tbody {
+            > tr {
+                &.p-datatable-dragpoint-top > td {
+                    box-shadow: inset 0 2px 0 0 $primaryColor;
+                }
+    
+                &.p-datatable-dragpoint-bottom > td {
+                    box-shadow: inset 0 -2px 0 0 $primaryColor;
+                }
+            }
+        }
+    }
+}

package/style/scss/core/_mixins.scss

@@ -0,0 +1,243 @@
+@mixin icon-override($icon) {
+	&:before {
+		content: $icon;
+	}
+}
+
+@mixin focused() {
+	outline: $focusOutline;
+	outline-offset: $focusOutlineOffset;
+	box-shadow: $focusShadow;
+}
+
+@mixin focused-inset() {
+	outline: $focusOutline;
+	outline-offset: $focusOutlineOffset;
+	box-shadow: inset $focusShadow;
+}
+
+@mixin focused-input() {
+	@include focused();
+	border-color: $inputFocusBorderColor;
+}
+
+@mixin focused-listitem() {
+	outline: $focusOutline;
+	outline-offset: $focusOutlineOffset;
+	box-shadow: $inputListItemFocusShadow;
+}
+
+@mixin invalid-input() {
+	border-color: $inputErrorBorderColor;
+}
+
+@mixin menuitem-link {
+	> .p-menuitem-content {
+		color: $menuitemTextColor;
+		transition: $listItemTransition;
+		border-radius: $menuitemBorderRadius;
+
+		.p-menuitem-link {
+			color: $menuitemTextColor;
+			padding: $menuitemPadding;
+			user-select: none;
+
+			.p-menuitem-text {
+				color: $menuitemTextColor;
+			}
+
+			.p-menuitem-icon {
+				color: $menuitemIconColor;
+				margin-right: $inlineSpacing;
+			}
+
+			.p-submenu-icon {
+				color: $menuitemIconColor;
+			}
+		}
+	}
+
+	&.p-highlight {
+		> .p-menuitem-content {
+			color: $menuitemTextActiveColor;
+			background: $menuitemActiveBg;
+
+			.p-menuitem-link {
+				.p-menuitem-text {
+					color: $menuitemTextActiveColor;
+				}
+
+				.p-menuitem-icon,
+				.p-submenu-icon {
+					color: $menuitemIconActiveColor;
+				}
+			}
+		}
+
+		&.p-focus {
+			> .p-menuitem-content {
+				background: $menuitemActiveFocusBg;
+			}
+		}
+	}
+
+	&:not(.p-highlight):not(.p-disabled) {
+		&.p-focus {
+			> .p-menuitem-content {
+				color: $menuitemTextFocusColor;
+				background: $menuitemFocusBg;
+
+				.p-menuitem-link {
+					.p-menuitem-text {
+						color: $menuitemTextFocusColor;
+					}
+
+					.p-menuitem-icon,
+					.p-submenu-icon {
+						color: $menuitemIconFocusColor;
+					}
+				}
+			}
+		}
+
+		> .p-menuitem-content {
+			&:hover {
+				color: $menuitemTextHoverColor;
+				background: $menuitemHoverBg;
+
+				.p-menuitem-link {
+					.p-menuitem-text {
+						color: $menuitemTextHoverColor;
+					}
+
+					.p-menuitem-icon,
+					.p-submenu-icon {
+						color: $menuitemIconHoverColor;
+					}
+				}
+			}
+		}
+	}
+}
+
+@mixin horizontal-rootmenuitem-link {
+	> .p-menuitem-content {
+		color: $horizontalMenuRootMenuitemTextColor;
+		transition: $listItemTransition;
+		border-radius: $horizontalMenuRootMenuitemBorderRadius;
+
+		.p-menuitem-link {
+			padding: $horizontalMenuRootMenuitemPadding;
+			user-select: none;
+
+			.p-menuitem-text {
+				color: $horizontalMenuRootMenuitemTextColor;
+			}
+
+			.p-menuitem-icon {
+				color: $horizontalMenuRootMenuitemIconColor;
+				margin-right: $inlineSpacing;
+			}
+
+			.p-submenu-icon {
+				color: $horizontalMenuRootMenuitemIconColor;
+				margin-left: $inlineSpacing;
+			}
+		}
+	}
+
+	&:not(.p-highlight):not(.p-disabled) {
+		> .p-menuitem-content {
+			&:hover {
+				color: $horizontalMenuRootMenuitemTextHoverColor;
+				background: $horizontalMenuRootMenuitemHoverBg;
+
+				.p-menuitem-link {
+					.p-menuitem-text {
+						color: $horizontalMenuRootMenuitemTextHoverColor;
+					}
+
+					.p-menuitem-icon,
+					.p-submenu-icon {
+						color: $horizontalMenuRootMenuitemIconHoverColor;
+					}
+				}
+			}
+		}
+	}
+}
+
+@mixin placeholder {
+	::-webkit-input-placeholder {
+		@content;
+	}
+	:-moz-placeholder {
+		@content;
+	}
+	::-moz-placeholder {
+		@content;
+	}
+	:-ms-input-placeholder {
+		@content;
+	}
+}
+
+@mixin scaledPadding($val, $scale) {
+	padding: nth($val, 1) * $scale nth($val, 2) * $scale;
+}
+
+@mixin scaledFontSize($val, $scale) {
+	font-size: $val * $scale;
+}
+
+@mixin nested-submenu-indents($val, $index, $length) {
+	ul {
+		li {
+			a {
+				padding-left: $val * ($index + 1);
+			}
+
+			@if $index < $length {
+				@include nested-submenu-indents($val, $index + 2, $length);
+			}
+		}
+	}
+}
+
+@mixin action-icon($enabled: true) {
+	width: $actionIconWidth;
+	height: $actionIconHeight;
+	color: $actionIconColor;
+	border: $actionIconBorder;
+	background: $actionIconBg;
+	border-radius: $actionIconBorderRadius;
+	transition: $actionIconTransition;
+
+	@if $enabled {
+		&:enabled:hover {
+			@include action-icon-hover();
+		}
+	} @else {
+		&:hover {
+			@include action-icon-hover();
+		}
+	}
+
+	&:focus-visible {
+		@include focused();
+	}
+}
+
+@mixin action-icon-hover() {
+	color: $actionIconHoverColor;
+	border-color: $actionIconHoverBorderColor;
+	background: $actionIconHoverBg;
+}
+
+@function tint($color, $percentage) {
+	@return mix(#fff, $color, $percentage);
+}
+
+@function shade($color, $percentage) {
+	@return mix(#000, $color, $percentage);
+}