diff --git a/packages/webapp/src/assets/variables.scss b/packages/webapp/src/assets/variables.scss index c48e7871da..0b6b68f391 100644 --- a/packages/webapp/src/assets/variables.scss +++ b/packages/webapp/src/assets/variables.scss @@ -1,17 +1,17 @@ -@import './mixin.scss'; +@use './mixin' as *; :root { - // GLOBAL CSS VARIABLES - --global-navbar-height: 64px; - --global-map-header-height: 48px; - --global-side-menu-width: 188px; - --global-compact-side-menu-width: 80px; - // 249px = 24px form padding + 41px form title and progress + 24px margin + 24px call to action + 16 px margin + 24px margin + 24 px padding + 48px button + 24 px padding - --global-multi-step-task-layout-aggregated-height: 249px; + // GLOBAL CSS VARIABLES + --global-navbar-height: 64px; + --global-map-header-height: 48px; + --global-side-menu-width: 188px; + --global-compact-side-menu-width: 80px; + // 249px = 24px form padding + 41px form title and progress + 24px margin + 24px call to action + 16 px margin + 24px margin + 24 px padding + 48px button + 24 px padding + --global-multi-step-task-layout-aggregated-height: 249px; - @include xs-breakpoint { - --global-navbar-height: 55px; - --global-side-menu-width: 0px; - --global-compact-side-menu-width: 0px; - } + @include xs-breakpoint { + --global-navbar-height: 55px; + --global-side-menu-width: 0px; + --global-compact-side-menu-width: 0px; + } } diff --git a/packages/webapp/src/components/ActionMenu/styles.module.scss b/packages/webapp/src/components/ActionMenu/styles.module.scss index b6b4af514e..49f5a2beac 100644 --- a/packages/webapp/src/components/ActionMenu/styles.module.scss +++ b/packages/webapp/src/components/ActionMenu/styles.module.scss @@ -12,7 +12,7 @@ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details, see . */ -@import '../../assets/mixin.scss'; +@use '../../assets/mixin' as *; @mixin calculate-icon-group-width($iconCount) { // gap between iconGroup is 8px diff --git a/packages/webapp/src/components/AddSensors/styles.module.scss b/packages/webapp/src/components/AddSensors/styles.module.scss index a6f63f2f56..4fa3be925c 100644 --- a/packages/webapp/src/components/AddSensors/styles.module.scss +++ b/packages/webapp/src/components/AddSensors/styles.module.scss @@ -13,7 +13,7 @@ * GNU General Public License for more details, see . */ -@import '../../assets/mixin.scss'; +@use '../../assets/mixin' as *; .wrapper { padding: 34px 32px 0 32px; diff --git a/packages/webapp/src/components/Animals/AddAnimalsForm/AnimalFormHeaderItem/styles.module.scss b/packages/webapp/src/components/Animals/AddAnimalsForm/AnimalFormHeaderItem/styles.module.scss index c85da3bf15..7a420046ce 100644 --- a/packages/webapp/src/components/Animals/AddAnimalsForm/AnimalFormHeaderItem/styles.module.scss +++ b/packages/webapp/src/components/Animals/AddAnimalsForm/AnimalFormHeaderItem/styles.module.scss @@ -13,7 +13,7 @@ * GNU General Public License for more details, see . */ -@import '../../../../assets/mixin'; +@use '../../../../assets/mixin' as *; // Set up desktop and mobile layout .mainContent { diff --git a/packages/webapp/src/components/Animals/AddAnimalsForm/styles.module.scss b/packages/webapp/src/components/Animals/AddAnimalsForm/styles.module.scss index 8c661f46d0..be45b072cc 100644 --- a/packages/webapp/src/components/Animals/AddAnimalsForm/styles.module.scss +++ b/packages/webapp/src/components/Animals/AddAnimalsForm/styles.module.scss @@ -12,7 +12,7 @@ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details, see . */ -@import '../../../assets/mixin.scss'; +@use '../../../assets/mixin' as *; .card { // Layout diff --git a/packages/webapp/src/components/Animals/AddAnimalsFormCard/styles.module.scss b/packages/webapp/src/components/Animals/AddAnimalsFormCard/styles.module.scss index 5ed2bbb4ea..038f5c6750 100644 --- a/packages/webapp/src/components/Animals/AddAnimalsFormCard/styles.module.scss +++ b/packages/webapp/src/components/Animals/AddAnimalsFormCard/styles.module.scss @@ -13,7 +13,7 @@ * GNU General Public License for more details, see . */ -@import '../../../assets/mixin'; +@use '../../../assets/mixin' as *; .form { display: flex; diff --git a/packages/webapp/src/components/Animals/AddAnimalsSummaryCard/IconSummary/styles.module.scss b/packages/webapp/src/components/Animals/AddAnimalsSummaryCard/IconSummary/styles.module.scss index fba2c5b778..9234d685b8 100644 --- a/packages/webapp/src/components/Animals/AddAnimalsSummaryCard/IconSummary/styles.module.scss +++ b/packages/webapp/src/components/Animals/AddAnimalsSummaryCard/IconSummary/styles.module.scss @@ -13,7 +13,7 @@ * GNU General Public License for more details, see . */ -@import '../../../../assets/mixin'; +@use '../../../../assets/mixin' as *; .iconContainer { width: 40px; // width of the larger (batch) icon diff --git a/packages/webapp/src/components/Animals/AddAnimalsSummaryCard/styles.module.scss b/packages/webapp/src/components/Animals/AddAnimalsSummaryCard/styles.module.scss index 275c78710d..a57d260bc9 100644 --- a/packages/webapp/src/components/Animals/AddAnimalsSummaryCard/styles.module.scss +++ b/packages/webapp/src/components/Animals/AddAnimalsSummaryCard/styles.module.scss @@ -13,7 +13,7 @@ * GNU General Public License for more details, see . */ -@import '../../../assets/mixin'; +@use '../../../assets/mixin' as *; .container { display: flex; diff --git a/packages/webapp/src/components/Animals/AnimalSingleViewHeader/styles.module.scss b/packages/webapp/src/components/Animals/AnimalSingleViewHeader/styles.module.scss index 7b0097c71a..dacb4bf638 100644 --- a/packages/webapp/src/components/Animals/AnimalSingleViewHeader/styles.module.scss +++ b/packages/webapp/src/components/Animals/AnimalSingleViewHeader/styles.module.scss @@ -13,7 +13,7 @@ * GNU General Public License for more details, see . */ -@import '../../../assets/mixin'; +@use '../../../assets/mixin' as *; .containerWithButtons { height: 80px; diff --git a/packages/webapp/src/components/Animals/FixedHeaderContainer/styles.module.scss b/packages/webapp/src/components/Animals/FixedHeaderContainer/styles.module.scss index 2b3152ab57..6857780f41 100644 --- a/packages/webapp/src/components/Animals/FixedHeaderContainer/styles.module.scss +++ b/packages/webapp/src/components/Animals/FixedHeaderContainer/styles.module.scss @@ -13,7 +13,7 @@ * GNU General Public License for more details, see . */ -@import '../../../assets/mixin.scss'; +@use '../../../assets/mixin' as *; .wrapper { height: calc(100vh - var(--global-navbar-height)); diff --git a/packages/webapp/src/components/Badge/styles.module.scss b/packages/webapp/src/components/Badge/styles.module.scss index 88ad1a92df..fb6a19be1c 100644 --- a/packages/webapp/src/components/Badge/styles.module.scss +++ b/packages/webapp/src/components/Badge/styles.module.scss @@ -13,7 +13,7 @@ * GNU General Public License for more details, see . */ -@import '../../assets/mixin.scss'; +@use '../../assets/mixin' as *; .tooltip { color: #000; diff --git a/packages/webapp/src/components/Card/NotificationCard/styles.module.scss b/packages/webapp/src/components/Card/NotificationCard/styles.module.scss index bed1dcdcad..942ce95fc8 100644 --- a/packages/webapp/src/components/Card/NotificationCard/styles.module.scss +++ b/packages/webapp/src/components/Card/NotificationCard/styles.module.scss @@ -13,7 +13,7 @@ * GNU General Public License for more details, see . */ -@import '@assets/mixin'; +@use '@assets/mixin' as *; .notificationCard { display: flex; diff --git a/packages/webapp/src/components/Card/card.module.scss b/packages/webapp/src/components/Card/card.module.scss index b4058380d4..56570e5916 100644 --- a/packages/webapp/src/components/Card/card.module.scss +++ b/packages/webapp/src/components/Card/card.module.scss @@ -1,4 +1,4 @@ -@import '../../assets/mixin'; +@use '../../assets/mixin' as *; .container { box-sizing: border-box; border-radius: 4px; @@ -57,7 +57,6 @@ } .none { - } // task styles @@ -91,11 +90,11 @@ // notification styles .notificationUnread { - background-color: var(--white); + background-color: var(--white); } .notificationRead { - background-color: var(--grey200); + background-color: var(--grey200); } // SummaryCard @@ -121,13 +120,15 @@ h4.lgSummaryData { } .negative { - h4, p { + h4, + p { color: var(--red700); } } .positive { - h4, p { + h4, + p { color: var(--green800); } } diff --git a/packages/webapp/src/components/CardWithStatus/ManagementPlanCard/styles.module.scss b/packages/webapp/src/components/CardWithStatus/ManagementPlanCard/styles.module.scss index ec02e8816d..9c7b13b2ea 100644 --- a/packages/webapp/src/components/CardWithStatus/ManagementPlanCard/styles.module.scss +++ b/packages/webapp/src/components/CardWithStatus/ManagementPlanCard/styles.module.scss @@ -1,4 +1,4 @@ -@import '@assets/mixin.scss'; +@use '@assets/mixin' as *; .info { display: flex; @@ -38,12 +38,12 @@ color: var(--fontColor); } -.repeatPlan{ +.repeatPlan { margin-left: 8px; color: var(--teal700); } -.underline{ +.underline { text-decoration: underline; } @@ -66,7 +66,6 @@ gap: 3px; } - .circle { display: flex; align-items: center; diff --git a/packages/webapp/src/components/CardWithStatus/TaskCard/styles.module.scss b/packages/webapp/src/components/CardWithStatus/TaskCard/styles.module.scss index c209ff0c3c..ffcd7e77e2 100644 --- a/packages/webapp/src/components/CardWithStatus/TaskCard/styles.module.scss +++ b/packages/webapp/src/components/CardWithStatus/TaskCard/styles.module.scss @@ -1,4 +1,4 @@ -@import '@assets/mixin.scss'; +@use '@assets/mixin' as *; .card { display: flex; @@ -44,7 +44,7 @@ display: flex; flex-direction: row; gap: 8px; - color: var(--fontColor) + color: var(--fontColor); } .iconTextContainer { @@ -110,4 +110,4 @@ @include md-breakpoint { visibility: hidden; } -} \ No newline at end of file +} diff --git a/packages/webapp/src/components/ChooseFarm/ChooseFarmMenu/ChooseFarmMenuItem/chooseFarmMenuItem.module.scss b/packages/webapp/src/components/ChooseFarm/ChooseFarmMenu/ChooseFarmMenuItem/chooseFarmMenuItem.module.scss index a3a0d9cd6f..ad3fc11cae 100644 --- a/packages/webapp/src/components/ChooseFarm/ChooseFarmMenu/ChooseFarmMenuItem/chooseFarmMenuItem.module.scss +++ b/packages/webapp/src/components/ChooseFarm/ChooseFarmMenu/ChooseFarmMenuItem/chooseFarmMenuItem.module.scss @@ -1,4 +1,4 @@ -@import '../../../../assets/mixin'; +@use '../../../../assets/mixin' as *; .leftColumn { margin-left: 18px; margin-right: 12px; diff --git a/packages/webapp/src/components/ChooseFarm/styles.scss b/packages/webapp/src/components/ChooseFarm/styles.scss index f2b24d7e8b..0759af87f8 100644 --- a/packages/webapp/src/components/ChooseFarm/styles.scss +++ b/packages/webapp/src/components/ChooseFarm/styles.scss @@ -1,4 +1,4 @@ -@import '../../assets/mixin'; +@use '../../assets/mixin' as *; .title { font-style: normal; font-weight: normal; diff --git a/packages/webapp/src/components/Consent/consent.module.scss b/packages/webapp/src/components/Consent/consent.module.scss index 0ba8d7dda7..d079011448 100644 --- a/packages/webapp/src/components/Consent/consent.module.scss +++ b/packages/webapp/src/components/Consent/consent.module.scss @@ -1,4 +1,4 @@ -@import '@assets/mixin.scss'; +@use '@assets/mixin' as *; .floatLabelRight { float: right; diff --git a/packages/webapp/src/components/Crop/ManagementDetail/styles.module.scss b/packages/webapp/src/components/Crop/ManagementDetail/styles.module.scss index 742a6a9888..e9f3125441 100644 --- a/packages/webapp/src/components/Crop/ManagementDetail/styles.module.scss +++ b/packages/webapp/src/components/Crop/ManagementDetail/styles.module.scss @@ -1,4 +1,4 @@ -@import '@assets/mixin.scss'; +@use '@assets/mixin' as *; .title { font-style: normal; diff --git a/packages/webapp/src/components/Crop/PlantingDate/styles.module.scss b/packages/webapp/src/components/Crop/PlantingDate/styles.module.scss index 9842d5d261..52242a2d70 100644 --- a/packages/webapp/src/components/Crop/PlantingDate/styles.module.scss +++ b/packages/webapp/src/components/Crop/PlantingDate/styles.module.scss @@ -1,12 +1,12 @@ -@import '@assets/mixin.scss'; +@use '@assets/mixin' as *; .label { - font-style: normal; - font-weight: normal; - color: var(--grey900); - font-size: 16px; - line-height: 16px; - @include fontFamily(); - margin-bottom: 4px; - margin-top: 0; + font-style: normal; + font-weight: normal; + color: var(--grey900); + font-size: 16px; + line-height: 16px; + @include fontFamily(); + margin-bottom: 4px; + margin-top: 0; } diff --git a/packages/webapp/src/components/CustomSignUp/styles.module.scss b/packages/webapp/src/components/CustomSignUp/styles.module.scss index 2b7bbaa283..13821a8192 100644 --- a/packages/webapp/src/components/CustomSignUp/styles.module.scss +++ b/packages/webapp/src/components/CustomSignUp/styles.module.scss @@ -13,7 +13,7 @@ // * GNU General Public License for more details, see . // */ -@import '@assets/mixin.scss'; +@use '@assets/mixin' as *; .home .lander { color: var(--primary); diff --git a/packages/webapp/src/components/ErrorHandler/PureReactErrorFallback/styles.module.scss b/packages/webapp/src/components/ErrorHandler/PureReactErrorFallback/styles.module.scss index 12e464b18b..c1c35717e4 100644 --- a/packages/webapp/src/components/ErrorHandler/PureReactErrorFallback/styles.module.scss +++ b/packages/webapp/src/components/ErrorHandler/PureReactErrorFallback/styles.module.scss @@ -13,7 +13,7 @@ * GNU General Public License for more details, see . */ -@import '../../../assets/mixin'; +@use '../../../assets/mixin' as *; .container { min-height: 100vh; diff --git a/packages/webapp/src/components/Expandable/styles.module.scss b/packages/webapp/src/components/Expandable/styles.module.scss index 5eab17c52a..ee408fb23d 100644 --- a/packages/webapp/src/components/Expandable/styles.module.scss +++ b/packages/webapp/src/components/Expandable/styles.module.scss @@ -12,7 +12,7 @@ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details, see . */ -@import '@assets/mixin.scss'; +@use '@assets/mixin' as *; .mainContentWithIcon { display: flex; diff --git a/packages/webapp/src/components/FarmSwitchOutro/styles.module.scss b/packages/webapp/src/components/FarmSwitchOutro/styles.module.scss index 8f5b9cb730..3418d3f704 100644 --- a/packages/webapp/src/components/FarmSwitchOutro/styles.module.scss +++ b/packages/webapp/src/components/FarmSwitchOutro/styles.module.scss @@ -13,7 +13,7 @@ * GNU General Public License for more details, see . */ -@import '@assets/mixin.scss'; +@use '@assets/mixin' as *; .outroContainer { /* Rectangle 49 */ @@ -26,7 +26,7 @@ border-radius: 7.05466px; align-items: center; justify-content: space-between; - padding: 20px + padding: 20px; } .descriptionTop { diff --git a/packages/webapp/src/components/FilePicker/styles.module.scss b/packages/webapp/src/components/FilePicker/styles.module.scss index 71baa21217..2b848c8c13 100644 --- a/packages/webapp/src/components/FilePicker/styles.module.scss +++ b/packages/webapp/src/components/FilePicker/styles.module.scss @@ -13,7 +13,7 @@ * GNU General Public License for more details, see . */ -@import '../../assets/mixin.scss'; +@use '../../assets/mixin' as *; .filePickerContainer { flex-grow: 1; @@ -22,4 +22,4 @@ row-gap: 24px; align-items: center; padding-bottom: 16px; -} \ No newline at end of file +} diff --git a/packages/webapp/src/components/Filter/FilterControls/styles.module.scss b/packages/webapp/src/components/Filter/FilterControls/styles.module.scss index fa6a55a495..d37816d4f9 100644 --- a/packages/webapp/src/components/Filter/FilterControls/styles.module.scss +++ b/packages/webapp/src/components/Filter/FilterControls/styles.module.scss @@ -13,7 +13,7 @@ * GNU General Public License for more details, see . */ -@import '@assets/mixin.scss'; +@use '@assets/mixin' as *; .filterControlsContainer { display: flex; diff --git a/packages/webapp/src/components/Filter/FilterMultiSelectV2/styles.module.scss b/packages/webapp/src/components/Filter/FilterMultiSelectV2/styles.module.scss index 879e85ff13..b2b6b872b9 100644 --- a/packages/webapp/src/components/Filter/FilterMultiSelectV2/styles.module.scss +++ b/packages/webapp/src/components/Filter/FilterMultiSelectV2/styles.module.scss @@ -13,7 +13,7 @@ * GNU General Public License for more details, see . */ -@import '../../../assets/mixin.scss'; +@use '../../../assets/mixin' as *; .menuPortal { z-index: 1300; diff --git a/packages/webapp/src/components/Finances/FinancesCarrousel/styles.module.scss b/packages/webapp/src/components/Finances/FinancesCarrousel/styles.module.scss index 65d4e3dff0..334007e2a2 100644 --- a/packages/webapp/src/components/Finances/FinancesCarrousel/styles.module.scss +++ b/packages/webapp/src/components/Finances/FinancesCarrousel/styles.module.scss @@ -13,7 +13,7 @@ * GNU General Public License for more details, see . */ -@import '@assets/mixin.scss'; +@use '@assets/mixin' as *; .cardContent { display: flex; diff --git a/packages/webapp/src/components/Finances/PureFinanceTypeSelection/CantFindCustomType/styles.module.scss b/packages/webapp/src/components/Finances/PureFinanceTypeSelection/CantFindCustomType/styles.module.scss index 0f635f5d40..c963b472d5 100644 --- a/packages/webapp/src/components/Finances/PureFinanceTypeSelection/CantFindCustomType/styles.module.scss +++ b/packages/webapp/src/components/Finances/PureFinanceTypeSelection/CantFindCustomType/styles.module.scss @@ -13,7 +13,7 @@ * GNU General Public License for more details, see . */ -@import '@assets/mixin.scss'; +@use '@assets/mixin' as *; // 100vw background colour on small screens .background { diff --git a/packages/webapp/src/components/Finances/Transaction/Mobile/styles.module.scss b/packages/webapp/src/components/Finances/Transaction/Mobile/styles.module.scss index 357e7e9be6..ff6dc76332 100644 --- a/packages/webapp/src/components/Finances/Transaction/Mobile/styles.module.scss +++ b/packages/webapp/src/components/Finances/Transaction/Mobile/styles.module.scss @@ -13,7 +13,7 @@ * GNU General Public License for more details, see . */ - @import '../../../../assets/mixin.scss'; +@use '../../../../assets/mixin' as *; // TransactionList .transactionList { @@ -40,9 +40,9 @@ background-color: var(--bgInputListTile); &.expanded { - background-color: #F6FBFA; + background-color: #f6fbfa; border: solid 1px var(--grey400); - box-shadow: 0px 0px 4px 0px #66738A1A; + box-shadow: 0px 0px 4px 0px #66738a1a; border-radius: 1px; } @@ -64,9 +64,9 @@ // TransactionItem .mainContent { - display: flex; - justify-content: space-between; - align-items: center; + display: flex; + justify-content: space-between; + align-items: center; } .mainContentLeft { @@ -89,7 +89,9 @@ line-height: 16px; } -.mainContentTitle, .mainContentInfo, .amount { +.mainContentTitle, +.mainContentInfo, +.amount { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -99,5 +101,5 @@ background: var(--teal100); width: 32px; height: 32px; - @include svgColorFill(#95ADA9); + @include svgColorFill(#95ada9); } diff --git a/packages/webapp/src/components/FloatingContainer/styles.module.scss b/packages/webapp/src/components/FloatingContainer/styles.module.scss index 88ddc6be9b..51ee2a9c30 100644 --- a/packages/webapp/src/components/FloatingContainer/styles.module.scss +++ b/packages/webapp/src/components/FloatingContainer/styles.module.scss @@ -13,7 +13,7 @@ * GNU General Public License for more details, see . */ -@import '../../assets/mixin.scss'; +@use '../../assets/mixin' as *; .container { position: fixed; diff --git a/packages/webapp/src/components/Footer/footer.module.scss b/packages/webapp/src/components/Footer/footer.module.scss index 5a664e7626..9c234e41e2 100644 --- a/packages/webapp/src/components/Footer/footer.module.scss +++ b/packages/webapp/src/components/Footer/footer.module.scss @@ -1,4 +1,3 @@ -@import '../../assets/colors'; .footer { padding: 0 16px 24px 16px; width: 100%; diff --git a/packages/webapp/src/components/Form/Button/button.module.scss b/packages/webapp/src/components/Form/Button/button.module.scss index c3606a82e9..b74a6ddaa1 100644 --- a/packages/webapp/src/components/Form/Button/button.module.scss +++ b/packages/webapp/src/components/Form/Button/button.module.scss @@ -13,7 +13,7 @@ * GNU General Public License for more details, see . */ -@import '../../../assets/mixin'; +@use '../../../assets/mixin' as *; .btn.primary { --background: var(--Btn-primary-pristine); diff --git a/packages/webapp/src/components/Form/Checkbox/checkbox.module.scss b/packages/webapp/src/components/Form/Checkbox/checkbox.module.scss index 67e7540a93..92adfe1e5f 100644 --- a/packages/webapp/src/components/Form/Checkbox/checkbox.module.scss +++ b/packages/webapp/src/components/Form/Checkbox/checkbox.module.scss @@ -13,7 +13,7 @@ * GNU General Public License for more details, see . */ -@import '../../../assets/mixin'; +@use '../../../assets/mixin' as *; .container { display: flex; diff --git a/packages/webapp/src/components/Form/CompositionInputs/styles.module.scss b/packages/webapp/src/components/Form/CompositionInputs/styles.module.scss index f744c036b5..1cd106668e 100644 --- a/packages/webapp/src/components/Form/CompositionInputs/styles.module.scss +++ b/packages/webapp/src/components/Form/CompositionInputs/styles.module.scss @@ -13,7 +13,7 @@ * GNU General Public License for more details, see . */ -@import '../../../assets/mixin'; +@use '../../../assets/mixin' as *; /*---------------------------------------- NumberInputWithSelect diff --git a/packages/webapp/src/components/Form/ContextForm/styles.module.scss b/packages/webapp/src/components/Form/ContextForm/styles.module.scss index 17f2e4c157..7872ad5520 100644 --- a/packages/webapp/src/components/Form/ContextForm/styles.module.scss +++ b/packages/webapp/src/components/Form/ContextForm/styles.module.scss @@ -13,7 +13,7 @@ * GNU General Public License for more details, see . */ -@import '../../../assets/mixin.scss'; +@use '../../../assets/mixin' as *; .contentWrapper { padding-bottom: 88px; // button height 72px + button top 16px diff --git a/packages/webapp/src/components/Form/DaysOfWeekSelect/styles.module.scss b/packages/webapp/src/components/Form/DaysOfWeekSelect/styles.module.scss index aa81853296..49b617ebc0 100644 --- a/packages/webapp/src/components/Form/DaysOfWeekSelect/styles.module.scss +++ b/packages/webapp/src/components/Form/DaysOfWeekSelect/styles.module.scss @@ -13,7 +13,7 @@ * GNU General Public License for more details, see . */ -@import '@assets/mixin.scss'; +@use '@assets/mixin' as *; .container { display: flex; diff --git a/packages/webapp/src/components/Form/FormNavigationButtons/styles.module.scss b/packages/webapp/src/components/Form/FormNavigationButtons/styles.module.scss index 068b38799d..2432a24638 100644 --- a/packages/webapp/src/components/Form/FormNavigationButtons/styles.module.scss +++ b/packages/webapp/src/components/Form/FormNavigationButtons/styles.module.scss @@ -13,7 +13,7 @@ * GNU General Public License for more details, see . */ -@import '../../../assets/mixin.scss'; +@use '../../../assets/mixin' as *; .container { display: flex; diff --git a/packages/webapp/src/components/Form/InFormButtons/styles.module.scss b/packages/webapp/src/components/Form/InFormButtons/styles.module.scss index ad9ac4fe0a..5ead088719 100644 --- a/packages/webapp/src/components/Form/InFormButtons/styles.module.scss +++ b/packages/webapp/src/components/Form/InFormButtons/styles.module.scss @@ -13,7 +13,7 @@ * GNU General Public License for more details, see . */ -@import '../../../assets/mixin'; +@use '../../../assets/mixin' as *; .container { display: flex; diff --git a/packages/webapp/src/components/Form/Input/input.module.scss b/packages/webapp/src/components/Form/Input/input.module.scss index 55b06c7113..2b478f09e2 100644 --- a/packages/webapp/src/components/Form/Input/input.module.scss +++ b/packages/webapp/src/components/Form/Input/input.module.scss @@ -1,4 +1,4 @@ -@import '@assets/mixin.scss'; +@use '@assets/mixin' as *; .container { display: flex; diff --git a/packages/webapp/src/components/Form/InputAutoSize/styles.module.scss b/packages/webapp/src/components/Form/InputAutoSize/styles.module.scss index 286bf6d59c..986ddc9db9 100644 --- a/packages/webapp/src/components/Form/InputAutoSize/styles.module.scss +++ b/packages/webapp/src/components/Form/InputAutoSize/styles.module.scss @@ -1,4 +1,4 @@ -@import '@assets/mixin.scss'; +@use '@assets/mixin' as *; .textArea { border: 1px solid var(--grey400); diff --git a/packages/webapp/src/components/Form/InputBase/InputBaseField/styles.module.scss b/packages/webapp/src/components/Form/InputBase/InputBaseField/styles.module.scss index 7a82be0346..89ac28ba56 100644 --- a/packages/webapp/src/components/Form/InputBase/InputBaseField/styles.module.scss +++ b/packages/webapp/src/components/Form/InputBase/InputBaseField/styles.module.scss @@ -13,7 +13,7 @@ * GNU General Public License for more details, see . */ -@import '@assets/mixin.scss'; +@use '@assets/mixin' as *; .inputWrapper .input { all: unset; diff --git a/packages/webapp/src/components/Form/ProductDetails/styles.module.scss b/packages/webapp/src/components/Form/ProductDetails/styles.module.scss index f9f6b5269f..9a2d8fb5d2 100644 --- a/packages/webapp/src/components/Form/ProductDetails/styles.module.scss +++ b/packages/webapp/src/components/Form/ProductDetails/styles.module.scss @@ -13,7 +13,7 @@ * GNU General Public License for more details, see . */ -@import '@assets/mixin.scss'; +@use '@assets/mixin' as *; .productDetails { @include flex-column-gap(24px); diff --git a/packages/webapp/src/components/Form/Radio/radio.module.scss b/packages/webapp/src/components/Form/Radio/radio.module.scss index 2f65827c9c..4beefbcd04 100644 --- a/packages/webapp/src/components/Form/Radio/radio.module.scss +++ b/packages/webapp/src/components/Form/Radio/radio.module.scss @@ -1,4 +1,4 @@ -@import '../../../assets/mixin'; +@use '../../../assets/mixin' as *; .container { display: flex; diff --git a/packages/webapp/src/components/Form/Slider/slider.module.scss b/packages/webapp/src/components/Form/Slider/slider.module.scss index af18be7ddd..1c68a21090 100644 --- a/packages/webapp/src/components/Form/Slider/slider.module.scss +++ b/packages/webapp/src/components/Form/Slider/slider.module.scss @@ -2,30 +2,30 @@ /* height: 30px;*/ /*}*/ -@import '@assets/mixin.scss'; +@use '@assets/mixin' as *; .time { - color: var(--teal700); - font-size: 16px; + color: var(--teal700); + font-size: 16px; } .noTime { - font-size: 16px; - color: var(--red700); + font-size: 16px; + color: var(--red700); } .unit { - color: var(--teal700); - font-size: 12px; - @include fontFamily(); + color: var(--teal700); + font-size: 12px; + @include fontFamily(); } .rectangle { - border: 1px solid var(--grey400); - box-sizing: border-box; - border-radius: 4px; - padding: 0.8rem 0.8rem 0 0.8rem; + border: 1px solid var(--grey400); + box-sizing: border-box; + border-radius: 4px; + padding: 0.8rem 0.8rem 0 0.8rem; } .durationText { - padding-bottom: 0.5rem; + padding-bottom: 0.5rem; } diff --git a/packages/webapp/src/components/Form/TextArea/textarea.module.scss b/packages/webapp/src/components/Form/TextArea/textarea.module.scss index 8129ff8e73..10c02fad23 100644 --- a/packages/webapp/src/components/Form/TextArea/textarea.module.scss +++ b/packages/webapp/src/components/Form/TextArea/textarea.module.scss @@ -1,4 +1,4 @@ -@import '@assets/mixin.scss'; +@use '@assets/mixin' as *; .textArea { border: 1px solid var(--grey400); diff --git a/packages/webapp/src/components/Form/Unit/unit.module.scss b/packages/webapp/src/components/Form/Unit/unit.module.scss index 8f86fa3185..48ef68362c 100644 --- a/packages/webapp/src/components/Form/Unit/unit.module.scss +++ b/packages/webapp/src/components/Form/Unit/unit.module.scss @@ -1,4 +1,4 @@ -@import '@assets/mixin.scss'; +@use '@assets/mixin' as *; .inputWrapper { flex-grow: 1; diff --git a/packages/webapp/src/components/Forms/GeneralRevenue/styles.module.scss b/packages/webapp/src/components/Forms/GeneralRevenue/styles.module.scss index 9b4113d09d..91539a11d3 100644 --- a/packages/webapp/src/components/Forms/GeneralRevenue/styles.module.scss +++ b/packages/webapp/src/components/Forms/GeneralRevenue/styles.module.scss @@ -13,7 +13,7 @@ * GNU General Public License for more details, see . */ -@import '@assets/mixin.scss'; +@use '@assets/mixin' as *; .defaultFormDropDown { width: 100%; @@ -30,7 +30,7 @@ line-height: 1.1; } } - + .banner { display: flex; hr { @@ -117,7 +117,7 @@ .saleItemInputGroup { min-width: 200px; flex-grow: 1; - margin-left: 24px + margin-left: 24px; } .saleItemInputGroup > * { diff --git a/packages/webapp/src/components/FullYearCalendar/styles.module.scss b/packages/webapp/src/components/FullYearCalendar/styles.module.scss index a44643eaf7..28e689b71f 100644 --- a/packages/webapp/src/components/FullYearCalendar/styles.module.scss +++ b/packages/webapp/src/components/FullYearCalendar/styles.module.scss @@ -1,8 +1,8 @@ -@import '@assets/mixin.scss'; +@use '@assets/mixin' as *; .stagesBox { - background: #FAFAFD; - border: 1px solid #D4DAE3; + background: #fafafd; + border: 1px solid #d4dae3; box-sizing: border-box; border-radius: 4px; width: 100%; @@ -15,7 +15,7 @@ justify-content: center; } -.flexStage{ +.flexStage { flex: 1; margin: auto; } @@ -54,7 +54,7 @@ } .calendarBox { - border: 1px solid #D4DAE3; + border: 1px solid #d4dae3; border-radius: 4px; max-height: 436px; background-color: var(--bgInputListTile); diff --git a/packages/webapp/src/components/Home/home.module.scss b/packages/webapp/src/components/Home/home.module.scss index ef3c57a265..6c01d3f827 100644 --- a/packages/webapp/src/components/Home/home.module.scss +++ b/packages/webapp/src/components/Home/home.module.scss @@ -1,4 +1,4 @@ -@import '../../assets/mixin'; +@use '../../assets/mixin' as *; .container { width: 100%; text-align: center; diff --git a/packages/webapp/src/components/Icons/DocumentIcon/styles.module.scss b/packages/webapp/src/components/Icons/DocumentIcon/styles.module.scss index 5e8f95044b..fde65f43e4 100644 --- a/packages/webapp/src/components/Icons/DocumentIcon/styles.module.scss +++ b/packages/webapp/src/components/Icons/DocumentIcon/styles.module.scss @@ -1,4 +1,4 @@ -@import '@assets/mixin.scss'; +@use '@assets/mixin' as *; .container { height: 65px; @@ -17,4 +17,3 @@ justify-content: center; align-items: center; } - diff --git a/packages/webapp/src/components/Icons/cross/cross.module.scss b/packages/webapp/src/components/Icons/cross/cross.module.scss index 3592a100b9..9adbeea81b 100644 --- a/packages/webapp/src/components/Icons/cross/cross.module.scss +++ b/packages/webapp/src/components/Icons/cross/cross.module.scss @@ -1,4 +1,4 @@ -@import '../../../assets/mixin'; +@use '../../../assets/mixin' as *; .cross { font-size: 40px; diff --git a/packages/webapp/src/components/Icons/styles.module.scss b/packages/webapp/src/components/Icons/styles.module.scss index 5120ca85c3..55242f0b25 100644 --- a/packages/webapp/src/components/Icons/styles.module.scss +++ b/packages/webapp/src/components/Icons/styles.module.scss @@ -12,7 +12,7 @@ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details, see <.> */ -@import '../../assets/mixin.scss'; +@use '../../assets/mixin' as *; .displayBlock { display: block; diff --git a/packages/webapp/src/components/ImagePicker/styles.module.scss b/packages/webapp/src/components/ImagePicker/styles.module.scss index fe3dcfad37..44e8fa9055 100644 --- a/packages/webapp/src/components/ImagePicker/styles.module.scss +++ b/packages/webapp/src/components/ImagePicker/styles.module.scss @@ -13,7 +13,7 @@ * GNU General Public License for more details, see . */ -@import '../../assets/mixin.scss'; +@use '../../assets/mixin' as *; .imageContainer { display: flex; diff --git a/packages/webapp/src/components/Inputs/styles.module.scss b/packages/webapp/src/components/Inputs/styles.module.scss index 31118f164e..7377c526ac 100644 --- a/packages/webapp/src/components/Inputs/styles.module.scss +++ b/packages/webapp/src/components/Inputs/styles.module.scss @@ -13,7 +13,7 @@ * GNU General Public License for more details, see . */ -@import '@assets/mixin.scss'; +@use '@assets/mixin' as *; .textContainer { display: block; diff --git a/packages/webapp/src/components/Insights/PriceCropCharts/PriceCropContainer/styles.module.scss b/packages/webapp/src/components/Insights/PriceCropCharts/PriceCropContainer/styles.module.scss index 3faa1f7821..53062e4a0c 100644 --- a/packages/webapp/src/components/Insights/PriceCropCharts/PriceCropContainer/styles.module.scss +++ b/packages/webapp/src/components/Insights/PriceCropCharts/PriceCropContainer/styles.module.scss @@ -1,11 +1,11 @@ -@import '@assets/mixin.scss'; +@use '@assets/mixin' as *; .svg { max-width: 100%; @include fontFamily(); -webkit-tap-highlight-color: transparent; overflow: visible; - color: var(--grey900) + color: var(--grey900); } .xAxis { diff --git a/packages/webapp/src/components/InviteSignup/styles.module.scss b/packages/webapp/src/components/InviteSignup/styles.module.scss index bb4adf99fd..8ca75c079a 100644 --- a/packages/webapp/src/components/InviteSignup/styles.module.scss +++ b/packages/webapp/src/components/InviteSignup/styles.module.scss @@ -1,4 +1,4 @@ -@import '../../assets/mixin'; +@use '../../assets/mixin' as *; .title { font-style: normal; diff --git a/packages/webapp/src/components/IrrigationPrescription/styles.module.scss b/packages/webapp/src/components/IrrigationPrescription/styles.module.scss index 116da93127..36513824f3 100644 --- a/packages/webapp/src/components/IrrigationPrescription/styles.module.scss +++ b/packages/webapp/src/components/IrrigationPrescription/styles.module.scss @@ -13,7 +13,7 @@ * GNU General Public License for more details, see . */ -@import '@assets/mixin.scss'; +@use '@assets/mixin' as *; .ipViewContainer { max-width: 100vw; diff --git a/packages/webapp/src/components/IrrigationPrescriptionKPI/styles.module.scss b/packages/webapp/src/components/IrrigationPrescriptionKPI/styles.module.scss index 3c23e45b5d..b80b196b1a 100644 --- a/packages/webapp/src/components/IrrigationPrescriptionKPI/styles.module.scss +++ b/packages/webapp/src/components/IrrigationPrescriptionKPI/styles.module.scss @@ -13,7 +13,7 @@ * GNU General Public License for more details, see . */ -@import '@assets/mixin.scss'; +@use '@assets/mixin' as *; .kpi { display: flex; diff --git a/packages/webapp/src/components/Layout/layout.module.scss b/packages/webapp/src/components/Layout/layout.module.scss index e765762169..884178f4bb 100644 --- a/packages/webapp/src/components/Layout/layout.module.scss +++ b/packages/webapp/src/components/Layout/layout.module.scss @@ -12,7 +12,7 @@ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details, see . */ -@import '@assets/mixin.scss'; +@use '@assets/mixin' as *; .container { width: 100%; diff --git a/packages/webapp/src/components/List/ListItems/IconDescription/styles.module.scss b/packages/webapp/src/components/List/ListItems/IconDescription/styles.module.scss index f6291c4f98..41e791890d 100644 --- a/packages/webapp/src/components/List/ListItems/IconDescription/styles.module.scss +++ b/packages/webapp/src/components/List/ListItems/IconDescription/styles.module.scss @@ -12,7 +12,7 @@ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details, see . */ -@import '../../../../assets/mixin.scss'; +@use '../../../../assets/mixin' as *; .listItem { display: flex; diff --git a/packages/webapp/src/components/LocationFieldTechnology/styles.module.scss b/packages/webapp/src/components/LocationFieldTechnology/styles.module.scss index 99d7df25ce..64cf885f34 100644 --- a/packages/webapp/src/components/LocationFieldTechnology/styles.module.scss +++ b/packages/webapp/src/components/LocationFieldTechnology/styles.module.scss @@ -13,7 +13,7 @@ * GNU General Public License for more details, see . */ -@import '@assets/mixin.scss'; +@use '@assets/mixin' as *; .fieldTechnologyContainer { background-color: white; diff --git a/packages/webapp/src/components/LocationIrrigation/styles.module.scss b/packages/webapp/src/components/LocationIrrigation/styles.module.scss index 6265ee5b5b..3e1e0ff7c9 100644 --- a/packages/webapp/src/components/LocationIrrigation/styles.module.scss +++ b/packages/webapp/src/components/LocationIrrigation/styles.module.scss @@ -13,7 +13,7 @@ * GNU General Public License for more details, see . */ -@import '@assets/mixin.scss'; +@use '@assets/mixin' as *; .subtitle { margin-bottom: 16px; diff --git a/packages/webapp/src/components/Logs/HarvestUseType/styles.module.scss b/packages/webapp/src/components/Logs/HarvestUseType/styles.module.scss index 4f63692a17..5a7d2f46d4 100644 --- a/packages/webapp/src/components/Logs/HarvestUseType/styles.module.scss +++ b/packages/webapp/src/components/Logs/HarvestUseType/styles.module.scss @@ -13,7 +13,7 @@ * GNU General Public License for more details, see . */ -@import '@assets/mixin.scss'; +@use '@assets/mixin' as *; .logContainer { width: 100%; @@ -32,7 +32,6 @@ --emptySpace: calc(26.8vw - 48px); --gap: calc(var(--emptySpace) / 2); column-gap: var(--gap); - } .matrixItem { @@ -49,7 +48,6 @@ overflow: hidden; cursor: pointer; - svg { width: 13.3vw; height: 13.3vw; @@ -75,7 +73,6 @@ @media only screen and (min-width: 480px) { .matrixContainer { - row-gap: 5.2vw; --emptySpace: calc(23.76vw - 48px); @@ -118,8 +115,6 @@ font-size: 14px; line-height: 20px; } - - } @media only screen and (min-width: 734px) { @@ -130,7 +125,6 @@ } } - @media only screen and (min-width: 876px) { .matrixContainer { --emptySpace: calc(100% - 708px); @@ -139,14 +133,12 @@ } } - @media only screen and (min-width: 1024px) { .matrixContainer { - gap: 25px + gap: 25px; } } - .buttonContainer { width: 100%; display: flex; diff --git a/packages/webapp/src/components/ManageESciSection/styles.module.scss b/packages/webapp/src/components/ManageESciSection/styles.module.scss index ba57ae7acb..b242669cc8 100644 --- a/packages/webapp/src/components/ManageESciSection/styles.module.scss +++ b/packages/webapp/src/components/ManageESciSection/styles.module.scss @@ -13,7 +13,7 @@ * GNU General Public License for more details, see . */ -@import '@assets/mixin.scss'; +@use '@assets/mixin' as *; .manageEsci { display: flex; diff --git a/packages/webapp/src/components/Map/Footer/styles.module.scss b/packages/webapp/src/components/Map/Footer/styles.module.scss index b01b3b4bd6..5aeda26ffc 100644 --- a/packages/webapp/src/components/Map/Footer/styles.module.scss +++ b/packages/webapp/src/components/Map/Footer/styles.module.scss @@ -1,4 +1,4 @@ -@import '@assets/mixin.scss'; +@use '@assets/mixin' as *; .container { display: flex; @@ -29,13 +29,15 @@ color: var(--White); } - .button:hover, .button:active, .selected { + .button:hover, + .button:active, + .selected { @include svgColorFill(var(--White)); .circle { background-color: var(--White); } } - + button:first-of-type { border-radius: 8px 0 0 8px; @@ -43,7 +45,7 @@ border-radius: 0; } } - + button:last-of-type { border-radius: 0 8px 8px 0; diff --git a/packages/webapp/src/components/Map/Header/styles.module.scss b/packages/webapp/src/components/Map/Header/styles.module.scss index 8246612733..2d24c10a17 100644 --- a/packages/webapp/src/components/Map/Header/styles.module.scss +++ b/packages/webapp/src/components/Map/Header/styles.module.scss @@ -1,4 +1,4 @@ -@import '@assets/mixin.scss'; +@use '@assets/mixin' as *; .container { display: flex; @@ -37,4 +37,4 @@ .pointer { cursor: pointer; -} \ No newline at end of file +} diff --git a/packages/webapp/src/components/MarketDirectory/InfoForm/styles.module.scss b/packages/webapp/src/components/MarketDirectory/InfoForm/styles.module.scss index a74b5f81cb..4a944df116 100644 --- a/packages/webapp/src/components/MarketDirectory/InfoForm/styles.module.scss +++ b/packages/webapp/src/components/MarketDirectory/InfoForm/styles.module.scss @@ -13,7 +13,7 @@ * GNU General Public License for more details, see . */ -@import '@assets/mixin.scss'; +@use '@assets/mixin' as *; .formContainer { padding: 24px 8px; diff --git a/packages/webapp/src/components/MarketDirectoryTile/styles.module.scss b/packages/webapp/src/components/MarketDirectoryTile/styles.module.scss index dc4a9eaf14..2809292095 100644 --- a/packages/webapp/src/components/MarketDirectoryTile/styles.module.scss +++ b/packages/webapp/src/components/MarketDirectoryTile/styles.module.scss @@ -13,7 +13,7 @@ * GNU General Public License for more details, see . */ -@import '../../assets/mixin'; +@use '../../assets/mixin' as *; .container { display: flex; diff --git a/packages/webapp/src/components/Modals/RequestConfirmationModal/styles.scss b/packages/webapp/src/components/Modals/RequestConfirmationModal/styles.scss index 3c4f59cdc5..c632844999 100644 --- a/packages/webapp/src/components/Modals/RequestConfirmationModal/styles.scss +++ b/packages/webapp/src/components/Modals/RequestConfirmationModal/styles.scss @@ -13,7 +13,7 @@ * GNU General Public License for more details, see . */ -@import '@assets/mixin.scss'; +@use '@assets/mixin' as *; .container { display: flex; diff --git a/packages/webapp/src/components/Modals/ResetPassword/styles.scss b/packages/webapp/src/components/Modals/ResetPassword/styles.scss index 3c4f59cdc5..c632844999 100644 --- a/packages/webapp/src/components/Modals/ResetPassword/styles.scss +++ b/packages/webapp/src/components/Modals/ResetPassword/styles.scss @@ -13,7 +13,7 @@ * GNU General Public License for more details, see . */ -@import '@assets/mixin.scss'; +@use '@assets/mixin' as *; .container { display: flex; diff --git a/packages/webapp/src/components/Modals/ResetPasswordSuccess/styles.scss b/packages/webapp/src/components/Modals/ResetPasswordSuccess/styles.scss index 3c4f59cdc5..c632844999 100644 --- a/packages/webapp/src/components/Modals/ResetPasswordSuccess/styles.scss +++ b/packages/webapp/src/components/Modals/ResetPasswordSuccess/styles.scss @@ -13,7 +13,7 @@ * GNU General Public License for more details, see . */ -@import '@assets/mixin.scss'; +@use '@assets/mixin' as *; .container { display: flex; diff --git a/packages/webapp/src/components/Modals/YearSelectorModal/styles.module.scss b/packages/webapp/src/components/Modals/YearSelectorModal/styles.module.scss index adb02ce80b..58c0b6df05 100644 --- a/packages/webapp/src/components/Modals/YearSelectorModal/styles.module.scss +++ b/packages/webapp/src/components/Modals/YearSelectorModal/styles.module.scss @@ -1,7 +1,7 @@ -@import '@assets/mixin.scss'; +@use '@assets/mixin' as *; .dialogTitle { - background: #F3F6FB; + background: #f3f6fb; border-radius: 4px 4px 0px 0px; } @@ -10,7 +10,7 @@ } .initYear { - color: #037A0F; + color: #037a0f; font-weight: 600; @include fontFamily(); } diff --git a/packages/webapp/src/components/Navigation/SideMenu/styles.module.scss b/packages/webapp/src/components/Navigation/SideMenu/styles.module.scss index ff291d8697..4ccde49db7 100644 --- a/packages/webapp/src/components/Navigation/SideMenu/styles.module.scss +++ b/packages/webapp/src/components/Navigation/SideMenu/styles.module.scss @@ -13,7 +13,7 @@ * GNU General Public License for more details, see . */ -@import '@assets/mixin.scss'; +@use '@assets/mixin' as *; .primary { --pristine-background: var(--White); @@ -260,7 +260,7 @@ display: flex; flex-direction: column; justify-content: space-between; - border-right: 1px solid #D1E9D9; + border-right: 1px solid #d1e9d9; padding: 0; height: 100%; flex: 0 0 var(--global-side-menu-width); @@ -306,10 +306,11 @@ overflow: visible; } - &.compactSideMenuContent, &.expandedSideMenuContent { + &.compactSideMenuContent, + &.expandedSideMenuContent { .animatedContent { transition: opacity 0.5s; - + &.hiddenContent { opacity: 0; flex: 0; @@ -318,15 +319,15 @@ margin: 0; } } - + .animatedLogo { overflow: hidden; height: 64px; transition: height 0.5s; - + &.compactLogo { height: 36px; - + svg { transform: translateX(-24px); } @@ -340,10 +341,10 @@ .listItem { padding: 16px; - border-top: 1px solid #E9EBF8; + border-top: 1px solid #e9ebf8; display: flex; justify-content: flex-start; - + &.logoListItem { justify-content: center; } @@ -351,14 +352,14 @@ .listItemText { margin: 0; margin-left: 8px; - + span { font-weight: 600; overflow: hidden; text-overflow: ellipsis; } } - + .icon { min-width: 0px; } @@ -367,11 +368,11 @@ width: 24px; height: 24px; transition: transform 0.5s; - + &.collapseIcon { transform: rotate(-180deg); } - + &.compactExpandIcon { transform: rotate(-90deg); } @@ -380,7 +381,7 @@ @include sm-breakpoint { background-color: var(--pristine-background); .listItemText { - color: var(--pristine-text) + color: var(--pristine-text); } .icon { @include svgColorFill(var(--pristine-text)); @@ -418,9 +419,8 @@ } } } - } - + @include xs-breakpoint { background-color: var(--mobile-pristine-background); .listItemText { @@ -431,27 +431,27 @@ min-width: 0px; @include svgColorFill(var(--mobile-pristine-text)); } - + .expandCollapseIcon { path { fill: var(--mobile-pristine-text); } } - + &:hover { // Ignore mobile hover styles background-color: var(--mobile-pristine-background); - + .listItemText { - // Ignore mobile hover styles + // Ignore mobile hover styles color: var(--mobile-pristine-text); } - + .icon { // Ignore mobile hover styles @include svgColorFill(--mobile-pristine-text); } - + .expandCollapseIcon { // Ignore mobile hover styles path { @@ -460,21 +460,21 @@ } } border: none; - + &.logoListItem { display: none; } - + &.adminActionListItem { border-top: 1px solid var(--teal700); } - + &.active { background-color: var(--mobile-active-background); &.subItem { background-color: var(--secondaryGreen50); } - + .listItemText { color: var(--mobile-active-text); } @@ -490,7 +490,7 @@ } } } - + &:hover span { overflow: visible; } @@ -499,7 +499,7 @@ .subList { padding: 8px 0; background-color: var(--pristine-background); - + .subItem { border: none; padding: 8px 16px; @@ -524,22 +524,20 @@ } } } - + &:hover { background-color: var(--hover-background); - + .subItemText { color: var(--hover-text); } } - - } @include xs-breakpoint { .subItemText { color: var(--pristine-text); - + span { font-weight: 600; } @@ -548,7 +546,7 @@ &.active:not(:hover) { background-color: var(--active-background); border-left: 2px solid var(--Colors-Primary-Primary-teal-400); - + .subItemText { span { text-shadow: var(--secondaryGreen200) 0px 1px; @@ -556,13 +554,13 @@ } } } - + &:hover { // Ignore mobile hover styles background-color: var(--pristine-background); - + .subItemText { - // Ignore mobile hover styles + // Ignore mobile hover styles color: var(--pristine-text); } } @@ -572,7 +570,7 @@ } .menuToggle { - border: 1px solid #D1E9D9; + border: 1px solid #d1e9d9; padding: 4px; position: fixed; top: calc(var(--global-navbar-height) / 2 - 12px); @@ -589,7 +587,7 @@ &:hover { background-color: var(--green500); - + svg { path { stroke: var(--green800); diff --git a/packages/webapp/src/components/Navigation/styles.module.scss b/packages/webapp/src/components/Navigation/styles.module.scss index 3444d8f3d5..7662071000 100644 --- a/packages/webapp/src/components/Navigation/styles.module.scss +++ b/packages/webapp/src/components/Navigation/styles.module.scss @@ -13,7 +13,7 @@ * GNU General Public License for more details, see . */ -@import '@assets/mixin.scss'; +@use '@assets/mixin' as *; .mainColumn { display: flex; diff --git a/packages/webapp/src/components/Outro/styles.module.scss b/packages/webapp/src/components/Outro/styles.module.scss index 5123b0959b..914c10dd4c 100644 --- a/packages/webapp/src/components/Outro/styles.module.scss +++ b/packages/webapp/src/components/Outro/styles.module.scss @@ -1,4 +1,4 @@ -@import '@assets/mixin.scss'; +@use '@assets/mixin' as *; .home .lander { text-align: center; diff --git a/packages/webapp/src/components/OverviewStats/styles.module.scss b/packages/webapp/src/components/OverviewStats/styles.module.scss index 4024b15dcd..27ebe18c55 100644 --- a/packages/webapp/src/components/OverviewStats/styles.module.scss +++ b/packages/webapp/src/components/OverviewStats/styles.module.scss @@ -13,7 +13,7 @@ * GNU General Public License for more details, see . */ -@import '../../assets/mixin.scss'; +@use '../../assets/mixin' as *; .wrapper { display: flex; diff --git a/packages/webapp/src/components/PageTitle/styles.module.scss b/packages/webapp/src/components/PageTitle/styles.module.scss index 7043691e02..b856758605 100644 --- a/packages/webapp/src/components/PageTitle/styles.module.scss +++ b/packages/webapp/src/components/PageTitle/styles.module.scss @@ -13,7 +13,7 @@ * GNU General Public License for more details, see . */ -@import '@assets/mixin.scss'; +@use '@assets/mixin' as *; .titleContainer { width: 100%; diff --git a/packages/webapp/src/components/PageTitleFragment/styles.module.scss b/packages/webapp/src/components/PageTitleFragment/styles.module.scss index 35532e6071..10a747cf60 100644 --- a/packages/webapp/src/components/PageTitleFragment/styles.module.scss +++ b/packages/webapp/src/components/PageTitleFragment/styles.module.scss @@ -13,7 +13,7 @@ * GNU General Public License for more details, see . */ -@import '@assets/mixin.scss'; +@use '@assets/mixin' as *; .titleContainer { width: 100%; diff --git a/packages/webapp/src/components/PopupFilter/PureTaskDropdownFilter/styles.module.scss b/packages/webapp/src/components/PopupFilter/PureTaskDropdownFilter/styles.module.scss index 0f0b33c160..e7e62871e3 100644 --- a/packages/webapp/src/components/PopupFilter/PureTaskDropdownFilter/styles.module.scss +++ b/packages/webapp/src/components/PopupFilter/PureTaskDropdownFilter/styles.module.scss @@ -1,4 +1,4 @@ -@import '../../../assets/mixin'; +@use '../../../assets/mixin' as *; .container { display: flex; @@ -8,8 +8,6 @@ padding-bottom: 16px; } - - .circle { position: absolute; right: 0; @@ -19,18 +17,18 @@ background-color: var(--teal700); transform: translate(-7px, -11px); } -.filter{ +.filter { font-size: 18px; color: var(--grey600); cursor: pointer; } -.pillContainer{ +.pillContainer { padding-bottom: 16px; flex-wrap: wrap; display: flex; gap: 16px; } -.dropdownContainer{ +.dropdownContainer { flex-direction: row; flex-grow: 1; display: flex; @@ -38,7 +36,7 @@ z-index: 1; background-color: var(--bgInputListTile); } -.dropdown{ +.dropdown { z-index: 2; flex-direction: row; flex-grow: 1; @@ -53,10 +51,9 @@ cursor: pointer; user-select: none; padding: 0 8px; - } -.dropdownMenu{ +.dropdownMenu { padding: 12px; border: 1px solid var(--grey400); border-radius: 0 0 4px 4px; @@ -68,31 +65,30 @@ top: 31px; background-color: white; } -.dropdownMenuContainer{ +.dropdownMenuContainer { padding-top: 31px; position: absolute; width: 100%; @include midShadow(); } -.chevron{ +.chevron { color: var(--grey600); position: absolute; right: 12px; font-size: 16px; } -.chevronActive{ +.chevronActive { transform: scaleY(-1); } -.active{ +.active { border-color: var(--inputActive); } -.dropDownActive{ +.dropDownActive { border-radius: 4px 4px 0 0; } -.dateRadioContainer{ +.dateRadioContainer { display: flex; flex-direction: row; justify-content: space-between; align-items: center; } - diff --git a/packages/webapp/src/components/ProductInventory/styles.module.scss b/packages/webapp/src/components/ProductInventory/styles.module.scss index da5e50a5e3..2ec1f3a51e 100644 --- a/packages/webapp/src/components/ProductInventory/styles.module.scss +++ b/packages/webapp/src/components/ProductInventory/styles.module.scss @@ -13,7 +13,7 @@ * GNU General Public License for more details, see . */ -@import '@assets/mixin.scss'; +@use '@assets/mixin' as *; .tableWrapper { flex: 1; @@ -64,4 +64,4 @@ @include sm-breakpoint { display: none; } -} \ No newline at end of file +} diff --git a/packages/webapp/src/components/Profile/FarmSettings/Addons/styles.module.scss b/packages/webapp/src/components/Profile/FarmSettings/Addons/styles.module.scss index 2c95836ad7..d49242f6bd 100644 --- a/packages/webapp/src/components/Profile/FarmSettings/Addons/styles.module.scss +++ b/packages/webapp/src/components/Profile/FarmSettings/Addons/styles.module.scss @@ -13,7 +13,7 @@ * GNU General Public License for more details, see . */ -@import '@assets/mixin.scss'; +@use '@assets/mixin' as *; .container { margin-top: 16px; diff --git a/packages/webapp/src/components/PureSnackbar/styles.module.scss b/packages/webapp/src/components/PureSnackbar/styles.module.scss index 82f7bbe86a..d735e33b7a 100644 --- a/packages/webapp/src/components/PureSnackbar/styles.module.scss +++ b/packages/webapp/src/components/PureSnackbar/styles.module.scss @@ -1,4 +1,4 @@ -@import '../../assets/mixin'; +@use '../../assets/mixin' as *; .contentContainer { display: flex; @@ -30,10 +30,9 @@ } .progressBarContainer { - height: 2px + height: 2px; } - .container { border: 1px solid var(--grey400); box-sizing: border-box; @@ -55,6 +54,3 @@ color: var(--red700); transform: translateY(4px); } - - - diff --git a/packages/webapp/src/components/ReleaseBadge/styles.module.scss b/packages/webapp/src/components/ReleaseBadge/styles.module.scss index 74755a86f3..a054590413 100644 --- a/packages/webapp/src/components/ReleaseBadge/styles.module.scss +++ b/packages/webapp/src/components/ReleaseBadge/styles.module.scss @@ -13,7 +13,7 @@ * GNU General Public License for more details, see . */ -@import '../../assets/mixin'; +@use '../../assets/mixin' as *; .card { width: 400px; diff --git a/packages/webapp/src/components/RouterTab/styles.module.scss b/packages/webapp/src/components/RouterTab/styles.module.scss index 865c487cf0..ce04a37c5c 100644 --- a/packages/webapp/src/components/RouterTab/styles.module.scss +++ b/packages/webapp/src/components/RouterTab/styles.module.scss @@ -13,7 +13,7 @@ * GNU General Public License for more details, see . */ -@import '../../assets/mixin.scss'; +@use '../../assets/mixin' as *; .container { display: flex; diff --git a/packages/webapp/src/components/Sensor/v2/EsciSensorList/styles.module.scss b/packages/webapp/src/components/Sensor/v2/EsciSensorList/styles.module.scss index dff88a5ab6..5753d0965f 100644 --- a/packages/webapp/src/components/Sensor/v2/EsciSensorList/styles.module.scss +++ b/packages/webapp/src/components/Sensor/v2/EsciSensorList/styles.module.scss @@ -13,7 +13,7 @@ * GNU General Public License for more details, see . */ -@import '../../../../assets/mixin.scss'; +@use '../../../../assets/mixin' as *; .wrapper { padding: 0 24px 24px 24px; diff --git a/packages/webapp/src/components/Sensor/v2/SensorTable/styles.module.scss b/packages/webapp/src/components/Sensor/v2/SensorTable/styles.module.scss index e9d2a06794..f3d83b6dc6 100644 --- a/packages/webapp/src/components/Sensor/v2/SensorTable/styles.module.scss +++ b/packages/webapp/src/components/Sensor/v2/SensorTable/styles.module.scss @@ -13,7 +13,7 @@ * GNU General Public License for more details, see . */ -@import '../../../../assets/mixin.scss'; +@use '../../../../assets/mixin' as *; .tableContainerClass { border-radius: 4px; diff --git a/packages/webapp/src/components/Signup/EnterPasswordPage/styles.module.scss b/packages/webapp/src/components/Signup/EnterPasswordPage/styles.module.scss index f8a2404f28..3c1f0caf3b 100644 --- a/packages/webapp/src/components/Signup/EnterPasswordPage/styles.module.scss +++ b/packages/webapp/src/components/Signup/EnterPasswordPage/styles.module.scss @@ -1,4 +1,4 @@ -@import '@assets/mixin.scss'; +@use '@assets/mixin' as *; .otherBrowserMessageTop { text-align: left; diff --git a/packages/webapp/src/components/Table/Cell/styles.module.scss b/packages/webapp/src/components/Table/Cell/styles.module.scss index 2dadeb6d41..b64093390f 100644 --- a/packages/webapp/src/components/Table/Cell/styles.module.scss +++ b/packages/webapp/src/components/Table/Cell/styles.module.scss @@ -1,4 +1,4 @@ -@import '../../../assets/mixin.scss'; +@use '../../../assets/mixin' as *; .text { color: var(--Colors-Neutral-Neutral-700); diff --git a/packages/webapp/src/components/Task/AddSoilAmendmentProducts/QuantityApplicationRate/styles.module.scss b/packages/webapp/src/components/Task/AddSoilAmendmentProducts/QuantityApplicationRate/styles.module.scss index 95fe277de8..6bf9b3b17b 100644 --- a/packages/webapp/src/components/Task/AddSoilAmendmentProducts/QuantityApplicationRate/styles.module.scss +++ b/packages/webapp/src/components/Task/AddSoilAmendmentProducts/QuantityApplicationRate/styles.module.scss @@ -13,7 +13,7 @@ * GNU General Public License for more details, see . */ -@import '@assets/mixin.scss'; +@use '@assets/mixin' as *; .container, .applicationRateCard, diff --git a/packages/webapp/src/components/Task/AddSoilAmendmentProducts/styles.module.scss b/packages/webapp/src/components/Task/AddSoilAmendmentProducts/styles.module.scss index 5f7aa8171b..b7e1ca9dd4 100644 --- a/packages/webapp/src/components/Task/AddSoilAmendmentProducts/styles.module.scss +++ b/packages/webapp/src/components/Task/AddSoilAmendmentProducts/styles.module.scss @@ -13,7 +13,7 @@ * GNU General Public License for more details, see . */ -@import '@assets/mixin.scss'; +@use '@assets/mixin' as *; /*---------------------------------------- AddSoilAmendmentProducts diff --git a/packages/webapp/src/components/Task/PureIrrigationTask/styles.module.scss b/packages/webapp/src/components/Task/PureIrrigationTask/styles.module.scss index 8cd9809a99..a80283e5a0 100644 --- a/packages/webapp/src/components/Task/PureIrrigationTask/styles.module.scss +++ b/packages/webapp/src/components/Task/PureIrrigationTask/styles.module.scss @@ -13,7 +13,7 @@ * GNU General Public License for more details, see . */ -@import '../../../assets/mixin.scss'; +@use '../../../assets/mixin' as *; .waterCalculatorWrapper { display: flex; diff --git a/packages/webapp/src/components/Task/PureTaskTypeSelection/styles.module.scss b/packages/webapp/src/components/Task/PureTaskTypeSelection/styles.module.scss index 4fded5303b..d693e6997d 100644 --- a/packages/webapp/src/components/Task/PureTaskTypeSelection/styles.module.scss +++ b/packages/webapp/src/components/Task/PureTaskTypeSelection/styles.module.scss @@ -13,7 +13,7 @@ * GNU General Public License for more details, see . */ -@import '@assets/mixin.scss'; +@use '@assets/mixin' as *; .typeContainer { display: flex; @@ -33,7 +33,7 @@ svg { width: 48px; - height: 48px; + height: 48px; margin-bottom: 4px; } @@ -41,10 +41,10 @@ line-height: 20px; color: var(--fontColor); @include fontFamily(); - } -.typeContainer:hover, .typeContainer:active { +.typeContainer:hover, +.typeContainer:active { border-color: var(--teal700); background-color: var(--green100); color: var(--teal900); diff --git a/packages/webapp/src/components/Task/RevisionPrompt/styles.module.scss b/packages/webapp/src/components/Task/RevisionPrompt/styles.module.scss index 4934df7390..b59f04f99d 100644 --- a/packages/webapp/src/components/Task/RevisionPrompt/styles.module.scss +++ b/packages/webapp/src/components/Task/RevisionPrompt/styles.module.scss @@ -13,7 +13,7 @@ * GNU General Public License for more details, see . */ -@import '@assets/mixin.scss'; +@use '@assets/mixin' as *; .revisionPrompt { display: flex; diff --git a/packages/webapp/src/components/Task/SoilAmendmentTask/styles.module.scss b/packages/webapp/src/components/Task/SoilAmendmentTask/styles.module.scss index 560f09bcd2..ca05e0e405 100644 --- a/packages/webapp/src/components/Task/SoilAmendmentTask/styles.module.scss +++ b/packages/webapp/src/components/Task/SoilAmendmentTask/styles.module.scss @@ -13,7 +13,7 @@ * GNU General Public License for more details, see . */ -@import '@assets/mixin.scss'; +@use '@assets/mixin' as *; .applicationMethod { margin-bottom: 24px; diff --git a/packages/webapp/src/components/Task/TaskComplete/styles.module.scss b/packages/webapp/src/components/Task/TaskComplete/styles.module.scss index ac048e7c70..cc11967994 100644 --- a/packages/webapp/src/components/Task/TaskComplete/styles.module.scss +++ b/packages/webapp/src/components/Task/TaskComplete/styles.module.scss @@ -1,4 +1,4 @@ -@import '@assets/mixin.scss'; +@use '@assets/mixin' as *; .rating { display: flex; diff --git a/packages/webapp/src/components/Task/TaskLocations/styles.module.scss b/packages/webapp/src/components/Task/TaskLocations/styles.module.scss index 1c13137170..1704247861 100644 --- a/packages/webapp/src/components/Task/TaskLocations/styles.module.scss +++ b/packages/webapp/src/components/Task/TaskLocations/styles.module.scss @@ -1,4 +1,4 @@ -@import '@assets/mixin.scss'; +@use '@assets/mixin' as *; .planting_label { margin-bottom: 24px; diff --git a/packages/webapp/src/components/Task/TaskReadOnly/styles.module.scss b/packages/webapp/src/components/Task/TaskReadOnly/styles.module.scss index 510048eb04..9923e4def5 100644 --- a/packages/webapp/src/components/Task/TaskReadOnly/styles.module.scss +++ b/packages/webapp/src/components/Task/TaskReadOnly/styles.module.scss @@ -1,4 +1,4 @@ -@import '@assets/mixin.scss'; +@use '@assets/mixin' as *; .mapContainer { position: relative; diff --git a/packages/webapp/src/components/Tile/DescriptionList/styles.module.scss b/packages/webapp/src/components/Tile/DescriptionList/styles.module.scss index b7fc897083..a7db288a83 100644 --- a/packages/webapp/src/components/Tile/DescriptionList/styles.module.scss +++ b/packages/webapp/src/components/Tile/DescriptionList/styles.module.scss @@ -13,7 +13,7 @@ * GNU General Public License for more details, see . */ -@import '@assets/mixin.scss'; +@use '@assets/mixin' as *; .dlTile { height: 70px; diff --git a/packages/webapp/src/components/Tile/SensorTile/styles.module.scss b/packages/webapp/src/components/Tile/SensorTile/styles.module.scss index d8ea79cd65..3dc74b8c58 100644 --- a/packages/webapp/src/components/Tile/SensorTile/styles.module.scss +++ b/packages/webapp/src/components/Tile/SensorTile/styles.module.scss @@ -13,7 +13,7 @@ * GNU General Public License for more details, see . */ -@import '@assets/mixin.scss'; +@use '@assets/mixin' as *; .sensorReadingKpi, .sensorKpi { diff --git a/packages/webapp/src/components/Tile/styles.module.scss b/packages/webapp/src/components/Tile/styles.module.scss index d7071792aa..592ee0f76b 100644 --- a/packages/webapp/src/components/Tile/styles.module.scss +++ b/packages/webapp/src/components/Tile/styles.module.scss @@ -13,7 +13,7 @@ * GNU General Public License for more details, see . */ -@import '@assets/mixin.scss'; +@use '@assets/mixin' as *; .typeContainer { display: flex; @@ -140,7 +140,7 @@ @media only screen and (min-width: 1024px) { .matrixContainer { - gap: 25px + gap: 25px; } } diff --git a/packages/webapp/src/components/TileDashboard/DashboardTile/styles.module.scss b/packages/webapp/src/components/TileDashboard/DashboardTile/styles.module.scss index ebb5dac8d7..2bef9ab2fa 100644 --- a/packages/webapp/src/components/TileDashboard/DashboardTile/styles.module.scss +++ b/packages/webapp/src/components/TileDashboard/DashboardTile/styles.module.scss @@ -13,7 +13,7 @@ * GNU General Public License for more details, see . */ -@import '../../../assets/mixin'; +@use '../../../assets/mixin' as *; .tile.tile { // increase CSS specificity beyond textButton class diff --git a/packages/webapp/src/components/TileDashboard/styles.module.scss b/packages/webapp/src/components/TileDashboard/styles.module.scss index 70792cfd3f..1a4494dbcf 100644 --- a/packages/webapp/src/components/TileDashboard/styles.module.scss +++ b/packages/webapp/src/components/TileDashboard/styles.module.scss @@ -13,7 +13,7 @@ * GNU General Public License for more details, see . */ -@import '../../assets/mixin'; +@use '../../assets/mixin' as *; .container { display: flex; diff --git a/packages/webapp/src/components/Typography/typography.module.scss b/packages/webapp/src/components/Typography/typography.module.scss index a17ce55d50..073a008644 100644 --- a/packages/webapp/src/components/Typography/typography.module.scss +++ b/packages/webapp/src/components/Typography/typography.module.scss @@ -1,4 +1,4 @@ -@import '@assets/mixin.scss'; +@use '@assets/mixin' as *; .underlined { font-size: 14px; diff --git a/packages/webapp/src/components/WeatherBoard/assets/weatherBoard.module.scss b/packages/webapp/src/components/WeatherBoard/assets/weatherBoard.module.scss index 59d9542af9..3c23aec241 100644 --- a/packages/webapp/src/components/WeatherBoard/assets/weatherBoard.module.scss +++ b/packages/webapp/src/components/WeatherBoard/assets/weatherBoard.module.scss @@ -1,4 +1,4 @@ -@import '../../../assets/mixin'; +@use '../../../assets/mixin' as *; .container { top: 0; @@ -12,7 +12,7 @@ 'date date' 'temperature icon' 'wind humidity'; - word-break: break-word; + word-break: break-word; background-color: var(--overlay); font-size: 3.88vw; line-height: 6.66vw; @@ -92,7 +92,7 @@ font-size: 144.375px; padding-top: 20px; } - + .wind { padding-top: 20px; } diff --git a/packages/webapp/src/components/WeatherBoard/assets/weatherIcon.module.scss b/packages/webapp/src/components/WeatherBoard/assets/weatherIcon.module.scss index b80462e1b6..5453dc8b4e 100644 --- a/packages/webapp/src/components/WeatherBoard/assets/weatherIcon.module.scss +++ b/packages/webapp/src/components/WeatherBoard/assets/weatherIcon.module.scss @@ -1,4 +1,4 @@ -@import '../../../assets/mixin'; +@use '../../../assets/mixin' as *; .icon { font-size: 100%; } diff --git a/packages/webapp/src/components/Widgets/ElapsedTime/styles.module.scss b/packages/webapp/src/components/Widgets/ElapsedTime/styles.module.scss index 8501ae4104..af3db78844 100644 --- a/packages/webapp/src/components/Widgets/ElapsedTime/styles.module.scss +++ b/packages/webapp/src/components/Widgets/ElapsedTime/styles.module.scss @@ -13,7 +13,7 @@ * GNU General Public License for more details, see . */ -@import '@assets/mixin.scss'; +@use '@assets/mixin' as *; .container { display: flex; @@ -36,4 +36,4 @@ font-size: 12px; font-weight: 600; line-height: 24px; /* 200% */ -} \ No newline at end of file +} diff --git a/packages/webapp/src/containers/Animals/AddAnimals/AddAnimalBasics/styles.module.scss b/packages/webapp/src/containers/Animals/AddAnimals/AddAnimalBasics/styles.module.scss index 509c338a3e..e0ff7977b7 100644 --- a/packages/webapp/src/containers/Animals/AddAnimals/AddAnimalBasics/styles.module.scss +++ b/packages/webapp/src/containers/Animals/AddAnimals/AddAnimalBasics/styles.module.scss @@ -13,7 +13,7 @@ * GNU General Public License for more details, see . */ -@import '../../../../assets/mixin.scss'; +@use '../../../../assets/mixin' as *; .cardContainer { padding: 16px; diff --git a/packages/webapp/src/containers/Animals/AddAnimals/AddAnimalDetails/styles.module.scss b/packages/webapp/src/containers/Animals/AddAnimals/AddAnimalDetails/styles.module.scss index 5e999f415e..3ae8df5434 100644 --- a/packages/webapp/src/containers/Animals/AddAnimals/AddAnimalDetails/styles.module.scss +++ b/packages/webapp/src/containers/Animals/AddAnimals/AddAnimalDetails/styles.module.scss @@ -13,7 +13,7 @@ * GNU General Public License for more details, see . */ -@import '../../../../assets/mixin.scss'; +@use '../../../../assets/mixin' as *; .container { padding: 16px; diff --git a/packages/webapp/src/containers/Animals/Inventory/styles.module.scss b/packages/webapp/src/containers/Animals/Inventory/styles.module.scss index 2640fd37c7..1165d0fcdd 100644 --- a/packages/webapp/src/containers/Animals/Inventory/styles.module.scss +++ b/packages/webapp/src/containers/Animals/Inventory/styles.module.scss @@ -12,7 +12,7 @@ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details, see . */ -@import '../../../assets/mixin.scss'; +@use '../../../assets/mixin' as *; .mainContent { margin: 0 auto; diff --git a/packages/webapp/src/containers/FeedbackSurvey/styles.module.scss b/packages/webapp/src/containers/FeedbackSurvey/styles.module.scss index 115b0cd76d..907ae23a13 100644 --- a/packages/webapp/src/containers/FeedbackSurvey/styles.module.scss +++ b/packages/webapp/src/containers/FeedbackSurvey/styles.module.scss @@ -13,7 +13,7 @@ * GNU General Public License for more details, see . */ -@import '../../assets/mixin.scss'; +@use '../../assets/mixin' as *; .surveyButton { display: flex; diff --git a/packages/webapp/src/containers/Finances/Report/styles.module.scss b/packages/webapp/src/containers/Finances/Report/styles.module.scss index 6131d1590a..755243bc1f 100644 --- a/packages/webapp/src/containers/Finances/Report/styles.module.scss +++ b/packages/webapp/src/containers/Finances/Report/styles.module.scss @@ -13,7 +13,7 @@ * GNU General Public License for more details, see . */ -@import '@assets/mixin.scss'; +@use '@assets/mixin' as *; .reportButton { font-size: 14px; diff --git a/packages/webapp/src/containers/Insights/styles.module.scss b/packages/webapp/src/containers/Insights/styles.module.scss index e5ce52f946..d78a7e702e 100644 --- a/packages/webapp/src/containers/Insights/styles.module.scss +++ b/packages/webapp/src/containers/Insights/styles.module.scss @@ -13,7 +13,7 @@ * GNU General Public License for more details, see . */ -@import '@assets/mixin.scss'; +@use '@assets/mixin' as *; .insightContainer { width: 100%; diff --git a/packages/webapp/src/containers/Map/styles.module.scss b/packages/webapp/src/containers/Map/styles.module.scss index 101b39a61d..7c09c9bc58 100644 --- a/packages/webapp/src/containers/Map/styles.module.scss +++ b/packages/webapp/src/containers/Map/styles.module.scss @@ -1,4 +1,4 @@ -@import '@assets/mixin.scss'; +@use '@assets/mixin' as *; .pageWrapper { display: flex; diff --git a/packages/webapp/src/containers/ProductInventory/styles.module.scss b/packages/webapp/src/containers/ProductInventory/styles.module.scss index a5141c6f56..3b59c125e0 100644 --- a/packages/webapp/src/containers/ProductInventory/styles.module.scss +++ b/packages/webapp/src/containers/ProductInventory/styles.module.scss @@ -13,7 +13,7 @@ * GNU General Public License for more details, see . */ -@import '@assets/mixin.scss'; +@use '@assets/mixin' as *; .nameContainer { padding: 8px; diff --git a/packages/webapp/src/containers/Profile/FarmSettings/MarketDirectory/Consent/styles.module.scss b/packages/webapp/src/containers/Profile/FarmSettings/MarketDirectory/Consent/styles.module.scss index d12dd8b38c..d1f3cd1157 100644 --- a/packages/webapp/src/containers/Profile/FarmSettings/MarketDirectory/Consent/styles.module.scss +++ b/packages/webapp/src/containers/Profile/FarmSettings/MarketDirectory/Consent/styles.module.scss @@ -13,7 +13,7 @@ * GNU General Public License for more details, see . */ -@import '@assets/mixin.scss'; +@use '@assets/mixin' as *; .consentContainer { width: 100%; diff --git a/packages/webapp/src/containers/Profile/FarmSettings/MarketDirectory/DataSummary/styles.module.scss b/packages/webapp/src/containers/Profile/FarmSettings/MarketDirectory/DataSummary/styles.module.scss index b6886e4bf0..bf878c14a1 100644 --- a/packages/webapp/src/containers/Profile/FarmSettings/MarketDirectory/DataSummary/styles.module.scss +++ b/packages/webapp/src/containers/Profile/FarmSettings/MarketDirectory/DataSummary/styles.module.scss @@ -13,7 +13,7 @@ * GNU General Public License for more details, see . */ -@import '@assets/mixin.scss'; +@use '@assets/mixin' as *; .dataSummary { border-radius: 4px; diff --git a/packages/webapp/src/containers/Profile/FarmSettings/MarketDirectory/styles.module.scss b/packages/webapp/src/containers/Profile/FarmSettings/MarketDirectory/styles.module.scss index 503a353f38..62fc71f249 100644 --- a/packages/webapp/src/containers/Profile/FarmSettings/MarketDirectory/styles.module.scss +++ b/packages/webapp/src/containers/Profile/FarmSettings/MarketDirectory/styles.module.scss @@ -13,7 +13,7 @@ * GNU General Public License for more details, see . */ -@import '@assets/mixin.scss'; +@use '@assets/mixin' as *; .container { display: flex; diff --git a/packages/webapp/src/containers/SensorReadings/v2/styles.module.scss b/packages/webapp/src/containers/SensorReadings/v2/styles.module.scss index 0dc1e4ca39..fdaba13f56 100644 --- a/packages/webapp/src/containers/SensorReadings/v2/styles.module.scss +++ b/packages/webapp/src/containers/SensorReadings/v2/styles.module.scss @@ -13,7 +13,7 @@ * GNU General Public License for more details, see . */ -@import '@assets/mixin.scss'; +@use '@assets/mixin' as *; .paper { width: 100%; diff --git a/packages/webapp/src/stories/Card/styles.module.scss b/packages/webapp/src/stories/Card/styles.module.scss index 3c14f9c1dd..633493bc39 100644 --- a/packages/webapp/src/stories/Card/styles.module.scss +++ b/packages/webapp/src/stories/Card/styles.module.scss @@ -12,7 +12,7 @@ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details, see . */ - @import '../../assets/mixin.scss'; +@use '../../assets/mixin' as *; .wrapper { @include sm-breakpoint { diff --git a/packages/webapp/src/stories/ExpandableItem/styles.module.scss b/packages/webapp/src/stories/ExpandableItem/styles.module.scss index d0f6950540..b780a65cca 100644 --- a/packages/webapp/src/stories/ExpandableItem/styles.module.scss +++ b/packages/webapp/src/stories/ExpandableItem/styles.module.scss @@ -13,7 +13,7 @@ * GNU General Public License for more details, see . */ -@import '../../assets/mixin.scss'; +@use '../../assets/mixin' as *; .expandedContent { padding: 8px; diff --git a/packages/webapp/src/stories/FloatingContainer/styles.module.scss b/packages/webapp/src/stories/FloatingContainer/styles.module.scss index c98ebbb59d..40fc2f2f37 100644 --- a/packages/webapp/src/stories/FloatingContainer/styles.module.scss +++ b/packages/webapp/src/stories/FloatingContainer/styles.module.scss @@ -13,7 +13,7 @@ * GNU General Public License for more details, see . */ -@import '../../assets/mixin'; +@use '../../assets/mixin' as *; .wrapper { position: relative; diff --git a/packages/webapp/src/stories/OverviewStats/styles.module.scss b/packages/webapp/src/stories/OverviewStats/styles.module.scss index a11edf920a..5a47423870 100644 --- a/packages/webapp/src/stories/OverviewStats/styles.module.scss +++ b/packages/webapp/src/stories/OverviewStats/styles.module.scss @@ -13,7 +13,7 @@ * GNU General Public License for more details, see . */ -@import '../../assets/mixin.scss'; +@use '../../assets/mixin' as *; .labelWrapper { display: flex; diff --git a/packages/webapp/src/stories/Tab/styles.module.scss b/packages/webapp/src/stories/Tab/styles.module.scss index dc8ef4999b..ae9a9f4ca0 100644 --- a/packages/webapp/src/stories/Tab/styles.module.scss +++ b/packages/webapp/src/stories/Tab/styles.module.scss @@ -13,7 +13,7 @@ * GNU General Public License for more details, see . */ -@import '../../assets/mixin'; +@use '../../assets/mixin' as *; .underlineContainerDesktop { padding: 0 16px; diff --git a/packages/webapp/src/stories/Tile/DescriptionList/styles.module.scss b/packages/webapp/src/stories/Tile/DescriptionList/styles.module.scss index 0944f07ca7..4ed2ce8c4b 100644 --- a/packages/webapp/src/stories/Tile/DescriptionList/styles.module.scss +++ b/packages/webapp/src/stories/Tile/DescriptionList/styles.module.scss @@ -13,7 +13,7 @@ * GNU General Public License for more details, see . */ -@import '@assets/mixin.scss'; +@use '@assets/mixin' as *; .dataWithIcon { svg { diff --git a/packages/webapp/src/styles.module.scss b/packages/webapp/src/styles.module.scss index 2354cd65a4..61830cc073 100644 --- a/packages/webapp/src/styles.module.scss +++ b/packages/webapp/src/styles.module.scss @@ -13,7 +13,7 @@ * GNU General Public License for more details, see . */ -@import '@assets/mixin.scss'; +@use '@assets/mixin' as *; .container { display: flex; @@ -42,8 +42,10 @@ left: calc((100vw - var(--global-side-menu-width)) / 2 + var(--global-side-menu-width)); &.compactContainerRoot { - left: calc((100vw - var(--global-compact-side-menu-width)) / 2 + var(--global-compact-side-menu-width)); - } + left: calc( + (100vw - var(--global-compact-side-menu-width)) / 2 + var(--global-compact-side-menu-width) + ); + } } .root {