@orangesix/react 2.3.1 → 2.4.0-beta.3

package/style/scss/_message.scss

@@ -1,107 +0,0 @@
-.p-message {
-    margin: $messageMargin;
-    border-radius: $borderRadius;
-
-    .p-message-wrapper {
-        padding: $messagePadding;
-    }
-
-    .p-message-close {
-        width: $actionIconWidth;
-        height: $actionIconHeight;
-        border-radius: $actionIconBorderRadius;
-        background: transparent;
-        transition: $actionIconTransition;
-
-        &:hover {
-            background: rgba(255,255,255,.5);
-        }
-
-        &:focus-visible {
-            @include focused();
-        }
-    }
-
-    &.p-message-info {
-        background: $infoMessageBg;
-        border: $infoMessageBorder;
-        border-width: $messageBorderWidth;
-        color: $infoMessageTextColor;
-
-        .p-message-icon {
-            color: $infoMessageIconColor;
-        }
-
-        .p-message-close {
-            color: $infoMessageIconColor;
-        }
-    }
-
-    &.p-message-success {
-        background: $successMessageBg;
-        border: $successMessageBorder;
-        border-width: $messageBorderWidth;
-        color: $successMessageTextColor;
-
-        .p-message-icon {
-            color: $successMessageIconColor;
-        }
-
-        .p-message-close {
-            color: $successMessageIconColor;
-        }
-    }
-
-    &.p-message-warn {
-        background: $warningMessageBg;
-        border: $warningMessageBorder;
-        border-width: $messageBorderWidth;
-        color: $warningMessageTextColor;
-
-        .p-message-icon {
-            color: $warningMessageIconColor;
-        }
-
-        .p-message-close {
-            color: $warningMessageIconColor;
-        }
-    }
-
-    &.p-message-error {
-        background: $errorMessageBg;
-        border: $errorMessageBorder;
-        border-width: $messageBorderWidth;
-        color: $errorMessageTextColor;
-
-        .p-message-icon {
-            color: $errorMessageIconColor;
-        }
-
-        .p-message-close {
-            color: $errorMessageIconColor;
-        }
-    }
-
-    .p-message-text {
-        font-size: $messageTextFontSize;
-        font-weight: $messageTextFontWeight;
-    }
-
-    .p-message-icon {
-        font-size: $messageIconFontSize;
-        margin-right: $inlineSpacing;
-
-        &.p-icon {
-            width: $messageIconFontSize;
-            height: $messageIconFontSize;
-        }
-    }
-
-    .p-message-summary {
-        font-weight: 700;
-    }
-
-    .p-message-detail {
-        margin-left: $inlineSpacing;
-    }
-}

package/style/scss/_metergroup.scss

@@ -1,81 +0,0 @@
-.p-metergroup {
-    .p-metergroup-meter-container {
-        background: $progressBarBg;
-        border-radius: $borderRadius;
-    }
-
-    .p-metergroup-meter {
-        border: $progressBarBorder;
-        background: $progressBarValueBg;
-    }
-
-    .p-metergroup-label-list {
-        .p-metergroup-label-list-item {
-            line-height: $progressBarHeight;
-        }
-        
-        .p-metergroup-label-type {
-            background: $progressBarValueBg;
-            width: 0.5rem;
-            height: 0.5rem;
-            border-radius: 100%;
-            margin-right: $inlineSpacing;
-        }
-        
-        .p-metergroup-label {
-            margin-right: $inlineSpacing * 2;
-        }
-    
-        .p-metergroup-label-icon {
-            width: 1rem;
-            height: 1rem;
-            margin-right: $inlineSpacing;
-        }
-    }
-
-
-    &.p-metergroup-horizontal {
-        .p-metergroup-meter-container {
-            height: 0.5rem;
-        }
-
-        .p-metergroup-meter:first-of-type {
-            border-top-left-radius: $borderRadius;
-            border-bottom-left-radius: $borderRadius;
-        }
-
-        .p-metergroup-meter:last-of-type {
-            border-top-right-radius: $borderRadius;
-            border-bottom-right-radius: $borderRadius;
-        }
-
-        .p-metergroup-label-list-start {
-            margin-bottom: $inlineSpacing * 2;
-        }
-    
-        .p-metergroup-label-list-end {
-            margin-top: $inlineSpacing * 2;
-        }
-    }
-
-    &.p-metergroup-vertical {
-        .p-metergroup-meter-container {
-            width: 0.5rem;
-            height: 100%;
-        }
-
-        .p-metergroup-meter:first-of-type {
-            border-top-left-radius: $borderRadius;
-            border-top-right-radius: $borderRadius;
-        }
-    
-        .p-metergroup-meter:last-of-type {
-            border-bottom-left-radius: $borderRadius;
-            border-bottom-right-radius: $borderRadius;
-        }
-
-        .p-metergroup-label-list:not(.p-metergroup-label-list-start) {
-            margin-left: $inlineSpacing * 2;
-        }
-    }
-}

package/style/scss/_mixins.scss

@@ -1,243 +0,0 @@
-@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} !important;
-}
-
-@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);
-}

package/style/scss/_multiselect.scss

@@ -1,278 +0,0 @@
-@use "sass:math";
-
-// core
-.p-multiselect {
-    display: inline-flex;
-    cursor: pointer;
-    user-select: none;
-}
-
-.p-multiselect-trigger {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-}
-
-.p-multiselect-label-container {
-    overflow: hidden;
-    flex: 1 1 auto;
-    cursor: pointer;
-}
-
-.p-multiselect-label {
-    display: block;
-    white-space: nowrap;
-    cursor: pointer;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.p-multiselect-label-empty {
-    overflow: hidden;
-    visibility: hidden;
-}
-
-.p-multiselect-token {
-    cursor: default;
-    display: inline-flex;
-    align-items: center;
-    flex: 0 0 auto;
-}
-
-.p-multiselect-token-icon {
-    cursor: pointer;
-}
-
-.p-multiselect .p-multiselect-panel {
-    min-width: 100%;
-}
-
-.p-multiselect-items-wrapper {
-    overflow: auto;
-}
-
-.p-multiselect-items {
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-}
-
-.p-multiselect-item {
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    font-weight: normal;
-    white-space: nowrap;
-    position: relative;
-    overflow: hidden;
-}
-
-.p-multiselect-item-group {
-    cursor: auto;
-}
-
-.p-multiselect-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-}
-
-.p-multiselect-filter-container {
-    position: relative;
-    flex: 1 1 auto;
-}
-
-.p-multiselect-filter-icon {
-    position: absolute;
-    top: 50%;
-    margin-top: -0.5rem;
-}
-
-.p-multiselect-filter-container .p-inputtext {
-    width: 100%;
-}
-
-.p-multiselect-close {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    overflow: hidden;
-    position: relative;
-    margin-left: auto;
-}
-
-.p-fluid .p-multiselect {
-    display: flex;
-}
-
-// theme
-.p-multiselect {
-    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-multiselect-label {
-        padding: $inputPadding;
-        transition: $formElementTransition;
-
-        &.p-placeholder {
-            color: $inputPlaceholderTextColor;
-        }
-    }
-
-    &.p-multiselect-chip {
-        .p-multiselect-token {
-            padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
-            margin-right: $inlineSpacing;
-            background: $chipBg;
-            color: $chipTextColor;
-            border-radius: $chipBorderRadius;
-
-            .p-multiselect-token-icon {
-                margin-left: $inlineSpacing;
-            }
-        }
-    }
-
-    .p-multiselect-trigger {
-        background: transparent;
-        color: $inputIconColor;
-        width: $inputGroupAddOnMinWidth;
-        border-top-right-radius: $borderRadius;
-        border-bottom-right-radius: $borderRadius;
-    }
-
-    &.p-invalid.p-component {
-        @include invalid-input();
-    }
-}
-
-.p-inputwrapper-filled {
-    &.p-multiselect {
-        &.p-multiselect-chip {
-            .p-multiselect-label {
-                padding: math.div(nth($inputPadding, 1), 2)
-                    nth($inputPadding, 2);
-            }
-        }
-    }
-}
-
-.p-multiselect-panel {
-    background: $inputOverlayBg;
-    color: $inputListTextColor;
-    border: $inputOverlayBorder;
-    border-radius: $borderRadius;
-    box-shadow: $inputOverlayShadow;
-
-    .p-multiselect-header {
-        padding: $inputListHeaderPadding;
-        border-bottom: $inputListHeaderBorder;
-        color: $inputListHeaderTextColor;
-        background: $inputOverlayHeaderBg;
-        margin: $inputListHeaderMargin;
-        border-top-right-radius: $borderRadius;
-        border-top-left-radius: $borderRadius;
-
-        .p-multiselect-filter-container {
-            .p-inputtext {
-                padding-right: nth($inputPadding, 2) + $primeIconFontSize;
-            }
-
-            .p-multiselect-filter-icon {
-                right: nth($inputPadding, 2);
-                color: $inputIconColor;
-            }
-        }
-
-        .p-checkbox {
-            margin-right: $inlineSpacing;
-        }
-
-        .p-multiselect-close {
-            margin-left: $inlineSpacing;
-            @include action-icon();
-        }
-    }
-
-    .p-multiselect-items {
-        padding: $inputListPadding;
-
-        .p-multiselect-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-checkbox {
-                margin-right: $inlineSpacing;
-            }
-        }
-
-        .p-multiselect-item-group {
-            margin: $submenuHeaderMargin;
-            padding: $submenuHeaderPadding;
-            color: $submenuHeaderTextColor;
-            background: $submenuHeaderBg;
-            font-weight: $submenuHeaderFontWeight;
-        }
-
-        .p-multiselect-empty-message {
-            padding: $inputListItemPadding;
-            color: $inputListItemTextColor;
-            background: $inputListItemBg;
-        }
-    }
-}
-