Initial commit
This commit is contained in:
dahoud
95
public/theme/theme-base/components/input/_autocomplete.scss
Normal file
95
public/theme/theme-base/components/input/_autocomplete.scss
Normal file
@@ -0,0 +1,95 @@
|
||||
@use 'sass:math';
|
||||
|
||||
.p-autocomplete {
|
||||
.p-autocomplete-loader {
|
||||
right: nth($inputPadding, 2);
|
||||
}
|
||||
|
||||
&.p-autocomplete-dd {
|
||||
.p-autocomplete-loader {
|
||||
right: nth($inputPadding, 2) + $buttonIconOnlyWidth;
|
||||
}
|
||||
}
|
||||
|
||||
.p-autocomplete-multiple-container {
|
||||
padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
|
||||
gap: $inlineSpacing;
|
||||
|
||||
&:not(.p-disabled):hover {
|
||||
border-color: $inputHoverBorderColor;
|
||||
}
|
||||
|
||||
&:not(.p-disabled).p-focus {
|
||||
@include focused-input();
|
||||
}
|
||||
|
||||
.p-autocomplete-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-autocomplete-token {
|
||||
padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
|
||||
margin-right: $inlineSpacing;
|
||||
background: $highlightBg;
|
||||
color: $highlightTextColor;
|
||||
border-radius: $borderRadius;
|
||||
|
||||
.p-autocomplete-token-icon {
|
||||
margin-left: $inlineSpacing;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-invalid.p-component > .p-inputtext {
|
||||
@include invalid-input();
|
||||
}
|
||||
}
|
||||
|
||||
.p-autocomplete-panel {
|
||||
background: $inputOverlayBg;
|
||||
color: $inputListTextColor;
|
||||
border: $inputOverlayBorder;
|
||||
border-radius: $borderRadius;
|
||||
box-shadow: $inputOverlayShadow;
|
||||
|
||||
.p-autocomplete-items {
|
||||
padding: $inputListPadding;
|
||||
|
||||
.p-autocomplete-item {
|
||||
margin: $inputListItemMargin;
|
||||
padding: $inputListItemPadding;
|
||||
border: $inputListItemBorder;
|
||||
color: $inputListItemTextColor;
|
||||
background: $inputListItemBg;
|
||||
transition: $listItemTransition;
|
||||
border-radius: $inputListItemBorderRadius;
|
||||
|
||||
&:hover {
|
||||
color: $inputListItemTextHoverColor;
|
||||
background: $inputListItemHoverBg;
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
color: $highlightTextColor;
|
||||
background: $highlightBg;
|
||||
}
|
||||
}
|
||||
|
||||
.p-autocomplete-item-group {
|
||||
margin: $submenuHeaderMargin;
|
||||
padding: $submenuHeaderPadding;
|
||||
color: $submenuHeaderTextColor;
|
||||
background: $submenuHeaderBg;
|
||||
font-weight: $submenuHeaderFontWeight;
|
||||
}
|
||||
}
|
||||
}
|
||||
246
public/theme/theme-base/components/input/_calendar.scss
Normal file
246
public/theme/theme-base/components/input/_calendar.scss
Normal file
@@ -0,0 +1,246 @@
|
||||
.p-calendar {
|
||||
&.p-invalid.p-component > .p-inputtext {
|
||||
@include invalid-input();
|
||||
}
|
||||
}
|
||||
|
||||
.p-datepicker {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
transition: $actionIconTransition;
|
||||
font-weight: $calendarHeaderFontWeight;
|
||||
padding: $calendarHeaderCellPadding;
|
||||
|
||||
&:enabled:hover {
|
||||
color: $calendarMonthYearHeaderHoverTextColor;
|
||||
}
|
||||
}
|
||||
|
||||
.p-datepicker-month {
|
||||
margin-right: $inlineSpacing;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
font-size: $fontSize;
|
||||
margin: $calendarTableMargin;
|
||||
|
||||
th {
|
||||
padding: $calendarHeaderCellPadding;
|
||||
|
||||
> span {
|
||||
width: $calendarCellDateWidth;
|
||||
height: $calendarCellDateHeight;
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
padding: $calendarCellDatePadding;
|
||||
|
||||
> span {
|
||||
width: $calendarCellDateWidth;
|
||||
height: $calendarCellDateHeight;
|
||||
border-radius: $calendarCellDateBorderRadius;
|
||||
transition: $listItemTransition;
|
||||
border: $calendarCellDateBorder;
|
||||
|
||||
&.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: .2em;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: $calendarTimePickerTimeFontSize;
|
||||
}
|
||||
|
||||
> div {
|
||||
padding: $calendarTimePickerElementPadding;
|
||||
}
|
||||
}
|
||||
|
||||
&.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;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
border-left: 0 none; }
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.p-disabled) {
|
||||
table {
|
||||
td {
|
||||
span:not(.p-highlight):not(.p-disabled) {
|
||||
&:hover {
|
||||
background: $calendarCellDateHoverBg;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@include focused();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-monthpicker {
|
||||
.p-monthpicker-month {
|
||||
&:not(.p-disabled) {
|
||||
&:not(.p-highlight):hover {
|
||||
background: $calendarCellDateHoverBg;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@include focused();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-yearpicker {
|
||||
.p-yearpicker-year {
|
||||
&:not(.p-disabled) {
|
||||
&:not(.p-highlight):hover {
|
||||
background: $calendarCellDateHoverBg;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@include focused();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media screen and (max-width: $calendarBreakpoint) {
|
||||
.p-datepicker {
|
||||
table {
|
||||
th, td {
|
||||
padding: $calendarCellDatePaddingSM;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
103
public/theme/theme-base/components/input/_cascadeselect.scss
Normal file
103
public/theme/theme-base/components/input/_cascadeselect.scss
Normal file
@@ -0,0 +1,103 @@
|
||||
.p-cascadeselect {
|
||||
background: $inputBg;
|
||||
border: $inputBorder;
|
||||
transition: $formElementTransition;
|
||||
border-radius: $borderRadius;
|
||||
|
||||
&:not(.p-disabled):hover {
|
||||
border-color: $inputHoverBorderColor;
|
||||
}
|
||||
|
||||
&:not(.p-disabled).p-focus {
|
||||
@include focused-input();
|
||||
}
|
||||
|
||||
.p-cascadeselect-label {
|
||||
background: transparent;
|
||||
border: 0 none;
|
||||
padding: $inputPadding;
|
||||
|
||||
&.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-cascadeselect-panel {
|
||||
background: $inputOverlayBg;
|
||||
color: $inputListTextColor;
|
||||
border: $inputOverlayBorder;
|
||||
border-radius: $borderRadius;
|
||||
box-shadow: $inputOverlayShadow;
|
||||
|
||||
.p-cascadeselect-items {
|
||||
padding: $inputListPadding;
|
||||
|
||||
.p-cascadeselect-item {
|
||||
margin: $inputListItemMargin;
|
||||
border: $inputListItemBorder;
|
||||
color: $inputListItemTextColor;
|
||||
background: $inputListItemBg;
|
||||
transition: $listItemTransition;
|
||||
border-radius: $inputListItemBorderRadius;
|
||||
|
||||
.p-cascadeselect-item-content {
|
||||
padding: $inputListItemPadding;
|
||||
|
||||
&:focus {
|
||||
@include focused-listitem();
|
||||
}
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
color: $highlightTextColor;
|
||||
background: $highlightBg;
|
||||
}
|
||||
|
||||
&:not(.p-highlight):not(.p-disabled):hover {
|
||||
color: $inputListItemTextHoverColor;
|
||||
background: $inputListItemHoverBg;
|
||||
}
|
||||
|
||||
.p-cascadeselect-group-icon {
|
||||
font-size: $menuitemSubmenuIconFontSize;
|
||||
|
||||
&.p-icon {
|
||||
width: $menuitemSubmenuIconFontSize;
|
||||
height: $menuitemSubmenuIconFontSize;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-input-filled {
|
||||
.p-cascadeselect {
|
||||
background: $inputFilledBg;
|
||||
|
||||
&:not(.p-disabled):hover {
|
||||
background-color: $inputFilledHoverBg;
|
||||
}
|
||||
|
||||
&:not(.p-disabled).p-focus {
|
||||
background-color: $inputFilledFocusBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
92
public/theme/theme-base/components/input/_checkbox.scss
Normal file
92
public/theme/theme-base/components/input/_checkbox.scss
Normal file
@@ -0,0 +1,92 @@
|
||||
.p-checkbox {
|
||||
width: $checkboxWidth;
|
||||
height: $checkboxHeight;
|
||||
|
||||
.p-checkbox-box {
|
||||
border: $checkboxBorder;
|
||||
background: $inputBg;
|
||||
width: $checkboxWidth;
|
||||
height: $checkboxHeight;
|
||||
color: $textColor;
|
||||
border-radius: $borderRadius;
|
||||
transition: $formElementTransition;
|
||||
|
||||
.p-checkbox-icon {
|
||||
transition-duration: $transitionDuration;
|
||||
color: $checkboxIconActiveColor;
|
||||
font-size: $checkboxIconFontSize;
|
||||
|
||||
&.p-icon {
|
||||
width: $checkboxIconFontSize;
|
||||
height: $checkboxIconFontSize;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
border-color: $checkboxActiveBorderColor;
|
||||
background: $checkboxActiveBg;
|
||||
|
||||
&:not(.p-disabled):hover {
|
||||
border-color: $checkboxActiveHoverBorderColor;
|
||||
background: $checkboxActiveHoverBg;
|
||||
color: $checkboxIconActiveHoverColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.p-checkbox-disabled) {
|
||||
.p-checkbox-box {
|
||||
&:hover {
|
||||
border-color: $inputHoverBorderColor;
|
||||
}
|
||||
|
||||
&.p-focus {
|
||||
@include focused-input();
|
||||
}
|
||||
|
||||
&.p-highlight:hover {
|
||||
border-color: $checkboxActiveHoverBorderColor;
|
||||
background: $checkboxActiveHoverBg;
|
||||
color: $checkboxIconActiveHoverColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-invalid > .p-checkbox-box {
|
||||
@include invalid-input();
|
||||
}
|
||||
}
|
||||
|
||||
.p-input-filled {
|
||||
.p-checkbox {
|
||||
.p-checkbox-box {
|
||||
background-color: $inputFilledBg;
|
||||
|
||||
&.p-highlight {
|
||||
background: $checkboxActiveBg;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.p-checkbox-disabled) {
|
||||
.p-checkbox-box {
|
||||
&:hover {
|
||||
background-color: $inputFilledHoverBg;
|
||||
}
|
||||
|
||||
&.p-highlight:hover {
|
||||
background: $checkboxActiveHoverBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@if ($highlightBg == $checkboxActiveBg) {
|
||||
.p-highlight {
|
||||
.p-checkbox {
|
||||
.p-checkbox-box {
|
||||
border-color: $checkboxIconActiveColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
45
public/theme/theme-base/components/input/_chips.scss
Normal file
45
public/theme/theme-base/components/input/_chips.scss
Normal file
@@ -0,0 +1,45 @@
|
||||
@use 'sass:math';
|
||||
|
||||
.p-chips {
|
||||
.p-chips-multiple-container {
|
||||
padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
|
||||
gap: $inlineSpacing;
|
||||
|
||||
&:not(.p-disabled):hover {
|
||||
border-color: $inputHoverBorderColor;
|
||||
}
|
||||
|
||||
&:not(.p-disabled).p-focus {
|
||||
@include focused-input();
|
||||
}
|
||||
|
||||
.p-chips-token {
|
||||
padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
|
||||
margin-right: $inlineSpacing;
|
||||
background: $highlightBg;
|
||||
color: $chipTextColor;
|
||||
border-radius: $chipBorderRadius;
|
||||
|
||||
.p-chips-token-icon {
|
||||
margin-left: $inlineSpacing;
|
||||
}
|
||||
}
|
||||
|
||||
.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();
|
||||
}
|
||||
}
|
||||
18
public/theme/theme-base/components/input/_colorpicker.scss
Normal file
18
public/theme/theme-base/components/input/_colorpicker.scss
Normal file
@@ -0,0 +1,18 @@
|
||||
.p-colorpicker-preview {
|
||||
width: $colorPickerPreviewWidth;
|
||||
height: $colorPickerPreviewHeight;
|
||||
}
|
||||
|
||||
.p-colorpicker-panel {
|
||||
background: $colorPickerBg;
|
||||
border: $colorPickerBorder;
|
||||
|
||||
.p-colorpicker-color-handle,
|
||||
.p-colorpicker-hue-handle {
|
||||
border-color: $colorPickerHandleColor;
|
||||
}
|
||||
}
|
||||
|
||||
.p-colorpicker-overlay-panel {
|
||||
box-shadow: $inputOverlayShadow;
|
||||
}
|
||||
146
public/theme/theme-base/components/input/_dropdown.scss
Normal file
146
public/theme/theme-base/components/input/_dropdown.scss
Normal file
@@ -0,0 +1,146 @@
|
||||
.p-dropdown {
|
||||
background: $inputBg;
|
||||
border: $inputBorder;
|
||||
transition: $formElementTransition;
|
||||
border-radius: $borderRadius;
|
||||
|
||||
&:not(.p-disabled):hover {
|
||||
border-color: $inputHoverBorderColor;
|
||||
}
|
||||
|
||||
&:not(.p-disabled).p-focus {
|
||||
@include focused-input();
|
||||
}
|
||||
|
||||
&.p-dropdown-clearable {
|
||||
.p-dropdown-label {
|
||||
padding-right: nth($inputPadding, 2) + $primeIconFontSize;
|
||||
}
|
||||
}
|
||||
|
||||
.p-dropdown-label {
|
||||
background: transparent;
|
||||
border: 0 none;
|
||||
|
||||
&.p-placeholder {
|
||||
color: $inputPlaceholderTextColor;
|
||||
}
|
||||
|
||||
&:enabled:focus {
|
||||
outline: 0 none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.p-dropdown-trigger {
|
||||
background: transparent;
|
||||
color: $inputIconColor;
|
||||
width: $inputGroupAddOnMinWidth;
|
||||
border-top-right-radius: $borderRadius;
|
||||
border-bottom-right-radius: $borderRadius;
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
.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-clearable-filter {
|
||||
.p-dropdown-filter {
|
||||
padding-right: 2 * (nth($inputPadding, 2) + $primeIconFontSize);
|
||||
margin-right: -2 * (nth($inputPadding, 2) + $primeIconFontSize);
|
||||
}
|
||||
|
||||
.p-dropdown-filter-clear-icon {
|
||||
right: (2 * 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;
|
||||
|
||||
&.p-highlight {
|
||||
color: $highlightTextColor;
|
||||
background: $highlightBg;
|
||||
}
|
||||
|
||||
&:not(.p-highlight):not(.p-disabled):hover {
|
||||
color: $inputListItemTextHoverColor;
|
||||
background: $inputListItemHoverBg;
|
||||
}
|
||||
}
|
||||
|
||||
.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-input-filled {
|
||||
.p-dropdown {
|
||||
background: $inputFilledBg;
|
||||
|
||||
&:not(.p-disabled):hover {
|
||||
background-color: $inputFilledHoverBg;
|
||||
}
|
||||
|
||||
&:not(.p-disabled).p-focus {
|
||||
background-color: $inputFilledFocusBg;
|
||||
|
||||
.p-inputtext {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
122
public/theme/theme-base/components/input/_editor.scss
Normal file
122
public/theme/theme-base/components/input/_editor.scss
Normal file
@@ -0,0 +1,122 @@
|
||||
.p-editor-container {
|
||||
.p-editor-toolbar {
|
||||
background: $editorToolbarBg;
|
||||
border-top-right-radius: $borderRadius;
|
||||
border-top-left-radius: $borderRadius;
|
||||
|
||||
&.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: $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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-editor-content {
|
||||
border-bottom-right-radius: $borderRadius;
|
||||
border-bottom-left-radius: $borderRadius;
|
||||
|
||||
&.ql-snow {
|
||||
border: $editorContentBorder;
|
||||
}
|
||||
|
||||
.ql-editor {
|
||||
background: $inputBg;
|
||||
color: $inputTextColor;
|
||||
border-bottom-right-radius: $borderRadius;
|
||||
border-bottom-left-radius: $borderRadius;
|
||||
}
|
||||
}
|
||||
|
||||
.ql-snow.ql-toolbar button:hover,
|
||||
.ql-snow.ql-toolbar button:focus {
|
||||
color: $editorToolbarIconHoverColor;
|
||||
|
||||
.ql-stroke {
|
||||
stroke: $editorToolbarIconHoverColor;
|
||||
}
|
||||
|
||||
.ql-fill {
|
||||
fill: $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-stroke {
|
||||
stroke: $editorIconActiveColor;
|
||||
}
|
||||
|
||||
.ql-fill {
|
||||
fill: $editorIconActiveColor;
|
||||
}
|
||||
|
||||
.ql-picker-label {
|
||||
color: $editorIconActiveColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
74
public/theme/theme-base/components/input/_inputgroup.scss
Normal file
74
public/theme/theme-base/components/input/_inputgroup.scss
Normal file
@@ -0,0 +1,74 @@
|
||||
.p-inputgroup-addon {
|
||||
background: $inputGroupBg;
|
||||
color: $inputGroupTextColor;
|
||||
border-top: $inputBorder;
|
||||
border-left: $inputBorder;
|
||||
border-bottom: $inputBorder;
|
||||
padding: $inputPadding;
|
||||
min-width: $inputGroupAddOnMinWidth;
|
||||
|
||||
&:last-child {
|
||||
border-right: $inputBorder;
|
||||
}
|
||||
}
|
||||
|
||||
.p-inputgroup {
|
||||
> .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:first-child,
|
||||
.p-inputgroup button:first-child,
|
||||
.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;
|
||||
}
|
||||
|
||||
.p-inputgroup .p-float-label:first-child input {
|
||||
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-inputtext {
|
||||
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;
|
||||
}
|
||||
|
||||
.p-fluid {
|
||||
.p-inputgroup {
|
||||
.p-button {
|
||||
width: auto;
|
||||
|
||||
&.p-button-icon-only {
|
||||
width: $buttonIconOnlyWidth;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
.p-inputnumber {
|
||||
&.p-invalid.p-component > .p-inputtext {
|
||||
@include invalid-input();
|
||||
}
|
||||
}
|
||||
62
public/theme/theme-base/components/input/_inputswitch.scss
Normal file
62
public/theme/theme-base/components/input/_inputswitch.scss
Normal file
@@ -0,0 +1,62 @@
|
||||
@use 'sass:math';
|
||||
|
||||
.p-inputswitch {
|
||||
width: $inputSwitchWidth;
|
||||
height: $inputSwitchHeight;
|
||||
|
||||
.p-inputswitch-slider {
|
||||
background: $inputSwitchSliderOffBg;
|
||||
transition: $formElementTransition;
|
||||
border-radius: $inputSwitchBorderRadius;
|
||||
|
||||
&:before {
|
||||
background: $inputSwitchHandleOffBg;
|
||||
width: $inputSwitchHandleWidth;
|
||||
height: $inputSwitchHandleHeight;
|
||||
left: $inputSwitchSliderPadding;
|
||||
margin-top: math.div(-1 * $inputSwitchHandleHeight, 2);
|
||||
border-radius: $inputSwitchHandleBorderRadius;
|
||||
transition-duration: $transitionDuration;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-inputswitch-checked {
|
||||
.p-inputswitch-slider:before {
|
||||
transform: translateX($inputSwitchHandleWidth);
|
||||
}
|
||||
}
|
||||
|
||||
&.p-focus {
|
||||
.p-inputswitch-slider {
|
||||
@include focused();
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.p-disabled):hover {
|
||||
.p-inputswitch-slider {
|
||||
background: $inputSwitchSliderOffHoverBg;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-inputswitch-checked {
|
||||
.p-inputswitch-slider {
|
||||
background: $inputSwitchSliderOnBg;
|
||||
|
||||
&:before {
|
||||
background: $inputSwitchHandleOnBg;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.p-disabled):hover {
|
||||
.p-inputswitch-slider {
|
||||
background: $inputSwitchSliderOnHoverBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-invalid {
|
||||
.p-inputswitch-slider {
|
||||
@include invalid-input();
|
||||
}
|
||||
}
|
||||
}
|
||||
102
public/theme/theme-base/components/input/_inputtext.scss
Normal file
102
public/theme/theme-base/components/input/_inputtext.scss
Normal file
@@ -0,0 +1,102 @@
|
||||
.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;
|
||||
|
||||
&:enabled:hover {
|
||||
border-color: $inputHoverBorderColor;
|
||||
}
|
||||
|
||||
&:enabled:focus {
|
||||
@include focused-input();
|
||||
}
|
||||
|
||||
&.p-invalid.p-component {
|
||||
@include invalid-input();
|
||||
}
|
||||
|
||||
&.p-inputtext-sm {
|
||||
@include scaledFontSize($inputTextFontSize, $scaleSM);
|
||||
@include scaledPadding($inputPadding, $scaleSM);
|
||||
}
|
||||
|
||||
&.p-inputtext-lg {
|
||||
@include scaledFontSize($inputTextFontSize, $scaleLG);
|
||||
@include scaledPadding($inputPadding, $scaleLG);
|
||||
}
|
||||
}
|
||||
|
||||
.p-float-label > label {
|
||||
left: nth($inputPadding, 2);
|
||||
color: $inputPlaceholderTextColor;
|
||||
transition-duration: $transitionDuration;
|
||||
}
|
||||
|
||||
.p-float-label > label.p-error {
|
||||
color: $errorColor;
|
||||
}
|
||||
|
||||
.p-input-icon-left > i:first-of-type,
|
||||
.p-input-icon-left > svg:first-of-type,
|
||||
.p-input-icon-left > .p-input-prefix {
|
||||
left: nth($inputPadding, 2);
|
||||
color: $inputIconColor;
|
||||
}
|
||||
|
||||
.p-input-icon-left > .p-inputtext {
|
||||
padding-left: nth($inputPadding, 2) * 2 + $primeIconFontSize;
|
||||
}
|
||||
|
||||
.p-input-icon-left.p-float-label > label {
|
||||
left: nth($inputPadding, 2) * 2 + $primeIconFontSize;
|
||||
}
|
||||
|
||||
.p-input-icon-right > i:last-of-type,
|
||||
.p-input-icon-right > svg:last-of-type,
|
||||
.p-input-icon-right > .p-input-suffix {
|
||||
right: nth($inputPadding, 2);
|
||||
color: $inputIconColor;
|
||||
}
|
||||
|
||||
.p-input-icon-right > .p-inputtext {
|
||||
padding-right: nth($inputPadding, 2) * 2 + $primeIconFontSize;
|
||||
}
|
||||
|
||||
@include placeholder {
|
||||
color: $inputPlaceholderTextColor
|
||||
};
|
||||
|
||||
.p-input-filled {
|
||||
.p-inputtext {
|
||||
background-color: $inputFilledBg;
|
||||
|
||||
&: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-lg {
|
||||
.p-inputtext {
|
||||
@include scaledFontSize($inputTextFontSize, $scaleLG);
|
||||
@include scaledPadding($inputPadding, $scaleLG);
|
||||
}
|
||||
}
|
||||
74
public/theme/theme-base/components/input/_listbox.scss
Normal file
74
public/theme/theme-base/components/input/_listbox.scss
Normal file
@@ -0,0 +1,74 @@
|
||||
.p-listbox {
|
||||
background: $inputListBg;
|
||||
color: $inputListTextColor;
|
||||
border: $inputListBorder;
|
||||
border-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-list {
|
||||
padding: $inputListPadding;
|
||||
|
||||
.p-listbox-item {
|
||||
margin: $inputListItemMargin;
|
||||
padding: $inputListItemPadding;
|
||||
border: $inputListItemBorder;
|
||||
color: $inputListItemTextColor;
|
||||
transition: $listItemTransition;
|
||||
border-radius: $inputListItemBorderRadius;
|
||||
|
||||
&.p-highlight {
|
||||
color: $highlightTextColor;
|
||||
background: $highlightBg;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@include focused-listitem();
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.p-disabled) {
|
||||
.p-listbox-item {
|
||||
&:not(.p-highlight):not(.p-disabled):hover {
|
||||
color: $inputListItemTextHoverColor;
|
||||
background: $inputListItemHoverBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-invalid {
|
||||
@include invalid-input();
|
||||
}
|
||||
}
|
||||
31
public/theme/theme-base/components/input/_mention.scss
Normal file
31
public/theme/theme-base/components/input/_mention.scss
Normal file
@@ -0,0 +1,31 @@
|
||||
.p-mention-panel {
|
||||
background: $inputOverlayBg;
|
||||
color: $inputListTextColor;
|
||||
border: $inputOverlayBorder;
|
||||
border-radius: $borderRadius;
|
||||
box-shadow: $inputOverlayShadow;
|
||||
|
||||
.p-mention-items {
|
||||
padding: $inputListPadding;
|
||||
|
||||
.p-mention-item {
|
||||
margin: $inputListItemMargin;
|
||||
padding: $inputListItemPadding;
|
||||
border: $inputListItemBorder;
|
||||
color: $inputListItemTextColor;
|
||||
background: $inputListItemBg;
|
||||
transition: $listItemTransition;
|
||||
border-radius: $inputListItemBorderRadius;
|
||||
|
||||
&:hover {
|
||||
color: $inputListItemTextHoverColor;
|
||||
background: $inputListItemHoverBg;
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
color: $highlightTextColor;
|
||||
background: $highlightBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
177
public/theme/theme-base/components/input/_multiselect.scss
Normal file
177
public/theme/theme-base/components/input/_multiselect.scss
Normal file
@@ -0,0 +1,177 @@
|
||||
@use 'sass:math';
|
||||
|
||||
.p-multiselect {
|
||||
background: $inputBg;
|
||||
border: $inputBorder;
|
||||
transition: $formElementTransition;
|
||||
border-radius: $borderRadius;
|
||||
|
||||
&:not(.p-disabled):hover {
|
||||
border-color: $inputHoverBorderColor;
|
||||
}
|
||||
|
||||
&:not(.p-disabled).p-focus {
|
||||
@include focused-input();
|
||||
}
|
||||
|
||||
&.p-multiselect-clearable {
|
||||
.p-multiselect-label {
|
||||
padding-right: nth($inputPadding, 2) + $primeIconFontSize;
|
||||
}
|
||||
}
|
||||
|
||||
.p-multiselect-label {
|
||||
padding: $inputPadding;
|
||||
transition: $formElementTransition;
|
||||
|
||||
&.p-placeholder {
|
||||
color: $inputPlaceholderTextColor;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-multiselect-chip {
|
||||
.p-multiselect-token {
|
||||
padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
|
||||
margin-right: $inlineSpacing;
|
||||
background: $chipBg;
|
||||
color: $chipTextColor;
|
||||
border-radius: $chipBorderRadius;
|
||||
|
||||
.p-multiselect-token-icon {
|
||||
margin-left: $inlineSpacing;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-multiselect-trigger {
|
||||
background: transparent;
|
||||
color: $inputIconColor;
|
||||
width: $inputGroupAddOnMinWidth;
|
||||
border-top-right-radius: $borderRadius;
|
||||
border-bottom-right-radius: $borderRadius;
|
||||
}
|
||||
|
||||
.p-multiselect-clear-icon {
|
||||
color: $inputIconColor;
|
||||
right: $inputGroupAddOnMinWidth;
|
||||
}
|
||||
|
||||
&.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-items-label {
|
||||
padding: $inputPadding;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-multiselect-clearable {
|
||||
.p-multiselect-label {
|
||||
padding-right: nth($inputPadding, 2) + $primeIconFontSize;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-multiselect-panel {
|
||||
background: $inputOverlayBg;
|
||||
color: $inputListTextColor;
|
||||
border: $inputOverlayBorder;
|
||||
border-radius: $borderRadius;
|
||||
box-shadow: $inputOverlayShadow;
|
||||
|
||||
.p-multiselect-header {
|
||||
padding: $inputListHeaderPadding;
|
||||
border-bottom: $inputListHeaderBorder;
|
||||
color: $inputListHeaderTextColor;
|
||||
background: $inputOverlayHeaderBg;
|
||||
margin: $inputListHeaderMargin;
|
||||
border-top-right-radius: $borderRadius;
|
||||
border-top-left-radius: $borderRadius;
|
||||
|
||||
.p-multiselect-filter-container {
|
||||
margin: 0 $inlineSpacing;
|
||||
|
||||
.p-inputtext {
|
||||
padding-right: nth($inputPadding, 2) + $primeIconFontSize;
|
||||
}
|
||||
|
||||
.p-multiselect-filter-icon {
|
||||
right: nth($inputPadding, 2);
|
||||
color: $inputIconColor;
|
||||
}
|
||||
}
|
||||
|
||||
.p-multiselect-close {
|
||||
@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;
|
||||
|
||||
&.p-highlight {
|
||||
color: $highlightTextColor;
|
||||
background: $highlightBg;
|
||||
}
|
||||
|
||||
&:not(.p-highlight):not(.p-disabled):hover {
|
||||
color: $inputListItemTextHoverColor;
|
||||
background: $inputListItemHoverBg;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@include focused-listitem();
|
||||
}
|
||||
|
||||
.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-input-filled {
|
||||
.p-multiselect {
|
||||
background: $inputFilledBg;
|
||||
|
||||
&:not(.p-disabled):hover {
|
||||
background-color: $inputFilledHoverBg;
|
||||
}
|
||||
|
||||
&:not(.p-disabled).p-focus {
|
||||
background-color: $inputFilledFocusBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
33
public/theme/theme-base/components/input/_password.scss
Normal file
33
public/theme/theme-base/components/input/_password.scss
Normal file
@@ -0,0 +1,33 @@
|
||||
.p-password {
|
||||
&.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;
|
||||
|
||||
.p-password-meter {
|
||||
margin-bottom: $inlineSpacing;
|
||||
background: $passwordMeterBg;
|
||||
|
||||
.p-password-strength {
|
||||
&.weak {
|
||||
background: $passwordWeakBg;
|
||||
}
|
||||
|
||||
&.medium {
|
||||
background: $passwordMediumBg;
|
||||
}
|
||||
|
||||
&.strong {
|
||||
background: $passwordStrongBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
78
public/theme/theme-base/components/input/_radiobutton.scss
Normal file
78
public/theme/theme-base/components/input/_radiobutton.scss
Normal file
@@ -0,0 +1,78 @@
|
||||
.p-radiobutton {
|
||||
width: $radiobuttonWidth;
|
||||
height: $radiobuttonHeight;
|
||||
|
||||
.p-radiobutton-box {
|
||||
border: $radiobuttonBorder;
|
||||
background: $inputBg;
|
||||
width: $radiobuttonWidth;
|
||||
height: $radiobuttonHeight;
|
||||
color: $textColor;
|
||||
border-radius: 50%;
|
||||
transition: $formElementTransition;
|
||||
|
||||
&:not(.p-disabled):not(.p-highlight):hover {
|
||||
border-color: $inputHoverBorderColor;
|
||||
}
|
||||
|
||||
&:not(.p-disabled).p-focus {
|
||||
@include focused-input();
|
||||
}
|
||||
|
||||
.p-radiobutton-icon {
|
||||
width: $radiobuttonIconSize;
|
||||
height: $radiobuttonIconSize;
|
||||
transition-duration: $transitionDuration;
|
||||
background-color: $radiobuttonIconActiveColor;
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
border-color: $radiobuttonActiveBorderColor;
|
||||
background: $radiobuttonActiveBg;
|
||||
|
||||
&:not(.p-disabled):hover {
|
||||
border-color: $radiobuttonActiveHoverBorderColor;
|
||||
background: $radiobuttonActiveHoverBg;
|
||||
color: $radiobuttonIconActiveHoverColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-invalid > .p-radiobutton-box {
|
||||
@include invalid-input();
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 0 none;
|
||||
}
|
||||
}
|
||||
|
||||
.p-input-filled {
|
||||
.p-radiobutton {
|
||||
.p-radiobutton-box {
|
||||
background-color: $inputFilledBg;
|
||||
|
||||
&:not(.p-disabled):hover {
|
||||
background-color: $inputFilledHoverBg;
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
background: $radiobuttonActiveBg;
|
||||
|
||||
&:not(.p-disabled):hover {
|
||||
background: $radiobuttonActiveHoverBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@if ($highlightBg == $radiobuttonActiveBg) {
|
||||
.p-highlight {
|
||||
.p-radiobutton {
|
||||
.p-radiobutton-box {
|
||||
border-color: $radiobuttonIconActiveColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
60
public/theme/theme-base/components/input/_rating.scss
Normal file
60
public/theme/theme-base/components/input/_rating.scss
Normal file
@@ -0,0 +1,60 @@
|
||||
@use 'sass:math';
|
||||
|
||||
.p-rating {
|
||||
gap: $inlineSpacing;
|
||||
|
||||
.p-rating-item {
|
||||
.p-rating-icon {
|
||||
color: $ratingStarIconOffColor;
|
||||
transition: $formElementTransition;
|
||||
font-size: $ratingIconFontSize;
|
||||
|
||||
&.p-icon {
|
||||
width: $ratingIconFontSize;
|
||||
height: $ratingIconFontSize;
|
||||
}
|
||||
|
||||
&.p-rating-cancel {
|
||||
color: $ratingCancelIconColor;
|
||||
}
|
||||
}
|
||||
|
||||
&: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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@if ($highlightBg == $ratingStarIconOnColor) {
|
||||
.p-highlight {
|
||||
.p-rating {
|
||||
.p-rating-item {
|
||||
&.p-rating-item-active {
|
||||
.p-rating-icon {
|
||||
color: $highlightTextColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
50
public/theme/theme-base/components/input/_selectbutton.scss
Normal file
50
public/theme/theme-base/components/input/_selectbutton.scss
Normal file
@@ -0,0 +1,50 @@
|
||||
.p-selectbutton {
|
||||
.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: $toggleButtonIconActiveHoverColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-invalid > .p-button {
|
||||
@include invalid-input();
|
||||
}
|
||||
}
|
||||
49
public/theme/theme-base/components/input/_slider.scss
Normal file
49
public/theme/theme-base/components/input/_slider.scss
Normal file
@@ -0,0 +1,49 @@
|
||||
@use 'sass:math';
|
||||
|
||||
.p-slider {
|
||||
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-handle {
|
||||
height: $sliderHandleHeight;
|
||||
width: $sliderHandleWidth;
|
||||
background: $sliderHandleBg;
|
||||
border: $sliderHandleBorder;
|
||||
border-radius: $sliderHandleBorderRadius;
|
||||
transition: $formElementTransition;
|
||||
|
||||
&:focus {
|
||||
@include focused();
|
||||
}
|
||||
}
|
||||
|
||||
.p-slider-range {
|
||||
background: $sliderRangeBg;
|
||||
}
|
||||
|
||||
&:not(.p-disabled) {
|
||||
.p-slider-handle:hover {
|
||||
background: $sliderHandleHoverBg;
|
||||
border-color: $sliderHandleHoverBorderColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
48
public/theme/theme-base/components/input/_togglebutton.scss
Normal file
48
public/theme/theme-base/components/input/_togglebutton.scss
Normal file
@@ -0,0 +1,48 @@
|
||||
.p-togglebutton.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: $toggleButtonIconActiveHoverColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-invalid > .p-button {
|
||||
@include invalid-input();
|
||||
}
|
||||
}
|
||||
139
public/theme/theme-base/components/input/_treeselect.scss
Normal file
139
public/theme/theme-base/components/input/_treeselect.scss
Normal file
@@ -0,0 +1,139 @@
|
||||
@use 'sass:math';
|
||||
|
||||
.p-treeselect {
|
||||
background: $inputBg;
|
||||
border: $inputBorder;
|
||||
transition: $formElementTransition;
|
||||
border-radius: $borderRadius;
|
||||
|
||||
&:not(.p-disabled):hover {
|
||||
border-color: $inputHoverBorderColor;
|
||||
}
|
||||
|
||||
&:not(.p-disabled).p-focus {
|
||||
@include focused-input();
|
||||
}
|
||||
|
||||
&.p-treeselect-clearable {
|
||||
.p-treeselect-label {
|
||||
padding-right: nth($inputPadding, 2) + $primeIconFontSize;
|
||||
}
|
||||
}
|
||||
|
||||
.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-trigger {
|
||||
background: transparent;
|
||||
color: $inputIconColor;
|
||||
width: $inputGroupAddOnMinWidth;
|
||||
border-top-right-radius: $borderRadius;
|
||||
border-bottom-right-radius: $borderRadius;
|
||||
}
|
||||
|
||||
.p-treeselect-clear-icon {
|
||||
color: $inputIconColor;
|
||||
right: $inputGroupAddOnMinWidth;
|
||||
}
|
||||
|
||||
&.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-panel {
|
||||
background: $inputOverlayBg;
|
||||
color: $inputListTextColor;
|
||||
border: $inputOverlayBorder;
|
||||
border-radius: $borderRadius;
|
||||
box-shadow: $inputOverlayShadow;
|
||||
|
||||
.p-treeselect-header {
|
||||
padding: $inputListHeaderPadding;
|
||||
border-bottom: $inputListHeaderBorder;
|
||||
color: $inputListHeaderTextColor;
|
||||
background: $inputOverlayHeaderBg;
|
||||
margin: $inputListHeaderMargin;
|
||||
border-top-right-radius: $borderRadius;
|
||||
border-top-left-radius: $borderRadius;
|
||||
|
||||
.p-treeselect-filter-container {
|
||||
margin-right: $inlineSpacing;
|
||||
|
||||
.p-treeselect-filter {
|
||||
padding-right: nth($inputPadding, 2) + $primeIconFontSize;
|
||||
}
|
||||
|
||||
.p-treeselect-filter-icon {
|
||||
right: nth($inputPadding, 2);
|
||||
color: $inputIconColor;
|
||||
}
|
||||
|
||||
&.p-treeselect-clearable-filter {
|
||||
.p-treeselect-filter {
|
||||
padding-right: 2 * (nth($inputPadding, 2) + $primeIconFontSize);
|
||||
}
|
||||
|
||||
.p-treeselect-filter-clear-icon {
|
||||
right: (2 * nth($inputPadding, 2)) + $primeIconFontSize;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-treeselect-close {
|
||||
@include action-icon();
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
&:not(.p-disabled):hover {
|
||||
background-color: $inputFilledHoverBg;
|
||||
}
|
||||
|
||||
&:not(.p-disabled).p-focus {
|
||||
background-color: $inputFilledFocusBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user