You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
mohemmionic5/Mohem/node_modules_/primeng/resources/themes/_theme.scss

858 lines
21 KiB
SCSS

/*
* Deprecated: Use nova instead
*/
@mixin hover-element() {
border-color: $stateHoverBorderColor;
background-color: $stateHoverBgColor;
color: $stateHoverTextColor;
a {
color: $stateHoverTextColor;
}
}
@mixin icon-override($icon) {
background: none !important;
font-family: 'primeicons';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
display: inline-block;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-indent: 0px !important;
text-align: center;
&:before {
content: $icon;
}
}
.ui-widget {
font-family: $fontFamily;
font-size: $fontSize;
input, select, textarea, button {
font-family: $fontFamily;
font-size: $fontSize;
}
:active {
outline: none;
}
}
.ui-widget-content {
border: $contentBorderWidth solid $contentBorderColor;
background-color: $contentBgColor;
color: $contentTextColor;
a {
color: $contentTextColor;
}
}
.ui-widget-header {
border: $headerBorderWidth solid $headerBorderColor;
background-color: $headerBgColor;
color: $headerTextColor;
font-weight: $headerFontWeight;
a {
color: $headerTextColor;
}
}
.ui-widget-overlay {
background-color: #666666;
opacity: .50;
filter:Alpha(Opacity=50);
}
.ui-state-default {
border: $stateDefaultBorderWidth solid $stateDefaultBorderColor;
background-color: $stateDefaultBgColor;
color: $stateDefaultTextColor;
a {
color: $stateDefaultTextColor ;
}
}
.ui-state-active {
border-color: $stateActiveBorderColor;
background-color: $stateActiveBgColor;
color: $stateActiveTextColor;
a {
color: $stateActiveTextColor;
}
}
.ui-state-highlight {
border-color: $stateHighlightBorderColor;
background-color: $stateHighlightBgColor;
color: $stateHighlightTextColor;
a {
color: $stateHighlightTextColor;
}
}
.ui-state-focus {
border-color: $stateFocusBorderColor;
background-color: $stateFocusBgColor;
color: $stateFocusTextColor;
a {
color: $stateFocusTextColor;
}
}
.ui-state-error {
border-color: $stateErrorBorderColor;
background-color: $stateErrorBgColor;
color: $stateErrorTextColor;
a {
color: $stateErrorTextColor;
}
}
.ui-state-disabled,
.ui-widget:disabled {
opacity: $disabledOpacity;
filter: Alpha(Opacity= $disabledOpacity * 100);
background-image: none;
cursor: default !important;
* {
cursor: default !important;
}
}
/* Forms */
.ui-inputtext {
background-color: $inputBgColor;
color: $inputTextColor;
}
.ui-inputtext:enabled:hover {
border-color: $stateHoverBorderColor;
}
.ui-inputtext.ui-state-focus,
.ui-inputtext:focus {
outline: 0 none;
border-color: $stateFocusBorderColor;
-moz-box-shadow: 0px 0px 5px $stateFocusBorderColor;
-webkit-box-shadow: 0px 0px 5px $stateFocusBorderColor;
box-shadow: 0px 0px 5px $stateFocusBorderColor;
}
.ui-inputgroup {
.ui-inputgroup-addon {
border-color: $stateDefaultBorderColor;
background-color: lighten($stateDefaultBorderColor, 10%);
color: $inputGroupTextColor;
&:first-child {
border-top-left-radius: $borderRadius;
border-bottom-left-radius: $borderRadius;
}
&:last-child {
border-top-right-radius: $borderRadius;
border-bottom-right-radius: $borderRadius;
}
}
.ui-button {
&:first-child {
border-top-left-radius: $borderRadius;
border-bottom-left-radius: $borderRadius;
}
&:last-child {
border-top-right-radius: $borderRadius;
border-bottom-right-radius: $borderRadius;
}
}
}
.ui-float-label input.ng-dirty.ng-invalid ~ label {
color: $stateErrorTextColor;
}
.ui-autocomplete {
.ui-autocomplete-multiple-container:not(.ui-state-disabled) {
&:hover {
border-color: $stateHoverBorderColor;
}
&.ui-state-focus {
border-color: $stateFocusBorderColor;
}
}
}
.ui-chips {
> ul:not(.ui-state-disabled) {
&:hover {
border-color: $stateHoverBorderColor;
}
&.ui-state-focus {
border-color: $stateFocusBorderColor;
}
}
}
.ui-button:focus,
.ui-button:enabled:hover,
.ui-fileupload-choose:not(.ui-state-disabled):hover {
outline: 0 none;
@include hover-element();
}
.ui-button:enabled:active,
.ui-fileupload-choose:not(.ui-state-disabled):active {
border-color: $stateActiveBorderColor;
background-color: $stateActiveBgColor;
color: $stateActiveTextColor;
}
.ui-chkbox-box:not(.ui-state-disabled):not(.ui-state-active):hover {
@include hover-element();
}
.ui-radiobutton-box:not(.ui-state-disabled):not(.ui-state-active):hover {
@include hover-element();
}
.ui-dropdown .ui-dropdown-clear-icon {
color: lighten($inputTextColor, 40%);
}
.ui-dropdown:not(.ui-state-disabled):hover {
@include hover-element();
}
.ui-dropdown-panel .ui-dropdown-item:not(.ui-state-highlight):not(.ui-state-disabled):hover {
@include hover-element();
}
.ui-listbox {
.ui-listbox-header {
.ui-listbox-filter-container {
.fa {
color: $inputTextColor;
}
}
}
&:not(.ui-state-disabled) {
.ui-listbox-item:not(.ui-state-highlight):not(.ui-state-disabled):hover {
@include hover-element();
}
.ui-listbox-item.ui-state-disabled .ui-chkbox-box:hover {
background-color: $inputBgColor;
border-color: $stateDefaultBorderColor;
}
}
&.ui-state-disabled {
.ui-chkbox-box:not(.ui-state-active):hover {
border-color: $stateDefaultBorderColor;
background-color: $stateDefaultBgColor;
color: $stateDefaultTextColor;
}
}
}
.ui-multiselect:not(.ui-state-disabled):hover {
@include hover-element();
}
.ui-multiselect-panel .ui-multiselect-item:not(.ui-state-highlight):not(.ui-state-disabled):hover {
@include hover-element();
}
.ui-multiselect-panel .ui-multiselect-item.ui-state-disabled:hover .ui-chkbox-box {
background-color: $inputBgColor;
border-color: $stateDefaultBorderColor;
}
.ui-multiselect-panel .ui-multiselect-close {
color: $headerIconTextColor;
}
.ui-multiselect-panel .ui-multiselect-filter-container .fa {
color: $inputTextColor;
}
.ui-spinner:not(.ui-state-disabled) .ui-spinner-button:enabled:hover {
@include hover-element();
}
.ui-spinner:not(.ui-state-disabled) .ui-spinner-button:enabled:active {
border-color: $stateActiveBorderColor;
background-color: $stateActiveBgColor;
color: $stateActiveTextColor;
}
.ui-selectbutton .ui-button:not(.ui-state-disabled):not(.ui-state-active):hover {
@include hover-element();
}
.ui-togglebutton:not(.ui-state-disabled):not(.ui-state-active):hover {
@include hover-element();
}
.ui-paginator a:not(.ui-state-disabled):not(.ui-state-active):hover {
@include hover-element();
}
.ui-paginator a {
color: $stateDefaultTextColor;
}
.ui-datatable {
.ui-rowgroup-header a {
color: $headerTextColor;
}
.ui-sortable-column:not(.ui-state-active):hover {
background-color: $stateHoverBgColor;
color: $stateHoverTextColor;
}
.ui-row-toggler {
color: $contentTextColor;
}
tbody.ui-datatable-hoverable-rows {
> tr.ui-widget-content:not(.ui-state-highlight):hover {
cursor: pointer;
background-color: $stateHoverBgColor;
color: $stateHoverTextColor;
}
}
}
.ui-orderlist {
.ui-orderlist-item:not(.ui-state-highlight):hover {
@include hover-element();
}
}
.ui-picklist {
.ui-picklist-item:not(.ui-state-disabled):not(.ui-state-highlight):hover {
@include hover-element();
}
.ui-picklist-droppoint-highlight {
border-color: $stateHighlightBorderColor;
background-color: $stateHighlightBgColor;
color: darken($contentTextColor,1%);
a {
color: darken($contentTextColor,1%);
}
}
.ui-picklist-highlight {
border-color: $stateHighlightBorderColor;
color: darken($contentTextColor,1%);
a {
color: darken($contentTextColor,1%);
}
}
}
.ui-tree {
&.ui-treenode-dragover {
border-color: $stateHighlightBorderColor;
}
.ui-treenode-content {
&.ui-treenode-selectable {
.ui-treenode-label:not(.ui-state-highlight):hover {
@include hover-element();
}
}
&.ui-treenode-dragover {
background-color: $stateActiveBgColor;
color: $stateActiveTextColor;
}
}
&.ui-tree-horizontal {
.ui-treenode-content.ui-treenode-selectable {
.ui-treenode-label:not(.ui-state-highlight):hover {
background-color: inherit;
color: inherit;
}
&:not(.ui-state-highlight):hover {
@include hover-element();
}
}
}
}
.ui-organizationchart {
.ui-organizationchart-node-content {
&.ui-organizationchart-selectable-node:not(.ui-state-highlight):hover {
@include hover-element();
}
}
}
.ui-accordion {
.ui-accordion-header:not(.ui-state-active):not(.ui-state-disabled):hover {
@include hover-element();
}
}
.ui-fieldset {
&.ui-fieldset-toggleable {
.ui-fieldset-legend:hover {
@include hover-element();
}
}
}
.ui-panel {
.ui-panel-titlebar {
.ui-panel-titlebar-icon:hover {
@include hover-element();
}
}
}
.ui-tabview {
.ui-tabview-nav {
li {
&:not(.ui-state-active):not(.ui-state-disabled):hover {
@include hover-element();
}
}
}
}
.ui-dialog {
.ui-dialog-titlebar-icon {
color: $headerTextColor;
&:hover {
@include hover-element();
}
}
}
.ui-sidebar {
.ui-sidebar-close {
color: $headerTextColor;
&:hover {
@include hover-element();
}
}
}
.ui-overlaypanel {
.ui-overlaypanel-close:hover {
@include hover-element();
}
}
.ui-inplace {
.ui-inplace-display:hover {
@include hover-element();
}
}
.ui-breadcrumb {
a {
color: $headerTextColor;
}
}
.ui-menuitem {
.ui-menuitem-link {
color: $contentTextColor;
&:hover {
@include hover-element();
border-color: transparent;
}
}
&.ui-menuitem-active {
> .ui-menuitem-link {
@include hover-element();
border-color: transparent;
}
}
}
.ui-tabmenu {
.ui-tabmenu-nav {
li:not(.ui-state-active):hover {
@include hover-element();
}
}
}
.ui-steps {
.ui-steps-item:not(.ui-state-highlight):not(.ui-state-disabled):hover {
@include hover-element();
}
}
.ui-panelmenu {
.ui-panelmenu-header {
&:not(.ui-state-active):hover {
@include hover-element();
border-color: $stateDefaultBorderColor;
a {
color: $stateHoverTextColor;
}
}
&.ui-state-active {
a {
color: $stateActiveTextColor;
}
}
}
.ui-panelmenu-content {
.ui-menuitem-link {
color: $contentTextColor;
&:hover {
@include hover-element();
border-color: transparent;
}
}
}
}
.ui-datepicker {
.ui-datepicker-header {
a {
color: $headerTextColor;
&:hover {
@include hover-element();
}
}
}
.ui-datepicker-calendar {
td:not(.ui-state-disabled) {
a:hover {
@include hover-element();
}
}
}
.ui-monthpicker {
.ui-monthpicker-month:hover {
@include hover-element();
}
}
}
.fc {
.fc-toolbar {
.fc-prev-button {
.ui-icon-circle-triangle-w {
margin-top: .3em;
@include icon_override("\e900");
}
}
.fc-next-button {
.ui-icon-circle-triangle-e {
margin-top: .3em;
@include icon_override("\e901");
}
}
}
}
.ui-rating {
a {
color: $inputTextColor;
}
}
.ui-organizationchart {
.ui-organizationchart-line-down {
background-color: darken($contentBorderColor, 10%);
}
.ui-organizationchart-line-left {
border-right: 1px solid darken($contentBorderColor, 10%);
}
.ui-organizationchart-line-top {
border-top: 1px solid darken($contentBorderColor, 10%);
}
.ui-organizationchart-node-content {
border-color: darken($contentBorderColor, 10%);
}
.ui-organizationchart-node-content .ui-node-toggler {
color: darken($contentBorderColor, 10%);
}
}
/* TurboTable */
.ui-table {
.ui-table-thead > tr > th,
.ui-table-tfoot > tr > td {
background-color: $headerBgColor;
border: 1px solid $headerBorderColor;
color: $headerTextColor;
}
.ui-table-tbody > tr {
background-color: $contentBgColor;
color: $contentTextColor;
> td {
border: 1px solid $contentBorderColor;
background-color: inherit;
}
&.ui-state-highlight {
background-color: $stateHighlightBgColor;
color: $stateHighlightTextColor;
}
&.ui-contextmenu-selected {
background-color: lighten($stateHighlightBgColor, 20%);
color: $stateHighlightTextColor;
}
}
.ui-sortable-column {
.ui-sortable-column-icon {
color: $headerTextColor;
}
&.ui-state-highlight {
background-color: $stateHighlightBgColor;
color: $stateHighlightTextColor;
.ui-sortable-column-icon {
color: $stateHighlightTextColor;
}
}
&:not(.ui-state-highlight):hover {
background-color: $stateHoverBgColor;
color: $stateHoverTextColor;
.ui-sortable-column-icon {
color: $stateHoverTextColor;
}
}
}
&.ui-table-hoverable-rows {
.ui-table-tbody > tr:not(.ui-state-highlight):not(.ui-contextmenu-selected):hover {
cursor: pointer;
background-color: $stateHoverBgColor;
color: $stateHoverTextColor;
}
}
}
@media ( max-width: 35em ) {
.ui-table-responsive .ui-table-tbody > tr {
border-top: 1px solid $contentBorderColor;
border-bottom: 1px solid $contentBorderColor;
}
}
/* Row Reorder */
.ui-table .ui-table-tbody > tr.ui-table-dragpoint-top > td {
box-shadow: inset 0 2px 0 0 $stateHighlightBgColor;
}
.ui-table .ui-table-tbody > tr.ui-table-dragpoint-bottom > td {
box-shadow: inset 0 -2px 0 0 $stateHighlightBgColor;
}
/* TurboTable */
.ui-treetable {
.ui-treetable-thead > tr > th,
.ui-treetable-tfoot > tr > td {
background-color: $headerBgColor;
border: 1px solid $headerBorderColor;
color: $headerTextColor;
}
.ui-treetable-tbody > tr {
background-color: $contentBgColor;
color: $contentTextColor;
> td {
border: 1px solid $contentBorderColor;
background-color: inherit;
}
&.ui-state-highlight {
background-color: $stateHighlightBgColor;
color: $stateHighlightTextColor;
.ui-treetable-toggler {
color: $stateHighlightTextColor;
}
}
&.ui-contextmenu-selected {
background-color: lighten($stateHighlightBgColor, 20%);
color: $stateHighlightTextColor;
.ui-treetable-toggler {
color: $stateHighlightTextColor;
}
}
.ui-treetable-toggler {
color: $contentTextColor;
}
}
.ui-sortable-column {
.ui-sortable-column-icon {
color: $headerTextColor;
}
&.ui-state-highlight {
background-color: $stateHighlightBgColor;
color: $stateHighlightTextColor;
.ui-sortable-column-icon {
color: $stateHighlightTextColor;
}
}
&:not(.ui-state-highlight):hover {
background-color: $stateHoverBgColor;
color: $stateHoverTextColor;
.ui-sortable-column-icon {
color: $stateHoverTextColor;
}
}
}
&.ui-treetable-hoverable-rows {
.ui-treetable-tbody > tr:not(.ui-state-highlight):not(.ui-contextmenu-selected):hover {
cursor: pointer;
background-color: $stateHoverBgColor;
color: $stateHoverTextColor;
}
}
}
@media ( max-width: 35em ) {
.ui-treetable-responsive .ui-treetable-tbody > tr {
border-top: 1px solid $contentBorderColor;
border-bottom: 1px solid $contentBorderColor;
}
}
/* Row Reorder */
.ui-treetable .ui-treetable-tbody > tr.ui-treetable-dragpoint-top > td {
box-shadow: inset 0 2px 0 0 $stateHighlightBgColor;
}
.ui-treetable .ui-treetable-tbody > tr.ui-treetable-dragpoint-bottom > td {
box-shadow: inset 0 -2px 0 0 $stateHighlightBgColor;
}
/* InputSwitch */
.ui-inputswitch {
.ui-inputswitch-slider {
-webkit-transition: background-color .3s, box-shadow .2s;
transition: background-color .3s, box-shadow .2s;
background: #cccccc;
&:before {
background-color: #ffffff;
}
}
&.ui-inputswitch-focus {
.ui-inputswitch-slider {
-moz-box-shadow: 0px 0px 5px $stateFocusBorderColor;
-webkit-box-shadow: 0px 0px 5px $stateFocusBorderColor;
box-shadow: 0px 0px 5px $stateFocusBorderColor;
}
}
&:not(.ui-state-disabled):hover {
.ui-inputswitch-slider {
background-color: #b7b7b7;
}
}
&.ui-inputswitch-checked {
.ui-inputswitch-slider {
background-color: #186ba0;
}
&:not(.ui-state-disabled):hover {
.ui-inputswitch-slider {
background-color: darken(#186ba0, 10%);
}
}
}
}
/* Validation */
.ui-inputtext.ng-dirty.ng-invalid,
p-dropdown.ng-dirty.ng-invalid > .ui-dropdown,
p-autocomplete.ng-dirty.ng-invalid > .ui-autocomplete > .ui-inputtext,
p-calendar.ng-dirty.ng-invalid > .ui-calendar > .ui-inputtext,
p-chips.ng-dirty.ng-invalid > .ui-inputtext,
p-inputmask.ng-dirty.ng-invalid > .ui-inputtext,
p-checkbox.ng-dirty.ng-invalid .ui-chkbox-box,
p-radiobutton.ng-dirty.ng-invalid .ui-radiobutton-box,
p-inputswitch.ng-dirty.ng-invalid .ui-inputswitch,
p-listbox.ng-dirty.ng-invalid .ui-inputtext,
p-multiselect.ng-dirty.ng-invalid > .ui-multiselect,
p-spinner.ng-dirty.ng-invalid > .ui-inputtext,
p-selectbutton.ng-dirty.ng-invalid .ui-button,
p-togglebutton.ng-dirty.ng-invalid .ui-button {
border-bottom-color: $invalidInputBorderColor;
}
/* Cornering */
.ui-corner-tl { -moz-border-radius-topleft: $borderRadius; -webkit-border-top-left-radius: $borderRadius; border-top-left-radius: $borderRadius; }
.ui-corner-tr { -moz-border-radius-topright: $borderRadius; -webkit-border-top-right-radius: $borderRadius; border-top-right-radius: $borderRadius; }
.ui-corner-bl { -moz-border-radius-bottomleft: $borderRadius; -webkit-border-bottom-left-radius: $borderRadius; border-bottom-left-radius: $borderRadius; }
.ui-corner-br { -moz-border-radius-bottomright: $borderRadius; -webkit-border-bottom-right-radius: $borderRadius; border-bottom-right-radius: $borderRadius; }
.ui-corner-top { -moz-border-radius-topleft: $borderRadius; -webkit-border-top-left-radius: $borderRadius; border-top-left-radius: $borderRadius; -moz-border-radius-topright: $borderRadius; -webkit-border-top-right-radius: $borderRadius; border-top-right-radius: $borderRadius; }
.ui-corner-bottom { -moz-border-radius-bottomleft: $borderRadius; -webkit-border-bottom-left-radius: $borderRadius; border-bottom-left-radius: $borderRadius; -moz-border-radius-bottomright: $borderRadius; -webkit-border-bottom-right-radius: $borderRadius; border-bottom-right-radius: $borderRadius; }
.ui-corner-right { -moz-border-radius-topright: $borderRadius; -webkit-border-top-right-radius: $borderRadius; border-top-right-radius: $borderRadius; -moz-border-radius-bottomright: $borderRadius; -webkit-border-bottom-right-radius: $borderRadius; border-bottom-right-radius: $borderRadius; }
.ui-corner-left { -moz-border-radius-topleft: $borderRadius; -webkit-border-top-left-radius: $borderRadius; border-top-left-radius: $borderRadius; -moz-border-radius-bottomleft: $borderRadius; -webkit-border-bottom-left-radius: $borderRadius; border-bottom-left-radius: $borderRadius; }
.ui-corner-all { -moz-border-radius: $borderRadius; -webkit-border-radius: $borderRadius; border-radius: $borderRadius; }