- added main layout, sidebar, toolbar;
- started dashboard page, added first widget; - created new theme 'gepafin' - styles for the app;
This commit is contained in:
Vitalii Kiiko
2
.env
2
.env
@@ -1,3 +1,3 @@
|
|||||||
REACT_APP_TAB_TITLE=Gepafin
|
REACT_APP_TAB_TITLE=Gepafin
|
||||||
REACT_APP_API_EXECUTION_ADDRESS=
|
REACT_APP_API_EXECUTION_ADDRESS=https://api-dev-gepafin.memento.credit/v1/
|
||||||
REACT_APP_LOGO_FILENAME=logo.svg
|
REACT_APP_LOGO_FILENAME=logo.svg
|
||||||
16
.linguirc
16
.linguirc
@@ -1,16 +0,0 @@
|
|||||||
{
|
|
||||||
"locales": [
|
|
||||||
"en",
|
|
||||||
"it"
|
|
||||||
],
|
|
||||||
"sourceLocale": "it",
|
|
||||||
"catalogs": [
|
|
||||||
{
|
|
||||||
"path": "src/locales/{locale}/messages",
|
|
||||||
"include": [
|
|
||||||
"src"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"format": "po"
|
|
||||||
}
|
|
||||||
2
.npmrc
2
.npmrc
@@ -1,2 +0,0 @@
|
|||||||
@sinossi:registry=https://git.sinossi.it/api/v4/projects/271/packages/npm/
|
|
||||||
//git.sinossi.it/api/v4/projects/271/packages/npm/:_authToken=kdP6WxGtg71-MzJZDRe9
|
|
||||||
@@ -1,2 +1,7 @@
|
|||||||
# GEPAFIN-FE
|
# GEPAFIN-FE
|
||||||
Gepafin Front End
|
Gepafin Front End
|
||||||
|
|
||||||
|
## Commands
|
||||||
|
`npm run start` - start development server
|
||||||
|
`npm run build:dev` - make build based on 'dev' env variables
|
||||||
|
`npm run build:prod` - make build based on 'prod' env variables
|
||||||
|
|||||||
@@ -1,3 +1,3 @@
|
|||||||
REACT_APP_TAB_TITLE=Gepafin
|
REACT_APP_TAB_TITLE=Gepafin
|
||||||
REACT_APP_API_EXECUTION_ADDRESS=
|
REACT_APP_API_EXECUTION_ADDRESS=https://api-dev-gepafin.memento.credit/v1/
|
||||||
REACT_APP_LOGO_FILENAME=logo.svg
|
REACT_APP_LOGO_FILENAME=logo.svg
|
||||||
@@ -1,3 +0,0 @@
|
|||||||
REACT_APP_TAB_TITLE=Gepafin
|
|
||||||
REACT_APP_API_EXECUTION_ADDRESS=
|
|
||||||
REACT_APP_LOGO_FILENAME=logo.svg
|
|
||||||
124
package-lock.json
generated
124
package-lock.json
generated
@@ -19,6 +19,8 @@
|
|||||||
"jwt-decode": "4.0.0",
|
"jwt-decode": "4.0.0",
|
||||||
"klona": "2.0.6",
|
"klona": "2.0.6",
|
||||||
"luxon": "3.5.0",
|
"luxon": "3.5.0",
|
||||||
|
"primeicons": "^7.0.0",
|
||||||
|
"primereact": "^10.8.2",
|
||||||
"ramda": "0.30.1",
|
"ramda": "0.30.1",
|
||||||
"react": "18.3.1",
|
"react": "18.3.1",
|
||||||
"react-dom": "18.3.1",
|
"react-dom": "18.3.1",
|
||||||
@@ -31,10 +33,11 @@
|
|||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@babel/cli": "7.24.8",
|
"@babel/cli": "7.24.8",
|
||||||
"@babel/core": "7.25.2",
|
"@babel/core": "7.25.2",
|
||||||
"@babel/plugin-syntax-jsx": "^7.24.7",
|
"@babel/plugin-syntax-jsx": "7.24.7",
|
||||||
"@wordpress/babel-plugin-makepot": "^6.5.0",
|
"@wordpress/babel-plugin-makepot": "6.5.0",
|
||||||
"babel-plugin-macros": "3.1.0",
|
"babel-plugin-macros": "3.1.0",
|
||||||
"sass": "1.77.8"
|
"sass": "1.77.8",
|
||||||
|
"sass-loader": "^16.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@alloc/quick-lru": {
|
"node_modules/@alloc/quick-lru": {
|
||||||
@@ -4091,6 +4094,14 @@
|
|||||||
"@types/react": "*"
|
"@types/react": "*"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@types/react-transition-group": {
|
||||||
|
"version": "4.4.10",
|
||||||
|
"resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.10.tgz",
|
||||||
|
"integrity": "sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q==",
|
||||||
|
"dependencies": {
|
||||||
|
"@types/react": "*"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@types/resolve": {
|
"node_modules/@types/resolve": {
|
||||||
"version": "1.17.1",
|
"version": "1.17.1",
|
||||||
"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
|
"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
|
||||||
@@ -6921,6 +6932,15 @@
|
|||||||
"utila": "~0.4"
|
"utila": "~0.4"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/dom-helpers": {
|
||||||
|
"version": "5.2.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
|
||||||
|
"integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
|
||||||
|
"dependencies": {
|
||||||
|
"@babel/runtime": "^7.8.7",
|
||||||
|
"csstype": "^3.0.2"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/dom-serializer": {
|
"node_modules/dom-serializer": {
|
||||||
"version": "2.0.0",
|
"version": "2.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
|
||||||
@@ -14650,6 +14670,33 @@
|
|||||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
|
||||||
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
|
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
|
||||||
},
|
},
|
||||||
|
"node_modules/primeicons": {
|
||||||
|
"version": "7.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/primeicons/-/primeicons-7.0.0.tgz",
|
||||||
|
"integrity": "sha512-jK3Et9UzwzTsd6tzl2RmwrVY/b8raJ3QZLzoDACj+oTJ0oX7L9Hy+XnVwgo4QVKlKpnP/Ur13SXV/pVh4LzaDw=="
|
||||||
|
},
|
||||||
|
"node_modules/primereact": {
|
||||||
|
"version": "10.8.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/primereact/-/primereact-10.8.2.tgz",
|
||||||
|
"integrity": "sha512-bf7vktogGh0PmKT9WLDcJQoQNqqFqcAlP2crUqccnlTu63FNnQV82qEYyaFvE12Qd5qhm3EYmpsHjpf6/+olTQ==",
|
||||||
|
"dependencies": {
|
||||||
|
"@types/react-transition-group": "^4.4.1",
|
||||||
|
"react-transition-group": "^4.4.1"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=14.0.0"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
|
||||||
|
"react": "^17.0.0 || ^18.0.0 || ^19.0.0",
|
||||||
|
"react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||||
|
},
|
||||||
|
"peerDependenciesMeta": {
|
||||||
|
"@types/react": {
|
||||||
|
"optional": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/process-nextick-args": {
|
"node_modules/process-nextick-args": {
|
||||||
"version": "2.0.1",
|
"version": "2.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
|
||||||
@@ -15193,6 +15240,43 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/react-scripts/node_modules/sass-loader": {
|
||||||
|
"version": "12.6.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz",
|
||||||
|
"integrity": "sha512-oLTaH0YCtX4cfnJZxKSLAyglED0naiYfNG1iXfU5w1LNZ+ukoA5DtyDIN5zmKVZwYNJP4KRc5Y3hkWga+7tYfA==",
|
||||||
|
"dependencies": {
|
||||||
|
"klona": "^2.0.4",
|
||||||
|
"neo-async": "^2.6.2"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 12.13.0"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/webpack"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"fibers": ">= 3.1.0",
|
||||||
|
"node-sass": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0",
|
||||||
|
"sass": "^1.3.0",
|
||||||
|
"sass-embedded": "*",
|
||||||
|
"webpack": "^5.0.0"
|
||||||
|
},
|
||||||
|
"peerDependenciesMeta": {
|
||||||
|
"fibers": {
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
|
"node-sass": {
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
|
"sass": {
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
|
"sass-embedded": {
|
||||||
|
"optional": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/react-scripts/node_modules/semver": {
|
"node_modules/react-scripts/node_modules/semver": {
|
||||||
"version": "7.6.3",
|
"version": "7.6.3",
|
||||||
"resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
|
"resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
|
||||||
@@ -15227,6 +15311,21 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/react-transition-group": {
|
||||||
|
"version": "4.4.5",
|
||||||
|
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
|
||||||
|
"integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
|
||||||
|
"dependencies": {
|
||||||
|
"@babel/runtime": "^7.5.5",
|
||||||
|
"dom-helpers": "^5.0.1",
|
||||||
|
"loose-envify": "^1.4.0",
|
||||||
|
"prop-types": "^15.6.2"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": ">=16.6.0",
|
||||||
|
"react-dom": ">=16.6.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/read-cache": {
|
"node_modules/read-cache": {
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
|
||||||
@@ -15806,29 +15905,29 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/sass-loader": {
|
"node_modules/sass-loader": {
|
||||||
"version": "12.6.0",
|
"version": "16.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz",
|
"resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-16.0.0.tgz",
|
||||||
"integrity": "sha512-oLTaH0YCtX4cfnJZxKSLAyglED0naiYfNG1iXfU5w1LNZ+ukoA5DtyDIN5zmKVZwYNJP4KRc5Y3hkWga+7tYfA==",
|
"integrity": "sha512-n13Z+3rU9A177dk4888czcVFiC8CL9dii4qpXWUg3YIIgZEvi9TCFKjOQcbK0kJM7DJu9VucrZFddvNfYCPwtw==",
|
||||||
|
"dev": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"klona": "^2.0.4",
|
|
||||||
"neo-async": "^2.6.2"
|
"neo-async": "^2.6.2"
|
||||||
},
|
},
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">= 12.13.0"
|
"node": ">= 18.12.0"
|
||||||
},
|
},
|
||||||
"funding": {
|
"funding": {
|
||||||
"type": "opencollective",
|
"type": "opencollective",
|
||||||
"url": "https://opencollective.com/webpack"
|
"url": "https://opencollective.com/webpack"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"fibers": ">= 3.1.0",
|
"@rspack/core": "0.x || 1.x",
|
||||||
"node-sass": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0",
|
"node-sass": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0",
|
||||||
"sass": "^1.3.0",
|
"sass": "^1.3.0",
|
||||||
"sass-embedded": "*",
|
"sass-embedded": "*",
|
||||||
"webpack": "^5.0.0"
|
"webpack": "^5.0.0"
|
||||||
},
|
},
|
||||||
"peerDependenciesMeta": {
|
"peerDependenciesMeta": {
|
||||||
"fibers": {
|
"@rspack/core": {
|
||||||
"optional": true
|
"optional": true
|
||||||
},
|
},
|
||||||
"node-sass": {
|
"node-sass": {
|
||||||
@@ -15839,6 +15938,9 @@
|
|||||||
},
|
},
|
||||||
"sass-embedded": {
|
"sass-embedded": {
|
||||||
"optional": true
|
"optional": true
|
||||||
|
},
|
||||||
|
"webpack": {
|
||||||
|
"optional": true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|||||||
14
package.json
14
package.json
@@ -14,6 +14,8 @@
|
|||||||
"jwt-decode": "4.0.0",
|
"jwt-decode": "4.0.0",
|
||||||
"klona": "2.0.6",
|
"klona": "2.0.6",
|
||||||
"luxon": "3.5.0",
|
"luxon": "3.5.0",
|
||||||
|
"primeicons": "^7.0.0",
|
||||||
|
"primereact": "^10.8.2",
|
||||||
"ramda": "0.30.1",
|
"ramda": "0.30.1",
|
||||||
"react": "18.3.1",
|
"react": "18.3.1",
|
||||||
"react-dom": "18.3.1",
|
"react-dom": "18.3.1",
|
||||||
@@ -26,10 +28,11 @@
|
|||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@babel/cli": "7.24.8",
|
"@babel/cli": "7.24.8",
|
||||||
"@babel/core": "7.25.2",
|
"@babel/core": "7.25.2",
|
||||||
"@babel/plugin-syntax-jsx": "^7.24.7",
|
"@babel/plugin-syntax-jsx": "7.24.7",
|
||||||
"@wordpress/babel-plugin-makepot": "^6.5.0",
|
"@wordpress/babel-plugin-makepot": "6.5.0",
|
||||||
"babel-plugin-macros": "3.1.0",
|
"babel-plugin-macros": "3.1.0",
|
||||||
"sass": "1.77.8"
|
"sass": "1.77.8",
|
||||||
|
"sass-loader": "16.0.0"
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "GENERATE_SOURCEMAP=false react-scripts start",
|
"start": "GENERATE_SOURCEMAP=false react-scripts start",
|
||||||
@@ -37,12 +40,9 @@
|
|||||||
"start:prod": "cp environments/prod/* public/loaded-files && rm public/loaded-files/prod.env && cp environments/prod/prod.env .env && react-scripts start",
|
"start:prod": "cp environments/prod/* public/loaded-files && rm public/loaded-files/prod.env && cp environments/prod/prod.env .env && react-scripts start",
|
||||||
"build": "react-scripts build",
|
"build": "react-scripts build",
|
||||||
"build:dev": "cp environments/dev/* public/loaded-files && rm public/loaded-files/dev.env && cp environments/dev/dev.env .env && react-scripts build",
|
"build:dev": "cp environments/dev/* public/loaded-files && rm public/loaded-files/dev.env && cp environments/dev/dev.env .env && react-scripts build",
|
||||||
"build:staging": "cp environments/staging/* public/loaded-files && rm public/loaded-files/staging.env && cp environments/staging/staging.env .env && react-scripts build",
|
|
||||||
"build:prod": "cp environments/prod/* public/loaded-files && rm public/loaded-files/prod.env && cp environments/prod/prod.env .env && react-scripts build",
|
"build:prod": "cp environments/prod/* public/loaded-files && rm public/loaded-files/prod.env && cp environments/prod/prod.env .env && react-scripts build",
|
||||||
"test": "react-scripts test",
|
"test": "react-scripts test",
|
||||||
"eject": "react-scripts eject",
|
"eject": "react-scripts eject"
|
||||||
"extract": "lingui extract",
|
|
||||||
"compile": "lingui compile"
|
|
||||||
},
|
},
|
||||||
"eslintConfig": {
|
"eslintConfig": {
|
||||||
"extends": [
|
"extends": [
|
||||||
|
|||||||
@@ -3,6 +3,7 @@ import { BrowserRouter } from 'react-router-dom';
|
|||||||
import Routes from './routes';
|
import Routes from './routes';
|
||||||
import { createI18n, setLocaleData } from '@wordpress/i18n';
|
import { createI18n, setLocaleData } from '@wordpress/i18n';
|
||||||
import { I18nProvider } from '@wordpress/react-i18n';
|
import { I18nProvider } from '@wordpress/react-i18n';
|
||||||
|
import './assets/scss/theme.scss';
|
||||||
|
|
||||||
const i18n = createI18n({}, 'gepafin');
|
const i18n = createI18n({}, 'gepafin');
|
||||||
|
|
||||||
|
|||||||
22
src/assets/scss/components/appPage.css
Normal file
22
src/assets/scss/components/appPage.css
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
.appPage {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
color: var(--primary-color);
|
||||||
|
font-size: 28px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: normal;
|
||||||
|
margin: 28px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
color: var(--Black);
|
||||||
|
font-size: 21px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: normal;
|
||||||
|
margin: 24px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
47
src/assets/scss/components/statsBigBadges.css
Normal file
47
src/assets/scss/components/statsBigBadges.css
Normal file
@@ -0,0 +1,47 @@
|
|||||||
|
.statsBigBadges {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 24px 0;
|
||||||
|
}
|
||||||
|
.statsBigBadges__grid {
|
||||||
|
display: grid;
|
||||||
|
align-items: center;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(460px, 1fr));
|
||||||
|
gap: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.statsBigBadges__gridItem {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 28px;
|
||||||
|
border-radius: 6px;
|
||||||
|
border: 1px solid var(--yellow-500);
|
||||||
|
background: var(--card-full-background-color-2);
|
||||||
|
align-items: center;
|
||||||
|
gap: 48px;
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: #FFF;
|
||||||
|
font-size: 21px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
span:nth-last-of-type(1) {
|
||||||
|
font-size: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-of-type(2) {
|
||||||
|
border: 1px solid var(--yellow-500);
|
||||||
|
background: var(--card-full-background-color-3);
|
||||||
|
}
|
||||||
|
&:nth-of-type(3) {
|
||||||
|
border: 1px solid var(--yellow-500);
|
||||||
|
background: var(--card-full-background-color-4);
|
||||||
|
}
|
||||||
|
&:nth-of-type(4) {
|
||||||
|
border: 1px solid var(--yellow-500);
|
||||||
|
background: var(--card-full-background-color-1);
|
||||||
|
}
|
||||||
|
}
|
||||||
49
src/assets/scss/components/topBar.css
Normal file
49
src/assets/scss/components/topBar.css
Normal file
@@ -0,0 +1,49 @@
|
|||||||
|
.topBar {
|
||||||
|
background: var(--horizontalMenu-background)
|
||||||
|
}
|
||||||
|
.topBar__endContent {
|
||||||
|
display: flex;
|
||||||
|
gap: 24px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.topBar__profileBtn {
|
||||||
|
display: flex;
|
||||||
|
gap: 14px;
|
||||||
|
}
|
||||||
|
.topBar__icon {
|
||||||
|
font-size: 1.3rem;
|
||||||
|
color: var(--text-color-secondary)
|
||||||
|
}
|
||||||
|
.topBar__menuProfileItem {
|
||||||
|
display: flex;
|
||||||
|
gap: 7px;
|
||||||
|
padding: 0.75rem 1rem;
|
||||||
|
|
||||||
|
.p-avatar {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.userInfo {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 4px;
|
||||||
|
width: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.userName {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.topBar__menuProfile {
|
||||||
|
.p-menu-separator {
|
||||||
|
border-color: var(--menu-borderColor);
|
||||||
|
}
|
||||||
|
}
|
||||||
1
src/assets/scss/gepafin/_extensions.scss
Normal file
1
src/assets/scss/gepafin/_extensions.scss
Normal file
@@ -0,0 +1 @@
|
|||||||
|
/* Customizations to the designer theme should be defined here */
|
||||||
0
src/assets/scss/gepafin/_fonts.scss
Normal file
0
src/assets/scss/gepafin/_fonts.scss
Normal file
87
src/assets/scss/gepafin/_variables.scss
Normal file
87
src/assets/scss/gepafin/_variables.scss
Normal file
@@ -0,0 +1,87 @@
|
|||||||
|
$primaryColor: #4A644E;
|
||||||
|
$primaryDarkColor: #4A644E;
|
||||||
|
$primaryDarkerColor: #4A644E;
|
||||||
|
$primaryTextColor: #ffffff;
|
||||||
|
|
||||||
|
$chipBg: $primaryColor;
|
||||||
|
$chipTextColor: $primaryTextColor;
|
||||||
|
$chipBorderRadius: 16px !default;
|
||||||
|
$chipFocusBg: $primaryColor;
|
||||||
|
$chipFocusTextColor: $primaryTextColor;
|
||||||
|
|
||||||
|
$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
|
||||||
|
);
|
||||||
|
|
||||||
|
|
||||||
|
@import './variables/_general.scss';
|
||||||
|
@import './variables/_form.scss';
|
||||||
|
@import './variables/_button.scss';
|
||||||
|
@import './variables/_panel.scss';
|
||||||
|
@import './variables/_data.scss';
|
||||||
|
@import './variables/_overlay.scss';
|
||||||
|
@import './variables/_message.scss';
|
||||||
|
@import './variables/_menu.scss';
|
||||||
|
@import './variables/_media.scss';
|
||||||
|
@import './variables/_misc.scss';
|
||||||
|
|
||||||
|
: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:#ffffff;
|
||||||
|
--surface-b:#f8f9fa;
|
||||||
|
--surface-c:#e9ecef;
|
||||||
|
--surface-d:#dee2e6;
|
||||||
|
--surface-e:#ffffff;
|
||||||
|
--surface-f:#ffffff;
|
||||||
|
--text-color:#4B5563;
|
||||||
|
--text-color-secondary:#6B7280;
|
||||||
|
--primary-color:#4A644E;
|
||||||
|
--primary-color-text:#ffffff;
|
||||||
|
--surface-0: #ffffff;
|
||||||
|
--surface-50: #FAFAFA;
|
||||||
|
--surface-100: #F5F5F5;
|
||||||
|
--surface-200: #EEEEEE;
|
||||||
|
--surface-300: #E0E0E0;
|
||||||
|
--surface-400: #BDBDBD;
|
||||||
|
--surface-500: #9E9E9E;
|
||||||
|
--surface-600: #757575;
|
||||||
|
--surface-700: #616161;
|
||||||
|
--surface-800: #424242;
|
||||||
|
--surface-900: #212121;
|
||||||
|
--gray-50: #FAFAFA;
|
||||||
|
--gray-100: #F5F5F5;
|
||||||
|
--gray-200: #EEEEEE;
|
||||||
|
--gray-300: #E0E0E0;
|
||||||
|
--gray-400: #BDBDBD;
|
||||||
|
--gray-500: #9E9E9E;
|
||||||
|
--gray-600: #757575;
|
||||||
|
--gray-700: #616161;
|
||||||
|
--gray-800: #424242;
|
||||||
|
--gray-900: #212121;
|
||||||
|
--content-padding:#{$panelContentPadding};
|
||||||
|
--inline-spacing:#{$inlineSpacing};
|
||||||
|
--border-radius:#{$borderRadius};
|
||||||
|
--surface-ground:#EFF3F8;
|
||||||
|
--surface-section:#ffffff;
|
||||||
|
--surface-card:#ffffff;
|
||||||
|
--surface-overlay:#ffffff;
|
||||||
|
--surface-border:#DFE7EF;
|
||||||
|
--surface-hover:#F6F9FC;
|
||||||
|
--focus-ring: #{$focusShadow};
|
||||||
|
--maskbg: #{$maskBg};
|
||||||
|
--highlight-bg: #{$highlightBg};
|
||||||
|
--highlight-text-color: #{$highlightTextColor};
|
||||||
|
color-scheme: light;
|
||||||
|
}
|
||||||
4
src/assets/scss/gepafin/gepafin-theme.scss
Normal file
4
src/assets/scss/gepafin/gepafin-theme.scss
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
@import './_variables.scss';
|
||||||
|
@import './_fonts.scss';
|
||||||
|
@import '../theme-base/_components.scss';
|
||||||
|
@import './_extensions.scss';
|
||||||
1
src/assets/scss/gepafin/sassdoc/assets/css/main.css
Normal file
1
src/assets/scss/gepafin/sassdoc/assets/css/main.css
Normal file
File diff suppressed because one or more lines are too long
BIN
src/assets/scss/gepafin/sassdoc/assets/images/favicon.png
Normal file
BIN
src/assets/scss/gepafin/sassdoc/assets/images/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 7.3 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 7.4 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 7.2 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 7.2 KiB |
56
src/assets/scss/gepafin/sassdoc/assets/js/main.js
Normal file
56
src/assets/scss/gepafin/sassdoc/assets/js/main.js
Normal file
@@ -0,0 +1,56 @@
|
|||||||
|
/* global document */
|
||||||
|
|
||||||
|
(function ($, global) {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
// Constructor
|
||||||
|
var App = function (conf) {
|
||||||
|
this.conf = $.extend({
|
||||||
|
// Search module
|
||||||
|
search: new global.Search(),
|
||||||
|
|
||||||
|
// Sidebar module
|
||||||
|
sidebar: new global.Sidebar(),
|
||||||
|
|
||||||
|
// Initialisation
|
||||||
|
init: true
|
||||||
|
}, conf || {});
|
||||||
|
|
||||||
|
// Launch the module
|
||||||
|
if (this.conf.init !== false) {
|
||||||
|
this.initialize();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Initialisation method
|
||||||
|
App.prototype.initialize = function () {
|
||||||
|
this.codePreview();
|
||||||
|
};
|
||||||
|
|
||||||
|
// Toggle code preview collapsed/expanded modes
|
||||||
|
App.prototype.codePreview = function () {
|
||||||
|
var $item;
|
||||||
|
var $code;
|
||||||
|
var switchTo;
|
||||||
|
|
||||||
|
$('.item__code--togglable').on('click', function () {
|
||||||
|
$item = $(this);
|
||||||
|
$code = $item.find('code');
|
||||||
|
switchTo = $item.attr('data-current-state') === 'expanded' ? 'collapsed' : 'expanded';
|
||||||
|
|
||||||
|
$item.attr('data-current-state', switchTo);
|
||||||
|
$code.html($item.attr('data-' + switchTo));
|
||||||
|
Prism.highlightElement($code[0]);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
global.App = App;
|
||||||
|
}(window.jQuery, window));
|
||||||
|
|
||||||
|
(function ($, global) {
|
||||||
|
|
||||||
|
$(document).ready(function () {
|
||||||
|
var app = new global.App();
|
||||||
|
});
|
||||||
|
|
||||||
|
}(window.jQuery, window));
|
||||||
1
src/assets/scss/gepafin/sassdoc/assets/js/main.min.js
vendored
Normal file
1
src/assets/scss/gepafin/sassdoc/assets/js/main.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
146
src/assets/scss/gepafin/sassdoc/assets/js/search.js
Normal file
146
src/assets/scss/gepafin/sassdoc/assets/js/search.js
Normal file
@@ -0,0 +1,146 @@
|
|||||||
|
(function ($, global) {
|
||||||
|
|
||||||
|
var Search = function (conf) {
|
||||||
|
this.conf = $.extend({
|
||||||
|
// Search DOM
|
||||||
|
search: {
|
||||||
|
items: '.sassdoc__item',
|
||||||
|
input: '#js-search-input',
|
||||||
|
form: '#js-search',
|
||||||
|
suggestionsWrapper: '#js-search-suggestions'
|
||||||
|
},
|
||||||
|
|
||||||
|
// Fuse options
|
||||||
|
fuse: {
|
||||||
|
keys: ['name'],
|
||||||
|
threshold: 0.3
|
||||||
|
},
|
||||||
|
|
||||||
|
init: true
|
||||||
|
}, conf || {});
|
||||||
|
|
||||||
|
if (this.conf.init === true) {
|
||||||
|
this.initialize();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
Search.prototype.initialize = function () {
|
||||||
|
// Fuse engine instanciation
|
||||||
|
this.index = new Fuse($.map($(this.conf.search.items), function (item) {
|
||||||
|
var $item = $(item);
|
||||||
|
|
||||||
|
return {
|
||||||
|
group: $item.data('group'),
|
||||||
|
name: $item.data('name'),
|
||||||
|
type: $item.data('type'),
|
||||||
|
node: $item
|
||||||
|
};
|
||||||
|
}), this.conf.fuse);
|
||||||
|
|
||||||
|
this.initializeSearch();
|
||||||
|
};
|
||||||
|
|
||||||
|
// Fill DOM with search suggestions
|
||||||
|
Search.prototype.fillSuggestions = function (items) {
|
||||||
|
var searchSuggestions = $(this.conf.search.suggestionsWrapper);
|
||||||
|
searchSuggestions.html('');
|
||||||
|
|
||||||
|
var suggestions = $.map(items.slice(0, 10), function (item) {
|
||||||
|
var $li = $('<li />', {
|
||||||
|
'data-group': item.group,
|
||||||
|
'data-type': item.type,
|
||||||
|
'data-name': item.name,
|
||||||
|
'html': '<a href="#' + item.group + '-' + item.type + '-' + item.name + '"><code>' + item.type.slice(0, 3) + '</code> ' + item.name + '</a>'
|
||||||
|
});
|
||||||
|
|
||||||
|
searchSuggestions.append($li);
|
||||||
|
return $li;
|
||||||
|
});
|
||||||
|
|
||||||
|
return suggestions;
|
||||||
|
};
|
||||||
|
|
||||||
|
// Perform a search on a given term
|
||||||
|
Search.prototype.search = function (term) {
|
||||||
|
return this.fillSuggestions(this.index.search(term));
|
||||||
|
};
|
||||||
|
|
||||||
|
// Search logic
|
||||||
|
Search.prototype.initializeSearch = function () {
|
||||||
|
var searchForm = $(this.conf.search.form);
|
||||||
|
var searchInput = $(this.conf.search.input);
|
||||||
|
var searchSuggestions = $(this.conf.search.suggestionsWrapper);
|
||||||
|
|
||||||
|
var currentSelection = -1;
|
||||||
|
var suggestions = [];
|
||||||
|
var selected;
|
||||||
|
|
||||||
|
var self = this;
|
||||||
|
|
||||||
|
// Clicking on a suggestion
|
||||||
|
searchSuggestions.on('click', function (e) {
|
||||||
|
var target = $(event.target);
|
||||||
|
|
||||||
|
if (target.nodeName === 'A') {
|
||||||
|
searchInput.val(target.parent().data('name'));
|
||||||
|
suggestions = self.fillSuggestions([]);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Filling the form
|
||||||
|
searchForm.on('keyup', function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
// Enter
|
||||||
|
if (e.keyCode === 13) {
|
||||||
|
if (selected) {
|
||||||
|
suggestions = self.fillSuggestions([]);
|
||||||
|
searchInput.val(selected.data('name'));
|
||||||
|
window.location = selected.children().first().attr('href');
|
||||||
|
}
|
||||||
|
|
||||||
|
e.stopPropagation();
|
||||||
|
}
|
||||||
|
|
||||||
|
// KeyDown
|
||||||
|
if (e.keyCode === 40) {
|
||||||
|
currentSelection = (currentSelection + 1) % suggestions.length;
|
||||||
|
}
|
||||||
|
|
||||||
|
// KeyUp
|
||||||
|
if (e.keyCode === 38) {
|
||||||
|
currentSelection = currentSelection - 1;
|
||||||
|
|
||||||
|
if (currentSelection < 0) {
|
||||||
|
currentSelection = suggestions.length - 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (suggestions[currentSelection]) {
|
||||||
|
if (selected) {
|
||||||
|
selected.removeClass('selected');
|
||||||
|
}
|
||||||
|
|
||||||
|
selected = suggestions[currentSelection];
|
||||||
|
selected.addClass('selected');
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
searchInput.on('keyup', function (e) {
|
||||||
|
if (e.keyCode !== 40 && e.keyCode !== 38) {
|
||||||
|
currentSelection = -1;
|
||||||
|
suggestions = self.search($(this).val());
|
||||||
|
}
|
||||||
|
|
||||||
|
else {
|
||||||
|
e.preventDefault();
|
||||||
|
}
|
||||||
|
}).on('search', function () {
|
||||||
|
suggestions = self.search($(this).val());
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
global.Search = Search;
|
||||||
|
|
||||||
|
}(window.jQuery, window));
|
||||||
163
src/assets/scss/gepafin/sassdoc/assets/js/sidebar.js
Normal file
163
src/assets/scss/gepafin/sassdoc/assets/js/sidebar.js
Normal file
@@ -0,0 +1,163 @@
|
|||||||
|
(function ($, global) {
|
||||||
|
|
||||||
|
var Sidebar = function (conf) {
|
||||||
|
this.conf = $.extend({
|
||||||
|
|
||||||
|
// Collapsed class
|
||||||
|
collapsedClass: 'is-collapsed',
|
||||||
|
|
||||||
|
// Storage key
|
||||||
|
storageKey: '_sassdoc_sidebar_index',
|
||||||
|
|
||||||
|
// Index attribute
|
||||||
|
indexAttribute: 'data-slug',
|
||||||
|
|
||||||
|
// Toggle button
|
||||||
|
toggleBtn: '.js-btn-toggle',
|
||||||
|
|
||||||
|
// Automatic initialization
|
||||||
|
init: true
|
||||||
|
}, conf || {});
|
||||||
|
|
||||||
|
if (this.conf.init === true) {
|
||||||
|
this.initialize();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Initialize module
|
||||||
|
*/
|
||||||
|
Sidebar.prototype.initialize = function () {
|
||||||
|
this.conf.nodes = $('[' + this.conf.indexAttribute + ']');
|
||||||
|
|
||||||
|
this.load();
|
||||||
|
this.updateDOM();
|
||||||
|
this.bind();
|
||||||
|
this.loadToggle();
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Load sidebar toggle
|
||||||
|
*/
|
||||||
|
Sidebar.prototype.loadToggle = function () {
|
||||||
|
$('<span />', {
|
||||||
|
'class': 'layout-toggle',
|
||||||
|
'html': '×',
|
||||||
|
'data-alt': '→'
|
||||||
|
}).appendTo( $('.header') );
|
||||||
|
|
||||||
|
$('.layout-toggle').on('click', function () {
|
||||||
|
var $this = $(this);
|
||||||
|
var alt;
|
||||||
|
|
||||||
|
$('body').toggleClass('sidebar-closed');
|
||||||
|
|
||||||
|
alt = $this.html();
|
||||||
|
$this.html($this.data('alt'));
|
||||||
|
$this.data('alt', alt);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Load data from storage or create fresh index
|
||||||
|
*/
|
||||||
|
Sidebar.prototype.load = function () {
|
||||||
|
var index = 'localStorage' in global ?
|
||||||
|
global.localStorage.getItem(this.conf.storageKey) :
|
||||||
|
null;
|
||||||
|
|
||||||
|
this.index = index ? JSON.parse(index) : this.buildIndex();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Build a fresh index
|
||||||
|
*/
|
||||||
|
Sidebar.prototype.buildIndex = function () {
|
||||||
|
var index = {};
|
||||||
|
var $item;
|
||||||
|
|
||||||
|
this.conf.nodes.each($.proxy(function (index, item) {
|
||||||
|
$item = $(item);
|
||||||
|
|
||||||
|
index[$item.attr(this.conf.indexAttribute)] = !$item.hasClass(this.conf.collapsedClass);
|
||||||
|
}, this));
|
||||||
|
|
||||||
|
return index;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Update DOM based on index
|
||||||
|
*/
|
||||||
|
Sidebar.prototype.updateDOM = function () {
|
||||||
|
var item;
|
||||||
|
|
||||||
|
for (item in this.index) {
|
||||||
|
if (this.index[item] === false) {
|
||||||
|
$('[' + this.conf.indexAttribute + '="' + item + '"]').addClass(this.conf.collapsedClass);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Save index in storage
|
||||||
|
*/
|
||||||
|
Sidebar.prototype.save = function () {
|
||||||
|
if (!('localStorage' in global)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
global.localStorage.setItem(this.conf.storageKey, JSON.stringify(this.index));
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Bind UI events
|
||||||
|
*/
|
||||||
|
Sidebar.prototype.bind = function () {
|
||||||
|
var $item, slug, fn, text;
|
||||||
|
var collapsed = false;
|
||||||
|
|
||||||
|
// Save index in localStorage
|
||||||
|
global.onbeforeunload = $.proxy(function () {
|
||||||
|
this.save();
|
||||||
|
}, this);
|
||||||
|
|
||||||
|
// Toggle all
|
||||||
|
$(this.conf.toggleBtn).on('click', $.proxy(function (event) {
|
||||||
|
$node = $(event.target);
|
||||||
|
|
||||||
|
text = $node.attr('data-alt');
|
||||||
|
$node.attr('data-alt', $node.text());
|
||||||
|
$node.text(text);
|
||||||
|
|
||||||
|
fn = collapsed === true ? 'removeClass' : 'addClass';
|
||||||
|
|
||||||
|
this.conf.nodes.each($.proxy(function (index, item) {
|
||||||
|
$item = $(item);
|
||||||
|
slug = $item.attr(this.conf.indexAttribute);
|
||||||
|
|
||||||
|
this.index[slug] = collapsed;
|
||||||
|
|
||||||
|
$('[' + this.conf.indexAttribute + '="' + slug + '"]')[fn](this.conf.collapsedClass);
|
||||||
|
}, this));
|
||||||
|
|
||||||
|
collapsed = !collapsed;
|
||||||
|
this.save();
|
||||||
|
}, this));
|
||||||
|
|
||||||
|
// Toggle item
|
||||||
|
this.conf.nodes.on('click', $.proxy(function (event) {
|
||||||
|
$item = $(event.target);
|
||||||
|
slug = $item.attr(this.conf.indexAttribute);
|
||||||
|
|
||||||
|
// Update index
|
||||||
|
this.index[slug] = !this.index[slug];
|
||||||
|
|
||||||
|
// Update DOM
|
||||||
|
$item.toggleClass(this.conf.collapsedClass);
|
||||||
|
}, this));
|
||||||
|
};
|
||||||
|
|
||||||
|
global.Sidebar = Sidebar;
|
||||||
|
|
||||||
|
}(window.jQuery, window));
|
||||||
20
src/assets/scss/gepafin/sassdoc/assets/js/vendor/fuse.min.js
vendored
Normal file
20
src/assets/scss/gepafin/sassdoc/assets/js/vendor/fuse.min.js
vendored
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
/**
|
||||||
|
* @license
|
||||||
|
* Fuse - Lightweight fuzzy-search
|
||||||
|
*
|
||||||
|
* Copyright (c) 2012 Kirollos Risk <kirollos@gmail.com>.
|
||||||
|
* All Rights Reserved. Apache Software License 2.0
|
||||||
|
*
|
||||||
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
|
* you may not use this file except in compliance with the License.
|
||||||
|
* You may obtain a copy of the License at
|
||||||
|
*
|
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
*
|
||||||
|
* Unless required by applicable law or agreed to in writing, software
|
||||||
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
* See the License for the specific language governing permissions and
|
||||||
|
* limitations under the License.
|
||||||
|
*/
|
||||||
|
!function(t){function e(t,n){this.list=t,this.options=n=n||{};var i,o,s;for(i=0,keys=["sort","includeScore","shouldSort"],o=keys.length;o>i;i++)s=keys[i],this.options[s]=s in n?n[s]:e.defaultOptions[s];for(i=0,keys=["searchFn","sortFn","keys","getFn"],o=keys.length;o>i;i++)s=keys[i],this.options[s]=n[s]||e.defaultOptions[s]}var n=function(t,e){if(e=e||{},this.options=e,this.options.location=e.location||n.defaultOptions.location,this.options.distance="distance"in e?e.distance:n.defaultOptions.distance,this.options.threshold="threshold"in e?e.threshold:n.defaultOptions.threshold,this.options.maxPatternLength=e.maxPatternLength||n.defaultOptions.maxPatternLength,this.pattern=e.caseSensitive?t:t.toLowerCase(),this.patternLen=t.length,this.patternLen>this.options.maxPatternLength)throw new Error("Pattern length is too long");this.matchmask=1<<this.patternLen-1,this.patternAlphabet=this._calculatePatternAlphabet()};n.defaultOptions={location:0,distance:100,threshold:.6,maxPatternLength:32},n.prototype._calculatePatternAlphabet=function(){var t={},e=0;for(e=0;e<this.patternLen;e++)t[this.pattern.charAt(e)]=0;for(e=0;e<this.patternLen;e++)t[this.pattern.charAt(e)]|=1<<this.pattern.length-e-1;return t},n.prototype._bitapScore=function(t,e){var n=t/this.patternLen,i=Math.abs(this.options.location-e);return this.options.distance?n+i/this.options.distance:i?1:n},n.prototype.search=function(t){if(t=this.options.caseSensitive?t:t.toLowerCase(),this.pattern===t)return{isMatch:!0,score:0};var e,n,i,o,s,r,a,h,p,c=t.length,l=this.options.location,u=this.options.threshold,f=t.indexOf(this.pattern,l),d=this.patternLen+c,g=1,m=[];for(-1!=f&&(u=Math.min(this._bitapScore(0,f),u),f=t.lastIndexOf(this.pattern,l+this.patternLen),-1!=f&&(u=Math.min(this._bitapScore(0,f),u))),f=-1,e=0;e<this.patternLen;e++){for(i=0,o=d;o>i;)this._bitapScore(e,l+o)<=u?i=o:d=o,o=Math.floor((d-i)/2+i);for(d=o,s=Math.max(1,l-o+1),r=Math.min(l+o,c)+this.patternLen,a=Array(r+2),a[r+1]=(1<<e)-1,n=r;n>=s;n--)if(p=this.patternAlphabet[t.charAt(n-1)],a[n]=0===e?(a[n+1]<<1|1)&p:(a[n+1]<<1|1)&p|((h[n+1]|h[n])<<1|1)|h[n+1],a[n]&this.matchmask&&(g=this._bitapScore(e,n-1),u>=g)){if(u=g,f=n-1,m.push(f),!(f>l))break;s=Math.max(1,2*l-f)}if(this._bitapScore(e+1,l)>u)break;h=a}return{isMatch:f>=0,score:g}};var i={deepValue:function(t,e){for(var n=0,e=e.split("."),i=e.length;i>n;n++){if(!t)return null;t=t[e[n]]}return t}};e.defaultOptions={id:null,caseSensitive:!1,includeScore:!1,shouldSort:!0,searchFn:n,sortFn:function(t,e){return t.score-e.score},getFn:i.deepValue,keys:[]},e.prototype.search=function(t){var e,n,o,s,r,a=new this.options.searchFn(t,this.options),h=this.list,p=h.length,c=this.options,l=this.options.keys,u=l.length,f=[],d={},g=[],m=function(t,e,n){void 0!==t&&null!==t&&"string"==typeof t&&(s=a.search(t),s.isMatch&&(r=d[n],r?r.score=Math.min(r.score,s.score):(d[n]={item:e,score:s.score},f.push(d[n]))))};if("string"==typeof h[0])for(var e=0;p>e;e++)m(h[e],e,e);else for(var e=0;p>e;e++)for(o=h[e],n=0;u>n;n++)m(this.options.getFn(o,l[n]),o,e);c.shouldSort&&f.sort(c.sortFn);for(var y=c.includeScore?function(t){return f[t]}:function(t){return f[t].item},L=c.id?function(t){return i.deepValue(y(t),c.id)}:function(t){return y(t)},e=0,v=f.length;v>e;e++)g.push(L(e));return g},"object"==typeof exports?module.exports=e:"function"==typeof define&&define.amd?define(function(){return e}):t.Fuse=e}(this);
|
||||||
4
src/assets/scss/gepafin/sassdoc/assets/js/vendor/jquery.min.js
vendored
Normal file
4
src/assets/scss/gepafin/sassdoc/assets/js/vendor/jquery.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
9
src/assets/scss/gepafin/sassdoc/assets/js/vendor/prism.min.js
vendored
Normal file
9
src/assets/scss/gepafin/sassdoc/assets/js/vendor/prism.min.js
vendored
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
/* http://prismjs.com/download.html?themes=prism&languages=markup+css+css-extras+clike+javascript+scss */
|
||||||
|
var self=typeof window!="undefined"?window:{},Prism=function(){var e=/\blang(?:uage)?-(?!\*)(\w+)\b/i,t=self.Prism={util:{encode:function(e){return e instanceof n?new n(e.type,t.util.encode(e.content)):t.util.type(e)==="Array"?e.map(t.util.encode):e.replace(/&/g,"&").replace(/</g,"<").replace(/\u00a0/g," ")},type:function(e){return Object.prototype.toString.call(e).match(/\[object (\w+)\]/)[1]},clone:function(e){var n=t.util.type(e);switch(n){case"Object":var r={};for(var i in e)e.hasOwnProperty(i)&&(r[i]=t.util.clone(e[i]));return r;case"Array":return e.slice()}return e}},languages:{extend:function(e,n){var r=t.util.clone(t.languages[e]);for(var i in n)r[i]=n[i];return r},insertBefore:function(e,n,r,i){i=i||t.languages;var s=i[e],o={};for(var u in s)if(s.hasOwnProperty(u)){if(u==n)for(var a in r)r.hasOwnProperty(a)&&(o[a]=r[a]);o[u]=s[u]}return i[e]=o},DFS:function(e,n){for(var r in e){n.call(e,r,e[r]);t.util.type(e)==="Object"&&t.languages.DFS(e[r],n)}}},highlightAll:function(e,n){var r=document.querySelectorAll('code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code');for(var i=0,s;s=r[i++];)t.highlightElement(s,e===!0,n)},highlightElement:function(r,i,s){var o,u,a=r;while(a&&!e.test(a.className))a=a.parentNode;if(a){o=(a.className.match(e)||[,""])[1];u=t.languages[o]}if(!u)return;r.className=r.className.replace(e,"").replace(/\s+/g," ")+" language-"+o;a=r.parentNode;/pre/i.test(a.nodeName)&&(a.className=a.className.replace(e,"").replace(/\s+/g," ")+" language-"+o);var f=r.textContent;if(!f)return;var l={element:r,language:o,grammar:u,code:f};t.hooks.run("before-highlight",l);if(i&&self.Worker){var c=new Worker(t.filename);c.onmessage=function(e){l.highlightedCode=n.stringify(JSON.parse(e.data),o);t.hooks.run("before-insert",l);l.element.innerHTML=l.highlightedCode;s&&s.call(l.element);t.hooks.run("after-highlight",l)};c.postMessage(JSON.stringify({language:l.language,code:l.code}))}else{l.highlightedCode=t.highlight(l.code,l.grammar,l.language);t.hooks.run("before-insert",l);l.element.innerHTML=l.highlightedCode;s&&s.call(r);t.hooks.run("after-highlight",l)}},highlight:function(e,r,i){var s=t.tokenize(e,r);return n.stringify(t.util.encode(s),i)},tokenize:function(e,n,r){var i=t.Token,s=[e],o=n.rest;if(o){for(var u in o)n[u]=o[u];delete n.rest}e:for(var u in n){if(!n.hasOwnProperty(u)||!n[u])continue;var a=n[u],f=a.inside,l=!!a.lookbehind,c=0;a=a.pattern||a;for(var h=0;h<s.length;h++){var p=s[h];if(s.length>e.length)break e;if(p instanceof i)continue;a.lastIndex=0;var d=a.exec(p);if(d){l&&(c=d[1].length);var v=d.index-1+c,d=d[0].slice(c),m=d.length,g=v+m,y=p.slice(0,v+1),b=p.slice(g+1),w=[h,1];y&&w.push(y);var E=new i(u,f?t.tokenize(d,f):d);w.push(E);b&&w.push(b);Array.prototype.splice.apply(s,w)}}}return s},hooks:{all:{},add:function(e,n){var r=t.hooks.all;r[e]=r[e]||[];r[e].push(n)},run:function(e,n){var r=t.hooks.all[e];if(!r||!r.length)return;for(var i=0,s;s=r[i++];)s(n)}}},n=t.Token=function(e,t){this.type=e;this.content=t};n.stringify=function(e,r,i){if(typeof e=="string")return e;if(Object.prototype.toString.call(e)=="[object Array]")return e.map(function(t){return n.stringify(t,r,e)}).join("");var s={type:e.type,content:n.stringify(e.content,r,i),tag:"span",classes:["token",e.type],attributes:{},language:r,parent:i};s.type=="comment"&&(s.attributes.spellcheck="true");t.hooks.run("wrap",s);var o="";for(var u in s.attributes)o+=u+'="'+(s.attributes[u]||"")+'"';return"<"+s.tag+' class="'+s.classes.join(" ")+'" '+o+">"+s.content+"</"+s.tag+">"};if(!self.document){if(!self.addEventListener)return self.Prism;self.addEventListener("message",function(e){var n=JSON.parse(e.data),r=n.language,i=n.code;self.postMessage(JSON.stringify(t.tokenize(i,t.languages[r])));self.close()},!1);return self.Prism}var r=document.getElementsByTagName("script");r=r[r.length-1];if(r){t.filename=r.src;document.addEventListener&&!r.hasAttribute("data-manual")&&document.addEventListener("DOMContentLoaded",t.highlightAll)}return self.Prism}();typeof module!="undefined"&&module.exports&&(module.exports=Prism);;
|
||||||
|
Prism.languages.markup={comment:/<!--[\w\W]*?-->/g,prolog:/<\?.+?\?>/,doctype:/<!DOCTYPE.+?>/,cdata:/<!\[CDATA\[[\w\W]*?]]>/i,tag:{pattern:/<\/?[\w:-]+\s*(?:\s+[\w:-]+(?:=(?:("|')(\\?[\w\W])*?\1|[^\s'">=]+))?\s*)*\/?>/gi,inside:{tag:{pattern:/^<\/?[\w:-]+/i,inside:{punctuation:/^<\/?/,namespace:/^[\w-]+?:/}},"attr-value":{pattern:/=(?:('|")[\w\W]*?(\1)|[^\s>]+)/gi,inside:{punctuation:/=|>|"/g}},punctuation:/\/?>/g,"attr-name":{pattern:/[\w:-]+/g,inside:{namespace:/^[\w-]+?:/}}}},entity:/\&#?[\da-z]{1,8};/gi};Prism.hooks.add("wrap",function(e){e.type==="entity"&&(e.attributes.title=e.content.replace(/&/,"&"))});;
|
||||||
|
Prism.languages.css={comment:/\/\*[\w\W]*?\*\//g,atrule:{pattern:/@[\w-]+?.*?(;|(?=\s*{))/gi,inside:{punctuation:/[;:]/g}},url:/url\((["']?).*?\1\)/gi,selector:/[^\{\}\s][^\{\};]*(?=\s*\{)/g,property:/(\b|\B)[\w-]+(?=\s*:)/ig,string:/("|')(\\?.)*?\1/g,important:/\B!important\b/gi,punctuation:/[\{\};:]/g,"function":/[-a-z0-9]+(?=\()/ig};Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{style:{pattern:/<style[\w\W]*?>[\w\W]*?<\/style>/ig,inside:{tag:{pattern:/<style[\w\W]*?>|<\/style>/ig,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.css}}});;
|
||||||
|
Prism.languages.css.selector={pattern:/[^\{\}\s][^\{\}]*(?=\s*\{)/g,inside:{"pseudo-element":/:(?:after|before|first-letter|first-line|selection)|::[-\w]+/g,"pseudo-class":/:[-\w]+(?:\(.*\))?/g,"class":/\.[-:\.\w]+/g,id:/#[-:\.\w]+/g}};Prism.languages.insertBefore("css","ignore",{hexcode:/#[\da-f]{3,6}/gi,entity:/\\[\da-f]{1,8}/gi,number:/[\d%\.]+/g});;
|
||||||
|
Prism.languages.clike={comment:{pattern:/(^|[^\\])(\/\*[\w\W]*?\*\/|(^|[^:])\/\/.*?(\r?\n|$))/g,lookbehind:!0},string:/("|')(\\?.)*?\1/g,"class-name":{pattern:/((?:(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[a-z0-9_\.\\]+/ig,lookbehind:!0,inside:{punctuation:/(\.|\\)/}},keyword:/\b(if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/g,"boolean":/\b(true|false)\b/g,"function":{pattern:/[a-z0-9_]+\(/ig,inside:{punctuation:/\(/}},number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?)\b/g,operator:/[-+]{1,2}|!|<=?|>=?|={1,3}|&{1,2}|\|?\||\?|\*|\/|\~|\^|\%/g,ignore:/&(lt|gt|amp);/gi,punctuation:/[{}[\];(),.:]/g};;
|
||||||
|
Prism.languages.javascript=Prism.languages.extend("clike",{keyword:/\b(break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|false|finally|for|function|get|if|implements|import|in|instanceof|interface|let|new|null|package|private|protected|public|return|set|static|super|switch|this|throw|true|try|typeof|var|void|while|with|yield)\b/g,number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?|NaN|-?Infinity)\b/g});Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^/])\/(?!\/)(\[.+?]|\\.|[^/\r\n])+\/[gim]{0,3}(?=\s*($|[\r\n,.;})]))/g,lookbehind:!0}});Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/<script[\w\W]*?>[\w\W]*?<\/script>/ig,inside:{tag:{pattern:/<script[\w\W]*?>|<\/script>/ig,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.javascript}}});
|
||||||
|
;
|
||||||
|
Prism.languages.scss=Prism.languages.extend("css",{comment:{pattern:/(^|[^\\])(\/\*[\w\W]*?\*\/|\/\/.*?(\r?\n|$))/g,lookbehind:!0},atrule:/@[\w-]+(?=\s+(\(|\{|;))/gi,url:/([-a-z]+-)*url(?=\()/gi,selector:/([^@;\{\}\(\)]?([^@;\{\}\(\)]|&|\#\{\$[-_\w]+\})+)(?=\s*\{(\}|\s|[^\}]+(:|\{)[^\}]+))/gm});Prism.languages.insertBefore("scss","atrule",{keyword:/@(if|else if|else|for|each|while|import|extend|debug|warn|mixin|include|function|return|content)|(?=@for\s+\$[-_\w]+\s)+from/i});Prism.languages.insertBefore("scss","property",{variable:/((\$[-_\w]+)|(#\{\$[-_\w]+\}))/i});Prism.languages.insertBefore("scss","ignore",{placeholder:/%[-_\w]+/i,statement:/\B!(default|optional)\b/gi,"boolean":/\b(true|false)\b/g,"null":/\b(null)\b/g,operator:/\s+([-+]{1,2}|={1,2}|!=|\|?\||\?|\*|\/|\%)\s+/g});;
|
||||||
324
src/assets/scss/gepafin/variables/_button.scss
Normal file
324
src/assets/scss/gepafin/variables/_button.scss
Normal file
@@ -0,0 +1,324 @@
|
|||||||
|
|
||||||
|
$buttonPadding: .5rem 1rem;
|
||||||
|
|
||||||
|
|
||||||
|
$buttonIconOnlyWidth: 2.357rem;
|
||||||
|
|
||||||
|
|
||||||
|
$buttonIconOnlyPadding: .5rem 0;
|
||||||
|
|
||||||
|
|
||||||
|
$buttonBg: $primaryColor;
|
||||||
|
|
||||||
|
|
||||||
|
$buttonTextColor: $primaryTextColor;
|
||||||
|
|
||||||
|
|
||||||
|
$buttonBorder: 1px solid $primaryColor;
|
||||||
|
|
||||||
|
|
||||||
|
$buttonHoverBg: $primaryDarkColor;
|
||||||
|
|
||||||
|
|
||||||
|
$buttonTextHoverColor: $primaryTextColor;
|
||||||
|
|
||||||
|
|
||||||
|
$buttonHoverBorderColor: $primaryDarkColor;
|
||||||
|
|
||||||
|
|
||||||
|
$buttonActiveBg: $primaryDarkerColor;
|
||||||
|
|
||||||
|
|
||||||
|
$buttonTextActiveColor: $primaryTextColor;
|
||||||
|
|
||||||
|
|
||||||
|
$buttonActiveBorderColor: $primaryDarkerColor;
|
||||||
|
|
||||||
|
|
||||||
|
$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);
|
||||||
|
|
||||||
|
$roundedButtonBorderRadius: 2rem;
|
||||||
|
|
||||||
|
|
||||||
|
$textButtonHoverBgOpacity:.04;
|
||||||
|
|
||||||
|
|
||||||
|
$textButtonActiveBgOpacity:.16;
|
||||||
|
|
||||||
|
|
||||||
|
$outlinedButtonBorder:1px solid;
|
||||||
|
|
||||||
|
|
||||||
|
$plainButtonTextColor:#6c757d;
|
||||||
|
|
||||||
|
|
||||||
|
$plainButtonHoverBgColor:#e9ecef;
|
||||||
|
|
||||||
|
|
||||||
|
$plainButtonActiveBgColor:#dee2e6;
|
||||||
|
|
||||||
|
|
||||||
|
$secondaryButtonBg: #607D8B;
|
||||||
|
|
||||||
|
|
||||||
|
$secondaryButtonTextColor: #ffffff;
|
||||||
|
|
||||||
|
|
||||||
|
$secondaryButtonBorder: 1px solid #607D8B;
|
||||||
|
|
||||||
|
|
||||||
|
$secondaryButtonHoverBg: #546E7A;
|
||||||
|
|
||||||
|
|
||||||
|
$secondaryButtonTextHoverColor: #ffffff;
|
||||||
|
|
||||||
|
|
||||||
|
$secondaryButtonHoverBorderColor: #546E7A;
|
||||||
|
|
||||||
|
$secondaryButtonActiveBg: #455A64;
|
||||||
|
|
||||||
|
|
||||||
|
$secondaryButtonTextActiveColor: #ffffff;
|
||||||
|
|
||||||
|
|
||||||
|
$secondaryButtonActiveBorderColor: #455A64;
|
||||||
|
|
||||||
|
|
||||||
|
$secondaryButtonFocusShadow: 0 0 0 0.2rem #B0BEC5;
|
||||||
|
|
||||||
|
|
||||||
|
$infoButtonBg: #03A9F4;
|
||||||
|
|
||||||
|
|
||||||
|
$infoButtonTextColor: #ffffff;
|
||||||
|
|
||||||
|
|
||||||
|
$infoButtonBorder: 1px solid #03A9F4;
|
||||||
|
|
||||||
|
|
||||||
|
$infoButtonHoverBg: #039BE5;
|
||||||
|
|
||||||
|
|
||||||
|
$infoButtonTextHoverColor: #ffffff;
|
||||||
|
|
||||||
|
|
||||||
|
$infoButtonHoverBorderColor: #039BE5;
|
||||||
|
|
||||||
|
|
||||||
|
$infoButtonActiveBg: #0288D1;
|
||||||
|
|
||||||
|
|
||||||
|
$infoButtonTextActiveColor: #ffffff;
|
||||||
|
|
||||||
|
|
||||||
|
$infoButtonActiveBorderColor: #0288D1;
|
||||||
|
|
||||||
|
|
||||||
|
$infoButtonFocusShadow: 0 0 0 0.2rem lighten($infoButtonBg, 35%);
|
||||||
|
|
||||||
|
|
||||||
|
$successButtonBg: #4CAF50;
|
||||||
|
|
||||||
|
|
||||||
|
$successButtonTextColor: #ffffff;
|
||||||
|
|
||||||
|
|
||||||
|
$successButtonBorder: 1px solid #4CAF50;
|
||||||
|
|
||||||
|
|
||||||
|
$successButtonHoverBg: #43A047;
|
||||||
|
|
||||||
|
|
||||||
|
$successButtonTextHoverColor: #ffffff;
|
||||||
|
|
||||||
|
|
||||||
|
$successButtonHoverBorderColor: #43A047;
|
||||||
|
|
||||||
|
|
||||||
|
$successButtonActiveBg: #388E3C;
|
||||||
|
|
||||||
|
|
||||||
|
$successButtonTextActiveColor: #ffffff;
|
||||||
|
|
||||||
|
|
||||||
|
$successButtonActiveBorderColor: #388E3C;
|
||||||
|
|
||||||
|
|
||||||
|
$successButtonFocusShadow: 0 0 0 0.2rem lighten($successButtonBg, 35%);
|
||||||
|
|
||||||
|
|
||||||
|
$warningButtonBg: #FFC107;
|
||||||
|
|
||||||
|
|
||||||
|
$warningButtonTextColor: $textColor;
|
||||||
|
|
||||||
|
|
||||||
|
$warningButtonBorder: 1px solid #FFC107;
|
||||||
|
|
||||||
|
|
||||||
|
$warningButtonHoverBg: #FFB300;
|
||||||
|
|
||||||
|
|
||||||
|
$warningButtonTextHoverColor: $textColor;
|
||||||
|
|
||||||
|
|
||||||
|
$warningButtonHoverBorderColor: #FFB300;
|
||||||
|
|
||||||
|
|
||||||
|
$warningButtonActiveBg: #FFA000;
|
||||||
|
|
||||||
|
|
||||||
|
$warningButtonTextActiveColor: $textColor;
|
||||||
|
|
||||||
|
|
||||||
|
$warningButtonActiveBorderColor: #FFA000;
|
||||||
|
|
||||||
|
|
||||||
|
$warningButtonFocusShadow: 0 0 0 0.2rem lighten($warningButtonBg, 35%);
|
||||||
|
|
||||||
|
|
||||||
|
$helpButtonBg:#9C27B0;
|
||||||
|
|
||||||
|
|
||||||
|
$helpButtonTextColor:#ffffff;
|
||||||
|
|
||||||
|
|
||||||
|
$helpButtonBorder:1px solid #9C27B0;
|
||||||
|
|
||||||
|
|
||||||
|
$helpButtonHoverBg:#8E24AA;
|
||||||
|
|
||||||
|
|
||||||
|
$helpButtonTextHoverColor:#ffffff;
|
||||||
|
|
||||||
|
|
||||||
|
$helpButtonHoverBorderColor:#8E24AA;
|
||||||
|
|
||||||
|
|
||||||
|
$helpButtonActiveBg:#7B1FA2;
|
||||||
|
|
||||||
|
|
||||||
|
$helpButtonTextActiveColor:#ffffff;
|
||||||
|
|
||||||
|
|
||||||
|
$helpButtonActiveBorderColor:#7B1FA2;
|
||||||
|
|
||||||
|
|
||||||
|
$helpButtonFocusShadow:0 0 0 0.2rem #CE93D8;
|
||||||
|
|
||||||
|
|
||||||
|
$dangerButtonBg: #f44336;
|
||||||
|
|
||||||
|
|
||||||
|
$dangerButtonTextColor: #ffffff;
|
||||||
|
|
||||||
|
|
||||||
|
$dangerButtonBorder: 1px solid #f44336;
|
||||||
|
|
||||||
|
|
||||||
|
$dangerButtonHoverBg: #e53935;
|
||||||
|
|
||||||
|
|
||||||
|
$dangerButtonTextHoverColor: #ffffff;
|
||||||
|
|
||||||
|
|
||||||
|
$dangerButtonHoverBorderColor: #e53935;
|
||||||
|
|
||||||
|
|
||||||
|
$dangerButtonActiveBg: #d32f2f;
|
||||||
|
|
||||||
|
|
||||||
|
$dangerButtonTextActiveColor: #ffffff;
|
||||||
|
|
||||||
|
|
||||||
|
$dangerButtonActiveBorderColor: #d32f2f;
|
||||||
|
|
||||||
|
|
||||||
|
$dangerButtonFocusShadow: 0 0 0 0.2rem lighten($dangerButtonBg, 35%);
|
||||||
|
|
||||||
|
|
||||||
|
$linkButtonColor:$primaryDarkerColor;
|
||||||
|
|
||||||
|
|
||||||
|
$linkButtonHoverColor:$primaryDarkerColor;
|
||||||
|
|
||||||
|
|
||||||
|
$linkButtonTextHoverDecoration:underline;
|
||||||
|
|
||||||
|
|
||||||
|
$linkButtonFocusShadow: 0 0 0 0.2rem $focusOutlineColor;
|
||||||
|
|
||||||
|
|
||||||
|
$toggleButtonBg: #ffffff;
|
||||||
|
|
||||||
|
|
||||||
|
$toggleButtonBorder: 1px solid #ced4da;
|
||||||
|
|
||||||
|
|
||||||
|
$toggleButtonTextColor: $textColor;
|
||||||
|
|
||||||
|
|
||||||
|
$toggleButtonIconColor: $textSecondaryColor;
|
||||||
|
|
||||||
|
|
||||||
|
$toggleButtonHoverBg: #e9ecef;
|
||||||
|
|
||||||
|
|
||||||
|
$toggleButtonHoverBorderColor: #ced4da;
|
||||||
|
|
||||||
|
|
||||||
|
$toggleButtonTextHoverColor: $textColor;
|
||||||
|
|
||||||
|
|
||||||
|
$toggleButtonIconHoverColor: $textSecondaryColor;
|
||||||
|
|
||||||
|
|
||||||
|
$toggleButtonActiveBg: $primaryColor;
|
||||||
|
|
||||||
|
|
||||||
|
$toggleButtonActiveBorderColor: $primaryColor;
|
||||||
|
|
||||||
|
|
||||||
|
$toggleButtonTextActiveColor: $primaryTextColor;
|
||||||
|
|
||||||
|
|
||||||
|
$toggleButtonIconActiveColor: $primaryTextColor;
|
||||||
|
|
||||||
|
|
||||||
|
$toggleButtonActiveHoverBg: $primaryDarkColor;
|
||||||
|
|
||||||
|
|
||||||
|
$toggleButtonActiveHoverBorderColor: $primaryDarkColor;
|
||||||
|
|
||||||
|
|
||||||
|
$toggleButtonTextActiveHoverColor: $primaryTextColor;
|
||||||
|
|
||||||
|
|
||||||
|
$toggleButtonIconActiveHoverColor: $primaryTextColor;
|
||||||
|
|
||||||
|
|
||||||
|
$speedDialButtonWidth: 4rem;
|
||||||
|
|
||||||
|
|
||||||
|
$speedDialButtonHeight: 4rem;
|
||||||
|
|
||||||
|
|
||||||
|
$speedDialButtonIconFontSize: 1.3rem;
|
||||||
|
|
||||||
|
|
||||||
|
$speedDialActionWidth: 3rem;
|
||||||
|
|
||||||
|
|
||||||
|
$speedDialActionHeight: 3rem;
|
||||||
|
|
||||||
|
|
||||||
|
$speedDialActionBg: #495057;
|
||||||
|
|
||||||
|
|
||||||
|
$speedDialActionHoverBg: #343a40;
|
||||||
|
|
||||||
|
|
||||||
|
$speedDialActionTextColor: #fff;
|
||||||
|
|
||||||
|
|
||||||
|
$speedDialActionTextHoverColor: #fff;
|
||||||
350
src/assets/scss/gepafin/variables/_data.scss
Normal file
350
src/assets/scss/gepafin/variables/_data.scss
Normal file
@@ -0,0 +1,350 @@
|
|||||||
|
|
||||||
|
|
||||||
|
$paginatorBg: #ffffff;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$paginatorTextColor: $textSecondaryColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$paginatorBorder: solid #e9ecef;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$paginatorBorderWidth: 0;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$paginatorPadding: .5rem 1rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$paginatorElementWidth: $buttonIconOnlyWidth;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$paginatorElementHeight: $buttonIconOnlyWidth;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$paginatorElementBg: transparent;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$paginatorElementBorder: 0 none;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$paginatorElementIconColor: $textSecondaryColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$paginatorElementHoverBg: #e9ecef;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$paginatorElementHoverBorderColor: transparent;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$paginatorElementIconHoverColor: $textSecondaryColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$paginatorElementBorderRadius: $borderRadius;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$paginatorElementMargin: .143rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$paginatorElementPadding: 0;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$tableHeaderBorder: 1px solid #e9ecef;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$tableHeaderBorderWidth: 0 0 1px 0;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$tableHeaderBg: #f8f9fa;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$tableHeaderTextColor: $textColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$tableHeaderFontWeight: 600;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$tableHeaderPadding: 1rem 1rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$tableHeaderCellPadding: 1rem 1rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$tableHeaderCellBg: #f8f9fa;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$tableHeaderCellTextColor: $textColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$tableHeaderCellFontWeight: 600;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$tableHeaderCellBorder: 1px solid #e9ecef;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$tableHeaderCellBorderWidth: 0 0 1px 0;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$tableHeaderCellHoverBg: #e9ecef;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$tableHeaderCellTextHoverColor: $textColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$tableHeaderCellIconColor: $textSecondaryColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$tableHeaderCellIconHoverColor: $textSecondaryColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$tableHeaderCellHighlightBg:#f8f9fa;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$tableHeaderCellHighlightTextColor:$primaryColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$tableHeaderCellHighlightHoverBg:#e9ecef;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$tableHeaderCellHighlightTextHoverColor:$primaryColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$tableSortableColumnBadgeSize: 1.143rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$tableBodyRowBg: #ffffff;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$tableBodyRowTextColor: $textColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$tableBodyRowEvenBg: #ffffff;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$tableBodyRowHoverBg: #e9ecef;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$tableBodyRowTextHoverColor: $textColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$tableBodyCellBorder: 1px solid rgba(0,0,0,0.08);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$tableBodyCellBorderWidth: 0 0 1px 0;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$tableBodyCellPadding: 1rem 1rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$tableFooterCellPadding: 1rem 1rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$tableFooterCellBg: #f8f9fa;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$tableFooterCellTextColor: $textColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$tableFooterCellFontWeight: 600;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$tableFooterCellBorder: 1px solid #e9ecef;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$tableFooterCellBorderWidth: 0 0 1px 0;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$tableResizerHelperBg: $primaryColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$tableDragHelperBg: rgba($primaryColor, .16);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$tableFooterBorder: 1px solid #e9ecef;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$tableFooterBorderWidth: 0 0 1px 0;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$tableFooterBg: #f8f9fa;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$tableFooterTextColor: $textColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$tableFooterFontWeight: 600;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$tableFooterPadding: 1rem 1rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$tableCellContentAlignment: left;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$tableTopPaginatorBorderWidth: 1px 0 1px 0;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$tableBottomPaginatorBorderWidth: 0 0 1px 0;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$tableScaleSM: 0.5;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$tableScaleLG: 1.25;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$dataViewContentPadding: 0;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$dataViewContentBorder: 0 none;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$dataViewListItemBorder: solid #e9ecef;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$dataViewListItemBorderWidth: 0 0 1px 0;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$dataScrollerContentPadding: 0;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$dataScrollerContentBorder: 0 none;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$dataScrollerListItemBorder: solid #e9ecef;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$dataScrollerListItemBorderWidth: 0 0 1px 0;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$treeContainerPadding: 0.286rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$treeNodePadding: 0.143rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$treeNodeContentPadding: .5rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$treeNodeChildrenPadding: 0 0 0 1rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$treeNodeIconColor: $textSecondaryColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$timelineVerticalEventContentPadding:0 1rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$timelineHorizontalEventContentPadding:1rem 0;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$timelineEventMarkerWidth:1rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$timelineEventMarkerHeight:1rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$timelineEventMarkerBorderRadius:50%;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$timelineEventMarkerBorder:2px solid $highlightBg;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$timelineEventMarkerBackground:$highlightTextColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$timelineEventConnectorSize:2px;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$timelineEventColor:#dee2e6;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$organizationChartConnectorColor: #dee2e6;
|
||||||
559
src/assets/scss/gepafin/variables/_form.scss
Normal file
559
src/assets/scss/gepafin/variables/_form.scss
Normal file
@@ -0,0 +1,559 @@
|
|||||||
|
|
||||||
|
|
||||||
|
$inputPadding: 0.5rem 0.5rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$inputBg: #ffffff;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$inputTextFontSize: 1rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$inputTextColor: $textColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$inputIconColor: $textColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$inputBorder: 1px solid #ced4da;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$inputHoverBorderColor: $primaryColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$inputFocusBorderColor: $primaryColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$inputErrorBorderColor: #ced4da #ced4da #ced4da $errorColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$inputPlaceholderTextColor: #6c757d;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$inputFilledBg: #f8f9fa;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$inputFilledHoverBg: #f8f9fa;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$inputFilledFocusBg: #f8f9fa;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$inputGroupBg: #e9ecef;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$inputGroupTextColor: $textSecondaryColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$inputGroupAddOnMinWidth: 2.357rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$inputListBg: #ffffff;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$inputListTextColor: $textColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$inputListBorder: $inputBorder;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$inputListPadding: 0.5rem 0;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$inputListItemPadding: 0.5rem 1rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$inputListItemBg: transparent;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$inputListItemTextColor: $textColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$inputListItemHoverBg: #e9ecef;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$inputListItemTextHoverColor: $textColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$inputListItemTextFocusColor: $textColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$inputListItemFocusBg: #f8f9fa;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$inputListItemBorder: 0 none;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$inputListItemBorderRadius: 0;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$inputListItemMargin: 0;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$inputListItemFocusShadow: inset 0 0 0 0.15rem $focusOutlineColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$inputListHeaderPadding: 0.5rem 1rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$inputListHeaderMargin: 0;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$inputListHeaderBg: #f8f9fa;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$inputListHeaderTextColor: $textColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$inputListHeaderBorder: 0 none;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$inputOverlayBg: $inputListBg;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$inputOverlayHeaderBg: $inputListHeaderBg;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$inputOverlayBorder: 0 none;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$inputOverlayShadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$checkboxWidth: 20px;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$checkboxHeight: 20px;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$checkboxBorder: 2px solid #ced4da;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$checkboxIconFontSize: 14px;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$checkboxActiveBorderColor: $primaryColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$checkboxActiveBg: $primaryColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$checkboxIconActiveColor: $primaryTextColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$checkboxActiveHoverBg: $primaryDarkerColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$checkboxIconActiveHoverColor: $primaryTextColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$checkboxActiveHoverBorderColor: $primaryDarkerColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$radiobuttonWidth: 20px;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$radiobuttonHeight: 20px;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$radiobuttonBorder: 2px solid #ced4da;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$radiobuttonIconSize: 12px;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$radiobuttonActiveBorderColor: $primaryColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$radiobuttonActiveBg: $primaryColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$radiobuttonIconActiveColor: $primaryTextColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$radiobuttonActiveHoverBg: $primaryDarkerColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$radiobuttonIconActiveHoverColor: $primaryTextColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$radiobuttonActiveHoverBorderColor: $primaryDarkerColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$colorPickerPreviewWidth: 2rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$colorPickerPreviewHeight: 2rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$colorPickerBg: #323232;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$colorPickerBorder: 1px solid #191919;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$colorPickerHandleColor: #ffffff;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$ratingIconFontSize: 1.143rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$ratingCancelIconColor: #e74c3c;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$ratingCancelIconHoverColor: #c0392b;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$ratingStarIconOffColor: $textColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$ratingStarIconOnColor: $primaryColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$ratingStarIconHoverColor: $primaryColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$sliderBg: #dee2e6;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$sliderBorder: 0 none;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$sliderHorizontalHeight: 0.286rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$sliderVerticalWidth: 0.286rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$sliderHandleWidth: 1.143rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$sliderHandleHeight: 1.143rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$sliderHandleBg: #ffffff;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$sliderHandleBorder: 2px solid $primaryColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$sliderHandleBorderRadius: 50%;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$sliderHandleHoverBorderColor: $primaryColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$sliderHandleHoverBg: $primaryColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$sliderRangeBg: $primaryColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$calendarTableMargin: 0.5rem 0;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$calendarPadding: 0.5rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$calendarBg: #ffffff;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$calendarInlineBg: $calendarBg;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$calendarTextColor: $textColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$calendarBorder: $inputListBorder;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$calendarOverlayBorder: $inputOverlayBorder;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$calendarHeaderPadding: 0.5rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$calendarMonthYearHeaderHoverTextColor: $primaryColor !default;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$calendarHeaderBg: #ffffff;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$calendarInlineHeaderBg: $calendarBg;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$calendarHeaderBorder: 1px solid #dee2e6;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$calendarHeaderTextColor: $textColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$calendarHeaderFontWeight: 600;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$calendarHeaderCellPadding: 0.5rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$calendarCellDatePadding: 0.5rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$calendarCellDateWidth: 2.5rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$calendarCellDateHeight: 2.5rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$calendarCellDateBorderRadius: 50%;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$calendarCellDateBorder: 1px solid transparent;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$calendarCellDateHoverBg: #e9ecef;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$calendarCellDateTodayBg: #ced4da;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$calendarCellDateTodayBorderColor: transparent;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$calendarCellDateTodayTextColor: $textColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$calendarButtonBarPadding: 1rem 0;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$calendarTimePickerPadding: 0.5rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$calendarTimePickerElementPadding: 0 0.429rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$calendarTimePickerTimeFontSize: 1.286rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$calendarBreakpoint: 769px;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$calendarCellDatePaddingSM: 0;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$inputSwitchWidth: 3rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$inputSwitchHeight: 1.75rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$inputSwitchBorderRadius: 30px;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$inputSwitchHandleWidth: 1.25rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$inputSwitchHandleHeight: 1.25rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$inputSwitchHandleBorderRadius: 50%;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$inputSwitchSliderPadding: 0.25rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$inputSwitchSliderOffBg: #ced4da;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$inputSwitchHandleOffBg: #ffffff;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$inputSwitchSliderOffHoverBg: #c3cad2;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$inputSwitchSliderOnBg: $primaryColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$inputSwitchSliderOnHoverBg: $primaryDarkColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$inputSwitchHandleOnBg: #ffffff;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$fileUploadProgressBarHeight: 0.25rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$fileUploadContentPadding: 2rem 1rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$editorToolbarBg: #f8f9fa;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$editorToolbarBorder: 1px solid #dee2e6;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$editorToolbarPadding: 1rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$editorToolbarIconColor: #6c757d;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$editorToolbarIconHoverColor: #495057;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$editorIconActiveColor: $primaryColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$editorContentBorder: 1px solid #dee2e6;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$editorContentBg: #ffffff;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$passwordMeterBg: #dee2e6;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$passwordWeakBg: #e53935;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$passwordMediumBg: #ffb300;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$passwordStrongBg: #43a047;
|
||||||
144
src/assets/scss/gepafin/variables/_general.scss
Normal file
144
src/assets/scss/gepafin/variables/_general.scss
Normal file
@@ -0,0 +1,144 @@
|
|||||||
|
|
||||||
|
|
||||||
|
$fontFamily: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
|
||||||
|
Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$fontSize: 1rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$fontWeight: normal;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$textColor: #495057;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$textSecondaryColor: #6c757d;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$highlightBg: $primaryColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$highlightTextColor: $primaryTextColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$highlightFocusBg: rgba($primaryColor, 0.24) !default;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$borderRadius: 3px;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$transitionDuration: 0.2s;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$formElementTransition: background-color $transitionDuration,
|
||||||
|
color $transitionDuration, border-color $transitionDuration,
|
||||||
|
box-shadow $transitionDuration;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$actionIconTransition: background-color $transitionDuration,
|
||||||
|
color $transitionDuration, box-shadow $transitionDuration;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$listItemTransition: background-color $transitionDuration,
|
||||||
|
border-color $transitionDuration, box-shadow $transitionDuration;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$primeIconFontSize: 1rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$divider: 1px solid #dee2e6;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$inlineSpacing: 0.5rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$disabledOpacity: 0.8;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$maskBg: rgba(0, 0, 0, 0.4);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$loadingIconFontSize: 2rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$errorColor: #e4677e;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$focusOutlineColor: #bfd1f6;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$focusOutline: 0 none;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$focusOutlineOffset: 0;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$focusShadow: 0 0 0 0.2rem $focusOutlineColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$actionIconWidth: 2rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$actionIconHeight: 2rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$actionIconBg: transparent;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$actionIconBorder: 0 none;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$actionIconColor: $textSecondaryColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$actionIconHoverBg: #e9ecef;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$actionIconHoverBorderColor: transparent;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$actionIconHoverColor: $textColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$actionIconBorderRadius: 50%;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$scaleSM: 0.875;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$scaleLG: 1.25;
|
||||||
231
src/assets/scss/gepafin/variables/_media.scss
Normal file
231
src/assets/scss/gepafin/variables/_media.scss
Normal file
@@ -0,0 +1,231 @@
|
|||||||
|
|
||||||
|
|
||||||
|
$carouselIndicatorsPadding: 1rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$carouselIndicatorBg: #e9ecef;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$carouselIndicatorHoverBg: #dee2e6;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$carouselIndicatorBorderRadius: 0;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$carouselIndicatorWidth: 2rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$carouselIndicatorHeight: .5rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$galleriaMaskBg: rgba(0,0,0,0.9);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$galleriaCloseIconMargin: .5rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$galleriaCloseIconFontSize: 2rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$galleriaCloseIconBg: transparent;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$galleriaCloseIconColor: #ebedef;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$galleriaCloseIconHoverBg: rgba(255,255,255,0.1);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$galleriaCloseIconHoverColor: #ebedef;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$galleriaCloseIconWidth: 4rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$galleriaCloseIconHeight: 4rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$galleriaCloseIconBorderRadius: 50%;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$galleriaItemNavigatorBg: rgba(0,0,0,.2);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$galleriaItemNavigatorColor: #aeb6bf;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$galleriaItemNavigatorMargin: .5rem 0;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$galleriaItemNavigatorFontSize: 2rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$galleriaItemNavigatorHoverBg: rgba(0,0,0,.3);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$galleriaItemNavigatorHoverColor: #ebedef;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$galleriaItemNavigatorWidth: 4rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$galleriaItemNavigatorHeight: 4rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$galleriaItemNavigatorBorderRadius: $borderRadius;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$galleriaCaptionBg: rgba(0,0,0,.5);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$galleriaCaptionTextColor: #ebedef;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$galleriaCaptionPadding: 1rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$galleriaIndicatorsPadding: 1rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$galleriaIndicatorBg: #e9ecef;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$galleriaIndicatorHoverBg: #dee2e6;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$galleriaIndicatorBorderRadius: 50%;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$galleriaIndicatorWidth: 1rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$galleriaIndicatorHeight: 1rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$galleriaIndicatorsBgOnItem: rgba(0,0,0,.5);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$galleriaIndicatorBgOnItem: rgba(255,255,255,.4);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$galleriaIndicatorHoverBgOnItem: rgba(255,255,255,.6);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$galleriaThumbnailContainerBg: rgba(0,0,0,.9);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$galleriaThumbnailContainerPadding: 1rem .25rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$galleriaThumbnailNavigatorBg: transparent;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$galleriaThumbnailNavigatorColor: #aeb6bf;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$galleriaThumbnailNavigatorHoverBg: rgba(255,255,255,0.1);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$galleriaThumbnailNavigatorHoverColor: #aeb6bf;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$galleriaThumbnailNavigatorBorderRadius: 50%;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$galleriaThumbnailNavigatorWidth: 2rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$galleriaThumbnailNavigatorHeight: 2rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$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;
|
||||||
287
src/assets/scss/gepafin/variables/_menu.scss
Normal file
287
src/assets/scss/gepafin/variables/_menu.scss
Normal file
@@ -0,0 +1,287 @@
|
|||||||
|
|
||||||
|
|
||||||
|
$stepsItemBg: #ffffff;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$stepsItemBorder: 1px solid #c8c8c8;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$stepsItemTextColor: $textSecondaryColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$stepsItemNumberWidth: 2rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$stepsItemNumberHeight: 2rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$stepsItemNumberFontSize: 1.143rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$stepsItemNumberColor: $textColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$stepsItemNumberBorderRadius: 50%;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$stepsItemActiveFontWeight: 600;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$menuWidth: 12.5rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$menuBg: #ffffff;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$menuBorder: 1px solid #dee2e6;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$menuTextColor: $textColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$menuitemPadding: 0.75rem 1rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$menuitemBorderRadius: 0;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$menuitemTextColor: $textColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$menuitemIconColor: $textSecondaryColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$menuitemTextHoverColor: $textColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$menuitemIconHoverColor: $textSecondaryColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$menuitemHoverBg: #e9ecef;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$menuitemTextFocusColor: $textColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$menuitemIconFocusColor: $textColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$menuitemFocusBg: #f8f9fa;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$menuitemTextActiveColor: $textColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$menuitemIconActiveColor: $textSecondaryColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$menuitemActiveBg: #e9ecef;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$menuitemActiveFocusBg: #e9ecef;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$menuitemSubmenuIconFontSize: 0.875rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$submenuHeaderMargin: 0;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$submenuHeaderPadding: 0.75rem 1rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$submenuHeaderBg: #ffffff;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$submenuHeaderTextColor: $textColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$submenuHeaderBorderRadius: 0;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$submenuHeaderFontWeight: 600;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$overlayMenuBg: $menuBg;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$overlayMenuBorder: 0 none;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$overlayMenuShadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$verticalMenuPadding: 0.25rem 0;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$menuSeparatorMargin: 0.25rem 0;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$breadcrumbPadding: 1rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$breadcrumbBg: $menuBg;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$breadcrumbBorder: $menuBorder;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$breadcrumbItemTextColor: $menuitemTextColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$breadcrumbItemIconColor: $menuitemIconColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$breadcrumbLastItemTextColor: $menuitemTextColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$breadcrumbLastItemIconColor: $menuitemIconColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$breadcrumbSeparatorColor: $menuitemTextColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$horizontalMenuPadding: 0.5rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$horizontalMenuBg: #f8f9fa;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$horizontalMenuBorder: $menuBorder;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$horizontalMenuTextColor: $menuTextColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$horizontalMenuRootMenuitemPadding: $menuitemPadding;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$horizontalMenuRootMenuitemBorderRadius: $borderRadius;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$horizontalMenuRootMenuitemTextColor: $menuitemTextColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$horizontalMenuRootMenuitemIconColor: $menuitemIconColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$horizontalMenuRootMenuitemTextHoverColor: $menuitemTextHoverColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$horizontalMenuRootMenuitemIconHoverColor: $menuitemIconHoverColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$horizontalMenuRootMenuitemHoverBg: $menuitemHoverBg;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$horizontalMenuRootMenuitemTextActiveColor: $menuitemTextActiveColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$horizontalMenuRootMenuitemIconActiveColor: $menuitemIconActiveColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$horizontalMenuRootMenuitemActiveBg: $menuitemActiveBg;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$dockActionWidth: 4rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$dockActionHeight: 4rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$dockItemPadding: 0.5rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$dockItemBorderRadius: $borderRadius;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$dockCurrentItemMargin: 1.5rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$dockFirstItemsMargin: 1.3rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$dockSecondItemsMargin: 0.9rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$dockBg: rgba(255, 255, 255, 0.1);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$dockBorder: 1px solid rgba(255, 255, 255, 0.2);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$dockPadding: 0.5rem 0.5rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$dockBorderRadius: 0.5rem;
|
||||||
143
src/assets/scss/gepafin/variables/_message.scss
Normal file
143
src/assets/scss/gepafin/variables/_message.scss
Normal file
@@ -0,0 +1,143 @@
|
|||||||
|
|
||||||
|
|
||||||
|
$messageMargin: 1rem 0;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$messagePadding: 1rem 1.5rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$messageBorderWidth: 0 0 0 4px;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$messageIconFontSize: 1.5rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$messageTextFontSize: 1rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$messageTextFontWeight: 500;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$inlineMessagePadding: $inputPadding;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$inlineMessageMargin: 0;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$inlineMessageIconFontSize: 1rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$inlineMessageTextFontSize: 1rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$inlineMessageBorderWidth: 1px;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$toastIconFontSize: 2rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$toastMessageTextMargin: 0 0 0 1rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$toastMargin: 0 0 1rem 0;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$toastPadding: 1rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$toastBorderWidth: 0 0 0 4px;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$toastShadow: 0 3px 14px 0 rgba(0, 0, 0, 0.3);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$toastOpacity: .9;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$toastTitleFontWeight: 700;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$toastDetailMargin: $inlineSpacing 0 0 0;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$infoMessageBg: #039BE5;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$infoMessageBorder: solid #027cb7;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$infoMessageTextColor: #ffffff;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$infoMessageIconColor: #ffffff;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$successMessageBg: #43A047;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$successMessageBorder: 0 none;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$successMessageTextColor: #ffffff;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$successMessageIconColor: #ffffff;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$warningMessageBg: #FFB300;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$warningMessageBorder: 0 none;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$warningMessageTextColor: $textColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$warningMessageIconColor: $textColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$errorMessageBg: #E53935;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$errorMessageBorder: 0 none;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$errorMessageTextColor: #ffffff;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$errorMessageIconColor: #ffffff;
|
||||||
113
src/assets/scss/gepafin/variables/_misc.scss
Normal file
113
src/assets/scss/gepafin/variables/_misc.scss
Normal file
@@ -0,0 +1,113 @@
|
|||||||
|
|
||||||
|
|
||||||
|
$inplacePadding: $inputPadding;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$inplaceHoverBg: #e9ecef;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$inplaceTextHoverColor: $textColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$badgeBg: $primaryColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$badgeTextColor: $primaryTextColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$badgeMinWidth: 1.5rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$badgeHeight: 1.5rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$badgeFontWeight: 700;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$badgeFontSize: .75rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$tagPadding: .25rem .4rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$progressBarHeight: 1.5rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$progressBarBorder: 0 none;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$progressBarBg: #dee2e6;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$progressBarValueBg: $primaryColor;
|
||||||
|
|
||||||
|
|
||||||
|
$progressBarValueTextColor:$primaryTextColor;
|
||||||
|
|
||||||
|
|
||||||
|
$avatarBg:#dee2e6;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$avatarTextColor:$textColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$chipBg:#dee2e6;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$chipTextColor:$textColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$chipBorderRadius:16px;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$scrollTopBg:rgba(0,0,0,0.7);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$scrollTopHoverBg:rgba(0,0,0,0.8);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$scrollTopWidth:3rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$scrollTopHeight:3rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$scrollTopBorderRadius:50%;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$scrollTopFontSize:1.5rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$scrollTopTextColor:#f8f9fa;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$skeletonBg:#e9ecef;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$skeletonAnimationBg:rgba(255,255,255,0.4);
|
||||||
67
src/assets/scss/gepafin/variables/_overlay.scss
Normal file
67
src/assets/scss/gepafin/variables/_overlay.scss
Normal file
@@ -0,0 +1,67 @@
|
|||||||
|
|
||||||
|
|
||||||
|
$overlayContentBorder: 0 none;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$overlayContentBg:$panelContentBg;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$overlayContainerShadow: 0 0 14px 0 rgba(0, 0, 0, 0.1);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$dialogHeaderBg: #ffffff;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$dialogHeaderBorder: 1px solid #dee2e6;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$dialogHeaderTextColor: $panelHeaderTextColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$dialogHeaderFontWeight: 600;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$dialogHeaderFontSize: 1.25rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$dialogHeaderPadding: 1.5rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$dialogContentPadding: 0 1.5rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$dialogFooterBorder: 1px solid #dee2e6;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$dialogFooterPadding: 1.5rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$confirmPopupContentPadding:$panelContentPadding;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$confirmPopupFooterPadding:0 1rem 1rem 1rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$tooltipBg: $textColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$tooltipTextColor: #ffffff;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$tooltipPadding: $inputPadding;
|
||||||
316
src/assets/scss/gepafin/variables/_panel.scss
Normal file
316
src/assets/scss/gepafin/variables/_panel.scss
Normal file
@@ -0,0 +1,316 @@
|
|||||||
|
|
||||||
|
|
||||||
|
$panelHeaderBorderColor: #dee2e6;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$panelHeaderBorder: 1px solid #dee2e6;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$panelHeaderBg: #f8f9fa;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$panelHeaderTextColor: $textColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$panelHeaderFontWeight: 600;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$panelHeaderPadding: 1rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$panelToggleableHeaderPadding: .5rem 1rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$panelContentBorderColor: #dee2e6;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$panelContentBorder: 1px solid #dee2e6;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$panelContentBg: #ffffff;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$panelContentEvenRowBg: #e9ecef;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$panelContentTextColor: $textColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$panelContentPadding: 1rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$panelFooterBorder: 1px solid #dee2e6;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$panelFooterBg: #ffffff;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$panelFooterTextColor: $textColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$panelFooterPadding: 0.5rem 1rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$accordionSpacing: 0;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$accordionHeaderBorder: $panelHeaderBorder;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$accordionHeaderBg: $panelHeaderBg;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$accordionHeaderTextColor: $panelHeaderTextColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$accordionHeaderFontWeight: $panelHeaderFontWeight;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$accordionHeaderPadding: $panelHeaderPadding;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$accordionHeaderHoverBg: #e9ecef;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$accordionHeaderHoverBorderColor: $panelHeaderBorder;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$accordionHeaderTextHoverColor: $textColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$accordionHeaderActiveBg: $panelHeaderBg;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$accordionHeaderActiveBorderColor: #dee2e6;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$accordionHeaderTextActiveColor: $textColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$accordionHeaderActiveHoverBg: #e9ecef;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$accordionHeaderActiveHoverBorderColor: #dee2e6;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$accordionHeaderTextActiveHoverColor: $textColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$accordionContentBorder: $panelContentBorder;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$accordionContentBg: $panelContentBg;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$accordionContentTextColor: $panelContentTextColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$accordionContentPadding: $panelContentPadding;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$tabviewNavBorder: 1px solid #dee2e6;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$tabviewNavBorderWidth: 0 0 2px 0;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$tabviewNavBg: #ffffff;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$tabviewHeaderSpacing: 0;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$tabviewHeaderBorder: solid #dee2e6;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$tabviewHeaderBorderWidth: 0 0 2px 0;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$tabviewHeaderBorderColor: transparent transparent #dee2e6 transparent;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$tabviewHeaderBg: #ffffff;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$tabviewHeaderTextColor: $textSecondaryColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$tabviewHeaderFontWeight: $panelHeaderFontWeight;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$tabviewHeaderPadding: $panelHeaderPadding;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$tabviewHeaderMargin: 0 0 -2px 0;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$tabviewHeaderHoverBg: #ffffff;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$tabviewHeaderHoverBorderColor: #9ba2aa;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$tabviewHeaderTextHoverColor: $textSecondaryColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$tabviewHeaderActiveBg: #ffffff;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$tabviewHeaderActiveBorderColor: $primaryColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$tabviewHeaderTextActiveColor: $primaryColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$tabviewContentBorder: 0 none;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$tabviewContentBg: $panelContentBg;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$tabviewContentTextColor: $panelContentTextColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$tabviewContentPadding: $panelContentPadding;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$panelHeaderHoverBg: #e9ecef;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$panelHeaderHoverBorderColor: #dee2e6;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$panelHeaderTextHoverColor: $textColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$scrollPanelTrackBorder: 0 none;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$scrollPanelTrackBg: #f8f9fa;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$cardBodyPadding: 1rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$cardTitleFontSize: 1.5rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$cardTitleFontWeight: 700;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$cardSubTitleFontWeight: 700;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$cardSubTitleColor: $textSecondaryColor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$cardContentPadding: 1rem 0;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$cardFooterPadding: 1rem 0 0 0;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$cardShadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0,0,0,.12);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$dividerHorizontalMargin:1rem 0;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$dividerHorizontalPadding:0 1rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$dividerVerticalMargin:0 1rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$dividerVerticalPadding:1rem 0;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$dividerSize:1px;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$dividerColor:#dee2e6;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$splitterGutterBg:#f8f9fa;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$splitterGutterHandleBg:#dee2e6;
|
||||||
18
src/assets/scss/theme-base/_colors.scss
Normal file
18
src/assets/scss/theme-base/_colors.scss
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
:root {
|
||||||
|
@if variable-exists(colors) {
|
||||||
|
@each $name, $color in $colors {
|
||||||
|
@for $i from 0 through 5 {
|
||||||
|
@if ($i == 0) {
|
||||||
|
--#{$name}-50:#{tint($color, (5 - $i) * 19%)};
|
||||||
|
}
|
||||||
|
@else {
|
||||||
|
--#{$name}-#{$i * 100}:#{tint($color, (5 - $i) * 19%)};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@for $i from 1 through 4 {
|
||||||
|
--#{$name}-#{($i + 5) * 100}:#{shade($color, $i * 15%)};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
75
src/assets/scss/theme-base/_common.scss
Normal file
75
src/assets/scss/theme-base/_common.scss
Normal file
@@ -0,0 +1,75 @@
|
|||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-component {
|
||||||
|
font-family: var(--font-family);
|
||||||
|
font-feature-settings: var(--font-feature-settings, normal);
|
||||||
|
font-size: $fontSize;
|
||||||
|
font-weight: $fontWeight;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-component-overlay {
|
||||||
|
background-color: $maskBg;
|
||||||
|
transition-duration: $transitionDuration;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-disabled, .p-component:disabled {
|
||||||
|
opacity: $disabledOpacity;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-error {
|
||||||
|
color: $errorColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-text-secondary {
|
||||||
|
color: $textSecondaryColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pi {
|
||||||
|
font-size: $primeIconFontSize;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-icon {
|
||||||
|
width: $primeIconFontSize;
|
||||||
|
height: $primeIconFontSize;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-link {
|
||||||
|
font-family: var(--font-family);
|
||||||
|
font-feature-settings: var(--font-feature-settings, normal);
|
||||||
|
font-size: $fontSize;
|
||||||
|
border-radius: $borderRadius;
|
||||||
|
|
||||||
|
&:focus-visible {
|
||||||
|
@include focused();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-component-overlay-enter {
|
||||||
|
animation: p-component-overlay-enter-animation 150ms forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-component-overlay-leave {
|
||||||
|
animation: p-component-overlay-leave-animation 150ms forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-component-overlay {
|
||||||
|
@keyframes p-component-overlay-enter-animation {
|
||||||
|
from {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
background-color: var(--maskbg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes p-component-overlay-leave-animation {
|
||||||
|
from {
|
||||||
|
background-color: var(--maskbg);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
111
src/assets/scss/theme-base/_components.scss
Normal file
111
src/assets/scss/theme-base/_components.scss
Normal file
@@ -0,0 +1,111 @@
|
|||||||
|
@import '_mixins.scss';
|
||||||
|
@import '_colors.scss';
|
||||||
|
|
||||||
|
@import './components/input/_editor.scss';
|
||||||
|
|
||||||
|
@layer primereact {
|
||||||
|
@import '_common.scss';
|
||||||
|
|
||||||
|
/*//Input*/
|
||||||
|
@import './components/input/_autocomplete.scss';
|
||||||
|
@import './components/input/_calendar.scss';
|
||||||
|
@import './components/input/_cascadeselect.scss';
|
||||||
|
@import './components/input/_checkbox.scss';
|
||||||
|
@import './components/input/tristatecheckbox.scss';
|
||||||
|
@import './components/input/_chips.scss';
|
||||||
|
@import './components/input/_colorpicker.scss';
|
||||||
|
@import './components/input/_dropdown.scss';
|
||||||
|
@import './components/input/_inputgroup.scss';
|
||||||
|
@import './components/input/_inputnumber.scss';
|
||||||
|
@import './components/input/_inputswitch.scss';
|
||||||
|
@import './components/input/_inputtext.scss';
|
||||||
|
@import './components/input/_iconfield.scss';
|
||||||
|
@import './components/input/_inputicon.scss';
|
||||||
|
@import './components/input/_inputotp.scss';
|
||||||
|
@import './components/input/_listbox.scss';
|
||||||
|
@import './components/input/_mention.scss';
|
||||||
|
@import './components/input/_multiselect.scss';
|
||||||
|
@import './components/input/_password.scss';
|
||||||
|
@import './components/input/_radiobutton.scss';
|
||||||
|
@import './components/input/_rating.scss';
|
||||||
|
@import './components/input/_selectbutton.scss';
|
||||||
|
@import './components/input/_slider.scss';
|
||||||
|
@import './components/input/_treeselect.scss';
|
||||||
|
@import './components/input/_togglebutton.scss';
|
||||||
|
|
||||||
|
/*//Button*/
|
||||||
|
@import './components/button/_button.scss';
|
||||||
|
@import './components/button/_splitbutton.scss';
|
||||||
|
@import './components/button/_speeddial.scss';
|
||||||
|
|
||||||
|
/*//Data*/
|
||||||
|
@import './components/data/_carousel.scss';
|
||||||
|
@import './components/data/_datatable.scss';
|
||||||
|
@import './components/data/_dataview.scss';
|
||||||
|
@import './components/data/_datascroller.scss';
|
||||||
|
@import './components/data/_filter.scss';
|
||||||
|
@import './components/data/_orderlist.scss';
|
||||||
|
@import './components/data/_organizationchart.scss';
|
||||||
|
@import './components/data/_paginator.scss';
|
||||||
|
@import './components/data/_picklist.scss';
|
||||||
|
@import './components/data/_tree.scss';
|
||||||
|
@import './components/data/_treetable.scss';
|
||||||
|
@import './components/data/_timeline.scss';
|
||||||
|
|
||||||
|
/*//Panel*/
|
||||||
|
@import './components/panel/_accordion.scss';
|
||||||
|
@import './components/panel/_card.scss';
|
||||||
|
@import './components/panel/_fieldset.scss';
|
||||||
|
@import './components/panel/_divider.scss';
|
||||||
|
@import './components/panel/_panel.scss';
|
||||||
|
@import './components/panel/_splitter.scss';
|
||||||
|
@import './components/panel/_stepper.scss';
|
||||||
|
@import './components/panel/_scrollpanel.scss';
|
||||||
|
@import './components/panel/_tabview.scss';
|
||||||
|
@import './components/panel/_toolbar.scss';
|
||||||
|
|
||||||
|
/*//Overlay*/
|
||||||
|
@import './components/overlay/_confirmpopup.scss';
|
||||||
|
@import './components/overlay/_dialog.scss';
|
||||||
|
@import './components/overlay/_overlaypanel.scss';
|
||||||
|
@import './components/overlay/_sidebar.scss';
|
||||||
|
@import './components/overlay/_tooltip.scss';
|
||||||
|
|
||||||
|
/*//File*/
|
||||||
|
@import './components/file/_fileupload.scss';
|
||||||
|
|
||||||
|
/*//Menu*/
|
||||||
|
@import './components/menu/_breadcrumb.scss';
|
||||||
|
@import './components/menu/_contextmenu.scss';
|
||||||
|
@import './components/menu/_dock.scss';
|
||||||
|
@import './components/menu/_megamenu.scss';
|
||||||
|
@import './components/menu/_menu.scss';
|
||||||
|
@import './components/menu/_menubar.scss';
|
||||||
|
@import './components/menu/_panelmenu.scss';
|
||||||
|
@import './components/menu/_slidemenu.scss';
|
||||||
|
@import './components/menu/_steps.scss';
|
||||||
|
@import './components/menu/_tabmenu.scss';
|
||||||
|
@import './components/menu/_tieredmenu.scss';
|
||||||
|
|
||||||
|
/*//Messages*/
|
||||||
|
@import './components/messages/_inlinemessage.scss';
|
||||||
|
@import './components/messages/_message.scss';
|
||||||
|
@import 'components/messages/toast.scss';
|
||||||
|
|
||||||
|
/*//MultiMedia*/
|
||||||
|
@import './components/multimedia/_galleria.scss';
|
||||||
|
@import './components/multimedia/_image.scss';
|
||||||
|
|
||||||
|
/*//Misc*/
|
||||||
|
@import './components/misc/_avatar.scss';
|
||||||
|
@import './components/misc/_chip.scss';
|
||||||
|
@import './components/misc/_scrolltop.scss';
|
||||||
|
@import './components/misc/_skeleton.scss';
|
||||||
|
@import './components/misc/_tag.scss';
|
||||||
|
@import './components/misc/_inplace.scss';
|
||||||
|
@import './components/misc/metergroup.scss';
|
||||||
|
@import './components/misc/_progressbar.scss';
|
||||||
|
@import './components/misc/_terminal.scss';
|
||||||
|
@import './components/misc/_blockui.scss';
|
||||||
|
@import './components/misc/_badge.scss';
|
||||||
|
}
|
||||||
243
src/assets/scss/theme-base/_mixins.scss
Normal file
243
src/assets/scss/theme-base/_mixins.scss
Normal file
@@ -0,0 +1,243 @@
|
|||||||
|
@mixin icon-override($icon) {
|
||||||
|
&:before {
|
||||||
|
content: $icon;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin focused() {
|
||||||
|
outline: $focusOutline;
|
||||||
|
outline-offset: $focusOutlineOffset;
|
||||||
|
box-shadow: $focusShadow;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin focused-inset() {
|
||||||
|
outline: $focusOutline;
|
||||||
|
outline-offset: $focusOutlineOffset;
|
||||||
|
box-shadow: inset $focusShadow;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin focused-input() {
|
||||||
|
@include focused();
|
||||||
|
border-color: $inputFocusBorderColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin focused-listitem() {
|
||||||
|
outline: $focusOutline;
|
||||||
|
outline-offset: $focusOutlineOffset;
|
||||||
|
box-shadow: $inputListItemFocusShadow;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin invalid-input() {
|
||||||
|
border-color: $inputErrorBorderColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin menuitem-link {
|
||||||
|
> .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 {
|
||||||
|
> .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) {
|
||||||
|
ul {
|
||||||
|
li {
|
||||||
|
a {
|
||||||
|
padding-left: $val * ($index + 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
@if $index < $length {
|
||||||
|
@include nested-submenu-indents($val, $index + 2, $length);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin action-icon($enabled: true) {
|
||||||
|
width: $actionIconWidth;
|
||||||
|
height: $actionIconHeight;
|
||||||
|
color: $actionIconColor;
|
||||||
|
border: $actionIconBorder;
|
||||||
|
background: $actionIconBg;
|
||||||
|
border-radius: $actionIconBorderRadius;
|
||||||
|
transition: $actionIconTransition;
|
||||||
|
|
||||||
|
@if $enabled {
|
||||||
|
&:enabled:hover {
|
||||||
|
@include action-icon-hover();
|
||||||
|
}
|
||||||
|
} @else {
|
||||||
|
&:hover {
|
||||||
|
@include action-icon-hover();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus-visible {
|
||||||
|
@include focused();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin action-icon-hover() {
|
||||||
|
color: $actionIconHoverColor;
|
||||||
|
border-color: $actionIconHoverBorderColor;
|
||||||
|
background: $actionIconHoverBg;
|
||||||
|
}
|
||||||
|
|
||||||
|
@function tint($color, $percentage) {
|
||||||
|
@return mix(#fff, $color, $percentage);
|
||||||
|
}
|
||||||
|
|
||||||
|
@function shade($color, $percentage) {
|
||||||
|
@return mix(#000, $color, $percentage);
|
||||||
|
}
|
||||||
644
src/assets/scss/theme-base/components/button/_button.scss
Normal file
644
src/assets/scss/theme-base/components/button/_button.scss
Normal file
@@ -0,0 +1,644 @@
|
|||||||
|
.p-button {
|
||||||
|
color: $buttonTextColor;
|
||||||
|
background: $buttonBg;
|
||||||
|
border: $buttonBorder;
|
||||||
|
padding: $buttonPadding;
|
||||||
|
font-size: $fontSize;
|
||||||
|
transition: $formElementTransition;
|
||||||
|
border-radius: $borderRadius;
|
||||||
|
|
||||||
|
&:not(:disabled):hover {
|
||||||
|
background: $buttonHoverBg;
|
||||||
|
color: $buttonTextHoverColor;
|
||||||
|
border-color: $buttonHoverBorderColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(:disabled):active {
|
||||||
|
background: $buttonActiveBg;
|
||||||
|
color: $buttonTextActiveColor;
|
||||||
|
border-color: $buttonActiveBorderColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-button-outlined {
|
||||||
|
background-color: transparent;
|
||||||
|
color: $buttonBg;
|
||||||
|
border: $outlinedButtonBorder;
|
||||||
|
|
||||||
|
&:not(:disabled):hover {
|
||||||
|
background: rgba($buttonBg, $textButtonHoverBgOpacity);
|
||||||
|
color: $buttonBg;
|
||||||
|
border: $outlinedButtonBorder;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(:disabled):active {
|
||||||
|
background: rgba($buttonBg, $textButtonActiveBgOpacity);
|
||||||
|
color: $buttonBg;
|
||||||
|
border: $outlinedButtonBorder;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-button-plain {
|
||||||
|
color: $plainButtonTextColor;
|
||||||
|
border-color: $plainButtonTextColor;
|
||||||
|
|
||||||
|
&:not(:disabled):hover {
|
||||||
|
background: $plainButtonHoverBgColor;
|
||||||
|
color: $plainButtonTextColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(:disabled):active {
|
||||||
|
background: $plainButtonActiveBgColor;
|
||||||
|
color: $plainButtonTextColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-button-text {
|
||||||
|
background-color: transparent;
|
||||||
|
color: $buttonBg;
|
||||||
|
border-color: transparent;
|
||||||
|
|
||||||
|
&:not(:disabled):hover {
|
||||||
|
background: rgba($buttonBg, $textButtonHoverBgOpacity);
|
||||||
|
color: $buttonBg;
|
||||||
|
border-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(:disabled):active {
|
||||||
|
background: rgba($buttonBg, $textButtonActiveBgOpacity);
|
||||||
|
color: $buttonBg;
|
||||||
|
border-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-button-plain {
|
||||||
|
color: $plainButtonTextColor;
|
||||||
|
|
||||||
|
&:not(:disabled):hover {
|
||||||
|
background: $plainButtonHoverBgColor;
|
||||||
|
color: $plainButtonTextColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(:disabled):active {
|
||||||
|
background: $plainButtonActiveBgColor;
|
||||||
|
color: $plainButtonTextColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
@include focused();
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-button-label {
|
||||||
|
transition-duration: $transitionDuration;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-button-icon-left {
|
||||||
|
margin-right: $inlineSpacing;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-button-icon-right {
|
||||||
|
margin-left: $inlineSpacing;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-button-icon-bottom {
|
||||||
|
margin-top: $inlineSpacing;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-button-icon-top {
|
||||||
|
margin-bottom: $inlineSpacing;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-badge {
|
||||||
|
margin-left: $inlineSpacing;
|
||||||
|
min-width: $fontSize;
|
||||||
|
height: $fontSize;
|
||||||
|
line-height: $fontSize;
|
||||||
|
color: $buttonBg;
|
||||||
|
background-color: $buttonTextColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-button-raised {
|
||||||
|
box-shadow: $raisedButtonShadow;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-button-rounded {
|
||||||
|
border-radius: $roundedButtonBorderRadius;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-button-icon-only {
|
||||||
|
width: $buttonIconOnlyWidth;
|
||||||
|
padding: $buttonIconOnlyPadding;
|
||||||
|
|
||||||
|
.p-button-icon-left,
|
||||||
|
.p-button-icon-right {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-button-rounded {
|
||||||
|
border-radius: 50%;
|
||||||
|
height: $buttonIconOnlyWidth;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-button-sm {
|
||||||
|
@include scaledFontSize($fontSize, $scaleSM);
|
||||||
|
@include scaledPadding($buttonPadding, $scaleSM);
|
||||||
|
|
||||||
|
.p-button-icon {
|
||||||
|
@include scaledFontSize($primeIconFontSize, $scaleSM);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-button-lg {
|
||||||
|
@include scaledFontSize($fontSize, $scaleLG);
|
||||||
|
@include scaledPadding($buttonPadding, $scaleLG);
|
||||||
|
|
||||||
|
.p-button-icon {
|
||||||
|
@include scaledFontSize($primeIconFontSize, $scaleLG);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-button-loading-label-only {
|
||||||
|
&.p-button-loading-left {
|
||||||
|
.p-button-label {
|
||||||
|
margin-left: $inlineSpacing;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-button-loading-right {
|
||||||
|
.p-button-label {
|
||||||
|
margin-right: $inlineSpacing;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-button-loading-top {
|
||||||
|
.p-button-label {
|
||||||
|
margin-top: $inlineSpacing;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-button-loading-bottom {
|
||||||
|
.p-button-label {
|
||||||
|
margin-bottom: $inlineSpacing;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-button-loading-icon {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-fluid {
|
||||||
|
.p-button {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-button-icon-only {
|
||||||
|
width: $buttonIconOnlyWidth;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-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, .p-fileupload-choose.p-button-secondary {
|
||||||
|
color: $secondaryButtonTextColor;
|
||||||
|
background: $secondaryButtonBg;
|
||||||
|
border: $secondaryButtonBorder;
|
||||||
|
|
||||||
|
&:not(:disabled):hover {
|
||||||
|
background: $secondaryButtonHoverBg;
|
||||||
|
color: $secondaryButtonTextHoverColor;
|
||||||
|
border-color: $secondaryButtonHoverBorderColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(:disabled):focus {
|
||||||
|
box-shadow: $secondaryButtonFocusShadow;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(:disabled):active {
|
||||||
|
background: $secondaryButtonActiveBg;
|
||||||
|
color: $secondaryButtonTextActiveColor;
|
||||||
|
border-color: $secondaryButtonActiveBorderColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-button-outlined {
|
||||||
|
background-color: transparent;
|
||||||
|
color: $secondaryButtonBg;
|
||||||
|
border: $outlinedButtonBorder;
|
||||||
|
|
||||||
|
&:not(:disabled):hover {
|
||||||
|
background: rgba($secondaryButtonBg, $textButtonHoverBgOpacity);
|
||||||
|
color: $secondaryButtonBg;
|
||||||
|
border: $outlinedButtonBorder;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(:disabled):active {
|
||||||
|
background: rgba($secondaryButtonBg, $textButtonActiveBgOpacity);
|
||||||
|
color: $secondaryButtonBg;
|
||||||
|
border: $outlinedButtonBorder;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-button-text {
|
||||||
|
background-color: transparent;
|
||||||
|
color: $secondaryButtonBg;
|
||||||
|
border-color: transparent;
|
||||||
|
|
||||||
|
&:not(:disabled):hover {
|
||||||
|
background: rgba($secondaryButtonBg, $textButtonHoverBgOpacity);
|
||||||
|
border-color: transparent;
|
||||||
|
color: $secondaryButtonBg;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(:disabled):active {
|
||||||
|
background: rgba($secondaryButtonBg, $textButtonActiveBgOpacity);
|
||||||
|
border-color: transparent;
|
||||||
|
color: $secondaryButtonBg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
|
||||||
|
color: $infoButtonTextColor;
|
||||||
|
background: $infoButtonBg;
|
||||||
|
border: $infoButtonBorder;
|
||||||
|
|
||||||
|
&:not(:disabled):hover {
|
||||||
|
background: $infoButtonHoverBg;
|
||||||
|
color: $infoButtonTextHoverColor;
|
||||||
|
border-color: $infoButtonHoverBorderColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(:disabled):focus {
|
||||||
|
box-shadow: $infoButtonFocusShadow;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(:disabled):active {
|
||||||
|
background: $infoButtonActiveBg;
|
||||||
|
color: $infoButtonTextActiveColor;
|
||||||
|
border-color: $infoButtonActiveBorderColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-button-outlined {
|
||||||
|
background-color: transparent;
|
||||||
|
color: $infoButtonBg;
|
||||||
|
border: $outlinedButtonBorder;
|
||||||
|
|
||||||
|
&:not(:disabled):hover {
|
||||||
|
background: rgba($infoButtonBg, $textButtonHoverBgOpacity);
|
||||||
|
color: $infoButtonBg;
|
||||||
|
border: $outlinedButtonBorder;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(:disabled):active {
|
||||||
|
background: rgba($infoButtonBg, $textButtonActiveBgOpacity);
|
||||||
|
color: $infoButtonBg;
|
||||||
|
border: $outlinedButtonBorder;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-button-text {
|
||||||
|
background-color: transparent;
|
||||||
|
color: $infoButtonBg;
|
||||||
|
border-color: transparent;
|
||||||
|
|
||||||
|
&:not(:disabled):hover {
|
||||||
|
background: rgba($infoButtonBg, $textButtonHoverBgOpacity);
|
||||||
|
border-color: transparent;
|
||||||
|
color: $infoButtonBg;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(:disabled):active {
|
||||||
|
background: rgba($infoButtonBg, $textButtonActiveBgOpacity);
|
||||||
|
border-color: transparent;
|
||||||
|
color: $infoButtonBg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
|
||||||
|
color: $successButtonTextColor;
|
||||||
|
background: $successButtonBg;
|
||||||
|
border: $successButtonBorder;
|
||||||
|
|
||||||
|
&:not(:disabled):hover {
|
||||||
|
background: $successButtonHoverBg;
|
||||||
|
color: $successButtonTextHoverColor;
|
||||||
|
border-color: $successButtonHoverBorderColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(:disabled):focus {
|
||||||
|
box-shadow: $successButtonFocusShadow;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(:disabled):active {
|
||||||
|
background: $successButtonActiveBg;
|
||||||
|
color: $successButtonTextActiveColor;
|
||||||
|
border-color: $successButtonActiveBorderColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-button-outlined {
|
||||||
|
background-color: transparent;
|
||||||
|
color: $successButtonBg;
|
||||||
|
border: $outlinedButtonBorder;
|
||||||
|
|
||||||
|
&:not(:disabled):hover {
|
||||||
|
background: rgba($successButtonBg, $textButtonHoverBgOpacity);
|
||||||
|
color: $successButtonBg;
|
||||||
|
border: $outlinedButtonBorder;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(:disabled):active {
|
||||||
|
background: rgba($successButtonBg, $textButtonActiveBgOpacity);
|
||||||
|
color: $successButtonBg;
|
||||||
|
border: $outlinedButtonBorder;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-button-text {
|
||||||
|
background-color: transparent;
|
||||||
|
color: $successButtonBg;
|
||||||
|
border-color: transparent;
|
||||||
|
|
||||||
|
&:not(:disabled):hover {
|
||||||
|
background: rgba($successButtonBg, $textButtonHoverBgOpacity);
|
||||||
|
border-color: transparent;
|
||||||
|
color: $successButtonBg;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(:disabled):active {
|
||||||
|
background: rgba($successButtonBg, $textButtonActiveBgOpacity);
|
||||||
|
border-color: transparent;
|
||||||
|
color: $successButtonBg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
|
||||||
|
color: $warningButtonTextColor;
|
||||||
|
background: $warningButtonBg;
|
||||||
|
border: $warningButtonBorder;
|
||||||
|
|
||||||
|
&:not(:disabled):hover {
|
||||||
|
background: $warningButtonHoverBg;
|
||||||
|
color: $warningButtonTextHoverColor;
|
||||||
|
border-color: $warningButtonHoverBorderColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(:disabled):focus {
|
||||||
|
box-shadow: $warningButtonFocusShadow;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(:disabled):active {
|
||||||
|
background: $warningButtonActiveBg;
|
||||||
|
color: $warningButtonTextActiveColor;
|
||||||
|
border-color: $warningButtonActiveBorderColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-button-outlined {
|
||||||
|
background-color: transparent;
|
||||||
|
color: $warningButtonBg;
|
||||||
|
border: $outlinedButtonBorder;
|
||||||
|
|
||||||
|
&:not(:disabled):hover {
|
||||||
|
background: rgba($warningButtonBg, $textButtonHoverBgOpacity);
|
||||||
|
color: $warningButtonBg;
|
||||||
|
border: $outlinedButtonBorder;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(:disabled):active {
|
||||||
|
background: rgba($warningButtonBg, $textButtonActiveBgOpacity);
|
||||||
|
color: $warningButtonBg;
|
||||||
|
border: $outlinedButtonBorder;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-button-text {
|
||||||
|
background-color: transparent;
|
||||||
|
color: $warningButtonBg;
|
||||||
|
border-color: transparent;
|
||||||
|
|
||||||
|
&:not(:disabled):hover {
|
||||||
|
background: rgba($warningButtonBg, $textButtonHoverBgOpacity);
|
||||||
|
border-color: transparent;
|
||||||
|
color: $warningButtonBg;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(:disabled):active {
|
||||||
|
background: rgba($warningButtonBg, $textButtonActiveBgOpacity);
|
||||||
|
border-color: transparent;
|
||||||
|
color: $warningButtonBg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
|
||||||
|
color: $helpButtonTextColor;
|
||||||
|
background: $helpButtonBg;
|
||||||
|
border: $helpButtonBorder;
|
||||||
|
|
||||||
|
&:not(:disabled):hover {
|
||||||
|
background: $helpButtonHoverBg;
|
||||||
|
color: $helpButtonTextHoverColor;
|
||||||
|
border-color: $helpButtonHoverBorderColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(:disabled):focus {
|
||||||
|
box-shadow: $helpButtonFocusShadow;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(:disabled):active {
|
||||||
|
background: $helpButtonActiveBg;
|
||||||
|
color: $helpButtonTextActiveColor;
|
||||||
|
border-color: $helpButtonActiveBorderColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-button-outlined {
|
||||||
|
background-color: transparent;
|
||||||
|
color: $helpButtonBg;
|
||||||
|
border: $outlinedButtonBorder;
|
||||||
|
|
||||||
|
&:not(:disabled):hover {
|
||||||
|
background: rgba($helpButtonBg, $textButtonHoverBgOpacity);
|
||||||
|
color: $helpButtonBg;
|
||||||
|
border: $outlinedButtonBorder;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(:disabled):active {
|
||||||
|
background: rgba($helpButtonBg, $textButtonActiveBgOpacity);
|
||||||
|
color: $helpButtonBg;
|
||||||
|
border: $outlinedButtonBorder;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-button-text {
|
||||||
|
background-color: transparent;
|
||||||
|
color: $helpButtonBg;
|
||||||
|
border-color: transparent;
|
||||||
|
|
||||||
|
&:not(:disabled):hover {
|
||||||
|
background: rgba($helpButtonBg, $textButtonHoverBgOpacity);
|
||||||
|
border-color: transparent;
|
||||||
|
color: $helpButtonBg;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(:disabled):active {
|
||||||
|
background: rgba($helpButtonBg, $textButtonActiveBgOpacity);
|
||||||
|
border-color: transparent;
|
||||||
|
color: $helpButtonBg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
|
||||||
|
color: $dangerButtonTextColor;
|
||||||
|
background: $dangerButtonBg;
|
||||||
|
border: $dangerButtonBorder;
|
||||||
|
|
||||||
|
&:not(:disabled):hover {
|
||||||
|
background: $dangerButtonHoverBg;
|
||||||
|
color: $dangerButtonTextHoverColor;
|
||||||
|
border-color: $dangerButtonHoverBorderColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(:disabled):focus {
|
||||||
|
box-shadow: $dangerButtonFocusShadow;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(:disabled):active {
|
||||||
|
background: $dangerButtonActiveBg;
|
||||||
|
color: $dangerButtonTextActiveColor;
|
||||||
|
border-color: $dangerButtonActiveBorderColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-button-outlined {
|
||||||
|
background-color: transparent;
|
||||||
|
color: $dangerButtonBg;
|
||||||
|
border: $outlinedButtonBorder;
|
||||||
|
|
||||||
|
&:not(:disabled):hover {
|
||||||
|
background: rgba($dangerButtonBg, $textButtonHoverBgOpacity);
|
||||||
|
color: $dangerButtonBg;
|
||||||
|
border: $outlinedButtonBorder;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(:disabled):active {
|
||||||
|
background: rgba($dangerButtonBg, $textButtonActiveBgOpacity);
|
||||||
|
color: $dangerButtonBg;
|
||||||
|
border: $outlinedButtonBorder;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-button-text {
|
||||||
|
background-color: transparent;
|
||||||
|
color: $dangerButtonBg;
|
||||||
|
border-color: transparent;
|
||||||
|
|
||||||
|
&:not(:disabled):hover {
|
||||||
|
background: rgba($dangerButtonBg, $textButtonHoverBgOpacity);
|
||||||
|
border-color: transparent;
|
||||||
|
color: $dangerButtonBg;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(:disabled):active {
|
||||||
|
background: rgba($dangerButtonBg, $textButtonActiveBgOpacity);
|
||||||
|
border-color: transparent;
|
||||||
|
color: $dangerButtonBg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@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;
|
||||||
|
}
|
||||||
|
}
|
||||||
91
src/assets/scss/theme-base/components/button/_speeddial.scss
Normal file
91
src/assets/scss/theme-base/components/button/_speeddial.scss
Normal file
@@ -0,0 +1,91 @@
|
|||||||
|
@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-action {
|
||||||
|
width: $speedDialActionWidth;
|
||||||
|
height: $speedDialActionHeight;
|
||||||
|
background: $speedDialActionBg;
|
||||||
|
color: $speedDialActionTextColor;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: $speedDialActionHoverBg;
|
||||||
|
color: $speedDialActionTextHoverColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-speeddial-direction-up {
|
||||||
|
.p-speeddial-item {
|
||||||
|
margin: math.div($inlineSpacing, 2);
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
margin-bottom: $inlineSpacing;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-speeddial-direction-down {
|
||||||
|
.p-speeddial-item {
|
||||||
|
margin: math.div($inlineSpacing, 2);
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
margin-top: $inlineSpacing;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-speeddial-direction-left {
|
||||||
|
.p-speeddial-item {
|
||||||
|
margin: 0 math.div($inlineSpacing, 2);
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
margin-right: $inlineSpacing;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-speeddial-direction-right {
|
||||||
|
.p-speeddial-item {
|
||||||
|
margin: 0 math.div($inlineSpacing, 2);
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
margin-left: $inlineSpacing;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-speeddial-circle,
|
||||||
|
.p-speeddial-semi-circle,
|
||||||
|
.p-speeddial-quarter-circle {
|
||||||
|
.p-speeddial-item {
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
&:first-child,
|
||||||
|
&:last-child {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-speeddial-mask {
|
||||||
|
background-color: $maskBg;
|
||||||
|
border-radius: $borderRadius;
|
||||||
|
}
|
||||||
359
src/assets/scss/theme-base/components/button/_splitbutton.scss
Normal file
359
src/assets/scss/theme-base/components/button/_splitbutton.scss
Normal file
@@ -0,0 +1,359 @@
|
|||||||
|
.p-splitbutton {
|
||||||
|
border-radius: $borderRadius;
|
||||||
|
|
||||||
|
&.p-button-outlined {
|
||||||
|
> .p-button {
|
||||||
|
background-color: transparent;
|
||||||
|
color: $buttonBg;
|
||||||
|
border: $outlinedButtonBorder;
|
||||||
|
|
||||||
|
&:not(:disabled):hover {
|
||||||
|
background: rgba($buttonBg, $textButtonHoverBgOpacity);
|
||||||
|
color: $buttonBg;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(:disabled):active {
|
||||||
|
background: rgba($buttonBg, $textButtonActiveBgOpacity);
|
||||||
|
color: $buttonBg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-button-plain {
|
||||||
|
> .p-button {
|
||||||
|
color: $plainButtonTextColor;
|
||||||
|
border-color: $plainButtonTextColor;
|
||||||
|
|
||||||
|
&:not(:disabled):hover {
|
||||||
|
background: $plainButtonHoverBgColor;
|
||||||
|
color: $plainButtonTextColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(:disabled):active {
|
||||||
|
background: $plainButtonActiveBgColor;
|
||||||
|
color: $plainButtonTextColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-button-text {
|
||||||
|
> .p-button {
|
||||||
|
background-color: transparent;
|
||||||
|
color: $buttonBg;
|
||||||
|
border-color: transparent;
|
||||||
|
|
||||||
|
&:not(:disabled):hover {
|
||||||
|
background: rgba($buttonBg, $textButtonHoverBgOpacity);
|
||||||
|
color: $buttonBg;
|
||||||
|
border-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(:disabled):active {
|
||||||
|
background: rgba($buttonBg, $textButtonActiveBgOpacity);
|
||||||
|
color: $buttonBg;
|
||||||
|
border-color: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-button-plain {
|
||||||
|
> .p-button {
|
||||||
|
color: $plainButtonTextColor;
|
||||||
|
|
||||||
|
&:not(:disabled):hover {
|
||||||
|
background: $plainButtonHoverBgColor;
|
||||||
|
color: $plainButtonTextColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(:disabled):active {
|
||||||
|
background: $plainButtonActiveBgColor;
|
||||||
|
color: $plainButtonTextColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-button-raised {
|
||||||
|
box-shadow: $raisedButtonShadow;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-button-rounded {
|
||||||
|
border-radius: $roundedButtonBorderRadius;
|
||||||
|
|
||||||
|
> .p-button {
|
||||||
|
border-radius: $roundedButtonBorderRadius;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-button-sm {
|
||||||
|
> .p-button {
|
||||||
|
@include scaledFontSize($fontSize, $scaleSM);
|
||||||
|
@include scaledPadding($buttonPadding, $scaleSM);
|
||||||
|
|
||||||
|
.p-button-icon {
|
||||||
|
@include scaledFontSize($primeIconFontSize, $scaleSM);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-button-lg {
|
||||||
|
> .p-button {
|
||||||
|
@include scaledFontSize($fontSize, $scaleLG);
|
||||||
|
@include scaledPadding($buttonPadding, $scaleLG);
|
||||||
|
|
||||||
|
&.p-button-icon-only {
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-button-icon {
|
||||||
|
@include scaledFontSize($primeIconFontSize, $scaleLG);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-splitbutton-menubutton,
|
||||||
|
.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button,
|
||||||
|
.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button {
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-splitbutton.p-button-secondary {
|
||||||
|
&.p-button-outlined {
|
||||||
|
> .p-button {
|
||||||
|
background-color: transparent;
|
||||||
|
color: $secondaryButtonBg;
|
||||||
|
border: $outlinedButtonBorder;
|
||||||
|
|
||||||
|
&:not(:disabled):hover {
|
||||||
|
background: rgba($secondaryButtonBg, $textButtonHoverBgOpacity);
|
||||||
|
color: $secondaryButtonBg;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(:disabled):active {
|
||||||
|
background: rgba($secondaryButtonBg, $textButtonActiveBgOpacity);
|
||||||
|
color: $secondaryButtonBg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-button-text {
|
||||||
|
> .p-button {
|
||||||
|
background-color: transparent;
|
||||||
|
color: $secondaryButtonBg;
|
||||||
|
border-color: transparent;
|
||||||
|
|
||||||
|
&:not(:disabled):hover {
|
||||||
|
background: rgba($secondaryButtonBg, $textButtonHoverBgOpacity);
|
||||||
|
border-color: transparent;
|
||||||
|
color: $secondaryButtonBg;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(:disabled):active {
|
||||||
|
background: rgba($secondaryButtonBg, $textButtonActiveBgOpacity);
|
||||||
|
border-color: transparent;
|
||||||
|
color: $secondaryButtonBg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-splitbutton.p-button-info {
|
||||||
|
&.p-button-outlined {
|
||||||
|
> .p-button {
|
||||||
|
background-color: transparent;
|
||||||
|
color: $infoButtonBg;
|
||||||
|
border: $outlinedButtonBorder;
|
||||||
|
|
||||||
|
&:not(:disabled):hover {
|
||||||
|
background: rgba($infoButtonBg, $textButtonHoverBgOpacity);
|
||||||
|
color: $infoButtonBg;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(:disabled):active {
|
||||||
|
background: rgba($infoButtonBg, $textButtonActiveBgOpacity);
|
||||||
|
color: $infoButtonBg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-button-text {
|
||||||
|
> .p-button {
|
||||||
|
background-color: transparent;
|
||||||
|
color: $infoButtonBg;
|
||||||
|
border-color: transparent;
|
||||||
|
|
||||||
|
&:not(:disabled):hover {
|
||||||
|
background: rgba($infoButtonBg, $textButtonHoverBgOpacity);
|
||||||
|
border-color: transparent;
|
||||||
|
color: $infoButtonBg;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(:disabled):active {
|
||||||
|
background: rgba($infoButtonBg, $textButtonActiveBgOpacity);
|
||||||
|
border-color: transparent;
|
||||||
|
color: $infoButtonBg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-splitbutton.p-button-success {
|
||||||
|
&.p-button-outlined {
|
||||||
|
> .p-button {
|
||||||
|
background-color: transparent;
|
||||||
|
color: $successButtonBg;
|
||||||
|
border: $outlinedButtonBorder;
|
||||||
|
|
||||||
|
&:not(:disabled):hover {
|
||||||
|
background: rgba($successButtonBg, $textButtonHoverBgOpacity);
|
||||||
|
color: $successButtonBg;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(:disabled):active {
|
||||||
|
background: rgba($successButtonBg, $textButtonActiveBgOpacity);
|
||||||
|
color: $successButtonBg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-button-text {
|
||||||
|
> .p-button {
|
||||||
|
background-color: transparent;
|
||||||
|
color: $successButtonBg;
|
||||||
|
border-color: transparent;
|
||||||
|
|
||||||
|
&:not(:disabled):hover {
|
||||||
|
background: rgba($successButtonBg, $textButtonHoverBgOpacity);
|
||||||
|
border-color: transparent;
|
||||||
|
color: $successButtonBg;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(:disabled):active {
|
||||||
|
background: rgba($successButtonBg, $textButtonActiveBgOpacity);
|
||||||
|
border-color: transparent;
|
||||||
|
color: $successButtonBg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-splitbutton.p-button-warning {
|
||||||
|
&.p-button-outlined {
|
||||||
|
> .p-button {
|
||||||
|
background-color: transparent;
|
||||||
|
color: $warningButtonBg;
|
||||||
|
border: $outlinedButtonBorder;
|
||||||
|
|
||||||
|
&:not(:disabled):hover {
|
||||||
|
background: rgba($warningButtonBg, $textButtonHoverBgOpacity);
|
||||||
|
color: $warningButtonBg;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(:disabled):active {
|
||||||
|
background: rgba($warningButtonBg, $textButtonActiveBgOpacity);
|
||||||
|
color: $warningButtonBg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-button-text {
|
||||||
|
> .p-button {
|
||||||
|
background-color: transparent;
|
||||||
|
color: $warningButtonBg;
|
||||||
|
border-color: transparent;
|
||||||
|
|
||||||
|
&:not(:disabled):hover {
|
||||||
|
background: rgba($warningButtonBg, $textButtonHoverBgOpacity);
|
||||||
|
border-color: transparent;
|
||||||
|
color: $warningButtonBg;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(:disabled):active {
|
||||||
|
background: rgba($warningButtonBg, $textButtonActiveBgOpacity);
|
||||||
|
border-color: transparent;
|
||||||
|
color: $warningButtonBg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-splitbutton.p-button-help {
|
||||||
|
&.p-button-outlined {
|
||||||
|
> .p-button {
|
||||||
|
background-color: transparent;
|
||||||
|
color: $helpButtonBg;
|
||||||
|
border: $outlinedButtonBorder;
|
||||||
|
|
||||||
|
&:not(:disabled):hover {
|
||||||
|
background: rgba($helpButtonBg, $textButtonHoverBgOpacity);
|
||||||
|
color: $helpButtonBg;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(:disabled):active {
|
||||||
|
background: rgba($helpButtonBg, $textButtonActiveBgOpacity);
|
||||||
|
color: $helpButtonBg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-button-text {
|
||||||
|
> .p-button {
|
||||||
|
background-color: transparent;
|
||||||
|
color: $helpButtonBg;
|
||||||
|
border-color: transparent;
|
||||||
|
|
||||||
|
&:not(:disabled):hover {
|
||||||
|
background: rgba($helpButtonBg, $textButtonHoverBgOpacity);
|
||||||
|
border-color: transparent;
|
||||||
|
color: $helpButtonBg;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(:disabled):active {
|
||||||
|
background: rgba($helpButtonBg, $textButtonActiveBgOpacity);
|
||||||
|
border-color: transparent;
|
||||||
|
color: $helpButtonBg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-splitbutton.p-button-danger {
|
||||||
|
&.p-button-outlined {
|
||||||
|
> .p-button {
|
||||||
|
background-color: transparent;
|
||||||
|
color: $dangerButtonBg;
|
||||||
|
border: $outlinedButtonBorder;
|
||||||
|
|
||||||
|
&:not(:disabled):hover {
|
||||||
|
background: rgba($dangerButtonBg, $textButtonHoverBgOpacity);
|
||||||
|
color: $dangerButtonBg;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(:disabled):active {
|
||||||
|
background: rgba($dangerButtonBg, $textButtonActiveBgOpacity);
|
||||||
|
color: $dangerButtonBg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-button-text {
|
||||||
|
> .p-button {
|
||||||
|
background-color: transparent;
|
||||||
|
color: $dangerButtonBg;
|
||||||
|
border-color: transparent;
|
||||||
|
|
||||||
|
&:not(:disabled):hover {
|
||||||
|
background: rgba($dangerButtonBg, $textButtonHoverBgOpacity);
|
||||||
|
border-color: transparent;
|
||||||
|
color: $dangerButtonBg;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(:disabled):active {
|
||||||
|
background: rgba($dangerButtonBg, $textButtonActiveBgOpacity);
|
||||||
|
border-color: transparent;
|
||||||
|
color: $dangerButtonBg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
37
src/assets/scss/theme-base/components/data/_carousel.scss
Normal file
37
src/assets/scss/theme-base/components/data/_carousel.scss
Normal file
@@ -0,0 +1,37 @@
|
|||||||
|
.p-carousel {
|
||||||
|
.p-carousel-content {
|
||||||
|
.p-carousel-prev,
|
||||||
|
.p-carousel-next {
|
||||||
|
margin: $inlineSpacing;
|
||||||
|
@include action-icon();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,47 @@
|
|||||||
|
.p-datascroller {
|
||||||
|
.p-paginator-top {
|
||||||
|
border-width: $tableTopPaginatorBorderWidth;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-paginator-bottom {
|
||||||
|
border-width: $tableBottomPaginatorBorderWidth;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-datascroller-header {
|
||||||
|
background: $tableHeaderBg;
|
||||||
|
color: $tableHeaderTextColor;
|
||||||
|
border: $tableHeaderBorder;
|
||||||
|
border-width: $tableHeaderBorderWidth;
|
||||||
|
padding: $tableHeaderPadding;
|
||||||
|
font-weight: $tableHeaderFontWeight;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-datascroller-content {
|
||||||
|
background: $tableBodyRowBg;
|
||||||
|
color: $tableBodyRowTextColor;
|
||||||
|
border: $dataViewContentBorder;
|
||||||
|
padding: $dataViewContentPadding;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-datascroller-inline {
|
||||||
|
.p-datascroller-list {
|
||||||
|
> li {
|
||||||
|
border: $dataViewListItemBorder;
|
||||||
|
border-width: $dataViewListItemBorderWidth;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-datascroller-footer {
|
||||||
|
background: $tableFooterBg;
|
||||||
|
color: $tableFooterTextColor;
|
||||||
|
border: $tableFooterBorder;
|
||||||
|
border-width: $tableFooterBorderWidth;
|
||||||
|
padding: $tableFooterPadding;
|
||||||
|
font-weight: $tableFooterFontWeight;
|
||||||
|
border-bottom-left-radius: $borderRadius;
|
||||||
|
border-bottom-right-radius: $borderRadius;
|
||||||
|
}
|
||||||
|
}
|
||||||
389
src/assets/scss/theme-base/components/data/_datatable.scss
Normal file
389
src/assets/scss/theme-base/components/data/_datatable.scss
Normal file
@@ -0,0 +1,389 @@
|
|||||||
|
.p-datatable {
|
||||||
|
.p-paginator-top {
|
||||||
|
border-width: $tableTopPaginatorBorderWidth;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-paginator-bottom {
|
||||||
|
border-width: $tableBottomPaginatorBorderWidth;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-datatable-header {
|
||||||
|
background: $tableHeaderBg;
|
||||||
|
color: $tableHeaderTextColor;
|
||||||
|
border: $tableHeaderBorder;
|
||||||
|
border-width: $tableHeaderBorderWidth;
|
||||||
|
padding: $tableHeaderPadding;
|
||||||
|
font-weight: $tableHeaderFontWeight;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-datatable-footer {
|
||||||
|
background: $tableFooterBg;
|
||||||
|
color: $tableFooterTextColor;
|
||||||
|
border: $tableFooterBorder;
|
||||||
|
border-width: $tableFooterBorderWidth;
|
||||||
|
padding: $tableFooterPadding;
|
||||||
|
font-weight: $tableFooterFontWeight;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-datatable-thead > tr > th {
|
||||||
|
text-align: $tableCellContentAlignment;
|
||||||
|
padding: $tableHeaderCellPadding;
|
||||||
|
border: $tableHeaderCellBorder;
|
||||||
|
border-width: $tableHeaderCellBorderWidth;
|
||||||
|
font-weight: $tableHeaderCellFontWeight;
|
||||||
|
color: $tableHeaderCellTextColor;
|
||||||
|
background: $tableHeaderCellBg;
|
||||||
|
transition: $listItemTransition;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-datatable-tfoot > tr > td {
|
||||||
|
text-align: $tableCellContentAlignment;
|
||||||
|
padding: $tableFooterCellPadding;
|
||||||
|
border: $tableFooterCellBorder;
|
||||||
|
border-width: $tableFooterCellBorderWidth;
|
||||||
|
font-weight: $tableFooterCellFontWeight;
|
||||||
|
color: $tableFooterCellTextColor;
|
||||||
|
background: $tableFooterCellBg;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-sortable-column {
|
||||||
|
.p-sortable-column-icon {
|
||||||
|
color: $tableHeaderCellIconColor;
|
||||||
|
margin-left: $inlineSpacing;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-sortable-column-badge {
|
||||||
|
border-radius: 50%;
|
||||||
|
height: $tableSortableColumnBadgeSize;
|
||||||
|
min-width: $tableSortableColumnBadgeSize;
|
||||||
|
line-height: $tableSortableColumnBadgeSize;
|
||||||
|
color: $highlightTextColor;
|
||||||
|
background: $highlightBg;
|
||||||
|
margin-left: $inlineSpacing;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(.p-highlight):not(.p-sortable-disabled):hover {
|
||||||
|
background: $tableHeaderCellHoverBg;
|
||||||
|
color: $tableHeaderCellTextHoverColor;
|
||||||
|
|
||||||
|
.p-sortable-column-icon {
|
||||||
|
color: $tableHeaderCellIconHoverColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-highlight {
|
||||||
|
background: $tableHeaderCellHighlightBg;
|
||||||
|
color: $tableHeaderCellHighlightTextColor;
|
||||||
|
|
||||||
|
.p-sortable-column-icon {
|
||||||
|
color: $tableHeaderCellHighlightTextColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(.p-sortable-disabled):hover {
|
||||||
|
background: $tableHeaderCellHighlightHoverBg;
|
||||||
|
color: $tableHeaderCellHighlightTextColor;
|
||||||
|
|
||||||
|
.p-sortable-column-icon {
|
||||||
|
color: $tableHeaderCellHighlightTextColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus-visible {
|
||||||
|
box-shadow: $inputListItemFocusShadow;
|
||||||
|
outline: 0 none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-datatable-tbody {
|
||||||
|
> tr {
|
||||||
|
background: $tableBodyRowBg;
|
||||||
|
color: $tableBodyRowTextColor;
|
||||||
|
transition: $listItemTransition;
|
||||||
|
|
||||||
|
> td {
|
||||||
|
text-align: $tableCellContentAlignment;
|
||||||
|
border: $tableBodyCellBorder;
|
||||||
|
border-width: $tableBodyCellBorderWidth;
|
||||||
|
padding: $tableBodyCellPadding;
|
||||||
|
|
||||||
|
.p-row-toggler,
|
||||||
|
.p-row-editor-init,
|
||||||
|
.p-row-editor-save,
|
||||||
|
.p-row-editor-cancel {
|
||||||
|
@include action-icon();
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-row-editor-save {
|
||||||
|
margin-right: $inlineSpacing;
|
||||||
|
}
|
||||||
|
|
||||||
|
> .p-column-title {
|
||||||
|
font-weight: $tableHeaderCellFontWeight;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-highlight {
|
||||||
|
background: $highlightBg;
|
||||||
|
color: $highlightTextColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-highlight {
|
||||||
|
background: $highlightBg;
|
||||||
|
color: $highlightTextColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-highlight-contextmenu {
|
||||||
|
outline: 0.15rem solid $focusOutlineColor;
|
||||||
|
outline-offset: -0.15rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-datatable-dragpoint-top > td {
|
||||||
|
box-shadow: inset 0 2px 0 0 $highlightBg;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-datatable-dragpoint-bottom > td {
|
||||||
|
box-shadow: inset 0 -2px 0 0 $highlightBg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-datatable-selectable {
|
||||||
|
.p-datatable-tbody > tr.p-selectable-row {
|
||||||
|
&:not(.p-highlight):not(.p-datatable-emptymessage):hover {
|
||||||
|
background: $tableBodyRowHoverBg;
|
||||||
|
color: $tableBodyRowTextHoverColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus-visible {
|
||||||
|
outline: .15rem solid $focusOutlineColor;
|
||||||
|
outline-offset: -.15rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-datatable-selectable-cell {
|
||||||
|
.p-datatable-tbody > tr.p-selectable-row {
|
||||||
|
& > td.p-selectable-cell {
|
||||||
|
&:not(.p-highlight):hover {
|
||||||
|
background: $tableBodyRowHoverBg;
|
||||||
|
color: $tableBodyRowTextHoverColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus-visible {
|
||||||
|
outline: .15rem solid $focusOutlineColor;
|
||||||
|
outline-offset: -.15rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-datatable-hoverable-rows {
|
||||||
|
.p-datatable-tbody > tr:not(.p-highlight):not(.p-datatable-emptymessage):hover {
|
||||||
|
background: $tableBodyRowHoverBg;
|
||||||
|
color: $tableBodyRowTextHoverColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-column-resizer-helper {
|
||||||
|
background: $tableResizerHelperBg;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-datatable-scrollable-header,
|
||||||
|
.p-datatable-scrollable-footer {
|
||||||
|
background: $panelHeaderBg;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table,
|
||||||
|
&.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table {
|
||||||
|
> .p-datatable-thead,
|
||||||
|
> .p-datatable-tfoot {
|
||||||
|
background-color: $tableHeaderCellBg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-datatable-loading-icon {
|
||||||
|
font-size: $loadingIconFontSize;
|
||||||
|
&.p-icon {
|
||||||
|
width: $loadingIconFontSize;
|
||||||
|
height: $loadingIconFontSize;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-datatable-gridlines {
|
||||||
|
.p-datatable-header {
|
||||||
|
border-width: 1px 1px 0 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-datatable-footer {
|
||||||
|
border-width: 0 1px 1px 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-paginator-top {
|
||||||
|
border-width: 0 1px 0 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-paginator-bottom {
|
||||||
|
border-width: 0 1px 1px 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-datatable-thead {
|
||||||
|
> tr {
|
||||||
|
> th {
|
||||||
|
border-width: 1px 0 1px 1px;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
border-width: 1px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-datatable-tbody {
|
||||||
|
> tr {
|
||||||
|
> td {
|
||||||
|
border-width: 1px 0 0 1px;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
border-width: 1px 1px 0 1px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
> td {
|
||||||
|
border-width: 1px 0 1px 1px;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
border-width: 1px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-datatable-tfoot {
|
||||||
|
> tr {
|
||||||
|
> td {
|
||||||
|
border-width: 1px 0 1px 1px;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
border-width: 1px 1px 1px 1px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-datatable-thead + .p-datatable-tfoot {
|
||||||
|
> tr {
|
||||||
|
> td {
|
||||||
|
border-width: 0 0 1px 1px;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
border-width: 0 1px 1px 1px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody {
|
||||||
|
> tr {
|
||||||
|
> td {
|
||||||
|
border-width: 0 0 1px 1px;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
border-width: 0 1px 1px 1px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody {
|
||||||
|
> tr {
|
||||||
|
&:last-child {
|
||||||
|
> td {
|
||||||
|
border-width: 0 0 0 1px;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
border-width: 0 1px 0 1px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-datatable-striped {
|
||||||
|
.p-datatable-tbody {
|
||||||
|
> tr.p-row-odd {
|
||||||
|
background: $tableBodyRowEvenBg;
|
||||||
|
|
||||||
|
&.p-highlight {
|
||||||
|
background: $highlightBg;
|
||||||
|
color: $highlightTextColor;
|
||||||
|
|
||||||
|
.p-row-toggler {
|
||||||
|
color: $highlightTextColor;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $highlightTextColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
& + .p-row-expanded {
|
||||||
|
background: $tableBodyRowEvenBg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-datatable-sm {
|
||||||
|
.p-datatable-header {
|
||||||
|
@include scaledPadding($tableHeaderPadding, $tableScaleSM);
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-datatable-thead > tr > th {
|
||||||
|
@include scaledPadding($tableHeaderCellPadding, $tableScaleSM);
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-datatable-tbody > tr > td {
|
||||||
|
@include scaledPadding($tableBodyCellPadding, $tableScaleSM);
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-datatable-tfoot > tr > td {
|
||||||
|
@include scaledPadding($tableFooterPadding, $tableScaleSM);
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-datatable-footer {
|
||||||
|
@include scaledPadding($tableFooterPadding, $tableScaleSM);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-datatable-lg {
|
||||||
|
.p-datatable-header {
|
||||||
|
@include scaledPadding($tableHeaderPadding, $tableScaleLG);
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-datatable-thead > tr > th {
|
||||||
|
@include scaledPadding($tableHeaderCellPadding, $tableScaleLG);
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-datatable-tbody > tr > td {
|
||||||
|
@include scaledPadding($tableBodyCellPadding, $tableScaleLG);
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-datatable-tfoot > tr > td {
|
||||||
|
@include scaledPadding($tableFooterPadding, $tableScaleLG);
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-datatable-footer {
|
||||||
|
@include scaledPadding($tableFooterPadding, $tableScaleLG);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-datatable-drag-selection-helper {
|
||||||
|
background: $tableDragHelperBg;
|
||||||
|
}
|
||||||
47
src/assets/scss/theme-base/components/data/_dataview.scss
Normal file
47
src/assets/scss/theme-base/components/data/_dataview.scss
Normal file
@@ -0,0 +1,47 @@
|
|||||||
|
.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-icon {
|
||||||
|
width: $loadingIconFontSize;
|
||||||
|
height: $loadingIconFontSize;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
138
src/assets/scss/theme-base/components/data/_filter.scss
Normal file
138
src/assets/scss/theme-base/components/data/_filter.scss
Normal file
@@ -0,0 +1,138 @@
|
|||||||
|
.p-column-filter-row {
|
||||||
|
.p-column-filter-menu-button,
|
||||||
|
.p-column-filter-clear-button {
|
||||||
|
margin-left: $inlineSpacing;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-column-filter-menu-button {
|
||||||
|
width: $actionIconWidth;
|
||||||
|
height: $actionIconHeight;
|
||||||
|
color: $actionIconColor;
|
||||||
|
border: $actionIconBorder;
|
||||||
|
background: $actionIconBg;
|
||||||
|
border-radius: $actionIconBorderRadius;
|
||||||
|
transition: $actionIconTransition;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $actionIconHoverColor;
|
||||||
|
border-color: $actionIconHoverBorderColor;
|
||||||
|
background: $actionIconHoverBg;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-column-filter-menu-button-open,
|
||||||
|
&.p-column-filter-menu-button-open:hover {
|
||||||
|
background: $actionIconHoverBg;
|
||||||
|
color: $actionIconHoverColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-column-filter-menu-button-active,
|
||||||
|
&.p-column-filter-menu-button-active:hover {
|
||||||
|
background: $highlightBg;
|
||||||
|
color: $highlightTextColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus-visible {
|
||||||
|
@include focused();
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-column-filter-clear-button {
|
||||||
|
width: $actionIconWidth;
|
||||||
|
height: $actionIconHeight;
|
||||||
|
color: $actionIconColor;
|
||||||
|
border: $actionIconBorder;
|
||||||
|
background: $actionIconBg;
|
||||||
|
border-radius: $actionIconBorderRadius;
|
||||||
|
transition: $actionIconTransition;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $actionIconHoverColor;
|
||||||
|
border-color: $actionIconHoverBorderColor;
|
||||||
|
background: $actionIconHoverBg;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus-visible {
|
||||||
|
@include focused();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-column-filter-overlay {
|
||||||
|
background: $inputOverlayBg;
|
||||||
|
color: $inputListTextColor;
|
||||||
|
border: $inputOverlayBorder;
|
||||||
|
border-radius: $borderRadius;
|
||||||
|
box-shadow: $inputOverlayShadow;
|
||||||
|
min-width: $menuWidth;
|
||||||
|
|
||||||
|
.p-column-filter-row-items {
|
||||||
|
padding: $inputListPadding;
|
||||||
|
|
||||||
|
.p-column-filter-row-item {
|
||||||
|
margin: $inputListItemMargin;
|
||||||
|
padding: $inputListItemPadding;
|
||||||
|
border: $inputListItemBorder;
|
||||||
|
color: $inputListItemTextColor;
|
||||||
|
background: $inputListItemBg;
|
||||||
|
transition: $listItemTransition;
|
||||||
|
border-radius: $inputListItemBorderRadius;
|
||||||
|
|
||||||
|
&.p-highlight {
|
||||||
|
color: $highlightTextColor;
|
||||||
|
background: $highlightBg;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(.p-highlight):not(.p-disabled):hover {
|
||||||
|
color: $inputListItemTextHoverColor;
|
||||||
|
background: $inputListItemHoverBg;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus-visible {
|
||||||
|
@include focused-listitem();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-column-filter-separator {
|
||||||
|
border-top: $divider;
|
||||||
|
margin: $menuSeparatorMargin;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-column-filter-overlay-menu {
|
||||||
|
.p-column-filter-operator {
|
||||||
|
padding: $inputListHeaderPadding;
|
||||||
|
border-bottom: $inputListHeaderBorder;
|
||||||
|
color: $inputListHeaderTextColor;
|
||||||
|
background: $inputOverlayHeaderBg;
|
||||||
|
margin: $inputListHeaderMargin;
|
||||||
|
border-top-right-radius: $borderRadius;
|
||||||
|
border-top-left-radius: $borderRadius;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-column-filter-constraint {
|
||||||
|
padding: $panelContentPadding;
|
||||||
|
border-bottom: $divider;
|
||||||
|
|
||||||
|
.p-column-filter-matchmode-dropdown {
|
||||||
|
margin-bottom: $inlineSpacing;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-column-filter-remove-button {
|
||||||
|
margin-top: $inlineSpacing;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
border-bottom: 0 none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-column-filter-add-rule {
|
||||||
|
padding: $panelFooterPadding;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-column-filter-buttonbar {
|
||||||
|
padding: $panelContentPadding;
|
||||||
|
}
|
||||||
|
}
|
||||||
86
src/assets/scss/theme-base/components/data/_orderlist.scss
Normal file
86
src/assets/scss/theme-base/components/data/_orderlist.scss
Normal file
@@ -0,0 +1,86 @@
|
|||||||
|
.p-orderlist {
|
||||||
|
.p-orderlist-controls {
|
||||||
|
padding: $panelContentPadding;
|
||||||
|
|
||||||
|
.p-button {
|
||||||
|
margin-bottom: $inlineSpacing;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-orderlist-header {
|
||||||
|
background: $panelHeaderBg;
|
||||||
|
color: $panelHeaderTextColor;
|
||||||
|
border: $panelHeaderBorder;
|
||||||
|
padding: $panelHeaderPadding;
|
||||||
|
font-weight: $panelHeaderFontWeight;
|
||||||
|
border-bottom: 0 none;
|
||||||
|
border-top-right-radius: $borderRadius;
|
||||||
|
border-top-left-radius: $borderRadius;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-orderlist-filter-container {
|
||||||
|
padding: $panelHeaderPadding;
|
||||||
|
background: $panelContentBg;
|
||||||
|
border: $panelHeaderBorder;
|
||||||
|
border-bottom: 0 none;
|
||||||
|
|
||||||
|
.p-orderlist-filter-input {
|
||||||
|
padding-right: nth($inputPadding, 2) + $primeIconFontSize;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-orderlist-filter-icon {
|
||||||
|
right: nth($inputPadding, 2);
|
||||||
|
color: $inputIconColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-orderlist-list {
|
||||||
|
border: $panelContentBorder;
|
||||||
|
background: $panelContentBg;
|
||||||
|
color: $panelContentTextColor;
|
||||||
|
padding: $inputListPadding;
|
||||||
|
border-bottom-right-radius: $borderRadius;
|
||||||
|
border-bottom-left-radius: $borderRadius;
|
||||||
|
outline: 0 none;
|
||||||
|
|
||||||
|
.p-orderlist-item {
|
||||||
|
padding: $inputListItemPadding;
|
||||||
|
margin: $inputListItemMargin;
|
||||||
|
border: $inputListItemBorder;
|
||||||
|
color: $inputListItemTextColor;
|
||||||
|
background: $inputListItemBg;
|
||||||
|
transition: transform $transitionDuration, $listItemTransition;
|
||||||
|
|
||||||
|
&:not(.p-highlight):hover {
|
||||||
|
background: $inputListItemHoverBg;
|
||||||
|
color: $inputListItemTextHoverColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-focus {
|
||||||
|
color: $inputListItemTextFocusColor;
|
||||||
|
background: $inputListItemFocusBg;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-highlight {
|
||||||
|
color: $highlightTextColor;
|
||||||
|
background: $highlightBg;
|
||||||
|
|
||||||
|
&.p-focus {
|
||||||
|
background: $highlightFocusBg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-orderlist-striped {
|
||||||
|
.p-orderlist-list {
|
||||||
|
.p-orderlist-item:nth-child(even) {
|
||||||
|
background: $panelContentEvenRowBg;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: $inputListItemHoverBg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,50 @@
|
|||||||
|
.p-organizationchart {
|
||||||
|
.p-organizationchart-node-content {
|
||||||
|
&.p-organizationchart-selectable-node:not(.p-highlight):hover {
|
||||||
|
background: $inputListItemHoverBg;
|
||||||
|
color: $inputListItemTextHoverColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-highlight {
|
||||||
|
background: $highlightBg;
|
||||||
|
color: $highlightTextColor;
|
||||||
|
|
||||||
|
.p-node-toggler {
|
||||||
|
i {
|
||||||
|
color: darken($highlightBg, 25%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-organizationchart-line-down {
|
||||||
|
background: $organizationChartConnectorColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-organizationchart-line-left {
|
||||||
|
border-right: $panelContentBorder;
|
||||||
|
border-color: $organizationChartConnectorColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-organizationchart-line-top {
|
||||||
|
border-top: $panelContentBorder;
|
||||||
|
border-color: $organizationChartConnectorColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-organizationchart-node-content {
|
||||||
|
border: $panelContentBorder;
|
||||||
|
background: $panelContentBg;
|
||||||
|
color: $panelContentTextColor;
|
||||||
|
padding: $panelContentPadding;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-organizationchart-node-content .p-node-toggler {
|
||||||
|
background: inherit;
|
||||||
|
color: inherit;
|
||||||
|
border-radius: 50%;
|
||||||
|
|
||||||
|
&:focus-visible {
|
||||||
|
@include focused();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
91
src/assets/scss/theme-base/components/data/_paginator.scss
Normal file
91
src/assets/scss/theme-base/components/data/_paginator.scss
Normal file
@@ -0,0 +1,91 @@
|
|||||||
|
.p-paginator {
|
||||||
|
background: $paginatorBg;
|
||||||
|
color: $paginatorTextColor;
|
||||||
|
border: $paginatorBorder;
|
||||||
|
border-width: $paginatorBorderWidth;
|
||||||
|
padding: $paginatorPadding;
|
||||||
|
border-radius: $borderRadius;
|
||||||
|
|
||||||
|
.p-paginator-first,
|
||||||
|
.p-paginator-prev,
|
||||||
|
.p-paginator-next,
|
||||||
|
.p-paginator-last {
|
||||||
|
background-color: $paginatorElementBg;
|
||||||
|
border: $paginatorElementBorder;
|
||||||
|
color: $paginatorElementIconColor;
|
||||||
|
min-width: $paginatorElementWidth;
|
||||||
|
height: $paginatorElementHeight;
|
||||||
|
margin: $paginatorElementMargin;
|
||||||
|
transition: $listItemTransition;
|
||||||
|
border-radius: $paginatorElementBorderRadius;
|
||||||
|
|
||||||
|
&:not(.p-disabled):not(.p-highlight):hover {
|
||||||
|
background: $paginatorElementHoverBg;
|
||||||
|
border-color: $paginatorElementHoverBorderColor;
|
||||||
|
color: $paginatorElementIconHoverColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-paginator-first {
|
||||||
|
border-top-left-radius: $paginatorElementBorderRadius;
|
||||||
|
border-bottom-left-radius: $paginatorElementBorderRadius;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-paginator-last {
|
||||||
|
border-top-right-radius: $paginatorElementBorderRadius;
|
||||||
|
border-bottom-right-radius: $paginatorElementBorderRadius;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-dropdown {
|
||||||
|
margin-left: $inlineSpacing;
|
||||||
|
height: $paginatorElementHeight;
|
||||||
|
|
||||||
|
.p-dropdown-label {
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-paginator-page-input {
|
||||||
|
margin-left: $inlineSpacing;
|
||||||
|
margin-right: $inlineSpacing;
|
||||||
|
|
||||||
|
.p-inputtext {
|
||||||
|
max-width: $paginatorElementWidth;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-paginator-current {
|
||||||
|
background-color: $paginatorElementBg;
|
||||||
|
border: $paginatorElementBorder;
|
||||||
|
color: $paginatorElementIconColor;
|
||||||
|
min-width: $paginatorElementWidth;
|
||||||
|
height: $paginatorElementHeight;
|
||||||
|
margin: $paginatorElementMargin;
|
||||||
|
padding: 0 $inlineSpacing;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-paginator-pages {
|
||||||
|
.p-paginator-page {
|
||||||
|
background-color: $paginatorElementBg;
|
||||||
|
border: $paginatorElementBorder;
|
||||||
|
color: $paginatorElementIconColor;
|
||||||
|
min-width: $paginatorElementWidth;
|
||||||
|
height: $paginatorElementHeight;
|
||||||
|
margin: $paginatorElementMargin;
|
||||||
|
transition: $listItemTransition;
|
||||||
|
border-radius: $paginatorElementBorderRadius;
|
||||||
|
|
||||||
|
&.p-highlight {
|
||||||
|
background: $highlightBg;
|
||||||
|
border-color: $highlightBg;
|
||||||
|
color: $highlightTextColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(.p-highlight):hover {
|
||||||
|
background: $paginatorElementHoverBg;
|
||||||
|
border-color: $paginatorElementHoverBorderColor;
|
||||||
|
color: $paginatorElementIconHoverColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
74
src/assets/scss/theme-base/components/data/_picklist.scss
Normal file
74
src/assets/scss/theme-base/components/data/_picklist.scss
Normal file
@@ -0,0 +1,74 @@
|
|||||||
|
.p-picklist {
|
||||||
|
.p-picklist-buttons {
|
||||||
|
padding: $panelContentPadding;
|
||||||
|
|
||||||
|
.p-button {
|
||||||
|
margin-bottom: $inlineSpacing;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-picklist-header {
|
||||||
|
background: $panelHeaderBg;
|
||||||
|
color: $panelHeaderTextColor;
|
||||||
|
border: $panelHeaderBorder;
|
||||||
|
padding: $panelHeaderPadding;
|
||||||
|
font-weight: $panelHeaderFontWeight;
|
||||||
|
border-bottom: 0 none;
|
||||||
|
border-top-right-radius: $borderRadius;
|
||||||
|
border-top-left-radius: $borderRadius;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-picklist-filter-container {
|
||||||
|
padding: $panelHeaderPadding;
|
||||||
|
background: $panelContentBg;
|
||||||
|
border: $panelHeaderBorder;
|
||||||
|
border-bottom: 0 none;
|
||||||
|
|
||||||
|
.p-picklist-filter-input {
|
||||||
|
padding-right: nth($inputPadding, 2) + $primeIconFontSize;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-picklist-filter-icon {
|
||||||
|
right: nth($inputPadding, 2);
|
||||||
|
color: $inputIconColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-picklist-list {
|
||||||
|
border: $panelContentBorder;
|
||||||
|
background: $panelContentBg;
|
||||||
|
color: $panelContentTextColor;
|
||||||
|
padding: $inputListPadding;
|
||||||
|
border-bottom-right-radius: $borderRadius;
|
||||||
|
border-bottom-left-radius: $borderRadius;
|
||||||
|
outline: 0 none;
|
||||||
|
|
||||||
|
.p-picklist-item {
|
||||||
|
padding: $inputListItemPadding;
|
||||||
|
margin: $inputListItemMargin;
|
||||||
|
border: $inputListItemBorder;
|
||||||
|
color: $inputListItemTextColor;
|
||||||
|
background: $inputListItemBg;
|
||||||
|
transition: transform $transitionDuration, $listItemTransition;
|
||||||
|
|
||||||
|
&:not(.p-highlight):hover {
|
||||||
|
background: $inputListItemHoverBg;
|
||||||
|
color: $inputListItemTextHoverColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-focus {
|
||||||
|
color: $inputListItemTextFocusColor;
|
||||||
|
background: $inputListItemFocusBg;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-highlight {
|
||||||
|
color: $highlightTextColor;
|
||||||
|
background: $highlightBg;
|
||||||
|
|
||||||
|
&.p-focus {
|
||||||
|
background: $highlightFocusBg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
38
src/assets/scss/theme-base/components/data/_timeline.scss
Normal file
38
src/assets/scss/theme-base/components/data/_timeline.scss
Normal file
@@ -0,0 +1,38 @@
|
|||||||
|
.p-timeline {
|
||||||
|
.p-timeline-event-marker {
|
||||||
|
border: $timelineEventMarkerBorder;
|
||||||
|
border-radius: $timelineEventMarkerBorderRadius;
|
||||||
|
width: $timelineEventMarkerWidth;
|
||||||
|
height: $timelineEventMarkerHeight;
|
||||||
|
background-color: $timelineEventMarkerBackground;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-timeline-event-connector {
|
||||||
|
background-color: $timelineEventColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-timeline-vertical {
|
||||||
|
.p-timeline-event-opposite,
|
||||||
|
.p-timeline-event-content {
|
||||||
|
padding: $timelineVerticalEventContentPadding;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-timeline-event-connector {
|
||||||
|
width: $timelineEventConnectorSize;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-timeline-horizontal {
|
||||||
|
.p-timeline-event-opposite,
|
||||||
|
.p-timeline-event-content {
|
||||||
|
padding: $timelineHorizontalEventContentPadding;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-timeline-event-connector {
|
||||||
|
height: $timelineEventConnectorSize;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
184
src/assets/scss/theme-base/components/data/_tree.scss
Normal file
184
src/assets/scss/theme-base/components/data/_tree.scss
Normal file
@@ -0,0 +1,184 @@
|
|||||||
|
|
||||||
|
.p-tree-container {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style-type: none;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-treenode-children {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-treenode-selectable {
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-tree-toggler {
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-treenode-leaf > .p-treenode-content .p-tree-toggler {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-treenode-content {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-tree-filter {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-tree-filter-container {
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-tree-filter-icon {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
margin-top: -0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-tree-loading {
|
||||||
|
position: relative;
|
||||||
|
min-height: 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-tree .p-tree-loading-overlay {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.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-highlight {
|
||||||
|
background: $highlightBg;
|
||||||
|
color: $highlightTextColor;
|
||||||
|
|
||||||
|
.p-tree-toggler,
|
||||||
|
.p-treenode-icon {
|
||||||
|
color: $highlightTextColor;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $highlightTextColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-treenode-selectable:not(.p-highlight):hover {
|
||||||
|
background: $inputListItemHoverBg;
|
||||||
|
color: $inputListItemTextHoverColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-treenode-dragover {
|
||||||
|
background: $inputListItemHoverBg;
|
||||||
|
color: $inputListItemTextHoverColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-tree-filter-container {
|
||||||
|
margin-bottom: $inlineSpacing;
|
||||||
|
|
||||||
|
.p-tree-filter {
|
||||||
|
width: 100%;
|
||||||
|
padding-right: nth($inputPadding, 2) + $primeIconFontSize;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-tree-filter-icon {
|
||||||
|
right: nth($inputPadding, 2);
|
||||||
|
color: $inputIconColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-treenode-children {
|
||||||
|
padding: $treeNodeChildrenPadding;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-tree-loading-icon {
|
||||||
|
font-size: $loadingIconFontSize;
|
||||||
|
|
||||||
|
&.p-icon {
|
||||||
|
width: $loadingIconFontSize;
|
||||||
|
height: $loadingIconFontSize;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-treenode-droppoint {
|
||||||
|
height: $inlineSpacing;
|
||||||
|
|
||||||
|
&.p-treenode-droppoint-active {
|
||||||
|
background: scale-color($highlightBg, $lightness: -20%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
429
src/assets/scss/theme-base/components/data/_treetable.scss
Normal file
429
src/assets/scss/theme-base/components/data/_treetable.scss
Normal file
@@ -0,0 +1,429 @@
|
|||||||
|
|
||||||
|
.p-treetable {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-treetable > .p-treetable-wrapper {
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-treetable table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
width: 100%;
|
||||||
|
table-layout: fixed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-treetable .p-sortable-column {
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-treetable-selectable .p-treetable-tbody > tr {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-treetable-toggler {
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
vertical-align: middle;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-treetable-toggler + .p-checkbox {
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-treetable-toggler + .p-checkbox + span {
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Resizable */
|
||||||
|
.p-treetable-resizable > .p-treetable-wrapper {
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-treetable-resizable .p-treetable-thead > tr > th,
|
||||||
|
.p-treetable-resizable .p-treetable-tfoot > tr > td,
|
||||||
|
.p-treetable-resizable .p-treetable-tbody > tr > td {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-treetable-resizable .p-resizable-column {
|
||||||
|
background-clip: padding-box;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-treetable .p-column-resizer {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
margin: 0;
|
||||||
|
width: 0.5rem;
|
||||||
|
height: 100%;
|
||||||
|
padding: 0px;
|
||||||
|
cursor: col-resize;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-treetable .p-column-resizer-helper {
|
||||||
|
width: 1px;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 10;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Scrollable */
|
||||||
|
.p-treetable-scrollable-wrapper {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.p-treetable-scrollable-header,
|
||||||
|
.p-treetable-scrollable-footer {
|
||||||
|
overflow: hidden;
|
||||||
|
border: 0 none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-treetable-scrollable-body {
|
||||||
|
overflow: auto;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-treetable-virtual-table {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Frozen Columns */
|
||||||
|
.p-treetable-frozen-view .p-treetable-scrollable-body {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-treetable-unfrozen-view {
|
||||||
|
position: absolute;
|
||||||
|
top: 0px;
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Reorder */
|
||||||
|
.p-treetable-reorder-indicator-up,
|
||||||
|
.p-treetable-reorder-indicator-down {
|
||||||
|
position: absolute;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Loader */
|
||||||
|
.p-treetable .p-treetable-loading-overlay {
|
||||||
|
position: absolute;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Alignment */
|
||||||
|
.p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
|
||||||
|
.p-treetable .p-treetable-tbody > tr > td.p-align-left,
|
||||||
|
.p-treetable .p-treetable-tfoot > tr > td.p-align-left {
|
||||||
|
text-align: left;
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
.p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
|
||||||
|
.p-treetable .p-treetable-tbody > tr > td.p-align-right,
|
||||||
|
.p-treetable .p-treetable-tfoot > tr > td.p-align-right {
|
||||||
|
text-align: right;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
.p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
|
||||||
|
.p-treetable .p-treetable-tbody > tr > td.p-align-center,
|
||||||
|
.p-treetable .p-treetable-tfoot > tr > td.p-align-center {
|
||||||
|
text-align: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.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 {
|
||||||
|
margin-right: $inlineSpacing;
|
||||||
|
@include action-icon();
|
||||||
|
|
||||||
|
& + .p-checkbox {
|
||||||
|
margin-right: $inlineSpacing;
|
||||||
|
|
||||||
|
.p-indeterminate {
|
||||||
|
.p-checkbox-icon {
|
||||||
|
color: $textColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus-visible {
|
||||||
|
outline: .15rem solid $focusOutlineColor;
|
||||||
|
outline-offset: -.15rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-highlight {
|
||||||
|
background: $highlightBg;
|
||||||
|
color: $highlightTextColor;
|
||||||
|
|
||||||
|
.p-treetable-toggler {
|
||||||
|
color: $highlightTextColor;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $highlightTextColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-treetable-selectable,
|
||||||
|
&.p-treetable-hoverable-rows {
|
||||||
|
.p-treetable-tbody > tr:not(.p-highlight):hover {
|
||||||
|
background: $tableBodyRowHoverBg;
|
||||||
|
color: $tableBodyRowTextHoverColor;
|
||||||
|
|
||||||
|
.p-treetable-toggler {
|
||||||
|
color: $tableBodyRowTextHoverColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-column-resizer-helper {
|
||||||
|
background: $tableResizerHelperBg;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-treetable-scrollable-header,
|
||||||
|
.p-treetable-scrollable-footer {
|
||||||
|
background: $panelHeaderBg;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-treetable-loading-icon {
|
||||||
|
font-size: $loadingIconFontSize;
|
||||||
|
|
||||||
|
&.p-icon {
|
||||||
|
width: $loadingIconFontSize;
|
||||||
|
height: $loadingIconFontSize;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-treetable-gridlines {
|
||||||
|
.p-treetable-header {
|
||||||
|
border-width: 1px 1px 0 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-treetable-footer {
|
||||||
|
border-width: 0 1px 1px 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-treetable-top {
|
||||||
|
border-width: 0 1px 0 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-treetable-bottom {
|
||||||
|
border-width: 0 1px 1px 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-treetable-thead {
|
||||||
|
> tr {
|
||||||
|
> th {
|
||||||
|
border-width: 1px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-treetable-tbody {
|
||||||
|
> tr {
|
||||||
|
> td {
|
||||||
|
border-width: 1px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-treetable-tfoot {
|
||||||
|
> tr {
|
||||||
|
> td {
|
||||||
|
border-width: 1px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-treetable-striped {
|
||||||
|
.p-treetable-tbody {
|
||||||
|
> tr.p-row-odd {
|
||||||
|
background: $tableBodyRowEvenBg;
|
||||||
|
|
||||||
|
&.p-highlight {
|
||||||
|
background: $highlightBg;
|
||||||
|
color: $highlightTextColor;
|
||||||
|
|
||||||
|
.p-row-toggler {
|
||||||
|
color: $highlightTextColor;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $highlightTextColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
& + .p-row-expanded {
|
||||||
|
background: $tableBodyRowEvenBg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-treetable-sm {
|
||||||
|
.p-treetable-header {
|
||||||
|
@include scaledPadding($tableHeaderPadding, $scaleSM);
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-treetable-thead > tr > th {
|
||||||
|
@include scaledPadding($tableHeaderCellPadding, $tableScaleSM);
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-treetable-tbody > tr > td {
|
||||||
|
@include scaledPadding($tableBodyCellPadding, $tableScaleSM);
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-treetable-tfoot > tr > td {
|
||||||
|
@include scaledPadding($tableFooterPadding, $tableScaleSM);
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-treetable-footer {
|
||||||
|
@include scaledPadding($tableFooterPadding, $tableScaleSM);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-treetable-lg {
|
||||||
|
.p-treetable-header {
|
||||||
|
@include scaledPadding($tableHeaderPadding, $tableScaleLG);
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-treetable-thead > tr > th {
|
||||||
|
@include scaledPadding($tableHeaderCellPadding, $tableScaleLG);
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-treetable-tbody > tr > td {
|
||||||
|
@include scaledPadding($tableBodyCellPadding, $tableScaleLG);
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-treetable-tfoot > tr > td {
|
||||||
|
@include scaledPadding($tableFooterPadding, $tableScaleLG);
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-treetable-footer {
|
||||||
|
@include scaledPadding($tableFooterPadding, $tableScaleLG);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
41
src/assets/scss/theme-base/components/file/_fileupload.scss
Normal file
41
src/assets/scss/theme-base/components/file/_fileupload.scss
Normal file
@@ -0,0 +1,41 @@
|
|||||||
|
.p-fileupload {
|
||||||
|
.p-fileupload-buttonbar {
|
||||||
|
background: $panelHeaderBg;
|
||||||
|
padding: $panelHeaderPadding;
|
||||||
|
border: $panelHeaderBorder;
|
||||||
|
color: $panelHeaderTextColor;
|
||||||
|
border-bottom: 0 none;
|
||||||
|
border-top-right-radius: $borderRadius;
|
||||||
|
border-top-left-radius: $borderRadius;
|
||||||
|
gap: $inlineSpacing;
|
||||||
|
|
||||||
|
.p-button {
|
||||||
|
margin-right: $inlineSpacing;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-fileupload-content {
|
||||||
|
background: $panelContentBg;
|
||||||
|
padding: $fileUploadContentPadding;
|
||||||
|
border: $panelContentBorder;
|
||||||
|
color: $panelContentTextColor;
|
||||||
|
border-bottom-right-radius: $borderRadius;
|
||||||
|
border-bottom-left-radius: $borderRadius;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-progressbar {
|
||||||
|
height: $fileUploadProgressBarHeight;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-fileupload-row {
|
||||||
|
> div {
|
||||||
|
padding: $tableBodyCellPadding;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-fileupload-advanced {
|
||||||
|
.p-message {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,95 @@
|
|||||||
|
@use 'sass:math';
|
||||||
|
|
||||||
|
.p-autocomplete {
|
||||||
|
.p-autocomplete-loader {
|
||||||
|
right: nth($inputPadding, 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-autocomplete-dd {
|
||||||
|
.p-autocomplete-loader {
|
||||||
|
right: nth($inputPadding, 2) + $buttonIconOnlyWidth;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-autocomplete-multiple-container {
|
||||||
|
padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
|
||||||
|
gap: $inlineSpacing;
|
||||||
|
|
||||||
|
&:not(.p-disabled):hover {
|
||||||
|
border-color: $inputHoverBorderColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(.p-disabled).p-focus {
|
||||||
|
@include focused-input();
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-autocomplete-input-token {
|
||||||
|
padding: math.div(nth($inputPadding, 1), 2) 0;
|
||||||
|
|
||||||
|
input {
|
||||||
|
font-family: var(--font-family);
|
||||||
|
font-feature-settings: var(--font-feature-settings, normal);
|
||||||
|
font-size: $inputTextFontSize;
|
||||||
|
color: $textColor;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-autocomplete-token {
|
||||||
|
padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
|
||||||
|
margin-right: $inlineSpacing;
|
||||||
|
background: $highlightBg;
|
||||||
|
color: $highlightTextColor;
|
||||||
|
border-radius: $borderRadius;
|
||||||
|
|
||||||
|
.p-autocomplete-token-icon {
|
||||||
|
margin-left: $inlineSpacing;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-invalid.p-component > .p-inputtext {
|
||||||
|
@include invalid-input();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-autocomplete-panel {
|
||||||
|
background: $inputOverlayBg;
|
||||||
|
color: $inputListTextColor;
|
||||||
|
border: $inputOverlayBorder;
|
||||||
|
border-radius: $borderRadius;
|
||||||
|
box-shadow: $inputOverlayShadow;
|
||||||
|
|
||||||
|
.p-autocomplete-items {
|
||||||
|
padding: $inputListPadding;
|
||||||
|
|
||||||
|
.p-autocomplete-item {
|
||||||
|
margin: $inputListItemMargin;
|
||||||
|
padding: $inputListItemPadding;
|
||||||
|
border: $inputListItemBorder;
|
||||||
|
color: $inputListItemTextColor;
|
||||||
|
background: $inputListItemBg;
|
||||||
|
transition: $listItemTransition;
|
||||||
|
border-radius: $inputListItemBorderRadius;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $inputListItemTextHoverColor;
|
||||||
|
background: $inputListItemHoverBg;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-highlight {
|
||||||
|
color: $highlightTextColor;
|
||||||
|
background: $highlightBg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-autocomplete-item-group {
|
||||||
|
margin: $submenuHeaderMargin;
|
||||||
|
padding: $submenuHeaderPadding;
|
||||||
|
color: $submenuHeaderTextColor;
|
||||||
|
background: $submenuHeaderBg;
|
||||||
|
font-weight: $submenuHeaderFontWeight;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
251
src/assets/scss/theme-base/components/input/_calendar.scss
Normal file
251
src/assets/scss/theme-base/components/input/_calendar.scss
Normal file
@@ -0,0 +1,251 @@
|
|||||||
|
.p-calendar {
|
||||||
|
&.p-invalid.p-component > .p-inputtext {
|
||||||
|
@include invalid-input();
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(.p-calendar-disabled).p-focus > .p-inputtext {
|
||||||
|
@include focused-input();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-datepicker {
|
||||||
|
padding: $calendarPadding;
|
||||||
|
background: $calendarInlineBg;
|
||||||
|
color: $calendarTextColor;
|
||||||
|
border: $calendarBorder;
|
||||||
|
border-radius: $borderRadius;
|
||||||
|
|
||||||
|
&: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: 0.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();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: $calendarBreakpoint) {
|
||||||
|
.p-datepicker {
|
||||||
|
table {
|
||||||
|
th,
|
||||||
|
td {
|
||||||
|
padding: $calendarCellDatePaddingSM;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
107
src/assets/scss/theme-base/components/input/_cascadeselect.scss
Normal file
107
src/assets/scss/theme-base/components/input/_cascadeselect.scss
Normal file
@@ -0,0 +1,107 @@
|
|||||||
|
.p-cascadeselect {
|
||||||
|
background: $inputBg;
|
||||||
|
border: $inputBorder;
|
||||||
|
transition: $formElementTransition;
|
||||||
|
border-radius: $borderRadius;
|
||||||
|
outline-color: transparent;
|
||||||
|
|
||||||
|
&:not(.p-disabled):hover {
|
||||||
|
border-color: $inputHoverBorderColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(.p-disabled).p-focus {
|
||||||
|
@include focused-input();
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-variant-filled {
|
||||||
|
background-color: $inputFilledBg;
|
||||||
|
|
||||||
|
&:enabled:hover {
|
||||||
|
background-color: $inputFilledHoverBg;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:enabled:focus {
|
||||||
|
background-color: $inputFilledFocusBg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-cascadeselect-label {
|
||||||
|
background: transparent;
|
||||||
|
border: 0 none;
|
||||||
|
padding: $inputPadding;
|
||||||
|
|
||||||
|
&.p-placeholder {
|
||||||
|
color: $inputPlaceholderTextColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:enabled:focus {
|
||||||
|
outline: 0 none;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-cascadeselect-trigger {
|
||||||
|
background: transparent;
|
||||||
|
color: $inputIconColor;
|
||||||
|
width: $inputGroupAddOnMinWidth;
|
||||||
|
border-top-right-radius: $borderRadius;
|
||||||
|
border-bottom-right-radius: $borderRadius;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-invalid.p-component {
|
||||||
|
@include invalid-input();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-cascadeselect-panel {
|
||||||
|
background: $inputOverlayBg;
|
||||||
|
color: $inputListTextColor;
|
||||||
|
border: $inputOverlayBorder;
|
||||||
|
border-radius: $borderRadius;
|
||||||
|
box-shadow: $inputOverlayShadow;
|
||||||
|
|
||||||
|
.p-cascadeselect-items {
|
||||||
|
padding: $inputListPadding;
|
||||||
|
|
||||||
|
.p-cascadeselect-item {
|
||||||
|
margin: $inputListItemMargin;
|
||||||
|
border: $inputListItemBorder;
|
||||||
|
color: $inputListItemTextColor;
|
||||||
|
background: $inputListItemBg;
|
||||||
|
transition: $listItemTransition;
|
||||||
|
border-radius: $inputListItemBorderRadius;
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-highlight {
|
||||||
|
color: $highlightTextColor;
|
||||||
|
background: $highlightBg;
|
||||||
|
|
||||||
|
&.p-focus {
|
||||||
|
background: $highlightFocusBg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(.p-highlight):not(.p-disabled) {
|
||||||
|
&.p-focus {
|
||||||
|
color: $inputListItemTextHoverColor;
|
||||||
|
background: $inputListItemHoverBg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-cascadeselect-item-content {
|
||||||
|
padding: $inputListItemPadding;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-cascadeselect-group-icon {
|
||||||
|
font-size: $menuitemSubmenuIconFontSize;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
181
src/assets/scss/theme-base/components/input/_checkbox.scss
Normal file
181
src/assets/scss/theme-base/components/input/_checkbox.scss
Normal file
@@ -0,0 +1,181 @@
|
|||||||
|
|
||||||
|
.p-checkbox {
|
||||||
|
position: relative;
|
||||||
|
display: inline-flex;
|
||||||
|
user-select: none;
|
||||||
|
vertical-align: bottom;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-checkbox-input {
|
||||||
|
appearance: none;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
opacity: 0;
|
||||||
|
z-index: 1;
|
||||||
|
outline: 0 none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-checkbox-box {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.p-checkbox {
|
||||||
|
width: $checkboxWidth;
|
||||||
|
height: $checkboxHeight;
|
||||||
|
|
||||||
|
.p-checkbox-input {
|
||||||
|
border: $checkboxBorder;
|
||||||
|
border-radius: $borderRadius;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-checkbox-box {
|
||||||
|
border: $checkboxBorder;
|
||||||
|
background: $inputBg;
|
||||||
|
width: $checkboxWidth;
|
||||||
|
height: $checkboxHeight;
|
||||||
|
color: $textColor;
|
||||||
|
border-radius: $borderRadius;
|
||||||
|
transition: $formElementTransition;
|
||||||
|
outline-color: transparent;
|
||||||
|
|
||||||
|
.p-checkbox-icon {
|
||||||
|
transition-duration: $transitionDuration;
|
||||||
|
color: $checkboxIconActiveColor;
|
||||||
|
font-size: $checkboxIconFontSize;
|
||||||
|
|
||||||
|
&.p-icon {
|
||||||
|
width: $checkboxIconFontSize;
|
||||||
|
height: $checkboxIconFontSize;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.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 {
|
||||||
|
.p-checkbox-box {
|
||||||
|
border-color: $checkboxActiveBorderColor;
|
||||||
|
background: $checkboxActiveBg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(.p-disabled) {
|
||||||
|
&:has(.p-checkbox-input:hover) {
|
||||||
|
.p-checkbox-box {
|
||||||
|
border-color: $inputHoverBorderColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-highlight {
|
||||||
|
.p-checkbox-box {
|
||||||
|
border-color: $checkboxActiveHoverBorderColor;
|
||||||
|
background: $checkboxActiveHoverBg;
|
||||||
|
color: $checkboxIconActiveHoverColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:has(.p-checkbox-input:focus-visible) {
|
||||||
|
.p-checkbox-box {
|
||||||
|
@include focused-input();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-invalid > .p-checkbox-box {
|
||||||
|
@include invalid-input();
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-variant-filled {
|
||||||
|
.p-checkbox-box {
|
||||||
|
background-color: $inputFilledBg;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-highlight {
|
||||||
|
.p-checkbox-box {
|
||||||
|
background: $checkboxActiveBg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(.p-disabled) {
|
||||||
|
&:has(.p-checkbox-input:hover) {
|
||||||
|
.p-checkbox-box {
|
||||||
|
background-color: $inputFilledHoverBg;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-highlight {
|
||||||
|
.p-checkbox-box {
|
||||||
|
background: $checkboxActiveHoverBg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-input-filled {
|
||||||
|
.p-checkbox {
|
||||||
|
.p-checkbox-box {
|
||||||
|
background-color: $inputFilledBg;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-highlight {
|
||||||
|
.p-checkbox-box {
|
||||||
|
background: $checkboxActiveBg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(.p-disabled) {
|
||||||
|
&:has(.p-checkbox-input:hover) {
|
||||||
|
.p-checkbox-box {
|
||||||
|
background-color: $inputFilledHoverBg;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-highlight {
|
||||||
|
.p-checkbox-box {
|
||||||
|
background: $checkboxActiveHoverBg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@if ($highlightBg == $checkboxActiveBg) {
|
||||||
|
.p-highlight {
|
||||||
|
.p-checkbox {
|
||||||
|
.p-checkbox-box {
|
||||||
|
border-color: $checkboxIconActiveColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
102
src/assets/scss/theme-base/components/input/_chips.scss
Normal file
102
src/assets/scss/theme-base/components/input/_chips.scss
Normal file
@@ -0,0 +1,102 @@
|
|||||||
|
@use "sass:math";
|
||||||
|
|
||||||
|
|
||||||
|
.p-chips {
|
||||||
|
display: inline-flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-chips-multiple-container {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style-type: none;
|
||||||
|
cursor: text;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-chips-token {
|
||||||
|
cursor: default;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-chips-input-token {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
display: inline-flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-chips-token-icon {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-chips-input-token input {
|
||||||
|
border: 0 none;
|
||||||
|
outline: 0 none;
|
||||||
|
background-color: transparent;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-shadow: none;
|
||||||
|
border-radius: 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-fluid .p-chips {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.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);
|
||||||
|
outline-color: transparent;
|
||||||
|
|
||||||
|
.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-invalid.p-component > .p-inputtext {
|
||||||
|
@include invalid-input();
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,18 @@
|
|||||||
|
.p-colorpicker-preview {
|
||||||
|
width: $colorPickerPreviewWidth;
|
||||||
|
height: $colorPickerPreviewHeight;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-colorpicker-panel {
|
||||||
|
background: $colorPickerBg;
|
||||||
|
border: $colorPickerBorder;
|
||||||
|
|
||||||
|
.p-colorpicker-color-handle,
|
||||||
|
.p-colorpicker-hue-handle {
|
||||||
|
border-color: $colorPickerHandleColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-colorpicker-overlay-panel {
|
||||||
|
box-shadow: $inputOverlayShadow;
|
||||||
|
}
|
||||||
252
src/assets/scss/theme-base/components/input/_dropdown.scss
Normal file
252
src/assets/scss/theme-base/components/input/_dropdown.scss
Normal file
@@ -0,0 +1,252 @@
|
|||||||
|
|
||||||
|
.p-dropdown {
|
||||||
|
display: inline-flex;
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-dropdown-clear-icon {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
margin-top: -0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-dropdown-trigger {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-dropdown-label {
|
||||||
|
display: block;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
width: 1%;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-dropdown-label-empty {
|
||||||
|
overflow: hidden;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
input.p-dropdown-label {
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-dropdown .p-dropdown-panel {
|
||||||
|
min-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-dropdown-panel {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-dropdown-items-wrapper {
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-dropdown-item {
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: normal;
|
||||||
|
white-space: nowrap;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-dropdown-item-group {
|
||||||
|
cursor: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-dropdown-items {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-dropdown-filter {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-dropdown-filter-container {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-dropdown-filter-icon {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
margin-top: -0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-fluid .p-dropdown {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-fluid .p-dropdown .p-dropdown-label {
|
||||||
|
width: 1%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.p-dropdown {
|
||||||
|
background: $inputBg;
|
||||||
|
border: $inputBorder;
|
||||||
|
transition: $formElementTransition;
|
||||||
|
border-radius: $borderRadius;
|
||||||
|
outline-color: transparent;
|
||||||
|
|
||||||
|
&:not(.p-disabled):hover {
|
||||||
|
border-color: $inputHoverBorderColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(.p-disabled).p-focus {
|
||||||
|
@include focused-input();
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-variant-filled {
|
||||||
|
background: $inputFilledBg;
|
||||||
|
|
||||||
|
&:not(.p-disabled):hover {
|
||||||
|
background-color: $inputFilledHoverBg;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(.p-disabled).p-focus {
|
||||||
|
background-color: $inputFilledFocusBg;
|
||||||
|
|
||||||
|
.p-inputtext {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-dropdown-clearable {
|
||||||
|
.p-dropdown-label {
|
||||||
|
padding-right: nth($inputPadding, 2) + $primeIconFontSize;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.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-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;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-highlight {
|
||||||
|
color: $highlightTextColor;
|
||||||
|
background: $highlightBg;
|
||||||
|
|
||||||
|
&.p-focus {
|
||||||
|
background: $highlightFocusBg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(.p-highlight):not(.p-disabled) {
|
||||||
|
&.p-focus {
|
||||||
|
color: $inputListItemTextHoverColor;
|
||||||
|
background: $inputListItemHoverBg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-dropdown-check-icon {
|
||||||
|
position: relative;
|
||||||
|
margin-left: -1 * $inlineSpacing;
|
||||||
|
margin-right: $inlineSpacing;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-dropdown-item-group {
|
||||||
|
margin: $submenuHeaderMargin;
|
||||||
|
padding: $submenuHeaderPadding;
|
||||||
|
color: $submenuHeaderTextColor;
|
||||||
|
background: $submenuHeaderBg;
|
||||||
|
font-weight: $submenuHeaderFontWeight;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-dropdown-empty-message {
|
||||||
|
padding: $inputListItemPadding;
|
||||||
|
color: $inputListItemTextColor;
|
||||||
|
background: $inputListItemBg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
122
src/assets/scss/theme-base/components/input/_editor.scss
Normal file
122
src/assets/scss/theme-base/components/input/_editor.scss
Normal file
@@ -0,0 +1,122 @@
|
|||||||
|
.p-editor-container {
|
||||||
|
.p-editor-toolbar {
|
||||||
|
background: $editorToolbarBg;
|
||||||
|
border-top-right-radius: $borderRadius;
|
||||||
|
border-top-left-radius: $borderRadius;
|
||||||
|
|
||||||
|
&.ql-snow {
|
||||||
|
border: $editorToolbarBorder;
|
||||||
|
|
||||||
|
.ql-stroke {
|
||||||
|
stroke: $editorToolbarIconColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ql-fill {
|
||||||
|
fill: $editorToolbarIconColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ql-picker {
|
||||||
|
.ql-picker-label {
|
||||||
|
border: 0 none;
|
||||||
|
color: $editorToolbarIconColor;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $editorToolbarIconHoverColor;
|
||||||
|
|
||||||
|
.ql-stroke {
|
||||||
|
stroke: $editorToolbarIconHoverColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ql-fill {
|
||||||
|
fill: $editorToolbarIconHoverColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.ql-expanded {
|
||||||
|
.ql-picker-label {
|
||||||
|
color: $editorToolbarIconHoverColor;
|
||||||
|
|
||||||
|
.ql-stroke {
|
||||||
|
stroke: $editorToolbarIconHoverColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ql-fill {
|
||||||
|
fill: $editorToolbarIconHoverColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ql-picker-options {
|
||||||
|
background: $inputOverlayBg;
|
||||||
|
border:$inputOverlayBorder;
|
||||||
|
box-shadow:$inputOverlayShadow;
|
||||||
|
border-radius: $borderRadius;
|
||||||
|
padding: $inputListPadding;
|
||||||
|
|
||||||
|
.ql-picker-item {
|
||||||
|
color: $inputListItemTextColor;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $inputListItemTextHoverColor;
|
||||||
|
background: $inputListItemHoverBg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(.ql-icon-picker) {
|
||||||
|
.ql-picker-item {
|
||||||
|
padding: $inputListItemPadding;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-editor-content {
|
||||||
|
border-bottom-right-radius: $borderRadius;
|
||||||
|
border-bottom-left-radius: $borderRadius;
|
||||||
|
|
||||||
|
&.ql-snow {
|
||||||
|
border: $editorContentBorder;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ql-editor {
|
||||||
|
background: $inputBg;
|
||||||
|
color: $inputTextColor;
|
||||||
|
border-bottom-right-radius: $borderRadius;
|
||||||
|
border-bottom-left-radius: $borderRadius;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ql-snow.ql-toolbar button:hover,
|
||||||
|
.ql-snow.ql-toolbar button:focus {
|
||||||
|
color: $editorToolbarIconHoverColor;
|
||||||
|
|
||||||
|
.ql-stroke {
|
||||||
|
stroke: $editorToolbarIconHoverColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ql-fill {
|
||||||
|
fill: $editorToolbarIconHoverColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ql-snow.ql-toolbar button.ql-active,
|
||||||
|
.ql-snow.ql-toolbar .ql-picker-label.ql-active,
|
||||||
|
.ql-snow.ql-toolbar .ql-picker-item.ql-selected {
|
||||||
|
color: $editorIconActiveColor;
|
||||||
|
|
||||||
|
.ql-stroke {
|
||||||
|
stroke: $editorIconActiveColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ql-fill {
|
||||||
|
fill: $editorIconActiveColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ql-picker-label {
|
||||||
|
color: $editorIconActiveColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
10
src/assets/scss/theme-base/components/input/_iconfield.scss
Normal file
10
src/assets/scss/theme-base/components/input/_iconfield.scss
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
|
||||||
|
.p-icon-field {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-icon-field > .p-input-icon {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
margin-top: -.5rem;
|
||||||
|
}
|
||||||
74
src/assets/scss/theme-base/components/input/_inputgroup.scss
Normal file
74
src/assets/scss/theme-base/components/input/_inputgroup.scss
Normal file
@@ -0,0 +1,74 @@
|
|||||||
|
.p-inputgroup-addon {
|
||||||
|
background: $inputGroupBg;
|
||||||
|
color: $inputGroupTextColor;
|
||||||
|
border-top: $inputBorder;
|
||||||
|
border-left: $inputBorder;
|
||||||
|
border-bottom: $inputBorder;
|
||||||
|
padding: $inputPadding;
|
||||||
|
min-width: $inputGroupAddOnMinWidth;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
border-right: $inputBorder;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-inputgroup {
|
||||||
|
> .p-component,
|
||||||
|
> .p-inputwrapper > .p-inputtext,
|
||||||
|
> .p-float-label > .p-component {
|
||||||
|
border-radius: 0;
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
+ .p-inputgroup-addon {
|
||||||
|
border-left: 0 none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
z-index: 1;
|
||||||
|
|
||||||
|
~ label {
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-inputgroup-addon:first-child,
|
||||||
|
.p-inputgroup button:first-child,
|
||||||
|
.p-inputgroup input:first-child,
|
||||||
|
.p-inputgroup > .p-inputwrapper:first-child,
|
||||||
|
.p-inputgroup > .p-inputwrapper:first-child > .p-inputtext {
|
||||||
|
border-top-left-radius: $borderRadius;
|
||||||
|
border-bottom-left-radius: $borderRadius;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-inputgroup .p-float-label:first-child input {
|
||||||
|
border-top-left-radius: $borderRadius;
|
||||||
|
border-bottom-left-radius: $borderRadius;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-inputgroup-addon:last-child,
|
||||||
|
.p-inputgroup button:last-child,
|
||||||
|
.p-inputgroup input:last-child,
|
||||||
|
.p-inputgroup > .p-inputwrapper:last-child,
|
||||||
|
.p-inputgroup > .p-inputwrapper:last-child > .p-inputtext {
|
||||||
|
border-top-right-radius: $borderRadius;
|
||||||
|
border-bottom-right-radius: $borderRadius;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-inputgroup .p-float-label:last-child input {
|
||||||
|
border-top-right-radius: $borderRadius;
|
||||||
|
border-bottom-right-radius: $borderRadius;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-fluid {
|
||||||
|
.p-inputgroup {
|
||||||
|
.p-button {
|
||||||
|
width: auto;
|
||||||
|
|
||||||
|
&.p-button-icon-only {
|
||||||
|
width: $buttonIconOnlyWidth;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
15
src/assets/scss/theme-base/components/input/_inputicon.scss
Normal file
15
src/assets/scss/theme-base/components/input/_inputicon.scss
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
|
||||||
|
.p-fluid .p-icon-field-left,
|
||||||
|
.p-fluid .p-icon-field-right {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
.p-inputnumber {
|
||||||
|
&.p-invalid.p-component > .p-inputtext {
|
||||||
|
@include invalid-input();
|
||||||
|
}
|
||||||
|
}
|
||||||
10
src/assets/scss/theme-base/components/input/_inputotp.scss
Normal file
10
src/assets/scss/theme-base/components/input/_inputotp.scss
Normal 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;
|
||||||
|
}
|
||||||
100
src/assets/scss/theme-base/components/input/_inputswitch.scss
Normal file
100
src/assets/scss/theme-base/components/input/_inputswitch.scss
Normal file
@@ -0,0 +1,100 @@
|
|||||||
|
@use 'sass:math';
|
||||||
|
|
||||||
|
|
||||||
|
.p-inputswitch {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-inputswitch-input {
|
||||||
|
appearance: none;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
opacity: 0;
|
||||||
|
z-index: 1;
|
||||||
|
outline: 0 none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-inputswitch-slider {
|
||||||
|
position: absolute;
|
||||||
|
cursor: pointer;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-inputswitch-slider:before {
|
||||||
|
position: absolute;
|
||||||
|
content: '';
|
||||||
|
top: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.p-inputswitch {
|
||||||
|
width: $inputSwitchWidth;
|
||||||
|
height: $inputSwitchHeight;
|
||||||
|
|
||||||
|
.p-inputswitch-input {
|
||||||
|
border-radius: $inputSwitchBorderRadius;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-inputswitch-slider {
|
||||||
|
background: $inputSwitchSliderOffBg;
|
||||||
|
transition: $formElementTransition;
|
||||||
|
border-radius: $inputSwitchBorderRadius;
|
||||||
|
outline-color: transparent;
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
background: $inputSwitchHandleOffBg;
|
||||||
|
width: $inputSwitchHandleWidth;
|
||||||
|
height: $inputSwitchHandleHeight;
|
||||||
|
left: $inputSwitchSliderPadding;
|
||||||
|
margin-top: math.div(-1 * $inputSwitchHandleHeight, 2);
|
||||||
|
border-radius: $inputSwitchHandleBorderRadius;
|
||||||
|
transition-duration: $transitionDuration;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-highlight {
|
||||||
|
.p-inputswitch-slider {
|
||||||
|
background: $inputSwitchSliderOnBg;
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
background: $inputSwitchHandleOnBg;
|
||||||
|
transform: translateX($inputSwitchHandleWidth);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(.p-disabled) {
|
||||||
|
&:has(.p-inputswitch-input:hover) {
|
||||||
|
.p-inputswitch-slider {
|
||||||
|
background: $inputSwitchSliderOffHoverBg;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-highlight {
|
||||||
|
.p-inputswitch-slider {
|
||||||
|
background: $inputSwitchSliderOnHoverBg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:has(.p-inputswitch-input:focus-visible) {
|
||||||
|
.p-inputswitch-slider {
|
||||||
|
@include focused();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-invalid > .p-inputswitch-slider {
|
||||||
|
@include invalid-input();
|
||||||
|
}
|
||||||
|
}
|
||||||
101
src/assets/scss/theme-base/components/input/_inputtext.scss
Normal file
101
src/assets/scss/theme-base/components/input/_inputtext.scss
Normal file
@@ -0,0 +1,101 @@
|
|||||||
|
.p-inputtext {
|
||||||
|
font-family: var(--font-family);
|
||||||
|
font-feature-settings: var(--font-feature-settings, normal);
|
||||||
|
font-size: $inputTextFontSize;
|
||||||
|
color: $inputTextColor;
|
||||||
|
background: $inputBg;
|
||||||
|
padding: $inputPadding;
|
||||||
|
border: $inputBorder;
|
||||||
|
transition: $formElementTransition;
|
||||||
|
appearance: none;
|
||||||
|
border-radius: $borderRadius;
|
||||||
|
outline-color: transparent;
|
||||||
|
|
||||||
|
&:enabled:hover {
|
||||||
|
border-color: $inputHoverBorderColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:enabled:focus {
|
||||||
|
@include focused-input();
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-invalid.p-component {
|
||||||
|
@include invalid-input();
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-variant-filled {
|
||||||
|
background-color: $inputFilledBg;
|
||||||
|
|
||||||
|
&:enabled:hover {
|
||||||
|
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 > .p-invalid + label {
|
||||||
|
color: $inputErrorBorderColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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);
|
||||||
|
}
|
||||||
|
}
|
||||||
139
src/assets/scss/theme-base/components/input/_listbox.scss
Normal file
139
src/assets/scss/theme-base/components/input/_listbox.scss
Normal file
@@ -0,0 +1,139 @@
|
|||||||
|
|
||||||
|
.p-listbox-list-wrapper {
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-listbox-list {
|
||||||
|
list-style-type: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-listbox-item {
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-listbox-item-group {
|
||||||
|
cursor: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-listbox-filter-container {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-listbox-filter-icon {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
margin-top: -0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-listbox-filter {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.p-listbox {
|
||||||
|
background: $inputListBg;
|
||||||
|
color: $inputListTextColor;
|
||||||
|
border: $inputListBorder;
|
||||||
|
border-radius: $borderRadius;
|
||||||
|
transition: $formElementTransition;
|
||||||
|
outline-color: transparent;
|
||||||
|
|
||||||
|
.p-listbox-header {
|
||||||
|
padding: $inputListHeaderPadding;
|
||||||
|
border-bottom: $inputListHeaderBorder;
|
||||||
|
color: $inputListHeaderTextColor;
|
||||||
|
background: $inputListHeaderBg;
|
||||||
|
margin: $inputListHeaderMargin;
|
||||||
|
border-top-right-radius: $borderRadius;
|
||||||
|
border-top-left-radius: $borderRadius;
|
||||||
|
|
||||||
|
.p-listbox-filter {
|
||||||
|
padding-right: nth($inputPadding, 2) + $primeIconFontSize;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-listbox-filter-icon {
|
||||||
|
right: nth($inputPadding, 2);
|
||||||
|
color: $inputIconColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-highlight {
|
||||||
|
color: $highlightTextColor;
|
||||||
|
background: $highlightBg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.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-invalid {
|
||||||
|
@include invalid-input();
|
||||||
|
}
|
||||||
|
}
|
||||||
31
src/assets/scss/theme-base/components/input/_mention.scss
Normal file
31
src/assets/scss/theme-base/components/input/_mention.scss
Normal file
@@ -0,0 +1,31 @@
|
|||||||
|
.p-mention-panel {
|
||||||
|
background: $inputOverlayBg;
|
||||||
|
color: $inputListTextColor;
|
||||||
|
border: $inputOverlayBorder;
|
||||||
|
border-radius: $borderRadius;
|
||||||
|
box-shadow: $inputOverlayShadow;
|
||||||
|
|
||||||
|
.p-mention-items {
|
||||||
|
padding: $inputListPadding;
|
||||||
|
|
||||||
|
.p-mention-item {
|
||||||
|
margin: $inputListItemMargin;
|
||||||
|
padding: $inputListItemPadding;
|
||||||
|
border: $inputListItemBorder;
|
||||||
|
color: $inputListItemTextColor;
|
||||||
|
background: $inputListItemBg;
|
||||||
|
transition: $listItemTransition;
|
||||||
|
border-radius: $inputListItemBorderRadius;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $inputListItemTextHoverColor;
|
||||||
|
background: $inputListItemHoverBg;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-highlight {
|
||||||
|
color: $highlightTextColor;
|
||||||
|
background: $highlightBg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
278
src/assets/scss/theme-base/components/input/_multiselect.scss
Normal file
278
src/assets/scss/theme-base/components/input/_multiselect.scss
Normal file
@@ -0,0 +1,278 @@
|
|||||||
|
@use "sass:math";
|
||||||
|
|
||||||
|
|
||||||
|
.p-multiselect {
|
||||||
|
display: inline-flex;
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-multiselect-trigger {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-multiselect-label-container {
|
||||||
|
overflow: hidden;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-multiselect-label {
|
||||||
|
display: block;
|
||||||
|
white-space: nowrap;
|
||||||
|
cursor: pointer;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-multiselect-label-empty {
|
||||||
|
overflow: hidden;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-multiselect-token {
|
||||||
|
cursor: default;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-multiselect-token-icon {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-multiselect .p-multiselect-panel {
|
||||||
|
min-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-multiselect-items-wrapper {
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-multiselect-items {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-multiselect-item {
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-weight: normal;
|
||||||
|
white-space: nowrap;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-multiselect-item-group {
|
||||||
|
cursor: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-multiselect-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-multiselect-filter-container {
|
||||||
|
position: relative;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-multiselect-filter-icon {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
margin-top: -0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-multiselect-filter-container .p-inputtext {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-multiselect-close {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-fluid .p-multiselect {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.p-multiselect {
|
||||||
|
background: $inputBg;
|
||||||
|
border: $inputBorder;
|
||||||
|
transition: $formElementTransition;
|
||||||
|
border-radius: $borderRadius;
|
||||||
|
outline-color: transparent;
|
||||||
|
|
||||||
|
&:not(.p-disabled):hover {
|
||||||
|
border-color: $inputHoverBorderColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(.p-disabled).p-focus {
|
||||||
|
@include focused-input();
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-variant-filled {
|
||||||
|
background: $inputFilledBg;
|
||||||
|
|
||||||
|
&:not(.p-disabled):hover {
|
||||||
|
background-color: $inputFilledHoverBg;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(.p-disabled).p-focus {
|
||||||
|
background-color: $inputFilledFocusBg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.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-invalid.p-component {
|
||||||
|
@include invalid-input();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-inputwrapper-filled {
|
||||||
|
&.p-multiselect {
|
||||||
|
&.p-multiselect-chip {
|
||||||
|
.p-multiselect-label {
|
||||||
|
padding: math.div(nth($inputPadding, 1), 2)
|
||||||
|
nth($inputPadding, 2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-multiselect-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;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-highlight {
|
||||||
|
color: $highlightTextColor;
|
||||||
|
background: $highlightBg;
|
||||||
|
|
||||||
|
&.p-focus {
|
||||||
|
background: $highlightFocusBg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(.p-highlight):not(.p-disabled) {
|
||||||
|
&.p-focus {
|
||||||
|
color: $inputListItemTextHoverColor;
|
||||||
|
background: $inputListItemHoverBg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-checkbox {
|
||||||
|
margin-right: $inlineSpacing;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-multiselect-item-group {
|
||||||
|
margin: $submenuHeaderMargin;
|
||||||
|
padding: $submenuHeaderPadding;
|
||||||
|
color: $submenuHeaderTextColor;
|
||||||
|
background: $submenuHeaderBg;
|
||||||
|
font-weight: $submenuHeaderFontWeight;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-multiselect-empty-message {
|
||||||
|
padding: $inputListItemPadding;
|
||||||
|
color: $inputListItemTextColor;
|
||||||
|
background: $inputListItemBg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
33
src/assets/scss/theme-base/components/input/_password.scss
Normal file
33
src/assets/scss/theme-base/components/input/_password.scss
Normal file
@@ -0,0 +1,33 @@
|
|||||||
|
.p-password {
|
||||||
|
&.p-invalid.p-component > .p-inputtext {
|
||||||
|
@include invalid-input();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-password-panel {
|
||||||
|
padding: $panelContentPadding;
|
||||||
|
background: $panelContentBg;
|
||||||
|
color: $panelContentTextColor;
|
||||||
|
border: $overlayContentBorder;
|
||||||
|
box-shadow: $inputOverlayShadow;
|
||||||
|
border-radius: $borderRadius;
|
||||||
|
|
||||||
|
.p-password-meter {
|
||||||
|
margin-bottom: $inlineSpacing;
|
||||||
|
background: $passwordMeterBg;
|
||||||
|
|
||||||
|
.p-password-strength {
|
||||||
|
&.weak {
|
||||||
|
background: $passwordWeakBg;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.medium {
|
||||||
|
background: $passwordMediumBg;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.strong {
|
||||||
|
background: $passwordStrongBg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
170
src/assets/scss/theme-base/components/input/_radiobutton.scss
Normal file
170
src/assets/scss/theme-base/components/input/_radiobutton.scss
Normal file
@@ -0,0 +1,170 @@
|
|||||||
|
|
||||||
|
.p-radiobutton {
|
||||||
|
position: relative;
|
||||||
|
display: inline-flex;
|
||||||
|
user-select: none;
|
||||||
|
vertical-align: bottom;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-radiobutton-input {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-radiobutton-box {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-radiobutton-icon {
|
||||||
|
-webkit-backface-visibility: hidden;
|
||||||
|
backface-visibility: hidden;
|
||||||
|
transform: translateZ(0) scale(.1);
|
||||||
|
border-radius: 50%;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-radiobutton.p-highlight .p-radiobutton-icon {
|
||||||
|
transform: translateZ(0) scale(1.0, 1.0);
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.p-radiobutton {
|
||||||
|
width: $radiobuttonWidth;
|
||||||
|
height: $radiobuttonHeight;
|
||||||
|
|
||||||
|
.p-radiobutton-input {
|
||||||
|
appearance: none;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
opacity: 0;
|
||||||
|
z-index: 1;
|
||||||
|
outline: 0 none;
|
||||||
|
border: $radiobuttonBorder;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-radiobutton-box {
|
||||||
|
border: $radiobuttonBorder;
|
||||||
|
background: $inputBg;
|
||||||
|
width: $radiobuttonWidth;
|
||||||
|
height: $radiobuttonHeight;
|
||||||
|
color: $textColor;
|
||||||
|
border-radius: 50%;
|
||||||
|
transition: $formElementTransition;
|
||||||
|
outline-color: transparent;
|
||||||
|
|
||||||
|
.p-radiobutton-icon {
|
||||||
|
width: $radiobuttonIconSize;
|
||||||
|
height: $radiobuttonIconSize;
|
||||||
|
transition-duration: $transitionDuration;
|
||||||
|
background-color: $radiobuttonIconActiveColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-highlight {
|
||||||
|
.p-radiobutton-box {
|
||||||
|
border-color: $radiobuttonActiveBorderColor;
|
||||||
|
background: $radiobuttonActiveBg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(.p-disabled) {
|
||||||
|
&:has(.p-radiobutton-input:hover) {
|
||||||
|
.p-radiobutton-box {
|
||||||
|
border-color: $inputHoverBorderColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-highlight {
|
||||||
|
.p-radiobutton-box {
|
||||||
|
border-color: $radiobuttonActiveHoverBorderColor;
|
||||||
|
background: $radiobuttonActiveHoverBg;
|
||||||
|
|
||||||
|
.p-radiobutton-icon {
|
||||||
|
background-color: $radiobuttonIconActiveHoverColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:has(.p-radiobutton-input:focus-visible) {
|
||||||
|
.p-radiobutton-box {
|
||||||
|
@include focused-input();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-invalid > .p-radiobutton-box {
|
||||||
|
@include invalid-input();
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-variant-filled {
|
||||||
|
.p-radiobutton-box {
|
||||||
|
background-color: $inputFilledBg;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-highlight {
|
||||||
|
.p-radiobutton-box {
|
||||||
|
background: $radiobuttonActiveBg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(.p-disabled) {
|
||||||
|
&:has(.p-radiobutton-input:hover) {
|
||||||
|
.p-radiobutton-box {
|
||||||
|
background-color: $inputFilledHoverBg;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-highlight {
|
||||||
|
.p-radiobutton-box {
|
||||||
|
background: $radiobuttonActiveHoverBg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-input-filled {
|
||||||
|
.p-radiobutton {
|
||||||
|
.p-radiobutton-box {
|
||||||
|
background-color: $inputFilledBg;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-highlight {
|
||||||
|
.p-radiobutton-box {
|
||||||
|
background: $radiobuttonActiveBg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(.p-disabled) {
|
||||||
|
&:has(.p-radiobutton-input:hover) {
|
||||||
|
.p-radiobutton-box {
|
||||||
|
background-color: $inputFilledHoverBg;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-highlight {
|
||||||
|
.p-radiobutton-box {
|
||||||
|
background: $radiobuttonActiveHoverBg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@if ($highlightBg == $radiobuttonActiveBg) {
|
||||||
|
.p-highlight {
|
||||||
|
.p-radiobutton {
|
||||||
|
.p-radiobutton-box {
|
||||||
|
border-color: $radiobuttonIconActiveColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
81
src/assets/scss/theme-base/components/input/_rating.scss
Normal file
81
src/assets/scss/theme-base/components/input/_rating.scss
Normal file
@@ -0,0 +1,81 @@
|
|||||||
|
@use 'sass:math';
|
||||||
|
|
||||||
|
|
||||||
|
.p-rating {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-rating-item {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-rating.p-readonly .p-rating-item {
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.p-rating {
|
||||||
|
gap: $inlineSpacing;
|
||||||
|
|
||||||
|
.p-rating-item {
|
||||||
|
outline-color: transparent;
|
||||||
|
border-radius: 50%;
|
||||||
|
|
||||||
|
.p-rating-icon {
|
||||||
|
color: $ratingStarIconOffColor;
|
||||||
|
transition: $formElementTransition;
|
||||||
|
font-size: $ratingIconFontSize;
|
||||||
|
|
||||||
|
&.p-icon {
|
||||||
|
width: $ratingIconFontSize;
|
||||||
|
height: $ratingIconFontSize;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-rating-cancel {
|
||||||
|
color: $ratingCancelIconColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-focus {
|
||||||
|
@include focused();
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-rating-item-active {
|
||||||
|
.p-rating-icon {
|
||||||
|
color: $ratingStarIconOnColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(.p-disabled):not(.p-readonly) {
|
||||||
|
.p-rating-item {
|
||||||
|
&: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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,50 @@
|
|||||||
|
.p-selectbutton {
|
||||||
|
.p-button {
|
||||||
|
background: $toggleButtonBg;
|
||||||
|
border: $toggleButtonBorder;
|
||||||
|
color: $toggleButtonTextColor;
|
||||||
|
transition: $formElementTransition;
|
||||||
|
|
||||||
|
.p-button-icon-left,
|
||||||
|
.p-button-icon-right {
|
||||||
|
color: $toggleButtonIconColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(.p-disabled):not(.p-highlight):hover {
|
||||||
|
background: $toggleButtonHoverBg;
|
||||||
|
border-color: $toggleButtonHoverBorderColor;
|
||||||
|
color: $toggleButtonTextHoverColor;
|
||||||
|
|
||||||
|
.p-button-icon-left,
|
||||||
|
.p-button-icon-right {
|
||||||
|
color: $toggleButtonIconHoverColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-highlight {
|
||||||
|
background: $toggleButtonActiveBg;
|
||||||
|
border-color: $toggleButtonActiveBorderColor;
|
||||||
|
color: $toggleButtonTextActiveColor;
|
||||||
|
|
||||||
|
.p-button-icon-left,
|
||||||
|
.p-button-icon-right {
|
||||||
|
color: $toggleButtonIconActiveColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: $toggleButtonActiveHoverBg;
|
||||||
|
border-color: $toggleButtonActiveHoverBorderColor;
|
||||||
|
color: $toggleButtonTextActiveHoverColor;
|
||||||
|
|
||||||
|
.p-button-icon-left,
|
||||||
|
.p-button-icon-right {
|
||||||
|
color: $toggleButtonIconActiveHoverColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-invalid > .p-button {
|
||||||
|
@include invalid-input();
|
||||||
|
}
|
||||||
|
}
|
||||||
49
src/assets/scss/theme-base/components/input/_slider.scss
Normal file
49
src/assets/scss/theme-base/components/input/_slider.scss
Normal file
@@ -0,0 +1,49 @@
|
|||||||
|
@use 'sass:math';
|
||||||
|
|
||||||
|
.p-slider {
|
||||||
|
background: $sliderBg;
|
||||||
|
border: $sliderBorder;
|
||||||
|
border-radius: $borderRadius;
|
||||||
|
|
||||||
|
&.p-slider-horizontal {
|
||||||
|
height: $sliderHorizontalHeight;
|
||||||
|
|
||||||
|
.p-slider-handle {
|
||||||
|
margin-top: math.div(-1 * $sliderHandleHeight, 2);
|
||||||
|
margin-left: math.div(-1 * $sliderHandleWidth, 2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-slider-vertical {
|
||||||
|
width: $sliderVerticalWidth;
|
||||||
|
|
||||||
|
.p-slider-handle {
|
||||||
|
margin-left: math.div(-1 * $sliderHandleWidth, 2);
|
||||||
|
margin-bottom: math.div(-1 * $sliderHandleHeight, 2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-slider-handle {
|
||||||
|
height: $sliderHandleHeight;
|
||||||
|
width: $sliderHandleWidth;
|
||||||
|
background: $sliderHandleBg;
|
||||||
|
border: $sliderHandleBorder;
|
||||||
|
border-radius: $sliderHandleBorderRadius;
|
||||||
|
transition: $formElementTransition;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
@include focused();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-slider-range {
|
||||||
|
background: $sliderRangeBg;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(.p-disabled) {
|
||||||
|
.p-slider-handle:hover {
|
||||||
|
background: $sliderHandleHoverBg;
|
||||||
|
border-color: $sliderHandleHoverBorderColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,99 @@
|
|||||||
|
|
||||||
|
.p-togglebutton {
|
||||||
|
position: relative;
|
||||||
|
display: inline-flex;
|
||||||
|
user-select: none;
|
||||||
|
vertical-align: bottom;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-togglebutton-input {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-togglebutton .p-button {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-togglebutton {
|
||||||
|
.p-togglebutton-input {
|
||||||
|
appearance: none;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
opacity: 0;
|
||||||
|
z-index: 1;
|
||||||
|
outline: 0 none;
|
||||||
|
border: $toggleButtonBorder;
|
||||||
|
border-radius: $borderRadius;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-button {
|
||||||
|
background: $toggleButtonBg;
|
||||||
|
border: $toggleButtonBorder;
|
||||||
|
color: $toggleButtonTextColor;
|
||||||
|
transition: $formElementTransition;
|
||||||
|
outline-color: transparent;
|
||||||
|
|
||||||
|
.p-button-icon-left,
|
||||||
|
.p-button-icon-right {
|
||||||
|
color: $toggleButtonIconColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-highlight {
|
||||||
|
.p-button {
|
||||||
|
background: $toggleButtonActiveBg;
|
||||||
|
border-color: $toggleButtonActiveBorderColor;
|
||||||
|
color: $toggleButtonTextActiveColor;
|
||||||
|
|
||||||
|
.p-button-icon-left,
|
||||||
|
.p-button-icon-right {
|
||||||
|
color: $toggleButtonIconActiveColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(.p-disabled) {
|
||||||
|
&:has(.p-togglebutton-input:hover) {
|
||||||
|
&:not(.p-highlight) {
|
||||||
|
.p-button {
|
||||||
|
background: $toggleButtonHoverBg;
|
||||||
|
border-color: $toggleButtonHoverBorderColor;
|
||||||
|
color: $toggleButtonTextHoverColor;
|
||||||
|
|
||||||
|
.p-button-icon-left,
|
||||||
|
.p-button-icon-right {
|
||||||
|
color: $toggleButtonIconHoverColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-highlight {
|
||||||
|
.p-button {
|
||||||
|
background: $toggleButtonActiveHoverBg;
|
||||||
|
border-color: $toggleButtonActiveHoverBorderColor;
|
||||||
|
color: $toggleButtonTextActiveHoverColor;
|
||||||
|
|
||||||
|
.p-button-icon-left,
|
||||||
|
.p-button-icon-right {
|
||||||
|
color: $toggleButtonIconActiveHoverColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:has(.p-togglebutton-input:focus-visible) {
|
||||||
|
.p-button {
|
||||||
|
@include focused-input();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-invalid > .p-button {
|
||||||
|
@include invalid-input();
|
||||||
|
}
|
||||||
|
}
|
||||||
151
src/assets/scss/theme-base/components/input/_treeselect.scss
Normal file
151
src/assets/scss/theme-base/components/input/_treeselect.scss
Normal 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-clearable {
|
||||||
|
.p-treeselect-label {
|
||||||
|
padding-right: nth($inputPadding, 2) + $primeIconFontSize;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-variant-filled {
|
||||||
|
background: $inputFilledBg;
|
||||||
|
|
||||||
|
&:not(.p-disabled):hover {
|
||||||
|
background-color: $inputFilledHoverBg;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(.p-disabled).p-focus {
|
||||||
|
background-color: $inputFilledFocusBg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-treeselect-label {
|
||||||
|
padding: $inputPadding;
|
||||||
|
transition: $formElementTransition;
|
||||||
|
|
||||||
|
&.p-placeholder {
|
||||||
|
color: $inputPlaceholderTextColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-treeselect-chip {
|
||||||
|
.p-treeselect-token {
|
||||||
|
padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
|
||||||
|
margin-right: $inlineSpacing;
|
||||||
|
background: $chipBg;
|
||||||
|
color: $chipTextColor;
|
||||||
|
border-radius: $chipBorderRadius;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-treeselect-trigger {
|
||||||
|
background: transparent;
|
||||||
|
color: $inputIconColor;
|
||||||
|
width: $inputGroupAddOnMinWidth;
|
||||||
|
border-top-right-radius: $borderRadius;
|
||||||
|
border-bottom-right-radius: $borderRadius;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-treeselect-clear-icon {
|
||||||
|
color: $inputIconColor;
|
||||||
|
right: $inputGroupAddOnMinWidth;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-invalid.p-component {
|
||||||
|
@include invalid-input();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-inputwrapper-filled {
|
||||||
|
&.p-treeselect {
|
||||||
|
&.p-treeselect-chip {
|
||||||
|
.p-treeselect-label {
|
||||||
|
padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-treeselect-panel {
|
||||||
|
background: $inputOverlayBg;
|
||||||
|
color: $inputListTextColor;
|
||||||
|
border: $inputOverlayBorder;
|
||||||
|
border-radius: $borderRadius;
|
||||||
|
box-shadow: $inputOverlayShadow;
|
||||||
|
|
||||||
|
.p-treeselect-header {
|
||||||
|
padding: $inputListHeaderPadding;
|
||||||
|
border-bottom: $inputListHeaderBorder;
|
||||||
|
color: $inputListHeaderTextColor;
|
||||||
|
background: $inputOverlayHeaderBg;
|
||||||
|
margin: $inputListHeaderMargin;
|
||||||
|
border-top-right-radius: $borderRadius;
|
||||||
|
border-top-left-radius: $borderRadius;
|
||||||
|
|
||||||
|
.p-treeselect-filter-container {
|
||||||
|
margin-right: $inlineSpacing;
|
||||||
|
|
||||||
|
.p-treeselect-filter {
|
||||||
|
padding-right: nth($inputPadding, 2) + $primeIconFontSize;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-treeselect-filter-icon {
|
||||||
|
right: nth($inputPadding, 2);
|
||||||
|
color: $inputIconColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-treeselect-clearable-filter {
|
||||||
|
.p-treeselect-filter {
|
||||||
|
padding-right: 2 * (nth($inputPadding, 2) + $primeIconFontSize);
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-treeselect-filter-clear-icon {
|
||||||
|
right: (2 * nth($inputPadding, 2)) + $primeIconFontSize;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-treeselect-close {
|
||||||
|
@include action-icon();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-treeselect-items-wrapper {
|
||||||
|
.p-tree {
|
||||||
|
border: 0 none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-treeselect-empty-message {
|
||||||
|
padding: $inputListItemPadding;
|
||||||
|
color: $inputListItemTextColor;
|
||||||
|
background: $inputListItemBg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-input-filled {
|
||||||
|
.p-treeselect {
|
||||||
|
background: $inputFilledBg;
|
||||||
|
|
||||||
|
&:not(.p-disabled):hover {
|
||||||
|
background-color: $inputFilledHoverBg;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(.p-disabled).p-focus {
|
||||||
|
background-color: $inputFilledFocusBg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,46 @@
|
|||||||
|
|
||||||
|
.p-checkbox {
|
||||||
|
position: relative;
|
||||||
|
display: inline-flex;
|
||||||
|
user-select: none;
|
||||||
|
vertical-align: bottom;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-checkbox-input {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-checkbox-box {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.p-tristatecheckbox {
|
||||||
|
&.p-variant-filled {
|
||||||
|
.p-checkbox-box {
|
||||||
|
background-color: $inputFilledBg;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-highlight {
|
||||||
|
.p-checkbox-box {
|
||||||
|
background: $checkboxActiveBg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(.p-disabled) {
|
||||||
|
&:has(.p-checkbox-input:hover) {
|
||||||
|
.p-checkbox-box {
|
||||||
|
background-color: $inputFilledHoverBg;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-highlight {
|
||||||
|
.p-checkbox-box {
|
||||||
|
background: $checkboxActiveHoverBg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
42
src/assets/scss/theme-base/components/menu/_breadcrumb.scss
Normal file
42
src/assets/scss/theme-base/components/menu/_breadcrumb.scss
Normal file
@@ -0,0 +1,42 @@
|
|||||||
|
.p-breadcrumb {
|
||||||
|
background: $breadcrumbBg;
|
||||||
|
border: $breadcrumbBorder;
|
||||||
|
border-radius: $borderRadius;
|
||||||
|
padding: $breadcrumbPadding;
|
||||||
|
|
||||||
|
.p-breadcrumb-list {
|
||||||
|
li {
|
||||||
|
.p-menuitem-link {
|
||||||
|
transition: $listItemTransition;
|
||||||
|
border-radius: $borderRadius;
|
||||||
|
|
||||||
|
&:focus-visible {
|
||||||
|
@include focused();
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-menuitem-text {
|
||||||
|
color: $breadcrumbItemTextColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-menuitem-icon {
|
||||||
|
color: $breadcrumbItemIconColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-menuitem-separator {
|
||||||
|
margin: 0 $inlineSpacing 0 $inlineSpacing;
|
||||||
|
color: $breadcrumbSeparatorColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
.p-menuitem-text {
|
||||||
|
color: $breadcrumbLastItemTextColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-menuitem-icon {
|
||||||
|
color: $breadcrumbLastItemIconColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
39
src/assets/scss/theme-base/components/menu/_contextmenu.scss
Normal file
39
src/assets/scss/theme-base/components/menu/_contextmenu.scss
Normal 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-link();
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-menuitem-separator {
|
||||||
|
border-top: $divider;
|
||||||
|
margin: $menuSeparatorMargin;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-submenu-icon {
|
||||||
|
font-size: $menuitemSubmenuIconFontSize;
|
||||||
|
|
||||||
|
&.p-icon {
|
||||||
|
width: $menuitemSubmenuIconFontSize;
|
||||||
|
height: $menuitemSubmenuIconFontSize;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
109
src/assets/scss/theme-base/components/menu/_dock.scss
Normal file
109
src/assets/scss/theme-base/components/menu/_dock.scss
Normal file
@@ -0,0 +1,109 @@
|
|||||||
|
.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-action {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-dock-mobile {
|
||||||
|
&.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-dock-magnification {
|
||||||
|
&.p-dock-top,
|
||||||
|
&.p-dock-bottom,
|
||||||
|
&.p-dock-left,
|
||||||
|
&.p-dock-right {
|
||||||
|
.p-dock-item-second-prev,
|
||||||
|
.p-dock-item-second-next,
|
||||||
|
.p-dock-item-prev,
|
||||||
|
.p-dock-item-next,
|
||||||
|
.p-dock-item-current {
|
||||||
|
transform: none;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
141
src/assets/scss/theme-base/components/menu/_megamenu.scss
Normal file
141
src/assets/scss/theme-base/components/menu/_megamenu.scss
Normal file
@@ -0,0 +1,141 @@
|
|||||||
|
.p-megamenu {
|
||||||
|
padding: $horizontalMenuPadding;
|
||||||
|
background: $horizontalMenuBg;
|
||||||
|
color: $horizontalMenuTextColor;
|
||||||
|
border: $horizontalMenuBorder;
|
||||||
|
border-radius: $borderRadius;
|
||||||
|
|
||||||
|
.p-megamenu-root-list {
|
||||||
|
outline: 0 none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-menuitem {
|
||||||
|
@include menuitem-link();
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-megamenu-panel {
|
||||||
|
background: $overlayMenuBg;
|
||||||
|
color: $menuTextColor;
|
||||||
|
border: $overlayMenuBorder;
|
||||||
|
box-shadow: $overlayMenuShadow;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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-button {
|
||||||
|
width: $actionIconWidth;
|
||||||
|
height: $actionIconHeight;
|
||||||
|
color: $horizontalMenuRootMenuitemIconColor;
|
||||||
|
border-radius: $actionIconBorderRadius;
|
||||||
|
transition: $actionIconTransition;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $horizontalMenuRootMenuitemIconHoverColor;
|
||||||
|
background: $horizontalMenuRootMenuitemHoverBg;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
@include focused();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-megamenu-horizontal {
|
||||||
|
.p-megamenu-root-list {
|
||||||
|
> .p-menuitem {
|
||||||
|
@include horizontal-rootmenuitem-link();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-megamenu-mobile-active {
|
||||||
|
.p-megamenu-root-list {
|
||||||
|
padding: $verticalMenuPadding;
|
||||||
|
background: $overlayMenuBg;
|
||||||
|
border: $overlayMenuBorder;
|
||||||
|
box-shadow: $overlayMenuShadow;
|
||||||
|
|
||||||
|
.p-menu-separator {
|
||||||
|
border-top: $divider;
|
||||||
|
margin: $menuSeparatorMargin;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-submenu-icon {
|
||||||
|
font-size: $menuitemSubmenuIconFontSize;
|
||||||
|
|
||||||
|
&.p-icon {
|
||||||
|
width: $menuitemSubmenuIconFontSize;
|
||||||
|
height: $menuitemSubmenuIconFontSize;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> .p-menuitem {
|
||||||
|
width: 100%;
|
||||||
|
position: static;
|
||||||
|
|
||||||
|
> .p-menuitem-link {
|
||||||
|
@include menuitem-link();
|
||||||
|
|
||||||
|
> .p-submenu-icon {
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-menuitem-active {
|
||||||
|
> .p-menuitem-link {
|
||||||
|
> .p-submenu-icon {
|
||||||
|
transform: rotate(-180deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-submenu-list {
|
||||||
|
width: 100%;
|
||||||
|
position: static;
|
||||||
|
box-shadow: none;
|
||||||
|
border: 0 none;
|
||||||
|
|
||||||
|
.p-submenu-icon {
|
||||||
|
transition: transform $transitionDuration;
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-menuitem-active {
|
||||||
|
> .p-menuitem-link {
|
||||||
|
> .p-submenu-icon {
|
||||||
|
transform: rotate(-90deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-menuitem {
|
||||||
|
width: 100%;
|
||||||
|
position: static;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
33
src/assets/scss/theme-base/components/menu/_menu.scss
Normal file
33
src/assets/scss/theme-base/components/menu/_menu.scss
Normal file
@@ -0,0 +1,33 @@
|
|||||||
|
.p-menu {
|
||||||
|
padding: $verticalMenuPadding;
|
||||||
|
background: $menuBg;
|
||||||
|
color: $menuTextColor;
|
||||||
|
border: $menuBorder;
|
||||||
|
border-radius: $borderRadius;
|
||||||
|
width: $menuWidth;
|
||||||
|
|
||||||
|
.p-menuitem {
|
||||||
|
@include menuitem-link();
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-menu-overlay {
|
||||||
|
background: $overlayMenuBg;
|
||||||
|
border: $overlayMenuBorder;
|
||||||
|
box-shadow: $overlayMenuShadow;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-submenu-header {
|
||||||
|
margin: $submenuHeaderMargin;
|
||||||
|
padding: $submenuHeaderPadding;
|
||||||
|
color: $submenuHeaderTextColor;
|
||||||
|
background: $submenuHeaderBg;
|
||||||
|
font-weight: $submenuHeaderFontWeight;
|
||||||
|
border-top-right-radius: $submenuHeaderBorderRadius;
|
||||||
|
border-top-left-radius: $submenuHeaderBorderRadius;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-menu-separator {
|
||||||
|
border-top: $divider;
|
||||||
|
margin: $menuSeparatorMargin;
|
||||||
|
}
|
||||||
|
}
|
||||||
216
src/assets/scss/theme-base/components/menu/_menubar.scss
Normal file
216
src/assets/scss/theme-base/components/menu/_menubar.scss
Normal file
@@ -0,0 +1,216 @@
|
|||||||
|
.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-link();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-menuitem {
|
||||||
|
@include menuitem-link();
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-submenu-list {
|
||||||
|
padding: $verticalMenuPadding;
|
||||||
|
background: $overlayMenuBg;
|
||||||
|
border: $overlayMenuBorder;
|
||||||
|
box-shadow: $overlayMenuShadow;
|
||||||
|
width: $menuWidth;
|
||||||
|
|
||||||
|
.p-menuitem-separator {
|
||||||
|
border-top: $divider;
|
||||||
|
margin: $menuSeparatorMargin;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-submenu-icon {
|
||||||
|
font-size: $menuitemSubmenuIconFontSize;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-menubar-mobile {
|
||||||
|
.p-menubar-button {
|
||||||
|
width: $actionIconWidth;
|
||||||
|
height: $actionIconHeight;
|
||||||
|
color: $horizontalMenuRootMenuitemIconColor;
|
||||||
|
border-radius: $actionIconBorderRadius;
|
||||||
|
transition: $actionIconTransition;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $horizontalMenuRootMenuitemIconHoverColor;
|
||||||
|
background: $horizontalMenuRootMenuitemHoverBg;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
@include focused();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-menubar-root-list {
|
||||||
|
padding: $verticalMenuPadding;
|
||||||
|
background: $overlayMenuBg;
|
||||||
|
border: $overlayMenuBorder;
|
||||||
|
box-shadow: $overlayMenuShadow;
|
||||||
|
|
||||||
|
.p-menuitem-separator {
|
||||||
|
border-top: $divider;
|
||||||
|
margin: $menuSeparatorMargin;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-submenu-icon {
|
||||||
|
font-size: $menuitemSubmenuIconFontSize;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-menuitem {
|
||||||
|
.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 {
|
||||||
|
.p-submenu-icon {
|
||||||
|
transition: transform $transitionDuration;
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-menuitem-active {
|
||||||
|
> .p-menuitem-content {
|
||||||
|
> .p-menuitem-link {
|
||||||
|
> .p-submenu-icon {
|
||||||
|
transform: rotate(-90deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@include nested-submenu-indents(nth($menuitemPadding, 1), 2, 10);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 960px) {
|
||||||
|
.p-menubar {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.p-menubar-button {
|
||||||
|
display: flex;
|
||||||
|
width: $actionIconWidth;
|
||||||
|
height: $actionIconHeight;
|
||||||
|
color: $horizontalMenuRootMenuitemIconColor;
|
||||||
|
border-radius: $actionIconBorderRadius;
|
||||||
|
transition: $actionIconTransition;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $horizontalMenuRootMenuitemIconHoverColor;
|
||||||
|
background: $horizontalMenuRootMenuitemHoverBg;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
@include focused();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-menubar-root-list {
|
||||||
|
position: absolute;
|
||||||
|
display: none;
|
||||||
|
padding: $verticalMenuPadding;
|
||||||
|
background: $overlayMenuBg;
|
||||||
|
border: $overlayMenuBorder;
|
||||||
|
box-shadow: $overlayMenuShadow;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.p-menu-separator {
|
||||||
|
border-top: $divider;
|
||||||
|
margin: $menuSeparatorMargin;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-submenu-icon {
|
||||||
|
font-size: $menuitemSubmenuIconFontSize;
|
||||||
|
|
||||||
|
&.p-icon {
|
||||||
|
width: $menuitemSubmenuIconFontSize;
|
||||||
|
height: $menuitemSubmenuIconFontSize;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> .p-menuitem {
|
||||||
|
width: 100%;
|
||||||
|
position: static;
|
||||||
|
|
||||||
|
> .p-menuitem-link {
|
||||||
|
@include menuitem-link();
|
||||||
|
|
||||||
|
> .p-submenu-icon {
|
||||||
|
margin-left: auto;
|
||||||
|
transition: transform $transitionDuration;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-menuitem-active {
|
||||||
|
> .p-menuitem-link {
|
||||||
|
> .p-submenu-icon {
|
||||||
|
transform: rotate(-180deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-submenu-list {
|
||||||
|
width: 100%;
|
||||||
|
position: static;
|
||||||
|
box-shadow: none;
|
||||||
|
border: 0 none;
|
||||||
|
|
||||||
|
.p-submenu-icon {
|
||||||
|
transition: transform $transitionDuration;
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-menuitem-active {
|
||||||
|
> .p-menuitem-link {
|
||||||
|
> .p-submenu-icon {
|
||||||
|
transform: rotate(-90deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-menuitem {
|
||||||
|
width: 100%;
|
||||||
|
position: static;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include nested-submenu-indents(nth($menuitemPadding, 1), 2, 10);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-menubar-mobile-active .p-menubar-root-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
top: 100%;
|
||||||
|
left: 0;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
153
src/assets/scss/theme-base/components/menu/_panelmenu.scss
Normal file
153
src/assets/scss/theme-base/components/menu/_panelmenu.scss
Normal 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-link {
|
||||||
|
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-link();
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
60
src/assets/scss/theme-base/components/menu/_slidemenu.scss
Normal file
60
src/assets/scss/theme-base/components/menu/_slidemenu.scss
Normal file
@@ -0,0 +1,60 @@
|
|||||||
|
.p-slidemenu {
|
||||||
|
padding: $verticalMenuPadding;
|
||||||
|
background: $menuBg;
|
||||||
|
color: $menuTextColor;
|
||||||
|
border: $menuBorder;
|
||||||
|
border-radius: $borderRadius;
|
||||||
|
width: $menuWidth;
|
||||||
|
|
||||||
|
.p-menuitem-link {
|
||||||
|
@include menuitem-link();
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-slidemenu-overlay {
|
||||||
|
background: $overlayMenuBg;
|
||||||
|
border: $overlayMenuBorder;
|
||||||
|
box-shadow: $overlayMenuShadow;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-slidemenu-list {
|
||||||
|
padding: $verticalMenuPadding;
|
||||||
|
background: $overlayMenuBg;
|
||||||
|
border: $overlayMenuBorder;
|
||||||
|
box-shadow: $overlayMenuShadow;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-slidemenu {
|
||||||
|
&.p-slidemenu-active {
|
||||||
|
> .p-slidemenu-link {
|
||||||
|
background: $menuitemActiveBg;
|
||||||
|
|
||||||
|
.p-slidemenu-text {
|
||||||
|
color: $menuitemTextActiveColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-slidemenu-icon, .p-slidemenu-icon {
|
||||||
|
color: $menuitemIconActiveColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-slidemenu-separator {
|
||||||
|
border-top: $divider;
|
||||||
|
margin: $menuSeparatorMargin;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-slidemenu-icon {
|
||||||
|
font-size: $menuitemSubmenuIconFontSize;
|
||||||
|
|
||||||
|
&.p-icon {
|
||||||
|
width: $menuitemSubmenuIconFontSize;
|
||||||
|
height: $menuitemSubmenuIconFontSize;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-slidemenu-backward {
|
||||||
|
padding: $menuitemPadding;
|
||||||
|
color: $menuitemTextColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
57
src/assets/scss/theme-base/components/menu/_steps.scss
Normal file
57
src/assets/scss/theme-base/components/menu/_steps.scss
Normal file
@@ -0,0 +1,57 @@
|
|||||||
|
@use 'sass:math';
|
||||||
|
|
||||||
|
.p-steps {
|
||||||
|
|
||||||
|
.p-steps-item {
|
||||||
|
.p-menuitem-link {
|
||||||
|
background: transparent;
|
||||||
|
transition: $listItemTransition;
|
||||||
|
border-radius: $borderRadius;
|
||||||
|
background: $stepsItemBg;
|
||||||
|
|
||||||
|
.p-steps-number {
|
||||||
|
color: $stepsItemNumberColor;
|
||||||
|
border: $stepsItemBorder;
|
||||||
|
background: $stepsItemBg;
|
||||||
|
min-width: $stepsItemNumberWidth;
|
||||||
|
height: $stepsItemNumberHeight;
|
||||||
|
line-height: $stepsItemNumberHeight;
|
||||||
|
font-size: $stepsItemNumberFontSize;
|
||||||
|
z-index: 1;
|
||||||
|
border-radius: $stepsItemNumberBorderRadius;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-steps-title {
|
||||||
|
margin-top: $inlineSpacing;
|
||||||
|
color: $stepsItemTextColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(.p-disabled):focus-visible {
|
||||||
|
@include focused();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-highlight {
|
||||||
|
.p-steps-number {
|
||||||
|
background: $highlightBg;
|
||||||
|
color: $highlightTextColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-steps-title {
|
||||||
|
font-weight: $stepsItemActiveFontWeight;
|
||||||
|
color: $textColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
content:' ';
|
||||||
|
border-top: $divider;
|
||||||
|
width: 100%;
|
||||||
|
top: 50%;
|
||||||
|
left: 0;
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
margin-top: math.div(-1 * $stepsItemNumberHeight, 2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
50
src/assets/scss/theme-base/components/menu/_tabmenu.scss
Normal file
50
src/assets/scss/theme-base/components/menu/_tabmenu.scss
Normal file
@@ -0,0 +1,50 @@
|
|||||||
|
.p-tabmenu {
|
||||||
|
.p-tabmenu-nav {
|
||||||
|
background: $tabviewNavBg;
|
||||||
|
border: $tabviewNavBorder;
|
||||||
|
border-width: $tabviewNavBorderWidth;
|
||||||
|
|
||||||
|
.p-tabmenuitem {
|
||||||
|
margin-right: $tabviewHeaderSpacing;
|
||||||
|
|
||||||
|
.p-menuitem-link {
|
||||||
|
border: $tabviewHeaderBorder;
|
||||||
|
border-width: $tabviewHeaderBorderWidth;
|
||||||
|
border-color: $tabviewHeaderBorderColor;
|
||||||
|
background: $tabviewHeaderBg;
|
||||||
|
color: $tabviewHeaderTextColor;
|
||||||
|
padding: $tabviewHeaderPadding;
|
||||||
|
font-weight: $tabviewHeaderFontWeight;
|
||||||
|
border-top-right-radius: $borderRadius;
|
||||||
|
border-top-left-radius: $borderRadius;
|
||||||
|
transition: $listItemTransition;
|
||||||
|
margin: $tabviewHeaderMargin;
|
||||||
|
height: calc(100% + #{-1 * nth($tabviewHeaderMargin, 3)});
|
||||||
|
|
||||||
|
.p-menuitem-icon {
|
||||||
|
margin-right: $inlineSpacing;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(.p-disabled):focus-visible {
|
||||||
|
@include focused-inset();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(.p-highlight):not(.p-disabled):hover {
|
||||||
|
.p-menuitem-link {
|
||||||
|
background: $tabviewHeaderHoverBg;
|
||||||
|
border-color: $tabviewHeaderHoverBorderColor;
|
||||||
|
color: $tabviewHeaderTextHoverColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-highlight {
|
||||||
|
.p-menuitem-link {
|
||||||
|
background: $tabviewHeaderActiveBg;
|
||||||
|
border-color: $tabviewHeaderActiveBorderColor;
|
||||||
|
color: $tabviewHeaderTextActiveColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
43
src/assets/scss/theme-base/components/menu/_tieredmenu.scss
Normal file
43
src/assets/scss/theme-base/components/menu/_tieredmenu.scss
Normal file
@@ -0,0 +1,43 @@
|
|||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-menuitem {
|
||||||
|
@include menuitem-link();
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-menuitem-separator {
|
||||||
|
border-top: $divider;
|
||||||
|
margin: $menuSeparatorMargin;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-submenu-icon {
|
||||||
|
font-size: $menuitemSubmenuIconFontSize;
|
||||||
|
|
||||||
|
&.p-icon {
|
||||||
|
width: $menuitemSubmenuIconFontSize;
|
||||||
|
height: $menuitemSubmenuIconFontSize;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,69 @@
|
|||||||
|
.p-inline-message {
|
||||||
|
padding: $inlineMessagePadding;
|
||||||
|
margin: $inlineMessageMargin;
|
||||||
|
border-radius: $borderRadius;
|
||||||
|
|
||||||
|
&.p-inline-message-info {
|
||||||
|
background: $infoMessageBg;
|
||||||
|
border: $infoMessageBorder;
|
||||||
|
border-width: $inlineMessageBorderWidth;
|
||||||
|
color: $infoMessageTextColor;
|
||||||
|
|
||||||
|
.p-inline-message-icon {
|
||||||
|
color: $infoMessageIconColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-inline-message-success {
|
||||||
|
background: $successMessageBg;
|
||||||
|
border: $successMessageBorder;
|
||||||
|
border-width: $inlineMessageBorderWidth;
|
||||||
|
color: $successMessageTextColor;
|
||||||
|
|
||||||
|
.p-inline-message-icon {
|
||||||
|
color: $successMessageIconColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-inline-message-warn {
|
||||||
|
background: $warningMessageBg;
|
||||||
|
border: $warningMessageBorder;
|
||||||
|
border-width: $inlineMessageBorderWidth;
|
||||||
|
color: $warningMessageTextColor;
|
||||||
|
|
||||||
|
.p-inline-message-icon {
|
||||||
|
color: $warningMessageIconColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-inline-message-error {
|
||||||
|
background: $errorMessageBg;
|
||||||
|
border: $errorMessageBorder;
|
||||||
|
border-width: $inlineMessageBorderWidth;
|
||||||
|
color: $errorMessageTextColor;
|
||||||
|
|
||||||
|
.p-inline-message-icon {
|
||||||
|
color: $errorMessageIconColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-inline-message-icon {
|
||||||
|
font-size: $inlineMessageIconFontSize;
|
||||||
|
margin-right: $inlineSpacing;
|
||||||
|
|
||||||
|
&.p-icon {
|
||||||
|
width: $inlineMessageIconFontSize;
|
||||||
|
height: $inlineMessageIconFontSize;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-inline-message-text {
|
||||||
|
font-size: $inlineMessageTextFontSize;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-inline-message-icon-only {
|
||||||
|
.p-inline-message-icon {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
107
src/assets/scss/theme-base/components/messages/_message.scss
Normal file
107
src/assets/scss/theme-base/components/messages/_message.scss
Normal file
@@ -0,0 +1,107 @@
|
|||||||
|
.p-message {
|
||||||
|
margin: $messageMargin;
|
||||||
|
border-radius: $borderRadius;
|
||||||
|
|
||||||
|
.p-message-wrapper {
|
||||||
|
padding: $messagePadding;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-message-close {
|
||||||
|
width: $actionIconWidth;
|
||||||
|
height: $actionIconHeight;
|
||||||
|
border-radius: $actionIconBorderRadius;
|
||||||
|
background: transparent;
|
||||||
|
transition: $actionIconTransition;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: rgba(255,255,255,.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus-visible {
|
||||||
|
@include focused();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-message-info {
|
||||||
|
background: $infoMessageBg;
|
||||||
|
border: $infoMessageBorder;
|
||||||
|
border-width: $messageBorderWidth;
|
||||||
|
color: $infoMessageTextColor;
|
||||||
|
|
||||||
|
.p-message-icon {
|
||||||
|
color: $infoMessageIconColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-message-close {
|
||||||
|
color: $infoMessageIconColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-message-success {
|
||||||
|
background: $successMessageBg;
|
||||||
|
border: $successMessageBorder;
|
||||||
|
border-width: $messageBorderWidth;
|
||||||
|
color: $successMessageTextColor;
|
||||||
|
|
||||||
|
.p-message-icon {
|
||||||
|
color: $successMessageIconColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-message-close {
|
||||||
|
color: $successMessageIconColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-message-warn {
|
||||||
|
background: $warningMessageBg;
|
||||||
|
border: $warningMessageBorder;
|
||||||
|
border-width: $messageBorderWidth;
|
||||||
|
color: $warningMessageTextColor;
|
||||||
|
|
||||||
|
.p-message-icon {
|
||||||
|
color: $warningMessageIconColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-message-close {
|
||||||
|
color: $warningMessageIconColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-message-error {
|
||||||
|
background: $errorMessageBg;
|
||||||
|
border: $errorMessageBorder;
|
||||||
|
border-width: $messageBorderWidth;
|
||||||
|
color: $errorMessageTextColor;
|
||||||
|
|
||||||
|
.p-message-icon {
|
||||||
|
color: $errorMessageIconColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-message-close {
|
||||||
|
color: $errorMessageIconColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-message-text {
|
||||||
|
font-size: $messageTextFontSize;
|
||||||
|
font-weight: $messageTextFontWeight;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-message-icon {
|
||||||
|
font-size: $messageIconFontSize;
|
||||||
|
margin-right: $inlineSpacing;
|
||||||
|
|
||||||
|
&.p-icon {
|
||||||
|
width: $messageIconFontSize;
|
||||||
|
height: $messageIconFontSize;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-message-summary {
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-message-detail {
|
||||||
|
margin-left: $inlineSpacing;
|
||||||
|
}
|
||||||
|
}
|
||||||
101
src/assets/scss/theme-base/components/messages/_toast.scss
Normal file
101
src/assets/scss/theme-base/components/messages/_toast.scss
Normal file
@@ -0,0 +1,101 @@
|
|||||||
|
.p-toast {
|
||||||
|
opacity: $toastOpacity;
|
||||||
|
|
||||||
|
.p-toast-message {
|
||||||
|
margin: $toastMargin;
|
||||||
|
box-shadow: $toastShadow;
|
||||||
|
border-radius: $borderRadius;
|
||||||
|
|
||||||
|
.p-toast-message-content {
|
||||||
|
padding: $toastPadding;
|
||||||
|
border-width: $toastBorderWidth;
|
||||||
|
|
||||||
|
.p-toast-message-text {
|
||||||
|
margin: $toastMessageTextMargin;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-toast-message-icon {
|
||||||
|
font-size: $toastIconFontSize;
|
||||||
|
|
||||||
|
&.p-icon {
|
||||||
|
width: $toastIconFontSize;
|
||||||
|
height: $toastIconFontSize;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.p-toast-summary {
|
||||||
|
font-weight: $toastTitleFontWeight;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-toast-detail {
|
||||||
|
margin: $toastDetailMargin;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-toast-icon-close {
|
||||||
|
width: $toastIconFontSize;
|
||||||
|
height: $toastIconFontSize;
|
||||||
|
border-radius: $actionIconBorderRadius;
|
||||||
|
background: transparent;
|
||||||
|
transition: $actionIconTransition;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: rgba(255,255,255,.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus-visible {
|
||||||
|
@include focused();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-toast-message-info {
|
||||||
|
background: $infoMessageBg;
|
||||||
|
border: $infoMessageBorder;
|
||||||
|
border-width: $messageBorderWidth;
|
||||||
|
color: $infoMessageTextColor;
|
||||||
|
|
||||||
|
.p-toast-message-icon,
|
||||||
|
.p-toast-icon-close {
|
||||||
|
color: $infoMessageIconColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-toast-message-success {
|
||||||
|
background: $successMessageBg;
|
||||||
|
border: $successMessageBorder;
|
||||||
|
border-width: $messageBorderWidth;
|
||||||
|
color: $successMessageTextColor;
|
||||||
|
|
||||||
|
.p-toast-message-icon,
|
||||||
|
.p-toast-icon-close {
|
||||||
|
color: $successMessageIconColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-toast-message-warn {
|
||||||
|
background: $warningMessageBg;
|
||||||
|
border: $warningMessageBorder;
|
||||||
|
border-width: $messageBorderWidth;
|
||||||
|
color: $warningMessageTextColor;
|
||||||
|
|
||||||
|
.p-toast-message-icon,
|
||||||
|
.p-toast-icon-close {
|
||||||
|
color: $warningMessageIconColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-toast-message-error {
|
||||||
|
background: $errorMessageBg;
|
||||||
|
border: $errorMessageBorder;
|
||||||
|
border-width: $messageBorderWidth;
|
||||||
|
color: $errorMessageTextColor;
|
||||||
|
|
||||||
|
.p-toast-message-icon,
|
||||||
|
.p-toast-icon-close {
|
||||||
|
color: $errorMessageIconColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
34
src/assets/scss/theme-base/components/misc/_avatar.scss
Normal file
34
src/assets/scss/theme-base/components/misc/_avatar.scss
Normal file
@@ -0,0 +1,34 @@
|
|||||||
|
.p-avatar {
|
||||||
|
background-color: $avatarBg;
|
||||||
|
border-radius: $borderRadius;
|
||||||
|
|
||||||
|
&.p-avatar-lg {
|
||||||
|
width: 3rem;
|
||||||
|
height: 3rem;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
|
||||||
|
.p-avatar-icon {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-avatar-xl {
|
||||||
|
width: 4rem;
|
||||||
|
height: 4rem;
|
||||||
|
font-size: 2rem;
|
||||||
|
|
||||||
|
.p-avatar-icon {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-avatar-circle {
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-avatar-group {
|
||||||
|
.p-avatar {
|
||||||
|
border: 2px solid $panelContentBg;
|
||||||
|
}
|
||||||
|
}
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user