Initial commit
This commit is contained in:
dahoud
18
public/theme/theme-base/_colors.scss
Normal file
18
public/theme/theme-base/_colors.scss
Normal file
@@ -0,0 +1,18 @@
|
||||
:root {
|
||||
@if variable-exists(colors) {
|
||||
@each $name, $color in $colors {
|
||||
@for $i from 0 through 5 {
|
||||
@if ($i == 0) {
|
||||
--#{$name}-50:#{tint($color, (5 - $i) * 19%)};
|
||||
}
|
||||
@else {
|
||||
--#{$name}-#{$i * 100}:#{tint($color, (5 - $i) * 19%)};
|
||||
}
|
||||
}
|
||||
|
||||
@for $i from 1 through 4 {
|
||||
--#{$name}-#{($i + 5) * 100}:#{shade($color, $i * 15%)};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
75
public/theme/theme-base/_common.scss
Normal file
75
public/theme/theme-base/_common.scss
Normal file
@@ -0,0 +1,75 @@
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.p-component {
|
||||
font-family: var(--font-family);
|
||||
font-feature-settings: var(--font-feature-settings, normal);
|
||||
font-size: $fontSize;
|
||||
font-weight: $fontWeight;
|
||||
}
|
||||
|
||||
.p-component-overlay {
|
||||
background-color: $maskBg;
|
||||
transition-duration: $transitionDuration;
|
||||
}
|
||||
|
||||
.p-disabled, .p-component:disabled {
|
||||
opacity: $disabledOpacity;
|
||||
}
|
||||
|
||||
.p-error {
|
||||
color: $errorColor;
|
||||
}
|
||||
|
||||
.p-text-secondary {
|
||||
color: $textSecondaryColor;
|
||||
}
|
||||
|
||||
.pi {
|
||||
font-size: $primeIconFontSize;
|
||||
}
|
||||
|
||||
.p-icon {
|
||||
width: $primeIconFontSize;
|
||||
height: $primeIconFontSize;
|
||||
}
|
||||
|
||||
.p-link {
|
||||
font-family: var(--font-family);
|
||||
font-feature-settings: var(--font-feature-settings, normal);
|
||||
font-size: $fontSize;
|
||||
border-radius: $borderRadius;
|
||||
|
||||
&:focus-visible {
|
||||
@include focused();
|
||||
}
|
||||
}
|
||||
|
||||
.p-component-overlay-enter {
|
||||
animation: p-component-overlay-enter-animation 150ms forwards;
|
||||
}
|
||||
|
||||
.p-component-overlay-leave {
|
||||
animation: p-component-overlay-leave-animation 150ms forwards;
|
||||
}
|
||||
|
||||
.p-component-overlay {
|
||||
@keyframes p-component-overlay-enter-animation {
|
||||
from {
|
||||
background-color: transparent;
|
||||
}
|
||||
to {
|
||||
background-color: var(--maskbg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes p-component-overlay-leave-animation {
|
||||
from {
|
||||
background-color: var(--maskbg);
|
||||
}
|
||||
to {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
105
public/theme/theme-base/_components.scss
Normal file
105
public/theme/theme-base/_components.scss
Normal file
@@ -0,0 +1,105 @@
|
||||
@import '_mixins';
|
||||
@import '_colors';
|
||||
|
||||
@import './components/input/_editor';
|
||||
|
||||
@layer primereact {
|
||||
@import '_common';
|
||||
|
||||
//Input
|
||||
@import './components/input/_autocomplete';
|
||||
@import './components/input/_calendar';
|
||||
@import './components/input/_cascadeselect';
|
||||
@import './components/input/_checkbox';
|
||||
@import './components/input/_chips';
|
||||
@import './components/input/_colorpicker';
|
||||
@import './components/input/_dropdown';
|
||||
@import './components/input/_inputgroup';
|
||||
@import './components/input/_inputnumber';
|
||||
@import './components/input/_inputswitch';
|
||||
@import './components/input/_inputtext';
|
||||
@import './components/input/_listbox';
|
||||
@import './components/input/_mention';
|
||||
@import './components/input/_multiselect';
|
||||
@import './components/input/_password';
|
||||
@import './components/input/_radiobutton';
|
||||
@import './components/input/_rating';
|
||||
@import './components/input/_selectbutton';
|
||||
@import './components/input/_slider';
|
||||
@import './components/input/_treeselect';
|
||||
@import './components/input/_togglebutton';
|
||||
|
||||
//Button
|
||||
@import './components/button/_button';
|
||||
@import './components/button/_splitbutton';
|
||||
@import './components/button/_speeddial';
|
||||
|
||||
//Data
|
||||
@import './components/data/_carousel';
|
||||
@import './components/data/_datatable';
|
||||
@import './components/data/_dataview';
|
||||
@import './components/data/_datascroller';
|
||||
@import './components/data/_filter';
|
||||
@import './components/data/_orderlist';
|
||||
@import './components/data/_organizationchart';
|
||||
@import './components/data/_paginator';
|
||||
@import './components/data/_picklist';
|
||||
@import './components/data/_tree';
|
||||
@import './components/data/_treetable';
|
||||
@import './components/data/_timeline';
|
||||
|
||||
//Panel
|
||||
@import './components/panel/_accordion';
|
||||
@import './components/panel/_card';
|
||||
@import './components/panel/_fieldset';
|
||||
@import './components/panel/_divider';
|
||||
@import './components/panel/_panel';
|
||||
@import './components/panel/_splitter';
|
||||
@import './components/panel/_scrollpanel';
|
||||
@import './components/panel/_tabview';
|
||||
@import './components/panel/_toolbar';
|
||||
|
||||
//Overlay
|
||||
@import './components/overlay/_confirmpopup';
|
||||
@import './components/overlay/_dialog';
|
||||
@import './components/overlay/_overlaypanel';
|
||||
@import './components/overlay/_sidebar';
|
||||
@import './components/overlay/_tooltip';
|
||||
|
||||
//File
|
||||
@import './components/file/_fileupload';
|
||||
|
||||
//Menu
|
||||
@import './components/menu/_breadcrumb';
|
||||
@import './components/menu/_contextmenu';
|
||||
@import './components/menu/_dock';
|
||||
@import './components/menu/_megamenu';
|
||||
@import './components/menu/_menu';
|
||||
@import './components/menu/_menubar';
|
||||
@import './components/menu/_panelmenu';
|
||||
@import './components/menu/_slidemenu';
|
||||
@import './components/menu/_steps';
|
||||
@import './components/menu/_tabmenu';
|
||||
@import './components/menu/_tieredmenu';
|
||||
|
||||
//Messages
|
||||
@import './components/messages/_inlinemessage';
|
||||
@import './components/messages/_message';
|
||||
@import 'components/messages/toast';
|
||||
|
||||
//MultiMedia
|
||||
@import './components/multimedia/_galleria';
|
||||
@import './components/multimedia/_image';
|
||||
|
||||
//Misc
|
||||
@import './components/misc/_avatar';
|
||||
@import './components/misc/_chip';
|
||||
@import './components/misc/_scrolltop';
|
||||
@import './components/misc/_skeleton';
|
||||
@import './components/misc/_tag';
|
||||
@import './components/misc/_inplace';
|
||||
@import './components/misc/_progressbar';
|
||||
@import './components/misc/_terminal';
|
||||
@import './components/misc/_blockui';
|
||||
@import './components/misc/_badge';
|
||||
}
|
||||
190
public/theme/theme-base/_mixins.scss
Normal file
190
public/theme/theme-base/_mixins.scss
Normal file
@@ -0,0 +1,190 @@
|
||||
@mixin icon-override($icon) {
|
||||
&:before {
|
||||
content: $icon;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin focused() {
|
||||
outline: $focusOutline;
|
||||
outline-offset: $focusOutlineOffset;
|
||||
box-shadow: $focusShadow;
|
||||
}
|
||||
|
||||
@mixin focused-inset() {
|
||||
outline: $focusOutline;
|
||||
outline-offset: $focusOutlineOffset;
|
||||
box-shadow: inset $focusShadow;
|
||||
}
|
||||
|
||||
@mixin focused-input() {
|
||||
@include focused();
|
||||
border-color: $inputFocusBorderColor;
|
||||
}
|
||||
|
||||
@mixin focused-listitem() {
|
||||
outline: $focusOutline;
|
||||
outline-offset: $focusOutlineOffset;
|
||||
box-shadow: $inputListItemFocusShadow;
|
||||
}
|
||||
|
||||
@mixin invalid-input() {
|
||||
border-color: $inputErrorBorderColor;
|
||||
}
|
||||
|
||||
@mixin menuitem-link {
|
||||
padding: $menuitemPadding;
|
||||
color: $menuitemTextColor;
|
||||
border-radius: $menuitemBorderRadius;
|
||||
transition: $listItemTransition;
|
||||
user-select: none;
|
||||
|
||||
.p-menuitem-text {
|
||||
color: $menuitemTextColor;
|
||||
}
|
||||
|
||||
.p-menuitem-icon {
|
||||
color: $menuitemIconColor;
|
||||
margin-right: $inlineSpacing;
|
||||
}
|
||||
|
||||
.p-submenu-icon {
|
||||
color: $menuitemIconColor;
|
||||
}
|
||||
|
||||
&:not(.p-disabled):hover {
|
||||
background: $menuitemHoverBg;
|
||||
|
||||
.p-menuitem-text {
|
||||
color: $menuitemTextHoverColor;
|
||||
}
|
||||
|
||||
.p-menuitem-icon {
|
||||
color: $menuitemIconHoverColor;
|
||||
}
|
||||
|
||||
.p-submenu-icon {
|
||||
color: $menuitemIconHoverColor;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@include focused-listitem();
|
||||
}
|
||||
}
|
||||
|
||||
@mixin horizontal-rootmenuitem-link {
|
||||
padding: $horizontalMenuRootMenuitemPadding;
|
||||
color: $horizontalMenuRootMenuitemTextColor;
|
||||
border-radius: $horizontalMenuRootMenuitemBorderRadius;
|
||||
transition: $listItemTransition;
|
||||
user-select: none;
|
||||
|
||||
.p-menuitem-text {
|
||||
color: $horizontalMenuRootMenuitemTextColor;
|
||||
}
|
||||
|
||||
.p-menuitem-icon {
|
||||
color: $horizontalMenuRootMenuitemIconColor;
|
||||
margin-right: $inlineSpacing;
|
||||
}
|
||||
|
||||
.p-submenu-icon {
|
||||
color: $horizontalMenuRootMenuitemIconColor;
|
||||
margin-left: $inlineSpacing;
|
||||
}
|
||||
|
||||
&:not(.p-disabled):hover {
|
||||
background: $horizontalMenuRootMenuitemHoverBg;
|
||||
|
||||
.p-menuitem-text {
|
||||
color: $horizontalMenuRootMenuitemTextHoverColor;
|
||||
}
|
||||
|
||||
.p-menuitem-icon {
|
||||
color: $horizontalMenuRootMenuitemIconHoverColor;
|
||||
}
|
||||
|
||||
.p-submenu-icon {
|
||||
color: $horizontalMenuRootMenuitemIconHoverColor;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@include focused-listitem();
|
||||
}
|
||||
}
|
||||
|
||||
@mixin placeholder {
|
||||
::-webkit-input-placeholder {
|
||||
@content
|
||||
}
|
||||
:-moz-placeholder {
|
||||
@content
|
||||
}
|
||||
::-moz-placeholder {
|
||||
@content
|
||||
}
|
||||
:-ms-input-placeholder {
|
||||
@content
|
||||
}
|
||||
}
|
||||
|
||||
@mixin scaledPadding($val, $scale) {
|
||||
padding: nth($val, 1) * $scale nth($val, 2) * $scale;
|
||||
}
|
||||
|
||||
@mixin scaledFontSize($val, $scale) {
|
||||
font-size: $val * $scale;
|
||||
}
|
||||
|
||||
@mixin nested-submenu-indents($val, $index, $length) {
|
||||
ul {
|
||||
li {
|
||||
a {
|
||||
padding-left: $val * ($index + 1);
|
||||
}
|
||||
|
||||
@if $index < $length {
|
||||
@include nested-submenu-indents($val, $index + 2, $length);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin action-icon($enabled: true) {
|
||||
width: $actionIconWidth;
|
||||
height: $actionIconHeight;
|
||||
color: $actionIconColor;
|
||||
border: $actionIconBorder;
|
||||
background: $actionIconBg;
|
||||
border-radius: $actionIconBorderRadius;
|
||||
transition: $actionIconTransition;
|
||||
|
||||
@if $enabled {
|
||||
&:enabled:hover {
|
||||
@include action-icon-hover();
|
||||
}
|
||||
} @else {
|
||||
&:hover {
|
||||
@include action-icon-hover();
|
||||
}
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
@include focused();
|
||||
}
|
||||
}
|
||||
|
||||
@mixin action-icon-hover() {
|
||||
color: $actionIconHoverColor;
|
||||
border-color: $actionIconHoverBorderColor;
|
||||
background: $actionIconHoverBg;
|
||||
}
|
||||
|
||||
@function tint($color, $percentage) {
|
||||
@return mix(#fff, $color, $percentage);
|
||||
}
|
||||
|
||||
@function shade($color, $percentage) {
|
||||
@return mix(#000, $color, $percentage);
|
||||
}
|
||||
584
public/theme/theme-base/components/button/_button.scss
Normal file
584
public/theme/theme-base/components/button/_button.scss
Normal file
@@ -0,0 +1,584 @@
|
||||
.p-button {
|
||||
color: $buttonTextColor;
|
||||
background: $buttonBg;
|
||||
border: $buttonBorder;
|
||||
padding: $buttonPadding;
|
||||
font-size: $fontSize;
|
||||
transition: $formElementTransition;
|
||||
border-radius: $borderRadius;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: $buttonHoverBg;
|
||||
color: $buttonTextHoverColor;
|
||||
border-color: $buttonHoverBorderColor;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: $buttonActiveBg;
|
||||
color: $buttonTextActiveColor;
|
||||
border-color: $buttonActiveBorderColor;
|
||||
}
|
||||
|
||||
&.p-button-outlined {
|
||||
background-color: transparent;
|
||||
color: $buttonBg;
|
||||
border: $outlinedButtonBorder;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: rgba($buttonBg, $textButtonHoverBgOpacity);
|
||||
color: $buttonBg;
|
||||
border: $outlinedButtonBorder;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: rgba($buttonBg, $textButtonActiveBgOpacity);
|
||||
color: $buttonBg;
|
||||
border: $outlinedButtonBorder;
|
||||
}
|
||||
|
||||
&.p-button-plain {
|
||||
color: $plainButtonTextColor;
|
||||
border-color: $plainButtonTextColor;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: $plainButtonHoverBgColor;
|
||||
color: $plainButtonTextColor;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: $plainButtonActiveBgColor;
|
||||
color: $plainButtonTextColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-button-text {
|
||||
background-color: transparent;
|
||||
color: $buttonBg;
|
||||
border-color: transparent;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: rgba($buttonBg, $textButtonHoverBgOpacity);
|
||||
color: $buttonBg;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: rgba($buttonBg, $textButtonActiveBgOpacity);
|
||||
color: $buttonBg;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
&.p-button-plain {
|
||||
color: $plainButtonTextColor;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: $plainButtonHoverBgColor;
|
||||
color: $plainButtonTextColor;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: $plainButtonActiveBgColor;
|
||||
color: $plainButtonTextColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@include focused();
|
||||
}
|
||||
|
||||
.p-button-label {
|
||||
transition-duration: $transitionDuration;
|
||||
}
|
||||
|
||||
.p-button-icon-left {
|
||||
margin-right: $inlineSpacing;
|
||||
}
|
||||
|
||||
.p-button-icon-right {
|
||||
margin-left: $inlineSpacing;
|
||||
}
|
||||
|
||||
.p-button-icon-bottom {
|
||||
margin-top: $inlineSpacing;
|
||||
}
|
||||
|
||||
.p-button-icon-top {
|
||||
margin-bottom: $inlineSpacing;
|
||||
}
|
||||
|
||||
.p-badge {
|
||||
margin-left: $inlineSpacing;
|
||||
min-width: $fontSize;
|
||||
height: $fontSize;
|
||||
line-height: $fontSize;
|
||||
color: $buttonBg;
|
||||
background-color: $buttonTextColor;
|
||||
}
|
||||
|
||||
&.p-button-raised {
|
||||
box-shadow: $raisedButtonShadow;
|
||||
}
|
||||
|
||||
&.p-button-rounded {
|
||||
border-radius: $roundedButtonBorderRadius;
|
||||
}
|
||||
|
||||
&.p-button-icon-only {
|
||||
width: $buttonIconOnlyWidth;
|
||||
padding: $buttonIconOnlyPadding;
|
||||
|
||||
.p-button-icon-left,
|
||||
.p-button-icon-right {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&.p-button-rounded {
|
||||
border-radius: 50%;
|
||||
height: $buttonIconOnlyWidth;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-button-sm {
|
||||
@include scaledFontSize($fontSize, $scaleSM);
|
||||
@include scaledPadding($buttonPadding, $scaleSM);
|
||||
|
||||
.p-button-icon {
|
||||
@include scaledFontSize($primeIconFontSize, $scaleSM);
|
||||
}
|
||||
}
|
||||
|
||||
&.p-button-lg {
|
||||
@include scaledFontSize($fontSize, $scaleLG);
|
||||
@include scaledPadding($buttonPadding, $scaleLG);
|
||||
|
||||
.p-button-icon {
|
||||
@include scaledFontSize($primeIconFontSize, $scaleLG);
|
||||
}
|
||||
}
|
||||
|
||||
&.p-button-loading-label-only {
|
||||
&.p-button-loading-left {
|
||||
.p-button-label {
|
||||
margin-left: $inlineSpacing;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-button-loading-right {
|
||||
.p-button-label {
|
||||
margin-right: $inlineSpacing;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-button-loading-top {
|
||||
.p-button-label {
|
||||
margin-top: $inlineSpacing;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-button-loading-bottom {
|
||||
.p-button-label {
|
||||
margin-bottom: $inlineSpacing;
|
||||
}
|
||||
}
|
||||
|
||||
.p-button-loading-icon {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-fluid {
|
||||
.p-button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.p-button-icon-only {
|
||||
width: $buttonIconOnlyWidth;
|
||||
}
|
||||
|
||||
.p-buttonset {
|
||||
display: flex;
|
||||
|
||||
.p-button {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
|
||||
color: $secondaryButtonTextColor;
|
||||
background: $secondaryButtonBg;
|
||||
border: $secondaryButtonBorder;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: $secondaryButtonHoverBg;
|
||||
color: $secondaryButtonTextHoverColor;
|
||||
border-color: $secondaryButtonHoverBorderColor;
|
||||
}
|
||||
|
||||
&:not(:disabled):focus {
|
||||
box-shadow: $secondaryButtonFocusShadow;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: $secondaryButtonActiveBg;
|
||||
color: $secondaryButtonTextActiveColor;
|
||||
border-color: $secondaryButtonActiveBorderColor;
|
||||
}
|
||||
|
||||
&.p-button-outlined {
|
||||
background-color: transparent;
|
||||
color: $secondaryButtonBg;
|
||||
border: $outlinedButtonBorder;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: rgba($secondaryButtonBg, $textButtonHoverBgOpacity);
|
||||
color: $secondaryButtonBg;
|
||||
border: $outlinedButtonBorder;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: rgba($secondaryButtonBg, $textButtonActiveBgOpacity);
|
||||
color: $secondaryButtonBg;
|
||||
border: $outlinedButtonBorder;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-button-text {
|
||||
background-color: transparent;
|
||||
color: $secondaryButtonBg;
|
||||
border-color: transparent;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: rgba($secondaryButtonBg, $textButtonHoverBgOpacity);
|
||||
border-color: transparent;
|
||||
color: $secondaryButtonBg;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: rgba($secondaryButtonBg, $textButtonActiveBgOpacity);
|
||||
border-color: transparent;
|
||||
color: $secondaryButtonBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
|
||||
color: $infoButtonTextColor;
|
||||
background: $infoButtonBg;
|
||||
border: $infoButtonBorder;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: $infoButtonHoverBg;
|
||||
color: $infoButtonTextHoverColor;
|
||||
border-color: $infoButtonHoverBorderColor;
|
||||
}
|
||||
|
||||
&:not(:disabled):focus {
|
||||
box-shadow: $infoButtonFocusShadow;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: $infoButtonActiveBg;
|
||||
color: $infoButtonTextActiveColor;
|
||||
border-color: $infoButtonActiveBorderColor;
|
||||
}
|
||||
|
||||
&.p-button-outlined {
|
||||
background-color: transparent;
|
||||
color: $infoButtonBg;
|
||||
border: $outlinedButtonBorder;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: rgba($infoButtonBg, $textButtonHoverBgOpacity);
|
||||
color: $infoButtonBg;
|
||||
border: $outlinedButtonBorder;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: rgba($infoButtonBg, $textButtonActiveBgOpacity);
|
||||
color: $infoButtonBg;
|
||||
border: $outlinedButtonBorder;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-button-text {
|
||||
background-color: transparent;
|
||||
color: $infoButtonBg;
|
||||
border-color: transparent;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: rgba($infoButtonBg, $textButtonHoverBgOpacity);
|
||||
border-color: transparent;
|
||||
color: $infoButtonBg;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: rgba($infoButtonBg, $textButtonActiveBgOpacity);
|
||||
border-color: transparent;
|
||||
color: $infoButtonBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
|
||||
color: $successButtonTextColor;
|
||||
background: $successButtonBg;
|
||||
border: $successButtonBorder;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: $successButtonHoverBg;
|
||||
color: $successButtonTextHoverColor;
|
||||
border-color: $successButtonHoverBorderColor;
|
||||
}
|
||||
|
||||
&:not(:disabled):focus {
|
||||
box-shadow: $successButtonFocusShadow;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: $successButtonActiveBg;
|
||||
color: $successButtonTextActiveColor;
|
||||
border-color: $successButtonActiveBorderColor;
|
||||
}
|
||||
|
||||
&.p-button-outlined {
|
||||
background-color: transparent;
|
||||
color: $successButtonBg;
|
||||
border: $outlinedButtonBorder;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: rgba($successButtonBg, $textButtonHoverBgOpacity);
|
||||
color: $successButtonBg;
|
||||
border: $outlinedButtonBorder;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: rgba($successButtonBg, $textButtonActiveBgOpacity);
|
||||
color: $successButtonBg;
|
||||
border: $outlinedButtonBorder;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-button-text {
|
||||
background-color: transparent;
|
||||
color: $successButtonBg;
|
||||
border-color: transparent;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: rgba($successButtonBg, $textButtonHoverBgOpacity);
|
||||
border-color: transparent;
|
||||
color: $successButtonBg;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: rgba($successButtonBg, $textButtonActiveBgOpacity);
|
||||
border-color: transparent;
|
||||
color: $successButtonBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
|
||||
color: $warningButtonTextColor;
|
||||
background: $warningButtonBg;
|
||||
border: $warningButtonBorder;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: $warningButtonHoverBg;
|
||||
color: $warningButtonTextHoverColor;
|
||||
border-color: $warningButtonHoverBorderColor;
|
||||
}
|
||||
|
||||
&:not(:disabled):focus {
|
||||
box-shadow: $warningButtonFocusShadow;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: $warningButtonActiveBg;
|
||||
color: $warningButtonTextActiveColor;
|
||||
border-color: $warningButtonActiveBorderColor;
|
||||
}
|
||||
|
||||
&.p-button-outlined {
|
||||
background-color: transparent;
|
||||
color: $warningButtonBg;
|
||||
border: $outlinedButtonBorder;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: rgba($warningButtonBg, $textButtonHoverBgOpacity);
|
||||
color: $warningButtonBg;
|
||||
border: $outlinedButtonBorder;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: rgba($warningButtonBg, $textButtonActiveBgOpacity);
|
||||
color: $warningButtonBg;
|
||||
border: $outlinedButtonBorder;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-button-text {
|
||||
background-color: transparent;
|
||||
color: $warningButtonBg;
|
||||
border-color: transparent;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: rgba($warningButtonBg, $textButtonHoverBgOpacity);
|
||||
border-color: transparent;
|
||||
color: $warningButtonBg;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: rgba($warningButtonBg, $textButtonActiveBgOpacity);
|
||||
border-color: transparent;
|
||||
color: $warningButtonBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
|
||||
color: $helpButtonTextColor;
|
||||
background: $helpButtonBg;
|
||||
border: $helpButtonBorder;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: $helpButtonHoverBg;
|
||||
color: $helpButtonTextHoverColor;
|
||||
border-color: $helpButtonHoverBorderColor;
|
||||
}
|
||||
|
||||
&:not(:disabled):focus {
|
||||
box-shadow: $helpButtonFocusShadow;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: $helpButtonActiveBg;
|
||||
color: $helpButtonTextActiveColor;
|
||||
border-color: $helpButtonActiveBorderColor;
|
||||
}
|
||||
|
||||
&.p-button-outlined {
|
||||
background-color: transparent;
|
||||
color: $helpButtonBg;
|
||||
border: $outlinedButtonBorder;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: rgba($helpButtonBg, $textButtonHoverBgOpacity);
|
||||
color: $helpButtonBg;
|
||||
border: $outlinedButtonBorder;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: rgba($helpButtonBg, $textButtonActiveBgOpacity);
|
||||
color: $helpButtonBg;
|
||||
border: $outlinedButtonBorder;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-button-text {
|
||||
background-color: transparent;
|
||||
color: $helpButtonBg;
|
||||
border-color: transparent;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: rgba($helpButtonBg, $textButtonHoverBgOpacity);
|
||||
border-color: transparent;
|
||||
color: $helpButtonBg;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: rgba($helpButtonBg, $textButtonActiveBgOpacity);
|
||||
border-color: transparent;
|
||||
color: $helpButtonBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
|
||||
color: $dangerButtonTextColor;
|
||||
background: $dangerButtonBg;
|
||||
border: $dangerButtonBorder;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: $dangerButtonHoverBg;
|
||||
color: $dangerButtonTextHoverColor;
|
||||
border-color: $dangerButtonHoverBorderColor;
|
||||
}
|
||||
|
||||
&:not(:disabled):focus {
|
||||
box-shadow: $dangerButtonFocusShadow;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: $dangerButtonActiveBg;
|
||||
color: $dangerButtonTextActiveColor;
|
||||
border-color: $dangerButtonActiveBorderColor;
|
||||
}
|
||||
|
||||
&.p-button-outlined {
|
||||
background-color: transparent;
|
||||
color: $dangerButtonBg;
|
||||
border: $outlinedButtonBorder;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: rgba($dangerButtonBg, $textButtonHoverBgOpacity);
|
||||
color: $dangerButtonBg;
|
||||
border: $outlinedButtonBorder;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: rgba($dangerButtonBg, $textButtonActiveBgOpacity);
|
||||
color: $dangerButtonBg;
|
||||
border: $outlinedButtonBorder;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-button-text {
|
||||
background-color: transparent;
|
||||
color: $dangerButtonBg;
|
||||
border-color: transparent;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: rgba($dangerButtonBg, $textButtonHoverBgOpacity);
|
||||
border-color: transparent;
|
||||
color: $dangerButtonBg;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: rgba($dangerButtonBg, $textButtonActiveBgOpacity);
|
||||
border-color: transparent;
|
||||
color: $dangerButtonBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-button.p-button-link {
|
||||
color: $linkButtonColor;
|
||||
background: transparent;
|
||||
border: transparent;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: transparent;
|
||||
color: $linkButtonHoverColor;
|
||||
border-color: transparent;
|
||||
|
||||
.p-button-label {
|
||||
text-decoration: $linkButtonTextHoverDecoration;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:disabled):focus {
|
||||
background: transparent;
|
||||
box-shadow: $linkButtonFocusShadow;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: transparent;
|
||||
color: $linkButtonColor;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
87
public/theme/theme-base/components/button/_speeddial.scss
Normal file
87
public/theme/theme-base/components/button/_speeddial.scss
Normal file
@@ -0,0 +1,87 @@
|
||||
@use 'sass:math';
|
||||
|
||||
.p-speeddial-button {
|
||||
&.p-button.p-button-icon-only {
|
||||
width: $speedDialButtonWidth;
|
||||
height: $speedDialButtonHeight;
|
||||
|
||||
.p-button-icon {
|
||||
font-size: $speedDialButtonIconFontSize;
|
||||
|
||||
&.p-icon {
|
||||
width: $speedDialButtonIconFontSize;
|
||||
height: $speedDialButtonIconFontSize;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-speeddial-action {
|
||||
width: $speedDialActionWidth;
|
||||
height: $speedDialActionHeight;
|
||||
background: $speedDialActionBg;
|
||||
color: $speedDialActionTextColor;
|
||||
|
||||
&:hover {
|
||||
background: $speedDialActionHoverBg;
|
||||
color: $speedDialActionTextHoverColor;
|
||||
}
|
||||
}
|
||||
|
||||
.p-speeddial-direction-up {
|
||||
.p-speeddial-item {
|
||||
margin: math.div($inlineSpacing, 2);
|
||||
|
||||
&:first-child {
|
||||
margin-bottom: $inlineSpacing;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-speeddial-direction-down {
|
||||
.p-speeddial-item {
|
||||
margin: math.div($inlineSpacing, 2);
|
||||
|
||||
&:first-child {
|
||||
margin-top: $inlineSpacing;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-speeddial-direction-left {
|
||||
.p-speeddial-item {
|
||||
margin: 0 math.div($inlineSpacing, 2);
|
||||
|
||||
&:first-child {
|
||||
margin-right: $inlineSpacing;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-speeddial-direction-right {
|
||||
.p-speeddial-item {
|
||||
margin: 0 math.div($inlineSpacing, 2);
|
||||
|
||||
&:first-child {
|
||||
margin-left: $inlineSpacing;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-speeddial-circle,
|
||||
.p-speeddial-semi-circle,
|
||||
.p-speeddial-quarter-circle {
|
||||
.p-speeddial-item {
|
||||
margin: 0;
|
||||
|
||||
&:first-child,
|
||||
&:last-child {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-speeddial-mask {
|
||||
background-color: $maskBg;
|
||||
border-radius: $borderRadius;
|
||||
}
|
||||
359
public/theme/theme-base/components/button/_splitbutton.scss
Normal file
359
public/theme/theme-base/components/button/_splitbutton.scss
Normal file
@@ -0,0 +1,359 @@
|
||||
.p-splitbutton {
|
||||
border-radius: $borderRadius;
|
||||
|
||||
&.p-button-outlined {
|
||||
> .p-button {
|
||||
background-color: transparent;
|
||||
color: $buttonBg;
|
||||
border: $outlinedButtonBorder;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: rgba($buttonBg, $textButtonHoverBgOpacity);
|
||||
color: $buttonBg;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: rgba($buttonBg, $textButtonActiveBgOpacity);
|
||||
color: $buttonBg;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-button-plain {
|
||||
> .p-button {
|
||||
color: $plainButtonTextColor;
|
||||
border-color: $plainButtonTextColor;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: $plainButtonHoverBgColor;
|
||||
color: $plainButtonTextColor;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: $plainButtonActiveBgColor;
|
||||
color: $plainButtonTextColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-button-text {
|
||||
> .p-button {
|
||||
background-color: transparent;
|
||||
color: $buttonBg;
|
||||
border-color: transparent;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: rgba($buttonBg, $textButtonHoverBgOpacity);
|
||||
color: $buttonBg;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: rgba($buttonBg, $textButtonActiveBgOpacity);
|
||||
color: $buttonBg;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-button-plain {
|
||||
> .p-button {
|
||||
color: $plainButtonTextColor;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: $plainButtonHoverBgColor;
|
||||
color: $plainButtonTextColor;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: $plainButtonActiveBgColor;
|
||||
color: $plainButtonTextColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-button-raised {
|
||||
box-shadow: $raisedButtonShadow;
|
||||
}
|
||||
|
||||
&.p-button-rounded {
|
||||
border-radius: $roundedButtonBorderRadius;
|
||||
|
||||
> .p-button {
|
||||
border-radius: $roundedButtonBorderRadius;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-button-sm {
|
||||
> .p-button {
|
||||
@include scaledFontSize($fontSize, $scaleSM);
|
||||
@include scaledPadding($buttonPadding, $scaleSM);
|
||||
|
||||
.p-button-icon {
|
||||
@include scaledFontSize($primeIconFontSize, $scaleSM);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-button-lg {
|
||||
> .p-button {
|
||||
@include scaledFontSize($fontSize, $scaleLG);
|
||||
@include scaledPadding($buttonPadding, $scaleLG);
|
||||
|
||||
&.p-button-icon-only {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.p-button-icon {
|
||||
@include scaledFontSize($primeIconFontSize, $scaleLG);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-splitbutton-menubutton,
|
||||
.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button,
|
||||
.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.p-splitbutton.p-button-secondary {
|
||||
&.p-button-outlined {
|
||||
> .p-button {
|
||||
background-color: transparent;
|
||||
color: $secondaryButtonBg;
|
||||
border: $outlinedButtonBorder;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: rgba($secondaryButtonBg, $textButtonHoverBgOpacity);
|
||||
color: $secondaryButtonBg;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: rgba($secondaryButtonBg, $textButtonActiveBgOpacity);
|
||||
color: $secondaryButtonBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-button-text {
|
||||
> .p-button {
|
||||
background-color: transparent;
|
||||
color: $secondaryButtonBg;
|
||||
border-color: transparent;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: rgba($secondaryButtonBg, $textButtonHoverBgOpacity);
|
||||
border-color: transparent;
|
||||
color: $secondaryButtonBg;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: rgba($secondaryButtonBg, $textButtonActiveBgOpacity);
|
||||
border-color: transparent;
|
||||
color: $secondaryButtonBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-splitbutton.p-button-info {
|
||||
&.p-button-outlined {
|
||||
> .p-button {
|
||||
background-color: transparent;
|
||||
color: $infoButtonBg;
|
||||
border: $outlinedButtonBorder;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: rgba($infoButtonBg, $textButtonHoverBgOpacity);
|
||||
color: $infoButtonBg;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: rgba($infoButtonBg, $textButtonActiveBgOpacity);
|
||||
color: $infoButtonBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-button-text {
|
||||
> .p-button {
|
||||
background-color: transparent;
|
||||
color: $infoButtonBg;
|
||||
border-color: transparent;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: rgba($infoButtonBg, $textButtonHoverBgOpacity);
|
||||
border-color: transparent;
|
||||
color: $infoButtonBg;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: rgba($infoButtonBg, $textButtonActiveBgOpacity);
|
||||
border-color: transparent;
|
||||
color: $infoButtonBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-splitbutton.p-button-success {
|
||||
&.p-button-outlined {
|
||||
> .p-button {
|
||||
background-color: transparent;
|
||||
color: $successButtonBg;
|
||||
border: $outlinedButtonBorder;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: rgba($successButtonBg, $textButtonHoverBgOpacity);
|
||||
color: $successButtonBg;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: rgba($successButtonBg, $textButtonActiveBgOpacity);
|
||||
color: $successButtonBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-button-text {
|
||||
> .p-button {
|
||||
background-color: transparent;
|
||||
color: $successButtonBg;
|
||||
border-color: transparent;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: rgba($successButtonBg, $textButtonHoverBgOpacity);
|
||||
border-color: transparent;
|
||||
color: $successButtonBg;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: rgba($successButtonBg, $textButtonActiveBgOpacity);
|
||||
border-color: transparent;
|
||||
color: $successButtonBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-splitbutton.p-button-warning {
|
||||
&.p-button-outlined {
|
||||
> .p-button {
|
||||
background-color: transparent;
|
||||
color: $warningButtonBg;
|
||||
border: $outlinedButtonBorder;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: rgba($warningButtonBg, $textButtonHoverBgOpacity);
|
||||
color: $warningButtonBg;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: rgba($warningButtonBg, $textButtonActiveBgOpacity);
|
||||
color: $warningButtonBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-button-text {
|
||||
> .p-button {
|
||||
background-color: transparent;
|
||||
color: $warningButtonBg;
|
||||
border-color: transparent;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: rgba($warningButtonBg, $textButtonHoverBgOpacity);
|
||||
border-color: transparent;
|
||||
color: $warningButtonBg;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: rgba($warningButtonBg, $textButtonActiveBgOpacity);
|
||||
border-color: transparent;
|
||||
color: $warningButtonBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-splitbutton.p-button-help {
|
||||
&.p-button-outlined {
|
||||
> .p-button {
|
||||
background-color: transparent;
|
||||
color: $helpButtonBg;
|
||||
border: $outlinedButtonBorder;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: rgba($helpButtonBg, $textButtonHoverBgOpacity);
|
||||
color: $helpButtonBg;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: rgba($helpButtonBg, $textButtonActiveBgOpacity);
|
||||
color: $helpButtonBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-button-text {
|
||||
> .p-button {
|
||||
background-color: transparent;
|
||||
color: $helpButtonBg;
|
||||
border-color: transparent;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: rgba($helpButtonBg, $textButtonHoverBgOpacity);
|
||||
border-color: transparent;
|
||||
color: $helpButtonBg;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: rgba($helpButtonBg, $textButtonActiveBgOpacity);
|
||||
border-color: transparent;
|
||||
color: $helpButtonBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-splitbutton.p-button-danger {
|
||||
&.p-button-outlined {
|
||||
> .p-button {
|
||||
background-color: transparent;
|
||||
color: $dangerButtonBg;
|
||||
border: $outlinedButtonBorder;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: rgba($dangerButtonBg, $textButtonHoverBgOpacity);
|
||||
color: $dangerButtonBg;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: rgba($dangerButtonBg, $textButtonActiveBgOpacity);
|
||||
color: $dangerButtonBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-button-text {
|
||||
> .p-button {
|
||||
background-color: transparent;
|
||||
color: $dangerButtonBg;
|
||||
border-color: transparent;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: rgba($dangerButtonBg, $textButtonHoverBgOpacity);
|
||||
border-color: transparent;
|
||||
color: $dangerButtonBg;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: rgba($dangerButtonBg, $textButtonActiveBgOpacity);
|
||||
border-color: transparent;
|
||||
color: $dangerButtonBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
37
public/theme/theme-base/components/data/_carousel.scss
Normal file
37
public/theme/theme-base/components/data/_carousel.scss
Normal file
@@ -0,0 +1,37 @@
|
||||
.p-carousel {
|
||||
.p-carousel-content {
|
||||
.p-carousel-prev,
|
||||
.p-carousel-next {
|
||||
@include action-icon();
|
||||
margin: $inlineSpacing;
|
||||
}
|
||||
}
|
||||
|
||||
.p-carousel-indicators {
|
||||
padding: $carouselIndicatorsPadding;
|
||||
|
||||
.p-carousel-indicator {
|
||||
margin-right: $inlineSpacing;
|
||||
margin-bottom: $inlineSpacing;
|
||||
|
||||
button {
|
||||
background-color: $carouselIndicatorBg;
|
||||
width: $carouselIndicatorWidth;
|
||||
height: $carouselIndicatorHeight;
|
||||
transition: $actionIconTransition;
|
||||
border-radius: $carouselIndicatorBorderRadius;
|
||||
|
||||
&:hover {
|
||||
background: $carouselIndicatorHoverBg;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
button {
|
||||
background: $highlightBg;
|
||||
color: $highlightTextColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
47
public/theme/theme-base/components/data/_datascroller.scss
Normal file
47
public/theme/theme-base/components/data/_datascroller.scss
Normal file
@@ -0,0 +1,47 @@
|
||||
.p-datascroller {
|
||||
.p-paginator-top {
|
||||
border-width: $tableTopPaginatorBorderWidth;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.p-paginator-bottom {
|
||||
border-width: $tableBottomPaginatorBorderWidth;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.p-datascroller-header {
|
||||
background: $tableHeaderBg;
|
||||
color: $tableHeaderTextColor;
|
||||
border: $tableHeaderBorder;
|
||||
border-width: $tableHeaderBorderWidth;
|
||||
padding: $tableHeaderPadding;
|
||||
font-weight: $tableHeaderFontWeight;
|
||||
}
|
||||
|
||||
.p-datascroller-content {
|
||||
background: $tableBodyRowBg;
|
||||
color: $tableBodyRowTextColor;
|
||||
border: $dataViewContentBorder;
|
||||
padding: $dataViewContentPadding;
|
||||
}
|
||||
|
||||
&.p-datascroller-inline {
|
||||
.p-datascroller-list {
|
||||
> li {
|
||||
border: $dataViewListItemBorder;
|
||||
border-width: $dataViewListItemBorderWidth;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-datascroller-footer {
|
||||
background: $tableFooterBg;
|
||||
color: $tableFooterTextColor;
|
||||
border: $tableFooterBorder;
|
||||
border-width: $tableFooterBorderWidth;
|
||||
padding: $tableFooterPadding;
|
||||
font-weight: $tableFooterFontWeight;
|
||||
border-bottom-left-radius: $borderRadius;
|
||||
border-bottom-right-radius: $borderRadius;
|
||||
}
|
||||
}
|
||||
389
public/theme/theme-base/components/data/_datatable.scss
Normal file
389
public/theme/theme-base/components/data/_datatable.scss
Normal file
@@ -0,0 +1,389 @@
|
||||
.p-datatable {
|
||||
.p-paginator-top {
|
||||
border-width: $tableTopPaginatorBorderWidth;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.p-paginator-bottom {
|
||||
border-width: $tableBottomPaginatorBorderWidth;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.p-datatable-header {
|
||||
background: $tableHeaderBg;
|
||||
color: $tableHeaderTextColor;
|
||||
border: $tableHeaderBorder;
|
||||
border-width: $tableHeaderBorderWidth;
|
||||
padding: $tableHeaderPadding;
|
||||
font-weight: $tableHeaderFontWeight;
|
||||
}
|
||||
|
||||
.p-datatable-footer {
|
||||
background: $tableFooterBg;
|
||||
color: $tableFooterTextColor;
|
||||
border: $tableFooterBorder;
|
||||
border-width: $tableFooterBorderWidth;
|
||||
padding: $tableFooterPadding;
|
||||
font-weight: $tableFooterFontWeight;
|
||||
}
|
||||
|
||||
.p-datatable-thead > tr > th {
|
||||
text-align: $tableCellContentAlignment;
|
||||
padding: $tableHeaderCellPadding;
|
||||
border: $tableHeaderCellBorder;
|
||||
border-width: $tableHeaderCellBorderWidth;
|
||||
font-weight: $tableHeaderCellFontWeight;
|
||||
color: $tableHeaderCellTextColor;
|
||||
background: $tableHeaderCellBg;
|
||||
transition: $listItemTransition;
|
||||
}
|
||||
|
||||
.p-datatable-tfoot > tr > td {
|
||||
text-align: $tableCellContentAlignment;
|
||||
padding: $tableFooterCellPadding;
|
||||
border: $tableFooterCellBorder;
|
||||
border-width: $tableFooterCellBorderWidth;
|
||||
font-weight: $tableFooterCellFontWeight;
|
||||
color: $tableFooterCellTextColor;
|
||||
background: $tableFooterCellBg;
|
||||
}
|
||||
|
||||
.p-sortable-column {
|
||||
.p-sortable-column-icon {
|
||||
color: $tableHeaderCellIconColor;
|
||||
margin-left: $inlineSpacing;
|
||||
}
|
||||
|
||||
.p-sortable-column-badge {
|
||||
border-radius: 50%;
|
||||
height: $tableSortableColumnBadgeSize;
|
||||
min-width: $tableSortableColumnBadgeSize;
|
||||
line-height: $tableSortableColumnBadgeSize;
|
||||
color: $highlightTextColor;
|
||||
background: $highlightBg;
|
||||
margin-left: $inlineSpacing;
|
||||
}
|
||||
|
||||
&:not(.p-highlight):not(.p-sortable-disabled):hover {
|
||||
background: $tableHeaderCellHoverBg;
|
||||
color: $tableHeaderCellTextHoverColor;
|
||||
|
||||
.p-sortable-column-icon {
|
||||
color: $tableHeaderCellIconHoverColor;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
background: $tableHeaderCellHighlightBg;
|
||||
color: $tableHeaderCellHighlightTextColor;
|
||||
|
||||
.p-sortable-column-icon {
|
||||
color: $tableHeaderCellHighlightTextColor;
|
||||
}
|
||||
|
||||
&:not(.p-sortable-disabled):hover {
|
||||
background: $tableHeaderCellHighlightHoverBg;
|
||||
color: $tableHeaderCellHighlightTextColor;
|
||||
|
||||
.p-sortable-column-icon {
|
||||
color: $tableHeaderCellHighlightTextColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
box-shadow: $inputListItemFocusShadow;
|
||||
outline: 0 none;
|
||||
}
|
||||
}
|
||||
|
||||
.p-datatable-tbody {
|
||||
> tr {
|
||||
background: $tableBodyRowBg;
|
||||
color: $tableBodyRowTextColor;
|
||||
transition: $listItemTransition;
|
||||
|
||||
> td {
|
||||
text-align: $tableCellContentAlignment;
|
||||
border: $tableBodyCellBorder;
|
||||
border-width: $tableBodyCellBorderWidth;
|
||||
padding: $tableBodyCellPadding;
|
||||
|
||||
.p-row-toggler,
|
||||
.p-row-editor-init,
|
||||
.p-row-editor-save,
|
||||
.p-row-editor-cancel {
|
||||
@include action-icon();
|
||||
}
|
||||
|
||||
.p-row-editor-save {
|
||||
margin-right: $inlineSpacing;
|
||||
}
|
||||
|
||||
> .p-column-title {
|
||||
font-weight: $tableHeaderCellFontWeight;
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
background: $highlightBg;
|
||||
color: $highlightTextColor;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
background: $highlightBg;
|
||||
color: $highlightTextColor;
|
||||
}
|
||||
|
||||
&.p-highlight-contextmenu {
|
||||
outline: 0.15rem solid $focusOutlineColor;
|
||||
outline-offset: -0.15rem;
|
||||
}
|
||||
|
||||
&.p-datatable-dragpoint-top > td {
|
||||
box-shadow: inset 0 2px 0 0 $highlightBg;
|
||||
}
|
||||
|
||||
&.p-datatable-dragpoint-bottom > td {
|
||||
box-shadow: inset 0 -2px 0 0 $highlightBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-datatable-selectable {
|
||||
.p-datatable-tbody > tr.p-selectable-row {
|
||||
&:not(.p-highlight):not(.p-datatable-emptymessage):hover {
|
||||
background: $tableBodyRowHoverBg;
|
||||
color: $tableBodyRowTextHoverColor;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: .15rem solid $focusOutlineColor;
|
||||
outline-offset: -.15rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-datatable-selectable-cell {
|
||||
.p-datatable-tbody > tr.p-selectable-row {
|
||||
& > td.p-selectable-cell {
|
||||
&:not(.p-highlight):hover {
|
||||
background: $tableBodyRowHoverBg;
|
||||
color: $tableBodyRowTextHoverColor;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: .15rem solid $focusOutlineColor;
|
||||
outline-offset: -.15rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-datatable-hoverable-rows {
|
||||
.p-datatable-tbody > tr:not(.p-highlight):not(.p-datatable-emptymessage):hover {
|
||||
background: $tableBodyRowHoverBg;
|
||||
color: $tableBodyRowTextHoverColor;
|
||||
}
|
||||
}
|
||||
|
||||
.p-column-resizer-helper {
|
||||
background: $tableResizerHelperBg;
|
||||
}
|
||||
|
||||
.p-datatable-scrollable-header,
|
||||
.p-datatable-scrollable-footer {
|
||||
background: $panelHeaderBg;
|
||||
}
|
||||
|
||||
&.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table,
|
||||
&.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table {
|
||||
> .p-datatable-thead,
|
||||
> .p-datatable-tfoot {
|
||||
background-color: $tableHeaderCellBg;
|
||||
}
|
||||
}
|
||||
|
||||
.p-datatable-loading-icon {
|
||||
font-size: $loadingIconFontSize;
|
||||
&.p-icon {
|
||||
width: $loadingIconFontSize;
|
||||
height: $loadingIconFontSize;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-datatable-gridlines {
|
||||
.p-datatable-header {
|
||||
border-width: 1px 1px 0 1px;
|
||||
}
|
||||
|
||||
.p-datatable-footer {
|
||||
border-width: 0 1px 1px 1px;
|
||||
}
|
||||
|
||||
.p-paginator-top {
|
||||
border-width: 0 1px 0 1px;
|
||||
}
|
||||
|
||||
.p-paginator-bottom {
|
||||
border-width: 0 1px 1px 1px;
|
||||
}
|
||||
|
||||
.p-datatable-thead {
|
||||
> tr {
|
||||
> th {
|
||||
border-width: 1px 0 1px 1px;
|
||||
|
||||
&:last-child {
|
||||
border-width: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-datatable-tbody {
|
||||
> tr {
|
||||
> td {
|
||||
border-width: 1px 0 0 1px;
|
||||
|
||||
&:last-child {
|
||||
border-width: 1px 1px 0 1px;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
> td {
|
||||
border-width: 1px 0 1px 1px;
|
||||
|
||||
&:last-child {
|
||||
border-width: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-datatable-tfoot {
|
||||
> tr {
|
||||
> td {
|
||||
border-width: 1px 0 1px 1px;
|
||||
|
||||
&:last-child {
|
||||
border-width: 1px 1px 1px 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-datatable-thead + .p-datatable-tfoot {
|
||||
> tr {
|
||||
> td {
|
||||
border-width: 0 0 1px 1px;
|
||||
|
||||
&:last-child {
|
||||
border-width: 0 1px 1px 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody {
|
||||
> tr {
|
||||
> td {
|
||||
border-width: 0 0 1px 1px;
|
||||
|
||||
&:last-child {
|
||||
border-width: 0 1px 1px 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody {
|
||||
> tr {
|
||||
&:last-child {
|
||||
> td {
|
||||
border-width: 0 0 0 1px;
|
||||
|
||||
&:last-child {
|
||||
border-width: 0 1px 0 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-datatable-striped {
|
||||
.p-datatable-tbody {
|
||||
> tr.p-row-odd {
|
||||
background: $tableBodyRowEvenBg;
|
||||
|
||||
&.p-highlight {
|
||||
background: $highlightBg;
|
||||
color: $highlightTextColor;
|
||||
|
||||
.p-row-toggler {
|
||||
color: $highlightTextColor;
|
||||
|
||||
&:hover {
|
||||
color: $highlightTextColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& + .p-row-expanded {
|
||||
background: $tableBodyRowEvenBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-datatable-sm {
|
||||
.p-datatable-header {
|
||||
@include scaledPadding($tableHeaderPadding, $tableScaleSM);
|
||||
}
|
||||
|
||||
.p-datatable-thead > tr > th {
|
||||
@include scaledPadding($tableHeaderCellPadding, $tableScaleSM);
|
||||
}
|
||||
|
||||
.p-datatable-tbody > tr > td {
|
||||
@include scaledPadding($tableBodyCellPadding, $tableScaleSM);
|
||||
}
|
||||
|
||||
.p-datatable-tfoot > tr > td {
|
||||
@include scaledPadding($tableFooterPadding, $tableScaleSM);
|
||||
}
|
||||
|
||||
.p-datatable-footer {
|
||||
@include scaledPadding($tableFooterPadding, $tableScaleSM);
|
||||
}
|
||||
}
|
||||
|
||||
&.p-datatable-lg {
|
||||
.p-datatable-header {
|
||||
@include scaledPadding($tableHeaderPadding, $tableScaleLG);
|
||||
}
|
||||
|
||||
.p-datatable-thead > tr > th {
|
||||
@include scaledPadding($tableHeaderCellPadding, $tableScaleLG);
|
||||
}
|
||||
|
||||
.p-datatable-tbody > tr > td {
|
||||
@include scaledPadding($tableBodyCellPadding, $tableScaleLG);
|
||||
}
|
||||
|
||||
.p-datatable-tfoot > tr > td {
|
||||
@include scaledPadding($tableFooterPadding, $tableScaleLG);
|
||||
}
|
||||
|
||||
.p-datatable-footer {
|
||||
@include scaledPadding($tableFooterPadding, $tableScaleLG);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-datatable-drag-selection-helper {
|
||||
background: $tableDragHelperBg;
|
||||
}
|
||||
56
public/theme/theme-base/components/data/_dataview.scss
Normal file
56
public/theme/theme-base/components/data/_dataview.scss
Normal file
@@ -0,0 +1,56 @@
|
||||
.p-dataview {
|
||||
.p-paginator-top {
|
||||
border-width: $tableTopPaginatorBorderWidth;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.p-paginator-bottom {
|
||||
border-width: $tableBottomPaginatorBorderWidth;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.p-dataview-header {
|
||||
background: $tableHeaderBg;
|
||||
color: $tableHeaderTextColor;
|
||||
border: $tableHeaderBorder;
|
||||
border-width: $tableHeaderBorderWidth;
|
||||
padding: $tableHeaderPadding;
|
||||
font-weight: $tableHeaderFontWeight;
|
||||
}
|
||||
|
||||
.p-dataview-content {
|
||||
background: $tableBodyRowBg;
|
||||
color: $tableBodyRowTextColor;
|
||||
border: $dataViewContentBorder;
|
||||
padding: $dataViewContentPadding;
|
||||
}
|
||||
|
||||
&.p-dataview-list {
|
||||
.p-dataview-content {
|
||||
> .p-grid > div {
|
||||
border: $dataViewListItemBorder;
|
||||
border-width: $dataViewListItemBorderWidth;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-dataview-footer {
|
||||
background: $tableFooterBg;
|
||||
color: $tableFooterTextColor;
|
||||
border: $tableFooterBorder;
|
||||
border-width: $tableFooterBorderWidth;
|
||||
padding: $tableFooterPadding;
|
||||
font-weight: $tableFooterFontWeight;
|
||||
border-bottom-left-radius: $borderRadius;
|
||||
border-bottom-right-radius: $borderRadius;
|
||||
}
|
||||
|
||||
.p-dataview-loading-icon {
|
||||
font-size: $loadingIconFontSize;
|
||||
|
||||
&.p-icon {
|
||||
width: $loadingIconFontSize;
|
||||
height: $loadingIconFontSize;
|
||||
}
|
||||
}
|
||||
}
|
||||
138
public/theme/theme-base/components/data/_filter.scss
Normal file
138
public/theme/theme-base/components/data/_filter.scss
Normal file
@@ -0,0 +1,138 @@
|
||||
.p-column-filter-row {
|
||||
.p-column-filter-menu-button,
|
||||
.p-column-filter-clear-button {
|
||||
margin-left: $inlineSpacing;
|
||||
}
|
||||
}
|
||||
|
||||
.p-column-filter-menu-button {
|
||||
width: $actionIconWidth;
|
||||
height: $actionIconHeight;
|
||||
color: $actionIconColor;
|
||||
border: $actionIconBorder;
|
||||
background: $actionIconBg;
|
||||
border-radius: $actionIconBorderRadius;
|
||||
transition: $actionIconTransition;
|
||||
|
||||
&:hover {
|
||||
color: $actionIconHoverColor;
|
||||
border-color: $actionIconHoverBorderColor;
|
||||
background: $actionIconHoverBg;
|
||||
}
|
||||
|
||||
&.p-column-filter-menu-button-open,
|
||||
&.p-column-filter-menu-button-open:hover {
|
||||
background: $actionIconHoverBg;
|
||||
color: $actionIconHoverColor;
|
||||
}
|
||||
|
||||
&.p-column-filter-menu-button-active,
|
||||
&.p-column-filter-menu-button-active:hover {
|
||||
background: $highlightBg;
|
||||
color: $highlightTextColor;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
@include focused();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.p-column-filter-clear-button {
|
||||
width: $actionIconWidth;
|
||||
height: $actionIconHeight;
|
||||
color: $actionIconColor;
|
||||
border: $actionIconBorder;
|
||||
background: $actionIconBg;
|
||||
border-radius: $actionIconBorderRadius;
|
||||
transition: $actionIconTransition;
|
||||
|
||||
&:hover {
|
||||
color: $actionIconHoverColor;
|
||||
border-color: $actionIconHoverBorderColor;
|
||||
background: $actionIconHoverBg;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
@include focused();
|
||||
}
|
||||
}
|
||||
|
||||
.p-column-filter-overlay {
|
||||
background: $inputOverlayBg;
|
||||
color: $inputListTextColor;
|
||||
border: $inputOverlayBorder;
|
||||
border-radius: $borderRadius;
|
||||
box-shadow: $inputOverlayShadow;
|
||||
min-width: $menuWidth;
|
||||
|
||||
.p-column-filter-row-items {
|
||||
padding: $inputListPadding;
|
||||
|
||||
.p-column-filter-row-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-visible {
|
||||
@include focused-listitem();
|
||||
}
|
||||
}
|
||||
|
||||
.p-column-filter-separator {
|
||||
border-top: $divider;
|
||||
margin: $menuSeparatorMargin;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-column-filter-overlay-menu {
|
||||
.p-column-filter-operator {
|
||||
padding: $inputListHeaderPadding;
|
||||
border-bottom: $inputListHeaderBorder;
|
||||
color: $inputListHeaderTextColor;
|
||||
background: $inputOverlayHeaderBg;
|
||||
margin: $inputListHeaderMargin;
|
||||
border-top-right-radius: $borderRadius;
|
||||
border-top-left-radius: $borderRadius;
|
||||
}
|
||||
|
||||
.p-column-filter-constraint {
|
||||
padding: $panelContentPadding;
|
||||
border-bottom: $divider;
|
||||
|
||||
.p-column-filter-matchmode-dropdown {
|
||||
margin-bottom: $inlineSpacing;
|
||||
}
|
||||
|
||||
.p-column-filter-remove-button {
|
||||
margin-top: $inlineSpacing;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 0 none;
|
||||
}
|
||||
}
|
||||
|
||||
.p-column-filter-add-rule {
|
||||
padding: $panelFooterPadding;
|
||||
}
|
||||
|
||||
.p-column-filter-buttonbar {
|
||||
padding: $panelContentPadding;
|
||||
}
|
||||
}
|
||||
80
public/theme/theme-base/components/data/_orderlist.scss
Normal file
80
public/theme/theme-base/components/data/_orderlist.scss
Normal file
@@ -0,0 +1,80 @@
|
||||
.p-orderlist {
|
||||
.p-orderlist-controls {
|
||||
padding: $panelContentPadding;
|
||||
|
||||
.p-button {
|
||||
margin-bottom: $inlineSpacing;
|
||||
}
|
||||
}
|
||||
|
||||
.p-orderlist-header {
|
||||
background: $panelHeaderBg;
|
||||
color: $panelHeaderTextColor;
|
||||
border: $panelHeaderBorder;
|
||||
padding: $panelHeaderPadding;
|
||||
font-weight: $panelHeaderFontWeight;
|
||||
border-bottom: 0 none;
|
||||
border-top-right-radius: $borderRadius;
|
||||
border-top-left-radius: $borderRadius;
|
||||
}
|
||||
|
||||
.p-orderlist-filter-container {
|
||||
padding: $panelHeaderPadding;
|
||||
background: $panelContentBg;
|
||||
border: $panelHeaderBorder;
|
||||
border-bottom: 0 none;
|
||||
|
||||
.p-orderlist-filter-input {
|
||||
padding-right: nth($inputPadding, 2) + $primeIconFontSize;
|
||||
}
|
||||
|
||||
.p-orderlist-filter-icon {
|
||||
right: nth($inputPadding, 2);
|
||||
color: $inputIconColor;
|
||||
}
|
||||
}
|
||||
|
||||
.p-orderlist-list {
|
||||
border: $panelContentBorder;
|
||||
background: $panelContentBg;
|
||||
color: $panelContentTextColor;
|
||||
padding: $inputListPadding;
|
||||
border-bottom-right-radius: $borderRadius;
|
||||
border-bottom-left-radius: $borderRadius;
|
||||
|
||||
.p-orderlist-item {
|
||||
padding: $inputListItemPadding;
|
||||
margin: $inputListItemMargin;
|
||||
border: $inputListItemBorder;
|
||||
color: $inputListItemTextColor;
|
||||
background: $inputListItemBg;
|
||||
transition: transform $transitionDuration, $listItemTransition;
|
||||
|
||||
&:not(.p-highlight):hover {
|
||||
background: $inputListItemHoverBg;
|
||||
color: $inputListItemTextHoverColor;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@include focused-listitem();
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
color: $highlightTextColor;
|
||||
background: $highlightBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-orderlist-striped {
|
||||
.p-orderlist-list {
|
||||
.p-orderlist-item:nth-child(even) {
|
||||
background: $panelContentEvenRowBg;
|
||||
|
||||
&:hover {
|
||||
background: $inputListItemHoverBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
.p-organizationchart {
|
||||
.p-organizationchart-node-content {
|
||||
&.p-organizationchart-selectable-node:not(.p-highlight):hover {
|
||||
background: $inputListItemHoverBg;
|
||||
color: $inputListItemTextHoverColor;
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
background: $highlightBg;
|
||||
color: $highlightTextColor;
|
||||
|
||||
.p-node-toggler {
|
||||
i {
|
||||
color: darken($highlightBg, 25%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-organizationchart-line-down {
|
||||
background: $organizationChartConnectorColor;
|
||||
}
|
||||
|
||||
.p-organizationchart-line-left {
|
||||
border-right: $panelContentBorder;
|
||||
border-color: $organizationChartConnectorColor;
|
||||
}
|
||||
|
||||
.p-organizationchart-line-top {
|
||||
border-top: $panelContentBorder;
|
||||
border-color: $organizationChartConnectorColor;
|
||||
}
|
||||
|
||||
.p-organizationchart-node-content {
|
||||
border: $panelContentBorder;
|
||||
background: $panelContentBg;
|
||||
color: $panelContentTextColor;
|
||||
padding: $panelContentPadding;
|
||||
}
|
||||
|
||||
.p-organizationchart-node-content .p-node-toggler {
|
||||
background: inherit;
|
||||
color: inherit;
|
||||
border-radius: 50%;
|
||||
|
||||
&:focus-visible {
|
||||
@include focused();
|
||||
}
|
||||
}
|
||||
}
|
||||
91
public/theme/theme-base/components/data/_paginator.scss
Normal file
91
public/theme/theme-base/components/data/_paginator.scss
Normal file
@@ -0,0 +1,91 @@
|
||||
.p-paginator {
|
||||
background: $paginatorBg;
|
||||
color: $paginatorTextColor;
|
||||
border: $paginatorBorder;
|
||||
border-width: $paginatorBorderWidth;
|
||||
padding: $paginatorPadding;
|
||||
border-radius: $borderRadius;
|
||||
|
||||
.p-paginator-first,
|
||||
.p-paginator-prev,
|
||||
.p-paginator-next,
|
||||
.p-paginator-last {
|
||||
background-color: $paginatorElementBg;
|
||||
border: $paginatorElementBorder;
|
||||
color: $paginatorElementIconColor;
|
||||
min-width: $paginatorElementWidth;
|
||||
height: $paginatorElementHeight;
|
||||
margin: $paginatorElementMargin;
|
||||
transition: $listItemTransition;
|
||||
border-radius: $paginatorElementBorderRadius;
|
||||
|
||||
&:not(.p-disabled):not(.p-highlight):hover {
|
||||
background: $paginatorElementHoverBg;
|
||||
border-color: $paginatorElementHoverBorderColor;
|
||||
color: $paginatorElementIconHoverColor;
|
||||
}
|
||||
}
|
||||
|
||||
.p-paginator-first {
|
||||
border-top-left-radius: $paginatorElementBorderRadius;
|
||||
border-bottom-left-radius: $paginatorElementBorderRadius;
|
||||
}
|
||||
|
||||
.p-paginator-last {
|
||||
border-top-right-radius: $paginatorElementBorderRadius;
|
||||
border-bottom-right-radius: $paginatorElementBorderRadius;
|
||||
}
|
||||
|
||||
.p-dropdown {
|
||||
margin-left: $inlineSpacing;
|
||||
height: $paginatorElementHeight;
|
||||
|
||||
.p-dropdown-label {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.p-paginator-page-input {
|
||||
margin-left: $inlineSpacing;
|
||||
margin-right: $inlineSpacing;
|
||||
|
||||
.p-inputtext {
|
||||
max-width: $paginatorElementWidth;
|
||||
}
|
||||
}
|
||||
|
||||
.p-paginator-current {
|
||||
background-color: $paginatorElementBg;
|
||||
border: $paginatorElementBorder;
|
||||
color: $paginatorElementIconColor;
|
||||
min-width: $paginatorElementWidth;
|
||||
height: $paginatorElementHeight;
|
||||
margin: $paginatorElementMargin;
|
||||
padding: 0 $inlineSpacing;
|
||||
}
|
||||
|
||||
.p-paginator-pages {
|
||||
.p-paginator-page {
|
||||
background-color: $paginatorElementBg;
|
||||
border: $paginatorElementBorder;
|
||||
color: $paginatorElementIconColor;
|
||||
min-width: $paginatorElementWidth;
|
||||
height: $paginatorElementHeight;
|
||||
margin: $paginatorElementMargin;
|
||||
transition: $listItemTransition;
|
||||
border-radius: $paginatorElementBorderRadius;
|
||||
|
||||
&.p-highlight {
|
||||
background: $highlightBg;
|
||||
border-color: $highlightBg;
|
||||
color: $highlightTextColor;
|
||||
}
|
||||
|
||||
&:not(.p-highlight):hover {
|
||||
background: $paginatorElementHoverBg;
|
||||
border-color: $paginatorElementHoverBorderColor;
|
||||
color: $paginatorElementIconHoverColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
68
public/theme/theme-base/components/data/_picklist.scss
Normal file
68
public/theme/theme-base/components/data/_picklist.scss
Normal file
@@ -0,0 +1,68 @@
|
||||
.p-picklist {
|
||||
.p-picklist-buttons {
|
||||
padding: $panelContentPadding;
|
||||
|
||||
.p-button {
|
||||
margin-bottom: $inlineSpacing;
|
||||
}
|
||||
}
|
||||
|
||||
.p-picklist-header {
|
||||
background: $panelHeaderBg;
|
||||
color: $panelHeaderTextColor;
|
||||
border: $panelHeaderBorder;
|
||||
padding: $panelHeaderPadding;
|
||||
font-weight: $panelHeaderFontWeight;
|
||||
border-bottom: 0 none;
|
||||
border-top-right-radius: $borderRadius;
|
||||
border-top-left-radius: $borderRadius;
|
||||
}
|
||||
|
||||
.p-picklist-filter-container {
|
||||
padding: $panelHeaderPadding;
|
||||
background: $panelContentBg;
|
||||
border: $panelHeaderBorder;
|
||||
border-bottom: 0 none;
|
||||
|
||||
.p-picklist-filter-input {
|
||||
padding-right: nth($inputPadding, 2) + $primeIconFontSize;
|
||||
}
|
||||
|
||||
.p-picklist-filter-icon {
|
||||
right: nth($inputPadding, 2);
|
||||
color: $inputIconColor;
|
||||
}
|
||||
}
|
||||
|
||||
.p-picklist-list {
|
||||
border: $panelContentBorder;
|
||||
background: $panelContentBg;
|
||||
color: $panelContentTextColor;
|
||||
padding: $inputListPadding;
|
||||
border-bottom-right-radius: $borderRadius;
|
||||
border-bottom-left-radius: $borderRadius;
|
||||
|
||||
.p-picklist-item {
|
||||
padding: $inputListItemPadding;
|
||||
margin: $inputListItemMargin;
|
||||
border: $inputListItemBorder;
|
||||
color: $inputListItemTextColor;
|
||||
background: $inputListItemBg;
|
||||
transition: transform $transitionDuration, $listItemTransition;
|
||||
|
||||
&:not(.p-highlight):hover {
|
||||
background: $inputListItemHoverBg;
|
||||
color: $inputListItemTextHoverColor;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@include focused-listitem();
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
color: $highlightTextColor;
|
||||
background: $highlightBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
38
public/theme/theme-base/components/data/_timeline.scss
Normal file
38
public/theme/theme-base/components/data/_timeline.scss
Normal file
@@ -0,0 +1,38 @@
|
||||
.p-timeline {
|
||||
.p-timeline-event-marker {
|
||||
border: $timelineEventMarkerBorder;
|
||||
border-radius: $timelineEventMarkerBorderRadius;
|
||||
width: $timelineEventMarkerWidth;
|
||||
height: $timelineEventMarkerHeight;
|
||||
background-color: $timelineEventMarkerBackground;
|
||||
}
|
||||
|
||||
.p-timeline-event-connector {
|
||||
background-color: $timelineEventColor;
|
||||
}
|
||||
|
||||
&.p-timeline-vertical {
|
||||
.p-timeline-event-opposite,
|
||||
.p-timeline-event-content {
|
||||
padding: $timelineVerticalEventContentPadding;
|
||||
}
|
||||
|
||||
.p-timeline-event-connector {
|
||||
width: $timelineEventConnectorSize;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-timeline-horizontal {
|
||||
.p-timeline-event-opposite,
|
||||
.p-timeline-event-content {
|
||||
padding: $timelineHorizontalEventContentPadding;
|
||||
}
|
||||
|
||||
.p-timeline-event-connector {
|
||||
height: $timelineEventConnectorSize;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
102
public/theme/theme-base/components/data/_tree.scss
Normal file
102
public/theme/theme-base/components/data/_tree.scss
Normal file
@@ -0,0 +1,102 @@
|
||||
.p-tree {
|
||||
border: $panelContentBorder;
|
||||
background: $panelContentBg;
|
||||
color: $panelContentTextColor;
|
||||
padding: $panelContentPadding;
|
||||
border-radius: $borderRadius;
|
||||
|
||||
.p-tree-container {
|
||||
.p-treenode {
|
||||
padding: $treeNodePadding;
|
||||
|
||||
.p-treenode-content {
|
||||
border-radius: $borderRadius;
|
||||
transition: $listItemTransition;
|
||||
padding: $treeNodeContentPadding;
|
||||
|
||||
.p-tree-toggler {
|
||||
margin-right: $inlineSpacing;
|
||||
@include action-icon();
|
||||
}
|
||||
|
||||
.p-treenode-icon {
|
||||
margin-right: $inlineSpacing;
|
||||
color: $treeNodeIconColor;
|
||||
}
|
||||
|
||||
.p-checkbox {
|
||||
margin-right: $inlineSpacing;
|
||||
|
||||
.p-indeterminate {
|
||||
.p-checkbox-icon {
|
||||
color: $textColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@include focused-listitem();
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
background: $highlightBg;
|
||||
color: $highlightTextColor;
|
||||
|
||||
.p-tree-toggler,
|
||||
.p-treenode-icon {
|
||||
color: $highlightTextColor;
|
||||
|
||||
&:hover {
|
||||
color: $highlightTextColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-treenode-selectable:not(.p-highlight):hover {
|
||||
background: $inputListItemHoverBg;
|
||||
color: $inputListItemTextHoverColor;
|
||||
}
|
||||
|
||||
&.p-treenode-dragover {
|
||||
background: $inputListItemHoverBg;
|
||||
color: $inputListItemTextHoverColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-tree-filter-container {
|
||||
margin-bottom: $inlineSpacing;
|
||||
|
||||
.p-tree-filter {
|
||||
width: 100%;
|
||||
padding-right: nth($inputPadding, 2) + $primeIconFontSize;
|
||||
}
|
||||
|
||||
.p-tree-filter-icon {
|
||||
right: nth($inputPadding, 2);
|
||||
color: $inputIconColor;
|
||||
}
|
||||
}
|
||||
|
||||
.p-treenode-children {
|
||||
padding: $treeNodeChildrenPadding;
|
||||
}
|
||||
|
||||
.p-tree-loading-icon {
|
||||
font-size: $loadingIconFontSize;
|
||||
|
||||
&.p-icon {
|
||||
width: $loadingIconFontSize;
|
||||
height: $loadingIconFontSize;
|
||||
}
|
||||
}
|
||||
|
||||
.p-treenode-droppoint {
|
||||
height: $inlineSpacing;
|
||||
|
||||
&.p-treenode-droppoint-active {
|
||||
background: scale-color($highlightBg, $lightness: -20%);
|
||||
}
|
||||
}
|
||||
}
|
||||
277
public/theme/theme-base/components/data/_treetable.scss
Normal file
277
public/theme/theme-base/components/data/_treetable.scss
Normal file
@@ -0,0 +1,277 @@
|
||||
.p-treetable {
|
||||
.p-paginator-top {
|
||||
border-width: $tableTopPaginatorBorderWidth;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.p-paginator-bottom {
|
||||
border-width: $tableBottomPaginatorBorderWidth;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.p-treetable-header {
|
||||
background: $tableHeaderBg;
|
||||
color: $tableHeaderTextColor;
|
||||
border: $tableHeaderBorder;
|
||||
border-width: $tableHeaderBorderWidth;
|
||||
padding: $tableHeaderPadding;
|
||||
font-weight: $tableHeaderFontWeight;
|
||||
}
|
||||
|
||||
.p-treetable-footer {
|
||||
background: $tableFooterBg;
|
||||
color: $tableFooterTextColor;
|
||||
border: $tableFooterBorder;
|
||||
border-width: $tableFooterBorderWidth;
|
||||
padding: $tableFooterPadding;
|
||||
font-weight: $tableFooterFontWeight;
|
||||
}
|
||||
|
||||
.p-treetable-thead > tr > th {
|
||||
text-align: $tableCellContentAlignment;
|
||||
padding: $tableHeaderCellPadding;
|
||||
border: $tableHeaderCellBorder;
|
||||
border-width: $tableHeaderCellBorderWidth;
|
||||
font-weight: $tableHeaderCellFontWeight;
|
||||
color: $tableHeaderCellTextColor;
|
||||
background: $tableHeaderCellBg;
|
||||
transition: $listItemTransition;
|
||||
}
|
||||
|
||||
.p-treetable-tfoot > tr > td {
|
||||
text-align: $tableCellContentAlignment;
|
||||
padding: $tableFooterCellPadding;
|
||||
border: $tableFooterCellBorder;
|
||||
border-width: $tableFooterCellBorderWidth;
|
||||
font-weight: $tableFooterCellFontWeight;
|
||||
color: $tableFooterCellTextColor;
|
||||
background: $tableFooterCellBg;
|
||||
}
|
||||
|
||||
.p-sortable-column {
|
||||
outline-color: $focusOutlineColor;
|
||||
|
||||
.p-sortable-column-icon {
|
||||
color: $tableHeaderCellIconColor;
|
||||
margin-left: $inlineSpacing;
|
||||
}
|
||||
|
||||
.p-sortable-column-badge {
|
||||
border-radius: 50%;
|
||||
height: $tableSortableColumnBadgeSize;
|
||||
min-width: $tableSortableColumnBadgeSize;
|
||||
line-height: $tableSortableColumnBadgeSize;
|
||||
color: $highlightTextColor;
|
||||
background: $highlightBg;
|
||||
margin-left: $inlineSpacing;
|
||||
}
|
||||
|
||||
&:not(.p-highlight):hover {
|
||||
background: $tableHeaderCellHoverBg;
|
||||
color: $tableHeaderCellTextHoverColor;
|
||||
|
||||
.p-sortable-column-icon {
|
||||
color: $tableHeaderCellIconHoverColor;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
background: $tableHeaderCellHighlightBg;
|
||||
color: $tableHeaderCellHighlightTextColor;
|
||||
|
||||
.p-sortable-column-icon {
|
||||
color: $tableHeaderCellHighlightTextColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-treetable-tbody {
|
||||
> tr {
|
||||
background: $tableBodyRowBg;
|
||||
color: $tableBodyRowTextColor;
|
||||
transition: $listItemTransition;
|
||||
|
||||
> td {
|
||||
text-align: $tableCellContentAlignment;
|
||||
border: $tableBodyCellBorder;
|
||||
border-width: $tableBodyCellBorderWidth;
|
||||
padding: $tableBodyCellPadding;
|
||||
|
||||
.p-treetable-toggler {
|
||||
@include action-icon();
|
||||
margin-right: $inlineSpacing;
|
||||
|
||||
& + .p-checkbox {
|
||||
margin-right: $inlineSpacing;
|
||||
|
||||
.p-indeterminate {
|
||||
.p-checkbox-icon {
|
||||
color: $textColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: .15rem solid $focusOutlineColor;
|
||||
outline-offset: -.15rem;
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
background: $highlightBg;
|
||||
color: $highlightTextColor;
|
||||
|
||||
.p-treetable-toggler {
|
||||
color: $highlightTextColor;
|
||||
|
||||
&:hover {
|
||||
color: $highlightTextColor;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-treetable-selectable,
|
||||
&.p-treetable-hoverable-rows {
|
||||
.p-treetable-tbody > tr:not(.p-highlight):hover {
|
||||
background: $tableBodyRowHoverBg;
|
||||
color: $tableBodyRowTextHoverColor;
|
||||
|
||||
.p-treetable-toggler {
|
||||
color: $tableBodyRowTextHoverColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-column-resizer-helper {
|
||||
background: $tableResizerHelperBg;
|
||||
}
|
||||
|
||||
.p-treetable-scrollable-header,
|
||||
.p-treetable-scrollable-footer {
|
||||
background: $panelHeaderBg;
|
||||
}
|
||||
|
||||
.p-treetable-loading-icon {
|
||||
font-size: $loadingIconFontSize;
|
||||
|
||||
&.p-icon {
|
||||
width: $loadingIconFontSize;
|
||||
height: $loadingIconFontSize;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-treetable-gridlines {
|
||||
.p-treetable-header {
|
||||
border-width: 1px 1px 0 1px;
|
||||
}
|
||||
|
||||
.p-treetable-footer {
|
||||
border-width: 0 1px 1px 1px;
|
||||
}
|
||||
|
||||
.p-treetable-top {
|
||||
border-width: 0 1px 0 1px;
|
||||
}
|
||||
|
||||
.p-treetable-bottom {
|
||||
border-width: 0 1px 1px 1px;
|
||||
}
|
||||
|
||||
.p-treetable-thead {
|
||||
> tr {
|
||||
> th {
|
||||
border-width: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-treetable-tbody {
|
||||
> tr {
|
||||
> td {
|
||||
border-width: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-treetable-tfoot {
|
||||
> tr {
|
||||
> td {
|
||||
border-width: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-treetable-striped {
|
||||
.p-treetable-tbody {
|
||||
> tr.p-row-odd {
|
||||
background: $tableBodyRowEvenBg;
|
||||
|
||||
&.p-highlight {
|
||||
background: $highlightBg;
|
||||
color: $highlightTextColor;
|
||||
|
||||
.p-row-toggler {
|
||||
color: $highlightTextColor;
|
||||
|
||||
&:hover {
|
||||
color: $highlightTextColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& + .p-row-expanded {
|
||||
background: $tableBodyRowEvenBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-treetable-sm {
|
||||
.p-treetable-header {
|
||||
@include scaledPadding($tableHeaderPadding, $scaleSM);
|
||||
}
|
||||
|
||||
.p-treetable-thead > tr > th {
|
||||
@include scaledPadding($tableHeaderCellPadding, $tableScaleSM);
|
||||
}
|
||||
|
||||
.p-treetable-tbody > tr > td {
|
||||
@include scaledPadding($tableBodyCellPadding, $tableScaleSM);
|
||||
}
|
||||
|
||||
.p-treetable-tfoot > tr > td {
|
||||
@include scaledPadding($tableFooterPadding, $tableScaleSM);
|
||||
}
|
||||
|
||||
.p-treetable-footer {
|
||||
@include scaledPadding($tableFooterPadding, $tableScaleSM);
|
||||
}
|
||||
}
|
||||
|
||||
&.p-treetable-lg {
|
||||
.p-treetable-header {
|
||||
@include scaledPadding($tableHeaderPadding, $tableScaleLG);
|
||||
}
|
||||
|
||||
.p-treetable-thead > tr > th {
|
||||
@include scaledPadding($tableHeaderCellPadding, $tableScaleLG);
|
||||
}
|
||||
|
||||
.p-treetable-tbody > tr > td {
|
||||
@include scaledPadding($tableBodyCellPadding, $tableScaleLG);
|
||||
}
|
||||
|
||||
.p-treetable-tfoot > tr > td {
|
||||
@include scaledPadding($tableFooterPadding, $tableScaleLG);
|
||||
}
|
||||
|
||||
.p-treetable-footer {
|
||||
@include scaledPadding($tableFooterPadding, $tableScaleLG);
|
||||
}
|
||||
}
|
||||
}
|
||||
41
public/theme/theme-base/components/file/_fileupload.scss
Normal file
41
public/theme/theme-base/components/file/_fileupload.scss
Normal file
@@ -0,0 +1,41 @@
|
||||
.p-fileupload {
|
||||
.p-fileupload-buttonbar {
|
||||
background: $panelHeaderBg;
|
||||
padding: $panelHeaderPadding;
|
||||
border: $panelHeaderBorder;
|
||||
color: $panelHeaderTextColor;
|
||||
border-bottom: 0 none;
|
||||
border-top-right-radius: $borderRadius;
|
||||
border-top-left-radius: $borderRadius;
|
||||
gap: $inlineSpacing;
|
||||
|
||||
.p-button {
|
||||
margin-right: $inlineSpacing;
|
||||
}
|
||||
}
|
||||
|
||||
.p-fileupload-content {
|
||||
background: $panelContentBg;
|
||||
padding: $fileUploadContentPadding;
|
||||
border: $panelContentBorder;
|
||||
color: $panelContentTextColor;
|
||||
border-bottom-right-radius: $borderRadius;
|
||||
border-bottom-left-radius: $borderRadius;
|
||||
}
|
||||
|
||||
.p-progressbar {
|
||||
height: $fileUploadProgressBarHeight;
|
||||
}
|
||||
|
||||
.p-fileupload-row {
|
||||
> div {
|
||||
padding: $tableBodyCellPadding;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-fileupload-advanced {
|
||||
.p-message {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
42
public/theme/theme-base/components/menu/_breadcrumb.scss
Normal file
42
public/theme/theme-base/components/menu/_breadcrumb.scss
Normal file
@@ -0,0 +1,42 @@
|
||||
.p-breadcrumb {
|
||||
background: $breadcrumbBg;
|
||||
border: $breadcrumbBorder;
|
||||
border-radius: $borderRadius;
|
||||
padding: $breadcrumbPadding;
|
||||
|
||||
.p-breadcrumb-list {
|
||||
li {
|
||||
.p-menuitem-link {
|
||||
transition: $listItemTransition;
|
||||
border-radius: $borderRadius;
|
||||
|
||||
&:focus-visible {
|
||||
@include focused();
|
||||
}
|
||||
|
||||
.p-menuitem-text {
|
||||
color: $breadcrumbItemTextColor;
|
||||
}
|
||||
|
||||
.p-menuitem-icon {
|
||||
color: $breadcrumbItemIconColor;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-menuitem-separator {
|
||||
margin: 0 $inlineSpacing 0 $inlineSpacing;
|
||||
color: $breadcrumbSeparatorColor;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.p-menuitem-text {
|
||||
color: $breadcrumbLastItemTextColor;
|
||||
}
|
||||
|
||||
.p-menuitem-icon {
|
||||
color: $breadcrumbLastItemIconColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
52
public/theme/theme-base/components/menu/_contextmenu.scss
Normal file
52
public/theme/theme-base/components/menu/_contextmenu.scss
Normal file
@@ -0,0 +1,52 @@
|
||||
.p-contextmenu {
|
||||
padding: $verticalMenuPadding;
|
||||
background: $overlayMenuBg;
|
||||
color: $menuTextColor;
|
||||
border: $overlayMenuBorder;
|
||||
box-shadow: $overlayMenuShadow;
|
||||
border-radius: $borderRadius;
|
||||
width: $menuWidth;
|
||||
|
||||
.p-menuitem-link {
|
||||
@include menuitem-link();
|
||||
}
|
||||
|
||||
.p-submenu-list {
|
||||
padding: $verticalMenuPadding;
|
||||
background: $overlayMenuBg;
|
||||
border: $overlayMenuBorder;
|
||||
box-shadow: $overlayMenuShadow;
|
||||
border-radius: $borderRadius;
|
||||
}
|
||||
|
||||
.p-menuitem {
|
||||
&.p-menuitem-active {
|
||||
> .p-menuitem-link {
|
||||
background: $menuitemActiveBg;
|
||||
|
||||
.p-menuitem-text {
|
||||
color: $menuitemTextActiveColor;
|
||||
}
|
||||
|
||||
.p-menuitem-icon, .p-submenu-icon {
|
||||
color: $menuitemIconActiveColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-menu-separator {
|
||||
border-top: $divider;
|
||||
margin: $menuSeparatorMargin;
|
||||
}
|
||||
|
||||
.p-submenu-icon {
|
||||
font-size: $menuitemSubmenuIconFontSize;
|
||||
transition: transform $transitionDuration;
|
||||
|
||||
&.p-icon {
|
||||
width: $menuitemSubmenuIconFontSize;
|
||||
height: $menuitemSubmenuIconFontSize;
|
||||
}
|
||||
}
|
||||
}
|
||||
97
public/theme/theme-base/components/menu/_dock.scss
Normal file
97
public/theme/theme-base/components/menu/_dock.scss
Normal file
@@ -0,0 +1,97 @@
|
||||
.p-dock {
|
||||
.p-dock-list {
|
||||
background: $dockBg;
|
||||
border: $dockBorder;
|
||||
padding: $dockPadding;
|
||||
border-radius: $dockBorderRadius;
|
||||
}
|
||||
|
||||
.p-dock-item {
|
||||
padding: $dockItemPadding;
|
||||
}
|
||||
|
||||
.p-dock-action {
|
||||
width: $dockActionWidth;
|
||||
height: $dockActionHeight;
|
||||
}
|
||||
|
||||
&.p-dock-magnification {
|
||||
&.p-dock-top,
|
||||
&.p-dock-bottom {
|
||||
.p-dock-item-second-prev,
|
||||
.p-dock-item-second-next {
|
||||
margin: 0 $dockSecondItemsMargin;
|
||||
}
|
||||
|
||||
.p-dock-item-prev,
|
||||
.p-dock-item-next {
|
||||
margin: 0 $dockFirstItemsMargin;
|
||||
}
|
||||
|
||||
.p-dock-item-current {
|
||||
margin: 0 $dockCurrentItemMargin;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-dock-left,
|
||||
&.p-dock-right {
|
||||
.p-dock-item-second-prev,
|
||||
.p-dock-item-second-next {
|
||||
margin: $dockSecondItemsMargin 0;
|
||||
}
|
||||
|
||||
.p-dock-item-prev,
|
||||
.p-dock-item-next {
|
||||
margin: $dockFirstItemsMargin 0;
|
||||
}
|
||||
|
||||
.p-dock-item-current {
|
||||
margin: $dockCurrentItemMargin 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 960px) {
|
||||
.p-dock {
|
||||
&.p-dock-top,
|
||||
&.p-dock-bottom {
|
||||
.p-dock-container {
|
||||
overflow-x: auto;
|
||||
width: 100%;
|
||||
|
||||
.p-dock-list {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-dock-left,
|
||||
&.p-dock-right {
|
||||
.p-dock-container {
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
|
||||
.p-dock-list {
|
||||
margin: auto 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-dock-magnification {
|
||||
&.p-dock-top,
|
||||
&.p-dock-bottom,
|
||||
&.p-dock-left,
|
||||
&.p-dock-right {
|
||||
.p-dock-item-second-prev,
|
||||
.p-dock-item-second-next,
|
||||
.p-dock-item-prev,
|
||||
.p-dock-item-next,
|
||||
.p-dock-item-current {
|
||||
transform: none;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
180
public/theme/theme-base/components/menu/_megamenu.scss
Normal file
180
public/theme/theme-base/components/menu/_megamenu.scss
Normal file
@@ -0,0 +1,180 @@
|
||||
.p-megamenu {
|
||||
padding: $horizontalMenuPadding;
|
||||
background: $horizontalMenuBg;
|
||||
color: $horizontalMenuTextColor;
|
||||
border: $horizontalMenuBorder;
|
||||
border-radius: $borderRadius;
|
||||
|
||||
.p-megamenu-root-list {
|
||||
> .p-menuitem {
|
||||
> .p-menuitem-link {
|
||||
@include horizontal-rootmenuitem-link();
|
||||
|
||||
> .p-submenu-icon {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-menuitem-active {
|
||||
> .p-menuitem-link,
|
||||
> .p-menuitem-link:not(.p-disabled):hover {
|
||||
background: $horizontalMenuRootMenuitemActiveBg;
|
||||
|
||||
.p-menuitem-text {
|
||||
color: $horizontalMenuRootMenuitemTextActiveColor;
|
||||
}
|
||||
|
||||
.p-menuitem-icon {
|
||||
color: $horizontalMenuRootMenuitemIconActiveColor;
|
||||
}
|
||||
|
||||
.p-submenu-icon {
|
||||
color: $horizontalMenuRootMenuitemIconActiveColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-menuitem-link {
|
||||
@include menuitem-link();
|
||||
}
|
||||
|
||||
.p-megamenu-panel {
|
||||
background: $overlayMenuBg;
|
||||
color: $menuTextColor;
|
||||
border: $overlayMenuBorder;
|
||||
box-shadow: $overlayMenuShadow;
|
||||
}
|
||||
|
||||
.p-megamenu-submenu-header {
|
||||
margin: $submenuHeaderMargin;
|
||||
padding: $submenuHeaderPadding;
|
||||
color: $submenuHeaderTextColor;
|
||||
background: $submenuHeaderBg;
|
||||
font-weight: $submenuHeaderFontWeight;
|
||||
border-top-right-radius: $borderRadius;
|
||||
border-top-left-radius: $borderRadius;
|
||||
}
|
||||
|
||||
.p-megamenu-submenu {
|
||||
padding: $verticalMenuPadding;
|
||||
width: $menuWidth;
|
||||
|
||||
.p-menu-separator {
|
||||
border-top: $divider;
|
||||
margin: $menuSeparatorMargin;
|
||||
}
|
||||
}
|
||||
|
||||
.p-menuitem {
|
||||
&.p-menuitem-active {
|
||||
> .p-menuitem-link {
|
||||
background: $menuitemActiveBg;
|
||||
|
||||
.p-menuitem-text {
|
||||
color: $menuitemTextActiveColor;
|
||||
}
|
||||
|
||||
.p-menuitem-icon, .p-submenu-icon {
|
||||
color: $menuitemIconActiveColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-megamenu-vertical {
|
||||
width: $menuWidth;
|
||||
padding: $verticalMenuPadding;
|
||||
}
|
||||
|
||||
.p-megamenu-button {
|
||||
width: $actionIconWidth;
|
||||
height: $actionIconHeight;
|
||||
color: $horizontalMenuRootMenuitemIconColor;
|
||||
border-radius: $actionIconBorderRadius;
|
||||
transition: $actionIconTransition;
|
||||
|
||||
&:hover {
|
||||
color: $horizontalMenuRootMenuitemIconHoverColor;
|
||||
background: $horizontalMenuRootMenuitemHoverBg;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@include focused();
|
||||
}
|
||||
}
|
||||
|
||||
.p-submenu-icon {
|
||||
transition: transform $transitionDuration;
|
||||
}
|
||||
|
||||
&.p-megamenu-mobile-active {
|
||||
.p-megamenu-root-list {
|
||||
padding: $verticalMenuPadding;
|
||||
background: $overlayMenuBg;
|
||||
border: $overlayMenuBorder;
|
||||
box-shadow: $overlayMenuShadow;
|
||||
|
||||
.p-menu-separator {
|
||||
border-top: $divider;
|
||||
margin: $menuSeparatorMargin;
|
||||
}
|
||||
|
||||
.p-submenu-icon {
|
||||
font-size: $menuitemSubmenuIconFontSize;
|
||||
|
||||
&.p-icon {
|
||||
width: $menuitemSubmenuIconFontSize;
|
||||
height: $menuitemSubmenuIconFontSize;
|
||||
}
|
||||
}
|
||||
|
||||
> .p-menuitem {
|
||||
width: 100%;
|
||||
position: static;
|
||||
|
||||
> .p-menuitem-link {
|
||||
@include menuitem-link();
|
||||
|
||||
> .p-submenu-icon {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-menuitem-active {
|
||||
> .p-menuitem-link {
|
||||
> .p-submenu-icon {
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-submenu-list {
|
||||
width: 100%;
|
||||
position: static;
|
||||
box-shadow: none;
|
||||
border: 0 none;
|
||||
|
||||
.p-submenu-icon {
|
||||
transition: transform $transitionDuration;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.p-menuitem-active {
|
||||
> .p-menuitem-link {
|
||||
> .p-submenu-icon {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-menuitem {
|
||||
width: 100%;
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
33
public/theme/theme-base/components/menu/_menu.scss
Normal file
33
public/theme/theme-base/components/menu/_menu.scss
Normal file
@@ -0,0 +1,33 @@
|
||||
.p-menu {
|
||||
padding: $verticalMenuPadding;
|
||||
background: $menuBg;
|
||||
color: $menuTextColor;
|
||||
border: $menuBorder;
|
||||
border-radius: $borderRadius;
|
||||
width: $menuWidth;
|
||||
|
||||
.p-menuitem-link {
|
||||
@include menuitem-link();
|
||||
}
|
||||
|
||||
&.p-menu-overlay {
|
||||
background: $overlayMenuBg;
|
||||
border: $overlayMenuBorder;
|
||||
box-shadow: $overlayMenuShadow;
|
||||
}
|
||||
|
||||
.p-submenu-header {
|
||||
margin: $submenuHeaderMargin;
|
||||
padding: $submenuHeaderPadding;
|
||||
color: $submenuHeaderTextColor;
|
||||
background: $submenuHeaderBg;
|
||||
font-weight: $submenuHeaderFontWeight;
|
||||
border-top-right-radius: $submenuHeaderBorderRadius;
|
||||
border-top-left-radius: $submenuHeaderBorderRadius;
|
||||
}
|
||||
|
||||
.p-menu-separator {
|
||||
border-top: $divider;
|
||||
margin: $menuSeparatorMargin;
|
||||
}
|
||||
}
|
||||
181
public/theme/theme-base/components/menu/_menubar.scss
Normal file
181
public/theme/theme-base/components/menu/_menubar.scss
Normal file
@@ -0,0 +1,181 @@
|
||||
.p-menubar {
|
||||
padding: $horizontalMenuPadding;
|
||||
background: $horizontalMenuBg;
|
||||
color: $horizontalMenuTextColor;
|
||||
border: $horizontalMenuBorder;
|
||||
border-radius: $borderRadius;
|
||||
|
||||
.p-menuitem-link {
|
||||
@include menuitem-link();
|
||||
}
|
||||
|
||||
.p-menubar-root-list {
|
||||
> .p-menuitem {
|
||||
> .p-menuitem-link {
|
||||
@include horizontal-rootmenuitem-link();
|
||||
}
|
||||
|
||||
&.p-menuitem-active {
|
||||
> .p-menuitem-link,
|
||||
> .p-menuitem-link:not(.p-disabled):hover {
|
||||
background: $horizontalMenuRootMenuitemActiveBg;
|
||||
|
||||
.p-menuitem-text {
|
||||
color: $horizontalMenuRootMenuitemTextActiveColor;
|
||||
}
|
||||
|
||||
.p-menuitem-icon {
|
||||
color: $horizontalMenuRootMenuitemIconActiveColor;
|
||||
}
|
||||
|
||||
.p-submenu-icon {
|
||||
color: $horizontalMenuRootMenuitemIconActiveColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-submenu-list {
|
||||
padding: $verticalMenuPadding;
|
||||
background: $overlayMenuBg;
|
||||
border: $overlayMenuBorder;
|
||||
box-shadow: $overlayMenuShadow;
|
||||
width: $menuWidth;
|
||||
|
||||
.p-menu-separator {
|
||||
border-top: $divider;
|
||||
margin: $menuSeparatorMargin;
|
||||
}
|
||||
|
||||
.p-submenu-icon {
|
||||
font-size: $menuitemSubmenuIconFontSize;
|
||||
|
||||
&.p-icon {
|
||||
width: $menuitemSubmenuIconFontSize;
|
||||
height: $menuitemSubmenuIconFontSize;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-menuitem {
|
||||
&.p-menuitem-active {
|
||||
> .p-menuitem-link {
|
||||
background: $menuitemActiveBg;
|
||||
|
||||
.p-menuitem-text {
|
||||
color: $menuitemTextActiveColor;
|
||||
}
|
||||
|
||||
.p-menuitem-icon, .p-submenu-icon {
|
||||
color: $menuitemIconActiveColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 960px) {
|
||||
.p-menubar {
|
||||
position: relative;
|
||||
|
||||
.p-menubar-button {
|
||||
display: flex;
|
||||
width: $actionIconWidth;
|
||||
height: $actionIconHeight;
|
||||
color: $horizontalMenuRootMenuitemIconColor;
|
||||
border-radius: $actionIconBorderRadius;
|
||||
transition: $actionIconTransition;
|
||||
|
||||
&:hover {
|
||||
color: $horizontalMenuRootMenuitemIconHoverColor;
|
||||
background: $horizontalMenuRootMenuitemHoverBg;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@include focused();
|
||||
}
|
||||
}
|
||||
|
||||
.p-menubar-root-list {
|
||||
position: absolute;
|
||||
display: none;
|
||||
padding: $verticalMenuPadding;
|
||||
background: $overlayMenuBg;
|
||||
border: $overlayMenuBorder;
|
||||
box-shadow: $overlayMenuShadow;
|
||||
width: 100%;
|
||||
|
||||
.p-menu-separator {
|
||||
border-top: $divider;
|
||||
margin: $menuSeparatorMargin;
|
||||
}
|
||||
|
||||
.p-submenu-icon {
|
||||
font-size: $menuitemSubmenuIconFontSize;
|
||||
|
||||
&.p-icon {
|
||||
width: $menuitemSubmenuIconFontSize;
|
||||
height: $menuitemSubmenuIconFontSize;
|
||||
}
|
||||
}
|
||||
|
||||
> .p-menuitem {
|
||||
width: 100%;
|
||||
position: static;
|
||||
|
||||
> .p-menuitem-link {
|
||||
@include menuitem-link();
|
||||
|
||||
> .p-submenu-icon {
|
||||
margin-left: auto;
|
||||
transition: transform $transitionDuration;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-menuitem-active {
|
||||
> .p-menuitem-link {
|
||||
> .p-submenu-icon {
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-submenu-list {
|
||||
width: 100%;
|
||||
position: static;
|
||||
box-shadow: none;
|
||||
border: 0 none;
|
||||
|
||||
.p-submenu-icon {
|
||||
transition: transform $transitionDuration;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.p-menuitem-active {
|
||||
> .p-menuitem-link {
|
||||
> .p-submenu-icon {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-menuitem {
|
||||
width: 100%;
|
||||
position: static;
|
||||
}
|
||||
|
||||
@include nested-submenu-indents(nth($menuitemPadding, 1), 2, 10);
|
||||
}
|
||||
|
||||
&.p-menubar-mobile-active .p-menubar-root-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
136
public/theme/theme-base/components/menu/_panelmenu.scss
Normal file
136
public/theme/theme-base/components/menu/_panelmenu.scss
Normal file
@@ -0,0 +1,136 @@
|
||||
.p-panelmenu {
|
||||
.p-panelmenu-header {
|
||||
> a {
|
||||
padding: $accordionHeaderPadding;
|
||||
border: $accordionHeaderBorder;
|
||||
color: $accordionHeaderTextColor;
|
||||
background: $accordionHeaderBg;
|
||||
font-weight: $accordionHeaderFontWeight;
|
||||
border-radius: $borderRadius;
|
||||
transition: $listItemTransition;
|
||||
|
||||
.p-panelmenu-icon {
|
||||
margin-right: $inlineSpacing;
|
||||
}
|
||||
|
||||
.p-menuitem-icon {
|
||||
margin-right: $inlineSpacing;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
@include focused();
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.p-highlight):not(.p-disabled) {
|
||||
> a:hover {
|
||||
background: $accordionHeaderHoverBg;
|
||||
border-color: $accordionHeaderHoverBorderColor;
|
||||
color: $accordionHeaderTextHoverColor;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
margin-bottom: 0;
|
||||
|
||||
> a {
|
||||
background: $accordionHeaderActiveBg;
|
||||
border-color: $accordionHeaderActiveBorderColor;
|
||||
color: $accordionHeaderTextActiveColor;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
&:not(.p-disabled) {
|
||||
> a {
|
||||
&:hover {
|
||||
border-color: $accordionHeaderActiveHoverBorderColor;
|
||||
background: $accordionHeaderActiveHoverBg;
|
||||
color: $accordionHeaderTextActiveHoverColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-panelmenu-content {
|
||||
padding: $verticalMenuPadding;
|
||||
border: $accordionContentBorder;
|
||||
background: $accordionContentBg;
|
||||
color: $accordionContentTextColor;
|
||||
border-top: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-right-radius: $borderRadius;
|
||||
border-bottom-left-radius: $borderRadius;
|
||||
|
||||
.p-menuitem {
|
||||
.p-menuitem-link {
|
||||
@include menuitem-link();
|
||||
|
||||
.p-panelmenu-icon {
|
||||
margin-right: $inlineSpacing;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-submenu-list:not(.p-panelmenu-root-submenu) {
|
||||
padding: $treeNodeChildrenPadding;
|
||||
}
|
||||
}
|
||||
|
||||
.p-panelmenu-panel {
|
||||
margin-bottom: $accordionSpacing;
|
||||
|
||||
@if $accordionSpacing == 0 {
|
||||
.p-panelmenu-header {
|
||||
> a {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.p-panelmenu-content {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&:not(:first-child) {
|
||||
.p-panelmenu-header {
|
||||
> a {
|
||||
border-top: 0 none;
|
||||
}
|
||||
|
||||
&:not(.p-highlight):not(.p-disabled):hover,
|
||||
&:not(.p-disabled).p-highlight:hover {
|
||||
> a {
|
||||
border-top: 0 none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
.p-panelmenu-header {
|
||||
> a {
|
||||
border-top-right-radius: $borderRadius;
|
||||
border-top-left-radius: $borderRadius;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.p-panelmenu-header:not(.p-highlight) {
|
||||
> a {
|
||||
border-bottom-right-radius: $borderRadius;
|
||||
border-bottom-left-radius: $borderRadius;
|
||||
}
|
||||
}
|
||||
|
||||
.p-panelmenu-content {
|
||||
border-bottom-right-radius: $borderRadius;
|
||||
border-bottom-left-radius: $borderRadius;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
60
public/theme/theme-base/components/menu/_slidemenu.scss
Normal file
60
public/theme/theme-base/components/menu/_slidemenu.scss
Normal file
@@ -0,0 +1,60 @@
|
||||
.p-slidemenu {
|
||||
padding: $verticalMenuPadding;
|
||||
background: $menuBg;
|
||||
color: $menuTextColor;
|
||||
border: $menuBorder;
|
||||
border-radius: $borderRadius;
|
||||
width: $menuWidth;
|
||||
|
||||
.p-menuitem-link {
|
||||
@include menuitem-link();
|
||||
}
|
||||
|
||||
&.p-slidemenu-overlay {
|
||||
background: $overlayMenuBg;
|
||||
border: $overlayMenuBorder;
|
||||
box-shadow: $overlayMenuShadow;
|
||||
}
|
||||
|
||||
.p-slidemenu-list {
|
||||
padding: $verticalMenuPadding;
|
||||
background: $overlayMenuBg;
|
||||
border: $overlayMenuBorder;
|
||||
box-shadow: $overlayMenuShadow;
|
||||
}
|
||||
|
||||
.p-slidemenu {
|
||||
&.p-slidemenu-active {
|
||||
> .p-slidemenu-link {
|
||||
background: $menuitemActiveBg;
|
||||
|
||||
.p-slidemenu-text {
|
||||
color: $menuitemTextActiveColor;
|
||||
}
|
||||
|
||||
.p-slidemenu-icon, .p-slidemenu-icon {
|
||||
color: $menuitemIconActiveColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-slidemenu-separator {
|
||||
border-top: $divider;
|
||||
margin: $menuSeparatorMargin;
|
||||
}
|
||||
|
||||
.p-slidemenu-icon {
|
||||
font-size: $menuitemSubmenuIconFontSize;
|
||||
|
||||
&.p-icon {
|
||||
width: $menuitemSubmenuIconFontSize;
|
||||
height: $menuitemSubmenuIconFontSize;
|
||||
}
|
||||
}
|
||||
|
||||
.p-slidemenu-backward {
|
||||
padding: $menuitemPadding;
|
||||
color: $menuitemTextColor;
|
||||
}
|
||||
}
|
||||
57
public/theme/theme-base/components/menu/_steps.scss
Normal file
57
public/theme/theme-base/components/menu/_steps.scss
Normal file
@@ -0,0 +1,57 @@
|
||||
@use 'sass:math';
|
||||
|
||||
.p-steps {
|
||||
|
||||
.p-steps-item {
|
||||
.p-menuitem-link {
|
||||
background: transparent;
|
||||
transition: $listItemTransition;
|
||||
border-radius: $borderRadius;
|
||||
background: $stepsItemBg;
|
||||
|
||||
.p-steps-number {
|
||||
color: $stepsItemNumberColor;
|
||||
border: $stepsItemBorder;
|
||||
background: $stepsItemBg;
|
||||
min-width: $stepsItemNumberWidth;
|
||||
height: $stepsItemNumberHeight;
|
||||
line-height: $stepsItemNumberHeight;
|
||||
font-size: $stepsItemNumberFontSize;
|
||||
z-index: 1;
|
||||
border-radius: $stepsItemNumberBorderRadius;
|
||||
}
|
||||
|
||||
.p-steps-title {
|
||||
margin-top: $inlineSpacing;
|
||||
color: $stepsItemTextColor;
|
||||
}
|
||||
|
||||
&:not(.p-disabled):focus-visible {
|
||||
@include focused();
|
||||
}
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
.p-steps-number {
|
||||
background: $highlightBg;
|
||||
color: $highlightTextColor;
|
||||
}
|
||||
|
||||
.p-steps-title {
|
||||
font-weight: $stepsItemActiveFontWeight;
|
||||
color: $textColor;
|
||||
}
|
||||
}
|
||||
|
||||
&:before {
|
||||
content:' ';
|
||||
border-top: $divider;
|
||||
width: 100%;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
display: block;
|
||||
position: absolute;
|
||||
margin-top: math.div(-1 * $stepsItemNumberHeight, 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
50
public/theme/theme-base/components/menu/_tabmenu.scss
Normal file
50
public/theme/theme-base/components/menu/_tabmenu.scss
Normal file
@@ -0,0 +1,50 @@
|
||||
.p-tabmenu {
|
||||
.p-tabmenu-nav {
|
||||
background: $tabviewNavBg;
|
||||
border: $tabviewNavBorder;
|
||||
border-width: $tabviewNavBorderWidth;
|
||||
|
||||
.p-tabmenuitem {
|
||||
margin-right: $tabviewHeaderSpacing;
|
||||
|
||||
.p-menuitem-link {
|
||||
border: $tabviewHeaderBorder;
|
||||
border-width: $tabviewHeaderBorderWidth;
|
||||
border-color: $tabviewHeaderBorderColor;
|
||||
background: $tabviewHeaderBg;
|
||||
color: $tabviewHeaderTextColor;
|
||||
padding: $tabviewHeaderPadding;
|
||||
font-weight: $tabviewHeaderFontWeight;
|
||||
border-top-right-radius: $borderRadius;
|
||||
border-top-left-radius: $borderRadius;
|
||||
transition: $listItemTransition;
|
||||
margin: $tabviewHeaderMargin;
|
||||
height: calc(100% + #{-1 * nth($tabviewHeaderMargin, 3)});
|
||||
|
||||
.p-menuitem-icon {
|
||||
margin-right: $inlineSpacing;
|
||||
}
|
||||
|
||||
&:not(.p-disabled):focus-visible {
|
||||
@include focused-inset();
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.p-highlight):not(.p-disabled):hover {
|
||||
.p-menuitem-link {
|
||||
background: $tabviewHeaderHoverBg;
|
||||
border-color: $tabviewHeaderHoverBorderColor;
|
||||
color: $tabviewHeaderTextHoverColor;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
.p-menuitem-link {
|
||||
background: $tabviewHeaderActiveBg;
|
||||
border-color: $tabviewHeaderActiveBorderColor;
|
||||
color: $tabviewHeaderTextActiveColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
56
public/theme/theme-base/components/menu/_tieredmenu.scss
Normal file
56
public/theme/theme-base/components/menu/_tieredmenu.scss
Normal file
@@ -0,0 +1,56 @@
|
||||
.p-tieredmenu {
|
||||
padding: $verticalMenuPadding;
|
||||
background: $menuBg;
|
||||
color: $menuTextColor;
|
||||
border: $menuBorder;
|
||||
border-radius: $borderRadius;
|
||||
width: $menuWidth;
|
||||
|
||||
.p-menuitem-link {
|
||||
@include menuitem-link();
|
||||
}
|
||||
|
||||
&.p-tieredmenu-overlay {
|
||||
background: $overlayMenuBg;
|
||||
border: $overlayMenuBorder;
|
||||
box-shadow: $overlayMenuShadow;
|
||||
}
|
||||
|
||||
.p-submenu-list {
|
||||
padding: $verticalMenuPadding;
|
||||
background: $overlayMenuBg;
|
||||
border: $overlayMenuBorder;
|
||||
box-shadow: $overlayMenuShadow;
|
||||
}
|
||||
|
||||
.p-menuitem {
|
||||
&.p-menuitem-active {
|
||||
> .p-menuitem-link {
|
||||
background: $menuitemActiveBg;
|
||||
|
||||
.p-menuitem-text {
|
||||
color: $menuitemTextActiveColor;
|
||||
}
|
||||
|
||||
.p-menuitem-icon, .p-submenu-icon {
|
||||
color: $menuitemIconActiveColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-menu-separator {
|
||||
border-top: $divider;
|
||||
margin: $menuSeparatorMargin;
|
||||
}
|
||||
|
||||
.p-submenu-icon {
|
||||
font-size: $menuitemSubmenuIconFontSize;
|
||||
transition: transform $transitionDuration;
|
||||
|
||||
&.p-icon {
|
||||
width: $menuitemSubmenuIconFontSize;
|
||||
height: $menuitemSubmenuIconFontSize;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
.p-inline-message {
|
||||
padding: $inlineMessagePadding;
|
||||
margin: $inlineMessageMargin;
|
||||
border-radius: $borderRadius;
|
||||
|
||||
&.p-inline-message-info {
|
||||
background: $infoMessageBg;
|
||||
border: $infoMessageBorder;
|
||||
border-width: $inlineMessageBorderWidth;
|
||||
color: $infoMessageTextColor;
|
||||
|
||||
.p-inline-message-icon {
|
||||
color: $infoMessageIconColor;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-inline-message-success {
|
||||
background: $successMessageBg;
|
||||
border: $successMessageBorder;
|
||||
border-width: $inlineMessageBorderWidth;
|
||||
color: $successMessageTextColor;
|
||||
|
||||
.p-inline-message-icon {
|
||||
color: $successMessageIconColor;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-inline-message-warn {
|
||||
background: $warningMessageBg;
|
||||
border: $warningMessageBorder;
|
||||
border-width: $inlineMessageBorderWidth;
|
||||
color: $warningMessageTextColor;
|
||||
|
||||
.p-inline-message-icon {
|
||||
color: $warningMessageIconColor;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-inline-message-error {
|
||||
background: $errorMessageBg;
|
||||
border: $errorMessageBorder;
|
||||
border-width: $inlineMessageBorderWidth;
|
||||
color: $errorMessageTextColor;
|
||||
|
||||
.p-inline-message-icon {
|
||||
color: $errorMessageIconColor;
|
||||
}
|
||||
}
|
||||
|
||||
.p-inline-message-icon {
|
||||
font-size: $inlineMessageIconFontSize;
|
||||
margin-right: $inlineSpacing;
|
||||
|
||||
&.p-icon {
|
||||
width: $inlineMessageIconFontSize;
|
||||
height: $inlineMessageIconFontSize;
|
||||
}
|
||||
}
|
||||
|
||||
.p-inline-message-text {
|
||||
font-size: $inlineMessageTextFontSize;
|
||||
}
|
||||
|
||||
&.p-inline-message-icon-only {
|
||||
.p-inline-message-icon {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
107
public/theme/theme-base/components/messages/_message.scss
Normal file
107
public/theme/theme-base/components/messages/_message.scss
Normal file
@@ -0,0 +1,107 @@
|
||||
.p-message {
|
||||
margin: $messageMargin;
|
||||
border-radius: $borderRadius;
|
||||
|
||||
.p-message-wrapper {
|
||||
padding: $messagePadding;
|
||||
}
|
||||
|
||||
.p-message-close {
|
||||
width: $actionIconWidth;
|
||||
height: $actionIconHeight;
|
||||
border-radius: $actionIconBorderRadius;
|
||||
background: transparent;
|
||||
transition: $actionIconTransition;
|
||||
|
||||
&:hover {
|
||||
background: rgba(255,255,255,.5);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
@include focused();
|
||||
}
|
||||
}
|
||||
|
||||
&.p-message-info {
|
||||
background: $infoMessageBg;
|
||||
border: $infoMessageBorder;
|
||||
border-width: $messageBorderWidth;
|
||||
color: $infoMessageTextColor;
|
||||
|
||||
.p-message-icon {
|
||||
color: $infoMessageIconColor;
|
||||
}
|
||||
|
||||
.p-message-close {
|
||||
color: $infoMessageIconColor;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-message-success {
|
||||
background: $successMessageBg;
|
||||
border: $successMessageBorder;
|
||||
border-width: $messageBorderWidth;
|
||||
color: $successMessageTextColor;
|
||||
|
||||
.p-message-icon {
|
||||
color: $successMessageIconColor;
|
||||
}
|
||||
|
||||
.p-message-close {
|
||||
color: $successMessageIconColor;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-message-warn {
|
||||
background: $warningMessageBg;
|
||||
border: $warningMessageBorder;
|
||||
border-width: $messageBorderWidth;
|
||||
color: $warningMessageTextColor;
|
||||
|
||||
.p-message-icon {
|
||||
color: $warningMessageIconColor;
|
||||
}
|
||||
|
||||
.p-message-close {
|
||||
color: $warningMessageIconColor;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-message-error {
|
||||
background: $errorMessageBg;
|
||||
border: $errorMessageBorder;
|
||||
border-width: $messageBorderWidth;
|
||||
color: $errorMessageTextColor;
|
||||
|
||||
.p-message-icon {
|
||||
color: $errorMessageIconColor;
|
||||
}
|
||||
|
||||
.p-message-close {
|
||||
color: $errorMessageIconColor;
|
||||
}
|
||||
}
|
||||
|
||||
.p-message-text {
|
||||
font-size: $messageTextFontSize;
|
||||
font-weight: $messageTextFontWeight;
|
||||
}
|
||||
|
||||
.p-message-icon {
|
||||
font-size: $messageIconFontSize;
|
||||
margin-right: $inlineSpacing;
|
||||
|
||||
&.p-icon {
|
||||
width: $messageIconFontSize;
|
||||
height: $messageIconFontSize;
|
||||
}
|
||||
}
|
||||
|
||||
.p-message-summary {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.p-message-detail {
|
||||
margin-left: $inlineSpacing;
|
||||
}
|
||||
}
|
||||
101
public/theme/theme-base/components/messages/_toast.scss
Normal file
101
public/theme/theme-base/components/messages/_toast.scss
Normal file
@@ -0,0 +1,101 @@
|
||||
.p-toast {
|
||||
opacity: $toastOpacity;
|
||||
|
||||
.p-toast-message {
|
||||
margin: $toastMargin;
|
||||
box-shadow: $toastShadow;
|
||||
border-radius: $borderRadius;
|
||||
|
||||
.p-toast-message-content {
|
||||
padding: $toastPadding;
|
||||
border-width: $toastBorderWidth;
|
||||
|
||||
.p-toast-message-text {
|
||||
margin: $toastMessageTextMargin;
|
||||
}
|
||||
|
||||
.p-toast-message-icon {
|
||||
font-size: $toastIconFontSize;
|
||||
|
||||
&.p-icon {
|
||||
width: $toastIconFontSize;
|
||||
height: $toastIconFontSize;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.p-toast-summary {
|
||||
font-weight: $toastTitleFontWeight;
|
||||
}
|
||||
|
||||
.p-toast-detail {
|
||||
margin: $toastDetailMargin;
|
||||
}
|
||||
}
|
||||
|
||||
.p-toast-icon-close {
|
||||
width: $toastIconFontSize;
|
||||
height: $toastIconFontSize;
|
||||
border-radius: $actionIconBorderRadius;
|
||||
background: transparent;
|
||||
transition: $actionIconTransition;
|
||||
|
||||
&:hover {
|
||||
background: rgba(255,255,255,.5);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
@include focused();
|
||||
}
|
||||
}
|
||||
|
||||
&.p-toast-message-info {
|
||||
background: $infoMessageBg;
|
||||
border: $infoMessageBorder;
|
||||
border-width: $messageBorderWidth;
|
||||
color: $infoMessageTextColor;
|
||||
|
||||
.p-toast-message-icon,
|
||||
.p-toast-icon-close {
|
||||
color: $infoMessageIconColor;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-toast-message-success {
|
||||
background: $successMessageBg;
|
||||
border: $successMessageBorder;
|
||||
border-width: $messageBorderWidth;
|
||||
color: $successMessageTextColor;
|
||||
|
||||
.p-toast-message-icon,
|
||||
.p-toast-icon-close {
|
||||
color: $successMessageIconColor;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-toast-message-warn {
|
||||
background: $warningMessageBg;
|
||||
border: $warningMessageBorder;
|
||||
border-width: $messageBorderWidth;
|
||||
color: $warningMessageTextColor;
|
||||
|
||||
.p-toast-message-icon,
|
||||
.p-toast-icon-close {
|
||||
color: $warningMessageIconColor;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-toast-message-error {
|
||||
background: $errorMessageBg;
|
||||
border: $errorMessageBorder;
|
||||
border-width: $messageBorderWidth;
|
||||
color: $errorMessageTextColor;
|
||||
|
||||
.p-toast-message-icon,
|
||||
.p-toast-icon-close {
|
||||
color: $errorMessageIconColor;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
34
public/theme/theme-base/components/misc/_avatar.scss
Normal file
34
public/theme/theme-base/components/misc/_avatar.scss
Normal file
@@ -0,0 +1,34 @@
|
||||
.p-avatar {
|
||||
background-color: $avatarBg;
|
||||
border-radius: $borderRadius;
|
||||
|
||||
&.p-avatar-lg {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
font-size: 1.5rem;
|
||||
|
||||
.p-avatar-icon {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-avatar-xl {
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
font-size: 2rem;
|
||||
|
||||
.p-avatar-icon {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-avatar-circle {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.p-avatar-group {
|
||||
.p-avatar {
|
||||
border: 2px solid $panelContentBg;
|
||||
}
|
||||
}
|
||||
77
public/theme/theme-base/components/misc/_badge.scss
Normal file
77
public/theme/theme-base/components/misc/_badge.scss
Normal file
@@ -0,0 +1,77 @@
|
||||
.p-badge {
|
||||
background: $badgeBg;
|
||||
color: $badgeTextColor;
|
||||
font-size: $badgeFontSize;
|
||||
font-weight: $badgeFontWeight;
|
||||
min-width: $badgeMinWidth;
|
||||
height: $badgeHeight;
|
||||
line-height: $badgeHeight;
|
||||
|
||||
&.p-badge-secondary {
|
||||
background-color: $secondaryButtonBg;
|
||||
color: $secondaryButtonTextColor;
|
||||
}
|
||||
|
||||
&.p-badge-success {
|
||||
background-color: $successButtonBg;
|
||||
color: $successButtonTextColor;
|
||||
}
|
||||
|
||||
&.p-badge-info {
|
||||
background-color: $infoButtonBg;
|
||||
color: $infoButtonTextColor;
|
||||
}
|
||||
|
||||
&.p-badge-warning {
|
||||
background-color: $warningButtonBg;
|
||||
color: $warningButtonTextColor;
|
||||
}
|
||||
|
||||
&.p-badge-danger {
|
||||
background-color: $dangerButtonBg;
|
||||
color: $dangerButtonTextColor;
|
||||
}
|
||||
|
||||
&.p-badge-lg {
|
||||
font-size: 1.5 * $badgeFontSize;
|
||||
min-width: 1.5 * $badgeMinWidth;
|
||||
height: 1.5 * $badgeHeight;
|
||||
line-height: 1.5 * $badgeHeight;
|
||||
}
|
||||
|
||||
&.p-badge-xl {
|
||||
font-size: 2 * $badgeFontSize;
|
||||
min-width: 2 * $badgeMinWidth;
|
||||
height: 2 * $badgeHeight;
|
||||
line-height: 2 * $badgeHeight;
|
||||
}
|
||||
}
|
||||
|
||||
.p-tag {
|
||||
background: $badgeBg;
|
||||
color: $badgeTextColor;
|
||||
font-size: $badgeFontSize;
|
||||
font-weight: $badgeFontWeight;
|
||||
padding: $tagPadding;
|
||||
border-radius: $borderRadius;
|
||||
|
||||
&.p-tag-success {
|
||||
background-color: $successButtonBg;
|
||||
color: $successButtonTextColor;
|
||||
}
|
||||
|
||||
&.p-tag-info {
|
||||
background-color: $infoButtonBg;
|
||||
color: $infoButtonTextColor;
|
||||
}
|
||||
|
||||
&.p-tag-warning {
|
||||
background-color: $warningButtonBg;
|
||||
color: $warningButtonTextColor;
|
||||
}
|
||||
|
||||
&.p-tag-danger {
|
||||
background-color: $dangerButtonBg;
|
||||
color: $dangerButtonTextColor;
|
||||
}
|
||||
}
|
||||
39
public/theme/theme-base/components/misc/_chip.scss
Normal file
39
public/theme/theme-base/components/misc/_chip.scss
Normal file
@@ -0,0 +1,39 @@
|
||||
@use 'sass:math';
|
||||
|
||||
.p-chip {
|
||||
background-color: $chipBg;
|
||||
color: $chipTextColor;
|
||||
border-radius: $chipBorderRadius;
|
||||
padding: 0 nth($inputPadding, 2);
|
||||
|
||||
.p-chip-text {
|
||||
line-height: 1.5;
|
||||
margin-top: math.div(nth($inputPadding, 1), 2);
|
||||
margin-bottom: math.div(nth($inputPadding, 1), 2);
|
||||
}
|
||||
|
||||
.p-chip-icon {
|
||||
margin-right: $inlineSpacing;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 1.5 + nth($inputPadding, 1);
|
||||
height: 1.5 + nth($inputPadding, 1);
|
||||
margin-left: -1 * nth($inputPadding, 2);
|
||||
margin-right: $inlineSpacing;
|
||||
}
|
||||
|
||||
.p-chip-remove-icon {
|
||||
border-radius: $borderRadius;
|
||||
transition: $actionIconTransition;
|
||||
margin-left: $inlineSpacing;
|
||||
|
||||
&:focus-visible {
|
||||
@include focused();
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 0 none;
|
||||
}
|
||||
}
|
||||
}
|
||||
17
public/theme/theme-base/components/misc/_inplace.scss
Normal file
17
public/theme/theme-base/components/misc/_inplace.scss
Normal file
@@ -0,0 +1,17 @@
|
||||
.p-inplace {
|
||||
.p-inplace-display {
|
||||
padding: $inplacePadding;
|
||||
border-radius: $borderRadius;
|
||||
transition: $formElementTransition;
|
||||
|
||||
&:not(.p-disabled):hover {
|
||||
background: $inplaceHoverBg;
|
||||
color: $inplaceTextHoverColor;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@include focused();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
17
public/theme/theme-base/components/misc/_progressbar.scss
Normal file
17
public/theme/theme-base/components/misc/_progressbar.scss
Normal file
@@ -0,0 +1,17 @@
|
||||
.p-progressbar {
|
||||
border: $progressBarBorder;
|
||||
height: $progressBarHeight;
|
||||
background: $progressBarBg;
|
||||
border-radius: $borderRadius;
|
||||
|
||||
.p-progressbar-value {
|
||||
border: 0 none;
|
||||
margin: 0;
|
||||
background: $progressBarValueBg;
|
||||
}
|
||||
|
||||
.p-progressbar-label {
|
||||
color: $progressBarValueTextColor;
|
||||
line-height: $progressBarHeight;
|
||||
}
|
||||
}
|
||||
25
public/theme/theme-base/components/misc/_scrolltop.scss
Normal file
25
public/theme/theme-base/components/misc/_scrolltop.scss
Normal file
@@ -0,0 +1,25 @@
|
||||
.p-scrolltop {
|
||||
width: $scrollTopWidth;
|
||||
height: $scrollTopHeight;
|
||||
border-radius: $scrollTopBorderRadius;
|
||||
box-shadow: $inputOverlayShadow;
|
||||
transition: $actionIconTransition;
|
||||
|
||||
&.p-link {
|
||||
background: $scrollTopBg;
|
||||
|
||||
&:hover {
|
||||
background: $scrollTopHoverBg;
|
||||
}
|
||||
}
|
||||
|
||||
.p-scrolltop-icon {
|
||||
font-size: $scrollTopFontSize;
|
||||
color: $scrollTopTextColor;
|
||||
|
||||
&.p-icon {
|
||||
width: $scrollTopFontSize;
|
||||
height: $scrollTopFontSize;
|
||||
}
|
||||
}
|
||||
}
|
||||
8
public/theme/theme-base/components/misc/_skeleton.scss
Normal file
8
public/theme/theme-base/components/misc/_skeleton.scss
Normal file
@@ -0,0 +1,8 @@
|
||||
.p-skeleton {
|
||||
background-color: $skeletonBg;
|
||||
border-radius: $borderRadius;
|
||||
|
||||
&:after {
|
||||
background: linear-gradient(90deg, rgba(255, 255, 255, 0), $skeletonAnimationBg, rgba(255, 255, 255, 0));
|
||||
}
|
||||
}
|
||||
40
public/theme/theme-base/components/misc/_tag.scss
Normal file
40
public/theme/theme-base/components/misc/_tag.scss
Normal file
@@ -0,0 +1,40 @@
|
||||
@use 'sass:math';
|
||||
|
||||
.p-tag {
|
||||
background: $badgeBg;
|
||||
color: $badgeTextColor;
|
||||
font-size: $badgeFontSize;
|
||||
font-weight: $badgeFontWeight;
|
||||
padding: $tagPadding;
|
||||
border-radius: $borderRadius;
|
||||
|
||||
&.p-tag-success {
|
||||
background-color: $successButtonBg;
|
||||
color: $successButtonTextColor;
|
||||
}
|
||||
|
||||
&.p-tag-info {
|
||||
background-color: $infoButtonBg;
|
||||
color: $infoButtonTextColor;
|
||||
}
|
||||
|
||||
&.p-tag-warning {
|
||||
background-color: $warningButtonBg;
|
||||
color: $warningButtonTextColor;
|
||||
}
|
||||
|
||||
&.p-tag-danger {
|
||||
background-color: $dangerButtonBg;
|
||||
color: $dangerButtonTextColor;
|
||||
}
|
||||
|
||||
.p-tag-icon {
|
||||
margin-right: math.div($inlineSpacing, 2);
|
||||
font-size: $badgeFontSize;
|
||||
|
||||
&.p-icon {
|
||||
width: $badgeFontSize;
|
||||
height: $badgeFontSize;
|
||||
}
|
||||
}
|
||||
}
|
||||
12
public/theme/theme-base/components/misc/_terminal.scss
Normal file
12
public/theme/theme-base/components/misc/_terminal.scss
Normal file
@@ -0,0 +1,12 @@
|
||||
.p-terminal {
|
||||
background: $panelContentBg;
|
||||
color: $panelContentTextColor;
|
||||
border: $panelContentBorder;
|
||||
padding: $panelContentPadding;
|
||||
|
||||
.p-terminal-input {
|
||||
font-family: var(--font-family);
|
||||
font-feature-settings: var(--font-feature-settings, normal);
|
||||
font-size: $inputTextFontSize;
|
||||
}
|
||||
}
|
||||
153
public/theme/theme-base/components/multimedia/_galleria.scss
Normal file
153
public/theme/theme-base/components/multimedia/_galleria.scss
Normal file
@@ -0,0 +1,153 @@
|
||||
.p-galleria {
|
||||
.p-galleria-close {
|
||||
margin: $galleriaCloseIconMargin;
|
||||
background: $galleriaCloseIconBg;
|
||||
color: $galleriaCloseIconColor;
|
||||
width: $galleriaCloseIconWidth;
|
||||
height: $galleriaCloseIconHeight;
|
||||
transition: $actionIconTransition;
|
||||
border-radius: $galleriaCloseIconBorderRadius;
|
||||
|
||||
.p-galleria-close-icon {
|
||||
font-size: $galleriaCloseIconFontSize;
|
||||
|
||||
&.p-icon {
|
||||
width: $galleriaCloseIconFontSize;
|
||||
height: $galleriaCloseIconFontSize;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $galleriaCloseIconHoverBg;
|
||||
color: $galleriaCloseIconHoverColor;
|
||||
}
|
||||
}
|
||||
|
||||
.p-galleria-item-nav {
|
||||
background: $galleriaItemNavigatorBg;
|
||||
color: $galleriaItemNavigatorColor;
|
||||
width: $galleriaItemNavigatorWidth;
|
||||
height: $galleriaItemNavigatorHeight;
|
||||
transition: $actionIconTransition;
|
||||
border-radius: $galleriaItemNavigatorBorderRadius;
|
||||
margin: $galleriaItemNavigatorMargin;
|
||||
|
||||
.p-galleria-item-prev-icon,
|
||||
.p-galleria-item-next-icon {
|
||||
font-size: $galleriaItemNavigatorFontSize;
|
||||
|
||||
&.p-icon {
|
||||
width: $galleriaCloseIconFontSize;
|
||||
height: $galleriaCloseIconFontSize;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.p-disabled) {
|
||||
&:hover {
|
||||
background: $galleriaItemNavigatorHoverBg;
|
||||
color: $galleriaItemNavigatorHoverColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-galleria-caption {
|
||||
background: $galleriaCaptionBg;
|
||||
color: $galleriaCaptionTextColor;
|
||||
padding: $galleriaCaptionPadding;
|
||||
}
|
||||
|
||||
.p-galleria-indicators {
|
||||
padding: $galleriaIndicatorsPadding;
|
||||
|
||||
.p-galleria-indicator {
|
||||
button {
|
||||
background-color: $galleriaIndicatorBg;
|
||||
width: $galleriaIndicatorWidth;
|
||||
height: $galleriaIndicatorHeight;
|
||||
transition: $actionIconTransition;
|
||||
border-radius: $galleriaIndicatorBorderRadius;
|
||||
|
||||
&:hover {
|
||||
background: $galleriaIndicatorHoverBg;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
button {
|
||||
background: $highlightBg;
|
||||
color: $highlightTextColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-galleria-indicators-bottom,
|
||||
&.p-galleria-indicators-top {
|
||||
.p-galleria-indicator {
|
||||
margin-right: $inlineSpacing;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-galleria-indicators-left,
|
||||
&.p-galleria-indicators-right {
|
||||
.p-galleria-indicator {
|
||||
margin-bottom: $inlineSpacing;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-galleria-indicator-onitem {
|
||||
.p-galleria-indicators {
|
||||
background: $galleriaIndicatorsBgOnItem;
|
||||
|
||||
.p-galleria-indicator {
|
||||
button {
|
||||
background: $galleriaIndicatorBgOnItem;
|
||||
|
||||
&:hover {
|
||||
background: $galleriaIndicatorHoverBgOnItem;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
button {
|
||||
background: $highlightBg;
|
||||
color: $highlightTextColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-galleria-thumbnail-container {
|
||||
background: $galleriaThumbnailContainerBg;
|
||||
padding: $galleriaThumbnailContainerPadding;
|
||||
|
||||
.p-galleria-thumbnail-prev,
|
||||
.p-galleria-thumbnail-next {
|
||||
margin: $inlineSpacing;
|
||||
background-color: $galleriaThumbnailNavigatorBg;
|
||||
color: $galleriaThumbnailNavigatorColor;
|
||||
width: $galleriaThumbnailNavigatorWidth;
|
||||
height: $galleriaThumbnailNavigatorHeight;
|
||||
transition: $actionIconTransition;
|
||||
border-radius: $galleriaThumbnailNavigatorBorderRadius;
|
||||
|
||||
&:hover {
|
||||
background: $galleriaThumbnailNavigatorHoverBg;
|
||||
color: $galleriaThumbnailNavigatorHoverColor;
|
||||
}
|
||||
}
|
||||
|
||||
.p-galleria-thumbnail-item-content {
|
||||
transition: $listItemTransition;
|
||||
|
||||
&:focus-visible {
|
||||
@include focused();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-galleria-mask {
|
||||
--maskbg: #{$galleriaMaskBg};
|
||||
}
|
||||
54
public/theme/theme-base/components/multimedia/_image.scss
Normal file
54
public/theme/theme-base/components/multimedia/_image.scss
Normal file
@@ -0,0 +1,54 @@
|
||||
.p-image-mask {
|
||||
--maskbg: #{$imageMaskBg};
|
||||
}
|
||||
|
||||
.p-image-preview-indicator {
|
||||
background-color: transparent;
|
||||
color: $imagePreviewIndicatorColor;
|
||||
transition: $actionIconTransition;
|
||||
|
||||
.p-icon {
|
||||
width: $imagePreviewActionIconFontSize;
|
||||
height: $imagePreviewActionIconFontSize;
|
||||
}
|
||||
}
|
||||
|
||||
.p-image-preview-container {
|
||||
&:hover {
|
||||
> .p-image-preview-indicator {
|
||||
background-color: $imagePreviewIndicatorBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-image-toolbar {
|
||||
padding: $imagePreviewToolbarPadding;
|
||||
}
|
||||
|
||||
.p-image-action.p-link {
|
||||
color: $imagePreviewActionIconColor;
|
||||
background-color: $imagePreviewActionIconBg;
|
||||
width: $imagePreviewActionIconWidth;
|
||||
height: $imagePreviewActionIconHeight;
|
||||
border-radius: $imagePreviewActionIconBorderRadius;
|
||||
transition: $actionIconTransition;
|
||||
margin-right: $inlineSpacing;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $imagePreviewActionIconHoverColor;
|
||||
background-color: $imagePreviewActionIconHoverBg;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: $imagePreviewActionIconFontSize;
|
||||
}
|
||||
|
||||
.p-icon {
|
||||
width: $imagePreviewActionIconFontSize;
|
||||
height: $imagePreviewActionIconFontSize;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,72 @@
|
||||
.p-confirm-popup {
|
||||
background: $overlayContentBg;
|
||||
color: $panelContentTextColor;
|
||||
border: $overlayContentBorder;
|
||||
border-radius: $borderRadius;
|
||||
box-shadow: $overlayContainerShadow;
|
||||
|
||||
.p-confirm-popup-content {
|
||||
padding: $confirmPopupContentPadding;
|
||||
}
|
||||
|
||||
.p-confirm-popup-footer {
|
||||
text-align: right;
|
||||
padding: $confirmPopupFooterPadding;
|
||||
|
||||
button {
|
||||
margin: 0 $inlineSpacing 0 0;
|
||||
width: auto;
|
||||
|
||||
&:last-child {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:after {
|
||||
border: solid transparent;
|
||||
border-color: rgba($overlayContentBg, 0);
|
||||
border-bottom-color: $overlayContentBg;
|
||||
}
|
||||
|
||||
&:before {
|
||||
border: solid transparent;
|
||||
|
||||
@if (nth($overlayContentBorder, 2) == 'none') {
|
||||
border-color: rgba($overlayContentBg, 0);
|
||||
border-bottom-color: scale-color($overlayContentBg, $lightness: -5%);
|
||||
}
|
||||
@else {
|
||||
border-color: rgba(nth($overlayContentBorder, 3), 0);
|
||||
border-bottom-color: scale-color(nth($overlayContentBorder, 3), $lightness: -5%);
|
||||
}
|
||||
}
|
||||
|
||||
&.p-confirm-popup-flipped {
|
||||
&:after {
|
||||
border-top-color: $overlayContentBg;
|
||||
}
|
||||
|
||||
&:before {
|
||||
@if (nth($overlayContentBorder, 2) == 'none') {
|
||||
border-top-color: $overlayContentBg;
|
||||
}
|
||||
@else {
|
||||
border-top-color: nth($overlayContentBorder, 3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-confirm-popup-icon {
|
||||
font-size: $primeIconFontSize * 1.5;
|
||||
|
||||
&.p-icon {
|
||||
width: $primeIconFontSize * 1.5;
|
||||
height: $primeIconFontSize * 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
.p-confirm-popup-message {
|
||||
margin-left: $inlineSpacing * 2;
|
||||
}
|
||||
}
|
||||
76
public/theme/theme-base/components/overlay/_dialog.scss
Normal file
76
public/theme/theme-base/components/overlay/_dialog.scss
Normal file
@@ -0,0 +1,76 @@
|
||||
.p-dialog {
|
||||
border-radius: $borderRadius;
|
||||
box-shadow: $overlayContainerShadow;
|
||||
border: $overlayContentBorder;
|
||||
|
||||
.p-dialog-header {
|
||||
border-bottom: $dialogHeaderBorder;
|
||||
background: $dialogHeaderBg;
|
||||
color: $dialogHeaderTextColor;
|
||||
padding: $dialogHeaderPadding;
|
||||
border-top-right-radius: $borderRadius;
|
||||
border-top-left-radius: $borderRadius;
|
||||
|
||||
.p-dialog-title {
|
||||
font-weight: $dialogHeaderFontWeight;
|
||||
font-size: $dialogHeaderFontSize;
|
||||
}
|
||||
|
||||
.p-dialog-header-icon {
|
||||
@include action-icon();
|
||||
margin-right: $inlineSpacing;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-dialog-content {
|
||||
background: $overlayContentBg;
|
||||
color: $panelContentTextColor;
|
||||
padding: $dialogContentPadding;
|
||||
|
||||
&:last-of-type {
|
||||
border-bottom-right-radius: $borderRadius;
|
||||
border-bottom-left-radius: $borderRadius;
|
||||
}
|
||||
}
|
||||
|
||||
.p-dialog-footer {
|
||||
border-top: $dialogFooterBorder;
|
||||
background: $overlayContentBg;
|
||||
color: $panelFooterTextColor;
|
||||
padding: $dialogFooterPadding;
|
||||
text-align: right;
|
||||
border-bottom-right-radius: $borderRadius;
|
||||
border-bottom-left-radius: $borderRadius;
|
||||
|
||||
button {
|
||||
margin: 0 $inlineSpacing 0 0;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-dialog-maximized {
|
||||
.p-dialog-header, .p-dialog-content:last-of-type {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.p-confirm-dialog {
|
||||
.p-confirm-dialog-icon {
|
||||
font-size: $primeIconFontSize * 2;
|
||||
|
||||
&.p-icon {
|
||||
width: $primeIconFontSize * 2;
|
||||
height: $primeIconFontSize * 2;
|
||||
}
|
||||
}
|
||||
|
||||
.p-confirm-dialog-message {
|
||||
margin-left: $inlineSpacing * 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
@use 'sass:math';
|
||||
|
||||
.p-overlaypanel {
|
||||
background: $overlayContentBg;
|
||||
color: $panelContentTextColor;
|
||||
border: $overlayContentBorder;
|
||||
border-radius: $borderRadius;
|
||||
box-shadow: $overlayContainerShadow;
|
||||
|
||||
.p-overlaypanel-content {
|
||||
padding: $panelContentPadding;
|
||||
}
|
||||
|
||||
.p-overlaypanel-close {
|
||||
background: $buttonBg;
|
||||
color: $buttonTextColor;
|
||||
width: $actionIconWidth;
|
||||
height: $actionIconHeight;
|
||||
transition: $actionIconTransition;
|
||||
border-radius: $actionIconBorderRadius;
|
||||
position: absolute;
|
||||
top: math.div(-1 * $actionIconWidth, 2);
|
||||
right: math.div(-1 * $actionIconWidth, 2);
|
||||
|
||||
&:enabled:hover {
|
||||
background: $buttonHoverBg;
|
||||
color: $buttonTextHoverColor;
|
||||
}
|
||||
}
|
||||
|
||||
&:after {
|
||||
border: solid transparent;
|
||||
border-color: rgba($overlayContentBg, 0);
|
||||
border-bottom-color: $overlayContentBg;
|
||||
}
|
||||
|
||||
&:before {
|
||||
border: solid transparent;
|
||||
|
||||
@if (nth($overlayContentBorder, 2) == 'none') {
|
||||
border-color: rgba($overlayContentBg, 0);
|
||||
border-bottom-color: scale-color($overlayContentBg, $lightness: -5%);
|
||||
}
|
||||
@else {
|
||||
border-color: rgba(nth($overlayContentBorder, 3), 0);
|
||||
border-bottom-color: scale-color(nth($overlayContentBorder, 3), $lightness: -5%);
|
||||
}
|
||||
}
|
||||
|
||||
&.p-overlaypanel-flipped {
|
||||
&:after {
|
||||
border-top-color: $overlayContentBg;
|
||||
}
|
||||
|
||||
&:before {
|
||||
@if (nth($overlayContentBorder, 2) == 'none') {
|
||||
border-top-color: $overlayContentBg;
|
||||
}
|
||||
@else {
|
||||
border-top-color: nth($overlayContentBorder, 3);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
23
public/theme/theme-base/components/overlay/_sidebar.scss
Normal file
23
public/theme/theme-base/components/overlay/_sidebar.scss
Normal file
@@ -0,0 +1,23 @@
|
||||
.p-sidebar {
|
||||
background: $overlayContentBg;
|
||||
color: $panelContentTextColor;
|
||||
border: $overlayContentBorder;
|
||||
box-shadow: $overlayContainerShadow;
|
||||
|
||||
.p-sidebar-header {
|
||||
padding: $panelHeaderPadding;
|
||||
|
||||
.p-sidebar-close,
|
||||
.p-sidebar-icon {
|
||||
@include action-icon();
|
||||
}
|
||||
|
||||
& + .p-sidebar-content {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.p-sidebar-content {
|
||||
padding: $panelContentPadding;
|
||||
}
|
||||
}
|
||||
33
public/theme/theme-base/components/overlay/_tooltip.scss
Normal file
33
public/theme/theme-base/components/overlay/_tooltip.scss
Normal file
@@ -0,0 +1,33 @@
|
||||
.p-tooltip {
|
||||
.p-tooltip-text {
|
||||
background: $tooltipBg;
|
||||
color: $tooltipTextColor;
|
||||
padding: $tooltipPadding;
|
||||
box-shadow: $inputOverlayShadow;
|
||||
border-radius: $borderRadius;
|
||||
}
|
||||
|
||||
&.p-tooltip-right {
|
||||
.p-tooltip-arrow {
|
||||
border-right-color: $tooltipBg;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-tooltip-left {
|
||||
.p-tooltip-arrow {
|
||||
border-left-color: $tooltipBg;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-tooltip-top {
|
||||
.p-tooltip-arrow {
|
||||
border-top-color: $tooltipBg;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-tooltip-bottom {
|
||||
.p-tooltip-arrow {
|
||||
border-bottom-color: $tooltipBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
118
public/theme/theme-base/components/panel/_accordion.scss
Normal file
118
public/theme/theme-base/components/panel/_accordion.scss
Normal file
@@ -0,0 +1,118 @@
|
||||
.p-accordion {
|
||||
.p-accordion-header {
|
||||
.p-accordion-header-link {
|
||||
padding: $accordionHeaderPadding;
|
||||
border: $accordionHeaderBorder;
|
||||
color: $accordionHeaderTextColor;
|
||||
background: $accordionHeaderBg;
|
||||
font-weight: $accordionHeaderFontWeight;
|
||||
border-radius: $borderRadius;
|
||||
transition: $listItemTransition;
|
||||
|
||||
.p-accordion-toggle-icon {
|
||||
margin-right: $inlineSpacing;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.p-disabled) {
|
||||
.p-accordion-header-link {
|
||||
&:focus-visible {
|
||||
@include focused();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.p-highlight):not(.p-disabled):hover {
|
||||
.p-accordion-header-link {
|
||||
background: $accordionHeaderHoverBg;
|
||||
border-color: $accordionHeaderHoverBorderColor;
|
||||
color: $accordionHeaderTextHoverColor;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.p-disabled).p-highlight {
|
||||
.p-accordion-header-link {
|
||||
background: $accordionHeaderActiveBg;
|
||||
border-color: $accordionHeaderActiveBorderColor;
|
||||
color: $accordionHeaderTextActiveColor;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.p-accordion-header-link {
|
||||
border-color: $accordionHeaderActiveHoverBorderColor;
|
||||
background: $accordionHeaderActiveHoverBg;
|
||||
color: $accordionHeaderTextActiveHoverColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-accordion-content {
|
||||
padding: $accordionContentPadding;
|
||||
border: $accordionContentBorder;
|
||||
background: $accordionContentBg;
|
||||
color: $accordionContentTextColor;
|
||||
border-top: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-right-radius: $borderRadius;
|
||||
border-bottom-left-radius: $borderRadius;
|
||||
}
|
||||
|
||||
.p-accordion-tab {
|
||||
margin-bottom: $accordionSpacing;
|
||||
|
||||
@if $accordionSpacing == 0 {
|
||||
.p-accordion-header {
|
||||
.p-accordion-header-link {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.p-accordion-content {
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
&:not(:first-child) {
|
||||
.p-accordion-header {
|
||||
.p-accordion-header-link {
|
||||
border-top: 0 none;
|
||||
}
|
||||
|
||||
&:not(.p-highlight):not(.p-disabled):hover,
|
||||
&:not(.p-disabled).p-highlight:hover {
|
||||
.p-accordion-header-link {
|
||||
border-top: 0 none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
.p-accordion-header {
|
||||
.p-accordion-header-link {
|
||||
border-top-right-radius: $borderRadius;
|
||||
border-top-left-radius: $borderRadius;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.p-accordion-header:not(.p-highlight) {
|
||||
.p-accordion-header-link {
|
||||
border-bottom-right-radius: $borderRadius;
|
||||
border-bottom-left-radius: $borderRadius;
|
||||
}
|
||||
|
||||
.p-accordion-content {
|
||||
border-bottom-right-radius: $borderRadius;
|
||||
border-bottom-left-radius: $borderRadius;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
30
public/theme/theme-base/components/panel/_card.scss
Normal file
30
public/theme/theme-base/components/panel/_card.scss
Normal file
@@ -0,0 +1,30 @@
|
||||
.p-card {
|
||||
background: $panelContentBg;
|
||||
color: $panelContentTextColor;
|
||||
box-shadow: $cardShadow;
|
||||
border-radius: $borderRadius;
|
||||
|
||||
.p-card-body {
|
||||
padding: $cardBodyPadding;
|
||||
}
|
||||
|
||||
.p-card-title {
|
||||
font-size: $cardTitleFontSize;
|
||||
font-weight: $cardTitleFontWeight;
|
||||
margin-bottom: $inlineSpacing;
|
||||
}
|
||||
|
||||
.p-card-subtitle {
|
||||
font-weight: $cardSubTitleFontWeight;
|
||||
margin-bottom: $inlineSpacing;
|
||||
color: $cardSubTitleColor;
|
||||
}
|
||||
|
||||
.p-card-content {
|
||||
padding: $cardContentPadding;
|
||||
}
|
||||
|
||||
.p-card-footer {
|
||||
padding: $cardFooterPadding;
|
||||
}
|
||||
}
|
||||
31
public/theme/theme-base/components/panel/_divider.scss
Normal file
31
public/theme/theme-base/components/panel/_divider.scss
Normal file
@@ -0,0 +1,31 @@
|
||||
.p-divider {
|
||||
.p-divider-content {
|
||||
background-color: $panelContentBg;
|
||||
}
|
||||
|
||||
&.p-divider-horizontal {
|
||||
margin: $dividerHorizontalMargin;
|
||||
padding: $dividerHorizontalPadding;
|
||||
|
||||
&:before {
|
||||
border-top: $dividerSize $dividerColor;
|
||||
}
|
||||
|
||||
.p-divider-content {
|
||||
padding: 0 $inlineSpacing;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-divider-vertical {
|
||||
margin: $dividerVerticalMargin;
|
||||
padding: $dividerVerticalPadding;
|
||||
|
||||
&:before {
|
||||
border-left: $dividerSize $dividerColor;
|
||||
}
|
||||
|
||||
.p-divider-content {
|
||||
padding: $inlineSpacing 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
47
public/theme/theme-base/components/panel/_fieldset.scss
Normal file
47
public/theme/theme-base/components/panel/_fieldset.scss
Normal file
@@ -0,0 +1,47 @@
|
||||
.p-fieldset {
|
||||
border: $panelContentBorder;
|
||||
background: $panelContentBg;
|
||||
color: $panelContentTextColor;
|
||||
border-radius: $borderRadius;
|
||||
|
||||
.p-fieldset-legend {
|
||||
padding: $panelHeaderPadding;
|
||||
border: $panelHeaderBorder;
|
||||
color: $panelHeaderTextColor;
|
||||
background: $panelHeaderBg;
|
||||
font-weight: $panelHeaderFontWeight;
|
||||
border-radius: $borderRadius;
|
||||
}
|
||||
|
||||
&.p-fieldset-toggleable {
|
||||
.p-fieldset-legend {
|
||||
padding: 0;
|
||||
transition: $actionIconTransition;
|
||||
|
||||
a {
|
||||
padding: $panelHeaderPadding;
|
||||
color: $panelHeaderTextColor;
|
||||
border-radius: $borderRadius;
|
||||
transition: $listItemTransition;
|
||||
|
||||
.p-fieldset-toggler {
|
||||
margin-right: $inlineSpacing;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
@include focused();
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $panelHeaderHoverBg;
|
||||
border-color: $panelHeaderHoverBorderColor;
|
||||
color: $panelHeaderTextHoverColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-fieldset-content {
|
||||
padding: $panelContentPadding;
|
||||
}
|
||||
}
|
||||
42
public/theme/theme-base/components/panel/_panel.scss
Normal file
42
public/theme/theme-base/components/panel/_panel.scss
Normal file
@@ -0,0 +1,42 @@
|
||||
.p-panel {
|
||||
.p-panel-header {
|
||||
border: $panelHeaderBorder;
|
||||
padding: $panelHeaderPadding;
|
||||
background: $panelHeaderBg;
|
||||
color: $panelHeaderTextColor;
|
||||
border-top-right-radius: $borderRadius;
|
||||
border-top-left-radius: $borderRadius;
|
||||
|
||||
.p-panel-title {
|
||||
font-weight: $panelHeaderFontWeight;
|
||||
}
|
||||
|
||||
.p-panel-header-icon {
|
||||
@include action-icon();
|
||||
}
|
||||
}
|
||||
|
||||
&.p-panel-toggleable {
|
||||
.p-panel-header {
|
||||
padding: $panelToggleableHeaderPadding;
|
||||
}
|
||||
}
|
||||
|
||||
.p-panel-content {
|
||||
padding: $panelContentPadding;
|
||||
border: $panelContentBorder;
|
||||
background: $panelContentBg;
|
||||
color: $panelContentTextColor;
|
||||
border-bottom-right-radius: $borderRadius;
|
||||
border-bottom-left-radius: $borderRadius;
|
||||
border-top: 0 none;
|
||||
}
|
||||
|
||||
.p-panel-footer {
|
||||
padding: $panelFooterPadding;
|
||||
border: $panelFooterBorder;
|
||||
background: $panelFooterBg;
|
||||
color: $panelFooterTextColor;
|
||||
border-top: 0 none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
.p-scrollpanel {
|
||||
.p-scrollpanel-bar {
|
||||
background: $scrollPanelTrackBg;
|
||||
border: $scrollPanelTrackBorder;
|
||||
}
|
||||
}
|
||||
19
public/theme/theme-base/components/panel/_splitter.scss
Normal file
19
public/theme/theme-base/components/panel/_splitter.scss
Normal file
@@ -0,0 +1,19 @@
|
||||
.p-splitter {
|
||||
border: $panelContentBorder;
|
||||
background: $panelContentBg;
|
||||
border-radius: $borderRadius;
|
||||
color: $panelContentTextColor;
|
||||
|
||||
.p-splitter-gutter {
|
||||
transition: $actionIconTransition;
|
||||
background: $splitterGutterBg;
|
||||
|
||||
.p-splitter-gutter-handle {
|
||||
background: $splitterGutterHandleBg;
|
||||
}
|
||||
}
|
||||
|
||||
.p-splitter-gutter-resizing {
|
||||
background: $splitterGutterHandleBg;
|
||||
}
|
||||
}
|
||||
70
public/theme/theme-base/components/panel/_tabview.scss
Normal file
70
public/theme/theme-base/components/panel/_tabview.scss
Normal file
@@ -0,0 +1,70 @@
|
||||
.p-tabview {
|
||||
.p-tabview-nav {
|
||||
background: $tabviewNavBg;
|
||||
border: $tabviewNavBorder;
|
||||
border-width: $tabviewNavBorderWidth;
|
||||
|
||||
li {
|
||||
margin-right: $tabviewHeaderSpacing;
|
||||
|
||||
.p-tabview-nav-link {
|
||||
border: $tabviewHeaderBorder;
|
||||
border-width: $tabviewHeaderBorderWidth;
|
||||
border-color: $tabviewHeaderBorderColor;
|
||||
background: $tabviewHeaderBg;
|
||||
color: $tabviewHeaderTextColor;
|
||||
padding: $tabviewHeaderPadding;
|
||||
font-weight: $tabviewHeaderFontWeight;
|
||||
border-top-right-radius: $borderRadius;
|
||||
border-top-left-radius: $borderRadius;
|
||||
transition: $listItemTransition;
|
||||
margin: $tabviewHeaderMargin;
|
||||
|
||||
&:not(.p-disabled):focus-visible {
|
||||
@include focused-inset();
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.p-highlight):not(.p-disabled):hover {
|
||||
.p-tabview-nav-link {
|
||||
background: $tabviewHeaderHoverBg;
|
||||
border-color: $tabviewHeaderHoverBorderColor;
|
||||
color: $tabviewHeaderTextHoverColor;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
.p-tabview-nav-link {
|
||||
background: $tabviewHeaderActiveBg;
|
||||
border-color: $tabviewHeaderActiveBorderColor;
|
||||
color: $tabviewHeaderTextActiveColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-tabview-close {
|
||||
margin-left: $inlineSpacing;
|
||||
}
|
||||
|
||||
.p-tabview-nav-btn.p-link {
|
||||
background: $tabviewHeaderActiveBg;
|
||||
color: $tabviewHeaderTextActiveColor;
|
||||
width: $buttonIconOnlyWidth;
|
||||
box-shadow: $raisedButtonShadow;
|
||||
border-radius: 0;
|
||||
|
||||
&:focus-visible {
|
||||
@include focused-inset();
|
||||
}
|
||||
}
|
||||
|
||||
.p-tabview-panels {
|
||||
background: $tabviewContentBg;
|
||||
padding: $tabviewContentPadding;
|
||||
border: $tabviewContentBorder;
|
||||
color: $tabviewContentTextColor;
|
||||
border-bottom-right-radius: $borderRadius;
|
||||
border-bottom-left-radius: $borderRadius;
|
||||
}
|
||||
}
|
||||
11
public/theme/theme-base/components/panel/_toolbar.scss
Normal file
11
public/theme/theme-base/components/panel/_toolbar.scss
Normal file
@@ -0,0 +1,11 @@
|
||||
.p-toolbar {
|
||||
background: $panelHeaderBg;
|
||||
border: $panelHeaderBorder;
|
||||
padding: $panelHeaderPadding;
|
||||
border-radius: $borderRadius;
|
||||
gap: $inlineSpacing;
|
||||
|
||||
.p-toolbar-separator {
|
||||
margin: 0 $inlineSpacing;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user