diff --git a/docs/_sass/_landingPage.scss b/docs/_sass/_landingPage.scss index 8ff26606f..4404ad845 100644 --- a/docs/_sass/_landingPage.scss +++ b/docs/_sass/_landingPage.scss @@ -1,3 +1,31 @@ +$button-focus: #02617e; +$button-hover: #006f91; +$button-regular: #007ea3; +$button-outline-hover: #007ea3; +$button-outline-focus: #006f91; + +@mixin button-focus() { + background-color: #02617e; + border-color: #02617e; +} + +@mixin button-hover() { + background-color: #006f91; + border-color: #006f91; +} + + +@mixin button-outline-hover() { + background-color: #007ea3; + border-color: #007ea3; +} + +@mixin button-outline-focus() { + background-color: #006f91; + border-color: #006f91; +} + + * { margin: 0; padding: 0; @@ -383,6 +411,35 @@ $learn-section-side-margin: 0 2rem; padding: 2.75rem 44px; max-width: 1440px; + .cta { + background-color: #eeeeef; + padding: 44px; + width: 100%; + margin-top: 44px; + + &__button-container { + display: flex; + flex-direction: column; + + :first-child { + margin-bottom: 8px; + } + } + + &__title { + @include text(); + font-size: 20px; + font-weight: bold; + } + + &__description { + @include text-mobile(); + font-size: 16px; + font-weight: normal; + margin-bottom: 20px; + } + } + &--learn { padding-top: 0; } @@ -427,26 +484,126 @@ $learn-section-side-margin: 0 2rem; justify-content: center; align-items: center; outline-offset: -0.25rem; + padding: 8px 0; + height: 36px; + font-size: 14px; &:visited { - color: white; + color: $button-regular; &:hover { color: white; + @include button-hover(); } &:focus { color: white; + @include button-focus(); outline: dotted 0.125rem white; + + :hover { + @include button-focus(); + } } } + &:hover { + cursor: pointer; + background-color: $button-hover; color: white; } + &:active { + @include button-focus(); + } + &:focus { color: white; outline: dotted 0.125rem white; + @include button-focus(); + + :hover { + @include button-focus(); + + } + } + + &--outline { + background-color: transparent; + color: #007ea3; + border: solid 3px #007ea3; + + &:visited { + &:hover { + @include button-outline-hover(); + color: white; + } + + &:focus { + color: white; + @include button-outline-focus(); + outline: dotted 0.125rem white; + + &:hover { + @include button-outline-focus(); + } + } + + &:active { + color: white; + @include button-outline-focus(); + + &:hover { + @include button-outline-hover(); + color: white; + } + + &:focus { + color: white; + @include button-outline-focus(); + outline: dotted 0.125rem white; + + &:hover { + @include button-outline-focus(); + } + } + } + } + + &:active { + color: white; + @include button-outline-focus(); + + &:hover { + @include button-outline-hover(); + color: white; + } + + &:focus { + color: white; + @include button-outline-focus(); + outline: dotted 0.125rem white; + + &:hover { + @include button-outline-focus(); + } + } + } + + &:focus { + color: white; + @include button-outline-focus(); + outline: dotted 0.125rem white; + + &:hover { + @include button-outline-focus(); + } + } + + &:hover { + @include button-outline-hover(); + color: white; + } } } @@ -462,6 +619,10 @@ $learn-section-side-margin: 0 2rem; align-items: center; width: 100%; padding: 0; + + > :last-child { + margin-bottom: 0; + } } &__item { @@ -536,7 +697,7 @@ $learn-section-side-margin: 0 2rem; @include text(); @include item-title-mobile(); margin: 1rem 0 1rem 0; - font-weight: normal; + font-weight: bold; &--learn { padding: 0 2rem; @@ -691,6 +852,10 @@ $learn-section-side-margin: 0 2rem; text-align: left; margin-bottom: 1.25rem; + &--subtitle { + margin-bottom: 44px; + } + &--learn { margin: $learn-section-side-margin; font-size: 20px; @@ -735,18 +900,11 @@ $learn-section-side-margin: 0 2rem; padding: 140px 44px; } - // .community-section { - // &__text { - // width: 100%; - // text-align: left; - // } - // } - .features-section { padding: 0 44px 140px 44px; } .community-section { - padding: 140px 120px; + padding: 140px 44; &__container { margin-left: -22px; @@ -820,6 +978,10 @@ $learn-section-side-margin: 0 2rem; &__button { margin-top: 1.25rem; + width: auto; + height: 44px; + padding: 12px 35px; + font-size: 18px; &--next-prev { height: 2rem; @@ -941,9 +1103,42 @@ $learn-section-side-margin: 0 2rem; } } - &__title { - font-size: 48px; - margin-bottom: 4.1875rem; + + &--subtitle { + margin-bottom: 44px; + } + + &__title { + font-size: 48px; + margin-bottom: 4.1875rem; + } + + .cta { + padding: 42px; + margin-top: 60px; + + &__title { + font-size: 30px; + } + + &__description { + margin: 20px 0; + font-size: 20px; + } + + &__button-container { + flex-direction: row; + + button, a { + margin: 0; + font-size: 18px; + } + + :first-child { + margin-bottom: 0; + margin-right: 8px; + } + } } } } @@ -974,6 +1169,11 @@ $learn-section-side-margin: 0 2rem; } .section { + padding: 140px 120px; + + &--learn { + padding-top: 0; + } &--testemonials { margin-top: 55px; @@ -998,6 +1198,9 @@ $learn-section-side-margin: 0 2rem; } &__button { + font-size: 18px; + padding: 12px 35px; + &--next-prev{ height: 2rem; width: 2rem; @@ -1136,6 +1339,29 @@ $learn-section-side-margin: 0 2rem; font-size: 55px; margin-bottom: 4.1875rem; } + + .cta { + padding: 34px; + margin-top: 64px; + + &__button-container { + margin-top: 32px; + } + + &__title, &__description { + @include text(); + } + + &__title { + font-size: 30px; + font-weight: bold; + } + + &__description { + font-size: 20px; + font-weight: normal; + } + } } } @@ -1222,9 +1448,6 @@ $learn-section-side-margin: 0 2rem; .section { &__button { - width: auto; - height: auto; - padding: 0.5rem 1rem; border-radius: 0.5rem; font-size: 24px; @@ -1273,6 +1496,10 @@ $learn-section-side-margin: 0 2rem; font-size: 24px; line-height: normal; margin: 0; + + &--subtitle { + margin-bottom: 44px; + } } &__title { @@ -1466,8 +1693,10 @@ body { } } -@media (max-width: 900px) { +@media (max-width: 1023px) { .libraries-section { + padding: 80px 44px; + &__container { grid-template-columns: auto; } diff --git a/docs/index.html b/docs/index.html index 7347d129b..48a94be4c 100755 --- a/docs/index.html +++ b/docs/index.html @@ -182,13 +182,9 @@

More about Fundamental Library

Design

-

- Our UI Kit bundle includes ready-to-use, state-of-the-art drafts of SAP layouts, patterns and components in Sketch. You are welcome to use the UI kit to visualize your SAP app. They are easy to use and will provide a realistic impression of your final designs. +

+ Want to visualize an application with the SAP Fiori design system? Our UI kit provides users with ready-to-use, state-of-the-art drafts of SAP Fiori layouts, patterns and components in Sketch. They are easy to implement, and will provide you with a realistic impression of your final design. The UI Kit bundle includes:

-
- Download -
-

What's in the UI Kit bundle?

@@ -198,7 +194,7 @@

What's in the UI Kit bundle?

class="section__logo"/>

Sketch UI Kit v0.10.0

-

Our Sketch file has over 30 unique, refined, and streamlined components to empower anyone using Fundamental Library with the ability to quickly and efficiently build Fiori 3 interfaces.

+

Our UI kit is a sketch file with over 30 unique, refined, and streamlined components to empower anyone using Fundamental Library with the ability to quickly and efficiently build SAP Fiori interfaces.

Sketch UI Kit v0.10.0 class="section__logo" />

72 Font

-

SAP 72 font family was designed from the ground up and made it possible to meet SAP's typographic requirements, including - Legibility Enhancements, Font Styles, Brand Voice, Character Set and Language Support.

+

SAP’s 72 font family was designed from the ground up to meet SAP's typographic requirements, including: legibility enhancements, font styles, brand voice, character set, language support and accessibility.

72 Font class="section__logo" />

Icon Font

-

SAP icons have been created with a friendly, yet elegant style that is consistent in terms of size, stroke and balance. The icons are tailored for simple and direct user interaction, using metaphors that are easy to understand.

+

SAP offers their icons in font format to ensure scalability and readability at all sizes. The style is friendly, elegant and consistent. The icons are tailored for simple and direct user interaction, using metaphors that are easy to understand.

+
+

+ The most intuitive and engaging design system for enterprise software +

+

When you design with Fundamental Library, you’re implementing best-in-class SAP Fiori design from the largest enterprise software company in the world.

+
+ + Explore SAP Fiori +
+