diff --git a/apps/docs/src/app/core/component-docs/switch/examples/switch-sizes-example/switch-sizes-example.component.html b/apps/docs/src/app/core/component-docs/switch/examples/switch-sizes-example/switch-sizes-example.component.html index a9f32fd4cbd..15774dbe8f5 100644 --- a/apps/docs/src/app/core/component-docs/switch/examples/switch-sizes-example/switch-sizes-example.component.html +++ b/apps/docs/src/app/core/component-docs/switch/examples/switch-sizes-example/switch-sizes-example.component.html @@ -6,3 +6,8 @@ Compact Switch + + + \ No newline at end of file diff --git a/apps/docs/src/app/core/component-docs/switch/switch-docs.component.html b/apps/docs/src/app/core/component-docs/switch/switch-docs.component.html index 0aa2b07c59c..b697f173fff 100644 --- a/apps/docs/src/app/core/component-docs/switch/switch-docs.component.html +++ b/apps/docs/src/app/core/component-docs/switch/switch-docs.component.html @@ -2,10 +2,10 @@ Default switch with variations -Default switch which can include a [optionalText] input to remove text. The [optionalText] input is set to true by - default. The [compact] input will make the switch compact. + + Set the [compact] input property to true to render switch in compact mode. + An optional text for the active and inactive states of the switch can be set by providing values for the [inactiveText] and [activeText] input properties. + diff --git a/apps/docs/src/app/documentation/core-helpers/header-tabs/header-tabs.component.scss b/apps/docs/src/app/documentation/core-helpers/header-tabs/header-tabs.component.scss index 9f1102a20bc..5899ee9d4e8 100644 --- a/apps/docs/src/app/documentation/core-helpers/header-tabs/header-tabs.component.scss +++ b/apps/docs/src/app/documentation/core-helpers/header-tabs/header-tabs.component.scss @@ -5,6 +5,7 @@ .fd-tabs { margin-bottom: 0; margin-top: 24px; + box-shadow: none; } .fd-tabs__item { diff --git a/libs/core/src/lib/button/button.component.scss b/libs/core/src/lib/button/button.component.scss index d386e6c883e..1ba1473be6c 100644 --- a/libs/core/src/lib/button/button.component.scss +++ b/libs/core/src/lib/button/button.component.scss @@ -1,24 +1 @@ @import '~fundamental-styles/dist/button'; - -// Remove after 0.13.1/0.14 is introduced into NGX -.fd-button { - justify-content: center; - - .fd-button__text { - font-weight: inherit; - } - - .fd-button--text-alignment-left { - justify-content: flex-start; - } -} - -.fd-button * + * { - margin-left: 0.375rem !important; -} - -.fd-button * + [dir='rtl'], -[dir='rtl'] .fd-button * + * { - margin-left: 0 !important; - margin-right: 0.375rem !important; -} diff --git a/libs/core/src/lib/flexible-column-layout/flexible-column-layout.component.scss b/libs/core/src/lib/flexible-column-layout/flexible-column-layout.component.scss index a4d078908c4..fbecc2c2c01 100644 --- a/libs/core/src/lib/flexible-column-layout/flexible-column-layout.component.scss +++ b/libs/core/src/lib/flexible-column-layout/flexible-column-layout.component.scss @@ -1,193 +1,2 @@ -/*! - * Fundamental Library Styles v0.13.1-rc.5 - * Copyright (c) 2020 SAP SE or an SAP affiliate company. - * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE) - */ -@charset "UTF-8"; @import '~fundamental-styles/dist/button'; -.fd-flexible-column-layout { - font-size: 0.875rem; - font-size: var(--sapFontSize, 0.875rem); - line-height: 1.4; - line-height: var(--sapContent_LineHeight, 1.4); - color: #32363a; - color: var(--sapTextColor, #32363a); - font-family: '72', '72full', Arial, Helvetica, sans-serif; - font-family: var(--sapFontFamily, '72', '72full', Arial, Helvetica, sans-serif); - font-weight: 400; - -webkit-font-smoothing: antialiased; - -webkit-box-sizing: border-box; - box-sizing: border-box; - padding: 0; - margin: 0; - border: 0; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; -} -.fd-flexible-column-layout::after, -.fd-flexible-column-layout::before { - -webkit-box-sizing: inherit; - box-sizing: inherit; - font-size: inherit; -} -.fd-flexible-column-layout__separator { - font-size: 0.875rem; - font-size: var(--sapFontSize, 0.875rem); - line-height: 1.4; - line-height: var(--sapContent_LineHeight, 1.4); - color: #32363a; - color: var(--sapTextColor, #32363a); - font-family: '72', '72full', Arial, Helvetica, sans-serif; - font-family: var(--sapFontFamily, '72', '72full', Arial, Helvetica, sans-serif); - font-weight: 400; - -webkit-font-smoothing: antialiased; - -webkit-box-sizing: border-box; - box-sizing: border-box; - padding: 0; - margin: 0; - border: 0; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - position: relative; - width: 1rem; - min-width: 1rem; - background-color: #edeff0; - background-color: var(--fdFlexibleColumnBackgroundSolid, var(--sapShell_Background, #edeff0)); -} -.fd-flexible-column-layout__separator::after, -.fd-flexible-column-layout__separator::before { - -webkit-box-sizing: inherit; - box-sizing: inherit; - font-size: inherit; -} -.fd-flexible-column-layout__separator::after, -.fd-flexible-column-layout__separator::before { - content: ''; - display: block; - width: 0.0625rem; - height: 4rem; - -webkit-transition: all 0.1s ease-in; - transition: all 0.1s ease-in; - position: absolute; - left: 50%; - -webkit-transform: translateX(-50%); - transform: translateX(-50%); -} -.fd-flexible-column-layout__separator::before { - bottom: calc(50% + 2rem / 2); - background-image: -webkit-gradient(linear, left bottom, left top, from(#0854a0), to(transparent)); - background-image: -webkit-gradient( - linear, - left bottom, - left top, - from(var(--fdFlexibleColumnLayoutToggleImageColor, var(--sapHighlightColor, #0854a0))), - to(transparent) - ); - background-image: linear-gradient(to top, #0854a0, transparent); - background-image: linear-gradient( - to top, - var(--fdFlexibleColumnLayoutToggleImageColor, var(--sapHighlightColor, #0854a0)), - transparent - ); -} -.fd-flexible-column-layout__separator::after { - top: calc(50% + 2rem / 2); - background-image: -webkit-gradient(linear, left top, left bottom, from(#0854a0), to(transparent)); - background-image: -webkit-gradient( - linear, - left top, - left bottom, - from(var(--fdFlexibleColumnLayoutToggleImageColor, var(--sapHighlightColor, #0854a0))), - to(transparent) - ); - background-image: linear-gradient(to bottom, #0854a0, transparent); - background-image: linear-gradient( - to bottom, - var(--fdFlexibleColumnLayoutToggleImageColor, var(--sapHighlightColor, #0854a0)), - transparent - ); -} -.fd-flexible-column-layout__separator.is-hover::after, -.fd-flexible-column-layout__separator.is-hover::before, -.fd-flexible-column-layout__separator:hover::after, -.fd-flexible-column-layout__separator:hover::before { - height: 7rem; -} -.fd-flexible-column-layout .fd-flexible-column-layout__button { - height: 2rem; - width: 1.5rem; - min-width: 1.5rem; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - position: absolute; - left: 50%; - top: 50%; - -webkit-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); -} -.fd-flexible-column-layout__column { - font-size: 0.875rem; - font-size: var(--sapFontSize, 0.875rem); - line-height: 1.4; - line-height: var(--sapContent_LineHeight, 1.4); - color: #32363a; - color: var(--sapTextColor, #32363a); - font-family: '72', '72full', Arial, Helvetica, sans-serif; - font-family: var(--sapFontFamily, '72', '72full', Arial, Helvetica, sans-serif); - font-weight: 400; - -webkit-font-smoothing: antialiased; - -webkit-box-sizing: border-box; - box-sizing: border-box; - padding: 0; - margin: 0; - border: 0; - min-width: 20rem; - border-left: none; - border-left: var(--fdFlexibleColumnLayoutBorder, none); - border-right: none; - border-right: var(--fdFlexibleColumnLayoutBorder, none); -} -.fd-flexible-column-layout__column::after, -.fd-flexible-column-layout__column::before { - -webkit-box-sizing: inherit; - box-sizing: inherit; - font-size: inherit; -} -.fd-flexible-column-layout__column:first-child { - margin-left: 0; - border-left: none; -} -.fd-flexible-column-layout__column:last-child { - margin-bottom: 0; - margin-right: 0; - border-right: none; -} -.fd-flexible-column-layout__column--hidden { - border: none; - min-width: 0; -} -.fd-flexible-column-layout--translucent .fd-flexible-column-layout__separator { - background-color: #fff; - background-color: var(--fdFlexibleColumnBackgroundTranslucent, var(--sapGroup_ContentBackground, #fff)); -} -.fd-flexible-column-layout--transparent .fd-flexible-column-layout__separator { - background-color: transparent; - background-color: var(--fdFlexibleColumnBackgroundTransparent, transparent); -} - -.fd-flexible-column-layout__column { - transition: width 560ms cubic-bezier(0.1, 0, 0.05, 1), visibility 560ms ease-in; -} +@import '~fundamental-styles/dist/flexible-column-layout'; diff --git a/libs/core/src/lib/switch/switch.component.html b/libs/core/src/lib/switch/switch.component.html index ff6812bb6d1..b5c1600a3a3 100644 --- a/libs/core/src/lib/switch/switch.component.html +++ b/libs/core/src/lib/switch/switch.component.html @@ -1,13 +1,15 @@ -