Skip to content

Commit

Permalink
feat(fn): refactor Slider and introduce Progress Bar (#2983)
Browse files Browse the repository at this point in the history
  • Loading branch information
@InnaAtanasova
InnaAtanasova committed Dec 15, 2021
1 parent 72ff90f commit 0c69840
Show file tree
Hide file tree
Showing 8 changed files with 1,076 additions and 404 deletions.
2 changes: 1 addition & 1 deletion src/fn/_fn-new-variables.scss
View file
Expand Up @@ -148,7 +148,7 @@ $fn-color-crimson-800: #71014b;
$fn-color-crimson-900: #510136;

// Border radius
$fn-border-radius-4: 0.25rem; // 4px
$fn-border-radius-4: 0.25rem; // 4px
$fn-border-radius-6: 0.375rem; // 6px
$fn-border-radius-8: 0.5rem; // 8px
$fn-border-radius-10: 0.625rem; // 10px
Expand Down
76 changes: 76 additions & 0 deletions src/fn/fn-progress-bar.scss
View file
@@ -0,0 +1,76 @@
@import "./fn-settings";

$block: #{$fn-namespace}-progress-bar;
$fn-progress-bar-offset: 0.125rem;

$fn-progress-bar-colors: (
"positive": ("color": $fn-color-green-500),
"critical": ("color": $fn-color-orange-400),
"negative": ("color": $fn-color-red-500),
);

@mixin fn-progress-bar-dot() {
@include fn-reset();

content: '';
z-index: 1;
width: 0.25rem;
height: 0.25rem;
position: absolute;
border-radius: 50%;
top: $fn-progress-bar-offset;
left: $fn-progress-bar-offset;
background: $fn-color-grey-500;

@content;
}

.#{$block} {
@include fn-reset();

width: 100%;
height: 0.5rem;
position: relative;
background: $fn-color-grey-100;
border-radius: $fn-border-radius-4;

&::after {
@include fn-progress-bar-dot();
}

&::before {
@include fn-progress-bar-dot() {
left: auto;
right: $fn-progress-bar-offset;
}
}

@include fn-disabled() {
pointer-events: none;
opacity: $fn-disabled-opacity;
}

&__track {
@include fn-reset();

z-index: 2;
height: 0.75rem;
position: absolute;
background: $fn-color-grey-700;
top: -1 * $fn-progress-bar-offset;
border-radius: $fn-border-radius-6;
}

@each $set-name, $set-color in $fn-progress-bar-colors {
&--#{$set-name} {
&::after,
&::before {
background: map_get($set-color, "color");
}

.#{$block}__track {
background: map_get($set-color, "color");
}
}
}
}
176 changes: 90 additions & 86 deletions src/fn/fn-slider.scss
View file
Expand Up @@ -2,94 +2,97 @@

$block: #{$fn-namespace}-slider;
$tag-border-width: 0.125rem;
$slider-handle-width: 2rem;
$slider-handle-height: 1.5rem;
$slider-dot-size: 0.5rem;
$slider-height: 0.25rem;
$slider-handle-wrapper-offset: ($slider-handle-width / 2) - $fn-margin-xs - $slider-dot-size;
$slider-handle-width: 2.25rem;
$slider-handle-height: 1.625rem;
$slider-dot-size: 0.25rem;
$slider-height: 0.5rem;

@mixin fn-slider-dot() {
@include fn-reset();

content: '';
z-index: 1;
top: 0.125rem;
left: 0.125rem;
position: absolute;
border-radius: 50%;
width: $slider-dot-size;
height: $slider-dot-size;
background: $fn-color-grey-500;

@content;
}

.#{$block} {
@include fn-reset();
@include fn-flex-vertical-center();

width: 100%;
position: relative;
height: $slider-height;
background: $fn-color-grey-100;
border-radius: $fn-border-radius-4;

&__dot {
@include fn-reset();

width: $slider-dot-size;
height: $slider-dot-size;
border-radius: 50%;
background: $fn-color-grey-4;
&::after {
@include fn-slider-dot();
}

&--active {
background: $fn-color-blue-4;
&::before {
@include fn-slider-dot() {
left: auto;
right: 0.125rem;
}
}

&__track {
@include fn-reset();

width: 100%;
height: $slider-height;
position: relative;
margin: 0 $fn-margin-xs;
background: $fn-color-grey-2;
border-radius: $fn-border-radius-xs;
@include fn-disabled() {
pointer-events: none;
opacity: $fn-disabled-opacity;
}

&__track-range {
&__track {
@include fn-reset();

top: 0;
left: 0;
height: 0.25rem;
top: -0.5625rem;
position: absolute;
background: $fn-color-blue-4;
border-radius: $fn-border-radius-xs;
z-index: 1;
height: $slider-handle-height;
border-radius: $fn-border-radius-6;
}

&__handle-wrapper {
&__track-range {
@include fn-reset();
@include fn-flex-vertical-center();
@include fn-set-position-left(0);

position: absolute;
top: 0;
left: $slider-handle-wrapper-offset;
right: $slider-handle-wrapper-offset;
bottom: 0;
z-index: 2;
width: 100%;
top: 0.4375rem;
height: 0.75rem;
position: absolute;
background: $fn-color-blue-500;
border-radius: $fn-border-radius-6;
}

&__handle {
@include fn-reset();
@include fn-transition(box-shadow);
@include fn-flex-vertical-center();
@include fn-set-position-left(100%);

@include fn-flex() {
justify-content: space-between;
}

width: $slider-handle-width;
height: $slider-handle-height;
z-index: 3;
cursor: pointer;
padding: 0.5rem;
position: absolute;
background: $fn-color-white;
width: $slider-handle-width;
transform: translateX(-50%);
background: $fn-color-base-white;
box-shadow: $fn-shadow-blue-small;
border-radius: $fn-border-radius-small;
height: $slider-handle-height;
border-radius: $fn-border-radius-6;
box-shadow: $fn-shadow-blue-level-0;

[class*='sap-icon'] {
top: 0.125rem;
position: absolute;
color: $fn-color-blue-5;
font-size: 0.75rem;
color: $fn-color-blue-500;
}

[class*='sap-icon']:first-child {
@include fn-set-position-left(0.3125rem);

transform: rotate(90deg);

@include fn-rtl() {
Expand All @@ -98,64 +101,65 @@ $slider-handle-wrapper-offset: ($slider-handle-width / 2) - $fn-margin-xs - $sli
}

[class*='sap-icon']:last-child {
@include fn-set-position-right(0.3125rem);

margin-left: 0.375rem;
transform: rotate(-90deg);

@include fn-rtl() {
margin-left: auto;
margin-right: 0.375rem;
transform: rotate(90deg);
}
}

&[aria-valuenow="0"] {
transform: translateX(0);
}

&[aria-valuenow="100"] {
transform: translateX(-100%);
}

@include fn-focus() {
outline: none;
}

@include fn-hover() {
box-shadow: $fn-shadow-blue-medium;
}
box-shadow: $fn-shadow-blue-level-1;

@include fn-pressed() {
box-shadow: $fn-shadow-blue-xs;
@include fn-active() {
box-shadow: $fn-shadow-blue-level-0;
}
}

@include fn-active() {
box-shadow: $fn-shadow-blue-xs;
box-shadow: $fn-shadow-blue-level-0;
}
}

&--vertical {
flex-direction: column-reverse;
height: 100%;
@include fn-is-focus() {
box-shadow: $fn-focus-outline-shadow-blue;
}

.#{$block} {
&__track {
@include fn-reset();
@include fn-not-focus-visible() {
box-shadow: $fn-shadow-blue-level-0;

width: $slider-height;
height: 100%;
position: relative;
margin: $fn-margin-xs 0;
}
@include fn-hover() {
box-shadow: $fn-shadow-blue-level-1;

&__handle-wrapper {
top: $slider-handle-wrapper-offset;
left: 0;
right: 0;
bottom: $slider-handle-wrapper-offset;
justify-content: center;
@include fn-active() {
box-shadow: $fn-shadow-blue-level-0;
}
}
}

&__track-range {
bottom: 0;
top: auto;
height: 0;
width: $slider-height;
}
@include fn-focus-visible() {
box-shadow: $fn-focus-outline-shadow-blue;
}
}

&__handle {
transform: translateY(50%) rotate(90deg);
box-shadow: $fn-shadow-blue-small-horizontal;
&--range {
.#{$block}__handle {
&:first-child {
@include fn-set-position-left(0);
}
}
}
Expand Down
1 change: 1 addition & 0 deletions src/fn/fundamental-next.scss
View file
Expand Up @@ -4,6 +4,7 @@
@import "./fn-fieldset";
@import "./fn-input";
@import "./fn-nested-button";
@import "./fn-progress-bar";
@import "./fn-radio";
@import "./fn-search";
@import "./fn-segmented-button";
Expand Down

0 comments on commit 0c69840

Please sign in to comment.