@orangesix/react 2.3.1 → 2.4.0-beta.3

package/style/scss/button/_button.scss

@@ -1,644 +0,0 @@
-.p-button {
-  color: $buttonTextColor;
-  background: $buttonBg;
-  border: $buttonBorder;
-  padding: $buttonPadding !important;
-  font-size: $fontSize;
-  transition: $formElementTransition;
-  border-radius: $borderRadius !important;
-
-  &:not(:disabled):hover {
-    background: $buttonHoverBg;
-    color: $buttonTextHoverColor;
-    border-color: $buttonHoverBorderColor;
-  }
-
-  &:not(:disabled):active {
-    background: $buttonActiveBg;
-    color: $buttonTextActiveColor;
-    border-color: $buttonActiveBorderColor;
-  }
-
-  &.p-button-outlined {
-    background-color: transparent;
-    color: $buttonBg;
-    border: $outlinedButtonBorder;
-
-    &:not(:disabled):hover {
-      background: rgba($buttonBg, $textButtonHoverBgOpacity);
-      color: $buttonBg;
-      border: $outlinedButtonBorder;
-    }
-
-    &:not(:disabled):active {
-      background: rgba($buttonBg, $textButtonActiveBgOpacity);
-      color: $buttonBg;
-      border: $outlinedButtonBorder;
-    }
-
-    &.p-button-plain {
-      color: $plainButtonTextColor;
-      border-color: $plainButtonTextColor;
-
-      &:not(:disabled):hover {
-        background: $plainButtonHoverBgColor;
-        color: $plainButtonTextColor;
-      }
-
-      &:not(:disabled):active {
-        background: $plainButtonActiveBgColor;
-        color: $plainButtonTextColor;
-      }
-    }
-  }
-
-  &.p-button-text {
-    background-color: transparent;
-    color: $buttonBg;
-    border-color: transparent;
-
-    &:not(:disabled):hover {
-      background: rgba($buttonBg, $textButtonHoverBgOpacity);
-      color: $buttonBg;
-      border-color: transparent;
-    }
-
-    &:not(:disabled):active {
-      background: rgba($buttonBg, $textButtonActiveBgOpacity);
-      color: $buttonBg;
-      border-color: transparent;
-    }
-
-    &.p-button-plain {
-      color: $plainButtonTextColor;
-
-      &:not(:disabled):hover {
-        background: $plainButtonHoverBgColor;
-        color: $plainButtonTextColor;
-      }
-
-      &:not(:disabled):active {
-        background: $plainButtonActiveBgColor;
-        color: $plainButtonTextColor;
-      }
-    }
-  }
-
-  &:focus {
-    @include focused();
-  }
-
-  .p-button-label {
-    transition-duration: $transitionDuration;
-  }
-
-  .p-button-icon-left {
-    margin-right: $inlineSpacing;
-  }
-
-  .p-button-icon-right {
-    margin-left: $inlineSpacing;
-  }
-
-  .p-button-icon-bottom {
-    margin-top: $inlineSpacing;
-  }
-
-  .p-button-icon-top {
-    margin-bottom: $inlineSpacing;
-  }
-
-  .p-badge {
-    margin-left: $inlineSpacing;
-    min-width: $fontSize;
-    height: $fontSize;
-    line-height: $fontSize;
-    color: $buttonBg;
-    background-color: $buttonTextColor;
-  }
-
-  &.p-button-raised {
-    box-shadow: $raisedButtonShadow;
-  }
-
-  &.p-button-rounded {
-    border-radius: $roundedButtonBorderRadius;
-  }
-
-  &.p-button-icon-only {
-    width: $buttonIconOnlyWidth;
-    padding: $buttonIconOnlyPadding;
-
-    .p-button-icon-left,
-    .p-button-icon-right {
-      margin: 0;
-    }
-
-    &.p-button-rounded {
-      border-radius: 50%;
-      height: $buttonIconOnlyWidth;
-    }
-  }
-
-  &.p-button-sm {
-    @include scaledFontSize($fontSize, $scaleSM);
-    @include scaledPadding($buttonPadding, $scaleSM);
-
-    .p-button-icon {
-      @include scaledFontSize($primeIconFontSize, $scaleSM);
-    }
-  }
-
-  &.p-button-lg {
-    @include scaledFontSize($fontSize, $scaleLG);
-    @include scaledPadding($buttonPadding, $scaleLG);
-
-    .p-button-icon {
-      @include scaledFontSize($primeIconFontSize, $scaleLG);
-    }
-  }
-
-  &.p-button-loading-label-only {
-    &.p-button-loading-left {
-      .p-button-label {
-        margin-left: $inlineSpacing;
-      }
-    }
-
-    &.p-button-loading-right {
-      .p-button-label {
-        margin-right: $inlineSpacing;
-      }
-    }
-
-    &.p-button-loading-top {
-      .p-button-label {
-        margin-top: $inlineSpacing;
-      }
-    }
-
-    &.p-button-loading-bottom {
-      .p-button-label {
-        margin-bottom: $inlineSpacing;
-      }
-    }
-
-    .p-button-loading-icon {
-      margin: 0;
-    }
-  }
-}
-
-.p-fluid {
-  .p-button {
-    width: 100%;
-  }
-
-  .p-button-icon-only {
-    width: $buttonIconOnlyWidth;
-  }
-
-  .p-button-group {
-    display: flex;
-
-    .p-button {
-      flex: 1;
-    }
-  }
-}
-
-.p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
-  color: $secondaryButtonTextColor;
-  background: $secondaryButtonBg;
-  border: $secondaryButtonBorder;
-
-  &:not(:disabled):hover {
-    background: $secondaryButtonHoverBg;
-    color: $secondaryButtonTextHoverColor;
-    border-color: $secondaryButtonHoverBorderColor;
-  }
-
-  &:not(:disabled):focus {
-    box-shadow: $secondaryButtonFocusShadow;
-  }
-
-  &:not(:disabled):active {
-    background: $secondaryButtonActiveBg;
-    color: $secondaryButtonTextActiveColor;
-    border-color: $secondaryButtonActiveBorderColor;
-  }
-
-  &.p-button-outlined {
-    background-color: transparent;
-    color: $secondaryButtonBg;
-    border: $outlinedButtonBorder;
-
-    &:not(:disabled):hover {
-      background: rgba($secondaryButtonBg, $textButtonHoverBgOpacity);
-      color: $secondaryButtonBg;
-      border: $outlinedButtonBorder;
-    }
-
-    &:not(:disabled):active {
-      background: rgba($secondaryButtonBg, $textButtonActiveBgOpacity);
-      color: $secondaryButtonBg;
-      border: $outlinedButtonBorder;
-    }
-  }
-
-  &.p-button-text {
-    background-color: transparent;
-    color: $secondaryButtonBg;
-    border-color: transparent;
-
-    &:not(:disabled):hover {
-      background: rgba($secondaryButtonBg, $textButtonHoverBgOpacity);
-      border-color: transparent;
-      color: $secondaryButtonBg;
-    }
-
-    &:not(:disabled):active {
-      background: rgba($secondaryButtonBg, $textButtonActiveBgOpacity);
-      border-color: transparent;
-      color: $secondaryButtonBg;
-    }
-  }
-}
-
-.p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
-  color: $infoButtonTextColor;
-  background: $infoButtonBg;
-  border: $infoButtonBorder;
-
-  &:not(:disabled):hover {
-    background: $infoButtonHoverBg;
-    color: $infoButtonTextHoverColor;
-    border-color: $infoButtonHoverBorderColor;
-  }
-
-  &:not(:disabled):focus {
-    box-shadow: $infoButtonFocusShadow;
-  }
-
-  &:not(:disabled):active {
-    background: $infoButtonActiveBg;
-    color: $infoButtonTextActiveColor;
-    border-color: $infoButtonActiveBorderColor;
-  }
-
-  &.p-button-outlined {
-    background-color: transparent;
-    color: $infoButtonBg;
-    border: $outlinedButtonBorder;
-
-    &:not(:disabled):hover {
-      background: rgba($infoButtonBg, $textButtonHoverBgOpacity);
-      color: $infoButtonBg;
-      border: $outlinedButtonBorder;
-    }
-
-    &:not(:disabled):active {
-      background: rgba($infoButtonBg, $textButtonActiveBgOpacity);
-      color: $infoButtonBg;
-      border: $outlinedButtonBorder;
-    }
-  }
-
-  &.p-button-text {
-    background-color: transparent;
-    color: $infoButtonBg;
-    border-color: transparent;
-
-    &:not(:disabled):hover {
-      background: rgba($infoButtonBg, $textButtonHoverBgOpacity);
-      border-color: transparent;
-      color: $infoButtonBg;
-    }
-
-    &:not(:disabled):active {
-      background: rgba($infoButtonBg, $textButtonActiveBgOpacity);
-      border-color: transparent;
-      color: $infoButtonBg;
-    }
-  }
-}
-
-.p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
-  color: $successButtonTextColor;
-  background: $successButtonBg;
-  border: $successButtonBorder;
-
-  &:not(:disabled):hover {
-    background: $successButtonHoverBg;
-    color: $successButtonTextHoverColor;
-    border-color: $successButtonHoverBorderColor;
-  }
-
-  &:not(:disabled):focus {
-    box-shadow: $successButtonFocusShadow;
-  }
-
-  &:not(:disabled):active {
-    background: $successButtonActiveBg;
-    color: $successButtonTextActiveColor;
-    border-color: $successButtonActiveBorderColor;
-  }
-
-  &.p-button-outlined {
-    background-color: transparent;
-    color: $successButtonBg;
-    border: $outlinedButtonBorder;
-
-    &:not(:disabled):hover {
-      background: rgba($successButtonBg, $textButtonHoverBgOpacity);
-      color: $successButtonBg;
-      border: $outlinedButtonBorder;
-    }
-
-    &:not(:disabled):active {
-      background: rgba($successButtonBg, $textButtonActiveBgOpacity);
-      color: $successButtonBg;
-      border: $outlinedButtonBorder;
-    }
-  }
-
-  &.p-button-text {
-    background-color: transparent;
-    color: $successButtonBg;
-    border-color: transparent;
-
-    &:not(:disabled):hover {
-      background: rgba($successButtonBg, $textButtonHoverBgOpacity);
-      border-color: transparent;
-      color: $successButtonBg;
-    }
-
-    &:not(:disabled):active {
-      background: rgba($successButtonBg, $textButtonActiveBgOpacity);
-      border-color: transparent;
-      color: $successButtonBg;
-    }
-  }
-}
-
-.p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
-  color: $warningButtonTextColor;
-  background: $warningButtonBg;
-  border: $warningButtonBorder;
-
-  &:not(:disabled):hover {
-    background: $warningButtonHoverBg;
-    color: $warningButtonTextHoverColor;
-    border-color: $warningButtonHoverBorderColor;
-  }
-
-  &:not(:disabled):focus {
-    box-shadow: $warningButtonFocusShadow;
-  }
-
-  &:not(:disabled):active {
-    background: $warningButtonActiveBg;
-    color: $warningButtonTextActiveColor;
-    border-color: $warningButtonActiveBorderColor;
-  }
-
-  &.p-button-outlined {
-    background-color: transparent;
-    color: $warningButtonBg;
-    border: $outlinedButtonBorder;
-
-    &:not(:disabled):hover {
-      background: rgba($warningButtonBg, $textButtonHoverBgOpacity);
-      color: $warningButtonBg;
-      border: $outlinedButtonBorder;
-    }
-
-    &:not(:disabled):active {
-      background: rgba($warningButtonBg, $textButtonActiveBgOpacity);
-      color: $warningButtonBg;
-      border: $outlinedButtonBorder;
-    }
-  }
-
-  &.p-button-text {
-    background-color: transparent;
-    color: $warningButtonBg;
-    border-color: transparent;
-
-    &:not(:disabled):hover {
-      background: rgba($warningButtonBg, $textButtonHoverBgOpacity);
-      border-color: transparent;
-      color: $warningButtonBg;
-    }
-
-    &:not(:disabled):active {
-      background: rgba($warningButtonBg, $textButtonActiveBgOpacity);
-      border-color: transparent;
-      color: $warningButtonBg;
-    }
-  }
-}
-
-.p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
-  color: $helpButtonTextColor;
-  background: $helpButtonBg;
-  border: $helpButtonBorder;
-
-  &:not(:disabled):hover {
-    background: $helpButtonHoverBg;
-    color: $helpButtonTextHoverColor;
-    border-color: $helpButtonHoverBorderColor;
-  }
-
-  &:not(:disabled):focus {
-    box-shadow: $helpButtonFocusShadow;
-  }
-
-  &:not(:disabled):active {
-    background: $helpButtonActiveBg;
-    color: $helpButtonTextActiveColor;
-    border-color: $helpButtonActiveBorderColor;
-  }
-
-  &.p-button-outlined {
-    background-color: transparent;
-    color: $helpButtonBg;
-    border: $outlinedButtonBorder;
-
-    &:not(:disabled):hover {
-      background: rgba($helpButtonBg, $textButtonHoverBgOpacity);
-      color: $helpButtonBg;
-      border: $outlinedButtonBorder;
-    }
-
-    &:not(:disabled):active {
-      background: rgba($helpButtonBg, $textButtonActiveBgOpacity);
-      color: $helpButtonBg;
-      border: $outlinedButtonBorder;
-    }
-  }
-
-  &.p-button-text {
-    background-color: transparent;
-    color: $helpButtonBg;
-    border-color: transparent;
-
-    &:not(:disabled):hover {
-      background: rgba($helpButtonBg, $textButtonHoverBgOpacity);
-      border-color: transparent;
-      color: $helpButtonBg;
-    }
-
-    &:not(:disabled):active {
-      background: rgba($helpButtonBg, $textButtonActiveBgOpacity);
-      border-color: transparent;
-      color: $helpButtonBg;
-    }
-  }
-}
-
-.p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
-  color: $dangerButtonTextColor;
-  background: $dangerButtonBg;
-  border: $dangerButtonBorder;
-
-  &:not(:disabled):hover {
-    background: $dangerButtonHoverBg;
-    color: $dangerButtonTextHoverColor;
-    border-color: $dangerButtonHoverBorderColor;
-  }
-
-  &:not(:disabled):focus {
-    box-shadow: $dangerButtonFocusShadow;
-  }
-
-  &:not(:disabled):active {
-    background: $dangerButtonActiveBg;
-    color: $dangerButtonTextActiveColor;
-    border-color: $dangerButtonActiveBorderColor;
-  }
-
-  &.p-button-outlined {
-    background-color: transparent;
-    color: $dangerButtonBg;
-    border: $outlinedButtonBorder;
-
-    &:not(:disabled):hover {
-      background: rgba($dangerButtonBg, $textButtonHoverBgOpacity);
-      color: $dangerButtonBg;
-      border: $outlinedButtonBorder;
-    }
-
-    &:not(:disabled):active {
-      background: rgba($dangerButtonBg, $textButtonActiveBgOpacity);
-      color: $dangerButtonBg;
-      border: $outlinedButtonBorder;
-    }
-  }
-
-  &.p-button-text {
-    background-color: transparent;
-    color: $dangerButtonBg;
-    border-color: transparent;
-
-    &:not(:disabled):hover {
-      background: rgba($dangerButtonBg, $textButtonHoverBgOpacity);
-      border-color: transparent;
-      color: $dangerButtonBg;
-    }
-
-    &:not(:disabled):active {
-      background: rgba($dangerButtonBg, $textButtonActiveBgOpacity);
-      border-color: transparent;
-      color: $dangerButtonBg;
-    }
-  }
-}
-
-@if variable-exists(contrastButtonTextColor) {
-  .p-button.p-button-contrast, .p-button-group.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
-    color: $contrastButtonTextColor;
-    background: $contrastButtonBg;
-    border: $contrastButtonBorder;
-
-    &:not(:disabled):hover {
-      background: $contrastButtonHoverBg;
-      color: $contrastButtonTextHoverColor;
-      border-color: $contrastButtonHoverBorderColor;
-    }
-
-    &:not(:disabled):focus {
-      box-shadow: $contrastButtonFocusShadow;
-    }
-
-    &:not(:disabled):active {
-      background: $contrastButtonActiveBg;
-      color: $contrastButtonTextActiveColor;
-      border-color: $contrastButtonActiveBorderColor;
-    }
-
-    &.p-button-outlined {
-      background-color: transparent;
-      color: $contrastButtonBg;
-      border: $outlinedButtonBorder;
-
-      &:not(:disabled):hover {
-        background: rgba($contrastButtonBg, $textButtonHoverBgOpacity);
-        color: $contrastButtonBg;
-        border: $outlinedButtonBorder;
-      }
-
-      &:not(:disabled):active {
-        background: rgba($contrastButtonBg, $textButtonActiveBgOpacity);
-        color: $contrastButtonBg;
-        border: $outlinedButtonBorder;
-      }
-    }
-
-    &.p-button-text {
-      background-color: transparent;
-      color: $contrastButtonBg;
-      border-color: transparent;
-
-      &:not(:disabled):hover {
-        background: rgba($contrastButtonBg, $textButtonHoverBgOpacity);
-        border-color: transparent;
-        color: $contrastButtonBg;
-      }
-
-      &:not(:disabled):active {
-        background: rgba($contrastButtonBg, $textButtonActiveBgOpacity);
-        border-color: transparent;
-        color: $contrastButtonBg;
-      }
-    }
-  }
-}
-
-.p-button.p-button-link {
-  color: $linkButtonColor;
-  background: transparent;
-  border: transparent;
-
-  &:not(:disabled):hover {
-    background: transparent;
-    color: $linkButtonHoverColor;
-    border-color: transparent;
-
-    .p-button-label {
-      text-decoration: $linkButtonTextHoverDecoration;
-    }
-  }
-
-  &:not(:disabled):focus {
-    background: transparent;
-    box-shadow: $linkButtonFocusShadow;
-    border-color: transparent;
-  }
-
-  &:not(:disabled):active {
-    background: transparent;
-    color: $linkButtonColor;
-    border-color: transparent;
-  }
-}

package/style/scss/button/_speeddial.scss

@@ -1,91 +0,0 @@
-@use "sass:math";
-
-.p-speeddial-button {
-	&.p-button.p-button-icon-only {
-		width: $speedDialButtonWidth;
-		height: $speedDialButtonHeight;
-
-		.p-button-icon {
-			font-size: $speedDialButtonIconFontSize;
-
-			&.p-icon {
-				width: $speedDialButtonIconFontSize;
-				height: $speedDialButtonIconFontSize;
-			}
-		}
-	}
-}
-
-.p-speeddial-list {
-	outline: 0 none;
-}
-
-.p-speeddial-action {
-	width: $speedDialActionWidth;
-	height: $speedDialActionHeight;
-	background: $speedDialActionBg;
-	color: $speedDialActionTextColor;
-
-	&:hover {
-		background: $speedDialActionHoverBg;
-		color: $speedDialActionTextHoverColor;
-	}
-}
-
-.p-speeddial-direction-up {
-	.p-speeddial-item {
-		margin: math.div($inlineSpacing, 2);
-
-		&:first-child {
-			margin-bottom: $inlineSpacing;
-		}
-	}
-}
-
-.p-speeddial-direction-down {
-	.p-speeddial-item {
-		margin: math.div($inlineSpacing, 2);
-
-		&:first-child {
-			margin-top: $inlineSpacing;
-		}
-	}
-}
-
-.p-speeddial-direction-left {
-	.p-speeddial-item {
-		margin: 0 math.div($inlineSpacing, 2);
-
-		&:first-child {
-			margin-right: $inlineSpacing;
-		}
-	}
-}
-
-.p-speeddial-direction-right {
-	.p-speeddial-item {
-		margin: 0 math.div($inlineSpacing, 2);
-
-		&:first-child {
-			margin-left: $inlineSpacing;
-		}
-	}
-}
-
-.p-speeddial-circle,
-.p-speeddial-semi-circle,
-.p-speeddial-quarter-circle {
-	.p-speeddial-item {
-		margin: 0;
-
-		&:first-child,
-		&:last-child {
-			margin: 0;
-		}
-	}
-}
-
-.p-speeddial-mask {
-	background-color: $maskBg;
-	border-radius: $borderRadius;
-}