@orangesix/react 1.1.1 → 1.2.2

package/style/scss/components/data/_datatable.scss

@@ -157,6 +157,7 @@
       &.p-highlight {
         background: $highlightBg;
         color: $highlightTextColor;
+        font-weight: $tableBodyCellSelectedFontWeight;
       }
 
       &.p-highlight-contextmenu {

package/style/scss/components/data/_picklist.scss

@@ -1,74 +1,74 @@
 .p-picklist {
-	.p-picklist-buttons {
-		padding: $panelContentPadding;
+  .p-picklist-buttons {
+    padding: $panelContentPadding;
 
-		.p-button {
-			margin-bottom: $inlineSpacing;
-		}
-	}
+    .p-button {
+      margin-bottom: $inlineSpacing !important;
+    }
+  }
 
-	.p-picklist-header {
-		background: $panelHeaderBg;
-		color: $panelHeaderTextColor;
-		border: $panelHeaderBorder;
-		padding: $panelHeaderPadding;
-		font-weight: $panelHeaderFontWeight;
-		border-bottom: 0 none;
-		border-top-right-radius: $borderRadius;
-		border-top-left-radius: $borderRadius;
-	}
+  .p-picklist-header {
+    background: $panelHeaderBg;
+    color: $panelHeaderTextColor;
+    border: $panelHeaderBorder;
+    padding: $panelHeaderPadding;
+    font-weight: $panelHeaderFontWeight;
+    border-bottom: 0 none;
+    border-top-right-radius: $borderRadius;
+    border-top-left-radius: $borderRadius;
+  }
 
-	.p-picklist-filter-container {
-		padding: $panelHeaderPadding;
-		background: $panelContentBg;
-		border: $panelHeaderBorder;
-		border-bottom: 0 none;
+  .p-picklist-filter-container {
+    padding: $panelHeaderPadding;
+    background: $panelContentBg;
+    border: $panelHeaderBorder;
+    border-bottom: 0 none;
 
-		.p-picklist-filter-input {
-			padding-right: nth($inputPadding, 2) + $primeIconFontSize;
-		}
+    .p-picklist-filter-input {
+      padding-right: nth($inputPadding, 2) + $primeIconFontSize;
+    }
 
-		.p-picklist-filter-icon {
-			right: nth($inputPadding, 2);
-			color: $inputIconColor;
-		}
-	}
+    .p-picklist-filter-icon {
+      right: nth($inputPadding, 2);
+      color: $inputIconColor;
+    }
+  }
 
-	.p-picklist-list {
-		border: $panelContentBorder;
-		background: $panelContentBg;
-		color: $panelContentTextColor;
-		padding: $inputListPadding;
-		border-bottom-right-radius: $borderRadius;
-		border-bottom-left-radius: $borderRadius;
-		outline: 0 none;
+  .p-picklist-list {
+    border: $panelContentBorder;
+    background: $panelContentBg;
+    color: $panelContentTextColor;
+    padding: $inputListPadding;
+    border-bottom-right-radius: $borderRadius;
+    border-bottom-left-radius: $borderRadius;
+    outline: 0 none;
 
-		.p-picklist-item {
-			padding: $inputListItemPadding;
-			margin: $inputListItemMargin;
-			border: $inputListItemBorder;
-			color: $inputListItemTextColor;
-			background: $inputListItemBg;
-			transition: transform $transitionDuration, $listItemTransition;
+    .p-picklist-item {
+      padding: $inputListItemPadding;
+      margin: $inputListItemMargin;
+      border: $inputListItemBorder;
+      color: $inputListItemTextColor;
+      background: $inputListItemBg;
+      transition: transform $transitionDuration, $listItemTransition;
 
-			&:not(.p-highlight):hover {
-				background: $inputListItemHoverBg;
-				color: $inputListItemTextHoverColor;
-			}
+      &:not(.p-highlight):hover {
+        background: $inputListItemHoverBg;
+        color: $inputListItemTextHoverColor;
+      }
 
-			&.p-focus {
-				color: $inputListItemTextFocusColor;
-				background: $inputListItemFocusBg;
-			}
+      &.p-focus {
+        color: $inputListItemTextFocusColor;
+        background: $inputListItemFocusBg;
+      }
 
-			&.p-highlight {
-				color: $highlightTextColor;
-				background: $highlightBg;
+      &.p-highlight {
+        color: $highlightTextColor;
+        background: $highlightBg;
 
-				&.p-focus {
-					background: $highlightFocusBg;
-				}
-			}
-		}
-	}
+        &.p-focus {
+          background: $highlightFocusBg;
+        }
+      }
+    }
+  }
 }

package/style/scss/components/input/_iconfield.scss

@@ -1,10 +1,11 @@
 // core
 .p-icon-field {
-    position: relative;
+  position: relative;
+  width: 100%;
 }
 
 .p-icon-field > .p-input-icon {
-    position: absolute;
-    top: 50%;
-    margin-top: -.5rem;
+  position: absolute;
+  top: 50%;
+  margin-top: -.7rem;
 }

package/style/scss/components/input/_inputswitch.scss

@@ -2,99 +2,109 @@
 
 //core
 .p-inputswitch {
-    position: relative;
-    display: inline-block;
+  position: relative;
+  display: inline-block;
 }
 
 .p-inputswitch-input {
-    appearance: none;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    padding: 0;
-    margin: 0;
-    opacity: 0;
-    z-index: 1;
-    outline: 0 none;
-    cursor: pointer;
+  appearance: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  opacity: 0;
+  z-index: 1;
+  outline: 0 none;
+  cursor: pointer;
 }
 
 .p-inputswitch-slider {
-    position: absolute;
-    cursor: pointer;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    border: 1px solid transparent;
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border: 1px solid transparent;
+}
+
+.p-inputswitch-legend {
+  font-size: 1em;
+  color: $shade600;
 }
 
 .p-inputswitch-slider:before {
-    position: absolute;
-    content: '';
-    top: 50%;
+  position: absolute;
+  content: '';
+  top: 50%;
 }
 
 //theme
 .p-inputswitch {
-    width: $inputSwitchWidth;
-    height: $inputSwitchHeight;
+  width: $inputSwitchWidth;
+  height: $inputSwitchHeight;
 
-    .p-inputswitch-input {
-        border-radius: $inputSwitchBorderRadius;
-    }
+  .p-inputswitch-input {
+    border-radius: $inputSwitchBorderRadius;
+  }
 
-    .p-inputswitch-slider {
-        background: $inputSwitchSliderOffBg;
-        transition: $formElementTransition;
-        border-radius: $inputSwitchBorderRadius;
-        outline-color: transparent;
-
-        &:before {
-            background: $inputSwitchHandleOffBg;
-            width: $inputSwitchHandleWidth;
-            height: $inputSwitchHandleHeight;
-            left: $inputSwitchSliderPadding;
-            margin-top: math.div(-1 * $inputSwitchHandleHeight, 2);
-            border-radius: $inputSwitchHandleBorderRadius;
-            transition-duration: $transitionDuration;
-        }
+  .p-inputswitch-slider {
+    background: $inputSwitchSliderOffBg;
+    transition: $formElementTransition;
+    border-radius: $inputSwitchBorderRadius;
+    outline-color: transparent;
+
+    &:before {
+      background: $inputSwitchHandleOffBg;
+      width: $inputSwitchHandleWidth;
+      height: $inputSwitchHandleHeight;
+      left: $inputSwitchSliderPadding;
+      margin-top: math.div(-1 * $inputSwitchHandleHeight, 2);
+      border-radius: $inputSwitchHandleBorderRadius;
+      transition-duration: $transitionDuration;
     }
+  }
 
-    &.p-highlight {
-        .p-inputswitch-slider {
-            background: $inputSwitchSliderOnBg;
+  .p-inputswitch-legend {
+    font-size: $inputSwitchLegendFontSize;
+    color: $inputSwitchLegendColor;
+  }
 
-            &:before {
-                background: $inputSwitchHandleOnBg;
-                transform: translateX($inputSwitchHandleWidth);
-            }
-        }
+  &.p-highlight {
+    .p-inputswitch-slider {
+      background: $inputSwitchSliderOnBg;
+
+      &:before {
+        background: $inputSwitchHandleOnBg;
+        transform: translateX($inputSwitchHandleWidth);
+      }
     }
+  }
 
-    &:not(.p-disabled) {
-        &:has(.p-inputswitch-input:hover) {
-            .p-inputswitch-slider {
-                background: $inputSwitchSliderOffHoverBg;
-            }
-
-            &.p-highlight {
-                .p-inputswitch-slider {
-                    background: $inputSwitchSliderOnHoverBg;
-                }
-            }
-        }
+  &:not(.p-disabled) {
+    &:has(.p-inputswitch-input:hover) {
+      .p-inputswitch-slider {
+        background: $inputSwitchSliderOffHoverBg;
+      }
 
-        &:has(.p-inputswitch-input:focus-visible) {
-            .p-inputswitch-slider {
-                @include focused();
-            }
+      &.p-highlight {
+        .p-inputswitch-slider {
+          background: $inputSwitchSliderOnHoverBg;
         }
+      }
     }
 
-    &.p-invalid > .p-inputswitch-slider {
-        @include invalid-input();
+    &:has(.p-inputswitch-input:focus-visible) {
+      .p-inputswitch-slider {
+        @include focused();
+      }
     }
+  }
+
+  &.p-invalid > .p-inputswitch-slider {
+    @include invalid-input();
+  }
 }