Skip to content

Commit

Permalink
feat(stepper): add some initial styles
Browse files Browse the repository at this point in the history 
- updating the layout to look more like the final design
  • Loading branch information
MPopov authored and mmart1n committed Sep 17, 2021
1 parent 0ee2367 commit ce3cf09
Show file tree
Hide file tree
Showing 6 changed files with 334 additions and 86 deletions.
120 changes: 68 additions & 52 deletions projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,66 +12,82 @@
@extend %stepper-display !optional;

@include e(header) {
display: flex;
flex-direction: column;
gap: 20px;
width: 100%;
@extend %igx-stepper__header !optional;
}

@include e(body) {
display: flex;
flex-direction: row;
overflow: hidden;
position: relative
}

@include e(body-contnet) {
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
z-index: -1;
}

@include e(body-contnet, $m: active) {
z-index: 1;
position: relative;
@extend %igx-stepper__body !optional;
}
}

// TODO THIS SHOULD GO ON THE HOST ELEMENT
.igx-stepper__header--horizontal {
flex-direction: row;
justify-content: space-between;
}
@include e(step) {
@extend %igx-stepper__step !optional;
}

// content
.igx-stepper__header-step-content {
border: 2px solid #ccc;
border-radius: 15px;
padding: 16px;
}
@include e(step-header) {
@extend %igx-stepper__step-header !optional;
}

.igx-stepper__header-step-content:hover {
background-color: rgba($color: #ccc, $alpha: .5);
}
@include e(step-content) {
@extend %igx-stepper__step-content !optional;
}

.igx-stepper__header-step-content--active {
pointer-events: none;
background-color: rgba($color: green, $alpha: .5);
}
@include e(step, $m: active) {
@extend %igx-stepper__step--active !optional;
}

.igx-stepper__header-step-content--disabled {
pointer-events: none;
opacity: .5;
}
@include e(step, $m: skip) {
@extend %igx-stepper__step--skip !optional;
}

@include e(step, $m: disabled) {
@extend %igx-stepper__step--disabled !optional;
}

@include e(step-icon) {
@extend %igx-stepper__step-icon !optional;
}

@include e(step-icon, $m: valid) {
@extend %igx-stepper__step-icon--valid !optional;
}

.igx-stepper__header-step-content--skip {
opacity: .5;
@include e(step-icon, $m: invalid) {
@extend %igx-stepper__step-icon--invalid !optional;
}

@include e(title-wrapper) {
@extend %igx-stepper__title-wrapper !optional;
}

@include e(title) {
@extend %igx-stepper__title !optional;
}

@include e(title, $m: top) {
@extend %igx-stepper__title--top !optional;
}

@include e(title, $m: bottom) {
@extend %igx-stepper__title--bottom !optional;
}

@include e(title, $m: left) {
@extend %igx-stepper__title--left !optional;
}

@include e(title, $m: left) {
@extend %igx-stepper__title--right !optional;
}

@include m(horizontal) {
@extend %igx-stepper--horizontal !optional;

@include e(body-content) {
@extend %igx-stepper__body-content !optional;
}

@include e(body-content, $m: active) {
@extend %igx-stepper__body-content--active !optional;
}
}
}
228 changes: 223 additions & 5 deletions projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,14 +19,15 @@
@function igx-stepper-theme(
$palette: null,
$schema: $light-schema,
$step-hover-background: null,
$title-color: null,
$subtitle-color: null,
$incomplete-color: null,
$complete-color: null,
$error-color: null,
$optional-color: null,
$current-color: null,
$disabled-color: null,
//$complete-color: null,
//$error-color: null,
//$optional-color: null,
//$current-color: null,
//$disabled-color: null,
) {
$name: 'igx-switch';
$switch-schema: ();
Expand All @@ -42,6 +43,10 @@
@return extend($theme, (
name: $name,
palette: $palette,
step-hover-background: $step-hover-background,
title-color: $title-color,
subtitle-color: $subtitle-color,
incomplete-color: $incomplete-color,
));
}

Expand All @@ -57,11 +62,224 @@
$left: if-ltr(left, right);
$right: if-ltr(right, left);

%stepper-display,
%igx-stepper__header,
%igx-stepper__body,
%igx-stepper__step {
display: flex;
}

%stepper-display {
flex-direction: column;
width: 100%;
overflow: hidden;
}

%igx-stepper__header {
flex-direction: column;
width: 100%;
}

%igx-stepper__body {
overflow: hidden;
position: relative
}

%igx-stepper__step {
position: relative;
flex-direction: column;
align-content: center;
justify-content: center;

&:last-of-type {
&::before {
display: none;
}
}
}

%igx-stepper__step-header {
padding: rem(24px);
display: flex;
align-content: center;

&:hover {
//background: --var($theme, 'title-color');
background: rgba(255, 255, 255, .1);
}
}

%igx-stepper__step--active {
%igx-stepper__step-icon {
color: #4dff12;
}
}

%igx-stepper__step--skip {
%igx-stepper__step-icon {
color: #b22efd;
}
}

%igx-stepper__step--disabled {
%igx-stepper__step-icon,
%igx-stepper__title {
opacity: .3;
}

pointer-events: none;
cursor: default;
}

%igx-stepper__step-content {
margin-#{$left}: rem(36px);
position: relative;

&::before {
content: '';
position: absolute;
top: rem(-16px);
bottom: rem(-16px);
#{$left}: rem(0);
width: rem(1px);
background: #999;
}
}

%igx-stepper__body-content {
display: block;
position: absolute;
top: 0;
#{$left}: 0;
#{$right}: 0;
bottom: 0;
width: 100%;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
z-index: -1;
}

%igx-stepper__step-content,
%igx-stepper__body-content {
padding: 0 rem(24px) rem(24px) rem(24px);
}

%igx-stepper__body-content--active {
z-index: 1;
position: relative;
}

%igx-stepper__step-icon {
color: #09f;
margin-#{$right}: rem(12px);
}

%igx-stepper__step-icon--valid {
color: green;
}

%igx-stepper__step-icon--invalid {
color: red;
}

%igx-stepper__title-wrapper {
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
min-width: rem(50px);
}

%igx-stepper__title {
color: #fff;
text-overflow: ellipsis;
overflow: hidden;
}

%igx-stepper__title--top {
margin-bottom: rem(16px);
}

%igx-stepper__title--bottom {
margin-top: rem(16px);
}

%igx-stepper--horizontal {
%igx-stepper__header {
flex-direction: row;
}

%igx-stepper__step {
flex-direction: row;
flex-grow: 1;

&::after {
content: '';
width: auto;
height: 1px;
flex: 1;
top: rem(-13px);
position: relative;
align-self: center;
background: #999;
}

&:last-of-type {
flex-basis: 0;

%igx-stepper__step-header::after,
&::after {
display: none;
}
}

&:first-of-type {
%igx-stepper__step-header::before {
display: none;
}
}
}

%igx-stepper__step-header {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
padding: rem(24px) rem(32px);
margin: 0 rem(8px);
cursor: pointer;

&::before,
&::after {
top: rem(36px);
content: '';
position: absolute;
height: rem(1px);
background: #999;
width: calc(50% - 16px);
}

&::before {
#{$left}: rem(-8px);
}

&::after {
#{$right}: rem(-8px);
}
}

%igx-stepper__step-content {
&::before {
display: none;
}
}

%igx-stepper__step-icon {
margin: 0;
}
}
}

/// Adds typography styles for the igx-stepper component.
Expand Down
Loading

0 comments on commit ce3cf09

Please sign in to comment.