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 17, 2020
1 parent 3ef54bc commit 11748ac
Show file tree
Hide file tree
Showing 9 changed files with 906 additions and 665 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 @@ -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 11748ac

Please sign in to comment.