@ascentgl/ads-ui 20.29.0 → 20.30.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (53) hide show
  1. package/README.md +7 -7
  2. package/fesm2022/ascentgl-ads-ui-src-lib-components-avatar.mjs +8 -8
  3. package/fesm2022/ascentgl-ads-ui-src-lib-components-avatar.mjs.map +1 -1
  4. package/fesm2022/ascentgl-ads-ui-src-lib-components-buttons-button-container.mjs +8 -8
  5. package/fesm2022/ascentgl-ads-ui-src-lib-components-buttons-button-container.mjs.map +1 -1
  6. package/fesm2022/ascentgl-ads-ui-src-lib-components-drag-and-drop-list.mjs +8 -8
  7. package/fesm2022/ascentgl-ads-ui-src-lib-components-drag-and-drop-list.mjs.map +1 -1
  8. package/fesm2022/ascentgl-ads-ui-src-lib-components-error-page-error-page-code.mjs +7 -7
  9. package/fesm2022/ascentgl-ads-ui-src-lib-components-error-page-error-page-code.mjs.map +1 -1
  10. package/fesm2022/ascentgl-ads-ui-src-lib-components-footer-container.mjs +8 -8
  11. package/fesm2022/ascentgl-ads-ui-src-lib-components-footer-container.mjs.map +1 -1
  12. package/fesm2022/ascentgl-ads-ui-src-lib-components-footer.mjs +8 -8
  13. package/fesm2022/ascentgl-ads-ui-src-lib-components-footer.mjs.map +1 -1
  14. package/fesm2022/ascentgl-ads-ui-src-lib-components-header-container.mjs +8 -8
  15. package/fesm2022/ascentgl-ads-ui-src-lib-components-header-container.mjs.map +1 -1
  16. package/fesm2022/ascentgl-ads-ui-src-lib-components-header.mjs +8 -8
  17. package/fesm2022/ascentgl-ads-ui-src-lib-components-header.mjs.map +1 -1
  18. package/fesm2022/ascentgl-ads-ui-src-lib-components-logo-primary-logo.mjs +11 -11
  19. package/fesm2022/ascentgl-ads-ui-src-lib-components-logo-primary-logo.mjs.map +1 -1
  20. package/fesm2022/ascentgl-ads-ui-src-lib-components-progress-indicators-progress-bar.mjs +8 -8
  21. package/fesm2022/ascentgl-ads-ui-src-lib-components-progress-indicators-progress-bar.mjs.map +1 -1
  22. package/fesm2022/ascentgl-ads-ui-src-lib-components-progress-indicators-progress-indicator-spinner.mjs +8 -8
  23. package/fesm2022/ascentgl-ads-ui-src-lib-components-progress-indicators-progress-indicator-spinner.mjs.map +1 -1
  24. package/fesm2022/ascentgl-ads-ui-src-lib-components-progress-indicators-progress-spinner.mjs +8 -8
  25. package/fesm2022/ascentgl-ads-ui-src-lib-components-progress-indicators-progress-spinner.mjs.map +1 -1
  26. package/fesm2022/ascentgl-ads-ui-src-lib-components-shell-layout.mjs +8 -8
  27. package/fesm2022/ascentgl-ads-ui-src-lib-components-shell-layout.mjs.map +1 -1
  28. package/fesm2022/ascentgl-ads-ui-src-lib-components-splash-page.mjs +8 -8
  29. package/fesm2022/ascentgl-ads-ui-src-lib-components-splash-page.mjs.map +1 -1
  30. package/fesm2022/ascentgl-ads-ui-src-lib-components-tags-tag-container.mjs +8 -8
  31. package/fesm2022/ascentgl-ads-ui-src-lib-components-tags-tag-container.mjs.map +1 -1
  32. package/fesm2022/ascentgl-ads-ui.mjs +734 -707
  33. package/fesm2022/ascentgl-ads-ui.mjs.map +1 -1
  34. package/index.d.ts +16 -4
  35. package/package.json +5 -5
  36. package/src/assets/sass/ads-ui/abstracts/_functions.scss +18 -18
  37. package/src/assets/sass/ads-ui/abstracts/_mixins.scss +90 -90
  38. package/src/assets/sass/ads-ui/abstracts/_variables.scss +127 -127
  39. package/src/assets/sass/ads-ui/base/_reset.scss +19 -19
  40. package/src/assets/sass/ads-ui/base/_typography.scss +179 -179
  41. package/src/assets/sass/ads-ui/base/_utilities.scss +104 -104
  42. package/src/assets/sass/ads-ui/main.scss +8 -8
  43. package/src/assets/sass/ads-ui/overrides/_angular-material.scss +8 -8
  44. package/src/assets/sass/ads-ui/overrides/angular-material/_bottom-sheet.scss +12 -12
  45. package/src/assets/sass/ads-ui/overrides/angular-material/_datetimepicker.scss +248 -248
  46. package/src/assets/sass/ads-ui/overrides/angular-material/_dropdown.scss +31 -31
  47. package/src/assets/sass/ads-ui/overrides/angular-material/_html.scss +14 -14
  48. package/src/assets/sass/ads-ui/overrides/angular-material/_mat-list.scss +47 -47
  49. package/src/assets/sass/ads-ui/overrides/angular-material/_menu.scss +89 -89
  50. package/src/assets/sass/ads-ui/overrides/angular-material/_search-dropdown-modal.scss +34 -34
  51. package/src/assets/sass/ads-ui/overrides/angular-material/_snackbar.scss +40 -40
  52. package/src/assets/sass/ads-ui/overrides/angular-material/_tooltip.scss +76 -76
  53. package/src/assets/sass/ads-ui/themes/_ads-palette.scss +98 -98
package/index.d.ts CHANGED
@@ -135,7 +135,7 @@ declare class AdsNumericBadgeComponent extends AdsIconHoverComponent {
135
135
  /** provide icon name. NOTE: the icon must be registered in icon registry **/
136
136
  name: i0.InputSignal<adsIcon>;
137
137
  /** choose ads icon theme **/
138
- theme: i0.InputSignal<"primary" | "iconPrimary" | "success" | "warn" | "white">;
138
+ theme: i0.InputSignal<"iconPrimary" | "primary" | "success" | "warn" | "white">;
139
139
  /** set badge value as number **/
140
140
  value: i0.InputSignal<number>;
141
141
  /** @ignore **/
@@ -224,7 +224,7 @@ declare class AdsButtonModule {
224
224
 
225
225
  declare class AdsButtonContainerComponent {
226
226
  /** How buttons in the container should be placed */
227
- justify: i0.InputSignal<"center" | "flex-start" | "flex-end">;
227
+ justify: i0.InputSignal<"flex-start" | "flex-end" | "center">;
228
228
  /** The gap between elements */
229
229
  gap: i0.InputSignal<number>;
230
230
  static ɵfac: i0.ɵɵFactoryDeclaration<AdsButtonContainerComponent, never>;
@@ -862,6 +862,18 @@ declare class AdsScmsLogoModule {
862
862
  static ɵinj: i0.ɵɵInjectorDeclaration<AdsScmsLogoModule>;
863
863
  }
864
864
 
865
+ declare class AdsGenericLogoComponent extends AbstractApplicationLogoComponent {
866
+ label: string;
867
+ static ɵfac: i0.ɵɵFactoryDeclaration<AdsGenericLogoComponent, never>;
868
+ static ɵcmp: i0.ɵɵComponentDeclaration<AdsGenericLogoComponent, "ads-generic-logo", never, {}, {}, never, never, false, never>;
869
+ }
870
+
871
+ declare class AdsGenericLogoModule {
872
+ static ɵfac: i0.ɵɵFactoryDeclaration<AdsGenericLogoModule, never>;
873
+ static ɵmod: i0.ɵɵNgModuleDeclaration<AdsGenericLogoModule, [typeof AdsGenericLogoComponent], [typeof i2.CommonModule], [typeof AdsGenericLogoComponent]>;
874
+ static ɵinj: i0.ɵɵInjectorDeclaration<AdsGenericLogoModule>;
875
+ }
876
+
865
877
  declare class AdsPeakMarketplaceLogoComponent extends AbstractApplicationLogoComponent {
866
878
  label: string;
867
879
  static ɵfac: i0.ɵɵFactoryDeclaration<AdsPeakMarketplaceLogoComponent, never>;
@@ -2315,7 +2327,7 @@ declare class AdsExpansionPanelComponent implements AfterContentInit {
2315
2327
  /** Component width. Must include units of measure: px, %, em, rem, etc. */
2316
2328
  width: i0.InputSignal<string>;
2317
2329
  /** The Chevron Icon size () */
2318
- chevronSize: i0.InputSignal<"xs" | "base">;
2330
+ chevronSize: i0.InputSignal<"base" | "xs">;
2319
2331
  /** Header padding size size () */
2320
2332
  headerPadding: i0.InputSignal<string>;
2321
2333
  /** Content padding size size () */
@@ -3291,5 +3303,5 @@ declare class AdsProgressStepperModule {
3291
3303
  static ɵinj: i0.ɵɵInjectorDeclaration<AdsProgressStepperModule>;
3292
3304
  }
3293
3305
 
3294
- export { AdsAscentLogoComponent, AdsAscentLogoModule, AdsAvatarComponent, AdsAvatarModule, AdsBreadcrumbComponent, AdsBreadcrumbModule, AdsBubbleComponent, AdsBubbleModule, AdsButtonComponent, AdsButtonContainerComponent, AdsButtonContainerModule, AdsButtonModule, AdsCardComponent, AdsCardModule, AdsCheckboxComponent, AdsCheckboxModule, AdsChipComponent, AdsChipModule, AdsCreateTagComponent, AdsCreateTagModule, AdsDatepickerComponent, AdsDatepickerModule, AdsDatetimepickerComponent, AdsDatetimepickerModule, AdsDividerModule, AdsDragAndDropListComponent, AdsDragAndDropListModule, AdsDropdownComponent, AdsDropdownModule, AdsErrorPageCodeComponent, AdsErrorPageCodeModule, AdsErrorPageComponent, AdsErrorPageModule, AdsExpansionPanelComponent, AdsExpansionPanelModule, AdsFooterComponent, AdsFooterContainerComponent, AdsFooterContainerModule, AdsFooterModule, AdsHeaderComponent, AdsHeaderContainerComponent, AdsHeaderContainerModule, AdsHeaderModule, AdsHorizontalNavBarComponent, AdsHorizontalNavBarModule, AdsIconButtonComponent, AdsIconButtonModule, AdsIconHoverComponent, AdsIconHoverModule, AdsInputComponent, AdsInputDropdownComponent, AdsInputDropdownModule, AdsInputModule, AdsInternationalPhoneFieldComponent, AdsInternationalPhoneFieldModule, AdsLinkButtonComponent, AdsLinkButtonModule, AdsMainMenuComponent, AdsMainMenuModule, AdsModalComponent, AdsModalModule, AdsMultiSelectDropdownComponent, AdsMultiSelectDropdownModule, AdsNavMenuComponent, AdsNavMenuModule, AdsNavigationCollapseHandleComponent, AdsNavigationCollapseHandleModule, AdsNavigationComponent, AdsNavigationHeaderComponent, AdsNavigationHeaderModule, AdsNavigationItemComponent, AdsNavigationItemModule, AdsNavigationItemsContainerComponent, AdsNavigationItemsContainerModule, AdsNavigationModule, AdsNumericBadgeComponent, AdsNumericBadgeModule, AdsNumericStepperComponent, AdsNumericStepperModule, AdsOrgDisplayTextComponent, AdsOrgDisplayTextModule, AdsPeakEssentialsLogoComponent, AdsPeakEssentialsLogoModule, AdsPeakMarketplaceLogoComponent, AdsPeakMarketplaceLogoModule, AdsPeakOrderManagementLogoComponent, AdsPeakOrderManagementLogoModule, AdsPhoneFieldComponent, AdsPhoneFieldModule, AdsPrimaryLogoComponent, AdsPrimaryLogoModule, AdsProgressBarComponent, AdsProgressBarModule, AdsProgressIndicatorSpinnerComponent, AdsProgressIndicatorSpinnerModule, AdsProgressSpinnerComponent, AdsProgressSpinnerModule, AdsProgressStepperComponent, AdsProgressStepperModule, AdsRadioButtonComponent, AdsRadioButtonModule, AdsScmsLogoComponent, AdsScmsLogoModule, AdsScmsSideNavBarComponent, AdsScmsSideNavBarModule, AdsSearchDropdownComponent, AdsSearchDropdownModule, AdsSearchInputComponent, AdsSearchInputModule, AdsShellLayoutModule, AdsSideNavBarComponent, AdsSideNavBarModule, AdsSlideToggle, AdsSlideToggleComponent, AdsSliderComponent, AdsSliderModule, AdsSnackbarComponent, AdsSnackbarModule, AdsSplashPageComponent, AdsSplashPageModule, AdsStepperComponent, AdsStepperModule, AdsTableComponent, AdsTableModule, AdsTabsComponent, AdsTabsModule, AdsTagComponent, AdsTagContainerComponent, AdsTagContainerModule, AdsTagModule, AdsTextareaComponent, AdsTextareaModule, AdsTimeFieldComponent, AdsTimeFieldModule, AdsTimepickerComponent, AdsTimepickerModule, AdsWizardStepperComponent, AdsWizardStepperModule, AscentCardComponent, AscentCardModule, BadgeColor, Colors, CustomDatetimeAdapter, DividerComponent, ErrorPageDefault, MainMenuService, ModalActionType, ModalPanelClass, PanelClass, ShellLayoutComponent, SpinnerSize, StepStatus, TableBreakpoint, ViewportService, WindowService, WizardStepStatus };
3306
+ export { AdsAscentLogoComponent, AdsAscentLogoModule, AdsAvatarComponent, AdsAvatarModule, AdsBreadcrumbComponent, AdsBreadcrumbModule, AdsBubbleComponent, AdsBubbleModule, AdsButtonComponent, AdsButtonContainerComponent, AdsButtonContainerModule, AdsButtonModule, AdsCardComponent, AdsCardModule, AdsCheckboxComponent, AdsCheckboxModule, AdsChipComponent, AdsChipModule, AdsCreateTagComponent, AdsCreateTagModule, AdsDatepickerComponent, AdsDatepickerModule, AdsDatetimepickerComponent, AdsDatetimepickerModule, AdsDividerModule, AdsDragAndDropListComponent, AdsDragAndDropListModule, AdsDropdownComponent, AdsDropdownModule, AdsErrorPageCodeComponent, AdsErrorPageCodeModule, AdsErrorPageComponent, AdsErrorPageModule, AdsExpansionPanelComponent, AdsExpansionPanelModule, AdsFooterComponent, AdsFooterContainerComponent, AdsFooterContainerModule, AdsFooterModule, AdsGenericLogoComponent, AdsGenericLogoModule, AdsHeaderComponent, AdsHeaderContainerComponent, AdsHeaderContainerModule, AdsHeaderModule, AdsHorizontalNavBarComponent, AdsHorizontalNavBarModule, AdsIconButtonComponent, AdsIconButtonModule, AdsIconHoverComponent, AdsIconHoverModule, AdsInputComponent, AdsInputDropdownComponent, AdsInputDropdownModule, AdsInputModule, AdsInternationalPhoneFieldComponent, AdsInternationalPhoneFieldModule, AdsLinkButtonComponent, AdsLinkButtonModule, AdsMainMenuComponent, AdsMainMenuModule, AdsModalComponent, AdsModalModule, AdsMultiSelectDropdownComponent, AdsMultiSelectDropdownModule, AdsNavMenuComponent, AdsNavMenuModule, AdsNavigationCollapseHandleComponent, AdsNavigationCollapseHandleModule, AdsNavigationComponent, AdsNavigationHeaderComponent, AdsNavigationHeaderModule, AdsNavigationItemComponent, AdsNavigationItemModule, AdsNavigationItemsContainerComponent, AdsNavigationItemsContainerModule, AdsNavigationModule, AdsNumericBadgeComponent, AdsNumericBadgeModule, AdsNumericStepperComponent, AdsNumericStepperModule, AdsOrgDisplayTextComponent, AdsOrgDisplayTextModule, AdsPeakEssentialsLogoComponent, AdsPeakEssentialsLogoModule, AdsPeakMarketplaceLogoComponent, AdsPeakMarketplaceLogoModule, AdsPeakOrderManagementLogoComponent, AdsPeakOrderManagementLogoModule, AdsPhoneFieldComponent, AdsPhoneFieldModule, AdsPrimaryLogoComponent, AdsPrimaryLogoModule, AdsProgressBarComponent, AdsProgressBarModule, AdsProgressIndicatorSpinnerComponent, AdsProgressIndicatorSpinnerModule, AdsProgressSpinnerComponent, AdsProgressSpinnerModule, AdsProgressStepperComponent, AdsProgressStepperModule, AdsRadioButtonComponent, AdsRadioButtonModule, AdsScmsLogoComponent, AdsScmsLogoModule, AdsScmsSideNavBarComponent, AdsScmsSideNavBarModule, AdsSearchDropdownComponent, AdsSearchDropdownModule, AdsSearchInputComponent, AdsSearchInputModule, AdsShellLayoutModule, AdsSideNavBarComponent, AdsSideNavBarModule, AdsSlideToggle, AdsSlideToggleComponent, AdsSliderComponent, AdsSliderModule, AdsSnackbarComponent, AdsSnackbarModule, AdsSplashPageComponent, AdsSplashPageModule, AdsStepperComponent, AdsStepperModule, AdsTableComponent, AdsTableModule, AdsTabsComponent, AdsTabsModule, AdsTagComponent, AdsTagContainerComponent, AdsTagContainerModule, AdsTagModule, AdsTextareaComponent, AdsTextareaModule, AdsTimeFieldComponent, AdsTimeFieldModule, AdsTimepickerComponent, AdsTimepickerModule, AdsWizardStepperComponent, AdsWizardStepperModule, AscentCardComponent, AscentCardModule, BadgeColor, Colors, CustomDatetimeAdapter, DividerComponent, ErrorPageDefault, MainMenuService, ModalActionType, ModalPanelClass, PanelClass, ShellLayoutComponent, SpinnerSize, StepStatus, TableBreakpoint, ViewportService, WindowService, WizardStepStatus };
3295
3307
  export type { AdsModalData, Breadcrumb, ColumnVisibilityControl, Copyright, DROP_CALLBACK_INDEXES, DividerStyle, ErrorPageConfig, ErrorPageInfoColumn, HorizontalNavLink, IconButtonSize, Link, MainMenuItem, NavItem, NavMenuItem, NumericStep, ProgressStep, ScmsNavItem, ScmsNavSubItem, Size, SnackBarData, Step, Tab, Tag, UNSUBSCRIBE_FUNCTIONS_COLLECTION, Variant, WizardStep };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ascentgl/ads-ui",
3
- "version": "20.29.0",
3
+ "version": "20.30.0",
4
4
  "peerDependencies": {
5
5
  "@angular/animations": ">=20.3.0",
6
6
  "date-fns": ">=4.1.0",
@@ -79,14 +79,14 @@
79
79
  "types": "./src/lib/components/progress-indicators/progress-bar/index.d.ts",
80
80
  "default": "./fesm2022/ascentgl-ads-ui-src-lib-components-progress-indicators-progress-bar.mjs"
81
81
  },
82
- "./src/lib/components/progress-indicators/progress-spinner": {
83
- "types": "./src/lib/components/progress-indicators/progress-spinner/index.d.ts",
84
- "default": "./fesm2022/ascentgl-ads-ui-src-lib-components-progress-indicators-progress-spinner.mjs"
85
- },
86
82
  "./src/lib/components/progress-indicators/progress-indicator-spinner": {
87
83
  "types": "./src/lib/components/progress-indicators/progress-indicator-spinner/index.d.ts",
88
84
  "default": "./fesm2022/ascentgl-ads-ui-src-lib-components-progress-indicators-progress-indicator-spinner.mjs"
89
85
  },
86
+ "./src/lib/components/progress-indicators/progress-spinner": {
87
+ "types": "./src/lib/components/progress-indicators/progress-spinner/index.d.ts",
88
+ "default": "./fesm2022/ascentgl-ads-ui-src-lib-components-progress-indicators-progress-spinner.mjs"
89
+ },
90
90
  "./src/lib/components/tags/tag-container": {
91
91
  "types": "./src/lib/components/tags/tag-container/index.d.ts",
92
92
  "default": "./fesm2022/ascentgl-ads-ui-src-lib-components-tags-tag-container.mjs"
@@ -1,18 +1,18 @@
1
- @use 'sass:map';
2
- @use 'variables' as *;
3
-
4
- @function color($key) {
5
- @return var(--color- + $key);
6
- }
7
-
8
- @function font-weight($key) {
9
- @return map.get($font-weights, $key);
10
- }
11
-
12
- @function font-size($key) {
13
- @return map.get($font-sizes, $key);
14
- }
15
-
16
- @function spacing($key) {
17
- @return map.get($spacings, $key);
18
- }
1
+ @use 'sass:map';
2
+ @use 'variables' as *;
3
+
4
+ @function color($key) {
5
+ @return var(--color- + $key);
6
+ }
7
+
8
+ @function font-weight($key) {
9
+ @return map.get($font-weights, $key);
10
+ }
11
+
12
+ @function font-size($key) {
13
+ @return map.get($font-sizes, $key);
14
+ }
15
+
16
+ @function spacing($key) {
17
+ @return map.get($spacings, $key);
18
+ }
@@ -1,90 +1,90 @@
1
- // Media Queries
2
- @use 'functions' as *;
3
-
4
- @mixin breakpoint($breakpoint) {
5
- @if $breakpoint == xs {
6
- @media screen and (min-width: 320px) and (max-width: 480px) {
7
- @content;
8
- }
9
- } @else if $breakpoint == sm {
10
- @media screen and (min-width: 481px) and (max-width: 768px) {
11
- @content;
12
- }
13
- } @else if $breakpoint == md {
14
- @media screen and (min-width: 769px) and (max-width: 1024px) {
15
- @content;
16
- }
17
- } @else if $breakpoint == lg {
18
- @media screen and (min-width: 1025px) and (max-width: 1200px) {
19
- @content;
20
- }
21
- } @else if $breakpoint == xl {
22
- @media screen and (min-width: 1201px) {
23
- @content;
24
- }
25
- } @else if $breakpoint == lt-sm {
26
- @media screen and (max-width: 480px) {
27
- @content;
28
- }
29
- } @else if $breakpoint == lt-md {
30
- @media screen and (max-width: 768px) {
31
- @content;
32
- }
33
- } @else if $breakpoint == lt-lg {
34
- @media screen and (max-width: 1024px) {
35
- @content;
36
- }
37
- } @else if $breakpoint == lt-xl {
38
- @media screen and (max-width: 1200px) {
39
- @content;
40
- }
41
- } @else if $breakpoint == gt-xs {
42
- @media screen and (min-width: 481px) {
43
- @content;
44
- }
45
- } @else if $breakpoint == gt-sm {
46
- @media screen and (min-width: 769px) {
47
- @content;
48
- }
49
- } @else if $breakpoint == gt-md {
50
- @media screen and (min-width: 1025px) {
51
- @content;
52
- }
53
- } @else if $breakpoint == gt-lg {
54
- @media screen and (min-width: 1201px) {
55
- @content;
56
- }
57
- }
58
- }
59
-
60
- @mixin font-size($breakpoint: base) {
61
- @if $breakpoint == xs {
62
- font-size: 0.75rem;
63
- } @else if $breakpoint == sm {
64
- font-size: 0.875rem;
65
- } @else if $breakpoint == base {
66
- font-size: 1rem;
67
- } @else if $breakpoint == lg {
68
- font-size: 1.125rem;
69
- } @else if $breakpoint == xl {
70
- font-size: 1.25rem;
71
- } @else if $breakpoint == 2xl {
72
- font-size: 1.5rem;
73
- } @else if $breakpoint == 3xl {
74
- font-size: 1.875rem;
75
- } @else if $breakpoint == 4xl {
76
- font-size: 2.25rem;
77
- } @else if $breakpoint == 5xl {
78
- font-size: 3rem;
79
- } @else if $breakpoint == 6xl {
80
- font-size: 4rem;
81
- }
82
- }
83
-
84
- @mixin background-color($theme: primary) {
85
- background-color: color($theme);
86
- }
87
-
88
- @mixin color($theme: dark) {
89
- color: color($theme);
90
- }
1
+ // Media Queries
2
+ @use 'functions' as *;
3
+
4
+ @mixin breakpoint($breakpoint) {
5
+ @if $breakpoint == xs {
6
+ @media screen and (min-width: 320px) and (max-width: 480px) {
7
+ @content;
8
+ }
9
+ } @else if $breakpoint == sm {
10
+ @media screen and (min-width: 481px) and (max-width: 768px) {
11
+ @content;
12
+ }
13
+ } @else if $breakpoint == md {
14
+ @media screen and (min-width: 769px) and (max-width: 1024px) {
15
+ @content;
16
+ }
17
+ } @else if $breakpoint == lg {
18
+ @media screen and (min-width: 1025px) and (max-width: 1200px) {
19
+ @content;
20
+ }
21
+ } @else if $breakpoint == xl {
22
+ @media screen and (min-width: 1201px) {
23
+ @content;
24
+ }
25
+ } @else if $breakpoint == lt-sm {
26
+ @media screen and (max-width: 480px) {
27
+ @content;
28
+ }
29
+ } @else if $breakpoint == lt-md {
30
+ @media screen and (max-width: 768px) {
31
+ @content;
32
+ }
33
+ } @else if $breakpoint == lt-lg {
34
+ @media screen and (max-width: 1024px) {
35
+ @content;
36
+ }
37
+ } @else if $breakpoint == lt-xl {
38
+ @media screen and (max-width: 1200px) {
39
+ @content;
40
+ }
41
+ } @else if $breakpoint == gt-xs {
42
+ @media screen and (min-width: 481px) {
43
+ @content;
44
+ }
45
+ } @else if $breakpoint == gt-sm {
46
+ @media screen and (min-width: 769px) {
47
+ @content;
48
+ }
49
+ } @else if $breakpoint == gt-md {
50
+ @media screen and (min-width: 1025px) {
51
+ @content;
52
+ }
53
+ } @else if $breakpoint == gt-lg {
54
+ @media screen and (min-width: 1201px) {
55
+ @content;
56
+ }
57
+ }
58
+ }
59
+
60
+ @mixin font-size($breakpoint: base) {
61
+ @if $breakpoint == xs {
62
+ font-size: 0.75rem;
63
+ } @else if $breakpoint == sm {
64
+ font-size: 0.875rem;
65
+ } @else if $breakpoint == base {
66
+ font-size: 1rem;
67
+ } @else if $breakpoint == lg {
68
+ font-size: 1.125rem;
69
+ } @else if $breakpoint == xl {
70
+ font-size: 1.25rem;
71
+ } @else if $breakpoint == 2xl {
72
+ font-size: 1.5rem;
73
+ } @else if $breakpoint == 3xl {
74
+ font-size: 1.875rem;
75
+ } @else if $breakpoint == 4xl {
76
+ font-size: 2.25rem;
77
+ } @else if $breakpoint == 5xl {
78
+ font-size: 3rem;
79
+ } @else if $breakpoint == 6xl {
80
+ font-size: 4rem;
81
+ }
82
+ }
83
+
84
+ @mixin background-color($theme: primary) {
85
+ background-color: color($theme);
86
+ }
87
+
88
+ @mixin color($theme: dark) {
89
+ color: color($theme);
90
+ }
@@ -1,127 +1,127 @@
1
- $box-shadow: 0 3px 6px 0 rgba(0, 73, 135, 16%);
2
-
3
- $colors: (
4
- white: #ffffff,
5
- muted-30: #fcfdff,
6
- muted-50: #f9fbff,
7
- muted: #f2f7ff,
8
- light-30: #f1f3f9,
9
- light-80: #dae0ee,
10
- light: #ced6e8,
11
- light-opacity-50: rgba(206, 214, 232, 0.5),
12
- medium-30: #c6c8d0,
13
- medium-50: #b2b6c6,
14
- medium: #646c8d,
15
- medium-opacity-50: rgba(100, 108, 141, 0.5),
16
- dark-10: #666666,
17
- dark-30: #5c5c5c,
18
- dark-50: #525252,
19
- dark-80: #474747,
20
- dark-90: #333333,
21
- dark: #292929,
22
- black: #1e1e1e,
23
-
24
- primary: #041f41,
25
- primary-hover: #044986,
26
- primary-pressed: #366d9e,
27
-
28
- secondary: #017d93,
29
- secondary-hover: #015a6a,
30
- secondary-pressed: #013b46,
31
- secondary-10: rgba(1, 125, 147, 0.1),
32
- link: #0077b3,
33
- link-hover: #005885,
34
- link-pressed: #002638,
35
-
36
- error: #bb1e1e,
37
- error-hover: #ab1c1c,
38
- error-pressed: #771313,
39
-
40
- success: #238170,
41
- success-hover: #19584c,
42
- success-pressed: #10382e,
43
-
44
- logo: #004987,
45
- alert: #ff5e00,
46
- );
47
-
48
- $colors-dark: (
49
- white: #292929,
50
- muted-30: #1e1e1e,
51
- muted-50: #333333,
52
- muted: #474747,
53
- light-30: #525252,
54
- light-80: #5c5c5c,
55
- light: #666666,
56
- light-opacity-50: rgba(102, 102, 102, 0.5),
57
- medium-30: #fcfdff,
58
- medium-50: #f9fbff,
59
- medium: #f2f7ff,
60
- medium-opacity-50: rgba(242, 247, 255, 0.5),
61
- dark-10: #ced6e8,
62
- dark-30: #dae0ee,
63
- dark-50: #f1f3f9,
64
- dark-80: #f2f7ff,
65
- dark-90: #f9fbff,
66
- dark: #ffffff,
67
- black: #fcfdff,
68
-
69
- primary: #66c5d4,
70
- primary-hover: #33b1c6,
71
- primary-pressed: #009fb8,
72
-
73
- secondary: #cae5e8,
74
- secondary-hover: #a2cbcf,
75
- secondary-pressed: #99b9bc,
76
- secondary-10: rgba(202, 229, 232, 0.1),
77
- link: #52c5ff,
78
- link-hover: #1fb4ff,
79
- link-pressed: #007ab8,
80
-
81
- error: #ff7070,
82
- error-hover: #ff2929,
83
- error-pressed: #cc0000,
84
-
85
- success: #53d0b9,
86
- success-hover: #2ca08b,
87
- success-pressed: #248473,
88
-
89
- logo: #ffffff,
90
- alert: #ff5e00,
91
- );
92
-
93
- $font-weights: (
94
- regular: 400,
95
- medium: 500,
96
- semibold: 600,
97
- bold: 700,
98
- );
99
-
100
- $font-sizes: (
101
- text-xxs: 0.675rem,
102
- text-xs: 0.75rem,
103
- text-sm: 0.875rem,
104
- text-base: 1rem,
105
- text-lg: 1.125rem,
106
- text-xl: 1.25rem,
107
- text-2xl: 1.5rem,
108
- text-3xl: 1.875rem,
109
- text-4xl: 2.25rem,
110
- text-5xl: 3rem,
111
- text-6xl: 4rem,
112
- );
113
-
114
- $spacings: (
115
- space-4: 4px,
116
- space-8: 8px,
117
- space-12: 12px,
118
- space-16: 16px,
119
- space-24: 24px,
120
- space-32: 32px,
121
- space-40: 40px,
122
- space-48: 48px,
123
- space-56: 56px,
124
- space-64: 64px,
125
- space-72: 72px,
126
- space-80: 80px,
127
- );
1
+ $box-shadow: 0 3px 6px 0 rgba(0, 73, 135, 16%);
2
+
3
+ $colors: (
4
+ white: #ffffff,
5
+ muted-30: #fcfdff,
6
+ muted-50: #f9fbff,
7
+ muted: #f2f7ff,
8
+ light-30: #f1f3f9,
9
+ light-80: #dae0ee,
10
+ light: #ced6e8,
11
+ light-opacity-50: rgba(206, 214, 232, 0.5),
12
+ medium-30: #c6c8d0,
13
+ medium-50: #b2b6c6,
14
+ medium: #646c8d,
15
+ medium-opacity-50: rgba(100, 108, 141, 0.5),
16
+ dark-10: #666666,
17
+ dark-30: #5c5c5c,
18
+ dark-50: #525252,
19
+ dark-80: #474747,
20
+ dark-90: #333333,
21
+ dark: #292929,
22
+ black: #1e1e1e,
23
+
24
+ primary: #041f41,
25
+ primary-hover: #044986,
26
+ primary-pressed: #366d9e,
27
+
28
+ secondary: #017d93,
29
+ secondary-hover: #015a6a,
30
+ secondary-pressed: #013b46,
31
+ secondary-10: rgba(1, 125, 147, 0.1),
32
+ link: #0077b3,
33
+ link-hover: #005885,
34
+ link-pressed: #002638,
35
+
36
+ error: #bb1e1e,
37
+ error-hover: #ab1c1c,
38
+ error-pressed: #771313,
39
+
40
+ success: #238170,
41
+ success-hover: #19584c,
42
+ success-pressed: #10382e,
43
+
44
+ logo: #004987,
45
+ alert: #ff5e00,
46
+ );
47
+
48
+ $colors-dark: (
49
+ white: #292929,
50
+ muted-30: #1e1e1e,
51
+ muted-50: #333333,
52
+ muted: #474747,
53
+ light-30: #525252,
54
+ light-80: #5c5c5c,
55
+ light: #666666,
56
+ light-opacity-50: rgba(102, 102, 102, 0.5),
57
+ medium-30: #fcfdff,
58
+ medium-50: #f9fbff,
59
+ medium: #f2f7ff,
60
+ medium-opacity-50: rgba(242, 247, 255, 0.5),
61
+ dark-10: #ced6e8,
62
+ dark-30: #dae0ee,
63
+ dark-50: #f1f3f9,
64
+ dark-80: #f2f7ff,
65
+ dark-90: #f9fbff,
66
+ dark: #ffffff,
67
+ black: #fcfdff,
68
+
69
+ primary: #66c5d4,
70
+ primary-hover: #33b1c6,
71
+ primary-pressed: #009fb8,
72
+
73
+ secondary: #cae5e8,
74
+ secondary-hover: #a2cbcf,
75
+ secondary-pressed: #99b9bc,
76
+ secondary-10: rgba(202, 229, 232, 0.1),
77
+ link: #52c5ff,
78
+ link-hover: #1fb4ff,
79
+ link-pressed: #007ab8,
80
+
81
+ error: #ff7070,
82
+ error-hover: #ff2929,
83
+ error-pressed: #cc0000,
84
+
85
+ success: #53d0b9,
86
+ success-hover: #2ca08b,
87
+ success-pressed: #248473,
88
+
89
+ logo: #ffffff,
90
+ alert: #ff5e00,
91
+ );
92
+
93
+ $font-weights: (
94
+ regular: 400,
95
+ medium: 500,
96
+ semibold: 600,
97
+ bold: 700,
98
+ );
99
+
100
+ $font-sizes: (
101
+ text-xxs: 0.675rem,
102
+ text-xs: 0.75rem,
103
+ text-sm: 0.875rem,
104
+ text-base: 1rem,
105
+ text-lg: 1.125rem,
106
+ text-xl: 1.25rem,
107
+ text-2xl: 1.5rem,
108
+ text-3xl: 1.875rem,
109
+ text-4xl: 2.25rem,
110
+ text-5xl: 3rem,
111
+ text-6xl: 4rem,
112
+ );
113
+
114
+ $spacings: (
115
+ space-4: 4px,
116
+ space-8: 8px,
117
+ space-12: 12px,
118
+ space-16: 16px,
119
+ space-24: 24px,
120
+ space-32: 32px,
121
+ space-40: 40px,
122
+ space-48: 48px,
123
+ space-56: 56px,
124
+ space-64: 64px,
125
+ space-72: 72px,
126
+ space-80: 80px,
127
+ );
@@ -1,19 +1,19 @@
1
- @use '../abstracts/functions' as *;
2
-
3
- ::-webkit-scrollbar {
4
- width: 10px;
5
- height: 10px;
6
- background-color: transparent;
7
- }
8
-
9
- ::-webkit-scrollbar-thumb {
10
- width: 10px;
11
- background: color(muted);
12
- border: 1px solid color(light);
13
- border-radius: 100px;
14
- }
15
-
16
- ::-webkit-scrollbar-thumb:hover {
17
- background: color(medium-30);
18
- border-color: color(medium-30);
19
- }
1
+ @use '../abstracts/functions' as *;
2
+
3
+ ::-webkit-scrollbar {
4
+ width: 10px;
5
+ height: 10px;
6
+ background-color: transparent;
7
+ }
8
+
9
+ ::-webkit-scrollbar-thumb {
10
+ width: 10px;
11
+ background: color(muted);
12
+ border: 1px solid color(light);
13
+ border-radius: 100px;
14
+ }
15
+
16
+ ::-webkit-scrollbar-thumb:hover {
17
+ background: color(medium-30);
18
+ border-color: color(medium-30);
19
+ }