Initial commit
This commit is contained in:
dahoud
584
public/theme/theme-base/components/button/_button.scss
Normal file
584
public/theme/theme-base/components/button/_button.scss
Normal file
@@ -0,0 +1,584 @@
|
||||
.p-button {
|
||||
color: $buttonTextColor;
|
||||
background: $buttonBg;
|
||||
border: $buttonBorder;
|
||||
padding: $buttonPadding;
|
||||
font-size: $fontSize;
|
||||
transition: $formElementTransition;
|
||||
border-radius: $borderRadius;
|
||||
|
||||
&: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-buttonset {
|
||||
display: flex;
|
||||
|
||||
.p-button {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-button.p-button-secondary, .p-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
87
public/theme/theme-base/components/button/_speeddial.scss
Normal file
87
public/theme/theme-base/components/button/_speeddial.scss
Normal file
@@ -0,0 +1,87 @@
|
||||
@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-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;
|
||||
}
|
||||
359
public/theme/theme-base/components/button/_splitbutton.scss
Normal file
359
public/theme/theme-base/components/button/_splitbutton.scss
Normal file
@@ -0,0 +1,359 @@
|
||||
.p-splitbutton {
|
||||
border-radius: $borderRadius;
|
||||
|
||||
&.p-button-outlined {
|
||||
> .p-button {
|
||||
background-color: transparent;
|
||||
color: $buttonBg;
|
||||
border: $outlinedButtonBorder;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: rgba($buttonBg, $textButtonHoverBgOpacity);
|
||||
color: $buttonBg;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: rgba($buttonBg, $textButtonActiveBgOpacity);
|
||||
color: $buttonBg;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-button-plain {
|
||||
> .p-button {
|
||||
color: $plainButtonTextColor;
|
||||
border-color: $plainButtonTextColor;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: $plainButtonHoverBgColor;
|
||||
color: $plainButtonTextColor;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: $plainButtonActiveBgColor;
|
||||
color: $plainButtonTextColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-button-text {
|
||||
> .p-button {
|
||||
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 {
|
||||
> .p-button {
|
||||
color: $plainButtonTextColor;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: $plainButtonHoverBgColor;
|
||||
color: $plainButtonTextColor;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: $plainButtonActiveBgColor;
|
||||
color: $plainButtonTextColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-button-raised {
|
||||
box-shadow: $raisedButtonShadow;
|
||||
}
|
||||
|
||||
&.p-button-rounded {
|
||||
border-radius: $roundedButtonBorderRadius;
|
||||
|
||||
> .p-button {
|
||||
border-radius: $roundedButtonBorderRadius;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-button-sm {
|
||||
> .p-button {
|
||||
@include scaledFontSize($fontSize, $scaleSM);
|
||||
@include scaledPadding($buttonPadding, $scaleSM);
|
||||
|
||||
.p-button-icon {
|
||||
@include scaledFontSize($primeIconFontSize, $scaleSM);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-button-lg {
|
||||
> .p-button {
|
||||
@include scaledFontSize($fontSize, $scaleLG);
|
||||
@include scaledPadding($buttonPadding, $scaleLG);
|
||||
|
||||
&.p-button-icon-only {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.p-button-icon {
|
||||
@include scaledFontSize($primeIconFontSize, $scaleLG);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-splitbutton-menubutton,
|
||||
.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button,
|
||||
.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.p-splitbutton.p-button-secondary {
|
||||
&.p-button-outlined {
|
||||
> .p-button {
|
||||
background-color: transparent;
|
||||
color: $secondaryButtonBg;
|
||||
border: $outlinedButtonBorder;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: rgba($secondaryButtonBg, $textButtonHoverBgOpacity);
|
||||
color: $secondaryButtonBg;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: rgba($secondaryButtonBg, $textButtonActiveBgOpacity);
|
||||
color: $secondaryButtonBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-button-text {
|
||||
> .p-button {
|
||||
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-splitbutton.p-button-info {
|
||||
&.p-button-outlined {
|
||||
> .p-button {
|
||||
background-color: transparent;
|
||||
color: $infoButtonBg;
|
||||
border: $outlinedButtonBorder;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: rgba($infoButtonBg, $textButtonHoverBgOpacity);
|
||||
color: $infoButtonBg;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: rgba($infoButtonBg, $textButtonActiveBgOpacity);
|
||||
color: $infoButtonBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-button-text {
|
||||
> .p-button {
|
||||
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-splitbutton.p-button-success {
|
||||
&.p-button-outlined {
|
||||
> .p-button {
|
||||
background-color: transparent;
|
||||
color: $successButtonBg;
|
||||
border: $outlinedButtonBorder;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: rgba($successButtonBg, $textButtonHoverBgOpacity);
|
||||
color: $successButtonBg;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: rgba($successButtonBg, $textButtonActiveBgOpacity);
|
||||
color: $successButtonBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-button-text {
|
||||
> .p-button {
|
||||
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-splitbutton.p-button-warning {
|
||||
&.p-button-outlined {
|
||||
> .p-button {
|
||||
background-color: transparent;
|
||||
color: $warningButtonBg;
|
||||
border: $outlinedButtonBorder;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: rgba($warningButtonBg, $textButtonHoverBgOpacity);
|
||||
color: $warningButtonBg;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: rgba($warningButtonBg, $textButtonActiveBgOpacity);
|
||||
color: $warningButtonBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-button-text {
|
||||
> .p-button {
|
||||
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-splitbutton.p-button-help {
|
||||
&.p-button-outlined {
|
||||
> .p-button {
|
||||
background-color: transparent;
|
||||
color: $helpButtonBg;
|
||||
border: $outlinedButtonBorder;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: rgba($helpButtonBg, $textButtonHoverBgOpacity);
|
||||
color: $helpButtonBg;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: rgba($helpButtonBg, $textButtonActiveBgOpacity);
|
||||
color: $helpButtonBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-button-text {
|
||||
> .p-button {
|
||||
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-splitbutton.p-button-danger {
|
||||
&.p-button-outlined {
|
||||
> .p-button {
|
||||
background-color: transparent;
|
||||
color: $dangerButtonBg;
|
||||
border: $outlinedButtonBorder;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: rgba($dangerButtonBg, $textButtonHoverBgOpacity);
|
||||
color: $dangerButtonBg;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: rgba($dangerButtonBg, $textButtonActiveBgOpacity);
|
||||
color: $dangerButtonBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-button-text {
|
||||
> .p-button {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user