highperfocused/ESP-Miner
1
0
Fork 0
mirror of https://github.com/skot/ESP-Miner.git synced 2025-03-17 13:22:53 +01:00
Code Issues Packages Projects Releases Wiki Activity

Overhaul Axeos theme (#429)

Browse Source
This commit is contained in:
Benjamin Wilson 2024-11-01 18:10:56 -04:00 committed by GitHub
parent e0090fd45e
commit 38aa71e1b6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
108 changed files with 8843 additions and 6463 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.vscode/settings.json vendored
View File

@ -1,6 +1,6 @@
{
"idf.flashType": "UART",
"idf.portWin": "COM3",
"idf.portWin": "COM72",
"idf.adapterTargetName": "esp32s3",
"idf.openOcdConfigs": [
"interface/ftdi/esp32_devkitj_v1.cfg",

30
main/http_server/axe-os/only-gzip.js
View File

@ -4,13 +4,27 @@ const path = require('path');
const directory = './dist/axe-os';
fs.readdir(directory, (err, files) => {
if (err) throw err;
if (err) throw err;
for (const file of files) {
if (!file.endsWith('.gz')) {
fs.unlink(path.join(directory, file), err => {
if (err) throw err;
});
for (const file of files) {
const filePath = path.join(directory, file);
fs.stat(filePath, (err, stats) => {
if (err) throw err;
if (stats.isDirectory()) {
// If it's a directory, call rmdir after deleting its contents
fs.rmdir(filePath, { recursive: true }, (err) => {
if (err) throw err;
console.log(`Removed directory: ${filePath}`);
});
} else if (!file.endsWith('.gz')) {
// If it's a file and doesn't end with .gz, unlink it
fs.unlink(filePath, (err) => {
if (err) throw err;
console.log(`Removed file: ${filePath}`);
});
}
});
}
}
});
});

269
main/http_server/axe-os/src/app/components/home/home.component.html
View File

@ -3,206 +3,172 @@
</ng-template>
<ng-container *ngIf="info$ | async as info; else loading">
<!-- Temp warning alert -->
<p-message *ngIf="info.overheat_mode"
severity="error"
styleClass="w-full mb-4 py-4 border-round-xl"
<p-message *ngIf="info.overheat_mode" severity="error" styleClass="w-full mb-4 py-4 border-round-xl"
text="Bitaxe has overheated - See settings">
</p-message>
<div class="grid" *ngIf="info$ | async as info; else loading">
<div class="col-12">
<div class="card">
<div class="grid mb-4">
<div class="col-12 md:col-6 xl:col-3">
<div class="card mb-0">
<div class="flex justify-content-between mb-3">
<div>
<span class="block text-500 font-medium mb-3">Hash Rate</span>
<div class="text-900 font-medium text-xl">{{info.hashRate * 1000000000 | hashSuffix}}
</div>
</div>
<div class="flex align-items-center justify-content-center bg-orange-100 border-round"
[ngStyle]="{width: '2.5rem', height: '2.5rem'}">
<i class="pi pi-bolt text-orange-500 text-xl"></i>
<div class="grid">
<div class="col-12 md:col-6 xl:col-3">
<div class="card mb-0">
<div class="flex justify-content-between mb-3">
<div>
<span class="block text-500 font-medium mb-3">Hash Rate</span>
<div class="text-900 font-medium text-xl">{{info.hashRate * 1000000000 | hashSuffix}}
</div>
</div>
<ng-container *ngIf="expectedHashRate$ | async as expectedHashRate">
<span class="text-green-500 font-medium">{{expectedHashRate * 1000000000 | hashSuffix}}</span>
<span class="text-500"> expected</span>
</ng-container>
</div>
<ng-container *ngIf="expectedHashRate$ | async as expectedHashRate">
<span class="text-green-500 font-medium">{{expectedHashRate * 1000000000 |
hashSuffix}}</span>
<span class="text-500"> expected</span>
</ng-container>
</div>
<div class="col-12 md:col-6 xl:col-3">
<div class="card mb-0">
<div class="flex justify-content-between mb-3">
<div>
<span class="block text-500 font-medium mb-3">Shares</span>
<div class="text-900 font-medium text-xl">{{info.sharesAccepted | number: '1.0-0'}}</div>
</div>
<div class="flex align-items-center justify-content-center bg-blue-100 border-round"
[ngStyle]="{width: '2.5rem', height: '2.5rem'}">
<i class="pi pi-send text-blue-500 text-xl"></i>
</div>
<div class="col-12 md:col-6 xl:col-3">
<div class="card mb-0">
<div class="flex justify-content-between mb-3">
<div>
<span class="block text-500 font-medium mb-3">Efficiency</span>
<div class="text-900 font-medium text-xl">
<td>{{info.power / (info.hashRate/1000) | number: '1.2-2'}} <small>J/TH</small>
</td>
</div>
</div>
<span class="text-red-500 font-medium">{{info.sharesRejected | number: '1.0-0'}} </span>
<span class="text-500">rejected</span>
</div>
<ng-container *ngIf="expectedHashRate$ | async as expectedHashRate">
<span class="text-green-500 font-medium">{{info.power / (expectedHashRate/1000) | number:
'1.2-2'}} <small>J/TH</small>
</span>
<span class="text-500"> expected</span>
</ng-container>
<!-- <span class="text-green-500 font-medium">%52+ </span>
<span class="text-500">since last week</span> -->
</div>
<div class="col-12 md:col-6 xl:col-3">
<div class="card mb-0">
<div class="flex justify-content-between mb-3">
<div>
<span class="block text-500 font-medium mb-3">Efficiency</span>
<div class="text-900 font-medium text-xl">
<td>{{info.power / (info.hashRate/1000) | number: '1.2-2'}} <small>J/TH</small>
</td>
</div>
</div>
<div class="flex align-items-center justify-content-center bg-orange-100 border-round"
[ngStyle]="{width: '2.5rem', height: '2.5rem'}">
<i class="pi pi-thumbs-up text-orange-500 text-xl"></i>
</div>
<div class="col-12 md:col-6 xl:col-3">
<div class="card mb-0">
<div class="flex justify-content-between mb-3">
<div>
<span class="block text-500 font-medium mb-3">Shares</span>
<div class="text-900 font-medium text-xl">{{info.sharesAccepted | number: '1.0-0'}}
</div>
</div>
<ng-container *ngIf="expectedHashRate$ | async as expectedHashRate">
<span class="text-green-500 font-medium">{{info.power / (expectedHashRate/1000) | number: '1.2-2'}} <small>J/TH</small>
</span>
<span class="text-500"> expected</span>
</ng-container>
<!-- <span class="text-green-500 font-medium">%52+ </span>
<span class="text-500">since last week</span> -->
</div>
<span class="text-red-500 font-medium">{{info.sharesRejected | number: '1.0-0'}} </span>
<span class="text-500">rejected</span>
</div>
<div class="col-12 md:col-6 xl:col-3">
<div class="card mb-0">
<div class="flex justify-content-between mb-3">
<div>
<span class="block text-500 font-medium mb-3">Best Difficulty</span>
<div class="text-900 font-medium text-xl">{{info.bestDiff}}
<span class="text-500">all-time best</span>
</div>
</div>
<div class="flex align-items-center justify-content-center bg-yellow-100 border-round"
[ngStyle]="{width: '2.5rem', height: '2.5rem'}">
<i class="pi pi-star-fill text-yellow-500 text-xl"></i>
</div>
</div>
<span class="text-900 font-medium">{{info.bestSessionDiff}} </span>
<span class="text-500">since system boot</span>
<!-- <span class="text-green-500 font-medium">520 </span>
<span class="text-500">newly registered</span> -->
</div>
</div>
</div>
<div class="col-12 md:col-6 xl:col-3">
<div class="card mb-0">
<div class="flex justify-content-between mb-3">
<div>
<span class="block text-500 font-medium mb-3">Best Difficulty</span>
<div class="text-900 font-medium text-xl">{{info.bestDiff}}
<span class="text-500">all-time best</span>
</div>
</div>
</div>
<span class="text-900 font-medium">{{info.bestSessionDiff}} </span>
<span class="text-500">since system boot</span>
<!-- <span class="text-green-500 font-medium">520 </span>
<span class="text-500">newly registered</span> -->
</div>
</div>
</div>
</div>
<div class="col-12 mb-4">
<div class="card">
<p-chart [data]="chartData" [options]="chartOptions"></p-chart>
</div>
</div>
<div class="col-12 lg:col-12 xl:col-6">
<div class="col-12 lg:col-6 xl:col-6">
<div class="card">
<h5>Power</h5>
<div class="grid text-center">
<div class="col-6 sm:col-4">
<p-knob [min]="3" [max]="maxPower" [readonly]="true" [(ngModel)]="info.power"
valueTemplate="{value}W"></p-knob>
Power
<h4 style="text-align: center;">Power</h4>
<div class="grid">
<div class="col-12">
<h6>Power <span style="float: right;">{{info.power}} W</span></h6>
<p-progressBar [value]="(info.power / maxPower) * 100" [style]="{ height: '6px' }" >
<ng-template pTemplate="content" let-value></ng-template>
</p-progressBar>
</div>
<div class="col-6 sm:col-4">
<p-knob [min]="4.5" [max]="5.5" [readonly]="true" [(ngModel)]="info.voltage"
valueTemplate="{value}V"
[valueColor]="info.voltage < 4.8 ? '#ff0000' : 'var(--primary-color, Black)'"></p-knob>
Input Voltage
<div class="col-12">
<h6>Input Voltage <span style="float: right;">{{info.voltage}} V</span></h6>
<p-progressBar [value]="(info.voltage / 5.5) * 100" [style]="{ height: '6px' }" >
<ng-template pTemplate="content" let-value>
</ng-template>
</p-progressBar>
<span class="danger" *ngIf="info.voltage < 4.8">&nbsp; Danger: Low voltage</span>
</div>
<div class="col-6 sm:col-4">
<p-knob [min]="0.9" [max]="1.8" [readonly]="true" [(ngModel)]="info.coreVoltage"
valueTemplate="{value}V"></p-knob>
ASIC Voltage Requested
<div class="col-12">
<!-- <p-knob [min]="100" [max]="maxFrequency" [readonly]="true" [(ngModel)]="info.frequency"
valueTemplate="{value}"></p-knob>
ASIC Frequency (MHz) -->
<h6>ASIC Frequency <span style="float: right;">{{info.frequency}} Mhz</span></h6>
<p-progressBar [value]="(info.frequency / maxFrequency) * 100" [style]="{ height: '6px' }" >
<ng-template pTemplate="content" let-value></ng-template>
</p-progressBar>
</div>
<div class="col-12">
<!-- <p-knob [min]="0.9" [max]="1.8" [readonly]="true" [(ngModel)]="info.coreVoltageActual"
valueTemplate="{value}V"></p-knob>
ASIC Voltage Measured -->
<h6>Measured ASIC Voltage <span style="float: right;">{{info.coreVoltageActual}} V</span></h6>
<p-progressBar [value]="(info.coreVoltageActual / 1.8) * 100" [style]="{ height: '6px' }" >
<ng-template pTemplate="content" let-value></ng-template>
</p-progressBar>
</div>
</div>
</div>
</div>
<div class="col-12 lg:col-6 xl:col-3">
<div class="col-12 lg:col-6 xl:col-6">
<div class="card">
<h5>Heat</h5>
<div class="grid text-center">
<div class="col-6">
<p-knob [min]="20" [max]="maxTemp" [readonly]="true" [(ngModel)]="info.temp"
valueTemplate="{value}°C"
[valueColor]="info.temp >= 70 ? '#ff0000' : 'var(--primary-color, Black)'">
</p-knob>
ASIC Temperature
<h4 style="text-align: center;">Heat</h4>
<div class="grid">
<div class="col-12">
<h6>ASIC Temperature <span style="float: right;">{{info.temp}}&deg;C</span></h6>
<p-progressBar [value]="(info.temp / maxTemp) * 100" [style]="{ height: '6px' }" >
<ng-template pTemplate="content" let-value></ng-template>
</p-progressBar>
<span class="danger" *ngIf="info.temp >= 70">&nbsp;
Danger:
High Temperature</span>
</div>
<div class="col-6" *ngIf="info.vrTemp > 0">
<p-knob [min]="20" [max]="145" [readonly]="true" [(ngModel)]="info.vrTemp"
valueTemplate="{value}C"
[valueColor]="info.vrTemp >= 105 ? '#ff0000' : 'var(--primary-color, Black)'"></p-knob>
Voltage Regulator Temperature
<div class="col-12" *ngIf="info.vrTemp > 0">
<h6>Voltage Regulator Temperature <span style="float: right;">{{info.vrTemp}}&deg;C</span></h6>
<p-progressBar [value]="(info.vrTemp / 120) * 100" [style]="{ height: '6px' }" >
<ng-template pTemplate="content" let-value></ng-template>
</p-progressBar>
<span class="danger" *ngIf="info.vrTemp >= 105">&nbsp;
Danger:
High Temperature</span>
</div>
<div class="col-6">
<p-knob [min]="0" [max]="100" [readonly]="true" [(ngModel)]="info.fanspeed"
valueTemplate="{value}%"></p-knob>
Fan %
<div class="col-12">
<h6>Fan Speed<span style="float: right;">{{info.fanspeed}}% ({{info.fanrpm}} RPM)</span></h6>
<p-progressBar [value]="info.fanspeed" [style]="{ height: '6px' }" >
<ng-template pTemplate="content" let-value></ng-template>
</p-progressBar>
</div>
<div class="col-6">
<p-knob [min]="0" [max]="20000" [readonly]="true" [(ngModel)]="info.fanrpm"
valueTemplate="{value}"></p-knob>
Fan RPM
</div>
<!--
<div class="col-6" *ngIf="info.boardtemp1">
<p-knob [min]="20" [max]="75" [readonly]="true" [(ngModel)]="info.boardtemp1"
valueTemplate="{value}C"></p-knob>
Board Temp 1
</div>
<div class="col-6" *ngIf="info.boardtemp2">
<p-knob [min]="20" [max]="75" [readonly]="true" [(ngModel)]="info.boardtemp2"
valueTemplate="{value}C"></p-knob>
Board Temp 2
</div>
-->
</div>
</div>
</div>
<div class="col-12 lg:col-6 xl:col-3">
<div class="card">
<h5>Performance</h5>
<div class="grid text-center">
<div class="col-6">
<p-knob [min]="100" [max]="maxFrequency" [readonly]="true" [(ngModel)]="info.frequency"
valueTemplate="{value}"></p-knob>
ASIC Frequency (MHz)
</div>
<div class="col-6">
<p-knob [min]="0.9" [max]="1.8" [readonly]="true" [(ngModel)]="info.coreVoltageActual"
valueTemplate="{value}V"></p-knob>
ASIC Voltage Measured
</div>
</div>
</div>
</div>
<div class="col-12 lg:col-6">
<div class="card" *ngIf="info$ | async as info; else loading">
@ -212,7 +178,8 @@
<tr>
<td>URL:</td>
<td style="word-break: break-all;">
<a style="text-decoration: underline;" [href]="(quickLink$ | async) || info.stratumURL" target="_blank">{{info.stratumURL}}</a>
<a style="text-decoration: underline;" [href]="(quickLink$ | async) || info.stratumURL"
target="_blank">{{info.stratumURL}}</a>
</td>
</tr>
<tr>
@ -228,7 +195,9 @@
<tr>
<td>URL:</td>
<td style="word-break: break-all;">
<a style="text-decoration: underline;" [href]="(fallbackQuickLink$ | async) || info.fallbackStratumURL" target="_blank">{{info.fallbackStratumURL}}</a>
<a style="text-decoration: underline;"
[href]="(fallbackQuickLink$ | async) || info.fallbackStratumURL"
target="_blank">{{info.fallbackStratumURL}}</a>
</td>
</tr>
<tr>
@ -248,4 +217,4 @@
</div>
</ng-container>
</ng-container>

4
main/http_server/axe-os/src/app/layout/app.footer.component.html
View File

@ -1,3 +1,3 @@
<div class="layout-footer">
<!-- <div class="layout-footer">
</div>
</div> -->

2
main/http_server/axe-os/src/app/layout/app.menu.component.html
View File

@ -6,7 +6,7 @@
<li id="restart-container">
<p-button (click)="restart()" id="restart" label="Restart" severity="danger"></p-button>
<p-button (click)="restart()" id="restart" label="Restart" severity="primary"></p-button>
</li>
</ul>

2
main/http_server/axe-os/src/app/layout/app.topbar.component.html
View File

@ -1,6 +1,6 @@
<div class="layout-topbar">
<a class="layout-topbar-logo" routerLink="">
<div [routerLink]="['/']" class="header-text">Axe<span class="os">OS</span></div>
<div [routerLink]="['/']" class="header-text"><span style="font-family: Angel Wish; font-size: 4rem;">Axe</span><span class="os" style=" font-size: 3rem;">OS</span></div>
</a>
<button #menubutton class="p-link layout-menu-button layout-topbar-button" (click)="layoutService.onMenuToggle()">

2
main/http_server/axe-os/src/app/layout/styles/layout/_topbar.scss
View File

@ -36,7 +36,7 @@
justify-content: center;
align-items: center;
position: relative;
color: var(--text-color-secondary);
color: var(--primary-color);
border-radius: 50%;
width: 3rem;
height: 3rem;

2
main/http_server/axe-os/src/app/layout/styles/layout/_variables.scss
View File

@ -1,4 +1,4 @@
/* General */
$scale:14px; /* main font size */
$borderRadius:12px; /* border radius of layout element e.g. card, sidebar */
$borderRadius:0px; /* border radius of layout element e.g. card, sidebar */
$transitionDuration:.2s; /* transition duration of layout elements e.g. sidebar, overlay menus */

18
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/_colors.scss Normal file
View 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
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/_common.scss Normal file
View 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;
}
}
}

110
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/_components.scss Normal file
View File

@ -0,0 +1,110 @@
@import "_mixins";
@import "_colors";
@import "./components/input/_editor";
@layer primeng {
@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/_iconfield";
@import "./components/input/_inputgroup";
@import "./components/input/_inputicon";
@import "./components/input/_inputmask";
@import "./components/input/_inputnumber";
@import "./components/input/_inputotp";
@import "./components/input/_inputswitch";
@import "./components/input/_inputtext";
@import "./components/input/_listbox";
@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/_togglebutton";
@import "./components/input/_treeselect";
//Button
@import "./components/button/_button";
@import "./components/button/_speeddial";
@import "./components/button/_splitbutton";
//Data
@import "./components/data/_carousel";
@import "./components/data/_datatable";
@import "./components/data/_dataview";
@import "./components/data/_filter";
@import "./components/data/_orderlist";
@import "./components/data/_organizationchart";
@import "./components/data/_paginator";
@import "./components/data/_picklist";
@import "./components/data/_timeline";
@import "./components/data/_tree";
@import "./components/data/_treetable";
@import "./components/data/_virtualscroller";
//Panel
@import "./components/panel/_accordion";
@import "./components/panel/_card";
@import "./components/panel/_divider";
@import "./components/panel/_fieldset";
@import "./components/panel/_panel";
@import "./components/panel/_scrollpanel";
@import "./components/panel/_splitter";
@import "./components/panel/_tabview";
@import "./components/panel/_toolbar";
@import "./components/panel/_stepper";
//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/_badge";
@import "./components/misc/_blockui";
@import "./components/misc/_chip";
@import "./components/misc/_inplace";
@import "./components/misc/_metergroup";
@import "./components/misc/_progressbar";
@import "./components/misc/_scrolltop";
@import "./components/misc/_skeleton";
@import "./components/misc/_tag";
@import "./components/misc/_terminal";
}

339
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/_mixins.scss Normal file
View File

@ -0,0 +1,339 @@
@mixin icon-override($icon) {
&:before {
content: $icon;
}
}
@mixin focused() {
outline: $focusOutline;
outline-offset: $focusOutlineOffset;
box-shadow: $focusShadow;
}
@mixin focused-inset() {
outline: $focusOutline;
outline-offset: -1 * $focusOutlineOffset;
box-shadow: inset $focusShadow;
}
@mixin focused-input() {
outline: $focusOutline;
outline-offset: $inputFocusOutlineOffset;
box-shadow: $focusShadow;
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 menuitem {
> .p-menuitem-content {
color: $menuitemTextColor;
transition: $listItemTransition;
border-radius: $menuitemBorderRadius;
.p-menuitem-link {
color: $menuitemTextColor;
padding: $menuitemPadding;
user-select: none;
.p-menuitem-text {
color: $menuitemTextColor;
}
.p-menuitem-icon {
color: $menuitemIconColor;
margin-right: $inlineSpacing;
}
.p-submenu-icon {
color: $menuitemIconColor;
}
}
}
&.p-highlight {
> .p-menuitem-content {
color: $menuitemTextActiveColor;
background: $menuitemActiveBg;
.p-menuitem-link {
.p-menuitem-text {
color: $menuitemTextActiveColor;
}
.p-menuitem-icon,
.p-submenu-icon {
color: $menuitemIconActiveColor;
}
}
}
&.p-focus {
> .p-menuitem-content {
background: $menuitemActiveFocusBg;
}
}
}
&:not(.p-highlight):not(.p-disabled) {
&.p-focus {
> .p-menuitem-content {
color: $menuitemTextFocusColor;
background: $menuitemFocusBg;
.p-menuitem-link {
.p-menuitem-text {
color: $menuitemTextFocusColor;
}
.p-menuitem-icon,
.p-submenu-icon {
color: $menuitemIconFocusColor;
}
}
}
}
> .p-menuitem-content {
&:hover {
color: $menuitemTextHoverColor;
background: $menuitemHoverBg;
.p-menuitem-link {
.p-menuitem-text {
color: $menuitemTextHoverColor;
}
.p-menuitem-icon,
.p-submenu-icon {
color: $menuitemIconHoverColor;
}
}
}
}
}
}
@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 horizontal-rootmenuitem {
> .p-menuitem-content {
color: $horizontalMenuRootMenuitemTextColor;
transition: $listItemTransition;
border-radius: $horizontalMenuRootMenuitemBorderRadius;
.p-menuitem-link {
padding: $horizontalMenuRootMenuitemPadding;
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-highlight):not(.p-disabled) {
> .p-menuitem-content {
&:hover {
color: $horizontalMenuRootMenuitemTextHoverColor;
background: $horizontalMenuRootMenuitemHoverBg;
.p-menuitem-link {
.p-menuitem-text {
color: $horizontalMenuRootMenuitemTextHoverColor;
}
.p-menuitem-icon,
.p-submenu-icon {
color: $horizontalMenuRootMenuitemIconHoverColor;
}
}
}
}
}
}
@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) {
.p-submenu-list {
.p-menuitem {
.p-menuitem-content {
.p-menuitem-link {
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;
&:enabled:hover {
color: $actionIconHoverColor;
border-color: $actionIconHoverBorderColor;
background: $actionIconHoverBg;
}
&:focus-visible {
@include focused();
}
}
@function tint($color, $percentage) {
@return mix(#fff, $color, $percentage);
}
@function shade($color, $percentage) {
@return mix(#000, $color, $percentage);
}
@mixin focused-inset() {
outline: $focusOutline;
outline-offset: $focusOutlineOffset;
box-shadow: inset $focusShadow;
}
@mixin menuitem-badge {
background: $badgeBg;
color: $badgeTextColor;
font-size: $badgeFontSize;
font-weight: $badgeFontWeight;
min-width: $badgeMinWidth;
height: $badgeHeight;
line-height: $badgeHeight;
border-radius: $borderRadius;
margin-left: $inlineSpacing;
padding-left: $inlineSpacing;
padding-right: $inlineSpacing;
}

625
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/button/_button.scss Normal file
View File

@ -0,0 +1,625 @@
.p-button {
color: $buttonTextColor;
background: $buttonBg;
border: $buttonBorder;
padding: $buttonPadding;
font-size: $fontSize;
transition: $formElementTransition;
border-radius: $borderRadius;
outline-color: transparent;
&: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-visible {
@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-label {
margin-left: $inlineSpacing;
}
.p-button-loading-icon {
margin-right: 0;
}
}
}
.p-fluid {
.p-button {
width: 100%;
}
.p-button-icon-only {
width: $buttonIconOnlyWidth;
}
.p-button-group {
display: flex;
.p-button {
flex: 1;
}
}
}
.p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button {
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-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button {
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-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button {
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-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button {
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-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button {
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-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button {
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;
}
}
}
@if variable-exists(contrastButtonTextColor) {
.p-button.p-button-contrast, .p-button-group.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
color: $contrastButtonTextColor;
background: $contrastButtonBg;
border: $contrastButtonBorder;
&:not(:disabled):hover {
background: $contrastButtonHoverBg;
color: $contrastButtonTextHoverColor;
border-color: $contrastButtonHoverBorderColor;
}
&:not(:disabled):focus {
box-shadow: $contrastButtonFocusShadow;
}
&:not(:disabled):active {
background: $contrastButtonActiveBg;
color: $contrastButtonTextActiveColor;
border-color: $contrastButtonActiveBorderColor;
}
&.p-button-outlined {
background-color: transparent;
color: $contrastButtonBg;
border: $outlinedButtonBorder;
&:not(:disabled):hover {
background: rgba($contrastButtonBg, $textButtonHoverBgOpacity);
color: $contrastButtonBg;
border: $outlinedButtonBorder;
}
&:not(:disabled):active {
background: rgba($contrastButtonBg, $textButtonActiveBgOpacity);
color: $contrastButtonBg;
border: $outlinedButtonBorder;
}
}
&.p-button-text {
background-color: transparent;
color: $contrastButtonBg;
border-color: transparent;
&:not(:disabled):hover {
background: rgba($contrastButtonBg, $textButtonHoverBgOpacity);
border-color: transparent;
color: $contrastButtonBg;
}
&:not(:disabled):active {
background: rgba($contrastButtonBg, $textButtonActiveBgOpacity);
border-color: transparent;
color: $contrastButtonBg;
}
}
}
}
.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;
}
}

96
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/button/_speeddial.scss Normal file
View File

@ -0,0 +1,96 @@
@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-list {
outline: 0 none;
}
.p-speeddial-item {
&.p-focus > .p-speeddial-action {
@include focused();
}
}
.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) 0;
&:first-child {
margin-bottom: $inlineSpacing;
}
}
}
.p-speeddial-direction-down {
.p-speeddial-item {
margin: math.div($inlineSpacing, 2) 0;
&: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;
}

15
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/button/_splitbutton.scss Normal file
View File

@ -0,0 +1,15 @@
.p-splitbutton {
border-radius: $borderRadius;
&.p-button-rounded {
border-radius: $roundedButtonBorderRadius;
> .p-button {
border-radius: $roundedButtonBorderRadius;
}
}
&.p-button-raised {
box-shadow: $raisedButtonShadow;
}
}

37
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/data/_carousel.scss Normal file
View 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;
}
}
}
}
}

338
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/data/_datatable.scss Normal file
View File

@ -0,0 +1,338 @@
.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):hover {
background: $tableHeaderCellHoverBg;
color: $tableHeaderCellTextHoverColor;
.p-sortable-column-icon {
color: $tableHeaderCellIconHoverColor;
}
}
&.p-highlight {
background: $tableHeaderCellHighlightBg;
color: $tableHeaderCellHighlightTextColor;
.p-sortable-column-icon {
color: $tableHeaderCellHighlightTextColor;
}
&: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;
}
}
&:focus-visible {
outline: 0.15rem solid $focusOutlineColor;
outline-offset: -0.15rem;
}
&.p-highlight {
background: $highlightBg;
color: $highlightTextColor;
}
&.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-hoverable-rows {
.p-datatable-tbody > tr:not(.p-highlight):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-scroller-viewport > .p-scroller > .p-datatable-table {
> .p-datatable-thead,
> .p-datatable-tfoot {
background-color: $tableHeaderCellBg;
}
}
.p-datatable-loading-icon {
font-size: $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:nth-child(even) {
background: $tableBodyRowEvenBg;
&.p-highlight {
background: $highlightBg;
color: $highlightTextColor;
.p-row-toggler {
color: $highlightTextColor;
&:hover {
color: $highlightTextColor;
}
}
}
}
}
}
&.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);
}
}
}

46
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/data/_dataview.scss Normal file
View File

@ -0,0 +1,46 @@
.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-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-dataview-emptymessage {
padding: $panelContentPadding;
}
}

142
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/data/_filter.scss Normal file
View File

@ -0,0 +1,142 @@
.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;
&:first-child {
margin-top: 0;
}
&.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;
}
}

125
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/data/_orderlist.scss Normal file
View File

@ -0,0 +1,125 @@
.p-orderlist {
.p-orderlist-controls {
padding: $panelContentPadding;
.p-button {
margin-bottom: $inlineSpacing;
}
}
.p-orderlist-list-container {
background: $panelContentBg;
border: $panelContentBorder;
border-radius: $borderRadius;
transition: $formElementTransition;
outline-color: transparent;
&.p-focus {
@include focused-input();
}
}
.p-orderlist-header {
color: $panelHeaderTextColor;
padding: $panelHeaderPadding;
font-weight: $panelHeaderFontWeight;
.p-orderlist-title {
font-weight: $panelHeaderFontWeight;
}
}
.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 {
color: $panelContentTextColor;
padding: $inputListPadding;
outline: 0 none;
&:not(:first-child) {
border-top: $panelContentBorder;
}
.p-orderlist-item {
padding: $inputListItemPadding;
margin: $inputListItemMargin;
border: $inputListItemBorder;
color: $inputListItemTextColor;
background: $inputListItemBg;
transition: $listItemTransition;
&:first-child {
margin-top: 0;
}
&:not(.p-highlight):hover {
background: $inputListItemHoverBg;
color: $inputListItemTextHoverColor;
}
&.p-focus {
color: $inputListItemTextFocusColor;
background: $inputListItemFocusBg;
}
&.p-highlight {
color: $highlightTextColor;
background: $highlightBg;
&.p-focus {
background: $highlightFocusBg;
}
}
}
.p-orderlist-empty-message {
padding: $inputListItemPadding;
color: $inputListItemTextColor;
}
&:not(.cdk-drop-list-dragging) {
.p-orderlist-item {
&:not(.p-highlight):hover {
background: $inputListItemHoverBg;
color: $inputListItemTextHoverColor;
}
}
}
}
&.p-orderlist-striped {
.p-orderlist-list {
.p-orderlist-item:nth-child(even) {
background: $panelContentEvenRowBg;
&:hover {
background: $inputListItemHoverBg;
}
}
}
}
}
.p-orderlist-item {
&.cdk-drag-preview {
padding: $inputListItemPadding;
box-shadow: $inputOverlayShadow;
border: $inputListItemBorder;
color: $inputListItemTextColor;
background: $panelContentBg;
margin: 0;
}
}

50
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/data/_organizationchart.scss Normal file
View File

@ -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();
}
}
}

92
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/data/_paginator.scss Normal file
View File

@ -0,0 +1,92 @@
.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;
margin-right: $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;
}
}
}
}

125
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/data/_picklist.scss Normal file
View File

@ -0,0 +1,125 @@
.p-picklist {
.p-picklist-buttons {
padding: $panelContentPadding;
.p-button {
margin-bottom: $inlineSpacing;
}
}
.p-picklist-list-wrapper {
background: $panelContentBg;
border: $panelContentBorder;
border-radius: $borderRadius;
transition: $formElementTransition;
outline-color: transparent;
&.p-focus {
@include focused-input();
}
}
.p-picklist-header {
color: $panelHeaderTextColor;
padding: $panelHeaderPadding;
font-weight: $panelHeaderFontWeight;
.p-picklist-title {
font-weight: $panelHeaderFontWeight;
}
}
.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 {
color: $panelContentTextColor;
padding: $inputListPadding;
outline: 0 none;
&:not(:first-child) {
border-top: $panelContentBorder;
}
.p-picklist-item {
padding: $inputListItemPadding;
margin: $inputListItemMargin;
border: $inputListItemBorder;
color: $inputListItemTextColor;
background: $inputListItemBg;
transition: $listItemTransition;
&:first-child {
margin-top: 0;
}
&:not(.p-highlight):hover {
background: $inputListItemHoverBg;
color: $inputListItemTextHoverColor;
}
&.p-focus {
color: $inputListItemTextFocusColor;
background: $inputListItemFocusBg;
}
&.p-highlight {
color: $highlightTextColor;
background: $highlightBg;
&.p-focus {
background: $highlightFocusBg;
}
}
}
.p-picklist-empty-message {
padding: $inputListItemPadding;
color: $inputListItemTextColor;
}
&:not(.cdk-drop-list-dragging) {
.p-picklist-item {
&:not(.p-highlight):hover {
background: $inputListItemHoverBg;
color: $inputListItemTextHoverColor;
}
}
}
}
&.p-picklist-striped {
.p-picklist-list {
.p-picklist-item:nth-child(even) {
background: $panelContentEvenRowBg;
&:hover {
background: $inputListItemHoverBg;
}
}
}
}
}
.p-picklist-item {
&.cdk-drag-preview {
padding: $inputListItemPadding;
box-shadow: $inputOverlayShadow;
border: $inputListItemBorder;
color: $inputListItemTextColor;
background: $panelContentBg;
margin: 0;
}
}

38
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/data/_timeline.scss Normal file
View 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;
}
}
}

172
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/data/_tree.scss Normal file
View File

@ -0,0 +1,172 @@
.p-tree {
border: $panelContentBorder;
background: $panelContentBg;
color: $panelContentTextColor;
padding: $panelContentPadding;
border-radius: $borderRadius;
.p-tree-container {
.p-treenode {
padding: $treeNodePadding;
outline: 0 none;
&:focus > .p-treenode-content {
@include focused-listitem();
}
.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;
}
}
&.p-variant-filled {
.p-checkbox-box {
background-color: $inputFilledBg;
&.p-highlight {
background: $checkboxActiveBg;
}
}
&:not(.p-disabled) {
.p-checkbox-box {
&:hover {
background-color: $inputFilledHoverBg;
}
&.p-highlight:hover {
background: $checkboxActiveHoverBg;
}
}
}
}
}
&.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 {
&.p-treenode-droppoint-active {
background-color: scale-color($highlightBg, $lightness: -20%);
}
}
&.p-tree-horizontal {
.p-treenode {
.p-treenode-content {
border-radius: $borderRadius;
border: $panelContentBorder;
background-color: $panelContentBg;
color: $panelContentTextColor;
padding: $treeNodeContentPadding;
transition: $listItemTransition;
&.p-highlight {
background-color: $highlightBg;
color: $highlightTextColor;
.p-treenode-icon {
color: $highlightTextColor;
}
}
.p-tree-toggler {
margin-right: $inlineSpacing;
}
.p-treenode-icon {
color: $treeNodeIconColor;
margin-right: $inlineSpacing;
}
.p-checkbox {
margin-right: $inlineSpacing;
}
.p-treenode-label:not(.p-highlight):hover {
background-color: inherit;
color: inherit;
}
&.p-treenode-selectable:not(.p-highlight):hover {
background: $inputListItemHoverBg;
color: $inputListItemTextHoverColor;
}
&:focus {
@include focused();
}
}
}
}
}

278
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/data/_treetable.scss Normal file
View File

@ -0,0 +1,278 @@
.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-icon {
width: $loadingIconFontSize;
height: $loadingIconFontSize;
}
}
p-treetablecheckbox .p-checkbox {
margin-right: $inlineSpacing;
.p-indeterminate {
.p-checkbox-icon {
color: $textColor;
}
}
&.p-variant-filled {
.p-checkbox-box {
background-color: $inputFilledBg;
&.p-highlight {
background: $checkboxActiveBg;
}
}
&:not(.p-disabled) {
.p-checkbox-box {
&:hover {
background-color: $inputFilledHoverBg;
}
&.p-highlight:hover {
background: $checkboxActiveHoverBg;
}
}
}
}
}
}
&:focus-visible {
outline: 0.15rem solid $focusOutlineColor;
outline-offset: -0.15rem;
}
&.p-highlight {
background: $highlightBg;
color: $highlightTextColor;
.p-treetable-toggler {
color: $highlightTextColor;
&:hover {
color: $highlightTextColor;
}
}
}
}
}
&.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-datatable-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-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);
}
}
}

28
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/data/_virtualscroller.scss Normal file
View File

@ -0,0 +1,28 @@
.p-virtualscroller {
.p-virtualscroller-header {
background: $tableHeaderBg;
color: $tableHeaderTextColor;
border: $tableHeaderBorder;
border-width: $tableHeaderBorderWidth;
padding: $tableHeaderPadding;
font-weight: $tableHeaderFontWeight;
}
.p-virtualscroller-content {
background: $tableBodyRowBg;
color: $tableBodyRowTextColor;
border: $dataViewContentBorder;
padding: $dataViewContentPadding;
}
.p-virtualscroller-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;
}
}

64
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/file/_fileupload.scss Normal file
View File

@ -0,0 +1,64 @@
.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;
.p-button {
margin-right: $inlineSpacing;
&.p-fileupload-choose.p-focus {
@include focused();
}
}
}
.p-fileupload-content {
background: $panelContentBg;
padding: $fileUploadContentPadding;
border: $panelContentBorder;
color: $panelContentTextColor;
border-bottom-right-radius: $borderRadius;
border-bottom-left-radius: $borderRadius;
&.p-fileupload-highlight {
border-color: $fileUploadContentHoverBorder;
border-style: dashed;
background-color: $highlightBg;
}
}
.p-progressbar {
height: $fileUploadProgressBarHeight;
}
.p-fileupload-row {
> div {
padding: $tableBodyCellPadding;
}
}
&.p-fileupload-advanced {
.p-message {
margin-top: 0;
}
}
}
.p-fileupload-choose {
&:not(.p-disabled):hover {
background: $buttonHoverBg;
color: $buttonTextHoverColor;
border-color: $buttonHoverBorderColor;
}
&:not(.p-disabled):active {
background: $buttonActiveBg;
color: $buttonTextActiveColor;
border-color: $buttonActiveBorderColor;
}
}

146
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_autocomplete.scss Normal file
View File

@ -0,0 +1,146 @@
@use 'sass:math';
.p-autocomplete {
.p-autocomplete-loader {
right: nth($inputPadding, 2);
}
&.p-autocomplete-dd {
.p-autocomplete-loader {
right: nth($inputPadding, 2) + $buttonIconOnlyWidth;
}
}
&:not(.p-disabled):hover {
.p-autocomplete-multiple-container {
border-color: $inputHoverBorderColor;
}
}
&:not(.p-disabled).p-focus {
.p-autocomplete-multiple-container {
@include focused-input();
}
}
.p-autocomplete-multiple-container {
padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
gap: $inlineSpacing;
.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);
background: $chipBg;
color: $chipTextColor;
border-radius: $chipBorderRadius;
.p-autocomplete-token-icon {
margin-left: $inlineSpacing;
}
&.p-focus {
background: $chipFocusBg;
color: $chipFocusTextColor;
}
}
}
&.p-invalid.p-component > .p-inputtext {
@include invalid-input();
}
}
.p-autocomplete-panel {
background: $inputOverlayBg;
color: $inputListTextColor;
border: $inputOverlayBorder;
border-radius: $borderRadius;
box-shadow: $inputOverlayShadow;
.p-autocomplete-items {
padding: $inputListPadding;
.p-autocomplete-item {
margin: $inputListItemMargin;
padding: $inputListItemPadding;
border: $inputListItemBorder;
color: $inputListItemTextColor;
background: $inputListItemBg;
transition: $listItemTransition;
border-radius: $inputListItemBorderRadius;
&:first-child {
margin-top: 0;
}
&.p-highlight {
color: $highlightTextColor;
background: $highlightBg;
&.p-focus {
background: $highlightFocusBg;
}
}
&:not(.p-highlight):not(.p-disabled) {
&.p-focus {
color: $inputListItemTextFocusColor;
background: $inputListItemFocusBg;
}
&:hover {
color: $inputListItemTextHoverColor;
background: $inputListItemHoverBg;
}
}
}
.p-autocomplete-item-group {
margin: $submenuHeaderMargin;
padding: $submenuHeaderPadding;
color: $submenuHeaderTextColor;
background: $submenuHeaderBg;
font-weight: $submenuHeaderFontWeight;
}
.p-autocomplete-empty-message {
padding: $inputListItemPadding;
color: $inputListItemTextColor;
background: $inputListItemBg;
}
}
}
p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext {
@include invalid-input();
}
p-autocomplete.p-autocomplete-clearable {
.p-inputtext {
padding-right: nth($inputPadding, 2) * 2 + $primeIconFontSize;
}
.p-autocomplete-clear-icon {
color: $inputIconColor;
right: nth($inputPadding, 2);
}
}
p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd {
.p-autocomplete-clear-icon {
color: $inputIconColor;
right: $buttonIconOnlyWidth + nth($inputPadding, 2);
}
}

267
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_calendar.scss Normal file
View File

@ -0,0 +1,267 @@
p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
@include invalid-input();
}
.p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
@include focused-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;
border-left: 0 none;
}
&:last-child {
padding-right: 0;
}
}
}
&: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();
}
}
}
}
}
}
p-calendar.p-calendar-clearable {
.p-inputtext {
padding-right: nth($inputPadding, 2) * 2 + $primeIconFontSize;
}
.p-calendar-clear-icon {
color: $inputIconColor;
right: nth($inputPadding, 2);
}
}
p-calendar.p-calendar-clearable .p-calendar-w-btn {
.p-calendar-clear-icon {
color: $inputIconColor;
right: $buttonIconOnlyWidth + nth($inputPadding, 2);
}
}
@media screen and (max-width: $calendarBreakpoint) {
.p-datepicker {
table {
th, td {
padding: $calendarCellDatePaddingSM;
}
}
}
}

152
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_cascadeselect.scss Normal file
View File

@ -0,0 +1,152 @@
@use 'sass:math';
.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-variant-filled {
background-color: $inputFilledBg;
&:enabled:hover {
background-color: $inputFilledHoverBg;
}
&:enabled:focus {
background-color: $inputFilledFocusBg;
}
}
}
.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;
&:first-child {
margin-top: 0;
}
&.p-highlight {
color: $highlightTextColor;
background: $highlightBg;
&.p-focus {
background: $highlightFocusBg;
}
}
&:not(.p-highlight):not(.p-disabled) {
&.p-focus {
color: $inputListItemTextFocusColor;
background: $inputListItemFocusBg;
}
&:hover {
color: $inputListItemTextHoverColor;
background: $inputListItemHoverBg;
}
}
.p-cascadeselect-item-content {
padding: $inputListItemPadding;
}
.p-cascadeselect-group-icon {
font-size: $menuitemSubmenuIconFontSize;
}
}
}
}
.p-input-filled {
.p-cascadeselect {
background: $inputFilledBg;
&:not(.p-disabled):hover {
background-color: $inputFilledHoverBg;
}
&:not(.p-disabled).p-focus {
background-color: $inputFilledFocusBg;
}
}
}
p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect {
@include invalid-input();
}
p-cascadeselect.p-cascadeselect-clearable {
.p-cascadeselect-label {
padding-right: nth($inputPadding, 2);
}
.p-cascadeselect-clear-icon {
color: $inputIconColor;
right: $inputGroupAddOnMinWidth;
}
}
.p-overlay-modal {
.p-cascadeselect-sublist {
.p-cascadeselect-panel {
box-shadow: none;
border-radius: 0;
padding: math.div($inlineSpacing, 2) 0 math.div($inlineSpacing, 2) $inlineSpacing;
}
}
.p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon {
transform: rotate(90deg);
}
}

115
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_checkbox.scss Normal file
View File

@ -0,0 +1,115 @@
.p-checkbox {
width: $checkboxWidth;
height: $checkboxHeight;
.p-checkbox-box {
border: $checkboxBorder;
background: $inputBg;
width: $checkboxWidth;
height: $checkboxHeight;
color: $textColor;
border-radius: $borderRadius;
transition: $formElementTransition;
outline-color: transparent;
.p-checkbox-icon {
transition-duration: $transitionDuration;
color: $checkboxIconActiveColor;
font-size: $checkboxIconFontSize;
}
.p-icon {
width: $checkboxIconFontSize;
height: $checkboxIconFontSize;
}
&.p-highlight {
border-color: $checkboxActiveBorderColor;
background: $checkboxActiveBg;
}
}
&: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-variant-filled {
.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;
}
}
}
}
}
p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .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;
}
}
}
}
}
.p-checkbox-label {
margin-left: $inlineSpacing;
}
@if ($highlightBg == $checkboxActiveBg) {
.p-highlight {
.p-checkbox {
.p-checkbox-box {
border-color: $checkboxIconActiveColor;
}
}
}
}
p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box {
@include invalid-input();
}

65
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_chips.scss Normal file
View File

@ -0,0 +1,65 @@
@use 'sass:math';
.p-chips {
&:not(.p-disabled):hover {
.p-chips-multiple-container {
border-color: $inputHoverBorderColor;
}
}
&:not(.p-disabled).p-focus {
.p-chips-multiple-container {
@include focused-input();
}
}
.p-chips-multiple-container {
padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
gap: $inlineSpacing;
.p-chips-token {
padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
margin-right: $inlineSpacing;
background: $chipBg;
color: $chipTextColor;
border-radius: $chipBorderRadius;
&.p-focus {
background: $chipFocusBg;
color: $chipFocusTextColor;
}
.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-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext {
@include invalid-input();
}
p-chips.p-chips-clearable {
.p-inputtext {
padding-right: nth($inputPadding, 2) + $primeIconFontSize;
}
.p-chips-clear-icon {
color: $inputIconColor;
right: nth($inputPadding, 2);
}
}

19
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_colorpicker.scss Normal file
View File

@ -0,0 +1,19 @@
.p-colorpicker-preview,
.p-fluid .p-colorpicker-preview.p-inputtext {
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;
}

167
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_dropdown.scss Normal file
View File

@ -0,0 +1,167 @@
.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;
}
&:focus,
&: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-variant-filled {
background-color: $inputFilledBg;
&:enabled:hover {
background-color: $inputFilledHoverBg;
}
&:enabled:focus {
background-color: $inputFilledFocusBg;
}
}
}
.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-items {
padding: $inputListPadding;
.p-dropdown-item {
margin: $inputListItemMargin;
padding: $inputListItemPadding;
border: $inputListItemBorder;
color: $inputListItemTextColor;
background: $inputListItemBg;
transition: $listItemTransition;
border-radius: $inputListItemBorderRadius;
&:first-child {
margin-top: 0;
}
&.p-highlight {
color: $highlightTextColor;
background: $highlightBg;
&.p-focus {
background: $highlightFocusBg;
}
}
&:not(.p-highlight):not(.p-disabled) {
&.p-focus {
color: $inputListItemTextFocusColor;
background: $inputListItemFocusBg;
}
&: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;
}
}
}
}
p-dropdown.ng-dirty.ng-invalid > .p-dropdown {
@include invalid-input();
}

122
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_editor.scss Normal file
View 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;
}
}
}

7
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_iconfield.scss Normal file
View File

@ -0,0 +1,7 @@
.p-icon-field {
.p-input-icon {
position: absolute;
top: 50%;
margin-top: -.5rem;
}
}

74
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_inputgroup.scss Normal file
View 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-component,
.p-inputgroup > .p-inputwrapper:first-child > .p-component > .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-component,
.p-inputgroup > .p-inputwrapper:last-child > .p-component > .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;
}
}
}
}

13
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_inputicon.scss Normal file
View File

@ -0,0 +1,13 @@
.p-icon-field-left{
.p-input-icon:first-of-type {
left: nth($inputPadding, 2);
color: $inputIconColor;
}
}
.p-icon-field-right {
.p-input-icon:last-of-type {
right: nth($inputPadding, 2);
color: $inputIconColor;
}
}

30
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_inputmask.scss Normal file
View File

@ -0,0 +1,30 @@
@use 'sass:math';
p-inputmask.ng-dirty.ng-invalid > .p-inputtext {
@include invalid-input();
}
p-inputmask.p-inputmask-clearable {
.p-inputtext {
padding-right: nth($inputPadding, 2) * 2 + $primeIconFontSize;
}
.p-inputmask-clear-icon {
color: $inputIconColor;
right: nth($inputPadding, 2);
}
}
.p-inputmask {
&.p-variant-filled {
background-color: $inputFilledBg;
&:enabled:hover {
background-color: $inputFilledHoverBg;
}
&:enabled:focus {
background-color: $inputFilledFocusBg;
}
}
}

42
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_inputnumber.scss Normal file
View File

@ -0,0 +1,42 @@
p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext {
@include invalid-input();
}
p-inputnumber.p-inputnumber-clearable {
.p-inputnumber-input {
padding-right: nth($inputPadding, 2) * 2 + $primeIconFontSize;
}
.p-inputnumber-clear-icon {
color: $inputIconColor;
right: nth($inputPadding, 2);
}
}
p-inputnumber.p-inputnumber-clearable {
.p-inputnumber-buttons-stacked{
.p-inputnumber-clear-icon {
right: $buttonIconOnlyWidth + nth($inputPadding, 2);
}
}
.p-inputnumber-buttons-horizontal{
.p-inputnumber-clear-icon {
right: $buttonIconOnlyWidth + nth($inputPadding, 2);
}
}
}
p-inputnumber.p-inputnumber {
&.p-variant-filled > .p-inputnumber-input {
background-color: $inputFilledBg;
&:enabled:hover {
background-color: $inputFilledHoverBg;
}
&:enabled:focus {
background-color: $inputFilledFocusBg;
}
}
}

10
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_inputotp.scss Normal file
View File

@ -0,0 +1,10 @@
.p-inputotp {
display: flex;
align-items: center;
gap: $inlineSpacing;
}
.p-inputotp-input {
text-align: center;
width: 2 * nth($inputPadding, 2) + 1rem;
}

60
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_inputswitch.scss Normal file
View File

@ -0,0 +1,60 @@
@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-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider {
@include invalid-input();
}

124
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_inputtext.scss Normal file
View File

@ -0,0 +1,124 @@
.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();
}
&.ng-dirty.ng-invalid {
@include invalid-input();
}
&.p-variant-filled {
background-color: $inputFilledBg;
&:enabled:hover {
background-color: $inputFilledHoverBg;
}
&:enabled:focus {
background-color: $inputFilledFocusBg;
}
}
&.p-inputtext-sm {
@include scaledFontSize($inputTextFontSize, $scaleSM);
@include scaledPadding($inputPadding, $scaleSM);
}
&.p-inputtext-lg {
@include scaledFontSize($inputTextFontSize, $scaleLG);
@include scaledPadding($inputPadding, $scaleLG);
}
}
.p-float-label > label {
left: nth($inputPadding, 2);
color: $inputPlaceholderTextColor;
transition-duration: $transitionDuration;
}
.p-float-label > .ng-invalid.ng-dirty + label {
color: $inputErrorBorderColor;
}
.p-input-icon-left > .p-icon-wrapper.p-icon,
.p-input-icon-left > i:first-of-type {
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 > .p-icon-wrapper,
.p-input-icon-right > i:last-of-type {
right: nth($inputPadding, 2);
color: $inputIconColor;
}
.p-input-icon-right > .p-inputtext {
padding-right: nth($inputPadding, 2) * 2 + $primeIconFontSize;
}
.p-icon-field-left > .p-inputtext {
padding-left: nth($inputPadding, 2) * 2 + $primeIconFontSize;
}
.p-icon-field-left.p-float-label > label {
left: nth($inputPadding, 2) * 2 + $primeIconFontSize;
}
.p-icon-field-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);
}
}

105
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_listbox.scss Normal file
View File

@ -0,0 +1,105 @@
.p-listbox {
background: $inputListBg;
color: $inputListTextColor;
border: $inputListBorder;
border-radius: $borderRadius;
transition: $formElementTransition;
.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-checkbox {
margin-right: $inlineSpacing;
}
}
.p-listbox-list {
padding: $inputListPadding;
outline: 0 none;
.p-listbox-item {
margin: $inputListItemMargin;
padding: $inputListItemPadding;
border: $inputListItemBorder;
color: $inputListItemTextColor;
transition: $listItemTransition;
border-radius: $inputListItemBorderRadius;
&:first-child {
margin-top: 0;
}
&.p-highlight {
color: $highlightTextColor;
background: $highlightBg;
}
.p-checkbox {
margin-right: $inlineSpacing;
}
}
.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 {
&.p-highlight {
&.p-focus {
background: $highlightFocusBg;
}
}
&:not(.p-highlight):not(.p-disabled) {
&.p-focus {
color: $inputListItemTextHoverColor;
background: $inputListItemHoverBg;
}
&:hover {
color: $inputListItemTextHoverColor;
background: $inputListItemHoverBg;
&.p-focus {
color: $inputListItemTextHoverColor;
background: $inputListItemHoverBg;
}
}
}
}
}
&.p-focus {
@include focused-input();
}
}
p-listbox.ng-dirty.ng-invalid > .p-listbox {
@include invalid-input();
}

194
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_multiselect.scss Normal file
View File

@ -0,0 +1,194 @@
@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-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-variant-filled {
background: $inputFilledBg;
&:not(.p-disabled):hover {
background-color: $inputFilledHoverBg;
}
&:not(.p-disabled).p-focus {
background-color: $inputFilledFocusBg;
}
}
}
.p-inputwrapper-filled {
.p-multiselect {
&.p-multiselect-chip {
.p-multiselect-label {
padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
}
}
}
}
.p-multiselect-clearable {
.p-multiselect-label-container {
padding-right: nth($inputPadding, 2) + $primeIconFontSize;
}
.p-multiselect-clear-icon {
color: $inputIconColor;
right: $inputGroupAddOnMinWidth;
}
}
.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 {
.p-inputtext {
padding-right: nth($inputPadding, 2) + $primeIconFontSize;
}
.p-multiselect-filter-icon {
right: nth($inputPadding, 2);
color: $inputIconColor;
}
}
.p-checkbox {
margin-right: $inlineSpacing;
}
.p-multiselect-close {
margin-left: $inlineSpacing;
@include action-icon();
}
}
.p-multiselect-items {
padding: $inputListPadding;
.p-multiselect-item {
margin: $inputListItemMargin;
padding: $inputListItemPadding;
border: $inputListItemBorder;
color: $inputListItemTextColor;
background: $inputListItemBg;
transition: $listItemTransition;
border-radius: $inputListItemBorderRadius;
&:first-child {
margin-top: 0;
}
&.p-highlight {
color: $highlightTextColor;
background: $highlightBg;
&.p-focus {
background: $highlightFocusBg;
}
}
&:not(.p-highlight):not(.p-disabled) {
&.p-focus {
color: $inputListItemTextFocusColor;
background: $inputListItemHoverBg;
}
&:hover {
color: $inputListItemTextHoverColor;
background: $inputListItemHoverBg;
}
}
.p-checkbox {
margin-right: $inlineSpacing;
}
}
.p-multiselect-item-group {
margin: $submenuHeaderMargin;
padding: $submenuHeaderPadding;
color: $submenuHeaderTextColor;
background: $submenuHeaderBg;
font-weight: $submenuHeaderFontWeight;
}
.p-multiselect-empty-message {
padding: $inputListItemPadding;
color: $inputListItemTextColor;
background: $inputListItemBg;
}
}
}
.p-input-filled {
.p-multiselect {
background: $inputFilledBg;
&:not(.p-disabled):hover {
background-color: $inputFilledHoverBg;
}
&:not(.p-disabled).p-focus {
background-color: $inputFilledFocusBg;
}
}
}
p-multiselect.ng-dirty.ng-invalid > .p-multiselect {
@include invalid-input();
}

52
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_password.scss Normal file
View File

@ -0,0 +1,52 @@
p-password.ng-invalid.ng-dirty > .p-password > .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;
}
}
}
}
p-password.p-password-clearable {
.p-password-input {
padding-right: nth($inputPadding, 2) * 2 + $primeIconFontSize;
}
.p-password-clear-icon {
color: $inputIconColor;
right: nth($inputPadding, 2);
}
}
p-password.p-password-clearable.p-password-mask{
.p-password-input {
padding-right: nth($inputPadding, 2) * 3 + $primeIconFontSize * 2;
}
.p-password-clear-icon {
color: $inputIconColor;
right: nth($inputPadding, 2) * 2 + $primeIconFontSize;
}
}

97
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_radiobutton.scss Normal file
View File

@ -0,0 +1,97 @@
.p-radiobutton {
width: $radiobuttonWidth;
height: $radiobuttonHeight;
.p-radiobutton-box {
border: $radiobuttonBorder;
background: $inputBg;
width: $radiobuttonWidth;
height: $radiobuttonHeight;
color: $textColor;
border-radius: 50%;
transition: $formElementTransition;
outline-color: transparent;
&: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-variant-filled {
.p-radiobutton-box {
background-color: $inputFilledBg;
&:not(.p-disabled):hover {
background-color: $inputFilledHoverBg;
}
&.p-highlight {
background: $radiobuttonActiveBg;
&:not(.p-disabled):hover {
background: $radiobuttonActiveHoverBg;
}
}
}
}
}
p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box {
@include invalid-input();
}
.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;
}
}
}
}
}
.p-radiobutton-label {
margin-left: $inlineSpacing;
}
@if ($highlightBg == $radiobuttonActiveBg) {
.p-highlight {
.p-radiobutton {
.p-radiobutton-box {
border-color: $radiobuttonIconActiveColor;
}
}
}
}

66
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_rating.scss Normal file
View File

@ -0,0 +1,66 @@
@use 'sass:math';
.p-rating {
gap: $inlineSpacing;
.p-rating-item {
border-radius: 50%;
outline-color: transparent;
display: inline-flex;
justify-content: center;
align-items: center;
.p-rating-icon {
color: $ratingStarIconOffColor;
transition: $formElementTransition;
font-size: $ratingIconFontSize;
&.p-icon {
width: $ratingIconFontSize;
height: $ratingIconFontSize;
}
&.p-rating-cancel {
color: $ratingCancelIconColor;
}
}
&.p-focus {
@include focused();
}
&.p-rating-item-active {
.p-rating-icon {
color: $ratingStarIconOnColor;
}
}
}
&:not(.p-disabled):not(.p-readonly) {
.p-rating-item {
&: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
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_selectbutton.scss Normal file
View 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-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button {
@include invalid-input();
}

74
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_slider.scss Normal file
View File

@ -0,0 +1,74 @@
@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 {
height: 100%;
width: $sliderVerticalWidth;
.p-slider-handle {
height: $sliderHandleWidth;
width: $sliderHandleHeight;
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;
}
}
&.p-slider-animate {
&.p-slider-horizontal {
.p-slider-handle {
transition: $formElementTransition, left $transitionDuration;
}
.p-slider-range {
transition: width $transitionDuration;
}
}
&.p-slider-vertical {
.p-slider-handle {
transition: $formElementTransition, bottom $transitionDuration;
}
.p-slider-range {
transition: height $transitionDuration;
}
}
}
}

48
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_togglebutton.scss Normal file
View 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-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
@include invalid-input();
}

151
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/input/_treeselect.scss Normal file
View File

@ -0,0 +1,151 @@
@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-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-variant-filled {
background-color: $inputFilledBg;
&:enabled:hover {
background-color: $inputFilledHoverBg;
}
&:enabled:focus {
background-color: $inputFilledFocusBg;
}
}
}
p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
@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;
}
}
}
p-treeselect.p-treeselect-clearable {
.p-treeselect-label-container {
padding-right: nth($inputPadding, 2) + $primeIconFontSize;
}
.p-treeselect-clear-icon {
color: $inputIconColor;
right: $buttonIconOnlyWidth;
}
}

42
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/menu/_breadcrumb.scss Normal file
View 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;
}
}
}
}
}

39
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/menu/_contextmenu.scss Normal file
View File

@ -0,0 +1,39 @@
.p-contextmenu {
padding: $verticalMenuPadding;
background: $overlayMenuBg;
color: $menuTextColor;
border: $overlayMenuBorder;
box-shadow: $overlayMenuShadow;
border-radius: $borderRadius;
width: $menuWidth;
.p-contextmenu-root-list {
outline: 0 none;
}
.p-submenu-list {
padding: $verticalMenuPadding;
background: $overlayMenuBg;
border: $overlayMenuBorder;
box-shadow: $overlayMenuShadow;
border-radius: $borderRadius;
}
.p-menuitem {
@include menuitem();
}
.p-menuitem-separator {
border-top: $divider;
margin: $menuSeparatorMargin;
}
.p-submenu-icon {
font-size: $menuitemSubmenuIconFontSize;
&.p-icon {
width: $menuitemSubmenuIconFontSize;
height: $menuitemSubmenuIconFontSize;
}
}
}

95
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/menu/_dock.scss Normal file
View File

@ -0,0 +1,95 @@
.p-dock {
.p-dock-list-container {
background: $dockBg;
border: $dockBorder;
padding: $dockPadding;
border-radius: $dockBorderRadius;
.p-dock-list {
outline: 0 none;
}
}
.p-dock-item {
padding: $dockItemPadding;
border-radius: $dockItemBorderRadius;
&.p-focus {
@include focused-listitem();
}
}
.p-dock-link {
width: $dockActionWidth;
height: $dockActionHeight;
}
&.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-list-container {
overflow-x: auto;
width: 100%;
.p-dock-list {
margin: 0 auto;
}
}
}
&.p-dock-left,
&.p-dock-right {
.p-dock-list-container {
overflow-y: auto;
height: 100%;
.p-dock-list {
margin: auto 0;
}
}
}
.p-dock-list {
.p-dock-item {
transform: none;
margin: 0;
}
}
}
}

56
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/menu/_megamenu.scss Normal file
View File

@ -0,0 +1,56 @@
.p-megamenu {
padding: $horizontalMenuPadding;
background: $horizontalMenuBg;
color: $horizontalMenuTextColor;
border: $horizontalMenuBorder;
border-radius: $borderRadius;
.p-megamenu-root-list {
outline: 0 none;
}
.p-menuitem {
@include menuitem();
}
.p-megamenu-panel {
background: $overlayMenuBg;
color: $menuTextColor;
border: $overlayMenuBorder;
box-shadow: $overlayMenuShadow;
border-radius: $borderRadius;
}
.p-submenu-header {
margin: $submenuHeaderMargin;
padding: $submenuHeaderPadding;
color: $submenuHeaderTextColor;
background: $submenuHeaderBg;
font-weight: $submenuHeaderFontWeight;
border-top-right-radius: $borderRadius;
border-top-left-radius: $borderRadius;
}
.p-submenu-list {
padding: $verticalMenuPadding;
width: $menuWidth;
.p-menuitem-separator {
border-top: $divider;
margin: $menuSeparatorMargin;
}
}
&.p-megamenu-vertical {
width: $menuWidth;
padding: $verticalMenuPadding;
}
&.p-megamenu-horizontal {
.p-megamenu-root-list {
> .p-menuitem {
@include horizontal-rootmenuitem();
}
}
}
}

37
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/menu/_menu.scss Normal file
View File

@ -0,0 +1,37 @@
.p-menu {
padding: $verticalMenuPadding;
background: $menuBg;
color: $menuTextColor;
border: $menuBorder;
border-radius: $borderRadius;
width: $menuWidth;
.p-menuitem {
@include menuitem();
}
&.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-menuitem-separator {
border-top: $divider;
margin: $menuSeparatorMargin;
}
.p-menuitem-badge {
@include menuitem-badge();
}
}

142
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/menu/_menubar.scss Normal file
View File

@ -0,0 +1,142 @@
.p-menubar {
padding: $horizontalMenuPadding;
background: $horizontalMenuBg;
color: $horizontalMenuTextColor;
border: $horizontalMenuBorder;
border-radius: $borderRadius;
.p-menubar-root-list {
outline: 0 none;
> .p-menuitem {
@include horizontal-rootmenuitem();
}
}
.p-menuitem {
@include menuitem();
}
.p-submenu-list {
padding: $verticalMenuPadding;
background: $overlayMenuBg;
border: $overlayMenuBorder;
box-shadow: $overlayMenuShadow;
width: $menuWidth;
border-radius: $borderRadius;
.p-menuitem-separator {
border-top: $divider;
margin: $menuSeparatorMargin;
}
.p-submenu-icon {
font-size: $menuitemSubmenuIconFontSize;
}
}
}
@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-menuitem-separator {
border-top: $divider;
margin: $menuSeparatorMargin;
}
.p-submenu-icon {
font-size: $menuitemSubmenuIconFontSize;
}
.p-menuitem {
width: 100%;
position: static;
.p-menuitem-content {
.p-menuitem-link {
.p-submenu-icon {
margin-left: auto;
transition: transform $transitionDuration;
}
}
}
&.p-menuitem-active {
> .p-menuitem-content {
> .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-content {
> .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;
}
}
}

153
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/menu/_panelmenu.scss Normal file
View File

@ -0,0 +1,153 @@
.p-panelmenu {
.p-panelmenu-header {
outline: 0 none;
.p-panelmenu-header-content {
border: $accordionHeaderBorder;
color: $accordionHeaderTextColor;
background: $accordionHeaderBg;
border-radius: $borderRadius;
transition: $listItemTransition;
.p-panelmenu-header-action {
color: $accordionHeaderTextColor;
padding: $accordionHeaderPadding;
font-weight: $accordionHeaderFontWeight;
.p-submenu-icon {
margin-right: $inlineSpacing;
}
.p-menuitem-icon {
margin-right: $inlineSpacing;
}
}
}
&:not(.p-disabled) {
&:focus-visible {
.p-panelmenu-header-content {
@include focused-inset();
}
}
}
&:not(.p-highlight):not(.p-disabled):hover {
.p-panelmenu-header-content {
background: $accordionHeaderHoverBg;
border-color: $accordionHeaderHoverBorderColor;
color: $accordionHeaderTextHoverColor;
}
}
&:not(.p-disabled).p-highlight {
.p-panelmenu-header-content {
background: $accordionHeaderActiveBg;
border-color: $accordionHeaderActiveBorderColor;
color: $accordionHeaderTextActiveColor;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
margin-bottom: 0;
}
&:hover {
.p-panelmenu-header-content {
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-panelmenu-root-list {
outline: 0 none;
}
.p-menuitem {
@include menuitem();
.p-menuitem-content {
.p-menuitem-link {
.p-submenu-icon {
margin-right: $inlineSpacing;
}
}
}
}
.p-menuitem-separator {
border-top: $divider;
margin: $menuSeparatorMargin;
}
.p-submenu-list:not(.p-panelmenu-root-list) {
padding: $treeNodeChildrenPadding;
}
}
.p-panelmenu-panel {
margin-bottom: $accordionSpacing;
@if $accordionSpacing == 0 {
.p-panelmenu-header {
.p-panelmenu-header-content {
border-radius: 0;
}
}
.p-panelmenu-content {
border-radius: 0;
}
&:not(:first-child) {
.p-panelmenu-header {
.p-panelmenu-header-content {
border-top: 0 none;
}
&:not(.p-highlight):not(.p-disabled):hover,
&:not(.p-disabled).p-highlight:hover {
.p-panelmenu-header-content {
border-top: 0 none;
}
}
}
}
&:first-child {
.p-panelmenu-header {
.p-panelmenu-header-content {
border-top-right-radius: $borderRadius;
border-top-left-radius: $borderRadius;
}
}
}
&:last-child {
.p-panelmenu-header:not(.p-highlight) {
.p-panelmenu-header-content {
border-bottom-right-radius: $borderRadius;
border-bottom-left-radius: $borderRadius;
}
}
.p-panelmenu-content {
border-bottom-right-radius: $borderRadius;
border-bottom-left-radius: $borderRadius;
}
}
}
}
}

59
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/menu/_slidemenu.scss Normal file
View File

@ -0,0 +1,59 @@
.p-slidemenu {
padding: $verticalMenuPadding;
background: $menuBg;
color: $menuTextColor;
border: $menuBorder;
border-radius: $borderRadius;
width: $menuWidth;
.p-slidemenu-root-list {
outline: 0 none;
}
.p-submenu-list {
outline: 0 none;
}
.p-menuitem {
@include menuitem();
}
&.p-slidemenu-overlay {
background: $overlayMenuBg;
border: $overlayMenuBorder;
box-shadow: $overlayMenuShadow;
}
.p-slidemenu-list {
padding: $verticalMenuPadding;
background: $overlayMenuBg;
border: $overlayMenuBorder;
box-shadow: $overlayMenuShadow;
}
.p-menuitem-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;
&:not(.p-disabled):focus {
@include focused-inset();
}
}
.p-menuitem-badge {
@include menuitem-badge();
}
}

56
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/menu/_steps.scss Normal file
View File

@ -0,0 +1,56 @@
@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);
}
}
}

74
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/menu/_tabmenu.scss Normal file
View File

@ -0,0 +1,74 @@
.p-tabmenu {
.p-tabmenu-nav {
background: $tabviewNavBg;
border: $tabviewNavBorder;
border-width: $tabviewNavBorderWidth;
.p-menuitem-badge {
@include menuitem-badge();
}
.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;
.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;
}
}
}
}
.p-tabmenu-left-icon {
margin-right: $inlineSpacing;
}
.p-tabmenu-right-icon {
margin-left: $inlineSpacing;
}
.p-tabmenu-nav-btn.p-link {
background: $tabviewHeaderActiveBg;
color: $tabviewHeaderTextActiveColor;
width: $buttonIconOnlyWidth;
box-shadow: $raisedButtonShadow;
border-radius: 0;
&:focus {
@include focused-inset();
}
}
}

44
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/menu/_tieredmenu.scss Normal file
View File

@ -0,0 +1,44 @@
.p-tieredmenu {
padding: $verticalMenuPadding;
background: $menuBg;
color: $menuTextColor;
border: $menuBorder;
border-radius: $borderRadius;
width: $menuWidth;
&.p-tieredmenu-overlay {
background: $overlayMenuBg;
border: $overlayMenuBorder;
box-shadow: $overlayMenuShadow;
}
.p-tieredmenu-root-list {
outline: 0 none;
}
.p-submenu-list {
padding: $verticalMenuPadding;
background: $overlayMenuBg;
border: $overlayMenuBorder;
box-shadow: $overlayMenuShadow;
border-radius: $borderRadius;
}
.p-menuitem {
@include menuitem();
}
.p-menuitem-separator {
border-top: $divider;
margin: $menuSeparatorMargin;
}
.p-submenu-icon {
font-size: $menuitemSubmenuIconFontSize;
&.p-icon {
width: $menuitemSubmenuIconFontSize;
height: $menuitemSubmenuIconFontSize;
}
}
}

69
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/messages/_inlinemessage.scss Normal file
View File

@ -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;
}
}
}

141
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/messages/_message.scss Normal file
View File

@ -0,0 +1,141 @@
.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;
}
@if variable-exists(secondaryMessageBg) {
&.p-message-secondary {
background: $secondaryMessageBg;
border: $secondaryMessageBorder;
border-width: $messageBorderWidth;
color: $secondaryMessageTextColor;
.p-message-icon {
color: $secondaryMessageIconColor;
}
.p-message-close {
color: $secondaryMessageIconColor;
}
}
}
@if variable-exists(contrastMessageBg) {
&.p-message-contrast {
background: $contrastMessageBg;
border: $contrastMessageBorder;
border-width: $messageBorderWidth;
color: $contrastMessageTextColor;
.p-message-icon {
color: $contrastMessageIconColor;
}
.p-message-close {
color: $contrastMessageIconColor;
}
}
}
}

127
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/messages/_toast.scss Normal file
View File

@ -0,0 +1,127 @@
.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:not(.p-toast-icon-close-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;
}
}
@if variable-exists(secondaryMessageBg) {
&.p-toast-message-secondary {
background: $secondaryMessageBg;
border: $secondaryMessageBorder;
border-width: $messageBorderWidth;
color: $secondaryMessageTextColor;
.p-toast-message-icon,
.p-toast-icon-close {
color: $secondaryMessageIconColor;
}
}
}
@if variable-exists(contrastMessageBg) {
&.p-toast-message-contrast {
background: $contrastMessageBg;
border: $contrastMessageBorder;
border-width: $messageBorderWidth;
color: $contrastMessageTextColor;
.p-toast-message-icon,
.p-toast-icon-close {
color: $contrastMessageIconColor;
}
}
}
}
}

30
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/misc/_avatar.scss Normal file
View File

@ -0,0 +1,30 @@
.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-group {
.p-avatar {
border: 2px solid $panelContentBg;
}
}

55
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/misc/_badge.scss Normal file
View File

@ -0,0 +1,55 @@
.p-badge {
background: $badgeBg;
color: $badgeTextColor;
font-size: $badgeFontSize;
font-weight: $badgeFontWeight;
min-width: $badgeMinWidth;
height: $badgeHeight;
line-height: $badgeHeight;
@if variable-exists(secondaryMessageBg) {
&.p-badge-secondary {
background-color: $secondaryButtonBg;
color: $secondaryButtonTextColor;
}
&.p-badge-contrast {
background-color: $contrastButtonBg;
color: $contrastButtonTextColor;
}
}
&.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;
}
}

0
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/misc/_blockui.scss Normal file
View File

42
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/misc/_chip.scss Normal file
View File

@ -0,0 +1,42 @@
@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;
}
.pi-chip-remove-icon {
margin-left: $inlineSpacing;
}
img {
width: 1.5 + nth($inputPadding, 1);
height: 1.5 + nth($inputPadding, 1);
margin-left: -1 * nth($inputPadding, 2);
margin-right: $inlineSpacing;
}
.pi-chip-remove-icon {
border-radius: $borderRadius;
transition: $actionIconTransition;
&:focus-visible {
@include focused();
}
&:focus {
outline: 0 none;
}
}
}

17
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/misc/_inplace.scss Normal file
View 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();
}
}
}

117
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/misc/_metergroup.scss Normal file
View File

@ -0,0 +1,117 @@
@use "sass:math";
// core
.p-metergroup {
display: flex;
}
.p-metergroup-meters {
display: flex;
}
.p-metergroup-vertical .p-metergroup-meters {
flex-direction: column;
}
.p-metergroup-labels {
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style-type: none;
}
.p-metergroup-vertical .p-metergroup-labels {
align-items: start;
}
.p-metergroup-labels-vertical {
flex-direction: column;
}
.p-metergroup-label {
display: inline-flex;
align-items: center;
}
.p-metergroup-label-marker {
display: inline-flex;
}
// theme
.p-metergroup {
gap: $inlineSpacing * 2;
.p-metergroup-meters {
background: $progressBarBg;
border-radius: $borderRadius;
}
.p-metergroup-meter {
border: $progressBarBorder;
background: $progressBarValueBg;
}
.p-metergroup-labels {
.p-metergroup-label {
gap: $inlineSpacing;
}
.p-metergroup-label-marker {
background: $progressBarValueBg;
width: 0.5rem;
height: 0.5rem;
border-radius: 100%;
}
.p-metergroup-label-icon {
width: 1rem;
height: 1rem;
}
&.p-metergroup-labels-vertical {
gap: $inlineSpacing;
}
&.p-metergroup-labels-horizontal {
gap: $inlineSpacing * 2;
}
}
&.p-metergroup-horizontal {
flex-direction: column;
.p-metergroup-meters {
height: 0.5rem;
}
.p-metergroup-meter:first-of-type {
border-top-left-radius: $borderRadius;
border-bottom-left-radius: $borderRadius;
}
.p-metergroup-meter:last-of-type {
border-top-right-radius: $borderRadius;
border-bottom-right-radius: $borderRadius;
}
}
&.p-metergroup-vertical {
flex-direction: row;
.p-metergroup-meters {
width: 0.5rem;
height: 100%;
}
.p-metergroup-meter:first-of-type {
border-top-left-radius: $borderRadius;
border-top-right-radius: $borderRadius;
}
.p-metergroup-meter:last-of-type {
border-bottom-left-radius: $borderRadius;
border-bottom-right-radius: $borderRadius;
}
}
}

17
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/misc/_progressbar.scss Normal file
View 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
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/misc/_scrolltop.scss Normal file
View 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
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/misc/_skeleton.scss Normal file
View 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));
}
}

52
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/misc/_tag.scss Normal file
View File

@ -0,0 +1,52 @@
@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;
}
@if variable-exists(secondaryMessageBg) {
&.p-tag-secondary {
background-color: $secondaryButtonBg;
color: $secondaryButtonTextColor;
}
&.p-tag-contrast {
background-color: $contrastButtonBg;
color: $contrastButtonTextColor;
}
}
}

12
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/misc/_terminal.scss Normal file
View 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;
}
}

155
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/multimedia/_galleria.scss Normal file
View File

@ -0,0 +1,155 @@
.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-wrapper {
.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-wrapper {
.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 {
&:focus-visible {
@include focused();
}
}
}
}
.p-galleria-mask {
--maskbg: #{$galleriaMaskBg};
}

49
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/multimedia/_image.scss Normal file
View File

@ -0,0 +1,49 @@
.p-image-mask {
--maskbg: #{$imageMaskBg};
}
.p-image-preview-indicator {
background-color: transparent;
color: $imagePreviewIndicatorColor;
transition: $actionIconTransition;
}
.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;
}
i {
font-size: $imagePreviewActionIconFontSize;
}
.p-icon {
width: $imagePreviewActionIconFontSize;
height: $imagePreviewActionIconFontSize;
}
}

72
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/overlay/_confirmpopup.scss Normal file
View File

@ -0,0 +1,72 @@
.p-confirm-popup {
background: $overlayContentBg;
color: $panelContentTextColor;
border: $overlayContentBorder;
border-radius: $borderRadius;
box-shadow: $overlayContainerShadow;
.p-confirm-popup-content {
padding: $panelContentPadding;
}
.p-confirm-popup-footer {
text-align: right;
padding: $panelFooterPadding;
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: $overlayContentBg;
}
@else {
border-color: rgba(nth($overlayContentBorder, 3), 0);
border-bottom-color: nth($overlayContentBorder, 3);
}
}
&.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;
}
}

69
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/overlay/_dialog.scss Normal file
View File

@ -0,0 +1,69 @@
.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-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;
}
}
}

64
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/overlay/_overlaypanel.scss Normal file
View File

@ -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);
}
}
}
}

27
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/overlay/_sidebar.scss Normal file
View File

@ -0,0 +1,27 @@
.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;
}
.p-sidebar-footer {
padding: $panelHeaderPadding;
}
}

33
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/overlay/_tooltip.scss Normal file
View 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;
}
}
}

119
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/panel/_accordion.scss Normal file
View File

@ -0,0 +1,119 @@
.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-inset();
}
}
}
&: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-accordiontab {
.p-accordion-tab {
margin-bottom: $accordionSpacing;
}
@if $accordionSpacing == 0 {
.p-accordion-header {
.p-accordion-header-link {
border-radius: 0;
}
}
.p-accordion-content {
border-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
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/panel/_card.scss Normal file
View 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
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/panel/_divider.scss Normal file
View 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
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/panel/_fieldset.scss Normal file
View 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;
}
}

63
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/panel/_panel.scss Normal file
View File

@ -0,0 +1,63 @@
.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-top: 0 none;
&:last-child {
border-bottom-right-radius: $borderRadius;
border-bottom-left-radius: $borderRadius;
}
}
.p-panel-footer {
padding: $panelFooterPadding;
border: $panelFooterBorder;
background: $panelFooterBg;
color: $panelFooterTextColor;
border-bottom-right-radius: $borderRadius;
border-bottom-left-radius: $borderRadius;
border-top: 0 none;
}
.p-panel-icons-end {
order: 2;
margin-left: auto;
}
.p-panel-icons-start {
order: 0;
margin-right: $inlineSpacing;
}
.p-panel-icons-center {
order: 2;
width:100%;
text-align:center;
}
}

11
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/panel/_scrollpanel.scss Normal file
View File

@ -0,0 +1,11 @@
.p-scrollpanel {
.p-scrollpanel-bar {
background: $scrollPanelTrackBg;
border: $scrollPanelTrackBorder;
transition: $formElementTransition;
&:focus-visible {
@include focused();
}
}
}

23
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/panel/_splitter.scss Normal file
View File

@ -0,0 +1,23 @@
.p-splitter {
border: $panelContentBorder;
background: $panelContentBg;
border-radius: $borderRadius;
color: $panelContentTextColor;
.p-splitter-gutter {
transition: $actionIconTransition;
background: $splitterGutterBg;
.p-splitter-gutter-handle {
background: $splitterGutterHandleBg;
&:focus-visible {
@include focused();
}
}
}
.p-splitter-gutter-resizing {
background: $splitterGutterHandleBg;
}
}

201
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/panel/_stepper.scss Normal file
View File

@ -0,0 +1,201 @@
@use "sass:math";
//core
.p-stepper .p-stepper-nav {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
margin: 0;
padding: 0;
list-style-type: none;
overflow-x: auto;
}
.p-stepper-vertical .p-stepper-nav {
flex-direction: column;
}
.p-stepper-header {
position: relative;
display: flex;
flex: 1 1 auto;
align-items: center;
&:last-of-type {
flex: initial;
}
}
.p-stepper-header .p-stepper-action {
border: 0 none;
display: inline-flex;
align-items: center;
text-decoration: none;
cursor: pointer;
&:focus-visible {
@include focused();
}
}
.p-stepper.p-stepper-readonly .p-stepper-header {
cursor: auto;
}
.p-stepper-header.p-highlight .p-stepper-action {
cursor: default;
}
.p-stepper-title {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.p-stepper-number {
display: flex;
align-items: center;
justify-content: center;
}
.p-stepper-separator {
flex: 1 1 0;
}
//theme
.p-stepper {
.p-stepper-nav {
display: flex;
justify-content: space-between;
margin: 0;
padding: 0;
list-style-type: none;
}
.p-stepper-header {
padding: $inlineSpacing;
.p-stepper-action {
transition: $listItemTransition;
border-radius: $borderRadius;
background: $stepsItemBg;
outline-color: transparent;
.p-stepper-number {
color: $stepsItemNumberColor;
border: $stepsItemBorder;
border-width: 2px;
background: $stepsItemBg;
min-width: $stepsItemNumberWidth;
height: $stepsItemNumberHeight;
line-height: $stepsItemNumberHeight;
font-size: $stepsItemNumberFontSize;
border-radius: $stepsItemNumberBorderRadius;
transition: $actionIconTransition;
}
.p-stepper-title {
margin-left: $inlineSpacing;
color: $stepsItemTextColor;
font-weight: $stepsItemActiveFontWeight;
transition: $actionIconTransition;
}
&:not(.p-disabled):focus-visible {
@include focused();
}
}
&.p-highlight {
.p-stepper-number {
background: $highlightBg;
color: $highlightTextColor;
}
.p-stepper-title {
color: $textColor;
}
}
&:not(.p-disabled):focus-visible {
@include focused();
}
&:has(~ .p-highlight) {
@if variable-exists(primaryColor) {
.p-stepper-separator {
background-color: $primaryColor;
}
}
}
}
.p-stepper-panels {
background: $tabviewContentBg;
padding: $tabviewContentPadding;
color: $tabviewContentTextColor;
}
.p-stepper-separator {
background-color: $timelineEventColor;
width: 100%;
height: 2px;
margin-inline-start: calc($inlineSpacing * 2);
transition: $listItemTransition;
}
&.p-stepper-vertical {
display: flex;
flex-direction: column;
.p-stepper-toggleable-content {
display: flex;
flex: 1 1 auto;
background: $tabviewContentBg;
color: $tabviewContentTextColor;
}
.p-stepper-panel {
display: flex;
flex-direction: column;
flex: initial;
&.p-stepper-panel-active {
flex: 1 1 auto;
}
.p-stepper-header {
flex: initial;
}
.p-stepper-content {
width: 100%;
padding-left: calc($inlineSpacing * 2);
}
.p-stepper-separator {
flex: 0 0 auto;
width: 2px;
height: auto;
margin-inline-start: calc($inlineSpacing * 7 / 2 + 2px);
}
&:has(~ .p-stepper-panel-active) {
@if variable-exists(primaryColor) {
.p-stepper-separator {
background-color: $primaryColor;
}
}
}
&:last-of-type {
.p-stepper-content {
padding-left: calc($inlineSpacing * 6);
}
}
}
}
}

82
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/panel/_tabview.scss Normal file
View File

@ -0,0 +1,82 @@
.p-tabview {
.p-tabview-nav-content {
scroll-padding-inline: $buttonIconOnlyWidth;
}
.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-left-icon {
margin-right: $inlineSpacing;
}
.p-tabview-right-icon {
margin-left: $inlineSpacing;
}
.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
main/http_server/axe-os/src/app/layout/styles/theme/theme-base/components/panel/_toolbar.scss Normal file
View File

@ -0,0 +1,11 @@
.p-toolbar {
background: $panelHeaderBg;
border: $panelHeaderBorder;
padding: $panelHeaderPadding;
border-radius: $borderRadius;
gap: $inlineSpacing;
.p-toolbar-separator {
margin: 0 $inlineSpacing;
}
}

39
main/http_server/axe-os/src/app/layout/styles/theme/themes/vela/_extensions.scss Normal file
View File

@ -0,0 +1,39 @@
@layer primeng {
.p-carousel {
.p-carousel-indicators .p-carousel-indicator.p-highlight button {
background-color: $primaryColor;
}
}
.p-galleria {
.p-galleria-indicators .p-galleria-indicator.p-highlight button {
background-color: $primaryColor;
}
&.p-galleria-indicator-onitem {
.p-galleria-indicators {
.p-galleria-indicator {
&.p-highlight {
button {
background: $primaryColor;
}
}
}
}
}
}
.p-datatable {
.p-datatable-tbody {
> tr {
&.p-datatable-dragpoint-top > td {
box-shadow: inset 0 2px 0 0 $primaryColor;
}
&.p-datatable-dragpoint-bottom > td {
box-shadow: inset 0 -2px 0 0 $primaryColor;
}
}
}
}
}

955
main/http_server/axe-os/src/app/layout/styles/theme/themes/vela/_variables.scss Normal file
View File

@ -0,0 +1,955 @@
$colors: (
"blue": #2196f3,
"green": #4caf50,
"yellow": #fbc02d,
"cyan": #00bcd4,
"pink": #e91e63,
"indigo": #3f51b5,
"teal": #009688,
"orange": #f57c00,
"bluegray": #607d8b,
"purple": #9c27b0,
"red": #ff4032,
"primary": $primaryColor,
) !default;
//shades
$shade000: rgba(255, 255, 255, 0.87) !default; //text color
$shade100: rgba(255, 255, 255, 0.6) !default; //text secondary color
$shade500: #3e526d !default;
$shade600: #304562 !default; //input bg, border, divider
$shade700: #283951 !default; //unused
$shade800: #1f2d40 !default; //elevated surface
$shade900: #070D17 !default; //ground surface
$hoverBg: rgba(255, 255, 255, 0.03) !default;
//global
$fontFamily: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
$fontSize: 1rem !default;
$fontWeight: normal !default;
$textColor: $shade000 !default;
$textSecondaryColor: $shade100 !default;
$borderRadius: 3px !default;
$transitionDuration: 0.2s !default;
$formElementTransition: background-color $transitionDuration,
color $transitionDuration, border-color $transitionDuration,
box-shadow $transitionDuration !default;
$actionIconTransition: background-color $transitionDuration,
color $transitionDuration, box-shadow $transitionDuration !default;
$listItemTransition: box-shadow $transitionDuration !default;
$primeIconFontSize: 1rem !default;
$divider: 1px solid $shade600 !default;
$inlineSpacing: 0.5rem !default; //spacing between inline elements
$disabledOpacity: 0.4 !default; //opacity of a disabled item
$maskBg: rgba(0, 0, 0, 0.4) !default; //modal mask bg color
$loadingIconFontSize: 2rem !default;
$errorColor: #ef9a9a !default;
//scale
$scaleSM: 0.875 !default;
$scaleLG: 1.25 !default;
//focus
$focusOutlineColor: $primaryLightColor !default;
$focusOutline: 0 none !default;
$focusOutlineOffset: 0 !default;
$inputFocusOutlineOffset:$focusOutlineOffset !default;
$focusShadow: 0 0 0 1px $focusOutlineColor !default;
//action icons
$actionIconWidth: 2rem !default;
$actionIconHeight: 2rem !default;
$actionIconBg: transparent !default;
$actionIconBorder: 0 none !default;
$actionIconColor: $shade100 !default;
$actionIconHoverBg: $hoverBg !default;
$actionIconHoverBorderColor: transparent !default;
$actionIconHoverColor: $shade000 !default;
$actionIconBorderRadius: 50% !default;
//input field (e.g. inputtext, spinner, inputmask)
$inputPadding: 0.5rem 0.5rem !default;
$inputTextFontSize: 1rem !default;
$inputBg: $shade900 !default;
$inputTextColor: $shade000 !default;
$inputIconColor: $shade100 !default;
$inputBorder: 1px solid $shade600 !default;
$inputHoverBorderColor: $primaryColor !default;
$inputFocusBorderColor: $primaryColor !default;
$inputErrorBorderColor: $errorColor !default;
$inputPlaceholderTextColor: $shade100 !default;
$inputFilledBg: $shade600 !default;
$inputFilledHoverBg: $inputFilledBg !default;
$inputFilledFocusBg: $inputFilledBg !default;
//input groups
$inputGroupBg: $shade800 !default;
$inputGroupTextColor: $shade100 !default;
$inputGroupAddOnMinWidth: 2.357rem !default;
//input lists (e.g. dropdown, autocomplete, multiselect, orderlist)
$inputListBg: $shade800 !default;
$inputListTextColor: $shade000 !default;
$inputListBorder: $inputBorder !default;
$inputListPadding: 0.5rem 0 !default;
$inputListItemPadding: 0.5rem 1rem !default;
$inputListItemBg: transparent !default;
$inputListItemTextColor: $shade000 !default;
$inputListItemHoverBg: $hoverBg !default;
$inputListItemTextHoverColor: $shade000 !default;
$inputListItemFocusBg: rgba(255, 255, 255, 0.09) !default;
$inputListItemTextFocusColor: $shade000 !default;
$inputListItemBorder: 0 none !default;
$inputListItemBorderRadius: 0 !default;
$inputListItemMargin: 0 !default;
$inputListItemFocusShadow: inset 0 0 0 0.15rem $focusOutlineColor !default;
$inputListHeaderPadding: 0.5rem 1rem !default;
$inputListHeaderMargin: 0 !default;
$inputListHeaderBg: $shade800 !default;
$inputListHeaderTextColor: $shade000 !default;
$inputListHeaderBorder: 0 none !default;
//inputs with overlays (e.g. autocomplete, dropdown, multiselect)
$inputOverlayBg: $inputListBg !default;
$inputOverlayHeaderBg: $inputListHeaderBg !default;
$inputOverlayBorder: 1px solid $shade600 !default;
$inputOverlayShadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2),
0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12) !default;
//password
$passwordMeterBg: $shade600 !default;
$passwordWeakBg: #f48fb1 !default;
$passwordMediumBg: #ffe082 !default;
$passwordStrongBg: #c5e1a5 !default;
//button
$buttonPadding: 0.5rem 1rem !default;
$buttonIconOnlyWidth: 2.357rem !default;
$buttonIconOnlyPadding: 0.5rem 0 !default;
$buttonBg: $primaryColor !default;
$buttonTextColor: $primaryTextColor !default;
$buttonBorder: 1px solid $primaryColor !default;
$buttonHoverBg: $primaryDarkColor !default;
$buttonTextHoverColor: $primaryTextColor !default;
$buttonHoverBorderColor: $primaryDarkColor !default;
$buttonActiveBg: $primaryDarkerColor !default;
$buttonTextActiveColor: $primaryTextColor !default;
$buttonActiveBorderColor: $primaryDarkerColor !default;
$raisedButtonShadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12) !default;
$roundedButtonBorderRadius: 2rem !default;
$textButtonHoverBgOpacity: 0.04 !default;
$textButtonActiveBgOpacity: 0.16 !default;
$outlinedButtonBorder: 1px solid !default;
$plainButtonTextColor: $textSecondaryColor !default;
$plainButtonHoverBgColor: $hoverBg !default;
$plainButtonActiveBgColor: rgba(255, 255, 255, 0.16) !default;
$secondaryButtonBg: #78909c !default;
$secondaryButtonTextColor: #ffffff !default;
$secondaryButtonBorder: 1px solid $secondaryButtonBg !default;
$secondaryButtonHoverBg: scale-color(
$secondaryButtonBg,
$lightness: -10%
) !default;
$secondaryButtonTextHoverColor: $secondaryButtonTextColor !default;
$secondaryButtonHoverBorderColor: scale-color(
$secondaryButtonBg,
$lightness: -10%
) !default;
$secondaryButtonActiveBg: scale-color(
$secondaryButtonBg,
$lightness: -20%
) !default;
$secondaryButtonTextActiveColor: $secondaryButtonTextColor !default;
$secondaryButtonActiveBorderColor: scale-color(
$secondaryButtonBg,
$lightness: -20%
) !default;
$secondaryButtonFocusShadow: 0 0 0 1px
scale-color($secondaryButtonBg, $lightness: 30%) !default;
$infoButtonBg: #81d4fa !default;
$infoButtonTextColor: #121212 !default;
$infoButtonBorder: 1px solid $infoButtonBg !default;
$infoButtonHoverBg: scale-color($infoButtonBg, $lightness: -10%) !default;
$infoButtonTextHoverColor: $infoButtonTextColor !default;
$infoButtonHoverBorderColor: scale-color(
$infoButtonBg,
$lightness: -10%
) !default;
$infoButtonActiveBg: scale-color($infoButtonBg, $lightness: -20%) !default;
$infoButtonTextActiveColor: $infoButtonTextColor !default;
$infoButtonActiveBorderColor: scale-color(
$infoButtonBg,
$lightness: -20%
) !default;
$infoButtonFocusShadow: 0 0 0 1px scale-color($infoButtonBg, $lightness: 30%) !default;
$successButtonBg: #c5e1a5 !default;
$successButtonTextColor: #121212 !default;
$successButtonBorder: 1px solid $successButtonBg !default;
$successButtonHoverBg: scale-color($successButtonBg, $lightness: -10%) !default;
$successButtonTextHoverColor: $successButtonTextColor !default;
$successButtonHoverBorderColor: scale-color(
$successButtonBg,
$lightness: -10%
) !default;
$successButtonActiveBg: scale-color(
$successButtonBg,
$lightness: -20%
) !default;
$successButtonTextActiveColor: $successButtonTextColor !default;
$successButtonActiveBorderColor: scale-color(
$successButtonBg,
$lightness: -20%
) !default;
$successButtonFocusShadow: 0 0 0 1px
scale-color($successButtonBg, $lightness: 30%) !default;
$warningButtonBg: #ffe082 !default;
$warningButtonTextColor: #121212 !default;
$warningButtonBorder: 1px solid $warningButtonBg !default;
$warningButtonHoverBg: scale-color($warningButtonBg, $lightness: -10%) !default;
$warningButtonTextHoverColor: $warningButtonTextColor !default;
$warningButtonHoverBorderColor: scale-color(
$warningButtonBg,
$lightness: -10%
) !default;
$warningButtonActiveBg: scale-color(
$warningButtonBg,
$lightness: -20%
) !default;
$warningButtonTextActiveColor: $warningButtonTextColor !default;
$warningButtonActiveBorderColor: scale-color(
$warningButtonBg,
$lightness: -20%
) !default;
$warningButtonFocusShadow: 0 0 0 1px
scale-color($warningButtonBg, $lightness: 30%) !default;
$helpButtonBg: #ce93d8 !default;
$helpButtonTextColor: #121212 !default;
$helpButtonBorder: 1px solid $helpButtonBg !default;
$helpButtonHoverBg: scale-color($helpButtonBg, $lightness: -10%) !default;
$helpButtonTextHoverColor: $helpButtonTextColor !default;
$helpButtonHoverBorderColor: scale-color(
$helpButtonBg,
$lightness: -10%
) !default;
$helpButtonActiveBg: scale-color($helpButtonBg, $lightness: -20%) !default;
$helpButtonTextActiveColor: $helpButtonTextColor !default;
$helpButtonActiveBorderColor: scale-color(
$helpButtonBg,
$lightness: -20%
) !default;
$helpButtonFocusShadow: 0 0 0 1px scale-color($helpButtonBg, $lightness: 30%) !default;
$dangerButtonBg: #f48fb1 !default;
$dangerButtonTextColor: #121212 !default;
$dangerButtonBorder: 1px solid $dangerButtonBg !default;
$dangerButtonHoverBg: scale-color($dangerButtonBg, $lightness: -10%) !default;
$dangerButtonTextHoverColor: $dangerButtonTextColor !default;
$dangerButtonHoverBorderColor: scale-color(
$dangerButtonBg,
$lightness: -10%
) !default;
$dangerButtonActiveBg: scale-color($dangerButtonBg, $lightness: -20%) !default;
$dangerButtonTextActiveColor: $dangerButtonTextColor !default;
$dangerButtonActiveBorderColor: scale-color(
$dangerButtonBg,
$lightness: -20%
) !default;
$dangerButtonFocusShadow: 0 0 0 1px
scale-color($dangerButtonBg, $lightness: 30%) !default;
$linkButtonColor: $primaryColor !default;
$linkButtonHoverColor: $primaryColor !default;
$linkButtonTextHoverDecoration: underline !default;
$linkButtonFocusShadow: 0 0 0 0.1rem $focusOutlineColor !default;
//checkbox
$checkboxWidth: 20px !default;
$checkboxHeight: 20px !default;
$checkboxBorder: 2px solid $shade600 !default;
$checkboxIconFontSize: 14px !default;
$checkboxActiveBorderColor: $primaryColor !default;
$checkboxActiveBg: $primaryColor !default;
$checkboxIconActiveColor: $primaryTextColor !default;
$checkboxActiveHoverBg: $primaryDarkerColor !default;
$checkboxIconActiveHoverColor: $primaryTextColor !default;
$checkboxActiveHoverBorderColor: $primaryDarkerColor !default;
//radiobutton
$radiobuttonWidth: 20px !default;
$radiobuttonHeight: 20px !default;
$radiobuttonBorder: 2px solid $shade600 !default;
$radiobuttonIconSize: 12px !default;
$radiobuttonActiveBorderColor: $primaryColor !default;
$radiobuttonActiveBg: $primaryColor !default;
$radiobuttonIconActiveColor: $primaryTextColor !default;
$radiobuttonActiveHoverBg: $primaryDarkerColor !default;
$radiobuttonIconActiveHoverColor: $primaryTextColor !default;
$radiobuttonActiveHoverBorderColor: $primaryDarkerColor !default;
//colorpicker
$colorPickerPreviewWidth: 2rem !default;
$colorPickerPreviewHeight: 2rem !default;
$colorPickerBg: $shade800 !default;
$colorPickerBorder: 1px solid $shade600 !default;
$colorPickerHandleColor: #ffffff !default;
//togglebutton
$toggleButtonBg: $shade800 !default;
$toggleButtonBorder: 1px solid $shade600 !default;
$toggleButtonTextColor: $shade000 !default;
$toggleButtonIconColor: $shade100 !default;
$toggleButtonHoverBg: $hoverBg !default;
$toggleButtonHoverBorderColor: $shade600 !default;
$toggleButtonTextHoverColor: $shade000 !default;
$toggleButtonIconHoverColor: $shade100 !default;
$toggleButtonActiveBg: $primaryColor !default;
$toggleButtonActiveBorderColor: $primaryColor !default;
$toggleButtonTextActiveColor: $primaryTextColor !default;
$toggleButtonIconActiveColor: $primaryTextColor !default;
$toggleButtonActiveHoverBg: $primaryDarkColor !default;
$toggleButtonActiveHoverBorderColor: $primaryDarkColor !default;
$toggleButtonTextActiveHoverColor: $primaryTextColor !default;
$toggleButtonIconActiveHoverColor: $primaryTextColor !default;
//inplace
$inplacePadding: $inputPadding !default;
$inplaceHoverBg: $hoverBg !default;
$inplaceTextHoverColor: $shade000 !default;
//rating
$ratingIconFontSize: 1.143rem !default;
$ratingCancelIconColor: #f48fb1 !default;
$ratingCancelIconHoverColor: #f48fb1 !default;
$ratingStarIconOffColor: $shade000 !default;
$ratingStarIconOnColor: $primaryColor !default;
$ratingStarIconHoverColor: $primaryColor !default;
//slider
$sliderBg: $shade600 !default;
$sliderBorder: 0 none !default;
$sliderHorizontalHeight: 0.286rem !default;
$sliderVerticalWidth: 0.286rem !default;
$sliderHandleWidth: 1.143rem !default;
$sliderHandleHeight: 1.143rem !default;
$sliderHandleBg: $shade600 !default;
$sliderHandleBorder: 2px solid $primaryColor !default;
$sliderHandleBorderRadius: 50% !default;
$sliderHandleHoverBorderColor: $primaryColor !default;
$sliderHandleHoverBg: $primaryColor !default;
$sliderRangeBg: $primaryColor !default;
//calendar
$calendarTableMargin: 0.5rem 0 !default;
$calendarPadding: 0.5rem !default;
$calendarBg: $shade800 !default;
$calendarInlineBg: $calendarBg !default;
$calendarTextColor: $shade000 !default;
$calendarBorder: $inputListBorder !default;
$calendarOverlayBorder: $inputOverlayBorder !default;
$calendarHeaderPadding: 0.5rem !default;
$calendarHeaderBg: $shade800 !default;
$calendarInlineHeaderBg: $calendarBg !default;
$calendarHeaderBorder: 1px solid $shade600 !default;
$calendarHeaderTextColor: $shade000 !default;
$calendarHeaderFontWeight: 600 !default;
$calendarHeaderCellPadding: 0.5rem !default;
$calendarMonthYearHeaderHoverTextColor: $primaryColor !default;
$calendarCellDatePadding: 0.5rem !default;
$calendarCellDateWidth: 2.5rem !default;
$calendarCellDateHeight: 2.5rem !default;
$calendarCellDateBorderRadius: 50% !default;
$calendarCellDateBorder: 1px solid transparent !default;
$calendarCellDateHoverBg: $hoverBg !default;
$calendarCellDateTodayBg: transparent !default;
$calendarCellDateTodayBorderColor: transparent !default;
$calendarCellDateTodayTextColor: $primaryColor !default;
$calendarButtonBarPadding: 1rem 0 !default;
$calendarTimePickerPadding: 0.5rem !default;
$calendarTimePickerElementPadding: 0 0.5rem !default;
$calendarTimePickerTimeFontSize: 1.25rem !default;
$calendarBreakpoint: 769px !default;
$calendarCellDatePaddingSM: 0 !default;
//input switch
$inputSwitchWidth: 3rem !default;
$inputSwitchHeight: 1.75rem !default;
$inputSwitchBorderRadius: 30px !default;
$inputSwitchHandleWidth: 1.25rem !default;
$inputSwitchHandleHeight: 1.25rem !default;
$inputSwitchHandleBorderRadius: 50% !default;
$inputSwitchSliderPadding: 0.25rem !default;
$inputSwitchSliderOffBg: $shade600 !default;
$inputSwitchHandleOffBg: $shade100 !default;
$inputSwitchSliderOffHoverBg: $hoverBg !default;
$inputSwitchSliderOnBg: $primaryColor !default;
$inputSwitchSliderOnHoverBg: $primaryDarkColor !default;
$inputSwitchHandleOnBg: $shade000 !default;
//panel
$panelHeaderBorderColor: $shade600 !default;
$panelHeaderBorder: 1px solid $shade600 !default;
$panelHeaderBg: $shade800 !default;
$panelHeaderTextColor: $shade000 !default;
$panelHeaderFontWeight: 600 !default;
$panelHeaderPadding: 1rem !default;
$panelToggleableHeaderPadding: 0.5rem 1rem !default;
$panelHeaderHoverBg: $hoverBg !default;
$panelHeaderHoverBorderColor: $shade600 !default;
$panelHeaderTextHoverColor: $shade000 !default;
$panelContentBorderColor: $shade600 !default;
$panelContentBorder: 1px solid $shade600 !default;
$panelContentBg: $shade800 !default;
$panelContentEvenRowBg: rgba(255, 255, 255, 0.01) !default;
$panelContentTextColor: $shade000 !default;
$panelContentPadding: 1rem !default;
$panelFooterBorder: 1px solid $shade600 !default;
$panelFooterBg: $shade800 !default;
$panelFooterTextColor: $shade000 !default;
$panelFooterPadding: 0.5rem 1rem !default;
//accordion
$accordionSpacing: 0 !default;
$accordionHeaderBorder: $panelHeaderBorder !default;
$accordionHeaderBg: $panelHeaderBg !default;
$accordionHeaderTextColor: $panelHeaderTextColor !default;
$accordionHeaderFontWeight: $panelHeaderFontWeight !default;
$accordionHeaderPadding: $panelHeaderPadding !default;
$accordionHeaderHoverBg: $hoverBg !default;
$accordionHeaderHoverBorderColor: $shade600 !default;
$accordionHeaderTextHoverColor: $shade000 !default;
$accordionHeaderActiveBg: $panelHeaderBg !default;
$accordionHeaderActiveBorderColor: $shade600 !default;
$accordionHeaderTextActiveColor: $shade000 !default;
$accordionHeaderActiveHoverBg: $hoverBg !default;
$accordionHeaderActiveHoverBorderColor: $shade600 !default;
$accordionHeaderTextActiveHoverColor: $shade000 !default;
$accordionContentBorder: $panelContentBorder !default;
$accordionContentBg: $panelContentBg !default;
$accordionContentTextColor: $panelContentTextColor !default;
$accordionContentPadding: $panelContentPadding !default;
//tabview
$tabviewNavBorder: 1px solid $shade600 !default;
$tabviewNavBorderWidth: 0 0 2px 0 !default;
$tabviewNavBg: transparent !default;
$tabviewHeaderSpacing: 0 !default;
$tabviewHeaderBorder: solid $shade600 !default;
$tabviewHeaderBorderWidth: 0 0 2px 0 !default;
$tabviewHeaderBorderColor: transparent transparent $shade600 transparent !default;
$tabviewHeaderBg: $shade800 !default;
$tabviewHeaderTextColor: $shade100 !default;
$tabviewHeaderFontWeight: $panelHeaderFontWeight !default;
$tabviewHeaderPadding: $panelHeaderPadding !default;
$tabviewHeaderMargin: 0 0 -2px 0 !default;
$tabviewHeaderHoverBg: $shade800 !default;
$tabviewHeaderHoverBorderColor: $primaryColor !default;
$tabviewHeaderTextHoverColor: $shade000 !default;
$tabviewHeaderActiveBg: $shade800 !default;
$tabviewHeaderActiveBorderColor: $primaryColor !default;
$tabviewHeaderTextActiveColor: $primaryColor !default;
$tabviewContentBorder: 0 none !default;
$tabviewContentBg: $shade800 !default;
$tabviewContentTextColor: $shade000 !default;
$tabviewContentPadding: $panelContentPadding !default;
//upload
$fileUploadProgressBarHeight: 0.25rem !default;
$fileUploadContentPadding: 2rem 1rem !default;
$fileUploadContentHoverBorder: 1px dashed $primaryColor !default;
//scrollpanel
$scrollPanelTrackBorder: 0 none !default;
$scrollPanelTrackBg: $shade600 !default;
//card
$cardBodyPadding: 1rem !default;
$cardTitleFontSize: 1.5rem !default;
$cardTitleFontWeight: 700 !default;
$cardSubTitleFontWeight: 700 !default;
$cardSubTitleColor: $shade100 !default;
$cardContentPadding: 1rem 0 !default;
$cardFooterPadding: 1rem 0 0 0 !default;
$cardShadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14),
0 1px 3px 0 rgba(0, 0, 0, 0.12) !default;
//editor
$editorToolbarBg: $panelHeaderBg !default;
$editorToolbarBorder: $panelHeaderBorder !default;
$editorToolbarPadding: $panelHeaderPadding !default;
$editorToolbarIconColor: $textSecondaryColor !default;
$editorToolbarIconHoverColor: $textColor !default;
$editorIconActiveColor: $primaryColor !default;
$editorContentBorder: $panelContentBorder !default;
$editorContentBg: $panelContentBg !default;
//paginator
$paginatorBg: $shade800 !default;
$paginatorTextColor: $shade100 !default;
$paginatorBorder: solid $shade600 !default;
$paginatorBorderWidth: 1px !default;
$paginatorPadding: 0.5rem 1rem !default;
$paginatorElementWidth: 2.286em !default;
$paginatorElementHeight: 2.286em !default;
$paginatorElementBg: transparent !default;
$paginatorElementBorder: 0 none !default;
$paginatorElementIconColor: $shade100 !default;
$paginatorElementHoverBg: $hoverBg !default;
$paginatorElementHoverBorderColor: transparent !default;
$paginatorElementIconHoverColor: $shade000 !default;
$paginatorElementBorderRadius: $borderRadius !default;
$paginatorElementMargin: 0.143rem !default;
$paginatorElementPadding: 0 !default;
//table
$tableHeaderBorder: 1px solid $shade600 !default;
$tableHeaderBorderWidth: 0 0 1px 0 !default;
$tableHeaderBg: $shade800 !default;
$tableHeaderTextColor: $shade100 !default;
$tableHeaderFontWeight: 600 !default;
$tableHeaderPadding: 1rem 1rem !default;
$tableHeaderCellPadding: 1rem 1rem !default;
$tableHeaderCellBg: $shade800 !default;
$tableHeaderCellTextColor: $shade000 !default;
$tableHeaderCellFontWeight: 600 !default;
$tableHeaderCellBorder: 1px solid $shade600 !default;
$tableHeaderCellBorderWidth: 0 0 1px 0 !default;
$tableHeaderCellHoverBg: $hoverBg !default;
$tableHeaderCellTextHoverColor: $shade000 !default;
$tableHeaderCellIconColor: $shade100 !default;
$tableHeaderCellIconHoverColor: $shade000 !default;
$tableHeaderCellHighlightBg: $shade800 !default;
$tableHeaderCellHighlightTextColor: $primaryColor !default;
$tableHeaderCellHighlightHoverBg: $hoverBg !default;
$tableHeaderCellHighlightTextHoverColor: $primaryColor !default;
$tableSortableColumnBadgeSize: 1.143rem !default;
$tableBodyRowBg: $shade800 !default;
$tableBodyRowTextColor: $shade000 !default;
$tableBodyRowEvenBg: #253144 !default;
$tableBodyRowHoverBg: $hoverBg !default;
$tableBodyRowTextHoverColor: $shade000 !default;
$tableBodyCellBorder: 1px solid $shade600 !default;
$tableBodyCellBorderWidth: 0 0 1px 0 !default;
$tableBodyCellPadding: 1rem 1rem !default;
$tableFooterCellPadding: 1rem 1rem !default;
$tableFooterCellBg: $shade800 !default;
$tableFooterCellTextColor: $shade000 !default;
$tableFooterCellFontWeight: 600 !default;
$tableFooterCellBorder: 1px solid $shade600 !default;
$tableFooterCellBorderWidth: 0 0 1px 0 !default;
$tableResizerHelperBg: $primaryColor !default;
$tableFooterBorder: 1px solid $shade600 !default;
$tableFooterBorderWidth: 0 0 1px 0 !default;
$tableFooterBg: $shade800 !default;
$tableFooterTextColor: $shade000 !default;
$tableFooterFontWeight: 600 !default;
$tableFooterPadding: 1rem 1rem !default;
$tableCellContentAlignment: left !default;
$tableTopPaginatorBorderWidth: 1px 0 1px 0 !default;
$tableBottomPaginatorBorderWidth: 0 0 1px 0 !default;
$tableScaleSM: 0.5 !default;
$tableScaleLG: 1.25 !default;
//dataview
$dataViewContentPadding: 0 !default;
$dataViewContentBorder: 0 none !default;
//tree
$treeContainerPadding: 0.286rem !default;
$treeNodePadding: 0.143rem !default;
$treeNodeContentPadding: 0 !default;
$treeNodeChildrenPadding: 0 0 0 1rem !default;
$treeNodeIconColor: $shade100 !default;
//timeline
$timelineVerticalEventContentPadding: 0 1rem !default;
$timelineHorizontalEventContentPadding: 1rem 0 !default;
$timelineEventMarkerWidth: 1rem !default;
$timelineEventMarkerHeight: 1rem !default;
$timelineEventMarkerBorderRadius: 50% !default;
$timelineEventMarkerBorder: 2px solid $primaryColor !default;
$timelineEventMarkerBackground: $shade800 !default;
$timelineEventConnectorSize: 2px !default;
$timelineEventColor: $shade600 !default;
//org chart
$organizationChartConnectorColor: $shade100 !default;
//message
$messageMargin: 1rem 0 !default;
$messagePadding: 1rem 1.5rem !default;
$messageBorderWidth: 0 0 0 6px !default;
$messageIconFontSize: 1.5rem !default;
$messageTextFontSize: 1rem !default;
$messageTextFontWeight: 500 !default;
//inline message
$inlineMessagePadding: $inputPadding !default;
$inlineMessageMargin: 0 !default;
$inlineMessageIconFontSize: 1rem !default;
$inlineMessageTextFontSize: 1rem !default;
$inlineMessageBorderWidth: 1px !default;
//toast
$toastIconFontSize: 2rem !default;
$toastMessageTextMargin: 0 0 0 1rem !default;
$toastMargin: 0 0 1rem 0 !default;
$toastPadding: 1rem !default;
$toastBorderWidth: 0 0 0 6px !default;
$toastShadow: none !default;
$toastOpacity: 0.9 !default;
$toastTitleFontWeight: 700 !default;
$toastDetailMargin: $inlineSpacing 0 0 0 !default;
//severities
$infoMessageBg: #b3e5fc !default;
$infoMessageBorder: solid scale-color($infoMessageBg, $lightness: -50%) !default;
$infoMessageTextColor: scale-color($infoMessageBg, $lightness: -75%) !default;
$infoMessageIconColor: scale-color($infoMessageBg, $lightness: -75%) !default;
$successMessageBg: #c8e6c9 !default;
$successMessageBorder: solid scale-color($successMessageBg, $lightness: -50%) !default;
$successMessageTextColor: scale-color(
$successMessageBg,
$lightness: -75%
) !default;
$successMessageIconColor: scale-color(
$successMessageBg,
$lightness: -75%
) !default;
$warningMessageBg: #ffecb3 !default;
$warningMessageBorder: solid scale-color($warningMessageBg, $lightness: -50%) !default;
$warningMessageTextColor: scale-color(
$warningMessageBg,
$lightness: -75%
) !default;
$warningMessageIconColor: scale-color(
$warningMessageBg,
$lightness: -75%
) !default;
$errorMessageBg: #ffcdd2 !default;
$errorMessageBorder: solid scale-color($errorMessageBg, $lightness: -50%) !default;
$errorMessageTextColor: scale-color($errorMessageBg, $lightness: -75%) !default;
$errorMessageIconColor: scale-color($errorMessageBg, $lightness: -75%) !default;
//overlays
$overlayContentBorder: 1px solid $shade600 !default;
$overlayContentBg: $panelContentBg !default;
$overlayContainerShadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2),
0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12) !default;
//dialog
$dialogHeaderBg: $shade800 !default;
$dialogHeaderBorder: 0 none !default;
$dialogHeaderTextColor: $shade000 !default;
$dialogHeaderFontWeight: 600 !default;
$dialogHeaderFontSize: 1.25rem !default;
$dialogHeaderPadding: 1.5rem !default;
$dialogContentPadding: 0 1.5rem 2rem 1.5rem !default;
$dialogFooterBorder: 0 none !default;
$dialogFooterPadding: 0 1.5rem 1.5rem 1.5rem !default;
//confirmpopup
$confirmPopupContentPadding: $panelContentPadding !default;
$confirmPopupFooterPadding: 0 1rem 1rem 1rem !default;
//tooltip
$tooltipBg: $shade600 !default;
$tooltipTextColor: $shade000 !default;
$tooltipPadding: $inputPadding !default;
//steps
$stepsItemBg: transparent !default;
$stepsItemBorder: 0 none !default;
$stepsItemTextColor: $shade100 !default;
$stepsItemNumberWidth: 2rem !default;
$stepsItemNumberHeight: 2rem !default;
$stepsItemNumberFontSize: 1.143rem !default;
$stepsItemNumberColor: $shade000 !default;
$stepsItemNumberBorderRadius: 50% !default;
$stepsItemActiveFontWeight: 600 !default;
//progressbar
$progressBarHeight: 1.5rem !default;
$progressBarBorder: 0 none !default;
$progressBarBg: $shade600 !default;
$progressBarValueBg: $primaryColor !default;
$progressBarValueTextColor: $primaryTextColor !default;
//menu (e.g. menu, menubar, tieredmenu)
$menuWidth: 12.5rem !default;
$menuBg: $shade800 !default;
$menuBorder: 1px solid $shade600 !default;
$menuTextColor: $shade000 !default;
$menuitemPadding: 0.75rem 1rem !default;
$menuitemBorderRadius: 0 !default;
$menuitemTextColor: $shade000 !default;
$menuitemIconColor: $shade100 !default;
$menuitemTextHoverColor: $shade000 !default;
$menuitemIconHoverColor: $shade000 !default;
$menuitemHoverBg: $hoverBg !default;
$menuitemTextFocusColor: $shade000 !default;
$menuitemIconFocusColor: $shade000 !default;
$menuitemFocusBg: rgba(255, 255, 255, 0.09) !default;
$menuitemTextActiveColor: $shade000 !default;
$menuitemIconActiveColor: $shade000 !default;
$menuitemActiveBg: $shade900 !default;
$menuitemActiveFocusBg: $shade900 !default;
$menuitemSubmenuIconFontSize: 0.875rem !default;
$submenuHeaderMargin: 0 !default;
$submenuHeaderPadding: 0.75rem 1rem !default;
$submenuHeaderBg: $shade800 !default;
$submenuHeaderTextColor: $shade000 !default;
$submenuHeaderBorderRadius: 0 !default;
$submenuHeaderFontWeight: 600 !default;
$overlayMenuBg: $menuBg !default;
$overlayMenuBorder: 1px solid $shade600 !default;
$overlayMenuShadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2),
0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12) !default;
$verticalMenuPadding: 0.25rem 0 !default;
$verticalMenuitemMargin: 0 !default;
$menuSeparatorMargin: 0.25rem 0 !default;
$breadcrumbPadding: 1rem !default;
$breadcrumbBg: $menuBg !default;
$breadcrumbBorder: $menuBorder !default;
$breadcrumbItemTextColor: $menuitemTextColor !default;
$breadcrumbItemIconColor: $menuitemIconColor !default;
$breadcrumbLastItemTextColor: $menuitemTextColor !default;
$breadcrumbLastItemIconColor: $menuitemIconColor !default;
$breadcrumbSeparatorColor: $menuitemTextColor !default;
$horizontalMenuPadding: 0.5rem !default;
$horizontalMenuBg: $menuBg !default;
$horizontalMenuBorder: $menuBorder !default;
$horizontalMenuTextColor: $menuTextColor !default;
$horizontalMenuRootMenuitemPadding: $menuitemPadding !default;
$horizontalMenuRootMenuitemBorderRadius: $borderRadius !default;
$horizontalMenuRootMenuitemTextColor: $menuitemTextColor !default;
$horizontalMenuRootMenuitemIconColor: $menuitemIconColor !default;
$horizontalMenuRootMenuitemTextHoverColor: $menuitemTextHoverColor !default;
$horizontalMenuRootMenuitemIconHoverColor: $menuitemIconHoverColor !default;
$horizontalMenuRootMenuitemHoverBg: $menuitemHoverBg !default;
$horizontalMenuRootMenuitemTextActiveColor: $menuitemTextActiveColor !default;
$horizontalMenuRootMenuitemIconActiveColor: $menuitemIconActiveColor !default;
$horizontalMenuRootMenuitemActiveBg: $menuitemActiveBg !default;
//badge and tag
$badgeBg: $primaryColor !default;
$badgeTextColor: $primaryTextColor !default;
$badgeMinWidth: 1.5rem !default;
$badgeHeight: 1.5rem !default;
$badgeFontWeight: 700 !default;
$badgeFontSize: 0.75rem !default;
$tagPadding: 0.25rem 0.4rem !default;
//carousel
$carouselIndicatorsPadding: 1rem !default;
$carouselIndicatorBg: $shade600 !default;
$carouselIndicatorHoverBg: scale-color($shade600, $lightness: 10%) !default;
$carouselIndicatorBorderRadius: 0 !default;
$carouselIndicatorWidth: 2rem !default;
$carouselIndicatorHeight: 0.5rem !default;
//galleria
$galleriaMaskBg: rgba(0, 0, 0, 0.9) !default;
$galleriaCloseIconMargin: 0.5rem !default;
$galleriaCloseIconFontSize: 2rem !default;
$galleriaCloseIconBg: transparent !default;
$galleriaCloseIconColor: #f8f9fa !default;
$galleriaCloseIconHoverBg: rgba(255, 255, 255, 0.1) !default;
$galleriaCloseIconHoverColor: #f8f9fa !default;
$galleriaCloseIconWidth: 4rem !default;
$galleriaCloseIconHeight: 4rem !default;
$galleriaCloseIconBorderRadius: 50% !default;
$galleriaItemNavigatorBg: transparent !default;
$galleriaItemNavigatorColor: #f8f9fa !default;
$galleriaItemNavigatorMargin: 0 0.5rem !default;
$galleriaItemNavigatorFontSize: 2rem !default;
$galleriaItemNavigatorHoverBg: rgba(255, 255, 255, 0.1) !default;
$galleriaItemNavigatorHoverColor: #f8f9fa !default;
$galleriaItemNavigatorWidth: 4rem !default;
$galleriaItemNavigatorHeight: 4rem !default;
$galleriaItemNavigatorBorderRadius: $borderRadius !default;
$galleriaCaptionBg: rgba(0, 0, 0, 0.5) !default;
$galleriaCaptionTextColor: #f8f9fa !default;
$galleriaCaptionPadding: 1rem !default;
$galleriaIndicatorsPadding: 1rem !default;
$galleriaIndicatorBg: $shade600 !default;
$galleriaIndicatorHoverBg: scale-color($shade600, $lightness: 10%) !default;
$galleriaIndicatorBorderRadius: 50% !default;
$galleriaIndicatorWidth: 1rem !default;
$galleriaIndicatorHeight: 1rem !default;
$galleriaIndicatorsBgOnItem: rgba(0, 0, 0, 0.5) !default;
$galleriaIndicatorBgOnItem: rgba(255, 255, 255, 0.4) !default;
$galleriaIndicatorHoverBgOnItem: rgba(255, 255, 255, 0.6) !default;
$galleriaThumbnailContainerBg: rgba(0, 0, 0, 0.9) !default;
$galleriaThumbnailContainerPadding: 1rem 0.25rem !default;
$galleriaThumbnailNavigatorBg: transparent !default;
$galleriaThumbnailNavigatorColor: #f8f9fa !default;
$galleriaThumbnailNavigatorHoverBg: rgba(255, 255, 255, 0.1) !default;
$galleriaThumbnailNavigatorHoverColor: #f8f9fa !default;
$galleriaThumbnailNavigatorBorderRadius: 50% !default;
$galleriaThumbnailNavigatorWidth: 2rem !default;
$galleriaThumbnailNavigatorHeight: 2rem !default;
//divider
$dividerHorizontalMargin: 1rem 0 !default;
$dividerHorizontalPadding: 0 1rem !default;
$dividerVerticalMargin: 0 1rem !default;
$dividerVerticalPadding: 1rem 0 !default;
$dividerSize: 1px !default;
$dividerColor: $shade600 !default;
//avatar
$avatarBg: $shade600 !default;
$avatarTextColor: $textColor !default;
//chip
$chipBg: $shade600 !default;
$chipTextColor: $textColor !default;
$chipBorderRadius: 16px !default;
$chipFocusBg: $shade500 !default;
$chipFocusTextColor: $textColor !default;
//scrollTop
$scrollTopBg: $highlightBg !default;
$scrollTopHoverBg: scale-color($highlightBg, $alpha: 24%) !default;
$scrollTopWidth: 3rem !default;
$scrollTopHeight: 3rem !default;
$scrollTopBorderRadius: 50% !default;
$scrollTopFontSize: 1.5rem !default;
$scrollTopTextColor: $highlightTextColor !default;
//skeleton
$skeletonBg: rgba(255, 255, 255, 0.06) !default;
$skeletonAnimationBg: rgba(255, 255, 255, 0.04) !default;
//splitter
$splitterGutterBg: rgba(255, 255, 255, 0.03) !default;
$splitterGutterHandleBg: $shade600 !default;
//speeddial
$speedDialButtonWidth: 4rem !default;
$speedDialButtonHeight: 4rem !default;
$speedDialButtonIconFontSize: 1.3rem !default;
$speedDialActionWidth: 3rem !default;
$speedDialActionHeight: 3rem !default;
$speedDialActionBg: $shade000 !default;
$speedDialActionHoverBg: $shade100 !default;
$speedDialActionTextColor: $shade900 !default;
$speedDialActionTextHoverColor: $shade900 !default;
//dock
$dockActionWidth: 4rem !default;
$dockActionHeight: 4rem !default;
$dockItemPadding: 0.5rem !default;
$dockItemBorderRadius: $borderRadius !default;
$dockCurrentItemMargin: 1.5rem !default;
$dockFirstItemsMargin: 1.3rem !default;
$dockSecondItemsMargin: 0.9rem !default;
$dockBg: rgba(255, 255, 255, 0.1) !default;
$dockBorder: 1px solid rgba(255, 255, 255, 0.2) !default;
$dockPadding: 0.5rem 0.5rem !default;
$dockBorderRadius: 0.5rem !default;
//image
$imageMaskBg: rgba(0, 0, 0, 0.9) !default;
$imagePreviewToolbarPadding: 1rem !default;
$imagePreviewIndicatorColor: #f8f9fa !default;
$imagePreviewIndicatorBg: rgba(0, 0, 0, 0.5) !default;
$imagePreviewActionIconBg: transparent !default;
$imagePreviewActionIconColor: #f8f9fa !default;
$imagePreviewActionIconHoverBg: rgba(255, 255, 255, 0.1) !default;
$imagePreviewActionIconHoverColor: #f8f9fa !default;
$imagePreviewActionIconWidth: 3rem !default;
$imagePreviewActionIconHeight: 3rem !default;
$imagePreviewActionIconFontSize: 1.5rem !default;
$imagePreviewActionIconBorderRadius: 50% !default;
:root {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol";
--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol";
--surface-a: #{$shade800};
--surface-b: #{$shade900};
--surface-c: #{$hoverBg};
--surface-d: #{$shade600};
--surface-e: #{$shade800};
--surface-f: #{$shade800};
--text-color: #{$shade000};
--text-color-secondary: #{$shade100};
--primary-color: #{$primaryColor};
--primary-color-text: #{$primaryTextColor};
--surface-0: #070D17;
--surface-50: #2e3744;
--surface-100: #454d59;
--surface-200: #5d646d;
--surface-300: #747a82;
--surface-400: #8b9097;
--surface-500: #a2a6ac;
--surface-600: #b9bcc1;
--surface-700: #d1d3d5;
--surface-800: #e8e9ea;
--surface-900: #ffffff;
--gray-50: #e8e9ea;
--gray-100: #d1d3d5;
--gray-200: #b9bcc1;
--gray-300: #a2a6ac;
--gray-400: #8b9097;
--gray-500: #747a82;
--gray-600: #5d646d;
--gray-700: #454d59;
--gray-800: #2e3744;
--gray-900: #070D17;
--content-padding: #{$panelContentPadding};
--inline-spacing: #{$inlineSpacing};
--border-radius: #{$borderRadius};
--surface-ground: #000;
--surface-section: #070D17;
--surface-card: #070D17;
--surface-overlay: #070D17;
--surface-border: #192730;
--surface-hover: rgba(255, 255, 255, 0.03);
--maskbg: #{$maskBg};
--highlight-bg: #{$highlightBg};
--highlight-text-color: #{$highlightTextColor};
--focus-ring: #{$focusShadow};
color-scheme: light dark;
}

2
main/http_server/axe-os/src/app/layout/styles/theme/themes/vela/bitaxe/_extensions.scss Normal file
View File

@ -0,0 +1,2 @@
/* Customizations to the designer theme should be defined here */
@import '../extensions';

1
main/http_server/axe-os/src/app/layout/styles/theme/themes/vela/bitaxe/_fonts.scss Normal file
View File

@ -0,0 +1 @@
// Configuration for the font-face of the theme, defaults to the system font so left as blank

11
main/http_server/axe-os/src/app/layout/styles/theme/themes/vela/bitaxe/_variables.scss Normal file
View File

@ -0,0 +1,11 @@
$primaryColor: #f80421 !default;
$primaryLightColor: scale-color($primaryColor, $lightness: 30%) !default;
$primaryDarkColor: scale-color($primaryColor, $lightness: -10%) !default;
$primaryDarkerColor: scale-color($primaryColor, $lightness: -20%) !default;
$primaryTextColor: white !default;
$highlightBg: rgba(100, 181, 246, .16) !default;
$highlightTextColor: rgba(255,255,255,.87) !default;
$highlightFocusBg: rgba($primaryColor, .24) !default;
@import '../_variables';

Some files were not shown because too many files have changed in this diff Show More