@orangesix/react 1.4.0 → 2.0.3

package/style/scss/_dataview.scss

@@ -0,0 +1,47 @@
+.p-dataview {
+	.p-paginator-top {
+		border-width: $tableTopPaginatorBorderWidth;
+		border-radius: 0;
+	}
+
+	.p-paginator-bottom {
+		border-width: $tableBottomPaginatorBorderWidth;
+		border-radius: 0;
+	}
+
+	.p-dataview-header {
+		background: $tableHeaderBg;
+		color: $tableHeaderTextColor;
+		border: $tableHeaderBorder;
+		border-width: $tableHeaderBorderWidth;
+		padding: $tableHeaderPadding;
+		font-weight: $tableHeaderFontWeight;
+	}
+
+	.p-dataview-content {
+		background: $tableBodyRowBg;
+		color: $tableBodyRowTextColor;
+		border: $dataViewContentBorder;
+		padding: $dataViewContentPadding;
+	}
+
+	.p-dataview-footer {
+		background: $tableFooterBg;
+		color: $tableFooterTextColor;
+		border: $tableFooterBorder;
+		border-width: $tableFooterBorderWidth;
+		padding: $tableFooterPadding;
+		font-weight: $tableFooterFontWeight;
+		border-bottom-left-radius: $borderRadius;
+		border-bottom-right-radius: $borderRadius;
+	}
+
+	.p-dataview-loading-icon {
+		font-size: $loadingIconFontSize;
+
+		&.p-icon {
+			width: $loadingIconFontSize;
+			height: $loadingIconFontSize;
+		}
+	}
+}

package/style/scss/_dialog.scss

@@ -0,0 +1,78 @@
+.p-dialog {
+    border-radius: $borderRadius;
+    box-shadow: $overlayContainerShadow;
+    border: $overlayContentBorder;
+
+    .p-dialog-header {
+        border-bottom: $dialogHeaderBorder;
+        background: $dialogHeaderBg;
+        color: $dialogHeaderTextColor;
+        padding: $dialogHeaderPadding;
+        border-top-right-radius: $borderRadius;
+        border-top-left-radius: $borderRadius;
+
+        .p-dialog-title {
+            font-weight: $dialogHeaderFontWeight;
+            font-size: $dialogHeaderFontSize;
+        }
+
+        .p-dialog-header-icon {
+            @include action-icon();
+            & {
+                margin-right: $inlineSpacing;
+            }
+
+            &:last-child {
+                margin-right: 0;
+            }            
+        }
+    }
+
+    .p-dialog-content {
+        background: $overlayContentBg;
+        color: $panelContentTextColor;
+        padding: $dialogContentPadding;
+
+        &:last-of-type {
+            border-bottom-right-radius: $borderRadius;
+            border-bottom-left-radius: $borderRadius;
+        }
+    }
+
+    .p-dialog-footer {
+        border-top:  $dialogFooterBorder;
+        background: $overlayContentBg;
+        color: $panelFooterTextColor;
+        padding: $dialogFooterPadding;
+        text-align: right;
+        border-bottom-right-radius: $borderRadius;
+        border-bottom-left-radius: $borderRadius;
+
+        button {
+            margin: 0 $inlineSpacing 0 0;
+            width: auto;
+        }
+    }
+
+    &.p-dialog-maximized {
+        .p-dialog-header, .p-dialog-content:last-of-type {
+            border-radius: 0;
+        }
+    }
+    
+
+    &.p-confirm-dialog {
+        .p-confirm-dialog-icon {
+            font-size: $primeIconFontSize * 2;
+            
+            &.p-icon {
+                width: $primeIconFontSize * 2;
+                height: $primeIconFontSize * 2;
+            }
+        }
+
+        .p-confirm-dialog-message {
+            margin-left: $inlineSpacing * 2;
+        }
+    }
+}

package/style/scss/_divider.scss

@@ -0,0 +1,31 @@
+.p-divider {
+    .p-divider-content {
+        background-color: $panelContentBg;
+    }
+
+    &.p-divider-horizontal {
+        margin: $dividerHorizontalMargin;
+        padding: $dividerHorizontalPadding;
+
+        &:before {
+            border-top: $dividerSize $dividerColor;
+        }
+
+        .p-divider-content {
+            padding: 0 $inlineSpacing;
+        }
+    }
+
+    &.p-divider-vertical {
+        margin: $dividerVerticalMargin;
+        padding: $dividerVerticalPadding;
+
+        &:before {
+            border-left: $dividerSize $dividerColor;
+        }
+
+        .p-divider-content {
+            padding: $inlineSpacing 0;
+        }
+    }
+}

package/style/scss/_dock.scss

@@ -0,0 +1,109 @@
+.p-dock {
+	.p-dock-list-container {
+		background: $dockBg;
+		border: $dockBorder;
+		padding: $dockPadding;
+		border-radius: $dockBorderRadius;
+
+		.p-dock-list {
+			outline: 0 none;
+		}
+	}
+
+	.p-dock-item {
+		padding: $dockItemPadding;
+		border-radius: $dockItemBorderRadius;
+
+		&.p-focus {
+			@include focused-listitem();
+		}
+	}
+
+	.p-dock-action {
+		width: $dockActionWidth;
+		height: $dockActionHeight;
+	}
+
+	&.p-dock-top,
+	&.p-dock-bottom {
+		.p-dock-item-second-prev,
+		.p-dock-item-second-next {
+			margin: 0 $dockSecondItemsMargin;
+		}
+
+		.p-dock-item-prev,
+		.p-dock-item-next {
+			margin: 0 $dockFirstItemsMargin;
+		}
+
+		.p-dock-item-current {
+			margin: 0 $dockCurrentItemMargin;
+		}
+	}
+
+	&.p-dock-left,
+	&.p-dock-right {
+		.p-dock-item-second-prev,
+		.p-dock-item-second-next {
+			margin: $dockSecondItemsMargin 0;
+		}
+
+		.p-dock-item-prev,
+		.p-dock-item-next {
+			margin: $dockFirstItemsMargin 0;
+		}
+
+		.p-dock-item-current {
+			margin: $dockCurrentItemMargin 0;
+		}
+	}
+
+	&.p-dock-mobile {
+		&.p-dock-top,
+		&.p-dock-bottom {
+			.p-dock-list-container {
+				overflow-x: auto;
+				width: 100%;
+
+				.p-dock-list {
+					margin: 0 auto;
+				}
+			}
+		}
+
+		&.p-dock-left,
+		&.p-dock-right {
+			.p-dock-list-container {
+				overflow-y: auto;
+				height: 100%;
+
+				.p-dock-list {
+					margin: auto 0;
+				}
+			}
+		}
+
+		.p-dock-list {
+			.p-dock-item {
+				transform: none;
+				margin: 0;
+			}
+		}
+
+		&.p-dock-magnification {
+			&.p-dock-top,
+			&.p-dock-bottom,
+			&.p-dock-left,
+			&.p-dock-right {
+				.p-dock-item-second-prev,
+				.p-dock-item-second-next,
+				.p-dock-item-prev,
+				.p-dock-item-next,
+				.p-dock-item-current {
+					transform: none;
+					margin: 0;
+				}
+			}
+		}
+	}
+}

package/style/scss/_dropdown.scss

@@ -0,0 +1,255 @@
+// core
+.p-dropdown {
+  display: inline-flex;
+  cursor: pointer;
+  position: relative;
+  user-select: none;
+}
+
+.p-dropdown-clear-icon {
+  position: absolute;
+  top: 50%;
+  margin-top: -0.5rem;
+}
+
+.p-dropdown-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.p-dropdown-label {
+  display: flex !important;
+  white-space: nowrap;
+  overflow: hidden;
+  flex: 1 1 auto;
+  width: 1%;
+  text-overflow: ellipsis;
+  cursor: pointer;
+  align-items: center !important;
+  justify-content: center !important;
+  padding: .5rem;
+}
+
+.p-dropdown-label-empty {
+  overflow: hidden;
+  opacity: 0;
+}
+
+input.p-dropdown-label {
+  cursor: default;
+}
+
+.p-dropdown .p-dropdown-panel {
+  min-width: 100%;
+}
+
+.p-dropdown-panel {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.p-dropdown-items-wrapper {
+  overflow: auto;
+}
+
+.p-dropdown-item {
+  cursor: pointer;
+  font-weight: normal;
+  white-space: nowrap;
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+}
+
+.p-dropdown-item-group {
+  cursor: auto;
+}
+
+.p-dropdown-items {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+
+.p-dropdown-filter {
+  width: 100%;
+}
+
+.p-dropdown-filter-container {
+  position: relative;
+}
+
+.p-dropdown-filter-icon {
+  position: absolute;
+  top: 50%;
+  margin-top: -0.5rem;
+}
+
+.p-fluid .p-dropdown {
+  display: flex;
+}
+
+.p-fluid .p-dropdown .p-dropdown-label {
+  width: 1%;
+}
+
+// theme
+.p-dropdown {
+  background: $inputBg;
+  border: $inputBorder;
+  transition: $formElementTransition;
+  border-radius: $borderRadius;
+  outline-color: transparent;
+
+  &:not(.p-disabled):hover {
+    border-color: $inputHoverBorderColor;
+  }
+
+  &:not(.p-disabled).p-focus {
+    @include focused-input();
+  }
+
+  &.p-variant-filled {
+    background: $inputFilledBg;
+
+    &:not(.p-disabled):hover {
+      background-color: $inputFilledHoverBg;
+    }
+
+    &:not(.p-disabled).p-focus {
+      background-color: $inputFilledFocusBg;
+
+      .p-inputtext {
+        background-color: transparent;
+      }
+    }
+  }
+
+  &.p-dropdown-clearable {
+    .p-dropdown-label {
+      padding-right: nth($inputPadding, 2) + $primeIconFontSize;
+    }
+  }
+
+  .p-dropdown-label {
+    background: transparent;
+    border: 0 none;
+
+    &.p-placeholder {
+      color: $inputPlaceholderTextColor;
+    }
+
+    &:focus,
+    &:enabled:focus {
+      outline: 0 none;
+      box-shadow: none;
+    }
+  }
+
+  .p-dropdown-trigger {
+    background: transparent;
+    color: $inputIconColor;
+    width: $inputGroupAddOnMinWidth;
+    border-top-right-radius: $borderRadius;
+    border-bottom-right-radius: $borderRadius;
+  }
+
+  .p-dropdown-clear-icon {
+    color: $inputIconColor;
+    right: $inputGroupAddOnMinWidth;
+  }
+
+  &.p-invalid.p-component {
+    @include invalid-input();
+  }
+}
+
+.p-dropdown-panel {
+  background: $inputOverlayBg;
+  color: $inputListTextColor;
+  border: $inputOverlayBorder;
+  border-radius: $borderRadius;
+  box-shadow: $inputOverlayShadow;
+
+  .p-dropdown-header {
+    padding: $inputListHeaderPadding;
+    border-bottom: $inputListHeaderBorder;
+    color: $inputListHeaderTextColor;
+    background: $inputOverlayHeaderBg;
+    margin: $inputListHeaderMargin;
+    border-top-right-radius: $borderRadius;
+    border-top-left-radius: $borderRadius;
+
+    .p-dropdown-filter {
+      padding-right: nth($inputPadding, 2) + $primeIconFontSize;
+      margin-right: -1 * (nth($inputPadding, 2) + $primeIconFontSize);
+    }
+
+    .p-dropdown-filter-icon {
+      right: nth($inputPadding, 2);
+      color: $inputIconColor;
+    }
+  }
+
+  .p-dropdown-items {
+    padding: $inputListPadding;
+
+    .p-dropdown-item {
+      margin: $inputListItemMargin;
+      padding: $inputListItemPadding;
+      border: $inputListItemBorder;
+      color: $inputListItemTextColor;
+      background: $inputListItemBg;
+      transition: $listItemTransition;
+      border-radius: $inputListItemBorderRadius;
+
+      &:first-child {
+        margin-top: 0;
+      }
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      &.p-highlight {
+        color: $highlightTextColor;
+        background: $highlightBg;
+
+        &.p-focus {
+          background: $highlightFocusBg;
+        }
+      }
+
+      &:not(.p-highlight):not(.p-disabled) {
+        &.p-focus {
+          color: $inputListItemTextHoverColor;
+          background: $inputListItemHoverBg;
+        }
+      }
+
+      .p-dropdown-check-icon {
+        position: relative;
+        margin-left: -1 * $inlineSpacing;
+        margin-right: $inlineSpacing;
+      }
+    }
+
+    .p-dropdown-item-group {
+      margin: $submenuHeaderMargin;
+      padding: $submenuHeaderPadding;
+      color: $submenuHeaderTextColor;
+      background: $submenuHeaderBg;
+      font-weight: $submenuHeaderFontWeight;
+    }
+
+    .p-dropdown-empty-message {
+      padding: $inputListItemPadding;
+      color: $inputListItemTextColor;
+      background: $inputListItemBg;
+    }
+  }
+}

package/style/scss/_editor.scss

@@ -0,0 +1,122 @@
+.p-editor-container {
+    .p-editor-toolbar {
+        background: $editorToolbarBg;
+        border-top-right-radius: $borderRadius;
+        border-top-left-radius: $borderRadius;
+
+        &.ql-snow {
+            border: $editorToolbarBorder;
+
+            .ql-stroke {
+                stroke: $editorToolbarIconColor;
+            }
+    
+            .ql-fill {
+                fill: $editorToolbarIconColor;
+            }
+    
+            .ql-picker {
+                .ql-picker-label {
+                    border: 0 none;
+                    color: $editorToolbarIconColor;
+
+                    &:hover {
+                        color: $editorToolbarIconHoverColor;
+
+                        .ql-stroke {
+                            stroke: $editorToolbarIconHoverColor;
+                        }
+                
+                        .ql-fill {
+                            fill: $editorToolbarIconHoverColor;
+                        }
+                    }
+                }
+
+                &.ql-expanded {
+                    .ql-picker-label {
+                        color: $editorToolbarIconHoverColor;
+
+                        .ql-stroke {
+                            stroke: $editorToolbarIconHoverColor;
+                        }
+                
+                        .ql-fill {
+                            fill: $editorToolbarIconHoverColor;
+                        }
+                    }
+
+                    .ql-picker-options {
+                        background: $inputOverlayBg;
+                        border:$inputOverlayBorder;
+                        box-shadow:$inputOverlayShadow;
+                        border-radius: $borderRadius;
+                        padding: $inputListPadding;
+
+                        .ql-picker-item {
+                            color: $inputListItemTextColor;
+                            
+                            &:hover {
+                                color: $inputListItemTextHoverColor;
+                                background: $inputListItemHoverBg;
+                            }
+                        }
+                    }
+
+                    &:not(.ql-icon-picker) {
+                        .ql-picker-item {
+                            padding: $inputListItemPadding;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .p-editor-content {
+        border-bottom-right-radius: $borderRadius;
+        border-bottom-left-radius: $borderRadius;
+
+        &.ql-snow {
+            border: $editorContentBorder;
+        }
+
+        .ql-editor {
+            background: $inputBg;
+            color: $inputTextColor;
+            border-bottom-right-radius: $borderRadius;
+            border-bottom-left-radius: $borderRadius;
+        }
+    }
+
+    .ql-snow.ql-toolbar button:hover,
+    .ql-snow.ql-toolbar button:focus {
+        color: $editorToolbarIconHoverColor;
+
+        .ql-stroke {
+            stroke: $editorToolbarIconHoverColor;
+        }
+
+        .ql-fill {
+            fill: $editorToolbarIconHoverColor;
+        }
+    }
+
+    .ql-snow.ql-toolbar button.ql-active,
+    .ql-snow.ql-toolbar .ql-picker-label.ql-active,
+    .ql-snow.ql-toolbar .ql-picker-item.ql-selected {
+        color: $editorIconActiveColor;
+
+        .ql-stroke {
+            stroke: $editorIconActiveColor;
+        }
+
+        .ql-fill {
+            fill: $editorIconActiveColor;
+        }
+
+        .ql-picker-label {
+            color: $editorIconActiveColor;
+        }
+    }
+}

package/style/scss/_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/_fieldset.scss

@@ -0,0 +1,47 @@
+.p-fieldset {
+    border: $panelContentBorder;
+    background: $panelContentBg;
+    color: $panelContentTextColor;
+    border-radius: $borderRadius;
+
+    .p-fieldset-legend {
+        padding: $panelHeaderPadding;
+        border: $panelHeaderBorder;
+        color: $panelHeaderTextColor;
+        background: $panelHeaderBg;
+        font-weight: $panelHeaderFontWeight;
+        border-radius: $borderRadius;
+    }
+
+    &.p-fieldset-toggleable {
+        .p-fieldset-legend {
+            padding: 0;
+            transition: $actionIconTransition;
+
+            a {
+                padding: $panelHeaderPadding;
+                color: $panelHeaderTextColor;
+                border-radius: $borderRadius;
+                transition: $listItemTransition;
+
+                .p-fieldset-toggler {
+                    margin-right: $inlineSpacing;
+                }
+
+                &:focus-visible {
+                    @include focused();
+                }
+            }
+
+            &:hover {
+                background: $panelHeaderHoverBg;
+                border-color: $panelHeaderHoverBorderColor;
+                color: $panelHeaderTextHoverColor;
+            }
+        }
+    }
+
+    .p-fieldset-content {
+        padding: $panelContentPadding;
+    }
+}