@sapudex/web-components 2.2.0 → 2.4.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.
- package/.eslintignore +3 -0
- package/bundle.esm.js +3 -0
- package/cypress/fixtures/contact-numbers.ts +10 -0
- package/cypress/fixtures/event-ribbon-links.ts +5 -0
- package/cypress/specs/Accordion.cy.tsx +25 -2
- package/cypress/specs/AccordionItem.cy.tsx +1 -1
- package/cypress/specs/Avatar.cy.tsx +1 -1
- package/cypress/specs/AvatarGroup.cy.tsx +1 -2
- package/cypress/specs/Badge.cy.tsx +1 -1
- package/cypress/specs/Contact.cy.tsx +92 -0
- package/cypress/specs/ContactItem.cy.tsx +56 -0
- package/cypress/specs/CountrySelector.cy.tsx +10 -4
- package/cypress/specs/EventRibbon.cy.tsx +110 -0
- package/cypress/specs/Footer.cy.tsx +1 -1
- package/cypress/specs/ListItem.cy.tsx +1 -1
- package/cypress/specs/PhoneNumberField.cy.tsx +4 -2
- package/cypress/specs/Review.cy.tsx +1 -3
- package/cypress/specs/ReviewItem.cy.tsx +1 -1
- package/cypress/specs/SecondaryNavigationDesktop.cy.tsx +123 -116
- package/cypress/specs/SecondaryNavigationMobile.cy.tsx +27 -38
- package/cypress/specs/SelectBox.cy.tsx +93 -88
- package/cypress/specs/Slider.cy.tsx +1 -1
- package/cypress/specs/StatusBadge.cy.tsx +1 -1
- package/cypress/specs/StatusMessage.cy.tsx +1 -1
- package/cypress/specs/Switch.cy.tsx +1 -2
- package/cypress/specs/Table.cy.tsx +1 -9
- package/cypress/specs/Tag.cy.tsx +1 -1
- package/cypress/specs/TagGroup.cy.tsx +1 -2
- package/cypress/specs/TextField.cy.tsx +1 -1
- package/cypress/specs/Textarea.cy.tsx +1 -1
- package/cypress/specs/Toast.cy.tsx +1 -1
- package/cypress/specs/Tooltip.cy.tsx +1 -2
- package/cypress/specs/TruncatedText.cy.tsx +2 -1
- package/cypress/specs/Upload.cy.tsx +1 -2
- package/cypress/specs/UploadItem.cy.tsx +1 -1
- package/cypress/specs/Wizard.cy.tsx +7 -4
- package/cypress/support/commands.ts +31 -2
- package/cypress/support/component-imports.instrumented.ts +95 -0
- package/cypress/support/component-imports.src.ts +95 -0
- package/cypress/support/component.ts +1 -1
- package/cypress.config.ts +6 -0
- package/dist/Accordion.d.ts +7 -1
- package/dist/Accordion.js +3 -3
- package/dist/Accordion.js.map +1 -1
- package/dist/Assets.js +31 -0
- package/dist/Assets.js.map +1 -1
- package/dist/AssetsVariables.js +4 -0
- package/dist/AssetsVariables.js.map +1 -1
- package/dist/Button.d.ts +7 -0
- package/dist/Button.js +3 -0
- package/dist/Button.js.map +1 -1
- package/dist/Contact.d.ts +102 -0
- package/dist/Contact.js +152 -0
- package/dist/Contact.js.map +1 -0
- package/dist/ContactItem.d.ts +67 -0
- package/dist/ContactItem.js +96 -0
- package/dist/ContactItem.js.map +1 -0
- package/dist/ContactItemTemplate.d.ts +2 -0
- package/dist/ContactItemTemplate.js +13 -0
- package/dist/ContactItemTemplate.js.map +1 -0
- package/dist/ContactTemplate.d.ts +4 -0
- package/dist/ContactTemplate.js +29 -0
- package/dist/ContactTemplate.js.map +1 -0
- package/dist/CountrySelector.d.ts +2 -4
- package/dist/CountrySelector.js +3 -5
- package/dist/CountrySelector.js.map +1 -1
- package/dist/DatePicker.js +2 -1
- package/dist/DatePicker.js.map +1 -1
- package/dist/EventRibbon.d.ts +80 -0
- package/dist/EventRibbon.js +111 -0
- package/dist/EventRibbon.js.map +1 -0
- package/dist/EventRibbonTemplate.d.ts +2 -0
- package/dist/EventRibbonTemplate.js +7 -0
- package/dist/EventRibbonTemplate.js.map +1 -0
- package/dist/Footer.d.ts +0 -1
- package/dist/Footer.js +7 -9
- package/dist/Footer.js.map +1 -1
- package/dist/HeroBanner.d.ts +1 -1
- package/dist/List.d.ts +1 -1
- package/dist/List.js +1 -1
- package/dist/List.js.map +1 -1
- package/dist/MastheadItem.d.ts +1 -3
- package/dist/MastheadItem.js +6 -11
- package/dist/MastheadItem.js.map +1 -1
- package/dist/MastheadMenu.d.ts +0 -1
- package/dist/MastheadMenu.js +2 -4
- package/dist/MastheadMenu.js.map +1 -1
- package/dist/MastheadProfileMenu.d.ts +0 -1
- package/dist/MastheadProfileMenu.js +2 -4
- package/dist/MastheadProfileMenu.js.map +1 -1
- package/dist/MastheadShell.d.ts +4 -1
- package/dist/MastheadShell.js +21 -5
- package/dist/MastheadShell.js.map +1 -1
- package/dist/Pagination.d.ts +17 -3
- package/dist/Pagination.js +33 -31
- package/dist/Pagination.js.map +1 -1
- package/dist/PhoneNumberField.d.ts +5 -5
- package/dist/PhoneNumberField.js +1 -1
- package/dist/PhoneNumberField.js.map +1 -1
- package/dist/SearchableListBase.d.ts +9 -0
- package/dist/SearchableListBase.js +15 -3
- package/dist/SearchableListBase.js.map +1 -1
- package/dist/SecondaryNavigation.d.ts +0 -1
- package/dist/SecondaryNavigation.js +2 -4
- package/dist/SecondaryNavigation.js.map +1 -1
- package/dist/TextField.d.ts +7 -0
- package/dist/TextField.js +3 -0
- package/dist/TextField.js.map +1 -1
- package/dist/Wizard.d.ts +20 -1
- package/dist/Wizard.js +22 -9
- package/dist/Wizard.js.map +1 -1
- package/dist/WizardTemplate.js +1 -1
- package/dist/WizardTemplate.js.map +1 -1
- package/dist/assets/{InputSuggestions-KGCQrV_T.js → InputSuggestions-CYW_6A8K.js} +1 -1
- package/dist/assets/{ListItemStandardExpandableTextTemplate-D4zLIdLd.js → ListItemStandardExpandableTextTemplate-BDrgWGjT.js} +1 -1
- package/dist/assets/{bundle.esm-Diw1zQ-o.js → bundle.esm-DRCvw6Ji.js} +235 -225
- package/dist/assets/messagebundle_en-BK8-Eyic.js +1 -0
- package/dist/css/themes/Accordion.css +1 -1
- package/dist/css/themes/Button.css +1 -1
- package/dist/css/themes/Contact.css +1 -0
- package/dist/css/themes/ContactItem.css +1 -0
- package/dist/css/themes/DatePickerPopover.css +1 -1
- package/dist/css/themes/EventRibbon.css +1 -0
- package/dist/css/themes/MastheadCountrySelector.css +1 -1
- package/dist/css/themes/MastheadItem.css +1 -1
- package/dist/css/themes/MastheadShell.css +1 -1
- package/dist/css/themes/Modal.css +1 -1
- package/dist/css/themes/Pagination.css +1 -1
- package/dist/css/themes/RatingIndicator.css +1 -1
- package/dist/css/themes/Slider.css +1 -1
- package/dist/css/themes/TextField.css +1 -1
- package/dist/custom-elements-internal.json +823 -99
- package/dist/custom-elements.json +783 -83
- package/dist/data/CountryListISO3166.d.ts +13 -4
- package/dist/data/CountryListISO3166.js +8 -0
- package/dist/data/CountryListISO3166.js.map +1 -1
- package/dist/generated/assets/i18n/messagebundle_en.json +1 -1
- package/dist/generated/i18n/i18n-defaults.d.ts +3 -1
- package/dist/generated/i18n/i18n-defaults.js +3 -1
- package/dist/generated/i18n/i18n-defaults.js.map +1 -1
- package/dist/generated/templates/AccordionTemplate.lit.js +4 -2
- package/dist/generated/templates/AccordionTemplate.lit.js.map +1 -1
- package/dist/generated/templates/MastheadItemTemplate.lit.js +25 -22
- package/dist/generated/templates/MastheadItemTemplate.lit.js.map +1 -1
- package/dist/generated/templates/PaginationTemplate.lit.js +1 -1
- package/dist/generated/templates/PaginationTemplate.lit.js.map +1 -1
- package/dist/generated/templates/PhoneNumberFieldTemplate.lit.js +2 -2
- package/dist/generated/templates/PhoneNumberFieldTemplate.lit.js.map +1 -1
- package/dist/generated/themes/Accordion.css.d.ts +1 -1
- package/dist/generated/themes/Accordion.css.js +1 -1
- package/dist/generated/themes/Accordion.css.js.map +1 -1
- package/dist/generated/themes/Button.css.d.ts +1 -1
- package/dist/generated/themes/Button.css.js +1 -1
- package/dist/generated/themes/Button.css.js.map +1 -1
- package/dist/generated/themes/Contact.css.d.ts +2 -0
- package/dist/generated/themes/Contact.css.js +8 -0
- package/dist/generated/themes/Contact.css.js.map +1 -0
- package/dist/generated/themes/ContactItem.css.d.ts +2 -0
- package/dist/generated/themes/ContactItem.css.js +8 -0
- package/dist/generated/themes/ContactItem.css.js.map +1 -0
- package/dist/generated/themes/DatePickerPopover.css.d.ts +1 -1
- package/dist/generated/themes/DatePickerPopover.css.js +1 -1
- package/dist/generated/themes/DatePickerPopover.css.js.map +1 -1
- package/dist/generated/themes/EventRibbon.css.d.ts +2 -0
- package/dist/generated/themes/EventRibbon.css.js +8 -0
- package/dist/generated/themes/EventRibbon.css.js.map +1 -0
- package/dist/generated/themes/MastheadCountrySelector.css.d.ts +1 -1
- package/dist/generated/themes/MastheadCountrySelector.css.js +1 -1
- package/dist/generated/themes/MastheadCountrySelector.css.js.map +1 -1
- package/dist/generated/themes/MastheadItem.css.d.ts +1 -1
- package/dist/generated/themes/MastheadItem.css.js +1 -1
- package/dist/generated/themes/MastheadItem.css.js.map +1 -1
- package/dist/generated/themes/MastheadShell.css.d.ts +1 -1
- package/dist/generated/themes/MastheadShell.css.js +1 -1
- package/dist/generated/themes/MastheadShell.css.js.map +1 -1
- package/dist/generated/themes/Modal.css.d.ts +1 -1
- package/dist/generated/themes/Modal.css.js +1 -1
- package/dist/generated/themes/Modal.css.js.map +1 -1
- package/dist/generated/themes/Pagination.css.d.ts +1 -1
- package/dist/generated/themes/Pagination.css.js +1 -1
- package/dist/generated/themes/Pagination.css.js.map +1 -1
- package/dist/generated/themes/RatingIndicator.css.d.ts +1 -1
- package/dist/generated/themes/RatingIndicator.css.js +1 -1
- package/dist/generated/themes/RatingIndicator.css.js.map +1 -1
- package/dist/generated/themes/Slider.css.d.ts +1 -1
- package/dist/generated/themes/Slider.css.js +1 -1
- package/dist/generated/themes/Slider.css.js.map +1 -1
- package/dist/generated/themes/TextField.css.d.ts +1 -1
- package/dist/generated/themes/TextField.css.js +1 -1
- package/dist/generated/themes/TextField.css.js.map +1 -1
- package/dist/messagebundle.properties +5 -0
- package/dist/messagebundle_en.properties +3 -0
- package/dist/types/ContactItemIcon.d.ts +6 -0
- package/dist/types/ContactItemIcon.js +8 -0
- package/dist/types/ContactItemIcon.js.map +1 -0
- package/dist/types/EventRibbon.d.ts +37 -0
- package/dist/types/EventRibbon.js +43 -0
- package/dist/types/EventRibbon.js.map +1 -0
- package/dist/utils/parseArrayFromString.d.ts +2 -0
- package/dist/utils/parseArrayFromString.js +5 -0
- package/dist/utils/parseArrayFromString.js.map +1 -0
- package/dist/vscode.html-custom-data.json +183 -1
- package/dist/web-types.json +321 -2
- package/filter-coverage.js +58 -0
- package/package.json +8 -3
- package/src/Accordion.hbs +13 -9
- package/src/Accordion.ts +7 -4
- package/src/Assets.ts +29 -0
- package/src/AssetsVariables.ts +4 -0
- package/src/Button.ts +9 -0
- package/src/Contact.ts +200 -0
- package/src/ContactItem.ts +119 -0
- package/src/ContactItemTemplate.tsx +22 -0
- package/src/ContactTemplate.tsx +105 -0
- package/src/CountrySelector.ts +5 -8
- package/src/DatePicker.ts +2 -1
- package/src/EventRibbon.ts +143 -0
- package/src/EventRibbonTemplate.tsx +18 -0
- package/src/Footer.ts +7 -10
- package/src/List.ts +1 -1
- package/src/MastheadItem.hbs +8 -0
- package/src/MastheadItem.ts +8 -16
- package/src/MastheadMenu.ts +2 -5
- package/src/MastheadProfileMenu.ts +2 -5
- package/src/MastheadShell.ts +25 -5
- package/src/Pagination.hbs +7 -3
- package/src/Pagination.ts +48 -31
- package/src/PhoneNumberField.hbs +1 -1
- package/src/PhoneNumberField.ts +7 -2
- package/src/SearchableListBase.ts +24 -3
- package/src/SecondaryNavigation.ts +3 -5
- package/src/TextField.ts +9 -0
- package/src/Wizard.ts +39 -11
- package/src/WizardTemplate.tsx +5 -1
- package/src/data/CountryListISO3166.ts +10 -2
- package/src/generated/i18n/i18n-defaults.ts +2 -2
- package/src/generated/templates/AccordionTemplate.lit.ts +4 -2
- package/src/generated/templates/MastheadItemTemplate.lit.ts +25 -22
- package/src/generated/templates/PaginationTemplate.lit.ts +1 -1
- package/src/generated/templates/PhoneNumberFieldTemplate.lit.ts +1 -1
- package/src/generated/themes/Accordion.css.ts +1 -1
- package/src/generated/themes/Button.css.ts +1 -1
- package/src/generated/themes/Contact.css.ts +9 -0
- package/src/generated/themes/ContactItem.css.ts +9 -0
- package/src/generated/themes/DatePickerPopover.css.ts +1 -1
- package/src/generated/themes/EventRibbon.css.ts +9 -0
- package/src/generated/themes/MastheadCountrySelector.css.ts +1 -1
- package/src/generated/themes/MastheadItem.css.ts +1 -1
- package/src/generated/themes/MastheadShell.css.ts +1 -1
- package/src/generated/themes/Modal.css.ts +1 -1
- package/src/generated/themes/Pagination.css.ts +1 -1
- package/src/generated/themes/RatingIndicator.css.ts +1 -1
- package/src/generated/themes/Slider.css.ts +1 -1
- package/src/generated/themes/TextField.css.ts +1 -1
- package/src/i18n/messagebundle.properties +5 -0
- package/src/i18n/messagebundle_en.properties +3 -0
- package/src/themes/Accordion.css +1 -0
- package/src/themes/Button.css +74 -26
- package/src/themes/Contact.css +184 -0
- package/src/themes/ContactItem.css +44 -0
- package/src/themes/DatePickerPopover.css +64 -6
- package/src/themes/EventRibbon.css +411 -0
- package/src/themes/MastheadCountrySelector.css +8 -5
- package/src/themes/MastheadItem.css +12 -4
- package/src/themes/MastheadShell.css +3 -1
- package/src/themes/Modal.css +8 -4
- package/src/themes/Pagination.css +19 -0
- package/src/themes/TextField.css +2 -13
- package/src/types/ContactItemIcon.ts +7 -0
- package/src/types/EventRibbon.ts +51 -0
- package/src/utils/parseArrayFromString.ts +5 -0
- package/swap-component-imports.js +18 -0
- package/dist/assets/messagebundle_en-CVKgy_9L.js +0 -1
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { registerThemePropertiesLoader } from "@ui5/webcomponents-base/dist/asset-registries/Themes.js";
|
|
2
|
+
|
|
3
|
+
import defaultThemeBase from "@ui5/webcomponents-theming/dist/generated/themes/sap_horizon/parameters-bundle.css.js";
|
|
4
|
+
import defaultTheme from "./sap_horizon/parameters-bundle.css.js";
|
|
5
|
+
|
|
6
|
+
registerThemePropertiesLoader("@ui5/webcomponents-theming", "sap_horizon", async () => defaultThemeBase);
|
|
7
|
+
registerThemePropertiesLoader("@sapudex/web-components", "sap_horizon", async () => defaultTheme);
|
|
8
|
+
export default `:host{--udex-event-ribbon-dark-text-color: var(--udexColorNeutralWhite);--udex-event-ribbon-light-text-color: var(--udexColorNeutralBlack);--udex-event-ribbon-light-grey1-default-background-color: var(--udexColorGrey1);--udex-event-ribbon-light-grey1-hover-background-color: var(--udexColorGrey2);--udex-event-ribbon-light-grey2-default-background-color: var(--udexColorGrey2);--udex-event-ribbon-light-grey2-hover-background-color: var(--udexColorGrey3);--udex-event-ribbon-light-grey3-default-background-color: var(--udexColorGrey3);--udex-event-ribbon-light-grey3-hover-background-color: var(--udexColorGrey4);--udex-event-ribbon-light-grey4-default-background-color: var(--udexColorGrey4);--udex-event-ribbon-light-grey4-hover-background-color: var(--udexColorGrey5);--udex-event-ribbon-light-blue1-default-background-color: var(--udexColorBlue1);--udex-event-ribbon-light-blue1-hover-background-color: var(--udexColorBlue2);--udex-event-ribbon-light-blue2-default-background-color: var(--udexColorBlue2);--udex-event-ribbon-light-blue2-hover-background-color: var(--udexColorBlue3);--udex-event-ribbon-light-blue3-default-background-color: var(--udexColorBlue3);--udex-event-ribbon-light-blue3-hover-background-color: var(--udexColorBlue4);--udex-event-ribbon-light-blue4-default-background-color: var(--udexColorBlue4);--udex-event-ribbon-light-blue4-hover-background-color: var(--udexColorBlue5);--udex-event-ribbon-light-teal1-default-background-color: var(--udexColorTeal1);--udex-event-ribbon-light-teal1-hover-background-color: var(--udexColorTeal2);--udex-event-ribbon-light-teal2-default-background-color: var(--udexColorTeal2);--udex-event-ribbon-light-teal2-hover-background-color: var(--udexColorTeal3);--udex-event-ribbon-light-teal3-default-background-color: var(--udexColorTeal3);--udex-event-ribbon-light-teal3-hover-background-color: var(--udexColorTeal4);--udex-event-ribbon-light-teal4-default-background-color: var(--udexColorTeal4);--udex-event-ribbon-light-teal4-hover-background-color: var(--udexColorTeal5);--udex-event-ribbon-light-green1-default-background-color: var(--udexColorGreen1);--udex-event-ribbon-light-green1-hover-background-color: var(--udexColorGreen2);--udex-event-ribbon-light-green2-default-background-color: var(--udexColorGreen2);--udex-event-ribbon-light-green2-hover-background-color: var(--udexColorGreen3);--udex-event-ribbon-light-green3-default-background-color: var(--udexColorGreen3);--udex-event-ribbon-light-green3-hover-background-color: var(--udexColorGreen4);--udex-event-ribbon-light-green4-default-background-color: var(--udexColorGreen4);--udex-event-ribbon-light-green4-hover-background-color: var(--udexColorGreen5);--udex-event-ribbon-light-mango1-default-background-color: var(--udexColorMango1);--udex-event-ribbon-light-mango1-hover-background-color: var(--udexColorMango2);--udex-event-ribbon-light-mango2-default-background-color: var(--udexColorMango2);--udex-event-ribbon-light-mango2-hover-background-color: var(--udexColorMango3);--udex-event-ribbon-light-mango3-default-background-color: var(--udexColorMango3);--udex-event-ribbon-light-mango3-hover-background-color: var(--udexColorMango4);--udex-event-ribbon-light-mango4-default-background-color: var(--udexColorMango4);--udex-event-ribbon-light-mango4-hover-background-color: var(--udexColorMango5);--udex-event-ribbon-light-red1-default-background-color: var(--udexColorRed1);--udex-event-ribbon-light-red1-hover-background-color: var(--udexColorRed2);--udex-event-ribbon-light-red2-default-background-color: var(--udexColorRed2);--udex-event-ribbon-light-red2-hover-background-color: var(--udexColorRed3);--udex-event-ribbon-light-red3-default-background-color: var(--udexColorRed3);--udex-event-ribbon-light-red3-hover-background-color: var(--udexColorRed4);--udex-event-ribbon-light-red4-default-background-color: var(--udexColorRed4);--udex-event-ribbon-light-red4-hover-background-color: var(--udexColorRed5);--udex-event-ribbon-light-raspberry1-default-background-color: var(--udexColorRaspberry1);--udex-event-ribbon-light-raspberry1-hover-background-color: var(--udexColorRaspberry2);--udex-event-ribbon-light-raspberry2-default-background-color: var(--udexColorRaspberry2);--udex-event-ribbon-light-raspberry2-hover-background-color: var(--udexColorRaspberry3);--udex-event-ribbon-light-raspberry3-default-background-color: var(--udexColorRaspberry3);--udex-event-ribbon-light-raspberry3-hover-background-color: var(--udexColorRaspberry4);--udex-event-ribbon-light-raspberry4-default-background-color: var(--udexColorRaspberry4);--udex-event-ribbon-light-raspberry4-hover-background-color: var(--udexColorRaspberry5);--udex-event-ribbon-light-pink1-default-background-color: var(--udexColorPink1);--udex-event-ribbon-light-pink1-hover-background-color: var(--udexColorPink2);--udex-event-ribbon-light-pink2-default-background-color: var(--udexColorPink2);--udex-event-ribbon-light-pink2-hover-background-color: var(--udexColorPink3);--udex-event-ribbon-light-pink3-default-background-color: var(--udexColorPink3);--udex-event-ribbon-light-pink3-hover-background-color: var(--udexColorPink4);--udex-event-ribbon-light-pink4-default-background-color: var(--udexColorPink4);--udex-event-ribbon-light-pink4-hover-background-color: var(--udexColorPink5);--udex-event-ribbon-light-indigo1-default-background-color: var(--udexColorIndigo1);--udex-event-ribbon-light-indigo1-hover-background-color: var(--udexColorIndigo2);--udex-event-ribbon-light-indigo2-default-background-color: var(--udexColorIndigo2);--udex-event-ribbon-light-indigo2-hover-background-color: var(--udexColorIndigo3);--udex-event-ribbon-light-indigo3-default-background-color: var(--udexColorIndigo3);--udex-event-ribbon-light-indigo3-hover-background-color: var(--udexColorIndigo4);--udex-event-ribbon-light-indigo4-default-background-color: var(--udexColorIndigo4);--udex-event-ribbon-light-indigo4-hover-background-color: var(--udexColorIndigo5);--udex-event-ribbon-dark-grey1-default-background-color: var(--udexColorGrey7);--udex-event-ribbon-dark-grey1-hover-background-color: var(--udexColorGrey8);--udex-event-ribbon-dark-grey2-default-background-color: var(--udexColorGrey8);--udex-event-ribbon-dark-grey2-hover-background-color: var(--udexColorGrey9);--udex-event-ribbon-dark-grey3-default-background-color: var(--udexColorGrey9);--udex-event-ribbon-dark-grey3-hover-background-color: var(--udexColorGrey10);--udex-event-ribbon-dark-grey4-default-background-color: var(--udexColorGrey10);--udex-event-ribbon-dark-grey4-hover-background-color: var(--udexColorGrey11);--udex-event-ribbon-dark-blue1-default-background-color: var(--udexColorBlue7);--udex-event-ribbon-dark-blue1-hover-background-color: var(--udexColorBlue8);--udex-event-ribbon-dark-blue2-default-background-color: var(--udexColorBlue8);--udex-event-ribbon-dark-blue2-hover-background-color: var(--udexColorBlue9);--udex-event-ribbon-dark-blue3-default-background-color: var(--udexColorBlue9);--udex-event-ribbon-dark-blue3-hover-background-color: var(--udexColorBlue10);--udex-event-ribbon-dark-blue4-default-background-color: var(--udexColorBlue10);--udex-event-ribbon-dark-blue4-hover-background-color: var(--udexColorBlue11);--udex-event-ribbon-dark-teal1-default-background-color: var(--udexColorTeal7);--udex-event-ribbon-dark-teal1-hover-background-color: var(--udexColorTeal8);--udex-event-ribbon-dark-teal2-default-background-color: var(--udexColorTeal8);--udex-event-ribbon-dark-teal2-hover-background-color: var(--udexColorTeal9);--udex-event-ribbon-dark-teal3-default-background-color: var(--udexColorTeal9);--udex-event-ribbon-dark-teal3-hover-background-color: var(--udexColorTeal10);--udex-event-ribbon-dark-teal4-default-background-color: var(--udexColorTeal10);--udex-event-ribbon-dark-teal4-hover-background-color: var(--udexColorTeal11);--udex-event-ribbon-dark-green1-default-background-color: var(--udexColorGreen7);--udex-event-ribbon-dark-green1-hover-background-color: var(--udexColorGreen8);--udex-event-ribbon-dark-green2-default-background-color: var(--udexColorGreen8);--udex-event-ribbon-dark-green2-hover-background-color: var(--udexColorGreen9);--udex-event-ribbon-dark-green3-default-background-color: var(--udexColorGreen9);--udex-event-ribbon-dark-green3-hover-background-color: var(--udexColorGreen10);--udex-event-ribbon-dark-green4-default-background-color: var(--udexColorGreen10);--udex-event-ribbon-dark-green4-hover-background-color: var(--udexColorGreen11);--udex-event-ribbon-dark-mango1-default-background-color: var(--udexColorMango7);--udex-event-ribbon-dark-mango1-hover-background-color: var(--udexColorMango8);--udex-event-ribbon-dark-mango2-default-background-color: var(--udexColorMango8);--udex-event-ribbon-dark-mango2-hover-background-color: var(--udexColorMango9);--udex-event-ribbon-dark-mango3-default-background-color: var(--udexColorMango9);--udex-event-ribbon-dark-mango3-hover-background-color: var(--udexColorMango10);--udex-event-ribbon-dark-mango4-default-background-color: var(--udexColorMango10);--udex-event-ribbon-dark-mango4-hover-background-color: var(--udexColorMango11);--udex-event-ribbon-dark-red1-default-background-color: var(--udexColorRed7);--udex-event-ribbon-dark-red1-hover-background-color: var(--udexColorRed8);--udex-event-ribbon-dark-red2-default-background-color: var(--udexColorRed8);--udex-event-ribbon-dark-red2-hover-background-color: var(--udexColorRed9);--udex-event-ribbon-dark-red3-default-background-color: var(--udexColorRed9);--udex-event-ribbon-dark-red3-hover-background-color: var(--udexColorRed10);--udex-event-ribbon-dark-red4-default-background-color: var(--udexColorRed10);--udex-event-ribbon-dark-red4-hover-background-color: var(--udexColorRed11);--udex-event-ribbon-dark-raspberry1-default-background-color: var(--udexColorRaspberry7);--udex-event-ribbon-dark-raspberry1-hover-background-color: var(--udexColorRaspberry8);--udex-event-ribbon-dark-raspberry2-default-background-color: var(--udexColorRaspberry8);--udex-event-ribbon-dark-raspberry2-hover-background-color: var(--udexColorRaspberry9);--udex-event-ribbon-dark-raspberry3-default-background-color: var(--udexColorRaspberry9);--udex-event-ribbon-dark-raspberry3-hover-background-color: var(--udexColorRaspberry10);--udex-event-ribbon-dark-raspberry4-default-background-color: var(--udexColorRaspberry10);--udex-event-ribbon-dark-raspberry4-hover-background-color: var(--udexColorRaspberry11);--udex-event-ribbon-dark-pink1-default-background-color: var(--udexColorPink7);--udex-event-ribbon-dark-pink1-hover-background-color: var(--udexColorPink8);--udex-event-ribbon-dark-pink2-default-background-color: var(--udexColorPink8);--udex-event-ribbon-dark-pink2-hover-background-color: var(--udexColorPink9);--udex-event-ribbon-dark-pink3-default-background-color: var(--udexColorPink9);--udex-event-ribbon-dark-pink3-hover-background-color: var(--udexColorPink10);--udex-event-ribbon-dark-pink4-default-background-color: var(--udexColorPink10);--udex-event-ribbon-dark-pink4-hover-background-color: var(--udexColorPink11);--udex-event-ribbon-dark-indigo1-default-background-color: var(--udexColorIndigo7);--udex-event-ribbon-dark-indigo1-hover-background-color: var(--udexColorIndigo8);--udex-event-ribbon-dark-indigo2-default-background-color: var(--udexColorIndigo8);--udex-event-ribbon-dark-indigo2-hover-background-color: var(--udexColorIndigo9);--udex-event-ribbon-dark-indigo3-default-background-color: var(--udexColorIndigo9);--udex-event-ribbon-dark-indigo3-hover-background-color: var(--udexColorIndigo10);--udex-event-ribbon-dark-indigo4-default-background-color: var(--udexColorIndigo10);--udex-event-ribbon-dark-indigo4-hover-background-color: var(--udexColorIndigo11);--udex-event-ribbon-background-color: transparent;--udex-event-ribbon-hover-background-color: transparent;--udex-event-ribbon-margin-xl: 84px;--udex-event-ribbon-margin-m-l: 72px;--udex-event-ribbon-margin-s: 48px;--udex-event-ribbon-margin-xs: 24px;--udex-event-ribbon-logo-width: auto;--udex-event-ribbon-logo-height: auto;--udex-event-ribbon-column-width: calc((100vw - (2 * var(--udex-event-ribbon-margin-xl)) - (11 * var(--udexGridXLGutters))) / 12)}.udex-event-ribbon__container{box-sizing:border-box;position:relative;overflow:hidden;text-decoration:none;background-color:var(--udex-event-ribbon-background-color);color:var(--udex-event-ribbon-light-text-color);height:70px;font-family:var(--sapFontFamily, sans-serif);border-radius:var(--udexSpacer12, 12px);padding-block:var(--udexSpacer12, 12px);padding-inline:var(--udexSpacer36, 36px);margin-block:var(--udexSpacer56, 56px) 84px;margin-inline:auto;max-width:calc(100vw - 2 * var(--udex-event-ribbon-margin-xl));display:flex;align-items:center;gap:var(--udexSpacer32, 32px)}.udex-event-ribbon__container-with-background-image{background-image:var(--udex-event-ribbon-background-image);background-blend-mode:multiply;background-position:center;background-size:100%;background-repeat:no-repeat;transition:background ease-out .3s}.udex-event-ribbon__container:focus,.udex-event-ribbon__container:focus-visible{outline:solid var(--udexSpacer2, 2px) var(--udexColorBlue9, #0040B0);outline-offset:2px}.udex-event-ribbon__container:hover{background-color:var(--udex-event-ribbon-hover-background-color)}.udex-event-ribbon__container-with-background-image:hover{background-size:112%}:host([mode="dark"]) .udex-event-ribbon__container{color:var(--udex-event-ribbon-dark-text-color)}.udex-event-ribbon__logo{position:relative;display:flex;justify-content:flex-end;width:calc((var(--udex-event-ribbon-column-width) * 3 + 3 * var(--udexGridXLGutters)) - 36px)}.udex-event-ribbon__logo img{max-height:42px;height:var(--udex-event-ribbon-logo-height);width:var(--udex-event-ribbon-logo-width);max-width:100%}:host([mode="dark"]) .udex-event-ribbon__logo img{filter:brightness(0) invert(1)}.udex-event-ribbon__text{position:inherit;margin:0;padding:0;font-size:var(--udexTypographyBodyXSFontSize);line-height:1.5;width:calc(6 * var(--udex-event-ribbon-column-width) + 5 * var(--udexGridXLGutters));max-height:100%;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;text-overflow:ellipsis}.udex-event-ribbon__link-container{position:inherit;display:flex;align-items:center;gap:var(--udexSpacer8, 8px)}.udex-event-ribbon__link-container span{line-height:1.5;font-size:var(--udexTypographyBodyXSFontSize)}[ui5-icon]{width:20px;height:20px;flex-shrink:0;color:inherit}@media (max-width: 1599px){:host{--udex-event-ribbon-column-width: calc((100vw - (2 * var(--udex-event-ribbon-margin-m-l)) - (11 * var(--udexGridXLGutters))) / 12)}.udex-event-ribbon__container{max-width:calc(100vw - 2 * var(--udex-event-ribbon-margin-m-l))}}@media (max-width: 1279px){.udex-event-ribbon__container{margin-block:var(--udexSpacer40, 40px) 64px;gap:var(--udexSpacer24, 24px);padding-inline:var(--udexSpacer24, 24px)}.udex-event-ribbon__logo{width:calc((var(--udex-event-ribbon-column-width) * 3 + 3 * var(--udexGridXLGutters)) - 24px)}}@media (max-width: 979px){:host{--udex-event-ribbon-column-width: calc((100vw - (2 * var(--udex-event-ribbon-margin-s)) - (11 * var(--udexGridSGutters))) / 12)}.udex-event-ribbon__container{flex-direction:column;height:fit-content;padding-block:var(--udexSpacer16, 16px);gap:var(--udexSpacer8, 8px);align-items:flex-start;margin-block:var(--udexSpacer40, 40px) 64px;max-width:calc(100vw - 2 * var(--udex-event-ribbon-margin-s))}.udex-event-ribbon__text{width:100%}.udex-event-ribbon__logo{justify-content:flex-start;width:100%}}@media (max-width: 639px){:host{--udex-event-ribbon-column-width: calc((100vw - (2 * var(--udex-event-ribbon-margin-xs)) - (11 * var(--udexGridXSGutters))) / 12)}.udex-event-ribbon__container{padding-inline:var(--udexSpacer16, 16px);margin-block:var(--udexSpacer32, 32px) var(--udexSpacer56, 56px);max-width:calc(100vw - 2 * var(--udex-event-ribbon-margin-xs))}}
|
|
9
|
+
`
|
|
@@ -5,5 +5,5 @@ import defaultTheme from "./sap_horizon/parameters-bundle.css.js";
|
|
|
5
5
|
|
|
6
6
|
registerThemePropertiesLoader("@ui5/webcomponents-theming", "sap_horizon", async () => defaultThemeBase);
|
|
7
7
|
registerThemePropertiesLoader("@sapudex/web-components", "sap_horizon", async () => defaultTheme);
|
|
8
|
-
export default `:host{--udex-masthead-country-selector-background: var(--udexColorNeutralWhite, #fff);--udex-masthead-country-selector-padding-xl: var(--udexSpacer32) 52px 52px;--udex-masthead-country-selector-padding-l: var(--udexSpacer24);--udex-masthead-country-selector-padding-m: var(--udexSpacer24) var(--udexSpacer48);--udex-masthead-country-selector-padding-xs: var(--udexSpacer24);--udex-masthead-country-selector-desktop-max-height: 375px}:host([_is-mobile-mode]) .udex-masthead-country-
|
|
8
|
+
export default `:host{--udex-masthead-country-selector-background: var(--udexColorNeutralWhite, #fff);--udex-masthead-country-selector-padding-xl: var(--udexSpacer32) 52px 52px;--udex-masthead-country-selector-padding-l: var(--udexSpacer24);--udex-masthead-country-selector-padding-m: var(--udexSpacer24) var(--udexSpacer48);--udex-masthead-country-selector-padding-xs: var(--udexSpacer24);--udex-masthead-country-selector-desktop-max-height: 375px}:host([_is-mobile-mode]) .udex-masthead-country-selector__item_countries{--udex-masthead-menu-item-padding-desktop: var(--udexSpacer16) var(--udexSpacer12) var(--udexSpacer16) var(--udexSpacer8);border-bottom:1px solid var(--udex-masthead-menu-item-border-color);max-height:initial;overflow:initial}:host([_is-mobile-mode]) .udex-masthead-country-selector{padding:var(--udex-masthead-country-selector-padding-l);min-height:100%;box-sizing:border-box}.udex-masthead-country-selector{padding:var(--udex-masthead-country-selector-padding-xl);background:var(--udex-masthead-country-selector-background)}.udex-masthead-country-selector__title{font-family:var(--sapFontFamily);font-weight:var(--udexTypographyFontWeightMedium);font-size:var(--udexTypographyBodyXSFontSize);line-height:var(--udexTypographyHeadingLineHeight);color:var(--sapTitleColor);padding:var(--udexSpacer16) 0;display:block;text-align:center}.udex-masthead-country-selector__list{list-style:none;margin:0;padding:0}.udex-masthead-country-selector__search{margin:var(--udexSpacer2) 0 var(--udexSpacer16)}.udex-masthead-country-selector__region-back-item::part(menu-item-button){font-weight:var(--udexTypographyFontWeightMedium, 500);justify-content:space-between}.udex-masthead-country-selector__region-back-item::part(left){margin-inline-end:var(--udexSpacer4);margin-inline-start:0}.udex-masthead-country-selector__region-back-item::part(menu-item-button):after{content:""}.udex-masthead-country-selector__region-back-item,.udex-masthead-country-selector__item{--udex-masthead-menu-item-padding-desktop: var(--udexSpacer16) var(--udexSpacer12) var(--udexSpacer16) var(--udexSpacer8)}.udex-masthead-country-selector__item_countries{--udex-masthead-menu-item-padding-desktop: var(--udexSpacer8) var(--udexSpacer12) var(--udexSpacer8)}.udex-masthead-country-selector__item::part(menu-item-link){width:100%}.udex-masthead-country-selector__list_countries{max-height:var(--udex-masthead-country-selector-desktop-max-height);overflow:auto}:host([_is-mobile-mode]) .udex-masthead-country-selector__list_countries{max-height:initial}@media (max-width: 1279px){.udex-masthead-country-selector{padding:var(--udex-masthead-country-selector-padding-l);min-height:100%;box-sizing:border-box}.udex-masthead-country-selector__list_countries{max-height:initial;overflow:initial}.udex-masthead-country-selector__item_countries{--udex-masthead-menu-item-padding-desktop: var(--udexSpacer16) var(--udexSpacer12) var(--udexSpacer16) var(--udexSpacer8);border-bottom:1px solid var(--udex-masthead-menu-item-border-color)}}@media (max-width: 979px){.udex-masthead-country-selector{padding:var(--udex-masthead-country-selector-padding-m)}}@media (max-width: 639px){.udex-masthead-country-selector{padding:var(--udex-masthead-country-selector-padding-xs)}}
|
|
9
9
|
`
|
|
@@ -5,5 +5,5 @@ import defaultTheme from "./sap_horizon/parameters-bundle.css.js";
|
|
|
5
5
|
|
|
6
6
|
registerThemePropertiesLoader("@ui5/webcomponents-theming", "sap_horizon", async () => defaultThemeBase);
|
|
7
7
|
registerThemePropertiesLoader("@sapudex/web-components", "sap_horizon", async () => defaultTheme);
|
|
8
|
-
export default `:host{--udex-masthead-item-background: none;--udex-masthead-item-border: none;--udex-masthead-item-padding: 1.35rem;--udex-masthead-item-font-size: var(--udexTypographyNavigationRegularMFontSize, 14px);--udex-masthead-item-line-height: var(--udexTypographyEyebrowLineHeight, 1.1);--udex-masthead-item-color: var(--udexColorGrey9, #223548);--udex-masthead-item-font-family: var(--sapFontFamily);--udex-masthead-item-color-hover: var(--udexColorBlue8, #0057D2);--udex-masthead-item-color-active: var(--udexColorBlue9, #0040B0);--udex-masthead-item-border-color: var(--udexColorBlue8, #0057D2);--udex-masthead-item-border-radius: var(--udexRadiusXXS) var(--udexRadiusXXS) 0 0;--udex-masthead-item-border-width: .188rem;--udex-masthead-item-align-content: center;--udex-masthead-item-justify-content: center;--udex-masthead-item-display: inline-flex;--udex-masthead-item-icon-size: 1.125rem;--udex-masthead-item-icon-container-size: 2rem;--udex-masthead-item-outline-border-color: var(--udexColorBlue10, #002A86);--udex-masthead-item-dropdown-box-shadow: var(--sapContent_Shadow2, 0 10px 30px 0 #22364940);--udex-masthead-item-dropdown-position-left: -55px;--udex-masthead-item-dropdown-position-right: -55px;--udex-masthead-item-dropdown-mobile-min-width: 360px;--udex-masthead-item-dropdown-select-box-min-width: 397px;--udex-masthead-item-dropdown-position: absolute;--udex-masthead-item-dropdown-height:
|
|
8
|
+
export default `:host{--udex-masthead-item-background: none;--udex-masthead-item-border: none;--udex-masthead-item-padding: 1.35rem;--udex-masthead-item-font-size: var(--udexTypographyNavigationRegularMFontSize, 14px);--udex-masthead-item-line-height: var(--udexTypographyEyebrowLineHeight, 1.1);--udex-masthead-item-color: var(--udexColorGrey9, #223548);--udex-masthead-item-font-family: var(--sapFontFamily);--udex-masthead-item-color-hover: var(--udexColorBlue8, #0057D2);--udex-masthead-item-color-active: var(--udexColorBlue9, #0040B0);--udex-masthead-item-border-color: var(--udexColorBlue8, #0057D2);--udex-masthead-item-border-radius: var(--udexRadiusXXS) var(--udexRadiusXXS) 0 0;--udex-masthead-item-border-width: .188rem;--udex-masthead-item-align-content: center;--udex-masthead-item-justify-content: center;--udex-masthead-item-display: inline-flex;--udex-masthead-item-icon-size: 1.125rem;--udex-masthead-item-icon-container-size: 2rem;--udex-masthead-item-outline-border-color: var(--udexColorBlue10, #002A86);--udex-masthead-item-dropdown-box-shadow: var(--sapContent_Shadow2, 0 10px 30px 0 #22364940);--udex-masthead-item-dropdown-position-left: -55px;--udex-masthead-item-dropdown-position-right: -55px;--udex-masthead-item-dropdown-mobile-min-width: 360px;--udex-masthead-item-dropdown-select-box-min-width: 397px;--udex-masthead-item-dropdown-position: absolute;--udex-masthead-item-dropdown-mobile-height: var(--udex-masthead-shell-mobile-menu-height, 100%);--udex-masthead-item-dropdown-box-shadow-mobile: none;--udex-masthead-item-dropdown-zindex: 100;--udex-masthead-item-button-icon-size: 32px;display:var(--udex-masthead-item-display);align-items:var(--udex-masthead-item-align-content);justify-content:var(--udex-masthead-item-justify-content);position:relative;font-family:var(--udex-masthead-item-font-family);font-size:var(--udex-masthead-item-font-size);line-height:var(--udex-masthead-item-line-height)}.udex-masthead-item__dropdown{position:absolute;top:100%;left:var(--udex-masthead-item-dropdown-position-left);z-index:var(--udex-masthead-item-dropdown-zindex);box-shadow:var(--udex-masthead-item-dropdown-box-shadow)}.udex-masthead-item__button--support+.udex-masthead-item__dropdown,.udex-masthead-item__button--country-selector+.udex-masthead-item__dropdown,.udex-masthead-item__button--profile+.udex-masthead-item__dropdown{top:46px;left:auto;right:0}.udex-masthead-item__button--country-selector+.udex-masthead-item__dropdown,.udex-masthead-item__button--profile+.udex-masthead-item__dropdown{min-width:var(--udex-masthead-item-dropdown-mobile-min-width)}.udex-masthead-item__button--country-selector+.udex-masthead-item__dropdown{min-width:var(--udex-masthead-item-dropdown-select-box-min-width)}.udex-masthead-item__button--explore+.udex-masthead-item__dropdown{top:60px;inset-inline-start:0;box-sizing:border-box;inline-size:100%}:host([slot="exploreSAP"]){position:inherit}.udex-masthead-item__dropdown-holder{position:relative}.udex-masthead-item{font-size:inherit;line-height:inherit;font-family:inherit;color:var(--udex-masthead-item-color);background:var(--udex-masthead-item-background);border:var(--udex-masthead-item-border);padding:var(--udex-masthead-item-padding) 0;cursor:pointer;text-decoration:none;white-space:nowrap;position:relative}.udex-masthead-item__button--icon{display:flex;align-items:center;justify-content:center;width:var(--udex-masthead-item-button-icon-size);height:var(--udex-masthead-item-button-icon-size)}.udex-masthead-item.udex-masthead-item__button--profile,.udex-masthead-item.udex-masthead-item__button--icon{padding:0}.udex-masthead-item:focus{outline:none}.udex-masthead-item__text{display:flex;align-items:center}:host([desktop]) .udex-masthead-item:focus .udex-masthead-item__text,:host([desktop]) .udex-masthead-item:focus .udex-masthead-item__image,:host([desktop]) .udex-masthead-item:focus .udex-masthead-item__icon,.udex-masthead-item:focus-visible .udex-masthead-item__text,.udex-masthead-item:focus-visible .udex-masthead-item__icon{outline:var(--udexRadiusXXS) solid var(--udex-masthead-item-outline-border-color);outline-offset:2px;border-radius:var(--udexRadiusXXS)}:host([desktop]) .udex-masthead-item:focus .udex-masthead-item__image,:host([desktop]) .udex-masthead-item:focus .udex-masthead-item__icon,.udex-masthead-item:focus .udex-masthead-item__image,.udex-masthead-item:focus .udex-masthead-item__icon{outline-offset:6px}.udex-masthead-item__button--profile .udex-masthead-item__text{display:inline-block}.udex-masthead-item.udex-masthead-item__button--profile:focus .udex-masthead-item__text{border-radius:50%}.udex-masthead-item__dropdown-icon{margin-inline-start:var(--udexSpacer4)}:host(:hover) .udex-masthead-item,:host(:hover) .udex-masthead-item__image,:host(:hover) .udex-masthead-item__icon,:host(:hover) .udex-masthead-item__dropdown-icon{color:var(--udex-masthead-item-color-hover)}:host(:active) .udex-masthead-item,:host([selected]) .udex-masthead-item,:host(:active) .udex-masthead-item-icon,:host([selected]) .udex-masthead-item-icon,:host(:active) .udex-masthead-item__dropdown-icon,:host([selected]) .udex-masthead-item__dropdown-icon{color:var(--udex-masthead-item-color-active)}:host(:active) .udex-masthead-item__dropdown-icon,:host([selected]) .udex-masthead-item__dropdown-icon{transform:rotate(180deg)}:host(:active):not([hide-active-border]) .udex-masthead-item:after,:host([selected]:not([hide-active-border])) .udex-masthead-item:after{content:"";position:absolute;bottom:0;left:0;right:0;height:var(--udex-masthead-item-border-width);background-color:var(--udex-masthead-item-border-color);border-radius:var(--udex-masthead-item-border-radius)}:host(:active) .udex-masthead-item.udex-masthead-item__button--icon:after,:host([selected]) .udex-masthead-item.udex-masthead-item__button--icon:after,:host(:active) .udex-masthead-item.udex-masthead-item__button--profile:after,:host([selected]) .udex-masthead-item.udex-masthead-item__button--profile:after{bottom:-14px;left:0;right:0}:host([selected]) .udex-masthead-item__image,:host(:active) .udex-masthead-item__image,:host([selected]) .udex-masthead-item__icon,:host(:active) .udex-masthead-item__icon{color:var(--udex-masthead-item-color-active)}.udex-masthead-item__image,.udex-masthead-item__icon{width:var(--udex-masthead-item-icon-size);height:var(--udex-masthead-item-icon-size);color:var(--udex-masthead-item-color)}.udex-masthead-item__avatar-container{display:flex;align-items:center;justify-content:center;width:auto;height:auto}:host(:dir(rtl)) .udex-masthead-item__dropdown{right:var(--udex-masthead-item-dropdown-position-right);left:auto}:host(:dir(rtl)) .udex-masthead-item__button--support+.udex-masthead-item__dropdown,:host(:dir(rtl)) .udex-masthead-item__button--country-selector+.udex-masthead-item__dropdown,:host(:dir(rtl)) .udex-masthead-item__button--explore+.udex-masthead-item__dropdown,:host(:dir(rtl)) .udex-masthead-item__button--profile+.udex-masthead-item__dropdown{left:0;right:auto}:host([slot="exploreSAP"]) ::slotted([slot="dropdown"]){--udex-masthead-menu-padding-desktop: 32px var(--udexSpacer72);--udex-masthead-menu-column-width: auto;--udex-masthead-menu-grid-template-columns: repeat(4, calc(25% - var(--udex-masthead-menu-column_gap)*3/4))}:host([slot="countrySelector"]) ::slotted([slot="dropdown"]),:host([slot="profile"]) ::slotted([slot="dropdown"]){width:100%;display:flex;flex-direction:column}:host([slot="countrySelector"][_is-mobile-mode]) ::slotted([slot="dropdown"]),:host([slot="profile"][_is-mobile-mode]) ::slotted([slot="dropdown"]){display:initial}:host([_is-mobile-mode]) .udex-masthead-item__button--country-selector+.udex-masthead-item__dropdown,:host([part="menu-open-btn"]) .udex-masthead-item__button--country-selector+.udex-masthead-item__dropdown{min-width:var(--udex-masthead-item-dropdown-mobile-min-width)}:host([_is-mobile-mode]) .udex-masthead-item__dropdown,:host([part="menu-open-btn"]) .udex-masthead-item__dropdown{position:var(--udex-masthead-item-dropdown-position);height:var(--udex-masthead-item-dropdown-mobile-height);width:var(--udex-masthead-item-dropdown-mobile-min-width);top:60px;right:0;left:auto}:host([_is-mobile-mode]) .udex-masthead-item__dropdown-holder,:host([part="menu-open-btn"]) .udex-masthead-item__dropdown-holder{height:100%;box-shadow:none;overflow:auto}:host([_is-mobile-mode]) .udex-masthead-item__dropdown:after,:host([part="menu-open-btn"]) .udex-masthead-item__dropdown:after{box-shadow:var(--udex-masthead-shell-dropdown-shadow);pointer-events:none;content:"";position:absolute;inset:-60px 0 0}:host([_is-mobile-mode]),:host([part="menu-open-btn"]){position:initial}.udex-masthead-hidden-text{display:none}@media (max-width: 1279px){:host{position:initial}:host([slot="countrySelector"]) ::slotted([slot="dropdown"]),:host([slot="profile"]) ::slotted([slot="dropdown"]){display:initial}.udex-masthead-item__button--country-selector+.udex-masthead-item__dropdown{min-width:var(--udex-masthead-item-dropdown-mobile-min-width)}.udex-masthead-item__button--support+.udex-masthead-item__dropdown,.udex-masthead-item__button--country-selector+.udex-masthead-item__dropdown,.udex-masthead-item__button--profile+.udex-masthead-item__dropdown,.udex-masthead-item__dropdown{top:60px}:host(:dir(rtl)) .udex-masthead-item__dropdown{left:0;right:auto}.udex-masthead-item__dropdown{position:var(--udex-masthead-item-dropdown-position);height:var(--udex-masthead-item-dropdown-mobile-height);width:var(--udex-masthead-item-dropdown-mobile-min-width);box-shadow:var(--udex-masthead-item-dropdown-box-shadow-mobile);top:60px}.udex-masthead-item__dropdown-holder{height:100%;overflow:auto}.udex-masthead-item__dropdown:after{box-shadow:var(--udex-masthead-shell-dropdown-shadow);pointer-events:none;content:"";position:absolute;inset:-60px 0 0}}@media (max-width: 979px){:host([_is-mobile-mode]) .udex-masthead-item__dropdown,:host([part="menu-open-btn"]) .udex-masthead-item__dropdown,.udex-masthead-item__dropdown{width:100%}}
|
|
9
9
|
`
|
|
@@ -5,5 +5,5 @@ import defaultTheme from "./sap_horizon/parameters-bundle.css.js";
|
|
|
5
5
|
|
|
6
6
|
registerThemePropertiesLoader("@ui5/webcomponents-theming", "sap_horizon", async () => defaultThemeBase);
|
|
7
7
|
registerThemePropertiesLoader("@sapudex/web-components", "sap_horizon", async () => defaultTheme);
|
|
8
|
-
export default `:host{--udex-masthead-shell-background: var(--udexColorGrey1, #F5F6F7);--udex-masthead-shell-dropdown-shadow: var(--sapContent_Shadow2, 0 10px 30px 0 #22364940);--udex-masthead-shell-site-label-font-size: var(--udexTypographyNavigationRegularXLFontSize, 16px);--udex-masthead-shell-site-label-line-height: 24px;--udex-masthead-shell-site-label-font-weight: var(--udexTypographyFontWeightBold, 700);--udex-masthead-shell-site-label-text-decoration: none;--udex-masthead-shell-site-label-color: var(--udexColorGrey8, #354A5F);--udex-masthead-shell-site-label-color-hover: var(--udexColorBlue7, #0070F2);--udex-masthead-shell-item-gap: var(--udexSpacer24);--udex-masthead-shell-item-icon-gap: var(--udexSpacer8);--udex-grid-gutter: 3rem;--udex-grid-margin-m: 4.5rem;--udex-grid-margin-l: 4.5rem;--udex-grid-margin-xl: 5.25rem;--udex-column-width-l: calc((100% - 2 * var(--udex-grid-margin-l) - 11 * var(--udex-grid-gutter)) / 12);--udex-column-width-xl: calc((100% - 2 * var(--udex-grid-margin-xl) - 11 * var(--udex-grid-gutter)) / 12);--udex-masthead-shell-search-container-width-xl: calc(8 * var(--udex-column-width-xl) + 7 * var(--udex-grid-gutter));--udex-masthead-shell-close-button-divider-color: var(--udexCoreDividerLight, #D5DADD);--udex-masthead-shell-z-index: 10;--udex-masthead-shell-container-xl-max-width: 1432px;--udex-masthead-shell-container-l-max-width: 1456px;--udex-masthead-mobile-menu-buttons-width: 360px;--udex-masthead-right-menu-padding: var(--udexSpacer64);--udex-masthead-shell-explore-margin: var(--udexSpacer12)}:host{position:relative;display:block;width:100%;container-type:inline-size;background:var(--udex-masthead-shell-background);z-index:var(--udex-masthead-shell-z-index)}:host([sticky-position]){position:sticky;top:0}:host([show-search-by-default]) .udex-masthead-shell__right-menu,:host([show-search-by-default]) .udex-masthead-shell__main-content,:host([_is-search-opened]) .udex-masthead-shell__main-content{width:30%}:host([show-search-by-default]) .udex-masthead-shell__search-container,:host([_is-search-opened]) .udex-masthead-shell__search-container{width:40%}.udex-masthead-shell__search-container{background:var(--udex-masthead-shell-background)}.udex-masthead-shell__btn-holder{display:flex;justify-content:flex-end;width:30%}.udex-masthead-shell__close-search-btn{--udex-control-button-small-height: 32px;--udex-control-button-small-width: 32px;--udex-control-button-small-icon-size: 18px}.udex-masthead-shell{display:flex;justify-content:space-between;align-items:center;position:relative;padding:0 var(--udexSpacer84);max-width:var(--udex-masthead-shell-container-xl-max-width);margin:0 auto;height:
|
|
8
|
+
export default `:host{--udex-masthead-shell-height: 60px;--udex-masthead-shell-background: var(--udexColorGrey1, #F5F6F7);--udex-masthead-shell-dropdown-shadow: var(--sapContent_Shadow2, 0 10px 30px 0 #22364940);--udex-masthead-shell-site-label-font-size: var(--udexTypographyNavigationRegularXLFontSize, 16px);--udex-masthead-shell-site-label-line-height: 24px;--udex-masthead-shell-site-label-font-weight: var(--udexTypographyFontWeightBold, 700);--udex-masthead-shell-site-label-text-decoration: none;--udex-masthead-shell-site-label-color: var(--udexColorGrey8, #354A5F);--udex-masthead-shell-site-label-color-hover: var(--udexColorBlue7, #0070F2);--udex-masthead-shell-item-gap: var(--udexSpacer24);--udex-masthead-shell-item-icon-gap: var(--udexSpacer8);--udex-grid-gutter: 3rem;--udex-grid-margin-m: 4.5rem;--udex-grid-margin-l: 4.5rem;--udex-grid-margin-xl: 5.25rem;--udex-column-width-l: calc((100% - 2 * var(--udex-grid-margin-l) - 11 * var(--udex-grid-gutter)) / 12);--udex-column-width-xl: calc((100% - 2 * var(--udex-grid-margin-xl) - 11 * var(--udex-grid-gutter)) / 12);--udex-masthead-shell-search-container-width-xl: calc(8 * var(--udex-column-width-xl) + 7 * var(--udex-grid-gutter));--udex-masthead-shell-close-button-divider-color: var(--udexCoreDividerLight, #D5DADD);--udex-masthead-shell-z-index: 10;--udex-masthead-shell-container-xl-max-width: 1432px;--udex-masthead-shell-container-l-max-width: 1456px;--udex-masthead-mobile-menu-buttons-width: 360px;--udex-masthead-right-menu-padding: var(--udexSpacer64);--udex-masthead-shell-explore-margin: var(--udexSpacer12);--udex-masthead-shell-mobile-menu-height: 100%}:host{position:relative;display:block;width:100%;container-type:inline-size;background:var(--udex-masthead-shell-background);z-index:var(--udex-masthead-shell-z-index)}:host([sticky-position]){position:sticky;top:0}:host([show-search-by-default]) .udex-masthead-shell__right-menu,:host([show-search-by-default]) .udex-masthead-shell__main-content,:host([_is-search-opened]) .udex-masthead-shell__main-content{width:30%}:host([show-search-by-default]) .udex-masthead-shell__search-container,:host([_is-search-opened]) .udex-masthead-shell__search-container{width:40%}.udex-masthead-shell__search-container{background:var(--udex-masthead-shell-background)}.udex-masthead-shell__btn-holder{display:flex;justify-content:flex-end;width:30%}.udex-masthead-shell__close-search-btn{--udex-control-button-small-height: 32px;--udex-control-button-small-width: 32px;--udex-control-button-small-icon-size: 18px}.udex-masthead-shell{display:flex;justify-content:space-between;align-items:center;position:relative;padding:0 var(--udexSpacer84);max-width:var(--udex-masthead-shell-container-xl-max-width);margin:0 auto;height:var(--udex-masthead-shell-height)}.udex-masthead-shell__logo{margin-inline-end:var(--udexSpacer16);width:64px}.udex-masthead-shell__logo-image{width:100%}.udex-masthead-shell__logo--link{cursor:pointer;display:flex}.udex-masthead-shell__logo--link:focus,.udex-masthead-shell__logo--link:focus-visible,.udex-masthead-shell__site-label--link:focus,.udex-masthead-shell__site-label--link:focus-visible{outline:var(--udexRadiusXXS) solid var(--udexColorBlue10);outline-offset:var(--udexSpacer2);border-radius:var(--udexRadiusXXS)}.udex-masthead-shell__site-label{font-family:var(--sapFontFamily);font-size:var(--udex-masthead-shell-site-label-font-size);line-height:var(--udex-masthead-shell-site-label-line-height);color:var(--udex-masthead-shell-site-label-color);font-weight:var(--udex-masthead-shell-site-label-font-weight);text-decoration:var(--udex-masthead-shell-site-label-text-decoration);margin-inline-end:var(--udexSpacer24);white-space:nowrap}.udex-masthead-shell__site-label--link:hover{color:var(--udex-masthead-shell-site-label-color-hover)}.udex-masthead-shell__main-content{display:grid;grid:"logo siteLabel mainMenu " / auto auto 1fr;align-items:center;box-sizing:border-box}.udex-masthead-shell__main-menu{display:flex;align-items:center;gap:var(--udex-masthead-shell-item-gap);max-width:100%;margin:0;padding:0;list-style:none}.udex-masthead-shell__landing-wrap{display:flex;align-items:center}.udex-masthead-shell__right-menu{display:flex;align-items:center;justify-content:flex-end;gap:var(--udex-masthead-shell-item-icon-gap);padding-inline-start:var(--udex-masthead-right-menu-padding);box-sizing:border-box}.udex-masthead-shell__explore{white-space:nowrap;margin-inline-end:var(--udex-masthead-shell-explore-margin)}.udex-masthead-shell__item_icon{display:flex;align-items:center}.udex-masthead-shell__item{margin-inline-end:var(--udexSpacer4)}.udex-masthead-shell__menu-btn{height:18px;order:1}.udex-masthead-shell__close-btn{position:relative;margin-inline-start:var(--udexSpacer12);order:2}.udex-masthead-shell__close-btn:before{content:"";position:absolute;left:-12px;top:0;bottom:0;height:32px;border-radius:var(--udexRadiusXXS);width:1px;background:var(--udex-masthead-shell-close-button-divider-color)}:dir(rtl) .udex-masthead-shell__close-btn:before{left:auto;right:-12px}:dir(rtl) .udex-masthead-mobile-wrap{right:auto;left:0}.udex-masthead-shell__close-btn:hover{color:var(--udex-masthead-shell-site-label-color-hover)}:host([show-search-by-default]) .udex-masthead-shell__search-icon,:host([_is-search-opened]) .udex-masthead-shell__right-menu,:host([_is-mobile-mode]) .udex-masthead-shell__item_icon,:host([_is-mobile-mode]) .udex-masthead-shell__explore,:host([_is-mobile-mode]) .udex-masthead-shell__nav,.udex-masthead-shell__close-btn,.udex-masthead-shell__menu-btn{display:none}:host([_is-mobile-mode]) .udex-masthead-shell__menu-btn,:host([_is-mobile-menu-open]) .udex-masthead-shell__country-selector,:host([_is-mobile-menu-open]) .udex-masthead-shell__cart,:host([_is-mobile-menu-open]) .udex-masthead-shell__profile,:host([_is-mobile-mode][_is-mobile-menu-open]) .udex-masthead-shell__close-btn{display:flex}:host([_is-mobile-menu-open]) .udex-masthead-shell__right-menu{width:var(--udex-masthead-mobile-menu-buttons-width);background:var(--udex-masthead-shell-background);padding-inline-end:var(--udexSpacer84);padding-inline-start:var(--udexSpacer32);gap:var(--udexSpacer12);position:absolute;top:0;bottom:0;right:0;z-index:1}:host([_is-mobile-menu-open]) .udex-masthead-shell__right-menu:dir(rtl){right:auto;left:0}@media (max-width: 1599px){.udex-masthead-shell{padding-left:var(--udexSpacer72);padding-right:var(--udexSpacer72);max-width:var(--udex-masthead-shell-container-l-max-width)}.udex-masthead-shell__search-container{right:var(--udexSpacer72)}.udex-masthead-shell__search-container:dir(rtl){left:var(--udexSpacer72);right:auto}:host([_is-mobile-menu-open]) .udex-masthead-shell__right-menu{padding-inline-end:var(--udexSpacer72)}}@media (max-width: 1279px){:host([_is-mobile-menu-open][show-search-by-default]) .udex-masthead-shell__right-menu{width:var(--udex-masthead-mobile-menu-buttons-width)}:host([show-search-by-default]) .udex-masthead-shell__search-container,:host([show-search-by-default]) .udex-masthead-shell__main-content,:host([show-search-by-default]) .udex-masthead-shell__right-menu{width:auto}:host([show-search-by-default]) .udex-masthead-shell__search-container{flex:auto}:host([show-search-by-default]) .udex-masthead-shell__site-label{margin:0}:host([show-search-by-default]) .udex-masthead-shell__main-content{padding-inline-end:var(--udexSpacer32)}.udex-masthead-shell__item_icon,.udex-masthead-shell__explore,.udex-masthead-shell__nav{display:none}:host([_is-mobile-menu-open]) .udex-masthead-shell__close-btn,.udex-masthead-shell__menu-btn{display:flex}.udex-masthead-shell__right-menu{padding-inline-start:var(--udexSpacer32);gap:var(--udexSpacer12)}}@media (max-width: 979px){:host([_is-mobile-menu-open][show-search-by-default]) .udex-masthead-shell__right-menu{width:100%}:host([_is-search-opened][show-search-by-default]) .udex-masthead-shell__search-container,:host([show-search-by-default]) .udex-masthead-shell__search-icon{display:block}:host([_is-search-opened]) .udex-masthead-shell__right-menu,:host([show-search-by-default]) .udex-masthead-shell__search-container,:host([_is-mobile-menu-open][show-search-by-default]) .udex-masthead-shell__search-icon,:host([_is-mobile-menu-open]) .udex-masthead-shell__site-label,:host([_is-mobile-menu-open]) .udex-masthead-shell__logo{display:none}:host([_is-mobile-menu-open]) .udex-masthead-shell__right-menu{padding-inline-end:var(--udexSpacer48);width:auto;left:0}:host([_is-mobile-menu-open]) .udex-masthead-shell__right-menu:dir(rtl){right:0}.udex-masthead-shell{padding:0 var(--udexSpacer48)}.udex-masthead-shell__btn-holder{padding-inline-start:var(--udexSpacer32);width:auto}}@media (max-width: 639px){:host([_is-search-opened]) .udex-masthead-shell__main-content{display:none}:host([_is-mobile-menu-open]) .udex-masthead-shell__right-menu{padding-inline-end:var(--udexSpacer24)}.udex-masthead-shell{padding:0 var(--udexSpacer24)}.udex-masthead-shell__btn-holder{padding-inline-start:var(--udexSpacer8)}}
|
|
9
9
|
`
|
|
@@ -5,5 +5,5 @@ import defaultTheme from "./sap_horizon/parameters-bundle.css.js";
|
|
|
5
5
|
|
|
6
6
|
registerThemePropertiesLoader("@ui5/webcomponents-theming", "sap_horizon", async () => defaultThemeBase);
|
|
7
7
|
registerThemePropertiesLoader("@sapudex/web-components", "sap_horizon", async () => defaultTheme);
|
|
8
|
-
export default `:host{--udex-modal-and-overlay-modal-content-padding-horizontal: var(--udexGridSGutters, 32px);--udex-modal-and-overlay-modal-content-padding-vertical: var(--udexGridXSMargins, 24px);--udex-modal-and-overlay-modal-footer-padding-horizontal: var(--udexGridSGutters, 32px);--udex-modal-and-overlay-modal-footer-padding-vertical: var(--udexGridXSMargins, 24px);--udex-modal-and-overlay-modal-header-padding-horizontal: var(--udexGridSGutters, 32px);--udex-modal-and-overlay-modal-header-padding-vertical: var(--udexGridXSMargins, 24px);--udex-modal-border-radius: 0;--udex-modal-browser-scrollbar-border-radius: var(--udexRadiusM, 8px);--udex-modal-block-layer-background: color-mix(in oklch, transparent, var(--sapBlockLayer_Background) 60%)}:host .ui5-block-layer{background:var(--udex-modal-block-layer-background)}:host .ui5-popup-root .ui5-popup-footer-root{padding:var(--udex-modal-and-overlay-modal-footer-padding-vertical) var(--udex-modal-and-overlay-modal-footer-padding-horizontal)}:host .ui5-popup-root{border-radius:var(--udex-modal-border-radius)}:host .ui5-popup-root .ui5-popup-header-root{padding:var(--udex-modal-and-overlay-modal-header-padding-vertical) var(--udex-modal-and-overlay-modal-header-padding-horizontal)}:host .ui5-popup-root .ui5-popup-content{padding:var(--udex-modal-and-overlay-modal-content-padding-vertical) var(--udex-modal-and-overlay-modal-content-padding-horizontal);scrollbar-gutter:
|
|
8
|
+
export default `:host{--udex-modal-and-overlay-modal-content-padding-horizontal: var(--udexGridSGutters, 32px);--udex-modal-and-overlay-modal-content-padding-vertical: var(--udexGridXSMargins, 24px);--udex-modal-and-overlay-modal-footer-padding-horizontal: var(--udexGridSGutters, 32px);--udex-modal-and-overlay-modal-footer-padding-vertical: var(--udexGridXSMargins, 24px);--udex-modal-and-overlay-modal-header-padding-horizontal: var(--udexGridSGutters, 32px);--udex-modal-and-overlay-modal-header-padding-vertical: var(--udexGridXSMargins, 24px);--udex-modal-border-radius: 0;--udex-modal-browser-scrollbar-border-radius: var(--udexRadiusM, 8px);--udex-modal-block-layer-background: color-mix(in oklch, transparent, var(--sapBlockLayer_Background) 60%)}:host .ui5-block-layer{background:var(--udex-modal-block-layer-background)}:host .ui5-popup-root .ui5-popup-footer-root{padding:var(--udex-modal-and-overlay-modal-footer-padding-vertical) var(--udex-modal-and-overlay-modal-footer-padding-horizontal)}:host .ui5-popup-root{border-radius:var(--udex-modal-border-radius)}:host .ui5-popup-root .ui5-popup-header-root{padding:var(--udex-modal-and-overlay-modal-header-padding-vertical) var(--udex-modal-and-overlay-modal-header-padding-horizontal)}:host .ui5-popup-root .ui5-popup-content{padding:var(--udex-modal-and-overlay-modal-content-padding-vertical) calc(var(--udex-modal-and-overlay-modal-content-padding-horizontal) - var(--udexGridXSGutter, 16px)) var(--udex-modal-and-overlay-modal-content-padding-vertical) var(--udex-modal-and-overlay-modal-content-padding-horizontal);scrollbar-gutter:stable}:host([type="basic"]){--sapObjectHeader_BorderColor: transparent;--sapPageFooter_BorderColor: transparent}:host([type="basic"]) .ui5-popup-root .ui5-popup-content{padding:0 calc(var(--udex-modal-and-overlay-modal-content-padding-horizontal) - var(--udexGridXSGutter, 16px)) 0 var(--udex-modal-and-overlay-modal-content-padding-horizontal);scrollbar-gutter:stable}:host ::slotted([slot="header"][ui5-bar]){height:32px}:host ::slotted([slot="footer"]){height:auto}@media (max-width: 979px){:host(:not([type="basic"])){max-width:100%;max-height:100%}}
|
|
9
9
|
`
|
|
@@ -5,5 +5,5 @@ import defaultTheme from "./sap_horizon/parameters-bundle.css.js";
|
|
|
5
5
|
|
|
6
6
|
registerThemePropertiesLoader("@ui5/webcomponents-theming", "sap_horizon", async () => defaultThemeBase);
|
|
7
7
|
registerThemePropertiesLoader("@sapudex/web-components", "sap_horizon", async () => defaultTheme);
|
|
8
|
-
export default `:host{--udex-pagination-font-size: var(--sapFontSize, 16px);--udex-pagination-font-family: var(--sapFontFamily, sans-serif);--udex-pagination-item-paddings: var(--sapFontSmallSize, .75rem);--udex-pagination-item-inner-paddings: 0rem .25rem;--udex-pagination-mobile-item-paddings: .5625rem .875rem .6875rem .875rem;--udex-pagination-item-line-height: var(--sapContent_LineHeight, 1.5rem);--udex-pagination-item-text-color: var(--sapPrimary5, #5b738b);--udex-pagination-item-active-text-color: var(--sapShell_Navigation_TextColor, var(--udexColorGrey9, #223548));--udex-pagination-item-active-background-color: var(--udexColorGrey1);--udex-pagination-item-active-border-color: var(--udexColorBlue8);--udex-pagination-item-active-border-width: var(--sapField_InformationBorderWidth, .125rem);--udex-pagination-item-gap: .25rem;--udex-pagination-mobile-item-gap: .5rem;--udex-pagination-short-item-gap: 24px;--udex-pagination-short-separator-paddings: 0 4px;--udex-pagination-short-separator-margin: 0 4px;--udex-pagination-short-item-paddings: 0 4px}.udex-pagination{font-family:var(--udex-pagination-font-family);font-size:var(--udex-pagination-font-size)}.udex-pagination__list{padding:0;margin:0;display:flex;gap:var(--udex-pagination-item-gap);align-items:center;flex-wrap:wrap}.udex-pagination--short .udex-pagination__list{gap:var(--udex-pagination-short-item-gap)}.udex-pagination__item{cursor:pointer;display:inline-block;position:relative}.udex-pagination__item a{text-decoration:none;display:flex}:host([desktop]) .udex-pagination__item a:focus,.udex-pagination__item a:focus-visible{outline:solid var(--udexSpacer2, 2px) var(--udexColorBlue10, #002A86);outline-offset:var(--udexSpacer2, 2px);border-radius:var(--udexRadiusXXS, 2px)}.udex-pagination__page{display:block;padding:0 var(--udex-pagination-item-paddings) var(--udex-pagination-item-active-border-width) var(--udex-pagination-item-paddings);color:var(--udex-pagination-item-text-color)}.udex-pagination--mobile .udex-pagination__page{padding:var(--udex-pagination-mobile-item-paddings)}.udex-pagination__item--prev a,.udex-pagination__item--next a{padding:var(--udex-pagination-item-paddings)}.udex-pagination__page--value{display:block;position:relative;padding:var(--udex-pagination-item-inner-paddings);line-height:var(--udex-pagination-item-line-height)}.udex-pagination__page:not([active]):hover{background-color:var(--udex-pagination-item-active-background-color);color:var(--udex-pagination-item-active-text-color);border-radius:4px}.udex-pagination__page:hover,.udex-pagination__page:visited{color:var(--udex-pagination-item-text-color)}.udex-pagination__page[active]{color:var(--udex-pagination-item-active-text-color)}.udex-pagination__page[active] .udex-pagination__page--value:after{content:"";position:absolute;bottom:calc(-1 * var(--udex-pagination-item-active-border-width));left:0;right:0;height:var(--udex-pagination-item-active-border-width);background-color:var(--udex-pagination-item-active-border-color)}.udex-pagination__item--short{gap:var(--udex-pagination-short-item-gap);direction:inherit}.udex-pagination--rtl .udex-pagination__item--short{display:flex;white-space-collapse:preserve}.udex-pagination__item--short{color:var(--udex-pagination-item-active-text-color)}.udex-pagination__item--short-separator{padding:var(--udex-pagination-short-separator-paddings);margin:var(--udex-pagination-short-separator-margin)}.udex-pagination__item--short-value{padding:var(--udex-pagination-short-item-paddings)}
|
|
8
|
+
export default `:host{--udex-pagination-font-size: var(--sapFontSize, 16px);--udex-pagination-font-family: var(--sapFontFamily, sans-serif);--udex-pagination-item-paddings: var(--sapFontSmallSize, .75rem);--udex-pagination-item-inner-paddings: 0rem .25rem;--udex-pagination-mobile-item-paddings: .5625rem .875rem .6875rem .875rem;--udex-pagination-item-line-height: var(--sapContent_LineHeight, 1.5rem);--udex-pagination-item-text-color: var(--sapPrimary5, #5b738b);--udex-pagination-item-active-text-color: var(--sapShell_Navigation_TextColor, var(--udexColorGrey9, #223548));--udex-pagination-item-active-background-color: var(--udexColorGrey1);--udex-pagination-item-active-border-color: var(--udexColorBlue8);--udex-pagination-item-active-border-width: var(--sapField_InformationBorderWidth, .125rem);--udex-pagination-item-gap: .25rem;--udex-pagination-mobile-item-gap: .5rem;--udex-pagination-short-item-gap: 24px;--udex-pagination-short-separator-paddings: 0 4px;--udex-pagination-short-separator-margin: 0 4px;--udex-pagination-short-item-paddings: 0 4px}.udex-pagination{font-family:var(--udex-pagination-font-family);font-size:var(--udex-pagination-font-size)}.udex-pagination__list{padding:0;margin:0;display:flex;gap:var(--udex-pagination-item-gap);align-items:center;flex-wrap:wrap}.udex-pagination--short .udex-pagination__list{gap:var(--udex-pagination-short-item-gap)}.udex-pagination__item{cursor:pointer;display:inline-block;position:relative}.udex-pagination__item a{text-decoration:none;display:flex}:host([desktop]) .udex-pagination__item a:focus,.udex-pagination__item a:focus-visible{outline:solid var(--udexSpacer2, 2px) var(--udexColorBlue10, #002A86);outline-offset:var(--udexSpacer2, 2px);border-radius:var(--udexRadiusXXS, 2px)}.udex-pagination__page{display:block;padding:0 var(--udex-pagination-item-paddings) var(--udex-pagination-item-active-border-width) var(--udex-pagination-item-paddings);color:var(--udex-pagination-item-text-color)}.udex-pagination--mobile .udex-pagination__page{padding:var(--udex-pagination-mobile-item-paddings)}.udex-pagination__item--prev a,.udex-pagination__item--next a{padding:var(--udex-pagination-item-paddings)}.udex-pagination__page--value{display:block;position:relative;padding:var(--udex-pagination-item-inner-paddings);line-height:var(--udex-pagination-item-line-height)}.udex-pagination__page:not([active]):hover{background-color:var(--udex-pagination-item-active-background-color);color:var(--udex-pagination-item-active-text-color);border-radius:4px}.udex-pagination__page:hover,.udex-pagination__page:visited{color:var(--udex-pagination-item-text-color)}.udex-pagination__page[active]{color:var(--udex-pagination-item-active-text-color)}.udex-pagination__page[active] .udex-pagination__page--value:after{content:"";position:absolute;bottom:calc(-1 * var(--udex-pagination-item-active-border-width));left:0;right:0;height:var(--udex-pagination-item-active-border-width);background-color:var(--udex-pagination-item-active-border-color)}.udex-pagination__item--short{gap:var(--udex-pagination-short-item-gap);direction:inherit}.udex-pagination--rtl .udex-pagination__item--short{display:flex;white-space-collapse:preserve}.udex-pagination__item--short{color:var(--udex-pagination-item-active-text-color)}.udex-pagination__item--short-separator{padding:var(--udex-pagination-short-separator-paddings);margin:var(--udex-pagination-short-separator-margin)}.udex-pagination__item--short-value{padding:var(--udex-pagination-short-item-paddings)}[udex-button][aria-disabled=true]:focus,[udex-button][aria-disabled=true]:focus-visible,[udex-button][_aria-disabled]:focus,[udex-button][_aria-disabled]:focus-visible{outline:2px solid #002A86;outline-offset:-4px}.hidden{position:absolute;width:0px;height:0px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0;padding:0}
|
|
9
9
|
`
|
|
@@ -5,5 +5,5 @@ import defaultTheme from "./sap_horizon/parameters-bundle.css.js";
|
|
|
5
5
|
|
|
6
6
|
registerThemePropertiesLoader("@ui5/webcomponents-theming", "sap_horizon", async () => defaultThemeBase);
|
|
7
7
|
registerThemePropertiesLoader("@sapudex/web-components", "sap_horizon", async () => defaultTheme);
|
|
8
|
-
export default `:host{--udex_rating_indicator_readonly_item_width: 1.5rem;--udex_rating_indicator_readonly_item_height: 1.5rem;--udex_rating_indicator_item_width: 1.5rem;--udex_rating_indicator_item_height: 1.5rem;--udex_rating_indicator_mobile_item_padding: 10px;--udex_rating_indicator_disabled_opacity: .4;--udex-rating_indicator_items_gap: 8px;--udex-rating_indicator_mobile_items_gap: 8px;--udex-rating_indicator_rated_color: var(--sapContent_RatedColor, #E76500);--udex-rating_indicator_unrated_color: var(--sapContent_RatedColor, #E76500);--udex-rating_indicator_read-only-unrated_color: var(--udexColorGrey6 ,#5B738B);--udex-rating_indicator_disabled-unrated_color: var(--udexColorMango6, #E76500);--udex-rating_indicator_rated_hover_color: var(--udexColorMango7, #C35500);--udex-rating_indicator_unrated_hover_color: var(--udexColorMango7, #C35500)}:host(:not([hidden])){display:inline-flex;margin:var(--_ui5-v2-
|
|
8
|
+
export default `:host{--udex_rating_indicator_readonly_item_width: 1.5rem;--udex_rating_indicator_readonly_item_height: 1.5rem;--udex_rating_indicator_item_width: 1.5rem;--udex_rating_indicator_item_height: 1.5rem;--udex_rating_indicator_mobile_item_padding: 10px;--udex_rating_indicator_disabled_opacity: .4;--udex-rating_indicator_items_gap: 8px;--udex-rating_indicator_mobile_items_gap: 8px;--udex-rating_indicator_rated_color: var(--sapContent_RatedColor, #E76500);--udex-rating_indicator_unrated_color: var(--sapContent_RatedColor, #E76500);--udex-rating_indicator_read-only-unrated_color: var(--udexColorGrey6 ,#5B738B);--udex-rating_indicator_disabled-unrated_color: var(--udexColorMango6, #E76500);--udex-rating_indicator_rated_hover_color: var(--udexColorMango7, #C35500);--udex-rating_indicator_unrated_hover_color: var(--udexColorMango7, #C35500)}:host(:not([hidden])){display:inline-flex;margin:var(--_ui5-v2-4-0_rating_indicator_component_spacing);cursor:pointer}:host([disabled]){opacity:var(--udex_rating_indicator_disabled_opacity);cursor:initial;outline:none}:host([readonly]){cursor:initial}:host([disabled]) .udex-rating-indicator__item-unsel,:host([readonly]) .udex-rating-indicator__item-unsel{width:var(--udex_rating_indicator_readonly_item_width);height:var(--udex_rating_indicator_readonly_item_height);padding-inline:0}:host([disabled]) .udex-rating-indicator__item-unsel{color:var(--udex-rating_indicator_disabled-unrated_color)}:host([readonly]) .udex-rating-indicator__item-unsel{color:var(--udex-rating_indicator_read-only-unrated_color)}:host([_focused]){outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);outline-offset:.125rem;border-radius:.25rem}[ui5-icon]{display:flex;text-shadow:var(--sapContent_TextShadow)}.udex-rating-indicator{font-family:var(--sapFontFamily);font-size:var(--sapFontSize, 16px);padding:0;outline:none;position:relative;display:inline-flex;gap:12px;align-items:center}.udex-rating-indicator__total{color:var(--udexColorGrey6);line-height:24px}.udex-rating-indicator__list{list-style-type:none;display:flex;align-items:center;margin:0;padding:0}.udex-rating-indicator__item{position:relative;width:var(--udex_rating_indicator_item_width);height:var(--udex_rating_indicator_item_height)}.udex-rating-indicator__item:not(:last-child){margin-inline-end:var(--udex-rating_indicator_items_gap)}.udex-rating-indicator__item [ui5-icon]{width:100%;height:100%;color:inherit;user-select:none}.udex-rating-indicator__item.udex-rating-indicator__item-unsel{color:var(--udex-rating_indicator_unrated_color)}.udex-rating-indicator__item.udex-rating-indicator__item-sel,.udex-rating-indicator__item.udex-rating-indicator__item-half{color:var(--udex-rating_indicator_rated_color)}.udex-rating-indicator__item [ui5-icon].udex-rating-indicator__half-icon{position:absolute;inset-inline-start:50%;color:var(--udex-rating_indicator_rated_color)}:host(:not([readonly]):not([disabled])) .udex-rating-indicator:hover .udex-rating-indicator__item-sel,:host(:not([readonly]):not([disabled])) .udex-rating-indicator:hover .udex-rating-indicator__half-icon,:host(:not([readonly]):not([disabled])) .udex-rating-indicator:hover .udex-rating-indicator__item-half{color:var(--udex-rating_indicator_rated_hover_color)}:host(:not([readonly]):not([disabled])) .ui5-rating-indicator-root:hover{opacity:1}:host(:not([readonly]):not([disabled])) .udex-rating-indicator:hover .udex-rating-indicator__item-unsel{color:var(--udex-rating_indicator_unrated_hover_color)}.udex-rating-indicator__half-icon-wrapper{width:100%;height:100%;position:absolute;inset-inline-start:-50%;top:0;z-index:32;overflow:hidden}.udex-rating-indicator--mobile .udex-rating-indicator__half-icon-wrapper{top:var(--udex_rating_indicator_mobile_item_padding)}.udex-rating-indicator--mobile .udex-rating-indicator__item [ui5-icon].udex-rating-indicator__half-icon{height:var(--udex_rating_indicator_item_height)}.udex-rating-indicator--mobile .udex-rating-indicator__item{padding:var(--udex_rating_indicator_mobile_item_padding)}:host([readonly]) .udex-rating-indicator--mobile .udex-rating-indicator__item-unsel,:host([disabled]) .udex-rating-indicator--mobile .udex-rating-indicator__item-unsel{padding-left:var(--udex_rating_indicator_mobile_item_padding);padding-right:var(--udex_rating_indicator_mobile_item_padding)}.udex-rating-indicator--mobile .udex-rating-indicator__item:not(:last-child){margin-inline-end:var(--udex-rating_indicator_mobile_items_gap)}
|
|
9
9
|
`
|
|
@@ -5,5 +5,5 @@ import defaultTheme from "./sap_horizon/parameters-bundle.css.js";
|
|
|
5
5
|
|
|
6
6
|
registerThemePropertiesLoader("@ui5/webcomponents-theming", "sap_horizon", async () => defaultThemeBase);
|
|
7
7
|
registerThemePropertiesLoader("@sapudex/web-components", "sap_horizon", async () => defaultTheme);
|
|
8
|
-
export default `:host{--udex-slider-color-track-start-point: var(--sapSlider_Selected_Background, #0070f2);--udex-slider-color-track-active: var(--sapSlider_Selected_Background, #0070f2);--udex-slider-color-handle-focus-range: var(--sapSlider_Selected_BorderColor, #0070f2);--udex-slider-color-handle-active-background: var(--sapSlider_Active_HandleBackground, #ffffff);--udex-slider-color-handle-default-icon: var(--sapContent_Selected_ForegroundColor, #0040b0);--udex-slider-radius-range-size: var(--udexRadiusM, 8px);--udex-slider-handle-width: 2.75rem;--udex-slider-handle-top: -.875rem;--udex-slider-handle-height: var(--udexSpacer32, 2rem);--udex-slider-start-end-point-left: -.875rem;--udex-slider-start-end-point-right: -.875rem;--udex-slider-progress-after-background: var(--sapContent_MeasureIndicatorColor,#5b738b);--udex-slider-handle-icon-size: var(--udexSpacer20, 1.25rem);--udex-slider-tooltip-bottom: 2.5rem;--udex-slider-tooltip-border: 1px solid var(--sapField_BorderColor, #5B738B);--udex-slider-tooltip-border-radius: var(--udexSpacer4, .25rem);--udex-slider-tooltip-font-size: var(--udexTypographyNavigationRegularMFontSize,14px);--udex-slider-tooltip-color: var(--sapContent_MeasureIndicatorColor, #5b738b);--udex-slider-tooltip-height: var(--udexSpacer32, 2rem);--udex-slider-tooltip-min-width: 2.75rem;--udex-slider-tickmark-in-range-bg: var(--sapSlider_Selected_BorderColor,#0070f2);--udex-slider-tickmark-bg: var(--sapContent_MeasureIndicatorColor, #5b738b);--udex-slider-label-color: var(--sapContent_MeasureIndicatorColor, #5b738b);--udex-slider-handle-focus-border: 2px solid var(--sapSlider_Active_HandleBorderColor);--udex-slider-progress-focus-top: -1.18rem;--udex-slider-progress-focus-left:calc(-1.375rem - 5px);--udex-slider-progress-focus-height: 42px;--udex-slider-progress-focus-width:calc(100% + 2.75rem + 10px)}:host{font-family:var(--sapFontFamily);font-weight:var(--udexTypographyFontWeightRegular, 400);font-size:var(--udexTypographyNavigationRegularMFontSize, 14px);line-height:var(--udexTypographyHeadingLineHeight, 1.1);color:var(--sapContent_MeasureIndicatorColor, #5b738b);height:74px}.ui5-slider-progress-container:before{background-color:var(--udex-slider-color-track-start-point)}.ui5-slider-progress{background-color:var(--udex-slider-color-track-active)}.ui5-slider-progress:focus:after{border:2px solid var(--udex-slider-color-handle-focus-range);border-radius:var(--udex-slider-radius-range-size);top:var(--udex-slider-progress-focus-top);height:var(--udex-slider-progress-focus-height);width:var(--udex-slider-progress-focus-width);left:var(--udex-slider-progress-focus-left)}:host([desktop]) .ui5-slider-handle:focus,.ui5-slider-handle:focus-visible{background-color:var(--_ui5-v2-
|
|
8
|
+
export default `:host{--udex-slider-color-track-start-point: var(--sapSlider_Selected_Background, #0070f2);--udex-slider-color-track-active: var(--sapSlider_Selected_Background, #0070f2);--udex-slider-color-handle-focus-range: var(--sapSlider_Selected_BorderColor, #0070f2);--udex-slider-color-handle-active-background: var(--sapSlider_Active_HandleBackground, #ffffff);--udex-slider-color-handle-default-icon: var(--sapContent_Selected_ForegroundColor, #0040b0);--udex-slider-radius-range-size: var(--udexRadiusM, 8px);--udex-slider-handle-width: 2.75rem;--udex-slider-handle-top: -.875rem;--udex-slider-handle-height: var(--udexSpacer32, 2rem);--udex-slider-start-end-point-left: -.875rem;--udex-slider-start-end-point-right: -.875rem;--udex-slider-progress-after-background: var(--sapContent_MeasureIndicatorColor,#5b738b);--udex-slider-handle-icon-size: var(--udexSpacer20, 1.25rem);--udex-slider-tooltip-bottom: 2.5rem;--udex-slider-tooltip-border: 1px solid var(--sapField_BorderColor, #5B738B);--udex-slider-tooltip-border-radius: var(--udexSpacer4, .25rem);--udex-slider-tooltip-font-size: var(--udexTypographyNavigationRegularMFontSize,14px);--udex-slider-tooltip-color: var(--sapContent_MeasureIndicatorColor, #5b738b);--udex-slider-tooltip-height: var(--udexSpacer32, 2rem);--udex-slider-tooltip-min-width: 2.75rem;--udex-slider-tickmark-in-range-bg: var(--sapSlider_Selected_BorderColor,#0070f2);--udex-slider-tickmark-bg: var(--sapContent_MeasureIndicatorColor, #5b738b);--udex-slider-label-color: var(--sapContent_MeasureIndicatorColor, #5b738b);--udex-slider-handle-focus-border: 2px solid var(--sapSlider_Active_HandleBorderColor);--udex-slider-progress-focus-top: -1.18rem;--udex-slider-progress-focus-left:calc(-1.375rem - 5px);--udex-slider-progress-focus-height: 42px;--udex-slider-progress-focus-width:calc(100% + 2.75rem + 10px)}:host{font-family:var(--sapFontFamily);font-weight:var(--udexTypographyFontWeightRegular, 400);font-size:var(--udexTypographyNavigationRegularMFontSize, 14px);line-height:var(--udexTypographyHeadingLineHeight, 1.1);color:var(--sapContent_MeasureIndicatorColor, #5b738b);height:74px}.ui5-slider-progress-container:before{background-color:var(--udex-slider-color-track-start-point)}.ui5-slider-progress{background-color:var(--udex-slider-color-track-active)}.ui5-slider-progress:focus:after{border:2px solid var(--udex-slider-color-handle-focus-range);border-radius:var(--udex-slider-radius-range-size);top:var(--udex-slider-progress-focus-top);height:var(--udex-slider-progress-focus-height);width:var(--udex-slider-progress-focus-width);left:var(--udex-slider-progress-focus-left)}:host([desktop]) .ui5-slider-handle:focus,.ui5-slider-handle:focus-visible{background-color:var(--_ui5-v2-4-0_range_slider_handle_background_focus)}:host .ui5-slider-inner .ui5-slider-labels{top:34px}:host .ui5-slider-inner .ui5-slider-labels li{height:1.375rem;font-family:var(--sapFontFamily);font-size:var(--udexTypographyNavigationRegularMFontSize, 14px)}[slider-icon]{color:var(--udex-slider-color-handle-default-icon)}.ui5-slider-root:focus .ui5-slider-inner .ui5-slider-handle,.ui5-slider-handle:focus{border:var(--udex-slider-handle-focus-border)}.ui5-slider-labels li{color:var(--udex-slider-label-color)}.ui5-slider-tickmarks li{border-inline-start:1px solid var(--udex-slider-tickmark-bg)}.ui5-slider-tickmarks li.ui5-slider-tickmark-in-range{border-inline-start:1px solid var(--udex-slider-tickmark-in-range-bg)}:host(:not([hidden])) .ui5-slider-handle-container .ui5-slider-tooltip{bottom:var(--udex-slider-tooltip-bottom);border:var(--udex-slider-tooltip-border);border-radius:var(--udex-slider-tooltip-border-radius);font-size:var(--udex-slider-tooltip-font-size);color:var(--udex-slider-tooltip-color);height:var(--udex-slider-tooltip-height);min-width:var(--udex-slider-tooltip-min-width)}[slider-icon]{width:var(--udex-slider-handle-icon-size);height:var(--udex-slider-handle-icon-size)}.ui5-slider-progress-container:after{background-color:var(--udex-slider-progress-after-background)}.ui5-slider-progress-container:before{inset-inline-start:var(--udex-slider-start-end-point-left)}.ui5-slider-progress-container:after{inset-inline-end:var(--udex-slider-start-end-point-right)}.ui5-slider-handle-container{margin-inline-start:calc(-1 * var(--udex-slider-handle-width) / 2);top:var(--udex-slider-handle-top)}.ui5-slider-handle{height:var(--udex-slider-handle-height);width:var(--udex-slider-handle-width)}
|
|
9
9
|
`
|
|
@@ -5,5 +5,5 @@ import defaultTheme from "./sap_horizon/parameters-bundle.css.js";
|
|
|
5
5
|
|
|
6
6
|
registerThemePropertiesLoader("@ui5/webcomponents-theming", "sap_horizon", async () => defaultThemeBase);
|
|
7
7
|
registerThemePropertiesLoader("@sapudex/web-components", "sap_horizon", async () => defaultTheme);
|
|
8
|
-
export default `:host{--udex-input-color-standard-default-border: var(--sapField_BorderColor, var(--udexColorGrey6));--udex-input-color-standard-default-label: var(--sapField_PlaceholderTextColor, var(--udexColorGrey7));--udex-input-color-standard-default-supporting-text: var(--sapField_PlaceholderTextColor, var(--udexColorGrey7));--udex-input-color-standard-default-typed-text: var(--sapField_TextColor, var(--udexCoreTextDark));--udex-input-color-standard-default-background-light: var(--sapField_Background, var(--udexColorNeutralWhite));--udex-input-color-standard-hover-border: var(--sapField_Hover_BorderColor, var(--udexColorBlue6));--udex-input-color-standard-active-border: var(--sapField_Active_BorderColor, var(--udexColorBlue9));--udex-input-color-error-default-border: var(--udexCoreSemanticError6, #EE3939);--udex-input-color-error-hover-border: var(--sapField_InvalidColor, var(--udexCoreSemanticError7));--udex-input-color-error-active-border: var(--udexCoreSemanticError9, #840606);--udex-input-color-error-default-supporting-text: var(--sapField_InvalidColor, var(--udexCoreSemanticError7));--udex-input-color-warning-default-border: var(--udexCoreSemanticWarning6, #E76500);--udex-input-color-warning-hover-border: var(--sapField_WarningColor, var(--udexCoreSemanticWarning7));--udex-input-color-warning-active-border: var(--udexCoreSemanticWarning9, #8D2A00);--udex-input-color-warning-default-supporting-text: var(--sapField_WarningColor, var(--udexCoreSemanticWarning7));--udex-input-color-success-default-border: var(--udexCoreSemanticSuccess6, #36A41D);--udex-input-color-success-hover-border: var(--sapField_SuccessColor, var(--udexCoreSemanticSuccess7));--udex-input-color-success-active-border: var(--udexCoreSemanticSuccess9, #1E592F);--udex-input-color-success-default-supporting-text: var(--sapField_SuccessColor, var(--udexCoreSemanticSuccess7));--udex-input-color-disabled-border: var(--udexColorGrey6, #5B738B);--udex-input-color-disabled-label: var(--sapField_PlaceholderTextColor, var(--udexColorGrey7));--udex-input-color-read-only-default-border: var(--sapField_ReadOnly_BorderColor, var(--udexColorGrey6));--udex-input-color-read-only-default-background: var(--sapField_ReadOnly_Background, var(--udexColorGrey2));--udex-input-padding: 0 var(--udexSpacer12, 12px);--udex-input-min-width-xs-and-s: 100%;--udex-input-max-width: 100%}.udex-text-field__wrap{display:flex;position:relative;border-radius:var(--udexRadiusXS, 4px);border:1px solid var(--udex-input-color-standard-default-border)}.udex-text-field__wrap:hover{border-color:var(--udex-input-color-standard-hover-border)}.udex-text-field__container{position:relative;font-family:var(--sapFontFamily, sans-serif);max-width:var(--udex-input-max-width);width:100%}@media (width < 640px){.udex-text-field__container{min-width:var(--udex-input-min-width-xs-and-s)}}:host([disabled]) .udex-text-field__container{opacity:var(--sapContent_DisabledOpacity)}.udex-text-field__input{width:100%;height:40px;font-size:var(--sapProgress_FontSize, 16px);font-family:inherit;line-height:24px;color:var(--udex-input-color-standard-default-typed-text);padding:var(--udex-input-padding);border-radius:var(--udexRadiusXS, 4px);box-sizing:border-box;font-weight:var(--udexTypographyFontWeightRegular, 400);background:transparent;border:none}.udex-text-field__input:focus{outline:none}:host(:not([_is-touched]):not([aria-expanded="true"])[active]) .udex-text-field__wrap:before{content:"";position:absolute;z-index:-1;inset:-5px;border:2px solid var(--udexColorBlue10);border-radius:var(--udexRadiusS, 6px)}.udex-text-field__wrap[open],:host([active]) .udex-text-field__wrap{border-color:var(--udex-input-color-standard-active-border);outline:0}:host([active]) .udex-text-field_icon-container{border-color:transparent;color:var(--udexColorGrey7, #475E75)}.udex-text-field__wrap[open]:hover{border-color:var(--udex-input-color-standard-active-border)}:host([disabled]) .udex-text-field__wrap{border-color:var(--udex-input-color-disabled-border);background-color:var(--udex-input-color-standard-default-background-light)}:host([readonly]) .udex-text-field__wrap{border-color:var(--udex-input-color-read-only-default-border);background-color:var(--udex-input-color-read-only-default-background)}:host([value-state="Success"][displayonly]) .udex-text-field__wrap,:host([value-state="Warning"][displayonly]) .udex-text-field__wrap,:host([value-state="Error"][displayonly]) .udex-text-field__wrap,:host([displayonly]) .udex-text-field__wrap{border:0;background-color:transparent;font-family:inherit}:host([displayonly]) .udex-text-field__wrap[open],:host([displayonly]) .udex-text-field__wrap{outline:0;border:0}:host([displayonly][value-state="Success"]) .udex-text-field__wrap:hover,:host([displayonly][value-state="Warning"]) .udex-text-field__wrap:hover,:host([displayonly][value-state="Error"]) .udex-text-field__wrap:hover{border:none}:host([value-state="Error"]) .udex-text-field__wrap{border:1px solid var(--udex-input-color-error-default-border)}:host([value-state="Error"]) .udex-text-field__wrap:hover{border:1px solid var(--udex-input-color-error-hover-border)}:host([value-state="Error"]) .udex-text-field__wrap[open],:host([value-state="Error"][active]) .udex-text-field__wrap{border:1px solid var(--udex-input-color-error-active-border);outline:0}:host([value-state="Warning"]) .udex-text-field__wrap{border:1px solid var(--udex-input-color-warning-default-border)}:host([value-state="Warning"]) .udex-text-field__wrap:hover{border:1px solid var(--udex-input-color-warning-hover-border)}:host([value-state="Warning"]) .udex-text-field__wrap[open],:host([value-state="Warning"][active]) .udex-text-field__wrap{border:1px solid var(--udex-input-color-warning-active-border);outline:0}:host([value-state="Success"]) .udex-text-field__wrap{border:1px solid var(--udex-input-color-success-default-border)}:host([value-state="Success"]) .udex-text-field__wrap:hover{border:1px solid var(--udex-input-color-success-hover-border)}:host([value-state="Success"]) .udex-text-field__wrap[open],:host([value-state="Success"][active]) .udex-text-field__wrap{border:1px solid var(--udex-input-color-success-active-border);outline:0}.udex-text-field__label{position:absolute;z-index:2;color:var(--udex-input-color-standard-default-label);transition:transform .15s ease-out,font-size .15s ease-out;line-height:24px;font-weight:var(--udexTypographyFontWeightRegular, 400);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - var(--udexSpacer12) * 2)}.udex-text-field__container:dir(rtl) .udex-text-field_icon-container{left:1px;right:auto}.udex-text-field__container:dir(ltr) .udex-text-field__label,.udex-text-field__container:dir(rtl) .udex-text-field__label{top:9px}.udex-text-field__container:dir(ltr) .udex-text-field__label{left:12px}.udex-text-field__container:dir(rtl) .udex-text-field__label{right:12px}:host([displayonly]:dir(ltr)) .udex-text-field__label,:host([displayonly]:dir(rtl)) .udex-text-field__label{padding:0}.udex-text-field__label.udex-text-field__label_active,:host:has(.udex-text-field__input:-webkit-autofill) .udex-text-field__label{line-height:18px;transform:translateY(-110%);padding:6px 4px 0;font-size:12px;background:linear-gradient(transparent 55%,var(--udex-input-color-standard-default-background-light) 45%)}:host([readonly]) .udex-text-field__label.udex-text-field__label_active{background:linear-gradient(transparent 55%,var(--udex-input-color-read-only-default-background) 45%)}:host([displayonly][readonly]) .udex-text-field__label.udex-text-field__label_active,:host([displayonly]) .udex-text-field__label.udex-text-field__label_active{background-color:transparent;background:none}:host([disabled]) .udex-text-field__label{color:var(--udex-input-color-disabled-label)}.udex-text-field_icon-container{--sapContent_DisabledOpacity: 1;--sapButton_BorderWidth: 0 0 0 1px;--udex-control-button-large-height: 40px;--udex-control-button-large-width: 40px;position:relative;padding:var(--udexSpacer4, 4px)}:host(:dir(rtl):not([readonly]):not([displayonly]):not([disabled])) .udex-text-field__wrap:hover .udex-text-field_icon-container{--udex-control-button-border-color: var(--udexColorGrey4, #A9B4BE);--sapButton_BorderWidth: 0 1px 0 0}:host(:dir(rtl):not([readonly]):not([displayonly]):not([disabled])) .udex-text-field__wrap .udex-text-field_icon-container{--sapButton_BorderWidth: 0 1px 0 0}:host([active])
|
|
8
|
+
export default `:host{--udex-input-color-standard-default-border: var(--sapField_BorderColor, var(--udexColorGrey6));--udex-input-color-standard-default-label: var(--sapField_PlaceholderTextColor, var(--udexColorGrey7));--udex-input-color-standard-default-supporting-text: var(--sapField_PlaceholderTextColor, var(--udexColorGrey7));--udex-input-color-standard-default-typed-text: var(--sapField_TextColor, var(--udexCoreTextDark));--udex-input-color-standard-default-background-light: var(--sapField_Background, var(--udexColorNeutralWhite));--udex-input-color-standard-hover-border: var(--sapField_Hover_BorderColor, var(--udexColorBlue6));--udex-input-color-standard-active-border: var(--sapField_Active_BorderColor, var(--udexColorBlue9));--udex-input-color-error-default-border: var(--udexCoreSemanticError6, #EE3939);--udex-input-color-error-hover-border: var(--sapField_InvalidColor, var(--udexCoreSemanticError7));--udex-input-color-error-active-border: var(--udexCoreSemanticError9, #840606);--udex-input-color-error-default-supporting-text: var(--sapField_InvalidColor, var(--udexCoreSemanticError7));--udex-input-color-warning-default-border: var(--udexCoreSemanticWarning6, #E76500);--udex-input-color-warning-hover-border: var(--sapField_WarningColor, var(--udexCoreSemanticWarning7));--udex-input-color-warning-active-border: var(--udexCoreSemanticWarning9, #8D2A00);--udex-input-color-warning-default-supporting-text: var(--sapField_WarningColor, var(--udexCoreSemanticWarning7));--udex-input-color-success-default-border: var(--udexCoreSemanticSuccess6, #36A41D);--udex-input-color-success-hover-border: var(--sapField_SuccessColor, var(--udexCoreSemanticSuccess7));--udex-input-color-success-active-border: var(--udexCoreSemanticSuccess9, #1E592F);--udex-input-color-success-default-supporting-text: var(--sapField_SuccessColor, var(--udexCoreSemanticSuccess7));--udex-input-color-disabled-border: var(--udexColorGrey6, #5B738B);--udex-input-color-disabled-label: var(--sapField_PlaceholderTextColor, var(--udexColorGrey7));--udex-input-color-read-only-default-border: var(--sapField_ReadOnly_BorderColor, var(--udexColorGrey6));--udex-input-color-read-only-default-background: var(--sapField_ReadOnly_Background, var(--udexColorGrey2));--udex-input-padding: 0 var(--udexSpacer12, 12px);--udex-input-min-width-xs-and-s: 100%;--udex-input-max-width: 100%}.udex-text-field__wrap{display:flex;position:relative;border-radius:var(--udexRadiusXS, 4px);border:1px solid var(--udex-input-color-standard-default-border)}.udex-text-field__wrap:hover{border-color:var(--udex-input-color-standard-hover-border)}.udex-text-field__container{position:relative;font-family:var(--sapFontFamily, sans-serif);max-width:var(--udex-input-max-width);width:100%}@media (width < 640px){.udex-text-field__container{min-width:var(--udex-input-min-width-xs-and-s)}}:host([disabled]) .udex-text-field__container{opacity:var(--sapContent_DisabledOpacity)}.udex-text-field__input{width:100%;height:40px;font-size:var(--sapProgress_FontSize, 16px);font-family:inherit;line-height:24px;color:var(--udex-input-color-standard-default-typed-text);padding:var(--udex-input-padding);border-radius:var(--udexRadiusXS, 4px);box-sizing:border-box;font-weight:var(--udexTypographyFontWeightRegular, 400);background:transparent;border:none}.udex-text-field__input:focus{outline:none}:host(:not([_is-touched]):not([aria-expanded="true"])[active]) .udex-text-field__wrap:before{content:"";position:absolute;z-index:-1;inset:-5px;border:2px solid var(--udexColorBlue10);border-radius:var(--udexRadiusS, 6px)}.udex-text-field__wrap[open],:host([active]) .udex-text-field__wrap{border-color:var(--udex-input-color-standard-active-border);outline:0}:host([active]) .udex-text-field_icon-container{border-color:transparent;color:var(--udexColorGrey7, #475E75)}.udex-text-field__wrap[open]:hover{border-color:var(--udex-input-color-standard-active-border)}:host([disabled]) .udex-text-field__wrap{border-color:var(--udex-input-color-disabled-border);background-color:var(--udex-input-color-standard-default-background-light)}:host([readonly]) .udex-text-field__wrap{border-color:var(--udex-input-color-read-only-default-border);background-color:var(--udex-input-color-read-only-default-background)}:host([value-state="Success"][displayonly]) .udex-text-field__wrap,:host([value-state="Warning"][displayonly]) .udex-text-field__wrap,:host([value-state="Error"][displayonly]) .udex-text-field__wrap,:host([displayonly]) .udex-text-field__wrap{border:0;background-color:transparent;font-family:inherit}:host([displayonly]) .udex-text-field__wrap[open],:host([displayonly]) .udex-text-field__wrap{outline:0;border:0}:host([displayonly][value-state="Success"]) .udex-text-field__wrap:hover,:host([displayonly][value-state="Warning"]) .udex-text-field__wrap:hover,:host([displayonly][value-state="Error"]) .udex-text-field__wrap:hover{border:none}:host([value-state="Error"]) .udex-text-field__wrap{border:1px solid var(--udex-input-color-error-default-border)}:host([value-state="Error"]) .udex-text-field__wrap:hover{border:1px solid var(--udex-input-color-error-hover-border)}:host([value-state="Error"]) .udex-text-field__wrap[open],:host([value-state="Error"][active]) .udex-text-field__wrap{border:1px solid var(--udex-input-color-error-active-border);outline:0}:host([value-state="Warning"]) .udex-text-field__wrap{border:1px solid var(--udex-input-color-warning-default-border)}:host([value-state="Warning"]) .udex-text-field__wrap:hover{border:1px solid var(--udex-input-color-warning-hover-border)}:host([value-state="Warning"]) .udex-text-field__wrap[open],:host([value-state="Warning"][active]) .udex-text-field__wrap{border:1px solid var(--udex-input-color-warning-active-border);outline:0}:host([value-state="Success"]) .udex-text-field__wrap{border:1px solid var(--udex-input-color-success-default-border)}:host([value-state="Success"]) .udex-text-field__wrap:hover{border:1px solid var(--udex-input-color-success-hover-border)}:host([value-state="Success"]) .udex-text-field__wrap[open],:host([value-state="Success"][active]) .udex-text-field__wrap{border:1px solid var(--udex-input-color-success-active-border);outline:0}.udex-text-field__label{position:absolute;z-index:2;color:var(--udex-input-color-standard-default-label);transition:transform .15s ease-out,font-size .15s ease-out;line-height:24px;font-weight:var(--udexTypographyFontWeightRegular, 400);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - var(--udexSpacer12) * 2)}.udex-text-field__container:dir(rtl) .udex-text-field_icon-container{left:1px;right:auto}.udex-text-field__container:dir(ltr) .udex-text-field__label,.udex-text-field__container:dir(rtl) .udex-text-field__label{top:9px}.udex-text-field__container:dir(ltr) .udex-text-field__label{left:12px}.udex-text-field__container:dir(rtl) .udex-text-field__label{right:12px}:host([displayonly]:dir(ltr)) .udex-text-field__label,:host([displayonly]:dir(rtl)) .udex-text-field__label{padding:0}.udex-text-field__label.udex-text-field__label_active,:host:has(.udex-text-field__input:-webkit-autofill) .udex-text-field__label{line-height:18px;transform:translateY(-110%);padding:6px 4px 0;font-size:12px;background:linear-gradient(transparent 55%,var(--udex-input-color-standard-default-background-light) 45%)}:host([readonly]) .udex-text-field__label.udex-text-field__label_active{background:linear-gradient(transparent 55%,var(--udex-input-color-read-only-default-background) 45%)}:host([displayonly][readonly]) .udex-text-field__label.udex-text-field__label_active,:host([displayonly]) .udex-text-field__label.udex-text-field__label_active{background-color:transparent;background:none}:host([disabled]) .udex-text-field__label{color:var(--udex-input-color-disabled-label)}.udex-text-field_icon-container{--sapContent_DisabledOpacity: 1;--sapButton_BorderWidth: 0 0 0 1px;--udex-control-button-large-height: 40px;--udex-control-button-large-width: 40px;position:relative;padding:var(--udexSpacer4, 4px)}:host(:dir(rtl):not([readonly]):not([displayonly]):not([disabled])) .udex-text-field__wrap:hover .udex-text-field_icon-container{--udex-control-button-border-color: var(--udexColorGrey4, #A9B4BE);--sapButton_BorderWidth: 0 1px 0 0}:host(:dir(rtl):not([readonly]):not([displayonly]):not([disabled])) .udex-text-field__wrap .udex-text-field_icon-container{--sapButton_BorderWidth: 0 1px 0 0}:host([icon-active]) .udex-text-field_icon-container{border-color:var(--udexColorBlue4, #89D1FF);color:var(--udexColorBlue9, #0040B0)}:host([icon-active]) .udex-text-field_icon-container:hover{border-color:var(--udexColorGrey7, #475E75);color:var(--udexColorGrey7, #475E75)}.udex-text-field__supporting-text{font-size:12px;line-height:18px;color:var(--udex-input-color-standard-default-supporting-text);padding:4px 12px;display:block;position:relative}:host([value-state="Error"]) .udex-text-field__supporting-text{color:var(--udex-input-color-error-default-supporting-text)}:host([value-state="Warning"]) .udex-text-field__supporting-text{color:var(--udex-input-color-warning-default-supporting-text)}:host([value-state="Success"]) .udex-text-field__supporting-text{color:var(--udex-input-color-success-default-supporting-text)}.udex-text-field__icon{color:inherit;vertical-align:top;margin-inline-end:var(--udexSpacer4, 4px)}.udex-text-field__supporting-text-icon{color:inherit;vertical-align:top;margin-inline-end:var(--udexSpacer4, 4px);width:var(--sapContent_IconHeight, 16px);height:var(--sapContent_IconHeight, 16px)}.udex-text-field__input[type=number]::-webkit-outer-spin-button,.udex-text-field__input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.udex-text-field__input[type=number]{-moz-appearance:textfield;appearance:textfield}.hidden-text{display:none}
|
|
9
9
|
`
|
package/src/themes/Accordion.css
CHANGED
package/src/themes/Button.css
CHANGED
|
@@ -16,6 +16,8 @@
|
|
|
16
16
|
--udex-button-icon-text-spacing-medium-size: 8px;
|
|
17
17
|
--udex-button-icon-text-spacing-large-size: 8px;
|
|
18
18
|
--udex-button-focus-border-radius: 0.375rem;
|
|
19
|
+
--udex-button-focus-border-color: var(--sapContent_FocusColor);
|
|
20
|
+
|
|
19
21
|
--udexTypographyFontWeightMedium: 500;
|
|
20
22
|
|
|
21
23
|
/* Primary design */
|
|
@@ -261,7 +263,9 @@
|
|
|
261
263
|
inset: var(--udex-button-invisible-focus-inset);
|
|
262
264
|
}
|
|
263
265
|
|
|
264
|
-
|
|
266
|
+
:host(:not([active])) .ui5-button-root:focus-visible:after {
|
|
267
|
+
border: 0.125rem solid var(--udex-button-focus-border-color);
|
|
268
|
+
}
|
|
265
269
|
|
|
266
270
|
:host,
|
|
267
271
|
:host([size="Medium"]) {
|
|
@@ -297,7 +301,7 @@
|
|
|
297
301
|
min-height: var(--udex-button-medium-size);
|
|
298
302
|
}
|
|
299
303
|
|
|
300
|
-
:host([icon
|
|
304
|
+
:host([end-icon]) .ui5-button-icon {
|
|
301
305
|
margin-inline-start: 0;
|
|
302
306
|
}
|
|
303
307
|
|
|
@@ -372,6 +376,20 @@
|
|
|
372
376
|
margin-inline-start: var(--udex-button-icon-text-spacing-large-size);
|
|
373
377
|
}
|
|
374
378
|
|
|
379
|
+
:host:disabled,
|
|
380
|
+
:host([design="Default"]):disabled,
|
|
381
|
+
:host([design="Secondary"]):disabled,
|
|
382
|
+
:host([design="Invisible"]):disabled,
|
|
383
|
+
:host([design="Emphasized"][_aria-disabled]):disabled,
|
|
384
|
+
:host([design="Primary"][_aria-disabled]):disabled,
|
|
385
|
+
:host([design="Transparent"]):disabled,
|
|
386
|
+
:host([design="Tertiary"]):disabled,
|
|
387
|
+
:host([design="Negative"]):disabled,
|
|
388
|
+
:host([design="Attention"]):disabled,
|
|
389
|
+
:host([design="Warning"]):disabled,
|
|
390
|
+
:host([design="Positive"]):disabled {
|
|
391
|
+
opacity: var(--sapContent_DisabledOpacity, 0.4);
|
|
392
|
+
}
|
|
375
393
|
|
|
376
394
|
/* Standard/Primary css-rules */
|
|
377
395
|
:host,
|
|
@@ -395,8 +413,8 @@
|
|
|
395
413
|
border: 1px solid var(--udex-button-color-primary-standard-hover-border-color);
|
|
396
414
|
}
|
|
397
415
|
|
|
398
|
-
:host([active]:not([disabled]))
|
|
399
|
-
:host([design="Emphasized"][active]:not([disabled]))
|
|
416
|
+
:host([active]:not([disabled])),
|
|
417
|
+
:host([design="Emphasized"][active]:not([disabled])),
|
|
400
418
|
:host([design="Primary"][active]:not([disabled])) {
|
|
401
419
|
color: var(--udex-button-color-primary-standard-active-text-and-icon);
|
|
402
420
|
background-color: var(--udex-button-color-primary-standard-active-background);
|
|
@@ -409,7 +427,6 @@
|
|
|
409
427
|
color: var(--udex-button-color-primary-standard-disabled-text-and-icon);
|
|
410
428
|
background-color: var(--udex-button-color-primary-standard-disabled-background);
|
|
411
429
|
border: 1px solid var(--udex-button-color-primary-standard-disabled-background);
|
|
412
|
-
opacity: var(--sapContent_DisabledOpacity, 0.4);
|
|
413
430
|
}
|
|
414
431
|
|
|
415
432
|
/*Primary toggled*/
|
|
@@ -429,13 +446,12 @@
|
|
|
429
446
|
border: 1px solid var(--udex-button-color-primary-toggled-hover-border);
|
|
430
447
|
}
|
|
431
448
|
|
|
432
|
-
:host([toggled]):disabled
|
|
433
|
-
:host([design="Emphasized"][toggled]):disabled
|
|
449
|
+
:host([toggled]):disabled,
|
|
450
|
+
:host([design="Emphasized"][toggled]):disabled,
|
|
434
451
|
:host([design="Primary"][toggled]):disabled {
|
|
435
452
|
color: var(--udex-button-color-primary-toggled-disabled-text-and-icon);
|
|
436
453
|
background-color: var(--udex-button-color-primary-toggled-disabled-background);
|
|
437
454
|
border: 1px solid var(--udex-button-color-primary-toggled-disabled-border);
|
|
438
|
-
opacity: var(--sapContent_DisabledOpacity, 0.4);
|
|
439
455
|
}
|
|
440
456
|
|
|
441
457
|
/* Secondary css-rules */
|
|
@@ -457,7 +473,7 @@
|
|
|
457
473
|
border: 1px solid var(--udex-button-color-secondary-standard-hover-border);
|
|
458
474
|
}
|
|
459
475
|
|
|
460
|
-
:host([design="Default"][active]:not([disabled]))
|
|
476
|
+
:host([design="Default"][active]:not([disabled])),
|
|
461
477
|
:host([design="Secondary"][active]:not([disabled])) {
|
|
462
478
|
color: var(--udex-button-color-secondary-standard-active-text-and-icon);
|
|
463
479
|
background-color: var(--udex-button-color-secondary-standard-active-background);
|
|
@@ -469,30 +485,28 @@
|
|
|
469
485
|
color: var(--udex-button-color-secondary-standard-disabled-text-and-icon);
|
|
470
486
|
background-color: var(--udex-button-color-secondary-standard-disabled-background);
|
|
471
487
|
border: 1px solid var(--udex-button-color-secondary-standard-disabled-border);
|
|
472
|
-
opacity: var(--sapContent_DisabledOpacity, 0.4);
|
|
473
488
|
}
|
|
474
489
|
|
|
475
490
|
/*Secondary toggled*/
|
|
476
|
-
:host([design="Default"][toggled])
|
|
491
|
+
:host([design="Default"][toggled]),
|
|
477
492
|
:host([design="Secondary"][toggled]) {
|
|
478
493
|
color: var(--udex-button-color-secondary-toggled-default-text-and-icon);
|
|
479
494
|
background-color: var(--udex-button-color-secondary-toggled-default-background);
|
|
480
495
|
border: 1px solid var(--udex-button-color-secondary-toggled-default-border);
|
|
481
496
|
}
|
|
482
497
|
|
|
483
|
-
:host([design="Default"][toggled]:not([non-interactive]):not([_is-touch]):not([disabled]):hover)
|
|
498
|
+
:host([design="Default"][toggled]:not([non-interactive]):not([_is-touch]):not([disabled]):hover),
|
|
484
499
|
:host([design="Secondary"][toggled]:not([non-interactive]):not([_is-touch]):not([disabled]):hover) {
|
|
485
500
|
color: var(--udex-button-color-secondary-toggled-hover-text-and-icon);
|
|
486
501
|
background-color: var(--udex-button-color-secondary-toggled-hover-background);
|
|
487
502
|
border: 1px solid var(--sapButton_Selected_Hover_BorderColor);
|
|
488
503
|
}
|
|
489
504
|
|
|
490
|
-
:host([design="Default"][toggled]):disabled
|
|
505
|
+
:host([design="Default"][toggled]):disabled,
|
|
491
506
|
:host([design="Secondary"][toggled]):disabled {
|
|
492
507
|
color: var(--udex-button-color-secondary-toggled-disabled-text-and-icon);
|
|
493
508
|
background-color: var(--udex-button-color-secondary-toggled-disabled-background);
|
|
494
509
|
border: 1px solid var(--udex-button-color-secondary-toggled-disabled-border);
|
|
495
|
-
opacity: var(--sapContent_DisabledOpacity, 0.4);
|
|
496
510
|
}
|
|
497
511
|
|
|
498
512
|
/* Tertiary css-rules */
|
|
@@ -526,7 +540,6 @@
|
|
|
526
540
|
color: var(--udex-button-color-tertiary-standard-disabled-text-and-icon);
|
|
527
541
|
background-color: var(--udex-button-color-tertiary-standard-disabled-background);
|
|
528
542
|
border: 1px solid var(--udex-button-color-tertiary-standard-disabled-border);
|
|
529
|
-
opacity: var(--sapContent_DisabledOpacity, 0.4);
|
|
530
543
|
}
|
|
531
544
|
|
|
532
545
|
/*Tertiary toggled*/
|
|
@@ -538,7 +551,7 @@
|
|
|
538
551
|
}
|
|
539
552
|
|
|
540
553
|
:host([design="Transparent"][toggled]:not([non-interactive]):not([_is-touch]):not([disabled]):hover),
|
|
541
|
-
:host([design="Tertiary"][toggled]:not([non-interactive]):not([_is-touch]):not([disabled]):hover){
|
|
554
|
+
:host([design="Tertiary"][toggled]:not([non-interactive]):not([_is-touch]):not([disabled]):hover) {
|
|
542
555
|
color: var(--udex-button-color-tertiary-toggled-hover-text-and-icon);
|
|
543
556
|
background-color: var(--udex-button-color-tertiary-toggled-hover-background);
|
|
544
557
|
border: 1px solid var(--udex-button-color-tertiary-toggled-hover-border);
|
|
@@ -587,7 +600,6 @@
|
|
|
587
600
|
color: var(--udex-button-color-invisible-standard-disabled-text-and-icon);
|
|
588
601
|
background-color: var(--udex-button-color-invisible-standard-disabled-background);
|
|
589
602
|
border: none;
|
|
590
|
-
opacity: var(--sapContent_DisabledOpacity, 0.4);
|
|
591
603
|
}
|
|
592
604
|
|
|
593
605
|
/* Positive css-rules */
|
|
@@ -615,7 +627,6 @@
|
|
|
615
627
|
color: var(--udex-button-color-positive-standard-disabled-text-and-icon);
|
|
616
628
|
background-color: var(--udex-button-color-positive-standard-disabled-background);
|
|
617
629
|
border: 1px solid var(--udex-button-color-positive-standard-disabled-border);
|
|
618
|
-
opacity: var(--sapContent_DisabledOpacity, 0.4);
|
|
619
630
|
}
|
|
620
631
|
|
|
621
632
|
/*Positive toggled*/
|
|
@@ -625,7 +636,7 @@
|
|
|
625
636
|
border: 1px solid var(--udex-button-color-positive-toggled-default-border);
|
|
626
637
|
}
|
|
627
638
|
|
|
628
|
-
:host([design=Positive][toggled]:not([non-interactive]):not([_is-touch]):not([disabled]):hover){
|
|
639
|
+
:host([design=Positive][toggled]:not([non-interactive]):not([_is-touch]):not([disabled]):hover) {
|
|
629
640
|
color: var(--udex-button-color-positive-toggled-hover-text-and-icon);
|
|
630
641
|
background-color: var(--udex-button-color-positive-toggled-hover-background);
|
|
631
642
|
border: 1px solid var(--udex-button-color-positive-toggled-hover-border);
|
|
@@ -635,7 +646,6 @@
|
|
|
635
646
|
color: var(--udex-button-color-positive-toggled-disabled-text-and-icon);
|
|
636
647
|
background-color: var(--udex-button-color-positive-toggled-disabled-background);
|
|
637
648
|
border: 1px solid var(--udex-button-color-positive-toggled-disabled-border);
|
|
638
|
-
opacity: var(--sapContent_DisabledOpacity, 0.4);
|
|
639
649
|
}
|
|
640
650
|
|
|
641
651
|
/* Negative css-rules */
|
|
@@ -653,7 +663,8 @@
|
|
|
653
663
|
border: 1px solid var(--udex-button-color-negative-standard-hover-border);
|
|
654
664
|
}
|
|
655
665
|
|
|
656
|
-
:host([design=Negative][active]:not([disabled]))
|
|
666
|
+
:host([design=Negative][active]:not([disabled])),
|
|
667
|
+
:host([design=Negative][active][_aria-disabled="false"]) {
|
|
657
668
|
color: var(--udex-button-color-negative-standard-active-text-and-icon);
|
|
658
669
|
background-color: var(--udex-button-color-negative-standard-active-background);
|
|
659
670
|
border: 1px solid var(--udex-button-color-negative-standard-active-border);
|
|
@@ -663,7 +674,6 @@
|
|
|
663
674
|
color: var(--udex-button-color-negative-standard-disabled-text-and-icon);
|
|
664
675
|
background-color: var(--udex-button-color-negative-standard-disabled-background);
|
|
665
676
|
border: 1px solid var(--udex-button-color-negative-standard-disabled-border);
|
|
666
|
-
opacity: var(--sapContent_DisabledOpacity, 0.4);
|
|
667
677
|
}
|
|
668
678
|
|
|
669
679
|
/*Negative toggled*/
|
|
@@ -683,7 +693,6 @@
|
|
|
683
693
|
color: var(--udex-button-color-negative-toggled-disabled-text-and-icon);
|
|
684
694
|
background-color: var(--udex-button-color-negative-toggled-disabled-background);
|
|
685
695
|
border: 1px solid var(--udex-button-color-negative-toggled-disabled-border);
|
|
686
|
-
opacity: var(--sapContent_DisabledOpacity, 0.4);
|
|
687
696
|
}
|
|
688
697
|
|
|
689
698
|
/* Warning css-rules */
|
|
@@ -705,7 +714,7 @@
|
|
|
705
714
|
border: 1px solid var(--udex-button-color-warning-standard-hover-border);
|
|
706
715
|
}
|
|
707
716
|
|
|
708
|
-
:host([design="Attention"][active]:not([disabled]))
|
|
717
|
+
:host([design="Attention"][active]:not([disabled])),
|
|
709
718
|
:host([design="Warning"][active]:not([disabled])) {
|
|
710
719
|
color: var(--udex-button-color-warning-standard-active-text-and-icon);
|
|
711
720
|
background-color: var(--udex-button-color-warning-standard-active-background);
|
|
@@ -717,7 +726,6 @@
|
|
|
717
726
|
color: var(--udex-button-color-warning-standard-disabled-text-and-icon);
|
|
718
727
|
background-color: var(--udex-button-color-warning-standard-disabled-background);
|
|
719
728
|
border: 1px solid var(--udex-button-color-warning-standard-disabled-border);
|
|
720
|
-
opacity: var(--sapContent_DisabledOpacity, 0.4);
|
|
721
729
|
}
|
|
722
730
|
|
|
723
731
|
/*Warning toggled*/
|
|
@@ -728,7 +736,7 @@
|
|
|
728
736
|
border: 1px solid var(--udex-button-color-warning-toggled-default-border);
|
|
729
737
|
}
|
|
730
738
|
|
|
731
|
-
:host([design="Attention"][toggled]:not([non-interactive]):not([_is-touch]):not([disabled]):hover)
|
|
739
|
+
:host([design="Attention"][toggled]:not([non-interactive]):not([_is-touch]):not([disabled]):hover),
|
|
732
740
|
:host([design="Warning"][toggled]:not([non-interactive]):not([_is-touch]):not([disabled]):hover) {
|
|
733
741
|
color: var(--udex-button-color-warning-toggled-hover-text-and-icon);
|
|
734
742
|
background-color: var(--udex-button-color-warning-toggled-hover-background);
|
|
@@ -740,5 +748,45 @@
|
|
|
740
748
|
color: var(--udex-button-color-warning-toggled-disabled-text-and-icon);
|
|
741
749
|
background-color: var(--udex-button-color-warning-toggled-disabled-background);
|
|
742
750
|
border: 1px solid var(--udex-button-color-warning-toggled-disabled-border);
|
|
751
|
+
}
|
|
752
|
+
|
|
753
|
+
:host([aria-disabled="true"][design="Tertiary"]) .ui5-button-root,
|
|
754
|
+
:host([_aria-disabled][design="Tertiary"]) .ui5-button-root,
|
|
755
|
+
:host([design="Tertiary"][_aria-disabled][active]),
|
|
756
|
+
:host([design="Tertiary"][aria-disabled="true"][active]) {
|
|
757
|
+
color: var(--udex-button-color-tertiary-standard-disabled-text-and-icon);
|
|
758
|
+
background-color: var(--udex-button-color-tertiary-standard-disabled-background);
|
|
759
|
+
border: 1px solid var(--udex-button-color-tertiary-standard-disabled-border);
|
|
760
|
+
}
|
|
761
|
+
|
|
762
|
+
:host([aria-disabled="true"][design="Tertiary"]) .ui5-button-root,
|
|
763
|
+
:host([_aria-disabled][design="Tertiary"]) .ui5-button-root {
|
|
743
764
|
opacity: var(--sapContent_DisabledOpacity, 0.4);
|
|
744
765
|
}
|
|
766
|
+
|
|
767
|
+
:host([design="Tertiary"][aria-disabled="true"]:not([active]):not([non-interactive]):not([_is-touch]):not([toggled]):hover),
|
|
768
|
+
:host([design="Tertiary"][aria-disabled="true"][active]:not([non-interactive]):not([_is-touch]):not([toggled]))
|
|
769
|
+
:host([design="Tertiary"][_aria-disabled][active]:not([non-interactive]):not([_is-touch]):not([toggled])),
|
|
770
|
+
:host([design="Tertiary"][_aria-disabled]:not([active]):not([non-interactive]):not([_is-touch]):not([disabled]):not([toggled]):hover) {
|
|
771
|
+
color: var(--udex-button-color-tertiary-standard-disabled-text-and-icon);
|
|
772
|
+
background-color: var(--udex-button-color-tertiary-standard-disabled-background);
|
|
773
|
+
border: 1px solid var(--udex-button-color-tertiary-standard-disabled-border);
|
|
774
|
+
}
|
|
775
|
+
|
|
776
|
+
:host([design="Tertiary"][aria-disabled="true"][active]:not([non-interactive]):not([_is-touch]):not([toggled])),
|
|
777
|
+
:host([design="Tertiary"][_aria-disabled][active]:not([disabled])),
|
|
778
|
+
:host([desktop][design="Tertiary"][aria-disabled="true"][active]:not([non-interactive]):not([_is-touch]):not([toggled])),
|
|
779
|
+
:host([desktop][design="Tertiary"][_aria-disabled][active]) {
|
|
780
|
+
border: none;
|
|
781
|
+
}
|
|
782
|
+
|
|
783
|
+
:host([desktop][design="Tertiary"][_aria-disabled]) .ui5-button-root::after,
|
|
784
|
+
:host([desktop][design="Tertiary"][_aria-disabled]) .ui5-button-root::before,
|
|
785
|
+
:host([desktop][active][design="Tertiary"][_aria-disabled]) .ui5-button-root::after,
|
|
786
|
+
:host([desktop][active][design="Tertiary"][_aria-disabled]) .ui5-button-root::before,
|
|
787
|
+
:host([desktop][design="Tertiary"][aria-disabled="true"]) .ui5-button-root::after,
|
|
788
|
+
:host([desktop][design="Tertiary"][aria-disabled="true"]) .ui5-button-root::before,
|
|
789
|
+
:host([desktop][active][design="Tertiary"][aria-disabled="true"]) .ui5-button-root::after,
|
|
790
|
+
:host([desktop][active][design="Tertiary"][aria-disabled="true"]) .ui5-button-root::before {
|
|
791
|
+
content: none;
|
|
792
|
+
}
|