From 51ae5c756eca3a134af0e1ab0c93310fba9f607c Mon Sep 17 00:00:00 2001 From: Dillon Ngo Date: Wed, 27 May 2026 20:43:27 +0800 Subject: [PATCH 1/5] Update: Vue 2 to Vue 3 with Typescript, node 14 to node 22, Jenkinsfile, Dockerfile, vapor.yml --- .env.testing | 2 +- Jenkinsfile | 2 +- app/Http/Resources/UserCompanyResource.php | 8 +- docker-setup/Dockerfile | 2 +- docker-setup/docker-compose.yml | 9 +- package.json | 135 +-- resources/assets/css/site.css | 2 + resources/assets/css/vendor.css | 14 + resources/assets/js/scripts.js | 6 +- resources/assets/js/site.js | 3 + resources/assets/js/vendor.js | 17 + resources/assets/sass/_color.scss | 302 +++--- 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/main.scss | 12 +- resources/assets/sass/modules/_alerts.scss | 35 +- resources/assets/sass/modules/_animation.scss | 26 +- resources/assets/sass/modules/_buttons.scss | 167 +-- 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 | 317 +++--- resources/assets/sass/modules/_layout.scss | 344 ++++--- 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 | 152 +-- resources/assets/sass/modules/_timeline.scss | 20 +- resources/assets/sass/modules/_treeview.scss | 10 +- .../assets/sass/modules/_typography.scss | 222 ++-- .../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 | 472 +++++++++ .../elements/EmailVerificationComponent.vue | 62 +- .../accounts/elements/LogoutComponent.vue | 148 +-- .../CompleteRegistrationFormComponent.vue | 165 ++- .../forms/CrossPlatformLoginFormComponent.vue | 56 +- .../forms/DeliveryLoginFormComponent.vue | 94 +- .../forms/EmailVerificationFormComponent.vue | 38 +- .../forms/ForgetPasswordFormComponent.vue | 103 +- .../forms/InviteRegistrationFormComponent.vue | 104 +- .../accounts/forms/LoginFormComponent.vue | 94 +- .../forms/NewRegistrationFormComponent.vue | 104 +- .../RegistrationCheckEmailFormComponent.vue | 116 ++- .../forms/RegistrationFormComponent.vue | 178 ++-- .../forms/ResetPasswordFormComponent.vue | 97 +- .../sections/RegistrationSectionComponent.vue | 37 +- .../addresses/elements/AddressComponent.vue | 59 +- .../elements/AddressVerificationComponent.vue | 60 +- .../DisplayWarehouseAddressComponent.vue | 60 +- .../elements/SelectAddressComponent.vue | 102 +- .../addresses/forms/AddressFormComponent.vue | 239 +++-- .../forms/DeleteAddressFormComponent.vue | 21 +- .../forms/SetDefaultAddressFormComponent.vue | 21 +- .../forms/WarehouseAddressFormComponent.vue | 231 ++--- .../sections/AddressListComponent.vue | 40 +- .../AddressProfileSectionComponent.vue | 13 +- .../BillingAddressSectionComponent.vue | 124 +-- .../elements/AnnouncementListComponent.vue | 39 +- ...signAnnouncementToSegmentFormComponent.vue | 82 +- ...chAnnouncementFromSegmentFormComponent.vue | 36 +- .../forms/ViewAnnouncementFormComponent.vue | 48 +- .../AnnouncementQuickViewSectionComponent.vue | 81 +- .../companies/elements/CompanyComponent.vue | 28 +- .../CustomerPaymentBillingInnerComponent.vue | 292 +++--- .../elements/CustomerProfileComponent.vue | 77 +- .../DownloadCustomersDataReportComponent.vue | 106 +- ...eivePaymentDepositEntryReportComponent.vue | 117 ++- ...dReceivePaymentForOrderReportComponent.vue | 122 +-- ...nloadUnpaidSalesInvoiceReportComponent.vue | 117 ++- ...nloadUploadSalesInvoiceReportComponent.vue | 144 +-- .../elements/EInvoiceInfoComponent.vue | 53 +- .../FulfilmentInterestedFormComponent.vue | 133 ++- .../IdentificationVerificationComponent.vue | 82 +- .../NewServiceAnnouncementComponent.vue | 95 +- .../elements/UserCompanyComponent.vue | 20 +- .../elements/VerificationWarningComponent.vue | 13 +- .../elements/WarehouseListExportComponent.vue | 77 +- .../forms/AssignSegmentFormComponent.vue | 96 +- .../companies/forms/ContactFormComponent.vue | 100 +- .../forms/DetachSegmentFormComponent.vue | 51 +- .../forms/EInvoiceInfoFormComponent.vue | 221 ++-- .../forms/EInvoiceRequestFormComponent.vue | 73 +- ...dentificationVerificationFormComponent.vue | 77 +- ...dentificationVerificationFormComponent.vue | 111 +- .../forms/UpdateCompanyNameFormComponent.vue | 73 +- .../UpdateCreditTermStatusFormComponent.vue | 51 +- ...pdateIdentificationNumberFormComponent.vue | 87 +- ...CustomerPaymentBillingSectionComponent.vue | 109 +- ...CustomerProfileDetailsSectionComponent.vue | 103 +- .../CustomerProfileSectionComponent.vue | 179 ++-- ...eliveryCustomerProfileSectionComponent.vue | 96 +- .../sections/OnBoardingSectionComponent.vue | 14 +- .../WarehouseDetailsSectionComponent.vue | 89 +- .../sections/WarehouseSectionComponent.vue | 35 +- .../elements/ContainerCommentComponent.vue | 37 +- .../elements/ContainerComponent.vue | 30 +- .../elements/ContainerSearchComponent.vue | 66 +- .../elements/PackingListComponent.vue | 106 +- .../elements/UploadDebtorExcelComponent.vue | 104 +- .../WarehousePackingListComponent.vue | 53 +- .../forms/ContainerArrivalFormComponent.vue | 57 +- .../forms/ContainerCommentFormComponent.vue | 89 +- .../forms/ContainerDepatureFormComponent.vue | 59 +- .../forms/ContainerUnpackingFormContainer.vue | 28 +- .../CreateLoadContainerFormComponent.vue | 104 +- .../CreateWarehouseTransportFormComponent.vue | 84 +- .../DeclarePostcodeAreaFormComponent.vue | 49 +- .../DeleteContainerCommentFormComponent.vue | 20 +- .../EditContainerCommentFormComponent.vue | 62 +- .../forms/ListPackagelistFormComponent.vue | 69 +- .../forms/RescheduleDateFormComponent.vue | 59 +- .../RescheduleTransportDateFormComponent.vue | 69 +- .../ContainerProfileSectionComponent.vue | 188 ++-- .../ContainerProfileV2SectionComponent.vue | 140 ++- .../sections/PackingListSectionComponent.vue | 61 +- .../elements/QuestionAnswerComponent.vue | 15 +- .../feedback/forms/FeedbackFormComponent.vue | 184 ++-- .../GenerateFeedbackLinkFormComponent.vue | 121 ++- .../AdminFeedbackCustomerSectionComponent.vue | 4 +- .../FeedbackCustomerSectionComponent.vue | 100 +- .../general/elements/AnchorLinkComponent.vue | 112 +- .../elements/DocumentFileViewerComponent.vue | 153 +-- .../elements/ErrorMessageComponent.vue | 12 +- .../general/elements/HelpMenuComponent.vue | 4 +- .../general/elements/ListComponent.vue | 146 +-- .../general/elements/ListPollingComponent.vue | 233 +++-- .../general/elements/LoadingComponent.vue | 61 +- .../general/elements/ModalComponent.vue | 46 +- .../elements/NotificationSectionComponent.vue | 64 +- .../elements/OpenLinkInNewTabComponent.vue | 170 ++- .../general/elements/PaginationComponent.vue | 92 +- .../PasswordProtectedDownloadComponent.vue | 168 ++- .../general/elements/PdfViewerComponent.vue | 82 +- .../general/elements/RemarkComponent.vue | 23 +- .../general/elements/RemarkListComponent.vue | 32 +- .../general/elements/SearchComponent.vue | 60 +- .../general/elements/TransitionComponent.vue | 98 +- .../general/elements/bearComponent.vue | 11 +- .../general/forms/DatePickerComponent.vue | 59 +- .../forms/DatePickerLimitRangeComponent.vue | 86 +- .../forms/DeleteRemarkFormComponent.vue | 20 +- .../general/forms/FileInputComponent.vue | 38 +- .../general/forms/FileUploadComponent.vue | 185 ++-- .../GeneralConfirmationFormComponent.vue | 78 +- .../general/forms/HelpMenuFormComponent.vue | 326 +++--- .../general/forms/ModalFormComponent.vue | 33 +- .../forms/ReloadConfirmationFormComponent.vue | 46 +- .../forms/RemarkCommentFormComponent.vue | 92 +- .../general/forms/RemarkFormComponent.vue | 81 +- .../general/forms/SelectComponent.vue | 146 ++- .../general/forms/SelectableComponent.vue | 83 +- .../forms/ValidationErrorComponent.vue | 78 +- .../forms/ValidationWrapperComponent.vue | 27 +- .../sections/SupportSectionComponent.vue | 87 +- .../ApproveChangeAddressComponent.vue | 30 +- .../orders/elements/ListOrderComponent.vue | 184 ++-- .../orders/elements/OrderComponent.vue | 125 ++- .../OrderPackageDeliveryComponent.vue | 80 +- ...erPackageDestinationWarehouseComponent.vue | 77 +- .../OrderPackageInTransitComponent.vue | 78 +- .../OrderPackageOriginWarehouseComponent.vue | 90 +- .../elements/OrderPackageSummaryComponent.vue | 113 +- .../elements/OrderPackagesComponent.vue | 127 +-- .../elements/OrderPackagesV2Component.vue | 115 ++- ...rderPackagesV2OriginWarehouseComponent.vue | 91 +- .../orders/elements/PackageComponent.vue | 66 +- .../orders/elements/PackageV2Component.vue | 47 +- .../orders/elements/ParcelComponent.vue | 46 +- .../orders/elements/QuickOrderComponent.vue | 94 +- .../UnclaimedPackinglistComponent.vue | 74 +- .../orders/elements/UploadComponent.vue | 86 +- .../ApproveChangeAddressFormComponent.vue | 51 +- .../CancelDeliveryOrderFormComponent.vue | 40 +- .../orders/forms/CancelOrderFormComponent.vue | 45 +- .../ChangeAdminRoleTypeFormComponent.vue | 51 +- .../forms/ChangeBusinessTypeFormComponent.vue | 48 +- ...ngeCustomerCompanyDetailsFormComponent.vue | 211 ++-- ...angeCustomerContactNumberFormComponent.vue | 93 +- .../ChangeCustomerEmailFormComponent.vue | 106 +- .../forms/ChangeCustomerNameFormComponent.vue | 86 +- .../forms/ChangeOrderAddressFormComponent.vue | 82 +- .../forms/ChangeOrderNumberFormComponent.vue | 67 +- .../forms/ClaimPackinglistFormComponent.vue | 59 +- .../forms/CreatePackageFormComponent.vue | 109 +- ...CreateShippingPackageListFormComponent.vue | 60 +- ...reateWarehousePackageListFormComponent.vue | 82 +- .../forms/DeletePackinglistFormComponent.vue | 17 +- .../DeleteTaxRebateQrCodeFormComponent.vue | 41 +- .../forms/DeliveryOrderFormComponent.vue | 226 ++-- .../orders/forms/OrderFormComponent.vue | 108 +- .../orders/forms/PackageFormComponent.vue | 200 ++-- .../forms/RestoreOrderFormComponent.vue | 43 +- .../forms/TaxRebateQrCodeFormComponent.vue | 184 ++-- .../DeliveryOrdersSectionComponent.vue | 289 +++--- .../DeliveryOrdersTableSectionComponent.vue | 257 ++--- .../OrderPackageReceivedSectionComponent.vue | 35 +- .../OrderPackageV3SectionComponent.vue | 41 +- .../OrderProfileV2SectionComponent.vue | 210 ++-- .../sections/OrderSearchSectionComponent.vue | 55 +- .../orders/sections/OrderSectionComponent.vue | 47 +- .../sections/OrdersTableSectionComponent.vue | 229 +++-- .../AdminDisputePaymentsBillingComponent.vue | 103 +- ...dminPaymentsBillingWithSearchComponent.vue | 79 +- ...mentsBillingWithSearchPollingComponent.vue | 72 +- .../elements/CustPayBillParentComponent.vue | 149 +-- .../CustPayBillParentVariant2Component.vue | 181 ++-- .../CustomerPaymentsBillingComponent.vue | 210 ++-- ...merPaymentsBillingWithStorageComponent.vue | 412 ++++---- .../GroupPaymentsBillingComponents.vue | 172 ++-- .../elements/PaymentExpiredComponent.vue | 20 +- .../elements/PaymentFilterComponent.vue | 78 +- .../elements/PaymentHistoryComponent.vue | 84 +- .../elements/PaymentVerificationComponent.vue | 61 +- .../elements/PaymentsBillingComponents.vue | 104 +- .../PaymentsBillingVariant2Components.vue | 341 +++---- .../elements/ShippingTransactionComponent.vue | 52 +- ...minPaymentsBillingWithStorageComponent.vue | 195 ++-- ...PaymentsBillingWithoutStorageComponent.vue | 162 +-- ...mentHistoryTransactionDetailsComponent.vue | 52 +- ...roupPaymentTransactionDetailsComponent.vue | 64 +- ...gleParentAdminPaymentsBillingComponent.vue | 111 +- .../ApproveShippingInvoiceFormComponent.vue | 18 +- .../CustomerInvoiceRemarkFormComponent.vue | 88 +- .../forms/DeleteDisputeFormComponent.vue | 18 +- ...DeleteGroupPaymentAttemptFormComponent.vue | 34 +- .../forms/DeleteInvoiceFormComponent.vue | 20 +- .../forms/DeleteParcelFormComponent.vue | 18 +- .../DeletePaymentAttemptFormComponent.vue | 35 +- .../DeleteShippingInvoiceFormComponent.vue | 18 +- .../DownloadBillingWithDatesComponent.vue | 147 +-- .../forms/DownloadParcelSummaryComponent.vue | 106 +- .../forms/GroupPaymentFormComponent.vue | 277 ++--- .../forms/InvoiceItemFormComponent.vue | 183 ++-- .../forms/InvoiceItemsFormComponent.vue | 89 +- .../forms/PaymentFormComponent.vue | 217 ++-- .../PaymentVerificationFormComponent.vue | 83 +- .../RegenerateDisputeInvoiceFormComponent.vue | 38 +- .../forms/WaiveInvoiceFormComponent.vue | 21 +- ...PaymentsBillingPollingSectionComponent.vue | 31 +- .../AdminPaymentsBillingSectionComponent.vue | 31 +- ...xportCompanyModuleSummaryFormComponent.vue | 91 +- ...CustomerActivityReportSectionComponent.vue | 145 +-- .../CustomerReportSectionComponent.vue | 51 +- .../MonthlySalesReportSectionComponent.vue | 79 +- .../ProfitModelReportSectionComponent.vue | 103 +- .../SearchCustomerByEmailComponent.vue | 86 +- .../ServiceReportSectionComponent.vue | 97 +- .../ServiceReportSectionPollingComponent.vue | 265 +++-- .../elements/SegmentCompanyComponent.vue | 138 +-- .../elements/CurrenciesListComponent.vue | 311 +++--- .../ListBasePriceSectionComponent.vue | 179 ++-- .../elements/ListPostcodeComponent.vue | 30 +- .../elements/PaymentAttemptComponent.vue | 122 ++- .../elements/PermitsReminderComponent.vue | 152 +-- .../elements/PermitsReminderItemComponent.vue | 30 +- .../elements/PostcodeSectionComponent.vue | 79 +- .../settings/elements/SegmentComponent.vue | 29 +- .../elements/StatesChargesComponent.vue | 28 +- .../elements/UserProfileComponent.vue | 32 +- .../elements/WarehouseChargesComponent.vue | 30 +- .../forms/AddPermitsReminderFormComponent.vue | 131 +-- .../forms/AnnouncementFormComponent.vue | 127 ++- .../settings/forms/BasePriceFormComponent.vue | 74 +- .../forms/DeleteAnnouncementFormComponent.vue | 26 +- .../forms/EditBasePriceFormComponent.vue | 67 +- .../settings/forms/EditEmailFormComponent.vue | 54 +- .../forms/EditSegmentPriceFormComponent.vue | 67 +- .../forms/EditStateChargesFormComponent.vue | 95 +- .../EditUserProfileFullnameFormComponent.vue | 61 +- .../EditWarehouseChargesFormComponent.vue | 85 +- .../PaymentAttemptLimitFormComponent.vue | 127 ++- .../forms/ResetUserPasswordFormComponent.vue | 57 +- .../settings/forms/SegmentFormComponent.vue | 65 +- .../forms/SegmentServiceFormComponent.vue | 303 +++--- .../settings/forms/ServiceFormComponent.vue | 191 ++-- .../UpdateServiceStatusFormComponent.vue | 19 +- .../elements/shippingQueueComponents.vue | 20 +- .../elements/OrderTrackingComponent.vue | 35 +- .../sections/TrackingSectionComponent.vue | 111 +- .../user/elements/ListAdminComponent.vue | 64 +- .../user/elements/UserComponent.vue | 25 +- .../user/form/DeleteUserFormComponent.vue | 19 +- .../user/form/UserFormComponent.vue | 134 +-- .../CustomerTransactionSectionComponent.vue | 189 ++-- .../CustomerWalletTransactionComponent.vue | 90 +- .../wallets/elements/WalletComponent.vue | 124 +-- .../elements/WalletTopUpHistoryComponent.vue | 26 +- .../elements/WalletTransactionComponent.vue | 21 +- .../wallets/elements/WalletsComponent.vue | 136 +-- .../forms/WalletTopUpFormComponent.vue | 161 +-- .../vue/composables/useComponentHandler.ts | 13 + .../vue/composables/useErrorMessageHandler.ts | 14 + resources/assets/vue/composables/useGuards.ts | 58 ++ .../vue/composables/useModalFormHandler.ts | 88 ++ .../assets/vue/composables/useMoneyFormats.ts | 17 + .../assets/vue/composables/useRequest.ts | 99 ++ .../assets/vue/composables/useTabHandler.ts | 39 + .../assets/vue/general/functions/router.d.ts | 4 + .../assets/vue/general/functions/router.js | 11 +- resources/assets/vue/stores/auth.ts | 141 +++ resources/assets/vue/stores/crud.ts | 100 ++ resources/assets/vue/stores/jobPolling.ts | 132 +++ resources/assets/vue/stores/notification.ts | 30 + resources/assets/vue/stores/queue.ts | 128 +++ resources/assets/vue/stores/ui.ts | 38 + resources/assets/vue/types/global.d.ts | 18 + resources/assets/vue/types/laravel-vapor.d.ts | 33 + .../assets/vue/types/vendor-modules.d.ts | 22 + .../assets/vue/types/vue-augmentations.d.ts | 15 + .../accounts/user_verification.blade.php | 4 +- resources/views/layouts/base_portal.blade.php | 4 +- .../pages/accounts/claim_business.blade.php | 4 +- .../views/pages/accounts/login.blade.php | 22 +- .../pages/accounts/reset_password.blade.php | 33 +- .../views/pages/accounts/sign_up.blade.php | 2 +- .../views/pages/accounts/signup.blade.php | 22 +- .../views/pages/addresses/index.blade.php | 4 +- .../views/pages/admin/customers.blade.php | 10 +- .../views/pages/admin/dashboard.blade.php | 8 +- resources/views/pages/containers.blade.php | 192 ++-- .../views/pages/customers/dashboard.blade.php | 4 +- .../views/pages/dashboards/customer.blade.php | 144 ++- .../views/pages/delivery/admin.blade.php | 6 +- .../views/pages/delivery/customer.blade.php | 4 +- resources/views/pages/delivery_list.blade.php | 6 +- .../views/pages/downloads/index.blade.php | 2 +- resources/views/pages/feedback.blade.php | 6 +- resources/views/pages/orders/index.blade.php | 6 +- .../views/pages/orders/move_order.blade.php | 2 +- .../views/pages/orders/packages.blade.php | 12 +- resources/views/pages/orders/table.blade.php | 4 +- .../views/pages/paymentAndBilling.blade.php | 8 +- .../views/pages/paymentAndBilling2.blade.php | 10 +- .../views/pages/segments/index.blade.php | 2 +- resources/views/pages/settings.blade.php | 965 +++++++++++------- resources/views/pages/support.blade.php | 26 +- .../pages/templates/containers.blade.php | 4 +- .../pages/templates/paymentsBilling.blade.php | 2 +- .../pages/templates/shippingQueue.blade.php | 4 +- .../templates/warehouseDetails.blade.php | 4 +- .../pages/unclaimed_packinglist.blade.php | 4 +- .../views/pages/wallet/wallets.blade.php | 12 +- resources/views/pages/warehouse.blade.php | 6 +- .../views/pages/warehouse_list.blade.php | 4 +- resources/views/partials/header.blade.php | 15 +- resources/views/partials/menu.blade.php | 465 +++++++-- resources/views/vendor/head.blade.php | 3 +- resources/views/vendor/js.blade.php | 4 +- routes/web.php | 11 +- .../UpdateSegmentPriceTest.php | 122 +++ tsconfig.json | 23 + tsconfig.node.json | 10 + vapor.yml | 143 ++- vite.config.ts | 79 ++ 367 files changed, 17947 insertions(+), 13476 deletions(-) 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/vue/app.ts 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/useGuards.ts create mode 100644 resources/assets/vue/composables/useModalFormHandler.ts create mode 100644 resources/assets/vue/composables/useMoneyFormats.ts create mode 100644 resources/assets/vue/composables/useRequest.ts create mode 100644 resources/assets/vue/composables/useTabHandler.ts create mode 100644 resources/assets/vue/general/functions/router.d.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/vendor-modules.d.ts create mode 100644 resources/assets/vue/types/vue-augmentations.d.ts create mode 100644 tests/Feature/Segments/ControllersLogic/UpdateSegmentPriceTest.php create mode 100644 tsconfig.json create mode 100644 tsconfig.node.json create mode 100644 vite.config.ts diff --git a/.env.testing b/.env.testing index b02873e5..59a39c39 100644 --- a/.env.testing +++ b/.env.testing @@ -5,7 +5,7 @@ APP_KEY=base64:I9qXyDlm7GVu/e47+YGzLB00fA/FMA2/hMPEhqu8pUQ= JWT_SECRET=9j7f7vUWEzxUBjLYcQimZp5wmxHEglcjU3beog26qC4pQKENZSpfWQfv065tjZrZ DB_CONNECTION=mysql -DB_HOST=172.18.0.3 +DB_HOST=172.18.0.2 DB_PORT=3306 DB_DATABASE=ci_test_shipping_portal DB_USERNAME=ci diff --git a/Jenkinsfile b/Jenkinsfile index 7401cbf6..68174b0b 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" } diff --git a/app/Http/Resources/UserCompanyResource.php b/app/Http/Resources/UserCompanyResource.php index 27c56079..e685e85e 100644 --- a/app/Http/Resources/UserCompanyResource.php +++ b/app/Http/Resources/UserCompanyResource.php @@ -14,10 +14,16 @@ class UserCompanyResource extends JsonResource */ public function toArray($request) { + $companyModule = $this->companyModule()->first(); + + if(!$companyModule){ + return []; + } + return [ 'id' => $this->id, 'name' => $this->name, - 'reference' => $this->companyModule()->first()->inviters()->withPivot('invitee_reference')->first()->pivot->invitee_reference, + 'reference' => $companyModule->inviters()->withPivot('invitee_reference')->first()->pivot->invitee_reference, 'type' => (int) $this->type, 'status' => (int) $this->status, 'email' => $this->email diff --git a/docker-setup/Dockerfile b/docker-setup/Dockerfile index c530f2d0..787ac02a 100644 --- a/docker-setup/Dockerfile +++ b/docker-setup/Dockerfile @@ -21,7 +21,7 @@ RUN apt-get update && apt-get install -y \ COPY --from=composer:latest /usr/bin/composer /usr/bin/composer #NODEJS & NPM -RUN curl -sL https://deb.nodesource.com/setup_16.x | bash - +RUN curl -sL https://deb.nodesource.com/setup_22.x | bash - RUN apt-get -y install nodejs RUN chown -R www-data:www-data /var/www diff --git a/docker-setup/docker-compose.yml b/docker-setup/docker-compose.yml index 2c2dfdf9..39d8bd81 100644 --- a/docker-setup/docker-compose.yml +++ b/docker-setup/docker-compose.yml @@ -7,7 +7,8 @@ services: ################################################################# nginx: image: nginx:stable-alpine - container_name: shipping-portal-ngnix + platform: linux/amd64 + container_name: shipping-portal-2-ngnix ports: - "8081:80" volumes: @@ -21,7 +22,8 @@ services: ################################################################# mysql: image: mysql:5.7.29 - container_name: shipping-portal-mysql + platform: linux/amd64 + container_name: shipping-portal-2-mysql restart: unless-stopped tty: true ports: @@ -42,11 +44,12 @@ services: build: context: . dockerfile: Dockerfile - container_name: shipping-portal-php + container_name: shipping-portal-2-php volumes: - ../:/var/www/html ports: - "9001:9000" + - "5173:5173" networks: - shipping-portal-development ################################################################# diff --git a/package.json b/package.json index c6e801a0..5fc5135c 100644 --- a/package.json +++ b/package.json @@ -1,133 +1,54 @@ { "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", "bootstrap": "^4.0.0", "bootstrap-datepicker": "^1.7.1", "chart.js": "^2.9.4", + "default-passive-events": "^4.0.0", "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", - "jquery": "^3.2", + "jquery": "^3.7.1", "jquery.scrollbar": "^0.2.11", "jwt-decode": "^3.1.2", + "mitt": "^3.0.1", "noty": "^3.2.0-beta", + "pdfjs-dist": "^2.16.105", "perfect-scrollbar": "^1.5.0", + "pinia": "^2.2.8", "popper.js": "^1.12", - "sass-loader": "10.1.0", - "select2": "^4.0.6-rc.1", - "v-money": "^0.8.1", - "vue": "^2.6.10", - "vue-avatar": "^2.1.8", - "vue-debounce": "^2.6.0", - "vue-the-mask": "^0.11.1", - "vuelidate": "^0.7.4", - "vuex": "^3.1.1", - "webpack": "^5.88.2", - "webpack-cli": "^4.10.0" + "select2": "^4.0.13", + "v-money3": "^3.24.1", + "vue": "^3.5.28", + "vue-debounce": "^5.0.0" }, "devDependencies": { + "@types/jquery": "^4.0.0", + "@vitejs/plugin-vue": "^5.2.1", + "@vue/compiler-sfc": "^3.5.28", + "autoprefixer": "^10.5.0", "axios": "^0.21", "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.0.0", - "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", "laravel-vapor": "^0.7.0", - "lodash": "^4.18.1", + "laravel-vite-plugin": "^1.3.0", + "lodash": "^4.17.19", "postcss": "^8.1.14", - "resolve-url-loader": "^3.1.2", - "vue-loader": "^15.11.1 ", - "vue-template-compiler": "^2.7.16" - }, - "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" - ], - "sourceFonts": [ - "./resources/assets/fonts/**/*" - ] + "sass": "^1.83.4", + "typescript": "^5.7.3", + "vite": "^6.0.7", + "vite-plugin-static-copy": "^3.4.0", + "vue-tsc": "^3.2.7" } } 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..6e6d4a64 100644 --- a/resources/assets/js/scripts.js +++ b/resources/assets/js/scripts.js @@ -50,7 +50,9 @@ $(function() { }) } - $.fn.select2.defaults.set( "theme", "bootstrap" ); - $.fn.select2.defaults.set( "containerCssClass", "form-control" ); + if ($.fn.select2) { + $.fn.select2.defaults.set( "theme", "bootstrap" ); + $.fn.select2.defaults.set( "containerCssClass", "form-control" ); + } }); \ No newline at end of file diff --git a/resources/assets/js/site.js b/resources/assets/js/site.js new file mode 100644 index 00000000..b277102d --- /dev/null +++ b/resources/assets/js/site.js @@ -0,0 +1,3 @@ +// Source JavaScript +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..2f4d817a --- /dev/null +++ b/resources/assets/js/vendor.js @@ -0,0 +1,17 @@ +// 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/_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 622c734a..909a9691 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 e8ddf726..97da5679 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/main.scss b/resources/assets/sass/main.scss index d606b5f9..1f09a5a5 100644 --- a/resources/assets/sass/main.scss +++ b/resources/assets/sass/main.scss @@ -23,17 +23,17 @@ 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 -@import "custom"; +@use "custom"; 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 e4c1e5b4..3afb8333 100644 --- a/resources/assets/sass/modules/_buttons.scss +++ b/resources/assets/sass/modules/_buttons.scss @@ -1,3 +1,8 @@ +@use "sass:color"; +@use "../mixins"; +@use "../var"; +@use "z_index"; + /*------------------------------------------------------------------ [6. Buttons] */ @@ -24,21 +29,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 +75,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; } @@ -126,78 +131,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%) ; } } @@ -238,20 +243,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 { @@ -295,13 +300,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; } @@ -327,22 +332,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; } } @@ -389,9 +394,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; } @@ -404,7 +409,7 @@ Rounded buttons } } &.btn-sm{ - padding-right: $padding-sm-horizontal + 10px; + padding-right: var.$padding-sm-horizontal + 10px; &:after{ right: 16px; } @@ -417,7 +422,7 @@ Rounded buttons } } &.btn-xs{ - padding-right: $padding-xs-horizontal + 12px; + padding-right: var.$padding-xs-horizontal + 12px; &:after{ right: 8px; } @@ -452,7 +457,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: ""; @@ -460,7 +465,7 @@ Rounded buttons height: 1px; left: 0; top: 42px; - background: $color-master-light; + background: var.$color-master-light; width: 100%; } .dropdown-item { @@ -484,16 +489,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; @@ -501,7 +506,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; @@ -509,7 +514,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{ @@ -525,16 +530,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%); } &:hover, &:focus{ text-decoration: none; @@ -545,7 +550,7 @@ Rounded buttons } .dropdown-backdrop{ - z-index: $zIndex-dropdownMask; + z-index: z_index.$zIndex-dropdownMask; } /* Animated buttons @@ -554,15 +559,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; @@ -570,13 +575,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{ @@ -588,7 +593,7 @@ Animated buttons top: 0; } & > span{ - @include translateY(300%); + @include mixins.translateY(300%); } } } @@ -602,7 +607,7 @@ Animated buttons left: 0; } & > span{ - @include translateX(200%); + @include mixins.translateX(200%); } } } @@ -639,10 +644,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%); } } &.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 00b41ed2..7b7a57f0 100644 --- a/resources/assets/sass/modules/_form_elements.scss +++ b/resources/assets/sass/modules/_form_elements.scss @@ -1,3 +1,8 @@ +@use "sass:color"; +@use "../mixins"; +@use "../var"; +@use "z_index"; + /*------------------------------------------------------------------ [15. Form Elements] */ @@ -19,18 +24,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%); //$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 +74,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 +89,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 +97,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,23 +111,23 @@ 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%); - color: rgba($color-master, .23); + background: color.mix(var.$color-master-lighter, #fff, 50%); + color: rgba(var.$color-master, .23); } } @@ -182,8 +187,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 +199,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 +211,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 +231,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 +259,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 +315,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 +357,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 +381,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 +390,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 +433,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 +449,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 +521,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,23 +552,23 @@ 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; padding-right: 12px; padding-bottom: 4px; 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; @@ -575,10 +580,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; } @@ -586,14 +591,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{ @@ -623,8 +628,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; } @@ -642,7 +647,7 @@ input[type=checkbox]:checked + label{ margin-top: -4px; background: none; &.error{ - color: $color-master-dark; + color: var.$color-master-dark; } &:focus{ background: none; @@ -655,7 +660,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; @@ -671,7 +676,7 @@ input[type=checkbox]:checked + label{ } &.fade{ opacity: .5; - @include backface-visibility(hidden); + @include mixins.backface-visibility(hidden); } } & > .input-lg { @@ -790,17 +795,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; } @@ -808,9 +813,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; @@ -821,42 +826,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; } @@ -906,7 +911,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 { @@ -916,11 +921,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; } @@ -932,7 +937,7 @@ https://github.com/eternicode/bootstrap-datepicker content:"\f054"; } .dow { - color: $color-primary; + color: var.$color-primary; text-transform: uppercase; font-size: 11px; } @@ -956,15 +961,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, @@ -979,9 +984,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 { @@ -990,7 +995,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, @@ -1005,11 +1010,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; } } @@ -1031,7 +1036,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; @@ -1047,10 +1052,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; } @@ -1060,11 +1065,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 @@ -1086,7 +1091,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 { @@ -1101,7 +1106,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; @@ -1123,7 +1128,7 @@ select.full-width + .select2-container { background-color: transparent; } .select2-results__group{ - color: $color-master-dark; + color: var.$color-master-dark; } } .select2-search input, @@ -1135,19 +1140,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; @@ -1161,7 +1166,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; @@ -1174,22 +1179,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; } @@ -1197,15 +1202,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; @@ -1215,21 +1220,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; @@ -1253,7 +1258,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; } } @@ -1289,16 +1294,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{ @@ -1329,7 +1334,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 @@ -1365,23 +1370,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; @@ -1441,12 +1446,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; @@ -1484,9 +1489,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 { @@ -1519,7 +1524,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; @@ -1570,10 +1575,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; @@ -1585,13 +1590,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; @@ -1607,13 +1612,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; } } @@ -1627,7 +1632,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, @@ -1878,8 +1883,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; @@ -1915,7 +1920,7 @@ div.cs-skin-slide{ background: none; } &.cs-active .cs-backdrop{ - background: $color-master-lightest; + background: var.$color-master-lightest; } } & > span{ @@ -1925,14 +1930,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; } } @@ -1969,7 +1974,7 @@ div.cs-skin-slide{ span:hover, &.cs-focus span, &.cs-selected span{ - color: $color-master-dark; + color: var.$color-master-dark; } } } @@ -1977,13 +1982,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) { @@ -2026,7 +2031,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; @@ -2036,16 +2041,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 ea78b6bb..dcd16f56 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{ @@ -2190,7 +2196,7 @@ select2-dropdown, position: absolute; left: 0px; top: 0px; - background: $color-white; + background: var.$color-white; -webkit-transition: 0.5s; transition: 0.5s; box-shadow: 0 0.5rem 0.5rem rgba(0,0,0,.15)!important; @@ -2203,7 +2209,7 @@ select2-dropdown, position: absolute; left: 30px*-0.7; top: 30px*-0.7; - background: $color-master-lightest; + background: var.$color-master-lightest; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); 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 180f7f93..66a838ad 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: linear-gradient(rgba(0, 0, 0, 0.6), $color-primary), url('{{asset("images/iStock-976354264_Malaysia.jpg")}}');*/ background-size: cover; padding: 80px 0 20px 0; 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 1bafb1cd..f2bfd20e 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 8ba9e52a..b0abef66 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 @@ -67,7 +73,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; @@ -82,7 +88,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; @@ -98,17 +104,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%; @@ -127,7 +133,7 @@ .thumbnail-wrapper { cursor: pointer; i{ - @include transition(all 0.12s linear); + @include mixins.transition(all 0.12s linear); } } @@ -141,7 +147,7 @@ display: block; } .thumbnail-wrapper i{ - @include rotate(-90deg); + @include mixins.rotate(-90deg); } } .thumbnail-wrapper.d24{ @@ -161,7 +167,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; @@ -170,11 +176,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; @@ -199,11 +205,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; @@ -220,9 +226,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; @@ -240,9 +246,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']{ @@ -250,7 +256,7 @@ left: auto; } &[data-placement^='top-']{ - top: $layout-header-height + 20px; + top: var.$layout-header-height + 20px; bottom: auto; } &[data-placement^='bottom-']{ @@ -280,7 +286,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; @@ -597,20 +603,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; } @@ -619,7 +625,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) { @@ -649,7 +655,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 6562b105..bf006cf0 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; } } } @@ -758,7 +762,7 @@ .tabButton { cursor: pointer; &.active { - background-color: $color-master-lightest !important; + background-color: var.$color-master-lightest !important; cursor: default; } } \ No newline at end of file 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 60817d2a..515c12b0 100644 --- a/resources/assets/sass/modules/_typography.scss +++ b/resources/assets/sass/modules/_typography.scss @@ -1,3 +1,7 @@ +@use "sass:color"; +@use "../mixins"; +@use "../var"; + /*------------------------------------------------------------------ [5. Typography] */ @@ -21,7 +25,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 +51,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 +92,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 +110,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 +161,7 @@ ul,ol { address { margin-bottom: 0px; a{ - color:$color-master; + color:var.$color-master; } } blockquote { @@ -200,7 +204,7 @@ blockquote { } } hr{ - border-color:$color-master-light; + border-color:var.$color-master-light; &.double{ border-width:2px; } @@ -256,7 +260,7 @@ hr{ text-transform: uppercase; } .muted { - color: lighten($color-master,50%); + color: color.adjust(var.$color-master,$lightness: 50%); } .hint-text{ opacity: .7; @@ -269,25 +273,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,31 +299,31 @@ hr{ */ .bg-info-primary-gradient { - background: linear-gradient($color-info, $color-primary); + background: linear-gradient(var.$color-info, 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; } } @@ -327,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 @@ -426,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 @@ -465,164 +469,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; } } @@ -662,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 @@ -732,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; @@ -750,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; } } @@ -762,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..fafc0ef5 --- /dev/null +++ b/resources/assets/vue/app.ts @@ -0,0 +1,472 @@ +// import 'default-passive-events'; +import { createApp } from 'vue'; +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 { useJobPollingStore } from './stores/jobPolling'; +import route from '@/general/functions/router'; +import { useGuards } from './composables/useGuards'; +import Vapor from 'laravel-vapor'; +import VMoney, { Money3Directive } from 'v-money3' + +window.route = route; +window.Vapor = Vapor; +window.Vapor.withBaseAssetUrl(import.meta.env.VITE_VAPOR_ASSET_URL); + +// Create app +const app = createApp({ + created() { + const { routesGuard } = useGuards(); + routesGuard(); + }, +}); + +// Pinia store +const pinia = createPinia(); +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.qr_code_img_url = 'https://api.qrserver.com/v1/create-qr-code/?size=150x150&data='; +app.config.globalProperties.route = window.route; +app.config.globalProperties.asset = window.Vapor.asset; + + +const modules = import.meta.glob('./**/*.vue', { eager: true }); + +const STORAGE_KEY = 'shippingPortalComponents'; + +const usedComponents = new Set( + JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]') +); + +function syncToLocalStorage() { + localStorage.setItem(STORAGE_KEY, JSON.stringify(Array.from(usedComponents))); +} + +Object.entries(modules).forEach(([path, module]) => { + const componentName = path.split('/').pop()?.split('.')[0]; + + if (componentName) { + const original = (module as any).default; + + const wrapped = { + ...original, + mounted() { + usedComponents.add(componentName); + syncToLocalStorage(); + + if (original.mounted) { + original.mounted.call(this); + } + } + }; + + app.component(componentName, wrapped); + } +}); + +function downloadUsedComponents() { + const data = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]'); + + const blob = new Blob( + [JSON.stringify(data, null, 2)], + { type: 'application/json' } + ); + + const url = URL.createObjectURL(blob); + + const a = document.createElement('a'); + a.href = url; + a.download = 'shipping-portal-components.json'; + a.click(); + + URL.revokeObjectURL(url); +} + +(window as any).downloadUsedComponents = downloadUsedComponents; + +// 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); +// } +// }); + +// Components +// import LoadingComponent from './components/general/elements/LoadingComponent.vue'; +// import ModalComponent from './components/general/elements/ModalComponent.vue'; +// import LoginFormComponent from './components/accounts/forms/LoginFormComponent.vue'; +// import ForgetPasswordFormComponent from './components/accounts/forms/ForgetPasswordFormComponent.vue'; +// import RegistrationFormComponent from './components/accounts/forms/RegistrationFormComponent.vue'; +// import LogoutComponent from './components/accounts/elements/LogoutComponent.vue'; +// import ValidationWrapperComponent from './components/general/forms/ValidationWrapperComponent.vue'; +// import ValidationErrorComponent from './components/general/forms/ValidationErrorComponent.vue'; +// import ErrorMessageComponent from './components/general/elements/ErrorMessageComponent.vue'; +// import ListComponent from './components/general/elements/ListComponent.vue'; +// import PaginationComponent from './components/general/elements/PaginationComponent.vue'; +// import TransitionComponent from './components/general/elements/TransitionComponent.vue'; +// import CustomerProfileSectionComponent from './components/companies/sections/CustomerProfileSectionComponent.vue'; +// import DeliveryCustomerProfileSectionComponent from './components/companies/sections/DeliveryCustomerProfileSectionComponent.vue'; +// import WarehouseSectionComponent from './components/companies/sections/WarehouseSectionComponent.vue'; +// import CustomerProfileComponent from './components/companies/elements/CustomerProfileComponent.vue'; +// import QuickOrderComponent from './components/orders/elements/QuickOrderComponent.vue'; +// import OnBoardingSectionComponent from './components/companies/sections/OnBoardingSectionComponent.vue'; +// import IdentificationVerificationComponent from './components/companies/elements/IdentificationVerificationComponent.vue'; +// import AddressVerificationComponent from './components/addresses/elements/AddressVerificationComponent.vue'; +// import UnclaimedPackinglistComponent from './components/orders/elements/UnclaimedPackinglistComponent.vue'; +// import ProfitModelReportSectionComponent from './components/reports/sections/ProfitModelReportSectionComponent.vue'; +// import MonthlySalesReportSectionComponent from './components/reports/sections/MonthlySalesReportSectionComponent.vue'; +// import ServiceReportSectionComponent from './components/reports/sections/ServiceReportSectionComponent.vue'; +// import DatePickerComponent from './components/general/forms/DatePickerComponent.vue'; +// import DatePickerLimitRangeComponent from './components/general/forms/DatePickerLimitRangeComponent.vue'; +// import OpenLinkInNewTabComponent from './components/general/elements/OpenLinkInNewTabComponent.vue'; +// import AddressFormComponent from './components/addresses/forms/AddressFormComponent.vue'; +// import AssignSegmentFormComponent from './components/companies/forms/AssignSegmentFormComponent.vue'; +// import ContactFormComponent from './components/companies/forms/ContactFormComponent.vue'; +// import DetachSegmentFormComponent from './components/companies/forms/DetachSegmentFormComponent.vue'; +// import EInvoiceInfoFormComponent from './components/companies/forms/EInvoiceInfoFormComponent.vue'; +// import EInvoiceRequestFormComponent from './components/companies/forms/EInvoiceRequestFormComponent.vue'; +// import IdentificationVerificationFormComponent from './components/companies/forms/IdentificationVerificationFormComponent.vue'; +// import UpdateCompanyNameFormComponent from './components/companies/forms/UpdateCompanyNameFormComponent.vue'; +// import UpdateCreditTermStatusFormComponent from './components/companies/forms/UpdateCreditTermStatusFormComponent.vue'; +// import UpdateIdentificationNumberFormComponent from './components/companies/forms/UpdateIdentificationNumberFormComponent.vue'; +// import RejectIdentificationVerificationFormComponent from './components/companies/forms/RejectIdentificationVerificationFormComponent.vue'; +// import ChangeCustomerCompanyDetailsFormComponent from './components/orders/forms/ChangeCustomerCompanyDetailsFormComponent.vue'; +// import ChangeCustomerEmailFormComponent from './components/orders/forms/ChangeCustomerEmailFormComponent.vue'; +// import ChangeCustomerContactNumberFormComponent from './components/orders/forms/ChangeCustomerContactNumberFormComponent.vue'; +// import ChangeCustomerNameFormComponent from './components/orders/forms/ChangeCustomerNameFormComponent.vue'; +// import EInvoiceInfoComponent from './components/companies/elements/EInvoiceInfoComponent.vue'; +// import AdminPaymentsBillingSectionComponent from './components/paymentsBilling/sections/AdminPaymentsBillingSectionComponent.vue'; +// import AdminPaymentsBillingPollingSectionComponent from './components/paymentsBilling/sections/AdminPaymentsBillingPollingSectionComponent.vue'; +// import AdminDisputePaymentsBillingComponent from './components/paymentsBilling/elements/AdminDisputePaymentsBillingComponent.vue'; +// import AdminPaymentsBillingWithSearchComponent from './components/paymentsBilling/elements/AdminPaymentsBillingWithSearchComponent.vue'; +// import AdminPaymentsBillingWithSearchPollingComponent from './components/paymentsBilling/elements/AdminPaymentsBillingWithSearchPollingComponent.vue'; +// import SingleParentAdminPaymentsBillingComponent from './components/paymentsBilling/elements/SingleParentAdminPaymentsBillingComponent.vue'; +// import SingleAdminPaymentsBillingWithStorageComponent from './components/paymentsBilling/elements/SingleAdminPaymentsBillingWithStorageComponent.vue'; +// import SingleAdminPaymentsBillingWithoutStorageComponent from './components/paymentsBilling/elements/SingleAdminPaymentsBillingWithoutStorageComponent.vue'; +// import CustomerPaymentsBillingWithStorageComponent from './components/paymentsBilling/elements/CustomerPaymentsBillingWithStorageComponent.vue'; +// import ApproveShippingInvoiceFormComponent from './components/paymentsBilling/forms/ApproveShippingInvoiceFormComponent.vue'; +// import CustomerInvoiceRemarkFormComponent from './components/paymentsBilling/forms/CustomerInvoiceRemarkFormComponent.vue'; +// import DeleteDisputeFormComponent from './components/paymentsBilling/forms/DeleteDisputeFormComponent.vue'; +// import DeleteGroupPaymentAttemptFormComponent from './components/paymentsBilling/forms/DeleteGroupPaymentAttemptFormComponent.vue'; +// import DeleteInvoiceFormComponent from './components/paymentsBilling/forms/DeleteInvoiceFormComponent.vue'; +// import DeleteShippingInvoiceFormComponent from './components/paymentsBilling/forms/DeleteShippingInvoiceFormComponent.vue'; +// import GroupPaymentFormComponent from './components/paymentsBilling/forms/GroupPaymentFormComponent.vue'; +// import InvoiceItemFormComponent from './components/paymentsBilling/forms/InvoiceItemFormComponent.vue'; +// import InvoiceItemsFormComponent from './components/paymentsBilling/forms/InvoiceItemsFormComponent.vue'; +// import PaymentFormComponent from './components/paymentsBilling/forms/PaymentFormComponent.vue'; +// import PaymentVerificationFormComponent from './components/paymentsBilling/forms/PaymentVerificationFormComponent.vue'; +// import RegenerateDisputeInvoiceFormComponent from './components/paymentsBilling/forms/RegenerateDisputeInvoiceFormComponent.vue'; +// import WaiveInvoiceFormComponent from './components/paymentsBilling/forms/WaiveInvoiceFormComponent.vue'; +// import DownloadBillingWithDatesComponent from './components/paymentsBilling/forms/DownloadBillingWithDatesComponent.vue'; +// import DownloadParcelSummaryComponent from './components/paymentsBilling/forms/DownloadParcelSummaryComponent.vue'; +// import NewServiceAnnouncementComponent from './components/companies/elements/NewServiceAnnouncementComponent.vue'; +// import ExportCompanyModuleSummaryFormComponent from './components/reports/forms/ExportCompanyModuleSummaryFormComponent.vue'; +// import NotificationSectionComponent from './components/general/elements/NotificationSectionComponent.vue'; +// import PaymentVerificationComponent from './components/paymentsBilling/elements/PaymentVerificationComponent.vue'; +// import DocumentFileViewerComponent from './components/general/elements/DocumentFileViewerComponent.vue'; +// import FulfilmentInterestedFormComponent from './components/companies/elements/FulfilmentInterestedFormComponent.vue'; +// import FileInputComponent from './components/general/forms/FileInputComponent.vue'; +// import FileUploadComponent from './components/general/forms/FileUploadComponent.vue'; +// import RemarkComponent from './components/general/elements/RemarkComponent.vue'; +// import GeneralConfirmationFormComponent from './components/general/forms/GeneralConfirmationFormComponent.vue'; +// import SelectComponent from './components/general/forms/SelectComponent.vue'; +// import SelectableComponent from './components/general/forms/SelectableComponent.vue'; +// import RemarkFormComponent from './components/general/forms/RemarkFormComponent.vue'; +// import RemarkCommentFormComponent from './components/general/forms/RemarkCommentFormComponent.vue'; +// import ReloadConfirmationFormComponent from './components/general/forms/ReloadConfirmationFormComponent.vue'; +// import HelpMenuFormComponent from './components/general/forms/HelpMenuFormComponent.vue'; +// import DeleteRemarkFormComponent from './components/general/forms/DeleteRemarkFormComponent.vue'; +// import ModalFormComponent from './components/general/forms/ModalFormComponent.vue'; +// import AnchorLinkComponent from './components/general/elements/AnchorLinkComponent.vue'; +// import BearComponent from './components/general/elements/bearComponent.vue'; +// import BoxLoadingComponent from './components/general/elements/BoxLoadingComponent.vue'; +// import HelpMenuComponent from './components/general/elements/HelpMenuComponent.vue'; +// import ListPollingComponent from './components/general/elements/ListPollingComponent.vue'; +// import PasswordProtectedDownloadComponent from './components/general/elements/PasswordProtectedDownloadComponent.vue'; +// import PdfViewerComponent from './components/general/elements/PdfViewerComponent.vue'; +// import RemarkListComponent from './components/general/elements/RemarkListComponent.vue'; +// import SearchComponent from './components/general/elements/SearchComponent.vue'; +// import CustomerPaymentBillingSectionComponent from './components/companies/sections/CustomerPaymentBillingSectionComponent.vue'; +// import PaymentsBillingVariant2Components from './components/paymentsBilling/elements/PaymentsBillingVariant2Components.vue'; +// import GroupPaymentsBillingComponents from './components/paymentsBilling/elements/GroupPaymentsBillingComponents.vue'; +// import WalletComponent from './components/wallets/elements/WalletComponent.vue'; +// import WalletTopUpFormComponent from './components/wallets/forms/WalletTopUpFormComponent.vue'; +// import ViewAnnouncementFormComponent from './components/announcements/forms/ViewAnnouncementFormComponent.vue'; +// import BillingAddressSectionComponent from './components/addresses/sections/BillingAddressSectionComponent.vue'; +// import OrderSectionComponent from './components/orders/sections/OrderSectionComponent.vue'; +// import OrderFormComponent from './components/orders/forms/OrderFormComponent.vue'; +// import SelectAddressComponent from './components/addresses/elements/SelectAddressComponent.vue'; +// import WarehouseAddressFormComponent from './components/addresses/forms/WarehouseAddressFormComponent.vue'; +// import OrderProfileV2SectionComponent from './components/orders/sections/OrderProfileV2SectionComponent.vue'; +// import OrderPackageV3SectionComponent from './components/orders/sections/OrderPackageV3SectionComponent.vue'; +// import OrderPackageReceivedSectionComponent from './components/orders/sections/OrderPackageReceivedSectionComponent.vue'; +// import TaxRebateQrCodeFormComponent from './components/orders/forms/TaxRebateQrCodeFormComponent.vue'; +// import CustPayBillParentComponent from './components/paymentsBilling/elements/CustPayBillParentComponent.vue'; +// import ChangeOrderAddressFormComponent from './components/orders/forms/ChangeOrderAddressFormComponent.vue'; +// import ChangeOrderNumberFormComponent from './components/orders/forms/ChangeOrderNumberFormComponent.vue'; +// import CreateWarehousePackageListFormComponent from './components/orders/forms/CreateWarehousePackageListFormComponent.vue'; +// import DownloadReceivePaymentDepositEntryReportComponent from './components/companies/elements/DownloadReceivePaymentDepositEntryReportComponent.vue'; +// import DownloadCustomersDataReportComponent from './components/companies/elements/DownloadCustomersDataReportComponent.vue'; +// import DownloadUploadSalesInvoiceReportComponent from './components/companies/elements/DownloadUploadSalesInvoiceReportComponent.vue'; +// import DownloadUnpaidSalesInvoiceReportComponent from './components/companies/elements/DownloadUnpaidSalesInvoiceReportComponent.vue'; +// import DownloadReceivePaymentForOrderReportComponent from './components/companies/elements/DownloadReceivePaymentForOrderReportComponent.vue'; +// import UploadComponent from './components/orders/elements/UploadComponent.vue'; +// import OrderComponent from './components/orders/elements/OrderComponent.vue'; +// import ListOrderComponent from './components/orders/elements/ListOrderComponent.vue'; +// import OrderPackageSummaryComponent from './components/orders/elements/OrderPackageSummaryComponent.vue'; +// import CancelOrderFormComponent from './components/orders/forms/CancelOrderFormComponent.vue'; +// import RestoreOrderFormComponent from './components/orders/forms/RestoreOrderFormComponent.vue'; +// import PaymentsBillingComponents from './components/paymentsBilling/elements/PaymentsBillingComponents.vue'; +// import CustomerActivityReportSectionComponent from './components/reports/sections/CustomerActivityReportSectionComponent.vue'; +// import SearchCustomerByEmailComponent from './components/reports/sections/SearchCustomerByEmailComponent.vue'; +// import CustomerReportSectionComponent from './components/reports/sections/CustomerReportSectionComponent.vue'; +// import CompanyComponent from './components/companies/elements/CompanyComponent.vue'; +// import UserCompanyComponent from './components/companies/elements/UserCompanyComponent.vue'; +// import OrderSearchSectionComponent from './components/orders/sections/OrderSearchSectionComponent.vue'; +// import WarehouseListExportComponent from './components/companies/elements/WarehouseListExportComponent.vue'; +// import WarehousePackingListComponent from './components/containers/elements/WarehousePackingListComponent.vue'; +// import ParcelComponent from './components/orders/elements/ParcelComponent.vue'; +// import DeleteParcelFormComponent from './components/paymentsBilling/forms/DeleteParcelFormComponent.vue'; +// import ContainerSearchComponent from './components/containers/elements/ContainerSearchComponent.vue'; +// import CreateLoadContainerFormComponent from './components/containers/forms/CreateLoadContainerFormComponent.vue'; +// import ContainerComponent from './components/containers/elements/ContainerComponent.vue'; +// import PackingListSectionComponent from './components/containers/sections/PackingListSectionComponent.vue'; +// import SegmentCompanyComponent from './components/segments/elements/SegmentCompanyComponent.vue'; +// import AdminFeedbackCustomerSectionComponent from './components/feedback/sections/AdminFeedbackCustomerSectionComponent.vue'; +// import GenerateFeedbackLinkFormComponent from './components/feedback/forms/GenerateFeedbackLinkFormComponent.vue'; +// import QuestionAnswerComponent from './components/feedback/elements/QuestionAnswerComponent.vue'; +// import UserProfileComponent from './components/settings/elements/UserProfileComponent.vue'; +// import UploadDebtorExcelComponent from './components/containers/elements/UploadDebtorExcelComponent.vue'; +// import PermitsReminderComponent from './components/settings/elements/PermitsReminderComponent.vue'; +// import UserFormComponent from './components/user/form/UserFormComponent.vue'; +// import ListAdminComponent from './components/user/elements/ListAdminComponent.vue'; +// import BasePriceFormComponent from './components/settings/forms/BasePriceFormComponent.vue'; +// import ListBasePriceSectionComponent from './components/settings/elements/ListBasePriceSectionComponent.vue'; +// import EditSegmentPriceFormComponent from './components/settings/forms/EditSegmentPriceFormComponent.vue'; +// import SegmentFormComponent from './components/settings/forms/SegmentFormComponent.vue'; +// import SegmentComponent from './components/settings/elements/SegmentComponent.vue'; +// import AnnouncementFormComponent from './components/settings/forms/AnnouncementFormComponent.vue'; +// import AnnouncementListComponent from './components/announcements/elements/AnnouncementListComponent.vue'; +// import DeleteAnnouncementFormComponent from './components/settings/forms/DeleteAnnouncementFormComponent.vue'; +// import DetachAnnouncementFromSegmentFormComponent from './components/announcements/forms/DetachAnnouncementFromSegmentFormComponent.vue'; +// import AssignAnnouncementToSegmentFormComponent from './components/announcements/forms/AssignAnnouncementToSegmentFormComponent.vue'; +// import PostcodeSectionComponent from './components/settings/elements/PostcodeSectionComponent.vue'; +// import StatesChargesComponent from './components/settings/elements/StatesChargesComponent.vue'; +// import EditStateChargesFormComponent from './components/settings/forms/EditStateChargesFormComponent.vue'; +// import WarehouseChargesComponent from './components/settings/elements/WarehouseChargesComponent.vue'; +// import EditWarehouseChargesFormComponent from './components/settings/forms/EditWarehouseChargesFormComponent.vue'; +// import PaymentAttemptLimitFormComponent from './components/settings/forms/PaymentAttemptLimitFormComponent.vue'; +// import DisplayWarehouseAddressComponent from './components/addresses/elements/DisplayWarehouseAddressComponent.vue'; +// import AddPermitsReminderFormComponent from './components/settings/forms/AddPermitsReminderFormComponent.vue'; +// import PermitsReminderItemComponent from './components/settings/elements/PermitsReminderItemComponent.vue'; +// import UserComponent from './components/user/elements/UserComponent.vue'; +// import ListPostcodeComponent from './components/settings/elements/ListPostcodeComponent.vue'; +// import ChangeAdminRoleTypeFormComponent from './components/orders/forms/ChangeAdminRoleTypeFormComponent.vue'; +// import DeleteUserFormComponent from './components/user/form/DeleteUserFormComponent.vue'; +// import DeclarePostcodeAreaFormComponent from './components/containers/forms/DeclarePostcodeAreaFormComponent.vue'; + + +// app.component('LoadingComponent', LoadingComponent); +// app.component('ModalComponent', ModalComponent); +// app.component('LoginFormComponent', LoginFormComponent); +// app.component('ForgetPasswordFormComponent', ForgetPasswordFormComponent); +// app.component('RegistrationFormComponent', RegistrationFormComponent); +// app.component('LogoutComponent', LogoutComponent); +// app.component('ValidationWrapperComponent', ValidationWrapperComponent); +// app.component('ValidationErrorComponent', ValidationErrorComponent); +// app.component('ErrorMessageComponent', ErrorMessageComponent); +// app.component('ListComponent', ListComponent); +// app.component('PaginationComponent', PaginationComponent); +// app.component('TransitionComponent', TransitionComponent); +// app.component('CustomerProfileSectionComponent', CustomerProfileSectionComponent); +// app.component('DeliveryCustomerProfileSectionComponent', DeliveryCustomerProfileSectionComponent); +// app.component('WarehouseSectionComponent', WarehouseSectionComponent); +// app.component('CustomerProfileComponent', CustomerProfileComponent); +// app.component('QuickOrderComponent', QuickOrderComponent); +// app.component('OnBoardingSectionComponent', OnBoardingSectionComponent); +// app.component('IdentificationVerificationComponent', IdentificationVerificationComponent); +// app.component('AddressVerificationComponent', AddressVerificationComponent); +// app.component('UnclaimedPackinglistComponent', UnclaimedPackinglistComponent); +// app.component('ProfitModelReportSectionComponent', ProfitModelReportSectionComponent); +// app.component('MonthlySalesReportSectionComponent', MonthlySalesReportSectionComponent); +// app.component('ServiceReportSectionComponent', ServiceReportSectionComponent); +// app.component('DatePickerComponent', DatePickerComponent); +// app.component('DatePickerLimitRangeComponent', DatePickerLimitRangeComponent); +// app.component('OpenLinkInNewTabComponent', OpenLinkInNewTabComponent); +// app.component('AddressFormComponent', AddressFormComponent); +// app.component('AssignSegmentFormComponent', AssignSegmentFormComponent); +// app.component('ContactFormComponent', ContactFormComponent); +// app.component('DetachSegmentFormComponent', DetachSegmentFormComponent); +// app.component('EInvoiceInfoFormComponent', EInvoiceInfoFormComponent); +// app.component('EInvoiceRequestFormComponent', EInvoiceRequestFormComponent); +// app.component('IdentificationVerificationFormComponent', IdentificationVerificationFormComponent); +// app.component('UpdateCompanyNameFormComponent', UpdateCompanyNameFormComponent); +// app.component('UpdateCreditTermStatusFormComponent', UpdateCreditTermStatusFormComponent); +// app.component('UpdateIdentificationNumberFormComponent', UpdateIdentificationNumberFormComponent); +// app.component('RejectIdentificationVerificationFormComponent', RejectIdentificationVerificationFormComponent); +// app.component('ChangeCustomerCompanyDetailsFormComponent', ChangeCustomerCompanyDetailsFormComponent); +// app.component('ChangeCustomerEmailFormComponent', ChangeCustomerEmailFormComponent); +// app.component('ChangeCustomerContactNumberFormComponent', ChangeCustomerContactNumberFormComponent); +// app.component('ChangeCustomerNameFormComponent', ChangeCustomerNameFormComponent); +// app.component('EInvoiceInfoComponent', EInvoiceInfoComponent); +// app.component('AdminPaymentsBillingSectionComponent', AdminPaymentsBillingSectionComponent); +// app.component('AdminPaymentsBillingPollingSectionComponent', AdminPaymentsBillingPollingSectionComponent); +// app.component('AdminDisputePaymentsBillingComponent', AdminDisputePaymentsBillingComponent); +// app.component('AdminPaymentsBillingWithSearchComponent', AdminPaymentsBillingWithSearchComponent); +// app.component('AdminPaymentsBillingWithSearchPollingComponent', AdminPaymentsBillingWithSearchPollingComponent); +// app.component('SingleParentAdminPaymentsBillingComponent', SingleParentAdminPaymentsBillingComponent); +// app.component('SingleAdminPaymentsBillingWithStorageComponent', SingleAdminPaymentsBillingWithStorageComponent); +// app.component('SingleAdminPaymentsBillingWithoutStorageComponent', SingleAdminPaymentsBillingWithoutStorageComponent); +// app.component('CustomerPaymentsBillingWithStorageComponent', CustomerPaymentsBillingWithStorageComponent); +// app.component('ApproveShippingInvoiceFormComponent', ApproveShippingInvoiceFormComponent); +// app.component('CustomerInvoiceRemarkFormComponent', CustomerInvoiceRemarkFormComponent); +// app.component('DeleteDisputeFormComponent', DeleteDisputeFormComponent); +// app.component('DeleteGroupPaymentAttemptFormComponent', DeleteGroupPaymentAttemptFormComponent); +// app.component('DeleteInvoiceFormComponent', DeleteInvoiceFormComponent); +// app.component('DeleteShippingInvoiceFormComponent', DeleteShippingInvoiceFormComponent); +// app.component('GroupPaymentFormComponent', GroupPaymentFormComponent); +// app.component('InvoiceItemFormComponent', InvoiceItemFormComponent); +// app.component('InvoiceItemsFormComponent', InvoiceItemsFormComponent); +// app.component('PaymentFormComponent', PaymentFormComponent); +// app.component('PaymentVerificationFormComponent', PaymentVerificationFormComponent); +// app.component('RegenerateDisputeInvoiceFormComponent', RegenerateDisputeInvoiceFormComponent); +// app.component('WaiveInvoiceFormComponent', WaiveInvoiceFormComponent); +// app.component('DownloadBillingWithDatesComponent', DownloadBillingWithDatesComponent); +// app.component('DownloadParcelSummaryComponent', DownloadParcelSummaryComponent); +// app.component('NewServiceAnnouncementComponent', NewServiceAnnouncementComponent); +// app.component('ExportCompanyModuleSummaryFormComponent', ExportCompanyModuleSummaryFormComponent); +// app.component('NotificationSectionComponent', NotificationSectionComponent); +// app.component('PaymentVerificationComponent', PaymentVerificationComponent); +// app.component('DocumentFileViewerComponent', DocumentFileViewerComponent); +// app.component('FulfilmentInterestedFormComponent', FulfilmentInterestedFormComponent); +// app.component('FileInputComponent', FileInputComponent); +// app.component('FileUploadComponent', FileUploadComponent); +// app.component('RemarkComponent', RemarkComponent); +// app.component('GeneralConfirmationFormComponent', GeneralConfirmationFormComponent); +// app.component('SelectComponent', SelectComponent); +// app.component('SelectableComponent', SelectableComponent); +// app.component('RemarkFormComponent', RemarkFormComponent); +// app.component('RemarkCommentFormComponent', RemarkCommentFormComponent); +// app.component('ReloadConfirmationFormComponent', ReloadConfirmationFormComponent); +// app.component('HelpMenuFormComponent', HelpMenuFormComponent); +// app.component('DeleteRemarkFormComponent', DeleteRemarkFormComponent); +// app.component('ModalFormComponent', ModalFormComponent); +// app.component('AnchorLinkComponent', AnchorLinkComponent); +// app.component('BearComponent', BearComponent); +// app.component('BoxLoadingComponent', BoxLoadingComponent); +// app.component('HelpMenuComponent', HelpMenuComponent); +// app.component('ListPollingComponent', ListPollingComponent); +// app.component('PasswordProtectedDownloadComponent', PasswordProtectedDownloadComponent); +// app.component('PdfViewerComponent', PdfViewerComponent); +// app.component('RemarkListComponent', RemarkListComponent); +// app.component('SearchComponent', SearchComponent); +// app.component('CustomerPaymentBillingSectionComponent', CustomerPaymentBillingSectionComponent); +// app.component('PaymentsBillingVariant2Components', PaymentsBillingVariant2Components); +// app.component('GroupPaymentsBillingComponents', GroupPaymentsBillingComponents); +// app.component('WalletComponent', WalletComponent); +// app.component('WalletTopUpFormComponent', WalletTopUpFormComponent); +// app.component('ViewAnnouncementFormComponent', ViewAnnouncementFormComponent); +// app.component('BillingAddressSectionComponent', BillingAddressSectionComponent); +// app.component('OrderSectionComponent', OrderSectionComponent); +// app.component('OrderFormComponent', OrderFormComponent); +// app.component('SelectAddressComponent', SelectAddressComponent); +// app.component('WarehouseAddressFormComponent', WarehouseAddressFormComponent); +// app.component('OrderProfileV2SectionComponent', OrderProfileV2SectionComponent); +// app.component('OrderPackageV3SectionComponent', OrderPackageV3SectionComponent); +// app.component('OrderPackageReceivedSectionComponent', OrderPackageReceivedSectionComponent); +// app.component('TaxRebateQrCodeFormComponent', TaxRebateQrCodeFormComponent); +// app.component('CustPayBillParentComponent', CustPayBillParentComponent); +// app.component('ChangeOrderAddressFormComponent', ChangeOrderAddressFormComponent); +// app.component('ChangeOrderNumberFormComponent', ChangeOrderNumberFormComponent); +// app.component('CreateWarehousePackageListFormComponent', CreateWarehousePackageListFormComponent); +// app.component('DownloadReceivePaymentDepositEntryReportComponent', DownloadReceivePaymentDepositEntryReportComponent); +// app.component('DownloadCustomersDataReportComponent', DownloadCustomersDataReportComponent); +// app.component('DownloadUploadSalesInvoiceReportComponent', DownloadUploadSalesInvoiceReportComponent); +// app.component('DownloadUnpaidSalesInvoiceReportComponent', DownloadUnpaidSalesInvoiceReportComponent); +// app.component('DownloadReceivePaymentForOrderReportComponent', DownloadReceivePaymentForOrderReportComponent); +// app.component('UploadComponent', UploadComponent); +// app.component('OrderComponent', OrderComponent); +// app.component('ListOrderComponent', ListOrderComponent); +// app.component('OrderPackageSummaryComponent', OrderPackageSummaryComponent); +// app.component('CancelOrderFormComponent', CancelOrderFormComponent); +// app.component('RestoreOrderFormComponent', RestoreOrderFormComponent); +// app.component('PaymentsBillingComponents', PaymentsBillingComponents); +// app.component('CustomerActivityReportSectionComponent', CustomerActivityReportSectionComponent); +// app.component('SearchCustomerByEmailComponent', SearchCustomerByEmailComponent); +// app.component('CustomerReportSectionComponent', CustomerReportSectionComponent); +// app.component('CompanyComponent', CompanyComponent); +// app.component('UserCompanyComponent', UserCompanyComponent); +// app.component('OrderSearchSectionComponent', OrderSearchSectionComponent); +// app.component('WarehouseListExportComponent', WarehouseListExportComponent); +// app.component('WarehousePackingListComponent', WarehousePackingListComponent); +// app.component('ParcelComponent', ParcelComponent); +// app.component('DeleteParcelFormComponent', DeleteParcelFormComponent); +// app.component('ContainerSearchComponent', ContainerSearchComponent); +// app.component('CreateLoadContainerFormComponent', CreateLoadContainerFormComponent); +// app.component('ContainerComponent', ContainerComponent); +// app.component('PackingListSectionComponent', PackingListSectionComponent); +// app.component('SegmentCompanyComponent', SegmentCompanyComponent); +// app.component('AdminFeedbackCustomerSectionComponent', AdminFeedbackCustomerSectionComponent); +// app.component('GenerateFeedbackLinkFormComponent', GenerateFeedbackLinkFormComponent); +// app.component('QuestionAnswerComponent', QuestionAnswerComponent); +// app.component('UserProfileComponent', UserProfileComponent); +// app.component('UploadDebtorExcelComponent', UploadDebtorExcelComponent); +// app.component('PermitsReminderComponent', PermitsReminderComponent); +// app.component('UserFormComponent', UserFormComponent); +// app.component('ListAdminComponent', ListAdminComponent); +// app.component('BasePriceFormComponent', BasePriceFormComponent); +// app.component('ListBasePriceSectionComponent', ListBasePriceSectionComponent); +// app.component('EditSegmentPriceFormComponent', EditSegmentPriceFormComponent); +// app.component('SegmentFormComponent', SegmentFormComponent); +// app.component('SegmentComponent', SegmentComponent); +// app.component('AnnouncementFormComponent', AnnouncementFormComponent); +// app.component('AnnouncementListComponent', AnnouncementListComponent); +// app.component('DeleteAnnouncementFormComponent', DeleteAnnouncementFormComponent); +// app.component('DetachAnnouncementFromSegmentFormComponent', DetachAnnouncementFromSegmentFormComponent); +// app.component('AssignAnnouncementToSegmentFormComponent', AssignAnnouncementToSegmentFormComponent); +// app.component('PostcodeSectionComponent', PostcodeSectionComponent); +// app.component('StatesChargesComponent', StatesChargesComponent); +// app.component('EditStateChargesFormComponent', EditStateChargesFormComponent); +// app.component('WarehouseChargesComponent', WarehouseChargesComponent); +// app.component('EditWarehouseChargesFormComponent', EditWarehouseChargesFormComponent); +// app.component('PaymentAttemptLimitFormComponent', PaymentAttemptLimitFormComponent); +// app.component('DisplayWarehouseAddressComponent', DisplayWarehouseAddressComponent); +// app.component('AddPermitsReminderFormComponent', AddPermitsReminderFormComponent); +// app.component('PermitsReminderItemComponent', PermitsReminderItemComponent); +// app.component('UserComponent', UserComponent); +// app.component('ListPostcodeComponent', ListPostcodeComponent); +// app.component('ChangeAdminRoleTypeFormComponent', ChangeAdminRoleTypeFormComponent); +// app.component('DeleteUserFormComponent', DeleteUserFormComponent); +// app.component('DeclarePostcodeAreaFormComponent', DeclarePostcodeAreaFormComponent); + + +// Register tooltip directive +app.directive('tooltip', { + mounted(el, binding) { + if (window.$) { + window.$(el).tooltip({ + title: binding.value, + placement: binding.arg || 'top', + trigger: 'hover' + }); + } + } +}); + +// Mount app +app.mount('#app'); diff --git a/resources/assets/vue/components/accounts/elements/EmailVerificationComponent.vue b/resources/assets/vue/components/accounts/elements/EmailVerificationComponent.vue index 5169f3b0..71a904c5 100644 --- a/resources/assets/vue/components/accounts/elements/EmailVerificationComponent.vue +++ b/resources/assets/vue/components/accounts/elements/EmailVerificationComponent.vue @@ -37,41 +37,37 @@ - \ No newline at end of file +const successHandler = () => { + loading.value = false; + error.value = ''; +}; + +const errorHandler = (err: any) => { + loading.value = false; + error.value = err.message; +}; + diff --git a/resources/assets/vue/components/accounts/elements/LogoutComponent.vue b/resources/assets/vue/components/accounts/elements/LogoutComponent.vue index 1236d117..263ce47b 100644 --- a/resources/assets/vue/components/accounts/elements/LogoutComponent.vue +++ b/resources/assets/vue/components/accounts/elements/LogoutComponent.vue @@ -1,79 +1,93 @@ - \ No newline at end of file diff --git a/resources/assets/vue/components/accounts/forms/CompleteRegistrationFormComponent.vue b/resources/assets/vue/components/accounts/forms/CompleteRegistrationFormComponent.vue index 1ea8a1b2..043c214b 100644 --- a/resources/assets/vue/components/accounts/forms/CompleteRegistrationFormComponent.vue +++ b/resources/assets/vue/components/accounts/forms/CompleteRegistrationFormComponent.vue @@ -54,7 +54,7 @@
- + @@ -62,7 +62,7 @@
- +
@@ -73,11 +73,11 @@
- - - \ No newline at end of file diff --git a/resources/assets/vue/components/accounts/forms/EmailVerificationFormComponent.vue b/resources/assets/vue/components/accounts/forms/EmailVerificationFormComponent.vue index 8cfeb88b..bf7088fa 100644 --- a/resources/assets/vue/components/accounts/forms/EmailVerificationFormComponent.vue +++ b/resources/assets/vue/components/accounts/forms/EmailVerificationFormComponent.vue @@ -1,7 +1,7 @@ - \ No newline at end of file diff --git a/resources/assets/vue/components/accounts/forms/ForgetPasswordFormComponent.vue b/resources/assets/vue/components/accounts/forms/ForgetPasswordFormComponent.vue index 557a535a..c598c99c 100644 --- a/resources/assets/vue/components/accounts/forms/ForgetPasswordFormComponent.vue +++ b/resources/assets/vue/components/accounts/forms/ForgetPasswordFormComponent.vue @@ -6,11 +6,11 @@ {{error}}
-
+
- +
@@ -21,7 +21,7 @@
-
+
@@ -36,53 +36,74 @@
-
-
Reset Password
+
+
Reset Password
-

Remember password? Sign in

+

Remember password? Sign in

- \ No newline at end of file +const v$ = useVuelidate(rules, { parameters }) as any; + +const authStore = useAuthStore() +const { submit } = useRequest() + +const resetForm = () => { + parameters.value = { + email: '' + } + v$.value.$reset() +} + +const validate = async () => { + return await v$.value.$validate(); +} + +const successHandler = () => { + uiStore.toggleSection('forgetPasswordSuccess', true) + authStore.setPasswordResetEmail(parameters.value.email) + resetForm() +} + +const errorHandler = (err: any) => { + error.value = err.message +} + +const returnToLogin = () => { + authStore.returnToLoginAfterSendResetPasswordLink() +} + diff --git a/resources/assets/vue/components/accounts/forms/InviteRegistrationFormComponent.vue b/resources/assets/vue/components/accounts/forms/InviteRegistrationFormComponent.vue index 9b8af5ea..703668cc 100644 --- a/resources/assets/vue/components/accounts/forms/InviteRegistrationFormComponent.vue +++ b/resources/assets/vue/components/accounts/forms/InviteRegistrationFormComponent.vue @@ -15,13 +15,13 @@
- +
- + @@ -29,7 +29,7 @@
- + @@ -37,13 +37,13 @@
- +
- + @@ -51,7 +51,7 @@
-
- +
@@ -74,28 +74,72 @@
- diff --git a/resources/assets/vue/components/accounts/forms/LoginFormComponent.vue b/resources/assets/vue/components/accounts/forms/LoginFormComponent.vue index 153cf90f..1d04c4a1 100644 --- a/resources/assets/vue/components/accounts/forms/LoginFormComponent.vue +++ b/resources/assets/vue/components/accounts/forms/LoginFormComponent.vue @@ -4,23 +4,23 @@
- + - +
- +
-

Forgot password?

+

Forgot password?

@@ -40,31 +40,63 @@
- \ No newline at end of file +const props = defineProps<{ + section: string; +}>(); + +const { submit } = useModalFormHandler({ section: props.section }) +const authStore = useAuthStore(); +const uiStore = useUiStore(); +const rules = { + parameters: { + email: { required, email }, + password: { required } + } +}; + +const error = ref(''); +const parameters = reactive({ + email: '', + password: '' +}); +const currentUrl = window.location.href; + +const v$ = useVuelidate(rules, { parameters }) as any; + +const submitForm = async () => { + await submit( + route('api.account.authentication.authenticate.attempt'), + 'post', + props.section, + false, + false, + parameters, + { + validate: async () => { + return await v$.value.$validate(); + }, + successHandler: (response: any) => { + error.value = ''; + authStore.userAuthentication({ + access_token: response.payload.access_token, + redirect_url: response.payload.redirect_url + }); + }, + errorHandler: (response: any) => { + error.value = response.message; + } + } + ); +}; + diff --git a/resources/assets/vue/components/accounts/forms/NewRegistrationFormComponent.vue b/resources/assets/vue/components/accounts/forms/NewRegistrationFormComponent.vue index 60e20b01..ea3e48a7 100644 --- a/resources/assets/vue/components/accounts/forms/NewRegistrationFormComponent.vue +++ b/resources/assets/vue/components/accounts/forms/NewRegistrationFormComponent.vue @@ -8,13 +8,13 @@
- +
- + @@ -22,7 +22,7 @@
- + @@ -31,13 +31,13 @@
- +
- + @@ -45,7 +45,7 @@
-
- +
@@ -36,48 +36,76 @@
- diff --git a/resources/assets/vue/components/accounts/forms/RegistrationFormComponent.vue b/resources/assets/vue/components/accounts/forms/RegistrationFormComponent.vue index 926af6de..be1dc7d6 100644 --- a/resources/assets/vue/components/accounts/forms/RegistrationFormComponent.vue +++ b/resources/assets/vue/components/accounts/forms/RegistrationFormComponent.vue @@ -54,7 +54,7 @@
- + @@ -62,7 +62,7 @@
- +
@@ -73,11 +73,11 @@
- - - diff --git a/resources/assets/vue/components/general/elements/RemarkListComponent.vue b/resources/assets/vue/components/general/elements/RemarkListComponent.vue index da218ea9..c43d4c24 100644 --- a/resources/assets/vue/components/general/elements/RemarkListComponent.vue +++ b/resources/assets/vue/components/general/elements/RemarkListComponent.vue @@ -17,7 +17,7 @@
-
+
@@ -48,24 +48,20 @@ -
+
- diff --git a/resources/assets/vue/components/general/elements/SearchComponent.vue b/resources/assets/vue/components/general/elements/SearchComponent.vue index eca19095..c247953a 100644 --- a/resources/assets/vue/components/general/elements/SearchComponent.vue +++ b/resources/assets/vue/components/general/elements/SearchComponent.vue @@ -44,38 +44,42 @@
- diff --git a/resources/assets/vue/components/general/elements/TransitionComponent.vue b/resources/assets/vue/components/general/elements/TransitionComponent.vue index 884fdd74..5af712e3 100644 --- a/resources/assets/vue/components/general/elements/TransitionComponent.vue +++ b/resources/assets/vue/components/general/elements/TransitionComponent.vue @@ -1,58 +1,56 @@ - \ No newline at end of file diff --git a/resources/assets/vue/components/general/elements/bearComponent.vue b/resources/assets/vue/components/general/elements/bearComponent.vue index d72be2e8..947dba21 100644 --- a/resources/assets/vue/components/general/elements/bearComponent.vue +++ b/resources/assets/vue/components/general/elements/bearComponent.vue @@ -13,12 +13,7 @@
- diff --git a/resources/assets/vue/components/general/forms/DatePickerComponent.vue b/resources/assets/vue/components/general/forms/DatePickerComponent.vue index 571227ef..1c952cd4 100644 --- a/resources/assets/vue/components/general/forms/DatePickerComponent.vue +++ b/resources/assets/vue/components/general/forms/DatePickerComponent.vue @@ -1,28 +1,39 @@ - \ No newline at end of file +}); + +watch(() => props.modelValue, (val) => { + if (window.$ && el.value) { + window.$(el.value).val(val).trigger('change'); + } +}); + diff --git a/resources/assets/vue/components/general/forms/DatePickerLimitRangeComponent.vue b/resources/assets/vue/components/general/forms/DatePickerLimitRangeComponent.vue index d65b8b50..abe200ea 100644 --- a/resources/assets/vue/components/general/forms/DatePickerLimitRangeComponent.vue +++ b/resources/assets/vue/components/general/forms/DatePickerLimitRangeComponent.vue @@ -1,47 +1,55 @@ - diff --git a/resources/assets/vue/components/general/forms/DeleteRemarkFormComponent.vue b/resources/assets/vue/components/general/forms/DeleteRemarkFormComponent.vue index 4e50d8c4..bfaf14e9 100644 --- a/resources/assets/vue/components/general/forms/DeleteRemarkFormComponent.vue +++ b/resources/assets/vue/components/general/forms/DeleteRemarkFormComponent.vue @@ -23,10 +23,18 @@
- diff --git a/resources/assets/vue/components/general/forms/FileInputComponent.vue b/resources/assets/vue/components/general/forms/FileInputComponent.vue index 45ef8a1e..bbae0de7 100644 --- a/resources/assets/vue/components/general/forms/FileInputComponent.vue +++ b/resources/assets/vue/components/general/forms/FileInputComponent.vue @@ -26,28 +26,30 @@
- +
- \ No newline at end of file diff --git a/resources/assets/vue/components/general/forms/FileUploadComponent.vue b/resources/assets/vue/components/general/forms/FileUploadComponent.vue index 89b6fc2c..99ef13fb 100644 --- a/resources/assets/vue/components/general/forms/FileUploadComponent.vue +++ b/resources/assets/vue/components/general/forms/FileUploadComponent.vue @@ -60,107 +60,94 @@
- diff --git a/resources/assets/vue/components/general/forms/GeneralConfirmationFormComponent.vue b/resources/assets/vue/components/general/forms/GeneralConfirmationFormComponent.vue index d2aac711..536dedef 100644 --- a/resources/assets/vue/components/general/forms/GeneralConfirmationFormComponent.vue +++ b/resources/assets/vue/components/general/forms/GeneralConfirmationFormComponent.vue @@ -1,7 +1,7 @@ - diff --git a/resources/assets/vue/components/general/forms/HelpMenuFormComponent.vue b/resources/assets/vue/components/general/forms/HelpMenuFormComponent.vue index 3f6cb59f..93048102 100644 --- a/resources/assets/vue/components/general/forms/HelpMenuFormComponent.vue +++ b/resources/assets/vue/components/general/forms/HelpMenuFormComponent.vue @@ -1,8 +1,8 @@ - diff --git a/resources/assets/vue/components/general/forms/ModalFormComponent.vue b/resources/assets/vue/components/general/forms/ModalFormComponent.vue index 57e38fba..c588f12c 100644 --- a/resources/assets/vue/components/general/forms/ModalFormComponent.vue +++ b/resources/assets/vue/components/general/forms/ModalFormComponent.vue @@ -1,8 +1,8 @@ - diff --git a/resources/assets/vue/components/general/forms/ReloadConfirmationFormComponent.vue b/resources/assets/vue/components/general/forms/ReloadConfirmationFormComponent.vue index dd9e7521..849a9e6d 100644 --- a/resources/assets/vue/components/general/forms/ReloadConfirmationFormComponent.vue +++ b/resources/assets/vue/components/general/forms/ReloadConfirmationFormComponent.vue @@ -19,30 +19,26 @@
- diff --git a/resources/assets/vue/components/general/forms/RemarkCommentFormComponent.vue b/resources/assets/vue/components/general/forms/RemarkCommentFormComponent.vue index 7da26ca8..2846605e 100644 --- a/resources/assets/vue/components/general/forms/RemarkCommentFormComponent.vue +++ b/resources/assets/vue/components/general/forms/RemarkCommentFormComponent.vue @@ -1,7 +1,7 @@ - diff --git a/resources/assets/vue/components/general/forms/RemarkFormComponent.vue b/resources/assets/vue/components/general/forms/RemarkFormComponent.vue index 73a8575f..63c9e032 100644 --- a/resources/assets/vue/components/general/forms/RemarkFormComponent.vue +++ b/resources/assets/vue/components/general/forms/RemarkFormComponent.vue @@ -1,8 +1,8 @@ - diff --git a/resources/assets/vue/components/general/forms/SelectComponent.vue b/resources/assets/vue/components/general/forms/SelectComponent.vue index 7c6a662a..2730cc82 100644 --- a/resources/assets/vue/components/general/forms/SelectComponent.vue +++ b/resources/assets/vue/components/general/forms/SelectComponent.vue @@ -1,51 +1,113 @@ - + + diff --git a/resources/assets/vue/components/general/forms/SelectableComponent.vue b/resources/assets/vue/components/general/forms/SelectableComponent.vue index d86c35cc..7b09f17e 100644 --- a/resources/assets/vue/components/general/forms/SelectableComponent.vue +++ b/resources/assets/vue/components/general/forms/SelectableComponent.vue @@ -1,54 +1,45 @@ - - diff --git a/resources/assets/vue/components/general/forms/ValidationErrorComponent.vue b/resources/assets/vue/components/general/forms/ValidationErrorComponent.vue index 231668c1..11555469 100644 --- a/resources/assets/vue/components/general/forms/ValidationErrorComponent.vue +++ b/resources/assets/vue/components/general/forms/ValidationErrorComponent.vue @@ -1,43 +1,49 @@ - diff --git a/resources/assets/vue/components/general/forms/ValidationWrapperComponent.vue b/resources/assets/vue/components/general/forms/ValidationWrapperComponent.vue index 285c19ff..48700c51 100644 --- a/resources/assets/vue/components/general/forms/ValidationWrapperComponent.vue +++ b/resources/assets/vue/components/general/forms/ValidationWrapperComponent.vue @@ -1,13 +1,13 @@ - \ No newline at end of file diff --git a/resources/assets/vue/components/general/sections/SupportSectionComponent.vue b/resources/assets/vue/components/general/sections/SupportSectionComponent.vue index 75839088..0a3d4523 100644 --- a/resources/assets/vue/components/general/sections/SupportSectionComponent.vue +++ b/resources/assets/vue/components/general/sections/SupportSectionComponent.vue @@ -4,20 +4,6 @@
-
@@ -40,44 +26,39 @@
- \ No newline at end of file diff --git a/resources/assets/vue/components/orders/elements/ApproveChangeAddressComponent.vue b/resources/assets/vue/components/orders/elements/ApproveChangeAddressComponent.vue index d4217fd5..66380491 100644 --- a/resources/assets/vue/components/orders/elements/ApproveChangeAddressComponent.vue +++ b/resources/assets/vue/components/orders/elements/ApproveChangeAddressComponent.vue @@ -1,22 +1,22 @@ - diff --git a/resources/assets/vue/components/orders/elements/ListOrderComponent.vue b/resources/assets/vue/components/orders/elements/ListOrderComponent.vue index 02ca25da..845dbb69 100644 --- a/resources/assets/vue/components/orders/elements/ListOrderComponent.vue +++ b/resources/assets/vue/components/orders/elements/ListOrderComponent.vue @@ -5,7 +5,7 @@
-
+
@@ -29,8 +29,8 @@
-
-
+
+
@@ -39,7 +39,7 @@
- +
@@ -49,76 +49,114 @@ - diff --git a/resources/assets/vue/components/orders/elements/OrderComponent.vue b/resources/assets/vue/components/orders/elements/OrderComponent.vue index 11ed9f17..d599acde 100644 --- a/resources/assets/vue/components/orders/elements/OrderComponent.vue +++ b/resources/assets/vue/components/orders/elements/OrderComponent.vue @@ -8,7 +8,7 @@
- +
@@ -35,7 +35,7 @@
Warehouse -
{{item.warehouse.name}} {{$store.getters.isAdmin ? item.warehouse.reference : ''}}
+
{{item.warehouse.name}} {{authStore.isAdmin ? item.warehouse.reference : ''}}
@@ -80,7 +80,7 @@
-
+
-
-
+
+
@@ -74,39 +74,49 @@
- diff --git a/resources/assets/vue/components/orders/elements/OrderPackageSummaryComponent.vue b/resources/assets/vue/components/orders/elements/OrderPackageSummaryComponent.vue index 35b50cf0..7a12fd6e 100644 --- a/resources/assets/vue/components/orders/elements/OrderPackageSummaryComponent.vue +++ b/resources/assets/vue/components/orders/elements/OrderPackageSummaryComponent.vue @@ -5,7 +5,7 @@
Received -
{{order.parcels.received_packages.flatMap(packing_list => packing_list.packages).reduce((total, obj) => obj.quantity + total, 0)}}
+
{{order.parcels.received_packages.flatMap((packing_list: any) => packing_list.packages).reduce((total: any, obj: any) => obj.quantity + total, 0)}}
-
@@ -14,26 +14,26 @@
{{ order.parcels.in_transit_packages - .flatMap(packing_list => packing_list.packages) - .concat(order.parcels.destination_warehouse_packages.flatMap(packing_list => packing_list.packages)) - .reduce((total, obj) => obj.quantity + total, 0) + .flatMap((packing_list: any) => packing_list.packages) + .concat(order.parcels.destination_warehouse_packages.flatMap((packing_list: any) => packing_list.packages)) + .reduce((total: any, obj: any) => obj.quantity + total, 0) }}
-->
{{ order.parcels.in_transit_packages - .flatMap(packing_list => packing_list.packages) - .concat(order.parcels.destination_warehouse_packages.flatMap(packing_list => packing_list.packages)) - .filter(obj => obj.description !== 'Overweight CBM') - .reduce((total, obj) => obj.quantity + total, 0) + .flatMap((packing_list: any) => packing_list.packages) + .concat(order.parcels.destination_warehouse_packages.flatMap((packing_list: any) => packing_list.packages)) + .filter((obj: any) => obj.description !== 'Overweight CBM') + .reduce((total: any, obj: any) => obj.quantity + total, 0) }}
-
Delivered -
{{order.parcels.delivered_packages.flatMap(packing_list => packing_list.packages).reduce((total, obj) => obj.quantity + total, 0)}}
+
{{order.parcels.delivered_packages.flatMap((packing_list: any) => packing_list.packages).reduce((total: any, obj: any) => obj.quantity + total, 0)}}
-
@@ -43,7 +43,7 @@
-
+
Marking
{{company_marking}}
@@ -55,52 +55,61 @@
Total CBM -
{{(Math.ceil((order.parcels.origin_warehouse_packages.flatMap(packing_list => packing_list.packages).reduce((total, obj) => obj.cbm + total, 0) + order.parcels.in_transit_packages.flatMap(packing_list => packing_list.packages).reduce((total, obj) => obj.cbm + total, 0) + order.parcels.destination_warehouse_packages.flatMap(packing_list => packing_list.packages).reduce((total, obj) => obj.cbm + total, 0) + order.parcels.delivered_packages.flatMap(packing_list => packing_list.packages).reduce((total, obj) => obj.cbm + total, 0)) * 10000) / 10000).toFixed(3)}}
+
{{(Math.ceil((order.parcels.origin_warehouse_packages.flatMap((packing_list: any) => packing_list.packages).reduce((total: any, obj: any) => obj.cbm + total, 0) + order.parcels.in_transit_packages.flatMap((packing_list: any) => packing_list.packages).reduce((total: any, obj: any) => obj.cbm + total, 0) + order.parcels.destination_warehouse_packages.flatMap((packing_list: any) => packing_list.packages).reduce((total: any, obj: any) => obj.cbm + total, 0) + order.parcels.delivered_packages.flatMap((packing_list: any) => packing_list.packages).reduce((total: any, obj: any) => obj.cbm + total, 0)) * 10000) / 10000).toFixed(3)}}
-
- diff --git a/resources/assets/vue/components/orders/elements/OrderPackagesComponent.vue b/resources/assets/vue/components/orders/elements/OrderPackagesComponent.vue index 807f03ab..64459bdf 100644 --- a/resources/assets/vue/components/orders/elements/OrderPackagesComponent.vue +++ b/resources/assets/vue/components/orders/elements/OrderPackagesComponent.vue @@ -16,7 +16,7 @@ style=" fill:#000000;">
-
+
Add Arrived Parcel
@@ -47,7 +47,7 @@
@@ -58,10 +58,10 @@
-
+
-
-
+
+
@@ -88,63 +88,74 @@
- diff --git a/resources/assets/vue/components/orders/elements/OrderPackagesV2Component.vue b/resources/assets/vue/components/orders/elements/OrderPackagesV2Component.vue index c68a7190..de61da36 100644 --- a/resources/assets/vue/components/orders/elements/OrderPackagesV2Component.vue +++ b/resources/assets/vue/components/orders/elements/OrderPackagesV2Component.vue @@ -16,7 +16,7 @@ style=" fill:#000000;">
-
+
Add Arrived Parcel
@@ -60,63 +60,72 @@
- diff --git a/resources/assets/vue/components/orders/elements/OrderPackagesV2OriginWarehouseComponent.vue b/resources/assets/vue/components/orders/elements/OrderPackagesV2OriginWarehouseComponent.vue index dbcf7a9e..bc412752 100644 --- a/resources/assets/vue/components/orders/elements/OrderPackagesV2OriginWarehouseComponent.vue +++ b/resources/assets/vue/components/orders/elements/OrderPackagesV2OriginWarehouseComponent.vue @@ -34,50 +34,55 @@
- diff --git a/resources/assets/vue/components/orders/elements/PackageComponent.vue b/resources/assets/vue/components/orders/elements/PackageComponent.vue index d68e439d..79d6a56d 100644 --- a/resources/assets/vue/components/orders/elements/PackageComponent.vue +++ b/resources/assets/vue/components/orders/elements/PackageComponent.vue @@ -19,7 +19,7 @@

{{item.description}}

-
+

Reference

@@ -46,7 +46,10 @@

Total CBM

-
{{(Math.ceil(parseFloat((item.cbm * 1000))) / 1000).toFixed(3)}}
+
+ {{ (Math.ceil(Number(item.cbm) * 1000) / 1000).toFixed(3) }} +
+
@@ -62,13 +65,13 @@ Status

{{item.container ? item.container.transport.schedule_complete && status === 'Shipping' ? 'Custom Clearance' : status : status}}

-
+
Container

{{ item.container ? item.container.container_reference : '-' }}

-
+
@@ -86,7 +89,7 @@
-
+
@@ -109,7 +112,7 @@
Warehouse -
{{item.order.warehouse.name}} {{$store.getters.isAdmin ? item.order.warehouse.reference : ''}}
+
{{item.order.warehouse.name}} {{authStore.isAdmin ? item.order.warehouse.reference : ''}}
Delivery Address @@ -143,7 +146,15 @@
-
+ +
+
@@ -208,25 +219,28 @@
-