Skip to content

Commit

Permalink
fix: bring v.0.14.0 of fundamental-styles
Browse files Browse the repository at this point in the history
  • Loading branch information
InnaAtanasova committed Dec 15, 2020
1 parent 5de5d4c commit 4d2ebe9
Show file tree
Hide file tree
Showing 10 changed files with 906 additions and 669 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -6,3 +6,8 @@
Compact Switch
</label>
<fd-switch [compact]="true" [(ngModel)]="checked"></fd-switch>

<label fd-form-label>
Switch with Text
</label>
<fd-switch activeText="On" inactiveText="Off"></fd-switch>
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@
Default switch with variations
</fd-docs-section-title>

<description
>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.</description
>
<description>
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.
</description>
<component-example>
<fd-switch-sizes-example></fd-switch-sizes-example>
</component-example>
Expand Down
Original file line number Diff line number Diff line change
@@ -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/master/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';
28 changes: 15 additions & 13 deletions libs/core/src/lib/switch/switch.component.html
Original file line number Diff line number Diff line change
@@ -1,13 +1,15 @@
<label class="fd-switch__label" (click)="focus()" [ngStyle]="{ cursor: disabled ? 'auto' : 'pointer'}">
<span
class="fd-switch"
[ngClass]="{
'fd-switch--no-text': !optionalText && !semantic,
'fd-switch--compact': compact,
'fd-switch--semantic': semantic,
'is-disabled': disabled
}"
>
<label
class="fd-switch"
(click)="focus()"
[ngStyle]="{ cursor: disabled ? 'auto' : 'pointer'}"
[class.fd-switch--compact]="compact"
[class.fd-switch--semantic]="semantic"
[class.is-disabled]="disabled"
>
<span *ngIf="activeText || inactiveText" class="fd-switch__text">
{{isChecked ? activeText : inactiveText}}
</span>
<span class="fd-switch__control">
<input
#switchInput
class="fd-switch__input"
Expand All @@ -21,17 +23,17 @@
[attr.aria-labelledby]="ariaLabelledby"
[(ngModel)]="isChecked"
/>
<div class="fd-switch__wrapper">
<div class="fd-switch__slider">
<div class="fd-switch__track">
<i
*ngIf="semantic"
role="presentation"
class="fd-switch__text fd-switch__icon--on fd-switch__icon sap-icon--accept"></i>
class="fd-switch__icon fd-switch__icon--on sap-icon--accept"></i>
<span class="fd-switch__handle" role="presentation"></span>
<i
*ngIf="semantic"
role="presentation"
class="fd-switch__text fd-switch__icon--off fd-switch__icon sap-icon--decline"></i>
class="fd-switch__icon--off fd-switch__icon sap-icon--decline"></i>
</div>
</div>
</span>
Expand Down
13 changes: 0 additions & 13 deletions libs/core/src/lib/switch/switch.component.scss
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,3 @@
.fd-switch-custom {
display: block;
}

.fd-switch__wrapper {
[class*=sap-icon] {
line-height: 2rem;
&.fd-switch__icon--off {
color: var(--sapNegativeElementColor, #b00);
}

&.fd-switch__icon--on {
color: var(--sapPositiveElementColor, #107e3e);
}
}
}
8 changes: 6 additions & 2 deletions libs/core/src/lib/switch/switch.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -41,9 +41,13 @@ export class SwitchComponent implements ControlValueAccessor {
@ViewChild('switchInput')
inputElement: ElementRef<HTMLInputElement>;

/** If the switch should have text in it or not. */
/** Optional text for the active state of the switch. */
@Input()
optionalText = false;
activeText = '';

/** Optional text for the inactive state of the switch. */
@Input()
inactiveText = '';

/** Whether the switch is disabled. */
@Input()
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -727,10 +727,6 @@
font-size: inherit;
}

.fd-dynamic-page__collapsible-header-container--collapsed {
z-index: 1;
}

.fd-dynamic-page__collapsible-header {
font-size: 0.875rem;
font-size: var(--sapFontSize, 0.875rem);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@ describe('SwitchComponent', () => {
});

it('should trigger an event after click', async () => {
const switchLabel = fixture.debugElement.query(By.css('#switch-0 .fd-switch__label'));
const switchLabel = fixture.debugElement.query(By.css('#switch-0 .fd-switch'));

expect(component.switch0CurrentValue).toBeNull();

Expand All @@ -139,7 +139,7 @@ describe('SwitchComponent', () => {
expect(switches[0].switchCurrentValue).toBeFalse();
expect(component.customForm.get('switch0').value).toBeFalse();

const switchLabel = fixture.debugElement.query(By.css('#switch-0 .fd-switch__label'));
const switchLabel = fixture.debugElement.query(By.css('#switch-0 .fd-switch'));

switchLabel.nativeElement.click();
fixture.detectChanges();
Expand Down Expand Up @@ -174,7 +174,7 @@ describe('SwitchComponent', () => {
fixture.detectChanges();

const switches = component.fdpSwitch.toArray();
const switchLabel = fixture.debugElement.query(By.css('#switch-3 .fd-switch__label'));
const switchLabel = fixture.debugElement.query(By.css('#switch-3 .fd-switch'));

fixture.detectChanges();

Expand Down
Loading

0 comments on commit 4d2ebe9

Please sign in to comment.