Skip to content

Commit

Permalink
Fixed #2230 - Add p-button-* class support to SplitButton
Browse files Browse the repository at this point in the history
  • Loading branch information
@tugcekucukoglu
tugcekucukoglu committed Mar 1, 2022
1 parent 6264f2b commit d8ad47c
Show file tree
Hide file tree
Showing 46 changed files with 11,734 additions and 95 deletions.
252 changes: 252 additions & 0 deletions public/themes/arya-blue/theme.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2175,6 +2175,258 @@
background-color: rgba(0, 0, 0, 0.4);
}

.p-splitbutton {
border-radius: 3px;
}
.p-splitbutton.p-button-outlined > .p-button {
background-color: transparent;
color: #64B5F6;
border: 1px solid;
}
.p-splitbutton.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover {
background: rgba(100, 181, 246, 0.04);
color: #64B5F6;
}
.p-splitbutton.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active {
background: rgba(100, 181, 246, 0.16);
color: #64B5F6;
}
.p-splitbutton.p-button-outlined.p-button-plain > .p-button {
color: rgba(255, 255, 255, 0.6);
border-color: rgba(255, 255, 255, 0.6);
}
.p-splitbutton.p-button-outlined.p-button-plain > .p-button:enabled:hover, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):hover {
background: rgba(255, 255, 255, 0.03);
color: rgba(255, 255, 255, 0.6);
}
.p-splitbutton.p-button-outlined.p-button-plain > .p-button:enabled:active, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):active {
background: rgba(255, 255, 255, 0.16);
color: rgba(255, 255, 255, 0.6);
}
.p-splitbutton.p-button-text > .p-button {
background-color: transparent;
color: #64B5F6;
border-color: transparent;
}
.p-splitbutton.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover {
background: rgba(100, 181, 246, 0.04);
color: #64B5F6;
border-color: transparent;
}
.p-splitbutton.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active {
background: rgba(100, 181, 246, 0.16);
color: #64B5F6;
border-color: transparent;
}
.p-splitbutton.p-button-text.p-button-plain > .p-button {
color: rgba(255, 255, 255, 0.6);
}
.p-splitbutton.p-button-text.p-button-plain > .p-button:enabled:hover, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):hover {
background: rgba(255, 255, 255, 0.03);
color: rgba(255, 255, 255, 0.6);
}
.p-splitbutton.p-button-text.p-button-plain > .p-button:enabled:active, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):active {
background: rgba(255, 255, 255, 0.16);
color: rgba(255, 255, 255, 0.6);
}
.p-splitbutton.p-button-raised {
box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
}
.p-splitbutton.p-button-rounded {
border-radius: 2rem;
}
.p-splitbutton.p-button-rounded > .p-button {
border-radius: 2rem;
}
.p-splitbutton.p-button-sm > .p-button {
font-size: 0.875rem;
padding: 0.4375rem 0.875rem;
}
.p-splitbutton.p-button-sm > .p-button .p-button-icon {
font-size: 0.875rem;
}
.p-splitbutton.p-button-lg > .p-button {
font-size: 1.25rem;
padding: 0.625rem 1.25rem;
}
.p-splitbutton.p-button-lg > .p-button .p-button-icon {
font-size: 1.25rem;
}

.p-splitbutton.p-button-secondary.p-button-outlined > .p-button {
background-color: transparent;
color: #78909C;
border: 1px solid;
}
.p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover {
background: rgba(120, 144, 156, 0.04);
color: #78909C;
}
.p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active {
background: rgba(120, 144, 156, 0.16);
color: #78909C;
}
.p-splitbutton.p-button-secondary.p-button-text > .p-button {
background-color: transparent;
color: #78909C;
border-color: transparent;
}
.p-splitbutton.p-button-secondary.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover {
background: rgba(120, 144, 156, 0.04);
border-color: transparent;
color: #78909C;
}
.p-splitbutton.p-button-secondary.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active {
background: rgba(120, 144, 156, 0.16);
border-color: transparent;
color: #78909C;
}

.p-splitbutton.p-button-info.p-button-outlined > .p-button {
background-color: transparent;
color: #81D4FA;
border: 1px solid;
}
.p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover {
background: rgba(129, 212, 250, 0.04);
color: #81D4FA;
}
.p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active {
background: rgba(129, 212, 250, 0.16);
color: #81D4FA;
}
.p-splitbutton.p-button-info.p-button-text > .p-button {
background-color: transparent;
color: #81D4FA;
border-color: transparent;
}
.p-splitbutton.p-button-info.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover {
background: rgba(129, 212, 250, 0.04);
border-color: transparent;
color: #81D4FA;
}
.p-splitbutton.p-button-info.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active {
background: rgba(129, 212, 250, 0.16);
border-color: transparent;
color: #81D4FA;
}

.p-splitbutton.p-button-success.p-button-outlined > .p-button {
background-color: transparent;
color: #C5E1A5;
border: 1px solid;
}
.p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover {
background: rgba(197, 225, 165, 0.04);
color: #C5E1A5;
}
.p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active {
background: rgba(197, 225, 165, 0.16);
color: #C5E1A5;
}
.p-splitbutton.p-button-success.p-button-text > .p-button {
background-color: transparent;
color: #C5E1A5;
border-color: transparent;
}
.p-splitbutton.p-button-success.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover {
background: rgba(197, 225, 165, 0.04);
border-color: transparent;
color: #C5E1A5;
}
.p-splitbutton.p-button-success.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active {
background: rgba(197, 225, 165, 0.16);
border-color: transparent;
color: #C5E1A5;
}

.p-splitbutton.p-button-warning.p-button-outlined > .p-button {
background-color: transparent;
color: #FFE082;
border: 1px solid;
}
.p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover {
background: rgba(255, 224, 130, 0.04);
color: #FFE082;
}
.p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active {
background: rgba(255, 224, 130, 0.16);
color: #FFE082;
}
.p-splitbutton.p-button-warning.p-button-text > .p-button {
background-color: transparent;
color: #FFE082;
border-color: transparent;
}
.p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover {
background: rgba(255, 224, 130, 0.04);
border-color: transparent;
color: #FFE082;
}
.p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active {
background: rgba(255, 224, 130, 0.16);
border-color: transparent;
color: #FFE082;
}

.p-splitbutton.p-button-help.p-button-outlined > .p-button {
background-color: transparent;
color: #CE93D8;
border: 1px solid;
}
.p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover {
background: rgba(206, 147, 216, 0.04);
color: #CE93D8;
}
.p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active {
background: rgba(206, 147, 216, 0.16);
color: #CE93D8;
}
.p-splitbutton.p-button-help.p-button-text > .p-button {
background-color: transparent;
color: #CE93D8;
border-color: transparent;
}
.p-splitbutton.p-button-help.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover {
background: rgba(206, 147, 216, 0.04);
border-color: transparent;
color: #CE93D8;
}
.p-splitbutton.p-button-help.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active {
background: rgba(206, 147, 216, 0.16);
border-color: transparent;
color: #CE93D8;
}

.p-splitbutton.p-button-danger.p-button-outlined > .p-button {
background-color: transparent;
color: #F48FB1;
border: 1px solid;
}
.p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover {
background: rgba(244, 143, 177, 0.04);
color: #F48FB1;
}
.p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active {
background: rgba(244, 143, 177, 0.16);
color: #F48FB1;
}
.p-splitbutton.p-button-danger.p-button-text > .p-button {
background-color: transparent;
color: #F48FB1;
border-color: transparent;
}
.p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover {
background: rgba(244, 143, 177, 0.04);
border-color: transparent;
color: #F48FB1;
}
.p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active {
background: rgba(244, 143, 177, 0.16);
border-color: transparent;
color: #F48FB1;
}

.p-carousel .p-carousel-content .p-carousel-prev,
.p-carousel .p-carousel-content .p-carousel-next {
width: 2rem;
Expand Down
Loading

0 comments on commit d8ad47c

Please sign in to comment.