Skip to content

P
portal-apps-manage
Commit 3c22191d by Ooh-Ao
Options

css

parent e2aa27c6
Showing with 2824 additions and 91 deletions
src/app/portal-manage/dashboard-management/dashboard-management.component.html
...@@ -130,7 +130,7 @@ ...@@ -130,7 +130,7 @@
</button> </button>
<button <button
*ngIf="selectedDashboardId" *ngIf="selectedDashboardId"
[routerLink]="['/portal-manage/dashboard-viewer', selectedDashboardId.dashboardId]" [routerLink]="['/embed/dashboard', selectedDashboardId.dashboardId]"
class="ti-btn ti-btn-secondary-full flex items-center gap-2 ml-2" class="ti-btn ti-btn-secondary-full flex items-center gap-2 ml-2"
> >
<i class="bi bi-eye-fill"></i> View Dashboard <i class="bi bi-eye-fill"></i> View Dashboard
......
src/app/portal-manage/dashboard-management/dashboard-management.component.scss
...@@ -112,19 +112,19 @@ ...@@ -112,19 +112,19 @@
background-color: #4b5563; background-color: #4b5563;
} }
} }
.control-section { // .control-section {
margin: 0 auto; // margin: 0 auto;
width: 500px; // width: 500px;
} // }
#defaultLayout { // #defaultLayout {
padding: 10px; // padding: 10px;
} // }
#dashboard_default .e-panel .e-panel-container .content { // #dashboard_default .e-panel .e-panel-container .content {
vertical-align: middle; // vertical-align: middle;
font-weight: 600; // font-weight: 600;
font-size: 20px; // font-size: 20px;
text-align: center; // text-align: center;
line-height: 90px; // line-height: 90px;
} // }
src/app/portal-manage/dashboard-management/dashboard-management.component.ts
...@@ -592,7 +592,7 @@ export class DashboardManagementComponent implements OnInit { ...@@ -592,7 +592,7 @@ export class DashboardManagementComponent implements OnInit {
this.dashboardData = dashboard; this.dashboardData = dashboard;
this.panels = this.mapWidgetsToPanels(dashboard.widgets || []); this.panels = this.mapWidgetsToPanels(dashboard.widgets || []);
if (dashboard.datasetId) { if (dashboard.datasetId) {
// this.dashboardStateService.selectDataset(this.dashboardData); this.dashboardStateService.selectDataset(dashboard.datasetId);
} }
} }
}); });
......
src/app/portal-manage/dashboard-viewer/dashboard-viewer.component.html
...@@ -4,13 +4,13 @@ ...@@ -4,13 +4,13 @@
<div *ngIf="dashboardData" class="dashboard-viewer-container p-4"> <div *ngIf="dashboardData" class="dashboard-viewer-container p-4">
<h1 class="text-2xl font-bold mb-4 text-gray-800">{{ dashboardData.thName }}</h1> <h1 class="text-2xl font-bold mb-4 text-gray-800">{{ dashboardData.thName }}</h1>
<div class="control-section"> <div class="control-section">
<ejs-dashboardlayout id='dashboard_viewer' #viewerLayout [cellSpacing]="cellSpacing" [panels]="panels" [columns]="6" [allowResizing]="false" [allowDragging]="false"> <ejs-dashboardlayout id='dashboard_viewer' #viewerLayout [cellSpacing]="cellSpacing" [columns]="6" [allowResizing]="false" [allowDragging]="false">
<e-panels> <e-panels>
<e-panel *ngFor="let panel of panels" [row]="panel.row" [col]="panel.col" [sizeX]="panel.sizeX" [sizeY]="panel.sizeY" [id]="panel.id"> <e-panel *ngFor="let panel of panels" [row]="panel.row" [col]="panel.col" [sizeX]="panel.sizeX" [sizeY]="panel.sizeY" [id]="panel.id">
<ng-template #header> <ng-template #header>
<div class="e-panel-header flex justify-between items-center"> <!-- <div class="e-panel-header flex justify-between items-center">
<span>{{panel.header}}</span> <span>{{panel.header}}</span>
</div> </div> -->
</ng-template> </ng-template>
<ng-template #content> <ng-template #content>
<ng-container [ngComponentOutlet]="panel.componentType" [ngComponentOutletInputs]="panel.componentInputs"></ng-container> <ng-container [ngComponentOutlet]="panel.componentType" [ngComponentOutletInputs]="panel.componentInputs"></ng-container>
......
src/app/portal-manage/dashboard-viewer/dashboard-viewer.component.scss
/* Add custom styles for your dashboard viewer component here */
:host {
display: block;
width: 100%;
height: 100%;
}
.dashboard-viewer-container, .control-section, ejs-dashboardlayout {
width: 100%;
height: 100%;
}
// Optional: If you are embedding in an iframe and want to ensure no extra space
// You might need to add this to your global styles.scss if you see scrollbars
/*
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden; // Prevent scrollbars on the body
}
*/
\ No newline at end of file
src/app/portal-manage/widgets/area-chart-widget/area-chart-widget.component.html
<!-- Loading State --> <div class="bg-white rounded-xl shadow-lg flex flex-col h-full">
<div *ngIf="isLoading" class="flex justify-center items-center h-full">
<div class="animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-blue-500"></div>
</div>
<!-- Error State --> <!-- Header -->
<div *ngIf="hasError" class="flex flex-col justify-center items-center h-full text-red-500"> <div class="flex-shrink-0 p-4 sm:p-6 border-b border-gray-200">
<i class="bi bi-exclamation-triangle-fill text-4xl"></i> <h4 class="text-md sm:text-lg font-semibold text-gray-600 truncate">{{ title }}</h4>
<p class="mt-2">{{ errorMessage }}</p> </div>
</div>
<!-- Body -->
<div class="flex-grow p-2 sm:p-4">
<!-- Loading State -->
<div *ngIf="isLoading" class="flex justify-center items-center h-full">
<div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500"></div>
</div>
<!-- Chart --> <!-- Error State -->
<ejs-chart *ngIf="!isLoading && !hasError" [title]="title" [primaryXAxis]="primaryXAxis" [primaryYAxis]="primaryYAxis"> <div *ngIf="hasError" class="flex flex-col justify-center items-center h-full text-red-500">
<e-series-collection> <i class="bi bi-exclamation-circle-fill text-4xl"></i>
<e-series [dataSource]="chartData" type="Area" xName="x" yName="y" name="Sales"></e-series> <p class="mt-2 font-semibold">{{ errorMessage }}</p>
</e-series-collection> </div>
</ejs-chart>
<!-- Chart -->
<ejs-chart *ngIf="!isLoading && !hasError" style="height: 100%; width: 100%" [primaryXAxis]="primaryXAxis" [primaryYAxis]="primaryYAxis">
<e-series-collection>
<e-series [dataSource]="chartData" type="Area" xName="x" yName="y" name="Sales"></e-series>
</e-series-collection>
</ejs-chart>
</div>
</div>
src/app/portal-manage/widgets/simple-kpi-widget/simple-kpi-widget.component.html
<div class="card h-100"> <div class="bg-white rounded-xl shadow-lg p-4 sm:p-6 flex flex-col h-full">
<div class="card-body">
<!-- Header -->
<div class="flex-shrink-0">
<h4 class="text-md sm:text-lg font-semibold text-gray-500 truncate">{{ title }}</h4>
</div>
<!-- Body -->
<div class="flex-grow flex justify-center items-center">
<!-- Loading State --> <!-- Loading State -->
<div *ngIf="isLoading" class="flex justify-center items-center h-full"> <div *ngIf="isLoading" class="text-center">
<div class="animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-blue-500"></div> <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500 mx-auto"></div>
<p class="text-gray-400 mt-2">Loading...</p>
</div> </div>
<!-- Error State --> <!-- Error State -->
<div *ngIf="hasError" class="flex flex-col justify-center items-center h-full text-red-500"> <div *ngIf="hasError" class="text-center text-red-500">
<i class="bi bi-exclamation-triangle-fill text-4xl"></i> <i class="bi bi-exclamation-circle-fill text-4xl"></i>
<p class="mt-2">{{ errorMessage }}</p> <p class="mt-2 font-semibold">Error</p>
<p class="text-sm text-red-400">{{ errorMessage }}</p>
</div> </div>
<!-- Content --> <!-- Content -->
<div *ngIf="!isLoading && !hasError" class="flex flex-col justify-center items-center h-full"> <div *ngIf="!isLoading && !hasError" class="text-center">
<h5 class="text-lg font-semibold text-gray-600 mb-2">{{ title }}</h5> <div class="text-4xl sm:text-5xl md:text-6xl font-extrabold text-gray-900">
<div class="text-5xl font-bold text-gray-800 mb-2"> {{ value }}
{{ value }}<span *ngIf="unit" class="text-2xl ml-1">{{ unit }}</span> <span *ngIf="unit" class="text-xl sm:text-2xl font-medium text-gray-400 ml-1">{{ unit }}</span>
</div> </div>
<div *ngIf="trendValue" class="flex items-center text-sm"> <div *ngIf="trendValue" class="flex items-center justify-center text-sm sm:text-base mt-2">
<span *ngIf="trend === 'up'" class="text-green-500 flex items-center"> <span *ngIf="trend === 'up'" class="text-green-500 flex items-center font-semibold">
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"></path></svg> <i class="bi bi-arrow-up-right mr-1"></i>
{{ trendValue }} {{ trendValue }}
</span> </span>
<span *ngIf="trend === 'down'" class="text-red-500 flex items-center"> <span *ngIf="trend === 'down'" class="text-red-500 flex items-center font-semibold">
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path></svg> <i class="bi bi-arrow-down-right mr-1"></i>
{{ trendValue }} {{ trendValue }}
</span> </span>
<span *ngIf="trend === 'neutral' && trendValue" class="text-gray-500"> <span *ngIf="trend === 'neutral' && trendValue" class="text-gray-500 font-medium">
{{ trendValue }} {{ trendValue }}
</span> </span>
</div> </div>
......
src/assets/css/individual-scss/base/base.scss 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
src/assets/css/individual-scss/buttons/button.scss 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
src/assets/css/individual-scss/buttons/chips.scss 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
src/assets/css/individual-scss/buttons/floating-action-button.scss 0 → 100644
@import "../base/base.scss";
@import "../buttons/button.scss";
$fab-offset: 16px !default;
$fab-border-radius: 9999px !default;
$fab-min-height: 40px !default;
$fab-min-width: 40px !default;
$fab-padding: 0 15px !default;
$fab-icon-font-size: $text-base !default;
$fab-small-border-radius: $fab-border-radius !default;
$fab-small-min-height: 32px !default;
$fab-small-min-width: 32px !default;
$fab-small-padding: 0 11px !default;
$fab-small-icon-font-size: $text-sm !default;
$fab-bigger-border-radius: $fab-border-radius !default;
$fab-bigger-min-height: 52px !default;
$fab-bigger-min-width: 52px !default;
$fab-bigger-padding: 0 21px !default;
$fab-bigger-icon-font-size: $text-2xl !default;
$fab-bigger-small-border-radius: $fab-border-radius !default;
$fab-bigger-small-min-height: 46px !default;
$fab-bigger-small-min-width: 46px !default;
$fab-bigger-small-padding: 0 17px !default;
$fab-bigger-small-icon-font-size: $text-lg !default;
$fab-box-shadow: $fab-shadow !default;
$fab-focus-box-shadow: $shadow-focus-ring1 !default;
@mixin fab-button-styles($border-radius, $min-height, $min-width, $padding, $icon-font-size) {
border-radius: $border-radius;
min-height: $min-height;
min-width: $min-width;
padding: $padding;
&.e-icon-btn {
padding: 0;
}
.e-btn-icon {
font-size: $icon-font-size;
}
}
@include export-module('floating-action-button-layout') {
.e-fab.e-btn {
align-items: center;
border-radius: $fab-border-radius;
display: inline-flex;
min-height: $fab-min-height;
min-width: $fab-min-width;
padding: $fab-padding;
position: absolute;
z-index: 100000;
.e-btn-icon {
margin-top: 0;
font-size: $fab-icon-font-size;
}
&.e-icon-btn {
padding: 0;
}
&.e-fab-fixed {
position: fixed;
}
&.e-fab-top {
top: $fab-offset;
&.e-fab-middle {
top: 50%;
transform: translateY(-50%);
&.e-fab-left.e-fab-center {
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
}
}
&.e-fab-bottom {
bottom: $fab-offset;
}
&.e-fab-left {
left: $fab-offset;
&.e-fab-center {
left: 50%;
transform: translateX(-50%);
}
}
&.e-fab-right {
right: $fab-offset;
}
}
.e-rtl {
&.e-fab.e-btn {
&.e-fab-top {
top: $fab-offset;
&.e-fab-middle {
top: 50%;
transform: translateY(-50%);
&.e-fab-right.e-fab-center {
right: 50%;
top: 50%;
transform: translate(50%, -50%);
}
}
}
&.e-fab-bottom {
bottom: $fab-offset;
}
&.e-fab-right {
right: $fab-offset;
&.e-fab-center {
right: 50%;
transform: translateX(50%);
}
}
&.e-fab-left {
left: $fab-offset;
}
}
}
.e-fab-hidden {
visibility: hidden;
}
.e-small.e-fab.e-btn,
.e-small .e-fab.e-btn {
@include fab-button-styles($fab-small-border-radius, $fab-small-min-height, $fab-small-min-width, $fab-small-padding, $fab-small-icon-font-size);
}
}
@include export-module('floating-action-button-theme') {
.e-fab.e-btn {
box-shadow: $fab-box-shadow;
&:hover:not(:focus),
&:active,
&.e-active,
&:disabled {
box-shadow: $fab-box-shadow;
}
&:focus {
@if ($skin-name != 'tailwind' and $skin-name != 'tailwind-dark' and $skin-name != 'tailwind3' and $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' and $skin-name != 'bootstrap5-dark') {
box-shadow: $fab-box-shadow;
}
@if $skin-name == 'tailwind' {
box-shadow: $fab-focus-box-shadow;
}
}
}
}
@if $skin-name == 'tailwind3' {
.e-fab.e-btn:focus-visible {
box-shadow: $fab-focus-box-shadow !important; /* stylelint-disable-line declaration-no-important */
}
}
@mixin fab-button-styles($border-radius, $min-height, $min-width, $padding, $icon-font-size) {
border-radius: $border-radius;
min-height: $min-height;
min-width: $min-width;
padding: $padding;
&.e-icon-btn {
padding: 0;
}
.e-btn-icon {
font-size: $icon-font-size;
}
}
@include export-module('floating-action-button-bigger') {
.e-bigger.e-fab.e-btn,
.e-bigger .e-fab.e-btn {
@include fab-button-styles($fab-bigger-border-radius, $fab-bigger-min-height, $fab-bigger-min-width, $fab-bigger-padding, $fab-bigger-icon-font-size);
}
.e-bigger.e-small.e-fab.e-btn,
.e-bigger.e-small .e-fab.e-btn,
.e-bigger .e-small.e-fab.e-btn,
.e-small .e-bigger.e-fab.e-btn {
@include fab-button-styles($fab-bigger-small-border-radius, $fab-bigger-small-min-height, $fab-bigger-small-min-width, $fab-bigger-small-padding, $fab-bigger-small-icon-font-size);
}
}
src/assets/css/individual-scss/calendars/calendar.scss 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
src/assets/css/individual-scss/dropdowns/auto-complete.scss 0 → 100644
@import "../base/base.scss";
@import "../dropdowns/drop-down-list.scss";
@import "../inputs/input.scss";
@import "../popups/popup.scss";
@import "../popups/spinner.scss";
@import "../dropdowns/drop-down-base.scss";
//default
//enddefault
src/assets/css/individual-scss/dropdowns/combo-box.scss 0 → 100644
@import "../base/base.scss";
@import "../dropdowns/drop-down-list.scss";
@import "../inputs/input.scss";
@import "../popups/popup.scss";
@import "../popups/spinner.scss";
@import "../dropdowns/drop-down-base.scss";
//default
//enddefault
src/assets/css/individual-scss/dropdowns/mention.scss 0 → 100644
@import "../base/base.scss";
@import "../dropdowns/drop-down-base.scss";
/* stylelint-disable-line no-empty-source */
@include export-module('mention-layout') {
//default
//undefined
//enddefault
}
src/assets/css/individual-scss/dropdowns/multi-select.scss 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
src/assets/css/individual-scss/grids/grid.scss 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
src/assets/css/individual-scss/inputs/input.scss 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
src/assets/css/individual-scss/inputs/maskedtextbox.scss 0 → 100644
@import "../base/base.scss";
@import "../inputs/input.scss";
$mask-font-family: $font-family !default;
$mask-font-size: $text-sm !default;
$mask-bigger-font-size: $text-base !default;
// color
$mask-error-color: $danger !default;
@include export-module('maskedtextbox-layout') {
/*! maskedtextbox layout */
.e-control-wrapper.e-mask #{&}.e-maskedtextbox {
@if $skin-name != 'bootstrap' {
font-family: $mask-font-family;
font-size: $mask-font-size;
}
}
.e-content-placeholder.e-mask.e-placeholder-mask {
background-size: 300px 33px;
min-height: 33px;
}
}
@include export-module('maskedit-theme') {
/*! maskedtextbox theme */
.e-control-wrapper.e-mask.e-error #{&}.e-maskedtextbox,
.e-utility-mask.e-error {
@if $skin-name != 'bootstrap' and $skin-name != 'FluentUI' {
color: $mask-error-color;
}
}
}
@include export-module('maskedtextbox-bigger') {
.e-bigger .e-control-wrapper.e-mask #{&}.e-maskedtextbox {
@if $skin-name != 'bootstrap' {
font-size: $mask-bigger-font-size;
}
}
.e-control-wrapper.e-mask.e-bigger #{&}.e-maskedtextbox {
@if $skin-name != 'bootstrap' {
font-size: $mask-bigger-font-size;
}
}
.e-bigger .e-content-placeholder.e-mask.e-placeholder-mask,
.e-bigger.e-content-placeholder.e-mask.e-placeholder-mask {
background-size: 300px 40px;
min-height: 40px;
}
}
src/assets/css/individual-scss/inputs/numerictextbox.scss 0 → 100644
@import "../base/base.scss";
@import "../inputs/input.scss";
$numeric-skin-name: $skin-name !default;
$numeric-input-icon-size: 14px !default;
$numeric-input-bigger-icon-size: 18px !default;
.e-numeric-container {
width: 100%;
}
.e-content-placeholder.e-numeric.e-placeholder-numeric {
background-size: 300px 33px;
min-height: 33px;
}
// Hidden element styles
.e-float-input.e-input-group.e-control-wrapper.e-numeric .e-numeric-hidden,
.e-input-group.e-control-wrapper.e-numeric .e-numeric-hidden,
.e-float-input.e-control-wrapper.e-numeric .e-numeric-hidden,
.e-float-input.e-input-group.e-control-wrapper.e-numeric.e-input-focus .e-numeric-hidden,
.e-input-group.e-control-wrapper.e-numeric.e-input-focus .e-numeric-hidden,
.e-float-input.e-control-wrapper.e-numeric.e-input-focus .e-numeric-hidden {
border: 0;
height: 0;
margin: 0;
padding: 0;
text-indent: 0;
visibility: hidden;
width: 0;
}
@include export-module('numerictextbox-theme') {
.e-numeric.e-control-wrapper {
#{if(&, '&', '*')}.e-input-group:not(.e-disabled):active:not(.e-success):not(.e-warning):not(.e-error):not(.e-input-focus) {
@if $numeric-skin-name == 'bootstrap' {
border-color: $input-group-full-border-color;
box-shadow: none;
}
}
#{if(&, '&', '*')}.e-input-group .e-input-group-icon {
font-size: $numeric-input-icon-size;
}
}
.e-small {
#{if(&, '&', '*')} .e-control-wrapper.e-numeric.e-input-group .e-input-group-icon,
#{if(&, '&', '*')}.e-control-wrapper.e-numeric.e-input-group .e-input-group-icon {
@if ($input-skin-name == 'FluentUI') {
font-size: $numeric-input-small-icon-size;
}
}
}
}
@include export-module('numerictextbox-tailwind-icons') {
.e-input-group-icon.e-spin-up::before {
content: '\e776';
font-family: 'e-icons';
}
.e-input-group-icon.e-spin-down::before {
content: '\e729';
font-family: 'e-icons';
}
}
@include export-module('numerictextbox-bigger') {
.e-bigger.e-content-placeholder.e-numeric.e-placeholder-numeric,
.e-bigger .e-content-placeholder.e-numeric.e-placeholder-numeric {
background-size: 300px 40px;
min-height: 40px;
}
.e-bigger {
#{if(&, '&', '*')} .e-control-wrapper.e-numeric.e-input-group .e-input-group-icon,
#{if(&, '&', '*')}.e-control-wrapper.e-numeric.e-input-group .e-input-group-icon {
font-size: $numeric-input-bigger-icon-size;
}
}
.e-small.e-bigger .e-control-wrapper.e-numeric.e-input-group .e-input-group-icon,
.e-small.e-bigger.e-control-wrapper.e-numeric.e-input-group .e-input-group-icon,
.e-small .e-bigger.e-control-wrapper.e-numeric.e-input-group .e-input-group-icon,
.e-bigger .e-small.e-control-wrapper.e-numeric.e-input-group .e-input-group-icon {
@if ($input-skin-name == 'FluentUI') {
font-size: $numeric-input-bigger-small-icon-size;
}
}
}
src/assets/css/individual-scss/inputs/otp-input.scss 0 → 100644
@import "../base/base.scss";
$otp-input-width: 32px !default;
$otp-input-height: 32px !default;
$otp-input-gap: 12px !default;
$otp-separator-input-gap: 4px !default;
$otp-input-padding: 0 !default;
$otp-input-font-size: 14px !default;
$otp-input-font-weight: 400 !default;
$otp-input-password-font-size: 18px !default;
$otp-input-line-height: 22px !default;
$otp-input-border-radius-outlined: 6px !default;
$otp-input-border-radius-underlined: 0 !default;
$otp-input-border-radius-filled: 0 !default;
$otp-separator-font-size: 14px !default;
$otp-separator-font-weight: 400 !default;
$otp-separator-line-height: 22px !default;
$otp-small-input-width: 24px !default;
$otp-small-input-height: 24px !default;
$otp-small-input-gap: 8px !default;
$otp-small-separator-input-gap: 4px !default;
$otp-small-input-font-size: 12px !default;
$otp-small-input-password-font-size: 18px !default;
$otp-small-input-line-height: 18px !default;
$otp-small-separator-font-size: 12px !default;
$otp-small-separator-line-height: 18px !default;
$otp-bigger-small-input-width: 36px !default;
$otp-bigger-small-input-height: 36px !default;
$otp-bigger-small-input-gap: 12px !default;
$otp-bigger-small-separator-input-gap: 6px !default;
$otp-bigger-small-input-font-size: 16px !default;
$otp-bigger-small-input-password-font-size: 20px !default;
$otp-bigger-small-input-line-height: 22px !default;
$otp-bigger-small-separator-font-size: 16px !default;
$otp-bigger-small-separator-line-height: 22px !default;
$otp-bigger-input-width: 40px !default;
$otp-bigger-input-height: 40px !default;
$otp-bigger-input-gap: 16px !default;
$otp-bigger-separator-input-gap: 8px !default;
$otp-bigger-input-font-size: 16px !default;
$otp-bigger-input-password-font-size: 20px !default;
$otp-bigger-input-line-height: 24px !default;
$otp-bigger-separator-font-size: 16px !default;
$otp-bigger-separator-line-height: 24px !default;
$otp-input-text-color: $content-text-color !default;
$otp-background-color: $content-bg-color !default;
$otp-input-border-color: $border !default;
$otp-input-border-bottom-color: $border !default;
$otp-input-filled-bg-color: $content-bg-color-alt1 !default;
$otp-input-error-color: $danger !default;
$otp-input-success-color: $success !default;
$otp-input-warning-color: $warning !default;
$otp-input-separator-color: $border !default;
$otp-input-underlined-bg-color: $transparent !default;
$otp-input-disabled-color: $content-text-color-disabled !default;
$otp-input-disabled-border-color: $content-bg-color-alt2 !default;
$otp-input-disabled-bg-color: $content-bg-color-disabled !default;
@include export-module('otp-input-layout') {
.e-otpinput {
display: flex;
justify-content: center;
align-items: center;
gap: $otp-input-gap;
flex-direction: row;
&:has(.e-otp-separator):not(:empty) {
gap: $otp-separator-input-gap;
}
.e-otp-input-field {
min-width: $otp-input-width;
min-height: $otp-input-height;
text-align: center;
padding: $otp-input-padding;
font-size: $otp-input-font-size;
font-weight: $otp-input-font-weight;
line-height: $otp-input-line-height;
border: none;
&input[type = 'password'],
&[type = 'password'] {
font-size: $otp-input-password-font-size;
}
&.e-input.e-otp-input-focus:focus {
padding-bottom: 0;
}
}
&.e-outline {
.e-otp-input-field {
border-radius: $otp-input-border-radius-outlined;
}
}
&.e-underlined {
.e-otp-input-field {
border-radius: $otp-input-border-radius-underlined;
}
}
&.e-filled {
.e-otp-input-field {
border-radius: $otp-input-border-radius-filled;
padding: 0;
}
}
.e-otp-separator {
font-size: $otp-separator-font-size;
font-weight: $otp-separator-font-weight;
line-height: $otp-separator-line-height;
}
input[type = 'number']::-webkit-inner-spin-button,
[type = 'number']::-webkit-outer-spin-button {
/* stylelint-disable property-no-vendor-prefix */
-webkit-appearance: none;
/* stylelint-enable property-no-vendor-prefix */
margin: 0;
}
// Remove spin buttons in Firefox
input[type = 'number'] {
/* stylelint-disable property-no-vendor-prefix */
-moz-appearance: textfield;
/* stylelint-enable property-no-vendor-prefix */
}
}
.e-small.e-otpinput,
.e-small .e-otpinput {
gap: $otp-small-input-gap;
&:has(.e-otp-separator):not(:empty) {
gap: $otp-small-separator-input-gap;
}
.e-otp-input-field {
min-width: $otp-small-input-width;
min-height: $otp-small-input-height;
font-size: $otp-small-input-font-size;
line-height: $otp-small-input-line-height;
padding: $otp-input-padding;
&input[type = 'password'],
&[type = 'password'] {
font-size: $otp-small-input-password-font-size;
}
&.e-input.e-otp-input-focus:focus {
padding-bottom: 0;
}
}
.e-otp-separator {
font-size: $otp-small-separator-font-size;
line-height: $otp-small-separator-line-height;
}
&.e-filled {
.e-otp-input-field {
padding: 0;
}
}
}
}
@include export-module('otp-input-theme') {
.e-otpinput {
.e-otp-input-field {
color: $otp-input-text-color;
background: $otp-background-color;
}
.e-otp-separator {
color: $otp-input-separator-color;
}
&.e-outline {
.e-otp-input-field {
border: 1px solid $otp-input-border-color;
}
}
&.e-outline,
&.e-underlined,
&.e-filled {
.e-otp-input-field {
@if ($skin-name == 'bootstrap5.3') {
border-bottom: 1px solid $otp-input-border-bottom-color;
}
@else {
border-bottom: 2px solid $otp-input-border-bottom-color;
}
}
.e-otp-input-field:disabled {
border-color: $otp-input-disabled-border-color;
color: $otp-input-disabled-color;
background: $otp-input-disabled-bg-color;
}
}
&.e-filled {
.e-otp-input-field {
background: $otp-input-filled-bg-color;
}
}
&.e-underlined {
.e-otp-input-field {
background: $otp-input-underlined-bg-color;
}
}
&.e-error {
&.e-outline,
&.e-underlined,
&.e-filled {
.e-otp-input-field,
.e-otp-input-field.e-otp-input-focus {
border-color: $otp-input-error-color;
}
}
}
&.e-success {
&.e-outline,
&.e-underlined,
&.e-filled {
.e-otp-input-field,
.e-otp-input-field.e-otp-input-focus {
border-color: $otp-input-success-color;
}
}
}
&.e-warning {
&.e-outline,
&.e-underlined,
&.e-filled {
.e-otp-input-field,
.e-otp-input-field.e-otp-input-focus {
border-color: $otp-input-warning-color;
}
}
}
}
}
@include export-module('otp-input-bigger') {
.e-bigger.e-otpinput,
.e-bigger .e-otpinput {
gap: $otp-bigger-input-gap;
&:has(.e-otp-separator):not(:empty) {
gap: $otp-bigger-separator-input-gap;
}
.e-otp-input-field {
min-width: $otp-bigger-input-width;
min-height: $otp-bigger-input-height;
font-size: $otp-bigger-input-font-size;
line-height: $otp-bigger-input-line-height;
padding: $otp-input-padding;
&input[type = 'password'],
&[type = 'password'] {
font-size: $otp-bigger-input-password-font-size;
}
&.e-input.e-otp-input-focus:focus {
padding-bottom: 0;
}
}
.e-otp-separator {
font-size: $otp-bigger-separator-font-size;
line-height: $otp-bigger-separator-line-height;
}
&.e-filled {
.e-otp-input-field {
padding: 0;
}
}
}
.e-bigger.e-small.e-otpinput,
.e-bigger.e-small .e-otpinput,
.e-bigger .e-small.e-otpinput,
.e-small .e-bigger.e-otpinput {
gap: $otp-bigger-small-input-gap;
&:has(.e-otp-separator):not(:empty) {
gap: $otp-bigger-small-separator-input-gap;
}
.e-otp-input-field {
min-width: $otp-bigger-small-input-width;
min-height: $otp-bigger-small-input-height;
font-size: $otp-bigger-small-input-font-size;
line-height: $otp-bigger-small-input-line-height;
padding: $otp-input-padding;
&input[type = 'password'],
&[type = 'password'] {
font-size: $otp-bigger-small-input-password-font-size;
}
&.e-input.e-otp-input-focus:focus {
padding-bottom: 0;
}
}
.e-otp-separator {
font-size: $otp-bigger-small-separator-font-size;
line-height: $otp-bigger-small-separator-line-height;
}
&.e-filled {
.e-otp-input-field {
padding: 0;
}
}
}
}
src/assets/css/individual-scss/inputs/speech-to-text.scss 0 → 100644
@import "../base/base.scss";
@import "../buttons/button.scss";
@import "../popups/tooltip.scss";
// Speechtotext component styles
$stt-box-shadow: $fab-shadow !default;
$stt-focus-box-shadow: $shadow-focus-ring1 !default;
$stt-border-radius: 9999px !default;
$stt-font-weight: 600 !default;
$stt-font-size: 16px !default;
$stt-line-height: 24px !default;
$stt-round-width: 40px !default;
$stt-round-height: 40px !default;
$stt-btn-font-size: 16px !default;
$stt-min-height: 40px !default;
$stt-min-width: 40px !default;
$stt-padding: 0 14px !default;
$stt-margin-top: 0 !default;
$stt-bigger-border-radius: $stt-border-radius !default;
$stt-bigger-font-weight: 600 !default;
$stt-bigger-font-size: 16px !default;
$stt-bigger-line-height: 24px !default;
$stt-bigger-round-width: 52px !default;
$stt-bigger-round-height: 52px !default;
$stt-bigger-btn-font-size: 24px !default;
$stt-bigger-min-height: 52px !default;
$stt-bigger-min-width: 52px !default;
$stt-bigger-padding: 0 20px !default;
$stt-bigger-margin-top: 0 !default;
@include export-module('speechtotext-layout') {
.e-speech-to-text.e-btn {
align-items: center;
border-radius: $stt-border-radius;
display: inline-flex;
font-size: $stt-font-size;
min-width: $stt-min-width;
min-height: $stt-min-height;
padding: $stt-padding;
@if ($skin-name == 'fluent2') {
line-height: 0;
}
&.e-round {
width: $stt-round-width;
height: $stt-round-height;
padding: 0;
}
.e-btn-icon {
font-size: $stt-font-size;
margin-top: $stt-margin-top;
@if ($skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'Material3') {
line-height: 2px;
width: 2em;
}
}
&:disabled {
pointer-events: none;
}
&.e-listening-state {
animation: listening 1.2s infinite;
}
}
.e-speech-to-text.e-round {
.e-btn-icon {
font-size: $stt-btn-font-size;
@if ($skin-name == 'FluentUI') {
margin-top: 0;
}
@if ($skin-name == 'fluent2' or $skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'fabric-dark') {
margin-top: 1px;
}
}
}
@keyframes listening {
0% {
opacity: 1;
}
100% {
opacity: 1;
}
50% {
opacity: .5;
}
}
}
@include export-module('speechtotext-theme') {
// Speechtotext component styles
.e-speech-to-text {
box-shadow: $stt-box-shadow;
&:hover:not(:focus),
&:active,
&.e-active,
&:disabled {
box-shadow: $stt-box-shadow;
}
&:focus {
@if ($skin-name != 'tailwind' and $skin-name != 'tailwind-dark' and $skin-name != 'tailwind3' and $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' and $skin-name != 'bootstrap5-dark') {
box-shadow: $stt-box-shadow;
}
@if $skin-name == 'tailwind' {
box-shadow: $stt-focus-box-shadow;
}
}
@if $skin-name == 'tailwind3' {
&:focus-visible {
box-shadow: $stt-focus-box-shadow !important; /* stylelint-disable-line declaration-no-important */
}
}
&.e-flat {
box-shadow: none;
}
}
}
@include export-module('speechtotext-tailwind3-icons') {
.e-listen-icon::before {
content: '\e91c';
}
.e-listen-stop::before {
content: '\e919';
}
}
@include export-module('speechtotext-bigger') {
// Speechtotext component styles
.e-bigger .e-speech-to-text.e-btn,
.e-bigger.e-speech-to-text.e-btn {
align-items: center;
border-radius: $stt-bigger-border-radius;
display: inline-flex;
font-size: $stt-bigger-font-size;
min-width: $stt-bigger-min-width;
min-height: $stt-bigger-min-height;
padding: $stt-bigger-padding;
@if ($skin-name == 'FluentUI') {
line-height: 0;
display: inline;
}
&.e-round {
width: $stt-bigger-round-width;
height: $stt-bigger-round-height;
padding: 0;
}
.e-btn-icon {
font-size: $stt-bigger-font-size;
@if ($skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'Material3') {
line-height: 1px;
width: 2em;
}
@if ($skin-name != 'bootstrap4' or $skin-name != 'bootstrap' or $skin-name != 'bootstrap-dark') {
margin-top: $stt-bigger-margin-top;
}
}
}
.e-bigger .e-speech-to-text.e-round,
.e-bigger.e-speech-to-text.e-round {
.e-btn-icon {
font-size: $stt-bigger-btn-font-size;
@if ($skin-name == 'FluentUI') {
margin-top: -2px;
}
@if ($skin-name == 'fluent2'or $skin-name == 'Material3') {
margin-top: 0;
}
@if ($skin-name == 'material' or $skin-name == 'fabric-dark') {
margin-top: 1px;
}
}
}
}
src/assets/css/individual-scss/inputs/textarea.scss 0 → 100644
@import "../base/base.scss";
@import "../inputs/input.scss";
@import "../inputs/textbox.scss";
/* stylelint-disable-line no-empty-source */
.e-input-group.e-multi-line-input.e-auto-width {
width: auto;
}
.e-input-group.e-multi-line-input {
textarea.e-resize-x {
resize: horizontal;
}
textarea.e-resize-y {
resize: vertical;
}
textarea.e-resize-xy {
resize: both;
}
textarea.e-textarea.e-resize-none {
resize: none;
}
}
.e-float-input .e-clear-icon:hover,
.e-float-input.e-control-wrapper .e-clear-icon:hover,
.e-input-group .e-clear-icon:hover,
.e-input-group.e-control-wrapper .e-clear-icon:hover {
background: none;
border: none;
}
.e-float-input:not(.e-disabled) .e-clear-icon:hover,
.e-float-input.e-control-wrapper:not(.e-disabled) .e-clear-icon:hover,
.e-input-group:not(.e-disabled) .e-clear-icon:hover,
.e-input-group.e-control-wrapper:not(.e-disabled) .e-clear-icon:hover {
background: none;
}
/* stylelint-disable-line no-empty-source */
src/assets/css/individual-scss/inputs/textbox.scss 0 → 100644
/* stylelint-disable-line no-empty-source */
$multiline-clear-icon-right-position: 10px;
$multiline-clear-icon-top-position: 10px;
$multiline-clear-icon-left-position: 10px;
.e-content-placeholder.e-textbox.e-placeholder-textbox {
background-size: 300px 33px;
min-height: 33px;
}
.e-input-group.e-input-focus.e-multi-line-input textarea.e-textbox {
padding-right: 30px;
}
.e-input-group.e-input-focus.e-rtl.e-multi-line-input textarea.e-textbox {
padding-left: 30px;
}
/* stylelint-disable-line no-empty-source */
@include export-module('textbox-bigger') {
.e-bigger .e-content-placeholder.e-textbox.e-placeholder-textbox,
.e-bigger.e-content-placeholder.e-textbox.e-placeholder-textbox {
background-size: 300px 40px;
min-height: 40px;
}
.e-bigger .e-input-group.e-input-focus.e-multi-line-input textarea.e-textbox {
padding-right: 32px;
}
.e-bigger .e-input-group.e-input-focus.e-rtl.e-multi-line-input textarea.e-textbox {
padding-left: 32px;
}
}
src/assets/css/individual-scss/lists/sortable.scss 0 → 100644
/* stylelint-disable-line no-empty-source */
@include export-module('sortable-layout') {
#{&}.e-sortable {
outline: none;
position: relative;
user-select: none;
.e-disabled {
background-image: none;
cursor: default;
opacity: .35;
}
* {
box-sizing: border-box;
&:focus {
outline: none;
}
}
}
/* stylelint-disable */
.e-sortableclone {
position: fixed !important;
}
/* stylelint-enable */
}
src/assets/css/individual-scss/navigations/appbar.scss 0 → 100644
@import "../base/base.scss";
$appbar-bg-color-primary: $primary !default;
$appbar-color-primary: $primary-text !default;
$appbar-border-color-primary: $primary !default;
$appbar-font-size: $text-sm !default;
$appbar-bigger-font-size: $text-base !default;
$appbar-border: none !default;
@include export-module('appbar-layout') {
.e-appbar {
display: flex;
width: 100%;
height: 48px;
flex-shrink: 0;
flex-direction: row;
position: relative;
align-items: center;
padding: 8px;
overflow: hidden;
font-size: $appbar-font-size;
@if ($skin-name == 'fluent2' or $skin-name == 'tailwind3') {
border-radius: 4px;
}
> div:first-child {
display: flex;
align-items: center;
width: 100%;
height: 100%;
}
&.e-sticky {
position: sticky;
top: 0;
z-index: 1000;
}
&.e-prominent {
height: 94px;
align-items: flex-start;
> div:first-child {
align-items: flex-start;
}
}
&.e-dense {
height: 40px;
}
&.e-horizontal-bottom {
position: absolute;
bottom: 0;
right: 0;
left: 0;
&.e-sticky {
position: fixed;
top: auto;
max-width: inherit;
left: auto;
right: auto;
}
}
.e-appbar-separator {
height: 24px;
}
.e-appbar-spacer {
flex-grow: 1;
}
.e-btn,
.e-css.e-btn {
border-image: unset;
}
}
.e-inherit.e-menu-wrapper.e-scrollable .e-menu,
.e-inherit.e-menu-container.e-scrollable .e-menu {
overflow: hidden;
}
}
@include export-module('appbar-theme') {
.e-appbar {
box-shadow: $appbar-bottom-shadow;
&.e-light {
background: $appbar-bg-color-alt1;
color: $appbar-color-alt1;
border: $appbar-border;
@if ($skin-name == 'Material3') {
border-image: $appbar-border-color-alt1;
}
@else {
border-color: $appbar-border-color-alt1;
}
.e-appbar-separator {
border-left: 1px solid $appbar-color-alt1;
}
.e-btn,
.e-css.e-btn,
.e-dropdown-btn,
.e-dropdown-btn.e-btn {
&.e-inherit {
&:hover,
&:focus,
&:active,
&.e-active {
background: $appbar-hover-bg-color-alt1;
}
}
}
.e-menu-wrapper,
.e-menu-container {
&.e-inherit {
background: $appbar-bg-color-alt1;
color: $appbar-color-alt1;
box-shadow: none;
@if ($skin-name == 'Material3') {
border-image: $appbar-border-color-alt1;
}
@else {
border-color: $appbar-border-color-alt1;
}
& .e-menu .e-menu-item.e-selected,
& .e-menu .e-menu-item.e-focused {
background: $appbar-hover-bg-color-alt1;
}
}
}
}
&.e-dark {
background: $appbar-bg-color-alt2;
color: $appbar-color-alt2;
border-color: $appbar-border-color-alt2;
.e-appbar-separator {
border-left: 1px solid $appbar-color-alt2;
}
.e-btn,
.e-css.e-btn,
.e-dropdown-btn,
.e-dropdown-btn.e-btn {
&.e-inherit {
&:hover,
&:focus,
&:active,
&.e-active {
background: $appbar-hover-bg-color-alt2;
}
}
}
.e-menu-wrapper,
.e-menu-container {
&.e-inherit {
background: $appbar-bg-color-alt2;
color: $appbar-color-alt2;
border-color: $appbar-border-color-alt2;
box-shadow: none;
& .e-menu .e-menu-item.e-selected,
& .e-menu .e-menu-item.e-focused {
background: $appbar-hover-bg-color-alt2;
}
}
}
}
&.e-primary {
background: $appbar-bg-color-primary;
color: $appbar-color-primary;
border-color: $appbar-border-color-primary;
.e-appbar-separator {
border-left: 1px solid $appbar-color-primary;
}
.e-menu-wrapper,
.e-menu-container {
&.e-inherit {
background: $appbar-bg-color-primary;
color: $appbar-color-primary;
border-color: $appbar-border-color-primary;
box-shadow: none;
}
}
}
&.e-inherit {
background: inherit;
color: inherit;
border-color: inherit;
border: 1px solid;
.e-appbar-separator {
border-left: 1px solid;
}
.e-menu-wrapper,
.e-menu-container {
&.e-inherit {
background: inherit;
color: inherit;
border-color: inherit;
box-shadow: none;
}
}
}
&.e-horizontal-bottom {
box-shadow: $appbar-top-shadow;
}
}
.e-light {
&.e-inherit.e-input-group,
&.e-inherit.e-input-group.e-control-wrapper,
&.e-inherit.e-float-input,
&.e-inherit.e-float-input.e-input-group,
&.e-inherit.e-float-input.e-control-wrapper,
&.e-inherit.e-float-input.e-input-group.e-control-wrapper,
&.e-inherit.e-input-group:not(.e-disabled) .e-input-group-icon:hover,
&.e-inherit.e-input-group.e-control-wrapper:not(.e-disabled) .e-input-group-icon:hover {
background: $appbar-bg-color-alt1;
color: $appbar-color-alt1;
}
}
.e-dark {
&.e-inherit.e-input-group,
&.e-inherit.e-input-group.e-control-wrapper,
&.e-inherit.e-float-input,
&.e-inherit.e-float-input.e-input-group,
&.e-inherit.e-float-input.e-control-wrapper,
&.e-inherit.e-float-input.e-input-group.e-control-wrapper,
&.e-inherit.e-input-group:not(.e-disabled) .e-input-group-icon:hover,
&.e-inherit.e-input-group.e-control-wrapper:not(.e-disabled) .e-input-group-icon:hover {
background: $appbar-bg-color-alt2;
color: $appbar-color-alt2;
}
}
.e-primary {
&.e-inherit.e-input-group,
&.e-inherit.e-input-group.e-control-wrapper,
&.e-inherit.e-float-input,
&.e-inherit.e-float-input.e-input-group,
&.e-inherit.e-float-input.e-control-wrapper,
&.e-inherit.e-float-input.e-input-group.e-control-wrapper,
&.e-inherit.e-input-group:not(.e-disabled) .e-input-group-icon:hover,
&.e-inherit.e-input-group.e-control-wrapper:not(.e-disabled) .e-input-group-icon:hover {
background: $appbar-bg-color-primary;
color: $appbar-color-primary;
}
}
.e-inherit.e-input-group,
.e-inherit.e-input-group.e-control-wrapper,
.e-inherit.e-float-input,
.e-inherit.e-float-input.e-input-group,
.e-inherit.e-float-input.e-control-wrapper,
.e-inherit.e-float-input.e-input-group.e-control-wrapper,
.e-inherit.e-input-group:not(.e-disabled) .e-input-group-icon:hover,
.e-inherit.e-input-group.e-control-wrapper:not(.e-disabled) .e-input-group-icon:hover {
color: inherit;
background: rgba(transparent, .056);
}
.e-inherit.e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error),
.e-inherit.e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error),
.e-inherit.e-input-group:not(.e-disabled):active:not(.e-success):not(.e-warning):not(.e-error),
.e-inherit.e-input-group.e-control-wrapper:not(.e-disabled):active:not(.e-success):not(.e-warning):not(.e-error) {
box-shadow: none;
}
.e-inherit.e-input-group.e-control-wrapper .e-searchinput::placeholder {
color: inherit;
opacity: .8;
}
.e-inherit.e-input-group .e-input-group-icon,
.e-inherit.e-input-group.e-control-wrapper .e-input-group-icon {
border: none;
color: inherit;
}
.e-inherit.e-input-group .e-clear-icon,
.e-inherit.e-input-group.e-control-wrapper .e-clear-icon {
color: inherit;
}
}
@include export-module('appbar-bigger') {
.e-bigger .e-appbar,
.e-appbar.e-bigger {
height: 56px;
font-size: $appbar-bigger-font-size;
&.e-dense {
height: 48px;
}
&.e-prominent {
height: 112px;
}
}
}
src/assets/css/individual-scss/navigations/sidebar.scss 0 → 100644
@import "../base/base.scss";
$sidebar-box-shadow: $shadow !default;
//color variables
$sidebar-background: $content-bg-color !default;
$sidebar-border: $border-light !default;
$sidebar-overlay: $overlay-bg-color !default;
/* stylelint-disable-line no-empty-source */
@include export-module('sidebar-theme') {
ejs-sidebar {
display: none;
}
.e-sidebar-display {
display: block;
}
.e-sidebar {
/* stylelint-disable property-no-vendor-prefix */
-webkit-tap-highlight-color: transparent;
background: $sidebar-background;
height: 100%;
overflow: auto;
position: fixed;
top: 0;
transition: none;
vertical-align: middle;
visibility: hidden;
will-change: transform;
&.e-right.e-open,
&.e-left.e-open {
transform: translateX(0%);
transition: transform .5s ease;
visibility: visible;
}
&.e-right.e-close,
&.e-left.e-close {
box-shadow: none;
visibility: hidden;
}
&.e-right.e-close {
transform: translateX(100%);
}
&.e-left.e-close {
transform: translateX(-100%);
}
&.e-left.e-transition.e-close,
&.e-right.e-transition.e-close,
&.e-right.e-close {
transition: transform .5s ease, visibility 500ms;
}
&.e-right {
@if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5') {
border-left: 0 solid $sidebar-border;
}
@else {
border-left: 1px solid $sidebar-border;
}
left: auto;
right: 0;
top: 0;
}
&.e-left {
@if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5') {
border-right: 0 solid $sidebar-border;
}
@else {
border-right: 1px solid $sidebar-border;
}
left: 0;
right: auto;
top: 0;
}
&.e-left.e-close.e-dock,
&.e-right.e-close.e-dock {
transform: translateX(0%);
transition: width .5s ease, visibility 500ms;
visibility: visible;
}
&.e-left.e-open.e-dock.e-blazor-dock,
&.e-right.e-open.e-dock.e-blazor-dock {
transition: width .5s ease, visibility 500ms;
}
&.e-left.e-open.e-disable-animation,
&.e-right.e-open.e-disable-animation,
&.e-right.e-close.e-disable-animation,
&.e-left.e-close.e-disable-animation {
transition: none;
}
&.e-visibility {
visibility: hidden;
}
&.e-over {
box-shadow: $sidebar-box-shadow;
}
}
.e-sidebarcontainer {
&.e-sidebar {
&.e-over,
&.e-auto,
&.e-push,
&.e-slide + div {
transition: margin .5s ease, transform .5s ease;
}
}
&.e-left.e-open.e-auto + div {
margin-right: 0;
transform: translateX(0);
margin-left: var(--sidebar-width);
}
&.e-left.e-close.e-auto + div {
margin-right: 0;
transform: translateX(0);
margin-left: 0;
}
&.e-right.e-open.e-auto + div {
margin-left: 0;
transform: translateX(0);
margin-right: var(--sidebar-width);
}
&.e-right.e-close.e-auto + div {
margin-right: 0;
transform: translateX(0);
margin-left: 0;
}
&.e-left.e-open.e-push + div {
margin-right: 0;
transform: translateX(0);
margin-left: var(--sidebar-width);
}
&.e-left.e-close.e-push + div {
margin-right: 0;
transform: translateX(0);
margin-left: 0;
}
&.e-right.e-open.e-push + div {
margin-left: 0;
transform: translateX(0);
margin-right: var(--sidebar-width);
}
&.e-right.e-close.e-push + div {
margin-right: 0;
transform: translateX(0);
margin-left: 0;
}
&.e-left.e-open.e-slide + div {
margin-left: 0;
transform: translate(var(--sidebar-width));
}
&.e-left.e-close.e-slide + div {
margin-left: 0;
transform: translate(0);
}
&.e-right.e-open.e-slide + div {
margin-right: 0;
margin-left: 0;
transform: translate(calc(-1 * var(--sidebar-width)));
}
&.e-right.e-close.e-slide + div {
margin-right: 0;
margin-left: 0;
transform: translate(0);
}
}
.e-sidebar-absolute {
position: absolute;
}
.e-sidebar-context {
overflow-x: hidden;
position: relative;
}
.e-backdrop,
.e-sidebar-overlay {
background-color: $sidebar-overlay;
height: 100%;
left: 0;
pointer-events: auto;
top: 0;
z-index: 999;
}
.e-backdrop {
@if ($skin-name != 'tailwind' and $skin-name != 'tailwind3' and $skin-name != 'bootstrap5' and $skin-name != 'FluentUI' and $skin-name != 'Material3') {
opacity: .5;
}
@if ($skin-name == 'fluent2') {
filter: $sidebar-overlay-filter;
opacity: $sidebar-overlay-opacity;
}
width: auto;
}
.e-sidebar-overlay {
@if ($skin-name != 'tailwind' and $skin-name != 'bootstrap5' and $skin-name != 'FluentUI') {
opacity: .5;
}
@if ($skin-name == 'fluent2') {
backdrop-filter: $sidebar-overlay-filter;
}
position: fixed;
width: 100%;
}
.e-content-animation {
transition: margin .5s ease, -webkit-transform .5s ease, transform .5s ease;
&.e-overlay {
box-sizing: border-box;
overflow: auto;
user-select: none;
}
}
.e-disable-interaction {
pointer-events: none;
touch-action: none;
}
.e-sidebar-overflow {
overflow-x: hidden;
}
.e-content-placeholder.e-sidebar.e-placeholder-sidebar {
left: 0;
position: fixed;
right: auto;
top: 0;
visibility: visible;
}
}
src/assets/css/individual-scss/navigations/tab.scss 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
src/assets/css/individual-scss/navigations/v-scroll.scss 0 → 100644
/*! component's theme wise override definitions and variables */
$vscroll-skin: 'bootstrap5' !default;
$vscroll-nav-nrml-height: 38px !default;
$vscroll-hover-font: $content-text-color-alt2 !default;
$vscroll-active-font-color: $content-text-color-alt2 !default;
$vscroll-border-size: 1px !default;
$vscroll-border-type: solid !default;
$vscroll-default-bg: $secondary-bg-color !default;
$vscroll-nav-nrml-minheight: 38px !default;
$vscroll-nav-bgr-minheight: 48px !default;
$vscroll-nav-nrml-width: 28px !default;
$vscroll-nav-bgr-width: 48px !default;
$vscroll-nrml-padding: 0 $vscroll-nav-nrml-width !default;
$vscroll-bgr-padding: $vscroll-nav-bgr-width 0 !default;
$vscroll-box-shadow: none !default;
$vscroll-overlay-opacity: .5 !default;
$vscroll-overlay-bg: $secondary-bg-color-disabled !default;
$vscroll-overlay-start: rgba($vscroll-overlay-bg, 0) !default;
$vscroll-overlay-end: rgba($vscroll-overlay-bg, 1) !default;
$vscroll-right-bg: linear-gradient(-270deg, $vscroll-overlay-start 0%, $vscroll-overlay-end 100%) !default;
$vscroll-left-bg: linear-gradient(-270deg, $vscroll-overlay-end 0%, $vscroll-overlay-start 100%) !default;
$vscroll-device-arrow-box-shadow: $shadow !default;
$vscroll-device-arrow-rtl-box-shadow: $shadow !default;
$vscroll-device-arrow-bg: $content-bg-color-alt2 !default;
$vscroll-device-arrow-border-size: 1px !default;
$vscroll-device-arrow-border-color: $icon-color !default;
$vscroll-device-arrow-color: $icon-color !default;
$vscroll-device-arrow-size: 14px !default;
$vscroll-device-arrow-width: 48px !default;
$vscroll-default-icon-color: $icon-color !default;
$vscroll-hover-bg: $content-bg-color-alt2 !default;
$vscroll-press-bg: $content-bg-color-alt3 !default;
$vscroll-default-border: $icon-color !default;
$vscroll-focus-border: 0 !default;
$vscroll-active-border: 0 !default;
$vscroll-hover-border: 0 !default;
$vscroll-hover-border-color: transparent !default;
$vscroll-active-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125) !default;
@mixin vscroll-btn-animation {
content: '';
}
@mixin vscroll-btn-animation-after {
content: '';
}
@include export-module('v-scroll') {
/*! v-scroll layout */
#{&}.e-vscroll {
display: block;
position: relative;
width: inherit;
&.e-rtl {
&.e-scroll-device {
.e-scroll-nav {
transform: skewX(-16deg) translateX(-6px);
}
.e-scroll-overlay {
&.e-scroll-down-overlay {
left: $vscroll-device-arrow-width;
right: auto;
transform: skewX(-16deg) translateX(-6px);
}
&.e-scroll-up-overlay {
left: auto;
right: 0;
}
}
}
}
&:not(.e-scroll-device) {
padding: $vscroll-nrml-padding;
}
&.e-scroll-device {
.e-scroll-nav {
transform: skewX(-16deg) translateX(6px);
width: $vscroll-device-arrow-width;
z-index: 1001;
.e-nav-arrow {
font-size: $vscroll-device-arrow-size;
transform: skewX(16deg);
}
}
.e-scroll-overlay {
opacity: $vscroll-overlay-opacity;
pointer-events: none;
position: absolute;
top: 0;
z-index: 100;
&.e-scroll-down-overlay {
left: auto;
right: $vscroll-device-arrow-width;
transform: skewX(-16deg) translateX(6px);
}
&.e-scroll-up-overlay {
left: 0;
right: auto;
}
}
}
> * {
height: inherit;
}
.e-vscroll-content {
display: inline-block;
height: auto;
position: relative;
width: 100%;
> * {
pointer-events: auto;
}
}
&.e-rtl {
.e-scroll-nav {
&.e-scroll-up-nav {
left: auto;
right: 0;
}
&.e-scroll-down-nav {
left: 0;
right: auto;
}
}
}
.e-scroll-nav {
align-items: center;
cursor: pointer;
display: flex;
height: $vscroll-nav-nrml-height;
overflow: hidden;
position: absolute;
width: 100%;
&.e-scroll-up-nav {
top: 0;
}
&.e-scroll-down-nav {
bottom: 0;
}
&.e-ie-align {
display: table;
}
}
.e-nav-arrow {
position: relative;
}
.e-nav-arrow.e-icons {
display: table-cell;
text-align: center;
vertical-align: middle;
width: 100%;
}
}
}
@include export-module('v-scroll-theme') {
/*! v-scroll theme */
#{&}.e-vscroll {
.e-icons {
color: $vscroll-default-icon-color;
}
& .e-menu-item.e-selected .e-icons {
@if $skin-name == 'fluent2' {
color: $flyout-text-color-selected;
}
}
&.e-rtl {
&.e-scroll-device {
.e-scroll-nav.e-scroll-right-nav {
border-color: $vscroll-device-arrow-border-color;
box-shadow: $vscroll-device-arrow-rtl-box-shadow;
}
}
}
&.e-scroll-device {
.e-scroll-nav.e-scroll-right-nav {
background-color: $vscroll-device-arrow-bg;
border-color: $vscroll-device-arrow-border-color;
border-width: $vscroll-device-arrow-border-size;
box-shadow: $vscroll-device-arrow-box-shadow;
.e-nav-arrow {
color: $vscroll-device-arrow-color;
}
}
}
.e-scroll-overlay {
background-color: transparent;
background-repeat: repeat-x;
&.e-scroll-up-overlay {
background-image: $vscroll-left-bg;
}
&.e-scroll-down-overlay {
background-image: $vscroll-right-bg;
}
}
&.e-rtl {
.e-scroll-nav {
background: $vscroll-default-bg;
&:hover {
background: $vscroll-hover-bg;
border: $vscroll-hover-border;
border-color: $vscroll-hover-border-color;
color: $vscroll-hover-font;
}
}
}
&:not(.e-scroll-device) {
.e-scroll-nav {
&:hover {
background: $vscroll-hover-bg;
border: $vscroll-hover-border;
color: $vscroll-hover-font;
}
&:focus {
background: $vscroll-hover-bg;
border: $vscroll-focus-border;
border-color: $vscroll-hover-border-color;
color: $vscroll-hover-font;
}
&:active {
background: $vscroll-press-bg;
border: $vscroll-active-border;
box-shadow: $vscroll-active-box-shadow;
color: $vscroll-active-font-color;
}
}
}
.e-scroll-nav {
background: $vscroll-default-bg;
&.e-scroll-up-nav {
border-bottom: $vscroll-border-size $vscroll-border-type $vscroll-default-border;
}
&.e-scroll-down-nav {
border-top: $vscroll-border-size $vscroll-border-type $vscroll-default-border;
}
&::after {
@include vscroll-btn-animation;
}
&:active::after {
@include vscroll-btn-animation-after;
}
}
}
}
@include export-module('vscroll-tailwind3-icons') {
/*! vscroll icons */
#{&}.e-vscroll {
&.e-scroll-device {
.e-nav-up-arrow::before {
content: '\e7dd';
}
.e-nav-down-arrow::before {
content: '\e734';
}
}
.e-nav-up-arrow::before {
content: '\e776';
line-height: normal;
}
.e-nav-down-arrow::before {
content: '\e729';
line-height: normal;
}
}
}
@include export-module('v-scroll-bigger') {
.e-bigger #{&}.e-vscroll,
#{&}.e-vscroll.e-bigger {
&:not(.e-scroll-device) {
padding: $vscroll-bgr-padding;
}
.e-icons {
font-size: 18px;
}
&.e-rtl .e-scroll-overlay.e-scroll-down-overlay {
left: $vscroll-nav-bgr-width;
}
.e-scroll-overlay {
&.e-scroll-down-overlay {
right: $vscroll-nav-bgr-width;
}
}
.e-scroll-nav {
height: $vscroll-nav-bgr-width;
}
}
}
src/assets/css/individual-scss/notifications/skeleton.scss 0 → 100644
@import "../base/base.scss";
$skeleton-background-color: $content-bg-color-alt2 !default;
$shimmer-wave-color: $content-bg-color !default;
$shimmer-background-color: transparent !default;
$shimmer-wave-color-opacity: 50% !default;
$shimmer-wave-length: 100px !default;
$shimmer-wave-pos: 50% !default;
$shimmer-wave-angle: 90deg !default;
$skeleton-border-radius: 4px !default;
$shimmer-wave-angle-rtl: 45deg !default;
$shimmer-effect-duration: 2s !default;
$shimmer-effect-timing-function: ease-in-out !default;
$skeleton-boder: none;
@mixin shimmer-animation($animation-name) {
animation: $animation-name $shimmer-effect-duration infinite;
animation-timing-function: $shimmer-effect-timing-function;
}
@include export-module('skeleton-layout') {
.e-skeleton {
display: inline-block;
position: relative;
overflow: hidden;
border: $skeleton-boder;
@at-root {
&.e-skeleton-text,
&.e-skeleton-square,
&.e-skeleton-rectangle {
border-radius: $skeleton-border-radius;
}
@if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
&.e-skeleton-text {
border-width: $skeleton-text-boder-width;
}
}
&.e-skeleton-circle {
border-radius: 50%;
}
&.e-visible-none {
display: none;
}
&.e-shimmer-wave::after {
@include shimmer-animation(e-shimmer-wave);
content: '';
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: calc(200% + 200px);
}
&.e-shimmer-fade {
@include shimmer-animation(e-shimmer-fade);
}
&.e-shimmer-pulse {
@include shimmer-animation(e-shimmer-pulse);
}
}
}
.e-rtl .e-shimmer-wave::after,
.e-rtl.e-shimmer-wave::after {
animation: e-shimmer-wave-rtl $shimmer-effect-duration infinite;
}
@keyframes e-shimmer-wave {
to {
transform: translateX(calc(50% + 100px));
}
}
@keyframes e-shimmer-wave-rtl {
from {
transform: translateX(calc(50% + 100px));
}
}
@keyframes e-shimmer-fade {
0% {
opacity: 1;
}
50% {
opacity: .4;
}
100% {
opacity: 1;
}
}
@keyframes e-shimmer-pulse {
0% {
transform: scale(1);
}
40% {
transform: scale(1);
}
50% {
transform: scale(.975);
}
100% {
transform: scale(1);
}
}
}
.e-skeleton {
@at-root {
&.e-shimmer-wave::after {
@if ($skin-name =='Material3') {
// Added direct color value to resolve the compile issue
background-image: linear-gradient($shimmer-wave-angle, $shimmer-background-color calc($shimmer-wave-pos - $shimmer-wave-length), $shimmer-wave-color $shimmer-wave-pos, $shimmer-background-color calc($shimmer-wave-pos + $shimmer-wave-length));
}
@else if ($skin-name == 'fluent2') {
background-image: linear-gradient($shimmer-wave-angle, #fafafa calc($shimmer-wave-pos - $shimmer-wave-length), #e6e6e6 $shimmer-wave-pos, #fafafa calc($shimmer-wave-pos + $shimmer-wave-length));
}
@else {
background-image: linear-gradient($shimmer-wave-angle, $shimmer-background-color calc($shimmer-wave-pos - $shimmer-wave-length), #e6e1e5 $shimmer-wave-pos, $shimmer-background-color calc($shimmer-wave-pos + $shimmer-wave-length));
}
}
&.e-skeleton-text,
&.e-skeleton-square,
&.e-skeleton-rectangle,
&.e-skeleton-circle {
@if ($skin-name =='Material3') {
background: $skeleton-background-color;
}
@else {
background-color: $skeleton-background-color;
}
}
}
}
src/assets/css/individual-scss/popups/popup.scss 0 → 100644
/* stylelint-disable-line no-empty-source */
@include export-module('popup-layout') {
/*! popup layout */
.e-popup {
height: auto;
position: absolute;
width: auto;
z-index: 1000;
}
.e-popup.e-popup-open {
display: block;
}
.e-popup.e-popup-close {
display: none;
}
}
src/assets/css/individual-scss/popups/spinner.scss 0 → 100644
@import "../base/base.scss";
$theme: 'Tailwind3';
//Layout Variables Start
$spin-padding: 10px;
$spin-label-margin-top: 10px;
$spin-label-font-size: $text-sm;
$spin-label-font-family: $font-family;
$spin-boot4-stroke-width: 4;
$spin-fabric-stroke-width: 1.5;
$spin-boot5-stroke-width: 4;
//Layout Variables End
//Theme based other styles start
$spin-label-color: $primary;
$spin-overlay-background: $overlay-bg-color;
$spin-overlay-stroke-color: $white;
$spin-overlay-font-color: $white;
$spin-material-stroke-color: $primary;
$spin-boot4-stroke-color: $primary;
$spin-fabric-stroke-color: $primary-light;
$spin-boot5-stroke-color: $primary;
$spin-fabric-arc-color: $primary;
$spin-bootstrap-stroke-color: $primary;
$spin-tailwind-stroke-width: 4.5;
$spin-tailwind-arc-color: $primary;
$spin-tailwind-stroke-color: $primary-light;
@mixin tw-spinner-rotate {
animation: fabric-spinner-rotate 1.3s infinite cubic-bezier(.21, .21, .21, .21);
}
@mixin mat-spinner-rotate {
animation: material-spinner-rotate 1568.63ms linear infinite;
}
@mixin fb-spinner-rotate {
animation: fabric-spinner-rotate 1.3s infinite cubic-bezier(.53, .21, .29, .67);
}
@mixin boot4-spinner-rotate {
animation: material-spinner-rotate .75s linear infinite;
}
@mixin boot5-spinner-rotate {
animation: material-spinner-rotate .75s linear infinite;
}
/* stylelint-disable property-no-vendor-prefix */
@keyframes material-spinner-rotate {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes fabric-spinner-rotate {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
//Theme based other styles end
@include export-module('spinner-layout') {
.e-spinner-pane {
align-items: center;
display: inline-flex;
height: 100%;
justify-content: center;
left: 0;
position: absolute;
text-align: center;
top: 0;
user-select: none;
vertical-align: middle;
width: 100%;
z-index: 1000;
&::after {
content: $theme;
display: none;
}
&.e-spin-left {
/* stylelint-disable property-no-vendor-prefix */
.e-spinner-inner {
-webkit-transform: translateX(0%) translateY(-50%);
left: 0;
padding-left: $spin-padding;
transform: translateX(0%) translateY(-50%);
}
}
&.e-spin-right {
.e-spinner-inner {
-webkit-transform: translateX(-100%) translateY(-50%);
left: 100%;
padding-right: $spin-padding;
transform: translateX(-100%) translateY(-50%);
}
}
&.e-spin-center {
.e-spinner-inner {
-webkit-transform: translateX(-50%) translateY(-50%);
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
}
&.e-spin-hide {
display: none;
}
&.e-spin-show {
display: inline-flex;
}
.e-spinner-inner {
-webkit-transform: translateX(-50%) translateY(-50%);
left: 50%;
margin: 0;
position: absolute;
text-align: center;
top: 50%;
transform: translateX(-50%) translateY(-50%);
z-index: 1000;
.e-spin-label {
font-family: $spin-label-font-family;
font-size: $spin-label-font-size;
margin-top: $spin-label-margin-top;
text-align: center;
}
.e-spin-material,
.e-spin-material3,
.e-spin-tailwind3 {
@include mat-spinner-rotate;
display: block;
margin: 0 auto;
.e-path-circle {
fill: none;
stroke-linecap: square;
}
}
.e-spin-bootstrap4 {
@include boot4-spinner-rotate;
border-radius: 50%;
display: block;
margin: 0 auto;
.e-path-circle {
fill: none;
stroke-linecap: square;
stroke-width: $spin-boot4-stroke-width;
}
}
.e-spin-fluent,
.e-spin-fluent2,
.e-spin-fabric {
@include fb-spinner-rotate;
display: block;
margin: 0 auto;
overflow: visible;
.e-path-arc,
.e-path-circle {
fill: none;
stroke-width: $spin-fabric-stroke-width;
}
}
.e-spin-tailwind {
@include tw-spinner-rotate;
display: block;
margin: 0 auto;
overflow: visible;
.e-path-arc,
.e-path-circle {
fill: none;
stroke-width: $spin-tailwind-stroke-width;
}
}
.e-spin-bootstrap5,
.e-spin-bootstrap5v3 {
@include boot5-spinner-rotate;
border-radius: 50%;
display: block;
margin: 0 auto;
.e-path-circle {
fill: none;
stroke-linecap: square;
stroke-width: $spin-boot5-stroke-width;
}
}
.e-spin-bootstrap {
display: block;
margin: 0 auto;
}
.e-spin-high-contrast {
@include fb-spinner-rotate;
display: block;
margin: 0 auto;
overflow: visible;
.e-path-arc,
.e-path-circle {
fill: none;
stroke-width: $spin-fabric-stroke-width;
}
}
}
}
}
@include export-module('spinner-theme') {
.e-spinner-pane {
background-color: transparent;
&.e-spin-overlay {
background-color: $spin-overlay-background;
.e-spinner-inner {
.e-spin-label {
color: $spin-overlay-font-color;
}
.e-spin-bootstrap {
fill: $spin-overlay-stroke-color;
stroke: $spin-overlay-stroke-color;
}
}
}
.e-spinner-inner {
.e-spin-label {
color: $spin-label-color;
}
.e-spin-fluent,
.e-spin-fluent2,
.e-spin-fabric {
.e-path-circle {
stroke: $spin-fabric-stroke-color;
}
.e-path-arc {
stroke: $spin-fabric-arc-color;
}
}
.e-spin-tailwind {
.e-path-circle {
stroke: $spin-tailwind-stroke-color;
}
.e-path-arc {
stroke: $spin-tailwind-arc-color;
}
}
.e-spin-bootstrap5,
.e-spin-bootstrap5v3 {
stroke: $spin-boot5-stroke-color;
}
.e-spin-high-contrast {
.e-path-circle {
stroke: $spin-fabric-stroke-color;
}
.e-path-arc {
stroke: $spin-fabric-arc-color;
}
}
.e-spin-material,
.e-spin-material3,
.e-spin-tailwind3 {
stroke: $spin-material-stroke-color;
}
.e-spin-bootstrap4 {
stroke: $spin-boot4-stroke-color;
}
.e-spin-bootstrap {
fill: $spin-bootstrap-stroke-color;
stroke: $spin-bootstrap-stroke-color;
}
}
}
}
src/assets/css/individual-scss/schedule/schedule.scss 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
src/assets/css/settings.json 0 → 100644
{"theme":"tailwind3","properties":{},"components":["grid","calendar","schedule","button","radio-button","drop-down-button","split-button","button-group","floating-action-button","speed-dial","progress-button","switch","drop-down-list","textarea","chat-ui","combo-box","auto-complete","input","numerictextbox","maskedtextbox","rating","otp-input","uploader","multi-select","multicolumn-combobox","datepicker","daterangepicker","datetimepicker","timepicker","color-picker","check-box","chips","inplace-editor","list-box","dialog","card","listview","tooltip","timeline","splitter","spinner","badge","message","skeleton","toast","treeview","toolbar","tab","accordion","context-menu","menu","breadcrumb","carousel","appbar","stepper"]}
\ No newline at end of file
src/assets/css/tailwind3.css 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
src/assets/css/tailwind3.min.css 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
src/assets/css/tailwind3.scss 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
src/styles.scss
...@@ -35,20 +35,20 @@ ...@@ -35,20 +35,20 @@
@import url("https://fonts.googleapis.com/css?family=Kanit:300,400,600,700,800"); @import url("https://fonts.googleapis.com/css?family=Kanit:300,400,600,700,800");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"); @import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");
@import '../node_modules/@syncfusion/ej2-base/styles/material.css'; @import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css'; @import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-calendars/styles/material.css'; @import '../node_modules/@syncfusion/ej2-calendars/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css'; @import '../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css'; @import '../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css'; @import '../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css'; @import '../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css'; @import '../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-angular-grids/styles/material.css'; @import '../node_modules/@syncfusion/ej2-angular-grids/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-grids/styles/material.css'; @import '../node_modules/@syncfusion/ej2-grids/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-lists/styles/material.css'; @import '../node_modules/@syncfusion/ej2-lists/styles/tailwind3.css';
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css"; @import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css";
@import '../node_modules/@syncfusion/ej2-angular-pivotview/styles/material.css'; @import '../node_modules/@syncfusion/ej2-angular-pivotview/styles/tailwind3.css';
@import "../node_modules/@syncfusion/ej2-angular-layouts/styles/material.css"; @import "../node_modules/@syncfusion/ej2-angular-layouts/styles/tailwind3.css";
// @import "../node_modules/angular-calendar/scss/angular-calendar.scss"; // @import "../node_modules/angular-calendar/scss/angular-calendar.scss";
//swiperjs //swiperjs
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment