mirror of
https://gitlab.dit.htwk-leipzig.de/htwk-software/htwkalender.git
synced 2025-08-11 06:03:50 +02:00
fix:#53 linted formatted frontend files
This commit is contained in:
Elmar Kresse
@@ -2,215 +2,215 @@
|
||||
|
||||
// core
|
||||
.p-autocomplete {
|
||||
display: inline-flex;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.p-autocomplete-loader {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -0.5rem;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -0.5rem;
|
||||
}
|
||||
|
||||
.p-autocomplete-dd .p-autocomplete-input {
|
||||
flex: 1 1 auto;
|
||||
width: 1%;
|
||||
flex: 1 1 auto;
|
||||
width: 1%;
|
||||
}
|
||||
|
||||
.p-autocomplete-dd .p-autocomplete-input,
|
||||
.p-autocomplete-dd .p-autocomplete-multiple-container {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.p-autocomplete-dd .p-autocomplete-dropdown {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0px;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0px;
|
||||
}
|
||||
|
||||
.p-autocomplete .p-autocomplete-panel {
|
||||
min-width: 100%;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.p-autocomplete-panel {
|
||||
position: absolute;
|
||||
overflow: auto;
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
overflow: auto;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.p-autocomplete-items {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.p-autocomplete-item {
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.p-autocomplete-multiple-container {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
cursor: text;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
cursor: text;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.p-autocomplete-token {
|
||||
cursor: default;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
flex: 0 0 auto;
|
||||
cursor: default;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.p-autocomplete-token-icon {
|
||||
cursor: pointer;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.p-autocomplete-input-token {
|
||||
flex: 1 1 auto;
|
||||
display: inline-flex;
|
||||
flex: 1 1 auto;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.p-autocomplete-input-token input {
|
||||
border: 0 none;
|
||||
outline: 0 none;
|
||||
background-color: transparent;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
width: 100%;
|
||||
border: 0 none;
|
||||
outline: 0 none;
|
||||
background-color: transparent;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.p-fluid .p-autocomplete {
|
||||
display: flex;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.p-fluid .p-autocomplete-dd .p-autocomplete-input {
|
||||
width: 1%;
|
||||
width: 1%;
|
||||
}
|
||||
|
||||
// theme
|
||||
.p-autocomplete {
|
||||
.p-autocomplete-loader {
|
||||
right: nth($inputPadding, 2);
|
||||
}
|
||||
|
||||
&.p-autocomplete-dd {
|
||||
.p-autocomplete-loader {
|
||||
right: nth($inputPadding, 2);
|
||||
}
|
||||
|
||||
&.p-autocomplete-dd {
|
||||
.p-autocomplete-loader {
|
||||
right: nth($inputPadding, 2) + $buttonIconOnlyWidth;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.p-disabled):hover {
|
||||
.p-autocomplete-multiple-container {
|
||||
border-color: $inputHoverBorderColor;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.p-disabled).p-focus {
|
||||
.p-autocomplete-multiple-container {
|
||||
@include focused-input();
|
||||
}
|
||||
right: nth($inputPadding, 2) + $buttonIconOnlyWidth;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.p-disabled):hover {
|
||||
.p-autocomplete-multiple-container {
|
||||
padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
|
||||
gap: $inlineSpacing;
|
||||
outline-color: transparent;
|
||||
border-color: $inputHoverBorderColor;
|
||||
}
|
||||
}
|
||||
|
||||
.p-autocomplete-input-token {
|
||||
padding: math.div(nth($inputPadding, 1), 2) 0;
|
||||
&:not(.p-disabled).p-focus {
|
||||
.p-autocomplete-multiple-container {
|
||||
@include focused-input();
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
font-family: var(--font-family);
|
||||
font-feature-settings: var(--font-feature-settings, normal);
|
||||
font-size: $inputTextFontSize;
|
||||
color: $textColor;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.p-autocomplete-multiple-container {
|
||||
padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
|
||||
gap: $inlineSpacing;
|
||||
outline-color: transparent;
|
||||
|
||||
.p-autocomplete-token {
|
||||
padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
|
||||
background: $chipBg;
|
||||
color: $chipTextColor;
|
||||
border-radius: $chipBorderRadius;
|
||||
.p-autocomplete-input-token {
|
||||
padding: math.div(nth($inputPadding, 1), 2) 0;
|
||||
|
||||
.p-autocomplete-token-icon {
|
||||
margin-left: $inlineSpacing;
|
||||
}
|
||||
|
||||
&.p-focus {
|
||||
background: $chipFocusBg;
|
||||
color: $chipFocusTextColor;
|
||||
}
|
||||
}
|
||||
input {
|
||||
font-family: var(--font-family);
|
||||
font-feature-settings: var(--font-feature-settings, normal);
|
||||
font-size: $inputTextFontSize;
|
||||
color: $textColor;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-invalid.p-component > .p-inputtext {
|
||||
@include invalid-input();
|
||||
.p-autocomplete-token {
|
||||
padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
|
||||
background: $chipBg;
|
||||
color: $chipTextColor;
|
||||
border-radius: $chipBorderRadius;
|
||||
|
||||
.p-autocomplete-token-icon {
|
||||
margin-left: $inlineSpacing;
|
||||
}
|
||||
|
||||
&.p-focus {
|
||||
background: $chipFocusBg;
|
||||
color: $chipFocusTextColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-invalid.p-component > .p-inputtext {
|
||||
@include invalid-input();
|
||||
}
|
||||
}
|
||||
|
||||
.p-autocomplete-panel {
|
||||
background: $inputOverlayBg;
|
||||
color: $inputListTextColor;
|
||||
border: $inputOverlayBorder;
|
||||
border-radius: $borderRadius;
|
||||
box-shadow: $inputOverlayShadow;
|
||||
background: $inputOverlayBg;
|
||||
color: $inputListTextColor;
|
||||
border: $inputOverlayBorder;
|
||||
border-radius: $borderRadius;
|
||||
box-shadow: $inputOverlayShadow;
|
||||
|
||||
.p-autocomplete-items {
|
||||
padding: $inputListPadding;
|
||||
.p-autocomplete-items {
|
||||
padding: $inputListPadding;
|
||||
|
||||
.p-autocomplete-item {
|
||||
margin: $inputListItemMargin;
|
||||
padding: $inputListItemPadding;
|
||||
border: $inputListItemBorder;
|
||||
color: $inputListItemTextColor;
|
||||
background: $inputListItemBg;
|
||||
transition: $listItemTransition;
|
||||
border-radius: $inputListItemBorderRadius;
|
||||
.p-autocomplete-item {
|
||||
margin: $inputListItemMargin;
|
||||
padding: $inputListItemPadding;
|
||||
border: $inputListItemBorder;
|
||||
color: $inputListItemTextColor;
|
||||
background: $inputListItemBg;
|
||||
transition: $listItemTransition;
|
||||
border-radius: $inputListItemBorderRadius;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
color: $highlightTextColor;
|
||||
background: $highlightBg;
|
||||
&.p-highlight {
|
||||
color: $highlightTextColor;
|
||||
background: $highlightBg;
|
||||
|
||||
&.p-focus {
|
||||
background: $highlightFocusBg;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.p-highlight):not(.p-disabled) {
|
||||
&.p-focus {
|
||||
color: $inputListItemTextHoverColor;
|
||||
background: $inputListItemHoverBg;
|
||||
}
|
||||
}
|
||||
&.p-focus {
|
||||
background: $highlightFocusBg;
|
||||
}
|
||||
}
|
||||
|
||||
.p-autocomplete-item-group {
|
||||
margin: $submenuHeaderMargin;
|
||||
padding: $submenuHeaderPadding;
|
||||
color: $submenuHeaderTextColor;
|
||||
background: $submenuHeaderBg;
|
||||
font-weight: $submenuHeaderFontWeight;
|
||||
&:not(.p-highlight):not(.p-disabled) {
|
||||
&.p-focus {
|
||||
color: $inputListItemTextHoverColor;
|
||||
background: $inputListItemHoverBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-autocomplete-item-group {
|
||||
margin: $submenuHeaderMargin;
|
||||
padding: $submenuHeaderPadding;
|
||||
color: $submenuHeaderTextColor;
|
||||
background: $submenuHeaderBg;
|
||||
font-weight: $submenuHeaderFontWeight;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,408 +1,408 @@
|
||||
// core
|
||||
.p-calendar {
|
||||
display: inline-flex;
|
||||
max-width: 100%;
|
||||
display: inline-flex;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.p-calendar .p-inputtext {
|
||||
flex: 1 1 auto;
|
||||
width: 1%;
|
||||
flex: 1 1 auto;
|
||||
width: 1%;
|
||||
}
|
||||
|
||||
.p-calendar-w-btn .p-inputtext {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.p-calendar-w-btn .p-datepicker-trigger {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
.p-calendar .p-datepicker-trigger-icon {
|
||||
cursor: pointer;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Fluid */
|
||||
.p-fluid .p-calendar {
|
||||
display: flex;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.p-fluid .p-calendar .p-inputtext {
|
||||
width: 1%;
|
||||
width: 1%;
|
||||
}
|
||||
|
||||
/* Datepicker */
|
||||
.p-calendar .p-datepicker {
|
||||
min-width: 100%;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.p-datepicker {
|
||||
width: auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.p-datepicker-inline {
|
||||
display: inline-block;
|
||||
overflow-x: auto;
|
||||
display: inline-block;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.p-datepicker-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.p-datepicker-header .p-datepicker-title {
|
||||
margin: 0 auto;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.p-datepicker-prev,
|
||||
.p-datepicker-next {
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Multiple Month DatePicker */
|
||||
.p-datepicker-multiple-month .p-datepicker-group-container {
|
||||
display: flex;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group {
|
||||
flex: 1 1 auto;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
/* DatePicker Table */
|
||||
.p-datepicker table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.p-datepicker td > span {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Month Picker */
|
||||
.p-monthpicker-month {
|
||||
width: 33.3%;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
width: 33.3%;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Year Picker */
|
||||
.p-yearpicker-year {
|
||||
width: 50%;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
width: 50%;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Button Bar */
|
||||
.p-datepicker-buttonbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Time Picker */
|
||||
.p-timepicker {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.p-timepicker button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.p-timepicker > div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Touch UI */
|
||||
.p-datepicker-touch-ui,
|
||||
.p-calendar .p-datepicker-touch-ui {
|
||||
min-width: 80vw;
|
||||
min-width: 80vw;
|
||||
}
|
||||
|
||||
// theme
|
||||
.p-calendar {
|
||||
&.p-invalid.p-component > .p-inputtext {
|
||||
@include invalid-input();
|
||||
}
|
||||
&.p-invalid.p-component > .p-inputtext {
|
||||
@include invalid-input();
|
||||
}
|
||||
|
||||
&:not(.p-calendar-disabled).p-focus > .p-inputtext {
|
||||
@include focused-input();
|
||||
}
|
||||
&:not(.p-calendar-disabled).p-focus > .p-inputtext {
|
||||
@include focused-input();
|
||||
}
|
||||
}
|
||||
|
||||
.p-datepicker {
|
||||
padding: $calendarPadding;
|
||||
background: $calendarInlineBg;
|
||||
color: $calendarTextColor;
|
||||
border: $calendarBorder;
|
||||
border-radius: $borderRadius;
|
||||
padding: $calendarPadding;
|
||||
background: $calendarInlineBg;
|
||||
color: $calendarTextColor;
|
||||
border: $calendarBorder;
|
||||
border-radius: $borderRadius;
|
||||
|
||||
&:not(.p-datepicker-inline) {
|
||||
background: $calendarBg;
|
||||
border: $calendarOverlayBorder;
|
||||
box-shadow: $inputOverlayShadow;
|
||||
|
||||
.p-datepicker-header {
|
||||
background: $calendarHeaderBg;
|
||||
}
|
||||
}
|
||||
&:not(.p-datepicker-inline) {
|
||||
background: $calendarBg;
|
||||
border: $calendarOverlayBorder;
|
||||
box-shadow: $inputOverlayShadow;
|
||||
|
||||
.p-datepicker-header {
|
||||
padding: $calendarHeaderPadding;
|
||||
background: $calendarHeaderBg;
|
||||
}
|
||||
}
|
||||
|
||||
.p-datepicker-header {
|
||||
padding: $calendarHeaderPadding;
|
||||
color: $calendarHeaderTextColor;
|
||||
background: $calendarInlineHeaderBg;
|
||||
font-weight: $calendarHeaderFontWeight;
|
||||
margin: $inputListHeaderMargin;
|
||||
border-bottom: $calendarHeaderBorder;
|
||||
border-top-right-radius: $borderRadius;
|
||||
border-top-left-radius: $borderRadius;
|
||||
|
||||
.p-datepicker-prev,
|
||||
.p-datepicker-next {
|
||||
@include action-icon();
|
||||
}
|
||||
|
||||
.p-datepicker-title {
|
||||
line-height: $actionIconHeight;
|
||||
|
||||
.p-datepicker-year,
|
||||
.p-datepicker-month {
|
||||
color: $calendarHeaderTextColor;
|
||||
background: $calendarInlineHeaderBg;
|
||||
transition: $actionIconTransition;
|
||||
font-weight: $calendarHeaderFontWeight;
|
||||
margin: $inputListHeaderMargin;
|
||||
border-bottom: $calendarHeaderBorder;
|
||||
border-top-right-radius: $borderRadius;
|
||||
border-top-left-radius: $borderRadius;
|
||||
padding: $calendarHeaderCellPadding;
|
||||
|
||||
.p-datepicker-prev,
|
||||
.p-datepicker-next {
|
||||
@include action-icon();
|
||||
&:enabled:hover {
|
||||
color: $calendarMonthYearHeaderHoverTextColor;
|
||||
}
|
||||
}
|
||||
|
||||
.p-datepicker-title {
|
||||
line-height: $actionIconHeight;
|
||||
.p-datepicker-month {
|
||||
margin-right: $inlineSpacing;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-datepicker-year,
|
||||
.p-datepicker-month {
|
||||
color: $calendarHeaderTextColor;
|
||||
transition: $actionIconTransition;
|
||||
font-weight: $calendarHeaderFontWeight;
|
||||
padding: $calendarHeaderCellPadding;
|
||||
table {
|
||||
font-size: $fontSize;
|
||||
margin: $calendarTableMargin;
|
||||
|
||||
&:enabled:hover {
|
||||
color: $calendarMonthYearHeaderHoverTextColor;
|
||||
}
|
||||
}
|
||||
th {
|
||||
padding: $calendarHeaderCellPadding;
|
||||
|
||||
.p-datepicker-month {
|
||||
margin-right: $inlineSpacing;
|
||||
}
|
||||
}
|
||||
> span {
|
||||
width: $calendarCellDateWidth;
|
||||
height: $calendarCellDateHeight;
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
font-size: $fontSize;
|
||||
margin: $calendarTableMargin;
|
||||
td {
|
||||
padding: $calendarCellDatePadding;
|
||||
|
||||
th {
|
||||
padding: $calendarHeaderCellPadding;
|
||||
> span {
|
||||
width: $calendarCellDateWidth;
|
||||
height: $calendarCellDateHeight;
|
||||
border-radius: $calendarCellDateBorderRadius;
|
||||
transition: $listItemTransition;
|
||||
border: $calendarCellDateBorder;
|
||||
outline-color: transparent;
|
||||
|
||||
> span {
|
||||
width: $calendarCellDateWidth;
|
||||
height: $calendarCellDateHeight;
|
||||
}
|
||||
&.p-highlight {
|
||||
color: $highlightTextColor;
|
||||
background: $highlightBg;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: $calendarCellDatePadding;
|
||||
|
||||
> span {
|
||||
width: $calendarCellDateWidth;
|
||||
height: $calendarCellDateHeight;
|
||||
border-radius: $calendarCellDateBorderRadius;
|
||||
transition: $listItemTransition;
|
||||
border: $calendarCellDateBorder;
|
||||
outline-color: transparent;
|
||||
|
||||
&.p-highlight {
|
||||
color: $highlightTextColor;
|
||||
background: $highlightBg;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@include focused();
|
||||
}
|
||||
}
|
||||
|
||||
&.p-datepicker-today {
|
||||
> span {
|
||||
background: $calendarCellDateTodayBg;
|
||||
color: $calendarCellDateTodayTextColor;
|
||||
border-color: $calendarCellDateTodayBorderColor;
|
||||
|
||||
&.p-highlight {
|
||||
color: $highlightTextColor;
|
||||
background: $highlightBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:focus {
|
||||
@include focused();
|
||||
}
|
||||
}
|
||||
|
||||
&.p-datepicker-today {
|
||||
> span {
|
||||
background: $calendarCellDateTodayBg;
|
||||
color: $calendarCellDateTodayTextColor;
|
||||
border-color: $calendarCellDateTodayBorderColor;
|
||||
|
||||
&.p-highlight {
|
||||
color: $highlightTextColor;
|
||||
background: $highlightBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-datepicker-buttonbar {
|
||||
padding: $calendarButtonBarPadding;
|
||||
border-top: $divider;
|
||||
|
||||
.p-button {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.p-timepicker {
|
||||
border-top: $divider;
|
||||
padding: $calendarTimePickerPadding;
|
||||
|
||||
button {
|
||||
@include action-icon();
|
||||
|
||||
&:last-child {
|
||||
margin-top: 0.2em;
|
||||
}
|
||||
}
|
||||
|
||||
.p-datepicker-buttonbar {
|
||||
padding: $calendarButtonBarPadding;
|
||||
border-top: $divider;
|
||||
|
||||
.p-button {
|
||||
width: auto;
|
||||
}
|
||||
span {
|
||||
font-size: $calendarTimePickerTimeFontSize;
|
||||
}
|
||||
|
||||
> div {
|
||||
padding: $calendarTimePickerElementPadding;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-datepicker-timeonly {
|
||||
.p-timepicker {
|
||||
border-top: $divider;
|
||||
padding: $calendarTimePickerPadding;
|
||||
|
||||
button {
|
||||
@include action-icon();
|
||||
|
||||
&:last-child {
|
||||
margin-top: 0.2em;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: $calendarTimePickerTimeFontSize;
|
||||
}
|
||||
|
||||
> div {
|
||||
padding: $calendarTimePickerElementPadding;
|
||||
}
|
||||
border-top: 0 none;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-datepicker-timeonly {
|
||||
.p-timepicker {
|
||||
border-top: 0 none;
|
||||
.p-monthpicker {
|
||||
margin: $calendarTableMargin;
|
||||
|
||||
.p-monthpicker-month {
|
||||
padding: $calendarCellDatePadding;
|
||||
transition: $listItemTransition;
|
||||
border-radius: $borderRadius;
|
||||
|
||||
&.p-highlight {
|
||||
color: $highlightTextColor;
|
||||
background: $highlightBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-yearpicker {
|
||||
margin: $calendarTableMargin;
|
||||
|
||||
.p-yearpicker-year {
|
||||
padding: $calendarCellDatePadding;
|
||||
transition: $listItemTransition;
|
||||
border-radius: $borderRadius;
|
||||
|
||||
&.p-highlight {
|
||||
color: $highlightTextColor;
|
||||
background: $highlightBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-datepicker-multiple-month {
|
||||
.p-datepicker-group {
|
||||
border-left: $divider;
|
||||
padding-right: $calendarPadding;
|
||||
padding-left: $calendarPadding;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
|
||||
&:first-child {
|
||||
padding-left: 0;
|
||||
border-left: 0 none;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-datepicker-mobile {
|
||||
table {
|
||||
th,
|
||||
td {
|
||||
padding: $calendarCellDatePaddingSM;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.p-disabled) {
|
||||
table {
|
||||
td {
|
||||
span:not(.p-highlight):not(.p-disabled) {
|
||||
outline-color: transparent;
|
||||
|
||||
&:hover {
|
||||
background: $calendarCellDateHoverBg;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@include focused();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-monthpicker {
|
||||
margin: $calendarTableMargin;
|
||||
.p-monthpicker-month {
|
||||
&:not(.p-disabled) {
|
||||
outline-color: transparent;
|
||||
|
||||
.p-monthpicker-month {
|
||||
padding: $calendarCellDatePadding;
|
||||
transition: $listItemTransition;
|
||||
border-radius: $borderRadius;
|
||||
&:not(.p-highlight):hover {
|
||||
background: $calendarCellDateHoverBg;
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
color: $highlightTextColor;
|
||||
background: $highlightBg;
|
||||
}
|
||||
&:focus {
|
||||
@include focused();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-yearpicker {
|
||||
margin: $calendarTableMargin;
|
||||
.p-yearpicker-year {
|
||||
&:not(.p-disabled) {
|
||||
outline-color: transparent;
|
||||
|
||||
.p-yearpicker-year {
|
||||
padding: $calendarCellDatePadding;
|
||||
transition: $listItemTransition;
|
||||
border-radius: $borderRadius;
|
||||
&:not(.p-highlight):hover {
|
||||
background: $calendarCellDateHoverBg;
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
color: $highlightTextColor;
|
||||
background: $highlightBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-datepicker-multiple-month {
|
||||
.p-datepicker-group {
|
||||
border-left: $divider;
|
||||
padding-right: $calendarPadding;
|
||||
padding-left: $calendarPadding;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
|
||||
&:first-child {
|
||||
padding-left: 0;
|
||||
border-left: 0 none;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-datepicker-mobile {
|
||||
table {
|
||||
th,
|
||||
td {
|
||||
padding: $calendarCellDatePaddingSM;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.p-disabled) {
|
||||
table {
|
||||
td {
|
||||
span:not(.p-highlight):not(.p-disabled) {
|
||||
outline-color: transparent;
|
||||
|
||||
&:hover {
|
||||
background: $calendarCellDateHoverBg;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@include focused();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-monthpicker {
|
||||
.p-monthpicker-month {
|
||||
&:not(.p-disabled) {
|
||||
outline-color: transparent;
|
||||
|
||||
&:not(.p-highlight):hover {
|
||||
background: $calendarCellDateHoverBg;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@include focused();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-yearpicker {
|
||||
.p-yearpicker-year {
|
||||
&:not(.p-disabled) {
|
||||
outline-color: transparent;
|
||||
|
||||
&:not(.p-highlight):hover {
|
||||
background: $calendarCellDateHoverBg;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@include focused();
|
||||
}
|
||||
}
|
||||
}
|
||||
&:focus {
|
||||
@include focused();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,199 +1,199 @@
|
||||
// core
|
||||
.p-cascadeselect {
|
||||
display: inline-flex;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
display: inline-flex;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.p-cascadeselect-trigger {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.p-cascadeselect-label {
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
flex: 1 1 auto;
|
||||
width: 1%;
|
||||
text-overflow: ellipsis;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
flex: 1 1 auto;
|
||||
width: 1%;
|
||||
text-overflow: ellipsis;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.p-cascadeselect-label-empty {
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.p-cascadeselect .p-cascadeselect-panel {
|
||||
min-width: 100%;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.p-cascadeselect-item {
|
||||
cursor: pointer;
|
||||
font-weight: normal;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
font-weight: normal;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.p-cascadeselect-item-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.p-cascadeselect-group-icon {
|
||||
margin-left: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.p-cascadeselect-items {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
min-width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.p-fluid .p-cascadeselect {
|
||||
display: flex;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.p-fluid .p-cascadeselect .p-cascadeselect-label {
|
||||
width: 1%;
|
||||
width: 1%;
|
||||
}
|
||||
|
||||
.p-cascadeselect-sublist {
|
||||
position: absolute;
|
||||
min-width: 100%;
|
||||
z-index: 1;
|
||||
display: none;
|
||||
position: absolute;
|
||||
min-width: 100%;
|
||||
z-index: 1;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.p-cascadeselect-item-active {
|
||||
overflow: visible;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.p-cascadeselect-item-active > .p-cascadeselect-sublist {
|
||||
display: block;
|
||||
left: 100%;
|
||||
top: 0;
|
||||
display: block;
|
||||
left: 100%;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.p-cascadeselect-enter-from,
|
||||
.p-cascadeselect-leave-active {
|
||||
opacity: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.p-cascadeselect-enter-active {
|
||||
transition: opacity 150ms;
|
||||
transition: opacity 150ms;
|
||||
}
|
||||
|
||||
// theme
|
||||
.p-cascadeselect {
|
||||
background: $inputBg;
|
||||
border: $inputBorder;
|
||||
transition: $formElementTransition;
|
||||
border-radius: $borderRadius;
|
||||
outline-color: transparent;
|
||||
background: $inputBg;
|
||||
border: $inputBorder;
|
||||
transition: $formElementTransition;
|
||||
border-radius: $borderRadius;
|
||||
outline-color: transparent;
|
||||
|
||||
&:not(.p-disabled):hover {
|
||||
border-color: $inputHoverBorderColor;
|
||||
&:not(.p-disabled):hover {
|
||||
border-color: $inputHoverBorderColor;
|
||||
}
|
||||
|
||||
&:not(.p-disabled).p-focus {
|
||||
@include focused-input();
|
||||
}
|
||||
|
||||
&.p-variant-filled {
|
||||
background-color: $inputFilledBg;
|
||||
|
||||
&:enabled:hover {
|
||||
background-color: $inputFilledHoverBg;
|
||||
}
|
||||
|
||||
&:not(.p-disabled).p-focus {
|
||||
@include focused-input();
|
||||
&:enabled:focus {
|
||||
background-color: $inputFilledFocusBg;
|
||||
}
|
||||
}
|
||||
|
||||
.p-cascadeselect-label {
|
||||
background: transparent;
|
||||
border: 0 none;
|
||||
padding: $inputPadding;
|
||||
|
||||
&.p-placeholder {
|
||||
color: $inputPlaceholderTextColor;
|
||||
}
|
||||
|
||||
&.p-variant-filled {
|
||||
background-color: $inputFilledBg;
|
||||
|
||||
&:enabled:hover {
|
||||
background-color: $inputFilledHoverBg;
|
||||
}
|
||||
|
||||
&:enabled:focus {
|
||||
background-color: $inputFilledFocusBg;
|
||||
}
|
||||
&:enabled:focus {
|
||||
outline: 0 none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.p-cascadeselect-label {
|
||||
background: transparent;
|
||||
border: 0 none;
|
||||
padding: $inputPadding;
|
||||
.p-cascadeselect-trigger {
|
||||
background: transparent;
|
||||
color: $inputIconColor;
|
||||
width: $inputGroupAddOnMinWidth;
|
||||
border-top-right-radius: $borderRadius;
|
||||
border-bottom-right-radius: $borderRadius;
|
||||
}
|
||||
|
||||
&.p-placeholder {
|
||||
color: $inputPlaceholderTextColor;
|
||||
}
|
||||
|
||||
&:enabled:focus {
|
||||
outline: 0 none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.p-cascadeselect-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-invalid.p-component {
|
||||
@include invalid-input();
|
||||
}
|
||||
}
|
||||
|
||||
.p-cascadeselect-panel {
|
||||
background: $inputOverlayBg;
|
||||
color: $inputListTextColor;
|
||||
border: $inputOverlayBorder;
|
||||
border-radius: $borderRadius;
|
||||
box-shadow: $inputOverlayShadow;
|
||||
background: $inputOverlayBg;
|
||||
color: $inputListTextColor;
|
||||
border: $inputOverlayBorder;
|
||||
border-radius: $borderRadius;
|
||||
box-shadow: $inputOverlayShadow;
|
||||
|
||||
.p-cascadeselect-items {
|
||||
padding: $inputListPadding;
|
||||
.p-cascadeselect-items {
|
||||
padding: $inputListPadding;
|
||||
|
||||
.p-cascadeselect-item {
|
||||
margin: $inputListItemMargin;
|
||||
border: $inputListItemBorder;
|
||||
color: $inputListItemTextColor;
|
||||
background: $inputListItemBg;
|
||||
transition: $listItemTransition;
|
||||
border-radius: $inputListItemBorderRadius;
|
||||
.p-cascadeselect-item {
|
||||
margin: $inputListItemMargin;
|
||||
border: $inputListItemBorder;
|
||||
color: $inputListItemTextColor;
|
||||
background: $inputListItemBg;
|
||||
transition: $listItemTransition;
|
||||
border-radius: $inputListItemBorderRadius;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
color: $highlightTextColor;
|
||||
background: $highlightBg;
|
||||
&.p-highlight {
|
||||
color: $highlightTextColor;
|
||||
background: $highlightBg;
|
||||
|
||||
&.p-focus {
|
||||
background: $highlightFocusBg;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.p-highlight):not(.p-disabled) {
|
||||
&.p-focus {
|
||||
color: $inputListItemTextHoverColor;
|
||||
background: $inputListItemHoverBg;
|
||||
}
|
||||
}
|
||||
|
||||
.p-cascadeselect-item-content {
|
||||
padding: $inputListItemPadding;
|
||||
}
|
||||
|
||||
.p-cascadeselect-group-icon {
|
||||
font-size: $menuitemSubmenuIconFontSize;
|
||||
}
|
||||
&.p-focus {
|
||||
background: $highlightFocusBg;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.p-highlight):not(.p-disabled) {
|
||||
&.p-focus {
|
||||
color: $inputListItemTextHoverColor;
|
||||
background: $inputListItemHoverBg;
|
||||
}
|
||||
}
|
||||
|
||||
.p-cascadeselect-item-content {
|
||||
padding: $inputListItemPadding;
|
||||
}
|
||||
|
||||
.p-cascadeselect-group-icon {
|
||||
font-size: $menuitemSubmenuIconFontSize;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,158 +1,158 @@
|
||||
// core
|
||||
.p-checkbox {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
user-select: none;
|
||||
vertical-align: bottom;
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
user-select: none;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.p-checkbox-input {
|
||||
cursor: pointer;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.p-checkbox-box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
// theme
|
||||
.p-checkbox {
|
||||
width: $checkboxWidth;
|
||||
height: $checkboxHeight;
|
||||
|
||||
.p-checkbox-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;
|
||||
border: $checkboxBorder;
|
||||
border-radius: $borderRadius;
|
||||
}
|
||||
|
||||
.p-checkbox-box {
|
||||
border: $checkboxBorder;
|
||||
background: $inputBg;
|
||||
width: $checkboxWidth;
|
||||
height: $checkboxHeight;
|
||||
color: $textColor;
|
||||
border-radius: $borderRadius;
|
||||
transition: $formElementTransition;
|
||||
outline-color: transparent;
|
||||
|
||||
.p-checkbox-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;
|
||||
border: $checkboxBorder;
|
||||
border-radius: $borderRadius;
|
||||
.p-checkbox-icon {
|
||||
transition-duration: $transitionDuration;
|
||||
color: $checkboxIconActiveColor;
|
||||
font-size: $checkboxIconFontSize;
|
||||
|
||||
&.p-icon {
|
||||
width: $checkboxIconFontSize;
|
||||
height: $checkboxIconFontSize;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
.p-checkbox-box {
|
||||
border-color: $checkboxActiveBorderColor;
|
||||
background: $checkboxActiveBg;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.p-disabled) {
|
||||
&:has(.p-checkbox-input:hover) {
|
||||
.p-checkbox-box {
|
||||
border-color: $inputHoverBorderColor;
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
.p-checkbox-box {
|
||||
border-color: $checkboxActiveHoverBorderColor;
|
||||
background: $checkboxActiveHoverBg;
|
||||
color: $checkboxIconActiveHoverColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:has(.p-checkbox-input:focus-visible) {
|
||||
.p-checkbox-box {
|
||||
@include focused-input();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-invalid > .p-checkbox-box {
|
||||
@include invalid-input();
|
||||
}
|
||||
|
||||
&.p-variant-filled {
|
||||
.p-checkbox-box {
|
||||
border: $checkboxBorder;
|
||||
background: $inputBg;
|
||||
width: $checkboxWidth;
|
||||
height: $checkboxHeight;
|
||||
color: $textColor;
|
||||
border-radius: $borderRadius;
|
||||
transition: $formElementTransition;
|
||||
outline-color: transparent;
|
||||
|
||||
.p-checkbox-icon {
|
||||
transition-duration: $transitionDuration;
|
||||
color: $checkboxIconActiveColor;
|
||||
font-size: $checkboxIconFontSize;
|
||||
|
||||
&.p-icon {
|
||||
width: $checkboxIconFontSize;
|
||||
height: $checkboxIconFontSize;
|
||||
}
|
||||
}
|
||||
background-color: $inputFilledBg;
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
.p-checkbox-box {
|
||||
border-color: $checkboxActiveBorderColor;
|
||||
background: $checkboxActiveBg;
|
||||
}
|
||||
.p-checkbox-box {
|
||||
background: $checkboxActiveBg;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.p-disabled) {
|
||||
&:has(.p-checkbox-input:hover) {
|
||||
.p-checkbox-box {
|
||||
border-color: $inputHoverBorderColor;
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
.p-checkbox-box {
|
||||
border-color: $checkboxActiveHoverBorderColor;
|
||||
background: $checkboxActiveHoverBg;
|
||||
color: $checkboxIconActiveHoverColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:has(.p-checkbox-input:focus-visible) {
|
||||
.p-checkbox-box {
|
||||
@include focused-input();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-invalid > .p-checkbox-box {
|
||||
@include invalid-input();
|
||||
}
|
||||
|
||||
&.p-variant-filled {
|
||||
&:has(.p-checkbox-input:hover) {
|
||||
.p-checkbox-box {
|
||||
background-color: $inputFilledBg;
|
||||
background-color: $inputFilledHoverBg;
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
.p-checkbox-box {
|
||||
background: $checkboxActiveBg;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.p-disabled) {
|
||||
&:has(.p-checkbox-input:hover) {
|
||||
.p-checkbox-box {
|
||||
background-color: $inputFilledHoverBg;
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
.p-checkbox-box {
|
||||
background: $checkboxActiveHoverBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
.p-checkbox-box {
|
||||
background: $checkboxActiveHoverBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-input-filled {
|
||||
.p-checkbox {
|
||||
.p-checkbox {
|
||||
.p-checkbox-box {
|
||||
background-color: $inputFilledBg;
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
.p-checkbox-box {
|
||||
background: $checkboxActiveBg;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.p-disabled) {
|
||||
&:has(.p-checkbox-input:hover) {
|
||||
.p-checkbox-box {
|
||||
background-color: $inputFilledBg;
|
||||
background-color: $inputFilledHoverBg;
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
.p-checkbox-box {
|
||||
background: $checkboxActiveBg;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.p-disabled) {
|
||||
&:has(.p-checkbox-input:hover) {
|
||||
.p-checkbox-box {
|
||||
background-color: $inputFilledHoverBg;
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
.p-checkbox-box {
|
||||
background: $checkboxActiveHoverBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
.p-checkbox-box {
|
||||
background: $checkboxActiveHoverBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@if ($highlightBg == $checkboxActiveBg) {
|
||||
.p-highlight {
|
||||
.p-checkbox {
|
||||
.p-checkbox-box {
|
||||
border-color: $checkboxIconActiveColor;
|
||||
}
|
||||
}
|
||||
.p-highlight {
|
||||
.p-checkbox {
|
||||
.p-checkbox-box {
|
||||
border-color: $checkboxIconActiveColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,101 +2,101 @@
|
||||
|
||||
// core
|
||||
.p-chips {
|
||||
display: inline-flex;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.p-chips-multiple-container {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
cursor: text;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
cursor: text;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.p-chips-token {
|
||||
cursor: default;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
flex: 0 0 auto;
|
||||
cursor: default;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.p-chips-input-token {
|
||||
flex: 1 1 auto;
|
||||
display: inline-flex;
|
||||
flex: 1 1 auto;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.p-chips-token-icon {
|
||||
cursor: pointer;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.p-chips-input-token input {
|
||||
border: 0 none;
|
||||
outline: 0 none;
|
||||
background-color: transparent;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
width: 100%;
|
||||
border: 0 none;
|
||||
outline: 0 none;
|
||||
background-color: transparent;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.p-fluid .p-chips {
|
||||
display: flex;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
// theme
|
||||
.p-chips {
|
||||
&:not(.p-disabled):hover {
|
||||
.p-chips-multiple-container {
|
||||
border-color: $inputHoverBorderColor;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.p-disabled).p-focus {
|
||||
.p-chips-multiple-container {
|
||||
@include focused-input();
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.p-disabled):hover {
|
||||
.p-chips-multiple-container {
|
||||
padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
|
||||
outline-color: transparent;
|
||||
border-color: $inputHoverBorderColor;
|
||||
}
|
||||
}
|
||||
|
||||
.p-chips-token {
|
||||
padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
|
||||
margin-right: $inlineSpacing;
|
||||
background: $chipBg;
|
||||
color: $chipTextColor;
|
||||
border-radius: $chipBorderRadius;
|
||||
&:not(.p-disabled).p-focus {
|
||||
.p-chips-multiple-container {
|
||||
@include focused-input();
|
||||
}
|
||||
}
|
||||
|
||||
&.p-focus {
|
||||
background: $chipFocusBg;
|
||||
color: $chipFocusTextColor;
|
||||
}
|
||||
.p-chips-multiple-container {
|
||||
padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
|
||||
outline-color: transparent;
|
||||
|
||||
.p-chips-token-icon {
|
||||
margin-left: $inlineSpacing;
|
||||
}
|
||||
}
|
||||
.p-chips-token {
|
||||
padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
|
||||
margin-right: $inlineSpacing;
|
||||
background: $chipBg;
|
||||
color: $chipTextColor;
|
||||
border-radius: $chipBorderRadius;
|
||||
|
||||
.p-chips-input-token {
|
||||
padding: math.div(nth($inputPadding, 1), 2) 0;
|
||||
&.p-focus {
|
||||
background: $chipFocusBg;
|
||||
color: $chipFocusTextColor;
|
||||
}
|
||||
|
||||
input {
|
||||
font-family: var(--font-family);
|
||||
font-feature-settings: var(--font-feature-settings, normal);
|
||||
font-size: $inputTextFontSize;
|
||||
color: $textColor;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.p-chips-token-icon {
|
||||
margin-left: $inlineSpacing;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-invalid.p-component > .p-inputtext {
|
||||
@include invalid-input();
|
||||
.p-chips-input-token {
|
||||
padding: math.div(nth($inputPadding, 1), 2) 0;
|
||||
|
||||
input {
|
||||
font-family: var(--font-family);
|
||||
font-feature-settings: var(--font-feature-settings, normal);
|
||||
font-size: $inputTextFontSize;
|
||||
color: $textColor;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-invalid.p-component > .p-inputtext {
|
||||
@include invalid-input();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,28 +1,38 @@
|
||||
// core
|
||||
.p-colorpicker-panel .p-colorpicker-color {
|
||||
background: linear-gradient(to top, #000 0%, rgb(0 0 0 / 0) 100%), linear-gradient(to right, #fff 0%, rgb(255 255 255 / 0) 100%)
|
||||
background: linear-gradient(to top, #000 0%, rgb(0 0 0 / 0) 100%),
|
||||
linear-gradient(to right, #fff 0%, rgb(255 255 255 / 0) 100%);
|
||||
}
|
||||
|
||||
.p-colorpicker-panel .p-colorpicker-hue {
|
||||
background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red)
|
||||
background: linear-gradient(
|
||||
0deg,
|
||||
red 0,
|
||||
#ff0 17%,
|
||||
#0f0 33%,
|
||||
#0ff 50%,
|
||||
#00f 67%,
|
||||
#f0f 83%,
|
||||
red
|
||||
);
|
||||
}
|
||||
|
||||
// theme
|
||||
.p-colorpicker-preview {
|
||||
width: $colorPickerPreviewWidth;
|
||||
height: $colorPickerPreviewHeight;
|
||||
.p-colorpicker-preview {
|
||||
width: $colorPickerPreviewWidth;
|
||||
height: $colorPickerPreviewHeight;
|
||||
}
|
||||
|
||||
.p-colorpicker-panel {
|
||||
background: $colorPickerBg;
|
||||
border: $colorPickerBorder;
|
||||
background: $colorPickerBg;
|
||||
border: $colorPickerBorder;
|
||||
|
||||
.p-colorpicker-color-handle,
|
||||
.p-colorpicker-hue-handle {
|
||||
border-color: $colorPickerHandleColor;
|
||||
}
|
||||
.p-colorpicker-color-handle,
|
||||
.p-colorpicker-hue-handle {
|
||||
border-color: $colorPickerHandleColor;
|
||||
}
|
||||
}
|
||||
|
||||
.p-colorpicker-overlay-panel {
|
||||
box-shadow: $inputOverlayShadow;
|
||||
}
|
||||
box-shadow: $inputOverlayShadow;
|
||||
}
|
||||
|
||||
@@ -1,252 +1,252 @@
|
||||
// core
|
||||
.p-dropdown {
|
||||
display: inline-flex;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
user-select: none;
|
||||
display: inline-flex;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.p-dropdown-clear-icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -0.5rem;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -0.5rem;
|
||||
}
|
||||
|
||||
.p-dropdown-trigger {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.p-dropdown-label {
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
flex: 1 1 auto;
|
||||
width: 1%;
|
||||
text-overflow: ellipsis;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
flex: 1 1 auto;
|
||||
width: 1%;
|
||||
text-overflow: ellipsis;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.p-dropdown-label-empty {
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
input.p-dropdown-label {
|
||||
cursor: default;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.p-dropdown .p-dropdown-panel {
|
||||
min-width: 100%;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.p-dropdown-panel {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.p-dropdown-items-wrapper {
|
||||
overflow: auto;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.p-dropdown-item {
|
||||
cursor: pointer;
|
||||
font-weight: normal;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
font-weight: normal;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.p-dropdown-item-group {
|
||||
cursor: auto;
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.p-dropdown-items {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.p-dropdown-filter {
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.p-dropdown-filter-container {
|
||||
position: relative;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.p-dropdown-filter-icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -0.5rem;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -0.5rem;
|
||||
}
|
||||
|
||||
.p-fluid .p-dropdown {
|
||||
display: flex;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.p-fluid .p-dropdown .p-dropdown-label {
|
||||
width: 1%;
|
||||
width: 1%;
|
||||
}
|
||||
|
||||
// theme
|
||||
.p-dropdown {
|
||||
background: $inputBg;
|
||||
border: $inputBorder;
|
||||
transition: $formElementTransition;
|
||||
border-radius: $borderRadius;
|
||||
outline-color: transparent;
|
||||
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 {
|
||||
border-color: $inputHoverBorderColor;
|
||||
background-color: $inputFilledHoverBg;
|
||||
}
|
||||
|
||||
&: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-inputtext {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-dropdown-clearable {
|
||||
.p-dropdown-label {
|
||||
padding-right: nth($inputPadding, 2) + $primeIconFontSize;
|
||||
}
|
||||
background-color: $inputFilledFocusBg;
|
||||
|
||||
.p-inputtext {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-dropdown-clearable {
|
||||
.p-dropdown-label {
|
||||
background: transparent;
|
||||
border: 0 none;
|
||||
padding-right: nth($inputPadding, 2) + $primeIconFontSize;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-placeholder {
|
||||
color: $inputPlaceholderTextColor;
|
||||
}
|
||||
.p-dropdown-label {
|
||||
background: transparent;
|
||||
border: 0 none;
|
||||
|
||||
&:focus,
|
||||
&:enabled:focus {
|
||||
outline: 0 none;
|
||||
box-shadow: none;
|
||||
}
|
||||
&.p-placeholder {
|
||||
color: $inputPlaceholderTextColor;
|
||||
}
|
||||
|
||||
.p-dropdown-trigger {
|
||||
background: transparent;
|
||||
color: $inputIconColor;
|
||||
width: $inputGroupAddOnMinWidth;
|
||||
border-top-right-radius: $borderRadius;
|
||||
border-bottom-right-radius: $borderRadius;
|
||||
&:focus,
|
||||
&:enabled:focus {
|
||||
outline: 0 none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.p-dropdown-clear-icon {
|
||||
color: $inputIconColor;
|
||||
right: $inputGroupAddOnMinWidth;
|
||||
}
|
||||
.p-dropdown-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-dropdown-clear-icon {
|
||||
color: $inputIconColor;
|
||||
right: $inputGroupAddOnMinWidth;
|
||||
}
|
||||
|
||||
&.p-invalid.p-component {
|
||||
@include invalid-input();
|
||||
}
|
||||
}
|
||||
|
||||
.p-dropdown-panel {
|
||||
background: $inputOverlayBg;
|
||||
color: $inputListTextColor;
|
||||
border: $inputOverlayBorder;
|
||||
border-radius: $borderRadius;
|
||||
box-shadow: $inputOverlayShadow;
|
||||
background: $inputOverlayBg;
|
||||
color: $inputListTextColor;
|
||||
border: $inputOverlayBorder;
|
||||
border-radius: $borderRadius;
|
||||
box-shadow: $inputOverlayShadow;
|
||||
|
||||
.p-dropdown-header {
|
||||
padding: $inputListHeaderPadding;
|
||||
border-bottom: $inputListHeaderBorder;
|
||||
color: $inputListHeaderTextColor;
|
||||
background: $inputOverlayHeaderBg;
|
||||
margin: $inputListHeaderMargin;
|
||||
border-top-right-radius: $borderRadius;
|
||||
border-top-left-radius: $borderRadius;
|
||||
.p-dropdown-header {
|
||||
padding: $inputListHeaderPadding;
|
||||
border-bottom: $inputListHeaderBorder;
|
||||
color: $inputListHeaderTextColor;
|
||||
background: $inputOverlayHeaderBg;
|
||||
margin: $inputListHeaderMargin;
|
||||
border-top-right-radius: $borderRadius;
|
||||
border-top-left-radius: $borderRadius;
|
||||
|
||||
.p-dropdown-filter {
|
||||
padding-right: nth($inputPadding, 2) + $primeIconFontSize;
|
||||
margin-right: -1 * (nth($inputPadding, 2) + $primeIconFontSize);
|
||||
}
|
||||
|
||||
.p-dropdown-filter-icon {
|
||||
right: nth($inputPadding, 2);
|
||||
color: $inputIconColor;
|
||||
}
|
||||
.p-dropdown-filter {
|
||||
padding-right: nth($inputPadding, 2) + $primeIconFontSize;
|
||||
margin-right: -1 * (nth($inputPadding, 2) + $primeIconFontSize);
|
||||
}
|
||||
|
||||
.p-dropdown-items {
|
||||
padding: $inputListPadding;
|
||||
|
||||
.p-dropdown-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-dropdown-check-icon {
|
||||
position: relative;
|
||||
margin-left: -1 * $inlineSpacing;
|
||||
margin-right: $inlineSpacing;
|
||||
}
|
||||
}
|
||||
|
||||
.p-dropdown-item-group {
|
||||
margin: $submenuHeaderMargin;
|
||||
padding: $submenuHeaderPadding;
|
||||
color: $submenuHeaderTextColor;
|
||||
background: $submenuHeaderBg;
|
||||
font-weight: $submenuHeaderFontWeight;
|
||||
}
|
||||
|
||||
.p-dropdown-empty-message {
|
||||
padding: $inputListItemPadding;
|
||||
color: $inputListItemTextColor;
|
||||
background: $inputListItemBg;
|
||||
}
|
||||
.p-dropdown-filter-icon {
|
||||
right: nth($inputPadding, 2);
|
||||
color: $inputIconColor;
|
||||
}
|
||||
}
|
||||
|
||||
.p-dropdown-items {
|
||||
padding: $inputListPadding;
|
||||
|
||||
.p-dropdown-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-dropdown-check-icon {
|
||||
position: relative;
|
||||
margin-left: -1 * $inlineSpacing;
|
||||
margin-right: $inlineSpacing;
|
||||
}
|
||||
}
|
||||
|
||||
.p-dropdown-item-group {
|
||||
margin: $submenuHeaderMargin;
|
||||
padding: $submenuHeaderPadding;
|
||||
color: $submenuHeaderTextColor;
|
||||
background: $submenuHeaderBg;
|
||||
font-weight: $submenuHeaderFontWeight;
|
||||
}
|
||||
|
||||
.p-dropdown-empty-message {
|
||||
padding: $inputListItemPadding;
|
||||
color: $inputListItemTextColor;
|
||||
background: $inputListItemBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,122 +1,122 @@
|
||||
.p-editor-container {
|
||||
.p-editor-toolbar {
|
||||
background: $editorToolbarBg;
|
||||
border-top-right-radius: $borderRadius;
|
||||
border-top-left-radius: $borderRadius;
|
||||
.p-editor-toolbar {
|
||||
background: $editorToolbarBg;
|
||||
border-top-right-radius: $borderRadius;
|
||||
border-top-left-radius: $borderRadius;
|
||||
|
||||
&.ql-snow {
|
||||
border: $editorToolbarBorder;
|
||||
&.ql-snow {
|
||||
border: $editorToolbarBorder;
|
||||
|
||||
.ql-stroke {
|
||||
stroke: $editorToolbarIconColor;
|
||||
}
|
||||
|
||||
.ql-fill {
|
||||
fill: $editorToolbarIconColor;
|
||||
}
|
||||
|
||||
.ql-picker {
|
||||
.ql-picker-label {
|
||||
border: 0 none;
|
||||
color: $editorToolbarIconColor;
|
||||
|
||||
&:hover {
|
||||
color: $editorToolbarIconHoverColor;
|
||||
|
||||
.ql-stroke {
|
||||
stroke: $editorToolbarIconColor;
|
||||
stroke: $editorToolbarIconHoverColor;
|
||||
}
|
||||
|
||||
|
||||
.ql-fill {
|
||||
fill: $editorToolbarIconColor;
|
||||
fill: $editorToolbarIconHoverColor;
|
||||
}
|
||||
|
||||
.ql-picker {
|
||||
.ql-picker-label {
|
||||
border: 0 none;
|
||||
color: $editorToolbarIconColor;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $editorToolbarIconHoverColor;
|
||||
&.ql-expanded {
|
||||
.ql-picker-label {
|
||||
color: $editorToolbarIconHoverColor;
|
||||
|
||||
.ql-stroke {
|
||||
stroke: $editorToolbarIconHoverColor;
|
||||
}
|
||||
|
||||
.ql-fill {
|
||||
fill: $editorToolbarIconHoverColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.ql-expanded {
|
||||
.ql-picker-label {
|
||||
color: $editorToolbarIconHoverColor;
|
||||
|
||||
.ql-stroke {
|
||||
stroke: $editorToolbarIconHoverColor;
|
||||
}
|
||||
|
||||
.ql-fill {
|
||||
fill: $editorToolbarIconHoverColor;
|
||||
}
|
||||
}
|
||||
|
||||
.ql-picker-options {
|
||||
background: $inputOverlayBg;
|
||||
border:$inputOverlayBorder;
|
||||
box-shadow:$inputOverlayShadow;
|
||||
border-radius: $borderRadius;
|
||||
padding: $inputListPadding;
|
||||
|
||||
.ql-picker-item {
|
||||
color: $inputListItemTextColor;
|
||||
|
||||
&:hover {
|
||||
color: $inputListItemTextHoverColor;
|
||||
background: $inputListItemHoverBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.ql-icon-picker) {
|
||||
.ql-picker-item {
|
||||
padding: $inputListItemPadding;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ql-stroke {
|
||||
stroke: $editorToolbarIconHoverColor;
|
||||
}
|
||||
|
||||
.ql-fill {
|
||||
fill: $editorToolbarIconHoverColor;
|
||||
}
|
||||
}
|
||||
|
||||
.ql-picker-options {
|
||||
background: $inputOverlayBg;
|
||||
border: $inputOverlayBorder;
|
||||
box-shadow: $inputOverlayShadow;
|
||||
border-radius: $borderRadius;
|
||||
padding: $inputListPadding;
|
||||
|
||||
.ql-picker-item {
|
||||
color: $inputListItemTextColor;
|
||||
|
||||
&:hover {
|
||||
color: $inputListItemTextHoverColor;
|
||||
background: $inputListItemHoverBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.ql-icon-picker) {
|
||||
.ql-picker-item {
|
||||
padding: $inputListItemPadding;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-editor-content {
|
||||
border-bottom-right-radius: $borderRadius;
|
||||
border-bottom-left-radius: $borderRadius;
|
||||
|
||||
&.ql-snow {
|
||||
border: $editorContentBorder;
|
||||
}
|
||||
|
||||
.p-editor-content {
|
||||
border-bottom-right-radius: $borderRadius;
|
||||
border-bottom-left-radius: $borderRadius;
|
||||
.ql-editor {
|
||||
background: $inputBg;
|
||||
color: $inputTextColor;
|
||||
border-bottom-right-radius: $borderRadius;
|
||||
border-bottom-left-radius: $borderRadius;
|
||||
}
|
||||
}
|
||||
|
||||
&.ql-snow {
|
||||
border: $editorContentBorder;
|
||||
}
|
||||
.ql-snow.ql-toolbar button:hover,
|
||||
.ql-snow.ql-toolbar button:focus {
|
||||
color: $editorToolbarIconHoverColor;
|
||||
|
||||
.ql-editor {
|
||||
background: $inputBg;
|
||||
color: $inputTextColor;
|
||||
border-bottom-right-radius: $borderRadius;
|
||||
border-bottom-left-radius: $borderRadius;
|
||||
}
|
||||
.ql-stroke {
|
||||
stroke: $editorToolbarIconHoverColor;
|
||||
}
|
||||
|
||||
.ql-snow.ql-toolbar button:hover,
|
||||
.ql-snow.ql-toolbar button:focus {
|
||||
color: $editorToolbarIconHoverColor;
|
||||
.ql-fill {
|
||||
fill: $editorToolbarIconHoverColor;
|
||||
}
|
||||
}
|
||||
|
||||
.ql-stroke {
|
||||
stroke: $editorToolbarIconHoverColor;
|
||||
}
|
||||
.ql-snow.ql-toolbar button.ql-active,
|
||||
.ql-snow.ql-toolbar .ql-picker-label.ql-active,
|
||||
.ql-snow.ql-toolbar .ql-picker-item.ql-selected {
|
||||
color: $editorIconActiveColor;
|
||||
|
||||
.ql-fill {
|
||||
fill: $editorToolbarIconHoverColor;
|
||||
}
|
||||
.ql-stroke {
|
||||
stroke: $editorIconActiveColor;
|
||||
}
|
||||
|
||||
.ql-snow.ql-toolbar button.ql-active,
|
||||
.ql-snow.ql-toolbar .ql-picker-label.ql-active,
|
||||
.ql-snow.ql-toolbar .ql-picker-item.ql-selected {
|
||||
color: $editorIconActiveColor;
|
||||
|
||||
.ql-stroke {
|
||||
stroke: $editorIconActiveColor;
|
||||
}
|
||||
|
||||
.ql-fill {
|
||||
fill: $editorIconActiveColor;
|
||||
}
|
||||
|
||||
.ql-picker-label {
|
||||
color: $editorIconActiveColor;
|
||||
}
|
||||
.ql-fill {
|
||||
fill: $editorIconActiveColor;
|
||||
}
|
||||
|
||||
.ql-picker-label {
|
||||
color: $editorIconActiveColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,21 +1,21 @@
|
||||
// core
|
||||
.p-float-label {
|
||||
display: block;
|
||||
position: relative;
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.p-float-label label {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
top: 50%;
|
||||
margin-top: -.5rem;
|
||||
transition-property: all;
|
||||
transition-timing-function: ease;
|
||||
line-height: 1;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
top: 50%;
|
||||
margin-top: -0.5rem;
|
||||
transition-property: all;
|
||||
transition-timing-function: ease;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.p-float-label:has(textarea) label {
|
||||
top: 1rem;
|
||||
top: 1rem;
|
||||
}
|
||||
|
||||
.p-float-label:has(input:focus) label,
|
||||
@@ -25,22 +25,22 @@
|
||||
.p-float-label:has(textarea.p-filled) label,
|
||||
.p-float-label:has(.p-inputwrapper-focus) label,
|
||||
.p-float-label:has(.p-inputwrapper-filled) label {
|
||||
top: -.75rem;
|
||||
font-size: 12px;
|
||||
top: -0.75rem;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.p-float-label .p-placeholder,
|
||||
.p-float-label input::placeholder,
|
||||
.p-float-label .p-inputtext::placeholder {
|
||||
opacity: 0;
|
||||
transition-property: all;
|
||||
transition-timing-function: ease;
|
||||
opacity: 0;
|
||||
transition-property: all;
|
||||
transition-timing-function: ease;
|
||||
}
|
||||
|
||||
.p-float-label .p-focus .p-placeholder,
|
||||
.p-float-label input:focus::placeholder,
|
||||
.p-float-label .p-inputtext:focus::placeholder {
|
||||
opacity: 1;
|
||||
transition-property: all;
|
||||
transition-timing-function: ease;
|
||||
}
|
||||
opacity: 1;
|
||||
transition-property: all;
|
||||
transition-timing-function: ease;
|
||||
}
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
// core
|
||||
.p-icon-field {
|
||||
position: relative;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.p-icon-field > .p-input-icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -.5rem;
|
||||
}
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -0.5rem;
|
||||
}
|
||||
|
||||
@@ -1,64 +1,64 @@
|
||||
// core
|
||||
.p-inputgroup {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.p-inputgroup-addon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.p-inputgroup .p-float-label {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.p-inputgroup .p-inputtext,
|
||||
.p-fluid .p-inputgroup .p-inputtext,
|
||||
.p-inputgroup .p-inputwrapper,
|
||||
.p-fluid .p-inputgroup .p-input {
|
||||
flex: 1 1 auto;
|
||||
width: 1%;
|
||||
flex: 1 1 auto;
|
||||
width: 1%;
|
||||
}
|
||||
|
||||
// theme
|
||||
.p-inputgroup-addon {
|
||||
background: $inputGroupBg;
|
||||
color: $inputGroupTextColor;
|
||||
border-top: $inputBorder;
|
||||
border-left: $inputBorder;
|
||||
border-bottom: $inputBorder;
|
||||
padding: $inputPadding;
|
||||
min-width: $inputGroupAddOnMinWidth;
|
||||
background: $inputGroupBg;
|
||||
color: $inputGroupTextColor;
|
||||
border-top: $inputBorder;
|
||||
border-left: $inputBorder;
|
||||
border-bottom: $inputBorder;
|
||||
padding: $inputPadding;
|
||||
min-width: $inputGroupAddOnMinWidth;
|
||||
|
||||
&:last-child {
|
||||
border-right: $inputBorder;
|
||||
}
|
||||
&:last-child {
|
||||
border-right: $inputBorder;
|
||||
}
|
||||
}
|
||||
|
||||
.p-inputgroup {
|
||||
> .p-component,
|
||||
> .p-inputwrapper > .p-inputtext,
|
||||
> .p-float-label > .p-component {
|
||||
border-radius: 0;
|
||||
margin: 0;
|
||||
> .p-component,
|
||||
> .p-inputwrapper > .p-inputtext,
|
||||
> .p-float-label > .p-component {
|
||||
border-radius: 0;
|
||||
margin: 0;
|
||||
|
||||
+ .p-inputgroup-addon {
|
||||
border-left: 0 none;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
z-index: 1;
|
||||
|
||||
~ label {
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
+ .p-inputgroup-addon {
|
||||
border-left: 0 none;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
z-index: 1;
|
||||
|
||||
~ label {
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-inputgroup-addon:first-child,
|
||||
@@ -66,37 +66,37 @@
|
||||
.p-inputgroup input:first-child,
|
||||
.p-inputgroup > .p-inputwrapper:first-child,
|
||||
.p-inputgroup > .p-inputwrapper:first-child > .p-inputtext {
|
||||
border-top-left-radius: $borderRadius;
|
||||
border-bottom-left-radius: $borderRadius;
|
||||
border-top-left-radius: $borderRadius;
|
||||
border-bottom-left-radius: $borderRadius;
|
||||
}
|
||||
|
||||
.p-inputgroup .p-float-label:first-child input {
|
||||
border-top-left-radius: $borderRadius;
|
||||
border-bottom-left-radius: $borderRadius;
|
||||
border-top-left-radius: $borderRadius;
|
||||
border-bottom-left-radius: $borderRadius;
|
||||
}
|
||||
|
||||
.p-inputgroup-addon:last-child,
|
||||
.p-inputgroup button:last-child,
|
||||
.p-inputgroup input:last-child,
|
||||
.p-inputgroup > .p-inputwrapper:last-child,
|
||||
.p-inputgroup > .p-inputwrapper:last-child,
|
||||
.p-inputgroup > .p-inputwrapper:last-child > .p-inputtext {
|
||||
border-top-right-radius: $borderRadius;
|
||||
border-bottom-right-radius: $borderRadius;
|
||||
border-top-right-radius: $borderRadius;
|
||||
border-bottom-right-radius: $borderRadius;
|
||||
}
|
||||
|
||||
.p-inputgroup .p-float-label:last-child input {
|
||||
border-top-right-radius: $borderRadius;
|
||||
border-bottom-right-radius: $borderRadius;
|
||||
border-top-right-radius: $borderRadius;
|
||||
border-bottom-right-radius: $borderRadius;
|
||||
}
|
||||
|
||||
.p-fluid {
|
||||
.p-inputgroup {
|
||||
.p-button {
|
||||
width: auto;
|
||||
.p-inputgroup {
|
||||
.p-button {
|
||||
width: auto;
|
||||
|
||||
&.p-button-icon-only {
|
||||
width: $buttonIconOnlyWidth;
|
||||
}
|
||||
}
|
||||
&.p-button-icon-only {
|
||||
width: $buttonIconOnlyWidth;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
// core
|
||||
.p-fluid .p-icon-field-left,
|
||||
.p-fluid .p-icon-field-right {
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.p-icon-field-left > .p-input-icon:first-of-type {
|
||||
left: nth($inputPadding, 2);
|
||||
color: $inputIconColor;
|
||||
left: nth($inputPadding, 2);
|
||||
color: $inputIconColor;
|
||||
}
|
||||
|
||||
.p-icon-field-right > .p-input-icon:last-of-type {
|
||||
right: nth($inputPadding, 2);
|
||||
color: $inputIconColor;
|
||||
}
|
||||
.p-icon-field-right > .p-input-icon:last-of-type {
|
||||
right: nth($inputPadding, 2);
|
||||
color: $inputIconColor;
|
||||
}
|
||||
|
||||
@@ -1,120 +1,124 @@
|
||||
// core
|
||||
.p-inputnumber {
|
||||
display: inline-flex;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.p-inputnumber-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label,
|
||||
.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label {
|
||||
display: none;
|
||||
.p-inputnumber-buttons-horizontal
|
||||
.p-button.p-inputnumber-button
|
||||
.p-button-label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
padding: 0;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.p-inputnumber-buttons-stacked .p-inputnumber-input {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
padding: 0;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.p-inputnumber-buttons-stacked .p-inputnumber-button-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button {
|
||||
flex: 1 1 auto;
|
||||
.p-inputnumber-buttons-stacked
|
||||
.p-inputnumber-button-group
|
||||
.p-button.p-inputnumber-button {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up {
|
||||
order: 3;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
order: 3;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
.p-inputnumber-buttons-horizontal .p-inputnumber-input {
|
||||
order: 2;
|
||||
border-radius: 0;
|
||||
order: 2;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down {
|
||||
order: 1;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
order: 1;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.p-inputnumber-buttons-vertical {
|
||||
flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up {
|
||||
order: 1;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
width: 100%;
|
||||
order: 1;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.p-inputnumber-buttons-vertical .p-inputnumber-input {
|
||||
order: 2;
|
||||
border-radius: 0;
|
||||
text-align: center;
|
||||
order: 2;
|
||||
border-radius: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down {
|
||||
order: 3;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
width: 100%;
|
||||
order: 3;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.p-inputnumber-input {
|
||||
flex: 1 1 auto;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.p-fluid .p-inputnumber {
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.p-fluid .p-inputnumber .p-inputnumber-input {
|
||||
width: 1%;
|
||||
width: 1%;
|
||||
}
|
||||
|
||||
.p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input {
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// theme
|
||||
.p-inputnumber {
|
||||
&.p-invalid.p-component > .p-inputtext {
|
||||
@include invalid-input();
|
||||
&.p-invalid.p-component > .p-inputtext {
|
||||
@include invalid-input();
|
||||
}
|
||||
|
||||
&.p-variant-filled > .p-inputnumber-input {
|
||||
background-color: $inputFilledBg;
|
||||
|
||||
&:enabled:hover {
|
||||
background-color: $inputFilledHoverBg;
|
||||
}
|
||||
|
||||
&.p-variant-filled > .p-inputnumber-input {
|
||||
background-color: $inputFilledBg;
|
||||
|
||||
&:enabled:hover {
|
||||
background-color: $inputFilledHoverBg;
|
||||
}
|
||||
|
||||
&:enabled:focus {
|
||||
background-color: $inputFilledFocusBg;
|
||||
}
|
||||
&:enabled:focus {
|
||||
background-color: $inputFilledFocusBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
.p-inputotp {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $inlineSpacing;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $inlineSpacing;
|
||||
}
|
||||
|
||||
.p-inputotp-input {
|
||||
text-align: center;
|
||||
width: 2 * nth($inputPadding, 2) + 1rem;
|
||||
text-align: center;
|
||||
width: 2 * nth($inputPadding, 2) + 1rem;
|
||||
}
|
||||
|
||||
@@ -1,99 +1,99 @@
|
||||
@use 'sass:math';
|
||||
@use "sass:math";
|
||||
|
||||
// core
|
||||
.p-inputswitch {
|
||||
display: inline-block;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.p-inputswitch-input {
|
||||
cursor: pointer;
|
||||
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-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 {
|
||||
appearance: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
opacity: 0;
|
||||
z-index: 1;
|
||||
outline: 0 none;
|
||||
border-radius: $inputSwitchBorderRadius;
|
||||
.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;
|
||||
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-highlight {
|
||||
.p-inputswitch-slider {
|
||||
background: $inputSwitchSliderOffBg;
|
||||
transition: $formElementTransition;
|
||||
border-radius: $inputSwitchBorderRadius;
|
||||
outline-color: transparent;
|
||||
background: $inputSwitchSliderOnBg;
|
||||
|
||||
&:before {
|
||||
background: $inputSwitchHandleOffBg;
|
||||
width: $inputSwitchHandleWidth;
|
||||
height: $inputSwitchHandleHeight;
|
||||
left: $inputSwitchSliderPadding;
|
||||
margin-top: math.div(-1 * $inputSwitchHandleHeight, 2);
|
||||
border-radius: $inputSwitchHandleBorderRadius;
|
||||
transition-duration: $transitionDuration;
|
||||
}
|
||||
&:before {
|
||||
background: $inputSwitchHandleOnBg;
|
||||
transform: translateX($inputSwitchHandleWidth);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
&:not(.p-disabled) {
|
||||
&:has(.p-inputswitch-input:hover) {
|
||||
.p-inputswitch-slider {
|
||||
background: $inputSwitchSliderOffHoverBg;
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
.p-inputswitch-slider {
|
||||
background: $inputSwitchSliderOnBg;
|
||||
|
||||
&:before {
|
||||
background: $inputSwitchHandleOnBg;
|
||||
transform: translateX($inputSwitchHandleWidth);
|
||||
}
|
||||
background: $inputSwitchSliderOnHoverBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.p-disabled) {
|
||||
&:has(.p-inputswitch-input:hover) {
|
||||
.p-inputswitch-slider {
|
||||
background: $inputSwitchSliderOffHoverBg;
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
.p-inputswitch-slider {
|
||||
background: $inputSwitchSliderOnHoverBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:has(.p-inputswitch-input:focus-visible) {
|
||||
.p-inputswitch-slider {
|
||||
@include focused();
|
||||
}
|
||||
}
|
||||
&:has(.p-inputswitch-input:focus-visible) {
|
||||
.p-inputswitch-slider {
|
||||
@include focused();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-invalid > .p-inputswitch-slider {
|
||||
@include invalid-input();
|
||||
}
|
||||
}
|
||||
&.p-invalid > .p-inputswitch-slider {
|
||||
@include invalid-input();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,107 +1,107 @@
|
||||
// core
|
||||
.p-fluid .p-inputtext {
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// theme
|
||||
.p-inputtext {
|
||||
font-family: var(--font-family);
|
||||
font-feature-settings: var(--font-feature-settings, normal);
|
||||
font-size: $inputTextFontSize;
|
||||
color: $inputTextColor;
|
||||
background: $inputBg;
|
||||
padding: $inputPadding;
|
||||
border: $inputBorder;
|
||||
transition: $formElementTransition;
|
||||
appearance: none;
|
||||
border-radius: $borderRadius;
|
||||
outline-color: transparent;
|
||||
font-family: var(--font-family);
|
||||
font-feature-settings: var(--font-feature-settings, normal);
|
||||
font-size: $inputTextFontSize;
|
||||
color: $inputTextColor;
|
||||
background: $inputBg;
|
||||
padding: $inputPadding;
|
||||
border: $inputBorder;
|
||||
transition: $formElementTransition;
|
||||
appearance: none;
|
||||
border-radius: $borderRadius;
|
||||
outline-color: transparent;
|
||||
|
||||
&:enabled:hover {
|
||||
border-color: $inputHoverBorderColor;
|
||||
}
|
||||
|
||||
&:enabled:focus {
|
||||
@include focused-input();
|
||||
}
|
||||
|
||||
&.p-invalid.p-component {
|
||||
@include invalid-input();
|
||||
}
|
||||
|
||||
&.p-variant-filled {
|
||||
background-color: $inputFilledBg;
|
||||
|
||||
&:enabled:hover {
|
||||
border-color: $inputHoverBorderColor;
|
||||
background-color: $inputFilledHoverBg;
|
||||
}
|
||||
|
||||
&:enabled:focus {
|
||||
@include focused-input();
|
||||
background-color: $inputFilledFocusBg;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-invalid.p-component {
|
||||
@include invalid-input();
|
||||
}
|
||||
&.p-inputtext-sm {
|
||||
@include scaledFontSize($inputTextFontSize, $scaleSM);
|
||||
@include scaledPadding($inputPadding, $scaleSM);
|
||||
}
|
||||
|
||||
&.p-variant-filled {
|
||||
background-color: $inputFilledBg;
|
||||
|
||||
&:enabled:hover {
|
||||
background-color: $inputFilledHoverBg;
|
||||
}
|
||||
|
||||
&:enabled:focus {
|
||||
background-color: $inputFilledFocusBg;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-inputtext-sm {
|
||||
@include scaledFontSize($inputTextFontSize, $scaleSM);
|
||||
@include scaledPadding($inputPadding, $scaleSM);
|
||||
}
|
||||
|
||||
&.p-inputtext-lg {
|
||||
@include scaledFontSize($inputTextFontSize, $scaleLG);
|
||||
@include scaledPadding($inputPadding, $scaleLG);
|
||||
}
|
||||
&.p-inputtext-lg {
|
||||
@include scaledFontSize($inputTextFontSize, $scaleLG);
|
||||
@include scaledPadding($inputPadding, $scaleLG);
|
||||
}
|
||||
}
|
||||
|
||||
.p-float-label > label {
|
||||
left: nth($inputPadding, 2);
|
||||
color: $inputPlaceholderTextColor;
|
||||
transition-duration: $transitionDuration;
|
||||
left: nth($inputPadding, 2);
|
||||
color: $inputPlaceholderTextColor;
|
||||
transition-duration: $transitionDuration;
|
||||
}
|
||||
|
||||
.p-float-label > .p-invalid + label {
|
||||
color: $inputErrorBorderColor;
|
||||
color: $inputErrorBorderColor;
|
||||
}
|
||||
|
||||
.p-icon-field-left > .p-inputtext {
|
||||
padding-left: nth($inputPadding, 2) * 2 + $primeIconFontSize;
|
||||
padding-left: nth($inputPadding, 2) * 2 + $primeIconFontSize;
|
||||
}
|
||||
|
||||
.p-icon-field-left.p-float-label > label {
|
||||
left: nth($inputPadding, 2) * 2 + $primeIconFontSize;
|
||||
left: nth($inputPadding, 2) * 2 + $primeIconFontSize;
|
||||
}
|
||||
|
||||
.p-icon-field-right > .p-inputtext {
|
||||
padding-right: nth($inputPadding, 2) * 2 + $primeIconFontSize;
|
||||
padding-right: nth($inputPadding, 2) * 2 + $primeIconFontSize;
|
||||
}
|
||||
|
||||
@include placeholder {
|
||||
color: $inputPlaceholderTextColor;
|
||||
color: $inputPlaceholderTextColor;
|
||||
}
|
||||
|
||||
.p-input-filled {
|
||||
.p-inputtext {
|
||||
background-color: $inputFilledBg;
|
||||
.p-inputtext {
|
||||
background-color: $inputFilledBg;
|
||||
|
||||
&:enabled:hover {
|
||||
background-color: $inputFilledHoverBg;
|
||||
}
|
||||
|
||||
&:enabled:focus {
|
||||
background-color: $inputFilledFocusBg;
|
||||
}
|
||||
&:enabled:hover {
|
||||
background-color: $inputFilledHoverBg;
|
||||
}
|
||||
|
||||
&:enabled:focus {
|
||||
background-color: $inputFilledFocusBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-inputtext-sm {
|
||||
.p-inputtext {
|
||||
@include scaledFontSize($inputTextFontSize, $scaleSM);
|
||||
@include scaledPadding($inputPadding, $scaleSM);
|
||||
}
|
||||
.p-inputtext {
|
||||
@include scaledFontSize($inputTextFontSize, $scaleSM);
|
||||
@include scaledPadding($inputPadding, $scaleSM);
|
||||
}
|
||||
}
|
||||
|
||||
.p-inputtext-lg {
|
||||
.p-inputtext {
|
||||
@include scaledFontSize($inputTextFontSize, $scaleLG);
|
||||
@include scaledPadding($inputPadding, $scaleLG);
|
||||
}
|
||||
.p-inputtext {
|
||||
@include scaledFontSize($inputTextFontSize, $scaleLG);
|
||||
@include scaledPadding($inputPadding, $scaleLG);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,20 +1,20 @@
|
||||
// core
|
||||
.p-knob-range {
|
||||
fill: none;
|
||||
transition: stroke 0.1s ease-in;
|
||||
fill: none;
|
||||
transition: stroke 0.1s ease-in;
|
||||
}
|
||||
.p-knob-value {
|
||||
animation-name: dash-frame;
|
||||
animation-fill-mode: forwards;
|
||||
fill: none;
|
||||
animation-name: dash-frame;
|
||||
animation-fill-mode: forwards;
|
||||
fill: none;
|
||||
}
|
||||
.p-knob-text {
|
||||
font-size: 1.3rem;
|
||||
text-align: center;
|
||||
font-size: 1.3rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@keyframes dash-frame {
|
||||
100% {
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
}
|
||||
100% {
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,139 +1,139 @@
|
||||
// core
|
||||
.p-listbox-list-wrapper {
|
||||
overflow: auto;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.p-listbox-list {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.p-listbox-item {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.p-listbox-item-group {
|
||||
cursor: auto;
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.p-listbox-filter-container {
|
||||
position: relative;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.p-listbox-filter-icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -0.5rem;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -0.5rem;
|
||||
}
|
||||
|
||||
.p-listbox-filter {
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// theme
|
||||
.p-listbox {
|
||||
background: $inputListBg;
|
||||
color: $inputListTextColor;
|
||||
border: $inputListBorder;
|
||||
border-radius: $borderRadius;
|
||||
transition: $formElementTransition;
|
||||
outline-color: transparent;
|
||||
background: $inputListBg;
|
||||
color: $inputListTextColor;
|
||||
border: $inputListBorder;
|
||||
border-radius: $borderRadius;
|
||||
transition: $formElementTransition;
|
||||
outline-color: transparent;
|
||||
|
||||
.p-listbox-header {
|
||||
padding: $inputListHeaderPadding;
|
||||
border-bottom: $inputListHeaderBorder;
|
||||
color: $inputListHeaderTextColor;
|
||||
background: $inputListHeaderBg;
|
||||
margin: $inputListHeaderMargin;
|
||||
border-top-right-radius: $borderRadius;
|
||||
border-top-left-radius: $borderRadius;
|
||||
.p-listbox-header {
|
||||
padding: $inputListHeaderPadding;
|
||||
border-bottom: $inputListHeaderBorder;
|
||||
color: $inputListHeaderTextColor;
|
||||
background: $inputListHeaderBg;
|
||||
margin: $inputListHeaderMargin;
|
||||
border-top-right-radius: $borderRadius;
|
||||
border-top-left-radius: $borderRadius;
|
||||
|
||||
.p-listbox-filter {
|
||||
padding-right: nth($inputPadding, 2) + $primeIconFontSize;
|
||||
}
|
||||
|
||||
.p-listbox-filter-icon {
|
||||
right: nth($inputPadding, 2);
|
||||
color: $inputIconColor;
|
||||
}
|
||||
.p-listbox-filter {
|
||||
padding-right: nth($inputPadding, 2) + $primeIconFontSize;
|
||||
}
|
||||
|
||||
.p-listbox-list {
|
||||
padding: $inputListPadding;
|
||||
outline: 0 none;
|
||||
.p-listbox-filter-icon {
|
||||
right: nth($inputPadding, 2);
|
||||
color: $inputIconColor;
|
||||
}
|
||||
}
|
||||
|
||||
.p-listbox-item {
|
||||
margin: $inputListItemMargin;
|
||||
padding: $inputListItemPadding;
|
||||
border: $inputListItemBorder;
|
||||
color: $inputListItemTextColor;
|
||||
transition: $listItemTransition;
|
||||
border-radius: $inputListItemBorderRadius;
|
||||
.p-listbox-list {
|
||||
padding: $inputListPadding;
|
||||
outline: 0 none;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.p-listbox-item {
|
||||
margin: $inputListItemMargin;
|
||||
padding: $inputListItemPadding;
|
||||
border: $inputListItemBorder;
|
||||
color: $inputListItemTextColor;
|
||||
transition: $listItemTransition;
|
||||
border-radius: $inputListItemBorderRadius;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
color: $highlightTextColor;
|
||||
background: $highlightBg;
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.p-listbox-item-group {
|
||||
margin: $submenuHeaderMargin;
|
||||
padding: $submenuHeaderPadding;
|
||||
color: $submenuHeaderTextColor;
|
||||
background: $submenuHeaderBg;
|
||||
font-weight: $submenuHeaderFontWeight;
|
||||
}
|
||||
|
||||
.p-listbox-empty-message {
|
||||
padding: $inputListItemPadding;
|
||||
color: $inputListItemTextColor;
|
||||
background: $inputListItemBg;
|
||||
}
|
||||
&.p-highlight {
|
||||
color: $highlightTextColor;
|
||||
background: $highlightBg;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.p-disabled) {
|
||||
.p-listbox-item {
|
||||
&.p-highlight {
|
||||
&.p-focus {
|
||||
background: $highlightFocusBg;
|
||||
}
|
||||
}
|
||||
.p-listbox-item-group {
|
||||
margin: $submenuHeaderMargin;
|
||||
padding: $submenuHeaderPadding;
|
||||
color: $submenuHeaderTextColor;
|
||||
background: $submenuHeaderBg;
|
||||
font-weight: $submenuHeaderFontWeight;
|
||||
}
|
||||
|
||||
&:not(.p-highlight):not(.p-disabled) {
|
||||
&.p-focus {
|
||||
color: $inputListItemTextHoverColor;
|
||||
background: $inputListItemHoverBg;
|
||||
}
|
||||
.p-listbox-empty-message {
|
||||
padding: $inputListItemPadding;
|
||||
color: $inputListItemTextColor;
|
||||
background: $inputListItemBg;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $inputListItemTextHoverColor;
|
||||
background: $inputListItemHoverBg;
|
||||
|
||||
&.p-focus {
|
||||
color: $inputListItemTextHoverColor;
|
||||
background: $inputListItemHoverBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:not(.p-disabled) {
|
||||
.p-listbox-item {
|
||||
&.p-highlight {
|
||||
&.p-focus {
|
||||
background: $highlightFocusBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-focus {
|
||||
@include focused-input();
|
||||
}
|
||||
&:not(.p-highlight):not(.p-disabled) {
|
||||
&.p-focus {
|
||||
color: $inputListItemTextHoverColor;
|
||||
background: $inputListItemHoverBg;
|
||||
}
|
||||
|
||||
&.p-invalid {
|
||||
@include invalid-input();
|
||||
&:hover {
|
||||
color: $inputListItemTextHoverColor;
|
||||
background: $inputListItemHoverBg;
|
||||
|
||||
&.p-focus {
|
||||
color: $inputListItemTextHoverColor;
|
||||
background: $inputListItemHoverBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-focus {
|
||||
@include focused-input();
|
||||
}
|
||||
|
||||
&.p-invalid {
|
||||
@include invalid-input();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,277 +2,275 @@
|
||||
|
||||
// core
|
||||
.p-multiselect {
|
||||
display: inline-flex;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
display: inline-flex;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.p-multiselect-trigger {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.p-multiselect-label-container {
|
||||
overflow: hidden;
|
||||
flex: 1 1 auto;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
flex: 1 1 auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.p-multiselect-label {
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.p-multiselect-label-empty {
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.p-multiselect-token {
|
||||
cursor: default;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
flex: 0 0 auto;
|
||||
cursor: default;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.p-multiselect-token-icon {
|
||||
cursor: pointer;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.p-multiselect .p-multiselect-panel {
|
||||
min-width: 100%;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.p-multiselect-items-wrapper {
|
||||
overflow: auto;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.p-multiselect-items {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
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;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: normal;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.p-multiselect-item-group {
|
||||
cursor: auto;
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.p-multiselect-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.p-multiselect-filter-container {
|
||||
position: relative;
|
||||
flex: 1 1 auto;
|
||||
position: relative;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.p-multiselect-filter-icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -0.5rem;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -0.5rem;
|
||||
}
|
||||
|
||||
.p-multiselect-filter-container .p-inputtext {
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.p-multiselect-close {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.p-fluid .p-multiselect {
|
||||
display: flex;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
// theme
|
||||
.p-multiselect {
|
||||
background: $inputBg;
|
||||
border: $inputBorder;
|
||||
transition: $formElementTransition;
|
||||
border-radius: $borderRadius;
|
||||
outline-color: transparent;
|
||||
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 {
|
||||
border-color: $inputHoverBorderColor;
|
||||
background-color: $inputFilledHoverBg;
|
||||
}
|
||||
|
||||
&:not(.p-disabled).p-focus {
|
||||
@include focused-input();
|
||||
background-color: $inputFilledFocusBg;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-variant-filled {
|
||||
background: $inputFilledBg;
|
||||
.p-multiselect-label {
|
||||
padding: $inputPadding;
|
||||
transition: $formElementTransition;
|
||||
|
||||
&:not(.p-disabled):hover {
|
||||
background-color: $inputFilledHoverBg;
|
||||
}
|
||||
|
||||
&:not(.p-disabled).p-focus {
|
||||
background-color: $inputFilledFocusBg;
|
||||
}
|
||||
&.p-placeholder {
|
||||
color: $inputPlaceholderTextColor;
|
||||
}
|
||||
}
|
||||
|
||||
.p-multiselect-label {
|
||||
padding: $inputPadding;
|
||||
transition: $formElementTransition;
|
||||
&.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-placeholder {
|
||||
color: $inputPlaceholderTextColor;
|
||||
}
|
||||
.p-multiselect-token-icon {
|
||||
margin-left: $inlineSpacing;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.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-trigger {
|
||||
background: transparent;
|
||||
color: $inputIconColor;
|
||||
width: $inputGroupAddOnMinWidth;
|
||||
border-top-right-radius: $borderRadius;
|
||||
border-bottom-right-radius: $borderRadius;
|
||||
}
|
||||
|
||||
.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-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 {
|
||||
&.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;
|
||||
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-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-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-filter-icon {
|
||||
right: nth($inputPadding, 2);
|
||||
color: $inputIconColor;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,62 +1,62 @@
|
||||
// core
|
||||
.p-password {
|
||||
display: inline-flex;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.p-password .p-password-panel {
|
||||
min-width: 100%;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.p-password-meter {
|
||||
height: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.p-password-strength {
|
||||
height: 100%;
|
||||
width: 0;
|
||||
transition: width 1s ease-in-out;
|
||||
height: 100%;
|
||||
width: 0;
|
||||
transition: width 1s ease-in-out;
|
||||
}
|
||||
|
||||
.p-fluid .p-password {
|
||||
display: flex;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.p-password-input::-ms-reveal,
|
||||
.p-password-input::-ms-clear {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
// theme
|
||||
.p-password {
|
||||
&.p-invalid.p-component > .p-inputtext {
|
||||
@include invalid-input();
|
||||
}
|
||||
&.p-invalid.p-component > .p-inputtext {
|
||||
@include invalid-input();
|
||||
}
|
||||
}
|
||||
|
||||
.p-password-panel {
|
||||
padding: $panelContentPadding;
|
||||
background: $panelContentBg;
|
||||
color: $panelContentTextColor;
|
||||
border: $overlayContentBorder;
|
||||
box-shadow: $inputOverlayShadow;
|
||||
border-radius: $borderRadius;
|
||||
padding: $panelContentPadding;
|
||||
background: $panelContentBg;
|
||||
color: $panelContentTextColor;
|
||||
border: $overlayContentBorder;
|
||||
box-shadow: $inputOverlayShadow;
|
||||
border-radius: $borderRadius;
|
||||
|
||||
.p-password-meter {
|
||||
margin-bottom: $inlineSpacing;
|
||||
background: $passwordMeterBg;
|
||||
.p-password-meter {
|
||||
margin-bottom: $inlineSpacing;
|
||||
background: $passwordMeterBg;
|
||||
|
||||
.p-password-strength {
|
||||
&.weak {
|
||||
background: $passwordWeakBg;
|
||||
}
|
||||
.p-password-strength {
|
||||
&.weak {
|
||||
background: $passwordWeakBg;
|
||||
}
|
||||
|
||||
&.medium {
|
||||
background: $passwordMediumBg;
|
||||
}
|
||||
&.medium {
|
||||
background: $passwordMediumBg;
|
||||
}
|
||||
|
||||
&.strong {
|
||||
background: $passwordStrongBg;
|
||||
}
|
||||
}
|
||||
&.strong {
|
||||
background: $passwordStrongBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,170 +1,170 @@
|
||||
// core
|
||||
.p-radiobutton {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
user-select: none;
|
||||
vertical-align: bottom;
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
user-select: none;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.p-radiobutton-input {
|
||||
cursor: pointer;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.p-radiobutton-box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.p-radiobutton-icon {
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
transform: translateZ(0) scale(.1);
|
||||
border-radius: 50%;
|
||||
visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
transform: translateZ(0) scale(0.1);
|
||||
border-radius: 50%;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.p-radiobutton.p-highlight .p-radiobutton-icon {
|
||||
transform: translateZ(0) scale(1.0, 1.0);
|
||||
visibility: visible;
|
||||
transform: translateZ(0) scale(1, 1);
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
// theme
|
||||
.p-radiobutton {
|
||||
width: $radiobuttonWidth;
|
||||
height: $radiobuttonHeight;
|
||||
|
||||
.p-radiobutton-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;
|
||||
border: $radiobuttonBorder;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.p-radiobutton-box {
|
||||
border: $radiobuttonBorder;
|
||||
background: $inputBg;
|
||||
width: $radiobuttonWidth;
|
||||
height: $radiobuttonHeight;
|
||||
color: $textColor;
|
||||
border-radius: 50%;
|
||||
transition: $formElementTransition;
|
||||
outline-color: transparent;
|
||||
|
||||
.p-radiobutton-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;
|
||||
border: $radiobuttonBorder;
|
||||
border-radius: 50%;
|
||||
.p-radiobutton-icon {
|
||||
width: $radiobuttonIconSize;
|
||||
height: $radiobuttonIconSize;
|
||||
transition-duration: $transitionDuration;
|
||||
background-color: $radiobuttonIconActiveColor;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
.p-radiobutton-box {
|
||||
border-color: $radiobuttonActiveBorderColor;
|
||||
background: $radiobuttonActiveBg;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.p-disabled) {
|
||||
&:has(.p-radiobutton-input:hover) {
|
||||
.p-radiobutton-box {
|
||||
border-color: $inputHoverBorderColor;
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
.p-radiobutton-box {
|
||||
border-color: $radiobuttonActiveHoverBorderColor;
|
||||
background: $radiobuttonActiveHoverBg;
|
||||
|
||||
.p-radiobutton-icon {
|
||||
background-color: $radiobuttonIconActiveHoverColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-radiobutton-box {
|
||||
border: $radiobuttonBorder;
|
||||
background: $inputBg;
|
||||
width: $radiobuttonWidth;
|
||||
height: $radiobuttonHeight;
|
||||
color: $textColor;
|
||||
border-radius: 50%;
|
||||
transition: $formElementTransition;
|
||||
outline-color: transparent;
|
||||
&:has(.p-radiobutton-input:focus-visible) {
|
||||
.p-radiobutton-box {
|
||||
@include focused-input();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-radiobutton-icon {
|
||||
width: $radiobuttonIconSize;
|
||||
height: $radiobuttonIconSize;
|
||||
transition-duration: $transitionDuration;
|
||||
background-color: $radiobuttonIconActiveColor;
|
||||
}
|
||||
&.p-invalid > .p-radiobutton-box {
|
||||
@include invalid-input();
|
||||
}
|
||||
|
||||
&.p-variant-filled {
|
||||
.p-radiobutton-box {
|
||||
background-color: $inputFilledBg;
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
.p-radiobutton-box {
|
||||
border-color: $radiobuttonActiveBorderColor;
|
||||
background: $radiobuttonActiveBg;
|
||||
}
|
||||
.p-radiobutton-box {
|
||||
background: $radiobuttonActiveBg;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.p-disabled) {
|
||||
&:has(.p-radiobutton-input:hover) {
|
||||
.p-radiobutton-box {
|
||||
border-color: $inputHoverBorderColor;
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
.p-radiobutton-box {
|
||||
border-color: $radiobuttonActiveHoverBorderColor;
|
||||
background: $radiobuttonActiveHoverBg;
|
||||
|
||||
.p-radiobutton-icon {
|
||||
background-color: $radiobuttonIconActiveHoverColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:has(.p-radiobutton-input:focus-visible) {
|
||||
.p-radiobutton-box {
|
||||
@include focused-input();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-invalid > .p-radiobutton-box {
|
||||
@include invalid-input();
|
||||
}
|
||||
|
||||
&.p-variant-filled {
|
||||
&:has(.p-radiobutton-input:hover) {
|
||||
.p-radiobutton-box {
|
||||
background-color: $inputFilledBg;
|
||||
background-color: $inputFilledHoverBg;
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
.p-radiobutton-box {
|
||||
background: $radiobuttonActiveBg;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.p-disabled) {
|
||||
&:has(.p-radiobutton-input:hover) {
|
||||
.p-radiobutton-box {
|
||||
background-color: $inputFilledHoverBg;
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
.p-radiobutton-box {
|
||||
background: $radiobuttonActiveHoverBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
.p-radiobutton-box {
|
||||
background: $radiobuttonActiveHoverBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-input-filled {
|
||||
.p-radiobutton {
|
||||
.p-radiobutton {
|
||||
.p-radiobutton-box {
|
||||
background-color: $inputFilledBg;
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
.p-radiobutton-box {
|
||||
background: $radiobuttonActiveBg;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.p-disabled) {
|
||||
&:has(.p-radiobutton-input:hover) {
|
||||
.p-radiobutton-box {
|
||||
background-color: $inputFilledBg;
|
||||
background-color: $inputFilledHoverBg;
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
.p-radiobutton-box {
|
||||
background: $radiobuttonActiveBg;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.p-disabled) {
|
||||
&:has(.p-radiobutton-input:hover) {
|
||||
.p-radiobutton-box {
|
||||
background-color: $inputFilledHoverBg;
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
.p-radiobutton-box {
|
||||
background: $radiobuttonActiveHoverBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
.p-radiobutton-box {
|
||||
background: $radiobuttonActiveHoverBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@if ($highlightBg == $radiobuttonActiveBg) {
|
||||
.p-highlight {
|
||||
.p-radiobutton {
|
||||
.p-radiobutton-box {
|
||||
border-color: $radiobuttonIconActiveColor;
|
||||
}
|
||||
}
|
||||
.p-highlight {
|
||||
.p-radiobutton {
|
||||
.p-radiobutton-box {
|
||||
border-color: $radiobuttonIconActiveColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,81 +1,81 @@
|
||||
@use 'sass:math';
|
||||
@use "sass:math";
|
||||
|
||||
// core
|
||||
.p-rating {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.p-rating-item {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.p-rating.p-readonly .p-rating-item {
|
||||
cursor: default;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
// theme
|
||||
.p-rating {
|
||||
gap: $inlineSpacing;
|
||||
gap: $inlineSpacing;
|
||||
|
||||
.p-rating-item {
|
||||
outline-color: transparent;
|
||||
border-radius: 50%;
|
||||
|
||||
.p-rating-icon {
|
||||
color: $ratingStarIconOffColor;
|
||||
transition: $formElementTransition;
|
||||
font-size: $ratingIconFontSize;
|
||||
|
||||
&.p-icon {
|
||||
width: $ratingIconFontSize;
|
||||
height: $ratingIconFontSize;
|
||||
}
|
||||
|
||||
&.p-rating-cancel {
|
||||
color: $ratingCancelIconColor;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-focus {
|
||||
@include focused();
|
||||
}
|
||||
|
||||
&.p-rating-item-active {
|
||||
.p-rating-icon {
|
||||
color: $ratingStarIconOnColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.p-disabled):not(.p-readonly) {
|
||||
.p-rating-item {
|
||||
outline-color: transparent;
|
||||
border-radius: 50%;
|
||||
|
||||
&:hover {
|
||||
.p-rating-icon {
|
||||
color: $ratingStarIconOffColor;
|
||||
transition: $formElementTransition;
|
||||
font-size: $ratingIconFontSize;
|
||||
color: $ratingStarIconHoverColor;
|
||||
|
||||
&.p-icon {
|
||||
width: $ratingIconFontSize;
|
||||
height: $ratingIconFontSize;
|
||||
}
|
||||
|
||||
&.p-rating-cancel {
|
||||
color: $ratingCancelIconColor;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-focus {
|
||||
@include focused();
|
||||
}
|
||||
|
||||
&.p-rating-item-active {
|
||||
.p-rating-icon {
|
||||
color: $ratingStarIconOnColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.p-disabled):not(.p-readonly) {
|
||||
.p-rating-item {
|
||||
&:hover {
|
||||
.p-rating-icon {
|
||||
color: $ratingStarIconHoverColor;
|
||||
|
||||
&.p-rating-cancel {
|
||||
color: $ratingCancelIconHoverColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.p-rating-cancel {
|
||||
color: $ratingCancelIconHoverColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@if ($highlightBg == $ratingStarIconOnColor) {
|
||||
.p-highlight {
|
||||
.p-rating {
|
||||
.p-rating-item {
|
||||
&.p-rating-item-active {
|
||||
.p-rating-icon {
|
||||
color: $highlightTextColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
.p-highlight {
|
||||
.p-rating {
|
||||
.p-rating-item {
|
||||
&.p-rating-item-active {
|
||||
.p-rating-icon {
|
||||
color: $highlightTextColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,50 +1,50 @@
|
||||
.p-selectbutton {
|
||||
.p-button {
|
||||
background: $toggleButtonBg;
|
||||
border: $toggleButtonBorder;
|
||||
color: $toggleButtonTextColor;
|
||||
transition: $formElementTransition;
|
||||
.p-button {
|
||||
background: $toggleButtonBg;
|
||||
border: $toggleButtonBorder;
|
||||
color: $toggleButtonTextColor;
|
||||
transition: $formElementTransition;
|
||||
|
||||
.p-button-icon-left,
|
||||
.p-button-icon-right {
|
||||
color: $toggleButtonIconColor;
|
||||
}
|
||||
|
||||
&:not(.p-disabled):not(.p-highlight):hover {
|
||||
background: $toggleButtonHoverBg;
|
||||
border-color: $toggleButtonHoverBorderColor;
|
||||
color: $toggleButtonTextHoverColor;
|
||||
|
||||
.p-button-icon-left,
|
||||
.p-button-icon-right {
|
||||
color: $toggleButtonIconHoverColor;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
background: $toggleButtonActiveBg;
|
||||
border-color: $toggleButtonActiveBorderColor;
|
||||
color: $toggleButtonTextActiveColor;
|
||||
|
||||
.p-button-icon-left,
|
||||
.p-button-icon-right {
|
||||
color: $toggleButtonIconActiveColor;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $toggleButtonActiveHoverBg;
|
||||
border-color: $toggleButtonActiveHoverBorderColor;
|
||||
color: $toggleButtonTextActiveHoverColor;
|
||||
|
||||
.p-button-icon-left,
|
||||
.p-button-icon-right {
|
||||
color: $toggleButtonIconColor;
|
||||
}
|
||||
|
||||
&:not(.p-disabled):not(.p-highlight):hover {
|
||||
background: $toggleButtonHoverBg;
|
||||
border-color: $toggleButtonHoverBorderColor;
|
||||
color: $toggleButtonTextHoverColor;
|
||||
|
||||
.p-button-icon-left,
|
||||
.p-button-icon-right {
|
||||
color: $toggleButtonIconHoverColor;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
background: $toggleButtonActiveBg;
|
||||
border-color: $toggleButtonActiveBorderColor;
|
||||
color: $toggleButtonTextActiveColor;
|
||||
|
||||
.p-button-icon-left,
|
||||
.p-button-icon-right {
|
||||
color: $toggleButtonIconActiveColor;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $toggleButtonActiveHoverBg;
|
||||
border-color: $toggleButtonActiveHoverBorderColor;
|
||||
color: $toggleButtonTextActiveHoverColor;
|
||||
|
||||
.p-button-icon-left,
|
||||
.p-button-icon-right {
|
||||
color: $toggleButtonIconActiveHoverColor;
|
||||
}
|
||||
}
|
||||
color: $toggleButtonIconActiveHoverColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-invalid > .p-button {
|
||||
@include invalid-input();
|
||||
}
|
||||
}
|
||||
&.p-invalid > .p-button {
|
||||
@include invalid-input();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,91 +1,91 @@
|
||||
@use 'sass:math';
|
||||
@use "sass:math";
|
||||
|
||||
// core
|
||||
.p-slider {
|
||||
position: relative;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.p-slider .p-slider-handle {
|
||||
cursor: grab;
|
||||
touch-action: none;
|
||||
display: block;
|
||||
cursor: grab;
|
||||
touch-action: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.p-slider-range {
|
||||
display: block;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.p-slider-horizontal .p-slider-range {
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.p-slider-horizontal .p-slider-handle {
|
||||
top: 50%;
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
.p-slider-vertical {
|
||||
height: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.p-slider-vertical .p-slider-handle {
|
||||
left: 50%;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
.p-slider-vertical .p-slider-range {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// theme
|
||||
.p-slider {
|
||||
background: $sliderBg;
|
||||
border: $sliderBorder;
|
||||
border-radius: $borderRadius;
|
||||
background: $sliderBg;
|
||||
border: $sliderBorder;
|
||||
border-radius: $borderRadius;
|
||||
|
||||
&.p-slider-horizontal {
|
||||
height: $sliderHorizontalHeight;
|
||||
|
||||
.p-slider-handle {
|
||||
margin-top: math.div(-1 * $sliderHandleHeight, 2);
|
||||
margin-left: math.div(-1 * $sliderHandleWidth, 2);
|
||||
}
|
||||
}
|
||||
|
||||
&.p-slider-vertical {
|
||||
width: $sliderVerticalWidth;
|
||||
|
||||
.p-slider-handle {
|
||||
margin-left: math.div(-1 * $sliderHandleWidth, 2);
|
||||
margin-bottom: math.div(-1 * $sliderHandleHeight, 2);
|
||||
}
|
||||
}
|
||||
&.p-slider-horizontal {
|
||||
height: $sliderHorizontalHeight;
|
||||
|
||||
.p-slider-handle {
|
||||
height: $sliderHandleHeight;
|
||||
width: $sliderHandleWidth;
|
||||
background: $sliderHandleBg;
|
||||
border: $sliderHandleBorder;
|
||||
border-radius: $sliderHandleBorderRadius;
|
||||
transition: $formElementTransition;
|
||||
outline-color: transparent;
|
||||
|
||||
&:focus-visible {
|
||||
@include focused();
|
||||
}
|
||||
margin-top: math.div(-1 * $sliderHandleHeight, 2);
|
||||
margin-left: math.div(-1 * $sliderHandleWidth, 2);
|
||||
}
|
||||
}
|
||||
|
||||
.p-slider-range {
|
||||
background: $sliderRangeBg;
|
||||
border-radius: $borderRadius;
|
||||
}
|
||||
&.p-slider-vertical {
|
||||
width: $sliderVerticalWidth;
|
||||
|
||||
&:not(.p-disabled) {
|
||||
.p-slider-handle:hover {
|
||||
background: $sliderHandleHoverBg;
|
||||
border-color: $sliderHandleHoverBorderColor;
|
||||
}
|
||||
.p-slider-handle {
|
||||
margin-left: math.div(-1 * $sliderHandleWidth, 2);
|
||||
margin-bottom: math.div(-1 * $sliderHandleHeight, 2);
|
||||
}
|
||||
}
|
||||
|
||||
.p-slider-handle {
|
||||
height: $sliderHandleHeight;
|
||||
width: $sliderHandleWidth;
|
||||
background: $sliderHandleBg;
|
||||
border: $sliderHandleBorder;
|
||||
border-radius: $sliderHandleBorderRadius;
|
||||
transition: $formElementTransition;
|
||||
outline-color: transparent;
|
||||
|
||||
&:focus-visible {
|
||||
@include focused();
|
||||
}
|
||||
}
|
||||
|
||||
.p-slider-range {
|
||||
background: $sliderRangeBg;
|
||||
border-radius: $borderRadius;
|
||||
}
|
||||
|
||||
&:not(.p-disabled) {
|
||||
.p-slider-handle:hover {
|
||||
background: $sliderHandleHoverBg;
|
||||
border-color: $sliderHandleHoverBorderColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
// core
|
||||
.p-inputtextarea-resizable {
|
||||
overflow: hidden;
|
||||
resize: none;
|
||||
overflow: hidden;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.p-fluid .p-inputtextarea {
|
||||
width: 100%;
|
||||
}
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@@ -1,100 +1,100 @@
|
||||
// core
|
||||
.p-togglebutton {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
user-select: none;
|
||||
vertical-align: bottom;
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
user-select: none;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.p-togglebutton-input {
|
||||
cursor: pointer;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.p-togglebutton .p-button {
|
||||
flex: 1 1 auto;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
// theme
|
||||
.p-togglebutton {
|
||||
.p-togglebutton-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;
|
||||
border: $toggleButtonBorder;
|
||||
border-radius: $borderRadius;
|
||||
}
|
||||
.p-togglebutton-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;
|
||||
border: $toggleButtonBorder;
|
||||
border-radius: $borderRadius;
|
||||
}
|
||||
|
||||
.p-button {
|
||||
background: $toggleButtonBg;
|
||||
border: $toggleButtonBorder;
|
||||
color: $toggleButtonTextColor;
|
||||
transition: $formElementTransition;
|
||||
outline-color: transparent;
|
||||
|
||||
.p-button-icon-left,
|
||||
.p-button-icon-right {
|
||||
color: $toggleButtonIconColor;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
.p-button {
|
||||
background: $toggleButtonBg;
|
||||
border: $toggleButtonBorder;
|
||||
color: $toggleButtonTextColor;
|
||||
transition: $formElementTransition;
|
||||
outline-color: transparent;
|
||||
background: $toggleButtonActiveBg;
|
||||
border-color: $toggleButtonActiveBorderColor;
|
||||
color: $toggleButtonTextActiveColor;
|
||||
|
||||
.p-button-icon-left,
|
||||
.p-button-icon-right {
|
||||
color: $toggleButtonIconColor;
|
||||
}
|
||||
.p-button-icon-left,
|
||||
.p-button-icon-right {
|
||||
color: $toggleButtonIconActiveColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
&:not(.p-disabled) {
|
||||
&:has(.p-togglebutton-input:hover) {
|
||||
&:not(.p-highlight) {
|
||||
.p-button {
|
||||
background: $toggleButtonActiveBg;
|
||||
border-color: $toggleButtonActiveBorderColor;
|
||||
color: $toggleButtonTextActiveColor;
|
||||
background: $toggleButtonHoverBg;
|
||||
border-color: $toggleButtonHoverBorderColor;
|
||||
color: $toggleButtonTextHoverColor;
|
||||
|
||||
.p-button-icon-left,
|
||||
.p-button-icon-right {
|
||||
color: $toggleButtonIconActiveColor;
|
||||
}
|
||||
.p-button-icon-left,
|
||||
.p-button-icon-right {
|
||||
color: $toggleButtonIconHoverColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
.p-button {
|
||||
background: $toggleButtonActiveHoverBg;
|
||||
border-color: $toggleButtonActiveHoverBorderColor;
|
||||
color: $toggleButtonTextActiveHoverColor;
|
||||
|
||||
.p-button-icon-left,
|
||||
.p-button-icon-right {
|
||||
color: $toggleButtonIconActiveHoverColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.p-disabled) {
|
||||
&:has(.p-togglebutton-input:hover) {
|
||||
&:not(.p-highlight) {
|
||||
.p-button {
|
||||
background: $toggleButtonHoverBg;
|
||||
border-color: $toggleButtonHoverBorderColor;
|
||||
color: $toggleButtonTextHoverColor;
|
||||
|
||||
.p-button-icon-left,
|
||||
.p-button-icon-right {
|
||||
color: $toggleButtonIconHoverColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
.p-button {
|
||||
background: $toggleButtonActiveHoverBg;
|
||||
border-color: $toggleButtonActiveHoverBorderColor;
|
||||
color: $toggleButtonTextActiveHoverColor;
|
||||
|
||||
.p-button-icon-left,
|
||||
.p-button-icon-right {
|
||||
color: $toggleButtonIconActiveHoverColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:has(.p-togglebutton-input:focus-visible) {
|
||||
.p-button {
|
||||
@include focused-input();
|
||||
}
|
||||
}
|
||||
&:has(.p-togglebutton-input:focus-visible) {
|
||||
.p-button {
|
||||
@include focused-input();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-invalid > .p-button {
|
||||
@include invalid-input();
|
||||
}
|
||||
}
|
||||
&.p-invalid > .p-button {
|
||||
@include invalid-input();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,157 +2,156 @@
|
||||
|
||||
// core
|
||||
.p-treeselect {
|
||||
display: inline-flex;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
display: inline-flex;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.p-treeselect-trigger {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.p-treeselect-label-container {
|
||||
overflow: hidden;
|
||||
flex: 1 1 auto;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
flex: 1 1 auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.p-treeselect-label {
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.p-treeselect-label-empty {
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.p-treeselect-token {
|
||||
cursor: default;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
flex: 0 0 auto;
|
||||
cursor: default;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.p-treeselect .p-treeselect-panel {
|
||||
min-width: 100%;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.p-treeselect-items-wrapper {
|
||||
overflow: auto;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.p-fluid .p-treeselect {
|
||||
display: flex;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
// theme
|
||||
.p-treeselect {
|
||||
background: $inputBg;
|
||||
border: $inputBorder;
|
||||
transition: $formElementTransition;
|
||||
border-radius: $borderRadius;
|
||||
outline-color: transparent;
|
||||
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 {
|
||||
border-color: $inputHoverBorderColor;
|
||||
background-color: $inputFilledHoverBg;
|
||||
}
|
||||
|
||||
&:not(.p-disabled).p-focus {
|
||||
@include focused-input();
|
||||
background-color: $inputFilledFocusBg;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-variant-filled {
|
||||
background: $inputFilledBg;
|
||||
.p-treeselect-label {
|
||||
padding: $inputPadding;
|
||||
transition: $formElementTransition;
|
||||
|
||||
&:not(.p-disabled):hover {
|
||||
background-color: $inputFilledHoverBg;
|
||||
}
|
||||
|
||||
&:not(.p-disabled).p-focus {
|
||||
background-color: $inputFilledFocusBg;
|
||||
}
|
||||
&.p-placeholder {
|
||||
color: $inputPlaceholderTextColor;
|
||||
}
|
||||
}
|
||||
|
||||
.p-treeselect-label {
|
||||
padding: $inputPadding;
|
||||
transition: $formElementTransition;
|
||||
|
||||
&.p-placeholder {
|
||||
color: $inputPlaceholderTextColor;
|
||||
}
|
||||
&.p-treeselect-chip {
|
||||
.p-treeselect-token {
|
||||
padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
|
||||
margin-right: $inlineSpacing;
|
||||
background: $chipBg;
|
||||
color: $chipTextColor;
|
||||
border-radius: $chipBorderRadius;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-treeselect-chip {
|
||||
.p-treeselect-token {
|
||||
padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
|
||||
margin-right: $inlineSpacing;
|
||||
background: $chipBg;
|
||||
color: $chipTextColor;
|
||||
border-radius: $chipBorderRadius;
|
||||
}
|
||||
}
|
||||
.p-treeselect-trigger {
|
||||
background: transparent;
|
||||
color: $inputIconColor;
|
||||
width: $inputGroupAddOnMinWidth;
|
||||
border-top-right-radius: $borderRadius;
|
||||
border-bottom-right-radius: $borderRadius;
|
||||
}
|
||||
|
||||
.p-treeselect-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-invalid.p-component {
|
||||
@include invalid-input();
|
||||
}
|
||||
}
|
||||
|
||||
.p-inputwrapper-filled {
|
||||
&.p-treeselect {
|
||||
&.p-treeselect-chip {
|
||||
.p-treeselect-label {
|
||||
padding: math.div(nth($inputPadding, 1), 2)
|
||||
nth($inputPadding, 2);
|
||||
}
|
||||
}
|
||||
&.p-treeselect {
|
||||
&.p-treeselect-chip {
|
||||
.p-treeselect-label {
|
||||
padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-treeselect-panel {
|
||||
background: $inputOverlayBg;
|
||||
color: $inputListTextColor;
|
||||
border: $inputOverlayBorder;
|
||||
border-radius: $borderRadius;
|
||||
box-shadow: $inputOverlayShadow;
|
||||
background: $inputOverlayBg;
|
||||
color: $inputListTextColor;
|
||||
border: $inputOverlayBorder;
|
||||
border-radius: $borderRadius;
|
||||
box-shadow: $inputOverlayShadow;
|
||||
|
||||
.p-treeselect-items-wrapper {
|
||||
.p-tree {
|
||||
border: 0 none;
|
||||
}
|
||||
|
||||
.p-treeselect-empty-message {
|
||||
padding: $inputListItemPadding;
|
||||
color: $inputListItemTextColor;
|
||||
background: $inputListItemBg;
|
||||
}
|
||||
.p-treeselect-items-wrapper {
|
||||
.p-tree {
|
||||
border: 0 none;
|
||||
}
|
||||
|
||||
.p-treeselect-empty-message {
|
||||
padding: $inputListItemPadding;
|
||||
color: $inputListItemTextColor;
|
||||
background: $inputListItemBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-input-filled {
|
||||
.p-treeselect {
|
||||
background: $inputFilledBg;
|
||||
.p-treeselect {
|
||||
background: $inputFilledBg;
|
||||
|
||||
&:not(.p-disabled):hover {
|
||||
background-color: $inputFilledHoverBg;
|
||||
}
|
||||
|
||||
&:not(.p-disabled).p-focus {
|
||||
background-color: $inputFilledFocusBg;
|
||||
}
|
||||
&:not(.p-disabled):hover {
|
||||
background-color: $inputFilledHoverBg;
|
||||
}
|
||||
|
||||
&:not(.p-disabled).p-focus {
|
||||
background-color: $inputFilledFocusBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,46 +1,46 @@
|
||||
// core
|
||||
.p-checkbox {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
user-select: none;
|
||||
vertical-align: bottom;
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
user-select: none;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.p-checkbox-input {
|
||||
cursor: pointer;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.p-checkbox-box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
// theme
|
||||
.p-tristatecheckbox {
|
||||
&.p-variant-filled {
|
||||
&.p-variant-filled {
|
||||
.p-checkbox-box {
|
||||
background-color: $inputFilledBg;
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
.p-checkbox-box {
|
||||
background: $checkboxActiveBg;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.p-disabled) {
|
||||
&:has(.p-checkbox-input:hover) {
|
||||
.p-checkbox-box {
|
||||
background-color: $inputFilledBg;
|
||||
background-color: $inputFilledHoverBg;
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
.p-checkbox-box {
|
||||
background: $checkboxActiveBg;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.p-disabled) {
|
||||
&:has(.p-checkbox-input:hover) {
|
||||
.p-checkbox-box {
|
||||
background-color: $inputFilledHoverBg;
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
.p-checkbox-box {
|
||||
background: $checkboxActiveHoverBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
.p-checkbox-box {
|
||||
background: $checkboxActiveHoverBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user