From ff5f0c9f1790e0005e7d22a60b29ee0194e0225a Mon Sep 17 00:00:00 2001 From: Dillon Ngo Date: Sun, 14 Jun 2026 21:26:16 +0800 Subject: [PATCH 01/12] Update: Vue 2 to Vue 3 with Typescript, node 14 to node 22, Jenkinsfile, Dockerfile, vapor.yml --- .env.example | 4 + Jenkinsfile | 8 +- .../ImportPurchaseOrderTransactionLogic.php | 1 + .../Resources/PaymentTransactionResource.php | 4 +- bootstrap/app.php | 2 +- composer.json | 2 +- docker-setup/Dockerfile | 12 +- docker-setup/docker-compose.yml | 8 +- docker-setup/php/php.ini | 3 + package.json | 141 +-- resources/assets/css/site.css | 2 + resources/assets/css/vendor.css | 14 + resources/assets/js/scripts.js | 11 +- resources/assets/js/site.js | 3 + resources/assets/js/vendor.js | 15 + resources/assets/sass/_color.scss | 302 +++---- resources/assets/sass/_custom.scss | 54 ++ resources/assets/sass/_mixins.scss | 307 +++---- resources/assets/sass/_modules.scss | 62 +- resources/assets/sass/_responsive.scss | 57 +- resources/assets/sass/_var.scss | 75 +- resources/assets/sass/app.scss | 14 + resources/assets/sass/main.scss | 18 +- resources/assets/sass/modules/_alerts.scss | 35 +- resources/assets/sass/modules/_animation.scss | 26 +- resources/assets/sass/modules/_buttons.scss | 168 ++-- resources/assets/sass/modules/_calendar.scss | 51 +- resources/assets/sass/modules/_cards.scss | 75 +- resources/assets/sass/modules/_charts.scss | 52 +- resources/assets/sass/modules/_chat.scss | 13 +- resources/assets/sass/modules/_email.scss | 25 +- .../assets/sass/modules/_form_elements.scss | 316 +++---- resources/assets/sass/modules/_layout.scss | 340 ++++---- resources/assets/sass/modules/_list.scss | 19 +- resources/assets/sass/modules/_login.scss | 4 +- resources/assets/sass/modules/_misc.scss | 65 +- resources/assets/sass/modules/_modals.scss | 26 +- resources/assets/sass/modules/_nestables.scss | 33 +- .../assets/sass/modules/_notifications.scss | 96 +- .../sass/modules/_progress_indicators.scss | 88 +- resources/assets/sass/modules/_sliders.scss | 138 +-- resources/assets/sass/modules/_social.scss | 45 +- resources/assets/sass/modules/_tables.scss | 50 +- .../assets/sass/modules/_tabs_accordian.scss | 150 ++-- resources/assets/sass/modules/_timeline.scss | 20 +- resources/assets/sass/modules/_treeview.scss | 10 +- .../assets/sass/modules/_typography.scss | 223 ++--- .../assets/sass/modules/_vector_map.scss | 60 +- resources/assets/sass/modules/_view.scss | 22 +- resources/assets/sass/modules/_widgets.scss | 21 +- resources/assets/vue/app.ts | 181 ++++ .../EditSingleItemInListComponent.vue | 160 ++-- .../elements/HistoryImportedInvoices.vue | 70 +- .../elements/HistoryImportedReceipts.vue | 71 +- .../StatementTransactionComponent.vue | 139 +-- .../StatementTransactionMappedComponent.vue | 95 +- .../forms/ImportStatementFormComponent.vue | 73 +- .../ImportedInvoiceMappedComponent.vue | 170 ++-- .../ImportedReceiptMappedComponent.vue | 170 ++-- .../ReportTransactionsMappedComponent.vue | 206 +++-- .../StatementTransactionsDetailsComponent.vue | 238 ++--- .../sections/TransactionsMappingComponent.vue | 335 ++++--- .../elements/EmailVerificationComponent.vue | 59 +- .../elements/OnboardingStepComponent.vue | 32 +- .../forms/EmailVerificationFormComponent.vue | 40 +- .../forms/ForgetPasswordFormComponent.vue | 123 ++- .../accounts/forms/LogOutFormComponent.vue | 63 +- .../accounts/forms/LoginFormComponent.vue | 92 +- .../forms/RegistrationFormComponent.vue | 239 ++--- .../forms/ResetPasswordFormComponent.vue | 130 +-- .../sections/OnboardingSectionComponent.vue | 56 +- .../address/elements/AddressComponent.vue | 137 +-- .../address/elements/AddressListComponent.vue | 166 ++-- .../elements/AddressModalComponent.vue | 52 +- .../address/forms/AddressFormComponent.vue | 254 ++++-- .../forms/EInvoiceInfoFormComponent.vue | 308 ++++--- .../SetDefaultBillingAddressComponent.vue | 36 +- .../elements/AnnouncementListComponent.vue | 46 +- ...signAnnouncementToSegmentFormComponent.vue | 67 +- ...chAnnouncementFromSegmentFormComponent.vue | 38 +- .../forms/ViewAnnouncementFormComponent.vue | 41 +- .../AnnouncementQuickViewSectionComponent.vue | 71 +- .../banks/elements/BankAccountComponent.vue | 38 +- .../banks/elements/BankInComponent.vue | 39 +- .../forms/AlipayAccountFormComponent.vue | 194 +++-- .../banks/forms/BankAccountFormComponent.vue | 304 ++++--- .../forms/DeleteBankAccountFormComponent.vue | 32 +- .../banks/forms/PhoneAccountFormComponent.vue | 264 +++--- .../SetBankAccountDefaultFormComponent.vue | 33 +- .../forms/SuspendBankAccountFormComponent.vue | 52 +- .../elements/AvailableVouchersComponent.vue | 112 +-- .../bookings/elements/BillGroupComponent.vue | 93 +- .../BillGroupPaymentSummaryComponent.vue | 111 ++- .../bookings/elements/BillingComponent.vue | 133 +-- .../elements/BillingDocumentComponent.vue | 22 +- .../bookings/elements/BookingComponent.vue | 232 ++--- .../elements/BookingConfirmationComponent.vue | 308 +++---- .../elements/BookingMergeModalComponent.vue | 88 +- .../elements/BookingMergeableComponent.vue | 100 +-- .../BookingPaymentRecipientEditComponent.vue | 111 +-- .../BookingRecipientEditComponent.vue | 120 +-- .../elements/BookingStatusComponent.vue | 15 +- .../elements/CurrencyOrderComponent.vue | 52 +- ...omerTransactionHistorySectionComponent.vue | 230 ++--- .../DownloadBillingWithDatesComponent.vue | 182 ++-- .../DownloadSupplierWhiteFormComponent.vue | 97 +-- .../DownloadTransactionsReportComponent.vue | 107 ++- .../elements/DownloadUploadComponent.vue | 292 +++---- .../elements/EInvoiceInfoComponent.vue | 55 +- .../elements/EditTransferFeeFormComponent.vue | 79 +- .../elements/FilterBookingComponent.vue | 169 ++-- .../elements/ListVouchersComponent.vue | 118 +-- .../bookings/elements/PaymentComponent.vue | 154 ++-- .../elements/PaymentHistoryComponent.vue | 265 +++--- .../elements/PaymentProofComponent.vue | 74 +- .../elements/PaymentVerificationComponent.vue | 80 +- .../elements/RefundConfirmationComponent.vue | 142 +-- .../elements/RefundVerificationComponent.vue | 76 +- .../elements/RequestCreditNoteComponent.vue | 234 ++--- .../ShowWhiteFormTransactionsComponent.vue | 128 +-- .../SupplierPendingOrderComponent.vue | 100 ++- .../elements/SupplierRefundComponent.vue | 100 +-- .../elements/TransactionGroupComponent.vue | 73 +- .../TransactionGroupPaymentComponent.vue | 99 +-- .../bookings/elements/UploadComponent.vue | 94 +- .../elements/UploadDebtorExcelComponent.vue | 97 +-- .../elements/UrgentTransactionComponent.vue | 13 +- ...ApprovePaymentTransactionFormComponent.vue | 24 +- .../BillGroupPaymentProofFormComponent.vue | 86 +- .../bookings/forms/BookingFormComponent.vue | 353 ++++---- .../BookingOrderReferenceFormComponent.vue | 107 ++- .../BookingPaymentQuotationComponent.vue | 584 +++++-------- .../BookingPaymentQuotationV2Component.vue | 687 +++++++-------- .../forms/CancelBookingFormComponent.vue | 54 +- .../forms/ChangeBookingOwnerFormComponent.vue | 51 +- .../forms/ChooseCurrencyComponent.vue | 131 ++- .../bookings/forms/ChooseServiceComponent.vue | 94 +- .../forms/ConfirmQuotationFormComponent.vue | 113 ++- .../forms/CurrencyConverterComponent.vue | 265 +++--- .../DeletePaymentAttemptFormComponent.vue | 25 +- .../bookings/forms/DeletePoFormComponent.vue | 22 +- .../forms/DeleteTransactionFormComponent.vue | 24 +- .../forms/EditBookingAmountFormComponent.vue | 87 +- .../EditBookingAmountFormV2Component.vue | 87 +- ...itPaymentRecipientBankDetailsComponent.vue | 125 ++- .../EditTransactionGroupFormComponent.vue | 100 ++- .../ExportBookingTransactionFormComponent.vue | 125 ++- .../forms/PaymentProofFormComponent.vue | 82 +- .../PaymentVerificationFormComponent.vue | 87 +- .../forms/PdfTableExtractorComponent.vue | 823 +++++++++--------- .../forms/PurchaseOrderFormComponent.vue | 591 +++++++------ .../forms/PurchaseOrderItemFormComponent.vue | 145 ++- ...rchaseOrderSubmitConfirmationComponent.vue | 28 +- .../bookings/forms/RateHistoriesComponent.vue | 338 ++++--- .../forms/RecipientBankDetailsComponent.vue | 74 +- .../RegenerateBookingInvoicesComponent.vue | 18 +- .../forms/RegenerateEInvoiceComponent.vue | 39 +- .../RegenerateEInvoiceRefundComponent.vue | 41 +- .../forms/RegenerateEInvoiceTryComponent.vue | 41 +- ...generateNormalInvoiceEInvoiceComponent.vue | 39 +- .../RegenerateReceiptVoucherComponent.vue | 42 +- .../RejectPaymentTransactionFormComponent.vue | 24 +- .../forms/RestoreBookingFormComponent.vue | 54 +- .../SelectIndividualSupplierFormComponent.vue | 39 +- .../forms/SelectSupplierFormComponent.vue | 52 +- .../forms/SupplierPlaceOrderFormComponent.vue | 270 +++--- ...pplierWhiteFormPlaceOrderFormComponent.vue | 268 +++--- .../bookings/forms/UpdateBookingComponent.vue | 66 +- .../UploadPurchaseOrderPdfFormComponent.vue | 61 +- .../UploadPurchaseOrderPdfV2FormComponent.vue | 271 +++--- .../forms/confirmBookingComponent.vue | 91 +- .../AdminCurrencySectionComponent.vue | 70 +- .../AdminPaymentsBillingSectionComponent.vue | 38 +- ...PaymentsBillingSectionPollingComponent.vue | 38 +- .../BillGroupListSectionComponent.vue | 137 ++- .../BookingDetailsSectionComponent.vue | 356 ++++---- .../sections/BookingMergeSectionComponent.vue | 186 ++-- ...ierPendingOrderPaymentSectionComponent.vue | 103 ++- .../SupplierPendingOrdersSectionComponent.vue | 237 ++--- .../sections/UrgentListSectionComponent.vue | 63 +- .../elements/BulkDownloadInvoiceComponent.vue | 142 +-- .../elements/CompanyBankAccountComponent.vue | 26 +- .../companies/elements/CompanyComponent.vue | 61 +- .../elements/CompanyDetailsComponent.vue | 373 ++++---- .../elements/CustomerProfileComponent.vue | 48 +- .../IdentificationVerificationComponent.vue | 111 ++- .../NewServiceAnnouncementComponent.vue | 154 ++-- ...dentificationVerificationFormComponent.vue | 89 +- .../elements/SeasonalSegmentComponent.vue | 20 +- .../SingleRewardDetailsItemComponent.vue | 24 +- .../SingleUserRewardItemComponent.vue | 28 +- .../companies/elements/SupplierComponent.vue | 37 +- .../elements/UploadHoneyTrapCsvComponent.vue | 126 +-- .../elements/UserCompanyComponent.vue | 32 +- .../elements/VerificationWarningComponent.vue | 16 +- .../forms/ActivateSupplierFormComponent.vue | 41 +- .../forms/AssignSegmentFormComponent.vue | 113 +-- .../ChangeAdminRoleTypeFormComponent.vue | 62 +- ...ngeCustomerCompanyDetailsFormComponent.vue | 188 ++-- .../forms/ChangeCustomerNameFormComponent.vue | 79 +- .../forms/DeleteSupplierFormComponent.vue | 24 +- .../forms/DetachSegmentFormComponent.vue | 49 +- .../forms/EInvoiceRequestFormComponent.vue | 68 +- .../companies/forms/EditBankFormComponent.vue | 123 ++- .../EditCustomerCompanyTypeFormComponent.vue | 94 +- ...EditCustomerContactNumberFormComponent.vue | 82 +- .../EditCustomerProfileInfoFormComponent.vue | 95 +- ...dentificationVerificationFormComponent.vue | 65 +- .../companies/forms/SupplierFormComponent.vue | 69 +- .../SupplierServiceChargeFormComponent.vue | 169 ++-- .../forms/SuspendSupplierFormComponent.vue | 41 +- .../forms/UpdateCompanyNameFormComponent.vue | 61 +- ...pdateIdentificationNumberFormComponent.vue | 74 +- .../AddVoucherOptionsSectionComponent.vue | 140 ++- .../sections/AddVoucherSectionComponent.vue | 125 ++- .../CompanyQuickViewSectionComponent.vue | 69 +- .../CustomerDashboardSectionComponent.vue | 124 +-- .../CustomerProfileSectionComponent.vue | 112 +-- .../CustomerRewardsAdminSectionComponent.vue | 100 +-- .../CustomerRewardsSectionComponent.vue | 95 +- .../sections/CustomerSectionComponent.vue | 111 ++- .../sections/CustomerSectionTwoComponent.vue | 92 +- .../SeasonalSegmentSectionComponent.vue | 45 +- .../SupplierCurrenciesSectionComponent.vue | 118 +-- .../elements/AdvertisementComponent.vue | 6 +- .../elements/DocumentFileViewerComponent.vue | 184 ++-- .../elements/ErrorMessageComponent.vue | 16 +- .../general/elements/ListComponent.vue | 203 +++-- .../general/elements/ListPollingComponent.vue | 244 +++--- .../general/elements/LoadingComponent.vue | 51 +- .../general/elements/ModalComponent.vue | 39 +- .../elements/NotificationSectionComponent.vue | 89 +- .../elements/OpenLinkInNewTabComponent.vue | 175 ++-- .../general/elements/PaginationComponent.vue | 90 +- .../PasswordProtectedDownloadComponent.vue | 169 ++-- .../general/elements/PdfViewerComponent.vue | 16 +- .../general/elements/RemarkComponent.vue | 26 +- .../general/elements/RemarkListComponent.vue | 36 +- .../general/elements/SearchComponent.vue | 73 +- .../general/elements/TransitionComponent.vue | 100 +-- .../elements/ValidationErrorComponent.vue | 59 +- .../general/elements/bearComponent.vue | 10 +- .../forms/C2cConfirmationFormComponent.vue | 67 +- .../general/forms/DatePickerComponent.vue | 66 +- .../forms/DatePickerLimitRangeComponent.vue | 84 +- .../forms/DeleteRemarkFormComponent.vue | 25 +- .../general/forms/FileInputComponent.vue | 37 +- .../general/forms/FileUploadComponent.vue | 202 ++--- .../GeneralConfirmationFormComponent.vue | 88 +- .../general/forms/ModalFormComponent.vue | 34 +- .../forms/RemarkCommentFormComponent.vue | 83 +- .../general/forms/RemarkFormComponent.vue | 74 +- .../general/forms/SelectComponent.vue | 143 +-- .../general/forms/SelectableComponent.vue | 123 +-- .../forms/SelectableHardCodedComponent.vue | 31 +- .../forms/ValidationErrorComponent.vue | 47 - .../forms/ValidationErrorTwoComponent.vue | 23 + .../forms/ValidationWrapperComponent.vue | 29 +- .../elements/SegmentCompanyComponent.vue | 77 +- .../elements/AffiliateSectionComponent.vue | 77 +- .../elements/AffiliateSettingsComponent.vue | 195 +++-- .../elements/AffiliateSingleItemComponent.vue | 70 +- .../settings/elements/ComponentLock.vue | 79 +- .../ConvertibleCurrenciesComponent.vue | 60 +- .../elements/CurrenciesListComponent.vue | 331 ++++--- .../settings/elements/CurrencyComponent.vue | 36 +- .../elements/MilestoneSingleItemComponent.vue | 29 +- .../components/settings/elements/PageLock.vue | 205 +++-- .../elements/PaymentAttemptComponent.vue | 156 ++-- .../elements/PrimaryCurrencyComponent.vue | 47 +- .../elements/RewardChecklistComponent.vue | 48 +- .../elements/RewardSingleItemComponent.vue | 35 +- .../settings/elements/SegmentComponent.vue | 47 +- .../elements/SegmentServiceComponent.vue | 32 +- .../elements/SegmentServiceListComponent.vue | 130 ++- .../settings/elements/ServiceComponent.vue | 27 +- .../elements/SinglePromptComponent.vue | 40 +- .../elements/UserProfileComponent.vue | 30 +- .../forms/AddCurrencyFormComponent.vue | 61 +- .../forms/AddMilestoneFormComponent.vue | 138 +-- .../settings/forms/AddRewardFormComponent.vue | 172 ++-- .../settings/forms/AffiliateFormComponent.vue | 282 +++--- .../settings/forms/AiPromptFormComponent.vue | 149 ++-- .../forms/AnnouncementFormComponent.vue | 126 ++- .../forms/DeleteAffiliateFormComponent.vue | 40 +- .../forms/DeleteAnnouncementFormComponent.vue | 24 +- .../forms/DeleteChatGptFormComponent.vue | 23 +- .../forms/DeleteClaudeFormComponent.vue | 23 +- .../forms/DeleteCurrencyFormComponent.vue | 28 +- .../forms/DeleteMilestoneFormComponent.vue | 22 +- .../forms/DeleteRewardFormComponent.vue | 22 +- .../forms/DeleteSegmentFormComponent.vue | 24 +- .../forms/DeleteServiceFormComponent.vue | 24 +- .../settings/forms/EditEmailFormComponent.vue | 54 +- .../EditUserProfileFullnameFormComponent.vue | 84 +- .../PaymentAttemptLimitFormComponent.vue | 123 +-- .../forms/ResetUserPasswordFormComponent.vue | 53 +- .../settings/forms/SegmentFormComponent.vue | 98 +-- .../forms/SegmentServiceFormComponent.vue | 289 +++--- .../settings/forms/ServiceFormComponent.vue | 172 ++-- .../UpdateServiceStatusFormComponent.vue | 26 +- .../forms/ViewChatGptFormComponent.vue | 21 +- .../sections/LockSectionComponent.vue | 22 +- .../sections/MilestoneListComponent.vue | 123 ++- .../user/elements/ListAdminComponent.vue | 65 +- .../user/elements/UserComponent.vue | 31 +- .../user/form/DeleteUserFormComponent.vue | 25 +- .../user/form/SystemFormComponent.vue | 146 ++-- .../user/form/UserFormComponent.vue | 147 ++-- .../SingleVoucherCampaignItemComponent.vue | 59 +- .../VoucherCampaignsSectionComponent.vue | 30 +- .../elements/CustomerTransactionComponent.vue | 134 ++- .../CustomerTransactionSectionComponent.vue | 169 ++-- .../CustomerWalletTransactionComponent.vue | 108 +-- .../wallets/elements/WalletComponent.vue | 73 +- .../elements/WalletTopUpHistoryComponent.vue | 65 +- .../elements/WalletTransactionComponent.vue | 33 +- .../wallets/elements/WalletsComponent.vue | 112 +-- .../forms/WalletTopUpFormComponent.vue | 180 ++-- .../vue/composables/useComponentHandler.ts | 16 + .../vue/composables/useErrorMessageHandler.ts | 14 + .../assets/vue/composables/useFormHandler.ts | 128 +++ resources/assets/vue/composables/useGuards.ts | 51 ++ .../assets/vue/composables/useRequest.ts | 102 +++ .../assets/vue/composables/useTabHandler.ts | 29 + .../assets/vue/general/functions/router.js | 16 - .../assets/vue/general/functions/router.ts | 16 + resources/assets/vue/stores/auth.ts | 144 +++ resources/assets/vue/stores/crud.ts | 78 ++ resources/assets/vue/stores/jobPolling.ts | 132 +++ resources/assets/vue/stores/notification.ts | 30 + resources/assets/vue/stores/queue.ts | 107 +++ resources/assets/vue/stores/ui.ts | 53 ++ resources/assets/vue/types/global.d.ts | 24 + resources/assets/vue/types/laravel-vapor.d.ts | 33 + resources/assets/vue/types/truncate.d.ts | 3 + .../assets/vue/types/vendor-modules.d.ts | 15 + resources/assets/vue/types/vite-env.d.ts | 12 + .../assets/vue/types/vue-augmentations.d.ts | 12 + resources/assets/vue/utils/emitter.ts | 11 + .../vue/utils/{tracking.js => tracking.ts} | 12 +- .../views/layouts/base_debug_child.blade.php | 2 +- resources/views/layouts/base_portal.blade.php | 6 +- .../bank-statements/bank_statement.blade.php | 4 +- .../bank-statements/details.blade.php | 2 +- .../bank-statements/index.blade.php | 6 +- .../bank-statements/indexv2.blade.php | 16 +- .../accounting/bank-statements/show.blade.php | 2 +- .../views/pages/accounts/login.blade.php | 26 +- .../pages/accounts/reset_password.blade.php | 6 +- .../views/pages/accounts/sign_up.blade.php | 4 +- .../views/pages/banks/customers.blade.php | 10 +- resources/views/pages/billings.blade.php | 4 +- .../views/pages/billings_experiment.blade.php | 2 +- .../views/pages/bookings/index.blade.php | 6 +- .../views/pages/currency_orders.blade.php | 10 +- .../customer_invoices_bulk_download.blade.php | 2 +- .../views/pages/customers/index.blade.php | 24 +- .../views/pages/customers/profile.blade.php | 6 +- .../views/pages/customers/reward.blade.php | 4 +- .../pages/dashboards/account_admin.blade.php | 8 +- .../views/pages/dashboards/admin.blade.php | 18 +- .../views/pages/dashboards/customer.blade.php | 4 +- .../views/pages/downloads/index.blade.php | 2 +- resources/views/pages/honey_trap.blade.php | 4 +- resources/views/pages/payments.blade.php | 2 +- .../views/pages/purchase_orders.blade.php | 10 +- .../views/pages/rewards/customers.blade.php | 2 +- .../views/pages/segments/index.blade.php | 6 +- resources/views/pages/settings.blade.php | 112 +-- .../views/pages/supplier-payments.blade.php | 4 +- .../views/pages/wallet/wallets.blade.php | 12 +- resources/views/partials/header.blade.php | 60 +- resources/views/partials/menu.blade.php | 20 +- resources/views/vendor/head.blade.php | 3 +- resources/views/vendor/js.blade.php | 8 +- tsconfig.json | 23 + tsconfig.node.json | 10 + vapor.yml | 12 +- vite.config.ts | 62 ++ 380 files changed, 18271 insertions(+), 16014 deletions(-) create mode 100644 docker-setup/php/php.ini create mode 100644 resources/assets/css/site.css create mode 100644 resources/assets/css/vendor.css create mode 100644 resources/assets/js/site.js create mode 100644 resources/assets/js/vendor.js create mode 100644 resources/assets/sass/_custom.scss create mode 100644 resources/assets/sass/app.scss create mode 100644 resources/assets/vue/app.ts delete mode 100644 resources/assets/vue/components/general/forms/ValidationErrorComponent.vue create mode 100644 resources/assets/vue/components/general/forms/ValidationErrorTwoComponent.vue create mode 100644 resources/assets/vue/composables/useComponentHandler.ts create mode 100644 resources/assets/vue/composables/useErrorMessageHandler.ts create mode 100644 resources/assets/vue/composables/useFormHandler.ts create mode 100644 resources/assets/vue/composables/useGuards.ts create mode 100644 resources/assets/vue/composables/useRequest.ts create mode 100644 resources/assets/vue/composables/useTabHandler.ts delete mode 100644 resources/assets/vue/general/functions/router.js create mode 100644 resources/assets/vue/general/functions/router.ts create mode 100644 resources/assets/vue/stores/auth.ts create mode 100644 resources/assets/vue/stores/crud.ts create mode 100644 resources/assets/vue/stores/jobPolling.ts create mode 100644 resources/assets/vue/stores/notification.ts create mode 100644 resources/assets/vue/stores/queue.ts create mode 100644 resources/assets/vue/stores/ui.ts create mode 100644 resources/assets/vue/types/global.d.ts create mode 100644 resources/assets/vue/types/laravel-vapor.d.ts create mode 100644 resources/assets/vue/types/truncate.d.ts create mode 100644 resources/assets/vue/types/vendor-modules.d.ts create mode 100644 resources/assets/vue/types/vite-env.d.ts create mode 100644 resources/assets/vue/types/vue-augmentations.d.ts create mode 100644 resources/assets/vue/utils/emitter.ts rename resources/assets/vue/utils/{tracking.js => tracking.ts} (58%) create mode 100644 tsconfig.json create mode 100644 tsconfig.node.json create mode 100644 vite.config.ts diff --git a/.env.example b/.env.example index 43314eaf..a6d83d6f 100644 --- a/.env.example +++ b/.env.example @@ -45,6 +45,9 @@ PUSHER_APP_CLUSTER=mt1 MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}" MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}" +VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}" +VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}" + FILESYSTEM_DISK="documents" JWT_SECRET= @@ -71,6 +74,7 @@ VOUCHERIFY_URL="https://as1.api.voucherify.io" VAPOR_ENV=local +VITE_VAPOR_ASSET_URL="" LARAVEL_VAPOR_ENABLED=false COMMANDS_V2_ENABLED=false SENDING_EMAIL_ENABLED=true diff --git a/Jenkinsfile b/Jenkinsfile index eca6a73d..181a7661 100644 --- a/Jenkinsfile +++ b/Jenkinsfile @@ -10,7 +10,7 @@ pipeline { agent { docker { args '--network ci-net --group-add 992 -v /var/run/docker.sock:/var/run/docker.sock' - image '303644228504.dkr.ecr.ap-southeast-1.amazonaws.com/jenkins-pipeline-agent-php-8.3:latest' + image '303644228504.dkr.ecr.ap-southeast-1.amazonaws.com/jenkins-pipeline-agent-php-8.3-node-22:latest' registryCredentialsId "ecr:ap-southeast-1:aws-ec2-instance-iam-role" registryUrl "https://303644228504.dkr.ecr.ap-southeast-1.amazonaws.com" } @@ -53,7 +53,7 @@ pipeline { branch: GIT_BRANCH ) break - case "vapor/test": //cief todo: 137 + case "vapor/test": pusherKeyCredId = 'pusher-test-key' pusherCluster = 'ap1' git( @@ -73,9 +73,13 @@ pipeline { withCredentials([string(credentialsId: pusherKeyCredId, variable: 'PUSHER_KEY')]) { env.MIX_PUSHER_APP_KEY = PUSHER_KEY env.MIX_PUSHER_APP_CLUSTER = pusherCluster + env.VITE_PUSHER_APP_KEY = PUSHER_KEY + env.VITE_PUSHER_APP_CLUSTER = pusherCluster println "Pusher cluster : ${env.MIX_PUSHER_APP_CLUSTER}" println "Pusher key set : ${env.MIX_PUSHER_APP_KEY}" + println "Vite Pusher cluster : ${env.VITE_PUSHER_APP_CLUSTER}" + println "Vite Pusher key set : ${env.VITE_PUSHER_APP_KEY}" } currentBuild.description = 'Step 2 of 6 Completed' } diff --git a/app/Classes/Modules/Transactions/ControllersLogic/ImportPurchaseOrderTransactionLogic.php b/app/Classes/Modules/Transactions/ControllersLogic/ImportPurchaseOrderTransactionLogic.php index b9914527..3613673a 100644 --- a/app/Classes/Modules/Transactions/ControllersLogic/ImportPurchaseOrderTransactionLogic.php +++ b/app/Classes/Modules/Transactions/ControllersLogic/ImportPurchaseOrderTransactionLogic.php @@ -99,6 +99,7 @@ class ImportPurchaseOrderTransactionLogic extends AbstractControllerLogic */ public function logic(Request $request, $id = ''): JsonResponse { + Log::info('ImportPurchaseOrderTransactionLogic started for booking ID: ' . ($request->route('id') ?? $id)); $products = []; /** @var Booking $booking */ diff --git a/app/Http/Resources/PaymentTransactionResource.php b/app/Http/Resources/PaymentTransactionResource.php index 3f9ac491..debb0810 100644 --- a/app/Http/Resources/PaymentTransactionResource.php +++ b/app/Http/Resources/PaymentTransactionResource.php @@ -34,10 +34,10 @@ class PaymentTransactionResource extends JsonResource $booking_marking = ''; switch ($this->owner_type) { case Booking::class: - $booking_marking = $booking->marking; + $booking_marking = $booking->marking ?? ""; break; case Wallet::class: - $booking_marking = $this->booking->marking; + $booking_marking = $this->booking->marking ?? ""; break; } diff --git a/bootstrap/app.php b/bootstrap/app.php index 1f01a2a1..c66d19a8 100644 --- a/bootstrap/app.php +++ b/bootstrap/app.php @@ -59,7 +59,7 @@ return Application::configure(basePath: dirname(__DIR__)) // $exceptions->render(function (MaintenanceModeException $e, $request) { // return response()->view('pages.errors.maintenance'); // }); - + $exceptions->render(function (AuthenticationException $e, $request) { return (new ApiResponseObject( 'Authentication', diff --git a/composer.json b/composer.json index a7270ee8..23ff32a6 100644 --- a/composer.json +++ b/composer.json @@ -21,7 +21,7 @@ "kwn/number-to-words": "^2.11", "laravel/framework": "^12.0", "laravel/tinker": "^2.9", - "laravel/vapor-cli": "^1.55", + "laravel/vapor-cli": "^1.70", "laravel/vapor-core": "^2.33", "league/flysystem-aws-s3-v3": "^3.0", "maatwebsite/excel": "^3.1", diff --git a/docker-setup/Dockerfile b/docker-setup/Dockerfile index 8d61791c..0599b230 100644 --- a/docker-setup/Dockerfile +++ b/docker-setup/Dockerfile @@ -38,10 +38,14 @@ COPY --from=composer:latest /usr/bin/composer /usr/bin/composer # && tar -xJf node.tar.xz -C /usr/local --strip-components=1 \ # && rm node.tar.xz -# NODEJS & NPM (Node 14 for ARM64) -RUN curl -fsSL https://nodejs.org/dist/v14.21.3/node-v14.21.3-linux-arm64.tar.xz -o node.tar.xz \ - && tar -xJf node.tar.xz -C /usr/local --strip-components=1 \ - && rm node.tar.xz +# # NODEJS & NPM (Node 14 for ARM64) +# RUN curl -fsSL https://nodejs.org/dist/v14.21.3/node-v14.21.3-linux-arm64.tar.xz -o node.tar.xz \ +# && tar -xJf node.tar.xz -C /usr/local --strip-components=1 \ +# && rm node.tar.xz + +#NODEJS & NPM +RUN curl -sL https://deb.nodesource.com/setup_22.x | bash - +RUN apt-get -y install nodejs # Set permissions RUN chown -R www-data:www-data /var/www \ diff --git a/docker-setup/docker-compose.yml b/docker-setup/docker-compose.yml index af2cc973..f647978a 100644 --- a/docker-setup/docker-compose.yml +++ b/docker-setup/docker-compose.yml @@ -7,7 +7,7 @@ services: ################################################################# nginx: image: nginx:stable-alpine - container_name: exchange-ngnix + container_name: exchange-2-ngnix ports: - "8082:80" volumes: @@ -21,7 +21,7 @@ services: ################################################################# mysql: image: mysql:5.7.29 - container_name: exchange-mysql + container_name: exchange-2-mysql restart: unless-stopped tty: true ports: @@ -42,12 +42,14 @@ services: build: context: . dockerfile: Dockerfile - container_name: exchange-php + container_name: exchange-2-php volumes: - ../:/var/www/html - ./php/default.conf:/usr/local/etc/php-fpm.d/zz-docker.conf + - ./php/php.ini:/usr/local/etc/php/conf.d/custom.ini ports: - "9002:9000" + - "5173:5173" networks: - exchange-development ################################################################# diff --git a/docker-setup/php/php.ini b/docker-setup/php/php.ini new file mode 100644 index 00000000..446add94 --- /dev/null +++ b/docker-setup/php/php.ini @@ -0,0 +1,3 @@ +memory_limit = 512M +post_max_size = 64M +upload_max_filesize = 64M diff --git a/package.json b/package.json index 63b136c9..63d5ac07 100644 --- a/package.json +++ b/package.json @@ -1,21 +1,23 @@ { "private": true, + "type": "module", + "scripts": { - "dev": "npm run development", - "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js", - "watch": "npm run development -- --watch", - "watch-poll": "npm run watch -- --watch-poll", - "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js", - "prod": "npm run production", - "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --config=node_modules/laravel-mix/setup/webpack.config.js" + "dev": "vite", + "build": "vue-tsc && vite build", + "preview": "vite preview", + "prod": "npm run build" }, "dependencies": { + "@vuelidate/core": "^2.0.3", + "@vuelidate/validators": "^2.0.4", "animate.css": "^4.1.1", + "axios": "^1.7.9", "bootstrap": "^4.0.0", "bootstrap-datepicker": "^1.10.0", "chart.js": "^2.9.4", "dropzone": "^5.7.2", - "epic-spinners": "^1.1.0", + "epic-spinners": "^2.0.0", "flag-icon-css": "^3.5.0", "font-awesome": "^4.7.0", "intro.js": "^3.1.0", @@ -24,115 +26,32 @@ "jwt-decode": "^3.1.2", "laravel-echo": "^1.19.0", "laravel-vapor": "^0.6.0", + "maska": "^3.2.0", + "mitt": "^3.0.1", "noty": "^3.2.0-beta", "perfect-scrollbar": "^1.5.0", + "pinia": "2.2.8", "popper.js": "^1.12", "pusher-js": "^8.4.0", - "sass-loader": "10.1.0", + "sass-loader": "^16.0.4", "select2": "^4.0.6-rc.1", - "v-money": "^0.8.1", - "vue": "^2.7.14", - "vue-avatar": "^2.1.8", - "vue-debounce": "^2.6.0", - "vue-the-mask": "^0.11.1", - "vuelidate": "^0.7.4", - "vuex": "^3.1.1" + "v-money3": "^3.24.1", + "vue": "3.5.32", + "vue-debounce": "^5.0.1" }, "devDependencies": { - "axios": "^0.21.0", - "chromatic": "^6.21.0", - "cross-env": "^7.0.2", - "del": "^6.0.0", - "fancy-log": "^1.3.0", - "gulp": "^4.0.2", - "gulp-autoprefixer": "^7.0.1", - "gulp-clean-css": "^4.3.0", - "gulp-concat": "^2.6.1", - "gulp-concat-css": "^3.1.0", - "gulp-copy": "^4.0.1", - "gulp-livereload": "^4.0.2", - "gulp-load-plugins": "^2.0.6", - "gulp-newer": "^1.3.0", - "gulp-plumber": "^1.1.0", - "gulp-print": "^5.0.2", - "gulp-rename": "^2.0.0", - "gulp-replace": "^1.1.4", - "gulp-sass": "^4.1.0", - "gulp-streamify": "^1.0.2", - "gulp-uglify": "^3.0.0", - "gulp-uglify-es": "^2.0.0", - "laravel-mix": "^6.0.49", - "lodash": "^4.17.13", - "resolve-url-loader": "^3.1.5", - "vue-loader": "^15.11.1 ", - "vue-template-compiler": "^2.7.14" - }, - "paths": { - "build": { - "css": "./public/css/", - "js": "./public/js/", - "images": "./public/images/", - "fonts": "./public/fonts/", - "flags": "./public/flag-icon-css/flags", - "main": "./public/" - } - }, - "globs": { - "vendorJs": [ - "./node_modules/jquery/dist/jquery.min.js", - "./node_modules/popper.js/dist/umd/popper.min.js", - "./node_modules/bootstrap/dist/js/bootstrap.min.js", - "./node_modules/jquery.scrollbar/jquery.scrollbar.min.js", - "./node_modules/select2/dist/js/select2.full.min.js", - "./node_modules/dropzone/dist/dropzone.js", - "./node_modules/bootstrap-datepicker/dist/js/bootstrap-datepicker.js", - "./node_modules/noty/lib/noty.js", - "./node_modules/intro.js/intro.js", - "./node_modules/vue/dist/vue.min.js" - ], - "vendorCss": [ - "./node_modules/font-awesome/css/font-awesome.min.css", - "./node_modules/flag-icon-css/css/flag-icon.min.css", - "./node_modules/jquery.scrollbar/jquery.scrollbar.css", - "./node_modules/select2/dist/css/select2.min.css", - "./node_modules/dropzone/dist/dropzone.css", - "./node_modules/bootstrap-datepicker/dist/css/bootstrap-datepicker3.css", - "./node_modules/noty/lib/noty.css", - "./node_modules/noty/lib/themes/*.css", - "./node_modules/animate.css/animate.css", - "./node_modules/intro.js/introjs.css", - "./node_modules/bootstrap/dist/css/bootstrap.min.css" - ], - "vendorFonts": [ - "./node_modules/font-awesome/fonts/**/*" - ], - "vendorFlags": [ - "./node_modules/flag-icon-css/flags/**/*" - ], - "vendorImages": [ - "./node_modules/jquery-ui-dist/images/**/*.png", - "./node_modules/datatables.net-dt/images/**/*.png" - ], - "sourceCss": [ - "./resources/assets/sass/**/*.scss", - "./resources/assets/css/**/*.css" - ], - "sourceImages": [ - "./resources/assets/images/**/*" - ], - "sourceJs": [ - "./resources/assets/js/pages*.js", - "./resources/assets/js/three.r92.min.js", - "./resources/assets/js/vanta.birds.min.js", - "./resources/assets/js/scripts.js" - ], - "sourceJsKeepNames": [ - "./resources/assets/js/pdf.js", - "./resources/assets/js/pdf-table-extractor.js", - "./resources/assets/js/pdf.worker.js" - ], - "sourceFonts": [ - "./resources/assets/fonts/**/*" - ] + "@types/node": "^22.10.2", + "@vitejs/plugin-vue": "^5.2.1", + "@vue/compiler-sfc": "^3.5.32", + "autoprefixer": "^10.4.20", + "laravel-vite-plugin": "^1.1.1", + "postcss": "^8.4.49", + "sass": "^1.83.0", + "typescript": "5.7.3", + "vite": "6.0.7", + "vite-plugin-static-copy": "^3.4.0", + "vue-tsc": "^2.2.0" } } + + diff --git a/resources/assets/css/site.css b/resources/assets/css/site.css new file mode 100644 index 00000000..1bed65a0 --- /dev/null +++ b/resources/assets/css/site.css @@ -0,0 +1,2 @@ +/* Source CSS - Import all SCSS and CSS files */ +@import '../sass/main.scss'; diff --git a/resources/assets/css/vendor.css b/resources/assets/css/vendor.css new file mode 100644 index 00000000..780493f8 --- /dev/null +++ b/resources/assets/css/vendor.css @@ -0,0 +1,14 @@ +/* Vendor CSS Dependencies */ +@import "bootstrap/dist/css/bootstrap.min.css"; +@import "font-awesome/css/font-awesome.min.css"; +@import "flag-icon-css/css/flag-icon.min.css"; +@import "jquery.scrollbar/jquery.scrollbar.css"; +@import "select2/dist/css/select2.min.css"; +@import "dropzone/dist/dropzone.css"; +@import "bootstrap-datepicker/dist/css/bootstrap-datepicker3.css"; +@import "noty/lib/noty.css"; +@import "noty/lib/themes/mint.css"; +@import "noty/lib/themes/sunset.css"; +@import "noty/lib/themes/metroui.css"; +@import "animate.css/animate.css"; +@import "intro.js/introjs.css"; diff --git a/resources/assets/js/scripts.js b/resources/assets/js/scripts.js index 64282038..c8a8227a 100644 --- a/resources/assets/js/scripts.js +++ b/resources/assets/js/scripts.js @@ -17,7 +17,7 @@ $(function() { el.dispatchEvent(evt); } } - + $('[data-init-plugin="select2"]').on('select2:select', function (e) { $(this).selectListTrigger('change'); }); @@ -50,7 +50,8 @@ $(function() { }) } - $.fn.select2.defaults.set( "theme", "bootstrap" ); - $.fn.select2.defaults.set( "containerCssClass", "form-control" ); - -}); \ No newline at end of file + if ($.fn.select2) { + $.fn.select2.defaults.set( "theme", "bootstrap" ); + $.fn.select2.defaults.set( "containerCssClass", "form-control" ); + } +}); diff --git a/resources/assets/js/site.js b/resources/assets/js/site.js new file mode 100644 index 00000000..2f6ad897 --- /dev/null +++ b/resources/assets/js/site.js @@ -0,0 +1,3 @@ +// Site JS — application scripts that depend on vendor globals +import './pages.js'; +import './scripts.js'; diff --git a/resources/assets/js/vendor.js b/resources/assets/js/vendor.js new file mode 100644 index 00000000..0ed1013b --- /dev/null +++ b/resources/assets/js/vendor.js @@ -0,0 +1,15 @@ +// Vendor JavaScript Dependencies +import jQuery from 'jquery'; +window.jQuery = window.$ = jQuery; +import 'popper.js'; +import 'bootstrap'; +import 'jquery.scrollbar'; +import select2 from 'select2/dist/js/select2.full.js'; +if (typeof select2 === 'function') { + select2(window, jQuery); +} +import 'dropzone'; +import 'bootstrap-datepicker'; +import Noty from 'noty'; +window.Noty = Noty; +import 'intro.js'; diff --git a/resources/assets/sass/_color.scss b/resources/assets/sass/_color.scss index 810b63f1..22b576bf 100644 --- a/resources/assets/sass/_color.scss +++ b/resources/assets/sass/_color.scss @@ -1,15 +1,21 @@ +@use "sass:color"; +@use "sass:list"; +@use "sass:meta"; + // Import the Compass Plugin //-------------------------------- // Normal //-------------------------------- +@use "sass:math"; + @function blend-normal ($foreground, $background) { - $opacity: opacity($foreground); - $background-opacity: opacity($background); + $opacity: color.opacity($foreground); + $background-opacity: color.opacity($background); // calculate opacity - $bm-red: red($foreground) * $opacity + red($background) * $background-opacity * (1 - $opacity); - $bm-green: green($foreground) * $opacity + green($background) * $background-opacity * (1 - $opacity); - $bm-blue: blue($foreground) * $opacity + blue($background) * $background-opacity * (1 - $opacity); + $bm-red: color.channel($foreground, "red", $space: rgb) * $opacity + color.channel($background, "red", $space: rgb) * $background-opacity * (1 - $opacity); + $bm-green: color.channel($foreground, "green", $space: rgb) * $opacity + color.channel($background, "green", $space: rgb) * $background-opacity * (1 - $opacity); + $bm-blue: color.channel($foreground, "blue", $space: rgb) * $opacity + color.channel($background, "blue", $space: rgb) * $background-opacity * (1 - $opacity); @return rgb($bm-red, $bm-green, $bm-blue); } @@ -17,22 +23,22 @@ // Multiply //-------------------------------- @function blend-multiply ($foreground, $background) { - $bm-red: red($background) * red($foreground) / 255; - $bm-green: green($background) * green($foreground) / 255; - $bm-blue: blue($background) * blue($foreground) / 255; + $bm-red: math.div(color.channel($background, "red", $space: rgb) * color.channel($foreground, "red", $space: rgb), 255); + $bm-green: math.div(color.channel($background, "green", $space: rgb) * color.channel($foreground, "green", $space: rgb), 255); + $bm-blue: math.div(color.channel($background, "blue", $space: rgb) * color.channel($foreground, "blue", $space: rgb), 255); - @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background); + @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, color.opacity($foreground)), $background); } //-------------------------------- // Lighten //-------------------------------- @function blend-lighten ($foreground, $background) { - $bm-red: blend-lighten-color(red($foreground), red($background)); - $bm-green: blend-lighten-color(green($foreground), green($background)); - $bm-blue: blend-lighten-color(blue($foreground), blue($background)); + $bm-red: blend-lighten-color(color.channel($foreground, "red", $space: rgb), color.channel($background, "red", $space: rgb)); + $bm-green: blend-lighten-color(color.channel($foreground, "green", $space: rgb), color.channel($background, "green", $space: rgb)); + $bm-blue: blend-lighten-color(color.channel($foreground, "blue", $space: rgb), color.channel($background, "blue", $space: rgb)); - @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background); + @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, color.opacity($foreground)), $background); } @function blend-lighten-color($foreground, $background) { @@ -46,11 +52,11 @@ // Darken //-------------------------------- @function blend-darken ($foreground, $background) { - $bm-red: blend-darken-color(red($foreground), red($background)); - $bm-green: blend-darken-color(green($foreground), green($background)); - $bm-blue: blend-darken-color(blue($foreground), blue($background)); + $bm-red: blend-darken-color(color.channel($foreground, "red", $space: rgb), color.channel($background, "red", $space: rgb)); + $bm-green: blend-darken-color(color.channel($foreground, "green", $space: rgb), color.channel($background, "green", $space: rgb)); + $bm-blue: blend-darken-color(color.channel($foreground, "blue", $space: rgb), color.channel($background, "blue", $space: rgb)); - @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background); + @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, color.opacity($foreground)), $background); } @function blend-darken-color($foreground, $background) { @@ -64,49 +70,49 @@ // Darker Color //-------------------------------- @function blend-darkercolor ($foreground, $background) { - $bm-red: red($foreground); - $bm-green: green($foreground); - $bm-blue: blue($foreground); - $background-red: red($background); - $background-green: green($background); - $background-blue: blue($background); + $bm-red: color.channel($foreground, "red", $space: rgb); + $bm-green: color.channel($foreground, "green", $space: rgb); + $bm-blue: color.channel($foreground, "blue", $space: rgb); + $background-red: color.channel($background, "red", $space: rgb); + $background-green: color.channel($background, "green", $space: rgb); + $background-blue: color.channel($background, "blue", $space: rgb); @if $background-red * 0.3 + $background-green * 0.59 + $background-blue * 0.11 <= $bm-red * 0.3 + $bm-green * 0.59 + $bm-blue * 0.11 { $bm-red: $background-red; $bm-green: $background-green; $bm-blue: $background-blue; } - @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background); + @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, color.opacity($foreground)), $background); } //-------------------------------- // Lighter Color //-------------------------------- @function blend-lightercolor ($foreground, $background) { - $bm-red: red($foreground); - $bm-green: green($foreground); - $bm-blue: blue($foreground); - $background-red: red($background); - $background-green: green($background); - $background-blue: blue($background); + $bm-red: color.channel($foreground, "red", $space: rgb); + $bm-green: color.channel($foreground, "green", $space: rgb); + $bm-blue: color.channel($foreground, "blue", $space: rgb); + $background-red: color.channel($background, "red", $space: rgb); + $background-green: color.channel($background, "green", $space: rgb); + $background-blue: color.channel($background, "blue", $space: rgb); @if $background-red * 0.3 + $background-green * 0.59 + $background-blue * 0.11 > $bm-red * 0.3 + $bm-green * 0.59 + $bm-blue * 0.11 { $bm-red: $background-red; $bm-green: $background-green; $bm-blue: $background-blue; } - @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background); + @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, color.opacity($foreground)), $background); } //-------------------------------- // Linear Dodge //-------------------------------- @function blend-lineardodge ($foreground, $background) { - $bm-red: blend-lineardodge-color(red($foreground), red($background)); - $bm-green: blend-lineardodge-color(green($foreground), green($background)); - $bm-blue: blend-lineardodge-color(blue($foreground), blue($background)); + $bm-red: blend-lineardodge-color(color.channel($foreground, "red", $space: rgb), color.channel($background, "red", $space: rgb)); + $bm-green: blend-lineardodge-color(color.channel($foreground, "green", $space: rgb), color.channel($background, "green", $space: rgb)); + $bm-blue: blend-lineardodge-color(color.channel($foreground, "blue", $space: rgb), color.channel($background, "blue", $space: rgb)); - @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background); + @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, color.opacity($foreground)), $background); } @function blend-lineardodge-color($foreground, $background) { @@ -122,11 +128,11 @@ // Linear Burn //-------------------------------- @function blend-linearburn ($foreground, $background) { - $bm-red: blend-linearburn-color(red($foreground), red($background)); - $bm-green: blend-linearburn-color(green($foreground), green($background)); - $bm-blue: blend-linearburn-color(blue($foreground), blue($background)); + $bm-red: blend-linearburn-color(color.channel($foreground, "red", $space: rgb), color.channel($background, "red", $space: rgb)); + $bm-green: blend-linearburn-color(color.channel($foreground, "green", $space: rgb), color.channel($background, "green", $space: rgb)); + $bm-blue: blend-linearburn-color(color.channel($foreground, "blue", $space: rgb), color.channel($background, "blue", $space: rgb)); - @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background); + @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, color.opacity($foreground)), $background); } @function blend-linearburn-color($foreground, $background) { @@ -142,59 +148,59 @@ // Difference //-------------------------------- @function blend-difference ($foreground, $background) { - $bm-red: abs(red($background) - red($foreground)); - $bm-green: abs(green($background) - green($foreground)); - $bm-blue: abs(blue($background) - blue($foreground)); + $bm-red: math.abs(color.channel($background, "red", $space: rgb) - color.channel($foreground, "red", $space: rgb)); + $bm-green: math.abs(color.channel($background, "green", $space: rgb) - color.channel($foreground, "green", $space: rgb)); + $bm-blue: math.abs(color.channel($background, "blue", $space: rgb) - color.channel($foreground, "blue", $space: rgb)); - @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background); + @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, color.opacity($foreground)), $background); } //-------------------------------- // Screen //-------------------------------- @function blend-screen ($foreground, $background) { - $bm-red: blend-screen-color(red($foreground), red($background)); - $bm-green: blend-screen-color(green($foreground), green($background)); - $bm-blue: blend-screen-color(blue($foreground), blue($background)); + $bm-red: blend-screen-color(color.channel($foreground, "red", $space: rgb), color.channel($background, "red", $space: rgb)); + $bm-green: blend-screen-color(color.channel($foreground, "green", $space: rgb), color.channel($background, "green", $space: rgb)); + $bm-blue: blend-screen-color(color.channel($foreground, "blue", $space: rgb), color.channel($background, "blue", $space: rgb)); - @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background); + @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, color.opacity($foreground)), $background); } @function blend-screen-color($foreground, $background) { - @return (255 - ( ( (255 - $foreground) * (255 - $background)) / 256)); + @return (255 - math.div( (255 - $foreground) * (255 - $background), 256)); } //-------------------------------- // Exclusion //-------------------------------- @function blend-exclusion ($foreground, $background) { - $bm-red: blend-exclusion-color(red($foreground), red($background)); - $bm-green: blend-exclusion-color(green($foreground), green($background)); - $bm-blue: blend-exclusion-color(blue($foreground), blue($background)); + $bm-red: blend-exclusion-color(color.channel($foreground, "red", $space: rgb), color.channel($background, "red", $space: rgb)); + $bm-green: blend-exclusion-color(color.channel($foreground, "green", $space: rgb), color.channel($background, "green", $space: rgb)); + $bm-blue: blend-exclusion-color(color.channel($foreground, "blue", $space: rgb), color.channel($background, "blue", $space: rgb)); - @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background); + @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, color.opacity($foreground)), $background); } @function blend-exclusion-color($foreground, $background) { - @return $background - ($background * (2 / 255) - 1) * $foreground; + @return $background - ($background * math.div(2, 255) - 1) * $foreground; } //-------------------------------- // Overlay //-------------------------------- @function blend-overlay ($foreground, $background) { - $bm-red: blend-overlay-color(red($foreground), red($background)); - $bm-green: blend-overlay-color(green($foreground), green($background)); - $bm-blue: blend-overlay-color(blue($foreground), blue($background)); + $bm-red: blend-overlay-color(color.channel($foreground, "red", $space: rgb), color.channel($background, "red", $space: rgb)); + $bm-green: blend-overlay-color(color.channel($foreground, "green", $space: rgb), color.channel($background, "green", $space: rgb)); + $bm-blue: blend-overlay-color(color.channel($foreground, "blue", $space: rgb), color.channel($background, "blue", $space: rgb)); - @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background); + @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, color.opacity($foreground)), $background); } @function blend-overlay-color($foreground, $background) { - @if $background <= 255 / 2 { - $foreground: (2 * $background * $foreground) / 255; + @if $background <= 255 * 0.5 { + $foreground: math.div(2 * $background * $foreground, 255); } @else { - $foreground: 255 - (255 - 2 * ($background - (255 / 2))) * (255 - $foreground) / 255; + $foreground: 255 - math.div((255 - 2 * ($background - (255 * 0.5))) * (255 - $foreground), 255); } @return $foreground; } @@ -203,18 +209,18 @@ // Soft Light //-------------------------------- @function blend-softlight ($foreground, $background) { - $bm-red: blend-softlight-color(red($foreground), red($background)); - $bm-green: blend-softlight-color(green($foreground), green($background)); - $bm-blue: blend-softlight-color(blue($foreground), blue($background)); + $bm-red: blend-softlight-color(color.channel($foreground, "red", $space: rgb), color.channel($background, "red", $space: rgb)); + $bm-green: blend-softlight-color(color.channel($foreground, "green", $space: rgb), color.channel($background, "green", $space: rgb)); + $bm-blue: blend-softlight-color(color.channel($foreground, "blue", $space: rgb), color.channel($background, "blue", $space: rgb)); - @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background); + @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, color.opacity($foreground)), $background); } @function blend-softlight-color($foreground, $background) { @if $background < 128 { - $foreground: (($foreground / 2) + 64) * $background * (2 / 255); + $foreground: (($foreground * 0.5) + 64) * $background * math.div(2, 255); } @else { - $foreground: 255 - (191 - ($foreground / 2)) * (255 - $background) * (2 / 255); + $foreground: 255 - (191 - ($foreground * 0.5)) * (255 - $background) * math.div(2, 255); } @return $foreground; } @@ -223,19 +229,19 @@ // Hard Light //-------------------------------- @function blend-hardlight ($foreground, $background) { - $bm-red: blend-hardlight-color(red($foreground), red($background)); - $bm-green: blend-hardlight-color(green($foreground), green($background)); - $bm-blue: blend-hardlight-color(blue($foreground), blue($background)); + $bm-red: blend-hardlight-color(color.channel($foreground, "red", $space: rgb), color.channel($background, "red", $space: rgb)); + $bm-green: blend-hardlight-color(color.channel($foreground, "green", $space: rgb), color.channel($background, "green", $space: rgb)); + $bm-blue: blend-hardlight-color(color.channel($foreground, "blue", $space: rgb), color.channel($background, "blue", $space: rgb)); - @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background); + @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, color.opacity($foreground)), $background); } @function blend-hardlight-color($foreground, $background) { $tmp-blend: $foreground; @if $tmp-blend < 128 { - $foreground: $background * $tmp-blend * (2 / 255); + $foreground: $background * $tmp-blend * math.div(2, 255); } @else { - $foreground: 255 - (255-$background) * (255-$tmp-blend) * (2 / 255); + $foreground: 255 - (255-$background) * (255-$tmp-blend) * math.div(2, 255); } @return $foreground; } @@ -244,15 +250,15 @@ // Color Dodge //-------------------------------- @function blend-colordodge ($foreground, $background) { - $bm-red: blend-colordodge-color(red($foreground), red($background)); - $bm-green: blend-colordodge-color(green($foreground), green($background)); - $bm-blue: blend-colordodge-color(blue($foreground), blue($background)); + $bm-red: blend-colordodge-color(color.channel($foreground, "red", $space: rgb), color.channel($background, "red", $space: rgb)); + $bm-green: blend-colordodge-color(color.channel($foreground, "green", $space: rgb), color.channel($background, "green", $space: rgb)); + $bm-blue: blend-colordodge-color(color.channel($foreground, "blue", $space: rgb), color.channel($background, "blue", $space: rgb)); - @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background); + @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, color.opacity($foreground)), $background); } @function blend-colordodge-color($foreground, $background) { - $tmp: $background * 256 / (255 - $foreground); + $tmp: math.div($background * 256, 255 - $foreground); @if $tmp > 255 or $foreground == 255 { $foreground: 255; } @else { @@ -265,15 +271,15 @@ // Color Burn //-------------------------------- @function blend-colorburn ($foreground, $background) { - $bm-red: blend-colorburn-color(red($foreground), red($background)); - $bm-green: blend-colorburn-color(green($foreground), green($background)); - $bm-blue: blend-colorburn-color(blue($foreground), blue($background)); + $bm-red: blend-colorburn-color(color.channel($foreground, "red", $space: rgb), color.channel($background, "red", $space: rgb)); + $bm-green: blend-colorburn-color(color.channel($foreground, "green", $space: rgb), color.channel($background, "green", $space: rgb)); + $bm-blue: blend-colorburn-color(color.channel($foreground, "blue", $space: rgb), color.channel($background, "blue", $space: rgb)); - @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background); + @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, color.opacity($foreground)), $background); } @function blend-colorburn-color($foreground, $background) { - $tmp: (255 - ((255 - $background) * 255) / $foreground); + $tmp: (255 - math.div((255 - $background) * 255, $foreground)); // TODO: hacked to replicate photoshop @if $foreground == 0 { @@ -290,11 +296,11 @@ // Linear Light //-------------------------------- @function blend-linearlight ($foreground, $background) { - $bm-red: blend-linearlight-color(red($foreground), red($background)); - $bm-green: blend-linearlight-color(green($foreground), green($background)); - $bm-blue: blend-linearlight-color(blue($foreground), blue($background)); + $bm-red: blend-linearlight-color(color.channel($foreground, "red", $space: rgb), color.channel($background, "red", $space: rgb)); + $bm-green: blend-linearlight-color(color.channel($foreground, "green", $space: rgb), color.channel($background, "green", $space: rgb)); + $bm-blue: blend-linearlight-color(color.channel($foreground, "blue", $space: rgb), color.channel($background, "blue", $space: rgb)); - @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background); + @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, color.opacity($foreground)), $background); } @function blend-linearlight-color($foreground, $background) { @@ -310,11 +316,11 @@ // Vivid Light //-------------------------------- @function blend-vividlight ($foreground, $background) { - $bm-red: blend-vividlight-color(red($foreground), red($background)); - $bm-green: blend-vividlight-color(green($foreground), green($background)); - $bm-blue: blend-vividlight-color(blue($foreground), blue($background)); + $bm-red: blend-vividlight-color(color.channel($foreground, "red", $space: rgb), color.channel($background, "red", $space: rgb)); + $bm-green: blend-vividlight-color(color.channel($foreground, "green", $space: rgb), color.channel($background, "green", $space: rgb)); + $bm-blue: blend-vividlight-color(color.channel($foreground, "blue", $space: rgb), color.channel($background, "blue", $space: rgb)); - @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background); + @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, color.opacity($foreground)), $background); } @function blend-vividlight-color($foreground, $background) { @@ -330,11 +336,11 @@ // Pin Light //-------------------------------- @function blend-pinlight ($foreground, $background) { - $bm-red: blend-pinlight-color(red($foreground), red($background)); - $bm-green: blend-pinlight-color(green($foreground), green($background)); - $bm-blue: blend-pinlight-color(blue($foreground), blue($background)); + $bm-red: blend-pinlight-color(color.channel($foreground, "red", $space: rgb), color.channel($background, "red", $space: rgb)); + $bm-green: blend-pinlight-color(color.channel($foreground, "green", $space: rgb), color.channel($background, "green", $space: rgb)); + $bm-blue: blend-pinlight-color(color.channel($foreground, "blue", $space: rgb), color.channel($background, "blue", $space: rgb)); - @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background); + @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, color.opacity($foreground)), $background); } @function blend-pinlight-color($foreground, $background) { @@ -350,11 +356,11 @@ // Hard Mix //-------------------------------- @function blend-hardmix ($foreground, $background) { - $bm-red: blend-hardmix-color(red($foreground), red($background)); - $bm-green: blend-hardmix-color(green($foreground), green($background)); - $bm-blue: blend-hardmix-color(blue($foreground), blue($background)); + $bm-red: blend-hardmix-color(color.channel($foreground, "red", $space: rgb), color.channel($background, "red", $space: rgb)); + $bm-green: blend-hardmix-color(color.channel($foreground, "green", $space: rgb), color.channel($background, "green", $space: rgb)); + $bm-blue: blend-hardmix-color(color.channel($foreground, "blue", $space: rgb), color.channel($background, "blue", $space: rgb)); - @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background); + @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, color.opacity($foreground)), $background); } @function blend-hardmix-color($foreground, $background) { @@ -376,10 +382,10 @@ $foreground-hsv: color-to-hsv($foreground); $background-hsv: color-to-hsv($background); - $bm-hsv: nth($foreground-hsv, 1), nth($foreground-hsv, 2), nth($background-hsv, 3); + $bm-hsv: list.nth($foreground-hsv, 1), list.nth($foreground-hsv, 2), list.nth($background-hsv, 3); $bm-color: hsv-to-color($bm-hsv); - @return blend-normal(rgba(red($bm-color), green($bm-color), blue($bm-color), opacity($foreground)), $background); + @return blend-normal(rgba(color.channel($bm-color, "red", $space: rgb), color.channel($bm-color, "green", $space: rgb), color.channel($bm-color, "blue", $space: rgb), color.opacity($foreground)), $background); } //-------------------------------- @@ -396,11 +402,11 @@ // Divide //-------------------------------- @function blend-divide ($foreground, $background) { - $bm-red: blend-divide-colors(red($foreground), red($background)); - $bm-green: blend-divide-colors(green($foreground), green($background)); - $bm-blue: blend-divide-colors(blue($foreground), blue($background)); + $bm-red: blend-divide-colors(color.channel($foreground, "red", $space: rgb), color.channel($background, "red", $space: rgb)); + $bm-green: blend-divide-colors(color.channel($foreground, "green", $space: rgb), color.channel($background, "green", $space: rgb)); + $bm-blue: blend-divide-colors(color.channel($foreground, "blue", $space: rgb), color.channel($background, "blue", $space: rgb)); - @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background); + @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, color.opacity($foreground)), $background); } @function blend-divide-colors($foreground, $background) { @@ -414,10 +420,10 @@ $foreground-hsv: color-to-hsv($foreground); $background-hsv: color-to-hsv($background); - $bm-hsv: nth($foreground-hsv, 1), nth($background-hsv, 2), nth($background-hsv, 3); + $bm-hsv: list.nth($foreground-hsv, 1), list.nth($background-hsv, 2), list.nth($background-hsv, 3); $bm-color: hsv-to-color($bm-hsv); - @return blend-normal(rgba(red($bm-color), green($bm-color), blue($bm-color), opacity($foreground)), $background); + @return blend-normal(rgba(color.channel($bm-color, "red", $space: rgb), color.channel($bm-color, "green", $space: rgb), color.channel($bm-color, "blue", $space: rgb), color.opacity($foreground)), $background); } //-------------------------------- @@ -427,10 +433,10 @@ $foreground-hsv: color-to-hsv($foreground); $background-hsv: color-to-hsv($background); - $bm-hsv: nth($background-hsv, 1), nth($background-hsv, 2), nth($foreground-hsv, 3); + $bm-hsv: list.nth($background-hsv, 1), list.nth($background-hsv, 2), list.nth($foreground-hsv, 3); $bm-color: hsv-to-color($bm-hsv); - @return blend-normal(rgba(red($bm-color), green($bm-color), blue($bm-color), opacity($foreground)), $background); + @return blend-normal(rgba(color.channel($bm-color, "red", $space: rgb), color.channel($bm-color, "green", $space: rgb), color.channel($bm-color, "blue", $space: rgb), color.opacity($foreground)), $background); } //-------------------------------- @@ -440,21 +446,21 @@ $foreground-hsv: color-to-hsv($foreground); $background-hsv: color-to-hsv($background); - $bm-hsv: nth($background-hsv, 1), nth($foreground-hsv, 2), nth($background-hsv, 3); + $bm-hsv: list.nth($background-hsv, 1), list.nth($foreground-hsv, 2), list.nth($background-hsv, 3); $bm-color: hsv-to-color($bm-hsv); - @return blend-normal(rgba(red($bm-color), green($bm-color), blue($bm-color), opacity($foreground)), $background); + @return blend-normal(rgba(color.channel($bm-color, "red", $space: rgb), color.channel($bm-color, "green", $space: rgb), color.channel($bm-color, "blue", $space: rgb), color.opacity($foreground)), $background); } //-------------------------------- // Subtract //-------------------------------- @function blend-subtract ($foreground, $background) { - $bm-red: max(red($background) - red($foreground), 0); - $bm-green: max(green($background) - green($foreground), 0); - $bm-blue: max(blue($background) - blue($foreground), 0); + $bm-red: max(color.channel($background, "red", $space: rgb) - color.channel($foreground, "red", $space: rgb), 0); + $bm-green: max(color.channel($background, "green", $space: rgb) - color.channel($foreground, "green", $space: rgb), 0); + $bm-blue: max(color.channel($background, "blue", $space: rgb) - color.channel($foreground, "blue", $space: rgb), 0); - @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background); + @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, color.opacity($foreground)), $background); } //-------------------------------- @@ -462,57 +468,57 @@ //-------------------------------- // @see https://gist.github.com/1069204 @function hsv-to-hsl($h, $s: 0, $v: 0) { - @if type-of($h) == 'list' { - $v: nth($h, 3); - $s: nth($h, 2); - $h: nth($h, 1); + @if meta.type-of($h) == 'list' { + $v: list.nth($h, 3); + $s: list.nth($h, 2); + $h: list.nth($h, 1); } - @if unit($h) == 'deg' { - $h: 3.1415 * 2 * ($h / 360deg); + @if math.unit($h) == 'deg' { + $h: 3.1415 * 2 * math.div($h, 360deg); } - @if unit($s) == '%' { - $s: 0 + ($s / 100%); + @if math.unit($s) == '%' { + $s: 0 + math.div($s, 100%); } - @if unit($v) == '%' { - $v: 0 + ($v / 100%); + @if math.unit($v) == '%' { + $v: 0 + math.div($v, 100%); } $ss: $s * $v; $ll: (2 - $s) * $v; @if $ll <= 1 and $ll != 0 { - $ss: $ss / $ll; + $ss: math.div($ss, $ll); } @else if ($ll == 2) { $ss: 0; } @else { - $ss: $ss / (2 - $ll); + $ss: math.div($ss, 2 - $ll); } - $ll: $ll / 2; + $ll: $ll * 0.5; - @return 360deg * $h / (3.1415 * 2), percentage(max(0, min(1, $ss))), percentage(max(0, min(1, $ll))); + @return math.div(360deg * $h, 3.1415 * 2), math.percentage(max(0, min(1, $ss))), math.percentage(max(0, min(1, $ll))); } @function hsl-to-hsv($h, $ss: 0, $ll: 0) { - @if type-of($h) == 'list' { - $ll: nth($h, 3); - $ss: nth($h, 2); - $h: nth($h, 1); - } @else if type-of($h) == 'color' { - $ll: lightness($h); - $ss: saturation($h); - $h: hue($h); + @if meta.type-of($h) == 'list' { + $ll: list.nth($h, 3); + $ss: list.nth($h, 2); + $h: list.nth($h, 1); + } @else if meta.type-of($h) == 'color' { + $ll: color.lightness($h); + $ss: color.saturation($h); + $h: color.hue($h); } - @if unit($h) == 'deg' { - $h: 3.1415 * 2 * ($h / 360deg); + @if math.unit($h) == 'deg' { + $h: 3.1415 * 2 * math.div($h, 360deg); } - @if unit($ss) == '%' { - $ss: 0 + ($ss / 100%); + @if math.unit($ss) == '%' { + $ss: 0 + math.div($ss, 100%); } - @if unit($ll) == '%' { - $ll: 0 + ($ll / 100%); + @if math.unit($ll) == '%' { + $ll: 0 + math.div($ll, 100%); } $ll: $ll * 2; @@ -523,10 +529,10 @@ $ss: $ss * (2 - $ll); } - $v: ($ll + $ss) / 2; - $s: if($ll + $ss == 0, 0, (2 * $ss) / ($ll + $ss)); + $v: ($ll + $ss) * 0.5; + $s: if(sass($ll + $ss == 0): 0; else: math.div(2 * $ss, $ll + $ss)); - @return 360deg * $h / (3.1415 * 2), percentage(max(0, min(1, $s))), percentage(max(0, min(1, $v))); + @return math.div(360deg * $h, 3.1415 * 2), math.percentage(max(0, min(1, $s))), math.percentage(max(0, min(1, $v))); } @function color-to-hsv($color) { @@ -535,9 +541,9 @@ @function hsv-to-color($h, $s: 0, $v: 0) { $hsl: hsv-to-hsl($h, $s, $v); - @return hsl(nth($hsl, 1), nth($hsl, 2), nth($hsl, 3)); + @return hsl(list.nth($hsl, 1), list.nth($hsl, 2), list.nth($hsl, 3)); } @function fade($color, $opacity) { - @return fade-in($color, $opacity/100%) -} \ No newline at end of file + @return color.adjust($color, $alpha: math.div($opacity, 100%)) +} diff --git a/resources/assets/sass/_custom.scss b/resources/assets/sass/_custom.scss new file mode 100644 index 00000000..04890f4c --- /dev/null +++ b/resources/assets/sass/_custom.scss @@ -0,0 +1,54 @@ +@use "var"; + +//H E A D E R - starts +.dropdown-hover { + position: relative; + display: inline-block; +} + +.dropdown-hover-trigger { + cursor: pointer; + padding-bottom: 5px; +} + +.dropdown-hover:hover .dropdown-hover-menu { + display: block; +} + +.dropdown-hover .dropdown-hover-menu { + background: var.$color-complete; + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + min-width: 240px; + box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.3); + border: 1px solid rgba(255, 255, 255, 0.15); + margin-top: 0px; + padding: 5px 0; +} + +.dropdown-hover .dropdown-item { + color: rgba(255, 255, 255, 0.85) !important; + padding: 10px 20px; + text-decoration: none !important; + display: block; + text-align: left; + border-bottom: 1px solid rgba(255, 255, 255, 0.08); + transition: background-color 0.2s, color 0.2s; + background: transparent; +} + +.dropdown-hover .dropdown-item:last-child { + border-bottom: none; +} + +.dropdown-hover .dropdown-item:hover { + background-color: rgba(255, 255, 255, 0.15) !important; + color: #ffffff !important; +} + +// Hide elements with v-cloak until Vue has finished mounting +[v-cloak] { + display: none !important; +} + +//H E A D E R - ends \ No newline at end of file diff --git a/resources/assets/sass/_mixins.scss b/resources/assets/sass/_mixins.scss index 7a4aba5c..b1e2d191 100644 --- a/resources/assets/sass/_mixins.scss +++ b/resources/assets/sass/_mixins.scss @@ -1,3 +1,9 @@ +@use "sass:color"; +@use "sass:list"; +@use "sass:meta"; + +@use "sass:math"; + @mixin clearfix() { &:before, &:after { @@ -323,7 +329,7 @@ @mixin horizontal($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) { // Standard, IE10 background: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent) repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=1); // IE9 and down + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{color.ie-hex-str($start-color)}', endColorstr='#{color.ie-hex-str($end-color)}', GradientType=1); // IE9 and down } // Vertical gradient, from top to bottom // @@ -332,7 +338,7 @@ @mixin vertical($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) { // Standard, IE10 background: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent) repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0); // IE9 and down + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{color.ie-hex-str($start-color)}', endColorstr='#{color.ie-hex-str($end-color)}', GradientType=0); // IE9 and down } @mixin directional($start-color: #555, $end-color: #333, $deg: 45deg) { // Standard, IE10 @@ -340,11 +346,11 @@ } @mixin horizontal-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) { background: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color) no-repeat; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=1); // IE9 and down, gets no color-stop at all for proper fallback + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{color.ie-hex-str($start-color)}', endColorstr='#{color.ie-hex-str($end-color)}', GradientType=1); // IE9 and down, gets no color-stop at all for proper fallback } @mixin vertical-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) { background: linear-gradient($start-color, $mid-color $color-stop, $end-color) no-repeat; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0); // IE9 and down, gets no color-stop at all for proper fallback + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{color.ie-hex-str($start-color)}', endColorstr='#{color.ie-hex-str($end-color)}', GradientType=0); // IE9 and down, gets no color-stop at all for proper fallback } @mixin radial($inner-color: #555, $outer-color: #333) { background: radial-gradient(circle, $inner-color, $outer-color) no-repeat; @@ -407,12 +413,12 @@ // Normal //-------------------------------- @function blend-normal ($foreground, $background) { - $opacity: opacity($foreground); - $background-opacity: opacity($background); + $opacity: color.opacity($foreground); + $background-opacity: color.opacity($background); // calculate opacity - $bm-red: red($foreground) * $opacity + red($background) * $background-opacity * (1 - $opacity); - $bm-green: green($foreground) * $opacity + green($background) * $background-opacity * (1 - $opacity); - $bm-blue: blue($foreground) * $opacity + blue($background) * $background-opacity * (1 - $opacity); + $bm-red: color.channel($foreground, "red", $space: rgb) * $opacity + color.channel($background, "red", $space: rgb) * $background-opacity * (1 - $opacity); + $bm-green: color.channel($foreground, "green", $space: rgb) * $opacity + color.channel($background, "green", $space: rgb) * $background-opacity * (1 - $opacity); + $bm-blue: color.channel($foreground, "blue", $space: rgb) * $opacity + color.channel($background, "blue", $space: rgb) * $background-opacity * (1 - $opacity); @return rgb($bm-red, $bm-green, $bm-blue); } @@ -420,20 +426,20 @@ // Multiply //-------------------------------- @function blend-multiply ($foreground, $background) { - $bm-red: red($background) * red($foreground) / 255; - $bm-green: green($background) * green($foreground) / 255; - $bm-blue: blue($background) * blue($foreground) / 255; - @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background); + $bm-red: math.div(color.channel($background, "red", $space: rgb) * color.channel($foreground, "red", $space: rgb), 255); + $bm-green: math.div(color.channel($background, "green", $space: rgb) * color.channel($foreground, "green", $space: rgb), 255); + $bm-blue: math.div(color.channel($background, "blue", $space: rgb) * color.channel($foreground, "blue", $space: rgb), 255); + @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, color.opacity($foreground)), $background); } //-------------------------------- // Lighten //-------------------------------- @function blend-lighten ($foreground, $background) { - $bm-red: blend-lighten-color(red($foreground), red($background)); - $bm-green: blend-lighten-color(green($foreground), green($background)); - $bm-blue: blend-lighten-color(blue($foreground), blue($background)); - @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background); + $bm-red: blend-lighten-color(color.channel($foreground, "red", $space: rgb), color.channel($background, "red", $space: rgb)); + $bm-green: blend-lighten-color(color.channel($foreground, "green", $space: rgb), color.channel($background, "green", $space: rgb)); + $bm-blue: blend-lighten-color(color.channel($foreground, "blue", $space: rgb), color.channel($background, "blue", $space: rgb)); + @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, color.opacity($foreground)), $background); } @function blend-lighten-color($foreground, $background) { @@ -447,10 +453,10 @@ // Darken //-------------------------------- @function blend-darken ($foreground, $background) { - $bm-red: blend-darken-color(red($foreground), red($background)); - $bm-green: blend-darken-color(green($foreground), green($background)); - $bm-blue: blend-darken-color(blue($foreground), blue($background)); - @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background); + $bm-red: blend-darken-color(color.channel($foreground, "red", $space: rgb), color.channel($background, "red", $space: rgb)); + $bm-green: blend-darken-color(color.channel($foreground, "green", $space: rgb), color.channel($background, "green", $space: rgb)); + $bm-blue: blend-darken-color(color.channel($foreground, "blue", $space: rgb), color.channel($background, "blue", $space: rgb)); + @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, color.opacity($foreground)), $background); } @function blend-darken-color($foreground, $background) { @@ -464,46 +470,46 @@ // Darker Color //-------------------------------- @function blend-darkercolor ($foreground, $background) { - $bm-red: red($foreground); - $bm-green: green($foreground); - $bm-blue: blue($foreground); - $background-red: red($background); - $background-green: green($background); - $background-blue: blue($background); + $bm-red: color.channel($foreground, "red", $space: rgb); + $bm-green: color.channel($foreground, "green", $space: rgb); + $bm-blue: color.channel($foreground, "blue", $space: rgb); + $background-red: color.channel($background, "red", $space: rgb); + $background-green: color.channel($background, "green", $space: rgb); + $background-blue: color.channel($background, "blue", $space: rgb); @if $background-red * 0.3 + $background-green * 0.59 + $background-blue * 0.11 <= $bm-red * 0.3 + $bm-green * 0.59 + $bm-blue * 0.11 { $bm-red: $background-red; $bm-green: $background-green; $bm-blue: $background-blue; } - @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background); + @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, color.opacity($foreground)), $background); } //-------------------------------- // Lighter Color //-------------------------------- @function blend-lightercolor ($foreground, $background) { - $bm-red: red($foreground); - $bm-green: green($foreground); - $bm-blue: blue($foreground); - $background-red: red($background); - $background-green: green($background); - $background-blue: blue($background); + $bm-red: color.channel($foreground, "red", $space: rgb); + $bm-green: color.channel($foreground, "green", $space: rgb); + $bm-blue: color.channel($foreground, "blue", $space: rgb); + $background-red: color.channel($background, "red", $space: rgb); + $background-green: color.channel($background, "green", $space: rgb); + $background-blue: color.channel($background, "blue", $space: rgb); @if $background-red * 0.3 + $background-green * 0.59 + $background-blue * 0.11 > $bm-red * 0.3 + $bm-green * 0.59 + $bm-blue * 0.11 { $bm-red: $background-red; $bm-green: $background-green; $bm-blue: $background-blue; } - @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background); + @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, color.opacity($foreground)), $background); } //-------------------------------- // Linear Dodge //-------------------------------- @function blend-lineardodge ($foreground, $background) { - $bm-red: blend-lineardodge-color(red($foreground), red($background)); - $bm-green: blend-lineardodge-color(green($foreground), green($background)); - $bm-blue: blend-lineardodge-color(blue($foreground), blue($background)); - @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background); + $bm-red: blend-lineardodge-color(color.channel($foreground, "red", $space: rgb), color.channel($background, "red", $space: rgb)); + $bm-green: blend-lineardodge-color(color.channel($foreground, "green", $space: rgb), color.channel($background, "green", $space: rgb)); + $bm-blue: blend-lineardodge-color(color.channel($foreground, "blue", $space: rgb), color.channel($background, "blue", $space: rgb)); + @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, color.opacity($foreground)), $background); } @function blend-lineardodge-color($foreground, $background) { @@ -519,10 +525,10 @@ // Linear Burn //-------------------------------- @function blend-linearburn ($foreground, $background) { - $bm-red: blend-linearburn-color(red($foreground), red($background)); - $bm-green: blend-linearburn-color(green($foreground), green($background)); - $bm-blue: blend-linearburn-color(blue($foreground), blue($background)); - @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background); + $bm-red: blend-linearburn-color(color.channel($foreground, "red", $space: rgb), color.channel($background, "red", $space: rgb)); + $bm-green: blend-linearburn-color(color.channel($foreground, "green", $space: rgb), color.channel($background, "green", $space: rgb)); + $bm-blue: blend-linearburn-color(color.channel($foreground, "blue", $space: rgb), color.channel($background, "blue", $space: rgb)); + @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, color.opacity($foreground)), $background); } @function blend-linearburn-color($foreground, $background) { @@ -538,55 +544,55 @@ // Difference //-------------------------------- @function blend-difference ($foreground, $background) { - $bm-red: abs(red($background) - red($foreground)); - $bm-green: abs(green($background) - green($foreground)); - $bm-blue: abs(blue($background) - blue($foreground)); - @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background); + $bm-red: math.abs(color.channel($background, "red", $space: rgb) - color.channel($foreground, "red", $space: rgb)); + $bm-green: math.abs(color.channel($background, "green", $space: rgb) - color.channel($foreground, "green", $space: rgb)); + $bm-blue: math.abs(color.channel($background, "blue", $space: rgb) - color.channel($foreground, "blue", $space: rgb)); + @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, color.opacity($foreground)), $background); } //-------------------------------- // Screen //-------------------------------- @function blend-screen ($foreground, $background) { - $bm-red: blend-screen-color(red($foreground), red($background)); - $bm-green: blend-screen-color(green($foreground), green($background)); - $bm-blue: blend-screen-color(blue($foreground), blue($background)); - @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background); + $bm-red: blend-screen-color(color.channel($foreground, "red", $space: rgb), color.channel($background, "red", $space: rgb)); + $bm-green: blend-screen-color(color.channel($foreground, "green", $space: rgb), color.channel($background, "green", $space: rgb)); + $bm-blue: blend-screen-color(color.channel($foreground, "blue", $space: rgb), color.channel($background, "blue", $space: rgb)); + @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, color.opacity($foreground)), $background); } @function blend-screen-color($foreground, $background) { - @return (255 - ( ( (255 - $foreground) * (255 - $background)) / 256)); + @return (255 - math.div( (255 - $foreground) * (255 - $background), 256)); } //-------------------------------- // Exclusion //-------------------------------- @function blend-exclusion ($foreground, $background) { - $bm-red: blend-exclusion-color(red($foreground), red($background)); - $bm-green: blend-exclusion-color(green($foreground), green($background)); - $bm-blue: blend-exclusion-color(blue($foreground), blue($background)); - @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background); + $bm-red: blend-exclusion-color(color.channel($foreground, "red", $space: rgb), color.channel($background, "red", $space: rgb)); + $bm-green: blend-exclusion-color(color.channel($foreground, "green", $space: rgb), color.channel($background, "green", $space: rgb)); + $bm-blue: blend-exclusion-color(color.channel($foreground, "blue", $space: rgb), color.channel($background, "blue", $space: rgb)); + @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, color.opacity($foreground)), $background); } @function blend-exclusion-color($foreground, $background) { - @return $background - ($background * (2 / 255) - 1) * $foreground; + @return $background - ($background * math.div(2, 255) - 1) * $foreground; } //-------------------------------- // Overlay //-------------------------------- @function blend-overlay ($foreground, $background) { - $bm-red: blend-overlay-color(red($foreground), red($background)); - $bm-green: blend-overlay-color(green($foreground), green($background)); - $bm-blue: blend-overlay-color(blue($foreground), blue($background)); - @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background); + $bm-red: blend-overlay-color(color.channel($foreground, "red", $space: rgb), color.channel($background, "red", $space: rgb)); + $bm-green: blend-overlay-color(color.channel($foreground, "green", $space: rgb), color.channel($background, "green", $space: rgb)); + $bm-blue: blend-overlay-color(color.channel($foreground, "blue", $space: rgb), color.channel($background, "blue", $space: rgb)); + @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, color.opacity($foreground)), $background); } @function blend-overlay-color($foreground, $background) { - @if $background <= 255 / 2 { - $foreground: (2 * $background * $foreground) / 255; + @if $background <= 255 * 0.5 { + $foreground: math.div(2 * $background * $foreground, 255); } @else { - $foreground: 255 - (255 - 2 * ($background - (255 / 2))) * (255 - $foreground) / 255; + $foreground: 255 - math.div((255 - 2 * ($background - (255 * 0.5))) * (255 - $foreground), 255); } @return $foreground; } @@ -595,17 +601,17 @@ // Soft Light //-------------------------------- @function blend-softlight ($foreground, $background) { - $bm-red: blend-softlight-color(red($foreground), red($background)); - $bm-green: blend-softlight-color(green($foreground), green($background)); - $bm-blue: blend-softlight-color(blue($foreground), blue($background)); - @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background); + $bm-red: blend-softlight-color(color.channel($foreground, "red", $space: rgb), color.channel($background, "red", $space: rgb)); + $bm-green: blend-softlight-color(color.channel($foreground, "green", $space: rgb), color.channel($background, "green", $space: rgb)); + $bm-blue: blend-softlight-color(color.channel($foreground, "blue", $space: rgb), color.channel($background, "blue", $space: rgb)); + @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, color.opacity($foreground)), $background); } @function blend-softlight-color($foreground, $background) { @if $background < 128 { - $foreground: (($foreground / 2) + 64) * $background * (2 / 255); + $foreground: (($foreground * 0.5) + 64) * $background * math.div(2, 255); } @else { - $foreground: 255 - (191 - ($foreground / 2)) * (255 - $background) * (2 / 255); + $foreground: 255 - (191 - ($foreground * 0.5)) * (255 - $background) * math.div(2, 255); } @return $foreground; } @@ -614,18 +620,18 @@ // Hard Light //-------------------------------- @function blend-hardlight ($foreground, $background) { - $bm-red: blend-hardlight-color(red($foreground), red($background)); - $bm-green: blend-hardlight-color(green($foreground), green($background)); - $bm-blue: blend-hardlight-color(blue($foreground), blue($background)); - @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background); + $bm-red: blend-hardlight-color(color.channel($foreground, "red", $space: rgb), color.channel($background, "red", $space: rgb)); + $bm-green: blend-hardlight-color(color.channel($foreground, "green", $space: rgb), color.channel($background, "green", $space: rgb)); + $bm-blue: blend-hardlight-color(color.channel($foreground, "blue", $space: rgb), color.channel($background, "blue", $space: rgb)); + @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, color.opacity($foreground)), $background); } @function blend-hardlight-color($foreground, $background) { $tmp-blend: $foreground; @if $tmp-blend < 128 { - $foreground: $background * $tmp-blend * (2 / 255); + $foreground: $background * $tmp-blend * math.div(2, 255); } @else { - $foreground: 255 - (255-$background) * (255-$tmp-blend) * (2 / 255); + $foreground: 255 - (255-$background) * (255-$tmp-blend) * math.div(2, 255); } @return $foreground; } @@ -634,14 +640,14 @@ // Color Dodge //-------------------------------- @function blend-colordodge ($foreground, $background) { - $bm-red: blend-colordodge-color(red($foreground), red($background)); - $bm-green: blend-colordodge-color(green($foreground), green($background)); - $bm-blue: blend-colordodge-color(blue($foreground), blue($background)); - @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background); + $bm-red: blend-colordodge-color(color.channel($foreground, "red", $space: rgb), color.channel($background, "red", $space: rgb)); + $bm-green: blend-colordodge-color(color.channel($foreground, "green", $space: rgb), color.channel($background, "green", $space: rgb)); + $bm-blue: blend-colordodge-color(color.channel($foreground, "blue", $space: rgb), color.channel($background, "blue", $space: rgb)); + @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, color.opacity($foreground)), $background); } @function blend-colordodge-color($foreground, $background) { - $tmp: $background * 256 / (255 - $foreground); + $tmp: math.div($background * 256, 255 - $foreground); @if $tmp > 255 or $foreground == 255 { $foreground: 255; } @else { @@ -654,14 +660,14 @@ // Color Burn //-------------------------------- @function blend-colorburn ($foreground, $background) { - $bm-red: blend-colorburn-color(red($foreground), red($background)); - $bm-green: blend-colorburn-color(green($foreground), green($background)); - $bm-blue: blend-colorburn-color(blue($foreground), blue($background)); - @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background); + $bm-red: blend-colorburn-color(color.channel($foreground, "red", $space: rgb), color.channel($background, "red", $space: rgb)); + $bm-green: blend-colorburn-color(color.channel($foreground, "green", $space: rgb), color.channel($background, "green", $space: rgb)); + $bm-blue: blend-colorburn-color(color.channel($foreground, "blue", $space: rgb), color.channel($background, "blue", $space: rgb)); + @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, color.opacity($foreground)), $background); } @function blend-colorburn-color($foreground, $background) { - $tmp: (255 - ((255 - $background) * 255) / $foreground); + $tmp: (255 - math.div((255 - $background) * 255, $foreground)); // TODO: hacked to replicate photoshop @if $foreground == 0 { $foreground: 255; @@ -677,10 +683,10 @@ // Linear Light //-------------------------------- @function blend-linearlight ($foreground, $background) { - $bm-red: blend-linearlight-color(red($foreground), red($background)); - $bm-green: blend-linearlight-color(green($foreground), green($background)); - $bm-blue: blend-linearlight-color(blue($foreground), blue($background)); - @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background); + $bm-red: blend-linearlight-color(color.channel($foreground, "red", $space: rgb), color.channel($background, "red", $space: rgb)); + $bm-green: blend-linearlight-color(color.channel($foreground, "green", $space: rgb), color.channel($background, "green", $space: rgb)); + $bm-blue: blend-linearlight-color(color.channel($foreground, "blue", $space: rgb), color.channel($background, "blue", $space: rgb)); + @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, color.opacity($foreground)), $background); } @function blend-linearlight-color($foreground, $background) { @@ -696,10 +702,10 @@ // Vivid Light //-------------------------------- @function blend-vividlight ($foreground, $background) { - $bm-red: blend-vividlight-color(red($foreground), red($background)); - $bm-green: blend-vividlight-color(green($foreground), green($background)); - $bm-blue: blend-vividlight-color(blue($foreground), blue($background)); - @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background); + $bm-red: blend-vividlight-color(color.channel($foreground, "red", $space: rgb), color.channel($background, "red", $space: rgb)); + $bm-green: blend-vividlight-color(color.channel($foreground, "green", $space: rgb), color.channel($background, "green", $space: rgb)); + $bm-blue: blend-vividlight-color(color.channel($foreground, "blue", $space: rgb), color.channel($background, "blue", $space: rgb)); + @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, color.opacity($foreground)), $background); } @function blend-vividlight-color($foreground, $background) { @@ -715,10 +721,10 @@ // Pin Light //-------------------------------- @function blend-pinlight ($foreground, $background) { - $bm-red: blend-pinlight-color(red($foreground), red($background)); - $bm-green: blend-pinlight-color(green($foreground), green($background)); - $bm-blue: blend-pinlight-color(blue($foreground), blue($background)); - @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background); + $bm-red: blend-pinlight-color(color.channel($foreground, "red", $space: rgb), color.channel($background, "red", $space: rgb)); + $bm-green: blend-pinlight-color(color.channel($foreground, "green", $space: rgb), color.channel($background, "green", $space: rgb)); + $bm-blue: blend-pinlight-color(color.channel($foreground, "blue", $space: rgb), color.channel($background, "blue", $space: rgb)); + @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, color.opacity($foreground)), $background); } @function blend-pinlight-color($foreground, $background) { @@ -734,10 +740,10 @@ // Hard Mix //-------------------------------- @function blend-hardmix ($foreground, $background) { - $bm-red: blend-hardmix-color(red($foreground), red($background)); - $bm-green: blend-hardmix-color(green($foreground), green($background)); - $bm-blue: blend-hardmix-color(blue($foreground), blue($background)); - @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background); + $bm-red: blend-hardmix-color(color.channel($foreground, "red", $space: rgb), color.channel($background, "red", $space: rgb)); + $bm-green: blend-hardmix-color(color.channel($foreground, "green", $space: rgb), color.channel($background, "green", $space: rgb)); + $bm-blue: blend-hardmix-color(color.channel($foreground, "blue", $space: rgb), color.channel($background, "blue", $space: rgb)); + @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, color.opacity($foreground)), $background); } @function blend-hardmix-color($foreground, $background) { @@ -757,9 +763,9 @@ @function blend-colorblend ($foreground, $background) { $foreground-hsv: color-to-hsv($foreground); $background-hsv: color-to-hsv($background); - $bm-hsv: nth($foreground-hsv, 1), nth($foreground-hsv, 2), nth($background-hsv, 3); + $bm-hsv: list.nth($foreground-hsv, 1), list.nth($foreground-hsv, 2), list.nth($background-hsv, 3); $bm-color: hsv-to-color($bm-hsv); - @return blend-normal(rgba(red($bm-color), green($bm-color), blue($bm-color), opacity($foreground)), $background); + @return blend-normal(rgba(color.channel($bm-color, "red", $space: rgb), color.channel($bm-color, "green", $space: rgb), color.channel($bm-color, "blue", $space: rgb), color.opacity($foreground)), $background); } //-------------------------------- @@ -776,10 +782,10 @@ // Divide //-------------------------------- @function blend-divide ($foreground, $background) { - $bm-red: blend-divide-colors(red($foreground), red($background)); - $bm-green: blend-divide-colors(green($foreground), green($background)); - $bm-blue: blend-divide-colors(blue($foreground), blue($background)); - @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background); + $bm-red: blend-divide-colors(color.channel($foreground, "red", $space: rgb), color.channel($background, "red", $space: rgb)); + $bm-green: blend-divide-colors(color.channel($foreground, "green", $space: rgb), color.channel($background, "green", $space: rgb)); + $bm-blue: blend-divide-colors(color.channel($foreground, "blue", $space: rgb), color.channel($background, "blue", $space: rgb)); + @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, color.opacity($foreground)), $background); } @function blend-divide-colors($foreground, $background) { @@ -792,9 +798,9 @@ @function blend-hue ($foreground, $background) { $foreground-hsv: color-to-hsv($foreground); $background-hsv: color-to-hsv($background); - $bm-hsv: nth($foreground-hsv, 1), nth($background-hsv, 2), nth($background-hsv, 3); + $bm-hsv: list.nth($foreground-hsv, 1), list.nth($background-hsv, 2), list.nth($background-hsv, 3); $bm-color: hsv-to-color($bm-hsv); - @return blend-normal(rgba(red($bm-color), green($bm-color), blue($bm-color), opacity($foreground)), $background); + @return blend-normal(rgba(color.channel($bm-color, "red", $space: rgb), color.channel($bm-color, "green", $space: rgb), color.channel($bm-color, "blue", $space: rgb), color.opacity($foreground)), $background); } //-------------------------------- @@ -803,9 +809,9 @@ @function blend-luminosity ($foreground, $background) { $foreground-hsv: color-to-hsv($foreground); $background-hsv: color-to-hsv($background); - $bm-hsv: nth($background-hsv, 1), nth($background-hsv, 2), nth($foreground-hsv, 3); + $bm-hsv: list.nth($background-hsv, 1), list.nth($background-hsv, 2), list.nth($foreground-hsv, 3); $bm-color: hsv-to-color($bm-hsv); - @return blend-normal(rgba(red($bm-color), green($bm-color), blue($bm-color), opacity($foreground)), $background); + @return blend-normal(rgba(color.channel($bm-color, "red", $space: rgb), color.channel($bm-color, "green", $space: rgb), color.channel($bm-color, "blue", $space: rgb), color.opacity($foreground)), $background); } //-------------------------------- @@ -814,19 +820,19 @@ @function blend-saturation ($foreground, $background) { $foreground-hsv: color-to-hsv($foreground); $background-hsv: color-to-hsv($background); - $bm-hsv: nth($background-hsv, 1), nth($foreground-hsv, 2), nth($background-hsv, 3); + $bm-hsv: list.nth($background-hsv, 1), list.nth($foreground-hsv, 2), list.nth($background-hsv, 3); $bm-color: hsv-to-color($bm-hsv); - @return blend-normal(rgba(red($bm-color), green($bm-color), blue($bm-color), opacity($foreground)), $background); + @return blend-normal(rgba(color.channel($bm-color, "red", $space: rgb), color.channel($bm-color, "green", $space: rgb), color.channel($bm-color, "blue", $space: rgb), color.opacity($foreground)), $background); } //-------------------------------- // Subtract //-------------------------------- @function blend-subtract ($foreground, $background) { - $bm-red: max(red($background) - red($foreground), 0); - $bm-green: max(green($background) - green($foreground), 0); - $bm-blue: max(blue($background) - blue($foreground), 0); - @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background); + $bm-red: max(color.channel($background, "red", $space: rgb) - color.channel($foreground, "red", $space: rgb), 0); + $bm-green: max(color.channel($background, "green", $space: rgb) - color.channel($foreground, "green", $space: rgb), 0); + $bm-blue: max(color.channel($background, "blue", $space: rgb) - color.channel($foreground, "blue", $space: rgb), 0); + @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, color.opacity($foreground)), $background); } //-------------------------------- @@ -834,51 +840,51 @@ //-------------------------------- // @see https://gist.github.com/1069204 @function hsv-to-hsl($h, $s: 0, $v: 0) { - @if type-of($h) == 'list' { - $v: nth($h, 3); - $s: nth($h, 2); - $h: nth($h, 1); + @if meta.type-of($h) == 'list' { + $v: list.nth($h, 3); + $s: list.nth($h, 2); + $h: list.nth($h, 1); } - @if unit($h) == 'deg' { - $h: 3.1415 * 2 * ($h / 360deg); + @if math.unit($h) == 'deg' { + $h: 3.1415 * 2 * math.div($h, 360deg); } - @if unit($s) == '%' { - $s: 0 + ($s / 100%); + @if math.unit($s) == '%' { + $s: 0 + math.div($s, 100%); } - @if unit($v) == '%' { - $v: 0 + ($v / 100%); + @if math.unit($v) == '%' { + $v: 0 + math.div($v, 100%); } $ss: $s * $v; $ll: (2 - $s) * $v; @if $ll <= 1 and $ll != 0 { - $ss: $ss / $ll; + $ss: math.div($ss, $ll); } @else if ($ll == 2) { $ss: 0; } @else { - $ss: $ss / (2 - $ll); + $ss: math.div($ss, 2 - $ll); } - $ll: $ll / 2; - @return 360deg * $h / (3.1415 * 2), percentage(max(0, min(1, $ss))), percentage(max(0, min(1, $ll))); + $ll: $ll * 0.5; + @return math.div(360deg * $h, 3.1415 * 2), math.percentage(max(0, min(1, $ss))), math.percentage(max(0, min(1, $ll))); } @function hsl-to-hsv($h, $ss: 0, $ll: 0) { - @if type-of($h) == 'list' { - $ll: nth($h, 3); - $ss: nth($h, 2); - $h: nth($h, 1); - } @else if type-of($h) == 'color' { - $ll: lightness($h); - $ss: saturation($h); - $h: hue($h); + @if meta.type-of($h) == 'list' { + $ll: list.nth($h, 3); + $ss: list.nth($h, 2); + $h: list.nth($h, 1); + } @else if meta.type-of($h) == 'color' { + $ll: color.lightness($h); + $ss: color.saturation($h); + $h: color.hue($h); } - @if unit($h) == 'deg' { - $h: 3.1415 * 2 * ($h / 360deg); + @if math.unit($h) == 'deg' { + $h: 3.1415 * 2 * math.div($h, 360deg); } - @if unit($ss) == '%' { - $ss: 0 + ($ss / 100%); + @if math.unit($ss) == '%' { + $ss: 0 + math.div($ss, 100%); } - @if unit($ll) == '%' { - $ll: 0 + ($ll / 100%); + @if math.unit($ll) == '%' { + $ll: 0 + math.div($ll, 100%); } $ll: $ll * 2; @if $ll <= 1 { @@ -886,9 +892,9 @@ } @else { $ss: $ss * (2 - $ll); } - $v: ($ll + $ss) / 2; - $s: if($ll + $ss == 0, 0, (2 * $ss) / ($ll + $ss)); - @return 360deg * $h / (3.1415 * 2), percentage(max(0, min(1, $s))), percentage(max(0, min(1, $v))); + $v: ($ll + $ss) * 0.5; + $s: if(sass($ll + $ss == 0): 0; else: math.div(2 * $ss, $ll + $ss)); + @return math.div(360deg * $h, 3.1415 * 2), math.percentage(max(0, min(1, $s))), math.percentage(max(0, min(1, $v))); } @function color-to-hsv($color) { @@ -897,7 +903,6 @@ @function hsv-to-color($h, $s: 0, $v: 0) { $hsl: hsv-to-hsl($h, $s, $v); - @return hsl(nth($hsl, 1), nth($hsl, 2), nth($hsl, 3)); + @return hsl(list.nth($hsl, 1), list.nth($hsl, 2), list.nth($hsl, 3)); } - diff --git a/resources/assets/sass/_modules.scss b/resources/assets/sass/_modules.scss index 964102c1..9ec30fd8 100644 --- a/resources/assets/sass/_modules.scss +++ b/resources/assets/sass/_modules.scss @@ -2,95 +2,95 @@ // -------------------------------------------------- //Z-indexes -@import "modules/z_index"; +@use "modules/z_index"; //Main Layout -@import "modules/layout"; +@use "modules/layout"; //View -@import "modules/view"; +@use "modules/view"; //Chat -@import "modules/chat"; +@use "modules/chat"; //Cards -@import "modules/cards"; +@use "modules/cards"; //Typography -@import "modules/typography"; +@use "modules/typography"; //Buttons -@import "modules/buttons"; +@use "modules/buttons"; //Alerts -@import "modules/alerts"; +@use "modules/alerts"; //Notification -@import "modules/notifications"; +@use "modules/notifications"; //Progress indicators -@import "modules/progress_indicators"; +@use "modules/progress_indicators"; //Modals -@import "modules/modals"; +@use "modules/modals"; //Tabs & Accordians -@import "modules/tabs_accordian"; +@use "modules/tabs_accordian"; //Sliders -@import "modules/sliders"; +@use "modules/sliders"; //Tree View -@import "modules/treeview"; +@use "modules/treeview"; //Nestables -@import "modules/nestables"; +@use "modules/nestables"; //Form Elements -@import "modules/form_elements"; +@use "modules/form_elements"; //Tables -@import "modules/tables"; +@use "modules/tables"; //Charts -@import "modules/charts"; +@use "modules/charts"; //List -@import "modules/list"; +@use "modules/list"; //Social -@import "modules/social"; +@use "modules/social"; //Email -@import "modules/email"; +@use "modules/email"; //Calender -@import "modules/calendar"; +@use "modules/calendar"; //Login -@import "modules/login"; +@use "modules/login"; //Lock screen -@import "modules/lock_screen"; +@use "modules/lock_screen"; //Timeline -@import "modules/timeline"; +@use "modules/timeline"; //Gallery -@import "modules/gallery"; +@use "modules/gallery"; //Vector map -@import "modules/vector_map"; +@use "modules/vector_map"; // Widgets -@import "modules/widgets"; +@use "modules/widgets"; //Misc -@import "modules/misc"; +@use "modules/misc"; //Print -@import "modules/print"; +@use "modules/print"; //Print -@import "modules/animation"; +@use "modules/animation"; diff --git a/resources/assets/sass/_responsive.scss b/resources/assets/sass/_responsive.scss index fa7bb2f7..3aa0d395 100644 --- a/resources/assets/sass/_responsive.scss +++ b/resources/assets/sass/_responsive.scss @@ -1,3 +1,6 @@ +@use "mixins"; +@use "var"; + .visible-xlg { display: none; } @@ -22,13 +25,13 @@ .container-fluid { &.container-fixed-lg { - width: $layout-container-fixed-lg; + width: var.$layout-container-fixed-lg; margin-right: auto; margin-left: auto; } } .menu-pin .container-fluid.container-fixed-lg { - width: $layout-container-fixed-lg - $layout-sidepanel-pin-width; + width: var.$layout-container-fixed-lg - var.$layout-sidepanel-pin-width; } // .visible-xlg { // display: block !important; @@ -272,10 +275,10 @@ padding-left: 0; .page-content-wrapper { .content { - padding-left: $layout-sidepanel-pin-width; + padding-left: var.$layout-sidepanel-pin-width; } .footer { - left: $layout-sidepanel-pin-width; + left: var.$layout-sidepanel-pin-width; } } } @@ -285,8 +288,8 @@ } } .page-sidebar { - transform: translate($layout-sidepanel-width - $layout-sidepanel-width-collapsed, 0) !important; - width: $layout-sidepanel-pin-width; + transform: translate(var.$layout-sidepanel-width - var.$layout-sidepanel-width-collapsed, 0) !important; + width: var.$layout-sidepanel-pin-width; .sidebar-header .sidebar-header-controls { transform: translateX(18px); } @@ -306,11 +309,11 @@ } } &.box-layout { - background-color: $color-white; + background-color: var.$color-white; & > .container { height: 100%; padding: 0; - background-color: $color-master-lightest; + background-color: var.$color-master-lightest; } .header { background-color: transparent; @@ -340,7 +343,7 @@ position: relative; } .dropdown-menu { - top: $layout-header-height - 20px; + top: var.$layout-header-height - 20px; } .user-info-wrapper { .user-details { @@ -388,7 +391,7 @@ body { &.sidebar-open { .page-container { - @include translate3d(250px, 0, 0); + @include mixins.translate3d(250px, 0, 0); overflow: hidden; position: fixed; } @@ -444,7 +447,7 @@ width: auto; } .dropdown-menu { - top: $layout-mobile-header-height - 20px; + top: var.$layout-mobile-header-height - 20px; } .notification-list, .search-link { display: none; @@ -563,7 +566,7 @@ // Pages Notification customizations body > .pgn-wrapper[data-position="top"] { - top: $layout-mobile-header-height; + top: var.$layout-mobile-header-height; left: 0; } body > .pgn-wrapper[data-position="bottom"] { @@ -661,7 +664,7 @@ .page-container { .page-content-wrapper { .content { - padding-top: $layout-header-height; + padding-top: var.$layout-header-height; } } } @@ -806,8 +809,8 @@ display: inline-block !important; } //New Screen Prefix padding and margin - @include generate-paddings-options-prefix("md", 3); - @include generate-paddings-options-prefix("md", 3); + @include mixins.generate-paddings-options-prefix("md", 3); + @include mixins.generate-paddings-options-prefix("md", 3); } @media (max-width: 979px) { @@ -829,7 +832,7 @@ padding: 20px; position: absolute; right: 0; - top: $layout-header-height; + top: var.$layout-header-height; z-index: 9999; display: none; border-radius: 10px; @@ -884,12 +887,12 @@ @media (max-width: 767px) { .header { - height: $layout-mobile-header-height; + height: var.$layout-mobile-header-height; .notification-list, .search-link { display: none; } .header-inner { - height: $layout-mobile-header-height; + height: var.$layout-mobile-header-height; } } .header .user-info-wrapper { @@ -908,7 +911,7 @@ } .page-container .page-content-wrapper .content { - padding-top: $layout-mobile-header-height; + padding-top: var.$layout-mobile-header-height; padding-bottom: 100px; } .page-sidebar .sidebar-header { @@ -933,8 +936,8 @@ } //Generate Margin and Paddings. - @include generate-paddings-options-prefix("sm", 10); - @include generate-paddings-options-prefix("sm", 10); + @include mixins.generate-paddings-options-prefix("sm", 10); + @include mixins.generate-paddings-options-prefix("sm", 10); .sm-no-margin { margin: 0; @@ -1025,10 +1028,10 @@ width: 100%; .header { width: 100%; - height: $layout-mobile-header-height; + height: var.$layout-mobile-header-height; border-bottom: 1px solid rgba(0, 0, 0, .07); .header-inner { - height: $layout-mobile-header-height; + height: var.$layout-mobile-header-height; text-align: center; .toggle-email-sidebar { font-size: 16px; @@ -1066,8 +1069,8 @@ } } .page-sidebar .sidebar-header { - height: $layout-mobile-header-height; - line-height: $layout-mobile-header-height; + height: var.$layout-mobile-header-height; + line-height: var.$layout-mobile-header-height; } .panel { .panel-heading { @@ -1102,11 +1105,11 @@ /*** Retina Display Images **/ @media only screen and (min-device-pixel-ratio: 2.0) { .editor-icon { - background-image: url("#{$base-img-url}/editor_tray_2x.png"); + background-image: url("#{var.$base-img-url}/editor_tray_2x.png"); background-size: 480px 40px; } .alert .close { - background: transparent url("#{$base-img-url}/icons/noti-cross-2x.png") no-repeat scroll -9px -10px; + background: transparent url("#{var.$base-img-url}/icons/noti-cross-2x.png") no-repeat scroll -9px -10px; width: 10px; height: 9px; position: relative; diff --git a/resources/assets/sass/_var.scss b/resources/assets/sass/_var.scss index 9c59de6d..966cb6e5 100644 --- a/resources/assets/sass/_var.scss +++ b/resources/assets/sass/_var.scss @@ -1,3 +1,6 @@ +@use "sass:color"; +@use "color" as color2; + // Pages Default Theme // -------------------------------------------------- // Copyright Reserved Revox - 2014 @@ -15,14 +18,14 @@ $assets-url: "../../assets" !default; $color-master: #3a3a3a !default; // Lighter Grey colors -$color-master-light:mix($color-master, #fff, 16%) !default; -$color-master-lighter:mix($color-master, #fff, 9.5%) !default; -$color-master-lightest:mix($color-master, #fff, 3%) !default; +$color-master-light:color.mix($color-master, #fff, 16%) !default; +$color-master-lighter:color.mix($color-master, #fff, 9.5%) !default; +$color-master-lightest:color.mix($color-master, #fff, 3%) !default; // Darker Grey colors -$color-master-dark:mix($color-master, #000, 45%) !default; -$color-master-darker:mix($color-master, #000, 27%) !default; -$color-master-darkest:mix($color-master, #000, 18%) !default; +$color-master-dark:color.mix($color-master, #000, 45%) !default; +$color-master-darker:color.mix($color-master, #000, 27%) !default; +$color-master-darkest:color.mix($color-master, #000, 18%) !default; $color-white: #fff !default; $color-black: #000 !default; @@ -42,12 +45,12 @@ $base-font-family: wf_segoe-ui_light,wf_segoe-ui_normal,"Helvetica Neue", Helvet $menu-bezier:.05, .74, .27, .99 !default; $menu-icon-size:40px !default; $color-menu :#2a2e35 !default; -$color-menu-dark :mix($color-menu, #000, 77%) !default; -$color-menu-darker :mix($color-menu, #000, 90%) !default; +$color-menu-dark :color.mix($color-menu, #000, 77%) !default; +$color-menu-darker :color.mix($color-menu, #000, 90%) !default; //Generating Menu font color -$menu-mix-temp : mix($color-menu, #fff, 92%) !default; -$menu :blend-hardlight($menu-mix-temp,#fff) !default; +$menu-mix-temp : color.mix($color-menu, #fff, 92%) !default; +$menu :color2.blend-hardlight($menu-mix-temp,#fff) !default; $color-menu-light :$menu !default; //Menu Font Color $color-menu-link-hover:#fff !default; @@ -105,47 +108,47 @@ $mix-percentage-light: 80% !default; $mix-percentage-lighter: 20% !default; //Lighter colors -$color-success-light: mix($color-success, $color-white, $mix-percentage-light) !default; -$color-success-lighter: mix($color-success, $color-white, $mix-percentage-lighter) !default; +$color-success-light: color.mix($color-success, $color-white, $mix-percentage-light) !default; +$color-success-lighter: color.mix($color-success, $color-white, $mix-percentage-lighter) !default; -$color-complete-light: mix($color-complete, $color-white, $mix-percentage-light) !default; -$color-complete-lighter: mix($color-complete, $color-white, $mix-percentage-lighter) !default; +$color-complete-light: color.mix($color-complete, $color-white, $mix-percentage-light) !default; +$color-complete-lighter: color.mix($color-complete, $color-white, $mix-percentage-lighter) !default; -$color-primary-light: mix($color-primary, $color-white, $mix-percentage-light) !default; -$color-primary-lighter: mix($color-primary, $color-white, $mix-percentage-lighter) !default; +$color-primary-light: color.mix($color-primary, $color-white, $mix-percentage-light) !default; +$color-primary-lighter: color.mix($color-primary, $color-white, $mix-percentage-lighter) !default; -$color-warning-light: mix($color-warning, $color-white, $mix-percentage-light) !default; -$color-warning-lighter: mix($color-warning, $color-white, $mix-percentage-lighter) !default; +$color-warning-light: color.mix($color-warning, $color-white, $mix-percentage-light) !default; +$color-warning-lighter: color.mix($color-warning, $color-white, $mix-percentage-lighter) !default; -$color-danger-light: mix($color-danger, $color-white, $mix-percentage-light) !default; -$color-danger-lighter: mix($color-danger, $color-white, $mix-percentage-lighter) !default; +$color-danger-light: color.mix($color-danger, $color-white, $mix-percentage-light) !default; +$color-danger-lighter: color.mix($color-danger, $color-white, $mix-percentage-lighter) !default; -$color-info-light: mix($color-info, $color-white, $mix-percentage-light) !default; -$color-info-lighter: mix($color-info, $color-white, $mix-percentage-lighter) !default; +$color-info-light: color.mix($color-info, $color-white, $mix-percentage-light) !default; +$color-info-lighter: color.mix($color-info, $color-white, $mix-percentage-lighter) !default; //Darker colors -$color-success-dark: mix($color-success, $color-black, $mix-percentage-dark) !default; -$color-success-darker: mix($color-success, $color-black, $mix-percentage-darker) !default; +$color-success-dark: color.mix($color-success, $color-black, $mix-percentage-dark) !default; +$color-success-darker: color.mix($color-success, $color-black, $mix-percentage-darker) !default; -$color-complete-dark: mix($color-complete, $color-black, $mix-percentage-dark) !default; -$color-complete-darker: mix($color-complete, $color-black, $mix-percentage-darker) !default; +$color-complete-dark: color.mix($color-complete, $color-black, $mix-percentage-dark) !default; +$color-complete-darker: color.mix($color-complete, $color-black, $mix-percentage-darker) !default; -$color-primary-dark: mix($color-primary, $color-black, $mix-percentage-dark) !default; -$color-primary-darker: mix($color-primary, $color-black, $mix-percentage-darker) !default; +$color-primary-dark: color.mix($color-primary, $color-black, $mix-percentage-dark) !default; +$color-primary-darker: color.mix($color-primary, $color-black, $mix-percentage-darker) !default; -$color-warning-dark: mix($color-warning, $color-black, $mix-percentage-dark) !default; -$color-warning-darker: mix($color-warning, $color-black, $mix-percentage-darker) !default; +$color-warning-dark: color.mix($color-warning, $color-black, $mix-percentage-dark) !default; +$color-warning-darker: color.mix($color-warning, $color-black, $mix-percentage-darker) !default; -$color-danger-dark: mix($color-danger, $color-black, $mix-percentage-dark) !default; -$color-danger-darker: mix($color-danger, $color-black, $mix-percentage-darker) !default; +$color-danger-dark: color.mix($color-danger, $color-black, $mix-percentage-dark) !default; +$color-danger-darker: color.mix($color-danger, $color-black, $mix-percentage-darker) !default; -$color-info-dark: mix($color-info, $color-black, $mix-percentage-dark) !default; -$color-info-darker: mix($color-info, $color-black, $mix-percentage-darker) !default; +$color-info-dark: color.mix($color-info, $color-black, $mix-percentage-dark) !default; +$color-info-darker: color.mix($color-info, $color-black, $mix-percentage-darker) !default; // Email colors // $sidebar-background-color : $color-menu-dark !default; -$_sidebar-background-color: blend-multiply($color-menu-light, $color-menu-light); -$sidebar-background-color : mix($_sidebar-background-color , #000, 80%); +$_sidebar-background-color: color2.blend-multiply($color-menu-light, $color-menu-light); +$sidebar-background-color : color.mix($_sidebar-background-color , #000, 80%); $secondary-sidebar-width : 250px; // Components diff --git a/resources/assets/sass/app.scss b/resources/assets/sass/app.scss new file mode 100644 index 00000000..55449f59 --- /dev/null +++ b/resources/assets/sass/app.scss @@ -0,0 +1,14 @@ +// Vendor CSS +@import 'node_modules/font-awesome/css/font-awesome.min'; +@import 'node_modules/flag-icon-css/css/flag-icon.min'; +@import 'node_modules/jquery.scrollbar/jquery.scrollbar'; +@import 'node_modules/select2/dist/css/select2.min'; +@import 'node_modules/dropzone/dist/dropzone'; +@import 'node_modules/bootstrap-datepicker/dist/css/bootstrap-datepicker3'; +@import 'node_modules/noty/lib/noty'; +@import 'node_modules/animate.css/animate'; +@import 'node_modules/intro.js/introjs'; +@import 'node_modules/bootstrap/dist/css/bootstrap.min'; + +// Source CSS +@import 'main'; diff --git a/resources/assets/sass/main.scss b/resources/assets/sass/main.scss index 6c8a8703..5be617d6 100644 --- a/resources/assets/sass/main.scss +++ b/resources/assets/sass/main.scss @@ -23,18 +23,14 @@ 20. Animation -------------------------------------------------------------------*/ // Color functions -@import "color"; +@use "color"; // Import Vars -@import "var"; +@use "var"; // Mixins tools -@import "mixins"; +@use "mixins"; // Includes of Modules -@import "modules"; +@use "modules"; // Responsive Util -@import "responsive"; - - - - - - +@use "responsive"; +// Import custom +@use "custom"; \ No newline at end of file diff --git a/resources/assets/sass/modules/_alerts.scss b/resources/assets/sass/modules/_alerts.scss index aecd1a83..8fcf0813 100644 --- a/resources/assets/sass/modules/_alerts.scss +++ b/resources/assets/sass/modules/_alerts.scss @@ -1,3 +1,6 @@ +@use "../mixins"; +@use "../var"; + /*------------------------------------------------------------------ [7. Alerts] @@ -10,7 +13,7 @@ border-radius: 3px; font-size: 13px; border-width:0; - @include transition(all 0.2s linear 0s); + @include mixins.transition(all 0.2s linear 0s); &.bordered{ border-width: 1px; } @@ -34,7 +37,7 @@ } } .close { - background: url("#{$base-img-url}/icons/noti-cross.png") no-repeat scroll 0 0 transparent; + background: url("#{var.$base-img-url}/icons/noti-cross.png") no-repeat scroll 0 0 transparent; background-position: -9px -10px; width: 10px; height: 9px; @@ -55,38 +58,38 @@ */ .alert-danger, .alert-error{ - background-color: $color-danger-lighter; - color: $color-danger-darker; - border-color: $color-danger-darker; + background-color: var.$color-danger-lighter; + color: var.$color-danger-darker; + border-color: var.$color-danger-darker; .close { background-position: -95px -10px !important; } } .alert-warning{ - background-color: $color-warning-lighter; - color: $color-warning-darker; - border-color: $color-warning-darker; + background-color: var.$color-warning-lighter; + color: var.$color-warning-darker; + border-color: var.$color-warning-darker; } .alert-info{ - background-color: $color-complete-lighter; - color: $color-complete-darker; - border-color: $color-complete-darker; + background-color: var.$color-complete-lighter; + color: var.$color-complete-darker; + border-color: var.$color-complete-darker; .close { background-position: -67px -10px !important; } } .alert-success{ - background-color: $color-success-lighter; - color: $color-success-darker; - border-color: $color-success-darker; + background-color: var.$color-success-lighter; + color: var.$color-success-darker; + border-color: var.$color-success-darker; .close { background-position: -38px -10px !important; } } .alert-default{ background-color: #fff; - color: $color-master; - border-color: $color-master-light; + color: var.$color-master; + border-color: var.$color-master-light; .close { background-position: -67px -10px !important; } diff --git a/resources/assets/sass/modules/_animation.scss b/resources/assets/sass/modules/_animation.scss index ebcb576a..bffb4acc 100644 --- a/resources/assets/sass/modules/_animation.scss +++ b/resources/assets/sass/modules/_animation.scss @@ -1,4 +1,6 @@ -@include keyframe(slide-out-up) { +@use "../mixins"; + +@include mixins.keyframe(slide-out-up) { 0% { transform: translate(0,0); } @@ -8,7 +10,7 @@ } } -@include keyframe(slide-out-down) { +@include mixins.keyframe(slide-out-down) { 0% { transform: translate(0,0); } @@ -18,7 +20,7 @@ } } -@include keyframe(slide-out-left) { +@include mixins.keyframe(slide-out-left) { 0% { transform: translate(0,0); } @@ -28,7 +30,7 @@ } } -@include keyframe(slide-out-right) { +@include mixins.keyframe(slide-out-right) { 0% { transform: translate(0,0); } @@ -38,7 +40,7 @@ } } -@include keyframe(slide-in-up) { +@include mixins.keyframe(slide-in-up) { 0% { transform: translate(0,-100%); } @@ -48,7 +50,7 @@ } } -@include keyframe(slide-in-down) { +@include mixins.keyframe(slide-in-down) { 0% { transform: translate(0,100%); } @@ -58,7 +60,7 @@ } } -@include keyframe(slide-in-left) { +@include mixins.keyframe(slide-in-left) { 0% { transform: translate(-100%,0); } @@ -68,7 +70,7 @@ } } -@include keyframe(slide-in-right) { +@include mixins.keyframe(slide-in-right) { 0% { transform: translate(100%,0); } @@ -78,7 +80,7 @@ } } -@include keyframe(fade-in) { +@include mixins.keyframe(fade-in) { from { opacity: 0; } @@ -87,7 +89,7 @@ } } -@include keyframe(fade-out) { +@include mixins.keyframe(fade-out) { from { opacity: 1; } @@ -100,13 +102,13 @@ @each $direction in ('up', 'down', 'left', 'right') { .slide-#{$type}-#{$direction}{ - @include animation(slide-#{$type}-#{$direction}); + @include mixins.animation(slide-#{$type}-#{$direction}); } } } @each $type in ('in', 'out') { .fade-#{$type} { - @include animation(fade-#{$type} ease-in); + @include mixins.animation(fade-#{$type} ease-in); } } \ No newline at end of file diff --git a/resources/assets/sass/modules/_buttons.scss b/resources/assets/sass/modules/_buttons.scss index e7b281f8..36c5a428 100644 --- a/resources/assets/sass/modules/_buttons.scss +++ b/resources/assets/sass/modules/_buttons.scss @@ -1,3 +1,9 @@ +@use "../mixins"; +@use "../var"; +@use "z_index"; + +@use "sass:color"; + /*------------------------------------------------------------------ [6. Buttons] */ @@ -24,21 +30,21 @@ &:active:focus, &:active:hover, .show .dropdown-toggle#{&} { - background-color: mix($background-color, $color-black, $mix-percentage-dark) !important; - border-color: mix($background-color, $color-black, $mix-percentage-dark) !important; + background-color: color.mix($background-color, var.$color-black, var.$mix-percentage-dark) !important; + border-color: color.mix($background-color, var.$color-black, var.$mix-percentage-dark) !important; color:$text-color; } &.hover, &:hover, .show .dropdown-toggle#{&} { - background-color: mix($background-color, $color-white, $mix-percentage-light); - border-color: mix($background-color, $color-white, $mix-percentage-light); + background-color: color.mix($background-color, var.$color-white, var.$mix-percentage-light); + border-color: color.mix($background-color, var.$color-white, var.$mix-percentage-light); color: $text-color; } &.active:hover{ - background: mix($background-color, #000, 86%) ; - border-color: mix($background-color, #000, 86%) ; + background: color.mix($background-color, #000, 86%) ; + border-color: color.mix($background-color, #000, 86%) ; } &.disabled, @@ -70,27 +76,27 @@ -webkit-font-feature-settings: "kern" 1; -moz-font-feature-settings: "kern" 1; margin-bottom: 0; - border: 1px solid $color-master-lighter; + border: 1px solid var.$color-master-lighter; text-align: center; vertical-align: middle; cursor: pointer; - @include border-radius(3px); + @include mixins.border-radius(3px); background-image: none !important; - color: $color-master; - background-color: $color-white ; + color: var.$color-master; + background-color: var.$color-white ; text-shadow: none; box-shadow: none; line-height: 21px; position: relative; transition: color 0.1s linear 0s,background-color 0.1s linear 0s,opacity 0.2s linear 0s !important; - padding: 6px $padding-base-horizontal; + padding: 6px var.$padding-base-horizontal; &:hover{ background-color: #fafafa; - border: 1px solid fade-out($color-master,.73); + border: 1px solid color.adjust(var.$color-master,$alpha: -.73); color: #333; } &.active{ - border-color: $color-master-light; + border-color: var.$color-master-light; background: #fff; color: #333; } @@ -134,78 +140,78 @@ Alternate buttons */ .btn-primary { - @include button($color-white, $color-primary, $color-primary); + @include button(var.$color-white, var.$color-primary, var.$color-primary); } .btn-success { - @include button($color-white, $color-success, $color-success); + @include button(var.$color-white, var.$color-success, var.$color-success); } .btn-complete{ - @include button($color-white, $color-complete, $color-complete); + @include button(var.$color-white, var.$color-complete, var.$color-complete); } .btn-info { - @include button($color-white, $color-info, $color-info); + @include button(var.$color-white, var.$color-info, var.$color-info); } .btn-warning { - @include button($color-white, $color-warning, $color-warning); + @include button(var.$color-white, var.$color-warning, var.$color-warning); } .btn-danger { - @include button($color-white, $color-danger, $color-danger); + @include button(var.$color-white, var.$color-danger, var.$color-danger); } .btn-outline-primary { - @include button($color-primary, transparent, $color-primary); + @include button(var.$color-primary, transparent, var.$color-primary); &:hover{ - @include button($color-white, $color-primary, $color-primary); + @include button(var.$color-white, var.$color-primary, var.$color-primary); } } .btn-outline-success { - @include button($color-success, transparent, $color-success); + @include button(var.$color-success, transparent, var.$color-success); &:hover{ - @include button($color-white, $color-success, $color-success); + @include button(var.$color-white, var.$color-success, var.$color-success); } } .btn-outline-complete{ - @include button($color-complete, transparent, $color-complete); + @include button(var.$color-complete, transparent, var.$color-complete); &:hover{ - @include button($color-white, $color-complete, $color-complete); + @include button(var.$color-white, var.$color-complete, var.$color-complete); } } .btn-outline-info { - @include button($color-info, transparent, $color-info); + @include button(var.$color-info, transparent, var.$color-info); &:hover{ - @include button($color-white, $color-info, $color-info); + @include button(var.$color-white, var.$color-info, var.$color-info); } } .btn-outline-warning { - @include button($color-warning, transparent, $color-warning); + @include button(var.$color-warning, transparent, var.$color-warning); &:hover{ - @include button($color-white, $color-warning, $color-warning); + @include button(var.$color-white, var.$color-warning, var.$color-warning); } } .btn-outline-danger { - @include button($color-danger, transparent, $color-danger); + @include button(var.$color-danger, transparent, var.$color-danger); &:hover{ - @include button($color-white, $color-danger, $color-danger); + @include button(var.$color-white, var.$color-danger, var.$color-danger); } } .btn-default, .btn-default:focus{ color: #5e5e5e; - background-color: $color-white; - border-color: $color-master-lighter; + background-color: var.$color-white; + border-color: var.$color-master-lighter; } .btn-default { &.active, &:active, &.active:focus, &:active:focus, &:active:hover{ - background-color: $color-master-lighter; - border-color: $color-master-light; - color:$color-master-dark; + background-color: var.$color-master-lighter; + border-color: var.$color-master-light; + color:var.$color-master-dark; } &.hover, &:hover{ - background-color: $color-master-lightest; - border-color: fade-out($color-master,.73); - color: $color-master-darker; + background-color: var.$color-master-lightest; + border-color: color.adjust(var.$color-master,$alpha: -.73); + color: var.$color-master-darker; } &.active:hover{ - background: mix($color-white, #000, 94%) ; + background: color.mix(var.$color-white, #000, 94%) ; } } @@ -246,20 +252,20 @@ Button Sizes */ .btn-lg, .btn-group-lg > .btn{ - padding-left: $padding-lg-horizontal; - padding-right: $padding-lg-horizontal; + padding-left: var.$padding-lg-horizontal; + padding-right: var.$padding-lg-horizontal; line-height: 22px; padding-top: 10px; padding-bottom: 10px; } .btn-sm, .btn-group-sm > .btn{ - padding-left: $padding-sm-horizontal; - padding-right: $padding-sm-horizontal; + padding-left: var.$padding-sm-horizontal; + padding-right: var.$padding-sm-horizontal; font-size: 11.9px; line-height: 20px; } .btn-xs, .btn-group-xs > .btn{ - padding: $padding-xs-vertical $padding-xs-horizontal; + padding: var.$padding-xs-vertical var.$padding-xs-horizontal; font-size: 10.5px; } .btn-cons { @@ -303,13 +309,13 @@ Rounded buttons &.dropdown-toggle { border-color: transparent !important; background: transparent !important; - z-index: $zIndex-navbar - 9 !important; + z-index: z_index.$zIndex-navbar - 9 !important; } } .dropdown-menu { opacity: 1; transform: scale(1, 1); - z-index: $zIndex-dropdown; + z-index: z_index.$zIndex-dropdown; .dropdown-item { visibility: visible; } @@ -335,22 +341,22 @@ Rounded buttons height: 42px; } & > .btn-primary + .dropdown-menu:after{ - background-color: $color-primary; + background-color: var.$color-primary; } & > .btn-success + .dropdown-menu:after{ - background-color: $color-success; + background-color: var.$color-success; } & > .btn-complete + .dropdown-menu:after{ - background-color: $color-complete; + background-color: var.$color-complete; } & > .btn-warning + .dropdown-menu:after{ - background-color: $color-warning; + background-color: var.$color-warning; } & > .btn-danger + .dropdown-menu:after{ - background-color: $color-danger; + background-color: var.$color-danger; } & > .btn-info + .dropdown-menu:after{ - background-color: $color-info; + background-color: var.$color-info; } } @@ -397,9 +403,9 @@ Rounded buttons } .btn.dropdown-toggle{ text-align: left; - padding-right: $padding-base-horizontal + 10px; + padding-right: var.$padding-base-horizontal + 10px; &.btn-lg{ - padding-right: $padding-lg-horizontal + 14px; + padding-right: var.$padding-lg-horizontal + 14px; &:after{ right: 26px; } @@ -412,7 +418,7 @@ Rounded buttons } } &.btn-sm{ - padding-right: $padding-sm-horizontal + 10px; + padding-right: var.$padding-sm-horizontal + 10px; &:after{ right: 16px; } @@ -425,7 +431,7 @@ Rounded buttons } } &.btn-xs{ - padding-right: $padding-xs-horizontal + 12px; + padding-right: var.$padding-xs-horizontal + 12px; &:after{ right: 8px; } @@ -460,7 +466,7 @@ Rounded buttons opacity: 0; transform: scale(1, 0); transform-origin: center top 0; - @include transition(all 170ms cubic-bezier(.05, .74, .27, .99) 0s); + @include mixins.transition(all 170ms cubic-bezier(.05, .74, .27, .99) 0s); z-index: -1; &:after{ content: ""; @@ -468,7 +474,7 @@ Rounded buttons height: 1px; left: 0; top: 42px; - background: $color-master-light; + background: var.$color-master-light; width: 100%; } .dropdown-item { @@ -492,16 +498,16 @@ Rounded buttons float: left; list-style: none; text-shadow: none; - @include box-shadow(0px 0px 5px fade-out($color-master, .8)); + @include mixins.box-shadow(0px 0px 5px color.adjust(var.$color-master, $alpha: -.8)); border: none; border-radius: 3px; font-size: 13px; margin: 0; - background:$color-master-lightest; + background:var.$color-master-lightest; min-width: 50px; - z-index: $zIndex-dropdown !important; + z-index: z_index.$zIndex-dropdown !important; .divider { - background-color: $color-master-light; + background-color: var.$color-master-light; height: 1px; margin: 3px 0; border-bottom: 0px; @@ -509,7 +515,7 @@ Rounded buttons & > .dropdown-item { padding-left: 0px; line-height: 35px; - color: $color-master; + color: var.$color-master; padding: 0 20px; border-radius: 3px; display: block; @@ -517,7 +523,7 @@ Rounded buttons white-space: nowrap; text-align:left; &:hover, &:focus{ - color: $color-master-darker; + color: var.$color-master-darker; text-decoration: none; } &:first-child{ @@ -533,16 +539,16 @@ Rounded buttons &, &:hover, &:focus{ - color: $color-master-darker; + color: var.$color-master-darker; text-decoration: none; - background-color: $color-master-lighter; + background-color: var.$color-master-lighter; } } &.disabled { &, &:hover, &:focus{ - color: lighten($color-master, 20%); + color: color.adjust(var.$color-master, $lightness: 20%, $space: hsl); } &:hover, &:focus{ text-decoration: none; @@ -553,7 +559,7 @@ Rounded buttons } .dropdown-backdrop{ - z-index: $zIndex-dropdownMask; + z-index: z_index.$zIndex-dropdownMask; } /* Animated buttons @@ -562,15 +568,15 @@ Animated buttons .btn-animated{ overflow: hidden; - @include backface-visibility(hidden); - @include transform-style(preserve-3d); + @include mixins.backface-visibility(hidden); + @include mixins.transform-style(preserve-3d); & > span { display: inline-block; width: 100%; height: 100%; - @include backface-visibility(hidden); - @include transition(all 0.2s ease-in-out); - @include transform-style(preserve-3d); + @include mixins.backface-visibility(hidden); + @include mixins.transition(all 0.2s ease-in-out); + @include mixins.transform-style(preserve-3d); } &:before { position: absolute; @@ -578,13 +584,13 @@ Animated buttons width: 100%; font-size: 100%; line-height: 2.5; - @include transition(all 0.2s ease-in-out); + @include mixins.transition(all 0.2s ease-in-out); } &:after{ content: ''; position: absolute; z-index: -1; - @include transition(all 0.2s ease-in-out); + @include mixins.transition(all 0.2s ease-in-out); } &.from-top{ &:before{ @@ -596,7 +602,7 @@ Animated buttons top: 0; } & > span{ - @include translateY(300%); + @include mixins.translateY(300%); } } } @@ -610,7 +616,7 @@ Animated buttons left: 0; } & > span{ - @include translateX(200%); + @include mixins.translateX(200%); } } } @@ -647,10 +653,10 @@ Tag buttons } } &.btn-tag-dark{ - background: $color-master-light; - color:$color-master; + background: var.$color-master-light; + color:var.$color-master; &:hover{ - background: lighten($color-master-light, 2%); + background: color.adjust(var.$color-master-light, $lightness: 2%, $space: hsl); } } &.btn-tag-rounded{ diff --git a/resources/assets/sass/modules/_calendar.scss b/resources/assets/sass/modules/_calendar.scss index e2cf1da5..5e4c9602 100644 --- a/resources/assets/sass/modules/_calendar.scss +++ b/resources/assets/sass/modules/_calendar.scss @@ -1,3 +1,6 @@ +@use "../mixins"; +@use "../var"; + /*------------------------------------------------------------------ [21. Calendar App] */ @@ -34,7 +37,7 @@ Events / .event-container display: none; } .calendar-container{ - border-top: 1px solid $color-master-light; + border-top: 1px solid var.$color-master-light; padding-top: 0; height:calc(100% - 169px); .view .tble{ @@ -47,7 +50,7 @@ Events / .event-container } .calendar-header{ height: 43px; - background-color:$color-master-lightest; + background-color:var.$color-master-lightest; line-height: 43px; padding-left:60px; & > .drager{ @@ -178,10 +181,10 @@ Events / .event-container margin: 6px; border-radius:99px; &.current-date{ - background-color: $color-master-light; + background-color: var.$color-master-light; } &.active{ - background-color: $color-success; + background-color: var.$color-success; .day > a{ font-weight: bold; opacity: 1; @@ -220,7 +223,7 @@ Events / .event-container font-size: 8px; line-height: 6px; text-align: center; - color:$color-success; + color:var.$color-success; } } } @@ -262,16 +265,16 @@ Events / .event-container } } &.not{ - background-color: $color-master-lightest; + background-color: var.$color-master-lightest; } &.drop-target{ .cell-inner{ - background-color: $color-master-lightest; + background-color: var.$color-master-lightest; } } .cell-inner:only-child, .cell-inner{ height: 100%; - border-bottom: 1px solid $color-master-light; + border-bottom: 1px solid var.$color-master-light; position: relative; } .month-date{ @@ -288,10 +291,10 @@ Events / .event-container z-index:1; border-radius:99px; &.current-date{ - background-color: $color-master-light; + background-color: var.$color-master-light; } &.active{ - background-color: $color-success; + background-color: var.$color-success; font-weight: bold; opacity: 1; color: #fff; @@ -358,7 +361,7 @@ Events / .event-container background: #fff; .tcell{ padding: 10px; - height: $cell-height/2 * 1px; + height: $cell-height*0.5 * 1px; position: relative; .weekday{ font-size: 12px; @@ -378,7 +381,7 @@ Events / .event-container } &:before{ content: ''; - border-bottom: 1px solid $color-master-light; + border-bottom: 1px solid var.$color-master-light; width: calc(100% - 18px); position: absolute; bottom: 0; @@ -405,13 +408,13 @@ Events / .event-container background: #fff; padding: 0 10px; .cell-inner{ - height: $cell-height/2 * 1px; + height: $cell-height*0.5 * 1px; position: relative; &:first-child{ - border-bottom: 1px dotted $color-master-light; + border-bottom: 1px dotted var.$color-master-light; } &:last-child{ - border-bottom: 1px solid $color-master-light; + border-bottom: 1px solid var.$color-master-light; } &:only-child{ height: 40px; @@ -425,7 +428,7 @@ Events / .event-container } } &.disable{ - background-color: $color-master-lightest; + background-color: var.$color-master-lightest; } } } @@ -529,17 +532,17 @@ Events / .event-container &.slot-60{ .tble .trow .tcell .cell-inner{ height: $cell-height * 1px; - border-bottom: 1px solid $color-master-light; + border-bottom: 1px solid var.$color-master-light; } } &.slot-15{ .tble .trow .tcell { - height: 100/4 * 1px; + height: 100*0.25 * 1px; .cell-inner{ - height: 100/4 * 1px; - border-bottom: 1px dotted $color-master-light; + height: 100*0.25 * 1px; + border-bottom: 1px dotted var.$color-master-light; &:last-child{ - border-bottom: 1px solid $color-master-light; + border-bottom: 1px solid var.$color-master-light; } } } @@ -549,7 +552,7 @@ Events / .event-container } } .allday-cell{ - height: $cell-height/2 * 1px; + height: $cell-height*0.5 * 1px; display: inline-block; width: 50px; float:left; @@ -658,7 +661,7 @@ Responsive Util } } .tble .trow .tcell .event-container{ - @include border-radius(99px); + @include mixins.border-radius(99px); position: absolute !important; height: 16px !important; width: 16px !important; @@ -692,7 +695,7 @@ Responsive Util .months-drager{ margin-left:16px; margin-right:36px; - border-right:1px solid $color-master-light; + border-right:1px solid var.$color-master-light; padding-top: 0; } .horizontal-app-menu { diff --git a/resources/assets/sass/modules/_cards.scss b/resources/assets/sass/modules/_cards.scss index 7ff21749..38e09d66 100644 --- a/resources/assets/sass/modules/_cards.scss +++ b/resources/assets/sass/modules/_cards.scss @@ -1,11 +1,16 @@ +@use "sass:color"; +@use "../mixins"; +@use "../var"; +@use "z_index"; + /*------------------------------------------------------------------ [4. Cards] */ .card{ - @include box-shadow(none); - @include border-radius(1px); - @include transition(all .2s ease); + @include mixins.box-shadow(none); + @include mixins.border-radius(1px); + @include mixins.transition(all .2s ease); position: relative; background-color: #fff; margin-bottom: 20px; @@ -14,7 +19,7 @@ background: transparent; border-radius:0px; border-bottom:0px; - padding: $panel-heading-padding; + padding: var.$panel-heading-padding; position: relative; z-index: 3; min-height: 48px; @@ -43,7 +48,7 @@ text-overflow: ellipsis; -webkit-text-stroke:0px; filter: alpha(opacity=40); - @include transition(opacity .3s ease); + @include mixins.transition(opacity .3s ease); & + .card-block{ } @@ -78,28 +83,28 @@ } } &.card-default{ - border:1px solid $panel-border-color; + border:1px solid var.$panel-border-color; //Used for colored panels & >.card-header{ color: #333; } } &.card-bordered{ - border:1px solid fade-out($color-master-light, .3); + border:1px solid color.adjust(var.$color-master-light, $alpha: -.3); } &.card-borderless{ border:none; } &.card-condensed{ .card-header{ - padding: $panel-condensed-heading-padding; + padding: var.$panel-condensed-heading-padding; min-height: 30px; .card-title{ opacity: .4; } } .card-block{ - padding: $panel-condensed-body-padding; + padding: var.$panel-condensed-body-padding; } } &.card-hover{ @@ -115,7 +120,7 @@ &.card-transparent{ background: transparent; border:none; - @include box-shadow(none); + @include mixins.box-shadow(none); .card-block{ background: transparent; } @@ -129,7 +134,7 @@ } } &.card-featured { - @include box-shadow(-1px 1px 3px 0px rgba(121, 129, 135, 0.14)); + @include mixins.box-shadow(-1px 1px 3px 0px rgba(121, 129, 135, 0.14)); width: calc(100% - 50px); float: right; .card-title { @@ -137,7 +142,7 @@ font-family: 'Montserrat'; font-size: 16px; text-transform: uppercase; - color: $color-master-lighter; + color: var.$color-master-lighter; } } @@ -164,11 +169,11 @@ } } .heart { - color: $color-danger; + color: var.$color-danger; } .comment { - color: $color-master; + color: var.$color-master; } } } @@ -177,27 +182,27 @@ height: 38px; margin-left: -39px; float: left; - @include box-shadow( inset -3px 0px 3px 0px rgba(0,0,0,0.14) ); + @include mixins.box-shadow( inset -3px 0px 3px 0px rgba(0,0,0,0.14) ); &.green { - background: $color-complete; + background: var.$color-complete; } &.blue { - background: $color-success; + background: var.$color-success; } } } &.hover-fill:hover{ - background:$color-master-lighter; + background:var.$color-master-lighter; } &.hover-stroke{ &:hover{ - border:1px solid $color-master-light; + border:1px solid var.$color-master-light; } } .card-block{ - padding: $panel-padding; + padding: var.$panel-padding; //overflow-y: auto; &.no-padding{ .row{ @@ -215,7 +220,7 @@ margin-top:0px; } &.scrollable{ - margin-bottom: $panel-padding; + margin-bottom: var.$panel-padding; } } } @@ -253,25 +258,25 @@ } .card-maximized{ position: fixed !important; - left: $layout-sidepanel-width-collapsed; - top: $layout-header-height - 1px; + left: var.$layout-sidepanel-width-collapsed; + top: var.$layout-header-height - 1px; bottom: 0; right: 0; - z-index: $zIndex-portlet; + z-index: z_index.$zIndex-portlet; margin: 0; } /* Pages notification holder */ .card .pgn-wrapper{ position: absolute; - z-index: $zIndex-portlet + 2; + z-index: z_index.$zIndex-portlet + 2; } .card-header a:not(.btn){ - color: $color-master !important; + color: var.$color-master !important; opacity: .4; &.card-refresh{ - @include transition(opacity .3s ease); + @include mixins.transition(opacity .3s ease); &.refreshing{ opacity: 1; } @@ -326,17 +331,17 @@ height: 15px; display: block; background-size: cover; - @include transition(opacity .3s ease); + @include mixins.transition(opacity .3s ease); &.fade{ opacity: 0.1; } } .card-icon-refresh-lg-master{ - background-image:url('#{$base-img-url}/progress/progress-circle-lg-master-static.svg'); + background-image:url('#{var.$base-img-url}/progress/progress-circle-lg-master-static.svg'); } .card-icon-refresh-lg-white{ - background-image:url('#{$base-img-url}/progress/progress-circle-lg-white-static.svg'); + background-image:url('#{var.$base-img-url}/progress/progress-circle-lg-white-static.svg'); } .card-icon-refresh-lg-master-animated, @@ -346,16 +351,16 @@ display: block; background-size: cover; opacity: 0; - @include transition(opacity .3s ease); + @include mixins.transition(opacity .3s ease); &.active{ opacity: 1 } } .card-icon-refresh-lg-master-animated{ - background-image:url('#{$base-img-url}/progress/progress-circle-lg-master.svg'); + background-image:url('#{var.$base-img-url}/progress/progress-circle-lg-master.svg'); } .card-icon-refresh-lg-white-animated{ - background-image:url('#{$base-img-url}/progress/progress-circle-lg-white.svg'); + background-image:url('#{var.$base-img-url}/progress/progress-circle-lg-white.svg'); } @@ -385,8 +390,8 @@ } } .sortable-box-placeholder { - background-color: $color-master-lighter; - border: 1px dashed $color-master-light; + background-color: var.$color-master-lighter; + border: 1px dashed var.$color-master-light; display: block; margin-top: 0px !important; margin-bottom: 24px !important; diff --git a/resources/assets/sass/modules/_charts.scss b/resources/assets/sass/modules/_charts.scss index efe7c803..eb77b43c 100644 --- a/resources/assets/sass/modules/_charts.scss +++ b/resources/assets/sass/modules/_charts.scss @@ -1,3 +1,7 @@ +@use "sass:color"; +@use "../color" as color2; +@use "../var"; + /*------------------------------------------------------------------ [17. Charts] */ @@ -49,7 +53,7 @@ border-radius: 100px; } thead .nv-pointer-events-none strong{ - color: lighten($color-master,30%); + color: color.adjust(var.$color-master,$lightness: 30%); } .nv-pointer-events-none{ @@ -58,7 +62,7 @@ .value.nv-pointer-events-none{ font-weight: normal; font-size: 11px; - color: lighten($color-master,30%); + color: color.adjust(var.$color-master,$lightness: 30%); } } .nvtooltip table{ @@ -97,7 +101,7 @@ } .tick text, .nvd3 .nv-axis .nv-axisMaxMin text{ - fill: fade($color-master, 50%); + fill: color2.fade(var.$color-master, 50%); font-family: "Montserrat"; font-size: 11px; text-transform: uppercase; @@ -120,25 +124,25 @@ .nvd3 .nv-groups path.nv-line, .nvd3.nv-line .nvd3.nv-scatter .nv-groups .nv-point { .line-chart[data-line-color="master"] &{ - stroke: $color-master; + stroke: var.$color-master; } .line-chart[data-line-color="success"] &{ - stroke: $color-success; + stroke: var.$color-success; } .line-chart[data-line-color="primary"] &{ - stroke: $color-primary; + stroke: var.$color-primary; } .line-chart[data-line-color="info"] &{ - stroke: $color-info; + stroke: var.$color-info; } .line-chart[data-line-color="complete"] &{ - stroke: $color-complete; + stroke: var.$color-complete; } .line-chart[data-line-color="warning"] &{ - stroke: $color-warning; + stroke: var.$color-warning; } .line-chart[data-line-color="danger"] &{ - stroke: $color-danger; + stroke: var.$color-danger; } .line-chart[data-line-color="white"] &{ stroke: #fff; @@ -154,25 +158,25 @@ */ .nvd3 .nv-groups path.nv-area{ .line-chart[data-area-color="master"] &{ - fill: $color-master; + fill: var.$color-master; } .line-chart[data-area-color="success"] &{ - fill: $color-success; + fill: var.$color-success; } .line-chart[data-area-color="info"] &{ - fill: $color-info; + fill: var.$color-info; } .line-chart[data-area-color="complete"] &{ - fill: $color-complete; + fill: var.$color-complete; } .line-chart[data-area-color="primary"] &{ - fill: $color-primary; + fill: var.$color-primary; } .line-chart[data-area-color="warning"] &{ - fill: $color-warning; + fill: var.$color-warning; } .line-chart[data-area-color="danger"] &{ - fill: $color-danger; + fill: var.$color-danger; } .line-chart[data-area-color="white"] &{ fill: #fff; @@ -187,25 +191,25 @@ */ .nvd3.nv-line .nvd3.nv-scatter .nv-groups .nv-point{ .line-chart[data-point-color="master"] &{ - fill : $color-master; + fill : var.$color-master; } .line-chart[data-point-color="success"] &{ - fill : $color-success; + fill : var.$color-success; } .line-chart[data-point-color="info"] &{ - fill : $color-info; + fill : var.$color-info; } .line-chart[data-point-color="complete"] &{ - fill : $color-complete; + fill : var.$color-complete; } .line-chart[data-point-color="primary"] &{ - fill : $color-primary; + fill : var.$color-primary; } .line-chart[data-point-color="warning"] &{ - fill : $color-warning; + fill : var.$color-warning; } .line-chart[data-point-color="danger"] &{ - fill : $color-danger; + fill : var.$color-danger; } .line-chart[data-point-color="white"] &{ fill : #fff; diff --git a/resources/assets/sass/modules/_chat.scss b/resources/assets/sass/modules/_chat.scss index cd656096..b858c88d 100644 --- a/resources/assets/sass/modules/_chat.scss +++ b/resources/assets/sass/modules/_chat.scss @@ -1,3 +1,6 @@ +@use "sass:color"; +@use "../var"; + /*------------------------------------------------------------------ [3. Chat] */ @@ -35,20 +38,20 @@ $alert-list-height:45px; margin: 0; } &.from-me { - background:$color-complete-lighter; - color:$color-master-dark; + background:var.$color-complete-lighter; + color:var.$color-master-dark; opacity: 0.8; float: right; border: 1px solid rgba(0, 0, 0, 0.07); } &.from-them { - color:$color-master-dark; + color:var.$color-master-dark; opacity: 0.8; - background:$color-master-lighter; + background:var.$color-master-lighter; position:relative; opacity: 0.8; float: left; - border: 1px solid mix($color-complete-darker, #fff, 7%); + border: 1px solid color.mix(var.$color-complete-darker, #fff, 7%); } } diff --git a/resources/assets/sass/modules/_email.scss b/resources/assets/sass/modules/_email.scss index 0ffa7936..ccb8593e 100644 --- a/resources/assets/sass/modules/_email.scss +++ b/resources/assets/sass/modules/_email.scss @@ -1,3 +1,6 @@ +@use "../var"; +@use "z_index"; + /*------------------------------------------------------------------ [20. Email App] */ @@ -12,8 +15,8 @@ right: 0; bottom: 0; height: 50px; - background: $color-white; - border-top: 1px solid $color-master-lighter; + background: var.$color-white; + border-top: 1px solid var.$color-master-lighter; z-index: 101; .compose-email{ font-size: 24px; @@ -27,13 +30,13 @@ height: 100%; background: #fff; .email-toolbar-wrapper .wysihtml5-toolbar{ - background: $color-master-lighter; - border-bottom:1px solid $color-master-light; + background: var.$color-master-lighter; + border-bottom:1px solid var.$color-master-light; position: relative; border-top: none; } .email-body-wrapper{ - border-bottom:1px solid $color-master-light; + border-bottom:1px solid var.$color-master-light; margin-bottom: 20px; } .bootstrap-tagsinput{ @@ -58,7 +61,7 @@ top: 0; width: 100%; height: 50px; - z-index: $zIndex-navbar - 1; + z-index: z_index.$zIndex-navbar - 1; } .email-content{ margin:0 auto; @@ -72,17 +75,17 @@ .sender{ .name{ font-size: 15px; - color: $color-info; + color: var.$color-info; } .datetime{ - color: $color-master; + color: var.$color-master; opacity: .45; font-family: arial; } } .subject{ font-family: arial; - color: $color-info; + color: var.$color-info; font-size:15.2px; line-height: 17px; } @@ -94,7 +97,7 @@ } .email-content-body p{ line-height: 23px; - color: $body-color; + color: var.$body-color; letter-spacing: 0.001em; } .email-reply{ @@ -117,7 +120,7 @@ .header-wrapper-email{ font-size: 14.92px; .dropdown > .btn{ - color:$color-complete; + color:var.$color-complete; } .btn:hover{ text-decoration: none; diff --git a/resources/assets/sass/modules/_form_elements.scss b/resources/assets/sass/modules/_form_elements.scss index 3ca1e03a..ac0d8eb2 100644 --- a/resources/assets/sass/modules/_form_elements.scss +++ b/resources/assets/sass/modules/_form_elements.scss @@ -1,3 +1,9 @@ +@use "../mixins"; +@use "../var"; +@use "z_index"; + +@use "sass:color"; + /*------------------------------------------------------------------ [15. Form Elements] */ @@ -19,18 +25,18 @@ // Set the border and box shadow on specific inputs to match .form-control { border-color: $border-color; - @include box-shadow(none); // Redeclare so transitions work + @include mixins.box-shadow(none); // Redeclare so transitions work &:focus { - border-color: darken($border-color, 10%); + border-color: color.adjust($border-color, $lightness: -10%, $space: hsl); //$shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten($border-color, 20%); - @include box-shadow(none); + @include mixins.box-shadow(none); } } // Set validation states also for addons .input-group-addon { - background: $color-master-lighter; - border: 1px solid $form-control-border-color; - color: rgba($color-master, .47); + background: var.$color-master-lighter; + border: 1px solid var.$form-control-border-color; + color: rgba(var.$color-master, .47); } // Optional feedback icon .form-control-feedback { @@ -69,7 +75,7 @@ input[type="checkbox"] { margin-top: 1px 0 0; line-height: normal; cursor: pointer; - @include box-sizing(border-box); + @include mixins.box-sizing(border-box); } select[multiple], @@ -84,7 +90,7 @@ input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus { outline: none; - @include box-shadow(none); + @include mixins.box-shadow(none); } form legend { @@ -92,12 +98,12 @@ form legend { } .form-control { - background-color: $color-white; + background-color: var.$color-white; background-image: none; - border: 1px solid $form-control-border-color; + border: 1px solid var.$form-control-border-color; font-family:Arial, sans-serif; -webkit-appearance: none; - color: $color-master-dark; + color: var.$color-master-dark; outline: 0; height: 35px; padding: 9px 12px; @@ -106,22 +112,22 @@ form legend { font-weight: normal; vertical-align: middle; min-height: 35px; - @include transition(all 0.12s ease); - @include box-shadow(none); - @include border-radius(2px); - @include transition(background 0.2s linear 0s); + @include mixins.transition(all 0.12s ease); + @include mixins.box-shadow(none); + @include mixins.border-radius(2px); + @include mixins.transition(background 0.2s linear 0s); &:focus{ - border-color: rgba($color-black, .10); - background-color:$color-master-lighter; + border-color: rgba(var.$color-black, .10); + background-color:var.$color-master-lighter; outline: 0 !important; - @include box-shadow(none); + @include mixins.box-shadow(none); @include placeholder(inherit, .7); } @include placeholder(inherit, .33); &[disabled], &[readonly], fieldset[disabled] &{ - background: mix($color-master-lighter, #fff, 50%); + background: color.mix(var.$color-master-lighter, #fff, 50%); //color: rgba($color-master, .23); } } @@ -182,8 +188,8 @@ form legend { margin-right: 10px; position: absolute; left: 0px; - background-color: $color-white; - border: 1px solid mix($color-master, #fff, 30%); + background-color: var.$color-white; + border: 1px solid color.mix(var.$color-master, #fff, 30%); } } } @@ -194,7 +200,7 @@ form legend { &:before { bottom: 2.5px; border-radius: 99px; - @include transition(border .3s 0s cubic-bezier(0.455, 0.030, 0.215, 1.330)); + @include mixins.transition(border .3s 0s cubic-bezier(0.455, 0.030, 0.215, 1.330)); } } input[type=radio]:checked { @@ -206,9 +212,9 @@ form legend { } input[type="radio"]:focus{ & + label{ - color:$color-master-dark; + color:var.$color-master-dark; &:before{ - background-color: $color-master-light; + background-color: var.$color-master-light; } } } @@ -226,22 +232,22 @@ form legend { } input[type=radio]:checked + label:before{ .radio.radio-success &{ - border-color: $color-success; + border-color: var.$color-success; } .radio.radio-primary &{ - border-color: $color-primary; + border-color: var.$color-primary; } .radio.radio-info &{ - border-color: $color-info; + border-color: var.$color-info; } .radio.radio-warning &{ - border-color: $color-warning; + border-color: var.$color-warning; } .radio.radio-danger &{ - border-color: $color-danger; + border-color: var.$color-danger; } .radio.radio-complete &{ - border-color: $color-complete; + border-color: var.$color-complete; } } @@ -254,7 +260,7 @@ input[type=radio]:checked + label:before{ input[type=radio][disabled] { & + label { &:after { - background-color: $color-master-light; + background-color: var.$color-master-light; } } } @@ -310,9 +316,9 @@ input[type=radio]:checked + label:before{ } input[type="checkbox"]:focus{ & + label{ - color:$color-master-dark; + color:var.$color-master-dark; &:before{ - background-color: $color-master-light; + background-color: var.$color-master-light; } } } @@ -352,22 +358,22 @@ input[type=radio]:checked + label:before{ input[type=checkbox]:checked + label{ .checkbox.check-success &:before{ - border-color: $color-success; + border-color: var.$color-success; } .checkbox.check-primary &:before{ - border-color: $color-primary; + border-color: var.$color-primary; } .checkbox.check-complete &:before{ - border-color: $color-complete; + border-color: var.$color-complete; } .checkbox.check-warning &:before{ - border-color: $color-warning; + border-color: var.$color-warning; } .checkbox.check-danger &:before{ - border-color: $color-danger; + border-color: var.$color-danger; } .checkbox.check-info &:before{ - border-color: $color-info; + border-color: var.$color-info; } .checkbox.check-success &::after, @@ -376,7 +382,7 @@ input[type=checkbox]:checked + label{ .checkbox.check-warning &::after, .checkbox.check-danger &::after, .checkbox.check-info &::after { - color: $color-white; + color: var.$color-white; } } @@ -385,7 +391,7 @@ input[type=checkbox]:checked + label{ &.transparent{ .input-group-addon{ background-color: transparent; - border-color:$form-control-border-color; + border-color:var.$form-control-border-color; } } } @@ -428,7 +434,7 @@ input[type=checkbox]:checked + label{ */ .form-horizontal { .form-group{ - border-bottom: 1px solid $color-master-light; + border-bottom: 1px solid var.$color-master-light; padding-top: 19px; padding-bottom: 19px; margin-bottom: 0; @@ -444,7 +450,7 @@ input[type=checkbox]:checked + label{ .control-label{ text-align: left; opacity: .42; - @include transition(opacity ease .3s); + @include mixins.transition(opacity ease .3s); } } .radio{ @@ -516,7 +522,7 @@ input[type=checkbox]:checked + label{ */ @media (max-width: 767px) { .form-group-attached .form-group-default{ - border-right-color: $form-control-border-color !important; + border-right-color: var.$form-control-border-color !important; } } @@ -547,14 +553,14 @@ input[type=checkbox]:checked + label{ } .help { font-size: 12px; - color: rgba($color-master, .55); + color: rgba(var.$color-master, .55); } } .form-group-default { background-color: #fff; position: relative; - border: 1px solid $form-control-border-color; + border: 1px solid var.$form-control-border-color; border-radius: 2px; padding-top: 7px; padding-left: 12px; @@ -562,9 +568,9 @@ input[type=checkbox]:checked + label{ padding-bottom: 4px; overflow: hidden; width: 100%; - @include transition(background-color .2s ease); + @include mixins.transition(background-color .2s ease); &.required:after { - color: $color-danger; + color: var.$color-danger; content:"*"; font-family: arial; font-size: 20px; @@ -576,10 +582,10 @@ input[type=checkbox]:checked + label{ input { opacity: .6; } - background:mix($color-master-lighter,#fff,50%); - color: rgba($color-master, .23); + background:color.mix(var.$color-master-lighter,#fff,50%); + color: rgba(var.$color-master, .23); &.focused { - background:mix($color-master-lighter,#fff,50%); + background:color.mix(var.$color-master-lighter,#fff,50%); label { opacity: 1; } @@ -587,14 +593,14 @@ input[type=checkbox]:checked + label{ } &.focused { border-color:rgba(0, 0, 0, 0.1) !important; - background-color:$color-master-lighter; + background-color:var.$color-master-lighter; label { opacity: .4; - @include backface-visibility(hidden); + @include mixins.backface-visibility(hidden); } } &.has-error{ - background-color: rgba($color-danger,.10); + background-color: rgba(var.$color-danger,.10); } &.has-success, &.has-error{ .form-control-feedback{ @@ -624,8 +630,8 @@ input[type=checkbox]:checked + label{ padding-left: 12px; } .input-group-addon{ - height: calc(#{$form-group-height} - 4px); - min-width:calc(#{$form-group-height} - 4px); + height: calc(#{var.$form-group-height} - 4px); + min-width:calc(#{var.$form-group-height} - 4px); border-radius: 0; border:none; } @@ -643,7 +649,7 @@ input[type=checkbox]:checked + label{ margin-top: -4px; background: none; &.error{ - color: $color-master-dark; + color: var.$color-master-dark; } &:focus{ background: none; @@ -656,7 +662,7 @@ input[type=checkbox]:checked + label{ margin: 0; display: block; opacity: 1; - @include transition(opacity .2s ease); + @include mixins.transition(opacity .2s ease); &.label-lg { font-size: 13px; left: 13px; @@ -672,7 +678,7 @@ input[type=checkbox]:checked + label{ } &.fade{ opacity: .5; - @include backface-visibility(hidden); + @include mixins.backface-visibility(hidden); } } & > .input-lg { @@ -791,17 +797,17 @@ input[type=checkbox]:checked + label{ -------------------------------------------------- */ .has-success { - @include form-control-validation($color-success-dark, $color-success-dark, $color-success); + @include form-control-validation(var.$color-success-dark, var.$color-success-dark, var.$color-success); } .has-warning { - @include form-control-validation($color-warning-dark, $color-warning-dark, $color-warning); + @include form-control-validation(var.$color-warning-dark, var.$color-warning-dark, var.$color-warning); } .has-error { - @include form-control-validation($color-danger, $color-danger, $color-danger); + @include form-control-validation(var.$color-danger, var.$color-danger, var.$color-danger); } .error { font-size: 12px; - color: $color-danger; + color: var.$color-danger; display: block; } @@ -809,9 +815,9 @@ input[type=checkbox]:checked + label{ -------------------------------------------------- */ .input-group-addon { - background: $color-master-lighter; - border: 1px solid $form-control-border-color; - color: rgba($color-master, .47); + background: var.$color-master-lighter; + border: 1px solid var.$form-control-border-color; + color: rgba(var.$color-master, .47); font-size: 14px; padding: 6px 9px; display: table-cell; @@ -822,42 +828,42 @@ input[type=checkbox]:checked + label{ top: 1px; } &.primary { - background-color: $color-primary; - border: 1px solid $color-primary; - color: $color-white; - background-color: $color-primary; - border: 1px solid $color-primary; - color: $color-white; + background-color: var.$color-primary; + border: 1px solid var.$color-primary; + color: var.$color-white; + background-color: var.$color-primary; + border: 1px solid var.$color-primary; + color: var.$color-white; .arrow { - color: $color-primary; + color: var.$color-primary; } } &.success { background-color: #0090d9; - color: $color-white; + color: var.$color-white; .arrow { color: #0090d9; } } &.info { background-color: #1f3853; - color: $color-white; + color: var.$color-white; .arrow { color: #1f3853; } } &.warning { background-color: #fbb05e; - color: $color-white; + color: var.$color-white; background-color: #fbb05e; - color: $color-white; + color: var.$color-white; .arrow { color: #fbb05e; } } &.danger { background-color: #f35958; - color: $color-white; + color: var.$color-white; .arrow { color: #f35958; } @@ -907,7 +913,7 @@ https://github.com/eternicode/bootstrap-datepicker border-radius: 2px; font-size: 12px; &:after{ - border-bottom-color: $color-master-lightest; + border-bottom-color: var.$color-master-lightest; } thead { tr { @@ -917,11 +923,11 @@ https://github.com/eternicode/bootstrap-datepicker } .next, .prev{ - color: $color-primary; + color: var.$color-primary; content:''; font-size: 0px; &:before { - color: $color-primary; + color: var.$color-primary; font-family:'FontAwesome'; font-size: 10px; } @@ -933,7 +939,7 @@ https://github.com/eternicode/bootstrap-datepicker content:"\f054"; } .dow { - color: $color-primary; + color: var.$color-primary; text-transform: uppercase; font-size: 11px; } @@ -957,15 +963,15 @@ https://github.com/eternicode/bootstrap-datepicker height: 29px; &.old, &.new{ - color: $color-master-light; + color: var.$color-master-light; } &.day { &:hover { - background: $color-master-lighter; + background: var.$color-master-lighter; } } &.active{ - background-color:$color-primary !important; + background-color:var.$color-primary !important; &, &:hover, &.disabled, @@ -980,9 +986,9 @@ https://github.com/eternicode/bootstrap-datepicker &:hover, &.disabled, &.disabled:hover { - background-color: $color-master-lighter; + background-color: var.$color-master-lighter; background-image: none; - color: $color-white; + color: var.$color-white; } } span { @@ -991,7 +997,7 @@ https://github.com/eternicode/bootstrap-datepicker height: 42px; line-height: 42px; &.active{ - background-color: $color-primary !important; + background-color: var.$color-primary !important; } &.active, &.active:hover, @@ -1006,11 +1012,11 @@ https://github.com/eternicode/bootstrap-datepicker } } &.dropdown-menu{ - border-color: $color-master-light; - color:$color-master; + border-color: var.$color-master-light; + color:var.$color-master; } &.datepicker-dropdown.datepicker-orient-bottom:before{ - border-color: $color-master-light; + border-color: var.$color-master-light; } } @@ -1032,7 +1038,7 @@ https://github.com/m3wolf/bootstrap3-timepicker font-size: 12px; } a.btn, .bootstrap-timepicker-widget input{ - @include border-radius(2px); + @include mixins.border-radius(2px); } &.dropdown-menu{ background: #fff; @@ -1048,10 +1054,10 @@ http://www.dangrossman.info/ background: #fff; .calendar{ .calendar-date{ - border: 1px solid $form-control-border-color; + border: 1px solid var.$form-control-border-color; } .prev, .next, th{ - color: $color-primary; + color: var.$color-primary; text-transform: uppercase; font-size: 11px; } @@ -1061,11 +1067,11 @@ http://www.dangrossman.info/ } } td.active, td.active:hover{ - background-color: $color-primary; - border-color: $color-primary; + background-color: var.$color-primary; + border-color: var.$color-primary; } td.in-range{ - background:$color-primary-lighter; + background:var.$color-primary-lighter; } } /* Select2 @@ -1087,7 +1093,7 @@ select.full-width + .select2-container { .select2-selection { background-image: none; border-radius: 2px; - border: 1px solid $form-control-border-color !important; + border: 1px solid var.$form-control-border-color !important; padding: 2px 9px; transition: border 0.2s linear 0s; .select2-selection__rendered { @@ -1102,7 +1108,7 @@ select.full-width + .select2-container { left:auto; background: transparent; border-left: 0px; - @include transition(all 0.3s ease); + @include mixins.transition(all 0.3s ease); } &.select2-selection--single { height: 35px; @@ -1124,7 +1130,7 @@ select.full-width + .select2-container { background-color: transparent; } .select2-results__group{ - color: $color-master-dark; + color: var.$color-master-dark; } } .select2-search input, @@ -1136,19 +1142,19 @@ select.full-width + .select2-container { .select2-dropdown-open.select2-drop-above .select2-choice, .select2-dropdown-open.select2-drop-above .select2-choices { background-image: none !important; - border: 1px solid $form-control-border-color; - background: $color-master-lighter; + border: 1px solid var.$form-control-border-color; + background: var.$color-master-lighter; } .select2-dropdown-open { .select2-choice { .select2-arrow { - @include scale(scale(1, -1)); + @include mixins.scale(scale(1, -1)); } } } .select2-dropdown { - border: 1px solid $form-control-border-color; + border: 1px solid var.$form-control-border-color; border-bottom: none; border-radius: 2px; padding-top: 0px; @@ -1162,7 +1168,7 @@ select.full-width + .select2-container { } .select2-container--open .select2-selection { box-shadow: none; - border: 1px solid $form-control-border-color; + border: 1px solid var.$form-control-border-color; background: transparent; border-top-left-radius: 2px; border-top-right-radius: 2px; @@ -1175,22 +1181,22 @@ select.full-width + .select2-container { padding-right: 8px; padding-top: 4px; input { - background: $color-white !important; + background: var.$color-white !important; vertical-align: baseline; line-height: 28px; border-radius: 2px; border: none; font-size: 12px; - border: 1px solid $form-control-border-color !important; + border: 1px solid var.$form-control-border-color !important; } } .select2-results { margin: 3px 8px 10px 8px; li { - color: $color-master; + color: var.$color-master; &.select2-result-with-children { & > .select2-result-label { - color: $color-master-dark; + color: var.$color-master-dark; &:first-child{ padding-top: 8px; } @@ -1198,15 +1204,15 @@ select.full-width + .select2-container { } } .select2-results__option--highlighted { - background-color: $color-master-lighter !important; + background-color: var.$color-master-lighter !important; border-radius: 3px; - color: $color-master !important; + color: var.$color-master !important; } .select2-no-results, .select2-searching, .select2-selection-limit { background: none; - color: $color-master; + color: var.$color-master; font-size: 12px; padding-left:8px; padding-top: 0px; @@ -1216,21 +1222,21 @@ select.full-width + .select2-container { } .select2-dropdown { - border: 1px solid $form-control-border-color; + border: 1px solid var.$form-control-border-color; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; padding-top: 5px; - z-index: $zIndex-navbar - 10; + z-index: z_index.$zIndex-navbar - 10; box-shadow: 0 4px 5px rgba(0, 0, 0, .15); } .select2-container--open .select2-selection--multiple .select2-selection__choice { - background-color: $color-white !important; + background-color: var.$color-white !important; } .select2-selection--multiple { .select2-selection__rendered { background-image: none; .select2-selection__choice { - background-color: $color-master-light; + background-color: var.$color-master-light; background-image: none; border: none; box-shadow: none; @@ -1254,7 +1260,7 @@ select.full-width + .select2-container { } &.select2-container-active { .select2-choices { - border: 1px solid $form-control-border-color; + border: 1px solid var.$form-control-border-color; box-shadow: none; } } @@ -1290,16 +1296,16 @@ select.full-width + .select2-container { } .ui-select-bootstrap .ui-select-choices-row.active > a{ - background: $color-master-lighter; + background: var.$color-master-lighter; border-radius: 3px; - color: $color-master; + color: var.$color-master; } .ui-select-bootstrap > .ui-select-choices{ background-color: #fff; // box-shadow: 0px 4px 5px rgba(0,​ 0,​ 0,​ 0.15); } .ui-select-choices-group-label{ - color: $color-master-dark; + color: var.$color-master-dark; font-weight: bold; } .modal-open{ @@ -1330,7 +1336,7 @@ select.full-width + .select2-container { position: fixed; right: 0; top: 0; - z-index: $zIndex-dropdownMask; + z-index: z_index.$zIndex-dropdownMask; } /* Bootstrap Tags input https://github.com/timschlechter/bootstrap-tagsinput @@ -1366,23 +1372,23 @@ https://github.com/timschlechter/bootstrap-tagsinput } } .bootstrap-tagsinput { - @include flexbox(); - @include flex-row(); + @include mixins.flexbox(); + @include mixins.flex-row(); -webkit-flex-wrap:wrap; -ms-flex-wrap: wrap; -ms-flex-flow: wrap; flex-flow: wrap; background-color: transparent; - border: 1px solid $form-control-border-color; + border: 1px solid var.$form-control-border-color; border-radius: 4px; padding: 0; padding-top: 5px; padding-right:5px; - @include box-shadow(none); + @include mixins.box-shadow(none); width: 100%; - @include transition(background 0.2s linear 0s); + @include mixins.transition(background 0.2s linear 0s); &.active-element { - background-color: $color-master-light; + background-color: var.$color-master-light; } input { border: none; @@ -1442,12 +1448,12 @@ https://github.com/Waxolunist/bootstrap3-wysihtml5-bower left: 0; right: 0; /*height: 50px;*/ - background: $color-master-lighter; - border-top:1px solid $color-master-light; + background: var.$color-master-lighter; + border-top:1px solid var.$color-master-light; .btn { background: none repeat scroll 0 0 rgba(0, 0, 0, 0); border-color:transparent; - border-right-color: $color-master-light; + border-right-color: var.$color-master-light; color: #A5A5A5; font-size: 16px; font-weight: 600; @@ -1485,9 +1491,9 @@ https://github.com/Waxolunist/bootstrap3-wysihtml5-bower padding-bottom:50px !important; border: 0; &:focus{ - background-color:$color-master-lightest; + background-color:var.$color-master-lightest; outline: 0 !important; - @include box-shadow(none); + @include mixins.box-shadow(none); } } .expand-wysiwyg { @@ -1520,7 +1526,7 @@ https://github.com/Waxolunist/bootstrap3-wysihtml5-bower } } .editor-icon { - background-image: url("#{$base-img-url}/editor_tray.png"); + background-image: url("#{var.$base-img-url}/editor_tray.png"); display: inline-block; height: 40px; margin-top: 5px; @@ -1571,10 +1577,10 @@ https://github.com/HackerWins/summernote */ .summernote-wrapper{ .note-editor{ - border-color:$color-master-light; + border-color:var.$color-master-light; .note-toolbar{ padding: 0; - background-color: $color-master-lighter; + background-color: var.$color-master-lighter; border-bottom: none; .btn-group{ margin: 0 -1px 0 0; @@ -1586,13 +1592,13 @@ https://github.com/HackerWins/summernote line-height: 50px; padding: 0 5px; border-radius: 0; - background-color: $color-master-lighter; + background-color: var.$color-master-lighter; border-color: transparent; - border-right-color: $color-master-light; - border-bottom-color: $color-master-light; - color: $color-master; + border-right-color: var.$color-master-light; + border-bottom-color: var.$color-master-light; + color: var.$color-master; &.active, &:active{ - background-color: $color-master-light; + background-color: var.$color-master-light; } &.dropdown-toggle{ min-width: 61px; @@ -1608,13 +1614,13 @@ https://github.com/HackerWins/summernote .note-resizebar{ border-top-color: transparent; .note-icon-bar{ - border-top: 1px solid $color-master-light; + border-top: 1px solid var.$color-master-light; } } } } .note-popover .popover .popover-content .dropdown-menu li a i, .note-toolbar .dropdown-menu li a i{ - color: $color-primary; + color: var.$color-primary; } } @@ -1628,7 +1634,7 @@ input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #fff inset !important; } input:-webkit-autofill:focus { - -webkit-box-shadow: 0 0 0 1000px $color-master-lighter inset !important; + -webkit-box-shadow: 0 0 0 1000px var.$color-master-lighter inset !important; } input.error:-webkit-autofill, input.error:-webkit-autofill:focus, @@ -1879,8 +1885,8 @@ div.cs-skin-slide::before { .form-group-default .cs-wrapper{ width: 100%; height: 100%; - @include flexbox(); - @include align-items(center); + @include mixins.flexbox(); + @include mixins.align-items(center); } .cs-wrapper{ display: inline-block; @@ -1916,7 +1922,7 @@ div.cs-skin-slide{ background: none; } &.cs-active .cs-backdrop{ - background: $color-master-lightest; + background: var.$color-master-lightest; } } & > span{ @@ -1926,14 +1932,14 @@ div.cs-skin-slide{ z-index: 1; } &.cs-active{ - z-index: $zIndex-navbar - 10; + z-index: z_index.$zIndex-navbar - 10; &:before{ -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1); } .cs-backdrop{ border: transparent; - background: $color-master-lightest; + background: var.$color-master-lightest; box-shadow: -1px 0 1px #ccc, 1px 0 1px #ccc; } } @@ -1970,7 +1976,7 @@ div.cs-skin-slide{ span:hover, &.cs-focus span, &.cs-selected span{ - color: $color-master-dark; + color: var.$color-master-dark; } } } @@ -1978,13 +1984,13 @@ div.cs-skin-slide{ } .cs-backdrop{ background: none repeat scroll 0 0 #fff; - border: 1px solid $form-control-border-color; + border: 1px solid var.$form-control-border-color; bottom: 0; left: 0; position: absolute; right: 0; top: 0; - @include transition(all .3s ease); + @include mixins.transition(all .3s ease); } .cs-skin-slide.cs-active .cs-options li:nth-child(6) { @@ -2027,7 +2033,7 @@ div.cs-skin-slide{ .tt-menu { width: 100%; padding: 3px 10px 3px 3px; - background-color: $color-white; + background-color: var.$color-white; border: 1px solid rgba(0, 0, 0, 0.07); border-top:0; border-bottom-right-radius: 2px; @@ -2037,16 +2043,16 @@ div.cs-skin-slide{ } .tt-suggestion { - color: $color-master; + color: var.$color-master; padding: 3px 7px 4px; padding-left: 26px; line-height: 24px; &:hover { cursor: pointer; - background: $color-master-lighter; + background: var.$color-master-lighter; } &.tt-cursor { - background: $color-master-lighter; + background: var.$color-master-lighter; } p { margin: 0; diff --git a/resources/assets/sass/modules/_layout.scss b/resources/assets/sass/modules/_layout.scss index a7be3a0a..f796c209 100644 --- a/resources/assets/sass/modules/_layout.scss +++ b/resources/assets/sass/modules/_layout.scss @@ -1,3 +1,9 @@ +@use "sass:color"; +@use "../color" as color2; +@use "../mixins"; +@use "../var"; +@use "z_index"; + /*------------------------------------------------------------------ [1. Layouts] */ @@ -11,7 +17,7 @@ body { height: 100%; margin: 0; padding: 0; - background-color: $color-master-lightest; + background-color: var.$color-master-lightest; -moz-osx-font-smoothing: grayscale; &.fixed-header { .header { @@ -34,10 +40,10 @@ body { li{ &:hover{ a{ - color:$color-menu-light; + color:var.$color-menu-light; } .icon-thumbnail{ - color:$color-menu-light !important; + color:var.$color-menu-light !important; } } &.active, &.open{ @@ -62,11 +68,11 @@ body { } .menu-items { .icon-thumbnail{ - @include translate3d(-14px,0,0); + @include mixins.translate3d(-14px,0,0); } } .sidebar-header .sidebar-header-controls{ - @include translate3d(48px,0,0); + @include mixins.translate3d(48px,0,0); } } @@ -80,9 +86,9 @@ body { } } &.dashboard{ - background: $dashboard-background; + background: var.$dashboard-background; .page-container{ - background: $dashboard-background; + background: var.$dashboard-background; } } &.menu-pin{ @@ -120,7 +126,7 @@ body { */ .pace{ .pace-progress{ - background: $color-success; + background: var.$color-success; height: 3px; } .pace-progress-inner{ @@ -130,7 +136,7 @@ body { -webkit-animation: none; animation: none; top: 73px; - background: url('#{$base-img-url}/progress/progress-circle-success.svg') no-repeat top left; + background: url('#{var.$base-img-url}/progress/progress-circle-success.svg') no-repeat top left; background-size: 100% auto; margin: 0 auto; border-width: 0; @@ -149,12 +155,12 @@ body { display: -webkit-flex; display: -ms-flexbox; display: flex; - height: $layout-header-height; + height: var.$layout-header-height; width: 100%; padding: 0 20px 0 0; - z-index: $zIndex-navbar; + z-index: z_index.$zIndex-navbar; background-color: #fff; - border-bottom: 1px solid fade($color-master-light, 70%); + border-bottom: 1px solid color2.fade(var.$color-master-light, 70%); -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; @@ -164,9 +170,9 @@ body { -ms-flex-pack: justify; justify-content: space-between; a{ - color: $color-master; + color: var.$color-master; &:hover,&:active,&:focus{ - color: $color-master; + color: var.$color-master; } } //Used only in Boxed layout @@ -190,7 +196,7 @@ body { } .brand { vertical-align: middle; - width: $layout-sidepanel-width; + width: var.$layout-sidepanel-width; text-align: center; } @@ -199,8 +205,8 @@ body { border-radius:100%; height:12px; width:12px; - background-color:$color-danger; - color:$color-white; + background-color:var.$color-danger; + color:var.$color-white; position:absolute; top:-6px; float:right; @@ -213,12 +219,12 @@ body { .search-link{ display:inline-block; margin-left:15px; - color : $color-master; + color : var.$color-master; opacity: .7; font-size:14px; vertical-align: middle; line-height: 12px; - font-family:$base-font-family; + font-family:var.$base-font-family; i{ margin-right:15px; font-size:16px; @@ -260,7 +266,7 @@ body { } } .navbar-default{ - background-color: $color-white; + background-color: var.$color-white; .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus{ background-color:transparent; } @@ -276,33 +282,33 @@ body { } .navbar-default .navbar-nav>li>a { - color: $color-master; + color: var.$color-master; } /* Main Menu Sidebar ------------------------------------ */ .page-sidebar{ - width: $layout-sidepanel-width; - background-color:$color-menu; - z-index: $zIndex-sidebar; - left:$layout-sidepanel-width-collapsed - $layout-sidepanel-width; + width: var.$layout-sidepanel-width; + background-color:var.$color-menu; + z-index: z_index.$zIndex-sidebar; + left:var.$layout-sidepanel-width-collapsed - var.$layout-sidepanel-width; position: fixed; bottom: 0; top: 0; right: auto; overflow: hidden; --webkit-transition: -webkit-transform 400ms cubic-bezier($menu-bezier); - -moz-transition: -moz-transform 400ms cubic-bezier($menu-bezier); - -o-transition: -o-transform 400ms cubic-bezier($menu-bezier); - transition: transform 400ms cubic-bezier($menu-bezier); +-webkit-transition: -webkit-transform 400ms cubic-bezier(var.$menu-bezier); + -moz-transition: -moz-transform 400ms cubic-bezier(var.$menu-bezier); + -o-transition: -o-transform 400ms cubic-bezier(var.$menu-bezier); + transition: transform 400ms cubic-bezier(var.$menu-bezier); -webkit-backface-visibility: hidden; a,button { - color:$color-menu-light; + color:var.$color-menu-light; &:hover,&:active{ - color:$color-menu-link-hover; + color:var.$color-menu-link-hover; } &:visited,&:focus{ - color:$color-menu-light; + color:var.$color-menu-light; } } .scroll-element{ @@ -311,11 +317,11 @@ body { .sidebar-header{ /* Side-bar header */ display: block; - height: $layout-header-height; - line-height:$layout-header-height; - background-color:$color-menu-darker; - border-bottom: 1px solid mix($color-menu-darker, #000, 90%); - color: $color-white; + height: var.$layout-header-height; + line-height:var.$layout-header-height; + background-color:var.$color-menu-darker; + border-bottom: 1px solid color.mix(var.$color-menu-darker, #000, 90%); + color: var.$color-white; width: 100%; padding: 0 20px; padding-left: 30px; @@ -324,15 +330,15 @@ body { position: relative; .sidebar-header-controls{ display: inline-block; - -webkit-transition: -webkit-transform 0.4s cubic-bezier($menu-bezier); - transition: transform 0.4s cubic-bezier($menu-bezier); + -webkit-transition: -webkit-transform 0.4s cubic-bezier(var.$menu-bezier); + transition: transform 0.4s cubic-bezier(var.$menu-bezier); -webkit-backface-visibility: hidden; } .sidebar-slide-toggle i{ - @include transition(all 0.12s ease); + @include mixins.transition(all 0.12s ease); } .sidebar-slide-toggle.active i{ - @include rotate(-180deg); + @include mixins.rotate(-180deg); } } .close-sidebar{ @@ -349,16 +355,16 @@ body { /* Side-bar Top Slider */ width: 100%; height: 100%; - background-color:$color-menu-darker; + background-color:var.$color-menu-darker; display:block; z-index: 9; - padding: $layout-header-height+20 20px 20px 20px; + padding: var.$layout-header-height+20 20px 20px 20px; &.from-top{ top:-100%; position: absolute; - @include transition(all .2s ease); + @include mixins.transition(all .2s ease); &.show{ - @include translate(0,100%); + @include mixins.translate(0,100%); } } } @@ -389,10 +395,10 @@ body { li{ &:hover, &.open, &.active{ & > .icon-thumbnail{ - color: $color-menu-link-hover; + color: var.$color-menu-link-hover; } & > a{ - color: $color-menu-link-hover; + color: var.$color-menu-link-hover; } } & > a{ @@ -417,8 +423,8 @@ body { font-family: Arial, sans-serif; display: inline-block; padding-left: 32px; - min-height: $menu-icon-size; - line-height: $menu-icon-size; + min-height: var.$menu-icon-size; + line-height: var.$menu-icon-size; font-size: 14px; clear: both; &.open { @@ -436,11 +442,11 @@ body { content: "\f104"; font-weight: 300; text-shadow: none; - @include transition(all 0.12s ease); + @include mixins.transition(all 0.12s ease); } &.open { &:before { - @include rotate(-90deg); + @include mixins.rotate(-90deg); } } } @@ -513,7 +519,7 @@ body { content: "\f104"; font-weight: 300; text-shadow: none; - @include transition(all 0.12s ease); + @include mixins.transition(all 0.12s ease); } &.open { &:before { @@ -524,7 +530,7 @@ body { font-family: FontAwesome; height: auto; font-size: 16px; - @include rotate(-90deg); + @include mixins.rotate(-90deg); font-weight: 300; text-shadow: none; } @@ -541,7 +547,7 @@ body { list-style: none; clear: both; margin: 0 0 10px 0; - background-color: $color-menu-dark; + background-color: var.$color-menu-dark; padding: 18px 0 10px 0; & > li { background: none; @@ -549,7 +555,7 @@ body { margin-top: 1px; &:hover{ & > .icon-thumbnail{ - color: $color-menu-link-hover; + color: var.$color-menu-link-hover; } } & > a { @@ -564,7 +570,7 @@ body { height: 30px; line-height: 30px; margin: 0; - background-color: $color-menu; + background-color: var.$color-menu; font-size: 14px; } } @@ -591,20 +597,20 @@ body { */ .icon-thumbnail { display: inline-block; - background: $color-menu-dark; - height: $menu-icon-size; - width: $menu-icon-size; - line-height: $menu-icon-size; + background: var.$color-menu-dark; + height: var.$menu-icon-size; + width: var.$menu-icon-size; + line-height: var.$menu-icon-size; text-align: center; vertical-align: middle; position: relative; left: 0; float: right; margin-right: 14px; - color:$color-menu-light; + color:var.$color-menu-light; font-size: 16px; - -webkit-transition: -webkit-transform 0.4s cubic-bezier($menu-bezier); - transition: transform 0.4s cubic-bezier($menu-bezier); + -webkit-transition: -webkit-transform 0.4s cubic-bezier(var.$menu-bezier); + transition: transform 0.4s cubic-bezier(var.$menu-bezier); -webkit-backface-visibility: hidden; font-family: "Segoe UI","Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-font-smoothing:antialiased; @@ -663,8 +669,8 @@ body { } .secondary-sidebar { - background: $sidebar-background-color; - width: $secondary-sidebar-width; + background: var.$sidebar-background-color; + width: var.$secondary-sidebar-width; float: left; padding-left: 47px; height: 100%; @@ -684,7 +690,7 @@ body { text-transform: uppercase; } .menu-title { - color: rgba($color-menu-light, .70); + color: rgba(var.$color-menu-light, .70); font-size: 10.8px; font-family: 'Montserrat'; font-weight: normal; @@ -697,14 +703,14 @@ body { &.active{ & > a{ - color: $color-complete; + color: var.$color-complete; &:hover{ - color: $color-complete; + color: var.$color-complete; } & > .title{ position: relative; &:after{ - background: $color-complete; + background: var.$color-complete; border-radius: 50%; content: ""; height: 7px; @@ -719,7 +725,7 @@ body { } a{ font-size: 14px; - color: $color-menu-light; + color: var.$color-menu-light; line-height: 37px; &:hover{ color: #fff; @@ -744,7 +750,7 @@ body { } } a{ - color: rgba($color-menu-light,.89); + color: rgba(var.$color-menu-light,.89); line-height: 25px; &:hover{ color: #fff; @@ -757,15 +763,15 @@ body { .badge { background: transparent; font-size: 13px; - color: $color-menu-light; + color: var.$color-menu-light; line-height: 25px; } } &.light{ background-color: #fff; - border-right: 1px solid $form-control-border-color; + border-right: 1px solid var.$form-control-border-color; .menu-title { - color: fade($color-menu-light, 60%); + color: color2.fade(var.$color-menu-light, 60%); opacity: 1; } .icon-thumbnail{ @@ -775,13 +781,13 @@ body { li{ a{ &:hover{ - color: $color-master-dark; + color: var.$color-master-dark; } } &.active{ & > a{ - color: $color-master-dark; + color: var.$color-master-dark; } } } @@ -791,13 +797,13 @@ body { li{ &.active{ a{ - color: $color-master-dark !important; + color: var.$color-master-dark !important; } } a{ - color: fade($color-menu-light,60%); + color: color2.fade(var.$color-menu-light,60%); &:hover{ - color: $color-master-dark; + color: var.$color-master-dark; } } } @@ -816,20 +822,20 @@ body { overflow-y: auto; position: relative; -webkit-overflow-scrolling: touch; - border-right: 1px solid $color-master-light; - @include transition(all .5s ease); + border-right: 1px solid var.$color-master-light; + @include mixins.transition(all .5s ease); .list-view-fake-header{ font-size: 10.8px !important; line-height:normal !important; } &.slideLeft{ - @include translate(-100%, 0); + @include mixins.translate(-100%, 0); } .list-refresh{ position: absolute; right : 18px; top: 4px; - color: $color-master; + color: var.$color-master; opacity: .34; z-index: 101; i{ @@ -837,9 +843,9 @@ body { } } .list-view-fake-header, .list-view-group-header{ - background: $color-master-lighter; + background: var.$color-master-lighter; height: 28px; - color: rgba($color-master, .70); + color: rgba(var.$color-master, .70); text-transform: uppercase; font-size: 10.8px; padding-left: 12px; @@ -852,7 +858,7 @@ body { height: 111px; list-style: none; position: relative; - border-bottom: 1px solid rgba($color-master-light, .70); + border-bottom: 1px solid rgba(var.$color-master-light, .70); cursor: pointer; .inline { width: 230px; @@ -877,7 +883,7 @@ body { .subject { font-family: 'Helvetica'; font-size: 14.33px; - color: $color-info; + color: var.$color-info; -webkit-line-clamp: 2; -webkit-box-orient: vertical; height: 38px; @@ -892,7 +898,7 @@ body { height: 22px; } .datetime { - color: $color-master-darkest; + color: var.$color-master-darkest; font-family: arial; font-size: 11.1px; position: absolute; @@ -937,7 +943,7 @@ body { } a{ font-size: 13.1px; - color: $color-master; + color: var.$color-master; font-weight: 600; padding: 0 13px; line-height: 50px; @@ -953,7 +959,7 @@ body { padding: 0px; overflow: auto; min-height: 100%; - margin-left: $secondary-sidebar-width; + margin-left: var.$secondary-sidebar-width; } /* Quick View @@ -961,26 +967,26 @@ body { */ .quickview-wrapper{ position:fixed; - right:-$layout-right-quickview-width; + right:-(var.$layout-right-quickview-width); top:0; - width:$layout-right-quickview-width; + width:var.$layout-right-quickview-width; background:#fff; bottom:0; z-index:1000; box-shadow:0 0 9px rgba(191,191,191,.36); border-left: 1px solid rgba(222,227,231,.56); - -webkit-transition: -webkit-transform 400ms cubic-bezier($menu-bezier); - transition: transform 400ms cubic-bezier($menu-bezier); + -webkit-transition: -webkit-transform 400ms cubic-bezier(var.$menu-bezier); + transition: transform 400ms cubic-bezier(var.$menu-bezier); -webkit-backface-visibility: hidden; -ms-backface-visibility:hidden; &.open{ - @include translate3d(-100%,0,0); + @include mixins.translate3d(-100%,0,0); } .quickview-toggle{ position: absolute; right: 12px; top: 2px; - color: $color-menu-light; + color: var.$color-menu-light; padding: 6px; opacity: 0.4; &:hover{ @@ -989,13 +995,13 @@ body { } .nav-tabs{ /* Quickview Tabs */ - background-color: $color-menu; + background-color: var.$color-menu; position: relative; padding: 0 43px; & > li{ & > a{ padding:11px; - color: $color-menu-light; + color: var.$color-menu-light; border: 0; text-align: center; font-size: 11px; @@ -1007,7 +1013,7 @@ body { } &:hover{ & > span{ - color: $color-menu-light; + color: var.$color-menu-light; opacity: 1; } } @@ -1016,7 +1022,7 @@ body { & > a, & > a:hover, & > a:focus{ background-color: transparent; border: 0; - color: mix($color-menu-light, #fff, 37%); + color: color.mix(var.$color-menu-light, #fff, 37%); opacity: 1; } } @@ -1129,7 +1135,7 @@ body { } .note{ /* Quickview Note */ - background-image:url('#{$base-img-url}/notes_lines.png'); + background-image:url('#{var.$base-img-url}/notes_lines.png'); background-repeat:repeat-y; background-position:27px top; & > div{ @@ -1229,7 +1235,7 @@ body { .page-container { width:100%; height:100%; - padding-left: $layout-sidepanel-width-collapsed; + padding-left: var.$layout-sidepanel-width-collapsed; .page-content-wrapper{ min-height: 100%; position: relative; @@ -1239,7 +1245,7 @@ body { padding-top: 102px; padding-bottom: 30px; min-height: 100%; - @include transition(all 0.3s ease); + @include mixins.transition(all 0.3s ease); &.full-width{ width: 100%; } @@ -1263,7 +1269,7 @@ body { left: 0; right: 0; bottom: 0px; - @include transition(left 0.3s ease); + @include mixins.transition(left 0.3s ease); &.fixed{ position: fixed; } @@ -1407,14 +1413,14 @@ body { height: 600px; } - background-color: $color-master-lighter; + background-color: var.$color-master-lighter; .cover-photo{ width: 100%; height: inherit; overflow: hidden; - @include transition(opacity .3s ease); + @include mixins.transition(opacity .3s ease); background-size: cover; - background-color: $color-success; + background-color: var.$color-success; img{ display:none; } @@ -1564,7 +1570,7 @@ padding-right: 30px; .copyright{ padding: 25px 0; - border-top: 1px solid fade($color-master-light,70%); + border-top: 1px solid color2.fade(var.$color-master-light,70%); } .navbar-center, .navbar-center > li{ @@ -1587,7 +1593,7 @@ padding-right: 30px; .horizontal-app-menu { - @include flexbox(); + @include mixins.flexbox(); -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; @@ -1606,29 +1612,29 @@ padding-right: 30px; .header { height: auto; border-bottom: none; - background-color: $color-menu; - color: $color-menu-light; + background-color: var.$color-menu; + color: var.$color-menu-light; display: block; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; .header-inner { height: 60px; - background-color: $color-menu; + background-color: var.$color-menu; position: relative; - color: $color-menu-light; + color: var.$color-menu-light; } .header-lg-height { - height: $header-lg-height; + height: var.$header-lg-height; } .header-md-height { - height: $header-md-height; + height: var.$header-md-height; } .header-sm-height { - height: $header-sm-height; + height: var.$header-sm-height; } .search-link { - color: $color-menu-light; + color: var.$color-menu-light; } .header-inner { .brand.inline { @@ -1649,7 +1655,7 @@ padding-right: 30px; padding-bottom: 18px; } .page-title { - color: $color-menu-light; + color: var.$color-menu-light; font-size: 21px; line-height: 21px; font-weight: normal; @@ -1661,25 +1667,25 @@ padding-right: 30px; right: 3px; } .pg { - color: $color-menu-light; + color: var.$color-menu-light; display: block; } } .menu-bar { - @include flexbox(); + @include mixins.flexbox(); position: relative; - color: $color-menu-light; + color: var.$color-menu-light; //Globals Nav Items ul { margin: 0; padding: 0; list-style: none; - @include border-radius(3px); + @include mixins.border-radius(3px); li a { .arrow { position: relative; - @include flex-inline(); - @include align-items(center); + @include mixins.flex-inline(); + @include mixins.align-items(center); padding-left: 15px; width: 23px; &:before { @@ -1691,8 +1697,8 @@ padding-right: 30px; text-shadow: none; position: relative; top: 2px; - @include rotate(-90deg); - @include transition(all 0.12s ease); + @include mixins.rotate(-90deg); + @include mixins.transition(all 0.12s ease); } } } @@ -1706,13 +1712,13 @@ padding-right: 30px; visibility: hidden; opacity: 0; min-width: calc(100% + 4px); - padding: 18px $menu-padding; + padding: 18px var.$menu-padding; background: #fff; z-index: 1; position: absolute; - @include box-shadow(0px 0px 16px 0px rgba(0, 0, 0, 0.08)); - @include translate3d(15px, 0, 0); - @include transition(all 0.15s ease-in); + @include mixins.box-shadow(0px 0px 16px 0px rgba(0, 0, 0, 0.08)); + @include mixins.translate3d(15px, 0, 0); + @include mixins.transition(all 0.15s ease-in); li a { min-width: 50px; width: 100%; @@ -1727,14 +1733,14 @@ padding-right: 30px; & > .sub-menu { visibility: visible; opacity: 1; - @include translate3d(34%, 0, 0); + @include mixins.translate3d(34%, 0, 0); } } } } //Level One & > ul { - @include flexbox(); + @include mixins.flexbox(); -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; @@ -1743,8 +1749,8 @@ padding-right: 30px; -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; - @include flex-inline(); - @include align-items(center); + @include mixins.flex-inline(); + @include mixins.align-items(center); padding: 0; position: relative; &:first-child { @@ -1768,13 +1774,13 @@ padding-right: 30px; top: -7px; left: -4px; min-width: calc(100% + 4px); - padding: 0 $menu-padding; + padding: 0 var.$menu-padding; padding-top: 60px; padding-bottom: 18px; background: #fff; z-index: 1; position: absolute; - @include box-shadow(0px 0px 16px 0px rgba(0, 0, 0, 0.08)); + @include mixins.box-shadow(0px 0px 16px 0px rgba(0, 0, 0, 0.08)); } &.open { //Level two and below @@ -1784,13 +1790,13 @@ padding-right: 30px; content: ''; position: absolute; height: 1px; - top: $navbar-width + 7px; + top: var.$navbar-width + 7px; //width: calc(100% - $menu-padding * 2); - background-color: $form-control-border-color; + background-color: var.$form-control-border-color; } & > li { padding-left: 0; - @include translate3d(0, -10px, 0); + @include mixins.translate3d(0, -10px, 0); opacity: 1; transition: all 0.18s ease; & > a { @@ -1800,20 +1806,20 @@ padding-right: 30px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - @include flexbox(); + @include mixins.flexbox(); -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; & > .arrow:before { - @include rotate(180deg); + @include mixins.rotate(180deg); } } } } & > a { - @include translate3d(0, -10px, 0); + @include mixins.translate3d(0, -10px, 0); opacity: 0; transition: all 0.18s ease !important; } @@ -1822,14 +1828,14 @@ padding-right: 30px; & > ul { opacity: 1; & > li { - @include translate3d(0, 0, 0); + @include mixins.translate3d(0, 0, 0); opacity: 1; } } & > a { position: relative; z-index: 10; - @include translate3d(0, 0, 0); + @include mixins.translate3d(0, 0, 0); opacity: 1; } } @@ -1837,18 +1843,18 @@ padding-right: 30px; & > ul { opacity: 0; & > li { - @include translate3d(0, -10px, 0); + @include mixins.translate3d(0, -10px, 0); opacity: 0; } } & > a { - @include translate3d(0, -10px, 0); + @include mixins.translate3d(0, -10px, 0); opacity: 0; } } } li > a { - color: $color-menu-light; + color: var.$color-menu-light; } } } @@ -1864,8 +1870,8 @@ padding-right: 30px; background: #fff; z-index: 1000; position: absolute; - @include box-shadow(0px 0px 16px 0px rgba(0, 0, 0, 0.08)); - @include border-radius(3px); + @include mixins.box-shadow(0px 0px 16px 0px rgba(0, 0, 0, 0.08)); + @include mixins.border-radius(3px); transition: all 0.18s ease-in; } //calendar overwrites @@ -1895,7 +1901,7 @@ padding-right: 30px; @media (max-width:991px){ body.horizontal-menu-open{ .header{ - z-index: $zIndex-quickview; + z-index: z_index.$zIndex-quickview; } } .horizontal-menu-backdrop{ @@ -1905,7 +1911,7 @@ padding-right: 30px; right:0; bottom: 0; top: 0; - z-index: $zIndex-quickview - 1; + z-index: z_index.$zIndex-quickview - 1; opacity: 0; transition:opacity .3s ease; pointer-events: none; @@ -1918,17 +1924,17 @@ padding-right: 30px; position: fixed; top: 0; bottom: 0; - background-color: $color-menu; + background-color: var.$color-menu; width: 270px; right: -270px; overflow-y: auto; - -webkit-transition: -webkit-transform 400ms cubic-bezier($menu-bezier); - transition: transform 400ms cubic-bezier($menu-bezier); + -webkit-transition: -webkit-transform 400ms cubic-bezier(var.$menu-bezier); + transition: transform 400ms cubic-bezier(var.$menu-bezier); -webkit-backface-visibility: hidden; -ms-backface-visibility:hidden; &.open{ - @include translate3d(-100%,0,0); + @include mixins.translate3d(-100%,0,0); } & > ul{ flex-flow: column nowrap; @@ -1947,7 +1953,7 @@ padding-right: 30px; width: 100%; li{ min-height: 45px; - @include flexbox(); + @include mixins.flexbox(); flex-direction: column; & > ul{ @@ -1955,7 +1961,7 @@ padding-right: 30px; overflow: hidden; margin-top: 6px; position: static; - background: $color-menu-dark; + background: var.$color-menu-dark; opacity: 1; } width: 100%; @@ -1969,7 +1975,7 @@ padding-right: 30px; } } &.active{ - border: 2px solid $color-primary; + border: 2px solid var.$color-primary; } } } @@ -2064,17 +2070,17 @@ padding-right: 30px; .select2-dropdown { box-shadow: none !important; &.select2-dark { - background-color: $color-master !important; + background-color: var.$color-master !important; .select2-search--dropdown .select2-search__field { - background-color: $color-master-dark !important; - color: $color-master-lightest; + background-color: var.$color-master-dark !important; + color: var.$color-master-lightest; } .select2-results { li { - color: $color-master-lighter !important; + color: var.$color-master-lighter !important; &.select2-results__option--highlighted { - color: $color-white !important; - background-color: $color-master-darkest !important; + color: var.$color-white !important; + background-color: var.$color-master-darkest !important; } } } @@ -2113,7 +2119,7 @@ select2-dropdown, border-left: solid 3px transparent !important; } .active .tab-container { - border-left: solid 3px $color-primary !important; + border-left: solid 3px var.$color-primary !important; } } @@ -2150,13 +2156,13 @@ select2-dropdown, width: 100%; background-position-x: -1.875rem; background-size: 7.25rem .1875rem; - background-image: repeating-linear-gradient(45deg,$color-complete,$color-complete 33px,transparent 0,transparent 41px,$color-primary 0,$color-primary 74px,transparent 0,transparent 82px); + background-image: repeating-linear-gradient(45deg,var.$color-complete,var.$color-complete 33px,transparent 0,transparent 41px,var.$color-primary 0,var.$color-primary 74px,transparent 0,transparent 82px); } .bullet-connector { width: 2px; height: 100%; - background: $color-master-light; + background: var.$color-master-light; top: 0px; left: 18px; &.thin{ diff --git a/resources/assets/sass/modules/_list.scss b/resources/assets/sass/modules/_list.scss index ceaf9ec9..261837f1 100644 --- a/resources/assets/sass/modules/_list.scss +++ b/resources/assets/sass/modules/_list.scss @@ -1,3 +1,6 @@ +@use "../mixins"; +@use "../var"; + /*------------------------------------------------------------------ [18. List] */ @@ -45,7 +48,7 @@ } } .list-view-group-header, .list-view-fake-header { - background: $color-master-lightest; + background: var.$color-master-lightest; color: #232830; font: normal 11px/14px 'Montserrat',Arial; text-transform: uppercase; @@ -106,10 +109,10 @@ input.list-view-search{ display: -ms-flexbox; display: flex; &:hover { - background-color: $color-complete-lighter; + background-color: var.$color-complete-lighter; } &.active{ - background-color: $color-warning-lighter; + background-color: var.$color-warning-lighter; } p{ margin: 0; @@ -120,13 +123,13 @@ input.list-view-search{ width: 100%; } & > *{ - @include flexbox(); + @include mixins.flexbox(); -webkit-box-orient: horizontal!important; -webkit-box-direction: normal!important; -webkit-flex-direction: row!important; -ms-flex-direction: row!important; flex-direction: row!important; - @include align-items(center); + @include mixins.align-items(center); } } &.boreded{ @@ -154,10 +157,10 @@ input.list-view-search{ //Bootstrap-List .list-group-item{ - border: 1px solid $color-master-lighter; + border: 1px solid var.$color-master-lighter; &.active, &.active:hover, &.active:focus{ - background-color:$color-success-light; - border-color:$color-success-light; + background-color:var.$color-success-light; + border-color:var.$color-success-light; } } diff --git a/resources/assets/sass/modules/_login.scss b/resources/assets/sass/modules/_login.scss index 9b5361fe..e6c818a2 100644 --- a/resources/assets/sass/modules/_login.scss +++ b/resources/assets/sass/modules/_login.scss @@ -1,3 +1,5 @@ +@use "../var"; + /*------------------------------------------------------------------ [22. Login] */ @@ -15,7 +17,7 @@ } .login-wrapper { - background: linear-gradient(rgba(0, 0, 0, 0.6), $color-primary), url('../images/iStock-976354264_Malaysia.jpg'); + background: linear-gradient(rgba(0, 0, 0, 0.6), var.$color-primary), url('../images/iStock-976354264_Malaysia.jpg'); background-size: cover; padding: 80px 0 20px 0; min-height: 100%; diff --git a/resources/assets/sass/modules/_misc.scss b/resources/assets/sass/modules/_misc.scss index 714c02d7..dc929d23 100644 --- a/resources/assets/sass/modules/_misc.scss +++ b/resources/assets/sass/modules/_misc.scss @@ -1,3 +1,6 @@ +@use "../mixins"; +@use "../var"; + /*------------------------------------------------------------------ [28. Misc : Helper Classes] */ @@ -8,7 +11,7 @@ .icon-list{ .fa-item{ display: block; - color: $color-master-darkest; + color: var.$color-master-darkest; line-height: 32px; height: 32px; padding-left: 10px; @@ -29,62 +32,62 @@ overflow: hidden; float:left; &.circular{ - @include border-radius(50%); + @include mixins.border-radius(50%); } &.bordered{ border-width: 4px; border-style:solid; &.d16{ - @include square(16+4*1px); + @include mixins.square(16+4*1px); & > *{ line-height: 12px } } &.d24{ - @include square(24+4*1px); + @include mixins.square(24+4*1px); & > *{ line-height: 24px } } &.d32{ - @include square(32+4*1px); + @include mixins.square(32+4*1px); & > *{ line-height: 28px } } &.d48{ - @include square(48+4*1px); + @include mixins.square(48+4*1px); & > *{ line-height: 44px } } } &.d16{ - @include square(16px); + @include mixins.square(16px); & > *{ line-height: 16px } } &.d24{ - @include square(24px); + @include mixins.square(24px); & > *{ line-height: 24px } } &.d32{ - @include square(32px); + @include mixins.square(32px); & > *{ line-height: 32px } } &.d39{ - @include square(39px); + @include mixins.square(39px); & > *{ line-height: 39px } } &.d48{ - @include square(48px); + @include mixins.square(48px); & > *{ line-height: 50px } @@ -127,7 +130,7 @@ } & > a{ opacity: .5; - @include transition(opacity ease .3s); + @include mixins.transition(opacity ease .3s); padding-left:17px; padding-right:37px; min-width: 138px; @@ -400,43 +403,43 @@ border-color:rgba(255, 255, 255, 0.3); } .b-grey{ - border-color:$color-master-lighter !important; + border-color:var.$color-master-lighter !important; } .b-white{ border-color:#fff !important; } .b-primary{ - border-color:$color-primary !important; + border-color:var.$color-primary !important; } .b-complete{ - border-color:$color-complete !important; + border-color:var.$color-complete !important; } .b-success{ - border-color:$color-success !important; + border-color:var.$color-success !important; } .b-info{ - border-color:$color-info !important; + border-color:var.$color-info !important; } .b-danger{ - border-color:$color-danger !important; + border-color:var.$color-danger !important; } .b-warning{ - border-color:$color-warning !important; + border-color:var.$color-warning !important; } /* Border Radius ------------------------------------ */ .b-rad-none{ - @include border-radius(0px); + @include mixins.border-radius(0px); } .b-rad-sm{ - @include border-radius(3px); + @include mixins.border-radius(3px); } .b-rad-md{ - @include border-radius(5px); + @include mixins.border-radius(5px); } .b-rad-lg{ - @include border-radius(7px); + @include mixins.border-radius(7px); } .no-border{ border: none !important; @@ -519,12 +522,12 @@ // Dashboard widget heights .sm-gutter .row > [class^="col-"], .sm-gutter .row > [class*="col-"] { - padding-left: $layout-gutter-sm; - padding-right: $layout-gutter-sm; + padding-left: var.$layout-gutter-sm; + padding-right: var.$layout-gutter-sm; } .sm-gutter .row { - margin-left: -$layout-gutter-sm; - margin-right: -$layout-gutter-sm; + margin-left: -(var.$layout-gutter-sm); + margin-right: -(var.$layout-gutter-sm); } /* Aspect ratio */ @@ -562,7 +565,7 @@ &:before{ content: ""; display: block; - padding-top: calc(50% - #{$layout-gutter-sm}); /* initial ratio of 1:1*/ + padding-top: calc(50% - #{var.$layout-gutter-sm}); /* initial ratio of 1:1*/ } & > div{ position: absolute; @@ -580,7 +583,7 @@ &:before{ content: ""; display: block; - padding-top: calc(150% - #{$layout-gutter-sm}); /* initial ratio of 1:1*/ + padding-top: calc(150% - #{var.$layout-gutter-sm}); /* initial ratio of 1:1*/ } & > div{ position: absolute; @@ -598,7 +601,7 @@ &:before{ content: ""; display: block; - padding-top: calc(75% - #{$layout-gutter-sm}); /* initial ratio of 1:1*/ + padding-top: calc(75% - #{var.$layout-gutter-sm}); /* initial ratio of 1:1*/ } & > div{ position: absolute; @@ -616,7 +619,7 @@ &:before{ content: ""; display: block; - padding-top: calc(125% - #{$layout-gutter-sm}); /* initial ratio of 1:1*/ + padding-top: calc(125% - #{var.$layout-gutter-sm}); /* initial ratio of 1:1*/ } & > div{ position: absolute; diff --git a/resources/assets/sass/modules/_modals.scss b/resources/assets/sass/modules/_modals.scss index 73272c57..50eff153 100644 --- a/resources/assets/sass/modules/_modals.scss +++ b/resources/assets/sass/modules/_modals.scss @@ -1,3 +1,5 @@ +@use "../mixins"; + /*------------------------------------------------------------------ [10. Modals] */ @@ -48,7 +50,7 @@ opacity: 1 !important; &.stick-up{ .modal-dialog{ - @include translate3d(0,-100%,0); + @include mixins.translate3d(0,-100%,0); margin-top: -5px; } // &.in{ @@ -58,7 +60,7 @@ // } &.show{ .modal-dialog{ - @include translate3d(0,0,0); + @include mixins.translate3d(0,0,0); } } } @@ -74,7 +76,7 @@ // } &.show{ .modal-dialog{ - @include translate3d(0,0,0); + @include mixins.translate3d(0,0,0); } } &.disable-scroll{ @@ -83,7 +85,7 @@ .modal-dialog{ display: table; height: 100%; - @include translate3d(0,75%,0); + @include mixins.translate3d(0,75%,0); } .modal-content-wrapper{ display: table-cell; @@ -113,17 +115,17 @@ &.show{ .modal-dialog{ opacity: 1; - @include scale(1); + @include mixins.scale(1); } } .modal-dialog{ opacity: 0; - @include scale(0.6); + @include mixins.scale(0.6); } } &.fill-in{ background-color: rgba(255, 255, 255, 0); - @include transition(background-color .3s); + @include mixins.transition(background-color .3s); & > .close{ opacity: 0.6; z-index: 9999; @@ -155,12 +157,12 @@ background-color: rgba(255, 255, 255, 0.85); .modal-dialog{ opacity: 1; - @include scale(1); + @include mixins.scale(1); } } .modal-dialog{ opacity: 0; - @include scale(0.6); + @include mixins.scale(0.6); } } &.slide-right{ @@ -178,7 +180,7 @@ // } &.show{ .modal-dialog{ - @include translate3d(0,0,0); + @include mixins.translate3d(0,0,0); } } .modal-dialog{ @@ -186,7 +188,7 @@ right: 0; margin:0; height: 100%; - @include translate3d(100%,0,0); + @include mixins.translate3d(100%,0,0); .modal-content-wrapper{ height: 100%; } @@ -207,7 +209,7 @@ } .modal-backdrop{ opacity: 0; - @include transition(opacity 0.2s linear); + @include mixins.transition(opacity 0.2s linear); // &.in{ // opacity: 0.30; // } diff --git a/resources/assets/sass/modules/_nestables.scss b/resources/assets/sass/modules/_nestables.scss index 936f7e24..5ed0089a 100644 --- a/resources/assets/sass/modules/_nestables.scss +++ b/resources/assets/sass/modules/_nestables.scss @@ -1,35 +1,38 @@ +@use "sass:color"; +@use "../var"; + /*------------------------------------------------------------------ [14. Nesstables] */ .dd-handle{ - border-color: fade-out($color-master-light, .3); - color:$color-master; + border-color: color.adjust(var.$color-master-light, $alpha: -.3); + color:var.$color-master; &:hover{ - background-color: $color-master-lightest + background-color: var.$color-master-lightest } } .dark { .dd-handle{ - color:$color-master; - background: $color-master-lighter; + color:var.$color-master; + background: var.$color-master-lighter; &:hover{ - background-color: $color-master-lightest + background-color: var.$color-master-lightest } } .dd-placeholder{ - background-color:$color-master-light; + background-color:var.$color-master-light; } } .dd3-content{ background:#fff; - border-color: fade-out($color-master-light, .3); - color:$color-master; + border-color: color.adjust(var.$color-master-light, $alpha: -.3); + color:var.$color-master; &:hover{ - background-color: $color-master-lightest + background-color: var.$color-master-lightest } } @@ -38,7 +41,7 @@ text-indent: 9999px; &:before{ font-family: 'pages-icon'; - color:$color-master; + color:var.$color-master; content:"\e660"; font-size: 11px; top: 5px; @@ -46,14 +49,14 @@ } .dd-placeholder{ - background:$color-master-lighter; - border-color: fade-out($color-master, .65); + background:var.$color-master-lighter; + border-color: color.adjust(var.$color-master, $alpha: -.65); } .dd-empty{ background-image:none; - background:$color-master-lighter; - border-color: fade-out($color-master, .5); + background:var.$color-master-lighter; + border-color: color.adjust(var.$color-master, $alpha: -.5); } .dd-item > button{ font-size: 11px; diff --git a/resources/assets/sass/modules/_notifications.scss b/resources/assets/sass/modules/_notifications.scss index 364a1f6b..2ff81625 100644 --- a/resources/assets/sass/modules/_notifications.scss +++ b/resources/assets/sass/modules/_notifications.scss @@ -1,3 +1,9 @@ +@use "sass:color"; +@use "../color" as color2; +@use "../mixins"; +@use "../var"; +@use "z_index"; + /*------------------------------------------------------------------ [8. Notifications] */ @@ -7,47 +13,47 @@ */ .badge { text-shadow: none; - font-family: $base-font-family; + font-family: var.$base-font-family; font-weight: 600; - background-color: $color-master-light; + background-color: var.$color-master-light; font-size: 11px; padding-left: 6px; padding-right: 6px; padding-bottom: 4px; - color: $color-master; + color: var.$color-master; border-radius: 10px; } .badge-success { - background-color: $color-success; - color: $color-white ; + background-color: var.$color-success; + color: var.$color-white ; } .badge-warning { - background-color: $color-warning; - color: $color-white ; + background-color: var.$color-warning; + color: var.$color-white ; } .badge-important { - background-color: $color-danger; - color: $color-white ; + background-color: var.$color-danger; + color: var.$color-white ; } .badge-danger { - background-color: $color-danger; - color: $color-white ; + background-color: var.$color-danger; + color: var.$color-white ; } .badge-info { - background-color: $color-info; - color: $color-white ; + background-color: var.$color-info; + color: var.$color-white ; } .badge-inverse { - background-color: $color-complete-darker; - color: $color-white ; + background-color: var.$color-complete-darker; + color: var.$color-white ; } .badge-white { - background-color: $color-white ; - color: $color-master; + background-color: var.$color-white ; + color: var.$color-master; } .badge-disable { - background-color: $color-master-dark; - color: $color-master; + background-color: var.$color-master-dark; + color: var.$color-master; } /* Tool Tip @@ -63,7 +69,7 @@ .popover{ border: 1px solid rgba(0,0,0,.1); box-shadow: 0 0 9px rgba(191, 191, 191, 0.36); - z-index: $zIndex-navbar - 10; + z-index: z_index.$zIndex-navbar - 10; } .notification-toggle{ top: 35px; @@ -78,7 +84,7 @@ } .notification-panel{ background-color: #fff; - border:1px solid $color-master-light; + border:1px solid var.$color-master-light; .notification-body{ height: auto; max-height: 350px; @@ -94,17 +100,17 @@ opacity: 1; } .option{ - background-color: $color-complete-lighter; + background-color: var.$color-complete-lighter; } .option .mark{ - color:$color-complete-light; + color:var.$color-complete-light; } } .heading{ line-height: 43px; margin-right: 5px; background: #fff; - border-bottom: 1px solid $color-master-light; + border-bottom: 1px solid var.$color-master-light; position: relative; float: left; width: 100%; @@ -123,7 +129,7 @@ .thumbnail-wrapper { cursor: pointer; i{ - @include transition(all 0.12s linear); + @include mixins.transition(all 0.12s linear); } } @@ -137,7 +143,7 @@ display: block; } .thumbnail-wrapper i{ - @include rotate(-90deg); + @include mixins.rotate(-90deg); } } .thumbnail-wrapper.d24{ @@ -157,7 +163,7 @@ padding-top: 15px; margin-bottom: 20px; position: relative; - border-left: 1px solid fade($color-master-light, 70%); + border-left: 1px solid color2.fade(var.$color-master-light, 70%); &:after{ width: 14px; height: 14px; @@ -166,11 +172,11 @@ background-color: #fff; left: -7px; top: 25px; - border: 1px solid fade($color-master-light, 90%); - @include border-radius(99px); + border: 1px solid color2.fade(var.$color-master-light, 90%); + @include mixins.border-radius(99px); } &:before{ - color: mix($color-master, #fff, 40%); + color: color.mix(var.$color-master, #fff, 40%); position: absolute; bottom: 0; left: -5px; @@ -195,11 +201,11 @@ text-align: center; vertical-align: middle; line-height: 44px; - background-color: $color-master-lightest; + background-color: var.$color-master-lightest; height: 100%; .mark{ background-color: transparent; - color: mix($color-master, #fff, 40%); + color: color.mix(var.$color-master, #fff, 40%); &:before{ content: ' \25CF'; font-size: 12px; @@ -216,9 +222,9 @@ .notification-footer{ padding: 10px; display: block; - border-top:1px solid $color-master-light; + border-top:1px solid var.$color-master-light; a{ - color: $color-master; + color: var.$color-master; opacity: .54; &:hover{ opacity: .74; @@ -236,9 +242,9 @@ width: 350px; right: 20px; z-index: 999; - top: $layout-header-height + 20px; + top: var.$layout-header-height + 20px; &[data-placement$='-left']{ - left: $layout-sidepanel-width-collapsed + 30px; + left: var.$layout-sidepanel-width-collapsed + 30px; right: auto; } &[data-placement$='-right']{ @@ -246,7 +252,7 @@ left: auto; } &[data-placement^='top-']{ - top: $layout-header-height + 20px; + top: var.$layout-header-height + 20px; bottom: auto; } &[data-placement^='bottom-']{ @@ -276,7 +282,7 @@ body.menu-pin > .pgn-wrapper[data-position$='-left'], body.menu-pin > .pgn-wrapper[data-position="top"], body.menu-pin > .pgn-wrapper[data-position="bottom"]{ - left: $layout-sidepanel-pin-width; + left: var.$layout-sidepanel-pin-width; } .pgn-wrapper { position: fixed; @@ -593,20 +599,20 @@ padding:12px 0; /* Pages Notification customizations */ body > .pgn-wrapper[data-position="top"] { - top: $layout-header-height; - left: $layout-sidepanel-width-collapsed; + top: var.$layout-header-height; + left: var.$layout-sidepanel-width-collapsed; } body > .pgn-wrapper[data-position="bottom"] { - left: $layout-sidepanel-width-collapsed; + left: var.$layout-sidepanel-width-collapsed; } body > .pgn-wrapper[data-position$='-left'] { - left: $layout-sidepanel-width-collapsed + 20px; + left: var.$layout-sidepanel-width-collapsed + 20px; right: auto; } body > .pgn-wrapper[data-position^='top-'] { - top: $layout-header-height + 20px; + top: var.$layout-header-height + 20px; bottom: auto; } @@ -615,7 +621,7 @@ body > .pgn-wrapper[data-position^='top-'] { margin-top: -4px; } body > .pgn-wrapper{ - z-index: $zIndex-notifications; + z-index: z_index.$zIndex-notifications; } @media (max-width: 979px) { @@ -645,7 +651,7 @@ body > .pgn-wrapper{ */ .notification-positions{ border-radius: 4px; - border:3px dashed $color-master-light; + border:3px dashed var.$color-master-light; height: 370px; position: relative; diff --git a/resources/assets/sass/modules/_progress_indicators.scss b/resources/assets/sass/modules/_progress_indicators.scss index 2ac14b4c..400c5aef 100644 --- a/resources/assets/sass/modules/_progress_indicators.scss +++ b/resources/assets/sass/modules/_progress_indicators.scss @@ -1,9 +1,13 @@ +@use "sass:color"; +@use "../mixins"; +@use "../var"; + /*------------------------------------------------------------------ [9. Progress Indicators] */ .progress { height: 4px; - background-color: fade-out($color-master, .8); + background-color: color.adjust(var.$color-master, $alpha: -.8); background-image: none; box-shadow: none; border-radius: 0; @@ -20,36 +24,36 @@ ------------------------------------ */ .progress-bar-indeterminate{ - background: url('#{$base-img-url}/progress/progress-bar-master.svg') no-repeat top left; + background: url('#{var.$base-img-url}/progress/progress-bar-master.svg') no-repeat top left; width: 100%; height: 100%; background-size: cover; &.progress-bar-primary{ - background-image: url('#{$base-img-url}/progress/progress-bar-primary.svg'); + background-image: url('#{var.$base-img-url}/progress/progress-bar-primary.svg'); background-color: transparent; } &.progress-bar-complete{ - background-image: url('#{$base-img-url}/progress/progress-bar-complete.svg'); + background-image: url('#{var.$base-img-url}/progress/progress-bar-complete.svg'); background-color: transparent; } &.progress-bar-success{ - background-image: url('#{$base-img-url}/progress/progress-bar-success.svg'); + background-image: url('#{var.$base-img-url}/progress/progress-bar-success.svg'); background-color: transparent; } &.progress-bar-info{ - background-image: url('#{$base-img-url}/progress/progress-bar-info.svg'); + background-image: url('#{var.$base-img-url}/progress/progress-bar-info.svg'); background-color: transparent; } &.progress-bar-warning{ - background-image: url('#{$base-img-url}/progress/progress-bar-warning.svg'); + background-image: url('#{var.$base-img-url}/progress/progress-bar-warning.svg'); background-color: transparent; } &.progress-bar-danger{ - background-image: url('#{$base-img-url}/progress/progress-bar-danger.svg'); + background-image: url('#{var.$base-img-url}/progress/progress-bar-danger.svg'); background-color: transparent; } &.progress-bar-master{ - background-image: url('#{$base-img-url}/progress/progress-bar-master.svg'); + background-image: url('#{var.$base-img-url}/progress/progress-bar-master.svg'); background-color: transparent; } } @@ -59,9 +63,9 @@ .progress-bar { box-shadow: none; border-radius: 0; - background-color: $color-master; + background-color: var.$color-master; background-image: none; - @include transition(all 1000ms cubic-bezier(0.785, 0.135, 0.150, 0.860)); + @include mixins.transition(all 1000ms cubic-bezier(0.785, 0.135, 0.150, 0.860)); -webkit-transition-timing-function: cubic-bezier(0.785, 0.135, 0.150, 0.860); -moz-transition-timing-function: cubic-bezier(0.785, 0.135, 0.150, 0.860); -ms-transition-timing-function: cubic-bezier(0.785, 0.135, 0.150, 0.860); @@ -72,85 +76,85 @@ ------------------------------------ */ .progress-bar-primary { - background-color: $color-primary; + background-color: var.$color-primary; background-image: none; } .progress-bar-complete { - background-color: $color-complete; + background-color: var.$color-complete; background-image: none; } .progress-bar-success { - background-color: $color-success; + background-color: var.$color-success; background-image: none; } .progress-bar-info { - background-color: $color-info; + background-color: var.$color-info; background-image: none; } .progress-bar-warning { - background-color: $color-warning; + background-color: var.$color-warning; background-image: none; } .progress-bar-danger { - background-color: $color-danger; + background-color: var.$color-danger; background-image: none; } .progress-bar-white { - background-color: $color-white ; + background-color: var.$color-white ; background-image: none; } .progress-bar-black { - background-color: $color-black; + background-color: var.$color-black; background-image: none; } .progress-info .bar, .progress .bar-info { - background-color: $color-info-darker; + background-color: var.$color-info-darker; background-image: none; } .progress-warning .bar, .progress .bar-warning { - background-color: $color-warning-darker; + background-color: var.$color-warning-darker; background-image: none; } .progress-danger .bar, .progress .bar-danger { - background-color: $color-danger-darker; + background-color: var.$color-danger-darker; background-image: none; } .progress-white .bar, .progress .bar-white { - background-color: $color-white; + background-color: var.$color-white; background-image: none; } .progress-success.progress-striped .bar, .progress-striped .bar-success { - background-color: $color-success; + background-color: var.$color-success; } .progress-info.progress-striped .bar, .progress-striped .bar-info { - background-color: $color-info; + background-color: var.$color-info; } /* Circular Progress : indeterminate ------------------------------------ */ .progress-circle-indeterminate{ - background: url('#{$base-img-url}/progress/progress-circle-master.svg') no-repeat top left; + background: url('#{var.$base-img-url}/progress/progress-circle-master.svg') no-repeat top left; width: 50px; height: 50px; background-size: 100% auto; margin: 0 auto; &.progress-circle-warning{ - background-image: url('#{$base-img-url}/progress/progress-circle-warning.svg'); + background-image: url('#{var.$base-img-url}/progress/progress-circle-warning.svg'); } &.progress-circle-danger{ - background-image: url('#{$base-img-url}/progress/progress-circle-danger.svg'); + background-image: url('#{var.$base-img-url}/progress/progress-circle-danger.svg'); } &.progress-circle-info{ - background-image: url('#{$base-img-url}/progress/progress-circle-info.svg'); + background-image: url('#{var.$base-img-url}/progress/progress-circle-info.svg'); } &.progress-circle-primary{ - background-image: url('#{$base-img-url}/progress/progress-circle-primary.svg'); + background-image: url('#{var.$base-img-url}/progress/progress-circle-primary.svg'); } &.progress-circle-success{ - background-image: url('#{$base-img-url}/progress/progress-circle-success.svg'); + background-image: url('#{var.$base-img-url}/progress/progress-circle-success.svg'); } &.progress-circle-complete{ - background-image: url('#{$base-img-url}/progress/progress-circle-complete.svg'); + background-image: url('#{var.$base-img-url}/progress/progress-circle-complete.svg'); } } /* Circular Progress @@ -167,32 +171,32 @@ -webkit-backface-visibility: hidden; &.progress-circle-warning{ .pie .half-circle{ - border-color: $color-warning; + border-color: var.$color-warning; } } &.progress-circle-danger{ .pie .half-circle{ - border-color: $color-danger; + border-color: var.$color-danger; } } &.progress-circle-info{ .pie .half-circle{ - border-color: $color-info; + border-color: var.$color-info; } } &.progress-circle-primary{ .pie .half-circle{ - border-color: $color-primary; + border-color: var.$color-primary; } } &.progress-circle-success{ .pie .half-circle{ - border-color: $color-success; + border-color: var.$color-success; } } &.progress-circle-complete{ .pie .half-circle{ - border-color: $color-complete; + border-color: var.$color-complete; } } &.progress-circle-thick{ @@ -201,14 +205,14 @@ } } .pie { - clip: rect(0, $size, $size, $size / 2); + clip: rect(0, $size, $size, $size * 0.5); height: $size; position: absolute; width: $size; .half-circle { - border: $border solid $color-master; + border: $border solid var.$color-master; border-radius: 50%; - clip: rect(0, $size / 2, $size, 0); + clip: rect(0, $size * 0.5, $size, 0); height: $size; position: absolute; width: $size; @@ -216,7 +220,7 @@ } } .shadow { - border: $border solid fade-out(#000, .9); + border: $border solid color.adjust(#000, $alpha: -.9); border-radius: 50%; height: 100%; width: 100%; diff --git a/resources/assets/sass/modules/_sliders.scss b/resources/assets/sass/modules/_sliders.scss index 4efa0f56..e44bfe03 100644 --- a/resources/assets/sass/modules/_sliders.scss +++ b/resources/assets/sass/modules/_sliders.scss @@ -1,8 +1,12 @@ +@use "sass:color"; +@use "../mixins"; +@use "../var"; + /*------------------------------------------------------------------ [12. Sliders] */ -$slider-background-color : mix($color-master, #fff, 12%); +$slider-background-color : color.mix(var.$color-master, #fff, 12%); /* Ion Range Slider https://github.com/IonDen/ion.rangeSlider @@ -12,22 +16,22 @@ https://github.com/IonDen/ion.rangeSlider background-image: none; } .irs-bar{ - background: $color-danger; + background: var.$color-danger; } .irs-wrapper{ .irs-line{ - background-color: $color-master-light; + background-color: var.$color-master-light; } .irs-line-mid, .irs-line-left, .irs-line-right, .irs-diapason, .irs-slider{ background: none; } .irs-diapason{ - background-color:$color-danger; - @include transition(all 0.3s ease); + background-color:var.$color-danger; + @include mixins.transition(all 0.3s ease); } .irs-from, .irs-to, .irs-single{ - background: $color-danger; + background: var.$color-danger; } .irs-slider{ @@ -37,7 +41,7 @@ https://github.com/IonDen/ion.rangeSlider width: 16%; height: 100%; background: rgba(0,0,0,0.0); - background-color: $color-danger; + background-color: var.$color-danger; } &.to:before{ top: -2%; @@ -45,7 +49,7 @@ https://github.com/IonDen/ion.rangeSlider width: 16%; height: 100%; background: rgba(0,0,0,0.0); - background-color: $color-danger; + background-color: var.$color-danger; } &.single:before{ top: -2%; @@ -53,140 +57,140 @@ https://github.com/IonDen/ion.rangeSlider width: 16%; height: 100%; background: rgba(0,0,0,0.0); - background-color: $color-danger; + background-color: var.$color-danger; } } .irs-from:after, .irs-to:after, .irs-single:after{ - border-top-color: $color-danger; + border-top-color: var.$color-danger; } &.success{ .irs-diapason{ - background-color:$color-success; + background-color:var.$color-success; } .irs-from, .irs-to, .irs-single{ - background: $color-success; + background: var.$color-success; } .irs-slider{ &.from:before{ - background-color: $color-success; + background-color: var.$color-success; } &.to:before{ - background-color: $color-success; + background-color: var.$color-success; } &.single:before{ - background-color: $color-success; + background-color: var.$color-success; } } .irs-from:after, .irs-to:after, .irs-single:after{ - border-top-color: $color-success; + border-top-color: var.$color-success; } // v.2.0.1 .irs-bar{ - background-color: $color-success; + background-color: var.$color-success; } } &.primary{ .irs-diapason{ - background-color:$color-primary; + background-color:var.$color-primary; } .irs-from, .irs-to, .irs-single{ - background: $color-primary; + background: var.$color-primary; } .irs-slider{ &.from:before{ - background-color: $color-primary; + background-color: var.$color-primary; } &.to:before{ - background-color: $color-primary; + background-color: var.$color-primary; } &.single:before{ - background-color: $color-primary; + background-color: var.$color-primary; } } .irs-from:after, .irs-to:after, .irs-single:after{ - border-top-color: $color-primary; + border-top-color: var.$color-primary; } // v.2.0.1 .irs-bar{ - background-color: $color-primary; + background-color: var.$color-primary; } } &.warning{ .irs-diapason{ - background-color:$color-warning; + background-color:var.$color-warning; } .irs-from, .irs-to, .irs-single{ - background: $color-warning; + background: var.$color-warning; } .irs-slider{ &.from:before{ - background-color: $color-warning; + background-color: var.$color-warning; } &.to:before{ - background-color: $color-warning; + background-color: var.$color-warning; } &.single:before{ - background-color: $color-warning; + background-color: var.$color-warning; } } .irs-from:after, .irs-to:after, .irs-single:after{ - border-top-color: $color-warning; + border-top-color: var.$color-warning; } // v.2.0.1 .irs-bar{ - background-color: $color-warning; + background-color: var.$color-warning; } } &.complete{ .irs-diapason{ - background-color:$color-complete; + background-color:var.$color-complete; } .irs-from, .irs-to, .irs-single{ - background: $color-complete; + background: var.$color-complete; } .irs-slider{ &.from:before{ - background-color: $color-complete; + background-color: var.$color-complete; } &.to:before{ - background-color: $color-complete; + background-color: var.$color-complete; } &.single:before{ - background-color: $color-complete; + background-color: var.$color-complete; } } .irs-from:after, .irs-to:after, .irs-single:after{ - border-top-color: $color-complete; + border-top-color: var.$color-complete; } // v.2.0.1 .irs-bar{ - background-color: $color-complete; + background-color: var.$color-complete; } } &.danger{ .irs-diapason{ - background-color:$color-danger; + background-color:var.$color-danger; } .irs-from, .irs-to, .irs-single{ - background: $color-danger; + background: var.$color-danger; } .irs-slider{ &.from:before{ - background-color: $color-danger; + background-color: var.$color-danger; } &.to:before{ - background-color: $color-danger; + background-color: var.$color-danger; } &.single:before{ - background-color: $color-danger; + background-color: var.$color-danger; } } .irs-from:after, .irs-to:after, .irs-single:after{ - border-top-color: $color-danger; + border-top-color: var.$color-danger; } // v.2.0.1 .irs-bar{ - background-color: $color-danger; + background-color: var.$color-danger; } } } @@ -201,33 +205,33 @@ http://refreshless.com/nouislider/ box-shadow: none; &.bg-complete{ .noUi-connect{ - background-color: $color-complete + background-color: var.$color-complete } } &.bg-success{ .noUi-connect{ - background-color: $color-success + background-color: var.$color-success } } &.bg-warning{ .noUi-connect{ - background-color: $color-warning + background-color: var.$color-warning } } &.bg-danger{ .noUi-connect{ - background-color: $color-danger + background-color: var.$color-danger } } &.bg-info{ .noUi-connect{ - background-color: $color-info + background-color: var.$color-info } } &.bg-primary{ .noUi-connect{ - background-color: $color-primary + background-color: var.$color-primary } } @@ -248,29 +252,29 @@ http://refreshless.com/nouislider/ width: 18px; height: 18px; left: -15px; - border: 1px solid mix($color-master, #fff, 23%); + border: 1px solid color.mix(var.$color-master, #fff, 23%); top: -7px; - @include transition(all 0.2s ease); + @include mixins.transition(all 0.2s ease); &:hover{ - border: 1px solid mix($color-master, #fff, 40%); + border: 1px solid color.mix(var.$color-master, #fff, 40%); } &:active{ - @include scale(1.3); - border: 1px solid mix($color-master, #fff, 23%); + @include mixins.scale(1.3); + border: 1px solid color.mix(var.$color-master, #fff, 23%); } &:focus{ - @include scale(1.3); - border: 1px solid mix($color-master, #fff, 23%); + @include mixins.scale(1.3); + border: 1px solid color.mix(var.$color-master, #fff, 23%); } } } .disable-hover-scale{ .noUi-handle{ &:active{ - @include scale(1); + @include mixins.scale(1); } &:focus{ - @include scale(1); + @include mixins.scale(1); } } } @@ -282,18 +286,18 @@ http://refreshless.com/nouislider/ .noUi-handle{ width: 18px; height: 18px; - border: 1px solid mix($color-master, #fff, 23%); - @include transition(all 0.2s ease); + border: 1px solid color.mix(var.$color-master, #fff, 23%); + @include mixins.transition(all 0.2s ease); &:hover{ - border: 1px solid mix($color-master, #fff, 40%); + border: 1px solid color.mix(var.$color-master, #fff, 40%); } &:active{ - @include scale(1.3); - border: 1px solid mix($color-master, #fff, 23%); + @include mixins.scale(1.3); + border: 1px solid color.mix(var.$color-master, #fff, 23%); } &:focus{ - @include scale(1.3); - border: 1px solid mix($color-master, #fff, 23%); + @include mixins.scale(1.3); + border: 1px solid color.mix(var.$color-master, #fff, 23%); } } } diff --git a/resources/assets/sass/modules/_social.scss b/resources/assets/sass/modules/_social.scss index 592081be..5789eb8e 100644 --- a/resources/assets/sass/modules/_social.scss +++ b/resources/assets/sass/modules/_social.scss @@ -1,3 +1,6 @@ +@use "../mixins"; +@use "../var"; + /*------------------------------------------------------------------ [19. Social App] */ @@ -20,7 +23,7 @@ margin: 0 auto; overflow-x: hidden; &:before{ - background-image: url("#{$base-img-url}/linear_gradient.png"); + background-image: url("#{var.$base-img-url}/linear_gradient.png"); background-repeat: repeat-x; bottom: 0; content: " "; @@ -81,7 +84,7 @@ } &:hover { & > .timeline:after { - background: $color-complete; + background: var.$color-complete; } } } @@ -102,17 +105,17 @@ border-bottom-left-radius: 2px; margin-bottom: 20px; width: 300px; - border:1px solid $color-master-light; + border:1px solid var.$color-master-light; .circle { position: absolute; right: 20px; top: 20px; display: block; border-radius: 50%; - border:2px solid $color-master-lighter; + border:2px solid var.$color-master-lighter; width: 9px; height: 9px; - background: $color-info-light; + background: var.$color-info-light; z-index: 1; &:hover { cursor: pointer; @@ -122,13 +125,13 @@ width: 100% !important } &.status { - background: $color-complete-lighter; + background: var.$color-complete-lighter; border-radius: 4px; padding: 15px 25px; - @include box-sizing(border-box); + @include mixins.box-sizing(border-box); border:1px solid transparent; &:hover,&.hover { - border-color: $color-info-lighter !important; + border-color: var.$color-info-lighter !important; } h5 { font-size: 12px; @@ -138,14 +141,14 @@ } } h2 { - color: $color-master-dark; + color: var.$color-master-dark; font-size: 25px; line-height: 32px; margin: 0; font-weight: normal; } .reactions { - color: $color-master-lighter; + color: var.$color-master-lighter; opacity: .45; font-size: 12px; padding: 0; @@ -161,22 +164,22 @@ width: 9px; height: 9px; border: none; - background: $color-complete; + background: var.$color-complete; } } .card-header, .card-footer { - background-color: $color-white; - @include transition(background .2s ease); + background-color: var.$color-white; + @include mixins.transition(background .2s ease); } &.share { .card-header { padding: 15px 15px 12px; - border-bottom:1px solid $color-master-light; + border-bottom:1px solid var.$color-master-light; border-top-right-radius: 2px; border-top-left-radius: 2px; &:hover { - background: $color-complete-lighter; - border-color:$color-complete-lighter; + background: var.$color-complete-lighter; + border-color:var.$color-complete-lighter; cursor: pointer; h6 { opacity: .6; @@ -278,7 +281,7 @@ padding: 14px 16px 11px; font-size: 12px !important; &:hover { - background: $color-complete-lighter; + background: var.$color-complete-lighter; cursor: pointer; .reactions, .time { opacity: .8; @@ -330,10 +333,10 @@ } } .card-header { - border-top:1px solid $color-complete-lighter; + border-top:1px solid var.$color-complete-lighter; } .circle { - background: $color-warning; + background: var.$color-warning; } } } @@ -367,7 +370,7 @@ margin-top: 19px; position: static; text-align: left; - @include translate(0,0); + @include mixins.translate(0,0); } ol:before { background: transparent; @@ -388,7 +391,7 @@ font-size: 12px; opacity: .55; font-weight: 300; - @include transition(opacity .2s ease); + @include mixins.transition(opacity .2s ease); } } } diff --git a/resources/assets/sass/modules/_tables.scss b/resources/assets/sass/modules/_tables.scss index 76e1c950..9ca68bab 100644 --- a/resources/assets/sass/modules/_tables.scss +++ b/resources/assets/sass/modules/_tables.scss @@ -1,3 +1,7 @@ +@use "sass:color"; +@use "../mixins"; +@use "../var"; + /*------------------------------------------------------------------ [16. Tables and Datatables] */ @@ -19,11 +23,11 @@ padding-top: 14px; padding-bottom: 14px; vertical-align: middle; - border-bottom: 1px solid fade-out($color-master-light, .3); - color:fade-out($color-master-dark, .65); + border-bottom: 1px solid color.adjust(var.$color-master-light, $alpha: -.3); + color:color.adjust(var.$color-master-dark, $alpha: -.65); border-top: none; &[class*='sorting_'] { - color:$color-master-dark; + color:var.$color-master-dark; } &:first-child { padding-left: 18px !important; @@ -39,19 +43,19 @@ tr { td { background: #fff; - border-bottom: 1px solid fade-out($color-master-light, .3); + border-bottom: 1px solid color.adjust(var.$color-master-light, $alpha: -.3); border-top: 0px; padding:20px; font-size: 13.5px; .btn-tag { - background:fade-out($color-master-dark, .93); + background:color.adjust(var.$color-master-dark, $alpha: -.93); display: inline-block; margin: 5px; border-radius: 4px; padding: 5px; color: #62605a !important; &:hover { - background:fade-out($color-master-dark, .85); + background:color.adjust(var.$color-master-dark, $alpha: -.85); } } &[class*='sorting_'] { @@ -62,7 +66,7 @@ } } &.selected td { - background: $color-warning-lighter; + background: var.$color-warning-lighter; } } } @@ -70,10 +74,10 @@ tbody { tr { &:hover td { - background: $color-complete-lighter !important; + background: var.$color-complete-lighter !important; } &.selected:hover td{ - background: $color-warning-lighter !important; + background: var.$color-warning-lighter !important; } } } @@ -82,7 +86,7 @@ tbody { tr { td { - background: $body-background !important; + background: var.$body-background !important; } &:nth-child(2n+1) td { background: #fff !important; @@ -127,14 +131,14 @@ & > tbody > tr { &.shown { & > td { - background: $color-warning-lighter; + background: var.$color-warning-lighter; &:first-child:before { - @include rotate(90deg); + @include mixins.rotate(90deg); } } & + tr { & > td { - background: fade-out($body-background, .6); + background: color.adjust(var.$body-background, $alpha: -.6); padding: 0px 40px; .table-inline{ margin-top: 13px; @@ -168,7 +172,7 @@ top: -1px; position: relative; font-family: 'FontAwesome'; - @include transition(all 0.12s linear); + @include mixins.transition(all 0.12s linear); } } } @@ -231,9 +235,9 @@ } .dataTables_wrapper .dataTables_paginate ul > li > a { padding: 5px 10px; - color: $color-master; + color: var.$color-master; opacity: .35; - @include transition(opacity .3s ease); + @include mixins.transition(opacity .3s ease); &:hover{ opacity: .65; } @@ -262,7 +266,7 @@ font-size: 12px; padding: 0 33px; - color: $color-master; + color: var.$color-master; } .dataTables_wrapper .dataTables_paginate ul > li { display: inline-block; @@ -277,7 +281,7 @@ } .dataTables_wrapper .dataTables_paginate ul > li.active > a{ font-weight: bold; - color: $color-master; + color: var.$color-master; opacity: 1; } .export-options-container a{ @@ -290,19 +294,19 @@ table.dataTable thead { .sorting_asc:after{ - background-image: url("#{$base-img-url}/icons/sort_asc.png"); + background-image: url("#{var.$base-img-url}/icons/sort_asc.png"); } .sorting_desc:after{ - background-image: url("#{$base-img-url}/icons/sort_desc.png"); + background-image: url("#{var.$base-img-url}/icons/sort_desc.png"); } .sorting:after{ - background-image: url("#{$base-img-url}/icons/sort_both.png"); + background-image: url("#{var.$base-img-url}/icons/sort_both.png"); } .sorting_asc_disabled:after{ - background-image: url("#{$base-img-url}/icons/sort_asc_disabled.png"); + background-image: url("#{var.$base-img-url}/icons/sort_asc_disabled.png"); } .sorting_desc_disabled:after{ - background-image: url("#{$base-img-url}/icons/sort_desc_disabled.png"); + background-image: url("#{var.$base-img-url}/icons/sort_desc_disabled.png"); } } diff --git a/resources/assets/sass/modules/_tabs_accordian.scss b/resources/assets/sass/modules/_tabs_accordian.scss index d4a1ae1f..bbb10f5e 100644 --- a/resources/assets/sass/modules/_tabs_accordian.scss +++ b/resources/assets/sass/modules/_tabs_accordian.scss @@ -1,3 +1,7 @@ +@use "../color"; +@use "../mixins"; +@use "../var"; + /*------------------------------------------------------------------ [11. Tabs & Accordians] */ @@ -13,9 +17,9 @@ & > a.active { &:hover, &:focus { - border-color: $color-master-light; - color: $color-master; - background-color: $color-master-light; + border-color: var.$color-master-light; + color: var.$color-master; + background-color: var.$color-master-light; } } & > a { @@ -25,7 +29,7 @@ margin-right:0; font-weight: 500; letter-spacing: 0.06em; - color: fade($color-master, + color: color.fade(var.$color-master, 70%); font-size: 10.5px; min-width: 70px; @@ -37,7 +41,7 @@ &:focus { background: transparent; border-color: transparent; - color: $color-master; + color: var.$color-master; } .tab-icon { margin-right:6px; @@ -50,20 +54,20 @@ & > .tab-pane { &.slide-left, &.slide-right { - @include transition(all .3s ease); + @include mixins.transition(all .3s ease); &.sliding { opacity: 0 !important; } &.active { - @include translate3d(0, 0, 0); + @include mixins.translate3d(0, 0, 0); opacity: 1; } } &.slide-left.sliding { - @include translate3d(10%, 0, 0); + @include mixins.translate3d(10%, 0, 0); } &.slide-right.sliding { - @include translate3d(-10%, 0, 0); + @include mixins.translate3d(-10%, 0, 0); } } } @@ -119,10 +123,10 @@ opacity: 1; font-weight: bold; background-color: white !important; - color: $color-primary; + color: var.$color-primary; &:hover, &:focus { - color: $color-primary; + color: var.$color-primary; background-color: white !important; border-color: white !important; } @@ -159,33 +163,33 @@ & > a{ &:after { position: absolute; - @include transition(all 0.1s linear 0s); + @include mixins.transition(all 0.1s linear 0s); -webkit-backface-visibility: hidden; width: 100%; display: block; - background-color: $color-primary; + background-color: var.$color-primary; height: 0px; content: ''; left: 0; z-index: 125; top: calc(100% - 1px); &.nav-tabs-primary{ - background-color: $color-primary; + background-color: var.$color-primary; } &.nav-tabs-success{ - background-color: $color-success; + background-color: var.$color-success; } &.nav-tabs-complete{ - background-color: $color-complete; + background-color: var.$color-complete; } &.nav-tabs-danger{ - background-color: $color-danger; + background-color: var.$color-danger; } &.nav-tabs-warning{ - background-color: $color-warning; + background-color: var.$color-warning; } &.nav-tabs-info{ - background-color: $color-info; + background-color: var.$color-info; } } &.active { @@ -282,7 +286,7 @@ top: 98%; } &:after { - border-top-color: $body-background; + border-top-color: var.$body-background; border-width: 10px; margin-left:-10px; } @@ -301,7 +305,7 @@ &:hover, &:focus { overflow: visible; - @include transition( color 0.2s ease 0s); + @include mixins.transition( color 0.2s ease 0s); } } } @@ -324,7 +328,7 @@ &:after { border-top: 10px solid transparent; border-bottom: 10px solid transparent; - border-left: 10px solid $body-background; + border-left: 10px solid var.$body-background; margin-top: 1px; margin-right:2px; } @@ -353,7 +357,7 @@ &:after { border-top: 10px solid transparent; border-bottom: 10px solid transparent; - border-right: 10px solid $body-background; + border-right: 10px solid var.$body-background; margin-top: 1px; margin-left:-9px; } @@ -383,8 +387,8 @@ & > li { & > a { &:after { - background: none repeat scroll 0 0 $color-master; - border: 1px solid $color-master; + background: none repeat scroll 0 0 var.$color-master; + border: 1px solid var.$color-master; } } } @@ -393,8 +397,8 @@ & > li { & > a { &:after { - background: none repeat scroll 0 0 $color-primary; - border: 1px solid $color-primary; + background: none repeat scroll 0 0 var.$color-primary; + border: 1px solid var.$color-primary; } } } @@ -403,8 +407,8 @@ & > li { & > a { &:after { - background: none repeat scroll 0 0 $color-success; - border: 1px solid $color-success; + background: none repeat scroll 0 0 var.$color-success; + border: 1px solid var.$color-success; } } } @@ -413,8 +417,8 @@ & > li { & > a { &:after { - background: none repeat scroll 0 0 $color-complete; - border: 1px solid $color-complete; + background: none repeat scroll 0 0 var.$color-complete; + border: 1px solid var.$color-complete; } } } @@ -423,8 +427,8 @@ & > li { & > a { &:after { - background: none repeat scroll 0 0 $color-warning; - border: 1px solid $color-warning; + background: none repeat scroll 0 0 var.$color-warning; + border: 1px solid var.$color-warning; } } } @@ -433,8 +437,8 @@ & > li { & > a { &:after { - background: none repeat scroll 0 0 $color-danger; - border: 1px solid $color-danger; + background: none repeat scroll 0 0 var.$color-danger; + border: 1px solid var.$color-danger; } } } @@ -443,8 +447,8 @@ & > li { & > a { &:after { - background: none repeat scroll 0 0 $color-info; - border: 1px solid $color-info; + background: none repeat scroll 0 0 var.$color-info; + border: 1px solid var.$color-info; } } } @@ -452,18 +456,18 @@ } .nav-tabs-fillup { - @include backface-visibility(hidden); - @include perspective(1000); + @include mixins.backface-visibility(hidden); + @include mixins.perspective(1000); & > li { overflow: hidden; & > a { - @include backface-visibility(hidden); - @include transition(color 0.3s ease 0s); + @include mixins.backface-visibility(hidden); + @include mixins.transition(color 0.3s ease 0s); background: transparent; &:after { - @include backface-visibility(hidden); - background: none repeat scroll 0 0 $color-success; - border: 1px solid $color-success; + @include mixins.backface-visibility(hidden); + background: none repeat scroll 0 0 var.$color-success; + border: 1px solid var.$color-success; content: ""; height: calc(100% + 1px); left: 0; @@ -481,7 +485,7 @@ z-index: -1; } span { - @include backface-visibility(hidden); + @include mixins.backface-visibility(hidden); -webkit-transform: translate3d(0px, 5px, 0px); transform: translate3d(0px, 5px, 0px); -webkit-transition: -webkit-transform 0.5s ease 0s; @@ -500,17 +504,17 @@ color: #fff; } &:after { - @include translate3d(0px, 0px, 0px); + @include mixins.translate3d(0px, 0px, 0px); } span { - @include translate3d(0px, -5px, 0px); + @include mixins.translate3d(0px, -5px, 0px); } } } } .icon:before { - @include translate3d(0px, 5px, 0px); - @include transition(transform 0.5s ease 0s); + @include mixins.translate3d(0px, 5px, 0px); + @include mixins.transition(transform 0.5s ease 0s); display: block; margin: 0; } @@ -533,7 +537,7 @@ } &.active { a{&:after { - @include translate3d(0px, 0px, 0px); + @include mixins.translate3d(0px, 0px, 0px); } } } @@ -543,19 +547,19 @@ & > li { & > a { &:after { - @include translate3d(100%, 0, 0); + @include mixins.translate3d(100%, 0, 0); } span { - @include translate3d(5px, 0, 0px); + @include mixins.translate3d(5px, 0, 0px); } } &.active { a{span { - @include translate3d(-5px, 0, 0px); + @include mixins.translate3d(-5px, 0, 0px); } } .icon:before { - @include translate3d(-5px, 0, 0px); + @include mixins.translate3d(-5px, 0, 0px); } } } @@ -564,20 +568,20 @@ & > li { & > a { &:after { - @include translate3d(-100%, 0, 0); + @include mixins.translate3d(-100%, 0, 0); left: -1px; } span { - @include translate3d(-5px, 0, 0px); + @include mixins.translate3d(-5px, 0, 0px); } } &.active { a{span { - @include translate3d(5px, 0, 0px); + @include mixins.translate3d(5px, 0, 0px); } } .icon:before { - @include translate3d(5px, 0, 0px); + @include mixins.translate3d(5px, 0, 0px); } } } @@ -631,22 +635,22 @@ } .cs-backdrop{ border:1px solid transparent; - border-bottom: 1px solid $form-control-border-color; + border-bottom: 1px solid var.$form-control-border-color; } } .nav-item { .arrow_tab { overflow: hidden; - background-color: $color-master-lighter; + background-color: var.$color-master-lighter; opacity: 0.5; - border-color: $color-master-light; + border-color: var.$color-master-light; } .active { .arrow_tab { opacity: 1; - background-color: $color-white !important; - border-color: $color-white; + background-color: var.$color-white !important; + border-color: var.$color-white; } } } @@ -660,7 +664,7 @@ &.horizontal{ display: block; .card+.card{ - border-left:1px solid $panel-border-color; + border-left:1px solid var.$panel-border-color; } } .card-heading { @@ -676,15 +680,15 @@ .card-title { width: 100%; & > a { - color: $color-master; + color: var.$color-master; font-size: 13px; font-weight: normal; display: block; opacity: 1; &:hover { - color: $color-master !important; + color: var.$color-master !important; &:after { - color: $color-master !important; + color: var.$color-master !important; } } &:after { @@ -693,15 +697,15 @@ position: absolute; right:13px; top: 36%; - color: $color-master; + color: var.$color-master; } &.collapsed { - color: fade($color-master, + color: color.fade(var.$color-master, 70%); opacity: 1; &:after { content: "\f055"; - color: fade($color-master, 70%); + color: color.fade(var.$color-master, 70%); } } } @@ -728,15 +732,15 @@ // Links rendered as pills padding-left: 0; > a { - color: $color-master; + color: var.$color-master; } // Active state &.active > a { &, &:hover, &:focus { - color: $color-master; - background-color: $color-master-light; + color: var.$color-master; + background-color: var.$color-master-light; } } } diff --git a/resources/assets/sass/modules/_timeline.scss b/resources/assets/sass/modules/_timeline.scss index ca94a9c2..3c24e00c 100644 --- a/resources/assets/sass/modules/_timeline.scss +++ b/resources/assets/sass/modules/_timeline.scss @@ -1,3 +1,7 @@ +@use "sass:color"; +@use "../mixins"; +@use "../var"; + /*------------------------------------------------------------------ [24. Timeline] */ @@ -31,7 +35,7 @@ Modules - reusable parts of our design position: absolute; width: 20px; height: 20px; - @include border-radius(99px); + @include mixins.border-radius(99px); background-color: #fff; z-index: 10; } @@ -109,7 +113,7 @@ Main components height: 40px; border-radius: 50%; text-align: center; - background: darken($color-master-light, 20%); + background: color.adjust(var.$color-master-light, $lightness: -20%); border: 2px solid #fff; &.small { height: 12px; @@ -127,22 +131,22 @@ Main components top: 50%; } &.primary { - background-color: $color-primary; + background-color: var.$color-primary; } &.complete { - background-color: $color-complete; + background-color: var.$color-complete; } &.success { - background-color: $color-success; + background-color: var.$color-success; } &.info { - background-color: $color-info; + background-color: var.$color-info; } &.danger { - background-color: $color-danger; + background-color: var.$color-danger; } &.warning { - background-color: $color-warning; + background-color: var.$color-warning; } } @media only screen and (min-width: 1170px) { diff --git a/resources/assets/sass/modules/_treeview.scss b/resources/assets/sass/modules/_treeview.scss index 527a316a..0aa53c9e 100644 --- a/resources/assets/sass/modules/_treeview.scss +++ b/resources/assets/sass/modules/_treeview.scss @@ -1,14 +1,16 @@ +@use "../var"; + /*------------------------------------------------------------------ [13. Treeview] */ span.dynatree-active a{ - color:$color-master-dark !important; + color:var.$color-master-dark !important; background-color: transparent !important; } span.dynatree-selected a{ - color:$color-master-dark !important; + color:var.$color-master-dark !important; font-style: normal; } @@ -18,14 +20,14 @@ ul.dynatree-container a:focus, span.dynatree-focused a:link{ ul.dynatree-container{ background-color: transparent; a:hover{ - color: $color-master; + color: var.$color-master; opacity: 0.7; background-color: transparent; } } ul.dynatree-container a{ - color: $color-master; + color: var.$color-master; } span.dynatree-empty, span.dynatree-vline, span.dynatree-connector, span.dynatree-expander, span.dynatree-icon, span.dynatree-checkbox, span.dynatree-radio, span.dynatree-drag-helper-img, #dynatree-drop-marker{ diff --git a/resources/assets/sass/modules/_typography.scss b/resources/assets/sass/modules/_typography.scss index aa4506a9..397b6567 100644 --- a/resources/assets/sass/modules/_typography.scss +++ b/resources/assets/sass/modules/_typography.scss @@ -1,3 +1,8 @@ +@use "../mixins"; +@use "../var"; + +@use "sass:color"; + /*------------------------------------------------------------------ [5. Typography] */ @@ -21,7 +26,7 @@ html{ -webkit-text-size-adjust: 100%; } body{ - color: $color-master; + color: var.$color-master; font-family: 'Open Sans', sans-serif !important; font-size: 14px; font-weight: normal; @@ -47,7 +52,7 @@ h6 { -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; font-weight: 300; - color: $color-master-dark; + color: var.$color-master-dark; } h1 { font-size: 44px; @@ -88,11 +93,11 @@ h6.block { */ a { text-shadow: none !important; - color: $color-primary-dark; + color: var.$color-primary-dark; transition: color 0.1s linear 0s,background-color 0.1s linear 0s,opacity 0.2s linear 0s !important; } a:focus, a:hover, a:active { - color: $color-primary; + color: var.$color-primary; } a,a:focus, a:hover, a:active { outline: 0 !important; @@ -106,10 +111,10 @@ br { clear: both; } code{ - color:$color-danger-dark; - background-color: $color-master-lighter; + color:var.$color-danger-dark; + background-color: var.$color-master-lighter; &:hover { - background-color: $color-danger-lighter; + background-color: var.$color-danger-lighter; } } p { @@ -157,7 +162,7 @@ ul,ol { address { margin-bottom: 0px; a{ - color:$color-master; + color:var.$color-master; } } blockquote { @@ -200,7 +205,7 @@ blockquote { } } hr{ - border-color:$color-master-light; + border-color:var.$color-master-light; &.double{ border-width:2px; } @@ -256,7 +261,7 @@ hr{ text-transform: uppercase; } .muted { - color: lighten($color-master,50%); + color: color.adjust(var.$color-master,$lightness: 50%, $space: hsl); } .hint-text{ opacity: .7; @@ -269,25 +274,25 @@ hr{ */ .bg-master{ - background-color: $color-master !important; + background-color: var.$color-master !important; } .bg-master-light{ - background-color: $color-master-light !important; + background-color: var.$color-master-light !important; } .bg-master-lighter{ - background-color: $color-master-lighter !important; + background-color: var.$color-master-lighter !important; } .bg-master-lightest{ - background-color: $color-master-lightest !important; + background-color: var.$color-master-lightest !important; } .bg-master-dark{ - background-color: $color-master-dark !important; + background-color: var.$color-master-dark !important; } .bg-master-darker{ - background-color: $color-master-darker !important; + background-color: var.$color-master-darker !important; } .bg-master-darkest{ - background-color: $color-master-darkest !important; + background-color: var.$color-master-darkest !important; } /* Contextual Colors @@ -295,30 +300,30 @@ hr{ */ .bg-primary-complete-gradient { - background: linear-gradient(to right, $color-complete, $color-primary); + background: linear-gradient(to right, var.$color-complete, var.$color-primary); } /* Primary ------------------------------------ */ .bg-primary { - background-color: $color-primary !important; + background-color: var.$color-primary !important; } .bg-primary-dark { - background-color: $color-primary-dark !important; + background-color: var.$color-primary-dark !important; } .bg-primary-darker { - background-color: $color-primary-darker !important; + background-color: var.$color-primary-darker !important; } .bg-primary-light { - background-color: $color-primary-light !important; + background-color: var.$color-primary-light !important; } .bg-primary-lighter { - background-color: $color-primary-lighter !important; + background-color: var.$color-primary-lighter !important; } .bg-primary-lighter-hover { &:hover { - background-color: $color-primary-lighter !important; + background-color: var.$color-primary-lighter !important; } } @@ -326,95 +331,95 @@ hr{ ------------------------------------ */ .bg-complete { - background-color: $color-complete !important; + background-color: var.$color-complete !important; } .bg-complete-dark { - background-color: $color-complete-dark !important; + background-color: var.$color-complete-dark !important; } .bg-complete-darker { - background-color: $color-complete-darker !important; + background-color: var.$color-complete-darker !important; } .bg-complete-light { - background-color: $color-complete-light !important; + background-color: var.$color-complete-light !important; } .bg-complete-lighter { - background-color: $color-complete-lighter !important; + background-color: var.$color-complete-lighter !important; } /* Success ------------------------------------ */ .bg-success { - background-color: $color-success !important; + background-color: var.$color-success !important; } .bg-success-dark { - background-color: $color-success-dark !important; + background-color: var.$color-success-dark !important; } .bg-success-darker { - background-color: $color-success-darker !important; + background-color: var.$color-success-darker !important; } .bg-success-light { - background-color: $color-success-light !important; + background-color: var.$color-success-light !important; } .bg-success-lighter { - background-color: $color-success-lighter !important; + background-color: var.$color-success-lighter !important; } /* Info ------------------------------------ */ .bg-info{ - background-color: $color-info !important; + background-color: var.$color-info !important; } .bg-info-dark{ - background-color: $color-info-dark !important; + background-color: var.$color-info-dark !important; } .bg-info-darker{ - background-color: $color-info-darker !important; + background-color: var.$color-info-darker !important; } .bg-info-light{ - background-color: $color-info-light !important; + background-color: var.$color-info-light !important; } .bg-info-lighter{ - background-color: $color-info-lighter !important; + background-color: var.$color-info-lighter !important; } /* Danger ------------------------------------ */ .bg-danger { - background-color: $color-danger !important;; + background-color: var.$color-danger !important;; } .bg-danger-dark { - background-color: $color-danger-dark !important; + background-color: var.$color-danger-dark !important; } .bg-danger-darker { - background-color: $color-danger-darker !important; + background-color: var.$color-danger-darker !important; } .bg-danger-light { - background-color: $color-danger-light !important; + background-color: var.$color-danger-light !important; } .bg-danger-lighter { - background-color: $color-danger-lighter !important; + background-color: var.$color-danger-lighter !important; } /* Warning ------------------------------------ */ .bg-warning { - background-color: $color-warning !important; + background-color: var.$color-warning !important; } .bg-warning-dark { - background-color: $color-warning-dark !important; + background-color: var.$color-warning-dark !important; } .bg-warning-darker { - background-color: $color-warning-darker !important; + background-color: var.$color-warning-darker !important; } .bg-warning-light { - background-color: $color-warning-light !important; + background-color: var.$color-warning-light !important; } .bg-warning-lighter { - background-color: $color-warning-lighter !important; + background-color: var.$color-warning-lighter !important; } /* More Color Options @@ -425,13 +430,13 @@ hr{ ------------------------------------ */ .bg-menu-dark{ - background-color: $color-menu-dark; + background-color: var.$color-menu-dark; } .bg-menu{ - background-color: $color-menu; + background-color: var.$color-menu; } .bg-menu-light{ - background-color: $color-menu-light; + background-color: var.$color-menu-light; } /* Gradients @@ -468,164 +473,164 @@ hr{ } } .text-black { - color: $color-master-dark !important; + color: var.$color-master-dark !important; } .hover-black { - color: $color-master-dark !important; + color: var.$color-master-dark !important; } .text-white { color: #fff !important; } .hover-white { &:hover { - color: $color-white !important; + color: var.$color-white !important; } } .text-master { - color: $color-master !important; + color: var.$color-master !important; } .text-master-dark { - color: $color-master-dark !important; + color: var.$color-master-dark !important; } .text-master-darker { - color: $color-master-darker !important; + color: var.$color-master-darker !important; } .text-master-light { - color: $color-master-light !important; + color: var.$color-master-light !important; } .text-master-lighter { - color: $color-master-lighter !important; + color: var.$color-master-lighter !important; } .hover-master { &:hover { - color: $color-master !important; + color: var.$color-master !important; } } .text-complete { - color: $color-complete !important; + color: var.$color-complete !important; } .text-complete-dark { - color: $color-complete-dark !important; + color: var.$color-complete-dark !important; } .text-complete-darker { - color: $color-complete-darker !important; + color: var.$color-complete-darker !important; } .text-complete-light { - color: $color-complete-light !important; + color: var.$color-complete-light !important; } .text-complete-lighter { - color: $color-complete-lighter !important; + color: var.$color-complete-lighter !important; } .hover-complete { &:hover { - color: $color-complete !important; + color: var.$color-complete !important; } } .text-success { - color: $color-success !important; + color: var.$color-success !important; } .text-success-dark { - color: $color-success-dark !important; + color: var.$color-success-dark !important; } .text-success-darker { - color: $color-success-darker !important; + color: var.$color-success-darker !important; } .text-success-light { - color: $color-success-light !important; + color: var.$color-success-light !important; } .text-success-lighter { - color: $color-success-lighter !important; + color: var.$color-success-lighter !important; } .hover-success { &:hover { - color: $color-success !important; + color: var.$color-success !important; } } .text-info { - color: $color-info !important; + color: var.$color-info !important; } .text-info-dark { - color: $color-info-dark !important; + color: var.$color-info-dark !important; } .text-info-darker { - color: $color-info-darker !important; + color: var.$color-info-darker !important; } .text-info-light { - color: $color-info-light !important; + color: var.$color-info-light !important; } .text-info-lighter { - color: $color-info-lighter !important; + color: var.$color-info-lighter !important; } .hover-warning { - color: $color-warning !important; + color: var.$color-warning !important; } .hover-info { &:hover { - color: $color-info !important; + color: var.$color-info !important; } } .text-warning-dark { - color: $color-warning-dark !important; + color: var.$color-warning-dark !important; } .text-warning-darker { - color: $color-warning-darker !important; + color: var.$color-warning-darker !important; } .text-warning-light { - color: $color-warning-light !important; + color: var.$color-warning-light !important; } .text-warning-lighter { - color: $color-warning-lighter !important; + color: var.$color-warning-lighter !important; } .hover-warning { &:hover { - color: $color-warning !important; + color: var.$color-warning !important; } } .text-danger { - color: $color-danger !important; + color: var.$color-danger !important; } .text-danger-dark { - color: $color-danger-dark !important; + color: var.$color-danger-dark !important; } .text-danger-darker { - color: $color-danger-darker !important; + color: var.$color-danger-darker !important; } .text-danger-light { - color: $color-danger-light !important; + color: var.$color-danger-light !important; } .text-danger-lighter { - color: $color-danger-lighter !important; + color: var.$color-danger-lighter !important; } .hover-danger { &:hover{ - color: $color-danger !important; + color: var.$color-danger !important; } } .text-primary { - color: $color-primary !important; + color: var.$color-primary !important; } .text-primary-dark { - color: $color-primary-dark !important; + color: var.$color-primary-dark !important; } .text-primary-darker { - color: $color-primary-darker !important; + color: var.$color-primary-darker !important; } .text-primary-light { - color: $color-primary-light !important; + color: var.$color-primary-light !important; } .text-primary-lighter { - color: $color-primary-lighter !important; + color: var.$color-primary-lighter !important; } .hover-primary { &:hover { - color: $color-primary !important; + color: var.$color-primary !important; } } @@ -661,34 +666,34 @@ hr{ font-size: 11px; line-height: 1; text-shadow: none; - background-color: $color-master-light; + background-color: var.$color-master-light; font-weight: 600; - color: $color-master; + color: var.$color-master; border-radius: .25em; } .label-success { - background-color: $color-success; + background-color: var.$color-success; color: #fff; } .label-warning{ - background-color: $color-warning; + background-color: var.$color-warning; color: #fff; } .label-important, .label-danger { - background-color: $color-danger; + background-color: var.$color-danger; color: #fff; } .label-info{ - background-color: $color-success; + background-color: var.$color-success; color: #fff; } .label-inverse { - background-color: $color-complete-dark; + background-color: var.$color-complete-dark; color: #fff; } .label-white { background-color: #fff; - color: $color-master; + color: var.$color-master; } /* Line-heights @@ -731,7 +736,7 @@ hr{ ------------------------------------ */ .well { - background-color: $color-master-light; + background-color: var.$color-master-light; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; @@ -749,8 +754,8 @@ hr{ width: auto; } &.green { - background-color: $color-complete; - color: $color-white ; + background-color: var.$color-complete; + color: var.$color-white ; border: none; } } @@ -761,7 +766,7 @@ hr{ } .jumbotron { - @include border-radius(0); + @include mixins.border-radius(0); p{ font-size: 14px; font-weight: normal; diff --git a/resources/assets/sass/modules/_vector_map.scss b/resources/assets/sass/modules/_vector_map.scss index 17240989..6817f4b6 100644 --- a/resources/assets/sass/modules/_vector_map.scss +++ b/resources/assets/sass/modules/_vector_map.scss @@ -1,3 +1,5 @@ +@use "../var"; + /*------------------------------------------------------------------ [26. Vector Map : Mapplic Plugin] */ @@ -26,7 +28,7 @@ margin: 0; line-height: normal; opacity: .7; - color: $color-master; + color: var.$color-master; } .mapplic-tooltip-close { opacity: .5; @@ -37,7 +39,7 @@ font-size: 12px; position: relative; top: -2px; - color: $color-master; + color: var.$color-master; opacity: .7; } } @@ -54,10 +56,10 @@ } .mapplic-tooltip-description { font-weight: bold; - color: $color-master; + color: var.$color-master; } .mapplic-tooltip-description strong { - color: $color-danger; + color: var.$color-danger; margin-right: 2px; } .map-controls { @@ -67,78 +69,78 @@ z-index: 1; } .mapplic-pin { - background-image: url('#{$assets-url}/img/maps/marker-master.svg'); + background-image: url('#{var.$assets-url}/img/maps/marker-master.svg'); background-size: contain; &.pulse { - background-image: url('#{$assets-url}/img/maps/pulse-master.svg'); + background-image: url('#{var.$assets-url}/img/maps/pulse-master.svg'); &.green { - background-image: url('#{$assets-url}/img/maps/pulse-success.svg'); + background-image: url('#{var.$assets-url}/img/maps/pulse-success.svg'); } &.blue { - background-image: url('#{$assets-url}/img/maps/pulse-complete.svg'); + background-image: url('#{var.$assets-url}/img/maps/pulse-complete.svg'); } &.purple { - background-image: url('#{$assets-url}/img/maps/pulse-primary.svg'); + background-image: url('#{var.$assets-url}/img/maps/pulse-primary.svg'); } &.yellow { - background-image: url('#{$assets-url}/img/maps/pulse-warning.svg'); + background-image: url('#{var.$assets-url}/img/maps/pulse-warning.svg'); } &.red { - background-image: url('#{$assets-url}/img/maps/pulse-danger.svg'); + background-image: url('#{var.$assets-url}/img/maps/pulse-danger.svg'); } } &.pulse-alt { - background-image: url('#{$assets-url}/img/maps/pulse-alt-master.svg'); + background-image: url('#{var.$assets-url}/img/maps/pulse-alt-master.svg'); &.green { - background-image: url('#{$assets-url}/img/maps/pulse-alt-success.svg'); + background-image: url('#{var.$assets-url}/img/maps/pulse-alt-success.svg'); } &.blue { - background-image: url('#{$assets-url}/img/maps/pulse-alt-complete.svg'); + background-image: url('#{var.$assets-url}/img/maps/pulse-alt-complete.svg'); } &.purple { - background-image: url('#{$assets-url}/img/maps/pulse-alt-primary.svg'); + background-image: url('#{var.$assets-url}/img/maps/pulse-alt-primary.svg'); } &.yellow { - background-image: url('#{$assets-url}/img/maps/pulse-alt-warning.svg'); + background-image: url('#{var.$assets-url}/img/maps/pulse-alt-warning.svg'); } &.red { - background-image: url('#{$assets-url}/img/maps/pulse-alt-danger.svg'); + background-image: url('#{var.$assets-url}/img/maps/pulse-alt-danger.svg'); } } &.marker { - background-image: url('#{$assets-url}/img/maps/marker-master.svg'); + background-image: url('#{var.$assets-url}/img/maps/marker-master.svg'); &.green { - background-image: url('#{$assets-url}/img/maps/marker-success.svg'); + background-image: url('#{var.$assets-url}/img/maps/marker-success.svg'); } &.blue { - background-image: url('#{$assets-url}/img/maps/marker-complete.svg'); + background-image: url('#{var.$assets-url}/img/maps/marker-complete.svg'); } &.purple { - background-image: url('#{$assets-url}/img/maps/marker-primary.svg'); + background-image: url('#{var.$assets-url}/img/maps/marker-primary.svg'); } &.yellow { - background-image: url('#{$assets-url}/img/maps/marker-warning.svg'); + background-image: url('#{var.$assets-url}/img/maps/marker-warning.svg'); } &.red { - background-image: url('#{$assets-url}/img/maps/marker-danger.svg'); + background-image: url('#{var.$assets-url}/img/maps/marker-danger.svg'); } } &.marker-alt { - background-image: url('#{$assets-url}/img/maps/marker-alt-master.svg'); + background-image: url('#{var.$assets-url}/img/maps/marker-alt-master.svg'); &.green { - background-image: url('#{$assets-url}/img/maps/marker-alt-success.svg'); + background-image: url('#{var.$assets-url}/img/maps/marker-alt-success.svg'); } &.blue { - background-image: url('#{$assets-url}/img/maps/marker-alt-complete.svg'); + background-image: url('#{var.$assets-url}/img/maps/marker-alt-complete.svg'); } &.purple { - background-image: url('#{$assets-url}/img/maps/marker-alt-primary.svg'); + background-image: url('#{var.$assets-url}/img/maps/marker-alt-primary.svg'); } &.yellow { - background-image: url('#{$assets-url}/img/maps/marker-alt-warning.svg'); + background-image: url('#{var.$assets-url}/img/maps/marker-alt-warning.svg'); } &.red { - background-image: url('#{$assets-url}/img/maps/marker-alt-danger.svg'); + background-image: url('#{var.$assets-url}/img/maps/marker-alt-danger.svg'); } } } \ No newline at end of file diff --git a/resources/assets/sass/modules/_view.scss b/resources/assets/sass/modules/_view.scss index 6e9529a5..19e2906b 100644 --- a/resources/assets/sass/modules/_view.scss +++ b/resources/assets/sass/modules/_view.scss @@ -1,3 +1,5 @@ +@use "../mixins"; + /*------------------------------------------------------------------ [2. View Ports] */ @@ -57,9 +59,9 @@ width: 100%; height: 100%; vertical-align: top; - @include backface-visibility(hidden); + @include mixins.backface-visibility(hidden); -webkit-perspective: 1000; - @include transition(all 0.4s ease); + @include mixins.transition(all 0.4s ease); &:first-child{ &:before{ position: absolute; @@ -68,7 +70,7 @@ height: 100%; background-color: #000; opacity:0; - @include transition(opacity 0.2s linear); + @include mixins.transition(opacity 0.2s linear); z-index: -1 } } @@ -82,33 +84,33 @@ &.from-top{ & > .view{ &:last-child{ - @include translate3d(-100%,0,0); + @include mixins.translate3d(-100%,0,0); } } } &.push{ & > .view{ &:first-child{ - @include translate3d(-100%,0,0); + @include mixins.translate3d(-100%,0,0); } &:last-child{ - @include translate3d(-100%,0,0); + @include mixins.translate3d(-100%,0,0); } } } &.push-parrallax{ & > .view{ &:first-child{ - @include transition(all 400ms cubic-bezier(0.1,.7,.1,1)); - @include translate3d(-25%,0,0); + @include mixins.transition(all 400ms cubic-bezier(0.1,.7,.1,1)); + @include mixins.translate3d(-25%,0,0); &:before{ opacity:0; z-index: 100; } } &:last-child{ - @include transition(all 400ms cubic-bezier(0.1,.7,.1,1)); - @include translate3d(-100%,0,0); + @include mixins.transition(all 400ms cubic-bezier(0.1,.7,.1,1)); + @include mixins.translate3d(-100%,0,0); box-shadow:0 0 9px rgba(191,191,191,.36); } } diff --git a/resources/assets/sass/modules/_widgets.scss b/resources/assets/sass/modules/_widgets.scss index 8034776f..dbc666c1 100644 --- a/resources/assets/sass/modules/_widgets.scss +++ b/resources/assets/sass/modules/_widgets.scss @@ -1,3 +1,6 @@ +@use "sass:color"; +@use "../var"; + /*------------------------------------------------------------------ [27. Widgets] */ @@ -21,7 +24,7 @@ } .widget-1 { &:after { - background-image: url("#{$assets-url}/img/dashboard/pages_hero.jpg"); + background-image: url("#{var.$assets-url}/img/dashboard/pages_hero.jpg"); background-size: cover; content: " "; left: 0; @@ -33,7 +36,7 @@ opacity: .69; } &:before { - background-image: url('#{$base-img-url}/linear_gradient.png'); + background-image: url('#{var.$base-img-url}/linear_gradient.png'); background-repeat: repeat-x; content: " "; left: 0; @@ -67,7 +70,7 @@ } .widget-2 { &:after { - background-image: url("#{$assets-url}/img/social/person-cropped.jpg"); + background-image: url("#{var.$assets-url}/img/social/person-cropped.jpg"); } } .widget-3 { @@ -126,7 +129,7 @@ top: 40px; } .widget-6 { - background: mix($color-master, + background: color.mix(var.$color-master, #fff, 69%); .label { @@ -154,8 +157,8 @@ stroke-opacity: 1; } .nvd3 circle.nv-point:nth-child(4) { - fill: $color-danger !important; - stroke: $color-danger !important; + fill: var.$color-danger !important; + stroke: var.$color-danger !important; } } .widget-8{ @@ -305,7 +308,7 @@ } .widget-18-post { height:342px; - background: url('#{$assets-url}/img/social/quote.jpg'); + background: url('#{var.$assets-url}/img/social/quote.jpg'); background-position: center center; background-size: cover } @@ -404,7 +407,7 @@ opacity: .8; } .item-footer{ - color: $color-primary !important; + color: var.$color-primary !important; } } &:before{ @@ -444,7 +447,7 @@ height: 490px; } .item-footer{ - color: $color-master; + color: var.$color-master; p.pull-left{ text-overflow: ellipsis; width: 84%; diff --git a/resources/assets/vue/app.ts b/resources/assets/vue/app.ts new file mode 100644 index 00000000..344e7ccc --- /dev/null +++ b/resources/assets/vue/app.ts @@ -0,0 +1,181 @@ +import { createApp, ref, onMounted } from 'vue'; +import { useGuards } from './composables/useGuards'; +import { createPinia } from 'pinia'; +import { useUiStore } from './stores/ui'; +import { useAuthStore } from './stores/auth'; +import { useCrudStore } from './stores/crud'; +import { useNotificationStore } from './stores/notification'; +import { useQueueStore } from './stores/queue'; +import route from './general/functions/router'; +import Vapor from 'laravel-vapor'; +import { debounce } from 'vue-debounce'; +import emitter from './utils/emitter'; +import VMoney, { Money3Directive } from 'v-money3' +import Echo from 'laravel-echo'; +import Pusher from 'pusher-js'; + + +window.route = route; +window.Vapor = Vapor; +window.Vapor.withBaseAssetUrl(import.meta.env.VITE_VAPOR_ASSET_URL); + +window.Pusher = Pusher; +window.Echo = new Echo({ + broadcaster: 'pusher', + key: import.meta.env.VITE_PUSHER_APP_KEY, + cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER, + forceTLS: true +}); + +// Pinia must be created and installed before any store is used +const pinia = createPinia(); +const app = createApp({ + setup() { + const captchaId = ref(null); + const reCaptchaToken = ref(null); + const authStore = useAuthStore(); + const crudStore = useCrudStore(); + const { routesGuard, isProtectedRoute, isWithTokenRoute } = useGuards(); + + //Route Guard + routesGuard(); + + //Google reCAPTCHA + const updateCaptchaToken = () => { + // console.log('updateCaptchaToken called', { + // grecaptchaExists: !!window.grecaptcha, + // captchaId: captchaId.value, + // storeToken: authStore.getReCaptcha, + // localToken: reCaptchaToken.value + // }); + if (window.grecaptcha && captchaId.value != null && authStore.getReCaptcha === reCaptchaToken.value) { + // console.log('Executing grecaptcha.execute with ID:', captchaId.value); + window.grecaptcha.execute(captchaId.value).then((token: string) => { + // console.log('grecaptcha.execute resolved. Token:', token); + reCaptchaToken.value = token; + authStore.reCaptcha({ token }); + }).catch((err: any) => { + // console.error('grecaptcha.execute error:', err); + }); + } + }; + + const execute = debounce(() => { + // console.log('execute (debounced) called'); + updateCaptchaToken(); + }, 3000); + + (window as any).executeRecaptcha = execute; + + const render = () => { + // console.log('render called'); + if (window.grecaptcha) { + let container = document.getElementById('grecaptcha_container'); + if (!container) { + // console.log('grecaptcha_container not found, creating dynamically'); + container = document.createElement('div'); + container.setAttribute('id', 'grecaptcha_container'); + document.body.appendChild(container); + } + captchaId.value = window.grecaptcha.render('grecaptcha_container', { + sitekey: '6Lft5mkhAAAAAAFgQ0gWlwte1h-o6UPRpMNHP1xz', + badge: '', + size: 'invisible', + 'expired-callback': execute + }); + // console.log('grecaptcha.render completed. captchaId:', captchaId.value); + execute(); + } + }; + + const init = () => { + if (!document.getElementById('gRecaptchaScript')) { + window.gRecaptchaOnLoadCallbacks = [render]; + window.gRecaptchaOnLoad = function () { + for (let i = 0; i < window.gRecaptchaOnLoadCallbacks.length; i++) { + window.gRecaptchaOnLoadCallbacks[i](); + } + delete (window as any).gRecaptchaOnLoadCallbacks; + delete (window as any).gRecaptchaOnLoad; + }; + + let recaptchaScript = document.createElement('script'); + recaptchaScript.setAttribute('src', 'https://www.google.com/recaptcha/api.js?render=explicit&onload=gRecaptchaOnLoad'); + recaptchaScript.setAttribute('id', 'gRecaptchaScript'); + recaptchaScript.async = true; + recaptchaScript.defer = true; + document.head.appendChild(recaptchaScript); + } else if (!window.grecaptcha || !window.grecaptcha.render) { + if (!window.gRecaptchaOnLoadCallbacks) window.gRecaptchaOnLoadCallbacks = []; + window.gRecaptchaOnLoadCallbacks.push(render); + } else { + render(); + } + }; + + onMounted(() => { + init(); + }); + + //If a normal user opens a protected page and doesn’t already have a special token-based route, + //asks the backend for a fresh access token and updates the session without user interaction. + if ( + !authStore.isAdmin && + !('company_marking' in authStore.getDecodedAccessToken.user) && + isProtectedRoute() && + !isWithTokenRoute() + ) { + crudStore.crudRequest({ + endpoint: route('api.account.authentication.refresh'), + method: 'get' + }).then(async (response: Response) => { + if (response.ok) { + const data = await response.json(); + authStore.userAuthentication({ + access_token: data.payload.refresh_token, + redirect_url: window.location.href + }); + } + }); + } + } +}); + +// Pinia store +app.use(pinia); + +// V-Money +app.use(VMoney); +// app.directive('money', Money3Directive); + +// Expose stores for legacy Blade templates that are not SFCs +(app.config.globalProperties as any).authStore = useAuthStore(); +(app.config.globalProperties as any).uiStore = useUiStore(); + +app.config.globalProperties.route = window.route; +app.config.globalProperties.asset = window.Vapor.asset; +app.config.globalProperties.emitter = emitter; + +// Auto-register components (eager loaded) +const modules = import.meta.glob('./**/*.vue', { eager: true }); +Object.entries(modules).forEach(([path, module]) => { + const componentName = path.split('/').pop()?.split('.')[0]; + if (componentName) { + app.component(componentName, (module as any).default); + } +}); + +app.directive('tooltip', { + mounted(el, binding) { + if (window.$) { + window.$(el).tooltip({ + title: binding.value, + placement: binding.arg || 'top', + trigger: 'hover' + }); + } + } +}); + + +app.mount('#app'); diff --git a/resources/assets/vue/components/accounting/elements/EditSingleItemInListComponent.vue b/resources/assets/vue/components/accounting/elements/EditSingleItemInListComponent.vue index 5d1341b1..ddf1d68c 100644 --- a/resources/assets/vue/components/accounting/elements/EditSingleItemInListComponent.vue +++ b/resources/assets/vue/components/accounting/elements/EditSingleItemInListComponent.vue @@ -27,7 +27,7 @@
- + @@ -36,16 +36,16 @@
- + - +
- + @@ -70,78 +70,98 @@
- + diff --git a/resources/assets/vue/components/accounting/elements/HistoryImportedInvoices.vue b/resources/assets/vue/components/accounting/elements/HistoryImportedInvoices.vue index b10721ee..5c4b1a64 100644 --- a/resources/assets/vue/components/accounting/elements/HistoryImportedInvoices.vue +++ b/resources/assets/vue/components/accounting/elements/HistoryImportedInvoices.vue @@ -13,40 +13,42 @@
- + diff --git a/resources/assets/vue/components/accounting/elements/HistoryImportedReceipts.vue b/resources/assets/vue/components/accounting/elements/HistoryImportedReceipts.vue index 1b37b8ef..525b7a98 100644 --- a/resources/assets/vue/components/accounting/elements/HistoryImportedReceipts.vue +++ b/resources/assets/vue/components/accounting/elements/HistoryImportedReceipts.vue @@ -13,40 +13,43 @@
- + diff --git a/resources/assets/vue/components/accounting/elements/StatementTransactionComponent.vue b/resources/assets/vue/components/accounting/elements/StatementTransactionComponent.vue index 787f2f37..d8a8d403 100644 --- a/resources/assets/vue/components/accounting/elements/StatementTransactionComponent.vue +++ b/resources/assets/vue/components/accounting/elements/StatementTransactionComponent.vue @@ -32,7 +32,7 @@ :contentText="returnTextRevert(item.owners.approved[0].reference)" modalType="confirm" class="text-center" - :apiRoute="route('api.accounting.bankStatement.details.status.update', item.owners.approved[0].id, 'pending_verification')" + :apiRoute="(window as any).route('api.accounting.bankStatement.details.status.update', item.owners.approved[0].id, 'pending_verification')" apiMethod="post" :section="section" > @@ -57,21 +57,21 @@
-
+
{{ owner.system }}
-
+
{{ typeString(owner.type) }}
-
+
{{ owner.reference }}
@@ -83,7 +83,7 @@ :contentText="returnTextWithVariable(owner.reference)" modalType="confirm" class="text-center" - :apiRoute="route('api.accounting.bankStatement.details.status.update', owner.id, 'approve')" + :apiRoute="(window as any).route('api.accounting.bankStatement.details.status.update', owner.id, 'approve')" apiMethod="post" :section="section" > @@ -98,7 +98,7 @@ contentText="Are you sure you want to reject this mapping?" modalType="delete" class="text-center" - :apiRoute="route('api.accounting.statement_transaction.owner.status.update', owner.id, 'reject')" + :apiRoute="(window as any).route('api.accounting.statement_transaction.owner.status.update', owner.id, 'reject')" apiMethod="post" :section="section" > @@ -145,7 +145,7 @@
- +
Pending...
@@ -158,7 +158,7 @@ contentText="Are you sure you want to reject this mapping?" modalType="delete" class="text-center" - :apiRoute="route('api.accounting.statement_transaction.owner.status.update', item.owners.pending_verification[0].id, 'reject')" + :apiRoute="(window as any).route('api.accounting.statement_transaction.owner.status.update', item.owners.pending_verification[0].id, 'reject')" apiMethod="post" :section="section" > @@ -172,62 +172,69 @@
- + diff --git a/resources/assets/vue/components/accounting/elements/StatementTransactionMappedComponent.vue b/resources/assets/vue/components/accounting/elements/StatementTransactionMappedComponent.vue index e37e4f3b..3c7b6cb1 100644 --- a/resources/assets/vue/components/accounting/elements/StatementTransactionMappedComponent.vue +++ b/resources/assets/vue/components/accounting/elements/StatementTransactionMappedComponent.vue @@ -20,53 +20,50 @@
- + diff --git a/resources/assets/vue/components/accounting/forms/ImportStatementFormComponent.vue b/resources/assets/vue/components/accounting/forms/ImportStatementFormComponent.vue index 54db23df..54a383cd 100644 --- a/resources/assets/vue/components/accounting/forms/ImportStatementFormComponent.vue +++ b/resources/assets/vue/components/accounting/forms/ImportStatementFormComponent.vue @@ -3,13 +3,13 @@
- -
+ +
- - - + diff --git a/resources/assets/vue/components/accounting/sections/ImportedInvoiceMappedComponent.vue b/resources/assets/vue/components/accounting/sections/ImportedInvoiceMappedComponent.vue index 9047cc76..b6b7ab14 100644 --- a/resources/assets/vue/components/accounting/sections/ImportedInvoiceMappedComponent.vue +++ b/resources/assets/vue/components/accounting/sections/ImportedInvoiceMappedComponent.vue @@ -24,15 +24,15 @@ - + - + - + @@ -57,96 +57,88 @@ - + diff --git a/resources/assets/vue/components/accounting/sections/ImportedReceiptMappedComponent.vue b/resources/assets/vue/components/accounting/sections/ImportedReceiptMappedComponent.vue index 2e595ede..fda2207d 100644 --- a/resources/assets/vue/components/accounting/sections/ImportedReceiptMappedComponent.vue +++ b/resources/assets/vue/components/accounting/sections/ImportedReceiptMappedComponent.vue @@ -24,15 +24,15 @@
{{ item }}{{ header }}
{{index+1}} {{item.doc_no }} {{item.date}}{{item.debtor_code }}}{{item.debtor_code }} {{item.debtor_name}} {{item.shipping_info}} {{item.net_total}}
- + - + - + @@ -61,96 +61,88 @@ - + diff --git a/resources/assets/vue/components/accounting/sections/ReportTransactionsMappedComponent.vue b/resources/assets/vue/components/accounting/sections/ReportTransactionsMappedComponent.vue index 86da623c..2925c625 100644 --- a/resources/assets/vue/components/accounting/sections/ReportTransactionsMappedComponent.vue +++ b/resources/assets/vue/components/accounting/sections/ReportTransactionsMappedComponent.vue @@ -26,26 +26,26 @@ -
+
- +
- +
- + @@ -53,13 +53,13 @@
- +
- + @@ -90,8 +90,8 @@
- - - \ No newline at end of file + diff --git a/resources/assets/vue/components/accounts/forms/LoginFormComponent.vue b/resources/assets/vue/components/accounts/forms/LoginFormComponent.vue index 50c4236d..6355f8af 100644 --- a/resources/assets/vue/components/accounts/forms/LoginFormComponent.vue +++ b/resources/assets/vue/components/accounts/forms/LoginFormComponent.vue @@ -2,21 +2,16 @@
- - - - - - +
- +
- +
@@ -24,7 +19,7 @@
-

Forgot password?

+

Forgot password?

Sign In
@@ -35,30 +30,59 @@
- diff --git a/resources/assets/vue/components/accounts/forms/RegistrationFormComponent.vue b/resources/assets/vue/components/accounts/forms/RegistrationFormComponent.vue index d7a84c0b..9a9d492c 100644 --- a/resources/assets/vue/components/accounts/forms/RegistrationFormComponent.vue +++ b/resources/assets/vue/components/accounts/forms/RegistrationFormComponent.vue @@ -1,6 +1,6 @@ - diff --git a/resources/assets/vue/components/accounts/forms/ResetPasswordFormComponent.vue b/resources/assets/vue/components/accounts/forms/ResetPasswordFormComponent.vue index 417e4be0..878d4dd6 100644 --- a/resources/assets/vue/components/accounts/forms/ResetPasswordFormComponent.vue +++ b/resources/assets/vue/components/accounts/forms/ResetPasswordFormComponent.vue @@ -1,7 +1,7 @@ - \ No newline at end of file + +const parameters = reactive({ + password: '', + confirmPassword: '', + token: props.token, + email: '' // Added as per legacy data structure though not in validaitons +}); + +const v$ = useVuelidate(rules, { parameters }); + +const loginUrl = computed(() => route('login')); + +const submitForm = async () => { + const isFormValid = await v$.value.$validate(); + if (!isFormValid) return; + + await submit( + route('api.account.authentication.password.reset'), + 'post', + props.section, + false, // No success notification + false, // No default error notification + parameters, + { + successHandler: () => { + uiStore.toggleSection('resetPasswordSuccess', true); + errorMessageHandler(''); + }, + errorHandler: (response) => { + errorMessageHandler(response.message); + } + } + ); +}; + diff --git a/resources/assets/vue/components/accounts/sections/OnboardingSectionComponent.vue b/resources/assets/vue/components/accounts/sections/OnboardingSectionComponent.vue index f41485f7..176fae68 100644 --- a/resources/assets/vue/components/accounts/sections/OnboardingSectionComponent.vue +++ b/resources/assets/vue/components/accounts/sections/OnboardingSectionComponent.vue @@ -5,7 +5,7 @@
-
Welcome To Exchange System, {{$store.getters.getUserName}}
+
Welcome To Exchange System, {{authStore.getUserName}}
This is your setup guide. It has everything you need to get set up to start managing your overseas transfers.
@@ -38,44 +38,44 @@
- - + + - - diff --git a/resources/assets/vue/components/address/forms/AddressFormComponent.vue b/resources/assets/vue/components/address/forms/AddressFormComponent.vue index 2a6de3d1..19698117 100644 --- a/resources/assets/vue/components/address/forms/AddressFormComponent.vue +++ b/resources/assets/vue/components/address/forms/AddressFormComponent.vue @@ -7,7 +7,7 @@
- + @@ -15,7 +15,7 @@
- + @@ -23,13 +23,19 @@
- + - +
- + @@ -41,8 +47,21 @@
- - + +
@@ -57,7 +76,11 @@

Billing Address

-

{{parameters.street_one}} {{parameters.street_two}}, {{districts[parseFloat(parameters.district_id) - 1].city}} {{parameters.post_code}} {{districts[parseFloat(parameters.district_id) - 1].state.name}}, {{districts[parseFloat(parameters.district_id) - 1].country.name}}

+

+ {{ parameters.street_one }} {{ parameters.street_two }}, + {{ selectedDistrict?.city }} {{ parameters.post_code }} + {{ selectedDistrict?.state.name }}, {{ selectedDistrict?.country.name }} +

@@ -70,7 +93,7 @@
- +
@@ -80,95 +103,136 @@
- + diff --git a/resources/assets/vue/components/address/forms/EInvoiceInfoFormComponent.vue b/resources/assets/vue/components/address/forms/EInvoiceInfoFormComponent.vue index f39a141f..d7bdcecc 100644 --- a/resources/assets/vue/components/address/forms/EInvoiceInfoFormComponent.vue +++ b/resources/assets/vue/components/address/forms/EInvoiceInfoFormComponent.vue @@ -12,13 +12,13 @@
- +
- +
- + @@ -39,7 +39,7 @@
- + @@ -47,13 +47,19 @@
- + - +
- + @@ -61,9 +67,15 @@
- + - +
@@ -73,9 +85,13 @@
- + @click="updateStep(2)" + > + Update E-Invoice Info +
@@ -86,7 +102,7 @@ id="e-invoice-request-link" href="javascript:void(0);" class="fs-12 text-complete text-underline pointer" - @click="updateChangeOfMind()" + @click="updateChangeOfMind" > I don't need now @@ -107,15 +123,15 @@

TIN

-

{{parameters.tin}}

+

{{ parameters.tin }}

-
+

MSIC Code

-

{{parameters.msic_code}}

+

{{ parameters.msic_code }}

@@ -123,7 +139,11 @@

Billing Address

-

{{parameters.street_one}} {{parameters.street_two}}, {{districts[parseFloat(parameters.district_id) - 1].city}} {{parameters.post_code}} {{states[parseFloat(parameters.state_id) - 1].state}}, {{districts[parseFloat(parameters.district_id) - 1].country.name}}

+

+ {{ parameters.street_one }} {{ parameters.street_two }}, + {{ selectedDistrict?.city }} {{ parameters.post_code }} + {{ selectedState?.state }}, {{ selectedDistrict?.country.name }} +

@@ -136,7 +156,7 @@
- +
@@ -146,133 +166,147 @@
- + diff --git a/resources/assets/vue/components/address/forms/SetDefaultBillingAddressComponent.vue b/resources/assets/vue/components/address/forms/SetDefaultBillingAddressComponent.vue index d89b598a..d0af6e31 100644 --- a/resources/assets/vue/components/address/forms/SetDefaultBillingAddressComponent.vue +++ b/resources/assets/vue/components/address/forms/SetDefaultBillingAddressComponent.vue @@ -1,22 +1,32 @@ - \ No newline at end of file diff --git a/resources/assets/vue/components/announcements/elements/AnnouncementListComponent.vue b/resources/assets/vue/components/announcements/elements/AnnouncementListComponent.vue index 0626be82..792eff1b 100644 --- a/resources/assets/vue/components/announcements/elements/AnnouncementListComponent.vue +++ b/resources/assets/vue/components/announcements/elements/AnnouncementListComponent.vue @@ -22,7 +22,7 @@
-
{{item.title | truncate(20)}}
+
{{truncate(item.title, 20)}}
@@ -34,7 +34,7 @@
-
{{item.description | truncate(15)}}
+
{{truncate(item.description, 15)}}
@@ -45,7 +45,7 @@ View
- - diff --git a/resources/assets/vue/components/bookings/elements/BookingMergeableComponent.vue b/resources/assets/vue/components/bookings/elements/BookingMergeableComponent.vue index e4a53139..e66de00e 100644 --- a/resources/assets/vue/components/bookings/elements/BookingMergeableComponent.vue +++ b/resources/assets/vue/components/bookings/elements/BookingMergeableComponent.vue @@ -8,74 +8,76 @@
- +
-
{{this.item.created_at}}
+
{{item.created_at}}
-
{{this.item.marking}}
+
{{item.marking}}
- {{this.item.convertible_currency.short_code}} + {{item.convertible_currency.short_code}}
-
{{this.item.service.name}}
+
{{item.service.name}}
-
{{formatAmount(this.item.purchase_order.amount)}} {{this.item.purchase_order.original_currency.short_code}}
+
{{formatAmount(item.purchase_order.amount)}} {{item.purchase_order.original_currency.short_code}}
-
{{formatAmount(this.item.amount)}} {{this.item.fixed_currency.short_code}}
+
{{formatAmount(item.amount)}} {{item.fixed_currency.short_code}}
-
-
-
{{po.description}}
+
- - \ No newline at end of file + diff --git a/resources/assets/vue/components/bookings/elements/BookingPaymentRecipientEditComponent.vue b/resources/assets/vue/components/bookings/elements/BookingPaymentRecipientEditComponent.vue index 12b673af..c74bd4ff 100644 --- a/resources/assets/vue/components/bookings/elements/BookingPaymentRecipientEditComponent.vue +++ b/resources/assets/vue/components/bookings/elements/BookingPaymentRecipientEditComponent.vue @@ -118,60 +118,69 @@
- diff --git a/resources/assets/vue/components/bookings/elements/BookingRecipientEditComponent.vue b/resources/assets/vue/components/bookings/elements/BookingRecipientEditComponent.vue index 8690d262..95efd8af 100644 --- a/resources/assets/vue/components/bookings/elements/BookingRecipientEditComponent.vue +++ b/resources/assets/vue/components/bookings/elements/BookingRecipientEditComponent.vue @@ -108,61 +108,73 @@ - diff --git a/resources/assets/vue/components/bookings/elements/BookingStatusComponent.vue b/resources/assets/vue/components/bookings/elements/BookingStatusComponent.vue index 25f4c2fd..8ac223c2 100644 --- a/resources/assets/vue/components/bookings/elements/BookingStatusComponent.vue +++ b/resources/assets/vue/components/bookings/elements/BookingStatusComponent.vue @@ -1,10 +1,13 @@ - \ No newline at end of file diff --git a/resources/assets/vue/components/bookings/elements/CurrencyOrderComponent.vue b/resources/assets/vue/components/bookings/elements/CurrencyOrderComponent.vue index a88fd5a9..c345f217 100644 --- a/resources/assets/vue/components/bookings/elements/CurrencyOrderComponent.vue +++ b/resources/assets/vue/components/bookings/elements/CurrencyOrderComponent.vue @@ -7,7 +7,7 @@
- - diff --git a/resources/assets/vue/components/bookings/elements/DownloadBillingWithDatesComponent.vue b/resources/assets/vue/components/bookings/elements/DownloadBillingWithDatesComponent.vue index 1c96cb94..d7f97ecf 100644 --- a/resources/assets/vue/components/bookings/elements/DownloadBillingWithDatesComponent.vue +++ b/resources/assets/vue/components/bookings/elements/DownloadBillingWithDatesComponent.vue @@ -5,28 +5,26 @@
- +
- +
- + - +
- - Export - + Export
@@ -36,102 +34,92 @@
- diff --git a/resources/assets/vue/components/bookings/elements/DownloadSupplierWhiteFormComponent.vue b/resources/assets/vue/components/bookings/elements/DownloadSupplierWhiteFormComponent.vue index 732770e5..0b7a5c4c 100644 --- a/resources/assets/vue/components/bookings/elements/DownloadSupplierWhiteFormComponent.vue +++ b/resources/assets/vue/components/bookings/elements/DownloadSupplierWhiteFormComponent.vue @@ -5,28 +5,26 @@
- + - +
- +
- +
- - Export - + Export
@@ -34,7 +32,7 @@
-
+
@@ -52,54 +50,53 @@
- diff --git a/resources/assets/vue/components/bookings/elements/DownloadTransactionsReportComponent.vue b/resources/assets/vue/components/bookings/elements/DownloadTransactionsReportComponent.vue index c808dae9..cdab93e0 100644 --- a/resources/assets/vue/components/bookings/elements/DownloadTransactionsReportComponent.vue +++ b/resources/assets/vue/components/bookings/elements/DownloadTransactionsReportComponent.vue @@ -32,77 +32,76 @@ Download
-
- -
+ - diff --git a/resources/assets/vue/components/bookings/elements/DownloadUploadComponent.vue b/resources/assets/vue/components/bookings/elements/DownloadUploadComponent.vue index 1d48c642..67f624d4 100644 --- a/resources/assets/vue/components/bookings/elements/DownloadUploadComponent.vue +++ b/resources/assets/vue/components/bookings/elements/DownloadUploadComponent.vue @@ -5,7 +5,7 @@
- +
- +
- + - +
- - Export - - + Export +
- +
@@ -103,14 +101,14 @@ Process E-Invoices + class="animate__animated animate__fast animate__fadeIn" + styleType="fill-in" size="large" + id="modal-generate-einvoice"> - + + - diff --git a/resources/assets/vue/components/bookings/elements/SupplierPendingOrderComponent.vue b/resources/assets/vue/components/bookings/elements/SupplierPendingOrderComponent.vue index 860a493c..958f8cd7 100644 --- a/resources/assets/vue/components/bookings/elements/SupplierPendingOrderComponent.vue +++ b/resources/assets/vue/components/bookings/elements/SupplierPendingOrderComponent.vue @@ -3,9 +3,9 @@
-
+
-
+
@@ -23,9 +23,9 @@
timer
-
- {{item.interval.value}} - {{item.interval.duration}} +
+ {{ item.interval.value }} + {{ item.interval.duration }} days
@@ -41,19 +41,19 @@
reference
- {{item.booking.marking}} + {{ item.booking.marking }}
Marking
- {{item.booking.company.reference}} + {{ item.booking.company.reference }}
Currency
- {{item.original_currency.short_code}} + {{ item.original_currency.short_code }}
-
- - + recipientBanksAmended.billNo = payment.bill_no; + recipientBanksAmended.transactionId = payment.id; + } + + return recipientBanksAmended; +}; + +const updatedBankDetails = (bank: any, transactionId: number) => { + const index = item.value.payment_history.findIndex((payment: any) => payment.id === transactionId); + if (index !== -1) { + item.value.payment_history[index].bank = { ...bank }; + } +}; + +const getPayloadToResetDefault = (payment: any, booking: any) => { + return { + transactionId: payment.id, + bookingBankId: booking.bank.id + }; +}; + diff --git a/resources/assets/vue/components/bookings/forms/EditTransactionGroupFormComponent.vue b/resources/assets/vue/components/bookings/forms/EditTransactionGroupFormComponent.vue index 4d8dd262..8eeeb640 100644 --- a/resources/assets/vue/components/bookings/forms/EditTransactionGroupFormComponent.vue +++ b/resources/assets/vue/components/bookings/forms/EditTransactionGroupFormComponent.vue @@ -15,7 +15,7 @@
- + @@ -23,9 +23,9 @@
- + - +
@@ -42,51 +42,55 @@
- diff --git a/resources/assets/vue/components/bookings/forms/ExportBookingTransactionFormComponent.vue b/resources/assets/vue/components/bookings/forms/ExportBookingTransactionFormComponent.vue index d53dce7e..744ffaf8 100644 --- a/resources/assets/vue/components/bookings/forms/ExportBookingTransactionFormComponent.vue +++ b/resources/assets/vue/components/bookings/forms/ExportBookingTransactionFormComponent.vue @@ -7,24 +7,24 @@
- +
- +
- +
- + @@ -39,72 +39,69 @@
- diff --git a/resources/assets/vue/components/bookings/forms/PaymentProofFormComponent.vue b/resources/assets/vue/components/bookings/forms/PaymentProofFormComponent.vue index 0c85a3f7..325bd5c8 100644 --- a/resources/assets/vue/components/bookings/forms/PaymentProofFormComponent.vue +++ b/resources/assets/vue/components/bookings/forms/PaymentProofFormComponent.vue @@ -1,8 +1,8 @@ - diff --git a/resources/assets/vue/components/settings/forms/EditUserProfileFullnameFormComponent.vue b/resources/assets/vue/components/settings/forms/EditUserProfileFullnameFormComponent.vue index de490b7e..b9655c0b 100644 --- a/resources/assets/vue/components/settings/forms/EditUserProfileFullnameFormComponent.vue +++ b/resources/assets/vue/components/settings/forms/EditUserProfileFullnameFormComponent.vue @@ -10,15 +10,15 @@
- + - +
- {{error}} + {{ error }}
@@ -26,7 +26,13 @@
Cancel
-
Update
+
+ Update +
@@ -34,18 +40,62 @@
- \ No newline at end of file +}; + +const parameters = reactive({ + name: '' +}); + +const v$ = useVuelidate(rules, { parameters }); + +onMounted(() => { + parameters.name = authStore.getUserName; +}); + +const { submit, closeModal, error, formHandler } = useFormHandler({ section: props.section }); + +const submitForm = async () => { + const isFormValid = await v$.value.$validate(); + if (!isFormValid) return; + + await submit( + route('api.account.user.update', authStore.getUserId), + 'put', + props.section, + true, + true, + parameters, + { + successHandler: (response: any) => { + if (response?.payload?.data?.name) { + authStore.updateProfile({ fullname:response.payload.data.name } ); + } + closeModal(); + formHandler(); + } + } + ); +}; + diff --git a/resources/assets/vue/components/settings/forms/PaymentAttemptLimitFormComponent.vue b/resources/assets/vue/components/settings/forms/PaymentAttemptLimitFormComponent.vue index 63be0142..04863e59 100644 --- a/resources/assets/vue/components/settings/forms/PaymentAttemptLimitFormComponent.vue +++ b/resources/assets/vue/components/settings/forms/PaymentAttemptLimitFormComponent.vue @@ -16,7 +16,7 @@
- +
@@ -29,7 +29,7 @@
- +
@@ -42,7 +42,7 @@
- +
@@ -53,7 +53,7 @@
Cancel
-
Update
+
Update
@@ -61,51 +61,76 @@
- \ No newline at end of file + hours.value = formatTime(next); + updateMinutes(); +}); + +watch(minutes, (value) => { + let next = parseInt(value); + if (next > 59) { + next -= 60; + hours.value = String(parseInt(hours.value) + 1); + } + minutes.value = formatTime(next); + updateMinutes(); +}); + +watch( + () => props.data, + (value) => { + const totalMinutes = value?.detail?.minutes || 0; + days.value = formatTime(Math.floor(totalMinutes / 1440)); + hours.value = formatTime(Math.floor(totalMinutes / 60) % 24); + minutes.value = formatTime(Math.floor(totalMinutes % 60)); + updateMinutes(); + }, + { immediate: true } +); + +const submitForm = () => { + submit(route('api.segment.constant.update', props.data.segment_id), 'put', props.section, true, true, parameters.value); +}; + diff --git a/resources/assets/vue/components/settings/forms/ResetUserPasswordFormComponent.vue b/resources/assets/vue/components/settings/forms/ResetUserPasswordFormComponent.vue index ca22298d..e7c89d4b 100644 --- a/resources/assets/vue/components/settings/forms/ResetUserPasswordFormComponent.vue +++ b/resources/assets/vue/components/settings/forms/ResetUserPasswordFormComponent.vue @@ -11,7 +11,7 @@
- {{error}} + {{ error }}
@@ -19,7 +19,7 @@
Cancel
-
Confirm
+
Confirm
@@ -27,18 +27,41 @@ - \ No newline at end of file +}; +const v$ = useVuelidate(rules, { parameters }) as any; + +const submitForm = () => { + submit(route('api.account.authentication.password.forget', '1'), 'post', props.section, true, true, parameters, { + validate: async () => { + const isValid = await v$.value.$validate(); + return isValid; + } + }); +}; + diff --git a/resources/assets/vue/components/settings/forms/SegmentFormComponent.vue b/resources/assets/vue/components/settings/forms/SegmentFormComponent.vue index 1ddb1242..c017d7af 100644 --- a/resources/assets/vue/components/settings/forms/SegmentFormComponent.vue +++ b/resources/assets/vue/components/settings/forms/SegmentFormComponent.vue @@ -1,8 +1,8 @@ - \ No newline at end of file +}); + +const rules = { + parameters: { + name: { required } + } +}; + +const v$ = useVuelidate(rules, { parameters }); + +const headerTitle = computed(() => { + if (props.type === 1) return 'Create Standard Segment'; + if (props.type === 2) return 'Create Custom Segment'; + if (props.type === 3) return 'Create Label'; + return 'Create'; +}); + +const submitForm = async () => { + const isValid = await v$.value.$validate(); + if (!isValid) return; + submit(route('api.segment.create'), 'post', props.section, true, false, parameters.value); +}; + diff --git a/resources/assets/vue/components/settings/forms/SegmentServiceFormComponent.vue b/resources/assets/vue/components/settings/forms/SegmentServiceFormComponent.vue index a3ece6fa..c07a76a4 100644 --- a/resources/assets/vue/components/settings/forms/SegmentServiceFormComponent.vue +++ b/resources/assets/vue/components/settings/forms/SegmentServiceFormComponent.vue @@ -1,8 +1,8 @@ - \ No newline at end of file +); + +parameters.value.custom_fields = custom_fields; +if (!parameters.value.configurations) { + parameters.value.configurations = { + active: false, + bank_id: '', + service_charge: 0, + minimum_charge: 0, + tax: 0, + po_limit: 0, + currencies: [] + }; +} + +const custom_field = computed({ + get: () => parameters.value.custom_field || '', + set: (value: string) => { + parameters.value.custom_field = value; + } +}); + +const inActiveFields = computed(() => { + return Object.keys(custom_fields).map((key) => ({ id: key, text: custom_fields[key].name })); +}); + +const rules = { + custom_field: {}, + parameters: { + configurations: { + bank_id: {}, + service_charge: {}, + minimum_charge: {}, + tax: {}, + po_limit: {} + } + } +}; + +const v$ = useVuelidate(rules, { custom_field, parameters }); + +const activateCustomField = (fieldName: string, status: boolean) => { + if (fieldName !== '') { + custom_fields[fieldName].active = status; + if (!status && parameters.value.configurations[fieldName] !== undefined) { + parameters.value.configurations[fieldName] = ''; + } + } +}; + +const updateActiveCustomFields = () => { + if (!props.data) return; + + if (props.data.detail) { + Object.keys(props.data.detail).forEach((key) => { + if (Object.prototype.hasOwnProperty.call(custom_fields, key)) { + custom_fields[key].active = true; + } + }); + } + + if (props.data.configurations) { + parameters.value.configurations = { + active: Object.prototype.hasOwnProperty.call(props.data.configurations, 'active') ? props.data.configurations.active : false, + bank_id: Object.prototype.hasOwnProperty.call(props.data.configurations, 'bank_id') ? props.data.configurations.bank_id : '', + service_charge: Object.prototype.hasOwnProperty.call(props.data.configurations, 'service_charge') ? props.data.configurations.service_charge.value : 0, + minimum_charge: Object.prototype.hasOwnProperty.call(props.data.configurations, 'minimum_charge') ? props.data.configurations.minimum_charge.value : 0, + tax: Object.prototype.hasOwnProperty.call(props.data.configurations, 'tax') ? props.data.configurations.tax.value : 0, + po_limit: Object.prototype.hasOwnProperty.call(props.data.configurations, 'po_limit') ? props.data.configurations.po_limit.value : 0, + currencies: Object.prototype.hasOwnProperty.call(props.data.configurations, 'currencies') ? props.data.configurations.currencies : [] + }; + } +}; + +watch( + () => props.data, + () => { + updateActiveCustomFields(); + }, + { immediate: true } +); + +const submitForm = async () => { + parameters.value.id = props.data.id; + parameters.value.custom_fields = { + bank_id: custom_fields.bank_id.active ? parameters.value.configurations.bank_id : null, + service_charge: custom_fields.service_charge.active ? { type: 'percentage', value: parameters.value.configurations.service_charge } : null, + minimum_charge: custom_fields.minimum_charge.active ? { type: 'fixed_amount', value: parameters.value.configurations.minimum_charge } : null, + tax: custom_fields.tax.active ? { type: 'percentage', value: parameters.value.configurations.tax } : null, + po_limit: custom_fields.po_limit.active ? { type: 'fixed_amount', value: parameters.value.configurations.po_limit } : null + }; + + await submit(route('api.segment.constant.service.update', props.segment_id, parameters.value.id), 'put', 'segmentSection', true, true, parameters.value); +}; + diff --git a/resources/assets/vue/components/settings/forms/ServiceFormComponent.vue b/resources/assets/vue/components/settings/forms/ServiceFormComponent.vue index d92a8c84..195b4835 100644 --- a/resources/assets/vue/components/settings/forms/ServiceFormComponent.vue +++ b/resources/assets/vue/components/settings/forms/ServiceFormComponent.vue @@ -1,8 +1,8 @@ - \ No newline at end of file +}); + +const rules = { + parameters: { + name: { required }, + configurations: { + bank_id: { required }, + service_charge: { + value: { required } + }, + minimum_charge: { + value: { required } + }, + tax: { + value: { required } + }, + po_limit: { + value: { + required, + minValue: minValue(1) + } + } + } + } +}; + +const v$ = useVuelidate(rules, { parameters }); + +const submitForm = async () => { + const isValid = await v$.value.$validate(); + if (!isValid) return; + + const endpoint = props.data + ? route('api.service_type.update', props.data.id) + : route('api.service_type.create'); + const method = props.data ? 'put' : 'post'; + + await submit(endpoint, method, props.section, true, true, parameters.value); +}; + diff --git a/resources/assets/vue/components/settings/forms/UpdateServiceStatusFormComponent.vue b/resources/assets/vue/components/settings/forms/UpdateServiceStatusFormComponent.vue index aef5b89f..a3f0072f 100644 --- a/resources/assets/vue/components/settings/forms/UpdateServiceStatusFormComponent.vue +++ b/resources/assets/vue/components/settings/forms/UpdateServiceStatusFormComponent.vue @@ -7,7 +7,7 @@

Are you Sure?

-
Are you sure you want to {{item.status !== 2 ? 'Activate':'Deactivate'}} {{item.name}} service?
+
Are you sure you want to {{ item.status !== 2 ? 'Activate':'Deactivate' }} {{ item.name }} service?
@@ -15,7 +15,7 @@
Cancel
-
{{item.status !== 2 ? 'Activate':'Deactivate'}}
+
{{ item.status !== 2 ? 'Activate':'Deactivate' }}
@@ -23,11 +23,19 @@ - \ No newline at end of file +interface Props { + section: string; + data: any; +} + +const props = defineProps(); +const section = props.section; + +const { item } = useComponentHandler(props); +const { submit, isLoading } = useFormHandler(props); + diff --git a/resources/assets/vue/components/settings/forms/ViewChatGptFormComponent.vue b/resources/assets/vue/components/settings/forms/ViewChatGptFormComponent.vue index cd94d1d9..4afff661 100644 --- a/resources/assets/vue/components/settings/forms/ViewChatGptFormComponent.vue +++ b/resources/assets/vue/components/settings/forms/ViewChatGptFormComponent.vue @@ -4,7 +4,7 @@
{{ item }}{{ header }}
{{index+1}} {{item.check }} {{item.doc_no}}{{item.doc_date }}}{{item.doc_date }} {{item.debtor_code}} {{item.company_name}} {{item.description}}